/* ============================================================
   FIT CHOICE — fitchoice.cl
   Landing "próximamente". Identidad tomada del manual de marca:
   paleta institucional + complementaria y las cinco formas madre.
   ============================================================ */

@font-face{
  font-family:'Exo 2';
  font-style:normal;
  font-weight:400 800;            /* variable: cubre cuerpo y titular */
  font-display:swap;
  src:url('/assets/fonts/exo2-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* Paleta institucional — valores tomados del arte y del logotipo */
  --verde:#0D423C;
  --coral:#EE786E;
  --crema:#F8EAD6;

  /* Paleta complementaria */
  --amarillo:#F1D052;
  --lima:#9CBF6D;
  --turquesa:#49B0A7;
  --azul:#4472A8;
  --lila:#AE8DC5;

  --texto:var(--verde);
  --font:'Exo 2', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Escala tipográfica fluida */
  --t-claim:clamp(2.2rem, 8.8vw, 5.05rem);
  /* «Muy pronto.» es el remate del titular: ~62% de su tamaño */
  --t-soon:clamp(1.36rem, 5.45vw, 3.12rem);
  --t-brand:clamp(.72rem, 2vw, .82rem);

  /* Desfase del centro del logo respecto al centro de la pantalla.
     El script de index.html lo sobrescribe con el valor exacto medido;
     estos valores son el respaldo si el JS no corre. */
  --mix-cx:0px;
  --mix-cy:-17vh;
}

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

html,body{ height:100%; }

body{
  margin:0;
  font-family:var(--font);
  color:var(--texto);
  background:var(--crema);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;                /* una sola pantalla, sin scroll */
}

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

/* ---------- Escenario ---------- */
.stage{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:clamp(1.5rem,5vw,3rem);
  padding-bottom:calc(clamp(1.5rem,5vw,3rem) + env(safe-area-inset-bottom));
  isolation:isolate;
  overflow:hidden;
}

/* ---------- Fondo e intro: son el mismo sistema ----------
   Las manchas entran desde fuera de pantalla, convergen al centro, se
   mezclan en espiral acelerando, explotan hacia afuera y se posan en su
   sitio definitivo. Desde ahi siguen con su deriva lenta de siempre.
   Los puntos de la espiral vienen precalculados en el HTML porque CSS
   no tiene funciones trigonometricas. */
.bg{
  position:absolute; inset:0;
  display:grid;
  place-items:center;
  z-index:0;
  pointer-events:none;
}

/* Todas apiladas en la misma celda: el transform queda libre */
.blob{
  grid-area:1/1;
  width:var(--w);
  opacity:0;
  will-change:transform,opacity;
  animation:mancha-intro 3.45s var(--in) both;
}
.blob svg{ width:100%; height:auto; display:block; }

@keyframes mancha-intro{
  /* entrada desde fuera, frenando al acercarse */
  0%  { opacity:0; transform:translate(var(--dx),var(--dy)) scale(1) rotate(var(--g0));
        animation-timing-function:cubic-bezier(.24,.62,.3,1) }
  7%  { opacity:1; animation-timing-function:cubic-bezier(.24,.62,.3,1) }
  /* la mezcla ocurre sobre el logo, no sobre el centro de la pantalla */
  29% { opacity:1; transform:translate(calc(var(--m0x) + var(--mix-cx)),calc(var(--m0y) + var(--mix-cy))) scale(.44) rotate(var(--g1));
        animation-timing-function:linear }
  38% { transform:translate(calc(var(--m1x) + var(--mix-cx)),calc(var(--m1y) + var(--mix-cy))) scale(.4) rotate(var(--g2));
        animation-timing-function:linear }
  47% { transform:translate(calc(var(--m2x) + var(--mix-cx)),calc(var(--m2y) + var(--mix-cy))) scale(.35) rotate(var(--g3));
        animation-timing-function:linear }
  56% { transform:translate(calc(var(--m3x) + var(--mix-cx)),calc(var(--m3y) + var(--mix-cy))) scale(.3) rotate(var(--g4));
        animation-timing-function:linear }
  /* punto maximo: masa compacta girando, y explota */
  64% { transform:translate(calc(var(--m4x) + var(--mix-cx)),calc(var(--m4y) + var(--mix-cy))) scale(.26) rotate(var(--g5));
        animation-timing-function:cubic-bezier(.06,.72,.18,1) }
  /* llega con un leve sobrepaso y se asienta */
  84% { transform:translate(calc(var(--ox) * 1.045),calc(var(--oy) * 1.045)) scale(1.03) rotate(var(--g6));
        animation-timing-function:cubic-bezier(.3,.6,.35,1) }
  100%{ opacity:1; transform:translate(var(--ox),var(--oy)) scale(1) rotate(var(--g7)) }
}

@keyframes velo-in{ from{ opacity:0 } to{ opacity:1 } }

/* Deriva lenta, en capa aparte para no pisar el intro */
.blob__d{
  animation:deriva var(--dur) ease-in-out var(--dly) infinite;
}
@keyframes deriva{
  0%,100%{ transform:translate(0,0) rotate(0deg) scale(1) }
  25%    { transform:translate(2.4%,-2.8%) rotate(1.6deg) scale(1.035) }
  50%    { transform:translate(-1.8%,2.4%) rotate(-1.2deg) scale(.972) }
  75%    { transform:translate(-2.6%,-1.6%) rotate(.9deg) scale(1.02) }
}

/* Velo: garantiza el contraste del texto sobre las formas.
   El núcleo va casi opaco para que el titular siempre se lea. */
.veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  /* Arranca invisible: si estuviera activo desde el segundo 0 taparia
     la mezcla, que ocurre justo en el centro. Entra durante la
     explosion, cuando las manchas ya salieron y antes del logo. */
  opacity:0;
  animation:velo-in .7s ease 2.2s both;
  background:radial-gradient(ellipse 68% 58% at 50% 47%,
    rgba(248,234,214,1) 0%,
    rgba(248,234,214,.99) 38%,
    rgba(248,234,214,.82) 60%,
    rgba(248,234,214,.28) 82%,
    rgba(248,234,214,0) 100%);
}

/* ---------- Contenido ---------- */
.content{
  position:relative; z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:clamp(1.1rem,3.4vw,1.9rem);
  max-width:min(92vw,46rem);
  margin:auto;
}

/* Logo */
.logo{
  position:relative;
  /* El segundo límite es por alto: en pantallas anchas pero bajas
     (1366x768 es el caso típico) un logo de 560 px empuja el botón
     y el pie fuera de la primera pantalla. */
  width:min(clamp(17rem,42vw,35rem), 52vh);
  /* Aire propio: separa la marca del texto para que no se lea como
     la primera línea del titular. */
  margin-bottom:clamp(1.2rem,3.6vw,2.1rem);
}
/* La animación va en el SVG, no en el contenedor: el reveal vive dentro
   de .logo y con opacity:0 en el padre quedaría invisible. */
.logo > svg{
  width:100%; height:auto; display:block;
  opacity:0;
  animation:logo-in .85s cubic-bezier(.16,.84,.26,1) 2.90s both;
}

@keyframes logo-in{
  from{ opacity:0; transform:scale(.72) translateY(14px) }
  to  { opacity:1; transform:scale(1) translateY(0) }
}

/* Titular */
.claim{
  margin:0;
  font-size:var(--t-claim);
  font-weight:800;
  line-height:.94;
  letter-spacing:-.024em;
  text-wrap:balance;
}
.claim span{
  display:block;
  opacity:0;
  animation:rise .8s cubic-bezier(.22,.68,.31,1) both;
}
/* Los retardos necesitan igualar la especificidad de «.claim span»,
   si no el atajo «animation» de arriba los sobrescribe con 0s. */
.claim span.claim__a{ animation-delay:4.05s }
.claim span.claim__b{ animation-delay:4.23s }

@keyframes rise{
  from{ opacity:0; transform:translateY(.42em) }
  to  { opacity:1; transform:translateY(0) }
}

/* Remate del titular. Va en verde, no en coral: el coral sobre crema
   mide 2,35:1 y no alcanza AA ni siquiera en texto grande (3:1). */
.soon{
  /* Un respiro extra arriba lo separa del titular: remate, no tercera línea */
  margin:.28em 0 0;
  font-size:var(--t-soon);
  font-weight:600;
  line-height:1;
  letter-spacing:-.008em;
  color:var(--verde);
  opacity:0;
  animation:pop .74s cubic-bezier(.22,.9,.3,1) 4.50s both;
}

/* Momento propio: entra con un leve golpe de escala */
@keyframes pop{
  0%  { opacity:0; transform:scale(.9) translateY(.18em) }
  60% { opacity:1; transform:scale(1.012) translateY(0) }
  100%{ opacity:1; transform:scale(1) translateY(0) }
}

/* Línea de marca */
.brandline{
  margin:0;
  font-size:var(--t-brand);
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  /* 80% es el mínimo que mantiene AA (4.5:1) sobre crema */
  color:color-mix(in srgb, var(--verde) 80%, transparent);
  opacity:0;
  animation:rise .7s cubic-bezier(.16,.84,.26,1) 4.66s both;
}

/* Botón de contacto */
.cta{
  --cta-bg:var(--verde);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;                 /* objetivo táctil cómodo */
  padding:.85em 2.4em;
  margin-top:.3rem;
  border-radius:999px;
  background:var(--cta-bg);
  color:var(--crema);
  font-size:clamp(.92rem,2.4vw,1rem);
  font-weight:700;
  letter-spacing:.04em;
  text-decoration:none;
  opacity:0;
  animation:rise .7s cubic-bezier(.16,.84,.26,1) 4.80s both;
  transition:transform .25s cubic-bezier(.22,.68,.31,1),
             background-color .25s ease,
             box-shadow .25s ease;
  box-shadow:0 1px 0 rgba(13,66,60,.12);
}
.cta:hover,.cta:focus-visible{
  --cta-bg:#0A3630;
  transform:translateY(-2px);
  box-shadow:0 10px 24px -8px rgba(13,66,60,.45);
}
.cta:active{ transform:translateY(0) scale(.985); }

:where(a,button):focus-visible{
  outline:3px solid var(--verde);
  outline-offset:3px;
}

/* ---------- Pie ---------- */
.foot{
  position:relative; z-index:2;
  width:100%;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.35rem 1rem;
  font-size:clamp(.76rem,2vw,.82rem);
  color:color-mix(in srgb, var(--verde) 82%, transparent);
  opacity:0;
  animation:fade .7s ease 4.94s both;
}
.foot p{ margin:0; }
.foot a{ color:var(--verde); text-decoration:none; border-bottom:1px solid currentColor; }
.foot a:hover{ border-bottom-color:transparent; }

@keyframes fade{ from{opacity:0} to{opacity:1} }

/* ---------- Pantallas bajas / apaisadas ---------- */
/* En pantallas anchas el bloque de texto es más alto, así que el logo
   queda más arriba y la mezcla debe subir más. */
@media (min-width:900px){
  :root{ --mix-cy:-27vh; }
}

/* Pantallas bajas: se recorta espacio antes que el logo. */
@media (max-height:880px) and (min-width:700px){
  :root{
    --t-claim:clamp(2.2rem, 6.2vw, 4rem);
    --t-soon:clamp(1.36rem, 3.85vw, 2.48rem);
  }
  .content{ gap:clamp(.7rem, 1.7vh, 1.15rem); }
  .logo{ margin-bottom:clamp(.8rem, 2.1vh, 1.4rem); }
}

@media (max-height:560px){
  :root{ --t-claim:clamp(1.9rem,7vh,2.9rem); }
  .logo{ width:clamp(8rem,20vh,11rem); }
  .content{ gap:.7rem; }
  .cta{ min-height:42px; padding:.6em 2em; }
}

/* ---------- Accesibilidad: sin movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  .blob,.blob__d,.logo > svg,.claim span,.soon,.brandline,.cta,.foot{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  /* Sin intro: las manchas aparecen directamente en su sitio final */
  .blob{ transform:translate(var(--ox),var(--oy)) rotate(var(--rf)) !important; }
  .veil{ animation:none !important; opacity:1 !important; }
  .cta{ transition:background-color .2s ease; }
  .cta:hover,.cta:focus-visible{ transform:none; }
}


/* ---------- Página 404 ---------- */

/* Estado de reposo: sin entrada, sin mezcla, sin explosión. */
.sin-intro .blob{
  opacity:1;
  animation:none;
  transform:translate(var(--ox),var(--oy)) rotate(var(--rf));
}
.sin-intro .veil{ opacity:1; animation:none; }
.sin-intro .logo > svg,
.sin-intro .claim span,
.sin-intro .soon,
.sin-intro .brandline,
.sin-intro .cta,
.sin-intro .foot{ opacity:1; animation:none; }

/* Más chico que el titular del inicio: aquí el mensaje informa, no proclama. */
.error-titulo{
  margin:0;
  font-size:clamp(1.55rem, 5.2vw, 2.9rem);
  font-weight:800;
  line-height:1.03;
  letter-spacing:-.02em;
  color:var(--verde);
  text-wrap:balance;
}
.error-texto{
  margin:0;
  max-width:34rem;
  font-size:clamp(.95rem, 2.5vw, 1.08rem);
  line-height:1.5;
  /* 82% mantiene AA sobre crema, igual que el pie */
  color:color-mix(in srgb, var(--verde) 82%, transparent);
  text-wrap:pretty;
}