/* =============================================================
   AIM DECK — Sistema de diseno "Atelier"
   Identidad propia: ni el dark industrial de Centinela ni el
   editorial claro de FORM. Estudio creativo, calido, impreso.
   Personalidad: Fraunces (display) + Space Grotesk (UI) +
   JetBrains Mono (etiquetas/datos). Color con significado.
   Sin Inter/Roboto/Arial. Sin degradados purpura genericos.
   ============================================================= */

:root {
  /* --- superficie / tinta (papel calido, no blanco) --- */
  --paper:      #F5EFE4;   /* fondo base, crema calido */
  --paper-2:    #EDE4D4;   /* bandas alternas */
  --card:       #FFFDF8;   /* superficies elevadas */
  --ink:        #17130F;   /* texto principal, tinta espresso */
  --ink-soft:   #5A4F44;   /* texto secundario: taupe calido, NUNCA gris */

  /* --- color con significado --- */
  --accent:     #E8452A;   /* bermellon: accion, marca, energia */
  --accent-press:#C4361E;  /* estado pulsado */
  --teal:       #1F6F6B;   /* verde azulado: contraste sereno */
  --gold:       #E0A43B;   /* dorado: destacar, chispa */

  /* --- estructura --- */
  --line:       #E1D6C4;   /* filetes / bordes */
  --line-strong:#CBBDA6;
  --ok:         #1F6F6B;
  --err:        #C4361E;

  /* --- forma --- */
  --radius:     14px;
  --radius-sm:  9px;
  --radius-pill:999px;

  /* --- elevacion (sombra CALIDA de papel impreso, 3 niveles apilados + borde-luz) --- */
  --edge:       inset 0 1px 0 rgba(255,253,248,.9);   /* filo de luz superior: tarjeta "impresa" */
  --shadow-1:   0 1px 2px rgba(60,42,24,.06), 0 4px 12px -6px rgba(60,42,24,.12);
  --shadow-2:   0 1px 2px rgba(60,42,24,.05), 0 10px 22px -10px rgba(60,42,24,.16), 0 26px 52px -22px rgba(60,42,24,.20);
  --shadow-3:   0 2px 3px rgba(60,42,24,.06), 0 16px 34px -12px rgba(60,42,24,.20), 0 48px 90px -30px rgba(60,42,24,.28);
  /* alias legacy (todo el CSS existente sigue funcionando, ahora con capas) */
  --shadow:     var(--shadow-2);
  --shadow-sm:  var(--shadow-1);

  /* --- movimiento --- */
  --ease:       cubic-bezier(.22, .9, .26, 1);

  /* --- tipografia --- */
  --font-display: "Fraunces", "Georgia", serif;
  --font-ui:      "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* --- ritmo --- */
  --step: 8px;
  --maxw: 1080px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: .1px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.4px;
  margin: 0;
  /* Fraunces variable: alto contraste optico para caracter editorial */
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

a { color: var(--ink); text-decoration: none; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--accent-press); /* AA 4.71:1 sobre papel (el bermellon puro daba 3.45) */
  font-weight: 500;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* --- botones: hover con proposito (elevan + oscurecen) --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  padding: 15px 24px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease,
              background .16s ease, border-color .16s ease;
}
.btn-primary {
  background: #C9371C;
  color: #FFF7F2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28),
              0 1px 2px rgba(196,54,30,.28),
              0 10px 22px -10px rgba(196,54,30,.55);
}
.btn-primary:hover {
  background: #B22F16;
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28),
              0 2px 3px rgba(196,54,30,.28),
              0 16px 30px -12px rgba(196,54,30,.62);
}
.btn:active { transform: translateY(0) scale(.985); transition-duration: .06s; }
.btn-ghost {
  background: color-mix(in srgb, var(--card) 55%, transparent);
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover {
  border-color: var(--ink);
  background: var(--card);
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
}
.btn-block { width: 100%; justify-content: center; }

/* --- reveals de entrada (mejora progresiva: main.js añade .rv; sin JS no se oculta nada) --- */
.rv { opacity: 0; transform: translateY(16px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.rv.in { opacity: 1; transform: translateY(0); }
.rv.rv-1 { transition-delay: .08s; }
.rv.rv-2 { transition-delay: .16s; }
.rv.rv-3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }
@media print { .rv { opacity: 1 !important; transform: none !important; } }

/* --- enlace con subrayado animado (proposito, no decoracion) --- */
.link-underline {
  position: relative;
  color: var(--ink);
  font-weight: 500;
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.link-underline:hover::after { transform: scaleX(1); }

/* --- accesibilidad --- */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* =============================================================
   MODO ESTUDIO (oscuro) — solo el CHROME de la app.
   Los slides quedan blindados (definen sus propias variables en
   .slide via web_head), como hace Figma: el modo del usuario
   nunca toca el contenido del cliente. Paleta espresso CALIDA,
   coherente con la identidad (nada de gris azulado generico).
   ============================================================= */
html[data-app-theme="dark"] {
  --paper:      #161210;
  --paper-2:    #1D1712;
  --card:       #211A15;
  --ink:        #F0E8DA;
  --ink-soft:   #A59887;
  --line:       #372C21;
  --line-strong:#4C3E2F;
  --edge:       inset 0 1px 0 rgba(255,248,235,.05);
  --shadow-1:   0 1px 2px rgba(0,0,0,.4), 0 4px 12px -6px rgba(0,0,0,.5);
  --shadow-2:   0 1px 2px rgba(0,0,0,.4), 0 10px 22px -10px rgba(0,0,0,.55), 0 26px 52px -22px rgba(0,0,0,.6);
  --shadow-3:   0 2px 3px rgba(0,0,0,.45), 0 16px 34px -12px rgba(0,0,0,.6), 0 48px 90px -30px rgba(0,0,0,.7);
  color-scheme: dark;
}
html[data-app-theme="dark"] body { background: var(--paper); color: var(--ink); }
/* el toggle */
.theme-toggle { background: none; border: 1px solid var(--line); border-radius: 999px; width: 36px; height: 36px; cursor: pointer; font-size: 16px; line-height: 1; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s, transform .15s; }
.theme-toggle:hover { border-color: var(--line-strong); transform: rotate(15deg); }

/* Modo Estudio — correcciones de componentes (auditoría visual 13-jul) */
html[data-app-theme="dark"] {
  --nav-bg: rgba(20,16,13,.86);
  --banner-bg: #2A2118;
  --banner-ink: var(--gold);
}
/* inputs/selects/textareas del CHROME sin estilo propio: nunca blanco UA en oscuro
   (los slides quedan fuera: sus inputs no existen; y todo lo estilado ya usa variables) */
html[data-app-theme="dark"] input:not(.slide input),
html[data-app-theme="dark"] textarea,
html[data-app-theme="dark"] select {
  background-color: var(--card); color: var(--ink); border-color: var(--line);
}
html[data-app-theme="dark"] input::placeholder,
html[data-app-theme="dark"] textarea::placeholder { color: var(--ink-soft); }

/* Dark: la why-card destacada (invertida en claro) pasa a acento espresso elevado;
   la pullq-card se queda en papel A PROPOSITO (tarjeta fisica sobre mesa oscura). */
html[data-app-theme="dark"] .why-card:first-child { background: #2A2118; border-color: var(--line-strong); }

/* ===== Auditoría WCAG de contraste (13-jul) — arreglos dark ===== */
/* 1) Eyebrows: el bermellón oscuro no contrasta sobre espresso -> dorado (8:1) */
html[data-app-theme="dark"] .eyebrow { color: var(--gold); }
html[data-app-theme="dark"] .hero .eyebrow { background: #2A2118; color: var(--gold); }
/* 2) Botón primario: bermellón un punto más profundo -> texto crema pasa de 3.7 a >5:1 */
html[data-app-theme="dark"] .btn-primary { background: #C9371C; }
html[data-app-theme="dark"] .btn-primary:hover { background: #B22F16; }
/* 3) Why-card capitana: sus textos usaban var(--paper) (oscuro en dark) sobre acento oscuro -> crema explícito */
html[data-app-theme="dark"] .why-card:first-child h3 { color: #F0E8DA; }
html[data-app-theme="dark"] .why-card:first-child p { color: rgba(240,232,218,.78); }
/* 4) Botón de la banda CTA: fondo crema con texto que era var(--ink) (crema en dark) -> tinta literal */
html[data-app-theme="dark"] .cta-band .btn-primary { background: #F5EFE4; color: #17130F; }
html[data-app-theme="dark"] .cta-band .btn-primary:hover { background: #FFFDF8; color: #17130F; }
/* 5) Enlaces de acento sobre superficies oscuras: bermellón aclarado (>6:1) */
html[data-app-theme="dark"] .footer a { color: #FF7A5C; }
/* 6) Badges de acento sobre superficies oscuras: 4.49 -> >6:1 */
html[data-app-theme="dark"] .st-badge { color: #FF7A5C; }
/* 7) enlace CSV de analytics (aparece con leads reales): 4.35 -> >6:1 */
html[data-app-theme="dark"] .an-csv { color: #FF7A5C; }

/* ===== WCAG del modo claro (auditoría 13-jul, 27 casos) ===== */
/* Banda de tinta editorial: fondo tinta SIEMPRE (la clase .alt la pisaba por orden de cascada) */
.section.alt.band-ink { background: #17130F; }
/* Eyebrows en claro: bermellón profundo (4.9:1 sobre paper-2); el dark ya los pone dorados */
html:not([data-app-theme="dark"]) .eyebrow { color: #A82D15; }
html:not([data-app-theme="dark"]) .footer a { color: #A82D15; }
html:not([data-app-theme="dark"]) .st-badge { color: #A82D15; }
html:not([data-app-theme="dark"]) .an-csv { color: #A82D15; }
html:not([data-app-theme="dark"]) .hero-ink .eyebrow { color: #FFF6EE; }