/* Zona Radio. Tokens del Manual de Identidad 2026 (secciones 3, 4, 6.4, 7.1 y 12.1). */
@font-face{font-family:"Inter";src:url("fonts/inter-latin.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fonts/montserrat-latin.woff2") format("woff2");font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono-latin.woff2") format("woff2");font-weight:400 500;font-style:normal;font-display:swap}

:root{
  --zr-navy:#092B4C;
  --zr-navy-dark:#061D33;
  --zr-navy-panel:#0F3659;
  --zr-blue:#12466D;
  --zr-orange:#FF7A00;
  --zr-orange-hover:#E96F00;
  --zr-bg:#F6F8FA;
  --zr-border:#DCE4EA;
  --zr-text:#1E2933;
  --zr-text-2:rgba(30,41,51,.78);
  --zr-ok:#16875A;
  --zr-warn:#A85B00;
  --zr-err:#B42318;
  --zr-info:#1769AA;
  --zr-radius-control:8px;
  --zr-radius-card:12px;
  --font-ui:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-title:"Montserrat","Inter",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-1:160ms;
  --dur-2:280ms;
  --dur-3:640ms;
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;font:400 16px/1.6 var(--font-ui);color:var(--zr-text);background:#fff;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg,canvas{display:block;max-width:100%}
h1,h2,h3,p,ol,ul,figure,legend{margin:0;padding:0}
ol,ul{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--zr-blue)}
:focus-visible{outline:2px solid var(--foco,var(--zr-navy));outline-offset:2px;border-radius:2px}
h2{font:700 clamp(1.75rem,1.5rem + 1vw,2rem)/1.2 var(--font-title);letter-spacing:-.01em;color:var(--zr-navy)}
h3{font:600 clamp(1.25rem,1.15rem + .4vw,1.5rem)/1.3 var(--font-title);color:var(--zr-navy)}
.contenedor{width:min(100% - 32px,1240px);margin-inline:auto}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.saltar{position:fixed;left:16px;top:-64px;z-index:100;padding:12px 16px;border-radius:var(--zr-radius-control);background:var(--zr-navy);color:#fff;transition:top var(--dur-1)}
.saltar:focus{top:12px}
.lead{margin-top:16px;max-width:62ch;color:var(--zr-text-2)}
.icono{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:12px;font:500 14px/1.2 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--zr-blue)}
.eyebrow--oscuro{color:var(--zr-orange)}
.ondas{width:16px;height:16px;flex:none;fill:none;stroke:var(--zr-orange);stroke-width:2}
.ondas circle{fill:var(--zr-orange);stroke:none}
.seccion{position:relative;padding-block:64px;overflow:clip}
.seccion--suave{background:var(--zr-bg)}
.seccion--azul{background:var(--zr-navy);color:#fff;--foco:var(--zr-orange)}
.seccion--azul h2{color:#fff}
.seccion--azul .lead{color:rgba(255,255,255,.82)}
.cabeza{position:relative;max-width:720px;margin-bottom:48px}
.nota{margin-top:16px;font-size:14px;color:rgba(255,255,255,.72)}
.nota--clara{margin-top:24px;color:var(--zr-text-2)}
.lista{margin-top:16px}
.lista li{display:flex;gap:8px;align-items:flex-start;margin-top:12px}
.lista .icono{margin-top:2px;color:var(--zr-orange)}
.punto-aire{position:relative;display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;background:var(--zr-orange)}
.punto-aire::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--zr-orange);animation:pulso 1.8s var(--ease-out) infinite}
@keyframes pulso{to{transform:scale(3.2);opacity:0}}
@media(min-width:768px){
  .contenedor{width:min(100% - 64px,1240px)}
  .seccion{padding-block:96px}
}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border:1px solid transparent;border-radius:var(--zr-radius-control);font:600 16px/1.2 var(--font-ui);text-decoration:none;cursor:pointer;transition:background-color var(--dur-1),border-color var(--dur-1),transform var(--dur-1) var(--ease-out)}
.btn:active{transform:scale(.98)}
.btn .icono{transition:transform var(--dur-2) var(--ease-out)}
.btn:hover .icono{transform:translateX(4px)}
.btn--primario{background:var(--zr-orange);color:var(--zr-navy)}
.btn--primario:hover{background:var(--zr-orange-hover);color:var(--zr-navy)}
.btn--secundario{background:var(--zr-navy);border-color:rgba(255,255,255,.32);color:#fff}
.btn--secundario:hover{background:var(--zr-navy-panel);color:#fff}
.btn--chico{min-height:44px;padding-inline:16px;white-space:nowrap}
.icono-btn{display:inline-grid;place-items:center;width:44px;height:44px;border:0;border-radius:var(--zr-radius-control);background:transparent;color:var(--zr-navy);cursor:pointer;transition:background-color var(--dur-1)}
.icono-btn:hover{background:var(--zr-bg)}

/* Encabezado */
.progreso{position:fixed;inset:0 0 auto;z-index:60;height:3px;background:var(--zr-orange);transform:scaleX(0);transform-origin:left}
.cabecera{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--zr-border);transition:transform var(--dur-2) var(--ease-out)}
.cabecera--oculta{transform:translateY(-100%)}
.cabecera__fila{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
.cabecera__logo{flex:none;display:block}
.cabecera__logo img{width:203px;height:44px}
.cabecera__acciones{display:flex;align-items:center;gap:4px}
.cabecera__cta,.nav{display:none}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;color:var(--zr-navy);font-weight:500;text-decoration:none}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:3px;background:var(--zr-orange);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-2) var(--ease-out)}
.nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1)}
.pausa-off,.menu-c{display:none}
.quieto .pausa-on{display:none}
.quieto .pausa-off{display:block}
[aria-expanded="true"] .menu-a{display:none}
[aria-expanded="true"] .menu-c{display:block}
.menu-movil{position:absolute;inset:100% 0 auto;display:grid;gap:4px;padding:8px 16px 16px;background:#fff;border-bottom:1px solid var(--zr-border)}
.menu-movil a:not(.btn){display:flex;align-items:center;min-height:48px;color:var(--zr-navy);font-weight:500;text-decoration:none}
/* 180 px es el mínimo del logotipo completo en digital (manual, sección 2.3) */
@media(max-width:359.98px){.cabecera__fila{gap:8px}.cabecera__logo img{width:180px;height:auto}}
@media(min-width:1024px){
  .nav{display:flex;gap:32px}
  .cabecera__cta{display:inline-flex;margin-left:8px}
  .cabecera__menu,.menu-movil{display:none!important}
}

/* Portada */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:clamp(640px,calc(100svh - 72px),880px);overflow:hidden;color:#fff;--foco:var(--zr-orange);background:radial-gradient(70% 80% at 74% 42%,var(--zr-navy-panel) 0%,var(--zr-navy) 42%,var(--zr-navy-dark) 82%)}
.hero__lienzo{position:absolute;inset:0;z-index:-1;width:100%;height:100%}
.hero__rejilla{flex:1;display:grid;gap:32px;align-items:center;padding-block:48px 32px}
.hero__texto{max-width:640px}
.hero__titulo{font:700 clamp(2.25rem,1.35rem + 3vw,3.5rem)/1.14 var(--font-title);letter-spacing:-.015em}
.pal{position:relative;display:inline-block;color:var(--zr-orange);transition:color var(--dur-2)}
.pal::after{content:"";position:absolute;left:0;right:0;bottom:-.04em;height:3px;background:var(--zr-orange);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.anima .pal{color:#fff}
.anima .pal.activa{color:var(--zr-orange)}
.anima .pal.activa::after{transform:scaleX(1)}
.hero__lead{margin-top:24px;max-width:56ch;font-size:clamp(1rem,.92rem + .4vw,1.25rem);line-height:1.5;color:rgba(255,255,255,.84)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.palabra{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.js .palabra__in{display:inline-block;transform:translateY(112%);transition:transform .9s var(--ease-out);transition-delay:calc(var(--i)*60ms)}
.listo .palabra__in{transform:none}
.js [data-entra]{opacity:0;transform:translateY(16px);transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out);transition-delay:calc(var(--i,0)*60ms)}
.js .listo [data-entra]{opacity:1;transform:none}
.hero__escena{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.hero__simbolo{flex:0 0 100%;height:176px;object-fit:contain;margin-bottom:16px}
.js .hero__simbolo{opacity:0;transition:opacity 1s var(--ease-out) .25s}
.js .listo .hero__simbolo{opacity:1}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--zr-radius-control);background:#fff;color:var(--zr-text);font:500 13px/1.2 var(--font-ui);white-space:nowrap}
.chip b{font-weight:600}
.chip__rotulo{font:500 12px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--zr-navy)}
.chip .mono{color:var(--zr-navy)}
.js .chip{opacity:0;transition:opacity var(--dur-3) var(--ease-out) 1s}
.js .listo .chip{opacity:1}
.tono-ok{color:var(--zr-ok)}
.tono-info{color:var(--zr-info)}
.ticker{overflow:hidden;padding-block:12px;border-top:1px solid rgba(255,255,255,.14)}
.ticker__pista{display:flex;width:max-content;animation:ticker 52s linear infinite}
.ticker ul{display:flex;align-items:center;flex:none}
.ticker li{display:flex;align-items:center;font:500 13px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:rgba(255,255,255,.76)}
.ticker li::after{content:"";width:5px;height:5px;margin-inline:24px;border-radius:50%;background:var(--zr-orange)}
@keyframes ticker{to{transform:translateX(-50%)}}
@keyframes flota{50%{transform:translateY(-8px)}}
@media(min-width:960px){
  .hero__rejilla{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;padding-block:64px}
  .hero__escena{display:block;height:clamp(420px,44vw,560px)}
  .hero__simbolo{position:absolute;left:50%;top:48%;flex:none;width:min(78%,440px);height:auto;margin:0;transform:translate(-50%,-50%)}
  .chip{position:absolute;animation:flota 7s ease-in-out infinite}
  .chip--aire{top:7%;left:0}
  .chip--enlace{bottom:9%;left:4%;animation-delay:-2.4s}
  .chip--respaldo{bottom:13%;right:0;animation-delay:-4.6s}
}

/* Entradas al desplazar */
.js [data-revela]{opacity:0;transform:translateY(24px);transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out);transition-delay:calc(var(--i,0)*70ms)}
.js [data-revela].visible{opacity:1;transform:none}
.js .icono--trazo path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease-out) .15s}
.js .visible .icono--trazo path,.js .visible.icono--trazo path{stroke-dashoffset:0}

/* Arcos: motivo gráfico, siempre por debajo del logotipo */
.arcos{position:absolute;fill:none;stroke-width:14;pointer-events:none}
.js .arcos path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease-out)}
.js .arcos path:nth-child(2){transition-delay:.15s}
.js .arcos path:nth-child(3){transition-delay:.3s}
.js .arcos.visible path{stroke-dashoffset:0}
.arcos--cadena{top:-24px;right:-48px;width:320px;height:320px;stroke:rgba(255,255,255,.06)}
.arcos--esquina{top:-16px;right:-32px;width:260px;height:260px;stroke:var(--zr-border)}
.arcos--contacto{left:-72px;bottom:-72px;width:300px;height:300px;stroke:var(--zr-bg)}

/* Lo que resolvemos */
.retos{display:grid;gap:32px}
.medidor{display:none}
.retos__pista{position:relative;padding-left:32px}
.retos__linea{position:absolute;left:7px;top:16px;bottom:16px;width:2px;background:var(--zr-border)}
.retos__linea span{display:block;width:100%;height:100%;background:var(--zr-orange);transform:scaleY(0);transform-origin:top}
.reto{position:relative;padding-block:12px}
.reto__nodo{position:absolute;left:-32px;top:44px;width:16px;height:16px;border:2px solid var(--zr-border);border-radius:50%;background:#fff;transition:background-color var(--dur-2),border-color var(--dur-2)}
.reto.alcanzado .reto__nodo{border-color:var(--zr-orange);background:var(--zr-orange)}
.reto.activo .reto__nodo::after{content:"";position:absolute;inset:-2px;border-radius:50%;background:var(--zr-orange);animation:pulso 1.8s var(--ease-out) infinite}
.reto__tarjeta{padding:24px;background:#fff;border:1px solid var(--zr-border);border-radius:var(--zr-radius-card);box-shadow:0 1px 2px rgba(9,43,76,.04)}
.reto__tarjeta>p:last-child{color:var(--zr-text-2)}
.reto__cabeza{display:flex;align-items:center;gap:12px;color:var(--zr-navy)}
.reto__cabeza .icono{width:24px;height:24px}
.reto__frase{margin-block:12px 4px;font:600 16px/1.4 var(--font-title);color:var(--zr-navy)}
.reto.activo .reto__tarjeta{border-color:var(--zr-navy);box-shadow:0 8px 24px -16px rgba(9,43,76,.45)}
.js .reto__tarjeta[data-revela]{transition-property:opacity,transform,border-color,box-shadow}
@media(min-width:960px){
  .retos{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px}
  .retos__fijo{position:sticky;top:112px;align-self:start}
  .medidor{display:flex;align-items:flex-end;gap:24px;margin-top:48px}
  .medidor__barras{display:flex;align-items:flex-end;gap:6px;height:72px}
  .medidor__barras i{width:12px;border-radius:2px;background:var(--zr-border);transition:background-color var(--dur-2)}
  .medidor__barras i:nth-child(1){height:20%}
  .medidor__barras i:nth-child(2){height:40%}
  .medidor__barras i:nth-child(3){height:60%}
  .medidor__barras i:nth-child(4){height:80%}
  .medidor__barras i:nth-child(5){height:100%}
  .medidor__barras i.on{background:var(--zr-orange)}
  .medidor__num{font-size:14px;color:var(--zr-text-2)}
  .medidor__num b{font-weight:500;color:var(--zr-navy)}
  .medidor__nombre{font:600 20px/1.3 var(--font-title);color:var(--zr-navy)}
}

/* Cadena de señal */
.cadena{position:relative;--vertical:1;margin-bottom:32px}
.cadena__lineas{position:absolute;inset:0;width:100%;height:100%;max-width:none;overflow:visible;pointer-events:none}
.tramo__base{fill:none;stroke:rgba(255,255,255,.22);stroke-width:2}
.tramo__flujo{fill:none;stroke:var(--zr-orange);stroke-width:4;stroke-linecap:round;stroke-dasharray:2 8;opacity:0;transition:opacity var(--dur-2);animation:flujo .7s linear infinite}
.tramo__flujo.activo{opacity:1}
@keyframes flujo{to{stroke-dashoffset:-10}}
.cadena__nodos{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 16px}
.nodo{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:12px;background:var(--zr-navy-panel);border:1px solid rgba(255,255,255,.14);border-radius:var(--zr-radius-card);transition:border-color var(--dur-2),box-shadow var(--dur-2)}
.nodo[data-nodo="principal"],.nodo[data-nodo="respaldo"]{grid-column:auto;flex-direction:column;align-items:flex-start}
.nodo[data-nodo="principal"] .pastilla,.nodo[data-nodo="respaldo"] .pastilla{margin-left:0}
.nodo__icono{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:var(--zr-radius-control);background:rgba(255,255,255,.08)}
.nodo__nombre{font-weight:600;line-height:1.3}
.nodo .pastilla{margin-left:auto}
.nodo[data-tono="aire"]{border-color:var(--zr-orange)}
.nodo[data-tono="err"]{border-color:var(--zr-err);box-shadow:0 0 0 2px var(--zr-err);animation:sacude .42s var(--ease-out)}
.nodo[data-tono="warn"]{border-color:var(--zr-warn)}
@keyframes sacude{20%{transform:translateX(-4px)}45%{transform:translateX(4px)}70%{transform:translateX(-2px)}}
.pastilla{display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:2px 8px;border-radius:var(--zr-radius-control);background:#fff;font:500 13px/1.2 var(--font-ui);white-space:nowrap}
.pastilla .icono{width:16px;height:16px}
[data-tono="ok"].pastilla,.aviso[data-tono="ok"]{color:var(--zr-ok)}
[data-tono="espera"].pastilla,.aviso[data-tono="espera"]{color:var(--zr-info)}
[data-tono="warn"].pastilla,.aviso[data-tono="warn"]{color:var(--zr-warn)}
[data-tono="err"].pastilla,.aviso[data-tono="err"]{color:var(--zr-err)}
[data-tono="aire"].pastilla{color:var(--zr-navy)}
[data-tono="aire"].pastilla .icono{color:var(--zr-orange)}
.cadena__mando{display:grid;gap:16px}
.aviso{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;background:#fff;border-left:3px solid currentColor;border-radius:var(--zr-radius-control)}
.aviso .icono{margin-top:2px}
.aviso strong{display:block;font-weight:600}
.aviso span{display:block;font-size:14px;color:var(--zr-text)}
.bitacora{min-height:88px;padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:var(--zr-radius-control);background:rgba(6,29,51,.6);font-size:13px;line-height:1.6;color:rgba(255,255,255,.86)}
.bitacora time{margin-right:8px;color:var(--zr-orange)}
.anima .bitacora li:first-child{animation:entra-renglon var(--dur-2) var(--ease-out)}
@keyframes entra-renglon{from{opacity:0;transform:translateY(-6px)}}
@media(min-width:960px){
  .cadena__mando{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);align-items:stretch}
  .cadena__mando .btn{align-self:center}
}
@media(min-width:1120px){
  .cadena{--vertical:0}
  .cadena__nodos{grid-template-columns:repeat(6,minmax(0,1fr));gap:48px clamp(32px,4.4vw,64px)}
  .nodo,.nodo[data-nodo="principal"],.nodo[data-nodo="respaldo"]{flex-direction:column;align-items:flex-start;padding:16px}
  .nodo .pastilla{margin-left:0}
  .nodo[data-nodo="estudio"]{grid-area:1/1}
  .nodo[data-nodo="consola"]{grid-area:1/2}
  .nodo[data-nodo="reproduccion"]{grid-area:1/3}
  .nodo[data-nodo="principal"]{grid-area:1/4}
  .nodo[data-nodo="respaldo"]{grid-area:2/4}
  .nodo[data-nodo="transmisor"]{grid-area:1/5}
  .nodo[data-nodo="antena"]{grid-area:1/6}
}

/* Soluciones */
.rejilla-3{position:relative;display:grid;gap:24px}
.rejilla-3>li{display:flex}
.tarjeta{position:relative;overflow:hidden;width:100%;padding:32px;background:#fff;border:1px solid var(--zr-border);border-radius:var(--zr-radius-card);box-shadow:0 1px 2px rgba(9,43,76,.04);transition:transform var(--dur-2) var(--ease-out),border-color var(--dur-2),box-shadow var(--dur-2)}
.tarjeta::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(255,122,0,.1),transparent 70%);opacity:0;transition:opacity var(--dur-2)}
.tarjeta h3,.tarjeta p,.tarjeta__icono{position:relative}
.tarjeta p{margin-top:8px;color:var(--zr-text-2)}
.tarjeta__icono{display:grid;place-items:center;width:48px;height:48px;margin-bottom:24px;border-radius:var(--zr-radius-control);background:var(--zr-bg);color:var(--zr-navy);transition:background-color var(--dur-2),color var(--dur-2)}
.tarjeta__icono .icono{width:24px;height:24px}
.tarjeta:hover{transform:translateY(-4px);border-color:var(--zr-orange);box-shadow:0 12px 24px -16px rgba(9,43,76,.4)}
.tarjeta:hover::before{opacity:1}
.tarjeta:hover .tarjeta__icono{background:var(--zr-navy);color:var(--zr-orange)}
@media(min-width:640px){.rejilla-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.rejilla-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Software */
.pestanas{position:relative;display:flex;gap:32px;margin-bottom:32px;border-bottom:1px solid var(--zr-border)}
.pestana{min-height:48px;padding:12px 0;border:0;background:none;font-weight:500;color:var(--zr-text-2);cursor:pointer;transition:color var(--dur-1)}
.pestana:hover{color:var(--zr-navy)}
.pestana[aria-selected="true"]{font-weight:600;color:var(--zr-navy)}
.pestanas__indicador{position:absolute;left:0;bottom:-1px;width:var(--w,0);height:3px;background:var(--zr-orange);transform:translateX(var(--x,0));transition:transform var(--dur-2) var(--ease-out),width var(--dur-2) var(--ease-out)}
.panel:focus-visible{outline-offset:8px}
.panel.entra{animation:entra-panel .45s var(--ease-out)}
@keyframes entra-panel{from{opacity:0;transform:translateY(12px)}}
.producto{display:grid;gap:32px}
.producto__texto p{margin-top:8px;color:var(--zr-text-2)}
@media(min-width:1024px){.producto{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;align-items:center}}
.ventana{overflow:hidden;border:1px solid var(--zr-border);border-radius:var(--zr-radius-card);background:var(--zr-bg);font-size:13px;line-height:1.4;box-shadow:0 24px 48px -32px rgba(9,43,76,.5);user-select:none}
.app__barra{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--zr-navy);color:#fff}
.app__barra img{width:32px;height:32px;flex:none}
.app__nombre{font-weight:500;font-size:14px}
.app__nombre b{font-weight:600}
.app__barra .pastilla{margin-left:auto}
.app__usuario{display:none;align-items:center;gap:4px}
.app__usuario .icono{width:16px;height:16px}
.app__cuerpo{display:flex;min-height:392px}
.app__lado{display:none}
.app__trabajo{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-content:start;padding:12px}
.app__sync{color:var(--zr-text-2)}
.app__sync time{color:var(--zr-navy)}
.salud{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.salud__tarjeta{padding:12px;background:#fff;border:1px solid var(--zr-border);border-radius:var(--zr-radius-card);transition:border-color var(--dur-2)}
.salud__tarjeta.atencion{border-color:var(--zr-warn)}
.salud__fila{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px}
.salud__nombre{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--zr-navy)}
.salud__nombre .icono{width:16px;height:16px}
.salud__tarjeta .pastilla{padding-inline:0}
.salud__linea{width:100%;height:32px;margin-top:8px;fill:none;stroke:var(--zr-blue);stroke-width:1.5}
.salud__linea polyline{vector-effect:non-scaling-stroke}
.eventos{padding:12px;background:#fff;border:1px solid var(--zr-border);border-radius:var(--zr-radius-card)}
.eventos__titulo{margin-bottom:4px;font-weight:600;color:var(--zr-navy)}
.eventos li{display:flex;align-items:center;gap:8px;padding-block:4px}
.eventos li .icono{width:16px;height:16px}
.eventos li[data-tono="ok"] .icono{color:var(--zr-ok)}
.eventos li[data-tono="espera"] .icono{color:var(--zr-info)}
.eventos li[data-tono="warn"] .icono{color:var(--zr-warn)}
.eventos time{font-size:12px;color:var(--zr-text-2)}
.eventos__texto{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.anima .eventos li:first-child{animation:entra-renglon var(--dur-2) var(--ease-out)}
@media(min-width:640px){
  .app__lado{display:flex;flex-direction:column;gap:4px;width:136px;flex:none;padding:8px;background:#fff;border-right:1px solid var(--zr-border)}
  .app__lado span{position:relative;display:flex;align-items:center;gap:8px;padding:8px;border-radius:var(--zr-radius-control);color:var(--zr-text-2)}
  .app__lado .icono{width:16px;height:16px}
  .app__lado .activo{background:var(--zr-bg);font-weight:600;color:var(--zr-navy)}
  .app__lado .activo::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--zr-orange)}
  .app__usuario{display:inline-flex}
}
.ventana--oscura{background:var(--zr-navy-dark);border-color:var(--zr-navy)}
.cabina{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:12px;color:#fff}
.aire,.cola{padding:16px;background:var(--zr-navy);border:1px solid rgba(255,255,255,.1);border-radius:var(--zr-radius-card)}
.aire__rotulo{display:flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--zr-orange)}
.aire__titulo{margin-top:4px;font:700 clamp(18px,1rem + .6vw,24px)/1.25 var(--font-title)}
.aire__tiempos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
.aire__tiempos span{display:block;font-size:12px;color:rgba(255,255,255,.76)}
.aire__tiempos b{font-weight:500;font-size:clamp(20px,1rem + .9vw,28px);line-height:1.2}
.aire__resta{color:var(--zr-orange)}
.onda{display:flex;align-items:center;gap:2px;height:56px;margin-top:12px}
.onda i{flex:1 1 0;min-width:0;height:var(--h);border-radius:1px;background:rgba(255,255,255,.26);transition:background-color var(--dur-1)}
.onda i.pasado{background:var(--zr-orange)}
.aire__pie{display:grid;gap:12px;margin-top:12px}
.transporte{display:flex;gap:8px}
.transporte span{flex:1;display:grid;justify-items:center;gap:2px;padding:8px 4px;border-radius:var(--zr-radius-control);background:var(--zr-navy-panel);font-size:12px}
.transporte .activo{background:var(--zr-orange);color:var(--zr-navy)}
.vu{display:grid;gap:6px;align-content:center}
.vu__canal{display:flex;align-items:center;gap:8px;font-size:12px}
.vu__barra{position:relative;flex:1;height:10px;overflow:hidden;border-radius:2px;background:linear-gradient(90deg,var(--zr-ok) 0 70%,var(--zr-warn) 70% 88%,var(--zr-err) 88%)}
.vu__barra i{position:absolute;inset:0;background:var(--zr-navy-panel);transform:scaleX(.45);transform-origin:right}
.vu__barra::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 4px,var(--zr-navy) 4px 6px)}
.cola__titulo{margin-bottom:8px;font-weight:600}
.cola li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:8px;align-items:center;padding-block:8px;border-top:1px solid rgba(255,255,255,.1)}
.cola__pos,.cola__dur{font:400 12px var(--font-mono);color:rgba(255,255,255,.76)}
.cola__tit{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cola__est{display:block;font-size:12px;color:rgba(255,255,255,.76)}
.cola .siguiente .cola__est{color:var(--zr-orange)}
.cola .emitido{opacity:.66}
.anima .cola li.entra{animation:entra-renglon var(--dur-2) var(--ease-out)}
@media(min-width:720px){.cabina{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}}
@media(min-width:1120px){.aire__pie{grid-template-columns:auto minmax(0,1fr);gap:16px}.transporte span{min-width:72px}}

/* Servicios */
.pasos__marco{position:relative}
.pasos__linea{display:none}
.pasos{position:relative;display:grid;gap:24px}
.paso{display:flex;align-items:flex-start;gap:16px}
.paso h3{font-size:20px}
.paso p{margin-top:4px;color:var(--zr-text-2)}
.paso__icono{position:relative;display:grid;place-items:center;flex:none;width:56px;height:56px;border:1px solid var(--zr-border);border-radius:var(--zr-radius-card);background:#fff;color:var(--zr-navy);transition:background-color var(--dur-2),color var(--dur-2),border-color var(--dur-2)}
.paso__icono .icono{width:24px;height:24px}
.paso.activo .paso__icono{background:var(--zr-navy);border-color:var(--zr-navy);color:#fff}
.paso.actual .paso__icono{color:var(--zr-orange)}
.anima .paso.actual .paso__icono::after{content:"";position:absolute;inset:-1px;border:2px solid var(--zr-orange);border-radius:var(--zr-radius-card);animation:anillo 1.8s var(--ease-out) infinite}
@keyframes anillo{to{transform:scale(1.35);opacity:0}}
@media(min-width:960px){
  .pasos{grid-template-columns:repeat(5,minmax(0,1fr))}
  .paso{flex-direction:column}
  .pasos__linea{display:block;position:absolute;top:27px;left:28px;right:calc(20% - 47px);height:2px;background:var(--zr-border)}
  .pasos__linea i{position:absolute;inset:0;background:var(--zr-orange);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-in-out)}
}

/* Contacto */
.contacto{position:relative;display:grid;gap:32px}
.formulario{padding:24px;background:#fff;border:1px solid var(--zr-border);border-radius:var(--zr-radius-card);box-shadow:0 24px 48px -36px rgba(9,43,76,.4)}
.alerta{display:flex;gap:12px;align-items:flex-start;margin-bottom:24px;padding:12px 16px;background:var(--zr-bg);border:1px solid var(--zr-border);border-left:3px solid var(--zr-info);border-radius:var(--zr-radius-control)}
.alerta .icono{margin-top:2px;color:var(--zr-info)}
.alerta strong{font-weight:600}
.alerta p{font-size:14px;color:var(--zr-text-2)}
fieldset{min-width:0;margin:0;padding:0;border:0}
.campos{display:grid;gap:16px;margin-bottom:24px}
.campo label{display:block;margin-bottom:4px;font-size:14px;font-weight:500;color:var(--zr-navy)}
.campo input,.campo select,.campo textarea{display:block;width:100%;min-height:48px;padding:12px;background:#fff;border:1px solid var(--zr-border);border-radius:var(--zr-radius-control)}
fieldset:disabled input,fieldset:disabled select,fieldset:disabled textarea{background:var(--zr-bg);cursor:not-allowed}
fieldset:disabled .btn{background:#FFD9B3;cursor:not-allowed}
fieldset:disabled .btn:hover .icono{transform:none}
@media(min-width:640px){.campos{grid-template-columns:repeat(2,minmax(0,1fr))}.campo--ancho{grid-column:1/-1}}
@media(min-width:960px){.contacto{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}.formulario{padding:32px}}

/* Pie */
.pie{padding-block:48px 24px;background:var(--zr-navy-dark);color:#fff;--foco:var(--zr-orange)}
.pie__fila{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px}
.pie__fila img{width:200px;height:auto}
.pie__nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.pie__nav a{display:inline-flex;align-items:center;min-height:44px;color:#fff;text-decoration:none}
.pie__nav a:hover{text-decoration:underline;text-decoration-color:var(--zr-orange);text-decoration-thickness:2px;text-underline-offset:4px}
.pie__legal{margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.76)}
.pie__legal small{font-size:14px}

/* Pausa manual y movimiento reducido (manual, sección 13) */
.quieto *,.quieto *::before,.quieto *::after{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-entra],.js [data-revela]{opacity:1;transform:none}
  .js .chip,.js .hero__simbolo{opacity:1}
  .js .icono--trazo path,.js .arcos path{stroke-dashoffset:0}
  .tramo__flujo{stroke-dasharray:none}
}