/* ==========================================================================
   WAYTA · Intro de carga
   Solo se muestra cuando js/intro.js añade la clase .has-intro a <html>.
   Sin JavaScript, la intro no existe.
   Línea de tiempo: marca (0,15–1,85 s) → WAYTA (1,2–2,6 s) → progreso hasta ~3,6 s → telón (0,9 s)
   ========================================================================== */

.intro{display:none}

html.intro-active{overflow:hidden}

html.has-intro .intro{
  position:fixed;inset:0;z-index:1000;
  display:grid;place-items:center;
  visibility:visible; /* visible aunque la página espere la traducción */
  background:radial-gradient(120% 90% at 50% 42%,#fbf8f2 0%,var(--paper) 58%,var(--paper-2) 100%);
  color:var(--olive);
  overflow:hidden;
  cursor:default;
  will-change:transform;
  isolation:isolate;
}
html.has-intro .intro:after{content:'';position:absolute;inset:0;background:var(--grain);opacity:.07;mix-blend-mode:multiply;pointer-events:none;z-index:0}

/* --- Contenido central ------------------------------------------------- */
.intro-center{
  position:relative;z-index:2;
  display:grid;justify-items:center;
  padding:24px;text-align:center;
  transition:opacity .35s ease,transform .5s ease;
}

.intro-brand{
  font-family:var(--serif);
  font-size:clamp(34px,6vw,64px);line-height:1;letter-spacing:-.5px;
  color:var(--olive);
  /* se revela de abajo hacia arriba */
  clip-path:inset(100% 0 0 0);
  filter:blur(6px);
  opacity:0;
  animation:intro-brand 1.7s var(--ease) .15s forwards;
}

.intro-product{
  margin-top:22px;
  font-family:var(--serif);
  font-size:clamp(14px,1.4vw,18px);
  letter-spacing:.7em;
  text-indent:.7em; /* compensa el espaciado para centrar ópticamente */
  text-transform:uppercase;
  color:var(--ink);
  opacity:0;
  animation:intro-product 1.4s var(--ease) 1.2s forwards;
}

/* --- Indicador de progreso (discreto) ---------------------------------- */
.intro-progress{
  display:flex;align-items:center;gap:12px;
  margin-top:34px;
  opacity:0;
  animation:intro-fade .8s ease .5s forwards;
  transition:opacity .3s ease;
}
.intro-bar{position:relative;width:clamp(110px,22vw,150px);height:1px;background:var(--line);overflow:hidden}
.intro-bar-fill{position:absolute;inset:0;background:var(--olive);transform:scaleX(0);transform-origin:left center}
.intro-percent{min-width:3.2em;font:500 var(--fs-1)/1 var(--sans);letter-spacing:1.5px;font-variant-numeric:tabular-nums;color:var(--muted)}

/* Saltar intro (accesibilidad) */
.intro-skip{
  position:absolute;right:16px;bottom:16px;z-index:3;
  min-height:44px;padding:10px 14px;
  border:0;background:transparent;
  font-size:var(--fs-1);font-weight:500;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted);
  opacity:.6;cursor:pointer;
  transition:opacity .2s;
}
.intro-skip:hover,.intro-skip:focus-visible{opacity:1}

/* --- Hojas cayendo con la brisa ----------------------------------------- */
.intro-leaves{position:absolute;inset:0;z-index:1;pointer-events:none}
.intro-leaf{position:absolute;top:-40px;left:var(--x);width:var(--s);color:var(--c);opacity:0;animation:leaf-fall var(--d) linear var(--delay) infinite}
.intro-leaf svg{width:100%;height:auto;fill:currentColor;animation:leaf-sway calc(var(--d) / 3) ease-in-out var(--delay) infinite alternate}

/* Cada hoja: posición, tamaño, velocidad, desfase, deriva, opacidad, giro y color */
.intro-leaf:nth-child(1){--x:8%; --s:clamp(18px,2vw,30px);  --d:7s;  --delay:-3.2s;--drift:22vw;--o:.5; --r1:-35deg;--r2:20deg; --c:var(--olive)}
.intro-leaf:nth-child(2){--x:24%;--s:clamp(13px,1.4vw,21px);--d:8.5s;--delay:-6.1s;--drift:16vw;--o:.45;--r1:15deg; --r2:65deg; --c:#7a6f2e}
.intro-leaf:nth-child(3){--x:41%;--s:clamp(20px,2.4vw,36px);--d:7.6s;--delay:-1.4s;--drift:26vw;--o:.5; --r1:-60deg;--r2:-10deg;--c:var(--sand-line)}
.intro-leaf:nth-child(4){--x:63%;--s:clamp(15px,1.7vw,25px);--d:9s;  --delay:-4.8s;--drift:14vw;--o:.45;--r1:10deg; --r2:55deg; --c:var(--olive)}
.intro-leaf:nth-child(5){--x:78%;--s:clamp(19px,2.2vw,32px);--d:7.2s;--delay:-2.3s;--drift:18vw;--o:.4; --r1:-25deg;--r2:30deg; --c:#7a6f2e}
.intro-leaf:nth-child(6){--x:90%;--s:clamp(12px,1.4vw,20px);--d:8.2s;--delay:-5.4s;--drift:10vw;--o:.5; --r1:40deg; --r2:85deg; --c:var(--sand-line)}
.intro-leaf:nth-child(7){--x:52%;--s:clamp(12px,1.3vw,19px);--d:9.4s;--delay:-7.6s;--drift:20vw;--o:.3; --r1:-15deg;--r2:35deg; --c:var(--olive)}

@media(max-width:640px){
  .intro-leaf:nth-child(n+6){display:none} /* menos hojas en móvil: más limpio */
}

/* --- Salida: el velo se levanta con un borde en arco (como la foto) ----- */
.intro.is-complete .intro-progress,
.intro.is-complete .intro-skip{opacity:0;animation:none}

.intro.is-leaving{
  transform:translateY(-100%);
  border-radius:0 0 50% 50% / 0 0 16vh 16vh;
  transition:transform .9s cubic-bezier(.76,0,.24,1),border-radius .9s cubic-bezier(.76,0,.24,1);
}
.intro.is-leaving .intro-center{opacity:0;transform:translateY(-24px)}

/* La portada aparece suavemente mientras el velo sube */
html.intro-reveal .hero-copy>*{animation:intro-rise .9s var(--ease) both}
html.intro-reveal .hero-copy>:nth-child(2){animation-delay:.08s}
html.intro-reveal .hero-copy>:nth-child(3){animation-delay:.16s}
html.intro-reveal .hero-copy>:nth-child(4){animation-delay:.24s}
html.intro-reveal .hero-copy>:nth-child(n+5){animation-delay:.32s}
html.intro-reveal .hero-photo{animation:intro-rise 1.1s var(--ease) .15s both}

/* --- Animaciones -------------------------------------------------------- */
@keyframes intro-brand{to{clip-path:inset(0 0 0 0);filter:blur(0);opacity:1}}
@keyframes intro-product{
  from{opacity:0;letter-spacing:1.1em;text-indent:1.1em}
  to{opacity:1;letter-spacing:.7em;text-indent:.7em}
}
@keyframes intro-fade{to{opacity:1}}
@keyframes intro-rise{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}
@keyframes leaf-fall{
  0%{transform:translate3d(0,0,0);opacity:0}
  12%{opacity:var(--o)}
  85%{opacity:var(--o)}
  100%{transform:translate3d(var(--drift),110vh,0);opacity:0}
}
@keyframes leaf-sway{
  from{transform:translateX(-14px) rotate(var(--r1))}
  to{transform:translateX(14px) rotate(var(--r2))}
}

/* --- Reducir movimiento: sin hojas ni telón, solo un fundido ------------- */
@media(prefers-reduced-motion:reduce){
  .intro-leaves{display:none}
  .intro-brand{clip-path:none;filter:none;animation:intro-fade .4s ease forwards!important}
  .intro-product,.intro-progress{animation:intro-fade .4s ease forwards!important}
  .intro.is-leaving{transform:none;border-radius:0;opacity:0;transition:opacity .4s ease!important}
  html.intro-reveal .hero-copy>*,html.intro-reveal .hero-photo{animation:none!important}
}