/* ============================================================
   ELIA · LANDING PÚBLICA (centinelia.app/elia) — MODO PAPEL
   Estructura, copy y piel LITERALES de docs/preview-landing-elia.html
   (mockup aprobado por el CEO), sobre los tokens del brandkit.
   La app es oscura; la cara pública es papel editorial. Móvil-first,
   una columna, mucho aire. Solo el cierre es marino oscuro (transición
   a la app). Elia habla en primera persona en TODO el copy.
   ============================================================ */
@import 'elia-tokens.css';

:root {
  /* Alias cortos → tokens canónicos del brandkit (cero drift de color). */
  --paper:      var(--elia-paper);
  --marino-500: var(--elia-marino-500);
  --marino-700: var(--elia-marino-700);
  --marino-900: var(--elia-marino-900);
  --oro-500:    var(--elia-oro-500);
  --oro-400:    var(--elia-oro-400);
  --oro-300:    var(--elia-oro-300);
  --garnet:     var(--elia-negativo);
  --verde:      var(--elia-positivo);
  --linea:      var(--elia-n200);      /* filete de sección (= n200 cálido del brandkit) */
  --card:       var(--elia-surface-1); /* blanco papel (surface-1 en claro) */
  --ed:         var(--elia-font-editorial);
  --ui:         var(--elia-font-ui);
  /* Tintas editoriales PROPIAS de la landing papel — valores del mockup aprobado
     por el CEO; no existen aún en elia-tokens.css (ver reporte). Se centralizan aquí,
     no se esparcen en las reglas. */
  --tinta:      #1C2A3A;
  --tinta-mute: #5A6B7E;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--paper); font-family: var(--ui); -webkit-font-smoothing: antialiased; color: var(--tinta); }

/* La columna editorial: móvil-first, centrada, con aire en desktop. */
.page { max-width: 460px; margin: 0 auto; background: var(--paper); }

section { padding: 56px 32px; border-bottom: 1px solid var(--linea); }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--oro-500); margin-bottom: 18px; }
h1 { font-family: var(--ed); font-weight: 600; color: var(--tinta); font-size: 37px; line-height: 1.12; letter-spacing: -.01em; }
h2 { font-family: var(--ed); font-weight: 600; color: var(--tinta); font-size: 27px; line-height: 1.2; margin-bottom: 16px; }
p { color: var(--tinta-mute); font-size: 15px; line-height: 1.65; font-weight: 400; }
.lede { font-size: 16px; color: var(--tinta); margin: 20px 0 28px; line-height: 1.6; }
.lede b { font-weight: 600; }

.cta { display: inline-block; background: var(--oro-500); color: var(--marino-900); font-weight: 600; font-size: 14px; padding: 14px 26px; border-radius: 8px; text-decoration: none; letter-spacing: .01em; }
.cta:hover { background: var(--oro-400); }
.cta-sec { display: block; color: var(--tinta-mute); font-size: 13px; margin-top: 16px; text-decoration: none; letter-spacing: .03em; }
.cta-sec:hover { color: var(--tinta); }

/* HEADER PÚBLICO — estático, mismo gutter (32px) que las secciones. Wordmark SVG (marca) a la
   izquierda; "Iniciar sesión" ghost neutro a la derecha. El oro se reserva para conversión, así
   que el acceso NO va en oro: texto en tinta con borde de filete, coherente con la piel papel. */
/* Sticky: visible en todo el scroll. Fondo papel SÓLIDO (no transparente) para cubrir el contenido
   que pasa por debajo; z-index bajo los FAB (300) y el chat (400). Al ser sticky ocupa su espacio en
   el flujo, así que no tapa el hero al cargar y no necesita padding-top compensatorio. */
.site-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 100; background: var(--paper); }
.sh-brand { display: inline-flex; align-items: center; line-height: 0; }
.sh-wordmark { display: block; height: 28px; width: auto; }
.sh-login { font-family: var(--ui); font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--tinta); text-decoration: none; padding: 8px 15px; border: 1px solid var(--linea); border-radius: 8px; background: transparent; transition: border-color .15s, background .15s; }
.sh-login:hover { border-color: var(--tinta); background: var(--card); }

/* HERO */
.hero { position: relative; padding-top: 72px; padding-bottom: 64px; }
.hero-curve { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; opacity: .5; }
.hero-curve path { stroke: var(--oro-300); }
.video-wrap { margin-top: 32px; position: relative; width: 100%; padding-bottom: 56.25%; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 32px -12px rgba(60,50,30,.28); border: 1px solid var(--elia-paper-border, #E4DDD0); }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* TENSIÓN */
.tension { font-family: var(--ed); font-style: italic; font-weight: 500; font-size: 23px; color: var(--tinta); line-height: 1.4; margin-bottom: 32px; }
.col { margin: 22px 0; }
.col h3 { font-family: var(--ui); font-size: 14px; font-weight: 600; color: var(--tinta); margin-bottom: 5px; }
.col p { font-size: 13.5px; }

/* DIFERENCIA — las dos flechas contrapuestas */
.flechas { display: flex; flex-direction: column; gap: 12px; margin: 26px 0 6px; }
.flecha { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.flecha .lbl { color: var(--tinta-mute); }
.flecha.oro .lbl { color: var(--tinta); font-weight: 600; }
.flecha .arr { font-family: var(--ed); font-size: 19px; }
.flecha.gris .arr { color: var(--elia-n400); }
.flecha.oro .arr { color: var(--oro-500); }

/* PENTALOGÍA */
.penta { margin-top: 8px; }
.penta-item { padding: 16px 0 16px 16px; border-left: 2px solid var(--oro-500); margin-bottom: 4px; }
.penta-item .n { font-family: var(--ed); font-size: 20px; font-weight: 600; color: var(--tinta); letter-spacing: .02em; }
.penta-item p { font-size: 13px; margin-top: 3px; }
.penta-cita { font-family: var(--ed); font-style: italic; font-size: 16px; color: var(--tinta); line-height: 1.5; margin-top: 24px; padding-left: 16px; border-left: 2px solid var(--oro-300); }

/* FRASE DEL DÍA (la única pieza dinámica) */
.frase-card { background: var(--card); border: 1px solid var(--linea); border-left: 3px solid var(--oro-500); border-radius: 10px; padding: 26px 22px; margin-top: 8px; }
.frase-card .fecha { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--oro-500); margin-bottom: 12px; }
.frase-card .txt { font-family: var(--ed); font-style: italic; font-weight: 500; font-size: 19px; color: var(--tinta); line-height: 1.45; }
.frase-mas { max-height: 0; overflow: hidden; transition: max-height .5s ease; }
.frase-mas.open { max-height: 600px; }
.frase-mas p { font-size: 14px; color: var(--tinta-mute); line-height: 1.65; margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .frase-mas { transition: none; } }
.frase-toggle { display: inline-block; margin-top: 16px; color: var(--oro-500); font-size: 13px; font-weight: 600; text-decoration: none; letter-spacing: .02em; background: none; border: none; cursor: pointer; font-family: var(--ui); }
.frase-pie { margin-top: 16px; }

/* CÓMO EMPIEZA */
.pasos { counter-reset: p; }
.paso { display: flex; gap: 16px; margin: 20px 0; }
.paso .num { counter-increment: p; min-width: 34px; height: 34px; border: 1px solid var(--oro-500); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--ed); font-size: 16px; color: var(--oro-500); }
.paso .num::before { content: counter(p); }
.paso h3 { font-family: var(--ui); font-size: 14.5px; font-weight: 600; color: var(--tinta); margin-bottom: 3px; }
.paso p { font-size: 13px; }

/* SEGURIDAD */
.seg-sellos { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.sello { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--tinta); font-weight: 500; }
.sello svg { width: 19px; height: 19px; color: var(--oro-500); flex: none; }

/* PLANES */
.plan { padding: 20px 0; border-bottom: 1px solid var(--linea); }
.plan:last-of-type { border-bottom: none; }
.plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.plan .pn { font-family: var(--ed); font-size: 21px; font-weight: 600; color: var(--tinta); }
.plan .precio { font-family: var(--ui); font-size: 16px; font-weight: 600; color: var(--oro-500); white-space: nowrap; }
.plan .precio span { color: var(--tinta-mute); font-weight: 400; font-size: 13px; }
.plan-tag { font-family: var(--ed); font-style: italic; font-weight: 500; font-size: 16px; color: var(--tinta); margin-top: 6px; line-height: 1.4; }
.plan p { font-size: 13px; margin-top: 6px; }
/* Blindaje — matiz premium: filete oro más marcado (uso sancionado del oro: la decisión). */
.plan--premium { border-left: 3px solid var(--oro-500); padding-left: 15px; }
.plan-anual { font-size: 12.5px; color: var(--tinta-mute); margin-top: 18px; letter-spacing: .02em; }
.plan-anual b { color: var(--oro-500); font-weight: 600; }

/* CIERRE (marino oscuro — transición a la app) */
.cierre { background: var(--marino-900); border-bottom: none; text-align: center; padding: 64px 32px; }
.cierre .firma { font-family: var(--ed); font-style: italic; font-weight: 500; font-size: 30px; color: var(--oro-300); margin-bottom: 20px; }
.cierre p { color: var(--elia-text-soft); font-size: 15px; margin-bottom: 28px; line-height: 1.6; }
.cierre .sig { color: var(--elia-text-mute); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-top: 24px; }

/* PIE (legal) — continúa el marino del cierre */
.footer { background: var(--marino-900); border-bottom: none; text-align: center; padding: 0 32px 40px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.footer-links a { color: var(--elia-text-mute); font-size: 12.5px; letter-spacing: .02em; text-decoration: none; }
.footer-links a:hover { color: var(--oro-300); }
.footer-links .sep { color: var(--elia-text-mute); opacity: .6; font-size: 12.5px; }
.footer-copy { color: var(--elia-text-mute); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-top: 16px; }

/* Foco accesible (brandkit) */
a:focus-visible, button:focus-visible { outline: 2px solid var(--oro-500); outline-offset: 3px; border-radius: 6px; }

/* ============================================================
   BOTONES FLOTANTES VIVOS (Demo Gratis · Chat de ayuda)
   Fixed, siempre visibles. Estructura anidada: .fab posiciona y reacciona al hover;
   .fab-pill es la píldora visible con la "respiración" (sin pelear por el transform).
   Sensación 3D: sombra con profundidad + gradiente + highlight interior. Brandkit papel+oro.
   ============================================================ */
.fab { position: fixed; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 300; text-decoration: none; transition: transform .24s var(--elia-ease); }
.fab-demo { left: 16px; }
.fab-chat { right: 16px; border: none; background: none; padding: 0; cursor: pointer; }
.fab-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ui); font-size: 14px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  padding: 13px 20px; border-radius: 999px; will-change: transform;
  animation: fab-breath 3s var(--elia-ease) infinite;
  transition: box-shadow .24s var(--elia-ease);
}
.fab-ic { width: 18px; height: 18px; flex: none; }
/* Demo — oro, la acción principal. */
.fab-demo .fab-pill {
  background: linear-gradient(160deg, var(--oro-300), var(--oro-500));
  color: var(--marino-900);
  box-shadow: 0 12px 26px -8px rgba(158, 114, 32, .55), 0 3px 8px -2px rgba(60, 50, 30, .30), inset 0 1px 0 rgba(255, 255, 255, .5);
}
/* Chat — marino, más neutro. */
.fab-chat .fab-pill {
  background: linear-gradient(160deg, var(--marino-500), var(--marino-900));
  color: var(--paper);
  box-shadow: 0 12px 26px -8px rgba(5, 11, 22, .55), 0 3px 8px -2px rgba(5, 11, 22, .35), inset 0 1px 0 rgba(255, 255, 255, .16);
  animation-delay: -1.5s; /* desfasa la respiración: se sienten vivos, no en sincronía */
}
/* Hover: elevación mayor + sombra más profunda — táctil. */
.fab:hover, .fab:focus-visible { transform: translateY(-4px) scale(1.045); }
.fab:active { transform: translateY(-1px) scale(1); }
.fab-demo:hover .fab-pill, .fab-demo:focus-visible .fab-pill { box-shadow: 0 20px 34px -8px rgba(158, 114, 32, .6), inset 0 1px 0 rgba(255, 255, 255, .55); }
.fab-chat:hover .fab-pill, .fab-chat:focus-visible .fab-pill { box-shadow: 0 20px 34px -8px rgba(5, 11, 22, .62), inset 0 1px 0 rgba(255, 255, 255, .2); }
@keyframes fab-breath { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.03); } }
@media (prefers-reduced-motion: reduce) {
  .fab-pill { animation: none; }
  .fab:hover, .fab:focus-visible { transform: translateY(-2px); }
}

/* ============================================================
   PANEL DE CHAT DE AYUDA — bottom-sheet en móvil, tarjeta flotante en desktop.
   ============================================================ */
body.ayuda-open { overflow: hidden; }
.ayuda { position: fixed; inset: 0; z-index: 400; display: flex; align-items: flex-end; justify-content: center; }
.ayuda[hidden] { display: none; }
.ayuda-backdrop { position: absolute; inset: 0; background: rgba(5, 11, 22, .38); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: ay-fade .22s var(--elia-ease); }
.ayuda-panel {
  position: relative; width: 100%; max-height: 84vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); color: var(--tinta);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -14px 44px -12px rgba(5, 11, 22, .45);
  animation: ay-up .28s var(--elia-ease);
}
.ayuda-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--linea); }
.ayuda-title { font-family: var(--ed); font-size: 19px; font-weight: 600; color: var(--tinta); }
.ayuda-title span { font-family: var(--ui); font-size: 12px; font-weight: 500; color: var(--tinta-mute); letter-spacing: .04em; margin-left: 6px; }
.ayuda-x { background: none; border: none; cursor: pointer; color: var(--tinta-mute); font-size: 17px; line-height: 1; width: 34px; height: 34px; border-radius: 9px; }
.ayuda-x:hover { color: var(--tinta); background: var(--elia-paper-2); }
.ayuda-log { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
/* Burbujas (misma piel que el chat de la app). */
.said { align-self: flex-end; max-width: 85%; background: var(--elia-paper-2); border: 1px solid var(--linea); border-radius: 14px 14px 4px 14px; padding: 10px 13px; font-size: 14px; color: var(--tinta); line-height: 1.5; }
.dice { align-self: flex-start; max-width: 88%; background: var(--card); border: 1px solid var(--linea); border-radius: 14px 14px 14px 4px; padding: 10px 13px; font-size: 14px; color: var(--tinta); line-height: 1.5; }
.dice.esc { color: var(--tinta-mute); font-style: italic; }
.ayuda-in { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linea); background: var(--paper); }
.ayuda-in input { flex: 1; min-width: 0; font-family: var(--ui); font-size: 15px; color: var(--tinta); background: var(--card); border: 1px solid var(--elia-paper-border, #E4DDD0); border-radius: 999px; padding: 11px 15px; }
.ayuda-in input::placeholder { color: var(--tinta-mute); }
.ayuda-in input:focus { outline: none; border-color: var(--oro-500); }
.ayuda-in input:disabled { opacity: .6; }
.ayuda-send { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--oro-500); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ayuda-send svg { width: 20px; height: 20px; }
.ayuda-send:hover:not(:disabled) { background: var(--oro-400); }
.ayuda-send:disabled { opacity: .5; cursor: default; }
@keyframes ay-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes ay-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ayuda-panel, .ayuda-backdrop { animation: none; } }

/* Desktop: tarjeta flotante anclada abajo-derecha (junto al botón de chat). */
@media (min-width: 620px) {
  .ayuda { align-items: flex-end; justify-content: flex-end; padding: 0 20px calc(88px + env(safe-area-inset-bottom, 0px)) 0; }
  .ayuda-backdrop { background: rgba(5, 11, 22, .18); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .ayuda-panel { width: 380px; max-height: 560px; border-radius: 18px; box-shadow: var(--elia-shadow-modal); }
}