/* =========================================================
   MALENITY — hoja de estilos única
   1. Variables de marca     6. El vuelo (mapa)
   2. Base                   7. Capítulos
   3. Textos y botones       8. Palabras
   4. Barra superior         9. Sobre mí
   5. Portada y manifiesto  10. Cierre y pie
                            11. Movimiento reducido
   Las secciones con data-progreso reciben --p (de 0 a 1)
   desde js/main.js según cuánto scrolleaste.
   ========================================================= */

/* 1. VARIABLES DE MARCA — cambiá la marca desde acá */
:root {
  --crema: #FFFDFB;
  --crema-2: #F8F4F1;
  --rosa-claro: #FBE3EA;
  --rosa-linea: #F698B3;
  --rosa: #E0628A;
  --rosa-oscuro: #B8456C;
  --verde: #1B3B2F;
  --verde-2: #2E5443;
  --texto: #2B2B2B;
  --gris: #8A8580;

  --f-titulo: 'Playfair Display', Georgia, serif;
  --f-texto: 'Lora', Georgia, serif;
  --f-etiqueta: 'Poppins', system-ui, sans-serif;
  --f-mano: 'Caveat', 'Segoe Print', cursive;

  --alto-nav: 3.5rem;
  --suave: cubic-bezier(.2, .7, .2, 1);
}

/* 2. BASE */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--alto-nav); }
body {
  margin: 0;
  background: var(--crema);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: 1.1rem;
  line-height: 1.7;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--f-titulo); color: var(--verde); line-height: 1.05; margin: 0; font-weight: 700; letter-spacing: -.01em; }
h2 em, h1 em { font-weight: 400; }
p { margin: 0 0 1rem; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; }
.contenedor { width: min(100% - 2.5rem, 72rem); margin-inline: auto; }
.rosa { color: var(--rosa); }

/* 3. TEXTOS Y BOTONES */
.etiqueta {
  font-family: var(--f-etiqueta); font-size: .78rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--rosa-oscuro); margin: 0 0 1.2rem;
}
.subtitulo { font-family: var(--f-titulo); font-style: italic; color: var(--gris); font-size: clamp(1.15rem, 2.2vw, 1.5rem); margin: 0; }
.mano { font-family: var(--f-mano); font-size: clamp(2rem, 4vw, 2.8rem); color: var(--rosa-linea); margin: 0 0 .5rem; line-height: 1; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: .8rem 2rem;
  font-family: var(--f-etiqueta); font-size: .95rem; font-weight: 500;
  text-decoration: none; border-radius: 999px;
  background: var(--verde); color: var(--crema);
  transition: background-color .25s, transform .25s var(--suave);
}
.btn:hover { background: var(--rosa-oscuro); transform: translateY(-2px); }
.btn-linea { background: transparent; color: var(--verde); box-shadow: inset 0 0 0 1.5px var(--verde); }
.btn-linea:hover { background: var(--verde); color: var(--crema); }

.sello {
  display: inline-block; background: var(--rosa); color: #fff; text-decoration: none;
  font-family: var(--f-etiqueta); font-size: .75rem; letter-spacing: .32em; text-transform: uppercase;
  padding: .5rem .8rem .5rem 1.1rem; line-height: 1;
}

/* 4. BARRA SUPERIOR — translúcida, estilo Apple */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--alto-nav);
  background: rgb(255 253 251 / .72);
  backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgb(27 59 47 / .08);
}
.nav-dentro { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nav nav { display: flex; gap: clamp(.9rem, 2.5vw, 2rem); }
.nav nav a {
  font-family: var(--f-etiqueta); font-size: .8rem; color: var(--verde);
  text-decoration: none; opacity: .75; transition: opacity .2s;
}
.nav nav a:hover { opacity: 1; }
.nav nav { margin-left: auto; }
/* Acceso a la academia: una píldora chica, separada de las anclas */
.nav-acceso {
  font-family: var(--f-etiqueta); font-size: .78rem; font-weight: 500; color: var(--verde);
  text-decoration: none; white-space: nowrap; padding: .4rem 1rem; border-radius: 999px;
  box-shadow: inset 0 0 0 1.2px rgb(27 59 47 / .35);
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.nav-acceso:hover { background: var(--verde); color: var(--crema); box-shadow: inset 0 0 0 1.2px var(--verde); }
@media (max-width: 40rem) { .nav nav a:not([href="#sobre-mi"]) { display: none; } }

/* 5. PORTADA Y MANIFIESTO */
.hero {
  position: relative; min-height: 100svh; display: grid; place-items: center;
  text-align: center; padding: calc(var(--alto-nav) + 2rem) 1.25rem 6rem;
  background: radial-gradient(60rem 40rem at 50% 110%, var(--rosa-claro), transparent 70%), var(--crema);
}
/* al bajar, la portada se achica y se desvanece */
.hero-dentro {
  transform: scale(calc(1 - var(--p, 0) * .12)) translateY(calc(var(--p, 0) * -4rem));
  opacity: calc(1 - var(--p, 0) * 1.6);
}
.hero h1 { font-size: clamp(3.6rem, 13vw, 10rem); margin-bottom: 1.5rem; }
.hero h1 span { display: block; animation: sube 1s var(--suave) both; }
.hero h1 span:nth-child(2) { animation-delay: .15s; }
.hero h1 span:nth-child(3) { animation-delay: .3s; font-style: italic; font-weight: 400; }
.hero .etiqueta, .hero .subtitulo { animation: sube 1s .5s var(--suave) both; }
@keyframes sube { from { opacity: 0; transform: translateY(1.2em); } }

.bajar {
  position: absolute; bottom: 2rem; left: 50%; translate: -50% 0;
  display: grid; justify-items: center; gap: .5rem; text-decoration: none;
  font-family: var(--f-etiqueta); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gris);
  opacity: calc(1 - var(--p, 0) * 4);
}
.bajar i { width: 1px; height: 2.5rem; background: linear-gradient(var(--rosa), transparent); animation: gota 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes gota { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* Secciones "fijas": altas, con un bloque pegado a la pantalla mientras scrolleás */
[data-progreso="fijo"] { position: relative; }
.fijo { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; overflow: hidden; }

.manifiesto { height: 260svh; }
.frase {
  width: min(100% - 2.5rem, 58rem); margin: 0;
  font-family: var(--f-titulo); font-weight: 700; line-height: 1.2; letter-spacing: -.01em;
  font-size: clamp(1.8rem, 4.6vw, 3.6rem); color: var(--verde);
}
.frase .pal { opacity: .14; transition: opacity .35s; }
.frase .pal.on { opacity: 1; }

/* 6. EL VUELO */
.vuelo { height: 300svh; background: var(--crema-2); }
.vuelo .fijo { grid-template-rows: auto 1fr; place-items: stretch; padding: calc(var(--alto-nav) + 3vh) 1.25rem 4vh; }
.vuelo-textos { display: grid; text-align: center; }
.vuelo-textos h2 { grid-area: 1 / 1; font-size: clamp(1.7rem, 4.4vw, 3.4rem); font-weight: 400; max-width: 22ch; margin-inline: auto; }
.vuelo-textos em { font-weight: 700; }
.vuelo-a { opacity: clamp(0, (.48 - var(--p, 0)) * 10, 1); transform: translateY(calc(var(--p, 0) * -2rem)); }
.vuelo-b { opacity: clamp(0, (var(--p, 0) - .5) * 10, 1); color: var(--rosa-oscuro); }
.vuelo-b em { color: var(--rosa); }

.mapa { width: min(100%, 68rem); height: 100%; margin: auto; overflow: visible; }
.ruta-guia { fill: none; stroke: rgb(27 59 47 / .12); stroke-width: 2; stroke-dasharray: 2 12; stroke-linecap: round; }
.ruta { fill: none; stroke: var(--rosa); stroke-width: 3.5; stroke-linecap: round; }
.pin circle { fill: var(--crema); stroke: var(--verde); stroke-width: 3; }
.pin-final circle { fill: var(--rosa); stroke: var(--rosa); }
.pin text { font-family: var(--f-etiqueta); font-size: 20px; fill: var(--verde); text-anchor: middle; letter-spacing: .08em; }
.pin-final { opacity: clamp(.25, (var(--p, 0) - .6) * 4, 1); }
.avion { fill: var(--verde); }
@media (max-width: 40rem) {
  .ruta { stroke-width: 7; }
  .ruta-guia { stroke-width: 4; stroke-dasharray: 3 18; }
  .pin circle { r: 16; stroke-width: 5; }
  .pin text { font-size: 42px; }
  .pin-final text { text-anchor: end; }
  .avion { scale: 2; }
}

/* 7. CAPÍTULOS */
.capitulos { padding-block: 10vh; }
.capitulos-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; }
.lamina {
  position: sticky; top: calc(var(--alto-nav) + 8vh); height: 70svh; margin: 0;
  display: grid; place-items: center;
  background: var(--crema-2); border-radius: 2rem; overflow: hidden;
}
.lamina img {
  grid-area: 1 / 1; width: 82%; max-height: 80%; object-fit: contain;
  opacity: 0; transform: scale(.92) translateY(2rem);
  transition: opacity .6s var(--suave), transform .8s var(--suave);
}
.lamina img.activa { opacity: 1; transform: none; }

.paso { min-height: 85svh; display: flex; flex-direction: column; justify-content: center; }
.paso > * { opacity: .2; transform: translateY(1.5rem); transition: opacity .6s var(--suave), transform .6s var(--suave); }
.paso.activo > * { opacity: 1; transform: none; }
.paso.activo > :nth-child(2) { transition-delay: .06s; }
.paso.activo > :nth-child(n+3) { transition-delay: .12s; }
.paso h2 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); margin-bottom: 1.5rem; }
.paso h2 em { color: var(--rosa); }
.paso .etiqueta span { color: var(--gris); margin-right: .6rem; }
.paso p:not(.etiqueta) { color: #555; max-width: 34rem; }
.paso strong { color: var(--verde); font-weight: 600; }

@media (max-width: 52rem) {
  .capitulos-grilla { grid-template-columns: 1fr; gap: 0; }
  .lamina { top: calc(var(--alto-nav) + 1rem); height: 36svh; z-index: 1; }
  .paso { min-height: 70svh; justify-content: flex-start; padding-top: 4rem; }
}

/* 8. PALABRAS */
.palabras { padding-block: 12vh; overflow: hidden; display: grid; gap: 1rem; }
.fila { display: flex; gap: 2.5rem; white-space: nowrap; font-family: var(--f-titulo); font-size: clamp(2.6rem, 8vw, 6.5rem); line-height: 1.1; }
.fila span:nth-child(odd) { font-style: italic; color: var(--rosa); }
.fila span:nth-child(even) { color: var(--verde); }
.fila-1 { transform: translateX(calc(var(--p, 0) * -45%)); }
.fila-2 { transform: translateX(calc(-45% + var(--p, 0) * 45%)); }

/* 9. SOBRE MÍ — una tarjeta verde que se expande hasta llenar la pantalla */
.sobre { padding-block: 4vh; }
.sobre-tarjeta {
  --x: clamp(0, var(--p, 0) * 2.2, 1);
  width: calc(100% - (1 - var(--x)) * 12vw);
  margin-inline: auto;
  border-radius: calc((1 - var(--x)) * 2.5rem);
  background: var(--verde); color: var(--crema);
  padding-block: clamp(6rem, 18vh, 12rem);
}
.sobre-dentro { max-width: 48rem; }
.sobre h2 { color: var(--crema); font-size: clamp(2rem, 5vw, 3.8rem); margin-bottom: 2rem; }
.sobre p:not(.mano) { font-size: 1.2rem; opacity: .85; }

/* 10. CIERRE Y PIE */
.cierre { text-align: center; padding-block: 22vh; }
.cierre h2 { font-size: clamp(2.4rem, 7vw, 5.5rem); margin-bottom: 2.5rem; font-style: italic; font-weight: 400; }
.cierre-acciones { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }
.cierre-cuenta { font-family: var(--f-etiqueta); font-size: .85rem; color: var(--gris); margin: 1.4rem 0 0; }
.cierre-cuenta a { color: var(--rosa-oscuro); text-underline-offset: 3px; }
.pie { border-top: 1px solid rgb(27 59 47 / .1); padding-block: 1.5rem; }
.pie-dentro { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pie small { font-family: var(--f-etiqueta); font-size: .75rem; color: var(--gris); }

/* 11. MOVIMIENTO REDUCIDO — si la persona lo pide, todo queda quieto y visible */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .manifiesto, .vuelo { height: auto; }
  .fijo { position: static; height: auto; min-height: 80svh; }
  .frase .pal, .paso > * { opacity: 1; transform: none; }
}