/* 8K Especialistas en Proyección LED — sistema visual
   Concepto: la web como sala de proyección. Base azul profundo (la sala), el naranja es la luz que proyecta,
   y la geometría sale del 8K: módulos rectos, diagonales y cortes a 45°. */
@font-face{font-family:"Figtree";src:url(/assets/fonts/figtree-latin.woff2) format("woff2");font-weight:300 900;font-display:swap}
:root{
  --azul:#001621;--azul-2:#04202F;--azul-3:#0A3045;--azul-4:#14425C;
  --naranja:#FF5A00;--naranja-2:#FF7A33;--naranja-3:#FFB27F;--brillo:rgba(255,90,0,.38);
  --blanco:#FFFFFF;--hielo:#F2F5F7;--hielo-2:#E4EAEE;--gris:#5E6870;--niebla:#A9B6BF;
  --linea-o:rgba(255,255,255,.13);--linea-c:#D5DDE3;
  --f:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ancho:1240px;--corte:14px;--sombra:0 24px 60px -28px rgba(0,10,16,.55);
  --curva:cubic-bezier(.2,.7,.15,1);--cab:76px;
  /* Línea bitono: tramo sólido blanco + cola que se apaga a gris técnico (sobre claro: azul + gris).
     El naranja queda para los llamados a la acción y el logo: el manual pide no saturarlo. */
  --linea:#FFFFFF;--cola:linear-gradient(90deg,#C9D3DA,#5E6870);--ico:#8FA1AD;
  --filete:linear-gradient(90deg,transparent,rgba(255,255,255,.42) 22%,rgba(169,182,191,.3) 55%,transparent);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--azul);color:var(--blanco);font:400 1.0625rem/1.65 var(--f);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0}
h1,h2,h3,h4{margin:0;font-weight:800;line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(2.35rem,4.8vw,3.8rem);line-height:1.02}
h2{font-size:clamp(1.85rem,3vw,2.5rem)}
h3{font-size:1.28rem;font-weight:750;letter-spacing:-.01em;line-height:1.2}
strong{font-weight:700}
:focus-visible{outline:3px solid var(--naranja);outline-offset:3px}
.oculto{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.visualmente-oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:12px;top:-60px;z-index:100;background:var(--naranja);color:var(--azul);padding:.7em 1em;font-weight:700;text-decoration:none}
.saltar:focus{top:12px}
.contenedor{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:clamp(18px,4vw,32px)}

/* --- Secciones */
.seccion{padding-block:clamp(4.2rem,9vw,7.5rem);position:relative}
.oscuro{background:var(--azul)}
.oscuro-2{background:var(--azul-2)}
.hielo{background:var(--hielo);color:var(--azul)}
.blanco{background:var(--blanco);color:var(--azul)}
.hielo,.blanco{--linea:var(--azul);--cola:linear-gradient(90deg,#5E6870,#C9D3DA);--ico:var(--gris)}
.hielo .texto-suave,.blanco .texto-suave{color:var(--gris)}
.texto-suave{color:var(--niebla)}
.cabeza-sec{max-width:760px;margin-bottom:clamp(2.2rem,5vw,3.6rem)}
.cabeza-sec.centro{margin-inline:auto;text-align:center}
.cabeza-sec p{font-size:1.125rem;margin-top:1.15rem}
.antetitulo{display:inline-flex;align-items:center;gap:.7em;font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#C9D3DA;margin-bottom:1.1rem}
.antetitulo::before{content:"";width:22px;height:10px;background:var(--naranja);transform:skewX(-35deg)}
.hielo .antetitulo,.blanco .antetitulo{color:var(--gris)}
.hielo .antetitulo::before,.blanco .antetitulo::before{background:var(--naranja)}
.realce{color:var(--naranja)}

/* --- Línea bitono entre título y párrafo (se traza al entrar en pantalla) */
.cabeza-sec>h2::after,.texto>h2::after,.hero-pagina h1::after,.titulo-linea::after,.cta-final h2::after,.art-cuerpo h2::after{
  content:"";display:block;width:clamp(104px,11vw,150px);height:3px;margin-top:.55em;transform-origin:left center;
  background:linear-gradient(var(--linea),var(--linea)) left center/34% 3px no-repeat,var(--cola) right center/60% 2px no-repeat,
    linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent) -60% center/34% 3px no-repeat;
  transition:transform 1.1s var(--curva) .15s,background-position 1.2s ease 1s}
.cabeza-sec.centro>h2::after{margin-inline:auto;transform-origin:center}
.cta-final h2::after{--cola:linear-gradient(90deg,var(--azul),rgba(0,22,33,.25));background-image:linear-gradient(var(--azul),var(--azul)),var(--cola),none}
.js .cabeza-sec:not(.visible)>h2::after,.js .texto:not(.visible)>h2::after,.js .titulo-linea:not(.visible)::after{transform:scaleX(0)}
.cabeza-sec.visible>h2::after,.texto.visible>h2::after,.titulo-linea.visible::after{background-position:left center,right center,160% center}
.hero-pagina h1::after{animation:trazo 1.2s var(--curva) .35s both}
@keyframes trazo{from{transform:scaleX(0)}}

/* --- Botones con corte 8K */
.btn{--c:12px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:.85em 1.45em;border:0;overflow:hidden;
  font:700 1rem/1.1 var(--f);letter-spacing:.01em;text-decoration:none;cursor:pointer;
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)));
  transition:background .25s,color .25s,transform .25s var(--curva),box-shadow .25s}
.btn svg{width:1.25em;height:1.25em;flex:none;transition:transform .35s var(--curva)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:scale(1.14) rotate(-8deg)}
.btn-wa,.btn-primario{background:var(--naranja);color:var(--azul)}
.btn-wa:hover,.btn-primario:hover{background:var(--naranja-2)}
.btn-linea{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor;clip-path:none}
.btn-linea:hover{background:rgba(255,255,255,.08)}
.hielo .btn-linea:hover,.blanco .btn-linea:hover{background:rgba(0,22,33,.06)}
.btn-s{min-height:44px;padding:.6em 1.05em;font-size:.94rem}
/* Destello periódico en los llamados principales (pauta): visible sin saturar */
.cab-wa::after,.hero-pagina .btn-wa::after,.sec-hero .btn-wa::after,.cta-final .btn-wa::after,.cta-banda .btn-wa::after,.barra .btn-wa::after,.art-lateral .btn-wa::after{
  content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
  transform:translateX(-130%);animation:destello 6s 2.5s infinite}
@keyframes destello{0%,72%{transform:translateX(-130%)}88%,100%{transform:translateX(130%)}}
.acciones{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.microcopia{list-style:none;display:flex;flex-wrap:wrap;gap:.4em 1.3em;margin:1rem 0 0;font-size:.88rem;color:var(--niebla)}
.microcopia li{display:inline-flex;align-items:center;gap:.4em}
.microcopia svg{width:16px;height:16px;color:var(--ico)}
.hielo .microcopia,.blanco .microcopia{color:var(--gris)}
.enlace-flecha{display:inline-flex;align-items:center;gap:.45em;font-weight:700;color:var(--naranja);text-decoration:none}
.enlace-flecha svg{width:1.1em;height:1.1em;transition:transform .25s var(--curva)}
.enlace-flecha:hover svg{transform:translateX(4px)}
.hielo .enlace-flecha,.blanco .enlace-flecha{color:#C24400}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1.2rem}
.chips li{display:inline-flex;align-items:center;gap:.45em;font-size:.82rem;font-weight:700;letter-spacing:.02em;padding:.4em .75em;border:1px solid var(--linea-o);background:rgba(255,255,255,.03);color:#D7E0E6;font-variant-numeric:tabular-nums}
.chips li::before{content:"";width:6px;height:6px;background:var(--ico);transform:rotate(45deg);flex:none}
.hielo .chips li,.blanco .chips li{border-color:var(--linea-c);color:var(--azul);background:var(--blanco)}

/* --- Franja superior (primer nivel de la cabecera doble) */
.franja-sup{position:relative;background:#000E15;border-bottom:1px solid var(--linea-o);font-size:.84rem;color:#B9C6CF}
.fs-rejilla{display:flex;align-items:center;gap:4px 24px;min-height:40px}
.fs-item{display:inline-flex;align-items:center;gap:.5em;margin:0;white-space:nowrap}
.fs-item svg{width:15px;height:15px;color:var(--ico);flex:none}
.franja-sup a{text-decoration:none;transition:color .2s}
.franja-sup a:hover{color:var(--blanco)}
.fs-correo{margin-left:auto}
.fs-tel a{font-weight:700;color:var(--blanco)}
.fs-redes{display:flex;gap:2px;margin:0 -8px 0 0;padding-left:14px;border-left:1px solid var(--linea-o)}
.fs-redes a{display:grid;place-items:center;width:32px;height:32px;color:#B9C6CF;transition:color .2s,transform .25s var(--curva)}
.fs-redes a:hover{color:var(--blanco);transform:translateY(-1px)}
.fs-redes svg{width:15px;height:15px}
@media (max-width:1100px){.fs-horario,.fs-correo{display:none}.fs-tel{margin-left:auto}}
@media (max-width:640px){.fs-rejilla{justify-content:center;min-height:36px}.fs-tel,.fs-redes{display:none}.franja-sup{font-size:.78rem}.fs-item a{display:inline-flex;align-items:center;min-height:36px}}

/* --- Cabecera (segundo nivel): logo, menú con iconos y megamenú, llamados */
.cabecera{position:sticky;top:0;z-index:50;isolation:isolate}
.cabecera::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,22,33,.86);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);transition:background .3s}
.cabecera::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--filete);pointer-events:none}
.cabecera.pegada::before{background:rgba(0,22,33,.97)}
.cab-rejilla{display:flex;align-items:stretch;gap:18px;min-height:var(--cab)}
.logo{display:flex;align-items:center;flex:none;width:206px;transition:transform .4s var(--curva);transform-origin:left center}
.logo img{width:100%;height:auto}
.cabecera.pegada .logo{transform:scale(.9)}
.nav{display:flex;align-items:stretch;margin-left:auto}
.nav-lista{list-style:none;display:flex;align-items:stretch;gap:2px}
.nav-item{display:flex;align-items:center}
.nav-item:has(.desplegable){position:relative}
.nav-enlace{display:flex;align-items:center;gap:.5em;align-self:stretch;padding:0 .7em;font-weight:600;font-size:.95rem;color:#DCE4E9;text-decoration:none;position:relative;transition:color .2s}
.nav-ico{width:18px;height:18px;color:var(--ico);flex:none;transition:transform .35s var(--curva),color .25s}
.nav-enlace::after{content:"";position:absolute;left:.7em;right:.7em;bottom:16px;height:2px;background:linear-gradient(90deg,#fff 0 38%,#C9D3DA 38%,#5E6870);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--curva)}
.nav-item:hover .nav-enlace,.nav-enlace[aria-current="page"]{color:var(--blanco)}
.nav-item:hover .nav-ico,.nav-enlace[aria-current="page"] .nav-ico{color:var(--blanco)}
.nav-item:hover .nav-ico{transform:translateY(-2px) rotate(-6deg)}
.nav-item:hover .nav-enlace::after,.nav-enlace[aria-current="page"]::after{transform:scaleX(1)}
.nav-abrir{display:grid;place-items:center;width:26px;height:26px;margin-left:-8px;padding:0;border:0;background:transparent;color:#9FB0BB;cursor:pointer;border-radius:4px}
.nav-abrir svg{width:14px;height:14px;transition:transform .3s var(--curva)}
.con-sub:hover .nav-abrir svg,.con-sub.abierto .nav-abrir svg{transform:rotate(180deg);color:var(--blanco)}
.nav-movil-cabeza,.nav-movil-pie{display:none}
/* Inicio: solo el icono en escritorio; con texto en el cajón del celular */
.nav-inicio .nav-enlace{padding-inline:.6em}
.nav-inicio-texto{display:none}
/* Escritorio angosto: el menú va sin iconos (el de inicio se queda) para que quepa junto al logo horizontal */
@media (min-width:1181px) and (max-width:1340px){.nav-item:not(.nav-inicio) .nav-ico{display:none}}
.cab-acciones{display:flex;align-items:center;gap:10px}
.cab-tel .tel-num{display:none}
/* El número va en la franja superior; aquí solo el icono (con el logo horizontal oficial no cabe sin apretar el menú) */
.cab-tel{padding-inline:.8em;white-space:nowrap}
.menu-btn{display:none;align-items:center;gap:8px;align-self:center;height:46px;padding:0 14px;border:1px solid var(--linea-o);background:rgba(255,255,255,.03);color:var(--blanco);font:700 .92rem var(--f);cursor:pointer}
.menu-btn svg{width:22px;height:22px}
.nav-fondo{position:fixed;inset:0;z-index:55;background:rgba(0,8,13,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}

/* Submenús: megamenú a lo ancho de la cabecera y desplegable compacto para las guías */
.sub{position:absolute;top:100%;z-index:5;visibility:hidden;opacity:0;transform:translateY(10px);transition:opacity .22s,transform .35s var(--curva),visibility 0s linear .35s}
.mega{left:0;right:0;background:linear-gradient(180deg,#032231,#001621 70%);border-top:1px solid var(--linea-o);box-shadow:0 50px 70px -40px rgba(0,0,0,.85)}
.mega::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--filete)}
.mega-rejilla{display:grid;grid-template-columns:1fr 290px;gap:28px;padding-block:26px 30px}
.mega-lista{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mega-srv{border:1px solid transparent;transition:background .25s,border-color .25s}
.mega-srv:hover{background:rgba(255,255,255,.035);border-color:var(--linea-o)}
.mega-srv-enlace{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:center;padding:14px;text-decoration:none}
.mega-ico{width:48px;height:48px;display:grid;place-items:center;background:rgba(255,255,255,.04);color:#D7E0E6;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);transition:background .3s,color .3s}
.mega-ico svg{width:25px;height:25px;transition:transform .4s var(--curva)}
.mega-srv:hover .mega-ico{background:var(--naranja);color:var(--azul)}
.mega-srv:hover .mega-ico svg{transform:scale(1.1)}
.mega-txt strong{display:block;font-size:1.02rem;color:var(--blanco)}
.mega-txt small{display:block;margin-top:3px;font-size:.84rem;line-height:1.35;color:var(--niebla)}
.mega-ciudades{display:flex;flex-wrap:wrap;gap:2px 12px;margin:-6px 14px 14px 76px}
.mega-ciudades a{display:inline-flex;align-items:center;gap:.3em;padding:.2em 0;font-size:.84rem;font-weight:600;color:#C9D3DA;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.mega-ciudades a:hover{border-color:#C9D3DA;color:var(--blanco)}
.mega-ciudades svg{width:13px;height:13px;color:var(--ico)}
.mega-lateral{display:grid;gap:12px;align-content:start;padding:22px;background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.01) 62%),var(--azul-2);box-shadow:inset 0 0 0 1px var(--linea-o);
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
.mega-ante{margin:0;font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--niebla)}
.mega-titulo{margin:0 0 4px;font-size:1.2rem;font-weight:800;line-height:1.2}
.mega-lateral .enlace-flecha{font-size:.95rem}
.mega-lateral .btn{margin-top:6px}
.mega-ciudades-rejilla{grid-template-columns:repeat(4,1fr)}
.ciudad-col{padding:6px 18px 6px 0;border-right:1px solid var(--linea-o)}
.ciudad-col:last-child{border-right:0}
.ciudad-nombre{display:flex;gap:.6em;align-items:flex-start;margin:0 0 12px;font-weight:800;font-size:1.1rem}
.ciudad-nombre svg{width:20px;height:20px;color:var(--ico);margin-top:2px;flex:none}
.ciudad-nombre small{display:block;font-size:.8rem;font-weight:600;color:var(--niebla);letter-spacing:.02em}
.ciudad-col ul{list-style:none;display:grid;gap:2px}
.ciudad-col li a{display:flex;align-items:center;gap:.6em;padding:.5em .55em;font-size:.93rem;color:#DCE4E9;text-decoration:none;transition:background .2s,color .2s}
.ciudad-col li a:hover{background:rgba(255,255,255,.05);color:var(--blanco)}
.ciudad-col li svg{width:18px;height:18px;color:var(--ico);flex:none}
.ciudad-pais p{font-size:.92rem;color:var(--niebla)}
.desplegable{left:-12px;min-width:330px;padding:10px;background:#032231;border:1px solid var(--linea-o);box-shadow:0 40px 60px -30px rgba(0,0,0,.85)}
.desplegable::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--filete)}
.desplegable ul{list-style:none;display:grid;gap:1px}
.desplegable a{display:flex;align-items:center;gap:.65em;padding:.62em .7em;font-size:.93rem;color:#DCE4E9;text-decoration:none;transition:background .2s,color .2s,padding .25s var(--curva)}
.desplegable a:hover{background:rgba(255,255,255,.05);color:var(--blanco);padding-left:.95em}
.desplegable svg{width:17px;height:17px;color:var(--ico);flex:none}
.sub-todas{margin-top:4px;padding-top:4px;border-top:1px solid var(--linea-o)}
.sub-todas a{font-weight:700}
@media (min-width:1181px){
  .con-sub:hover>.sub,.con-sub:focus-within>.sub,.con-sub.abierto>.sub{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  .con-sub.forzar-cierre>.sub{visibility:hidden;opacity:0}
}
@media (max-width:1180px){
  .menu-btn{display:flex}
  .cab-acciones{margin-left:auto}
  .nav{position:fixed;top:0;right:0;bottom:0;z-index:60;width:min(430px,92vw);margin:0;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
    background:linear-gradient(180deg,#032231,#001621 40%);box-shadow:-30px 0 70px rgba(0,0,0,.55);
    transform:translateX(102%);visibility:hidden;transition:transform .5s var(--curva),visibility 0s linear .5s}
  .nav.abierto{transform:none;visibility:visible;transition-delay:0s}
  .nav-movil-cabeza{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--linea-o)}
  .nav-movil-cabeza img{width:170px}
  .nav-cerrar{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--linea-o);background:transparent;color:var(--blanco);cursor:pointer}
  .nav-cerrar svg{width:22px;height:22px}
  .nav-lista{flex-direction:column;align-items:stretch;gap:0;padding:6px 18px}
  .nav-item{flex-wrap:wrap;border-bottom:1px solid var(--linea-o);opacity:0;transform:translateX(24px);transition:opacity .4s,transform .5s var(--curva)}
  .nav.abierto .nav-item{opacity:1;transform:none}
  .nav.abierto .nav-item:nth-child(2){transition-delay:.04s}.nav.abierto .nav-item:nth-child(3){transition-delay:.08s}
  .nav.abierto .nav-item:nth-child(4){transition-delay:.12s}.nav.abierto .nav-item:nth-child(5){transition-delay:.16s}.nav.abierto .nav-item:nth-child(6){transition-delay:.2s}.nav.abierto .nav-item:nth-child(7){transition-delay:.24s}
  .nav-inicio-texto{display:inline}
  .nav-inicio .nav-enlace{padding:0 4px}
  .nav-enlace{flex:1;min-height:56px;padding:0 4px;font-size:1.08rem}
  .nav-enlace::after{display:none}
  .nav-ico{width:21px;height:21px}
  .nav-abrir{width:48px;height:48px;margin:0;border-left:1px solid var(--linea-o);border-radius:0}
  .nav-abrir svg{width:18px;height:18px}
  .sub{position:static;display:none;width:100%;visibility:visible;opacity:1;transform:none;transition:none}
  .con-sub.abierto>.sub{display:block;animation:baja .35s var(--curva)}
  .mega,.desplegable{background:none;border:0;box-shadow:none;min-width:0;padding:0}
  .mega::before,.desplegable::before{display:none}
  .mega .contenedor{padding:0}
  .mega-rejilla{display:block;padding:0 0 12px}
  .mega-lista{grid-template-columns:1fr;gap:0}
  .mega-srv-enlace{grid-template-columns:40px 1fr;gap:12px;padding:10px 4px}
  .mega-ico{width:40px;height:40px}
  .mega-ico svg{width:21px;height:21px}
  .mega-txt small{font-size:.8rem}
  .mega-ciudades{margin:-6px 0 10px 56px;gap:0 16px}
  .mega-ciudades a{min-height:40px}
  .mega-lateral{display:none}
  .mega-lista .mega-srv:last-child{display:none}
  .ciudad-col{padding:8px 0 10px;border-right:0;border-bottom:1px solid var(--linea-o)}
  .ciudad-col:last-child{border-bottom:0}
  .ciudad-nombre{margin-bottom:4px;font-size:1rem}
  .ciudad-col li a{min-height:44px}
  .desplegable a{min-height:44px}
  .nav-movil-pie{display:grid;gap:10px;padding:18px;margin-top:auto}
  .nav-movil-pie .btn{width:100%}
  .nav-movil-pie p{display:flex;align-items:center;justify-content:center;gap:.5em;margin:4px 0 0;font-size:.86rem;color:var(--niebla)}
  .nav-movil-pie p svg{width:16px;height:16px;color:var(--ico)}
}
@keyframes baja{from{opacity:0;transform:translateY(-6px)}}
@media (max-width:560px){.cab-acciones{display:none}.logo{width:182px}.menu-btn{margin-left:auto}}
@media (max-width:370px){.logo{width:156px}}

/* --- Tarjetas */
.rejilla{display:grid;gap:clamp(16px,2vw,24px)}
@media (min-width:700px){.rejilla.c2{grid-template-columns:repeat(2,1fr)}.rejilla.c3{grid-template-columns:repeat(2,1fr)}.rejilla.c4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.rejilla.c3{grid-template-columns:repeat(3,1fr)}.rejilla.c4{grid-template-columns:repeat(4,1fr)}}
.tarjeta{position:relative;background:var(--azul-2);border:1px solid var(--linea-o);overflow:hidden;
  clip-path:polygon(0 0,calc(100% - var(--corte)) 0,100% var(--corte),100% 100%,0 100%)}
.hielo .tarjeta,.blanco .tarjeta{background:var(--blanco);border-color:var(--linea-c)}
.tarjeta-cuerpo{padding:22px 22px 26px}
.tarjeta h3{margin-bottom:.55rem}
.tarjeta h3 a{text-decoration:none}
.tarjeta h3 a::after{content:"";position:absolute;inset:0;z-index:5}
.tarjeta::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:linear-gradient(90deg,var(--linea) 0 38%,transparent 38%),var(--cola) right/62% 2px no-repeat;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--curva)}
.tarjeta:hover::after,.tarjeta:focus-within::after{transform:scaleX(1)}
.tarjeta .marco-foto{overflow:hidden;aspect-ratio:4/3}
.tarjeta .marco-foto img{width:100%;height:100%;object-fit:cover}

/* --- Fotos con efecto 8K: revelado diagonal al entrar, zoom suave, esquinas de encuadre y destello al pasar el cursor */
.fx{position:relative;overflow:hidden;isolation:isolate}
.fx img{transform:scale(var(--z,1));transition:transform 1.5s var(--curva),filter .6s}
.fx::before{content:"";position:absolute;inset:12px;z-index:3;pointer-events:none;opacity:0;transform:scale(1.05);transition:opacity .4s,transform .55s var(--curva);
  background:linear-gradient(#fff,#fff) 0 0/24px 2px,linear-gradient(#fff,#fff) 0 0/2px 24px,
    linear-gradient(#fff,#fff) 100% 0/24px 2px,linear-gradient(#fff,#fff) 100% 0/2px 24px,
    linear-gradient(#fff,#fff) 0 100%/24px 2px,linear-gradient(#fff,#fff) 0 100%/2px 24px,
    linear-gradient(#fff,#fff) 100% 100%/24px 2px,linear-gradient(#fff,#fff) 100% 100%/2px 24px;background-repeat:no-repeat}
.fx::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.26) 50%,transparent 65%),linear-gradient(0deg,rgba(0,22,33,.35),transparent 45%);
  background-size:100% 100%;background-position:-260% 0,0 0;background-repeat:no-repeat;opacity:.9;transition:background-position 1.1s var(--curva)}
.fx:hover::before,.fx:focus-within::before{opacity:1;transform:none}
.fx:hover::after{background-position:260% 0,0 0}
.fx:hover img{--z:1.06;filter:saturate(1.08) contrast(1.03)}
/* El recorte va en la imagen, no en la figura: Chrome no avisa la entrada en pantalla de un elemento recortado a cero */
.js .revelar img{--z:1.16;clip-path:polygon(0 0,0 0,0 0);transition:clip-path 1.3s var(--curva) var(--demora,0s),transform 1.6s var(--curva) var(--demora,0s),filter .6s}
.js .revelar.visible img{--z:1;clip-path:polygon(0 0,210% 0,0 210%)}
.js .revelar.visible:hover img{--z:1.06;transition-delay:0s}
.js .revelar figcaption{opacity:0;transition:opacity .6s ease calc(var(--demora,0s) + .7s),padding .35s var(--curva),background .3s,color .3s}
.js .revelar.visible figcaption{opacity:1}
.ampliar{position:absolute;inset:0;z-index:4;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in}
.ampliar span{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:38px;height:38px;background:rgba(0,22,33,.82);color:var(--blanco);opacity:0;transform:scale(.8);transition:opacity .3s,transform .35s var(--curva)}
.ampliar svg{width:18px;height:18px}
.fx:hover .ampliar span,.ampliar:focus-visible span{opacity:1;transform:none}
.ampliar:focus-visible{outline-offset:-4px}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}

/* --- Lista con check y datos técnicos */
.lista-check{list-style:none;display:grid;gap:.75em}
.lista-check li{display:grid;grid-template-columns:22px 1fr;gap:.7em;align-items:start}
.lista-check svg{width:22px;height:22px;color:var(--naranja);margin-top:.15em}
.ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1px solid var(--linea-o)}
.ficha div{padding:16px 16px 16px 0;border-bottom:1px solid var(--linea-o)}
.ficha dt{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--niebla)}
.ficha dd{margin:.3em 0 0;font-size:1.35rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.hielo .ficha,.blanco .ficha{border-color:var(--linea-c)}
.hielo .ficha div,.blanco .ficha div{border-color:var(--linea-c)}
.hielo .ficha dt,.blanco .ficha dt{color:var(--gris)}

/* --- Campos de formulario (configurador y cotización) */
.campos-2{display:grid;gap:14px}
@media (min-width:560px){.campos-2{grid-template-columns:1fr 1fr}}
.campo{display:grid;gap:.4em;font-weight:700;font-size:.95rem}
.campo input,.campo select,.campo textarea{font:500 1rem var(--f);color:var(--azul);background:var(--hielo);border:1.5px solid var(--linea-c);padding:.75em .85em;min-height:50px;width:100%}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--azul);outline:none;box-shadow:0 0 0 3px rgba(255,90,0,.35)}

/* --- Video real (póster; el video carga al dar clic) */
.video-real{margin:0;display:grid;gap:12px}
.video-play{position:relative;display:block;width:100%;padding:0;border:0;background:var(--azul-3);color:var(--blanco);cursor:pointer;overflow:hidden;
  clip-path:polygon(0 0,calc(100% - var(--corte)) 0,100% var(--corte),100% 100%,0 100%)}
.video-real.vertical .video-play{aspect-ratio:9/16}
.video-real.horizontal .video-play{aspect-ratio:16/9}
.video-play img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--curva),filter .4s}
.video-play::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,22,33,.55),transparent 40%);pointer-events:none}
.video-play:hover img{transform:scale(1.05);filter:brightness(.85)}
.video-icono{position:absolute;inset:0;z-index:2;margin:auto;width:72px;height:72px;display:grid;place-items:center;background:var(--naranja);color:var(--azul);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));transition:transform .3s var(--curva)}
.video-icono::before{content:"";position:absolute;inset:-10px;border:2px solid rgba(255,90,0,.6);animation:onda-v 2.4s infinite;clip-path:inherit}
.video-icono svg{width:28px;height:28px;margin-left:4px}
.video-play:hover .video-icono{transform:scale(1.08)}
.video-dur{position:absolute;right:10px;bottom:10px;z-index:2;background:rgba(0,22,33,.85);color:var(--blanco);font-size:.8rem;font-weight:700;padding:.25em .6em;font-variant-numeric:tabular-nums}
@keyframes onda-v{from{transform:scale(.85);opacity:.9}to{transform:scale(1.25);opacity:0}}
.video-real figcaption{font-size:.95rem;color:var(--niebla)}
.video-real figcaption strong{display:block;color:var(--blanco);font-size:1.02rem;margin-bottom:.15em}
.hielo .video-real figcaption,.blanco .video-real figcaption{color:var(--gris)}
.hielo .video-real figcaption strong,.blanco .video-real figcaption strong{color:var(--azul)}
.visor{border:0;padding:0;background:transparent;max-width:min(92vw,1100px);max-height:92vh;overflow:visible}
.visor::backdrop,.visor-foto::backdrop{background:rgba(0,10,16,.9);backdrop-filter:blur(6px)}
.visor video{max-height:86vh;width:auto;max-width:100%;margin:auto;background:#000}
.visor-cerrar{position:absolute;top:-56px;right:0;display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--linea-o);background:var(--azul);color:var(--blanco);cursor:pointer;transition:background .2s}
.visor-cerrar:hover{background:var(--naranja);color:var(--azul)}
.visor-cerrar svg{width:22px;height:22px}
/* Visor de fotos */
.visor-foto{width:min(94vw,1280px);max-width:none;max-height:none;border:0;padding:0;background:transparent;color:var(--blanco);overflow:visible}
.visor-foto[open]{animation:visor-entra .45s var(--curva)}
@keyframes visor-entra{from{opacity:0;transform:scale(.94)}}
.visor-foto figure{margin:0;display:grid;gap:12px;justify-items:center}
.visor-foto img{max-height:78vh;width:auto;max-width:100%;object-fit:contain;clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%);box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
.visor-foto img.cambia{animation:foto-cambia .45s var(--curva)}
@keyframes foto-cambia{from{opacity:0;transform:translateX(var(--dx,24px))}}
.visor-foto figcaption{font-weight:700;font-size:1rem;text-align:center}
.vf-contador{position:absolute;top:-48px;left:0;margin:0;font-size:.88rem;font-weight:700;color:var(--niebla);font-variant-numeric:tabular-nums}
.vf-btn{position:absolute;top:calc(39vh - 26px);display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--linea-o);background:rgba(0,22,33,.85);color:var(--blanco);cursor:pointer;transition:background .2s}
.vf-btn:hover{background:var(--naranja);color:var(--azul)}
.vf-btn svg{width:24px;height:24px}
.vf-ant{left:-8px}.vf-sig{right:-8px}
@media (min-width:1100px){.vf-ant{left:-70px}.vf-sig{right:-70px}}

/* --- Preguntas */
.preguntas{display:grid;gap:12px;max-width:880px}
.preguntas details{border:1px solid var(--linea-c);background:var(--blanco);transition:border-color .25s,box-shadow .25s}
.preguntas details[open]{border-color:#9AA8B2;box-shadow:inset 3px 0 0 var(--linea)}
.oscuro .preguntas details,.oscuro-2 .preguntas details{border-color:var(--linea-o);background:var(--azul-2)}
.oscuro .preguntas details[open],.oscuro-2 .preguntas details[open]{border-color:rgba(255,255,255,.3)}
.preguntas summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 28px;gap:16px;align-items:center;padding:20px 22px;font-weight:700;font-size:1.08rem}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{content:"";width:16px;height:16px;justify-self:center;background:linear-gradient(currentColor,currentColor) center/16px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 16px no-repeat;transition:transform .35s var(--curva)}
.preguntas details[open] summary::after{transform:rotate(45deg)}
.preguntas .respuesta{padding:0 22px 20px;max-width:72ch}
.preguntas details[open] .respuesta{animation:baja .4s var(--curva)}
.preguntas .respuesta p:last-child{margin:0}

/* --- Migas */
.migas ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4em;font-size:.88rem;color:var(--niebla);margin-bottom:1.2rem}
.migas li{display:inline-flex;align-items:center}
.migas li+li::before{content:"";width:6px;height:6px;margin-right:.55em;border-top:1.5px solid var(--ico);border-right:1.5px solid var(--ico);transform:rotate(45deg)}
.migas a{text-decoration:none}
.migas a:hover{color:var(--blanco)}

/* --- Franja de llamado a la acción a mitad de página */
.cta-banda{position:relative;overflow:hidden;background:linear-gradient(100deg,#03263A,#001621 55%);border-block:1px solid var(--linea-o)}
.cta-banda::before{content:"";position:absolute;inset:0 auto 0 -40px;width:260px;opacity:.5;background:repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 2px,transparent 2px 16px);clip-path:polygon(0 0,70% 0,100% 100%,0 100%);pointer-events:none}
.cb-rejilla{position:relative;display:grid;gap:18px 32px;align-items:center;padding-block:clamp(2rem,4vw,2.8rem)}
@media (min-width:900px){.cb-rejilla{grid-template-columns:auto 1fr auto}}
.cb-ico{width:64px;height:64px;display:grid;place-items:center;background:rgba(255,255,255,.06);color:var(--blanco);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.cb-ico svg{width:30px;height:30px}
.cb-titulo{margin:0 0 .3rem;font-size:clamp(1.3rem,2.2vw,1.65rem);font-weight:800;line-height:1.2;letter-spacing:-.01em}
.cb-texto{margin:0;color:#D5DEE4;max-width:60ch}

/* --- Franja de confianza y pie */
.confianza{background:linear-gradient(90deg,#02141D,#032231 50%,#02141D);border-top:1px solid var(--linea-o)}
.confianza-lista{list-style:none;display:grid;gap:4px;padding-block:22px}
@media (min-width:700px){.confianza-lista{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.confianza-lista{grid-template-columns:repeat(4,1fr)}}
.confianza-lista li{display:flex;align-items:center;gap:14px;padding:12px 8px}
.confianza-lista svg{width:42px;height:42px;padding:9px;flex:none;color:#D7E0E6;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.confianza-lista strong{display:block;font-size:.98rem}
.confianza-lista span span,.confianza-lista span{font-size:.88rem;color:var(--niebla)}
.confianza-lista strong{color:var(--blanco)}
.pie{position:relative;overflow:hidden;background:#000E15;padding-block:clamp(3.5rem,7vw,5rem) 1.6rem;color:#C9D3DA;font-size:.95rem}
.pie::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--filete)}
/* Símbolo 8K del sistema gráfico, casi transparente: reconocimiento sin depender del logo (manual de marca) */
.pie::after{content:"";position:absolute;right:-3%;bottom:-6%;width:min(58vw,720px);aspect-ratio:360/137;background:linear-gradient(120deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  -webkit-mask:url(/assets/img/simbolo-8k.svg) center/contain no-repeat;mask:url(/assets/img/simbolo-8k.svg) center/contain no-repeat;pointer-events:none}
.pie .contenedor{position:relative;z-index:1}
.pie-rejilla{display:grid;gap:36px}
@media (min-width:700px){.pie-rejilla{grid-template-columns:1fr 1fr}.pie-marca{grid-column:1/-1}}
@media (min-width:1100px){.pie-rejilla{grid-template-columns:1.45fr 1fr 1fr 1.05fr .8fr}.pie-marca{grid-column:auto}}
.pie-logo{display:block;width:250px;max-width:100%;margin-bottom:1.4rem}
.pie-marca>p{max-width:46ch}
.pie h2{display:flex;align-items:center;gap:.6em;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--niebla);margin-bottom:1rem}
.pie h2::before{content:"";width:16px;height:2px;background:linear-gradient(90deg,#fff,#5E6870)}
.pie ul{list-style:none;display:grid;gap:.1em}
.pie a{text-decoration:none;transition:color .2s}
.pie nav a,.pie-contacto a,.pie-contacto span{display:inline-flex;align-items:center;gap:.6em;padding:.3em 0}
/* Enlaces sin icono: al pasar el cursor aparece un trazo corto blanco a gris */
.pie nav a{position:relative;transition:color .2s,transform .3s var(--curva)}
.pie nav a::before{content:"";position:absolute;left:-16px;top:50%;width:10px;height:2px;background:linear-gradient(90deg,#fff,#5E6870);opacity:0;transform:scaleX(0);transform-origin:right;transition:opacity .25s,transform .3s var(--curva)}
.pie nav a:hover{transform:translateX(8px)}
.pie nav a:hover::before{opacity:1;transform:scaleX(1)}
.pie-contacto svg{width:16px;height:16px;color:var(--ico);flex:none}
.pie nav a:hover,.pie-contacto a:hover{color:var(--blanco)}
.pie-contacto{margin-top:1.1rem}
.pie-redes{display:flex;gap:8px;margin:1.3rem 0 0}
.pie-redes a{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--linea-o);color:#C9D3DA;transition:background .25s,color .25s,border-color .25s,transform .25s var(--curva)}
.pie-redes a:hover{background:var(--blanco);border-color:var(--blanco);color:var(--azul);transform:translateY(-3px)}
.pie-redes svg{width:19px;height:19px}
.pie-legal{margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--linea-o);font-size:.86rem;color:var(--niebla);display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;align-items:center}
.pie-legal p{margin:0}
.pie-creditos{margin-left:auto;font-size:.74rem;letter-spacing:.04em;color:#7F8E99}  /* a la derecha: el botón de volver arriba va a la izquierda */

/* --- Volver arriba: flotante a la izquierda, con anillo que marca cuánto se ha leído */
.subir-flotante{position:fixed;left:max(18px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));z-index:40;display:grid;place-items:center;width:54px;height:54px;padding:0;border:0;border-radius:50%;
  background:rgba(0,14,21,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--blanco);cursor:pointer;box-shadow:0 14px 32px -12px rgba(0,0,0,.75);
  opacity:0;visibility:hidden;transform:translateY(22px) scale(.8);transition:opacity .35s,transform .5s var(--curva),visibility 0s linear .5s,background .25s}
.subir-flotante.visible{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.subir-flotante:hover{background:var(--azul-3);transform:translateY(-4px)}
.subir-flotante:active{transform:translateY(-1px) scale(.96)}
.sf-anillo{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.sf-anillo circle{fill:none;stroke-width:2.5}
.sf-pista{stroke:rgba(255,255,255,.12)}
.sf-avance{stroke:url(#sf-degradado);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--avance,0) * 100)}
.subir-flotante:hover .sf-pista{stroke:rgba(255,255,255,.22)}
.sf-flecha{display:block;width:22px;height:22px;overflow:hidden}
.sf-flecha svg{width:22px;height:22px}
.subir-flotante:hover .sf-flecha svg,.subir-flotante.despega .sf-flecha svg{animation:sf-sube .7s var(--curva)}
@keyframes sf-sube{0%{transform:none}45%{transform:translateY(-140%);opacity:0}46%{transform:translateY(140%);opacity:0}100%{transform:none;opacity:1}}

/* --- Botones flotantes y barra móvil */
.flotantes{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:40;display:grid;gap:12px;transition:opacity .3s,transform .3s}
.flotantes.retirado{opacity:0;transform:translateY(16px);pointer-events:none}
.flotante{display:flex;align-items:center;justify-content:flex-end;gap:10px;text-decoration:none}
.flotante-icono{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;box-shadow:0 10px 30px -8px rgba(0,0,0,.6);position:relative}
.flotante-icono svg{width:28px;height:28px}
.flotante-wa .flotante-icono{background:#25D366;color:#fff}
.flotante-wa .flotante-icono::before,.flotante-wa .flotante-icono::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:onda 2.6s infinite}
.flotante-wa .flotante-icono::after{animation-delay:1.3s}
.flotante-tel .flotante-icono{background:var(--naranja);color:var(--azul)}
.flotante-texto{background:var(--blanco);color:var(--azul);font-weight:700;font-size:.92rem;padding:.55em .9em;white-space:nowrap;box-shadow:var(--sombra);max-width:0;overflow:hidden;opacity:0;transition:max-width .4s var(--curva),opacity .3s,padding .3s;padding-inline:0}
.flotante:hover .flotante-texto,.flotante:focus-visible .flotante-texto,.flotantes.asoma .flotante-wa .flotante-texto{max-width:260px;opacity:1;padding-inline:.9em}
@keyframes onda{from{transform:scale(1);opacity:.7}to{transform:scale(1.65);opacity:0}}
.barra{display:none}
@media (max-width:760px){
  .flotantes{display:none}
  .barra{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:1fr 1.3fr;gap:8px;padding:10px max(12px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-bottom));background:#000E15;border-top:1px solid var(--linea-o);animation:sube .6s .8s var(--curva) both}
  .barra::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--filete)}
  .subir-flotante{left:12px;bottom:calc(82px + env(safe-area-inset-bottom));width:46px;height:46px}
  .sf-flecha,.sf-flecha svg{width:20px;height:20px}
  .barra .btn{min-height:48px;width:100%}
  .pie nav a,.pie-contacto a,.pie-contacto span{min-height:44px}
  body{padding-bottom:72px}
}
@keyframes sube{from{transform:translateY(110%)}}

/* --- Rendimiento: las secciones fuera de pantalla no se maquetan ni pintan hasta que se acercan */
.seccion,.cta-banda,.confianza,.pie,.marcas{content-visibility:auto;contain-intrinsic-size:auto 900px}
/* Las secciones con videos son livianas y se pintan siempre: así los lectores de contraste ven su fondo real */
.seccion:has(.fila-videos){content-visibility:visible}

/* --- Aparición al hacer scroll */
.js .aparecer{opacity:0;transform:translateY(26px);transition:opacity .9s var(--curva),transform .9s var(--curva);transition-delay:var(--demora,0s)}
.js .aparecer.visible{opacity:1;transform:none}

/* --- Módulos decorativos de la geometría 8K */
.modulos{display:flex;gap:8px}
.modulos i{width:34px;height:12px;background:var(--naranja);transform:skewX(-35deg)}
.modulos i:nth-child(2){opacity:.55}
.modulos i:nth-child(3){opacity:.25}

/* --- Tarjetas del blog */
.tarjeta-blog .marco-foto{aspect-ratio:16/10}
.tarjeta-blog h3{font-size:1.18rem}
.tarjeta-blog p{font-size:.96rem;color:var(--niebla)}
.hielo .tarjeta-blog p,.blanco .tarjeta-blog p{color:var(--gris)}
.tarjeta-blog .tb-cat{display:inline-flex;align-items:center;gap:.45em;margin:0 0 .7rem;font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#C9D3DA}
.hielo .tarjeta-blog .tb-cat,.blanco .tarjeta-blog .tb-cat{color:var(--gris)}
.tb-cat svg{width:16px;height:16px}
.tarjeta-blog .enlace-flecha{font-size:.95rem}

/* --- Marcas (franja de confianza para pauta) */
.marcas{padding-block:clamp(2.4rem,5vw,3.4rem);background:var(--blanco);color:var(--azul);overflow:hidden}
.marcas-titulo{display:flex;align-items:center;justify-content:center;gap:.8em;margin:0 0 1.5rem;padding-inline:18px;font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);text-align:center}
.marcas-titulo::before,.marcas-titulo::after{content:"";width:46px;height:2px;flex:none;background:linear-gradient(90deg,transparent,var(--azul))}
.marcas-titulo::after{background:linear-gradient(90deg,var(--azul),transparent)}
.marcas-pista{display:flex;width:max-content;animation:desfile 48s linear infinite}
.marcas:hover .marcas-pista{animation-play-state:paused}
.marcas ul{list-style:none;display:flex;align-items:center}
.marcas li{display:grid;place-items:center;width:170px;height:76px;padding:0 24px}
.marcas img{max-height:50px;width:auto;filter:grayscale(1);opacity:.6;mix-blend-mode:multiply;transition:filter .35s,opacity .35s,transform .35s var(--curva)}
.marcas li:hover img{filter:none;opacity:1;transform:scale(1.06)}
@keyframes desfile{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marcas-pista{flex-wrap:wrap;width:auto;justify-content:center}.marcas ul+ul{display:none}.marcas ul{flex-wrap:wrap;justify-content:center}}

/* --- Barra de progreso de lectura (solo navegadores con animaciones ligadas al scroll) */
@supports (animation-timeline:scroll()){
  .cab-progreso{position:absolute;left:0;right:0;bottom:-1px;height:2px;transform-origin:left;background:linear-gradient(90deg,#5E6870,#C9D3DA 60%,#fff);
    animation:progreso linear both;animation-timeline:scroll(root)}
  @keyframes progreso{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .aparecer{opacity:1;transform:none}
  .js .revelar img{--z:1;clip-path:none}
  .js .revelar figcaption{opacity:1}
  .subir-flotante{transition:none}
  .js .cabeza-sec:not(.visible)>h2::after,.js .texto:not(.visible)>h2::after,.js .titulo-linea:not(.visible)::after{transform:none}
}