/* ═══════════════════════════════════════════════════════════════════
   Mexamedia Digital · sitio (v4, 2026-11-08)

   Basado en el design system de las propuestas comerciales, ya aprobado:
   docs_mexa_media/.claude/skills/propuesta-comercial-mexamedia/references/design-system.md
   (fuente viva: assets/plantilla-propuesta.html). Mismos tokens, mismos
   componentes: franja EPG, portada noche con parrilla, h2 con número de
   sección en mono, columnas con regla superior (.gains, .roles), flujo
   conectado (.flow), aviso ámbar (.callout), pasos (.how), tabla de alcance,
   contraportada azul profundo (.back).

   Reglas: tema claro por decisión (portada noche, cierre azul profundo);
   ámbar sólo para cortes, avisos y una cifra; radios de 4-6 px; sin sombras
   decorativas ni degradados.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;
  --ink: #0F172A;
  --ink-2: #475569;
  --ink-3: #64748B;
  --paper: #FFFFFF;
  --tint: #F1F5F9;
  --rule: #DCE3EC;
  --signal: #2563EB;
  --signal-deep: #1E3A8A;
  --signal-soft: #DBEAFE;
  --break: #F59E0B;
  --break-2: #FBBF24;
  --break-soft: #FEF3C7;
  --night: #0B1222;
  --night-2: #16213A;
  --night-rule: #24314F;
  --on-night: #F1F5F9;
  --on-night-2: #A9B6CB;
  --font-display: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
p { margin: 0; max-width: 66ch; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }
.wrap { max-width: 1120px; margin-inline: auto; padding-inline: 32px; }
@media (max-width: 560px) { .wrap { padding-inline: 16px; } }

/* ——— Franja EPG (motivo de marca) ——— */
.epg { display: grid; grid-template-columns: 4fr 1.1fr 6fr 0.8fr 3fr; height: 8px; }
.epg span:nth-child(odd) { background: var(--signal); }
.epg span:nth-child(3) { background: var(--signal-deep); }
.epg span:nth-child(2), .epg span:nth-child(4) { background: repeating-linear-gradient(135deg, var(--break) 0 6px, var(--break-2) 6px 12px); }

/* ——— Logo ——— */
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.logo svg { width: 40px; height: 40px; flex: none; }
.wordmark { display: grid; line-height: 1; }
.wordmark b { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: -0.02em; }
.wordmark small { font-weight: 600; font-size: 9px; letter-spacing: 0.34em; margin-top: 5px; color: var(--signal); }

/* ——— Encabezado fijo ——— */
.site-head { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--rule); }
.site-head .wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
.site-head nav { display: flex; gap: 26px; margin-left: auto; }
.site-head nav a { position: relative; text-decoration: none; font-size: 14px; font-weight: 500; color: var(--ink-2); padding-block: 6px; }
.site-head nav a:hover { color: var(--ink); }
.site-head nav a.is-on { color: var(--ink); }
.site-head nav a.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--signal); }
@media (max-width: 980px) { .site-head nav { display: none; } .site-head .btn { margin-left: auto; } }

/* ——— Botones ——— */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1; padding: 14px 22px; border-radius: 6px; border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--signal); color: #fff; }
.btn-primary:hover { background: var(--signal-deep); }
.btn-line { border-color: var(--rule); color: var(--ink); background: transparent; }
.btn-line:hover { border-color: var(--ink); }
.btn-sm { padding: 10px 16px; font-size: 14px; }
.on-dark .btn-line { border-color: rgb(255 255 255 / .35); color: #fff; }
.on-dark .btn-line:hover { border-color: #fff; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ——— Portada (noche, como la de las propuestas) ——— */
.cover { background: var(--night); color: var(--on-night); }
.cover .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: 56px; align-items: center; padding-block: 88px 64px; }
@media (max-width: 960px) { .cover .wrap { grid-template-columns: 1fr; gap: 40px; padding-block: 56px 40px; } }
.kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--break-2); margin-bottom: 18px; }
.cover h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 5vw, 58px); line-height: 1.05; letter-spacing: -0.03em; margin: 0; max-width: 16ch; text-wrap: balance; }
.cover .lede { font-size: 18px; color: var(--on-night-2); max-width: 50ch; margin-top: 22px; }
.cover .actions { margin-top: 34px; }

.cover .wrap + .wrap { display: block; padding-block: 0; }
.cover h1 { max-width: 17ch; }

/* Parrilla de la portada */
.grid-epg { display: grid; gap: 6px; }
.grid-epg .row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: center; }
.grid-epg .t { font-family: var(--font-mono); font-size: 11px; color: var(--on-night-2); }
.grid-epg .lane { display: flex; gap: 4px; height: 34px; min-width: 0; }
.grid-epg .b { border-radius: 3px; background: var(--night-2); border: 1px solid var(--night-rule); font-size: 12px; color: var(--on-night-2); padding: 0 10px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; min-width: 0; }
.grid-epg .b.live { background: var(--signal); border-color: var(--signal); color: #fff; font-weight: 600; }
.grid-epg .b.ad { background: repeating-linear-gradient(135deg, var(--break) 0 5px, var(--break-2) 5px 10px); border-color: var(--break); flex: 0 0 26px; padding: 0; }
.grid-epg .cap { margin-top: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--on-night-2); display: flex; gap: 18px; flex-wrap: wrap; }
.grid-epg .cap i { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin-right: 7px; vertical-align: 0; }
.grid-epg .cap .k-live { background: var(--signal); }
.grid-epg .cap .k-ad { background: repeating-linear-gradient(135deg, var(--break) 0 3px, var(--break-2) 3px 6px); }

/* Datos al pie de la portada */
.cover-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--night-rule); margin: 0; }
.cover-meta div { padding: 22px 20px 30px 0; display: grid; gap: 4px; min-width: 0; }
.cover-meta div + div { padding-left: 20px; border-left: 1px solid var(--night-rule); }
.cover-meta dt { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -0.03em; line-height: 1.1; color: #fff; }
.cover-meta div:first-child dt { color: var(--break-2); }
.cover-meta dd { margin: 0; font-size: 13px; color: var(--on-night-2); }
@media (max-width: 720px) { .cover-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cover-meta div:nth-child(3) { padding-left: 0; border-left: 0; } .cover-meta div:nth-child(n+3) { border-top: 1px solid var(--night-rule); } }

/* ——— Secciones ——— */
.sec { padding-block: 96px; border-top: 1px solid var(--rule); scroll-margin-top: 68px; }
.sec.tint { background: var(--tint); }
@media (max-width: 720px) { .sec { padding-block: 64px; } }
.sec-head { display: grid; gap: 16px; margin-bottom: 44px; max-width: 760px; }
h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
h2 .tc { display: block; font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--signal); margin-bottom: 12px; }
h3 { font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 18px; }
.lead { font-size: 18px; color: var(--ink-2); max-width: 62ch; }
.lead b { color: var(--ink); }
.block + .block { margin-top: 56px; }

/* Columnas con regla superior (beneficios) */
.gains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 28px; }
.gains > div { display: grid; gap: 8px; align-content: start; padding-top: 16px; border-top: 2px solid var(--signal); min-width: 0; }
.gains b { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.015em; line-height: 1.25; }
.gains span { font-size: 15px; color: var(--ink-2); }
.gains .big { font-size: 34px; letter-spacing: -0.03em; color: var(--signal-deep); line-height: 1.05; }
@media (max-width: 760px) { .gains { grid-template-columns: 1fr; } }

/* Dos columnas: ellos / nosotros */
.roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.roles > div { display: grid; gap: 12px; align-content: start; padding-top: 16px; border-top: 2px solid var(--ink); min-width: 0; }
.roles > div.us { border-top-color: var(--signal); }
.roles b.t { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.015em; line-height: 1.2; }
.roles p { color: var(--ink-2); font-size: 15.5px; }
@media (max-width: 760px) { .roles { grid-template-columns: 1fr; } }

ul.clean { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 15.5px; color: var(--ink-2); }
ul.clean li::marker { color: var(--signal); }
ul.clean b { color: var(--ink); font-weight: 600; }

/* Pasos numerados (lista) */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 15.5px; color: var(--ink-2); }
.steps li:first-child { padding-top: 0; }
.steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-size: 13px; color: var(--signal); padding-top: 3px; }
.steps b { color: var(--ink); font-weight: 600; display: block; }

/* Aviso ámbar */
.callout { background: var(--tint); border-radius: 6px; padding: 18px 22px; display: grid; gap: 6px; }
.callout.amber { background: var(--break-soft); }
.callout h4 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.callout h4 i { width: 10px; height: 10px; border-radius: 2px; background: var(--break); flex: none; }
.callout p { font-size: 15px; color: var(--ink-2); max-width: none; }

/* Flujo conectado: creador → Mexamedia → plataforma */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flow li { position: relative; display: grid; gap: 6px; align-content: start; padding: 22px 28px 22px 22px; background: var(--tint); min-width: 0; }
.flow li:first-child { border-radius: 6px 0 0 6px; }
.flow li:last-child { border-radius: 0 6px 6px 0; }
.flow li.us { background: var(--signal-soft); }
.flow li + li { border-left: 2px solid var(--paper); }
.flow li:not(:last-child)::after { content: ""; position: absolute; right: -10px; top: 50%; width: 18px; height: 18px; background: var(--paper); border: 2px solid var(--signal); border-left: 0; border-bottom: 0; transform: translateY(-50%) rotate(45deg); z-index: 1; }
.flow .k { font-family: var(--font-mono); font-size: 12px; color: var(--signal); }
.flow b { font-family: var(--font-display); font-size: 18px; }
.flow span:not(.k) { font-size: 14.5px; color: var(--ink-2); }
@media (max-width: 720px) { .flow { grid-template-columns: 1fr; } .flow li:first-child { border-radius: 6px 6px 0 0; } .flow li:last-child { border-radius: 0 0 6px 6px; } .flow li + li { border-left: 0; border-top: 2px solid var(--paper); } .flow li:not(:last-child)::after { display: none; } }

/* Cómo trabajamos: 4 pasos con ícono (como .how de la propuesta) */
.how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.how li { position: relative; display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: 6px; background: var(--tint); min-width: 0; }
.sec.tint .how li { background: var(--paper); }
.how .ic { width: 44px; height: 44px; border-radius: 10px; background: var(--signal); color: #fff; display: grid; place-items: center; }
.how li:nth-child(2) .ic { background: var(--signal-deep); }
.how li:nth-child(3) .ic { background: var(--break); color: var(--ink); }
.how li:nth-child(4) .ic { background: var(--ink); }
.how .ic svg { width: 22px; height: 22px; }
.how .k { position: absolute; top: 20px; right: 20px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.how b { font-family: var(--font-display); font-size: 18px; padding-top: 6px; }
.how span:not(.k):not(.ic) { font-size: 14.5px; color: var(--ink-2); }
@media (max-width: 900px) { .how { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .how { grid-template-columns: 1fr; } }

/* Ficha técnica: tabla de alcance */
.table-wrap { overflow-x: auto; }
table.spec { width: 100%; border-collapse: collapse; font-size: 15px; }
table.spec th, table.spec td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
table.spec thead th { font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; border-bottom: 2px solid var(--ink); }
table.spec tbody th { font-weight: 600; width: 22%; white-space: nowrap; }
table.spec td.k { width: 20%; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-3); }
table.spec tr.grp th { padding-top: 26px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal); border-bottom: 1px solid var(--ink); }
table.spec code { font-family: var(--font-mono); font-size: 13px; background: var(--tint); padding: 1px 5px; border-radius: 3px; }
.sec.tint table.spec code { background: var(--paper); }
@media (max-width: 640px) { table.spec td.k { width: auto; } table.spec tbody th { white-space: normal; } }
.note { font-size: 13.5px; color: var(--ink-3); }

/* Preguntas */
.faq-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
@media (max-width: 860px) { .faq-cols { grid-template-columns: 1fr; gap: 40px; } }
.faq-cols > div { border-top: 2px solid var(--ink); padding-top: 14px; }
.faq-cols > div.us { border-top-color: var(--signal); }
details.faq { border-bottom: 1px solid var(--rule); }
details.faq summary { cursor: pointer; list-style: none; padding: 16px 32px 16px 0; position: relative; font-weight: 600; font-size: 16px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; position: absolute; right: 2px; top: 13px; font-family: var(--font-mono); font-size: 20px; color: var(--signal); }
details.faq[open] summary::after { content: "−"; }
details.faq p { padding-bottom: 16px; color: var(--ink-2); font-size: 15.5px; }

/* ——— Cierre / contacto (contraportada azul profundo) ——— */
.back { background: var(--signal-deep); color: var(--on-night); scroll-margin-top: 68px; }
.back .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; padding-block: 88px 56px; align-items: start; }
@media (max-width: 900px) { .back .wrap { grid-template-columns: 1fr; padding-block: 64px 40px; } }
.back .wordmark small { color: var(--break-2); }
.back-hero { display: grid; gap: 24px; align-content: start; }
.back-hero .logo svg { width: 56px; height: 56px; }
.back-hero .wordmark b { font-size: 28px; }
.back-hero .wordmark small { font-size: 11px; }
.back-hero .say { font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 36px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; max-width: 18ch; }
.back-hero p { color: #C7D3F0; font-size: 16.5px; }
.back-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; border-top: 1px solid rgb(255 255 255 / .2); padding-top: 18px; margin: 0; font-size: 14.5px; }
.back-info div { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.back-info dt { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #B9C8EC; font-weight: 600; }
.back-info dd { margin: 0; }
.back-info a { text-decoration: none; }
.back-info a:hover { text-decoration: underline; }
@media (max-width: 600px) { .back-info { grid-template-columns: 1fr; } }
.site-foot { background: var(--signal-deep); color: #B9C8EC; font-size: 13px; }
.site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 20px 28px; border-top: 1px solid rgb(255 255 255 / .2); }

/* Formulario (lo arma mm.js) sobre la contraportada */
.form { background: var(--paper); color: var(--ink); border-radius: 6px; padding: 28px; display: grid; gap: 22px; }
.fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.fieldset legend { font-weight: 600; font-size: 15px; margin-bottom: 10px; padding: 0; }
.fieldset legend small { font-weight: 400; color: var(--ink-3); }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span { display: inline-block; font-size: 14.5px; padding: 9px 14px; border-radius: 6px; border: 1px solid var(--rule); background: var(--paper); cursor: pointer; }
.choice input:checked + span { border-color: var(--signal); background: var(--signal-soft); color: var(--signal-deep); font-weight: 600; }
.choice input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 2px; }
.field label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.field input { width: 100%; font: inherit; font-size: 15px; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: 12px 14px; }
.field input:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); }
.field .hint { font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.form-err { font-size: 14px; font-weight: 600; color: #92400E; background: var(--break-soft); padding: 8px 12px; border-radius: 6px; }
.form .btn { width: 100%; background: var(--signal); color: #fff; }
.form .btn:hover { background: var(--signal-deep); }
.form-done { display: grid; gap: 10px; }
.form-done .ok-mark { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--signal-soft); color: var(--signal); }
.form-done h3 { text-transform: none; letter-spacing: -0.01em; font-family: var(--font-display); font-size: 20px; color: var(--ink); margin: 0; }
.form-done p { color: var(--ink-2); }
.form-done .reset { justify-self: start; background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--signal); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════════════
   v5 · de "documento" a "sitio de televisión" (2026-11-08)
   Misma identidad; cambia el formato: portada-tele con canal al aire,
   bandas editoriales, fotos, pantalla ilustrativa del CMS, ficha resumida.
   ═══════════════════════════════════════════════════════════════════ */

/* Kicker de sección (Inter, como la guía) en vez del número mono */
.eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal); margin: 0 0 14px; }
.on-dark .eyebrow, .night .eyebrow { color: var(--break-2); }

/* ——— Sección noche: los tokens se redefinen y los componentes se adaptan ——— */
.sec.night {
  background: var(--night); color: var(--on-night); border-top: 0;
  --ink: #F1F5F9; --ink-2: #A9B6CB; --ink-3: #8C9AB0; --rule: #24314F;
  --tint: #16213A; --paper: #0B1222; --signal-soft: rgba(37, 99, 235, 0.22);
}
.sec.night .btn-line { border-color: rgb(255 255 255 / .35); color: #fff; }
.sec.night .btn-line:hover { border-color: #fff; }
.sec.night .roles > div { border-top-color: #F1F5F9; }
.sec.night .roles > div.us, .sec.night .gains > div { border-top-color: #60A5FA; }
.sec.night .flow li.us { background: #1E3A8A; }
.sec.night .flow li.us span:not(.k) { color: #DBEAFE; }
.sec.night .flow .k { color: #93C5FD; }

/* ——— Portada: la tele con el canal al aire ——— */
.cover .wrap.cover-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); padding-block: 72px 56px; }
@media (max-width: 960px) { .cover .wrap.cover-grid { grid-template-columns: 1fr; } }
.tv { position: relative; margin: 0; }
.tv-bezel { background: #05080F; border-radius: 14px; padding: 10px; box-shadow: 0 0 0 1px #1C2742, 0 40px 80px -30px rgb(0 0 0 / .8); }
.tv-screen { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #111A2E; isolation: isolate; }
.tv-stand { width: 34%; height: 10px; margin: 0 auto; background: #05080F; border-radius: 0 0 8px 8px; box-shadow: 0 1px 0 #1C2742; }

.tv-prog { position: absolute; inset: 0; transition: opacity .6s ease; }
.tv-prog img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.05); }
.tv-prog::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(5 8 15 / .35) 0%, rgb(5 8 15 / 0) 30%, rgb(5 8 15 / 0) 55%, rgb(5 8 15 / .85) 100%); }
.tv-fallback { position: absolute; inset: 0; background: radial-gradient(120% 90% at 30% 30%, #1E3A8A 0%, #111A2E 55%, #0B1222 100%); z-index: -1; }

.tv-bug { position: absolute; top: 4.5%; left: 3.5%; z-index: 3; display: flex; align-items: center; gap: 8px; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: clamp(11px, 1.2vw, 14px); letter-spacing: -0.01em; opacity: .92; }
.tv-bug svg { width: clamp(18px, 2vw, 24px); height: clamp(18px, 2vw, 24px); }
.tv-live { position: absolute; top: 4.5%; right: 3.5%; z-index: 3; display: inline-flex; align-items: center; gap: 7px; font-size: clamp(9px, 1vw, 11px); font-weight: 700; letter-spacing: .16em; color: #fff; background: rgb(5 8 15 / .55); border: 1px solid rgb(255 255 255 / .25); padding: 5px 9px; border-radius: 4px; }
.tv-live i { width: 7px; height: 7px; border-radius: 50%; background: #60A5FA; animation: tvblink 1.6s ease-in-out infinite; }
@keyframes tvblink { 50% { opacity: .2; } }

.tv-lower { position: absolute; left: 3.5%; right: 3.5%; bottom: 5%; z-index: 3; color: #fff; display: grid; gap: 6px; }
.tv-lower .now { font-size: clamp(9px, 0.95vw, 11px); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #93C5FD; }
.tv-lower b { font-family: var(--font-display); font-size: clamp(15px, 2vw, 24px); letter-spacing: -0.02em; line-height: 1.1; }
.tv-lower .bar { height: 3px; background: rgb(255 255 255 / .2); border-radius: 2px; overflow: hidden; }
.tv-lower .bar i { display: block; height: 100%; width: 38%; background: #60A5FA; }
.tv-lower .next { font-size: clamp(10px, 1vw, 12px); color: #CBD5E1; }

/* Slate del corte comercial (lámina 11 del deck: "Regresamos en 0:45") */
.tv-slate { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; background: #0B1222; opacity: 0; transition: opacity .6s ease; }
.tv-slate::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: repeating-linear-gradient(135deg, var(--break) 0 8px, var(--break-2) 8px 16px); }
.tv-slate .lbl { font-size: clamp(9px, 1vw, 12px); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--break-2); }
.tv-slate .cd { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 5vw, 60px); letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
.tv-slate .sub { font-size: clamp(10px, 1.1vw, 13px); color: var(--on-night-2); }
.tv.is-break .tv-slate { opacity: 1; }
.tv-cap { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--font-mono); font-size: 11.5px; color: var(--on-night-2); }
.tv-cap i { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin-right: 7px; }
.tv-cap .k-live { background: #60A5FA; }
.tv-cap .k-ad { background: repeating-linear-gradient(135deg, var(--break) 0 3px, var(--break-2) 3px 6px); }
@media (prefers-reduced-motion: reduce) { .tv-live i { animation: none; } .tv-slate, .tv-prog { transition: none; } }

/* ——— Banda editorial de una frase ——— */
.statement { padding-block: clamp(72px, 9vw, 120px); border-top: 1px solid var(--rule); }
.statement p.big { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 5.2vw, 64px); line-height: 1.05; letter-spacing: -0.035em; max-width: 20ch; text-wrap: balance; }
.statement p.big em { font-style: normal; color: var(--signal); }
.statement .src { margin-top: 18px; font-size: 13px; color: var(--ink-3); }
.statement .pair { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: end; }
@media (max-width: 860px) { .statement .pair { grid-template-columns: 1fr; gap: 28px; } }
.statement .side { border-top: 2px solid var(--break); padding-top: 16px; display: grid; gap: 6px; }
.statement .side b { font-family: var(--font-display); font-size: clamp(36px, 4vw, 52px); letter-spacing: -0.03em; line-height: 1; color: var(--signal-deep); }
.statement .side span { color: var(--ink-2); font-size: 15.5px; }

/* Banda con foto a sangre */
.photo-band { position: relative; min-height: clamp(360px, 48vw, 560px); display: grid; align-items: end; color: #fff; overflow: hidden; background: var(--night); }
.photo-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(11 18 34 / .88) 0%, rgb(11 18 34 / .55) 45%, rgb(11 18 34 / .1) 100%); }
.photo-band .wrap { position: relative; z-index: 1; padding-block: 64px; width: 100%; }
.photo-band p.big { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4.6vw, 56px); line-height: 1.06; letter-spacing: -0.03em; max-width: 17ch; text-wrap: balance; }
.photo-band p.big em { font-style: normal; color: var(--break-2); }
.photo-band .src { margin-top: 14px; color: #CBD5E1; font-size: 14.5px; max-width: 48ch; }

/* ——— Creadores: foto + texto ——— */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.photo { margin: 0; position: relative; border-radius: 6px; overflow: hidden; background: var(--tint); aspect-ratio: 4 / 5; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo figcaption { position: absolute; left: 14px; bottom: 14px; font-family: var(--font-mono); font-size: 11px; color: #fff; background: rgb(11 18 34 / .6); padding: 4px 8px; border-radius: 3px; }
.photo::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; z-index: 1; background: linear-gradient(90deg, var(--signal) 0 55%, var(--break) 55% 70%, var(--signal-deep) 70%); }
@media (max-width: 900px) { .photo { aspect-ratio: 16 / 10; } }

.model { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); margin-top: 32px; }
.model > div { padding: 18px 18px 20px 0; display: grid; gap: 6px; align-content: start; }
.model > div + div { padding-left: 18px; border-left: 1px solid var(--rule); }
.model .big { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -0.035em; line-height: 1; color: var(--signal-deep); }
.model b:not(.big) { font-size: 15px; }
.model span { font-size: 14px; color: var(--ink-2); }
@media (max-width: 560px) { .model { grid-template-columns: 1fr; } .model > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); } }

/* ——— Pantalla ilustrativa del CMS: reglas de cortes ——— */
.screen { background: #0E1628; border: 1px solid #24314F; border-radius: 10px; overflow: hidden; box-shadow: 0 40px 80px -40px rgb(0 0 0 / .7); }
.screen-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #24314F; background: #111A2E; }
.screen-bar i { width: 9px; height: 9px; border-radius: 50%; background: #24314F; }
.screen-bar span { margin-left: 8px; font-family: var(--font-mono); font-size: 11.5px; color: #A9B6CB; }
.screen-body { padding: 22px; display: grid; gap: 16px; }
.screen-body h5 { margin: 0; font-family: var(--font-display); font-size: 17px; color: #F1F5F9; letter-spacing: -0.01em; }
.rule-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid #1C2742; font-size: 14px; color: #CBD5E1; }
.stepper { display: inline-flex; align-items: center; border: 1px solid #2B3A5C; border-radius: 6px; overflow: hidden; font-family: var(--font-mono); font-size: 13px; color: #fff; }
.stepper button { width: 30px; height: 30px; background: #16213A; color: #93C5FD; border: 0; font: inherit; font-size: 16px; cursor: pointer; }
.stepper button:hover { background: #1E3A8A; color: #fff; }
.stepper output { min-width: 52px; text-align: center; }
.pill-ok { font-family: var(--font-mono); font-size: 12px; color: #93C5FD; background: rgb(37 99 235 / .18); border-radius: 4px; padding: 4px 8px; }
.hour { margin-top: 4px; }
.hour .hbar { position: relative; height: 30px; background: #16213A; border-radius: 4px; overflow: hidden; }
.hour .pod { position: absolute; top: 0; bottom: 0; width: 3.33%; background: repeating-linear-gradient(135deg, var(--break) 0 5px, var(--break-2) 5px 10px); transition: left .35s ease; }
.hour .hscale { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: #8C9AB0; }
.screen-note { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); margin-top: 12px; }
.click-h { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -0.025em; line-height: 1.12; margin: 0 0 14px; }

/* ——— Ficha resumida: 6 datos clave ——— */
.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.specs > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 22px 20px 22px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.specs > div:not(:nth-child(3n+1)) { padding-left: 20px; border-left: 1px solid var(--rule); }
.specs .ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--signal-soft); color: #93C5FD; }
.specs .ic svg { width: 20px; height: 20px; }
.specs dt { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.specs dd { margin: 4px 0 0; font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--ink); }
.specs dd small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 13.5px; color: var(--ink-2); margin-top: 3px; letter-spacing: 0; }
@media (max-width: 860px) { .specs { grid-template-columns: 1fr 1fr; } .specs > div:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; } .specs > div:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--rule); } }
@media (max-width: 560px) { .specs { grid-template-columns: 1fr; } .specs > div:nth-child(even) { padding-left: 0; border-left: 0; } }

/* ——— Cómo trabajamos: dos fotos ——— */
.duo { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; margin-bottom: 40px; }
.duo .photo { aspect-ratio: 16 / 10; }
.duo .photo::before { display: none; }
@media (max-width: 720px) { .duo { grid-template-columns: 1fr; } }

/* Aparición suave al entrar (sólo si el usuario no pidió menos movimiento) */
@media (prefers-reduced-motion: no-preference) {
  .js .rise { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
  .js .rise.in { opacity: 1; transform: none; }
}

.duo .photo { aspect-ratio: auto; height: clamp(220px, 28vw, 380px); }
.model .big { font-size: clamp(26px, 2.5vw, 36px); }
.split .photo { aspect-ratio: 5 / 4; }
.split .photo img { object-position: 50% 45%; }
#creadores .wrap + .wrap .block { margin-top: 72px; }

/* ——— Cómo trabajamos: pipeline del producto ——— */
.pipe { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; position: relative; }
/* Línea de señal que une las pantallas, con un pulso que la recorre */
.pipe::before { content: ""; position: absolute; left: 4%; right: 4%; top: 92px; height: 2px; background: linear-gradient(90deg, var(--signal) 0 55%, var(--break) 55% 62%, var(--signal-deep) 62%); opacity: .35; }
.pipe::after { content: ""; position: absolute; top: 88px; left: 4%; width: 10px; height: 10px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 5px rgb(37 99 235 / .18); animation: travel 5s linear infinite; }
@keyframes travel { from { left: 4%; } to { left: 95%; } }
@media (prefers-reduced-motion: reduce) { .pipe::after { animation: none; display: none; } }
.stage { position: relative; z-index: 1; display: grid; gap: 18px; align-content: start; min-width: 0; }
.stage-ui { background: #0E1628; color: #CBD5E1; border: 1px solid #1C2742; border-radius: 10px; padding: 14px; height: 184px; display: grid; gap: 8px; align-content: start; box-shadow: 0 24px 48px -28px rgb(15 23 42 / .55); font-size: 12px; overflow: hidden; }
.ui-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 1px solid #1C2742; font-family: var(--font-mono); font-size: 10.5px; color: #8C9AB0; letter-spacing: .04em; }
.ui-ok { color: #93C5FD; }
.ui-ai { color: #0B1222; background: var(--break-2); border-radius: 3px; padding: 1px 6px; font-weight: 700; }
.ui-live { display: inline-flex; align-items: center; gap: 6px; color: #93C5FD; }
.ui-live i { width: 6px; height: 6px; border-radius: 50%; background: #60A5FA; animation: tvblink 1.6s ease-in-out infinite; }
.ui-note { font-family: var(--font-mono); font-size: 10.5px; color: #8C9AB0; margin-top: 2px; }

.file { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; row-gap: 4px; align-items: center; }
.fic { grid-row: span 2; height: 28px; border-radius: 4px; background: #16213A; color: #93C5FD; font-family: var(--font-mono); font-size: 9.5px; display: grid; place-items: center; }
.fname { font-family: var(--font-mono); font-size: 11px; color: #E2E8F0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbar { height: 3px; background: #1C2742; border-radius: 2px; overflow: hidden; }
.fbar i { display: block; height: 100%; background: #60A5FA; }
.fbar i.run { animation: fill 3.5s ease-in-out infinite alternate; }
@keyframes fill { from { width: 40%; } to { width: 92%; } }

.ep-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #fff; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ep-title em { font-style: normal; font-family: var(--font-mono); font-size: 10px; color: #8C9AB0; font-weight: 500; }
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tags span { font-size: 10.5px; padding: 2px 7px; border-radius: 3px; background: #16213A; color: #CBD5E1; }
.tags .sem { display: inline-flex; align-items: center; gap: 5px; }
.tags .sem i { width: 7px; height: 7px; border-radius: 50%; background: #34D399; }
.ep-line { position: relative; height: 10px; border-radius: 3px; background: linear-gradient(90deg, #1E3A8A, #2563EB); margin-top: 4px; }
.ep-line .cut { position: absolute; top: -3px; bottom: -3px; width: 4px; border-radius: 1px; background: var(--break-2); }

.mini-epg { display: grid; gap: 5px; }
.mini-epg div { display: flex; align-items: center; gap: 4px; height: 22px; }
.mini-epg span { width: 36px; flex: none; font-family: var(--font-mono); font-size: 10px; color: #8C9AB0; }
.mini-epg i { height: 100%; border-radius: 3px; background: #16213A; border: 1px solid #24314F; }
.mini-epg i.on { background: var(--signal); border-color: var(--signal); }
.mini-epg i.ad { flex: 0 0 14px; background: repeating-linear-gradient(135deg, var(--break) 0 4px, var(--break-2) 4px 8px); border-color: var(--break); }

.out { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid #16213A; }
.out span { font-family: var(--font-mono); font-size: 11px; color: #fff; }
.out em { font-style: normal; font-size: 11px; color: #8C9AB0; }
.out b { color: #60A5FA; font-size: 12px; }
.pulse { color: #60A5FA; height: 22px; margin-top: 2px; }
.pulse svg { width: 100%; height: 100%; }

.stage-txt { display: grid; gap: 6px; padding-top: 14px; border-top: 2px solid var(--signal); }
.stage:nth-child(2) .stage-txt { border-top-color: var(--signal-deep); }
.stage:nth-child(3) .stage-txt { border-top-color: var(--break); }
.stage:nth-child(4) .stage-txt { border-top-color: var(--ink); }
.stage-txt .k { font-family: var(--font-mono); font-size: 12px; color: var(--signal); }
.stage-txt b { font-family: var(--font-display); font-size: 20px; letter-spacing: -0.015em; }
.stage-txt span:not(.k) { font-size: 14.5px; color: var(--ink-2); }

@media (max-width: 980px) { .pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } .pipe::before, .pipe::after { display: none; } }
@media (max-width: 560px) { .pipe { grid-template-columns: 1fr; } }
.stage-ui { height: 198px; }
.pipe::before { top: 99px; }
.pipe::after { top: 95px; }

/* ——— Plataformas: proporción y aire entre los tres momentos ——— */
#plataformas .flow { margin-top: 8px; }
.plat-roles { margin-top: 40px; gap: 20px; }
.plat-roles > div { padding-right: 24px; }
.feature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(40px, 6vw, 80px); align-items: center; margin-top: clamp(72px, 8vw, 104px); }
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; } }
.feature-txt .click-h { font-size: clamp(26px, 2.6vw, 34px); max-width: 16ch; }
.feature-lead { color: var(--ink-2); font-size: 16.5px; }
.perks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; }
.perks li { display: grid; gap: 4px; padding: 16px 0 16px 18px; border-top: 1px solid var(--rule); position: relative; }
.perks li::before { content: ""; position: absolute; left: 0; top: 23px; width: 8px; height: 8px; border-radius: 2px; background: #60A5FA; }
.perks b { font-family: var(--font-display); font-size: 17px; letter-spacing: -0.01em; }
.perks span { font-size: 14.5px; color: var(--ink-2); }
.ficha-block { margin-top: clamp(72px, 8vw, 104px); padding-top: 40px; border-top: 1px solid var(--rule); scroll-margin-top: 84px; }

/* Campo trampa anti-bots del formulario: fuera de pantalla (no display:none, que algunos bots detectan). */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }