/* ============================================================
   Mia — landing de presentación
   Paleta cálida estilo Her: noche de velador → crema tostada.
   Cero fuentes externas (Fraunces/Newsreader/Inter self-hosteadas
   en assets/fonts/ — ver @font-face al pie de este archivo),
   cero CDN. La página es 100% legible sin JavaScript: los estados
   iniciales de animación los aplica GSAP, nunca este CSS.

   FUENTE ÚNICA DE VERDAD (veredicto CEO 28-jul, "una sola verdad
   para los colores"): los valores de esta paleta son LOS MISMOS que
   app_mia/tokens/tokens.json → color.paleta (de donde sale
   app_mia/tokens/tokens.css). Un solo negro: #17120d (el #16130F
   viejo de la app murió). Si un color cambia, se cambia en
   tokens.json y aquí se refleja — no hay tercera copia.
   Mapa var web → token: noche→noche · noche-2→noche-2 ·
   crema→crema · crema-2→crema-2 · tinta→tinta ·
   tinta-suave→tinta-suave · hueso→hueso · hueso-suave→hueso-suave ·
   ambar→brasa · cobre→cobre · cobre-claro→cobre-claro ·
   linea-noche→linea-noche · linea-crema→linea-crema.
   Extras web (sin token, a propósito): #fff (texto sobre CTA),
   #d8ccbb (copy largo sobre noche), #fffdf9 (papel de tarjetas).
   ============================================================ */

:root{
  --noche:#17120d;          /* negro cálido del spot (0-5s) */
  --noche-2:#211a12;
  --crema:#fbf6ef;          /* la crema de web_aviso (continuidad de marca) */
  --crema-2:#f4ebde;
  --tinta:#2b2320;
  --tinta-suave:#6b5f54;
  --hueso:#ece3d8;          /* texto sobre noche */
  --hueso-suave:#b6a794;
  --ambar:#e0a35e;
  --cobre:#c2683f;
  --cobre-claro:#e28a5a;
  --linea-noche:#352b21;
  --linea-crema:#e7dccc;
  /* tipografía: las fuentes REALES de la casa (mismas que la app — veredicto
     CEO 28-jul). Fraunces/Newsreader/Inter/Caveat self-hosteadas en
     assets/fonts/ (@font-face al pie de este archivo); Georgia y el system
     stack quedan de respaldo mientras carga o si falta el archivo. */
  --serif:"Fraunces","Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}
body{
  margin:0;
  background:var(--noche);
  color:var(--hueso);
  font:16px/1.65 var(--sans);
  letter-spacing:.005em;
  overflow-x:hidden;
}
::selection{background:var(--cobre);color:var(--crema)}
a{color:var(--cobre-claro)}
a:focus-visible,button:focus-visible{outline:2px solid var(--ambar);outline-offset:3px;border-radius:4px}
img,video{max-width:100%;height:auto}

/* ---------- puerta 18+ (age-gate interstitial · assets/js/edad.js) ---------- */
html.con-puerta{overflow:hidden}           /* bloquea el scroll (Lenis mueve window: sin alto, no hay viaje) */
.puerta{
  position:fixed;inset:0;z-index:60;       /* por encima de la sitebar (z-20) y de toda la escena */
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,5vw,40px);
  background:rgba(23,18,13,.88);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.puerta[hidden]{display:none}
.puerta-caja{
  max-width:26rem;width:100%;
  padding:clamp(24px,5vw,36px);
  border-radius:22px;
  background:linear-gradient(180deg, var(--noche-2) 0%, var(--noche) 100%);
  border:1px solid rgba(224,163,94,.28);
  box-shadow:0 10px 50px rgba(0,0,0,.5),0 0 90px rgba(224,163,94,.08);
  text-align:center;
}
.puerta-titulo{
  font-family:var(--serif);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(24px,5vw,30px);line-height:1.2;
  color:var(--hueso);margin:18px 0 10px;
}
.puerta-copy{
  font-size:15.5px;line-height:1.6;color:var(--hueso-suave);
  margin:0 0 22px;
}
.puerta-acciones{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:0 0 18px}
.puerta-si{
  display:inline-block;border:0;cursor:pointer;
  padding:13px 30px;border-radius:999px;
  background:linear-gradient(135deg, var(--cobre) 0%, var(--ambar) 130%);
  color:#fff;font:inherit;font-size:15.5px;font-weight:700;letter-spacing:.01em;
  text-decoration:none;
  box-shadow:0 4px 18px rgba(194,104,63,.35);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease;
}
.puerta-si:hover{transform:translateY(-1px);box-shadow:0 8px 26px rgba(194,104,63,.45)}
.puerta-no{
  display:inline-block;cursor:pointer;
  padding:13px 26px;border-radius:999px;
  background:transparent;border:1px solid var(--linea-noche);
  color:var(--hueso-suave);font:inherit;font-size:15.5px;font-weight:600;
  transition:color .3s ease,border-color .3s ease;
}
.puerta-no:hover{color:var(--hueso);border-color:rgba(224,163,94,.4)}
.puerta-micro{font-size:12.5px;line-height:1.6;color:var(--hueso-suave);margin:0;opacity:.85}
.puerta-micro a{color:var(--cobre-claro)}

/* ---------- barra superior: chip IA persistente ---------- */
.sitebar{
  position:fixed;inset:0 0 auto 0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px clamp(16px,4vw,32px);
  pointer-events:none;
}
.sitebar>*{pointer-events:auto}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 13px;border-radius:999px;
  background:rgba(23,18,13,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(224,163,94,.35);
  color:var(--ambar);font-size:13px;font-weight:600;
}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--ambar)}
@media (prefers-reduced-motion: no-preference){
  .chip .dot{animation:latido 3.2s ease-in-out infinite}
  @keyframes latido{
    0%,100%{opacity:.55;transform:scale(.9)}
    50%{opacity:1;transform:scale(1)}
  }
}
.sitebar-link{
  font-size:13px;font-weight:600;color:var(--hueso-suave);text-decoration:none;
  padding:6px 12px;border-radius:999px;
  background:rgba(23,18,13,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--linea-noche);
  transition:color .3s ease,border-color .3s ease;
}
.sitebar-link:hover{color:var(--ambar);border-color:rgba(224,163,94,.4)}

/* ---------- 1 · el vacío (hero) ---------- */
.vacio{
  position:relative;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:96px clamp(20px,6vw,48px) 72px;
  text-align:center;
  overflow:hidden;
  perspective:1100px;   /* la ventana 3D del retrato 2.5D */
}

/* ---- retrato 2.5D en capas (v1.5 profundidad) ----
   Sin JS es una escena ESTÁTICA completa (gradientes cálidos);
   profundidad.js solo la hace girar/respirar. Cuando Producción
   entregue [ASSET: retrato-capas], cada capa recibe su imagen
   como background-image y nada más cambia. */
.escena{
  position:absolute;inset:-6%;
  transform-style:preserve-3d;
  pointer-events:none;
  will-change:transform;
}
.capa{position:absolute;inset:0;background-repeat:no-repeat;will-change:transform}
.capa-fondo{
  /* placeholder: la recámara de noche, desenfocada */
  transform:translateZ(-80px) scale(1.12);
  background:
    radial-gradient(ellipse 90% 70% at 18% 12%, rgba(224,163,94,.07), transparent 55%),
    radial-gradient(ellipse 80% 60% at 85% 90%, rgba(194,104,63,.08), transparent 60%),
    linear-gradient(200deg, var(--noche-2) 0%, var(--noche) 55%);
}
.capa-sujeto{
  /* placeholder: la presencia de Mia (silueta cálida emergiendo del negro) */
  transform:translateZ(0);
  background:
    radial-gradient(ellipse 26% 40% at 50% 74%, rgba(226,138,90,.13), transparent 70%),
    radial-gradient(ellipse 14% 18% at 50% 44%, rgba(224,163,94,.11), transparent 75%);
}
.capa-luz{
  /* placeholder: el halo del velador, la capa más cercana a cámara */
  transform:translateZ(60px) scale(.94);
  background:radial-gradient(ellipse 30% 22% at 34% 30%, rgba(240,196,140,.10), transparent 70%);
}
.velo{
  /* viñeta fija: garantiza el contraste del texto sobre cualquier asset */
  background:radial-gradient(ellipse 72% 58% at 50% 50%, transparent 55%, rgba(23,18,13,.55) 100%);
}
.escena-brief{
  /* .escena desborda -6% del hero: compensamos para quedar DENTRO del viewport */
  position:absolute;right:calc(5.4% + 14px);bottom:calc(5.4% + 12px);
  max-width:34ch;padding:5px 10px;border-radius:10px;
  border:1px dashed rgba(224,163,94,.35);
  font-size:11px;line-height:1.5;color:var(--hueso-suave);opacity:.6;
  text-align:right;
}
.glow{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 62% 48% at 50% 58%,
    rgba(224,163,94,.16), rgba(194,104,63,.07) 45%, transparent 72%);
}
.vacio-inner{position:relative;max-width:34em;margin:0 auto}
.pregunta{
  font-family:var(--serif);
  font-size:clamp(19px,3.4vw,27px);
  line-height:1.45;
  color:var(--hueso-suave);
  margin:0 0 .85em;
  font-style:italic;
}
.presentacion{
  font-family:var(--serif);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(34px,7.5vw,58px);line-height:1.1;
  color:var(--hueso);
  margin:.9em 0 .35em;
}
.presentacion em{font-style:italic;color:var(--ambar)}
.lede{
  font-size:clamp(16px,2.4vw,19px);color:var(--hueso-suave);
  max-width:46ch;margin:0 auto;
}
.oneliner{display:block;margin-top:14px;font-weight:600;color:var(--cobre-claro)}
.cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  color:var(--hueso-suave);text-decoration:none;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;
}
.cue:hover{color:var(--ambar)}
.cue-arrow{font-size:16px}
@media (prefers-reduced-motion: no-preference){
  .cue-arrow{animation:invita 2.6s ease-in-out infinite}
  @keyframes invita{
    0%,100%{transform:translateY(0);opacity:.6}
    50%{transform:translateY(6px);opacity:1}
  }
}

/* ---------- 2-4 · los tres verbos (sobre noche) ---------- */
.verbo{
  position:relative;
  padding:clamp(96px,16vh,160px) clamp(20px,6vw,48px);
}
.verbo-inner{max-width:640px;margin:0 auto}
.kicker{
  font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cobre-claro);margin:0 0 14px;
}
.display{
  font-family:var(--serif);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(44px,11vw,92px);line-height:1.02;
  color:var(--ambar);
  margin:0 0 26px;
}
.copy{
  font-size:clamp(16px,2.3vw,19px);line-height:1.7;
  color:var(--hueso);max-width:54ch;margin:0 0 18px;
}
.verbo .copy{color:#d8ccbb}
.voz-mia{
  margin:26px 0 34px;padding:0 0 0 18px;
  border-left:2px solid var(--cobre);
}
.voz-mia p{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(17px,2.5vw,21px);line-height:1.55;
  color:var(--hueso);margin:0 0 6px;
}
.voz-mia cite{font-style:normal;font-size:13.5px;color:var(--hueso-suave)}

/* placeholders de assets ([ASSET: ...]) */
.asset{margin:34px 0 0}
.asset-frame{
  position:relative;border-radius:18px;overflow:hidden;
  border:1.5px dashed rgba(224,163,94,.4);
  background:
    radial-gradient(ellipse 80% 70% at 30% 20%, rgba(224,163,94,.14), transparent 60%),
    radial-gradient(ellipse 70% 60% at 75% 85%, rgba(194,104,63,.16), transparent 65%),
    var(--noche-2);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.ratio-v{aspect-ratio:4/5;max-width:420px;margin-inline:auto}
.ratio-h{aspect-ratio:16/10}
.asset-label{
  font-size:13.5px;line-height:1.6;color:var(--hueso-suave);
  text-align:center;max-width:38ch;
}
/* Notas de producción ([ASSET: …] / brief del hero): NO se publican. Los briefs quedan
   en el HTML para Producción (C1-C8) pero jamás se pintan; los marcos cálidos quedan
   como escena hasta que lleguen los assets reales. Para verlas mientras se maqueta,
   comentar esta línea. */
.asset-label,.escena-brief{display:none}
.quien .asset-frame,.compromisos .asset-frame{
  border-color:rgba(194,104,63,.45);
  background:
    radial-gradient(ellipse 80% 70% at 30% 20%, rgba(217,143,69,.18), transparent 60%),
    radial-gradient(ellipse 70% 60% at 75% 85%, rgba(194,104,63,.12), transparent 65%),
    var(--crema-2);
}
.quien .asset-label{color:var(--tinta-suave)}

/* ---------- 5 · quién es Mia (transición a crema) ---------- */
.quien{
  background:linear-gradient(to bottom, var(--noche) 0, var(--crema) clamp(120px,18vh,220px));
  color:var(--tinta);
  padding:clamp(140px,22vh,240px) clamp(20px,6vw,48px) clamp(90px,14vh,150px);
}
.quien-inner{max-width:640px;margin:0 auto}
.quien .kicker{color:var(--cobre)}
.titulo{
  font-family:var(--serif);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(28px,5.6vw,44px);line-height:1.18;
  color:var(--tinta);margin:0 0 24px;
}
.quien .copy{color:var(--tinta)}
.manifiesto{
  margin:34px 0;padding:0;border:0;
}
.manifiesto p{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(24px,4.6vw,36px);line-height:1.35;letter-spacing:-.01em;
  color:var(--cobre);margin:0;
}
.manifiesto .palabra{display:inline-block;white-space:pre-wrap}

/* ---------- 6 · compromisos (sigue en crema) ---------- */
.compromisos{
  background:var(--crema);color:var(--tinta);
  padding:clamp(80px,12vh,130px) clamp(20px,6vw,48px) clamp(110px,16vh,170px);
}
.compromisos-inner{max-width:640px;margin:0 auto}
.compromisos .kicker{color:var(--cobre)}
.compromisos .copy{color:var(--tinta)}
.reglas{
  list-style:none;margin:30px 0;padding:0;
  display:grid;gap:14px;
}
.reglas li{
  background:#fffdf9;border:1px solid var(--linea-crema);border-radius:16px;
  padding:20px 22px;
  box-shadow:0 1px 2px rgba(60,40,20,.05),0 8px 30px rgba(60,40,20,.06);
}
.reglas h3{
  margin:0 0 6px;font-size:17px;letter-spacing:-.01em;color:var(--tinta);
}
.reglas p{margin:0;font-size:15px;line-height:1.6;color:var(--tinta-suave)}
.link-transparencia{font-weight:600;color:var(--cobre);text-decoration:none}
.link-transparencia:hover{text-decoration:underline}

/* ---------- 7 · CTA (vuelta al negro cálido — el kiosco) ---------- */
.conocela{
  position:relative;overflow:hidden;
  background:linear-gradient(to bottom, var(--crema) 0, var(--noche) clamp(120px,18vh,220px));
  padding:clamp(150px,24vh,260px) clamp(20px,6vw,48px) clamp(110px,18vh,190px);
  text-align:center;
}
.glow-cta{
  background:radial-gradient(ellipse 55% 42% at 50% 68%,
    rgba(224,163,94,.18), rgba(194,104,63,.08) 45%, transparent 72%);
}
.conocela-inner{position:relative;max-width:560px;margin:0 auto}
.conocela .display{font-size:clamp(38px,8.5vw,68px)}
.conocela .copy{margin-inline:auto;color:#d8ccbb}
.cta{
  display:inline-block;margin:26px 0 18px;
  padding:16px 42px;border-radius:999px;
  background:linear-gradient(135deg, var(--cobre) 0%, var(--ambar) 130%);
  color:#fff;font-size:18px;font-weight:700;letter-spacing:.01em;
  text-decoration:none;
  box-shadow:0 4px 18px rgba(194,104,63,.35),0 12px 44px rgba(224,163,94,.18);
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease;
}
.cta:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 8px 26px rgba(194,104,63,.45),0 18px 60px rgba(224,163,94,.25);
}
.cta:active{transform:translateY(0) scale(.99)}
.micro{font-size:13px;color:var(--hueso-suave);max-width:40ch;margin:0 auto}

/* ---------- footer legal ---------- */
.pie{
  background:var(--noche);color:var(--hueso-suave);
  border-top:1px solid var(--linea-noche);
  padding:36px clamp(20px,6vw,48px) 46px;
  text-align:center;font-size:13px;line-height:1.75;
}
.pie-marca{margin:0 0 8px;font-weight:600;color:var(--hueso)}
.pie-nav{margin:0 0 14px}
.pie-nav a{color:var(--cobre-claro);text-decoration:none}
.pie-nav a:hover{text-decoration:underline}
.pie-nota{margin:0 auto 6px;max-width:62ch;font-size:12.5px}
.sep{opacity:.5;margin:0 7px}

/* ---------- misc responsive ---------- */
@media (max-width:480px){
  .sitebar{padding:12px 14px}
  .sitebar-link{display:none} /* en móvil el enlace legal vive en footer + compromisos */
  .verbo{padding-top:88px;padding-bottom:88px}
}

/* ---------- @font-face · las fuentes REALES de la casa (28-jul) ----------
   Self-hosteadas en assets/fonts/ (SIL OFL — licencias OFL-*.txt al lado),
   cero CDN: la CSP del sitio no necesita ningún host externo. Mismas fuentes
   que la app (app_mia/cliente/assets/fuentes/): UNA sola letra de la casa.
   font-display: swap — el texto sale al instante con el respaldo y cambia
   cuando llega la fuente real. */
@font-face{
  font-family:"Fraunces";
  src:url("../fonts/Fraunces-var.ttf") format("truetype");
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Fraunces";
  src:url("../fonts/Fraunces-Italic-var.ttf") format("truetype");
  font-weight:100 900;font-style:italic;font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("../fonts/Newsreader-var.ttf") format("truetype");
  font-weight:200 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("../fonts/Newsreader-Italic-var.ttf") format("truetype");
  font-weight:200 800;font-style:italic;font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/Inter-var.ttf") format("truetype");
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Caveat";
  src:url("../fonts/Caveat-var.ttf") format("truetype");
  font-weight:400 700;font-style:normal;font-display:swap;
}