/* =====================================================================
   WiFri — Internet & Comunicación Digital
   Hoja de estilo única. Tokens del Brandbook_Wifri.pdf.
   ===================================================================== */

/* ---------- Tipografías autoalojadas ---------- */
@font-face{font-family:'Poppins';src:url('../fonts/poppins-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  /* Color — brandbook */
  --azul:#101f45;          /* primario · Pantone 534 C */
  --cian:#38C6FF;          /* secundario · Pantone 297 C */
  --cian-luz:#8FE1FF;      /* cian claro: uso sobre fondos oscuros */
  /* PROPUESTA — requiere aprobación: derivados no definidos en el brandbook */
  --azul-900:#080f24;
  --azul-700:#0d1a39;
  --cian-800:#0a6f99;      /* cian oscurecido: contraste AA sobre blanco */
  --tinta:#14181f;
  --gris:#5a6272;
  --gris-claro:#e7edf7;
  --blanco:#ffffff;
  --linea:#dde4ef;

  /* Tipografía — Poppins títulos, Montserrat texto (PROPUESTA de jerarquía) */
  --f-titulo:'Poppins','Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --f-texto:'Montserrat','Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;

  /* Escala tipográfica */
  --t-hero:clamp(2rem,5.2vw,3.75rem);
  --t-h2:clamp(1.5rem,3.2vw,2.5rem);
  --t-h3:clamp(1.125rem,1.7vw,1.4rem);
  --t-base:1rem;
  --t-sm:.875rem;
  --t-xs:.75rem;

  /* Espaciado */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px;
  --s-5:48px; --s-6:64px; --s-7:96px;
  --pad-seccion:96px;
  --ancho:1180px;

  /* Radios y sombras */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-full:999px;
  --sombra:0 6px 28px rgba(8,15,36,.16);
  --sombra-alta:0 16px 48px rgba(8,15,36,.24);

  /* Logotipo — altura fija, ancho automático: la proporción nunca se altera */
  --logo-h:38px;
  --logo-h-movil:30px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  font-family:var(--f-texto);font-size:var(--t-base);line-height:1.65;
  color:var(--tinta);background:var(--blanco);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:var(--azul);text-decoration:none}
:focus-visible{outline:3px solid var(--cian-800);outline-offset:3px;border-radius:4px}
.salta{position:absolute;left:-9999px;top:0}
.salta:focus{left:8px;top:8px;z-index:200;background:var(--blanco);color:var(--azul);padding:12px 18px;border-radius:var(--r-sm);box-shadow:var(--sombra-alta)}

h1,h2,h3{font-family:var(--f-titulo);line-height:1.15;font-weight:700;letter-spacing:-.01em}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3)}
p{max-width:62ch}

.env{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 var(--s-3)}
.seccion{padding:var(--pad-seccion) 0}
.seccion--gris{background:var(--gris-claro)}
.seccion--azul{background:var(--azul);color:var(--blanco)}
.seccion--azul h2,.seccion--azul h3{color:var(--blanco)}

.eyebrow{
  font-family:var(--f-titulo);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cian-800);
  margin-bottom:var(--s-2);
}
.seccion--azul .eyebrow,.sol .eyebrow{color:var(--cian-luz)}
.hero:not(.hero--claro) .eyebrow{color:#8FE1FF}
.subtitulo{color:var(--gris);margin-top:var(--s-2);font-size:1.05rem}
.seccion--azul .subtitulo{color:#c3d1ea}
/* Cian claro sobre fondos oscuros */
.seccion--azul,
.hero:not(.hero--claro),
.cifras,
.pie,
.avales,
.demo,
.sol,
.tarjeta-cta{--cian:var(--cian-luz)}
/* las pantallas claras del demo vuelven al cian de marca */
.pant:not(.pant--noche){--cian:#64C7F2}

.regla{width:56px;height:4px;background:var(--cian);border-radius:2px;margin:var(--s-3) 0 var(--s-4)}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-titulo);font-weight:600;font-size:.95rem;
  padding:15px 30px;border-radius:var(--r-full);border:2px solid transparent;
  cursor:pointer;transition:transform .18s ease,background .18s ease,color .18s ease;
  text-align:center;
}
.btn:hover{transform:translateY(-2px)}
.btn--primario{background:var(--cian);color:var(--azul)}
.btn--primario:hover{background:#8ad6f7}
.btn--secundario{background:transparent;color:var(--blanco);border-color:rgba(255,255,255,.55)}
.btn--secundario:hover{background:rgba(255,255,255,.12);border-color:var(--blanco)}
.btn--solido{background:var(--azul);color:var(--blanco)}
.btn--solido:hover{background:var(--azul-700)}
.btn--linea{background:transparent;color:var(--azul);border-color:var(--azul)}
.btn--linea:hover{background:var(--azul);color:var(--blanco)}

/* ---------- Encabezado ---------- */
.encabezado{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:rgba(34,57,113,.96);backdrop-filter:blur(8px);
  transition:box-shadow .2s ease;
}
.encabezado.fija{box-shadow:0 2px 18px rgba(0,0,0,.22)}
.encabezado .env{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center}
.logo img{height:var(--logo-h);width:auto} /* proporción intacta */
.nav{display:flex;align-items:center;gap:var(--s-4)}
.nav a{
  color:var(--blanco);font-family:var(--f-titulo);font-weight:600;font-size:.9rem;
  padding:6px 0;border-bottom:2px solid transparent;transition:border-color .18s ease;
}
.nav a:hover,.nav a:focus-visible{border-bottom-color:var(--cian)}
.nav .btn{padding:11px 22px;font-size:.85rem}
.hamburguesa{
  display:none;background:none;border:0;cursor:pointer;padding:10px;
  width:46px;height:46px;
}
.hamburguesa span{display:block;height:2px;background:var(--blanco);margin:5px 0;border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.hamburguesa[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguesa[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:min(100svh,780px);display:flex;align-items:center;
  padding:140px 0 var(--s-7);color:var(--blanco);overflow:hidden;
}
.hero__fondo{position:absolute;inset:0;z-index:0}
.hero__fondo img,.hero__fondo video{width:100%;height:100%;object-fit:cover;object-position:72% 26%}
.hero__fondo::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(18,31,63,.95) 0%,rgba(20,35,72,.88) 40%,rgba(28,47,94,.45) 66%,rgba(34,57,113,.06) 100%);
}
.hero .env{position:relative;z-index:1}
.hero h1{font-size:var(--t-hero);max-width:16ch}
.hero h1 em{font-style:normal;color:var(--cian)}
.hero__texto{margin-top:var(--s-3);font-size:1.1rem;color:#dbe5f5;max-width:54ch}
.hero__acciones{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-5)}

/* ---------- Rejillas ---------- */
.rejilla{display:grid;gap:var(--s-4)}
.rejilla--2{grid-template-columns:repeat(2,1fr)}
.rejilla--3{grid-template-columns:repeat(3,1fr)}
.rejilla--modulos{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s-3)}

/* ---------- Tarjetas de solución ---------- */
.solucion{
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sombra);
}
.solucion__img{aspect-ratio:16/9;overflow:hidden;background:var(--azul)}
.solucion__img img{width:100%;height:100%;object-fit:cover}
.solucion__cuerpo{padding:var(--s-4);display:flex;flex-direction:column;flex:1}
.etiqueta{
  display:inline-block;align-self:flex-start;
  font-family:var(--f-titulo);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  background:var(--gris-claro);color:var(--azul);
  padding:6px 14px;border-radius:var(--r-full);margin-bottom:var(--s-2);
}
.solucion h3{margin-bottom:var(--s-1)}
.beneficio{font-weight:600;color:var(--cian-800);margin-bottom:var(--s-2)}
.solucion p{color:var(--gris);font-size:.95rem}
.lista{list-style:none;margin-top:var(--s-3);display:grid;gap:10px}
.lista li{position:relative;padding-left:28px;font-size:.92rem;color:var(--tinta)}
.lista li::before{
  content:'';position:absolute;left:0;top:.45em;width:14px;height:8px;
  border-left:2.5px solid var(--cian-800);border-bottom:2.5px solid var(--cian-800);
  transform:rotate(-45deg);
}

/* ---------- Pasos ---------- */
.bloque-pasos + .bloque-pasos{margin-top:var(--s-6)}
.bloque-pasos h3{color:var(--blanco);margin-bottom:var(--s-4)}
.paso{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-md);padding:var(--s-4);
}
.paso{display:flex;flex-direction:column}
.paso__tel{
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  border-radius:var(--r-md);margin:calc(var(--s-4) * -1) calc(var(--s-4) * -1) var(--s-3);
  padding:var(--s-4) var(--s-4) 0;height:290px;overflow:hidden;
  display:flex;align-items:flex-start;justify-content:center;
}
.paso__tel img{
  width:auto;height:auto;max-height:330px;max-width:74%;
  border-radius:18px;filter:drop-shadow(0 10px 26px rgba(0,0,0,.32));
}
.paso__num{
  font-family:var(--f-titulo);font-size:2rem;font-weight:700;
  color:var(--cian);line-height:1;margin-bottom:var(--s-2);display:block;
}
.paso h4{font-family:var(--f-titulo);font-size:1.05rem;margin-bottom:6px;color:var(--blanco)}
.paso p{color:#c3d1ea;font-size:.92rem;margin:0}

/* ---------- Módulos ---------- */
.modulo{
  background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--r-md);padding:var(--s-3);transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease;
  display:flex;gap:16px;align-items:flex-start;
}
.modulo:hover{box-shadow:var(--sombra);transform:translateY(-2px);border-color:#c9dcf3}
.modulo:hover .modulo__icono{background:var(--azul)}
.modulo:hover .modulo__icono svg{stroke:var(--cian)}
.modulo h3{font-size:1rem;margin-bottom:4px;color:var(--azul)}
.modulo p{font-size:.88rem;color:var(--gris);margin:0}
.modulo__icono{
  flex:none;width:46px;height:46px;border-radius:12px;background:#e6f5fd;
  display:grid;place-items:center;transition:background .18s ease;
}
.modulo__icono svg{
  width:24px;height:24px;fill:none;stroke:var(--azul);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .18s ease;
}

/* ---------- Prueba ---------- */
.prueba{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.prueba__item{border-top:3px solid var(--cian);padding-top:var(--s-3)}
.prueba__item strong{display:block;font-family:var(--f-titulo);font-size:1.05rem;margin-bottom:6px}
.prueba__item p{font-size:.9rem;color:#c3d1ea;margin:0}

.premios{list-style:none;display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:var(--s-4)}
.premio{
  position:relative;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-md);font-size:.88rem;color:#dbe5f5;
  display:flex;flex-direction:column;padding:var(--s-2);
}
.premio::before{
  content:attr(data-anio);position:absolute;z-index:2;top:-14px;left:-12px;
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(150deg,#f6d383 0%,#e3ab34 52%,#c98d15 100%);
  color:#4a3405;font-family:var(--f-titulo);font-weight:700;font-size:.85rem;letter-spacing:-.01em;
  border:3px solid #f9e3ab;box-shadow:0 8px 18px rgba(0,0,0,.38);
}
.premio__marco{
  display:block;aspect-ratio:4/3;padding:var(--s-2);
  background:#101d3d;border-radius:calc(var(--r-md) - 4px);overflow:hidden;
}
.premio__marco img{width:100%;height:100%;object-fit:contain;border-radius:6px;display:block}
.premio__txt{padding:var(--s-3) var(--s-2) var(--s-2)}
.premios b{color:var(--cian);font-family:var(--f-titulo);display:block;font-size:.78rem;letter-spacing:.06em;margin-bottom:4px}
.nota-premios{font-size:.85rem;color:#a8b8d6;margin-top:var(--s-3);font-style:italic}

/* ---------- Cobertura ---------- */
.estados{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s-4);list-style:none}
.estados li{
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-full);
  padding:11px 22px;font-family:var(--f-titulo);font-weight:600;font-size:.92rem;color:var(--azul);
  display:flex;align-items:center;gap:9px;
}
.estados li::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--cian)}
.espacios{margin-top:var(--s-5);color:var(--gris);font-size:.95rem}
.espacios strong{color:var(--azul);font-family:var(--f-titulo)}

/* ---------- Contacto ---------- */
.contacto{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-6);align-items:center}
.contacto__datos{list-style:none;display:grid;gap:var(--s-2);margin-top:var(--s-4)}
.contacto__datos a{color:var(--blanco);font-size:1.05rem;display:inline-flex;align-items:center;gap:12px}
.contacto__datos a:hover{color:var(--cian)}
.contacto__datos svg{flex:none;width:20px;height:20px;fill:var(--cian)}
.tarjeta-cta{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-lg);padding:var(--s-5);
}
.tarjeta-cta h3{margin-bottom:var(--s-2)}
.tarjeta-cta p{color:#c3d1ea;font-size:.95rem}
.tarjeta-cta .btn{width:100%;justify-content:center;margin-top:var(--s-2)}

/* ---------- Pie ---------- */
.pie{background:var(--azul-900);color:#a8b8d6;padding:var(--s-6) 0 var(--s-4);font-size:.88rem}
.pie__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s-5);padding-bottom:var(--s-5);border-bottom:1px solid rgba(255,255,255,.12)}
.pie__logo img{height:34px;width:auto;margin-bottom:var(--s-2)}
.pie h4{font-family:var(--f-titulo);color:var(--blanco);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--s-2)}
.pie ul{list-style:none;display:grid;gap:9px}
.pie a{color:#a8b8d6}
.pie a:hover{color:var(--cian)}
.pie__bajo{padding-top:var(--s-4);display:flex;flex-wrap:wrap;gap:var(--s-2);justify-content:space-between;font-size:.8rem}

/* ---------- Aparición ---------- */
/* Progresivo: visible por defecto. Solo se oculta si el JS está activo. */
.js .revelar{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.js .revelar.visible{opacity:1;transform:none}

/* =====================================================================
   Puntos de quiebre — 1280 / 768 / 360
   ===================================================================== */
@media(max-width:1280px){
  :root{--pad-seccion:80px}
}
@media(max-width:900px){
  .contacto{grid-template-columns:1fr;gap:var(--s-5)}
  .rejilla--2{grid-template-columns:1fr}
  .pie__top{grid-template-columns:1fr 1fr;gap:var(--s-4)}
  .pie__logo{grid-column:1/-1}
}
@media(max-width:560px){
  .pie__top{grid-template-columns:1fr}
  .pie a,.pie p{overflow-wrap:anywhere}
}
@media(max-width:768px){
  .paso__tel{height:250px}
  .paso__tel img{max-width:62%}
  :root{--pad-seccion:56px;--logo-h:var(--logo-h-movil)}
  html{scroll-padding-top:70px}
  .encabezado .env{height:64px}
  .hamburguesa{display:block}
  .nav{
    position:fixed;inset:64px 0 auto 0;background:var(--azul);
    flex-direction:column;align-items:stretch;gap:0;
    padding:var(--s-2) var(--s-3) var(--s-4);
    transform:translateY(-130%);transition:transform .28s ease;
    box-shadow:0 14px 30px rgba(0,0,0,.3);max-height:calc(100svh - 64px);overflow-y:auto;
  }
  .nav.abierta{transform:translateY(0)}
  .nav a{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12)}
  .nav .btn{margin-top:var(--s-3);justify-content:center;padding:14px 22px}
  .hero{min-height:auto;padding:118px 0 var(--s-6)}
  .hero__acciones .btn{flex:1 1 100%;justify-content:center}
  .rejilla--3{grid-template-columns:1fr}
  .premios{grid-template-columns:1fr}
}
@media(max-width:360px){
  :root{--s-3:18px}
  .btn{padding:13px 22px;font-size:.9rem}
}

/* ---------- Impresión ---------- */
@media print{
  .encabezado,.hero__fondo,.hamburguesa,.btn{display:none}
  body{color:#000;background:#fff}
}

/* =====================================================================
   BLOQUES NUEVOS — cifras, comparativa, tablero, sectores
   ===================================================================== */

/* ---------- Barra de cifras ---------- */
.cifras{background:var(--azul-900);color:var(--blanco);padding:var(--s-5) 0}
.cifras__eyebrow{
  display:flex;align-items:center;gap:10px;justify-content:center;
  font-family:var(--f-titulo);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cian);margin-bottom:var(--s-4);
}
.cifras__lista{
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3);
}
.cifras__lista li{
  text-align:center;padding:0 var(--s-2);
  border-left:1px solid rgba(255,255,255,.14);
}
.cifras__lista li:first-child{border-left:0}
.cifras__lista strong{
  display:block;font-family:var(--f-titulo);font-weight:700;
  font-size:clamp(1.6rem,3.4vw,2.4rem);color:var(--cian);line-height:1.1;
}
.cifras__lista span{display:block;font-size:.82rem;color:#c3d1ea;margin-top:6px;line-height:1.4}
.cifras__frase{
  max-width:34ch;margin:0 auto;text-align:center;
  font-family:var(--f-titulo);font-weight:600;line-height:1.35;
  font-size:clamp(1.15rem,2.4vw,1.75rem);color:var(--blanco);text-wrap:pretty;
}

/* ---------- Tabla comparativa ---------- */
.tabla-comp{
  margin-top:var(--s-6);background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sombra);
}
.tc__cab,.tc__fila{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.15fr}
.tc__cab{background:var(--gris-claro);border-bottom:2px solid var(--linea)}
.tc__cab>div{padding:var(--s-3) var(--s-2);text-align:center}
.tc__cab>div:first-child{text-align:left}
.tc__cab h3{font-size:1.05rem;color:var(--azul);margin-bottom:2px}
.tc__cab p{font-size:.78rem;color:var(--gris);margin:0 auto;max-width:20ch}
.tc__destaca{background:var(--azul);color:var(--blanco);position:relative}
.tc__cab .tc__destaca h3{color:var(--blanco)}
.tc__cab .tc__destaca p{color:#c3d1ea}
.tc__fila{border-top:1px solid var(--linea)}
.tc__fila>div{padding:16px var(--s-2);display:flex;align-items:center;justify-content:center;font-size:.9rem}
.tc__fila>div[role="rowheader"]{justify-content:flex-start;text-align:left;font-weight:600;color:var(--tinta);padding-left:var(--s-3)}
.tc__fila>div[data-si],.tc__fila>div[data-no]{font-size:0}
.tc__fila>div[data-si]::before,.tc__fila>div[data-no]::before{
  content:'';width:26px;height:26px;border-radius:50%;display:block;
  background-repeat:no-repeat;background-position:center;background-size:16px 16px;
}
.tc__fila>div[data-si]::before{
  background-color:#dff5e4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a6b32' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.tc__fila>div[data-no]::before{
  background-color:#f0f2f6;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a4' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
.tc__fila>.tc__destaca[data-si]::before{
  background-color:var(--cian);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23223971' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* ---------- Tablero ---------- */
.tablero__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-4);margin-top:var(--s-6)}
.tablero__pieza{
  background:var(--gris-claro);border:1px solid var(--linea);border-radius:var(--r-lg);
  padding:var(--s-4);overflow:hidden;
}
.tablero__pieza--ancha{grid-column:1/-1}
.tablero__pieza img{width:100%;height:auto;border-radius:var(--r-md);box-shadow:var(--sombra-alta)}
.tablero__pieza figcaption{
  margin-top:var(--s-3);font-size:.85rem;color:var(--gris);
  font-family:var(--f-titulo);font-weight:600;text-align:center;
}
.pie-nota{margin-top:var(--s-3);font-size:.8rem;color:var(--gris);font-style:italic;text-align:center;max-width:none}

/* ---------- Sectores ---------- */
.sectores{
  list-style:none;display:grid;gap:var(--s-3);margin-top:var(--s-5);
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
}
.sector{
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-md);
  padding:var(--s-3);display:flex;align-items:center;gap:14px;
  font-family:var(--f-titulo);font-weight:600;font-size:.92rem;color:var(--azul);
  transition:box-shadow .18s ease,transform .18s ease;
}
.sector:hover{box-shadow:var(--sombra);transform:translateY(-2px)}
.sector:hover .sector__ico{background:var(--azul)}
.sector:hover .sector__ico svg{stroke:var(--cian)}
.sector__ico{
  flex:none;width:42px;height:42px;border-radius:11px;background:#e6f5fd;
  display:grid;place-items:center;transition:background .18s ease;
}
.sector__ico svg{
  width:22px;height:22px;fill:none;stroke:var(--azul);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .18s ease;
}

@media(max-width:900px){
  .tablero__grid{grid-template-columns:1fr}
  .tablero__pieza--ancha{grid-column:auto}
  .cifras__lista{grid-template-columns:repeat(2,1fr);gap:var(--s-4)}
  .cifras__lista li:nth-child(odd){border-left:0}
}
@media(max-width:768px){
  .tabla-comp{overflow-x:auto}
  .tc__cab,.tc__fila{grid-template-columns:1.5fr .8fr .8fr 1fr;min-width:560px}
  .tc__cab h3{font-size:.9rem}
  .tc__cab p{font-size:.7rem}
  .tc__fila>div{font-size:.82rem;padding:13px 8px}
  .tc__fila>div[role="rowheader"]{padding-left:16px}
  .tablero__pieza{padding:var(--s-3)}
}

/* ---------- Páginas de producto ---------- */
.hero--producto h1{font-size:clamp(2rem,4.4vw,3.2rem)}
.incluye__grid{display:grid;grid-template-columns:minmax(240px,.72fr) minmax(0,1.6fr);gap:var(--s-5);align-items:center;margin-top:var(--s-5)}
.lista--grande li{font-size:1rem;padding-left:32px;margin-bottom:14px}
.lista--grande li::before{top:.5em;width:16px;height:9px;border-width:3px}
.nav a[aria-current="page"]{border-bottom-color:var(--cian)}
@media(max-width:900px){.incluye__grid{grid-template-columns:1fr;gap:var(--s-5)}}

/* =====================================================================
   UX/UI v2 — hero dividido, progreso, demo animada, CTA móvil
   ===================================================================== */

/* ---------- Progreso de lectura ---------- */
.progreso{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.12)}
.progreso i{display:block;height:100%;width:0;background:var(--cian);transition:width .1s linear}

/* ---------- Sección activa en la navegación ---------- */
.nav a:not(.btn)[aria-current="true"]{border-bottom-color:var(--cian)}

/* ---------- Hero de portada (foto a sangre) ---------- */
.hero--portada{
  min-height:min(94svh,760px);padding:calc(72px + var(--s-6)) 0 var(--s-7);
  background:var(--azul-900);
}
.hero--portada .hero__fondo img{object-position:50% 30%}
.hero--portada .hero__fondo::after{
  background:
    linear-gradient(96deg,rgba(16,29,60,.94) 0%,rgba(18,33,70,.86) 34%,rgba(24,42,86,.62) 58%,rgba(30,52,105,.34) 78%,rgba(34,57,113,.24) 100%),
    linear-gradient(0deg,rgba(16,26,54,.55) 0%,rgba(16,26,54,0) 46%);
}
.hero--portada .hero__copy{max-width:min(60ch,58%)}
@media(max-width:1100px){.hero--portada .hero__copy{max-width:min(60ch,78%)}}
.hero--portada h1{max-width:15ch}

/* ---------- Hero dividido (variante alterna) ---------- */
.hero--split{
  min-height:0;padding:calc(72px + var(--s-6)) 0 var(--s-7);
  background:
    radial-gradient(120% 90% at 82% 8%,rgba(100,199,242,.20) 0%,rgba(100,199,242,0) 55%),
    linear-gradient(155deg,var(--azul-900) 0%,var(--azul) 62%,#2a4485 100%);
}
.hero--split .hero__grid{
  display:grid;grid-template-columns:1.02fr .98fr;gap:var(--s-6);align-items:center;
  position:relative;z-index:1;
}
.hero__chip{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:var(--s-3);
  background:rgba(100,199,242,.14);border:1px solid rgba(100,199,242,.4);
  color:#e2f3fd;border-radius:var(--r-full);padding:8px 16px;
  font-family:var(--f-titulo);font-size:.78rem;font-weight:600;letter-spacing:.04em;white-space:nowrap;
}
.hero__pulso{
  flex:none;width:9px;height:9px;border-radius:50%;background:#4be08d;
  box-shadow:0 0 0 0 rgba(75,224,141,.7);animation:latido 2.4s ease-out infinite;
}
@keyframes latido{
  0%{box-shadow:0 0 0 0 rgba(75,224,141,.55)}
  70%{box-shadow:0 0 0 9px rgba(75,224,141,0)}
  100%{box-shadow:0 0 0 0 rgba(75,224,141,0)}
}
/* ===== Banner de avales (marquee) ===== */
.avales{
  background:var(--azul-900);color:#fff;overflow:hidden;
  padding:var(--s-4) 0;position:relative;
}
.avales::before,.avales::after{
  content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.avales::before{left:0;background:linear-gradient(90deg,var(--azul-900),rgba(22,38,76,0))}
.avales::after{right:0;background:linear-gradient(270deg,var(--azul-900),rgba(22,38,76,0))}
.avales__pista{
  display:flex;width:max-content;animation:avales-desliza 28s linear infinite;
}
.avales:hover .avales__pista{animation-play-state:paused}
.avales__grupo{display:flex;align-items:center;gap:var(--s-5,28px);padding-right:var(--s-5,28px)}
.avales__item{
  font-family:Montserrat,Poppins,system-ui,sans-serif;
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:#dce8fb;
}
.avales__punto{
  width:6px;height:6px;border-radius:999px;background:var(--cian-luz);flex:0 0 auto;
  box-shadow:0 0 10px rgba(169,224,252,.55);
}
@keyframes avales-desliza{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@media (prefers-reduced-motion:reduce){
  .avales__pista{animation:none}
}
.hero__aval{
  margin-top:var(--s-4);font-size:.82rem;color:#a8bce0;max-width:46ch;
  padding-top:var(--s-3);border-top:1px solid rgba(255,255,255,.14);
}
.hero__media{position:relative}
.hero__media picture{display:block;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 26px 60px rgba(0,0,0,.4)}
.hero__media img{width:100%;height:auto}
.hero__tarjeta{
  position:absolute;left:-18px;bottom:-22px;display:flex;align-items:center;gap:14px;
  background:var(--blanco);border-radius:var(--r-md);padding:14px 20px;
  box-shadow:var(--sombra-alta);max-width:min(84%,320px);
}
.hero__tarjeta b{display:block;font-family:var(--f-titulo);font-size:.95rem;color:var(--azul);line-height:1.3}
.hero__tarjeta em{font-style:normal;font-size:.8rem;color:var(--gris)}
.hero__tarjeta-ico{
  flex:none;width:38px;height:38px;border-radius:50%;background:#dff5e4;display:grid;place-items:center;
}
.hero__tarjeta-ico svg{width:20px;height:20px;fill:none;stroke:#1a6b32;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Hero de páginas de producto ---------- */
.hero--producto{min-height:min(72svh,560px);padding:150px 0 var(--s-6)}
.hero--producto .hero__fondo::after{
  background:
    linear-gradient(100deg,rgba(18,31,63,.95) 0%,rgba(20,35,72,.9) 42%,rgba(28,47,94,.55) 70%,rgba(34,57,113,.22) 100%),
    linear-gradient(0deg,rgba(18,31,63,.6) 0%,rgba(18,31,63,0) 50%);
}

/* ---------- Demo animada (Cómo funciona) ---------- */
.demo__cab{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--s-3) var(--s-5);align-items:start;
}
.demo__cab .subtitulo{margin-bottom:0;max-width:46ch}
.demo__cab .regla{margin-bottom:var(--s-3)}

.demo__selector{display:flex;justify-content:flex-end;padding-top:6px}
.demo__tabs{
  display:inline-flex;gap:4px;padding:5px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-full);backdrop-filter:blur(6px);
}
.demo__tab{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-titulo);font-weight:600;font-size:.92rem;color:#b9c9e6;
  background:transparent;border:0;border-radius:var(--r-full);
  padding:13px 26px;cursor:pointer;white-space:nowrap;line-height:1;
  transition:background .18s cubic-bezier(.22,1,.36,1),color .18s ease,box-shadow .18s ease;
}
.demo__tab::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:currentColor;opacity:.4;transition:opacity .18s ease,box-shadow .18s ease;
}
.demo__tab:hover{color:var(--blanco);background:rgba(255,255,255,.09)}
.demo__tab[aria-selected="true"]{
  background:var(--cian);color:var(--azul-900);
  box-shadow:0 10px 24px rgba(100,199,242,.30);
}
.demo__tab[aria-selected="true"]::before{opacity:1;box-shadow:0 0 0 3px rgba(22,38,76,.16)}

.demo{margin-top:var(--s-5)}
.demo__panel{
  display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:var(--s-6);align-items:center;margin-top:var(--s-2);
}
.demo__panel + .demo__panel{margin-top:var(--s-6)}
.js .demo__panel[hidden]{display:none}
.demo__fono{position:relative;display:grid;place-items:center;padding:var(--s-2) 0}
.demo__ondas{position:absolute;width:340px;height:340px;display:none;place-items:center;pointer-events:none}
.js .demo__ondas{display:grid}
.demo__ondas i{
  position:absolute;width:100%;height:100%;border-radius:50%;
  border:1.5px solid rgba(100,199,242,.5);opacity:0;
  animation:onda 3.4s cubic-bezier(.22,1,.36,1) infinite;
}
.demo__ondas i:nth-child(2){animation-delay:1.1s}
.demo__ondas i:nth-child(3){animation-delay:2.2s}
@keyframes onda{0%{opacity:0;transform:scale(.3)}25%{opacity:.7}100%{opacity:0;transform:scale(1)}}
/* --- Maqueta de teléfono (HTML/CSS, sin capturas) --- */
.fono{
  position:relative;z-index:2;width:296px;max-width:100%;padding:11px;
  border-radius:48px;
  background:linear-gradient(150deg,#48557a 0%,#1a2440 36%,#0b1122 100%);
  box-shadow:0 34px 70px rgba(0,0,0,.48),0 4px 12px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.14);
}
.fono::before,.fono::after{
  content:"";position:absolute;left:-2.5px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.10));
}
.fono::before{top:118px;height:32px}
.fono::after{top:162px;height:56px}
.fono__pantalla{
  position:relative;border-radius:38px;overflow:hidden;background:#fff;
  aspect-ratio:9/19.3;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
}
.fono__isla{
  position:absolute;z-index:6;top:11px;left:50%;transform:translateX(-50%);
  width:84px;height:23px;border-radius:999px;background:#05080f;
}
.fono__inicio{
  position:absolute;z-index:6;bottom:8px;left:50%;transform:translateX(-50%);
  width:106px;height:4px;border-radius:999px;background:#fff;mix-blend-mode:difference;opacity:.75;
}

.demo__pant{
  position:absolute;inset:0;display:none;flex-direction:column;
  font-family:var(--f-texto);color:var(--tinta);text-align:left;background:#fff;
}
.demo__pant.activa{display:flex}
.js .demo__pant{display:flex;opacity:0;transform:scale(.985);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.js .demo__pant.activa{opacity:1;transform:none;pointer-events:auto}

.pant__estado{
  flex:0 0 auto;height:46px;display:flex;justify-content:space-between;align-items:center;
  padding:14px 22px 0;font-weight:700;font-size:11.5px;
}
.pant__estado>span{display:flex;align-items:center;gap:5px}
.pant__senal{display:inline-flex;align-items:flex-end;gap:1.5px;height:10px}
.pant__senal i{width:2.5px;border-radius:1px;background:currentColor}
.pant__senal i:nth-child(1){height:4px}
.pant__senal i:nth-child(2){height:6px}
.pant__senal i:nth-child(3){height:8px}
.pant__senal i:nth-child(4){height:10px}
.pant__senal--baja i:nth-child(4){opacity:.3}
.pant__bat{position:relative;width:20px;height:10px;border-radius:3px;border:1.2px solid currentColor}
.pant__bat::before{content:"";position:absolute;top:1.4px;left:1.4px;bottom:1.4px;width:62%;border-radius:1.5px;background:currentColor}
.pant__bat::after{content:"";position:absolute;right:-3.4px;top:3px;width:1.8px;height:4px;border-radius:0 2px 2px 0;background:currentColor}
.pant__cuerpo{flex:1;min-height:0;overflow:hidden;padding:2px 18px 22px}
.pant__cuerpo>*{flex:0 0 auto}
.pant__titulo{font-family:var(--f-titulo);font-weight:700;font-size:23px;letter-spacing:-.02em;margin:8px 0 4px}

/* Pantalla 1 — lista de redes */
.wifi__enc{display:flex;justify-content:space-between;align-items:center;margin:10px 0 14px}
.wifi__enc small{font-size:11px;color:var(--gris)}
.wifi__sw{width:38px;height:22px;border-radius:999px;background:var(--cian);position:relative}
.wifi__sw::after{content:"";position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.wifi__lista{display:grid;gap:3px;background:#f1f5fa;border-radius:16px;padding:4px}
.wifi__fila{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;background:#fff}
.wifi__fila b{display:block;font-family:var(--f-titulo);font-weight:600;font-size:12.5px;line-height:1.25}
.wifi__fila small{font-size:10px;color:var(--gris)}
.wifi__fila--sel{background:linear-gradient(115deg,rgba(100,199,242,.26),rgba(34,57,113,.10));box-shadow:inset 0 0 0 1.5px rgba(34,57,113,.30)}
.wifi__fila--tenue{opacity:.5}
.wifi__ok{width:20px;height:20px;border-radius:50%;background:var(--azul);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700;line-height:1}
.wifi__nota{display:flex;gap:8px;align-items:flex-start;margin-top:14px;padding:11px 12px;border-radius:12px;background:rgba(34,57,113,.06);font-size:10.5px;line-height:1.45;color:var(--gris)}
.wifi__nota b{color:var(--azul);font-family:var(--f-titulo)}

/* Pantalla — encabezado de marca */
.pant__marca{display:flex;align-items:center;gap:8px;padding:4px 0 14px;border-bottom:1px solid var(--linea);margin-bottom:14px}
.pant__marca img{height:18px;width:auto;display:block}
.pant__marca span{margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cian-800)}

/* Pantalla 2 gob — encuesta */
.enc__paso{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.enc__prog{height:4px;border-radius:999px;background:var(--gris-claro);margin:8px 0 16px;overflow:hidden}
.enc__prog i{display:block;height:100%;width:38%;border-radius:999px;background:linear-gradient(90deg,var(--azul),var(--cian))}
.enc__preg{font-family:var(--f-titulo);font-weight:600;font-size:15px;line-height:1.35;margin-bottom:14px}
.enc__ops{display:grid;gap:8px}
.enc__op{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;padding:12px;border-radius:12px;border:1.5px solid var(--linea);font-size:12.5px}
.enc__op i{width:16px;height:16px;border-radius:50%;border:1.5px solid #c3cdde;display:block}
.enc__op--sel{border-color:var(--azul);background:rgba(34,57,113,.05);font-weight:600}
.enc__op--sel i{border-color:var(--azul);background:var(--azul);box-shadow:inset 0 0 0 3px #fff}
.enc__btn{margin-top:16px;display:block;text-align:center;padding:13px;border-radius:999px;background:var(--azul);color:#fff;font-family:var(--f-titulo);font-weight:600;font-size:13px;box-shadow:0 8px 20px rgba(34,57,113,.28)}

/* Pantalla 3 gob — conectado */
.pant--noche{background:linear-gradient(168deg,#243b74 0%,#16264c 58%,#0f1930 100%);color:#fff}
.pant--noche .pant__cuerpo{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:0;padding-bottom:44px}
.exito__aro{width:104px;height:104px;border-radius:50%;background:rgba(100,199,242,.14);display:grid;place-items:center;box-shadow:0 0 0 14px rgba(100,199,242,.06)}
.exito__check{width:62px;height:62px;border-radius:50%;background:var(--cian);color:var(--azul-900);display:grid;place-items:center;font-size:30px;font-weight:700;line-height:1;box-shadow:0 10px 26px rgba(100,199,242,.4)}
.exito__tit{font-family:var(--f-titulo);font-weight:700;font-size:21px;line-height:1.25;margin:20px 0 6px}
.exito__sub{font-size:12px;line-height:1.5;color:rgba(255,255,255,.72);max-width:20ch}
.exito__dato{margin-top:22px;padding:12px 18px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.exito__dato b{display:block;font-family:var(--f-titulo);font-size:19px;letter-spacing:-.02em}
.exito__dato small{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6)}

/* Pantalla 2 tal — vacantes */
.vac__enc{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.vac__enc b{font-family:var(--f-titulo);font-size:15px}
.vac__enc small{font-size:10px;color:var(--cian-800);font-weight:700}
.vac__tarjeta{padding:14px;border-radius:16px;border:1px solid var(--linea);box-shadow:0 8px 20px rgba(34,57,113,.08);margin-bottom:10px;background:#fff}
.vac__top{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}
.vac__logo{width:38px;height:38px;border-radius:11px;background:linear-gradient(150deg,var(--azul),var(--cian));color:#fff;display:grid;place-items:center;font-family:var(--f-titulo);font-weight:700;font-size:13px}
.vac__top b{display:block;font-family:var(--f-titulo);font-size:13px;line-height:1.25}
.vac__top small{font-size:10.5px;color:var(--gris)}
.vac__chips{display:flex;flex-wrap:wrap;gap:6px;margin:11px 0}
.vac__chips span{font-size:10px;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--gris-claro);color:var(--azul)}
.vac__btn{display:block;text-align:center;padding:11px;border-radius:999px;background:var(--azul);color:#fff;font-family:var(--f-titulo);font-weight:600;font-size:12px}
.vac__tarjeta--tenue{opacity:.45;box-shadow:none}

/* Pantalla 3 tal — chat */
.pant--chat{background:#e9e2d9}
.pant--chat .pant__estado{background:#0f5f52;color:#fff;height:auto;padding:14px 22px 0}
.chat__enc{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:10px 18px 12px;background:#0f5f52;color:#fff}
.chat__av{width:32px;height:32px;border-radius:50%;background:var(--azul);display:grid;place-items:center}
.chat__av img{width:20px;height:auto;display:block}
.chat__enc b{display:block;font-family:var(--f-titulo);font-size:12.5px;line-height:1.2}
.chat__enc small{font-size:10px;color:rgba(255,255,255,.75)}
.chat__cuerpo{flex:1;min-height:0;overflow:hidden;padding:14px 14px 26px;display:flex;flex-direction:column;gap:8px}
.chat__cuerpo>*{flex:0 0 auto}
.chat__dia{align-self:center;font-size:9.5px;font-weight:700;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.7);color:var(--gris);margin-bottom:2px}
.chat__b{max-width:82%;padding:9px 11px;border-radius:12px;font-size:11.5px;line-height:1.45;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.chat__b--ellos{align-self:flex-start;background:#fff;border-top-left-radius:3px}
.chat__b--yo{align-self:flex-end;background:#d6f2c4;border-top-right-radius:3px}
.chat__b time{display:block;text-align:right;font-size:8.5px;color:var(--gris);margin-top:3px}

.demo__pasos{list-style:none;display:grid;gap:var(--s-2)}
.demo__paso{
  width:100%;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  text-align:left;font:inherit;color:#c3d1ea;cursor:pointer;position:relative;overflow:hidden;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-md);padding:var(--s-3) var(--s-3) calc(var(--s-3) + 3px);
  transition:background .2s ease,border-color .2s ease;
}
.demo__paso:hover{background:rgba(255,255,255,.1)}
.demo__paso[aria-current="true"]{background:rgba(100,199,242,.12);border-color:rgba(100,199,242,.5)}
.demo__num{font-family:var(--f-titulo);font-weight:700;font-size:1.6rem;line-height:1;color:rgba(255,255,255,.38)}
.demo__paso[aria-current="true"] .demo__num{color:var(--cian)}
.demo__paso b{display:block;font-family:var(--f-titulo);font-size:1.05rem;color:var(--blanco);margin-bottom:4px}
.demo__paso em{font-style:normal;font-size:.92rem}
.demo__barra{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.12)}
.demo__barra i{display:block;height:100%;width:0;background:var(--cian)}
.demo.corre .demo__paso[aria-current="true"] .demo__barra i{animation:avance 4.6s linear forwards}
@keyframes avance{from{width:0}to{width:100%}}

/* ---------- Comparativa: ayudas de lectura ---------- */
.tc__hint{display:none;font-size:.8rem;color:var(--gris);margin-top:var(--s-3);font-style:italic}
.tablero__pieza img{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.tablero__pieza:hover img{transform:scale(1.015)}

/* ---------- CTA fija en móvil ---------- */
.cta-movil{display:none}
@media(max-width:768px){
  .cta-movil{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
    position:fixed;left:0;right:0;bottom:0;z-index:120;
    padding:10px var(--s-3) calc(10px + env(safe-area-inset-bottom));
    background:rgba(22,38,76,.97);backdrop-filter:blur(8px);
    border-top:1px solid rgba(255,255,255,.14);
  }
  .cta-movil .btn{justify-content:center;padding:14px 12px;font-size:.9rem;min-height:48px}
  .cta-movil .btn--solido{background:transparent;color:var(--blanco);border-color:rgba(255,255,255,.5)}
  body{padding-bottom:82px}
  .tc__hint{display:block}
  .tabla-comp{overscroll-behavior-x:contain}
  .tc__fila>div[role="rowheader"]{
    position:sticky;left:0;background:var(--blanco);z-index:1;
    box-shadow:1px 0 0 var(--linea);
  }
  .demo__cab{grid-template-columns:1fr}
  .demo__selector{align-items:flex-start}
  .demo__tabs{width:100%}
  .demo__tab{flex:1;justify-content:center;padding:13px 12px;font-size:.85rem}
  .demo__panel{grid-template-columns:1fr;gap:var(--s-4)}
  .fono{width:270px}
  .demo__ondas{width:250px;height:250px}
  .hero--split{padding:calc(64px + var(--s-4)) 0 var(--s-6)}
  .hero--portada{min-height:auto;padding:calc(64px + var(--s-4)) 0 var(--s-6)}
  .hero--portada .hero__copy{max-width:none}
  .hero--portada .hero__fondo::after{
    background:
      linear-gradient(180deg,rgba(16,29,60,.86) 0%,rgba(18,33,70,.9) 45%,rgba(16,26,54,.94) 100%);
  }
  .hero--split .hero__grid{grid-template-columns:1fr;gap:var(--s-5)}
  .hero__tarjeta{left:auto;right:12px;bottom:-18px;padding:12px 16px}
}
@media(max-width:1000px) and (min-width:769px){
  .demo__cab{grid-template-columns:1fr}
  .demo__selector{align-items:flex-start}
  .demo__panel{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:var(--s-4)}
  .hero--split .hero__grid{grid-template-columns:1fr;gap:var(--s-5)}
}
@media print{
  .cta-movil,.progreso{display:none}
}

/* =====================================================================
   Hero claro con gráficos animados (portada)
   ===================================================================== */
.hero--claro{
  position:relative;overflow:hidden;color:var(--tinta);
  min-height:0;padding:calc(72px + var(--s-6)) 0 var(--s-7);
  background:linear-gradient(180deg,#ffffff 0%,#f7fafd 62%,#eef4fb 100%);
}
.hero__curvas{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__curvas svg{width:100%;height:100%}
.hero__curvas path{fill:none;stroke:rgba(100,199,242,.45);stroke-width:1.4}
.hero__curvas .curvas__base path{stroke:rgba(100,199,242,.28)}
.hero__curvas .curvas__señal path{
  stroke:var(--cian);stroke-width:1.8;stroke-linecap:round;
  stroke-dasharray:150 1050;stroke-dashoffset:1200;
  animation:senalCurva 7s linear infinite;
}
.hero__curvas .curvas__señal path:nth-child(2){animation-duration:8.6s;animation-delay:-2.4s}
.hero__curvas .curvas__señal path:nth-child(3){animation-duration:6.2s;animation-delay:-4.1s;stroke-dasharray:110 900}
@keyframes senalCurva{
  from{stroke-dashoffset:1200}
  to{stroke-dashoffset:-150}
}
@media(prefers-reduced-motion:reduce){
  .hero__curvas .curvas__señal{display:none}
  .hero__curvas .curvas__base path{stroke:rgba(100,199,242,.45)}
}
.hero--claro .hero__grid{
  position:relative;z-index:1;display:grid;
  grid-template-columns:1.05fr .95fr;gap:var(--s-6);align-items:center;
}
.chip-claro{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:var(--s-3);
  background:#e6f5fd;border:1px solid #bfe4f8;color:var(--cian-800);
  border-radius:var(--r-full);padding:8px 16px;white-space:nowrap;
  font-family:var(--f-titulo);font-size:.74rem;font-weight:600;letter-spacing:.12em;
}
.hero--claro h1{color:var(--azul);max-width:18ch}
.hero--claro h1 em{font-style:normal;color:var(--cian-800)}
.hero--claro .hero__texto{color:var(--gris);margin-top:var(--s-3);font-size:1.08rem;max-width:52ch}
.hero--claro .hero__aval{
  margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--linea);
  color:var(--gris);font-size:.82rem;max-width:48ch;
}
.btn--suave{background:var(--gris-claro);color:var(--azul);border-color:transparent}
.btn--suave:hover{background:#e2eaf6}

/* ---- Gráfico animado ---- */
.grafico{position:relative;padding:0 0 124px var(--s-5);min-height:380px}
.graf__ondas{
  position:absolute;right:6%;top:4%;width:300px;height:300px;display:grid;place-items:center;pointer-events:none;
}
.graf__ondas i{
  position:absolute;width:100%;height:100%;border-radius:50%;
  border:1.5px solid rgba(100,199,242,.45);opacity:0;
  animation:onda 3.6s cubic-bezier(.22,1,.36,1) infinite;
}
.graf__ondas i:nth-child(2){animation-delay:1.2s}
.graf__ondas i:nth-child(3){animation-delay:2.4s}

.graf__tablero{
  position:relative;background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--r-lg);box-shadow:0 18px 44px rgba(34,57,113,.14);
  padding:var(--s-3) var(--s-3) var(--s-4);
}
.graf__cab{
  display:flex;align-items:center;gap:10px;margin:0 0 var(--s-3);
  font-family:var(--f-titulo);font-size:.78rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gris);
}
.graf__punto{
  width:9px;height:9px;border-radius:50%;background:#4be08d;flex:none;
  box-shadow:0 0 0 0 rgba(75,224,141,.7);animation:latido 2.4s ease-out infinite;
}
.graf__barras{
  display:grid;grid-template-columns:repeat(12,1fr);gap:7px;
  align-items:end;height:132px;
}
.graf__barras i{
  display:block;height:var(--h);border-radius:6px 6px 3px 3px;
  background:linear-gradient(180deg,var(--cian) 0%,#2f8fd0 100%);
  transform-origin:bottom;transform:scaleY(.35);
  animation:barra 3.4s cubic-bezier(.22,1,.36,1) infinite alternate;
  animation-delay:calc(var(--i) * .09s);
}
.graf__barras i:nth-child(7){background:linear-gradient(180deg,#8ad6f7 0%,var(--azul) 100%)}
@keyframes barra{
  0%{transform:scaleY(.35)}
  55%{transform:scaleY(1)}
  100%{transform:scaleY(.86)}
}
.graf__pie{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-3);
  margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--linea);
}
.graf__dato{margin:0}
.graf__dato b{
  display:block;font-family:var(--f-titulo);font-size:1.7rem;font-weight:700;
  color:var(--azul);line-height:1;
}
.graf__dato span{font-size:.78rem;color:var(--gris)}
.graf__linea{width:170px;height:52px;flex:none}
.graf__linea path{
  fill:none;stroke:var(--cian-800);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:240;stroke-dashoffset:240;
  animation:trazo 4.6s cubic-bezier(.22,1,.36,1) infinite;
}
@keyframes trazo{
  0%{stroke-dashoffset:240}
  45%{stroke-dashoffset:0}
  85%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:0;opacity:.25}
}
.graf__mapa{
  display:grid;grid-template-columns:repeat(12,1fr);gap:5px;margin-top:var(--s-3);
}
.graf__mapa i{
  display:block;height:16px;border-radius:4px;background:var(--cian);
  opacity:0;animation:celda 4.2s ease-in-out infinite;
}
.graf__mapa i:nth-child(2n){animation-delay:.5s}
.graf__mapa i:nth-child(3n){animation-delay:1.1s}
.graf__mapa i:nth-child(5n){animation-delay:1.7s}
@keyframes celda{
  0%,100%{opacity:.1}
  50%{opacity:var(--o)}
}

.graf__fono{
  position:absolute;left:-8px;bottom:-6px;width:212px;
  background:var(--blanco);border:1px solid var(--linea);border-radius:18px;
  box-shadow:0 20px 44px rgba(34,57,113,.2);padding:16px 18px 18px;
}
.graf__fono-marca{
  font-family:var(--f-titulo);font-weight:700;font-size:.82rem;color:var(--cian-800);
  letter-spacing:.02em;margin:0 0 10px;
}
.graf__fono-h{font-family:var(--f-titulo);font-weight:700;font-size:1rem;color:var(--azul);margin:0}
.graf__prog{height:6px;border-radius:3px;background:var(--gris-claro);margin:12px 0 10px;overflow:hidden}
.graf__prog i{
  display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--azul),var(--cian));
  animation:cargar 4.2s cubic-bezier(.22,1,.36,1) infinite;
}
@keyframes cargar{0%{width:0}55%{width:100%}100%{width:100%}}
.graf__fono-ok{
  display:flex;align-items:center;gap:8px;margin:0;
  font-size:.8rem;font-weight:600;color:#1a6b32;
  opacity:0;animation:aparece 4.2s ease-in-out infinite;
}
@keyframes aparece{0%,45%{opacity:0}62%,100%{opacity:1}}
.graf__ok{
  flex:none;width:18px;height:18px;border-radius:50%;background:#dff5e4;position:relative;
}
.graf__ok::after{
  content:'';position:absolute;left:5px;top:5px;width:8px;height:4px;
  border-left:2px solid #1a6b32;border-bottom:2px solid #1a6b32;transform:rotate(-45deg);
}

/* Encabezado claro */
.encabezado{
  background:rgba(255,255,255,.94);border-bottom:1px solid var(--linea);
}
.encabezado.fija{box-shadow:0 2px 18px rgba(34,57,113,.12)}
.nav a{color:var(--azul)}
.nav a:hover,.nav a:focus-visible{border-bottom-color:var(--cian-800)}
.nav a:not(.btn)[aria-current="true"],.nav a[aria-current="page"]{border-bottom-color:var(--cian-800)}
.nav .btn--primario{background:var(--azul);color:var(--blanco)}
.nav .btn--primario:hover{background:var(--azul-700)}
.hamburguesa span{background:var(--azul)}
.progreso{background:var(--linea)}
.progreso i{background:var(--cian-800)}

@media(max-width:900px){
  .hero--claro .hero__grid{grid-template-columns:1fr;gap:var(--s-6)}
  .grafico{padding:0 0 var(--s-5) 0;min-height:0}
  .graf__fono{position:static;width:100%;max-width:260px;margin-top:var(--s-3)}
  .graf__ondas{right:0;top:-6%;width:220px;height:220px}
}
@media(max-width:768px){
  .nav{background:var(--blanco);box-shadow:0 14px 30px rgba(34,57,113,.18)}
  .nav a{border-bottom:1px solid var(--linea)}
  .hero--claro{padding:calc(64px + var(--s-4)) 0 var(--s-6)}
  .graf__barras{height:104px;gap:5px}
  .graf__linea{width:130px}
}


/* =====================================================================
   Portal personalizado (mosaico de marcas) + beneficios
   ===================================================================== */
/* Toda la pantalla se dimensiona en unidades del contenedor:
   --u equivale a 1px del diseño original de 288px de ancho. */
.tel{width:100%;display:block;container-type:inline-size;--u:0.3472cqw}
.tel__marco{
  display:block;
  position:relative;border:calc(var(--u)*10) solid var(--tinta);border-radius:calc(var(--u)*42);
  overflow:hidden;background:#fff;
  aspect-ratio:9/19.5;box-shadow:0 22px 50px rgba(5,14,36,.42),inset 0 0 0 1px rgba(255,255,255,.14);
}
.tel__notch{position:absolute;z-index:6;top:calc(var(--u)*9);left:50%;transform:translateX(-50%);width:calc(var(--u)*78);height:calc(var(--u)*19);border-radius:999px;background:var(--tinta)}

.pt{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff;text-align:left}
.pt>*{flex:0 0 auto}
.pt__estado{display:flex;justify-content:space-between;align-items:center;height:calc(var(--u)*42);padding:calc(var(--u)*12) calc(var(--u)*20) 0;font-weight:700;font-size:calc(var(--u)*11)}
.pt__estado>span{display:flex;align-items:center;gap:calc(var(--u)*5)}
.sig{display:inline-flex;align-items:flex-end;gap:calc(var(--u)*1.5);height:calc(var(--u)*10)}
.sig i{width:calc(var(--u)*2.5);border-radius:calc(var(--u)*1);background:currentColor}
.sig i:nth-child(1){height:calc(var(--u)*4)}.sig i:nth-child(2){height:calc(var(--u)*6)}
.sig i:nth-child(3){height:calc(var(--u)*8)}.sig i:nth-child(4){height:calc(var(--u)*10)}
.bat{position:relative;width:calc(var(--u)*19);height:calc(var(--u)*10);border:calc(var(--u)*1.2) solid currentColor;border-radius:calc(var(--u)*3)}
.bat::before{content:"";position:absolute;top:calc(var(--u)*1.4);left:calc(var(--u)*1.4);bottom:calc(var(--u)*1.4);width:64%;border-radius:calc(var(--u)*1.5);background:currentColor}
.bat::after{content:"";position:absolute;right:calc(var(--u)*-3.4);top:calc(var(--u)*3);width:calc(var(--u)*1.8);height:calc(var(--u)*4);border-radius:0 calc(var(--u)*2) calc(var(--u)*2) 0;background:currentColor}
.pt__wifi{width:calc(var(--u)*13);height:calc(var(--u)*13);display:block}
.pt__hero{flex:1 0 auto;padding:calc(var(--u)*16) calc(var(--u)*18) calc(var(--u)*22);color:#fff;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:calc(var(--u)*12)}
.pt__hero>*{flex:0 0 auto;max-width:100%}
.pt__logo{display:flex;align-items:flex-start;gap:calc(var(--u)*9);width:100%}
.pt__logo svg{display:block;flex:0 0 auto;width:calc(var(--u)*30);height:calc(var(--u)*30)}
.pt__logo>span{flex:1 1 auto;min-width:0}
.pt__logo b{display:block;font-family:var(--f-titulo);font-weight:700;font-size:calc(var(--u)*12.5);line-height:1.25;letter-spacing:-.01em}
.pt__logo small{display:block;line-height:1.35;margin-top:calc(var(--u)*2);font-size:calc(var(--u)*9);font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.82}
.pt__tit{font-family:var(--f-titulo);font-weight:700;font-size:calc(var(--u)*15.5);line-height:1.3;letter-spacing:-.02em}
.pt__cuerpo{flex:0 0 auto;display:flex;flex-direction:column;padding:calc(var(--u)*16) calc(var(--u)*18) calc(var(--u)*14);background:#fff;border-radius:calc(var(--u)*22) calc(var(--u)*22) 0 0;margin-top:calc(var(--u)*-14);position:relative;z-index:2}
.pt__cuerpo>*{flex:0 0 auto}
.pt__msg{border-radius:calc(var(--u)*14);padding:calc(var(--u)*15);font-size:calc(var(--u)*11.5);line-height:1.5;border:calc(var(--u)*1) solid var(--linea);color:var(--tinta)}
.pt__msg b{display:block;font-family:var(--f-titulo);font-size:calc(var(--u)*10);letter-spacing:.1em;text-transform:uppercase;margin-bottom:calc(var(--u)*6)}
.pt__btns{display:grid;gap:calc(var(--u)*9);margin-top:calc(var(--u)*16)}
.pt__btn{display:block;text-align:center;padding:calc(var(--u)*13);border-radius:999px;font-family:var(--f-titulo);font-weight:600;font-size:calc(var(--u)*12);color:#fff}
.pt__btn--sec{background:transparent;border:calc(var(--u)*1.5) solid currentColor}
.pt__btn--txt{background:transparent;padding:calc(var(--u)*6);font-size:calc(var(--u)*11);text-decoration:underline;text-underline-offset:calc(var(--u)*3)}
.pt__term{display:flex;gap:calc(var(--u)*8);align-items:flex-start;margin-top:calc(var(--u)*16);font-size:calc(var(--u)*9.5);line-height:1.45;color:var(--gris)}
.pt__term i{flex:0 0 auto;width:calc(var(--u)*13);height:calc(var(--u)*13);border-radius:calc(var(--u)*4);display:grid;place-items:center;color:#fff;font-size:calc(var(--u)*9);font-weight:700;font-style:normal}
.pt__pie{margin-top:calc(var(--u)*16);padding-top:calc(var(--u)*12);border-top:calc(var(--u)*1) solid var(--linea);text-align:center;font-size:calc(var(--u)*9);color:var(--gris);letter-spacing:.04em}

/* =====================================================================
   Infografía de órbitas (La diferencia)
   ===================================================================== */
.info{position:relative;margin-top:var(--s-4)}
.info__tel{
  position:relative;z-index:2;width:206px;margin:0 auto;
  border-radius:44px;padding:5px;
  background:linear-gradient(150deg,#3a4763,#0d1424 42%,#2b3550);
  box-shadow:0 30px 64px rgba(11,20,44,.36),inset 0 0 0 1px rgba(255,255,255,.10);
}
.info__pant{
  position:relative;border-radius:40px;overflow:hidden;
  background:linear-gradient(168deg,var(--azul-900),var(--azul) 56%,#12518A);
  color:#fff;padding:34px 18px 58px;aspect-ratio:1206/2622;
  display:grid;grid-template-rows:auto auto 1fr;gap:18px;justify-items:center;text-align:center;
}
.info__isla{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:70px;height:19px;border-radius:999px;background:#05080f;z-index:3;
}
.info__nucleo{position:relative;display:grid;place-items:center;width:100%}
.info__nucleo i{display:none}
.info__marca{position:relative;width:96px}
.info__marca img{width:100%;height:auto;display:block}
.info__graf{
  width:100%;display:grid;gap:9px;justify-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(169,224,252,.22);
  border-radius:14px;padding:12px 12px 10px;
}
.info__graf b{
  font-family:var(--f-titulo);font-weight:600;font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cian-luz);
}
.info__barras{display:flex;align-items:flex-end;gap:8px;height:104px;width:100%;justify-content:center}
.info__barras i{
  width:14px;border-radius:4px 4px 2px 2px;
  background:linear-gradient(180deg,var(--cian-luz),rgba(169,224,252,.35));
  transform-origin:bottom;animation:infoBarra 2.6s var(--ease,cubic-bezier(.22,1,.36,1)) infinite;
}
.info__barras i:nth-child(1){height:38%;animation-delay:0s}
.info__barras i:nth-child(2){height:56%;animation-delay:.16s}
.info__barras i:nth-child(3){height:44%;animation-delay:.32s}
.info__barras i:nth-child(4){height:78%;animation-delay:.48s}
.info__barras i:nth-child(5){height:62%;animation-delay:.64s}
.info__barras i:nth-child(6){height:96%;animation-delay:.8s}
@keyframes infoBarra{
  0%,100%{transform:scaleY(.42);opacity:.55}
  45%{transform:scaleY(1);opacity:1}
}
.info__pie{display:grid;gap:8px;justify-items:center;align-content:start}
.info__pie b{font-family:var(--f-titulo);font-size:1.02rem;line-height:1.25;letter-spacing:-.01em}
.info__pie small{font-size:.78rem;color:#c7d7f2;line-height:1.4;max-width:24ch}
.info__chip{
  margin-top:2px;background:rgba(169,224,252,.16);border:1px solid rgba(169,224,252,.36);
  color:var(--cian-luz);border-radius:var(--r-full);padding:5px 13px;
  font-family:var(--f-titulo);font-weight:600;
  font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){.info__barras i{animation:none}}

.orb .nodo{
  background:var(--blanco);border:1px solid var(--linea);border-radius:16px;
  padding:11px 14px;min-height:60px;display:grid;grid-template-columns:auto 1fr;align-content:center;
  align-items:center;column-gap:12px;row-gap:3px;
  box-shadow:0 12px 26px rgba(34,57,113,.09);
}
.orb .nodo > b{
  grid-column:2;grid-row:1;font-family:var(--f-titulo);font-size:.62rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--azul);
}
.nodo__ico{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:rgba(100,199,242,.16);color:var(--azul);grid-row:1;align-self:center;
}
.nodo__ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.orb .nodo h3{
  grid-column:2;align-self:center;font-family:var(--f-titulo);font-size:.94rem;line-height:1.28;
  color:var(--tinta);letter-spacing:-.01em;text-wrap:balance;
}

.orb{
  position:relative;display:grid;
  grid-template-columns:1fr minmax(232px,252px) 1fr;
  gap:clamp(16px,3vw,38px);align-items:center;
  padding:clamp(28px,3.4vw,48px) 0 clamp(24px,3vw,40px);
}
.orb__col{display:grid;gap:clamp(10px,1.4vw,16px);position:relative;z-index:2}
.orb__col .nodo{width:100%;max-width:282px}
.orb__col:first-of-type .nodo{justify-self:end}
.orb__col:last-of-type .nodo{justify-self:start}
.orb__abajo{
  grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.4vw,32px);width:min(100%,594px);justify-self:center;
  margin-top:clamp(20px,3vw,38px);position:relative;z-index:2;
}
.orb__aro{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:0;
  border-radius:50%;border:1px dashed rgba(34,57,113,.24);pointer-events:none;
}
.orb__aro--1{width:min(46vw,470px);aspect-ratio:1;animation:orbGiro 70s linear infinite}
.orb__aro--2{width:min(64vw,660px);aspect-ratio:1;border-color:rgba(34,57,113,.15);animation:orbGiro 95s linear infinite reverse}
.orb__giro{
  position:absolute;left:50%;top:50%;width:min(46vw,470px);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;z-index:1;pointer-events:none;
  border:2px solid transparent;border-top-color:var(--cian);
  animation:orbGiro 9s linear infinite;
}
.orb__giro--2{width:min(64vw,660px);border-top-width:3px;border-top-color:rgba(100,199,242,.85);animation:orbGiro 11s linear infinite reverse}
@keyframes orbGiro{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.orb__giro,.orb__aro{animation:none}}
.orb__et{
  position:absolute;left:50%;z-index:2;font-family:var(--f-titulo);font-weight:700;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--azul);
  background:var(--blanco);padding:5px 12px;border-radius:var(--r-full);
  border:1px solid var(--linea);transform:translateX(-50%);white-space:nowrap;
}
.orb__et--1{top:calc(50% - min(26vw,260px) - 13px)}
.orb__et--2{top:calc(50% - min(36vw,375px) - 13px)}
.orb__pie{
  margin:var(--s-5) auto 0;width:fit-content;
  display:flex;align-items:center;flex-wrap:nowrap;gap:8px;
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-full);
  padding:9px 18px;font-size:.8rem;color:var(--gris);
}
.orb__pie span{white-space:nowrap}
.orb__pie span + span{padding-left:8px;border-left:1px solid rgba(34,57,113,.18)}
.orb__pie b{color:var(--tinta);font-family:var(--f-titulo)}

@media (max-width:900px){
  .orb{grid-template-columns:1fr;gap:16px;padding-top:var(--s-5)}
  .orb__aro,.orb__giro,.orb__et{display:none}
  .orb__abajo{grid-template-columns:1fr;max-width:none;margin-top:0}
  .info__tel{order:-1;margin-bottom:8px}
  .orb__pie{flex-wrap:wrap;justify-content:center;text-align:center}
  .orb__pie span + span{padding-left:0;border-left:0}
}

/* Variante vacante (DIENSA) */
.pt--vac{background:#fff}
.pt__vacRed{
  display:flex;align-items:center;gap:calc(var(--u)*6);color:#fff;
  padding:calc(var(--u)*6) calc(var(--u)*14);font-size:calc(var(--u)*9);
  font-family:var(--f-titulo);font-weight:600;
}
.pt__vacRed i{width:calc(var(--u)*6);height:calc(var(--u)*6);border-radius:50%;background:#3ED28A}
.pt__vacConv{
  background:#F0B429;color:#1B3A73;text-align:center;
  padding:calc(var(--u)*8) calc(var(--u)*12);display:grid;gap:calc(var(--u)*2);
}
.pt__vacConv b{
  font-family:var(--f-titulo);font-weight:800;text-transform:uppercase;
  font-size:calc(var(--u)*14);letter-spacing:-.01em;
}
.pt__vacConv span{
  display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*5);
  font-family:var(--f-titulo);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:calc(var(--u)*8)
}
.pt__vacConv span i{width:calc(var(--u)*5);height:calc(var(--u)*5);border-radius:50%;background:#1E9E5A}
.pt__vacHero{
  color:#fff;border-bottom:calc(var(--u)*4) solid #F0B429;
  display:grid;grid-template-columns:1fr calc(var(--u)*128);align-items:end;
  flex:0 0 auto;
}
.pt__vacTxt{
  padding:calc(var(--u)*11) calc(var(--u)*8) calc(var(--u)*16) calc(var(--u)*14);
  display:grid;gap:calc(var(--u)*5);justify-items:start;align-content:start;
}
.pt__vacDato{
  font-family:var(--f-titulo);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:calc(var(--u)*7.5);white-space:nowrap;
  border-top:calc(var(--u)*1) solid rgba(255,255,255,.45);padding-top:calc(var(--u)*5);
}
.pt__vacFoto{overflow:hidden;align-self:end;line-height:0}
.pt__vacFoto img{width:100%;height:auto;display:block}
.pt__vacChip{
  background:#F0B429;color:#7A3E06;border-radius:999px;
  padding:calc(var(--u)*4) calc(var(--u)*10);
  font-family:var(--f-titulo);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:calc(var(--u)*7.5);
}
.pt__vacTit{font-family:var(--f-titulo);font-weight:800;font-size:calc(var(--u)*15);line-height:1.08;letter-spacing:-.03em}
.pt__vacLug{font-family:var(--f-titulo);font-weight:600;font-size:calc(var(--u)*10);line-height:1.35;opacity:.92}
.pt__vacLogo{background:#fff;border-radius:calc(var(--u)*5);padding:calc(var(--u)*4) calc(var(--u)*6);width:calc(var(--u)*62)}
.pt__vacLogo img{width:100%;height:auto;display:block}
.pt__cuerpo--vac{flex:1 1 auto;gap:calc(var(--u)*10);padding-top:calc(var(--u)*11);padding-bottom:calc(var(--u)*10)}
.pt__sal{border-radius:calc(var(--u)*12);padding:calc(var(--u)*12);color:#fff;display:grid;gap:calc(var(--u)*6);flex:0 0 auto}
.pt__salTop{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*6)}
.pt__salTop > span:first-child{
  font-family:var(--f-titulo);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:calc(var(--u)*7.5);opacity:.72;
}
.pt__jor{
  background:rgba(255,255,255,.16);border-radius:999px;
  padding:calc(var(--u)*3) calc(var(--u)*9);white-space:nowrap;
  font-family:var(--f-titulo);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:calc(var(--u)*7);
}
.pt__salCifra{
  font-family:Montserrat,var(--f-titulo),sans-serif;font-weight:800;
  font-size:calc(var(--u)*19);letter-spacing:-.03em;line-height:1;
}
.pt__salCifra small{font-size:calc(var(--u)*9);font-weight:600;opacity:.75;margin-left:calc(var(--u)*3)}
.pt__reqs{display:flex;align-items:center;flex-wrap:wrap;gap:calc(var(--u)*4);border-top:calc(var(--u)*1) solid rgba(255,255,255,.16);padding-top:calc(var(--u)*8)}
.pt__reqs > span:first-child{
  font-family:var(--f-titulo);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:calc(var(--u)*7.5);opacity:.72;
}
.pt__req{
  border:calc(var(--u)*1.2) solid #F0B429;color:#FFDD8A;border-radius:999px;
  padding:calc(var(--u)*3) calc(var(--u)*8);white-space:nowrap;
  font-family:var(--f-titulo);font-weight:700;font-size:calc(var(--u)*8);
}
.pt__cuerpo--vac .pt__btns{margin-top:0}
.pt__cuerpo--vac .pt__pie{margin-top:calc(var(--u)*8);padding-top:calc(var(--u)*8)}

/* Variante hub de restaurante (Hanoi) */
.pt--hub{background:#F4F5F7}
.pt__hubCab{padding:calc(var(--u)*10) calc(var(--u)*14) calc(var(--u)*12);color:#fff}
.pt__hubTop{display:flex;align-items:center;gap:calc(var(--u)*10)}
.pt__sello{flex:0 0 auto;width:calc(var(--u)*62);background:#fff;border-radius:calc(var(--u)*9);padding:calc(var(--u)*5) calc(var(--u)*6);display:block}
.pt__sello img{width:100%;height:auto;display:block}
.pt__hola{display:grid;gap:calc(var(--u)*1)}
.pt__hola small{font-size:calc(var(--u)*9.5);opacity:.85}
.pt__hola b{font-family:var(--f-titulo);font-weight:700;font-size:calc(var(--u)*14);letter-spacing:-.02em}
.pt__hubRed{
  margin-top:calc(var(--u)*9);display:grid;gap:calc(var(--u)*1);
  background:rgba(0,0,0,.16);border-radius:calc(var(--u)*10);padding:calc(var(--u)*7) calc(var(--u)*11);
  font-size:calc(var(--u)*9);
}
.pt__hubRed i{width:calc(var(--u)*7);height:calc(var(--u)*7);border-radius:50%;background:#A9D33B;grid-row:1;grid-column:1;align-self:center}
.pt__hubRed b{grid-row:1;grid-column:2;font-family:var(--f-titulo);font-weight:600}
.pt__hubRed span{grid-row:2;grid-column:2;opacity:.8}
.pt__cuerpo--hub{flex:1 1 auto;gap:calc(var(--u)*8);padding-top:calc(var(--u)*10);padding-bottom:calc(var(--u)*9)}
.pt__hubEt{
  font-family:var(--f-titulo);font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-size:calc(var(--u)*8.5);color:var(--gris);
}
.pt__plato{border-radius:calc(var(--u)*12);overflow:hidden;line-height:0}
.pt__plato img{width:100%;height:calc(var(--u)*64);object-fit:cover;display:block}
.pt__banner{border-radius:calc(var(--u)*12);padding:calc(var(--u)*12);color:#fff;display:grid;gap:calc(var(--u)*5);justify-items:start}
.pt__bnEt{font-family:var(--f-titulo);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:calc(var(--u)*8)}
.pt__banner b{font-family:var(--f-titulo);font-weight:700;font-size:calc(var(--u)*12.5);line-height:1.2;letter-spacing:-.02em}
.pt__bnBtn{
  margin-top:calc(var(--u)*3);border-radius:999px;color:#fff;
  font-family:var(--f-titulo);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  font-size:calc(var(--u)*8.5);padding:calc(var(--u)*6) calc(var(--u)*12);
}
.pt__hubRed{grid-template-columns:auto 1fr;column-gap:calc(var(--u)*6)}
.pt__tiles{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*7)}
.pt__tile{
  position:relative;background:#fff;border:calc(var(--u)*1) solid var(--linea);
  border-radius:calc(var(--u)*11);padding:calc(var(--u)*10);display:grid;gap:calc(var(--u)*4);
  align-content:start;
}
.pt__tileIc{
  width:calc(var(--u)*24);height:calc(var(--u)*24);border-radius:calc(var(--u)*8);
  display:grid;place-items:center;margin-bottom:calc(var(--u)*4);
}
.pt__tileIc svg{width:58%;height:58%}
.pt__tile b{font-family:var(--f-titulo);font-weight:700;font-size:calc(var(--u)*10.5);color:var(--tinta);letter-spacing:-.01em}
.pt__tile small{font-size:calc(var(--u)*8.5);color:var(--gris);line-height:1.35}
.pt__tag{
  position:absolute;top:calc(var(--u)*8);right:calc(var(--u)*8);border-radius:999px;
  font-family:var(--f-titulo);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  font-size:calc(var(--u)*7);padding:calc(var(--u)*3) calc(var(--u)*7);
}
.pt__cuerpo--hub .pt__btn{margin-top:auto}
.pt__cuerpo--hub .pt__pie{margin-top:calc(var(--u)*8);padding-top:calc(var(--u)*8)}

/* Variante encuesta (portal de León) */
.pt--enc{background:#fff}
.pt__encCab{padding:calc(var(--u)*8) calc(var(--u)*18) calc(var(--u)*22);color:#fff}
.pt__encLogo{display:block;background:#fff;border-radius:calc(var(--u)*10);padding:calc(var(--u)*8) calc(var(--u)*10);margin-bottom:calc(var(--u)*12)}
.pt__encLogo img{width:100%;height:auto;display:block}
.pt__encTit{font-family:var(--f-titulo);font-weight:700;font-size:calc(var(--u)*15);line-height:1.2;letter-spacing:-.02em}
.pt__encSub{margin-top:calc(var(--u)*6);font-size:calc(var(--u)*10);line-height:1.45;opacity:.82}
.pt__cuerpo--enc{flex:1 1 auto;gap:calc(var(--u)*10);padding-top:calc(var(--u)*12);padding-bottom:calc(var(--u)*10)}
.pt__prog{display:grid;gap:calc(var(--u)*6)}
.pt__prog span{font-family:var(--f-titulo);font-weight:600;font-size:calc(var(--u)*9);letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.pt__prog i{display:block;height:calc(var(--u)*4);border-radius:999px;background:var(--gris-claro);overflow:hidden}
.pt__prog i b{display:block;height:100%;border-radius:999px}
.pt__preg{display:grid;gap:calc(var(--u)*7)}
.pt__pregEt{display:flex;align-items:center;gap:calc(var(--u)*7);font-family:var(--f-titulo);font-weight:700;font-size:calc(var(--u)*11.5);color:var(--tinta)}
.pt__pregEt b{
  flex:0 0 auto;width:calc(var(--u)*16);height:calc(var(--u)*16);border-radius:calc(var(--u)*5);
  display:grid;place-items:center;font-size:calc(var(--u)*9.5);background:var(--gris-claro);
}
.pt__ops{display:grid;gap:calc(var(--u)*5)}
.pt__op{
  display:flex;align-items:center;gap:calc(var(--u)*8);font-size:calc(var(--u)*10.5);color:var(--tinta);
  border:calc(var(--u)*1.2) solid var(--linea);border-radius:calc(var(--u)*11);padding:calc(var(--u)*7) calc(var(--u)*11);
}
.pt__op i{
  flex:0 0 auto;width:calc(var(--u)*12);height:calc(var(--u)*12);border-radius:50%;
  border:calc(var(--u)*1.4) solid #b9c4d6;display:grid;place-items:center;
}
.pt__op i b{display:block;width:calc(var(--u)*6);height:calc(var(--u)*6);border-radius:50%}
.pt__op--on{font-weight:600}
.pt__cuerpo--enc .pt__btns{margin-top:auto}
.pt__cuerpo--enc .pt__pie{margin-top:calc(var(--u)*8);padding-top:calc(var(--u)*8)}

/* Variante con foto (portal de gobierno) */
.pt--foto{background:#fff}
.pt__red{
  text-align:center;font-family:var(--f-titulo);font-weight:600;color:var(--tinta);
  font-size:calc(var(--u)*12);padding:calc(var(--u)*4) calc(var(--u)*16) calc(var(--u)*10);
  border-bottom:calc(var(--u)*1) solid var(--linea);
}
.pt__logoimg{padding:calc(var(--u)*10) calc(var(--u)*14)}
.pt__logoimg img{width:100%;height:auto;display:block}
.pt__foto{position:relative;overflow:hidden}
.pt__foto img{width:100%;height:auto;display:block}
.pt__fototit{
  position:absolute;left:0;right:0;bottom:calc(var(--u)*8);padding:0 calc(var(--u)*14);
  font-family:var(--f-titulo);font-weight:700;color:#fff;text-align:center;
  font-size:calc(var(--u)*15);line-height:1.2;letter-spacing:-.02em;
  text-shadow:0 calc(var(--u)*2) calc(var(--u)*6) rgba(0,0,0,.55);
}
.pt__cuerpo--foto{flex:1 1 auto;margin-top:0;border-radius:0;justify-content:flex-start}
.pt__nota{
  font-family:var(--f-titulo);font-weight:700;text-align:center;text-transform:uppercase;
  font-size:calc(var(--u)*10.5);line-height:1.35;letter-spacing:.01em;
}
.pt__cuerpo--foto .pt__pie{margin-top:auto}

/* =====================================================================
   OPCIÓN A — Mosaico de marcas
   ===================================================================== */
.mosaico{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.2vw,30px);align-items:start}
.mosaico .tarjeta{
  display:flex;flex-direction:column;gap:14px;cursor:pointer;background:none;border:0;padding:0;text-align:center;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.mosaico .tarjeta .tel__marco{transition:filter .3s ease,box-shadow .3s ease,opacity .3s ease}
.mosaico:hover .tarjeta .tel__marco{filter:grayscale(1) brightness(.9);opacity:.5}
.mosaico .tarjeta:hover,.mosaico .tarjeta:focus-visible{transform:translateY(-10px);outline:none}
.mosaico .tarjeta:hover .tel__marco,.mosaico .tarjeta:focus-visible .tel__marco{
  filter:none;opacity:1;box-shadow:0 32px 66px rgba(5,14,36,.55);
}
.mosaico .rot{display:grid;gap:3px}
.mosaico .rot b{font-family:var(--f-titulo);font-weight:600;font-size:.92rem;color:#fff}
.mosaico .rot small{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)}
@media(max-width:900px){
  .mosaico{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px}
  .mosaico .tarjeta{scroll-snap-align:center}
  .mosaico:hover .tarjeta .tel__marco{filter:none;opacity:1}
}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* =====================================================================
   BENEFICIOS PARA GOBIERNOS MUNICIPALES
   ===================================================================== */
.ben{background:#fff;padding:clamp(56px,7vw,100px) 20px}
.ben__env{max-width:1180px;margin:0 auto}
.ben__cab{max-width:720px;margin:0 auto clamp(36px,4.5vw,60px);text-align:center}
.ben__eyebrow{font-weight:700;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--azul);opacity:.65;margin-bottom:14px}
.ben__cab h2{font-family:var(--f-titulo);font-weight:700;letter-spacing:-.02em;line-height:1.15;font-size:clamp(1.6rem,3.3vw,2.4rem);color:var(--azul)}
.ben__regla{width:56px;height:3px;border-radius:999px;background:var(--cian);margin:20px auto 0}
.ben__cab p{margin-top:20px;font-size:clamp(.95rem,1.3vw,1.05rem);line-height:1.65;color:var(--gris)}

.ben__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,24px)}
.ben__item{
  display:grid;grid-template-rows:auto auto 1fr;gap:10px;
  padding:clamp(22px,2.2vw,30px);background:#fff;border:1px solid var(--linea);border-radius:16px;
  box-shadow:0 4px 20px rgba(34,57,113,.06);
  transition:box-shadow .22s cubic-bezier(.22,1,.36,1),transform .22s cubic-bezier(.22,1,.36,1),border-color .22s ease;
}
.ben__item:hover{transform:translateY(-4px);border-color:rgba(34,57,113,.22);box-shadow:0 14px 34px rgba(34,57,113,.14)}
.ben__item p.ben__num{
  font-family:var(--f-texto);font-weight:700;font-size:.78rem;letter-spacing:.12em;
  color:var(--cian);filter:brightness(.78);
}
.ben__item h3{font-family:var(--f-titulo);font-weight:600;font-size:1.02rem;line-height:1.3;letter-spacing:-.01em;color:var(--azul)}
.ben__item p{font-size:.88rem;line-height:1.6;color:var(--gris);text-wrap:pretty}
.ben__item--ancho{grid-column:span 3;grid-template-rows:auto;grid-template-columns:auto 1fr;align-items:center;gap:0 clamp(20px,2.4vw,34px);background:linear-gradient(120deg,#f5f8fd,#eef4fb);border-color:rgba(34,57,113,.14)}
.ben__item--ancho .ben__num{grid-row:span 2}
.ben__item--ancho h3{margin-bottom:8px}
.ben__ciclo{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px;grid-column:2}
.ben__fase{display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--azul);font-weight:600;font-family:var(--f-titulo)}
.ben__fase span{background:#fff;border:1px solid var(--linea);border-radius:14px;padding:10px 16px;white-space:nowrap;display:grid;gap:2px;line-height:1.25}
.ben__fase em{font-style:normal;color:var(--gris);font-weight:400;font-family:var(--f-texto);font-size:.72rem;letter-spacing:.04em}
.ben__flecha{color:var(--cian);filter:brightness(.8);font-weight:700}
@media(max-width:1000px){
  .ben__grid{grid-template-columns:repeat(2,1fr)}
  .ben__item--ancho{grid-column:span 2}
}
@media(max-width:640px){
  .ben__grid{grid-template-columns:1fr}
  .ben__item--ancho{grid-column:span 1;grid-template-columns:1fr}
  .ben__item--ancho .ben__num{grid-row:auto}
  .ben__ciclo{grid-column:1}
}



/* --- Contenedor de la sección de portales (fondo claro del sitio) --- */
.portales{background:var(--blanco);padding:var(--pad-seccion) 0}
.portales__env{max-width:var(--ancho);margin:0 auto;padding:0 var(--s-3)}
.portales__cab{max-width:660px;margin:0 auto clamp(30px,4vw,50px);text-align:center}
.portales__badge{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;padding:7px 16px;border-radius:var(--r-full);
  font-family:var(--f-texto);font-weight:700;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(34,57,113,.07);color:var(--azul);border:1px solid rgba(34,57,113,.18);
}
.portales__cab h2{font-family:var(--f-titulo);font-weight:700;letter-spacing:-.02em;line-height:1.15;font-size:var(--t-h2);color:var(--azul)}
.portales__cab p{margin-top:16px;font-size:1rem;line-height:1.65;color:var(--gris)}
.portales__pie{margin-top:clamp(22px,3vw,34px);text-align:center;font-size:.8rem;line-height:1.5;color:var(--gris)}
.portales .mosaico .rot b{color:var(--azul)}
.portales .mosaico .rot small{color:var(--gris)}
.portales .mosaico .tarjeta .tel__marco{box-shadow:0 18px 44px rgba(34,57,113,.22)}
.portales .mosaico .tarjeta:hover .tel__marco,
.portales .mosaico .tarjeta:focus-visible .tel__marco{box-shadow:0 28px 60px rgba(34,57,113,.32)}
.portales .mosaico .tarjeta:focus-visible{outline:2px solid var(--cian);outline-offset:6px;border-radius:var(--r-lg)}


/* ============================================================
   Soluciones — conmutador con maquetación alternada
   ============================================================ */
@property --sol-a{syntax:"<color>";inherits:false;initial-value:#16264c}
@property --sol-b{syntax:"<color>";inherits:false;initial-value:#223971}
@property --sol-c{syntax:"<color>";inherits:false;initial-value:#2a4485}
.sol{
  padding:var(--s-7) 0 0;position:relative;
  background:linear-gradient(160deg,var(--sol-a) 0%,var(--sol-b) 58%,var(--sol-c) 100%);
  animation:solColor 12s ease-in-out infinite alternate;
}
@keyframes solColor{
  0%{--sol-a:#0d1730;--sol-b:#223971;--sol-c:#2a4485}
  35%{--sol-a:#16264c;--sol-b:#1c4a9c;--sol-c:#0f5f96}
  70%{--sol-a:#0f2350;--sol-b:#2a5cb8;--sol-c:#1a7fb8}
  100%{--sol-a:#1e3a78;--sol-b:#3168cc;--sol-c:#2a4485}
}
@media (prefers-reduced-motion:reduce){
  .sol{animation:none}
}
.sol__env{max-width:var(--ancho);margin:0 auto;padding:0 20px}
.sol__enc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-4);align-items:end}
.sol__enc h2{font-family:var(--f-titulo);font-size:var(--t-h2);color:#fff;margin-top:10px}

/* Conmutador */
.sol__conm{display:inline-flex;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-full);padding:5px;gap:4px}
.sol__conm button{
  position:relative;overflow:hidden;border:0;cursor:pointer;background:transparent;color:#c8d6ef;
  font-family:var(--f-titulo);font-weight:600;font-size:.9rem;padding:11px 24px;border-radius:var(--r-full);
  transition:color .18s cubic-bezier(.22,1,.36,1),background .18s cubic-bezier(.22,1,.36,1);
}
.sol__conm button:hover{color:#fff;background:rgba(255,255,255,.10)}
.sol__conm button[aria-selected="true"]{background:#fff;color:var(--azul);box-shadow:0 6px 18px rgba(11,20,44,.30)}
.sol__conm button[aria-selected="true"]:hover{color:var(--azul);background:#fff}
/* barra de avance del cambio automático */
.sol__conm button i{
  position:absolute;left:0;bottom:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;
  background:var(--azul);border-radius:3px;opacity:0;
}
.sol.corre .sol__conm button[aria-selected="true"] i{opacity:1;animation:avanceConm 15s linear forwards}
@keyframes avanceConm{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Panel a sangre */
.sol__panel{
  margin-top:calc(var(--s-5) / 2);position:relative;overflow:hidden;background:transparent;
}
.sol__pista{max-width:var(--ancho);margin:0 auto;padding:calc(var(--s-6) / 2) 20px var(--s-7)}
.sol__vista{display:none}
.sol__vista[data-activo]{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:var(--s-5);align-items:center;
  animation:entraVista .5s cubic-bezier(.22,1,.36,1) both;
}
.sol__vista[data-activo] .sol__media{animation:entraMedia .6s cubic-bezier(.22,1,.36,1) both}
.sol__vista--inv[data-activo]{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
.sol__vista--inv[data-activo] .sol__media{order:0}
@keyframes entraVista{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes entraMedia{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

/* Foto circular */
.sol__media{position:relative;isolation:isolate}
.sol__media img{
  display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:50%;box-shadow:0 30px 70px rgba(0,0,0,.42);
}
.sol__media img.sol__img--gob{object-position:74% 50%}
.sol__media img.sol__img--tal{object-position:52% 50%}

/* Copy */
.sol__cuerpo h3{font-family:var(--f-titulo);font-size:clamp(1.5rem,2.6vw,2.1rem);color:#fff;line-height:1.18}
.sol__cuerpo h3 em{font-style:normal;color:var(--cian)}
.sol__cuerpo>p{color:#c8d6ef;margin-top:16px;max-width:50ch}
.sol__caps{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3) var(--s-4);margin-top:var(--s-4)}
.sol__cap{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start}
.sol__cap svg{width:26px;height:26px;stroke:var(--cian);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.sol__cap b{display:block;font-family:var(--f-titulo);font-size:.98rem;color:#fff;line-height:1.35}
.sol__cap small{display:block;color:#cfdcf2;font-size:.86rem;margin-top:4px;line-height:1.45;text-wrap:pretty}
.sol__cta{margin-top:var(--s-5);display:flex;gap:14px;flex-wrap:wrap}
.sol__panel .btn--primario{background:var(--cian);color:var(--azul-900)}
.sol__panel .btn--linea{border-color:rgba(255,255,255,.5);color:#fff}
@media(max-width:900px){
  .sol__enc{grid-template-columns:1fr}
  .sol__vista[data-activo]{grid-template-columns:1fr;gap:var(--s-4)}
  .sol__vista--inv[data-activo] .sol__media{order:0}
  .sol__media{max-width:340px}
  .sol__caps{grid-template-columns:1fr}
}


/* ---------- Mapa de sitios (Para quién) ---------- */
.mp{display:grid;gap:clamp(18px,2.4vw,28px);margin-top:var(--s-4)}
.mp__lienzo{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#e6eef8;border:1px solid var(--linea)}
.mp__lienzo svg{width:100%;height:auto;display:block}
.mp__manzana{fill:#dce6f4}
.mp__verde{fill:#d9ece0}
.mp__agua{fill:#d2e9f7}
.mp__via{stroke:#f2f7fd;stroke-width:16;stroke-linecap:round;fill:none}
.mp__via--l{fill:none;stroke:#c6d5e9;stroke-width:1.5;stroke-dasharray:10 12}
.mp__pin{cursor:pointer}
.mp__pin .disco{fill:#fff;stroke:#cfdaeb;stroke-width:1.5;transition:fill .28s cubic-bezier(.22,1,.36,1),stroke .28s ease}
.mp__pin .glifo{fill:none;stroke:var(--azul);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:stroke .28s ease}
.mp__pin .onda{fill:none;stroke:var(--cian);stroke-width:1.6;opacity:0}
.mp__pin.on .disco{fill:var(--azul);stroke:var(--azul)}
.mp__pin.on .glifo{stroke:var(--cian-luz)}
.mp__pin.on .onda{animation:mpOnda 2.2s cubic-bezier(.22,1,.36,1) infinite}
.mp__pin.on .onda:nth-of-type(2){animation-delay:.7s}
@keyframes mpOnda{0%{r:21;opacity:.8}100%{r:52;opacity:0}}
.mp__et{
  font-family:var(--f-titulo);font-weight:600;font-size:12px;fill:var(--gris);
  paint-order:stroke;stroke:#e6eef8;stroke-width:4px;transition:fill .28s ease;
}
.mp__pin.on .mp__et{fill:var(--azul)}
.mp__leyenda{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:9px;list-style:none;grid-auto-rows:1fr}
.mp__leyenda li{display:flex}
.mp__leyenda button{
  width:100%;min-height:58px;display:flex;align-items:center;gap:11px;text-align:left;cursor:pointer;
  font-family:var(--f-titulo);font-weight:600;font-size:.86rem;color:var(--tinta);
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-md);padding:11px 14px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.mp__leyenda button[aria-selected="true"]{border-color:var(--azul);box-shadow:0 8px 20px rgba(34,57,113,.12)}
.mp__leyenda svg{width:19px;height:19px;flex:none;fill:none;stroke:var(--cian-800);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mp__leyenda button[aria-selected="true"] svg{stroke:var(--azul)}
.mp__pie{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;border-top:1px solid var(--linea);padding-top:var(--s-2)}
.mp__pie b{font-family:var(--f-titulo);font-size:1.05rem;color:var(--azul)}
.mp__pie span{font-size:.92rem;color:var(--gris)}
@media (max-width:640px){.mp__et{font-size:15px}}
@media (prefers-reduced-motion:reduce){.mp__pin.on .onda{animation:none}}

/* ---------- Cobertura compacta ---------- */
.seccion--compacta{padding:clamp(30px,4vw,52px) 0}
.cobertura{display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,1.15fr);gap:var(--s-3) var(--s-4);align-items:center}
.cobertura .estados{justify-content:flex-end;flex-wrap:wrap}
@media (max-width:820px){.cobertura{grid-template-columns:1fr}.cobertura .estados{justify-content:flex-start}}

/* ---------- Riel de tres pasos (Connect Talent) ---------- */
.riel{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sombra);margin-top:var(--s-4)}
.rl{display:grid;grid-template-columns:repeat(3,1fr)}
.rl__paso{padding:clamp(20px,2.4vw,30px) clamp(20px,2.2vw,28px)}
.rl__paso + .rl__paso{border-left:1px solid var(--linea)}
.rl__cab{display:flex;align-items:center;gap:11px;margin-bottom:7px}
.rl__cab h3{margin:0}
.rl__num{
  flex:none;width:30px;height:30px;border-radius:50%;background:var(--azul);color:var(--blanco);
  display:grid;place-items:center;font-family:var(--f-titulo);font-weight:700;font-size:.86rem;
}
.rl__ico{margin-left:auto;width:26px;height:26px;fill:none;stroke:var(--cian-800);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.rl__paso h3{font-size:1.08rem;color:var(--azul);margin-bottom:5px;letter-spacing:-.01em}
.rl__paso > p{margin:0;font-size:.9rem;color:var(--gris);text-wrap:pretty}
.rl__mini{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px;list-style:none}
.rl__mini li{
  font-family:var(--f-titulo);font-weight:600;font-size:.72rem;color:var(--azul);
  background:#e6f5fd;border-radius:var(--r-full);padding:5px 11px;
}
.rl__barra{height:4px;background:var(--gris-claro);display:grid;grid-template-columns:repeat(3,1fr)}
.rl__barra i{background:var(--cian);transform-origin:left;animation:rlCarga 5.4s linear infinite}
.rl__barra i:nth-child(2){animation-delay:1.8s}
.rl__barra i:nth-child(3){animation-delay:3.6s}
@keyframes rlCarga{0%,100%{transform:scaleX(0)}12%{transform:scaleX(1)}33%{transform:scaleX(1)}34%{transform:scaleX(0)}}
.rl__pie{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;
  background:var(--gris-claro);border-top:1px solid var(--linea);padding:16px clamp(20px,2.2vw,28px);
}
.rl__pie b{font-family:var(--f-titulo);font-size:.95rem;color:var(--azul)}
.rl__pie span{font-size:.88rem;color:var(--gris)}
@media (max-width:820px){
  .rl{grid-template-columns:1fr}
  .rl__paso + .rl__paso{border-left:0;border-top:1px solid var(--linea)}
}
@media (prefers-reduced-motion:reduce){.rl__barra i{animation:none;transform:scaleX(1)}}

/* pantallas dentro del riel */
.rl__fono{margin-top:18px;display:flex;justify-content:center}
.rl__fono .fono{width:100%;max-width:258px;padding:9px;border-radius:40px;box-shadow:0 20px 44px rgba(11,20,44,.32),inset 0 0 0 1px rgba(255,255,255,.12)}
.rl__fono .fono::before,.rl__fono .fono::after{display:none}
.rl__fono .fono__pantalla{border-radius:32px}
.rl__fono .fono__isla{width:72px;height:20px;top:9px}
.rl__fono .demo__pant{opacity:1;transform:none}
.rl__fono .chat__cuerpo{justify-content:flex-end}
.rl__fono .vac__tarjeta--tenue{display:none}

/* encuadre de la foto de Connect Talent: las personas, no el techo */
.hero--producto .hero__fondo img[src*="connect-planta"]{
  object-position:50% 60%;transform:scale(1.12) translateX(16%);transform-origin:center;
}

/* ---------- Pantallas de los tres pasos ---------- */
.ct p{margin:0}
.ct h4{margin:0}
.ct{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff;text-align:left;font-family:var(--f-texto);color:#14181f;overflow:hidden}
.ct__estado{display:flex;justify-content:space-between;align-items:center;padding:11px 15px 4px;font-family:var(--f-titulo);font-weight:600;font-size:10px}
.ct__iconos{display:flex;align-items:center;gap:4px}
.ct__senal,.ct__wifi,.ct__bat{display:block;background:currentColor;opacity:.85}
.ct__senal{width:11px;height:8px;clip-path:polygon(0 70%,18% 70%,18% 100%,0 100%,0 70%,27% 45%,45% 45%,45% 100%,27% 100%,27% 45%,55% 22%,73% 22%,73% 100%,55% 100%,55% 22%,82% 0,100% 0,100% 100%,82% 100%)}
.ct__wifi{width:10px;height:8px;clip-path:polygon(50% 100%,0 40%,10% 30%,50% 70%,90% 30%,100% 40%)}
.ct__bat{width:15px;height:8px;border-radius:2px}
.ct__cuerpo{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}

/* 01 · ajustes iOS */
.ct--ios{background:#f2f2f7}
.ct--ios .ct__nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:2px 13px 9px;font-size:10px;color:#0a6cff}
.ct--ios .ct__nav b{font-family:var(--f-titulo);font-size:12px;color:#14181f;text-align:center}
.ct--ios .ct__nav span:last-child{text-align:right}
.ct--ios .ct__cuerpo{padding:0 12px;gap:5px}
.ios__card{background:#fff;border-radius:9px;overflow:hidden}
.ios__fila{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 11px;font-size:10px}
.ios__card .ios__fila + .ios__fila{border-top:1px solid #eceff4}
.ios__fila--sel b{color:#0a6cff;font-family:var(--f-titulo);font-weight:600;font-size:10.5px}
.ios__sw{width:32px;height:19px;border-radius:999px;background:#34c759;position:relative;flex:none}
.ios__sw::after{content:'';position:absolute;top:2px;right:2px;width:15px;height:15px;border-radius:50%;background:#fff}
.ios__info{width:14px;height:14px;border-radius:50%;border:1px solid #0a6cff;color:#0a6cff;font-size:8px;display:grid;place-items:center;font-family:var(--f-titulo);flex:none}
.ios__cand{width:8px;height:10px;border:1.4px solid #8a8a8e;border-top-left-radius:4px;border-top-right-radius:4px;flex:none}
.ios__et{font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:#8a8a8e;padding:6px 4px 0;margin:0}
.ios__tenue{color:#8a8a8e}

/* 02 · portal de vacante */
.vc__barra{background:#d5202b;color:#fff;font-family:var(--f-titulo);font-weight:600;font-size:9px;display:flex;align-items:center;gap:5px;padding:38px 13px 6px}
.vc__punto{width:6px;height:6px;border-radius:50%;background:#7ef29a;flex:none}
.vc__aviso{background:#fdf3d7;color:#8a5b00;font-size:8px;line-height:1.3;margin:0;padding:5px 12px;font-family:var(--f-titulo);font-weight:600}
.ct--vac .ct__cuerpo{padding:7px 12px 0;gap:4px}
.vc__cerca{margin:0;font-family:var(--f-titulo);font-weight:700;font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:#d5202b}
.vc__emp{display:flex;align-items:center;gap:8px}
.vc__logo{width:30px;height:30px;border-radius:7px;background:#fdecec;color:#d5202b;display:grid;place-items:center;font-family:var(--f-titulo);font-weight:700;font-size:10px;flex:none}
.vc__emp b{display:block;font-family:var(--f-titulo);font-size:10px;color:#d5202b}
.vc__emp small{font-size:7.5px;color:#5a6272;line-height:1.3;display:block}
.vc__puesto{font-family:var(--f-titulo);font-weight:700;font-size:14px;letter-spacing:-.02em;margin:0}
.vc__turno{margin:0;font-size:7.5px;color:#5a6272}
.vc__marca{align-self:center;background:#d5202b;color:#fff;border-radius:999px;padding:3px 10px;font-family:var(--f-titulo);font-weight:700;font-size:7px;letter-spacing:.08em;text-transform:uppercase}
.vc__oferta{background:#d5202b;color:#fff;border-radius:8px;padding:7px 9px;display:grid;gap:5px}
.vc__sueldo{display:flex;align-items:baseline;gap:3px;flex-wrap:wrap}
.vc__sueldo b{font-family:var(--f-titulo);font-weight:700;font-size:17px;letter-spacing:-.02em}
.vc__sueldo span{font-size:8px}
.vc__sueldo em{margin-left:auto;font-style:normal;font-size:7.5px;opacity:.9}
.vc__km{display:flex;align-items:center;gap:8px;border-top:1px solid rgba(255,255,255,.28);padding-top:6px}
.vc__km b{font-family:var(--f-titulo);font-weight:700;font-size:11px;color:#ffd84d}
.vc__km span{font-size:7px;opacity:.9}
.vc__km em{margin-left:auto;font-style:normal;font-size:7px;text-align:right;max-width:12ch;line-height:1.25}
.vc__chips{display:flex;flex-wrap:wrap;gap:4px}
.vc__chips span{font-family:var(--f-titulo);font-weight:600;font-size:7.5px;color:#d5202b;background:#fdecec;border-radius:999px;padding:3px 8px}
.vc__preg{margin:1px 0 0;font-family:var(--f-titulo);font-weight:700;font-size:8.5px}
.vc__btn{display:flex;align-items:center;justify-content:space-between;background:#d5202b;color:#fff;border-radius:7px;padding:8px 10px;font-family:var(--f-titulo);font-weight:700;font-size:9.5px;margin-bottom:6px}
.vc__btn b{color:#ffd84d}
.vc__pie{border-top:1px solid #e6e9f0;padding:6px 12px 12px;font-family:var(--f-titulo);font-weight:600;font-size:8.5px;color:#5a6272;text-align:center;display:grid;gap:6px;justify-items:center}
.vc__prog{width:100%;height:3px;border-radius:999px;background:#eef1f6;overflow:hidden}
.vc__prog i{display:block;height:100%;width:42%;background:linear-gradient(90deg,#ffd84d,#d5202b)}

/* 03 · WhatsApp */
.ct--chat{background:#ece5dd}
.ct__estado--chat{background:#f6f6f6}
.wa__enc{display:flex;align-items:center;gap:8px;background:#f6f6f6;border-bottom:1px solid #dfdfdf;padding:5px 12px 8px}
.wa__av{width:26px;height:26px;border-radius:50%;background:#fff;flex:none;overflow:hidden;position:relative;box-shadow:inset 0 0 0 1px #e6e9f0}
.wa__av img{position:absolute;width:250%;height:250%;left:50%;top:50%;transform:translate(-50%,-50%);object-fit:contain;display:block}
.wa__enc b{display:block;font-family:var(--f-titulo);font-size:10px;line-height:1.15}
.wa__enc small{display:block;font-size:7.5px;color:#5a6272;line-height:1.1}
.wa__cuerpo{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;gap:5px;padding:8px 9px 6px;overflow:hidden}
.wa__dia{align-self:center;background:#fff;border-radius:999px;padding:2px 9px;font-size:7px;color:#5a6272}
.wa__tarjeta{flex:none;align-self:flex-start;max-width:88%;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.wa__tarjeta-top{display:flex;align-items:center;gap:5px;background:var(--azul);color:#fff;padding:4px 8px;font-family:var(--f-titulo);font-weight:600;font-size:7px}
.wa__tarjeta-cuerpo{display:block;padding:6px 8px}
.wa__tarjeta-cuerpo b{display:block;font-family:var(--f-titulo);font-size:9px;color:#d5202b}
.wa__tarjeta-cuerpo small{display:block;font-size:7px;color:#5a6272}
.wa__tarjeta-cuerpo em{display:block;margin-top:3px;font-style:normal;color:#5a6272;font-family:var(--f-titulo);font-weight:600;font-size:6.5px}
.wa__b{flex:none;position:relative;max-width:86%;margin:0;padding:6px 8px 16px;border-radius:8px;font-size:8.5px;line-height:1.35;box-shadow:0 1px 2px rgba(0,0,0,.10)}
.wa__b b{display:block;font-family:var(--f-titulo);font-weight:700;font-size:8.5px;margin-top:2px}
.wa__b small{display:block;font-size:7px;color:#5a6272}
.wa__b time{position:absolute;right:7px;bottom:3px;font-size:6.5px;color:#7b8494}
.wa__b--ellos{align-self:flex-start;background:#fff}
.wa__b--yo{align-self:flex-end;background:#d9fdd3}
.wa__opciones{flex:none;align-self:flex-start;max-width:86%;background:#fff;border-radius:8px;padding:5px 8px;display:grid;gap:3px;box-shadow:0 1px 2px rgba(0,0,0,.10)}
.wa__opciones span{font-size:7px;color:#8a8a8e}
.wa__opciones a{font-size:8px;color:#0a6cff;border-top:1px solid #eceff4;padding-top:3px}
.wa__barra{background:#f6f6f6;border-top:1px solid #dfdfdf;padding:6px 12px 14px}
.wa__barra span{display:block;background:#fff;border-radius:999px;padding:5px 10px;font-size:8px;color:#8a8a8e}

/* ---------- Panel de administración (maqueta) ---------- */
.pnl{margin:0}
.pnl__marco{
  border-radius:var(--r-md);overflow:hidden;background:var(--blanco);
  border:1px solid var(--linea);box-shadow:var(--sombra-alta);
}
.pnl__crom{display:flex;align-items:center;gap:10px;background:#eef2f8;border-bottom:1px solid var(--linea);padding:8px 12px}
.pnl__luces{display:flex;gap:5px}
.pnl__luces i{width:8px;height:8px;border-radius:50%;background:#cdd6e4}
.pnl__url{
  flex:1;background:var(--blanco);border:1px solid var(--linea);border-radius:999px;
  padding:4px 12px;font-size:9.5px;color:var(--gris);font-family:var(--f-titulo);
}
.pnl__app{display:grid;grid-template-columns:106px 1fr;min-height:0}
.pnl__lat{background:var(--azul);color:var(--blanco);padding:12px 11px;display:grid;align-content:start;gap:14px}
.pnl__logo{display:block}
.pnl__logo img{width:70px;height:auto;display:block}
.pnl__nav{display:grid;gap:3px;font-family:var(--f-titulo);font-weight:600;font-size:9.5px}
.pnl__nav span{padding:5px 8px;border-radius:7px;color:#b9c9e6}
.pnl__nav-act{background:rgba(169,224,252,.18);color:var(--cian-luz) !important}
.pnl__zona{display:grid;gap:2px;font-size:8px;color:#a8b8d6;letter-spacing:.06em;text-transform:uppercase}
.pnl__zona b{font-family:var(--f-titulo);font-size:10px;color:var(--blanco);letter-spacing:0;text-transform:none}
.pnl__main{padding:12px;display:grid;gap:10px;align-content:start;background:#f7f9fd}
.pnl__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pnl__top b{display:block;font-family:var(--f-titulo);font-size:12px;color:var(--azul)}
.pnl__top small{font-size:8.5px;color:var(--gris)}
.pnl__filtros{display:flex;gap:5px}
.pnl__f{
  white-space:nowrap;font-style:normal;font-family:var(--f-titulo);font-weight:600;font-size:8px;
  background:var(--blanco);border:1px solid var(--linea);border-radius:999px;padding:4px 9px;color:var(--gris);
}
.pnl__f--act{background:var(--azul);border-color:var(--azul);color:var(--blanco)}
.pnl__kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.pnl__kpi{background:var(--blanco);border:1px solid var(--linea);border-radius:10px;padding:8px 9px;display:grid;gap:1px}
.pnl__kpi small{font-size:7.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.pnl__kpi b{font-family:var(--f-titulo);font-weight:700;font-size:15px;color:var(--azul);line-height:1.1}
.pnl__kpi em{font-style:normal;font-family:var(--f-titulo);font-weight:600;font-size:8px}
.pnl__sube{color:#1f7a4d}
.pnl__baja{color:var(--cian-800)}
.pnl__graf{background:var(--blanco);border:1px solid var(--linea);border-radius:10px;padding:9px 10px;display:grid;gap:6px}
.pnl__graf-cab{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.pnl__graf-cab b{font-family:var(--f-titulo);font-size:10px;color:var(--azul)}
.pnl__graf-cab small{font-size:8px;color:var(--gris)}
.pnl__barras{display:grid;grid-template-columns:repeat(7,1fr);align-items:end;gap:6px;height:56px}
.pnl__barras i{
  border-radius:3px 3px 2px 2px;
  background:linear-gradient(180deg,var(--cian),rgba(100,199,242,.35));
}
.pnl__barras i:nth-child(6){background:linear-gradient(180deg,var(--azul),rgba(34,57,113,.45))}
.pnl__dias{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;font-size:7.5px;color:var(--gris);text-align:center}
.pnl__dias em{font-style:normal}
.pnl__tabla{background:var(--blanco);border:1px solid var(--linea);border-radius:10px;overflow:hidden}
.pnl__fila{
  display:grid;grid-template-columns:1.5fr 1fr .6fr .8fr;gap:8px;align-items:center;
  padding:8px 10px;font-size:9px;color:var(--tinta);
}
.pnl__fila + .pnl__fila{border-top:1px solid #eef1f7}
.pnl__fila--cab{
  background:#f2f6fc;font-family:var(--f-titulo);font-weight:600;font-size:7.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gris);
}
.pnl__fila > span:first-child{display:flex;align-items:center;gap:7px;font-family:var(--f-titulo);font-weight:600}
.pnl__av{
  font-style:normal;flex:none;width:20px;height:20px;border-radius:6px;background:#e6f5fd;
  color:var(--azul);display:grid;place-items:center;font-size:7.5px;font-weight:700;
}
.pnl__fila b{font-family:var(--f-titulo);font-weight:700}
.pnl__eti{
  white-space:nowrap;justify-self:start;font-family:var(--f-titulo);font-weight:600;font-size:7.5px;
  border-radius:999px;padding:3px 8px;
}
.pnl__eti--viva{background:#e4f6ea;color:#1f7a4d}
.pnl__eti--rev{background:#fdf3d7;color:#8a5b00}
.pnl__eti--cerr{background:#eef1f7;color:var(--gris)}
.pnl figcaption{
  margin-top:var(--s-2);font-size:.85rem;color:var(--gris);
  font-family:var(--f-titulo);font-weight:600;text-align:center;
}
@media (max-width:900px){
  .pnl__app{grid-template-columns:1fr}
  .pnl__lat{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .pnl__nav{display:flex;flex-wrap:wrap}
  .pnl__kpis{grid-template-columns:repeat(2,1fr)}
  .pnl__fila{grid-template-columns:1.4fr .8fr .6fr}
  .pnl__fila > span:nth-child(2){display:none}
}

.hero--producto .hero__fondo img[src*="gob-hero"]{object-position:70% 42%}

/* ---------- Pantallas del riel de Gobernanza ---------- */
.rl__cq{container-type:inline-size;--u:0.3472cqw}
.ct--perfil{background:#fff}
.sp__portada{height:74px;overflow:hidden;flex:none}
.sp__portada img{width:100%;height:100%;object-fit:cover;display:block}
.ct--perfil .ct__cuerpo{padding:0 11px 0;display:block;overflow:hidden}
.sp__avatar{
  display:block;width:52px;height:52px;border-radius:50%;overflow:hidden;background:#fff;
  border:2.5px solid #fff;box-shadow:0 2px 6px rgba(11,20,44,.22);margin:5px auto;
}
.sp__avatar img{width:100%;height:100%;object-fit:contain;display:block}
.sp__nombre{margin:0;text-align:center;font-family:var(--f-titulo);font-weight:700;font-size:14px;letter-spacing:-.01em}
.sp__cifras{text-align:center;font-size:8px;color:#5a6272;margin:2px 0 0}
.sp__cifras b{font-family:var(--f-titulo);font-weight:700;color:#14181f}
.sp__bio{font-size:8px;line-height:1.4;color:#14181f;margin:6px 0 0}
.sp__bio span{color:#5a6272;font-family:var(--f-titulo);font-weight:600}
.sp__cat{font-size:8px;color:#5a6272;margin:4px 0 0;font-family:var(--f-titulo);font-weight:600}
.sp__btns{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.sp__btn{
  border-radius:7px;padding:7px 0;text-align:center;background:#eef1f7;color:#14181f;
  font-family:var(--f-titulo);font-weight:600;font-size:9px;
}
.sp__btn--pri{background:#0a6cff;color:#fff}
.sp__tabs{display:flex;gap:4px;margin-top:8px;border-bottom:1px solid #eceff4;padding-bottom:6px}
.sp__tab{font-family:var(--f-titulo);font-weight:600;font-size:8.5px;color:#5a6272;padding:3px 8px;border-radius:999px}
.sp__tab--on{background:#e8f1ff;color:#0a6cff}
.sp__tit{margin:8px 0 4px;font-family:var(--f-titulo);font-weight:700;font-size:11px}
.sp__det{list-style:none;display:grid;gap:6px;margin:0}
.sp__det li{display:flex;align-items:flex-start;gap:8px;font-size:8px;line-height:1.35;color:#14181f}
.sp__det svg{width:13px;height:13px;flex:none;fill:none;stroke:#5a6272;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sp__link{color:#0a6cff}

/* ---------- Panel municipal: dona y barras ---------- */
.pnl__dos{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.pnl__ficha{background:var(--blanco);border:1px solid var(--linea);border-radius:10px;padding:9px 10px;display:grid;gap:6px;align-content:start}
.pnl__ficha-cab{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.pnl__ficha-cab b{font-family:var(--f-titulo);font-size:10px;color:var(--azul);white-space:nowrap}
.pnl__ficha-cab small{white-space:nowrap}
.pnl__ficha-cab small{font-size:7.5px;color:var(--gris)}
.pnl__dona{position:relative;width:112px;justify-self:center}
.pnl__dona svg{width:100%;height:auto;display:block;transform:rotate(-90deg)}
.pnl__aro{fill:none;stroke:#eef2f8;stroke-width:6}
.pnl__seg{fill:none;stroke-width:6}
.pnl__dona-c{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center}
.pnl__dona-c b{font-family:var(--f-titulo);font-weight:700;font-size:17px;color:var(--azul);line-height:1}
.pnl__dona-c small{font-size:7px;color:var(--gris)}
.pnl__ley{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:3px 8px;margin:0}
.pnl__ley li{display:flex;align-items:center;gap:5px;font-size:7.5px;color:var(--gris)}
.pnl__ley i{width:7px;height:7px;border-radius:2px;flex:none}
.pnl__ley b{font-family:var(--f-titulo);font-weight:700;color:var(--tinta)}
.pnl__hbar{list-style:none;display:grid;gap:5px;margin:0}
.pnl__hbar li{display:grid;grid-template-columns:32px 1fr 26px;align-items:center;gap:6px;font-size:7.5px;color:var(--gris)}
.pnl__hbar i{display:block;height:7px;border-radius:999px;background:#eef2f8;overflow:hidden}
.pnl__hbar i b{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--cian-800),var(--cian))}
.pnl__hbar em{font-style:normal;font-family:var(--f-titulo);font-weight:700;font-size:7.5px;color:var(--azul);text-align:right}
.pnl__gen{display:flex;gap:3px;height:16px;border-radius:5px;overflow:hidden}
.pnl__gen span{
  display:grid;place-items:center;font-family:var(--f-titulo);font-weight:600;font-size:6.5px;color:#fff;white-space:nowrap;
}
.pnl__gen span:first-child{background:var(--azul)}
.pnl__gen span:last-child{background:var(--cian-800)}
@media (max-width:900px){.pnl__dos{grid-template-columns:1fr}.pnl__ley{grid-template-columns:1fr 1fr}}

/* ---------- Tarjetas que giran (beneficios) ---------- */
.ben__flip{
  position:relative;padding:0;border:0;background:none;box-shadow:none;
  min-height:250px;perspective:1200px;display:block;cursor:default;
}
.ben__flip:hover{transform:none;box-shadow:none;border-color:transparent}
.ben__flip:focus-visible{outline:3px solid rgba(100,199,242,.6);outline-offset:3px;border-radius:16px}
.ben__giro{
  position:relative;width:100%;height:100%;min-height:inherit;
  transform-style:preserve-3d;transition:transform .58s cubic-bezier(.22,1,.36,1);
}
.ben__flip:hover .ben__giro,
.ben__flip:focus-within .ben__giro,
.ben__flip:focus .ben__giro{transform:rotateY(180deg)}
.ben__cara{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:16px;padding:clamp(20px,2.1vw,28px);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 10px 26px rgba(34,57,113,.18);
}
.ben__cara--frente{
  background:linear-gradient(155deg,var(--tono),color-mix(in oklab,var(--tono) 76%,#000));
  color:#fff;justify-content:space-between;gap:12px;
}
.ben__cara--frente .ben__num{
  font-family:var(--f-texto);font-weight:700;font-size:.78rem;letter-spacing:.12em;
  color:var(--cian-luz);filter:none;margin:0;
}
.ben__cara--frente h3{
  font-family:var(--f-titulo);font-weight:600;font-size:1.06rem;line-height:1.3;
  letter-spacing:-.01em;color:#fff;text-wrap:pretty;
}
.ben__cara--dorso{
  transform:rotateY(180deg);
  background:linear-gradient(155deg,color-mix(in oklab,var(--tono) 88%,#fff),var(--tono));
  color:#e8f1fb;justify-content:center;
}
.ben__cara--dorso p{font-size:.86rem;line-height:1.6;color:#eef4fc;margin:0;text-wrap:pretty}
.ben__fases{list-style:none;display:grid;gap:3px;margin:10px 0 0}
.ben__fases li{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-family:var(--f-titulo);font-weight:600;font-size:.74rem;color:#fff;
  border-top:1px solid rgba(255,255,255,.2);padding-top:4px;
}
.ben__fases em{font-style:normal;font-weight:600;font-size:.72rem;color:var(--cian-luz);white-space:nowrap}
.ben__cara--dorso:has(.ben__fases){justify-content:flex-start}
@media(max-width:640px){.ben__flip{min-height:0}
  .ben__giro{transform:none !important}
  .ben__cara{position:static;backface-visibility:visible}
  .ben__cara--dorso{transform:none;border-radius:0 0 16px 16px;margin-top:-16px;padding-top:6px;box-shadow:none}
  .ben__cara--frente{border-radius:16px 16px 0 0}
}
@media (prefers-reduced-motion:reduce){.ben__giro{transition:none}}


/* =====================================================================
   Correcciones responsive — móvil
   ===================================================================== */
@media (max-width:900px){
  /* Nodos del diagrama: una sola columna real, sin escalonado */
  .orb .orb__col{width:100%}
  .orb .orb__col .nodo{max-width:none;width:100%}
  .orb .orb__col:first-of-type .nodo,
  .orb .orb__col:last-of-type .nodo{justify-self:stretch}
  .orb .nodo h3{font-size:.92rem;text-wrap:pretty}
  .orb .nodo h3 br{display:none}

  /* Carrusel de portales: el teléfono cabe completo */
  .mosaico{grid-auto-columns:min(84%,300px);scroll-padding-inline:0;gap:18px}

  /* El riel del conmutador se ajusta al contenido, no al ancho de la columna */
  .sol__conm{justify-self:start}

  /* El carrusel recorta en vertical (overflow-x:auto): deja aire para el levante */
  .mosaico{padding-top:14px}
}
/* Sin puntero fino no hay hover: nada se levanta ni se recorta */
@media (hover:none){
  .mosaico .tarjeta:hover,.mosaico .tarjeta:focus-visible{transform:none}
}
@media (max-width:640px){
  /* Teléfonos del carrusel: caben completos en pantalla, sin scroll vertical */
  .mosaico{grid-auto-columns:min(62%,208px);gap:14px}

  /* Conmutador gobierno / empresa: dos mitades, sin desborde */
  .sol__conm{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:4px;padding:4px}
  .sol__conm button{padding:12px 8px;font-size:.85rem;text-align:center}

  /* Foto circular de cada solución, centrada y en proporción */
  .sol__media{max-width:min(78vw,300px);margin-inline:auto}
}
@media (max-width:420px){
  .sol__conm button{font-size:.78rem;padding:11px 4px}
}

/* ---------- Mapa legible en móvil: lienzo desplazable que sigue al pin ---------- */
@media (max-width:640px){
  .mp__lienzo{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .mp__lienzo::-webkit-scrollbar{display:none}
  .mp__lienzo svg{width:760px;max-width:none}
  .mp__desliza{display:flex}
  .mp__leyenda{grid-template-columns:1fr 1fr;gap:8px}
  .mp__leyenda button{min-height:52px;padding:9px 11px;font-size:.8rem;gap:9px}
}
.mp__desliza{
  display:none;align-items:center;gap:7px;margin-top:10px;
  font-family:var(--f-titulo);font-weight:600;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris);
}

/* ---------- Tablet: encabezados centrados y carrusel más compacto ---------- */
@media (min-width:641px) and (max-width:1024px){
  /* Hero de portada */
  .hero--portada .hero__copy{max-width:none;text-align:center;margin-inline:auto}
  .hero--portada .hero__copy h1{max-width:none}
  .hero--portada .hero__texto{margin-inline:auto;max-width:56ch}
  .hero--portada .hero__acciones{justify-content:center}

  /* Qué hacemos */
  .sol__enc{justify-items:center;text-align:center}
  .sol__conm{justify-self:stretch;display:grid;grid-template-columns:1fr 1fr;width:min(100%,560px);margin-inline:auto;gap:5px}
  .sol__conm button{padding:14px 10px}

  /* Foto y texto de cada solución, centrados */
  .sol__vista[data-activo]{justify-items:center}
  .sol__media{margin-inline:auto}
  .sol__cuerpo{text-align:center}
  .sol__cuerpo>p{margin-inline:auto}
  /* Características en tarjetas 2×2, sin el hueco de la columna única */
  .sol__caps{grid-template-columns:1fr 1fr;gap:14px;max-width:none;margin-top:var(--s-4)}
  .sol__cap{
    grid-template-columns:1fr;justify-items:center;text-align:center;gap:10px;
    padding:20px 18px;border-radius:18px;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  }
  .sol__cap svg{width:28px;height:28px;margin-top:0}
  .sol__cap b{font-size:1rem;text-wrap:balance}
  .sol__cap small{margin-top:6px;text-wrap:balance}
  .sol__cta{justify-content:center}

  /* Encabezados de sección: La diferencia, Catálogo, Para quién */
  #comparativa > .env > .eyebrow,#comparativa > .env > h2,
  #modulos > .env > .eyebrow,#modulos > .env > h2,#modulos > .env > .subtitulo,
  #sectores > .env > .eyebrow,#sectores > .env > h2,#sectores > .env > .subtitulo{text-align:center}
  #comparativa > .env > h2,#modulos > .env > h2,#sectores > .env > h2,
  #modulos > .env > .subtitulo,#sectores > .env > .subtitulo{margin-inline:auto}
  #comparativa > .env > .regla,#modulos > .env > .regla,#sectores > .env > .regla{margin-inline:auto}
  #comparativa > .env > .eyebrow,#modulos > .env > .eyebrow,#sectores > .env > .eyebrow{margin-inline:auto;max-width:none}

  /* Teléfonos del carrusel: completos en pantalla, con recorrido visible */
  .mosaico{grid-auto-columns:min(46%,240px);gap:16px}
}

/* Botones de cada solución: casi todo el ancho en móvil y tablet */
@media (max-width:1024px){
  .sol__cta{flex-direction:column;align-items:center;gap:12px;width:100%}
  .sol__cta .btn{width:min(100%,460px);justify-content:center;text-align:center}
}

/* Connect Talent en móvil: foto 40% más grande, cabezas a la altura del título */
@media (max-width:560px){
  .hero--producto .hero__fondo img[src*="connect-planta"]{
    object-position:50% 86%;transform:scale(1.4) translateY(-16%);
  }
}