/* ============================================================
   Portafolio · Fernanda Espinosa
   Paleta y motivos extraídos del portafolio original (.svg)
   ============================================================ */

:root{
  /* --- Paleta original --- */
  --crema:    #f9f5d2;
  --crema-2:  #efe8c4;
  --oliva:    #d1d052;
  --magenta:  #9a134b;
  --naranja:  #ff4e00;
  --azul:     #cfe9fa;
  --rosa:     #f9b7b8;
  --tinta:    #2b1220;

  --fondo:    var(--crema);
  --texto:    var(--tinta);

  /* --- Tipografía --- */
  --display: "Poppins", system-ui, sans-serif;
  --body:    "Nunito", system-ui, sans-serif;

  /* --- Ritmo --- */
  --sp-1: .5rem;  --sp-2: 1rem;   --sp-3: 1.5rem;
  --sp-4: 2rem;   --sp-6: 3rem;   --sp-8: 4rem;
  --sp-12: 6rem;  --sp-16: 8rem;
  --radio: 22px;
  --onda-alto: clamp(38px, 5.5vw, 96px);   /* alto de la onda líquida */
  --ancho: min(1240px, 92vw);

  /* --- Movimiento --- */
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-io:  cubic-bezier(.65,0,.35,1);
  --t-rapido: 180ms;
  --t-medio:  340ms;
  --t-lento:  620ms;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--fondo);
  color:var(--texto);
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; display:block; }

h1,h2,h3{ font-family:var(--display); font-weight:800; line-height:.92; letter-spacing:-.02em; margin:0; }

a{ color:inherit; }

:focus-visible{
  outline:3px solid var(--magenta);
  outline-offset:3px;
  border-radius:6px;
}

.contenedor{ width:var(--ancho); margin-inline:auto; }

.solo-lectores{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Saltar al contenido */
.saltar{
  position:absolute; left:var(--sp-2); top:-100px; z-index:999;
  background:var(--magenta); color:var(--crema);
  padding:.7rem 1.1rem; border-radius:999px;
  font-family:var(--display); font-weight:700; text-decoration:none;
  transition:top var(--t-rapido);
}
.saltar:focus{ top:var(--sp-2); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  background:var(--crema);
  z-index:31;                    /* mantiene el orden descendente de secciones */
}
.hero__marco{ overflow:hidden; }

/* El arte original de Fernanda, a sangre.
   El aspect-ratio reserva la altura antes de que llegue el SVG:
   sin él, al insertarlo se movería toda la página (CLS). */
.hero__arte{
  display:block; width:100%;
  aspect-ratio:1920 / 916;       /* = viewBox de hero.svg */
}
.hero__arte > svg{ display:block; width:100%; height:auto; }

/* En pantallas angostas su portada quedaría diminuta: se amplía más
   allá del viewport y se recorta por los lados. El lettering y la
   píldora están centrados en el lienzo (x≈960 de 1920), así que
   siguen centrados; el festón se repite y el corte no se nota. */
@media (max-width:900px){
  .hero__arte{ width:150%; margin-inline:-25%; }
}
@media (max-width:600px){
  .hero__arte{ width:196%; margin-inline:-48%; }
}

/* Entre la píldora (acaba en y≈806 del lienzo) y el corte de la crema
   (y=1006). Fija a la ventana se montaba encima de la píldora en
   pantallas bajas, por eso va anclada al hero. */
.hero__scroll{
  position:absolute; left:0; right:0; bottom:8%; z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color:var(--magenta); font-family:var(--display);
  font-size:.78rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  text-align:center; padding-inline:var(--sp-3);
}
/* En el móvil la portada mide unos 345 px de alto y la pista, anclada
   por abajo y con el texto en dos líneas, crecía hacia arriba hasta
   montarse sobre la píldora del nombre (12 px de solape a 384 px).
   Ahí abajo sale del absoluto y va en el flujo, sobre la crema. */
@media (max-width:700px){
  .hero__scroll{
    position:static;
    padding-block:.35rem 1.15rem;
  }
}

.hero__flecha{ animation:rebote 2.4s var(--ease-io) infinite; }
@keyframes rebote{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(7px)} }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  background:var(--naranja); color:var(--crema);
  padding:.65rem 0; overflow:hidden; position:relative;
}
.marquee__pista{
  display:flex; width:max-content;
  animation:desplazar 34s linear infinite;
}
.marquee__pista span{
  font-family:var(--display); font-weight:800;
  font-size:clamp(.9rem,.8rem + .5vw,1.25rem);
  letter-spacing:.04em; text-transform:uppercase;
  padding-inline:1.1rem; white-space:nowrap;
}
@keyframes desplazar{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee:hover .marquee__pista{ animation-play-state:paused; }

/* ============================================================
   ARCHIVERO · pestañas tipo folder
   ============================================================ */
.archivero{ position:relative; }

/* ============================================================
   ONDA LÍQUIDA · la transición entre secciones
   Cuelga de la sección de arriba (top:100%) con su color, y se come
   la parte alta de la de abajo. Por eso cada sección necesita un
   z-index descendente: si mandara el orden del documento, la
   sección siguiente taparía la onda.
   La forma vive en secciones/onda.svg y se usa como máscara, así el
   color sale de una variable y no hace falta un archivo por color.
   ============================================================ */
.onda{
  position:absolute; top:100%; left:0; width:100%;
  height:var(--onda-alto);
  margin-top:-1px;                 /* tapa la costura del antialias */
  background:var(--onda-color, currentColor);
  -webkit-mask:url(../../secciones/onda.svg) top center/100% 100% no-repeat;
          mask:url(../../secciones/onda.svg) top center/100% 100% no-repeat;
  z-index:4; pointer-events:none;
}

/* Envoltorio para colgar una onda de algo que recorta su contenido */
.franja{ position:relative; z-index:30; }

/* Caja recortada para los adornos, para que el recorte no viva en la
   sección y no se coma la onda que cuelga de ella. */
.adornos{
  position:absolute; inset:0; overflow:hidden;
  z-index:0; pointer-events:none;
}

/* ============================================================
   LAS BANDAS · el selector de categorías
   Cinco franjas a todo lo ancho, cada una con su color, separadas
   por la onda líquida y con burbujas flotando encima. Al abrir una,
   despliega su lámina.
   ============================================================ */
.bandas{ position:relative; }

.banda{
  position:relative;
  background:var(--b-bg);
  color:var(--b-ink);
  z-index:var(--b-z);
}

/* Toda la franja es el botón: no hay que apuntar a nada pequeño. */
.banda__cabeza{
  position:relative; z-index:2;        /* por delante de las burbujas */
  appearance:none; border:0; cursor:pointer;
  display:flex; width:var(--ancho); margin-inline:auto;
  align-items:center; gap:clamp(.7rem,2vw,1.6rem);
  background:transparent; color:inherit; text-align:left;
  /* El padding de arriba deja pasar la onda de la banda anterior. */
  padding-top:calc(clamp(1.2rem,3.2vw,2.6rem) + var(--onda-alto));
  padding-bottom:clamp(1.2rem,3.2vw,2.6rem);
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  letter-spacing:-.02em; line-height:1;
  font-size:clamp(1.5rem,.9rem + 3vw,3.8rem);
  min-height:64px;
  transition:gap var(--t-medio) var(--ease-out);
}
.banda__cabeza:hover{ gap:clamp(1.1rem,2.8vw,2.4rem); }

.banda__n{
  font-size:.32em; font-weight:700; letter-spacing:.18em;
  opacity:.65; align-self:flex-start; padding-top:.35em;
}
.banda__nombre{ flex:1 1 auto; text-wrap:balance; }

.banda__flecha{
  flex:0 0 auto; width:clamp(30px,3.4vw,46px); height:auto;
  transition:transform var(--t-medio) var(--ease-out);
}
.banda[data-abierta] .banda__flecha{ transform:rotate(180deg); }

/* Burbujas de la referencia. Decorativas y sin capturar el puntero. */
.burbuja{
  position:absolute; border-radius:50%;
  background:var(--b-ink); opacity:.5;
  pointer-events:none; z-index:1;      /* fondo: la lámina va por delante */
  animation:flotar var(--bur-dur,9s) var(--ease-io) var(--bur-esp,0s) infinite alternate;
}
@keyframes flotar{
  from{ transform:translate3d(0,0,0) }
  to  { transform:translate3d(0,-16px,0) }
}

/* El despliegue: grid-template-rows de 0fr a 1fr anima la altura sin
   tener que medirla en JS ni congelar un valor en píxeles. */
.banda__panel{
  position:relative; z-index:2;        /* por delante de las burbujas */
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows var(--t-lento) var(--ease-out);
}
.banda[data-abierta] .banda__panel{ grid-template-rows:1fr; }
.banda__interior{ overflow:hidden; min-height:0; }

.banda__caja{
  width:var(--ancho); margin-inline:auto;
  padding-bottom:clamp(1.4rem,3.6vw,3rem);
}
.banda__barra{
  display:flex; align-items:center; justify-content:flex-end;
  gap:var(--sp-2); flex-wrap:wrap;
  padding-bottom:.9rem;
}

.btn{
  appearance:none; cursor:pointer;
  font-family:var(--display); font-weight:700; font-size:.82rem;
  letter-spacing:.04em; text-transform:uppercase;
  padding:.6rem 1.15rem; border-radius:999px;
  border:2.5px solid currentColor; background:transparent; color:inherit;
  display:inline-flex; align-items:center; gap:.45rem;
  transition:background var(--t-rapido) var(--ease-out),
             color      var(--t-rapido) var(--ease-out),
             transform  var(--t-rapido) var(--ease-out);
  min-height:44px;
}
.btn:hover{ transform:translateY(-2px); }
.btn--solido{ background:var(--b-ink); color:var(--b-bg); border-color:var(--b-ink); }
.btn--solido:hover{ filter:brightness(1.12); }

/* la "hoja" que sale de la carpeta */
/* La lámina se muestra entera, sin scroll propio.
   Recortada a 78vh tenía barra interna y, con el cursor encima, la
   rueda movía la lámina en vez de la página: te quedabas atrapado a
   media web. Desplegada, el scroll es siempre el de la página. */
.hoja{
  background:var(--crema);
  border-radius:calc(var(--radio) - 8px);
  overflow:hidden;               /* solo para que redondee las esquinas */
  position:relative;
  min-height:180px;              /* mientras carga, para que no salte */
}

.hoja__lienzo{ opacity:0; transform:translateY(16px); }
.hoja__lienzo.esta-visible{
  opacity:1; transform:none;
  transition:opacity var(--t-lento) var(--ease-out), transform var(--t-lento) var(--ease-out);
}
.hoja__lienzo svg{ width:100%; height:auto; display:block; }

/* cargando */
.hoja__cargando{
  position:absolute; inset:0; display:grid; place-content:center; gap:1rem; justify-items:center;
  background:var(--crema); color:var(--b-ink);
  font-family:var(--display); font-weight:700; letter-spacing:.14em;
  font-size:.78rem; text-transform:uppercase;
  transition:opacity var(--t-medio) linear;
}
.hoja__cargando[hidden]{ display:none; }
.girador{
  width:38px; height:38px; border-radius:50%;
  border:4px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color:currentColor;
  animation:girar .9s linear infinite;
}
@keyframes girar{ to{ transform:rotate(360deg) } }


/* ============================================================
   VISOR a pantalla completa
   ============================================================ */
.visor{
  border:0; padding:0; margin:0; width:100%; max-width:100%; height:100%; max-height:100%;
  background:var(--crema); color:var(--tinta);
  overflow-y:auto;              /* las secciones son muy altas: se recorren aquí */
  overscroll-behavior:contain;
}
.visor::backdrop{ background:rgba(43,18,32,.72); backdrop-filter:blur(3px); }
.visor__barra{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);
  padding:.7rem clamp(.8rem,3vw,1.6rem);
  background:var(--v-color,var(--oliva)); color:var(--v-ink,var(--magenta));
  box-shadow:0 6px 24px -12px rgba(43,18,32,.6);
}
.visor__titulo{ font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(1rem,.8rem + 1vw,1.6rem); }
.visor__lienzo{ padding:clamp(.5rem,2vw,1.4rem); }
.visor__lienzo svg{ width:100%; height:auto; margin-inline:auto; max-width:1400px; }

/* ============================================================
   SOBRE MÍ
   ============================================================ */
.sobre{
  background:var(--oliva); color:var(--magenta);
  padding-top:calc(clamp(var(--sp-8),8vw,var(--sp-12)) + var(--onda-alto));
  padding-bottom:clamp(var(--sp-8),8vw,var(--sp-12));
  position:relative; z-index:20;
}
.sobre__grid{
  display:grid; gap:clamp(var(--sp-4),4vw,var(--sp-8));
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:900px){ .sobre__grid{ grid-template-columns:.9fr 1.1fr; } }
/* Tres columnas —figura, texto, trayectoria— como en su cartel.
   La sección ensancha su contenedor: con los 1240 px del resto, meter
   una tercera columna partía «SOBRE MÍ» en dos líneas y dejaba las
   fechas en cuatro. */
@media (min-width:1400px){
  .sobre .contenedor{ width:min(1520px, 94vw); }
  .sobre__grid{ grid-template-columns:minmax(180px,240px) .9fr 1.1fr; }
}

.sobre__titulo{ font-size:clamp(2.6rem,1.6rem + 5vw,6rem); color:var(--magenta); text-transform:uppercase; }
.sobre__lead{ font-size:clamp(1.05rem,1rem + .45vw,1.35rem); max-width:46ch; margin-top:var(--sp-3); font-weight:600; }

.cols{ display:grid; gap:clamp(var(--sp-3),3vw,var(--sp-6)); grid-template-columns:1fr; }
@media (min-width:620px){ .cols{ grid-template-columns:1fr 1fr; } }

.bloque__titulo{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:.92rem; letter-spacing:.14em; margin-bottom:var(--sp-2);
  padding-bottom:.4rem; border-bottom:3px solid currentColor;
}
.lista{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-2); }
/* Como en su original: «Empresa: puesto» en una línea y la fecha
   debajo. Antes el puesto y la fecha se pegaban sin separación. */
.lista li{ text-wrap:pretty; }
.lista li strong{ font-weight:800; }
.lista li strong::after{ content:": "; }
.lista li span{ display:block; font-size:.92rem; opacity:.8; }

.skills{ margin-top:var(--sp-4); display:grid; gap:var(--sp-2); }
.skill__fila{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.skill__nombre{ font-weight:700; font-size:.9rem; min-width:15ch; }
.skill__puntos{ display:flex; gap:5px; }
.skill__punto{ width:15px; height:15px; background:transparent; border:2.5px solid var(--magenta); }
.skill__punto--on{ background:var(--magenta); }

/* En estrecho los nombres largos empujaban su barra a la línea de
   abajo, pero «Inglés» cabía y se quedaba al lado: las tres filas
   salían desalineadas entre sí. Se apilan todas igual. */
@media (max-width:700px){
  .skill__fila{ flex-direction:column; align-items:flex-start; gap:.35rem; }
  .skill__nombre{ min-width:0; }
}


/* ============================================================
   CONTACTO
   ============================================================ */
.contacto{
  background:var(--naranja); color:var(--crema);
  padding-top:calc(clamp(var(--sp-8),8vw,var(--sp-12)) + var(--onda-alto));
  padding-bottom:clamp(var(--sp-8),8vw,var(--sp-12));
  text-align:center; position:relative; z-index:19;
}
.contacto__titulo{ font-size:clamp(2.4rem,1.5rem + 4.6vw,5.5rem); text-transform:uppercase; }
.contacto__texto{
  max-width:34ch; margin:var(--sp-4) auto 0;
  font-size:clamp(1.05rem,1rem + .45vw,1.3rem); font-weight:600;
  text-wrap:balance;
}
/* Sigue lista para los perfiles (LinkedIn, Behance…) cuando los haya */
.contacto__enlaces{ display:flex; flex-wrap:wrap; gap:var(--sp-2); justify-content:center; margin-top:var(--sp-4); }
.contacto__enlace{
  display:inline-flex; align-items:center; gap:.6rem; min-height:48px;
  padding:.85rem 1.5rem; border-radius:999px;
  background:var(--crema); color:var(--naranja);
  font-family:var(--display); font-weight:800; text-decoration:none;
  font-size:clamp(.9rem,.85rem + .3vw,1.1rem);
  transition:transform var(--t-rapido) var(--ease-out), background var(--t-rapido) linear;
}
.contacto__enlace:hover{ transform:translateY(-3px) rotate(-1deg); background:var(--oliva); color:var(--magenta); }

.pie{ background:var(--tinta); color:var(--crema); padding-block:var(--sp-4); text-align:center; font-size:.85rem; position:relative; z-index:18; }
.pie a{ color:var(--oliva); }

/* ============================================================
   Preferencias de movimiento
   ============================================================ */
/* ============================================================
   ADORNOS · piezas del cartel original que estaban sin usar
   Salen de intro.svg con herramientas/extraer-adornos.py.
   La marca y el blob son máscaras, no imágenes: así el color y la
   intensidad los decide esta hoja y no hace falta un archivo por
   cada combinación.
   ============================================================ */
.adorno{ position:absolute; pointer-events:none; z-index:0; }

.adorno--marca,
.adorno--blob{ background:var(--adorno-color, currentColor); }

.adorno--marca{
  aspect-ratio:2052 / 1132;
  -webkit-mask:url(../../secciones/adorno-marca.svg) center/contain no-repeat;
          mask:url(../../secciones/adorno-marca.svg) center/contain no-repeat;
}
.adorno--blob{
  aspect-ratio:658 / 562;
  -webkit-mask:url(../../secciones/adorno-blob.svg) center/contain no-repeat;
          mask:url(../../secciones/adorno-blob.svg) center/contain no-repeat;
}

/* Su figura, con la nube crema que ella misma dibujó detrás.
   Va en el flujo de la rejilla, no en absoluto: así nunca la corta el
   overflow de la sección ni se monta sobre el texto.
   height:auto es obligatorio — el atributo height="925" del <img> actúa
   como altura CSS y le gana al aspect-ratio, estirando la figura. */
.sobre__figura{
  display:none;
  width:100%; height:auto;
  align-self:end;
  max-width:330px;
}
.sobre .adorno--marca{
  top:-10%; right:-12%; width:min(680px, 55vw);
  --adorno-color:var(--magenta); opacity:.07;
}
.contacto .adorno--blob{
  right:-6%; bottom:-22%; width:min(520px, 46vw);
  --adorno-color:var(--crema); opacity:.13;
}
/* La figura solo aparece cuando hay una columna de verdad para ella;
   por debajo apretaría el texto. */
@media (min-width:1400px){
  .sobre__figura{ display:block; }
}
/* En estrecho no hay hueco: los adornos estorbarían al texto. */
@media (max-width:900px){
  .sobre .adorno--marca{ display:none; }
  .contacto .adorno--blob{ width:70vw; right:-22%; bottom:-16%; }
}

/* El contenido, por encima de los adornos */
.sobre__grid, .contacto .contenedor{ position:relative; z-index:1; }

/* ============================================================
   BARRA DE PROGRESO · el recorrido de color de su paleta
   ============================================================ */
.progreso{
  position:fixed; top:0; left:0; z-index:60;
  height:4px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:var(--progreso-color, var(--magenta));
  transition:background var(--t-lento) linear;
  will-change:transform;
}


/* ============================================================
   VISOR · navegación entre carpetas
   ============================================================ */
.visor__nav{ display:flex; align-items:center; gap:clamp(.3rem,1vw,.6rem); }
.visor__chips{ display:flex; gap:.3rem; }
.chip{
  appearance:none; cursor:pointer; padding:0;
  width:clamp(26px,3.4vw,34px); height:clamp(26px,3.4vw,34px);
  border-radius:9px;
  background:var(--c-bg);
  /* Aro tenue siempre: el chip de la sección abierta tiene el mismo
     color que la barra y sin él desaparecía sobre ella. */
  border:2.5px solid color-mix(in srgb, currentColor 32%, transparent);
  transition:transform var(--t-rapido) var(--ease-out),
             border-color var(--t-rapido) linear;
}
.chip:hover{ transform:translateY(-2px); }
.chip[aria-current="true"]{ border-color:currentColor; transform:translateY(-2px) scale(1.06); }
.visor__paso{
  appearance:none; cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:11px;
  border:2.5px solid currentColor; background:transparent; color:inherit;
}
.visor__paso:hover{ background:rgba(255,255,255,.22); }
.visor__paso[disabled]{ opacity:.35; cursor:default; }
/* En móvil la barra se apila para que quepan chips y botones. */
@media (max-width:640px){
  .visor__barra{ flex-wrap:wrap; }
  .visor__nav{ order:3; width:100%; justify-content:space-between; }
}

/* ============================================================
   FLUJO · entrada de la portada y revelado al hacer scroll
   ============================================================ */
@keyframes portadaLetra{
  from{ opacity:0; transform:translateY(38px) rotate(-4deg) scale(.93); }
  to  { opacity:1; transform:none; }
}
/* Sin opacidad: la marca de agua ya lleva la suya (.st10 → .08) y
   un keyframe que terminara en opacity:1 la pintaría en magenta
   pleno, tapando la portada. Solo se le da el movimiento. */
@keyframes portadaMarca{
  from{ transform:scale(1.09) rotate(2.5deg); }
  to  { transform:none; }
}
@keyframes portadaSube{
  from{ opacity:0; transform:translateY(18px); }
  to  { opacity:1; transform:none; }
}
@keyframes portadaFeston{
  from{ opacity:0; transform:translateY(30px); }
  to  { opacity:1; transform:none; }
}

/* Sin JS nada se oculta: el contenido tiene que leerse igual. */
.js [data-revelar]{
  opacity:0; transform:translateY(28px);
  will-change:opacity, transform;
}
.js [data-revelar].visible{
  opacity:1; transform:none;
  transition:opacity 640ms var(--ease-out) var(--retardo,0ms),
             transform 640ms var(--ease-out) var(--retardo,0ms);
  will-change:auto;
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hoja__lienzo{ opacity:1; transform:none; }
  .js [data-revelar]{ opacity:1; transform:none; }
}