/* ZoNaStudio · sitio público. Mismo estilo que el panel ZoNaStreaming:
   Montserrat, azul fuerte, tarjetas blancas (Light) o azul noche (Dark). */
:root {
  --bg: #eef1f8; --surface: #ffffff; --surface-2: #f6f8fc; --line: #dfe4ef; --text: #161b2e; --muted: #59627d;
  --blue: #2546f5; --blue-h: #1d39d6; --blue-soft: #e8edff; --orange: #ff9f1c; --green: #13c27a; --red: #f0435a;
  --top: #ffffff; --shadow: 0 10px 30px rgba(22, 34, 80, .08); --shot-line: #cfd6e7;
  --display: "Saira Condensed", "Arial Narrow", sans-serif; --font: "Montserrat", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #161b2c; --surface: #1f2539; --surface-2: #232a42; --line: #2f3754; --text: #f2f4fb; --muted: #a3abc7;
  --blue: #2f52ff; --blue-h: #4664ff; --blue-soft: #232f63; --top: #1f2539; --shadow: 0 10px 30px rgba(0, 0, 0, .35); --shot-line: #34406a; color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #161b2c; --surface: #1f2539; --surface-2: #232a42; --line: #2f3754; --text: #f2f4fb; --muted: #a3abc7;
  --blue: #2f52ff; --blue-h: #4664ff; --blue-soft: #232f63; --top: #1f2539; --shadow: 0 10px 30px rgba(0, 0, 0, .35); --shot-line: #34406a; color-scheme: dark; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 500 15px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--blue); }
h1, h2, h3 { margin: 0; line-height: 1.15; text-wrap: balance; letter-spacing: -.01em; }
p { margin: 0; }
.i { flex: none; }
.wrap { width: min(1200px, 100%); margin-inline: auto; padding-inline: 20px; }
.narrow { width: min(860px, 100%); }

/* ---------- barra superior (igual al panel) ---------- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--top); box-shadow: 0 2px 14px rgba(22, 34, 80, .07); border-bottom: 1px solid var(--line); }
.top-in { width: min(1320px, 100%); margin-inline: auto; padding: 10px 20px; display: flex; align-items: center; gap: 18px; }
.nav-btn { display: none; background: none; border: 0; color: var(--text); padding: 6px; cursor: pointer; }
.brand { display: flex; flex-direction: column; text-decoration: none; line-height: 1; }
.brand-t { font: 800 30px/1 var(--display); color: var(--blue); letter-spacing: .5px; }
.brand-t.sm { font-size: 22px; }
.brand small { font-size: 10px; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 2px; }
.tema { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.tema select { height: 38px; padding: 0 30px 0 12px; border: 1px solid var(--blue); border-radius: 4px; background: var(--surface); color: var(--text); font: 600 14px var(--font); cursor: pointer; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { padding: 8px 12px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px; border-radius: 4px; }
.nav a:hover { background: var(--blue-soft); color: var(--blue); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: 4px; font: 700 13px var(--font); letter-spacing: .6px; text-transform: uppercase; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background .15s, color .15s; white-space: nowrap; }
.btn.sm { height: 38px; padding: 0 16px; font-size: 12px; }
.btn-pri { background: var(--blue); color: #fff; }
.btn-pri:hover { background: var(--blue-h); }
.btn-out { border-color: var(--blue); color: var(--blue); background: transparent; }
.btn-out:hover { background: var(--blue-soft); }
.btn:focus-visible, .nav a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- portada ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; padding-block: 56px 36px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-weight: 700; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 14px; }
.hero h1 { font-size: clamp(32px, 4.2vw, 50px); font-weight: 800; }
.lead { color: var(--muted); font-size: 16.5px; margin-top: 16px; max-width: 62ch; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-shot { position: relative; min-width: 0; }
.hs-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.hs-tab { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: 600 12.5px var(--font); border-radius: 4px; cursor: pointer; }
.hs-tab[aria-selected="true"] { background: var(--blue); color: #fff; border-color: var(--blue); }
.hs-img, .g-zoom { display: block; width: 100%; padding: 0; border: 1px solid var(--shot-line); background: #0d1122; cursor: zoom-in; box-shadow: var(--shadow); border-radius: 6px; overflow: hidden; }
.hs-img img, .g-zoom img { width: 100%; height: auto; }

.cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding-block: 8px 40px; }
.cifra { padding: 18px 20px; border-left: 3px solid var(--blue); background: var(--surface); display: flex; flex-direction: column; }
.cifra + .cifra { border-left-color: var(--line); }
.cifra b { font: 800 40px/1 var(--display); color: var(--blue); font-variant-numeric: tabular-nums; }
.cifra span { color: var(--muted); font-size: 13px; font-weight: 600; margin-top: 4px; }

.productos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-bottom: 64px; }
.prod { background: var(--surface); border: 1px solid var(--line); padding: 26px; display: flex; flex-direction: column; gap: 14px; border-radius: 6px; }
.prod-h { display: flex; align-items: center; gap: 14px; }
.prod-ic { width: 50px; height: 50px; display: grid; place-items: center; background: var(--blue); color: #fff; border-radius: 6px; }
.prod h2 { font-size: 21px; font-weight: 800; }
.tag { display: inline-block; margin-top: 4px; padding: 2px 8px; border: 1px solid var(--orange); color: var(--orange); font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; border-radius: 3px; }
.prod > p { color: var(--muted); }
.prod .btn { align-self: flex-start; margin-top: auto; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.checks .i { color: var(--green); margin-top: 3px; }

/* ---------- secciones ---------- */
.band { background: var(--surface); border-block: 1px solid var(--line); padding-block: 72px; }
.sec { padding-block: 72px; }
.sec-h { max-width: 760px; margin-bottom: 36px; }
.sec-h h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 800; }
.pasos { list-style: none; margin: 0 0 36px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pasos li { display: flex; gap: 14px; align-items: flex-start; padding: 18px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; }
.pasos li span { flex: none; width: 34px; height: 34px; display: grid; place-items: center; background: var(--blue); color: #fff; font: 800 18px var(--display); border-radius: 50%; }
.pasos li p { font-weight: 600; font-size: 14px; }
.fns { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 40px; }
.fn { display: flex; gap: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.band .fn { background: var(--surface-2); }
.fn-ic { flex: none; width: 42px; height: 42px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); border-radius: 6px; }
.fn h3 { font-size: 15.5px; font-weight: 700; margin-bottom: 4px; }
.fn p { color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.note { margin-top: 24px; }

/* ---------- galerías ---------- */
.galeria { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: 20px; align-items: start; }
.g-tabs { display: flex; flex-direction: column; gap: 4px; }
.g-tab { text-align: left; padding: 11px 14px; border: 1px solid transparent; border-left: 3px solid transparent; background: transparent; color: var(--muted); font: 600 13.5px var(--font); cursor: pointer; border-radius: 0 4px 4px 0; }
.g-tab:hover { color: var(--text); background: var(--blue-soft); }
.g-tab[aria-selected="true"] { color: var(--blue); background: var(--blue-soft); border-left-color: var(--blue); }
.g-view { min-width: 0; }
.g-shot { margin: 0; }
.g-shot figcaption { margin-top: 12px; color: var(--muted); font-size: 14px; }
.g-shot figcaption b { color: var(--text); margin-right: 6px; }

/* ---------- planes ---------- */
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; }
.plan.dest { border: 2px solid var(--blue); background: var(--surface); }
.plan-badge { position: absolute; top: -12px; left: 24px; padding: 3px 10px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; border-radius: 3px; }
.plan h3 { font-size: 19px; font-weight: 800; }
.precio { display: flex; flex-direction: column; }
.precio b { font: 800 38px/1 var(--display); color: var(--blue); }
.precio span { color: var(--muted); font-size: 13px; font-weight: 600; }
.plan-d { color: var(--muted); font-size: 14px; }
.plan .btn { margin-top: auto; }

/* ---------- ficha técnica ---------- */
.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; }
.ficha-g { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.ficha-g h3 { padding: 14px 18px; font-size: 15px; font-weight: 800; background: var(--blue); color: #fff; }
.ficha table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ficha th, .ficha td { text-align: left; vertical-align: top; padding: 11px 18px; border-top: 1px solid var(--line); }
.ficha th { width: 38%; font-weight: 700; color: var(--text); }
.ficha td { color: var(--muted); }
.ficha tr:nth-child(even) { background: var(--surface-2); }

/* ---------- preguntas ---------- */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; }
.faq summary { padding: 16px 18px; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::after { content: "+"; color: var(--blue); font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 18px 16px; color: var(--muted); }

/* ---------- contacto ---------- */
.contacto { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; }
.c-datos { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.c-datos li { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.c-datos .i { color: var(--blue); }
.sel { user-select: all; }
.c-form { background: var(--surface); border: 1px solid var(--line); padding: 26px; border-radius: 6px; display: grid; gap: 14px; box-shadow: var(--shadow); }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.c-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; min-width: 0; }
.c-form input, .c-form select, .c-form textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2); color: var(--text); font: 500 14px var(--font); }
.c-form textarea { resize: vertical; }
.c-form .btn { justify-self: start; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.msg { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-radius: 4px; font-weight: 600; font-size: 14px; }
.msg.ok { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.msg.err { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }

.foot { border-top: 1px solid var(--line); background: var(--surface); padding-block: 26px; }
.foot-in { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }

/* ---------- visor de capturas ---------- */
.lb { position: fixed; inset: 0; z-index: 50; background: rgba(8, 10, 22, .92); display: grid; place-items: center; padding: 24px; }
.lb figure { margin: 0; max-width: min(1400px, 100%); }
.lb img { max-height: 84vh; width: auto; margin-inline: auto; border: 1px solid #34406a; }
.lb figcaption { color: #e6e9f5; text-align: center; margin-top: 10px; font-weight: 600; }
.lb-x { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; display: grid; place-items: center; background: #2546f5; color: #fff; border: 0; border-radius: 4px; cursor: pointer; }

/* ---------- pantallas medianas y celulares ---------- */
@media (max-width: 1080px) {
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--top); padding: 10px 20px 16px; border-bottom: 1px solid var(--line); }
  .nav.open { display: flex; }
  .nav-btn { display: block; }
  .top-cta { margin-left: auto; }
  .hero, .contacto { grid-template-columns: 1fr; }
  .productos { grid-template-columns: 1fr; }
  .galeria { grid-template-columns: 1fr; }
  .g-tabs { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .g-tab { white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; border-radius: 4px 4px 0 0; }
  .g-tab[aria-selected="true"] { border-bottom-color: var(--blue); }
}
@media (max-width: 720px) {
  .tema span { display: none; }
  .top-cta { display: none; }
  .brand-t { font-size: 26px; }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifra:nth-child(3) { border-left-color: var(--blue); }
  .pasos { grid-template-columns: 1fr; }
  .f2 { grid-template-columns: 1fr; }
  .ficha { grid-template-columns: 1fr; }
  .ficha th { width: 42%; }
  .hero { padding-block: 32px 24px; }
  .band, .sec { padding-block: 52px; }
}

/* ---------- logo, menú del pie ---------- */
.brand-logo { height: 44px; width: auto; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.foot-nav a { color: var(--muted); text-decoration: none; font-weight: 600; } .foot-nav a:hover { color: var(--blue); }
.nav a.btn { color: #fff; }

/* ---------- descargas ---------- */
.dls { display: grid; gap: 14px; }
.dl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 6px; }
.band .dl { background: var(--surface-2); }
.dl-ic { width: 56px; height: 56px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); border-radius: 6px; }
.dl h3 { font-size: 17px; font-weight: 800; }
.ver { display: inline-block; margin-left: 6px; padding: 1px 8px; border: 1px solid var(--green); color: var(--green); font-size: 11.5px; font-weight: 700; border-radius: 3px; vertical-align: 2px; }
.dl p { color: var(--muted); font-size: 14px; margin-top: 4px; }
.dl-meta { font-size: 12.5px !important; font-weight: 700; letter-spacing: .3px; font-variant-numeric: tabular-nums; }

/* ---------- reproductor de TV ---------- */
.tv-box { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: #000; border: 1px solid var(--shot-line); border-radius: 6px; overflow: hidden; box-shadow: var(--shadow); }
.tv-box iframe, .tv-box video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.tv-live { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--red); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .8px; border-radius: 3px; pointer-events: none; }
.tv-txt { color: var(--muted); margin-top: 14px; }

/* ---------- reproductor de radio ---------- */
.radio:not(.mini-radio) { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 26px; align-items: center; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); max-width: 820px; }
.band .radio:not(.mini-radio) { background: var(--surface-2); }
.r-cover { aspect-ratio: 1; display: grid; place-items: center; background: linear-gradient(135deg, var(--blue), var(--blue-h)); color: #fff; border-radius: 6px; overflow: hidden; }
.r-cover img { width: 100%; height: 100%; object-fit: cover; }
.r-live { display: inline-flex; align-items: center; gap: 6px; color: var(--red); font-size: 11.5px; font-weight: 800; letter-spacing: 1px; }
.r-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.radio.sonando .r-live i { animation: rlive 1.2s infinite; }
@keyframes rlive { 50% { opacity: .25; } }
.r-info h3 { font-size: 24px; font-weight: 800; margin-top: 6px; }
.r-info > p { color: var(--muted); margin-top: 4px; }
.r-ctl { display: flex; align-items: center; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
.r-play { width: 64px; height: 64px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--blue); color: #fff; cursor: pointer; flex: none; }
.r-play:hover { background: var(--blue-h); }
.r-i-pause, .radio.sonando .r-i-play { display: none; } .radio.sonando .r-i-pause { display: block; }
.r-eq { display: flex; align-items: flex-end; gap: 3px; height: 28px; }
.r-eq i { width: 5px; height: 6px; background: var(--green); border-radius: 1px; }
.radio.sonando .r-eq i { animation: req .9s ease-in-out infinite alternate; }
.r-eq i:nth-child(2) { animation-delay: .2s !important; } .r-eq i:nth-child(3) { animation-delay: .45s !important; } .r-eq i:nth-child(4) { animation-delay: .1s !important; } .r-eq i:nth-child(5) { animation-delay: .3s !important; }
@keyframes req { 0% { height: 5px; } 100% { height: 28px; } }
@media (prefers-reduced-motion: reduce) { .radio.sonando .r-eq i, .radio.sonando .r-live i { animation: none; height: 18px; } }
.r-vol { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.r-vol input { width: 120px; accent-color: var(--blue); }
.r-msg { margin-top: 10px; color: var(--red); font-size: 13px; font-weight: 600; }
.mini-radio { position: fixed; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 25; max-width: 520px; margin-inline: auto; display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 40px; box-shadow: 0 12px 34px rgba(10, 16, 40, .25); }
.mini-radio .r-play { width: 44px; height: 44px; }
.mini-radio .r-eq { height: 20px; } .mini-radio .r-eq i { width: 4px; }
.mr-t { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.mr-t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.mini-radio .r-vol input { width: 80px; }
.mini-radio .r-msg { position: absolute; bottom: 100%; left: 20px; margin: 0 0 6px; background: var(--surface); padding: 4px 10px; border-radius: 4px; border: 1px solid var(--line); }
body.con-radio .foot { padding-bottom: 96px; }

/* ---------- texto con imagen / HTML libre ---------- */
.txt.con-img { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.txt-p { color: var(--muted); margin-top: 14px; max-width: 65ch; }
.txt .ctas { margin-top: 22px; }
.libre { min-width: 0; overflow-x: auto; }
.libre img, .libre iframe, .libre video { max-width: 100%; }

@media (max-width: 760px) {
  .dl { grid-template-columns: auto minmax(0, 1fr); } .dl .btn { grid-column: 1 / -1; justify-content: center; }
  .radio:not(.mini-radio) { grid-template-columns: 1fr; } .r-cover { max-width: 220px; }
  .txt.con-img { grid-template-columns: 1fr; }
  .mini-radio .r-vol { display: none; }
}

/* ---------- pestañas: cada opción del menú es su propia página ---------- */
.nav a.on { background: var(--blue-soft); color: var(--blue); box-shadow: inset 0 -2px 0 var(--blue); }
.pag-h { background: var(--surface); border-bottom: 1px solid var(--line); padding-block: 26px 30px; }
.migas { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.migas a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; font-weight: 600; }
.migas a:hover { color: var(--blue); }
.migas b { color: var(--text); font-weight: 700; }
.pag-h-in { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pag-ic { flex: none; width: 60px; height: 60px; display: grid; place-items: center; color: #fff; background: var(--blue); border-radius: 8px; }
.pag-h-in > div { flex: 1 1 320px; min-width: 0; }
.pag-h h1 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; line-height: 1.15; }
.pag-h .lead { margin-top: 6px; max-width: 760px; }
.pag-cta { flex: none; }
.pag-h + .sec, .pag-h + section.wrap { padding-top: 44px; }
.vacio { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 24px; border: 1px dashed var(--line); border-radius: 6px; }

/* cuadrícula de capturas: todas a la vista */
.mzs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 16px; }
.mz { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s, transform .15s; }
.band .mz { background: var(--surface-2); }
.mz:hover { border-color: var(--blue); transform: translateY(-2px); }
.mz .g-zoom { display: block; padding: 0; border: 0; background: #0b0e1a; cursor: zoom-in; aspect-ratio: 16 / 9; overflow: hidden; }
.mz img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.mz figcaption { padding: 12px 14px 14px; display: grid; gap: 3px; }
.mz figcaption b { font-size: 14.5px; font-weight: 700; }
.mz figcaption span { color: var(--muted); font-size: 13px; line-height: 1.45; }

/* lista de lo que incluye */
.incl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 12px; }
.incl li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.band .incl li { background: var(--surface-2); }
.incl-ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); }
.incl b { display: block; font-size: 14.5px; font-weight: 700; }
.incl li span:not(.incl-ic) { display: block; color: var(--muted); font-size: 13px; line-height: 1.45; margin-top: 2px; }

/* visor: anterior / siguiente */
.lb-n { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; display: grid; place-items: center; background: rgba(37, 70, 245, .9); color: #fff; border: 0; border-radius: 50%; cursor: pointer; }
.lb-n[hidden] { display: none; }
.lb-prev { left: 14px; } .lb-prev svg { transform: rotate(180deg); }
.lb-next { right: 14px; }
@media (max-width: 720px) { .lb-n { width: 40px; height: 40px; top: auto; bottom: 18px; transform: none; } .pag-ic { width: 48px; height: 48px; } }
.mz img { transform: scale(1.28); transition: transform .25s; } .mz:hover img { transform: scale(1.34); }

/* ---------- menú desplegable (ZoNaStudio y los que agregues) ---------- */
.top-in { position: relative; }
.nav { align-items: center; }
.nav a { display: inline-flex; align-items: center; gap: 6px; }
.dd { position: static; }
.dd-btn { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; background: none; border: 0; border-radius: 4px; color: var(--text); font: 600 14px var(--font); cursor: pointer; }
.dd-btn:hover, .dd.open .dd-btn { background: var(--blue-soft); color: var(--blue); }
.dd-btn.on { background: var(--blue-soft); color: var(--blue); box-shadow: inset 0 -2px 0 var(--blue); }
.dd-car { transition: transform .2s; }
.dd.open .dd-car { transform: rotate(180deg); }
.dd-panel { position: absolute; top: calc(100% + 2px); left: 20px; right: 20px; display: none; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px rgba(16, 24, 64, .2); overflow: hidden; z-index: 30; }
.dd-panel { overflow: visible; }
.dd-l { border-radius: 18px 0 0 18px; } .dd-r { border-radius: 0 18px 18px 0; }
.dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -40px; height: 42px; }
.dd.open .dd-panel { display: grid; animation: ddIn .16s ease-out; }
@keyframes ddIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.dd-l { padding: 26px 28px 28px; min-width: 0; }
.dd-tit { font-size: clamp(22px, 2.3vw, 30px); font-weight: 600; line-height: 1.15; color: var(--blue); letter-spacing: -.01em; }
.dd-sub { margin-top: 10px; color: var(--blue); font-size: 14.5px; line-height: 1.55; max-width: 620px; }
.dd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.dd-it { display: flex !important; align-items: center; gap: 12px !important; padding: 12px 14px !important; border: 1px solid color-mix(in srgb, var(--blue) 45%, var(--line)); border-radius: 10px !important; background: linear-gradient(180deg, var(--surface), var(--surface-2)); color: var(--text) !important; text-decoration: none; box-shadow: 0 2px 6px rgba(16, 24, 64, .05); transition: border-color .15s, transform .15s, box-shadow .15s; }
.dd-it:hover, .dd-it.on { border-color: var(--blue); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(37, 70, 245, .14); background: var(--blue-soft) !important; }
.dd-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; color: var(--blue); background: var(--blue-soft); border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent); }
.dd-tx { display: grid; gap: 1px; min-width: 0; }
.dd-tx b { font-size: 14px; font-weight: 700; }
.dd-tx small { font-size: 12px; color: var(--muted); font-weight: 500; line-height: 1.35; }
.dd-r { background: var(--blue); color: #fff; padding: 30px 30px 32px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.dd-r-t { font: 700 clamp(24px, 2.4vw, 34px)/1.12 var(--font); letter-spacing: -.01em; }
.dd-r-x { font-size: 15px; line-height: 1.6; opacity: .95; }
.dd-r-b { align-self: flex-start; background: #fff; color: var(--blue) !important; margin-top: 6px; }
.dd-r-b:hover { background: rgba(255, 255, 255, .88); }

@media (max-width: 1080px) {
  .nav { align-items: stretch; max-height: calc(100vh - 80px); overflow-y: auto; }
  .dd-btn { width: 100%; justify-content: space-between; }
  .dd-panel { position: static; grid-template-columns: 1fr; border-radius: 10px; box-shadow: none; margin: 4px 0 8px; }
  .dd-l { padding: 16px; }
  .dd-tit { font-size: 20px; }
  .dd-grid { grid-template-columns: 1fr; gap: 8px; margin-top: 14px; }
  .dd-r { padding: 18px; }
  .dd-r-t { font-size: 20px; }
}

@media (max-width: 1080px) { .dd-l, .dd-r { border-radius: 0; } .dd-panel { overflow: hidden; } .dd-panel::before { display: none; } }

/* ---------- portada de cada pestaña ---------- */
.ph { position: relative; overflow: hidden; color: #f3f5ff; background: radial-gradient(900px 480px at 78% 20%, color-mix(in srgb, var(--blue) 42%, transparent), transparent 70%), radial-gradient(600px 400px at 0% 100%, color-mix(in srgb, var(--orange) 14%, transparent), transparent 70%), linear-gradient(160deg, #0b1024 0%, #111a3d 55%, #0d1430 100%); border-bottom: 1px solid #1f2a55; }
.ph::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(180deg, #000 30%, transparent); pointer-events: none; }
.ph::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--red) 0 25%, var(--orange) 25% 50%, var(--green) 50% 75%, var(--blue) 75%); }
.ph-in { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 44px; align-items: center; padding-block: 54px 64px; }
.ph .migas, .ph .migas a { color: #aab3d6; } .ph .migas b { color: #fff; } .ph .migas a:hover { color: #fff; }
.ph-badge { display: inline-flex; align-items: center; gap: 12px; padding: 9px 16px; margin-bottom: 22px; background: var(--red); color: #fff; border-radius: 6px; box-shadow: 0 8px 24px color-mix(in srgb, var(--red) 40%, transparent); font-size: 14px; }
.ph-badge b { letter-spacing: 2.5px; font-weight: 800; }
.ph-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: .85; animation: phDot 1.2s infinite; }
@keyframes phDot { 50% { opacity: .25; } }
.ph-clock { padding-left: 12px; border-left: 1px solid rgba(255,255,255,.45); font: 700 15px/1 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: 1.5px; font-variant-numeric: tabular-nums; }
.ph-h1 { font-size: clamp(36px, 5.2vw, 66px); font-weight: 800; line-height: 1.02; letter-spacing: -.035em; color: #fff; }
.ph-h1 em { font-style: normal; color: var(--orange); }
.ph-lead { margin-top: 18px; font-size: clamp(16px, 1.5vw, 20px); color: #c4cbe8; max-width: 560px; line-height: 1.55; }
.ph-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }
.ph-btn { display: inline-flex; align-items: center; gap: 14px; padding: 14px 26px 14px 22px; background: var(--blue); color: #fff; text-decoration: none; border-radius: 12px; box-shadow: 0 14px 34px color-mix(in srgb, var(--blue) 45%, transparent); transition: transform .15s, box-shadow .15s, background .15s; }
.ph-btn:hover { background: var(--blue-h); transform: translateY(-2px); box-shadow: 0 18px 40px color-mix(in srgb, var(--blue) 55%, transparent); }
.ph-btn span { display: grid; gap: 2px; text-align: left; }
.ph-btn b { font-size: 21px; font-weight: 800; line-height: 1.1; }
.ph-btn small { font-size: 12.5px; font-weight: 600; opacity: .85; }
.ph-btn2 { height: 52px; border: 1px solid rgba(255,255,255,.35); color: #fff; background: rgba(255,255,255,.06); border-radius: 12px; }
.ph-btn2:hover { background: rgba(255,255,255,.14); }
.ph-ver { margin-top: 16px; } .ph-ver code { font: 600 13.5px ui-monospace, Consolas, monospace; color: #aab3d6; }
.ph-shots { position: relative; min-height: 420px; padding-right: 54px; }
.win { margin: 0; background: #151b33; border: 1px solid #2c375f; border-radius: 10px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.55); }
.win-tb { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 12px 0 14px; background: #1b2240; color: #dfe4fb; font-size: 13px; font-weight: 600; border-bottom: 1px solid #2c375f; }
.win-tb span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-c { display: flex; gap: 14px; } .win-c svg { width: 12px; height: 12px; fill: none; stroke: #c7cef0; stroke-width: 1.4; }
.win-img { display: block; width: 100%; padding: 0; border: 0; background: #0b0e1a; cursor: zoom-in; }
.win-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top center; }
.ph-shots .w1 { width: 84%; position: relative; z-index: 1; }
.ph-shots .w2 { width: 84%; position: relative; z-index: 2; margin: -34% 0 0 auto; }
.ph.una .ph-shots .w1 { width: 100%; }
.ph-vu { position: absolute; right: 0; bottom: 6%; z-index: 3; display: grid; grid-template-columns: 12px 12px; gap: 4px 6px; padding: 10px 9px 6px; background: #121730; border: 1px solid #2c375f; border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.vu-c { display: flex; flex-direction: column-reverse; gap: 3px; }
.vu-c i { width: 12px; height: 6px; border-radius: 1px; background: #26304f; }
.vu-c i.on { background: #2fd27a; } .vu-c i.on:nth-child(n+10) { background: #ffcf33; } .vu-c i.on:nth-child(n+13) { background: #ff4d5e; }
.ph-vu span { font: 700 10px var(--font); color: #9aa3c7; text-align: center; }
.ph + .sec, .ph + section.wrap { padding-top: 56px; }
@media (max-width: 1080px) {
  .ph-in { grid-template-columns: 1fr; gap: 36px; padding-block: 36px 44px; }
  .ph-shots { min-height: 0; padding-right: 40px; }
}
@media (max-width: 720px) {
  .ph-btn { width: 100%; } .ph-btn2 { width: 100%; }
  .ph-shots { padding-right: 0; } .ph-vu { display: none; }
  .ph-shots .w1, .ph-shots .w2 { width: 92%; } .ph-shots .w2 { margin-top: -30%; }
}
@media (prefers-reduced-motion: reduce) { .ph-dot { animation: none; } }

/* ---------- botón flotante de WhatsApp ---------- */
.wa-flot { position: fixed; left: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 26; display: flex; align-items: center; gap: 10px; text-decoration: none; }
.wa-ic { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 10px 26px rgba(37, 211, 102, .45); transition: transform .15s; position: relative; }
.wa-ic::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: waPulso 2.2s infinite; }
@keyframes waPulso { from { transform: scale(1); opacity: .7; } to { transform: scale(1.55); opacity: 0; } }
.wa-flot:hover .wa-ic { transform: scale(1.07); }
.wa-tx { padding: 9px 14px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 20px; font-weight: 700; font-size: 13.5px; box-shadow: 0 8px 22px rgba(10, 16, 40, .18); white-space: nowrap; }
@media (max-width: 720px) { .wa-tx { display: none; } .wa-ic { width: 54px; height: 54px; } }
@media (max-width: 1100px) { body.con-radio .wa-flot { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) { .wa-ic::after { animation: none; display: none; } }

/* =========== diseños de portada =========== */
/* --- Estudio: claro, monitor y datos flotantes --- */
.ph-estudio { color: var(--text); background: radial-gradient(700px 420px at 85% 10%, var(--blue-soft), transparent 70%), radial-gradient(500px 360px at 0% 100%, color-mix(in srgb, var(--orange) 10%, transparent), transparent 70%), var(--surface); border-bottom: 1px solid var(--line); }
.ph-estudio::before { background-image: linear-gradient(color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px); }
.ph-estudio::after { display: none; }
.ph-estudio .migas, .ph-estudio .migas a { color: var(--muted); } .ph-estudio .migas b { color: var(--text); }
.ph-estudio .ph-h1 { color: var(--text); }
.ph-estudio .ph-h1 em { color: var(--blue); background: linear-gradient(transparent 66%, color-mix(in srgb, var(--orange) 38%, transparent) 66%); padding: 0 .06em; }
.ph-estudio .ph-lead { color: var(--muted); }
.ph-estudio .ph-badge { background: color-mix(in srgb, var(--red) 10%, var(--surface)); color: var(--red); border: 1px solid color-mix(in srgb, var(--red) 35%, transparent); box-shadow: none; border-radius: 30px; }
.ph-estudio .ph-dot { background: var(--red); }
.ph-estudio .ph-clock { border-left-color: color-mix(in srgb, var(--red) 35%, transparent); color: var(--text); }
.ph-estudio .ph-btn2 { color: var(--text); border-color: var(--line); background: var(--surface); }
.ph-estudio .ph-btn2:hover { border-color: var(--blue); color: var(--blue); }
.ph-estudio .ph-ver code { color: var(--muted); }
.ph-estudio .ph-shots { padding: 34px 40px 44px; min-height: 0; }
.mon { position: relative; z-index: 1; background: #0d111f; border: 1px solid #222b48; border-radius: 16px; padding: 10px 10px 12px; box-shadow: 0 40px 80px rgba(16, 24, 64, .28); }
.mon-scr .g-zoom { display: block; width: 100%; padding: 0; border: 0; background: #000; border-radius: 8px; overflow: hidden; cursor: zoom-in; }
.mon-scr img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.mon-pie { position: absolute; left: 50%; bottom: -34px; width: 22%; height: 34px; transform: translateX(-50%); background: linear-gradient(180deg, #c9cfe0, #9aa3bd); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); z-index: -1; }
.mon-pie::after { content: ""; position: absolute; left: -40%; right: -40%; bottom: 0; height: 6px; background: #8f98b3; border-radius: 4px; }
.st-mini { position: absolute; z-index: 2; left: 0; bottom: 0; width: 36%; padding: 6px 6px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 18px 40px rgba(16, 24, 64, .25); transform: rotate(-3deg); cursor: zoom-in; text-align: left; }
.st-mini img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; border-radius: 6px; }
.st-mini span { display: block; margin-top: 6px; font: 700 12px var(--font); color: var(--text); }
.st-chip { position: absolute; z-index: 3; display: grid; gap: 0; padding: 10px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 30px rgba(16, 24, 64, .16); font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 1.25; animation: flota 6s ease-in-out infinite; }
.st-chip b { font: 800 24px/1.05 var(--display); color: var(--blue); letter-spacing: .5px; }
.st-chip.c0 { top: 0; left: 0; } .st-chip.c1 { top: 12%; right: 0; animation-delay: -1.5s; } .st-chip.c2 { bottom: 26%; right: -2%; animation-delay: -3s; } .st-chip.c3 { bottom: -2%; left: 42%; animation-delay: -4.5s; }
@keyframes flota { 50% { transform: translateY(-8px); } }

/* --- Centrado: color principal, pantalla inclinada y cifras --- */
.ph-centrado { background: radial-gradient(900px 500px at 50% 0%, color-mix(in srgb, #fff 16%, transparent), transparent 70%), linear-gradient(180deg, var(--blue) 0%, color-mix(in srgb, var(--blue) 55%, #050a24) 100%); border-bottom: 0; }
.ph-centrado::after { display: none; }
.ph-centrado .ph-in { grid-template-columns: 1fr; gap: 40px; padding-block: 50px 0; text-align: center; }
.ph-centrado .ph-txt { max-width: 900px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.ph-centrado .migas { justify-content: center; } .ph-centrado .migas, .ph-centrado .migas a { color: rgba(255,255,255,.75); }
.ph-centrado .ph-lead { margin-inline: auto; color: rgba(255,255,255,.85); }
.ph-centrado .ph-ctas { justify-content: center; }
.ph-centrado .ph-btn { background: #fff; color: var(--blue); box-shadow: 0 16px 36px rgba(0,0,0,.25); } .ph-centrado .ph-btn:hover { background: #eef2ff; }
.ph-centrado .ph-badge { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); box-shadow: none; border-radius: 30px; }
.ph-centrado .ph-dot { background: #ff5b6b; }
.ph-centrado .ph-shots { padding: 0; min-height: 0; }
.tilt { perspective: 1800px; max-width: 1040px; margin: 0 auto; }
.tilt .g-zoom { display: block; width: 100%; padding: 0; border: 1px solid rgba(255,255,255,.3); border-radius: 14px 14px 0 0; overflow: hidden; background: #000; cursor: zoom-in; transform: rotateX(12deg); transform-origin: 50% 100%; box-shadow: 0 -10px 80px rgba(0,0,0,.35); transition: transform .4s; }
.tilt .g-zoom:hover { transform: rotateX(4deg); }
.tilt img { width: 100%; aspect-ratio: 16 / 8.2; object-fit: cover; object-position: top; }
.ce-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); max-width: 1040px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-top: 0; color: var(--text); box-shadow: 0 30px 60px rgba(10, 16, 40, .25); }
.ce-stats div { padding: 18px 14px; border-left: 1px solid var(--line); display: grid; gap: 2px; } .ce-stats div:first-child { border-left: 0; }
.ce-stats b { font: 800 30px/1 var(--display); color: var(--blue); letter-spacing: .5px; } .ce-stats span { font-size: 13px; color: var(--muted); font-weight: 600; }
.ph-centrado + .sec, .ph-centrado + section.wrap { padding-top: 64px; }

/* --- Al aire: Previa y Programa, como en el programa --- */
.ph-aire { background: #070a14; border-bottom: 1px solid #1d2440; }
.ph-aire::before { opacity: .5; } .ph-aire::after { display: none; }
.ai-bg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(28px) brightness(.32) saturate(1.4); z-index: 0; }
.ph-aire .ph-in { z-index: 1; grid-template-columns: minmax(0, 5.2fr) minmax(0, 6.8fr); }
.ph-aire .ph-h1 em { color: var(--orange); }
.ph-aire .ph-shots { padding: 0; min-height: 0; }
.ai-mons { display: grid; grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr); gap: 10px; align-items: center; }
.ai-mon { margin: 0; background: #0c0f1c; border: 2px solid; border-radius: 8px; overflow: hidden; box-shadow: 0 24px 50px rgba(0,0,0,.5); }
.ai-mon.pvw { border-color: #22c26b; } .ai-mon.pgm { border-color: var(--red); }
.ai-mon figcaption { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 11.5px; font-weight: 600; color: #cdd3ef; background: #12172b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-mon figcaption span { flex: none; padding: 2px 7px; border-radius: 3px; font-weight: 800; letter-spacing: 1px; color: #fff; }
.ai-mon.pvw figcaption span { background: #1e9e58; } .ai-mon.pgm figcaption span { background: var(--red); }
.ai-mon .g-zoom { display: block; width: 100%; padding: 0; border: 0; background: #000; cursor: zoom-in; }
.ai-mon img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.ai-tbar { display: grid; justify-items: center; gap: 6px; }
.ai-tbar i { width: 8px; height: 90px; border-radius: 4px; background: linear-gradient(180deg, #2a3358, #151a30); position: relative; }
.ai-tbar i::after { content: ""; position: absolute; left: 50%; top: 30%; width: 34px; height: 12px; transform: translateX(-50%); background: #dfe4fb; border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.5); animation: tbar 4s ease-in-out infinite; }
@keyframes tbar { 0%, 20% { top: 10%; } 50%, 70% { top: 78%; } 100% { top: 10%; } }
.ai-tbar b { display: block; width: 46px; padding: 5px 0; font: 800 9.5px var(--font); letter-spacing: .8px; text-align: center; color: #dfe4fb; background: #1a2140; border: 1px solid #2c375f; border-radius: 4px; }
.ai-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); margin-top: 18px; border: 1px solid #263055; border-radius: 10px; background: rgba(12, 16, 32, .7); backdrop-filter: blur(6px); }
.ai-stats div { padding: 14px 14px; border-left: 1px solid #263055; display: grid; gap: 2px; } .ai-stats div:first-child { border-left: 0; }
.ai-stats b { font: 700 24px/1 ui-monospace, Consolas, monospace; color: #fff; } .ai-stats span { font-size: 12px; color: #a6afd3; font-weight: 600; }

@media (max-width: 1080px) {
  .ph-estudio .ph-shots { padding: 26px 20px 40px; }
  .ph-aire .ph-in { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .st-chip.c2, .st-chip.c3 { display: none; } .st-chip b { font-size: 20px; }
  .ph-estudio .ph-shots { padding: 40px 0 30px; } .st-mini { width: 44%; }
  .ai-mons { grid-template-columns: 1fr; } .ai-tbar { display: none; }
  .ph-centrado .ph-in { padding-top: 36px; }
}
@media (prefers-reduced-motion: reduce) { .st-chip, .ai-tbar i::after { animation: none; } }

/* =========== encabezado bajito de las demás pestañas (con dibujo) =========== */
.pb { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.pb::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--pb-grid) 1px, transparent 1px), linear-gradient(90deg, var(--pb-grid) 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(90deg, transparent, #000 60%); pointer-events: none; }
.pb-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 330px); gap: 30px; align-items: center; padding-block: 26px 28px; }
.pb-h1 { font-size: clamp(28px, 3.3vw, 42px); font-weight: 800; line-height: 1.08; letter-spacing: -.025em; }
.pb-lead { margin-top: 8px; font-size: 15.5px; line-height: 1.55; max-width: 640px; }
.pb-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.pb .migas { margin-bottom: 10px; }
.pb-dib .dib { display: block; width: 100%; height: auto; max-height: 190px; }
/* colores del dibujo */
.dib .d-bg { fill: var(--dbg); } .dib .d-bg2 { fill: var(--dbg2); } .dib .d-a { fill: var(--d1); } .dib .d-b { fill: var(--d2); } .dib .d-w { fill: #fff; } .dib .d-red { fill: var(--red); }
.dib .d-mut { fill: var(--dmut); } .dib .d-pt { fill: var(--d2); } .dib .d-pt2 { fill: var(--d1); }
.dib .d-s, .dib .d-s2, .dib .d-sw, .dib .d-gr, .dib .d-ln, .dib .d-ln2 { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dib .d-s { stroke: var(--ds); stroke-width: 4; } .dib .d-l { fill: var(--dl); } .dib .d-l.d-s { fill: var(--dl); }
.dib .d-s2 { stroke: var(--d2); stroke-width: 4; } .dib .d-sw { stroke: #fff; stroke-width: 5; } .dib .d-gr { stroke: var(--dbg2); stroke-width: 3; opacity: .7; }
.dib .d-ln { stroke: var(--d1); stroke-width: 3; } .dib .d-ln2 { stroke: var(--d2); stroke-width: 3; }
.dib .d-tx { fill: #fff; font: 800 56px var(--font); }
.pb-dib .dib { animation: dibIn .5s ease-out both; } @keyframes dibIn { from { opacity: 0; transform: translateY(8px) scale(.97); } }

/* Estudio: claro */
.pb-estudio { --pb-grid: color-mix(in srgb, var(--text) 5%, transparent); background: radial-gradient(500px 260px at 85% 50%, var(--blue-soft), transparent 70%), var(--surface); color: var(--text);
  --d1: var(--blue); --d2: var(--orange); --dbg: var(--blue-soft); --dbg2: var(--surface); --dl: var(--surface); --ds: color-mix(in srgb, var(--text) 55%, transparent); --dmut: color-mix(in srgb, var(--text) 14%, transparent); }
.pb-estudio .pb-h1 em { font-style: normal; color: var(--blue); background: linear-gradient(transparent 66%, color-mix(in srgb, var(--orange) 38%, transparent) 66%); }
.pb-estudio .pb-lead { color: var(--muted); }
/* Centrado: color principal */
.pb-centrado { --pb-grid: rgba(255,255,255,.07); background: linear-gradient(120deg, var(--blue), color-mix(in srgb, var(--blue) 60%, #050a24)); color: #fff; border-bottom: 0;
  --d1: #fff; --d2: var(--orange); --dbg: rgba(255,255,255,.12); --dbg2: color-mix(in srgb, var(--blue) 70%, #fff); --dl: color-mix(in srgb, var(--blue) 82%, #fff); --ds: #fff; --dmut: rgba(255,255,255,.35); }
.pb-centrado .dib .d-sw { stroke: var(--blue); } .pb-centrado .dib .d-tx { fill: var(--blue); } .pb-centrado .dib .d-w { fill: var(--blue); }
.pb-centrado .pb-h1 em { font-style: normal; color: var(--orange); } .pb-centrado .pb-lead { color: rgba(255,255,255,.85); }
.pb-centrado .migas, .pb-centrado .migas a { color: rgba(255,255,255,.75); } .pb-centrado .migas b { color: #fff; }
.pb-centrado .pb-b1 { background: #fff; color: var(--blue); } .pb-centrado .pb-b2 { border-color: rgba(255,255,255,.5); color: #fff; }
/* Al aire y Ventanas: oscuro */
.pb-aire, .pb-ventanas { --pb-grid: rgba(255,255,255,.04); background: radial-gradient(500px 260px at 85% 50%, color-mix(in srgb, var(--blue) 30%, transparent), transparent 70%), linear-gradient(160deg, #0b1024, #121b3f); color: #f3f5ff; border-bottom-color: #1f2a55;
  --d1: color-mix(in srgb, var(--blue) 85%, #fff); --d2: var(--orange); --dbg: color-mix(in srgb, var(--blue) 22%, transparent); --dbg2: #1c2550; --dl: #151c3a; --ds: #c9d1f5; --dmut: rgba(255,255,255,.18); }
.pb-aire .pb-h1 em, .pb-ventanas .pb-h1 em { font-style: normal; color: var(--orange); } .pb-aire .pb-lead, .pb-ventanas .pb-lead { color: #c4cbe8; }
.pb-aire .migas, .pb-aire .migas a, .pb-ventanas .migas, .pb-ventanas .migas a { color: #aab3d6; } .pb-aire .migas b, .pb-ventanas .migas b { color: #fff; }
.pb-aire .pb-b2, .pb-ventanas .pb-b2 { border-color: rgba(255,255,255,.4); color: #fff; }
.pb + .sec, .pb + section.wrap { padding-top: 48px; }
@media (max-width: 720px) {
  .pb-in { grid-template-columns: 1fr; gap: 6px; padding-block: 20px 22px; }
  .pb-dib { order: -1; max-width: 220px; } .pb-dib .dib { max-height: 120px; }
}
@media (prefers-reduced-motion: reduce) { .pb-dib .dib { animation: none; } }

/* ---------- titulares: letra propia (estilo rótulo de TV) y destacado en degradado ---------- */
.ph-h1, .pb-h1 { font-family: var(--titular); font-weight: 800; text-transform: uppercase; letter-spacing: .005em; }
.ph-h1 { font-size: clamp(46px, 6.4vw, 92px); line-height: .92; }
.pb-h1 { font-size: clamp(32px, 3.8vw, 52px); line-height: .98; }
.ph-h1 em, .pb-h1 em, .ph-estudio .ph-h1 em, .pb-estudio .pb-h1 em, .ph-aire .ph-h1 em, .pb-aire .pb-h1 em, .pb-ventanas .pb-h1 em, .ph-centrado .ph-h1 em, .pb-centrado .pb-h1 em {
  font-style: normal; padding: 0; color: var(--hl); background: linear-gradient(95deg, var(--hl) 0%, color-mix(in srgb, var(--hl) 45%, #fff) 55%, var(--hl) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ph-estudio .ph-h1 em, .pb-estudio .pb-h1 em { background: linear-gradient(95deg, var(--blue), var(--hl)); -webkit-background-clip: text; background-clip: text; }
.ph-aire .ph-h1, .pb-aire .pb-h1, .ph-ventanas .ph-h1, .pb-ventanas .pb-h1 { color: #e9eeff; }
.ph-aire .ph-lead { color: #b9c3e6; }
.ph-badge b { font-family: var(--titular); font-size: 16px; letter-spacing: 3px; }
.ph-ctas { flex-wrap: wrap; } .ph-btn2 { padding-inline: 20px; }

/* ---------- insignia AL AIRE: letrero de estudio ---------- */
.ph .ph-badge, .ph-aire .ph-badge, .ph-centrado .ph-badge, .ph-estudio .ph-badge { display: inline-flex; align-items: center; gap: 12px; padding: 6px 8px 6px 12px; margin-bottom: 24px; border-radius: 12px; font-size: 14px;
  background: linear-gradient(180deg, rgba(24, 10, 18, .85), rgba(10, 8, 18, .85)); border: 1px solid color-mix(in srgb, var(--red) 70%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 10%, transparent), 0 0 32px color-mix(in srgb, var(--red) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.06); color: #fff; }
.ph-rec { position: relative; width: 14px; height: 14px; flex: none; }
.ph-rec i { position: absolute; inset: 2px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); }
.ph-rec::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--red); animation: recAnillo 1.6s ease-out infinite; }
@keyframes recAnillo { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
.ph-badge b, .ph-aire .ph-badge b { font-family: var(--titular); font-size: 19px; font-weight: 800; letter-spacing: 3px; color: color-mix(in srgb, var(--red) 75%, #fff); text-shadow: 0 0 12px color-mix(in srgb, var(--red) 80%, transparent); }
.ph-badge .ph-clock, .ph-estudio .ph-badge .ph-clock { padding: 6px 10px; border: 0; border-radius: 8px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); color: #eaf0ff; font: 700 16px/1 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: 2px; }
.ph-sig { display: flex; align-items: flex-end; gap: 3px; height: 18px; padding-right: 4px; }
.ph-sig i { width: 3px; border-radius: 2px; background: color-mix(in srgb, var(--red) 70%, #fff); animation: sig 1s ease-in-out infinite; }
.ph-sig i:nth-child(1) { height: 40%; animation-delay: -.2s; } .ph-sig i:nth-child(2) { height: 80%; animation-delay: -.5s; } .ph-sig i:nth-child(3) { height: 100%; animation-delay: -.1s; } .ph-sig i:nth-child(4) { height: 60%; animation-delay: -.7s; } .ph-sig i:nth-child(5) { height: 30%; animation-delay: -.35s; }
@keyframes sig { 50% { transform: scaleY(.35); } } .ph-sig i { transform-origin: bottom; }
.ph-dot { display: none; }
@media (prefers-reduced-motion: reduce) { .ph-rec::before, .ph-sig i { animation: none; } }

/* ---------- tarjetas de funciones: compactas, en columnas sin huecos ---------- */
.fns { display: block; columns: 4 250px; column-gap: 14px; margin-bottom: 36px; }
.fn { break-inside: avoid; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: start; margin: 0 0 14px; padding: 14px 16px 15px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); position: relative; overflow: hidden; transition: transform .15s, border-color .15s, box-shadow .15s; }
.band .fn { background: var(--surface-2); }
.fn::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--hl, #35d0ff)); opacity: 0; transition: opacity .15s; }
.fn:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--blue) 45%, var(--line)); box-shadow: 0 10px 24px rgba(16, 24, 64, .10); }
.fn:hover::before { opacity: 1; }
.fn-ic { width: 38px; height: 38px; border-radius: 10px; color: #fff; background: linear-gradient(135deg, var(--blue), color-mix(in srgb, var(--blue) 55%, var(--hl, #35d0ff))); box-shadow: 0 4px 10px color-mix(in srgb, var(--blue) 30%, transparent); }
.fn-ic svg { width: 19px; height: 19px; }
.fn h3 { font-size: 14.5px; font-weight: 700; line-height: 1.25; margin: 1px 0 4px; }
.fn p { font-size: 13px; line-height: 1.5; color: var(--muted); }
@media (max-width: 720px) { .fns { columns: 1; } .fn { padding: 12px 14px; } }

/* tarjetas de funciones: todas del mismo tamaño, en filas ordenadas */
.fns { display: grid; columns: auto; grid-template-columns: repeat(auto-fill, minmax(min(100%, 255px), 1fr)); grid-auto-rows: 1fr; gap: 14px; }
.fn { margin: 0; height: 100%; min-height: 96px; align-items: center; }
.fn > div { min-width: 0; }
.fn h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* botón de tema con icono */
.tema-btn { width: 40px; height: 40px; display: grid; place-items: center; flex: none; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer; transition: border-color .15s, color .15s, transform .2s; }
.tema-btn:hover { border-color: var(--blue); color: var(--blue); transform: rotate(-15deg); }
.tema-btn .t-sol { display: none; } .tema-btn.es-oscuro .t-luna { display: none; } .tema-btn.es-oscuro .t-sol { display: block; color: #ffc94d; }
.tema-btn svg { grid-area: 1 / 1; }

.tema-btn { width: 38px; height: 38px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); }
.tema-btn:hover { background: var(--blue-soft); color: var(--blue); transform: none; }
.tema-btn.es-oscuro .t-sol { color: #c9d0e6; } .tema-btn.es-oscuro:hover .t-sol { color: #ffd257; }

/* panel desplegable compacto */
.dd-panel { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); }
.dd-l { padding: 18px 20px 20px; }
.dd-tit { font-size: clamp(19px, 1.8vw, 24px); }
.dd-sub { margin-top: 4px; font-size: 13px; line-height: 1.45; }
.dd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.dd-it { padding: 9px 10px !important; gap: 9px !important; border-radius: 9px !important; }
.dd-ic { width: 30px; height: 30px; border-radius: 7px; } .dd-ic svg { width: 16px; height: 16px; }
.dd-tx b { font-size: 13px; line-height: 1.2; } .dd-tx small { font-size: 11.5px; line-height: 1.3; }
.dd-r { padding: 20px 22px; gap: 8px; }
.dd-r-t { font-size: clamp(19px, 1.7vw, 24px); }
.dd-r-x { font-size: 13px; line-height: 1.5; }
.dd-r-b { height: 38px; padding: 0 16px; font-size: 12px; margin-top: 4px; }
@media (max-width: 1280px) { .dd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1080px) { .dd-panel { grid-template-columns: 1fr; } .dd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .dd-grid { grid-template-columns: 1fr; } }
.dd-panel::before { top: -14px; height: 14px; }

/* ---------- portada: imágenes animadas (una delante de otra) ---------- */
.sl { position: relative; }
.sl-stage { position: relative; aspect-ratio: 16 / 11.2; }
.sl-it { position: absolute; left: 0; bottom: 0; width: 84%; margin: 0; background: #151b33; border: 1px solid #2c375f; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.55);
  transition: transform .8s cubic-bezier(.22,.8,.24,1), opacity .8s, filter .8s; transform-origin: 0% 100%; will-change: transform; }
.sl-it.p0 { z-index: 4; transform: none; opacity: 1; filter: none; }
.sl-it.p1 { z-index: 3; transform: translate(10%, -10%) scale(.92); opacity: .8; filter: brightness(.6); }
.sl-it.p2 { z-index: 2; transform: translate(19%, -19%) scale(.84); opacity: .5; filter: brightness(.45); }
.sl-it.px { z-index: 1; transform: translate(26%, -26%) scale(.78); opacity: 0; }
.sl-it.out { z-index: 5; transform: translate(-14%, 8%) scale(1.02) rotate(-3deg); opacity: 0; }
.sl-img { display: block; width: 100%; padding: 0; border: 0; background: #0b0e1a; cursor: zoom-in; overflow: hidden; }
.sl-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top center; transition: transform 6s ease-out; }
.sl-it.p0 .sl-img img { transform: scale(1.06); }
.sl-it:not(.p0) { pointer-events: none; }
.sl-cap { position: absolute; left: 12px; bottom: 12px; right: 12px; padding: 8px 12px; border-radius: 8px; background: rgba(8, 11, 24, .78); backdrop-filter: blur(6px); color: #dfe4fb; font-size: 13px; line-height: 1.4; opacity: 0; transform: translateY(8px); transition: opacity .5s .35s, transform .5s .35s; }
.sl-cap b { color: #fff; }
.sl-it.p0 .sl-cap { opacity: 1; transform: none; }
.sl-nav { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.sl-dot { width: 28px; height: 6px; padding: 0; border: 0; border-radius: 3px; background: rgba(255,255,255,.22); cursor: pointer; position: relative; overflow: hidden; }
.sl-dot.on { background: rgba(255,255,255,.22); }
.sl-dot.on::after { content: ""; position: absolute; inset: 0; background: var(--hl, #35d0ff); transform-origin: left; animation: slBarra var(--sl-t, 4.5s) linear forwards; }
.sl.pausa .sl-dot.on::after { animation-play-state: paused; }
@keyframes slBarra { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sl-b { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: rgba(255,255,255,.06); color: #fff; cursor: pointer; }
.sl-b:hover { background: rgba(255,255,255,.16); }
.sl-b[data-sl-prev] svg { transform: rotate(180deg); }
.ph-aire .ai-stats { margin-top: 18px; }
@media (max-width: 720px) { .sl-stage { aspect-ratio: 16 / 11.8; } .sl-it { width: 88%; } .sl-cap { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .sl-it, .sl-img img { transition: none; } .sl-dot.on::after { animation: none; transform: none; } }
.sl-stage { aspect-ratio: 16 / 11.6; }
.sl-it { width: 80%; }
.sl-it.p1 { transform: translate(12%, -11%) scale(.93); opacity: .92; filter: brightness(.78) saturate(.9); }
.sl-it.p2 { transform: translate(23%, -21%) scale(.86); opacity: .7; filter: brightness(.6) saturate(.8); }
.sl-it.px { transform: translate(30%, -28%) scale(.8); opacity: 0; }
@media (max-width: 720px) { .ai-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ai-stats div:nth-child(3) { border-left: 0; } .ai-stats div:nth-child(n+3) { border-top: 1px solid #263055; } .sl-it { width: 84%; } }

/* titulares: mayúsculas solo con letras condensadas; Poppins en minúsculas como el ejemplo */
.ph-h1, .pb-h1 { text-transform: var(--tt-case, none); font-weight: var(--tt-peso, 700); letter-spacing: var(--tt-esp, -.02em); }
.ph-h1 { line-height: var(--tt-alto, 1.08); font-size: clamp(38px, 4.8vw, 66px); }
.pb-h1 { line-height: 1.12; font-size: clamp(26px, 2.9vw, 40px); }
.ph-badge b { text-transform: uppercase; }

/* ---------- monitores PREVIA / AL AIRE con imágenes que van pasando ---------- */
.ai-pant { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.ai-im { position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0; background: #000; cursor: zoom-in; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s .9s; }
.ai-im.on { opacity: 1; visibility: visible; transition: opacity .9s ease, visibility 0s; z-index: 1; }
.ai-mons.corte .ai-im { transition: none; }
.ai-im img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pgm .ai-im.on img { animation: aiZoom 7s ease-out both; }
@keyframes aiZoom { from { transform: scale(1); } to { transform: scale(1.07); } }
.ai-mon figcaption em { font-style: normal; overflow: hidden; text-overflow: ellipsis; }
.ai-tbar i::after { animation: none; top: 10%; transition: top .9s cubic-bezier(.4,0,.2,1); }
.ai-mons.abajo .ai-tbar i::after { top: 78%; }
.ai-tbar b { transition: background .2s, color .2s, border-color .2s; }
.ai-tbar b.act { background: var(--red); border-color: var(--red); color: #fff; }
.pgm.flash { box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 55%, transparent), 0 24px 50px rgba(0,0,0,.5); }


/* ---------- slider de productos con la marca ZoNa ---------- */
.zs { position: relative; margin-top: 8px; }
.zs-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 16px) / 4); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 2px 14px; scrollbar-width: none; }
.zs-track::-webkit-scrollbar { display: none; }
.zs-card { position: relative; scroll-snap-align: start; display: flex; flex-direction: column; min-height: 440px; overflow: hidden; border-radius: 6px; background: linear-gradient(180deg, #13204a 0%, #0c1530 100%); color: #fff; box-shadow: 0 16px 34px rgba(10, 18, 50, .22); isolation: isolate; transition: transform .2s; }
.zs-card:hover { transform: translateY(-4px); }
.zs-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .18; filter: blur(2px) saturate(1.2); z-index: -1; transform: scale(1.08); }
.zs-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 20, 48, .55) 0%, rgba(12, 20, 48, .2) 45%, rgba(8, 12, 30, .85) 100%); }
.zs-logo { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 26px 16px 0; }
.zs-mk { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.zs-logo b { font: 800 30px/1 var(--display); letter-spacing: .3px; color: #fff; }
.zs-logo em { font: 700 28px/1 var(--display); font-style: normal; color: var(--zc); letter-spacing: .3px; white-space: nowrap; }
.zs-tx { padding: 16px 22px 0; text-align: center; font-size: 15.5px; line-height: 1.5; font-weight: 500; color: #eef2ff; flex: 1; }
.zs-mon { position: relative; margin: 18px auto 0; width: 82%; padding-bottom: 26px; }
.zs-scr { display: block; width: 100%; padding: 5px; border: 0; border-radius: 6px; background: #05070f; box-shadow: 0 0 0 1px #2a3352, 0 14px 30px rgba(0,0,0,.5); cursor: zoom-in; }
.zs-scr img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-radius: 3px; }
.zs-pie { position: absolute; left: 50%; bottom: 4px; width: 18%; height: 22px; transform: translateX(-50%); background: linear-gradient(180deg, #2b3350, #161b2e); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.zs-btn { display: block; margin-top: auto; padding: 14px; background: var(--blue); color: #fff; text-align: center; text-decoration: none; font: 700 13px var(--font); letter-spacing: 1.2px; text-transform: uppercase; transition: background .15s; }
.zs-btn:hover { background: var(--blue-h); }
.zs-b { position: absolute; top: 42%; z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--text); box-shadow: 0 8px 20px rgba(10, 16, 40, .2); cursor: pointer; transition: opacity .2s; }
.zs-b:hover { color: var(--blue); border-color: var(--blue); }
.zs-prev { left: -22px; } .zs-prev svg { transform: rotate(180deg); } .zs-next { right: -22px; }
.zs-b[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 1180px) { .zs-track { grid-auto-columns: calc((100% - 2 * 16px) / 3); } }
@media (max-width: 860px) { .zs-track { grid-auto-columns: calc((100% - 16px) / 2); } .zs-prev { left: -6px; } .zs-next { right: -6px; } }
@media (max-width: 560px) { .zs-track { grid-auto-columns: 84%; } .zs-card { min-height: 400px; } .zs-b { display: none; } }
.zs-mk { width: 36px; height: 36px; border-radius: 8px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.brand { flex-direction: row; align-items: center; gap: 10px; }
.brand-ic { width: 38px; height: 38px; flex: none; border-radius: 8px; }
.brand-tx { display: flex; flex-direction: column; line-height: 1; }
@media (max-width: 720px) { .brand-ic { width: 32px; height: 32px; } }
@media (prefers-reduced-motion: reduce) { .ph .ai-im { transition: opacity .9s ease, visibility 0s .9s !important; } .ph .ai-im.on { transition: opacity .9s ease, visibility 0s !important; } .ph .ai-tbar i::after { transition: top .9s ease !important; } .ph .zs-track { scroll-behavior: smooth; } }

/* capturas con versión de día y de noche: cambian con el tema */
.mz .c-noche { display: none; }
:root[data-theme="dark"] .mz .c-dia { display: none; } :root[data-theme="dark"] .mz .c-noche { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .mz .c-dia { display: none; } :root:not([data-theme]) .mz .c-noche { display: block; } }
/* capturas de celular y mensajes completos */
.mzs.movil { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
.mzs.movil .g-zoom { aspect-ratio: 9 / 19; background: #0b0e1a; padding: 10px 10px 0; border-radius: 22px 22px 0 0; }
.mzs.movil .mz img { object-fit: cover; object-position: top; border-radius: 14px 14px 0 0; transform: none !important; }
.mzs.entero { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.mzs.entero .g-zoom { aspect-ratio: auto; background: var(--surface-2); }
.mzs.entero .mz img { height: auto; max-height: 520px; object-fit: contain; transform: none !important; }
.mz img { object-position: top center; transform-origin: top center; }

/* =========== portadas de producto: animaciones distintas =========== */
.rot { position: relative; overflow: hidden; background: #05070f; }
.rot-im { position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0; background: #05070f; cursor: zoom-in; }
.rot-im img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.rot-im:not(.on):not(.sale) { visibility: hidden; }
.rot-im.on { z-index: 2; } .rot-im.sale { z-index: 1; }
/* barrido de izquierda a derecha (como la letra del karaoke al colorearse) */
.rot-barrido .rot-im { clip-path: inset(0 100% 0 0); transition: clip-path .9s cubic-bezier(.6,0,.2,1); }
.rot-barrido .rot-im.on, .rot-barrido .rot-im.sale { clip-path: inset(0 0 0 0); }
.rot-barrido .rot-im.sale { transition: none; }
.rot-barrido .rot-im.on::after { content: ""; position: absolute; top: 0; bottom: 0; width: 6px; left: 100%; background: linear-gradient(90deg, transparent, var(--hl, #35d0ff)); box-shadow: 0 0 18px var(--hl, #35d0ff); animation: barridoLuz .9s cubic-bezier(.6,0,.2,1) forwards; }
@keyframes barridoLuz { from { left: 0; opacity: 1; } to { left: 100%; opacity: 0; } }
/* de lado */
.rot-lado .rot-im { transform: translateX(100%); transition: transform .8s cubic-bezier(.65,0,.25,1); }
.rot-lado .rot-im.on { transform: translateX(0); } .rot-lado .rot-im.sale { transform: translateX(-100%); }
/* hacia arriba */
.rot-arriba .rot-im { transform: translateY(100%); transition: transform .7s cubic-bezier(.65,0,.25,1); }
.rot-arriba .rot-im.on { transform: translateY(0); } .rot-arriba .rot-im.sale { transform: translateY(-100%); }

/* KTV: monitor con cifras flotando */
.ph-e-monitor .ph-shots { padding: 34px 44px 50px; }
.mn { position: relative; }
.mn-mon { position: relative; z-index: 1; background: #0b0e1a; border: 1px solid #2a3352; border-radius: 16px; padding: 10px 10px 0; box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset; }
.mn-scr { border-radius: 8px; overflow: hidden; }
.mn-scr .rot { aspect-ratio: 16 / 10; }
.mn-tit { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px; color: #dfe4fb; font-size: 13px; }
.mn-rec { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); animation: phDot 1.2s infinite; }
.mn-pie { position: absolute; left: 50%; bottom: -30px; width: 20%; height: 30px; transform: translateX(-50%); background: linear-gradient(180deg, #2b3350, #141a2e); clip-path: polygon(25% 0, 75% 0, 100% 100%, 0 100%); z-index: -1; }
.mn-chip { z-index: 3; background: rgba(14, 19, 38, .88); border-color: #2c375f; color: #b9c3e6; backdrop-filter: blur(6px); }
.mn-chip b { color: var(--hl, #35d0ff); }
.mn-chip.c0 { top: -18px; left: -26px; } .mn-chip.c1 { top: 18%; right: -34px; } .mn-chip.c2 { bottom: 22%; left: -34px; } .mn-chip.c3 { bottom: -22px; right: 12%; }

/* CRM: navegador y celular */
.dv { position: relative; padding: 0 0 26px; }
.dv-br { width: 88%; background: #0f1426; border: 1px solid #2c375f; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.dv-bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; background: #182040; color: #c7cef0; font-size: 12.5px; font-weight: 600; }
.dv-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; } .dv-bar i:nth-child(2) { background: #febc2e; } .dv-bar i:nth-child(3) { background: #28c840; }
.dv-bar span { margin-left: 10px; padding: 4px 12px; border-radius: 6px; background: rgba(255,255,255,.07); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dv-br .rot { aspect-ratio: 16 / 10.4; }
.dv-cel { position: absolute; right: 0; bottom: 0; width: 25%; padding: 9px; background: #0b0e1a; border: 2px solid #343e66; border-radius: 26px; box-shadow: 0 26px 60px rgba(0,0,0,.6); z-index: 3; }
.dv-cel .rot { aspect-ratio: 9 / 19; border-radius: 18px; }
.dv-not { position: absolute; top: 12px; left: 50%; width: 34%; height: 9px; transform: translateX(-50%); background: #0b0e1a; border-radius: 6px; z-index: 5; }
.ph-e-dispositivos .ai-stats, .ph-e-pila .ai-stats { margin-top: 22px; }
@media (max-width: 720px) { .ph-e-monitor .ph-shots { padding: 24px 6px 40px; } .mn-chip.c2, .mn-chip.c3 { display: none; } .mn-chip.c0 { left: 0; } .mn-chip.c1 { right: 0; } .dv-cel { width: 30%; } }
.mn .mn-chip { top: auto; right: auto; bottom: auto; left: auto; }
.mn .mn-chip.c0 { top: -18px; left: -26px; } .mn .mn-chip.c1 { top: 18%; right: -34px; } .mn .mn-chip.c2 { bottom: 24%; left: -34px; } .mn .mn-chip.c3 { bottom: -22px; right: 10%; }
@media (max-width: 720px) { .mn .mn-chip.c0 { left: 0; } .mn .mn-chip.c1 { right: 0; } }