/* LS Strategy · sitio v10 · estilos de la PRIMERA PANTALLA (tokens, base y portada)
   Este archivo NO se pide aparte: `npm run sincronizar` lo copia dentro de un <style> en el <head> de
   index.html (junto con css/fuentes.css), para que la portada se pinte sin esperar a otra descarga.
   El resto de los estilos está en css/estilos.css, que se carga sin bloquear el pintado.
   Marca: tokens del :root de la v9 (marino profundo, cobalto, ámbar de señal; Bricolage Grotesque,
   IBM Plex Sans y Plex Mono). Todo el movimiento se apaga con «reducir movimiento». */
:root{
  --bg:#F4F6F9; --alt:#EBEFF5; --surface:#FFFFFF; --ink:#0E1B2E; --muted:#556376; --line:#D3DBE5;
  --accent:#1B4FD6; --on-accent:#FFFFFF; --soft:#E4ECFD; --ok:#16793A; --bad:#B42318; --amber:#B86A00;
  --warn-bg:#FFF2CC; --warn-ink:#6B4A00;
  /* Texto ámbar sobre fondo claro: el ámbar de la v9 (#B86A00) da 4,1:1 sobre blanco; este da 5,6:1 (AA).
     El ámbar de la v9 se mantiene en bordes, puntos y en el tema oscuro. */
  --amber-texto:#995800;
  /* Texto verde sobre su fondo verde claro: el verde de la v9 (#16793A) da 4,3:1 sobre #D9E7E2 (etiqueta
     «Pagado» del cobro); este da 5,3:1 (AA). El verde de la v9 se mantiene en bordes, puntos y tema oscuro. */
  --ok-texto:#126A33;
  --band:#0A1B3D; --band-fg:#EEF3FF; --band-muted:#A9BBE0; --band-line:#223A6B; --band-acc:#7DA6FF;
  --band-ok:#4ADE80; --band-bad:#FF8A7A; --band-amber:#FFB938;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --text:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --vh-paso:55;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0A1220; --alt:#0E192B; --surface:#132036; --ink:#E8EEF6; --muted:#9DB0C6; --line:#243652;
  --accent:#7DA6FF; --on-accent:#0A1220; --soft:#16294B; --ok:#4ADE80; --bad:#FF8A7A; --amber:#FFB938;
  --warn-bg:#3A2E0A; --warn-ink:#F5D98A; --amber-texto:#FFB938; --ok-texto:#4ADE80; --band:#071330; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0A1220; --alt:#0E192B; --surface:#132036; --ink:#E8EEF6; --muted:#9DB0C6; --line:#243652;
  --accent:#7DA6FF; --on-accent:#0A1220; --soft:#16294B; --ok:#4ADE80; --bad:#FF8A7A; --amber:#FFB938;
  --warn-bg:#3A2E0A; --warn-ink:#F5D98A; --amber-texto:#FFB938; --ok-texto:#4ADE80; --band:#071330; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--text);font-size:16px;line-height:1.5;overflow-x:clip}
@media(min-width:760px){body{font-size:17px;line-height:1.6}}
.in{max-width:1120px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
/* h2, h3 y h4 están en css/estilos.css: aquí solo el h1, para no pedir fuentes que la portada no usa. */
h1{font-family:var(--display);line-height:1.08;text-wrap:balance;margin:0;font-size:clamp(2.3rem,9.6vw,4.4rem);font-weight:800;letter-spacing:-0.03em}
p{margin:0}
a{color:var(--accent)}
img{max-width:100%}
/* Anillo de foco (encargo 007, parte E.2): el acento en las zonas claras (#1B4FD6 en tema claro, #7DA6FF en
   oscuro) y el ámbar de la banda (#FFB938, 9,9:1 sobre el marino) en la portada y en las zonas con fondo --band,
   donde el acento claro no llega a 3:1. */
:root{--foco:var(--accent)}
.portada,.recorrido,.band,.dash,.scene,.priv-cab,body.error{--foco:var(--band-amber)}
:focus-visible{outline:3px solid var(--foco);outline-offset:3px;border-radius:4px}
/* Sobre la foto de la portada el fondo cambia: bajo el anillo va un halo marino, así el ámbar siempre queda sobre
   marino (9,9:1), aunque detrás esté la parte clara de la imagen. */
/* (Solo en botones y logo: en el enlace de la nota el halo taparía las letras vecinas; la nota va siempre sobre
   la zona oscura.) */
.portada .btn:focus-visible,.portada .marca:focus-visible{box-shadow:0 0 0 7px rgba(7,19,48,.92)}
/* Enlaces de texto sobre fondo oscuro (encargo 007, parte D): claros y subrayados. El acento #1B4FD6 sobre
   #0A1B3D da 2,54:1 y no sirve. */
.portada a.priv-enlace,.recorrido a.priv-enlace,.band a:not(.btn),body.error a:not(.btn){color:var(--band-fg);text-decoration:underline}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.label{font-family:var(--mono);font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:8px;text-align:center;
  background:var(--accent);color:var(--on-accent);font-weight:600;text-decoration:none;border:2px solid var(--accent);font-size:1rem;cursor:pointer;font-family:var(--text);line-height:1.2}
.btn.ghost{background:transparent;color:var(--accent)}
.btn:hover{filter:brightness(1.1)}
.btn[disabled]{cursor:not-allowed;opacity:.55;filter:none}
.sec{padding-block:clamp(36px,7vw,84px)}
.sec.alt{background:var(--alt)}
.sec-head{display:grid;gap:10px;margin-bottom:20px;max-width:64ch}
@media(min-width:760px){.sec-head{margin-bottom:26px}}
.sec-head p{color:var(--muted)}
.fine{font-size:.82rem;color:var(--muted)}
.flag{background:var(--warn-bg);color:var(--warn-ink);font-size:.76rem;padding:4px 9px;border-radius:5px;font-weight:600;line-height:1.35}
.pie-img{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--band-muted)}
/* M3 (encargo 005): enlace para saltar al contenido. Es lo primero enfocable de la página; está fuera de
   la pantalla hasta que recibe el foco con el teclado, y entonces aparece arriba a la izquierda. */
.saltar{position:absolute;left:max(12px,env(safe-area-inset-left,0px));top:-200px;z-index:50;padding:10px 16px;border-radius:8px;
  background:var(--band-fg);color:var(--band);font-weight:600;text-decoration:none;box-shadow:0 8px 24px -8px rgba(0,0,0,.6)}
.saltar:focus{top:max(10px,env(safe-area-inset-top,0px));outline:3px solid var(--band-amber);outline-offset:2px;box-shadow:0 0 0 6px var(--band),0 8px 24px -8px rgba(0,0,0,.6)}
#principal:focus{outline:none}
.prog{position:fixed;top:env(safe-area-inset-top,0px);left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:var(--band-amber);z-index:30;pointer-events:none}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:10px;font-weight:500;opacity:0;pointer-events:none;transition:.3s;z-index:40;max-width:90vw}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* =====================================================================
   PORTADA: imagen a pantalla completa + zoom lento + parallax + monitor vivo
   ===================================================================== */
.portada{position:relative;background:var(--band);color:var(--band-fg);isolation:isolate;overflow:hidden;
  /* Celular: la imagen 4:5 se dimensiona desde el monitor, que tiene que verse completo. Medidas del
     monitor (con su marco) dentro de la imagen 928×1152: x 21,8–81,9 % (60,1 %), y 37,6–71,9 % (34,3 %). */
  --mon-w:min(calc(100vw - 40px),520px);   /* ancho del monitor en pantalla: deja 20 px a cada lado */
  --img-w:calc(var(--mon-w) / .601);
  --img-h:calc(var(--img-w) * 1152 / 928);
  --mon-h:calc(var(--img-h) * .343);
  --kb:1.05}                               /* zoom máximo del Ken Burns en celular (centrado en el monitor) */
.portada-in{position:relative;display:flex;flex-direction:column;min-height:max(100svh,560px)}

.portada-pantalla{display:contents}
/* El hueco bajo el titular mide lo que el monitor (con el zoom máximo) y lleva la imagen centrada en él. */
.portada-hueco{position:relative;flex:1 0 auto;height:calc(var(--mon-h) * var(--kb) + 12px)}
.portada-cuadro{position:absolute;z-index:-2;width:var(--img-w);height:var(--img-h);
  left:calc(50% - var(--img-w) * .5185);top:calc(50% - var(--img-h) * .5475);
  transform:translate3d(0,calc(var(--sy,0) * 0.28px),0);will-change:transform}
/* Degradado marino sobre la imagen (celular): oscuro bajo el titular y bajo el texto, despejado en el monitor.
   El tramo del titular se mantiene en .86 hasta justo encima del marco del monitor (37,6 %): con menos, la
   última línea quedaba sobre la ventana clara de la foto (contraste medido 1,9:1; encargo 003, punto 2).
   Bajo el monitor, el tramo oscuro empieza justo después del marco (72 %): a 360×740, al bajar para ver el
   final de la portada, el parallax subía la bajada sobre el pie del monitor (3,4:1 medido). */
.portada-cuadro::after{content:"";position:absolute;inset:-1px;pointer-events:none;
  background:linear-gradient(180deg,var(--band) 0%,rgba(7,19,48,.92) 7%,rgba(7,19,48,.86) 27%,rgba(7,19,48,.86) 36%,rgba(7,19,48,0) 37.5%,
    rgba(7,19,48,0) 72%,rgba(7,19,48,.82) 73.6%,rgba(7,19,48,.9) 80%,var(--band) 91%)}
.portada-zoom{position:absolute;inset:0;transform-origin:51.85% 54.75%;animation:kenburns-cel 26s ease-in-out infinite alternate}
@keyframes kenburns-cel{from{transform:scale(1)}to{transform:scale(1.05)}}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}
.portada-zoom img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.portada-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portada.con-video .portada-zoom{animation:none}
.portada.con-video .monitor{display:none}
.portada-velo{display:none}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:14px 8px}
.marca{display:flex;flex-direction:column;gap:3px;text-decoration:none;color:var(--band-fg);min-width:0}
.marca-logo{height:26px;width:auto;display:block}
/* Comité 12-11, B5: la línea de servicio y el «para quién» se leen antes que el lema: más grandes y en el color del
   texto principal (antes, gris atenuado). Los textos no cambian. */
.marca-desc{font-size:.8rem;line-height:1.25;color:var(--band-fg);max-width:24ch}
.portada .btn{background:var(--band-fg);color:var(--band);border-color:var(--band-fg)}
.portada .btn.ghost{background:rgba(7,19,48,.35);color:var(--band-fg);border-color:var(--band-muted)}
.btn-top{min-height:42px;padding:0 14px;font-size:.92rem;flex:none}
.portada-label{color:var(--band-fg);font-size:.86rem;letter-spacing:.06em;font-weight:500;margin-top:8px;text-wrap:balance}
.portada h1{margin-top:6px;max-width:13ch;text-shadow:0 2px 24px rgba(7,19,48,.55)}
h1 em{font-style:normal;color:var(--band-acc)}
.lead{font-size:1rem;color:var(--band-fg);max-width:56ch;padding-bottom:14px;text-shadow:0 1px 12px rgba(7,19,48,.8)}
/* Celular: capa marina que viaja con la bajada. Con el parallax, al bajar la imagen se queda atrás y la bajada
   sube sobre el pie del monitor (a 360×740, con 117 px de desplazamiento: 3,4:1 medido sobre las barras). */
@media(max-width:899.98px){.lead{position:relative;background:rgba(7,19,48,.86);box-shadow:0 -14px 14px -2px rgba(7,19,48,.86)}}
.portada-accion{display:grid;gap:10px;padding-block:2px 14px}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}
.cta-row .btn{flex:1 1 220px}
.note{font-family:var(--mono);font-size:.78rem;color:var(--band-muted)}
/* Línea del pie de imágenes de la portada: el pie y, al lado, el botón «Pausar animación» (encargo 008, parte
   E.2; su estilo y el de la pausa están en css/estilos.css). Si no caben juntos (en celular, a 360 y 390), el
   botón pasa abajo y el pie sigue en una sola línea. */
.portada-pie{display:flex;flex-wrap:wrap;align-items:center;column-gap:14px;row-gap:6px;padding-bottom:14px}
/* entrada escalonada del titular */
.entra{animation:entra .9s cubic-bezier(.2,.7,.2,1) both}
.portada-label.entra{animation-delay:.1s} .portada h1.entra{animation-delay:.25s} .lead.entra{animation-delay:.55s}
.cta-row.entra{animation-delay:.8s} .note.entra{animation-delay:.95s}
@keyframes entra{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Escritorio: imagen 16:9 a pantalla completa («cover»), texto en el tercio izquierdo despejado, sobre un
   degradado marino. El cuadro tiene la proporción de la imagen: así el panel queda siempre sobre el monitor. */
@media(min-width:900px){
  .portada-in{position:static;display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,.5fr);grid-template-rows:auto auto auto auto auto auto 1fr;
    min-height:max(100svh,600px);align-content:start}
  .portada-hueco{position:absolute;inset:0 0 auto 0;height:max(100svh,600px);z-index:-2;overflow:hidden;container-type:size}
  .portada-cuadro{--ar:calc(1376/768);z-index:auto;left:50%;top:50%;
    width:max(100cqw,calc(100cqh * var(--ar)));height:max(100cqh,calc(100cqw / var(--ar)));
    transform:translate(-50%,-50%) translate3d(0,calc(var(--sy,0) * 0.28px),0)}
  .portada-cuadro::after{display:none}
  /* El zoom crece desde el borde izquierdo del monitor (48,6 %): así el monitor nunca se mete bajo la
     columna de texto (antes, en el zoom máximo, las barras quedaban bajo el final de la bajada). */
  /* AVISO 034: el zoom de 26 s con ease-in-out casi no se notaba en los primeros segundos (1,010 a los 6 s);
     con 16 s y ease-out llega a 1,049 (encargo 008, parte B; 09-11-2026). Solo en escritorio: el máximo sigue
     en 1,09 (@keyframes kenburns) y el origen no cambia. En celular sigue igual (1,05 en 26 s, ease-in-out). */
  .portada-zoom{transform-origin:48.6% 52%;animation-name:kenburns;animation-duration:16s;animation-timing-function:ease-out}
  .portada-velo{display:block;position:absolute;inset:0 0 auto 0;height:max(100svh,600px);z-index:-1;pointer-events:none;
    background:linear-gradient(90deg,rgba(7,19,48,.94) 0%,rgba(7,19,48,.88) 30%,rgba(7,19,48,.72) 40%,rgba(7,19,48,.4) 46%,rgba(7,19,48,0) 48.4%),
    linear-gradient(180deg,rgba(7,19,48,.5) 0%,rgba(7,19,48,0) 22%,rgba(7,19,48,0) 80%,rgba(7,19,48,.6) 100%)}
  .portada-pantalla,.portada-accion{display:contents}
  .top{grid-column:1/-1;padding-block:20px}
  .marca-logo{height:30px}
  .portada-label{grid-column:1;margin-top:clamp(8px,4vh,48px);max-width:34ch}   /* B5: en 2 líneas, lejos del monitor de la foto */
  .portada h1{grid-column:1;max-width:13ch;font-size:clamp(2.8rem,4.3vw,4.2rem)}
  .lead{grid-column:1;font-size:1.12rem;color:var(--band-muted);padding:20px 0 0;text-shadow:none;
    max-width:min(56ch,calc(100% - .014 * max(100vw,max(100svh,600px) * 1376 / 768) - 20px))}
  /* AVISO 072, detalle 4 (B7 del Comité, 14-11-2026): aire entre la bajada y el monitor. Ninguna línea de .lead queda
     a menos de 16 px del borde izquierdo del marco (#monitor); antes pasaba sobre él (−6 px a 1366×768, −15,7 a
     900×700). Solo cambia el ancho máximo; el texto y la letra no. El marco está en el 48,6 % del cuadro de la foto,
     que va centrado y mide max(100vw, alto del hueco × 1376/768): su borde queda 1,4 % del cuadro a la izquierda
     del centro de la pantalla, y el borde derecho de la columna 1 (100 %), justo en el centro. Por eso el ancho es
     la columna menos ese 1,4 % y 20 px de aire (4 de holgura). Lo vigila pruebas/etapa9.test.js («B: con la escala
     máxima…»), a 1366×768, 1280×600, 1920×1080, 1024×768 y 900×700. */
  .cta-row{grid-column:1;margin-top:26px}
  .cta-row .btn{flex:0 1 auto}
  .note{grid-column:1;margin-top:14px;max-width:50ch}  /* con la frase de privacidad, no pasa a la parte clara de la foto */
  .portada-pie{grid-column:1/-1;align-self:end;padding-block:20px}
}

/* Panel del monitor «vivo». Coordenadas de la pantalla del monitor dentro de cada imagen (en %). */
.monitor{position:absolute;left:22.6%;top:38.6%;width:58.6%;height:31.6%;border-radius:1.2%;container-type:size;
  background:linear-gradient(160deg,rgba(9,26,64,.94),rgba(6,17,44,.97));overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(125,166,255,.18)}
@media(min-width:900px){.monitor{left:48.6%;top:21.6%;width:37.9%;height:44.2%}}
.mon{position:absolute;inset:0;padding:5cqh 4cqw;display:grid;grid-template-rows:auto auto 1fr;gap:3.5cqh;font-family:var(--mono);color:var(--band-fg)}
.mon-top{display:flex;justify-content:space-between;align-items:center;gap:2cqw}
/* AVISO 072, detalle 5 (14-11-2026): el rótulo «Ejemplo con datos ficticios» avisa que los datos son ficticios y se
   lee a 11 px o más en todas las pantallas (antes, mínimo 7 px: 8 px a 360×640 y 9 px a 390×664, con el monitor
   achicado por la regla de pantallas bajas). El texto no cambia. Lo vigila pruebas/aviso072.test.js. */
.mon-flag{font-family:var(--text);font-weight:600;font-size:clamp(11px,3.4cqw,12px);background:var(--warn-bg);color:var(--warn-ink);padding:.6cqh 1.6cqw;border-radius:3px;white-space:nowrap}
.mon-vivo{width:2.2cqw;height:2.2cqw;min-width:6px;min-height:6px;border-radius:50%;background:var(--band-ok);box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:latido 2s infinite}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}70%{box-shadow:0 0 0 2.4cqw rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.mon-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw}
.mon-k{border:1px solid rgba(125,166,255,.25);border-radius:4px;padding:1.6cqh 2cqw;min-width:0;background:rgba(255,255,255,.03)}
.mon-k .k{font-size:clamp(6px,2.5cqw,10.5px);color:var(--band-muted);text-transform:uppercase;letter-spacing:.03em;line-height:1.2}
.mon-k .v{font-size:clamp(9px,5cqw,20px);font-weight:500;font-variant-numeric:tabular-nums;line-height:1.15}
.mon-k .d{font-size:clamp(6px,2.6cqw,10.5px);color:var(--band-ok)}
.mon-k .d.down{color:var(--band-bad)}
.mon-graf{min-height:0;position:relative}
.mon-graf svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* M1 (encargo 005): solo se animan las barras, y desde el primer pintado, sin esperar a js/app.js (antes se
   veían completas, volvían a cero cuando llegaba app.js y crecían: el monitor parpadeaba). Las cifras no se
   animan: se ven con su valor de HERO_DATA desde el primer pintado y no cambian nunca. Cada barra entra
   0,06 s después de la anterior (las de ventas y costos de un mes, seguidas). */
.mon-graf .barra{transform-box:fill-box;transform-origin:50% 100%;animation:crece 1.1s cubic-bezier(.2,.8,.2,1) var(--retardo,1.3s) both}
.mon-graf .barra.ult{animation:crece 1.1s cubic-bezier(.2,.8,.2,1) var(--retardo,1.3s) both,brillo 3.2s ease-in-out 2s infinite}
.barra:nth-of-type(1){--retardo:.6s} .barra:nth-of-type(2){--retardo:.66s} .barra:nth-of-type(3){--retardo:.72s} .barra:nth-of-type(4){--retardo:.78s}
.barra:nth-of-type(5){--retardo:.84s} .barra:nth-of-type(6){--retardo:.9s} .barra:nth-of-type(7){--retardo:.96s} .barra:nth-of-type(8){--retardo:1.02s}
.barra:nth-of-type(9){--retardo:1.08s} .barra:nth-of-type(10){--retardo:1.14s} .barra:nth-of-type(11){--retardo:1.2s} .barra:nth-of-type(12){--retardo:1.26s}
@keyframes crece{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes brillo{0%,100%{opacity:1}50%{opacity:.62}}
.mon-graf text{font-family:var(--mono);fill:var(--band-muted)}
.mon-barrido{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(125,166,255,.10) 50%,transparent 70%);background-size:250% 100%;animation:barrido 6s linear 1.5s infinite;pointer-events:none}
@keyframes barrido{from{background-position:120% 0}to{background-position:-120% 0}}

/* REDUCIR MOVIMIENTO (para toda la página): sin animaciones ni transiciones; la portada queda con la
   imagen fija. Va aquí para que rija desde el primer pintado. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .prog{display:none}
}
/* Pantallas bajas de celular (Comité 12-11, A4: iPhone con las barras de Safari, ~390×664): el botón «Agenda 30
   minutos sin costo» tiene que verse completo sin desplazarse. Sin tocar textos: el monitor (y con él la imagen y su
   hueco) se achica y el encabezado se aprieta. Va al final del archivo para ganarle a las reglas de arriba. Con 720 px de alto o más no cambia nada (a 360×740 la foto tiene que quedar como en main: con el monitor más chico, el descriptor caía sobre el cielo; AVISO 069) (ni el margen de 10,75, que se
   mide a 390×844). */
@media(max-width:899.98px) and (max-height:719.98px){
  .portada{--mon-w:min(calc(100vw - 120px),520px)}
  .top{padding-block:10px 4px}
  /* Con el monitor más chico, la parte alta de la foto (cielo claro) queda bajo el encabezado: una franja marina
     detrás de él mantiene el descriptor y el botón en ≥ 4,5:1 (AVISO 069, B5). */
  .portada-in::before{content:"";position:absolute;left:-50vw;right:-50vw;top:0;height:92px;z-index:-1;pointer-events:none;
    background:linear-gradient(180deg,var(--band) 0%,var(--band) 78%,rgba(7,19,48,0) 100%)}
}