/* =============================================================
   ACTO VOLTAJE · WEB v2 · tema claro + correcciones de revisión
   La página es clara (papel neutro, tinta navy). El escenario oscuro
   queda solo donde es teatral: arco del hero, carteles, marquesina,
   demos, panel de caso y el telón de cierre con el pie.
   Se carga después de av.css y pages.css.
   ============================================================= */

:root {
  --page: #FAFAF8;            /* papel neutro (no crema) */
  --bg: var(--page);
  --bg-2: #F0F2F5;            /* sección alterna, gris frío muy suave */
  --surface: #FFFFFF;
  --fg: #0B2447;              /* tinta navy */
  --fg-2: #44566F;
  --fg-3: #6A7A90;
  --line: rgba(9, 49, 96, 0.12);
  --tint: 9, 49, 96;          /* rgba(var(--tint), a) */
  --hl: 9, 49, 96;
  --accent-ink: #8A5A00;      /* el amarillo de marca, oscurecido para texto sobre claro (AA) */
  --mark: rgba(255, 183, 0, 0.5);
  color-scheme: light;
}

/* ámbitos oscuros: escenario, carteles, demos, telón… */
.stage, .poster, .sign, .ticket, .telon, .contact, .footer, .menu, .drawer,
.demo, .case-core, .verdict-core, .scene-core, .engine-core, .side-cta > div,
.lib-cover-wrap, .curtain, .tone-navy, .lm {
  --bg: #04152B;
  --fg: #F4F7FB;
  --fg-2: #B6C8E0;
  --fg-3: #8DA2BF;
  --line: rgba(182, 200, 224, 0.16);
  --tint: 244, 247, 251;
  --hl: 255, 255, 255;
  --accent-ink: var(--yellow);
  color: var(--fg);
}

html { -webkit-tap-highlight-color: transparent; }
body { background: var(--page); color: var(--fg); }
body::after { opacity: 0.035; }
::selection { background: var(--yellow); color: #04152B; }

/* ---------- énfasis: un solo acento ---------- */
/* sobre claro el amarillo no tiene contraste como texto: subrayado de rotulador */
.h2 em, .stanza em, .leit-text em.y, .lib-feature h2 em {
  color: inherit;
  background: linear-gradient(transparent 58%, var(--mark) 58%, var(--mark) 90%, transparent 90%);
  padding: 0 0.06em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.telon .h2 em, .contact .h2 em, .stage .page-title em { color: var(--yellow); background: none; padding: 0; }
.leit-text em { color: inherit; }

/* ---------- navegación ---------- */
.nav-logo .logo-dark { display: none; }
.menu-open .nav-logo .logo-light { display: none; }
.menu-open .nav-logo .logo-dark { display: block; }
.nav { top: calc(12px + env(safe-area-inset-top, 0px)); }
.nav.is-solid {
  background: rgba(250, 250, 248, 0.82);
  box-shadow: inset 0 0 0 1px rgba(9, 49, 96, 0.08), 0 18px 40px -26px rgba(9, 49, 96, 0.35);
}
.nav-program { background: rgba(9, 49, 96, 0.05); box-shadow: inset 0 0 0 1px rgba(9, 49, 96, 0.1); color: var(--fg-2); }
.nav-menu { background: var(--fg); color: var(--page); }
.nav-menu-icon { background: var(--page); }
.nav-menu-icon i { background: var(--fg); }
.menu-open .nav-program { background: rgba(244, 247, 251, 0.08); box-shadow: inset 0 0 0 1px rgba(182, 200, 224, 0.16); color: #B6C8E0; }
.menu-open .nav-seats { color: #B6C8E0; }
.menu-open .nav-menu { background: #F4F7FB; color: #04152B; }
.menu-open .nav-menu-icon { background: #04152B; }
.menu-open .nav-menu-icon i { background: #F4F7FB; }
.menu-open .nav.is-solid { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (max-width: 760px) { .nav { top: calc(8px + env(safe-area-inset-top, 0px)); } }

/* menú: sin /NEXT GEN ni email, más aire entre palabras y entre líneas */
.menu { background: rgba(4, 21, 43, 0.97); overscroll-behavior: contain; }
.menu ol { display: grid; gap: clamp(6px, 1.4vh, 14px); }
.menu a { letter-spacing: -0.015em; word-spacing: 0.12em; line-height: 1.12; padding: 2px 0; transition: transform 420ms var(--ease-out), color 200ms ease; }
.menu a small { width: 40px; }
.menu a[aria-current="page"] { color: var(--yellow); }

/* ---------- botones ---------- */
.btn--ghost { color: var(--fg); box-shadow: inset 0 0 0 1px rgba(var(--tint), 0.4); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.stage .btn--ghost { background: rgba(4, 21, 43, 0.35); }
.btn-ico { background: rgba(4, 21, 43, 0.12); }
.btn, .chip, .round, .nav-menu, .scene-tab, .pill, .case, .drawer-close {
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--fg); }
  .crumbs a:hover { color: var(--yellow); }
  .link-arrow:hover { color: var(--accent-ink); }
  .rows a:hover .r-t, .lib-feature:hover h2, .lib-row:hover h3, .related a:hover h3 { color: var(--accent-ink); }
}

/* ---------- secciones ---------- */
.section--navy, .section--alt { background: var(--bg-2); --bg: var(--bg-2); }
.aura { opacity: 0.42; }
.leit .aura--teal { opacity: 0.32; }
.cast-track img { filter: brightness(0); opacity: 0.42; }
@media (hover: hover) and (pointer: fine) { .cast-track img:hover { opacity: 0.85; } }
.cast-track-wrap { touch-action: pan-y; }
.lit .w { color: var(--fg); }
.puppet img, .script-side .bezel img { box-shadow: 0 30px 70px -34px rgba(9, 49, 96, 0.45); }
.bezel, .poster, .case, .engine-item, .scene-shell, .verdict, .side-cta, .lib-feature .bezel {
  background: rgba(9, 49, 96, 0.05);
  box-shadow: inset 0 0 0 1px rgba(9, 49, 96, 0.09);
}
.poster { box-shadow: inset 0 0 0 1px rgba(9, 49, 96, 0.09), 0 -20px 50px -30px rgba(9, 49, 96, 0.4); }
.poster-list { background: rgba(4, 21, 43, 0.78); backdrop-filter: none; -webkit-backdrop-filter: none; }
.poster-list li { backdrop-filter: none; }
.sign { box-shadow: 0 30px 80px -40px rgba(255, 183, 0, 0.55), inset 0 0 0 1px rgba(255, 183, 0, 0.3); }
.tickets .ticket { box-shadow: 0 24px 50px -30px rgba(9, 49, 96, 0.55); }
.ticket--more { color: var(--fg); background: transparent; }
.ticket--more::before, .ticket--more::after { display: none; }

/* chips y filtros */
.chip[aria-pressed="true"] { background: var(--fg); color: var(--page); }
.chip[aria-pressed="true"] b { background: var(--page); color: var(--fg); }

/* tarjetas de caso y demos: sin desenfoque sobre contenido que se desplaza */
.case-year, .case-open { backdrop-filter: none; -webkit-backdrop-filter: none; }
.case-year { background: rgba(4, 21, 43, 0.72); }
.case-open { background: rgba(4, 21, 43, 0.6); }
.demo { backdrop-filter: none; -webkit-backdrop-filter: none; background: #071d3b; }
.case--demo .case-core { background: linear-gradient(160deg, #0b2a52, #061b38); }

/* formatos de colaboración sobre la sección alterna */
.format { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 14px 30px -26px rgba(9, 49, 96, 0.35); }
.format-n { color: var(--accent-ink); }
.facet i { color: var(--c, var(--accent-ink)); }
.prism-visual svg .beam-in { stroke: var(--fg); }
.timeline .dot { box-shadow: inset 0 0 0 2px var(--accent-ink); color: var(--accent-ink); }
.stanza-n { color: var(--accent-ink); }
.deliverables span { color: #0A6B5B; background: rgba(0, 180, 151, 0.1); }

/* next gen */
.pain:has(input:checked) { background: rgba(255, 183, 0, 0.12); box-shadow: inset 0 0 0 1px rgba(196, 140, 0, 0.45); }
.pain-box { box-shadow: inset 0 0 0 1.5px rgba(9, 49, 96, 0.35); background: var(--surface); }
.pain-box svg { stroke: #04152B; }
.scene-tab[aria-selected="true"] { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 12px 26px -22px rgba(9, 49, 96, 0.4); }
.scene-tab[aria-selected="true"] .n { color: var(--accent-ink); }

/* libretos y artículos */
.lib-cat { color: #04152B; }
.search input { font-size: 16px; background: var(--surface); }
.search input:focus { box-shadow: inset 0 0 0 1.5px var(--fg); }
.prose { color: #2A3D58; }
.prose h2[data-n]::before, .prose li::marker, .prose summary::after { color: var(--accent-ink); }
.prose a { text-decoration-color: var(--accent-ink); }
.prose blockquote { border-left-color: var(--yellow); }
.prose .tldr, .prose .callout, .prose .key, .prose aside { background: rgba(255, 183, 0, 0.1); box-shadow: inset 0 0 0 1px rgba(196, 140, 0, 0.3); color: #24364F; }
.prose .tldr-label, .prose .callout-label { display: block; font-family: var(--mono); font-size: 12px; color: var(--accent-ink); margin-bottom: 8px; }
.toc a.is-active { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.toc a.is-active::before { color: var(--accent-ink); }
.author i { color: #04152B; }

/* telón (formulario único) + pie: un solo bloque de cierre oscuro */
.telon { background: var(--navy); }
.footer { background: #06264E; border-top: 1px solid rgba(182, 200, 224, 0.12); }
.footer-logo { height: 34px; }

/* gracias */
.thanks { background: var(--page); min-height: 100svh; }
.thanks-ticket { box-shadow: 0 50px 110px -50px rgba(9, 49, 96, 0.55), inset 0 0 0 1px var(--line); background: var(--surface); }
.thanks-ticket::before, .thanks-ticket::after { background: var(--page); }

/* ---------- escenario: alto estable en móvil ---------- */
.stage { height: calc(100svh - var(--nav-h) - clamp(14px, 3.2vw, 44px) - 12px); }
.stage--page { height: clamp(460px, 66svh, 680px); }
.stage--short { height: clamp(380px, 52svh, 540px); }

/* ---------- formulario: 16px mínimo en táctil (sin zoom en iOS) ---------- */
.field input, .field textarea, .select select { font-size: max(16px, 1.05rem); }

/* ---------- ticket arrastrable: el navegador conserva el scroll vertical ---------- */
.tickets { touch-action: pan-x pan-y; }

@media (prefers-reduced-motion: reduce) {
  .menu a { transition: color 200ms ease; }
}

/* =============================================================
   HOME · tonos de marca (no todo blanco)
   bone de marca con degradado salmón/teal · banda navy (tono v4) · blanco solo en Obras
   ============================================================= */
body.page-home { background: #F5F1EA; }
.page-home .hero { background: #F5F1EA; }
.tone-bone {
  background:
    radial-gradient(ellipse 55% 70% at 92% 0%, rgba(242, 160, 122, 0.34), transparent 62%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(0, 180, 151, 0.16), transparent 62%),
    #F5F1EA;
}
.cast.tone-bone { background: #F5F1EA; }
.tone-navy {
  background:
    radial-gradient(ellipse 70% 45% at 100% 0%, rgba(15, 146, 178, 0.28), transparent 62%),
    radial-gradient(ellipse 60% 40% at 0% 100%, rgba(255, 107, 126, 0.14), transparent 62%),
    var(--navy);
}
.tone-navy--top { border-radius: clamp(28px, 5vw, 64px) clamp(28px, 5vw, 64px) 0 0; }
.tone-navy--bottom { border-radius: 0 0 clamp(28px, 5vw, 64px) clamp(28px, 5vw, 64px); padding-bottom: clamp(100px, 13vw, 170px); }
.page-home .works { background: var(--page); }
.tone-navy .h2 em { color: var(--yellow); background: none; padding: 0; }
.tone-navy .poster { background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 -20px 50px -30px rgba(1, 8, 20, 0.6); }
.tone-navy .aura { opacity: 0.3; }
.page-home .tickets .ticket { box-shadow: 0 24px 50px -30px rgba(9, 49, 96, 0.55); }

/* =============================================================
   LEAD MAGNET · cajetín de descarga del PDF
   ============================================================= */
.lm {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: center;
  padding: clamp(22px, 3vw, 34px);
  border-radius: calc(var(--r) + 4px);
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(255, 183, 0, 0.18), transparent 60%),
    radial-gradient(ellipse 50% 70% at 0% 100%, rgba(255, 107, 126, 0.14), transparent 60%),
    var(--navy);
  box-shadow: 0 30px 70px -40px rgba(9, 49, 96, 0.7);
  margin: 2.2em 0;
}
.lm-cover { position: relative; transform: rotate(-3deg); transition: transform 400ms var(--ease-out); }
.lm-cover img { width: 100%; border-radius: 6px; box-shadow: 0 24px 40px -18px rgba(1, 8, 20, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.1); }
.lm-cover::after { content: "PDF"; position: absolute; right: -8px; top: -8px; font-family: var(--mono); font-size: 11px; font-weight: 700; color: #04152B; background: var(--yellow); padding: 4px 8px; border-radius: 999px; }
@media (hover: hover) and (pointer: fine) { .lm:hover .lm-cover { transform: rotate(-1deg) translateY(-4px); } }
.lm small.lm-kicker { display: block; font-family: var(--mono); font-size: 12px; color: var(--yellow); margin-bottom: 8px; }
.lm h3, .prose .lm h3 { margin: 0 0 8px; font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.15; letter-spacing: -0.025em; color: var(--fg); font-weight: 800; }
.lm p, .prose .lm p { margin: 0 0 16px; color: var(--fg-2); font-size: 15px; line-height: 1.5; }
.lm-points { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.prose .lm-points li { margin: 0; }
.lm-points li { font-family: var(--mono); font-size: 11.5px; padding: 5px 10px; border-radius: 999px; color: var(--fg-2); background: rgba(244, 247, 251, 0.07); box-shadow: inset 0 0 0 1px rgba(182, 200, 224, 0.18); }
.lm-row { display: flex; gap: 8px; }
.lm-row input[type="email"] {
  flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 18px; border: 0; border-radius: 999px;
  background: #FFFFFF; color: #0B2447; font: inherit; font-size: 16px;
  box-shadow: inset 0 0 0 1px rgba(9, 49, 96, 0.2); outline: none; transition: box-shadow 160ms ease;
}
.lm-row input[type="email"]::placeholder { color: #6A7A90; }
.lm-row input[type="email"]:focus { box-shadow: inset 0 0 0 2px var(--yellow); }
.lm-row .btn { flex: none; }
.lm-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 13px; color: var(--fg-2); line-height: 1.4; cursor: pointer; }
.lm-consent input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--yellow); flex: none; }
.lm-consent a { color: var(--fg); }
.lm-error { margin: 10px 0 0; font-size: 13.5px; color: #FFB4BE; }
.lm-done { display: none; }
.lm.is-done .lm-form { display: none; }
.lm.is-done .lm-done { display: block; }
.lm-done b { display: block; font-size: 1.15rem; color: var(--fg); margin-bottom: 6px; }
.lm-done a.btn { margin-top: 6px; }
.lm--band { margin: 0 0 clamp(48px, 7vw, 90px); }
@media (max-width: 640px) {
  .lm { grid-template-columns: 1fr; }
  .lm-cover { max-width: 170px; }
  .lm-row { flex-direction: column; }
  .lm-row .btn { justify-content: center; }
}
.lib-pdf { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px; color: #04152B; background: var(--yellow); padding: 3px 9px; border-radius: 999px; font-weight: 700; }
/* el cajetín vive dentro de .prose: gana a la regla genérica de .prose aside */
.prose .lm {
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(255, 183, 0, 0.18), transparent 60%),
    radial-gradient(ellipse 50% 70% at 0% 100%, rgba(255, 107, 126, 0.14), transparent 60%),
    var(--navy);
  box-shadow: 0 30px 70px -40px rgba(9, 49, 96, 0.7);
  color: var(--fg);
  padding: clamp(22px, 3vw, 34px);
}