/* ══════════════════════════════════════════════════════════════
   SRT Server · srtserver.app — diseño «On Air»
   Minimalista: negro profundo, blanco cálido y el rojo del tally.
   Sin frameworks ni compilación. Fuentes alojadas en la propia web.
   ══════════════════════════════════════════════════════════════ */

@font-face { font-family: "InterV"; src: url("fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "InterV"; src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "MonoV"; src: url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --accent: #ff3b30;
  --accent-ink: color-mix(in srgb, var(--accent) 82%, #000);
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --ok: #22c55e;
  --warn: #f59e0b;

  /* Claro (por defecto) */
  --bg: #fcfcfa;
  --paper: #f3f2ee;
  --card: #ffffff;
  --fg: #0d0d0f;
  --fg-2: #56565f;
  --fg-3: #8d8d96;
  --line: #e7e5df;
  --line-2: #d8d5cd;

  /* Oscuro */
  --dk: #09090b;
  --dk-2: #101013;
  --dk-card: #141418;

  --sans: "InterV", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "MonoV", "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --r: 14px;
  --r-sm: 9px;
  --r-lg: 22px;
  --wrap: 78rem;
  --gut: clamp(1rem, 4vw, 2rem);
  --sp: clamp(4.5rem, 9vw, 8rem);
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px -12px rgba(0,0,0,.12);
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  font-family: var(--sans); font-size: 1rem; line-height: 1.6; color: var(--fg); background: var(--bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  min-height: 100vh; display: flex; flex-direction: column; font-feature-settings: "ss01", "cv11";
}
main { flex: 1; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--accent); color: #fff; padding: .6rem 1rem; }
.skip:focus { left: 1rem; top: 1rem; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap.narrow { max-width: 54rem; }
.mono { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }
.hl { color: var(--accent); }
.dim { color: var(--fg-3); }
.tone-dark .dim, .on-dark .dim { color: rgba(255,255,255,.38); }

/* ── Tonos de sección ── */
.blk { position: relative; padding: var(--sp) 0; background: var(--bg); }
.blk.space-tight { --sp: clamp(2.25rem, 5vw, 3.75rem); }
.tone-light { background: var(--bg); }
.tone-paper { background: var(--paper); }
.tone-dark, .on-dark {
  --bg: var(--dk); --paper: var(--dk-2); --card: var(--dk-card);
  --fg: #f5f5f3; --fg-2: rgba(245,245,243,.66); --fg-3: rgba(245,245,243,.42);
  --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.16);
  background: var(--dk); color: var(--fg);
}
.tone-accent {
  --fg: #fff; --fg-2: rgba(255,255,255,.82); --fg-3: rgba(255,255,255,.62); --line: rgba(255,255,255,.22); --card: rgba(255,255,255,.1);
  background: var(--accent); color: #fff;
}
.tone-accent .hl { color: #fff; text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .12em; }
.tone-dark + .tone-dark { padding-top: 0; }
.tone-paper + .tone-paper, .tone-light + .tone-light { padding-top: 0; }
.blk-empty { border: 1.5px dashed var(--line-2); border-radius: var(--r); padding: 2rem; text-align: center; color: var(--fg-3); font-size: .9rem; }

/* ── Cabecera de sección ── */
.kicker { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--fg-2); }
.kicker::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.tone-accent .kicker::before { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.2); }
.bh { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.bh.center { margin-inline: auto; text-align: center; }
.bh-title { margin-top: 1rem; font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 640; text-wrap: balance; }
.bh-text { margin-top: 1.25rem; font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.65; color: var(--fg-2); max-width: 40rem; text-wrap: pretty; }
.bh.center .bh-text { margin-inline: auto; }
.bh-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.bh-row .bh { margin-bottom: 0; }
.foot-note { margin-top: 2rem; color: var(--fg-3); font-size: .78rem; }
.foot-note.center { text-align: center; margin-inline: auto; max-width: 44rem; text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: .9rem; }

/* ── Botones ── */
.btn {
  --b-bg: var(--fg); --b-fg: var(--bg); --b-bd: var(--fg);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 2.75rem; padding: .7rem 1.35rem; border-radius: 999px; border: 1px solid var(--b-bd);
  background: var(--b-bg); color: var(--b-fg); font-size: .9rem; font-weight: 560; letter-spacing: -.005em; line-height: 1.1;
  cursor: pointer; white-space: nowrap; transition: transform .2s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .ico, .btn svg { width: 1.1rem; height: 1.1rem; }
.btn-accent { --b-bg: var(--accent); --b-fg: #fff; --b-bd: var(--accent); box-shadow: 0 8px 24px -10px var(--accent); }
.btn-accent:hover { --b-bg: var(--accent-ink); --b-bd: var(--accent-ink); box-shadow: 0 10px 30px -10px var(--accent); }
.btn-line { --b-bg: transparent; --b-fg: var(--fg); --b-bd: var(--line-2); }
.btn-line:hover { --b-bd: var(--fg); }
.tone-accent .btn-accent { --b-bg: #fff; --b-fg: var(--accent); --b-bd: #fff; box-shadow: none; }
.btn-ghost-dark { --b-bg: rgba(255,255,255,.06); --b-fg: #fff; --b-bd: rgba(255,255,255,.14); }
.btn-ghost-dark:hover { --b-bg: rgba(255,255,255,.12); }
.btn-lg { min-height: 3.25rem; padding: .9rem 1.7rem; font-size: 1rem; }
.btn-sm { min-height: 2.25rem; padding: .45rem 1rem; font-size: .82rem; }
.btn-block { display: flex; width: 100%; }
.btns { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 2.25rem; }
.arrow-link { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.75rem; font-weight: 560; font-size: .95rem; border-bottom: 1px solid var(--line-2); padding-bottom: .2rem; transition: border-color .2s, color .2s, gap .2s; }
.arrow-link span { color: var(--accent); transition: transform .2s var(--ease); }
.arrow-link:hover { border-color: var(--fg); gap: .7rem; }

/* ── Piloto «en directo» ── */
.onair { display: inline-flex; align-items: center; gap: .65rem; padding: .4rem .85rem .4rem .7rem; border: 1px solid var(--line-2); border-radius: 999px;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); background: color-mix(in srgb, var(--card) 60%, transparent); backdrop-filter: blur(8px); }
.onair-dot { display: inline-block; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: tally 1.8s ease-out infinite; }
@keyframes tally { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); } 70%, 100% { box-shadow: 0 0 0 .55rem transparent; } }

/* ── Marca ── */
.brand { display: inline-flex; align-items: center; gap: .65rem; flex: none; }
.brand-name { font-weight: 650; font-size: 1.02rem; letter-spacing: -.02em; white-space: nowrap; }
.brand-logo { height: 1.75rem; width: auto; }
.mark { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); flex: none; }
.mark span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); transition: transform .3s var(--ease); }
.brand:hover .mark span { transform: scale(1.35); }

/* ── Aviso superior ── */
.announce { background: var(--accent); color: #fff; font-size: .86rem; font-weight: 520; }
.announce .wrap { display: flex; justify-content: center; padding-block: .55rem; text-align: center; }
.announce a, .announce p { display: inline-flex; align-items: center; gap: .55rem; }
.announce .onair-dot { background: #fff; animation: none; }
.announce a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Barra superior ── */
.topbar { position: sticky; top: 0; z-index: 50; color: #fff; background: rgba(9,9,11,.86); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid rgba(255,255,255,.07); }
.topbar-in { display: flex; align-items: center; gap: 2rem; height: 4rem; }
.mainnav { display: none; align-items: center; gap: .15rem; margin-right: auto; }
.mainnav a { position: relative; font-size: .88rem; font-weight: 500; color: rgba(255,255,255,.66); padding: .5rem .8rem; border-radius: 999px; transition: color .2s, background .2s; white-space: nowrap; }
.mainnav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.mainnav a.on { color: #fff; }
.mainnav a.on::after { content: ""; position: absolute; left: 50%; bottom: .15rem; width: .3rem; height: .3rem; border-radius: 50%; background: var(--accent); transform: translateX(-50%); }
.topbar-right { display: flex; align-items: center; gap: .9rem; margin-left: auto; }
.tb-link { font-size: .88rem; font-weight: 500; color: rgba(255,255,255,.7); }
.tb-link:hover { color: #fff; }
.tb-admin { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.langs { display: inline-flex; padding: .2rem; border-radius: 999px; background: rgba(255,255,255,.06); }
.langs a { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; padding: .3rem .55rem; border-radius: 999px; color: rgba(255,255,255,.55); }
.langs a:hover { color: #fff; }
.langs a.on { background: rgba(255,255,255,.14); color: #fff; }
.burger { display: inline-grid; place-content: center; gap: 5px; width: 2.5rem; height: 2.5rem; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; background: transparent; cursor: pointer; }
.burger span { display: block; width: 1rem; height: 1.5px; background: #fff; transition: transform .25s var(--ease); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.mobnav { --fg: #fff; --bg: var(--dk); --line-2: rgba(255,255,255,.22); border-top: 1px solid rgba(255,255,255,.07); background: rgba(9,9,11,.96); }
.mobnav .langs { display: inline-flex; justify-self: start; margin-top: .5rem; }
.mobnav .langs a:not(.btn) { padding: .4rem .75rem; font-size: .72rem; font-weight: 500; border-bottom: 0; color: rgba(255,255,255,.55); }
.mobnav .langs a.on { color: #fff; }
.mobnav .wrap { display: flex; flex-direction: column; padding-block: 1rem 1.5rem; }
.mobnav a:not(.btn) { padding: .85rem 0; font-size: 1.15rem; font-weight: 560; border-bottom: 1px solid rgba(255,255,255,.07); color: rgba(255,255,255,.85); }
.mobnav-foot { display: grid; gap: .6rem; margin-top: 1.25rem; }
@media (max-width: 720px) { .topbar-right .tb-link, .topbar-right > .btn, .langs { display: none; } .mobnav .langs, .maint-top .langs { display: inline-flex; } }
@media (min-width: 1020px) { .mainnav { display: flex; } .burger, .mobnav { display: none !important; } .topbar-right { margin-left: 0; } }

/* ── Pie ── */
.footer { position: relative; overflow: hidden; background: var(--dk); color: #f5f5f3; padding-top: clamp(4rem, 8vw, 6rem); --line: rgba(255,255,255,.09); }
.footer-top { display: grid; gap: 3rem 2rem; grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; max-width: 24rem; }
.footer-text { margin-top: 1.25rem; font-size: .92rem; line-height: 1.65; color: rgba(255,255,255,.55); }
.footer-mail { display: inline-block; margin-top: 1.25rem; color: rgba(255,255,255,.8); border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: .15rem; text-transform: none; letter-spacing: 0; font-size: .8rem; }
.footer-mail:hover { color: #fff; border-color: var(--accent); }
.footer-h { color: rgba(255,255,255,.4); margin-bottom: 1.1rem; }
.footer-col li + li { margin-top: .65rem; }
.footer-col a, .social a { font-size: .92rem; color: rgba(255,255,255,.72); transition: color .2s; }
.footer-col a:hover, .social a:hover { color: #fff; }
.social { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.25rem; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; margin-top: 4rem; padding-block: 1.5rem; border-top: 1px solid var(--line); color: rgba(255,255,255,.4); font-size: .66rem; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer-legal a:hover { color: #fff; }
.footer-wordmark { font-weight: 700; letter-spacing: -.06em; line-height: .8; white-space: nowrap; text-align: center; font-size: clamp(4rem, 17vw, 15.5rem); color: transparent;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,0) 85%); -webkit-background-clip: text; background-clip: text; margin-top: -.5rem; user-select: none; }
@media (min-width: 960px) { .footer-top { grid-template-columns: 1.5fr repeat(var(--fcols, 3), 1fr); } .footer-brand { grid-column: auto; } }

/* ══════════════ PORTADA ══════════════ */
.blk-hero { padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(4rem, 8vw, 6.5rem); overflow: hidden; isolation: isolate; }
.hero-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-glow { position: absolute; left: 50%; top: -30%; width: 90rem; height: 60rem; transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%); opacity: .55; filter: blur(10px); }
.hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 70% at 50% 20%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 20%, #000 30%, transparent 75%); }
.tone-light .hero-grid, .tone-paper .hero-grid { background-image: linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px); }
.hero-copy { max-width: 62rem; }
.hero-title { margin-top: 1.75rem; font-size: clamp(3rem, 8.4vw, 7.25rem); line-height: .96; letter-spacing: -.055em; font-weight: 680; text-wrap: balance; }
.hero-title .hl { background: linear-gradient(100deg, var(--accent) 10%, color-mix(in srgb, var(--accent) 55%, #ffb199) 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-text { margin-top: 1.75rem; max-width: 40rem; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--fg-2); text-wrap: pretty; }
.hero-note { margin-top: 1.25rem; color: var(--fg-3); }
.badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.badges li { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); border: 1px solid var(--line); border-radius: 999px; padding: .4rem .75rem; background: color-mix(in srgb, var(--card) 50%, transparent); }
.hero-media { margin-top: 4rem; }

/* Esquema animado de señales */
.sig { --gap: clamp(2rem, 6vw, 5.5rem); position: relative; display: grid; gap: 1rem; margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.sig-col { display: grid; gap: .75rem; align-content: center; }
.sig-node { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .65rem; padding: .85rem 1rem; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); backdrop-filter: blur(6px);
  animation: rise .7s var(--ease) both; animation-delay: calc(.08s * var(--i) + .2s); }
.sig-out .sig-node { grid-template-columns: 1fr; }
.sig-led { grid-row: span 2; width: .55rem; height: .55rem; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.sig-name { font-weight: 600; font-size: .95rem; letter-spacing: -.01em; }
.sig-detail { color: var(--fg-3); font-size: .64rem; }
.sig-wire { display: none; }
.sig-core { position: relative; border-radius: var(--r); padding: 1.1rem; background: linear-gradient(180deg, #17171b, #0e0e11); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 30px 80px -20px color-mix(in srgb, var(--accent) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.06); color: #fff; animation: rise .8s var(--ease) .1s both; }
.sig-core-head { display: flex; align-items: center; gap: .6rem; padding-bottom: .8rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.sig-core-head strong { font-size: .98rem; letter-spacing: -.01em; }
.sig-core-head .mark { width: 1.4rem; height: 1.4rem; border-radius: 6px; }
.sig-core-head .mark span { width: .4rem; height: .4rem; }
.sig-live { margin-left: auto; display: inline-flex; align-items: center; gap: .45rem; color: var(--accent); font-size: .62rem; }
.sig-live .onair-dot { width: .4rem; height: .4rem; }
.sig-tc { margin: .9rem 0 .7rem; font-size: 1.55rem; letter-spacing: .04em; font-weight: 500; color: #fff; text-transform: none; font-variant-numeric: tabular-nums; }
.sig-ch { display: grid; gap: .42rem; }
.sig-row { display: grid; grid-template-columns: 2.4rem 1fr 2.6rem; align-items: center; gap: .6rem; }
.sig-row .mono { font-size: .6rem; color: rgba(255,255,255,.5); }
.sig-fmt { text-align: right; }
.sig-core-foot { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.55); font-size: .62rem; }
.meter { position: relative; display: block; height: .32rem; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.meter i { position: absolute; inset: 0; transform-origin: left; border-radius: inherit;
  background: linear-gradient(90deg, #22c55e 0 62%, #eab308 62% 82%, var(--accent) 82%); animation: vu var(--t, 1s) ease-in-out var(--d, 0s) infinite alternate; }
@keyframes vu { 0% { transform: scaleX(.18); } 35% { transform: scaleX(.62); } 60% { transform: scaleX(.44); } 85% { transform: scaleX(.78); } 100% { transform: scaleX(.55); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) {
  .sig { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); column-gap: var(--gap); align-items: center; }
  .sig-wire { display: block; position: absolute; top: 50%; height: 1px; width: var(--gap); overflow: hidden;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 6px, transparent 6px 12px); }
  .sig-src .sig-wire { left: 100%; }
  .sig-out .sig-wire { right: 100%; }
  .sig-wire::after { content: ""; position: absolute; top: -1px; left: -30%; width: 30%; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, transparent, var(--accent), #fff); box-shadow: 0 0 12px var(--accent);
    animation: packet 2.2s linear infinite; animation-delay: calc(-.55s * var(--i)); }
  .sig-out .sig-wire::after { background: linear-gradient(90deg, transparent, #22c55e, #fff); box-shadow: 0 0 12px #22c55e; animation-delay: calc(-.7s * var(--i) - .3s); }
}
@keyframes packet { to { left: 100%; } }

/* ── Cabecera de página interior ── */
.blk-header { padding: clamp(4.5rem, 10vw, 8rem) 0 clamp(3.5rem, 7vw, 5.5rem); overflow: hidden; isolation: isolate; }
.blk-header .hero-glow { top: -60%; opacity: .4; }
.ph-title { margin-top: 1.25rem; max-width: 60rem; font-size: clamp(2.6rem, 6.6vw, 5.4rem); line-height: 1; letter-spacing: -.05em; font-weight: 670; text-wrap: balance; }
.ph-title .hl { color: var(--accent); }
.ph-text { margin-top: 1.5rem; max-width: 42rem; font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.6; color: var(--fg-2); }
.crumb { display: flex; gap: .6rem; align-items: center; color: var(--fg-3); }
.crumb a { color: var(--fg-2); border-bottom: 1px solid var(--line-2); }
.crumb a:hover { color: var(--fg); }

/* ── Cinta ── */
.blk-marquee { overflow: hidden; border-block: 1px solid var(--line); }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee ul { display: flex; flex: none; }
.marquee li { display: inline-flex; align-items: center; gap: 2.5rem; padding-right: 2.5rem; color: var(--fg-2); font-size: .78rem; white-space: nowrap; }
.marquee li::after { content: ""; width: .35rem; height: .35rem; border-radius: 50%; background: var(--accent); opacity: .8; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── Cifras ── */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); }
.stat { padding: 2rem 1.5rem 2rem 0; border-bottom: 1px solid var(--line); }
.stat:nth-child(odd) { border-right: 1px solid var(--line); }
.stat:nth-child(even) { padding-left: 1.5rem; }
.stat-v { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 650; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-l { margin-top: .9rem; font-weight: 580; font-size: 1rem; }
.stat-d { margin-top: .35rem; color: var(--fg-2); font-size: .88rem; line-height: 1.5; }
@media (min-width: 900px) {
  .stats { grid-template-columns: repeat(var(--n), 1fr); }
  .stat { padding: 2.5rem 2rem; border-right: 1px solid var(--line); }
  .stat:first-child { padding-left: 0; }
  .stat:nth-child(even) { padding-left: 2rem; }
  .stat:last-child { border-right: 0; }
}

/* ── Módulos ── */
.mods { border-top: 1px solid var(--line); }
.mod { position: relative; display: grid; grid-template-columns: 3rem 1fr; gap: .5rem 1rem; padding: 1.75rem 0; border-bottom: 1px solid var(--line); transition: background .3s, padding .3s var(--ease); }
.mod-n { color: var(--fg-3); padding-top: .35rem; }
.mod-name strong { display: block; font-size: clamp(1.3rem, 2.2vw, 1.75rem); letter-spacing: -.03em; font-weight: 620; line-height: 1.15; }
.mod-name em { display: inline-block; margin-top: .45rem; font-style: normal; color: var(--fg-3); }
.mod-text { grid-column: 2; color: var(--fg-2); font-size: .97rem; line-height: 1.6; max-width: 40rem; }
.mod-metric { grid-column: 2; color: var(--accent); }
.mod-go { display: none; }
a.mod:hover .mod-n { color: var(--accent); }
@media (min-width: 900px) {
  .mod { grid-template-columns: 4rem 15rem 1fr 11rem 2rem; align-items: baseline; gap: 2rem; padding: 2.25rem 1rem; margin-inline: -1rem; border-radius: var(--r-sm); }
  .mod-text, .mod-metric { grid-column: auto; }
  .mod-metric { text-align: right; }
  .mod-go { display: block; color: var(--fg-3); transition: transform .3s var(--ease), color .3s; }
  a.mod:hover { background: var(--card); box-shadow: var(--shadow); border-bottom-color: transparent; }
  a.mod:hover .mod-go { transform: translateX(4px); color: var(--accent); }
}

/* ── Texto + imagen ── */
.split .bh-title { font-size: clamp(2rem, 3.7vw, 3.1rem); }
.split { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.split-copy .bh { margin-bottom: 0; }
.split-copy .prose { margin-top: 1.5rem; }
.split-media { min-width: 0; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
  .split.is-rev .split-media { order: -1; }
  .split.no-media { grid-template-columns: minmax(0, 46rem); }
}
.ticks { display: grid; gap: .7rem; margin-top: 1.75rem; }
.ticks li { position: relative; padding-left: 1.75rem; font-size: .98rem; line-height: 1.5; color: var(--fg); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--accent-soft); }
.ticks li::after { content: ""; position: absolute; left: .37rem; top: .43rem; width: .36rem; height: .58rem; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ticks-sm li { font-size: .9rem; color: var(--fg-2); }
.media-ph { display: grid; place-items: center; aspect-ratio: 16 / 10; border: 1.5px dashed var(--line-2); border-radius: var(--r); color: var(--fg-3); font-size: .9rem; }

/* Marcos: ventana, móvil, redondeado */
.frame-window { position: relative; border-radius: var(--r); overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: 0 40px 80px -30px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.02); }
.tone-dark .frame-window, .frame-window.ill { background: #111114; border-color: rgba(255,255,255,.1); color: #fff; }
.win-bar { display: flex; align-items: center; gap: .4rem; height: 2.25rem; padding: 0 .9rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--card) 85%, var(--fg) 4%); }
.ill .win-bar, .term .win-bar { background: #18181c; border-color: rgba(255,255,255,.07); }
.win-bar i { width: .62rem; height: .62rem; border-radius: 50%; background: #ff5f57; }
.win-bar i:nth-child(2) { background: #febc2e; } .win-bar i:nth-child(3) { background: #28c840; }
.win-bar b, .win-bar em { margin-left: .75rem; color: rgba(255,255,255,.5); font-size: .62rem; font-style: normal; }
.win-bar em { margin-left: auto; color: #fff; font-size: .68rem; }
.frame-window > img { width: 100%; }
.frame-phone { position: relative; width: min(17rem, 72vw); margin-inline: auto; border-radius: 2.4rem; padding: .55rem; background: #1b1b1f; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 80px -25px rgba(0,0,0,.55); }
.frame-phone > img, .phone-screen { display: block; width: 100%; border-radius: 1.95rem; overflow: hidden; }
.frame-round { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.frame-round img, img.frame-round { width: 100%; }

/* Ilustraciones */
.ill-body { position: relative; padding: 1rem 1.1rem 1.1rem; }
.ill-foot { display: flex; justify-content: space-between; gap: 1rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.07); color: rgba(255,255,255,.45); font-size: .6rem; }
.chrow { display: grid; grid-template-columns: .6rem 2.4rem 1fr 3rem minmax(3rem, 6rem) 4rem; align-items: center; gap: .65rem; padding: .62rem .2rem; border-bottom: 1px solid rgba(255,255,255,.06); font-size: .82rem; }
.chrow .mono { font-size: .6rem; color: rgba(255,255,255,.45); }
.ch-led { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.chrow:nth-child(3) .ch-led { background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: blink 1.4s steps(2, start) infinite; }
.ch-name { color: rgba(255,255,255,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-r { text-align: right; }
@media (max-width: 520px) { .chrow { grid-template-columns: .6rem 2.2rem 1fr 4rem; } .ch-p, .ch-r { display: none; } }
@keyframes blink { 50% { opacity: .25; } }

.ill-tl .ill-body { padding-bottom: 1rem; }
.tl-ruler { display: flex; justify-content: space-between; margin-left: 3.4rem; padding-bottom: .5rem; color: rgba(255,255,255,.35); font-size: .55rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.tl-track { display: grid; grid-template-columns: 3rem 1fr; align-items: center; gap: .4rem; margin-top: .45rem; }
.tl-track > .mono { font-size: .56rem; color: rgba(255,255,255,.45); }
.tl-lane { position: relative; height: 1.45rem; border-radius: 5px; background: rgba(255,255,255,.035); }
.tl-lane i { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(180deg, #3b3b46, #2c2c35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.tl-pgm .tl-lane i { display: grid; place-items: center; font: 600 .62rem var(--mono); font-style: normal; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.tl-pgm i.c1 { background: #c2410c; } .tl-pgm i.c2 { background: #1d4ed8; } .tl-pgm i.c3 { background: #15803d; } .tl-pgm i.c4 { background: #7e22ce; }
.tl-audio .tl-lane { height: 1.6rem; }
.tl-audio svg { width: 100%; height: 100%; }
.tl-audio path { fill: none; stroke: #22c55e; stroke-width: .8; opacity: .8; }
.tl-head { position: absolute; top: 2.6rem; bottom: 3rem; left: calc(1.1rem + 3.4rem); width: 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: playhead 9s linear infinite; }
.tl-head::before { content: ""; position: absolute; top: -.3rem; left: -.32rem; border: .35rem solid transparent; border-top-color: var(--accent); }
@keyframes playhead { from { left: calc(1.1rem + 3.4rem); } to { left: calc(100% - 1.1rem); } }

.ill-phones { display: flex; justify-content: center; gap: 1.25rem; padding: 1rem 0; }
.ill-phones .frame-phone { width: min(14.5rem, 42vw); margin: 0; }
.ill-phones .frame-phone:nth-child(2) { transform: translateY(2.5rem); }
.ill-phones.solo .frame-phone { width: min(16rem, 70vw); }
.phone-screen { position: relative; aspect-ratio: 9 / 18.5; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 1.6rem 1rem 1.4rem; color: #fff; }
.tally-screen { background: var(--accent); animation: tallybg 6s steps(1) infinite; }
.tally-screen strong { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; font-size: clamp(1.15rem, 3.2vw, 1.55rem); letter-spacing: .06em; }
.tally-screen .t-pvw { opacity: 0; }
.tally-screen > .mono { font-size: .62rem; opacity: .85; }
@keyframes tallybg { 0%, 62% { background: var(--accent); } 63%, 100% { background: #16a34a; } }
.tally-screen .t-pgm { animation: tallypgm 6s steps(1) infinite; }
.tally-screen .t-pvw { animation: tallypvw 6s steps(1) infinite; }
@keyframes tallypgm { 0%, 62% { opacity: 1; } 63%, 100% { opacity: 0; } }
@keyframes tallypvw { 0%, 62% { opacity: 0; } 63%, 100% { opacity: 1; } }
.ic-screen { background: radial-gradient(120% 70% at 50% 0%, #26262d, #111114); }
.ic-top { font-size: .58rem; color: rgba(255,255,255,.6); }
.ic-ptt { display: grid; place-items: center; width: 62%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #2d2d35, #1a1a1f); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 0 .5rem rgba(255,255,255,.03); }
.ic-ptt .mono { font-size: .56rem; color: rgba(255,255,255,.7); text-align: center; padding: 0 .4rem; }
.ic-ptt.talking { background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent) 85%, #fff), var(--accent)); border-color: transparent; animation: talk 1.6s ease-in-out infinite; }
.ic-ptt.talking .mono { color: #fff; }
@keyframes talk { 0%, 100% { box-shadow: 0 0 0 .4rem color-mix(in srgb, var(--accent) 30%, transparent); } 50% { box-shadow: 0 0 0 1rem color-mix(in srgb, var(--accent) 8%, transparent); } }
.ic-pills { display: flex; gap: .35rem; }
.ic-pills i { font-style: normal; font-size: .52rem; padding: .3rem .5rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.55); }
.ic-pills i.on { background: #fff; color: #111; border-color: #fff; }
.ic-meter { width: 80%; }
.ic-st { font-size: .52rem; color: var(--ok); }

.stream-view { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, #1e293b, #0f172a 55%, #3b0d0a); }
.stream-scene i { position: absolute; border-radius: 50%; filter: blur(30px); opacity: .7; animation: drift 9s ease-in-out infinite alternate; }
.stream-scene i:nth-child(1) { width: 40%; height: 55%; left: 8%; top: 20%; background: #f97316; }
.stream-scene i:nth-child(2) { width: 35%; height: 45%; right: 10%; top: 30%; background: #2563eb; animation-delay: -3s; }
.stream-scene i:nth-child(3) { width: 28%; height: 35%; left: 40%; bottom: 0; background: var(--accent); animation-delay: -6s; }
@keyframes drift { to { transform: translate(8%, -6%) scale(1.15); } }
.stream-badge { position: absolute; z-index: 2; top: .9rem; left: .9rem; display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .65rem; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: .6rem; }
.stream-lat { position: absolute; z-index: 2; bottom: .9rem; right: .9rem; padding: .35rem .65rem; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: .6rem; }
.win-bar .url { margin-left: 1rem; padding: .2rem .7rem; border-radius: 6px; background: rgba(255,255,255,.06); text-transform: none; letter-spacing: 0; }

/* ── Tarjetas ── */
.cards { display: grid; gap: 1rem; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards.cols-3 { grid-template-columns: repeat(3, 1fr); } .cards.cols-4 { grid-template-columns: repeat(4, 1fr); } }
.fcard { position: relative; display: flex; flex-direction: column; padding: 1.75rem; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
a.fcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-2); }
.cards-plain .fcard { background: transparent; border: 0; padding: 0; }
.cards-plain { gap: 2.5rem 2rem; }
.fcard-ico { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 12px; background: var(--accent-soft); color: var(--accent); margin-bottom: 1.5rem; }
.fcard-ico .ico { width: 1.45rem; height: 1.45rem; }
.fcard-ico img.ico { width: 1.6rem; height: 1.6rem; object-fit: contain; }
.ico-txt { font-size: 1.3rem; line-height: 1; }
.fcard-n { color: var(--accent); margin-bottom: 1.25rem; }
.fcard-tag { color: var(--fg-3); margin-bottom: .55rem; }
.fcard-title { font-size: 1.2rem; font-weight: 620; letter-spacing: -.02em; line-height: 1.25; }
.fcard-text { margin-top: .65rem; color: var(--fg-2); font-size: .95rem; line-height: 1.6; }
.fcard-go { margin-top: auto; padding-top: 1.25rem; color: var(--fg-3); transition: transform .3s var(--ease), color .3s; }
a.fcard:hover .fcard-go { color: var(--accent); transform: translateX(4px); }

/* ── Pasos ── */
.steps { counter-reset: s; }
.stp { position: relative; display: grid; grid-template-columns: 3.25rem 1fr; gap: 1rem; padding: 1.75rem 0; border-top: 1px solid var(--line); }
.steps-list .stp:last-child { border-bottom: 1px solid var(--line); }
.stp-n { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--line-2); color: var(--fg); font-size: .72rem; }
.stp-meta { display: inline-block; color: var(--accent); margin-bottom: .45rem; }
.stp-title { font-size: 1.2rem; font-weight: 620; letter-spacing: -.02em; line-height: 1.3; }
.stp-text { margin-top: .5rem; color: var(--fg-2); font-size: .97rem; line-height: 1.65; max-width: 44rem; }
.stp .term { margin-top: 1rem; max-width: 44rem; }
@media (min-width: 900px) {
  .steps-list .stp { grid-template-columns: 5rem 1fr; padding: 2rem 0; }
  .steps-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .steps-cards .stp { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.75rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
}
.steps-cards .stp-n { background: var(--accent); border-color: var(--accent); color: #fff; }
.steps-timeline .stp { border-top: 0; padding: 0 0 2.5rem; }
.steps-timeline .stp::before { content: ""; position: absolute; left: 1.2rem; top: 2.4rem; bottom: 0; width: 1px; background: linear-gradient(var(--line-2), var(--line)); }
.steps-timeline .stp:last-child::before { display: none; }
.steps-timeline .stp-n { background: var(--bg); position: relative; z-index: 1; }
.steps-timeline .stp:first-child .stp-n { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 6px var(--accent-soft); }
@media (min-width: 900px) { .steps-timeline { max-width: 52rem; } }

/* ── Preguntas ── */
.faq-wrap { display: grid; gap: 2rem; }
@media (min-width: 960px) { .faq-wrap { grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 5rem; } .faq-wrap .bh { position: sticky; top: 6rem; align-self: start; } }
.faqs { border-top: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.4rem 0; cursor: pointer; list-style: none; font-size: 1.06rem; font-weight: 560; letter-spacing: -.01em; transition: color .2s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq-x { position: relative; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid var(--line-2); transition: transform .3s var(--ease), background .3s; }
.faq-x::before, .faq-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: .62rem; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.faq-x::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .3s var(--ease); }
.faq[open] .faq-x { background: var(--fg); color: var(--bg); border-color: var(--fg); transform: rotate(180deg); }
.faq[open] .faq-x::after { transform: translate(-50%, -50%) rotate(0); }
.faq-a { padding: 0 3rem 1.5rem 0; color: var(--fg-2); line-height: 1.7; animation: rise .35s var(--ease); }

/* ── Fichas técnicas ── */
.specs { display: grid; gap: 1rem; }
@media (min-width: 900px) { .specs { grid-template-columns: repeat(var(--n), 1fr); } }
.spec { position: relative; padding: 1.75rem; border-radius: var(--r); border: 1px solid var(--line); background: var(--card); }
.spec.is-hl { border-color: var(--fg); box-shadow: var(--shadow); }
.spec.is-hl::before { content: ""; position: absolute; top: -1px; left: 1.75rem; right: 1.75rem; height: 2px; background: var(--accent); }
.spec-meta { color: var(--accent); }
.spec-name { margin: .45rem 0 1.25rem; font-size: 1.4rem; font-weight: 640; letter-spacing: -.03em; }
.kvs > div { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-top: 1px solid var(--line); font-size: .93rem; }
.kvs dt { color: var(--fg-3); flex: none; padding-top: .15rem; }
.kvs dd { text-align: right; font-weight: 520; }
.kv-hash dd { font-size: .62rem; word-break: break-all; text-transform: none; letter-spacing: 0; }

/* ── Tabla ── */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.tbl { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: .93rem; }
.tbl th { text-align: left; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--fg-3); padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.tbl td { padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); color: var(--fg-2); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.mono-strong { font-family: var(--mono); font-size: .82rem; color: var(--fg); font-weight: 560; }
.tbl tbody tr:hover td { background: color-mix(in srgb, var(--card) 70%, var(--paper)); }

/* ── Llamada a la acción ── */
.blk-cta.tone-dark { overflow: hidden; }
.cta { position: relative; display: grid; gap: 2.5rem; align-items: end; }
.cta-glow { position: absolute; z-index: 0; right: -15%; top: -60%; width: 46rem; height: 46rem; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 35%, transparent), transparent); pointer-events: none; opacity: .7; }
.cta-copy, .cta-actions { position: relative; z-index: 1; }
.cta-title { margin-top: 1.5rem; font-size: clamp(2.4rem, 6.2vw, 5.2rem); line-height: 1; letter-spacing: -.05em; font-weight: 670; text-wrap: balance; }
.cta-text { margin-top: 1.25rem; max-width: 36rem; color: var(--fg-2); font-size: 1.1rem; line-height: 1.6; }
.cta-actions .btns { margin-top: 0; }
.cta-note { margin-top: 1rem; color: var(--fg-3); }
@media (min-width: 960px) { .cta { grid-template-columns: 1.5fr auto; } .cta-actions .btns { justify-content: flex-end; } }
.cta-card { padding: clamp(2rem, 5vw, 3.5rem); border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.cta-card .cta-title { font-size: clamp(1.8rem, 3.6vw, 2.8rem); margin-top: 0; }
.cta-card .onair + .cta-title { margin-top: 1rem; }
.cta-card .cta-text { font-size: 1rem; }

/* ── Aviso ── */
.callout { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; padding: 1.75rem; border-radius: var(--r); border: 1px solid var(--line); background: var(--card); max-width: 56rem; }
.callout-ico { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.callout-ico .ico { width: 1.3rem; height: 1.3rem; }
.callout-title { font-weight: 620; font-size: 1.1rem; letter-spacing: -.015em; margin-bottom: .4rem; padding-top: .35rem; }
.callout .prose { color: var(--fg-2); }
.callout .arrow-link { margin-top: 1rem; }
.callout-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.callout-accent .prose, .callout-accent .prose * { color: rgba(255,255,255,.9); }
.callout-accent .callout-ico { background: rgba(255,255,255,.18); color: #fff; }
.callout-dark { background: var(--dk); border-color: var(--dk); color: #fff; }
.callout-dark .prose { color: rgba(255,255,255,.7); }

/* ── Terminal ── */
.term { border-radius: var(--r-sm); overflow: hidden; background: #0e0e11; border: 1px solid rgba(255,255,255,.08); color: #e8e8e6; box-shadow: 0 24px 50px -24px rgba(0,0,0,.45); }
.term pre { margin: 0; padding: 1.1rem 1.25rem; overflow-x: auto; font-family: var(--mono); font-size: .8rem; line-height: 1.7; white-space: pre; }
.term-sm pre { font-size: .74rem; padding: .9rem 1rem; }
.copy { margin-left: auto; background: transparent; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; padding: .2rem .55rem; color: rgba(255,255,255,.6); cursor: pointer; font-size: .58rem; }
.copy:hover { color: #fff; border-color: rgba(255,255,255,.4); }

/* ── Imagen, galería, vídeo ── */
.figure figcaption { margin-top: 1rem; color: var(--fg-3); text-align: center; }
.img-full img { width: 100%; }
.gallery { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .gallery.cols-3 { grid-template-columns: repeat(3, 1fr); } .gallery.cols-4 { grid-template-columns: repeat(4, 1fr); } }
.gallery img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); transition: transform .4s var(--ease); }
.gallery a:hover img { transform: scale(1.02); }
.gallery figcaption { margin-top: .6rem; color: var(--fg-3); }
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: #0e0e11 center / cover; display: grid; place-items: center; box-shadow: var(--shadow); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play { display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 50%; border: 0; background: var(--accent); color: #fff; cursor: pointer; box-shadow: 0 0 0 .75rem color-mix(in srgb, var(--accent) 25%, transparent); transition: transform .3s var(--ease); }
.video-play:hover { transform: scale(1.06); }
.video-play svg { width: 2rem; height: 2rem; }
.video-note { position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.55); font-size: .6rem; }
.lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 2rem; background: rgba(0,0,0,.88); cursor: zoom-out; animation: rise .25s; }
.lightbox img { max-height: 90vh; border-radius: var(--r-sm); }

/* ── Planes ── */
.plans { display: grid; gap: 1rem; }
@media (min-width: 700px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1150px) { .plans { grid-template-columns: repeat(var(--n), 1fr); } }
.plan { position: relative; display: flex; flex-direction: column; padding: 2rem 1.75rem 1.75rem; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); transition: transform .35s var(--ease), box-shadow .35s; }
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.plan.is-hl { --card: var(--dk); --fg: #f5f5f3; --fg-2: rgba(245,245,243,.66); --fg-3: rgba(245,245,243,.45); --line: rgba(255,255,255,.1); --line-2: rgba(255,255,255,.2);
  background: var(--dk); color: var(--fg); border-color: var(--dk); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--accent) 60%, transparent); }
.plan-badge { position: absolute; top: 1.25rem; right: 1.25rem; padding: .3rem .6rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: .6rem; }
.plan-kind { color: var(--fg-3); }
.plan-name { margin-top: .6rem; font-size: 1.75rem; font-weight: 650; letter-spacing: -.04em; }
.plan-tag { margin-top: .35rem; color: var(--fg-2); font-size: .92rem; line-height: 1.5; min-height: 3em; }
.plan-price { display: flex; align-items: baseline; gap: .3rem; margin: 1.5rem 0 .25rem; min-height: 3.5rem; }
.plan-price .amt { font-size: 3rem; font-weight: 680; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan-price .cur { font-size: 1.4rem; font-weight: 600; color: var(--fg-2); }
.plan-price .per { color: var(--fg-3); font-size: .9rem; margin-left: .2rem; }
.plan-price .ask { font-size: 1.5rem; font-weight: 620; letter-spacing: -.03em; }
.plan .ticks { margin: 1.25rem 0 2rem; gap: .6rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.plan .ticks li { font-size: .9rem; color: var(--fg-2); }
.plan-cta { margin-top: auto; }
.plan-cta form { display: grid; gap: .75rem; }
.plan-small { margin-top: .6rem; text-align: center; color: var(--fg-3); }
.check { display: flex; gap: .6rem; align-items: flex-start; font-size: .78rem; line-height: 1.45; color: var(--fg-2); }
.check input { margin-top: .2rem; accent-color: var(--accent); }
.check a { text-decoration: underline; }

/* ── Add-ons ── */
.addons { display: grid; gap: 3rem; }
@media (min-width: 960px) { .addons { grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: 5rem; } }
.addon-list { display: grid; gap: .75rem; align-content: start; }
.addon { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; padding: 1.15rem 1.25rem; border-radius: var(--r); border: 1px solid var(--line); background: var(--card); }
.addon-ico { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 11px; background: var(--paper); color: var(--fg); }
.addon-ico .ico { width: 1.25rem; height: 1.25rem; }
.addon strong { font-weight: 600; letter-spacing: -.01em; }
.addon p { color: var(--fg-2); font-size: .88rem; margin-top: .1rem; }
.rules { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.rules .ticks { margin-top: 1rem; }

/* ── Descarga ── */
.dl { display: grid; gap: 1rem; }
@media (min-width: 960px) { .dl { grid-template-columns: 1.35fr 1fr; align-items: start; } }
.dl-card { position: relative; overflow: hidden; padding: clamp(1.75rem, 4vw, 2.75rem); border-radius: var(--r-lg); background: var(--dk); color: #fff; --fg-2: rgba(255,255,255,.66); --fg-3: rgba(255,255,255,.45); --line-2: rgba(255,255,255,.2); --fg: #fff; --bg: var(--dk); }
.dl-card .cta-glow { right: -30%; top: -50%; }
.dl-top { position: relative; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.dl-meta { color: rgba(255,255,255,.5); }
.dl-os { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .7rem; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; color: rgba(255,255,255,.75); font-size: .62rem; }
.dl-version { position: relative; margin-top: 1.5rem; font-size: clamp(3.5rem, 9vw, 6rem); font-weight: 680; letter-spacing: -.06em; line-height: 1; }
.dl-title { position: relative; margin-top: 1rem; font-size: 1.25rem; font-weight: 600; }
.dl-text { position: relative; margin-top: .5rem; color: rgba(255,255,255,.66); }
.dl-card .btns { position: relative; }
.dl-wait { color: rgba(255,255,255,.55); }
.dl-alt { color: rgba(255,255,255,.55); text-transform: none; letter-spacing: 0; font-size: .74rem; text-decoration: underline; text-underline-offset: 3px; }
.dl-sheet { padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); }
.dl-sheet .kvs { margin-top: 1.25rem; }

/* ── Historial ── */
.rels { border-top: 1px solid var(--line); }
.rel-item { display: grid; gap: 1rem; padding: 2rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 860px) { .rel-item { grid-template-columns: 12rem 1fr; gap: 3rem; } }
.rel-v { font-size: 1.5rem; font-weight: 650; letter-spacing: -.03em; }
.rel-d { color: var(--fg-3); margin-top: .25rem; }
.rel-item .ticks { margin-top: 0; }
.pill { display: inline-block; margin-top: .75rem; padding: .3rem .6rem; border-radius: 999px; border: 1px solid var(--line-2); font-size: .6rem; }
.pill-accent { border-color: var(--accent); color: var(--accent); }

/* ── Contacto ── */
.blk-contact { padding-top: clamp(3.5rem, 8vw, 6rem); }
.contact { display: grid; gap: 3rem; }
@media (min-width: 960px) { .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 5rem; align-items: start; } }
.contact .ph-title { font-size: clamp(2.4rem, 5vw, 4.2rem); }
.contact-info { margin-top: 2.5rem; }
.contact-info dd a { border-bottom: 1px solid var(--line-2); }
.contact-info dd a:hover { border-color: var(--accent); }
.contact-form { padding: clamp(1.5rem, 3vw, 2.25rem); }

/* ── Texto enriquecido ── */
.prose { font-size: 1.02rem; line-height: 1.75; color: var(--fg-2); }
.prose > * + * { margin-top: 1em; }
.prose h2, .prose h3, .prose h4 { color: var(--fg); letter-spacing: -.02em; line-height: 1.25; font-weight: 640; margin-top: 1.8em; }
.prose h2 { font-size: 1.6rem; } .prose h3 { font-size: 1.25rem; } .prose h4 { font-size: 1.05rem; }
.prose strong, .prose b { color: var(--fg); font-weight: 620; }
.prose a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose ul { list-style: disc; } .prose ol { list-style: decimal; }
.prose li + li { margin-top: .35em; }
.prose li::marker { color: var(--accent); }
.prose blockquote { border-left: 2px solid var(--accent); padding-left: 1.25rem; color: var(--fg); font-size: 1.1rem; }
.prose code { font-family: var(--mono); font-size: .85em; background: var(--paper); padding: .1em .35em; border-radius: 4px; }
.prose pre { background: #0e0e11; color: #eee; padding: 1rem 1.2rem; border-radius: var(--r-sm); overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.prose-lg { font-size: 1.08rem; }
.rt-narrow { max-width: 48rem; }
.rt-split { display: grid; gap: 2rem; }
@media (min-width: 960px) { .rt-split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); gap: 5rem; } .rt-split .bh { margin-bottom: 0; } }

/* ══════════════ PANTALLAS DE LA APLICACIÓN (cuenta, acceso, legales) ══════════════ */
.is-app main { background: var(--paper); }
.section { padding: clamp(3rem, 7vw, 5rem) 0; }
.section > .wrap, .section.wrap { max-width: var(--wrap); }
.card { border: 1px solid var(--line); background: var(--card); border-radius: var(--r); padding: 1.5rem; }
.form-card { padding: 1.75rem; box-shadow: var(--shadow); }
.card-unread { border-color: var(--fg); }
.card-off { border-style: dashed; opacity: .7; }
.card-cell { background: var(--card); padding: 1.5rem; display: flex; flex-direction: column; }
.card-title { margin-top: .5rem; font-size: 1.1rem; font-weight: 620; }
.h-xl { font-size: clamp(2rem, 4vw, 3rem); font-weight: 650; letter-spacing: -.04em; line-height: 1.08; margin-top: .75rem; }
.h-l { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 650; letter-spacing: -.035em; line-height: 1.15; }
.h-m { font-size: 1.2rem; font-weight: 620; letter-spacing: -.02em; }
.page-h { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 670; letter-spacing: -.05em; line-height: 1.02; margin-top: 1rem; }
.page-h-sm { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 660; letter-spacing: -.045em; line-height: 1.05; margin-top: .5rem; }
.lead { margin-top: 1rem; max-width: 36rem; color: var(--fg-2); line-height: 1.7; }
.hero-p { margin-top: 1.25rem; max-width: 38rem; color: var(--fg-2); font-size: 1.05rem; line-height: 1.7; }
.body-copy { max-width: 42rem; color: var(--fg-2); line-height: 1.75; }
.body-sm { font-size: .88rem; line-height: 1.6; color: var(--fg-2); }
.muted { color: var(--fg-2); } .muted-2 { color: var(--fg-3); }
.accent { color: var(--accent); }
.mono-code { font-family: var(--mono); font-size: .8rem; font-weight: 500; }
.link { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); font-weight: 520; }
.link:hover { color: var(--accent); text-decoration-color: var(--accent); }
.linkline { display: inline-block; border-bottom: 1px solid var(--fg); padding-bottom: 1px; }
.linkline:hover { color: var(--accent); border-color: var(--accent); }
.linkbtn { background: none; border: 0; padding: 0; cursor: pointer; color: var(--fg-2); font: inherit; }
.linkbtn.mono { font-family: var(--mono); font-size: .68rem; }
.linkbtn:hover { color: var(--accent); }
.btn-ghost { display: inline-flex; align-items: center; gap: .4rem; background: transparent; border: 1px solid var(--line-2); border-radius: 999px; color: var(--fg-2); font-size: .82rem; font-weight: 520; padding: .5rem 1rem; cursor: pointer; transition: all .2s; }
.btn-ghost:hover { border-color: var(--fg); color: var(--fg); }
.btn-brd { border-color: var(--fg); color: var(--fg); }
.btn-brd:hover { background: var(--fg); color: var(--bg); }
.btn-inv { display: inline-flex; background: #fff; color: #111; border-radius: 999px; padding: .75rem 1.4rem; font-weight: 560; border: 0; cursor: pointer; }
.btn-inv:hover { background: var(--accent); color: #fff; }
.btn-danger { border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); background: transparent; padding: .45rem .9rem; cursor: pointer; border-radius: 999px; font-size: .82rem; }
.btn-danger:hover { background: var(--accent); color: #fff; }
.btn.block { display: flex; width: 100%; }
.block-center { display: flex; justify-content: center; width: 100%; }
.mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: .75rem; } .mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mt-10 { margin-top: 2.5rem; } .mt-12 { margin-top: 3rem; }
.mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: .75rem; } .mb-8 { margin-bottom: 2rem; } .pt-4 { padding-top: 1rem; }
.border-t { border-top: 1px solid var(--line); }
.block { display: block; } .inline { display: inline; } .grow { flex: 1; min-width: 10rem; }
.w-28 { width: 7rem; } .max-w-sm { max-width: 24rem; } .max-w-lg { max-width: 32rem; } .max-w-2xl { max-width: 42rem; } .max-w-3xl { max-width: 48rem; }
.mx-auto { margin-inline: auto; } .text-center { text-align: center; } .text-right { text-align: right; }
.flex-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.stack > * + * { margin-top: 1rem; } .stack-sm > * + * { margin-top: .75rem; }
.ws-pre { white-space: pre-wrap; } .break { word-break: break-all; }
.live-dot { display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent); margin-right: .5rem; vertical-align: middle; animation: blink 1.6s steps(2, start) infinite; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { border: 1px solid var(--line-2); border-radius: 999px; padding: .3rem .65rem; color: var(--fg-2); background: var(--card); }
.note-box { margin-top: 2rem; max-width: 42rem; border: 1px solid var(--line); background: var(--card); border-radius: var(--r); padding: 1.25rem; }
.bullet-list li { position: relative; padding-left: 1rem; font-size: .9rem; color: var(--fg-2); line-height: 1.7; }
.bullet-list li::before { content: ""; position: absolute; left: 0; top: .65rem; width: .3rem; height: .3rem; border-radius: 50%; background: var(--accent); }
.grid-2 { display: grid; gap: 1.5rem; } @media (min-width: 1024px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.grid-2c { display: grid; gap: 2.5rem; } @media (min-width: 1024px) { .grid-2c { grid-template-columns: 1fr 1.4fr; } }
.kv { font-size: .9rem; }
.kv-row { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding: .6rem 0; }
.kv-row:last-child { border-bottom: 0; }
.kv-row dd { font-weight: 520; text-align: right; }
.kv.cols-3 { display: grid; gap: 1rem; }
@media (min-width: 640px) { .kv.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.kv.cols-3 dd { margin-top: .3rem; font-weight: 560; }
.status-pill { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; padding: .35rem .7rem; border-radius: 999px; background: color-mix(in srgb, var(--ok) 12%, transparent); color: #15803d; }
.status-pill::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--ok); }
.status-pill.bad { background: var(--accent-soft); color: var(--accent); }
.status-pill.bad::before { background: var(--accent); }
.badge-accent { display: inline-block; margin-top: .75rem; border: 1px solid var(--accent); color: var(--accent); padding: .25rem .5rem; border-radius: 999px; font-family: var(--mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; }
.ok-dot { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--accent-soft); }
.ok-dot span { width: .75rem; height: .75rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.center-block { text-align: center; padding: 2.5rem 1rem; }
.code { margin-top: 1rem; overflow-x: auto; background: #0e0e11; color: #eee; border-radius: var(--r-sm); padding: 1rem 1.2rem; font-family: var(--mono); font-size: .78rem; line-height: 1.6; white-space: pre; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .88rem; text-align: left; }
.table th { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--fg-3); padding: .9rem 1rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--card) 70%, var(--paper)); }
.table td { padding: .8rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: color-mix(in srgb, var(--card) 80%, var(--paper)); }

/* Formularios */
.form > * + * { margin-top: 1.1rem; }
.form-2 { display: grid; gap: 1rem; }
@media (min-width: 640px) { .form-2 { grid-template-columns: 1fr 1fr; } }
.form .form-2 > * + * { margin-top: 0; }
.form-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.form.form-grid > * + * { margin-top: 0; }
@media (min-width: 640px) { .form-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .form-grid { grid-template-columns: repeat(3, 1fr); } .span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } }
.form-grid-full { grid-column: 1 / -1; }
.form-label { display: block; margin-bottom: .45rem; font-size: .8rem; font-weight: 560; color: var(--fg-2); }
.form-label.mono { font-size: .64rem; }
input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="url"], input[type="search"], input[type="tel"], select, textarea {
  width: 100%; min-height: 2.85rem; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--card); color: var(--fg);
  padding: .65rem .85rem; font: inherit; font-size: .93rem; transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none;
}
select { appearance: auto; -webkit-appearance: auto; }
input[type="date"] { appearance: auto; }
textarea { resize: vertical; min-height: 6rem; line-height: 1.55; }
input::placeholder, textarea::placeholder { color: var(--fg-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--fg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fg) 8%, transparent); }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; accent-color: var(--accent); }
input.w-28 { width: 7rem; }
.form-err { border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-soft); color: var(--accent-ink); padding: .65rem .9rem; border-radius: var(--r-sm); font-size: .88rem; }
.check-row { display: inline-flex; align-items: center; gap: .6rem; font-size: .88rem; }
.form-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; padding: 1.25rem; }

/* Páginas legales */
.legal-doc h2:first-child { margin-top: 0; }
.legal-links { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.legal-links a { color: var(--fg-2); } .legal-links a:hover { color: var(--accent); }

/* Acceso (login, registro, contraseña) */
.auth-wrap { position: relative; display: grid; place-items: center; padding: clamp(3rem, 8vw, 6rem) var(--gut); min-height: calc(100vh - 4rem); background:
  radial-gradient(60rem 30rem at 50% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%), var(--paper); }
.auth-box { position: relative; width: 100%; max-width: 27rem; }
@media (min-width: 1000px) {
  .auth-wrap { grid-template-columns: 1fr 1fr; padding: 0; background: var(--paper); }
  .auth-wrap::before { content: ""; align-self: stretch; justify-self: stretch; min-height: calc(100vh - 4rem); background:
      radial-gradient(circle at 50% 50%, var(--accent) 0 .9rem, transparent .95rem),
      radial-gradient(circle at 50% 50%, transparent 0 4.5rem, color-mix(in srgb, var(--accent) 22%, transparent) 4.6rem 4.7rem, transparent 4.8rem),
      radial-gradient(circle at 50% 50%, transparent 0 9rem, rgba(255,255,255,.08) 9.05rem 9.15rem, transparent 9.25rem),
      radial-gradient(circle at 50% 50%, transparent 0 14rem, rgba(255,255,255,.05) 14.05rem 14.15rem, transparent 14.25rem),
      radial-gradient(40rem 30rem at 50% 50%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
      linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 56px 56px,
      linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 56px 56px,
      var(--dk); }
  .auth-box { padding: 4rem 0; }
}
.auth-box > .mono.accent { display: inline-flex; align-items: center; gap: .55rem; color: var(--fg-2); }
.auth-box > .mono.accent::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.auth-box .h-l { margin-top: .75rem; font-size: 2.2rem; }

/* Área de cliente */
.acc-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }

/* Área de cliente */
.acc-head-blk { padding-bottom: 0; }
.acc-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; }
.acc-title { font-size: clamp(2.4rem, 5.5vw, 4.4rem); }
.acc-mail { margin-top: 1rem; color: var(--fg-3); text-transform: none; letter-spacing: 0; font-size: .82rem; }
.acc-actions { margin-top: 0; }
.acc-stats { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 3rem; border-top: 1px solid var(--line); }
.acc-stats > div { padding: 1.4rem 1rem 1.6rem 0; }
.acc-stats b { display: block; font-size: 1.9rem; font-weight: 650; letter-spacing: -.04em; }
.acc-stats span { display: block; margin-top: .2rem; font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
@media (min-width: 800px) { .acc-stats { grid-template-columns: repeat(4, 1fr); } .acc-stats > div + div { padding-left: 1.5rem; border-left: 1px solid var(--line); } }
.acc-blk { padding-top: clamp(2.5rem, 5vw, 4rem); }
.acc-grid { display: grid; gap: 2rem; }
@media (min-width: 1000px) { .acc-grid { grid-template-columns: 13rem minmax(0, 1fr); gap: 3.5rem; align-items: start; } }
.acc-nav { display: flex; flex-wrap: wrap; gap: .35rem; }
.acc-nav a { padding: .45rem .85rem; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); font-size: .86rem; color: var(--fg-2); }
.acc-nav a:hover { color: var(--fg); border-color: var(--fg); }
.acc-logout { display: none; }
@media (min-width: 1000px) {
  .acc-nav { position: sticky; top: 6rem; flex-direction: column; gap: .15rem; }
  .acc-nav a { border: 0; background: none; padding: .55rem .75rem; border-radius: 8px; }
  .acc-nav a:hover { background: var(--card); }
  .acc-logout { display: block; margin-top: 1rem; padding: .55rem .75rem; border-top: 1px solid var(--line); }
  .acc-logout .linkbtn { font-size: .86rem; }
}
.acc-main { min-width: 0; }
.acc-sec { scroll-margin-top: 6rem; }
.acc-sec + .acc-sec { margin-top: 3.5rem; }
.acc-sec-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.acc-sec-h .h-l { font-size: 1.6rem; }
.acc-notice { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.5rem; padding: .85rem 1.1rem; border-radius: var(--r-sm); background: color-mix(in srgb, var(--ok) 10%, var(--card)); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); color: #166534; font-size: .92rem; }
.acc-notice .ico { width: 1.1rem; height: 1.1rem; }
.acc-card { margin-bottom: 1.5rem; }
.acc-verify { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; }
.acc-verify .fcard-ico { margin: 0; }
.acc-lic { padding: 1.5rem 1.75rem; }
.acc-lic.is-off { opacity: .75; }
.acc-lic-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.acc-lic-plan { display: flex; align-items: center; gap: .9rem; }
.acc-lic-ico { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.acc-lic-ico .ico { width: 1.3rem; height: 1.3rem; }
.acc-lic-name { font-size: 1.15rem; font-weight: 640; letter-spacing: -.02em; }
.acc-key { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: 1.25rem; padding: .8rem 1rem; border-radius: var(--r-sm); background: var(--paper); }
.acc-key code { font-size: .92rem; letter-spacing: .04em; color: var(--fg); }
.acc-key-sm { margin-top: .6rem; padding: .6rem .85rem; }
.acc-key-sm code { font-size: .84rem; }
.acc-kv { margin-top: 1.25rem; }
.acc-link { color: var(--accent); margin-left: .35rem; }
.acc-install { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.acc-form { padding: 1.5rem; }
.acc-form-btn { align-self: end; }
.acc-note { margin-top: 3rem; text-transform: none; letter-spacing: 0; font-size: .8rem; }
.acc-empty .btns { margin-top: 1.5rem; }

/* Área de cliente hecha con secciones del CMS */
.blk-account_hero { padding: clamp(3.5rem, 8vw, 6rem) 0 0; overflow: hidden; isolation: isolate; }
.blk-account_hero .hero-glow { top: -60%; opacity: .4; }
.acc-wrap { max-width: var(--wrap); }
.acc-links { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: 1rem 0 1.4rem; border-top: 1px solid var(--line); }
.acc-stats + .acc-links { border-top: 1px solid var(--line); }
.acc-links a { padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--line-2); font-size: .86rem; color: var(--fg-2); }
.acc-links a:hover { color: var(--fg); border-color: var(--fg); }
.acc-out { margin-left: auto; background: none; border: 0; cursor: pointer; font: inherit; font-size: .86rem; color: var(--fg-3); padding: .45rem .5rem; }
.acc-out:hover { color: var(--accent); }
.acc-links form { margin-left: auto; }
.acc-demo { display: inline-block; margin-bottom: 1.5rem; padding: .4rem .8rem; border-radius: 8px; background: #f59e0b; color: #111; text-transform: none; letter-spacing: 0; font-size: .78rem; }
.acc-intro { margin: -.5rem 0 1.25rem; max-width: 42rem; }
.blk-account_licenses, .blk-account_tickets, .blk-account_billing, .blk-account_security, .blk-account_password { --sp: clamp(2.5rem, 5vw, 3.5rem); }
.blk-account_licenses .acc-sec-h .h-l, .blk-account_tickets .h-l, .blk-account_billing .h-l, .blk-account_password .h-l { font-size: 1.6rem; }
.blk-account_hero .acc-notice { margin: 1.5rem 0 0; }

/* Verificación en dos pasos del cliente */
input.code-input { width: 16rem; max-width: 100%; font-family: var(--mono); font-size: 1rem; letter-spacing: .12em; }
.tf-intro { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.tf-setup > summary { list-style: none; display: inline-flex; }
.tf-setup > summary::-webkit-details-marker { display: none; }
.tf-setup[open] > summary { display: none; }
.tf-steps { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 760px) { .tf-steps { grid-template-columns: auto 1fr; } }
.tf-qr { display: inline-block; padding: .9rem; border-radius: 12px; background: #fff; border: 1px solid var(--line); line-height: 0; }
.tf-steps ol { display: grid; gap: .9rem; padding-left: 1.2rem; list-style: decimal; color: var(--fg-2); }
.tf-steps li::marker { color: var(--accent); font-weight: 650; }
.tf-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .6rem; }
.tf-actions { display: grid; gap: .5rem; }
.tf-codes pre { columns: 2; max-width: 26rem; }

/* Antiguos bloques (por compatibilidad) */
.cms-section { padding: 4rem 0; border-top: 1px solid var(--line); }

/* ── Botón del administrador ── */
.adminpill { position: fixed; z-index: 90; right: 1rem; bottom: 1rem; display: flex; align-items: center; gap: .25rem; padding: .3rem; border-radius: 999px; background: #111; color: #fff; box-shadow: 0 12px 40px -8px rgba(0,0,0,.5); }
.adminpill a, .adminpill button { display: inline-flex; align-items: center; gap: .45rem; border: 0; background: none; color: inherit; cursor: pointer; font-size: .84rem; font-weight: 560; padding: .55rem .95rem; border-radius: 999px; }
.adminpill-main { background: var(--accent) !important; }
.adminpill-main svg { width: 1rem; height: 1rem; }
.adminpill-sub { color: rgba(255,255,255,.7) !important; }
.adminpill-sub:hover { color: #fff !important; }
.tedit { position: fixed; z-index: 120; top: 0; right: 0; bottom: 0; width: min(30rem, 100vw); display: flex; flex-direction: column; background: #fff; color: #111; box-shadow: -20px 0 60px rgba(0,0,0,.2); }
.tedit[hidden] { display: none; }
.tedit-head { display: flex; gap: .6rem; align-items: center; padding: 1rem; border-bottom: 1px solid #eee; }
.tedit-head input { flex: 1; min-height: 2.3rem; }
.tedit-x { border: 0; background: none; font-size: 1.5rem; cursor: pointer; color: #777; }
.tedit-body { flex: 1; overflow: auto; padding: 1rem; }
.tedit-row { padding: .75rem 0; border-bottom: 1px solid #f0f0f0; }
.tedit-row code { display: block; font-size: .68rem; color: #999; word-break: break-all; }
.tedit-row label { display: block; margin-top: .4rem; font-size: .62rem; color: #aaa; font-family: var(--mono); }
.tedit-row input, .tedit-row textarea { min-height: 2.2rem; font-size: .86rem; }
.tedit-foot { position: sticky; bottom: -1rem; background: #fff; padding: .75rem 0; }
.tedit-foot .btn { width: 100%; }

/* ── Aparición al hacer scroll ── */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
  .tally-screen { background: var(--accent) !important; }
  .tally-screen .t-pgm { opacity: 1 !important; } .tally-screen .t-pvw { opacity: 0 !important; }
}

/* ── Impresión (facturas) ── */
@media print {
  .topbar, .footer, .adminpill, .announce, .no-print { display: none !important; }
  body, .is-app main { background: #fff; }
}

/* Mantenimiento: página sola, sin menú ni pie */
.is-bare .auth-wrap, .is-bare .auth-wrap::before { min-height: 100vh; }
.maint-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2.5rem; }
.maint-top .brand { color: var(--fg); }
.maint-top .langs { background: var(--card); border: 1px solid var(--line); }
.maint-top .langs a { color: var(--fg-3); }
.maint-top .langs a.on { background: var(--fg); color: var(--bg); }
.maint-text { font-size: 1.02rem; line-height: 1.6; }
.maint-mail a { color: var(--fg-3); } .maint-mail a:hover { color: var(--accent); }
.maint-strip { background: #18181b; color: #fff; font-size: .84rem; }
.maint-strip .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; padding-top: .55rem; padding-bottom: .55rem; }
.maint-strip p { display: flex; align-items: center; gap: .6rem; color: rgba(255,255,255,.8); }
.maint-strip strong { color: #fff; }
.maint-strip a { font-weight: 600; color: #fff; text-decoration: underline; }

/* Add-ons: precio en la página de planes y compra desde Mi cuenta */
.addon:has(.addon-price) { grid-template-columns: auto 1fr auto; }
.addon-price { display: grid; justify-items: end; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.addon-price em { font-style: normal; font-family: var(--mono); font-size: .62rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.acc-addons-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; padding: .85rem 1rem; border-radius: var(--r-sm); background: var(--paper); font-size: .88rem; color: var(--fg-2); }
.shop-wrap { max-width: 64rem; }
.shop { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 900px) { .shop { grid-template-columns: minmax(0, 1fr) 20rem; } .shop-sum { position: sticky; top: 6rem; } }
.shop-list { display: grid; gap: .6rem; }
.shop-all { display: flex; align-items: center; gap: .75rem; padding: .9rem 1.1rem; border-radius: var(--r); border: 1px dashed var(--line-2); cursor: pointer; font-weight: 600; }
.shop-all input, .shop-item input { width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--accent); }
.shop-save { display: block; font-style: normal; font-weight: 500; font-size: .82rem; color: var(--accent); }
.shop-item { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 1rem; padding: 1rem 1.15rem; border-radius: var(--r); border: 1px solid var(--line); background: var(--card); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.shop-item:hover { border-color: var(--line-2); }
.shop-item.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.shop-txt { display: grid; gap: .1rem; }
.shop-txt strong { font-weight: 600; }
.shop-txt em { font-style: normal; font-size: .84rem; color: var(--fg-2); }
.shop-price { font-weight: 650; white-space: nowrap; }
.shop-sum { padding: 1.5rem; }
.shop-total { margin-top: .3rem; font-size: 2.2rem; font-weight: 700; letter-spacing: -.03em; }
.shop-packnote { color: var(--accent); }
@media (max-width: 560px) { .shop-item { grid-template-columns: auto 1fr auto; } .shop-item .addon-ico { display: none; } }