/* ============================================================================
   EVERNET S.A.S. — SISTEMA DE DISEÑO
   Hoja de estilos compartida por todas las páginas del sitio.
   Sin dependencias: no requiere Bootstrap, jQuery ni plugins.

   Si edita este archivo, suba el número de versión ?v= en TODAS las páginas
   que lo enlazan, o los visitantes seguirán viendo la versión en caché.
   ============================================================================ */

/* ═══════════════════════════════════════════════════════════════════════
   EVERNET S.A.S. — hoja de estilos única de la página de inicio
   Sin dependencias externas: no requiere Bootstrap, jQuery ni plugins.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* Azules institucionales */
  --navy:#0f2942;
  --navy-2:#16375a;
  --azul:#15569e;
  --azul-claro:#0d9de8;
  --accion:#1668bd;
  --turquesa:#0f7d78;

  /* Neutros con sesgo azul */
  --tinta:#12202e;
  --tinta-2:#44586b;
  --tinta-3:#6d8093;
  --papel:#f4f8fc;
  --blanco:#ffffff;
  --linea:#dde6ef;
  --linea-suave:#eaf1f8;
  --flecha:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 15 9%27%3E%3Cpath d=%27M0.6 3.6H9.6V0.9L14.4 4.5 9.6 8.1V5.4H0.6Z%27/%3E%3C/svg%3E");

  --radio:14px;
  --radio-sm:9px;
  --sombra:0 1px 2px rgba(15,41,66,.05), 0 8px 26px rgba(15,41,66,.07);
  --sombra-alta:0 12px 34px rgba(15,41,66,.16);

  --display:'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --texto:'Lato', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --ancho:1200px;
  --alto-cabecera:96px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--alto-cabecera) + 16px); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0; background:var(--blanco); color:var(--tinta);
  font-family:var(--texto); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

h1,h2,h3,h4{ font-family:var(--display); line-height:1.18; margin:0; color:var(--tinta); text-wrap:balance; }
p{ margin:0; }
img{ max-width:100%; display:block; }
a{ color:var(--azul); }

:focus-visible{ outline:3px solid var(--azul-claro); outline-offset:3px; border-radius:4px; }

.contenedor{ width:100%; max-width:var(--ancho); margin:0 auto; padding:0 20px; }

/* Enlace de salto para lectores de pantalla y teclado */
.saltar{
  position:absolute; left:12px; top:-60px; z-index:1000;
  background:var(--navy); color:#fff; padding:11px 18px; border-radius:0 0 8px 8px;
  font-weight:700; text-decoration:none; transition:top .2s;
}
.saltar:focus{ top:0; }

/* ── Barra superior de contacto ─────────────────────────────────────── */
.barra-top{ background:var(--navy); color:#cddef0; font-size:13.5px; }
.barra-top__in{ display:flex; align-items:center; justify-content:space-between; gap:14px 26px; flex-wrap:wrap; padding:8px 20px; }
.barra-top ul{ display:flex; align-items:center; gap:8px 22px; flex-wrap:wrap; margin:0; padding:0; list-style:none; }
.barra-top a{ color:#e3eefa; text-decoration:none; display:inline-flex; align-items:center; gap:7px; }
.barra-top a:hover{ color:#fff; text-decoration:underline; }
.barra-top .etq{ color:#8fb4d6; }
.ico{ width:17px; height:17px; flex-shrink:0; }

/* ── Cabecera y navegación ──────────────────────────────────────────── */
.cabecera{
  position:sticky; top:0; z-index:900; background:#fff;
  border-bottom:1px solid var(--linea); transition:box-shadow .2s;
}
.cabecera.fijada{ box-shadow:0 4px 18px rgba(15,41,66,.10); }
.cabecera__in{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:var(--alto-cabecera); padding:0 20px; max-width:1360px; }
/* Logotipo: el archivo Logos/logo_evernet.png es cuadrado (2251x2251) y la
   marca ocupa solo el 32,83% de su alto y el 90,32% de su ancho, centrada con
   márgenes simétricos. Se recorta ese vacío con overflow y se centra la imagen
   ampliada, de modo que la marca llene de verdad la caja. Todo el tamaño se
   controla con la variable --logo-alto.                                      */
.marca{
  position:relative; display:block; flex-shrink:0; overflow:hidden;
  --logo-alto:58px;
  height:var(--logo-alto);
  width:calc(var(--logo-alto) * 2.75);   /* proporción real de la marca */
}
.marca img{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:calc(var(--logo-alto) * 3.046);  /* 1 / 0,3283 */
  height:auto; max-width:none; display:block;
}

.nav{ display:flex; align-items:center; gap:2px; }
.nav a{
  font-family:var(--display); font-size:13px; font-weight:600; color:var(--tinta-2);
  text-decoration:none; padding:9px 10px; border-radius:8px; white-space:nowrap; transition:.15s;
}
.nav a:hover{ color:var(--azul); background:var(--linea-suave); }
.nav a[aria-current="true"]{ color:var(--azul); background:var(--linea-suave); }
.nav a.destacado{ background:var(--navy); color:#fff; padding:9px 14px; }
.nav a.destacado:hover{ background:var(--azul); color:#fff; }
.nav a.sato{ background:linear-gradient(135deg,#15569e,#0d9de8); color:#fff; padding:9px 14px; display:inline-flex; align-items:center; gap:7px; }
.nav a.sato:hover{ filter:brightness(1.08); color:#fff; }
.pastilla-nuevo{ background:#fff; color:#15569e; font-size:9.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; padding:2px 6px; border-radius:99px; line-height:1.5; }

.hamburguesa{
  display:none; width:46px; height:44px; border:1px solid var(--linea); background:#fff;
  border-radius:10px; cursor:pointer; padding:0; align-items:center; justify-content:center; flex-shrink:0;
}
.hamburguesa span{ display:block; width:20px; height:2px; background:var(--tinta); position:relative; transition:.2s; }
.hamburguesa span::before,.hamburguesa span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:var(--tinta); transition:.2s; }
.hamburguesa span::before{ top:-6px; }
.hamburguesa span::after{ top:6px; }
.hamburguesa[aria-expanded="true"] span{ background:transparent; }
.hamburguesa[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.hamburguesa[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

@media (max-width:1320px){
  .hamburguesa{ display:flex; }
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(86vw,340px);
    background:#fff; border-left:1px solid var(--linea);
    flex-direction:column; align-items:stretch; gap:4px;
    padding:calc(var(--alto-cabecera) + 20px) 18px 28px;
    transform:translateX(100%); transition:transform .25s ease; overflow-y:auto;
    box-shadow:-10px 0 40px rgba(15,41,66,.18);
  }
  .nav.abierto{ transform:translateX(0); }
  .nav a{ font-size:15px; padding:13px 14px; }
  .nav a.destacado,.nav a.sato{ justify-content:center; margin-top:6px; }
  .velo{ position:fixed; inset:0; background:rgba(15,41,66,.5); z-index:880; opacity:0; pointer-events:none; transition:opacity .25s; }
  /* Con el panel abierto el botón de cerrar sube a la esquina, para no
     quedar encima de un elemento del menú. */
  body.menu-abierto .hamburguesa{ position:fixed; top:14px; right:14px; z-index:1000; background:#fff; }
  .velo.visible{ opacity:1; pointer-events:auto; }
}

/* ── Botones ────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--display); font-size:15px; font-weight:700;
  padding:14px 26px; border-radius:10px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; transition:.18s; text-align:center;
}
.btn--primario{ background:var(--accion); color:#fff; }
.btn--primario:hover{ background:var(--azul); color:#fff; }
.btn--claro{ background:#fff; color:var(--azul); border-color:#fff; }
.btn--claro:hover{ background:#eaf3fc; color:var(--azul); }
.btn--linea{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.btn--linea:hover{ background:rgba(255,255,255,.14); color:#fff; }
/* Botón secundario: relleno azul claro + flecha, para que se lea como acción */
.btn--fantasma{
  background:#e9f2fc; color:var(--accion); border-color:rgba(22,104,189,.34);
  box-shadow:0 1px 2px rgba(15,41,66,.06);
}
.btn--fantasma::after{
  content:""; width:15px; height:9px; flex:0 0 15px; background:currentColor;
  -webkit-mask:var(--flecha) no-repeat center/contain; mask:var(--flecha) no-repeat center/contain;
  transition:transform .18s;
}
.btn--fantasma:hover{
  background:var(--accion); color:#fff; border-color:var(--accion);
  box-shadow:0 6px 16px rgba(22,104,189,.3);
}
.btn--fantasma:hover::after{ transform:translateX(3px); }
.btn--sm{ font-size:13.5px; padding:11px 18px; }

/* ── Secciones ──────────────────────────────────────────────────────── */
.seccion{ padding:clamp(56px,7vw,88px) 0; }
.seccion--gris{ background:var(--papel); }
.encabezado-seccion{ max-width:760px; margin:0 auto clamp(34px,4.5vw,50px); text-align:center; }
.etiqueta{
  display:inline-block; font-family:var(--display); font-size:11.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--azul);
  background:var(--linea-suave); padding:6px 13px; border-radius:99px; margin-bottom:14px;
}
.encabezado-seccion h2{ font-size:clamp(1.7rem,3.4vw,2.35rem); font-weight:800; letter-spacing:-.02em; margin-bottom:14px; }
.encabezado-seccion p{ color:var(--tinta-2); font-size:1.0125rem; }

/* ── Portada ────────────────────────────────────────────────────────── */
/* Portada: degradado propio + hebras de fibra óptica animadas en canvas.
   Sin fotografía de fondo. */
.portada{
  position:relative; color:#fff; overflow:hidden;
  background:linear-gradient(115deg,#0a1e33 0%,#123f6d 46%,#1668ad 100%);
}
.portada::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(115% 85% at 82% 12%, rgba(13,157,232,.34), transparent 58%),
    radial-gradient(90% 70% at 8% 96%, rgba(10,95,92,.30), transparent 62%);
}
.portada__lienzo{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.portada__in{ position:relative; z-index:2; padding:clamp(64px,10vw,120px) 20px clamp(56px,8vw,96px); max-width:var(--ancho); margin:0 auto; }
.portada__caja{ max-width:680px; }
.portada__marca{
  display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.32); border-radius:99px; padding:7px 15px;
  font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; margin-bottom:22px;
}
.portada h1{ font-size:clamp(2.4rem,7vw,4.1rem); font-weight:800; letter-spacing:-.03em; color:#fff; margin-bottom:16px; }
.portada h1 span{ display:block; font-size:clamp(1.05rem,2.6vw,1.6rem); font-weight:600; letter-spacing:.01em; color:#bfe2fb; margin-top:6px; }
.portada__texto{ font-size:clamp(1rem,1.6vw,1.125rem); color:rgba(255,255,255,.92); max-width:600px; margin-bottom:30px; }
.portada__acciones{ display:flex; gap:12px; flex-wrap:wrap; }

.franja-datos{ background:var(--navy-2); color:#fff; }
.franja-datos ul{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px; margin:0 auto; padding:0; list-style:none; background:rgba(255,255,255,.14); }
.franja-datos li{ background:var(--navy-2); padding:20px; text-align:center; }
.franja-datos b{ display:block; font-family:var(--display); font-size:1.5rem; font-weight:800; color:#7fc7f4; }
.franja-datos span{ display:block; font-size:13px; color:#c3d8ea; margin-top:3px; }

/* ── Tarjetas genéricas ─────────────────────────────────────────────── */
.rejilla{ display:grid; gap:22px; }
.rejilla--3{ grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }
.rejilla--4{ grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }

.tarjeta{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  box-shadow:var(--sombra); padding:26px; display:flex; flex-direction:column;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.tarjeta:hover{ transform:translateY(-3px); box-shadow:var(--sombra-alta); border-color:#bcd8f0; }
.tarjeta h3{ font-size:1.2rem; font-weight:700; margin-bottom:10px; }
.tarjeta p{ color:var(--tinta-2); font-size:.9375rem; margin-bottom:18px; }
.tarjeta .btn{ margin-top:auto; align-self:flex-start; }
.tarjeta__icono{
  width:62px; height:62px; border-radius:16px; background:var(--linea-suave);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px; overflow:hidden;
}
.tarjeta__icono img{ width:40px; height:40px; object-fit:contain; }

/* ── Franja del comparador (obligación CRC) ─────────────────────────── */
.franja-comparador{ background:linear-gradient(120deg,#0f2942 0%,#15569e 58%,#1d74b8 100%); color:#fff; padding:clamp(40px,6vw,58px) 0; }
.franja-comparador__in{ display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.franja-comparador__txt{ flex:1; min-width:280px; }
.franja-comparador h2{ color:#fff; font-size:clamp(1.5rem,3vw,1.95rem); font-weight:800; margin:12px 0 10px; }
.franja-comparador p{ color:rgba(255,255,255,.93); max-width:760px; font-size:.9688rem; }
.franja-comparador .etiqueta{ background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.34); color:#fff; margin:0; }

/* ── Soporte técnico ────────────────────────────────────────────────── */
.soporte{ display:grid; grid-template-columns:repeat(auto-fit,minmax(275px,1fr)); gap:22px; }
.soporte article{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--sombra);
  transition:transform .2s, box-shadow .2s;
}
.soporte article:hover{ transform:translateY(-3px); box-shadow:var(--sombra-alta); }
.soporte__img{ aspect-ratio:570/296; background:var(--linea-suave); }
.soporte__img img{ width:100%; height:100%; object-fit:cover; }
.soporte__cuerpo{ padding:22px; display:flex; flex-direction:column; flex:1; }
.soporte__cuerpo h3{ font-size:1.05rem; font-weight:700; margin-bottom:9px; min-height:2.5em; }
.soporte__cuerpo p{ color:var(--tinta-2); font-size:.9063rem; margin-bottom:16px; }
.soporte__cuerpo .btn{ margin-top:auto; align-self:flex-start; }
.soporte__tel{ font-size:.9063rem; color:var(--tinta-2); margin-bottom:16px; }
.soporte__tel a{ font-weight:700; text-decoration:none; }
.soporte__tel a:hover{ text-decoration:underline; }

/* ── Protección al usuario ──────────────────────────────────────────── */
.proteccion{ display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:22px; }
.proteccion a{
  position:relative; display:flex; flex-direction:column; gap:12px;
  background:var(--navy); color:#fff; text-decoration:none;
  border-radius:var(--radio); padding:26px; overflow:hidden; min-height:212px;
  transition:transform .2s, box-shadow .2s;
}
.proteccion a:nth-child(2){ background:var(--azul); }
.proteccion a:nth-child(3){ background:#1a7fc4; }
.proteccion a:nth-child(4){ background:var(--turquesa); }
.proteccion a:hover{ transform:translateY(-3px); box-shadow:var(--sombra-alta); }
/* Marca de agua: icono propio de cada tarjeta (antes era un PNG gris de
   relleno del tema antiguo, que se veia como un recuadro vacio). */
.proteccion .marca-agua{
  position:absolute; right:-14px; bottom:-18px; width:132px; height:132px;
  color:#fff; opacity:.15; pointer-events:none;
}
.proteccion h3{ position:relative; color:#fff; font-size:1.1rem; font-weight:700; }
.proteccion p{ position:relative; color:rgba(255,255,255,.9); font-size:.9063rem; flex:1; }
/* Llamada a la accion visible: pastilla con borde, no texto suelto */
.proteccion .ir{
  position:relative; align-self:flex-start; margin-top:4px;
  font-family:var(--display); font-weight:700; font-size:.875rem;
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 17px; border-radius:999px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.5);
  transition:.18s;
}
.proteccion .ir::after{
  content:""; width:15px; height:9px; flex:0 0 15px; background:currentColor;
  -webkit-mask:var(--flecha) no-repeat center/contain; mask:var(--flecha) no-repeat center/contain;
  transition:transform .18s;
}
.proteccion a:hover .ir{ background:#fff; color:var(--navy); border-color:#fff; }
.proteccion a:hover .ir::after{ transform:translateX(3px); }

/* ── Banner CRC ─────────────────────────────────────────────────────── */
.banner-crc{ padding:34px 0; background:var(--papel); }
.banner-crc a{ display:block; border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); }
.banner-crc img{ width:100%; height:auto; }

/* ── Cobertura ──────────────────────────────────────────────────────── */
.mapa{ width:100%; height:clamp(320px,48vw,470px); border-radius:var(--radio); overflow:hidden; border:1px solid var(--linea); background:var(--linea-suave); }
.municipios{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:26px; padding:0; list-style:none; }
.municipios li{ background:#fff; border:1px solid var(--linea); border-radius:99px; padding:7px 15px; font-size:13.5px; color:var(--tinta-2); }
.nota-cobertura{ text-align:center; color:var(--tinta-3); font-size:13.5px; margin-top:18px; }

/* ── Contacto ───────────────────────────────────────────────────────── */
.contacto{ display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:start; }
@media (max-width:900px){ .contacto{ grid-template-columns:1fr; } }

.bloque-datos{ background:#fff; border:1px solid var(--linea); border-radius:var(--radio); padding:28px; box-shadow:var(--sombra); }
.bloque-datos + .bloque-datos{ margin-top:22px; }
.bloque-datos h3{ font-size:1.15rem; font-weight:700; margin-bottom:14px; }
.bloque-datos p{ color:var(--tinta-2); font-size:.9375rem; }
.horario{ display:grid; gap:10px; margin:14px 0 0; padding:0; list-style:none; }
.horario li{ display:flex; justify-content:space-between; gap:16px; font-size:.9375rem; padding:10px 0; border-bottom:1px solid var(--linea-suave); }
.horario li:last-child{ border-bottom:0; }
.horario span{ color:var(--tinta-2); }
.horario b{ color:var(--tinta); white-space:nowrap; }

.datos-lista{ margin:0; padding:0; list-style:none; display:grid; gap:14px; }
.datos-lista li{ display:flex; gap:13px; align-items:flex-start; font-size:.9375rem; }
.datos-lista .ico{ width:19px; height:19px; margin-top:3px; color:var(--azul); }
.datos-lista strong{ display:block; font-family:var(--display); font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-3); margin-bottom:2px; }
.datos-lista a{ text-decoration:none; }
.datos-lista a:hover{ text-decoration:underline; }

.redes{ display:flex; gap:12px; margin-top:16px; }
.redes a{ width:44px; height:44px; border-radius:12px; background:var(--linea-suave); display:flex; align-items:center; justify-content:center; color:var(--azul); transition:.18s; }
.redes a:hover{ background:var(--azul); color:#fff; }
.redes svg{ width:22px; height:22px; }

/* ── Formulario ─────────────────────────────────────────────────────── */
.formulario{ background:#fff; border:1px solid var(--linea); border-radius:var(--radio); padding:28px; box-shadow:var(--sombra); }
.formulario h3{ font-size:1.15rem; font-weight:700; margin-bottom:6px; }
.formulario > p{ color:var(--tinta-2); font-size:.9375rem; margin-bottom:20px; }
.campos{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.campo{ display:flex; flex-direction:column; gap:6px; }
.campo--ancho{ grid-column:1 / -1; }
.campo label{ font-family:var(--display); font-size:12.5px; font-weight:700; color:var(--tinta-2); }
.campo input,.campo textarea{
  font-family:var(--texto); font-size:15px; color:var(--tinta);
  border:1px solid var(--linea); border-radius:var(--radio-sm); padding:12px 14px;
  background:#fff; width:100%; transition:border-color .15s;
}
.campo textarea{ min-height:130px; resize:vertical; }
.campo input:focus,.campo textarea:focus{ border-color:var(--azul-claro); }
.campo input[aria-invalid="true"],.campo textarea[aria-invalid="true"]{ border-color:#c0392b; }
.campo .error{ font-size:12.5px; color:#c0392b; min-height:1px; }
.aviso-datos{ font-size:12.5px; color:var(--tinta-3); margin-top:14px; }
.aviso-datos a{ font-weight:700; }
@media (max-width:560px){ .campos{ grid-template-columns:1fr; } }

/* ── Pie de página ──────────────────────────────────────────────────── */
.pie{ background:var(--navy); color:#c3d8ea; padding:clamp(46px,6vw,64px) 0 0; }
.pie__rejilla{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px; padding-bottom:38px; }
@media (max-width:900px){ .pie__rejilla{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .pie__rejilla{ grid-template-columns:1fr; } }
.pie h4{ font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:#7fc7f4; margin-bottom:16px; }
.pie ul{ margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.pie a{ color:#d6e6f5; text-decoration:none; font-size:14px; }
.pie a:hover{ color:#fff; text-decoration:underline; }
.pie__logo img{ height:56px; width:auto; margin-bottom:16px; }
.pie__acerca{ font-size:13.5px; line-height:1.7; color:#a9c4dc; }
/* ── Canales oficiales de denuncia en el pie ────────────────────────
   Franja discreta: circulos blancos pequeños sobre el azul del pie, para
   que los logos institucionales se lean sin competir con el resto.    */
.pie__denuncia{
  border-top:1px solid rgba(255,255,255,.12);
  padding:22px 0 24px; display:flex; flex-wrap:wrap;
  align-items:center; gap:14px 26px;
}
.pie__denuncia h4{ margin:0; flex:0 0 auto; }
.pie__denuncia ul{ display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none; }
.pie__denuncia ul a{   /* solo los circulos, no el enlace del parrafo */
  width:46px; height:46px; padding:7px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center;
  opacity:.9; transition:opacity .18s, transform .18s, box-shadow .18s;
}
.pie__denuncia ul a:hover{ opacity:1; transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.3); }
.pie__denuncia img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.pie__denuncia p{ flex:1 1 260px; margin:0; font-size:12.5px; line-height:1.6; color:#8fb4d6; }
.pie__denuncia p a{ font-size:inherit; text-decoration:underline; }
@media (max-width:640px){
  .pie__denuncia{ gap:12px; }
  .pie__denuncia ul a{ width:42px; height:42px; padding:6px; }
}

.pie__legal{ border-top:1px solid rgba(255,255,255,.14); padding:20px 0 26px; display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; font-size:13px; color:#8fb4d6; }

/* ── Botones flotantes ──────────────────────────────────────────────── */
.wa-flotante{
  position:fixed; right:18px; bottom:18px; z-index:950;
  width:58px; height:58px; border-radius:50%; background:#25d366; color:#fff;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  box-shadow:0 8px 22px rgba(7,94,84,.42); transition:transform .18s;
}
.wa-flotante:hover{ transform:scale(1.07); color:#fff; }
.wa-flotante svg{ width:31px; height:31px; }
.arriba{
  position:fixed; right:18px; bottom:88px; z-index:940;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--linea);
  background:#fff; color:var(--azul); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sombra); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.arriba.visible{ opacity:1; pointer-events:auto; }
.arriba:hover{ transform:translateY(-2px); }
.arriba svg{ width:20px; height:20px; }

/* ── Aparición suave al hacer scroll ────────────────────────────────── */
.revelar{ opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease; }
.revelar.visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .revelar{ opacity:1; transform:none; } }

@media print{
  .barra-top,.cabecera,.portada,.wa-flotante,.arriba,.franja-datos,.mapa{ display:none !important; }
  body{ font-size:12px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PÁGINAS INTERIORES — encabezado compacto, tarifas y notas
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Encabezado de página interior ──────────────────────────────────── */
.hero-pagina{
  position:relative; color:#fff; overflow:hidden;
  background:linear-gradient(120deg,#0f2942 0%,#15569e 58%,#1d74b8 100%);
  padding:clamp(40px,6vw,68px) 0 clamp(36px,5vw,56px);
}
.hero-pagina__fondo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.16; }
.hero-pagina .contenedor{ position:relative; z-index:2; }
.hero-pagina h1{ color:#fff; font-size:clamp(1.85rem,4.4vw,2.85rem); font-weight:800; letter-spacing:-.02em; margin:12px 0 12px; }
.hero-pagina p{ color:rgba(255,255,255,.92); max-width:720px; font-size:1.0125rem; }
.hero-pagina .etiqueta{ background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.34); color:#fff; margin:0; }
.hero-pagina__acciones{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }

/* ── Miga de pan ────────────────────────────────────────────────────── */
.migas{ font-size:13px; color:rgba(255,255,255,.78); margin:0 0 4px; }
.migas ol{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.migas li::after{ content:"›"; margin-left:8px; opacity:.6; }
.migas li:last-child::after{ content:""; margin:0; }
.migas a{ color:rgba(255,255,255,.9); text-decoration:none; }
.migas a:hover{ color:#fff; text-decoration:underline; }
.migas [aria-current]{ color:#a9dcfb; }

/* ── Grupos de tarifas ──────────────────────────────────────────────── */
.grupo-tarifas + .grupo-tarifas{ margin-top:clamp(44px,6vw,66px); }
.grupo-tarifas__cab{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.grupo-tarifas__cab h2{ font-size:clamp(1.4rem,2.8vw,1.8rem); font-weight:800; letter-spacing:-.015em; }
.grupo-tarifas__cab p{ color:var(--tinta-2); font-size:.9375rem; }

.tarifas{ display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:20px; }

.tarifa{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  box-shadow:var(--sombra); padding:22px; display:flex; flex-direction:column;
  transition:transform .2s, box-shadow .2s, border-color .2s; position:relative;
}
.tarifa:hover{ transform:translateY(-3px); box-shadow:var(--sombra-alta); border-color:#bcd8f0; }
.tarifa--destacada{ border-color:var(--azul); box-shadow:0 0 0 2px rgba(21,86,158,.22), var(--sombra); }

.tarifa__cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:16px; }
.chip-tec{
  font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:5px 10px; border-radius:99px; white-space:nowrap;
  background:var(--linea-suave); color:var(--azul);
}
.chip-tec--fibra{ background:var(--azul); color:#fff; }
.chip-top{
  font-family:var(--display); font-size:9.5px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; padding:4px 9px; border-radius:99px;
  background:var(--azul-claro); color:#06304d; white-space:nowrap;
}

.tarifa__vel{ display:flex; gap:10px; margin-bottom:18px; }
.tarifa__vel div{ flex:1; background:var(--papel); border-radius:10px; padding:11px 8px; text-align:center; }
.tarifa__vel b{ display:block; font-family:var(--display); font-size:1.5rem; font-weight:800; color:var(--azul); line-height:1.1; }
.tarifa__vel span{ display:block; font-size:10.5px; color:var(--tinta-3); margin-top:3px; }

.tarifa__precio{ border-top:1px dashed var(--linea); padding-top:16px; margin-top:auto; }
.tarifa__precio dl{ margin:0; display:grid; gap:12px; }
.tarifa__precio dt{
  font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tinta-3); margin-bottom:2px;
}
.tarifa__precio dd{ margin:0; }
.tarifa__monto{ font-family:var(--display); font-size:1.55rem; font-weight:800; color:var(--tinta); letter-spacing:-.02em; }
.tarifa__monto--sec{ font-size:1.15rem; color:var(--tinta-2); }
.tarifa__periodo{ font-size:12.5px; color:var(--tinta-3); margin-left:3px; }
.tarifa__exento{ display:block; width:fit-content; margin-top:7px; font-size:11px; font-weight:700; color:#0a5f5c; background:#dff2f0; border:1px solid #b5e0dc; border-radius:99px; padding:2px 9px; }
.tarifa .btn{ margin-top:18px; width:100%; }
.tarifa__aviso{ font-size:11px; color:var(--tinta-3); margin-top:10px; line-height:1.5; }

/* ── Bloque de notas legales ────────────────────────────────────────── */
.bloque-notas{
  background:var(--navy); color:#c3d8ea; border-radius:var(--radio);
  padding:clamp(24px,3.5vw,34px); margin-top:clamp(40px,5vw,56px);
}
.bloque-notas h2{ color:#fff; font-size:1.15rem; font-weight:700; margin-bottom:16px; }
.bloque-notas ul{ margin:0; padding-left:20px; display:grid; gap:9px; }
.bloque-notas li{ font-size:.9063rem; line-height:1.7; }
.bloque-notas a{ color:#8fc9f5; font-weight:700; }
.bloque-notas__acciones{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.bloque-notas .btn--fantasma{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.bloque-notas .btn--fantasma:hover{ background:rgba(255,255,255,.12); border-color:#fff; color:#fff; }

/* ── Franja de aviso en línea ───────────────────────────────────────── */
.aviso-linea{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--linea-suave); border:1px solid #cfe2f4; border-left:4px solid var(--azul);
  border-radius:var(--radio-sm); padding:16px 20px; margin-bottom:clamp(28px,4vw,40px);
}
.aviso-linea p{ flex:1; min-width:240px; font-size:.9375rem; color:var(--tinta-2); }
.aviso-linea strong{ color:var(--tinta); }

/* ── Solo para lectores de pantalla ─────────────────────────────────── */
.sr-solo{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ═══════════════════════════════════════════════════════════════════════
   PÁGINAS NORMATIVAS — texto legal, fichas técnicas y canales
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Disposición con índice lateral ─────────────────────────────────── */
.doc{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:44px; align-items:start; }
@media (max-width:960px){ .doc{ grid-template-columns:minmax(0,1fr); gap:24px; } }

.indice{ position:sticky; top:calc(var(--alto-cabecera) + 20px); }
@media (max-width:960px){
  .indice{ position:static; background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio); padding:18px; }
}
.indice h2{ font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--tinta-3); margin-bottom:12px; }
.indice ol{ list-style:none; margin:0; padding:0; display:grid; gap:2px; counter-reset:idx; }
.indice a{
  display:block; padding:7px 12px; border-left:2px solid var(--linea);
  font-size:13.5px; color:var(--tinta-2); text-decoration:none; line-height:1.45; transition:.15s;
}
.indice a:hover{ border-left-color:var(--azul); color:var(--azul); background:var(--linea-suave); }

/* ── Texto normativo ────────────────────────────────────────────────── */
/* ── Texto justificado ─────────────────────────────────────────────────
   Se justifica solo la prosa larga: paginas normativas, la introduccion
   de la portada y las notas de los planes. NO se justifica el texto de
   las tarjetas ni de las columnas estrechas, donde la justificacion abre
   huecos entre palabras.
   La particion silabica es imprescindible en espanol: sin ella la ultima
   palabra de cada linea empuja el resto y aparecen rios de espacio en
   blanco. Funciona porque cada pagina declara <html lang="es">.        */
.prosa p,
.prosa li,
.prosa dd,
.texto-intro p,
.bloque-notas li{
  text-align:justify;
  -webkit-hyphens:auto; hyphens:auto;
  hyphenate-limit-chars:6 3 3;   /* no parte palabras de menos de 6 letras */
  overflow-wrap:break-word;      /* correos y URL largas no rompen el bloque */
}

/* La justificacion NO aplica en columnas estrechas: dentro de tarjetas y
   fichas abre huecos entre palabras. Se vuelve a alinear a la izquierda. */
.prosa .tarifa p, .prosa .tarifa li,
.prosa .canal p,  .prosa .canal li,
.prosa .video__txt p,
.prosa .desplegable dd,
.prosa .kpi{ text-align:left; -webkit-hyphens:manual; hyphens:manual; }

/* Introduccion de la portada (antes iba con estilos en linea) */
.texto-intro{ max-width:880px; margin:0 auto; }
.texto-intro p{ color:var(--tinta-2); font-size:1.0313rem; line-height:1.75; }
.texto-intro p + p{ margin-top:16px; }

.prosa{ max-width:70ch; }
.prosa > * + *{ margin-top:16px; }
.prosa h2{
  font-size:clamp(1.25rem,2.4vw,1.55rem); font-weight:800; letter-spacing:-.015em;
  margin-top:44px; padding-top:26px; border-top:1px solid var(--linea); scroll-margin-top:110px;
}
.prosa > h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.prosa h3{ font-size:1.075rem; font-weight:700; margin-top:28px; }
.prosa p, .prosa li{ color:var(--tinta-2); font-size:1rem; line-height:1.75; }
.prosa strong{ color:var(--tinta); }
.prosa ul, .prosa ol{ padding-left:22px; display:grid; gap:9px; }
.prosa ul{ list-style:disc; }
.prosa a{ font-weight:600; }
.prosa dl{ display:block; margin:16px 0 0; }   /* separa la lista del parrafo anterior */
.prosa dt{ font-family:var(--display); font-weight:700; color:var(--tinta); font-size:1.0125rem; margin-top:24px; }
.prosa dt:first-child{ margin-top:0; }
.prosa dd{ margin:6px 0 0; color:var(--tinta-2); line-height:1.75; }

/* Cita literal de una norma o de un texto de obligatoria publicación */
.cita{
  background:var(--papel); border-left:4px solid var(--azul);
  border-radius:0 var(--radio-sm) var(--radio-sm) 0; padding:18px 22px;
}
.cita p{ font-size:.9688rem; line-height:1.75; }
.cita p + p{ margin-top:12px; }
.cita cite{ display:block; margin-top:12px; font-size:12.5px; font-style:normal; color:var(--tinta-3); font-weight:600; }

/* ── Tabla de datos técnicos ────────────────────────────────────────── */
.tabla-envoltura{ overflow-x:auto; border:1px solid var(--linea); border-radius:var(--radio); }
.tabla-datos{ width:100%; border-collapse:collapse; font-size:.9375rem; background:#fff; min-width:460px; }
.tabla-datos caption{ text-align:left; padding:14px 18px; font-family:var(--display); font-weight:700; color:var(--tinta); border-bottom:1px solid var(--linea); background:var(--papel); }
.tabla-datos th, .tabla-datos td{ padding:11px 18px; text-align:left; border-bottom:1px solid var(--linea-suave); vertical-align:top; }
.tabla-datos thead th{ font-family:var(--display); font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-3); background:var(--papel); }
.tabla-datos tbody th{ font-weight:600; color:var(--tinta); width:44%; }
.tabla-datos td{ color:var(--tinta-2); }
.tabla-datos tbody tr:last-child th, .tabla-datos tbody tr:last-child td{ border-bottom:0; }

/* ── Canales de denuncia / atención ─────────────────────────────────── */
.canales{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:16px; }
.canal{ background:#fff; border:1px solid var(--linea); border-radius:var(--radio); padding:20px; }
.canal h3{ font-size:1rem; font-weight:700; margin-bottom:8px; }
.canal p{ font-size:.875rem; color:var(--tinta-2); line-height:1.65; }
.canal p + p{ margin-top:7px; }
.canal a{ font-weight:600; word-break:break-word; }

/* ── Lista de documentos descargables ───────────────────────────────── */
/* ── Guía por pasos numerados (factura) ─────────────────────────────── */
.pasos{ display:grid; gap:18px; margin:24px 0 0; padding:0; list-style:none; counter-reset:paso; }
.pasos > li{
  counter-increment:paso; position:relative;
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:20px 22px 20px 66px; box-shadow:var(--sombra);
}
.pasos > li::before{
  content:counter(paso); position:absolute; left:20px; top:20px;
  width:32px; height:32px; border-radius:50%; background:var(--accion); color:#fff;
  font-family:var(--display); font-weight:800; font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.pasos h3{ font-size:1.0125rem; font-weight:700; margin:0 0 7px; }
.pasos p{ color:var(--tinta-2); font-size:.9375rem; line-height:1.7; margin:0; }
.pasos p + p{ margin-top:8px; }
.pasos figure{ margin:14px 0 0; }
.pasos figure img{
  width:100%; height:auto; border:1px solid var(--linea);
  border-radius:var(--radio-sm); background:var(--papel);
}
.pasos figcaption{ font-size:12px; color:var(--tinta-3); margin-top:7px; }
@media (max-width:560px){
  .pasos > li{ padding:56px 18px 18px; }
  .pasos > li::before{ left:18px; top:16px; }
}

/* ── Vídeos informativos (SATO TV) ──────────────────────────────────── */
.videos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin-top:22px; }
.video{ background:#fff; border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); }
.video video{ width:100%; height:auto; display:block; background:var(--navy); aspect-ratio:16/9; }
.video__txt{ padding:16px 18px; }
.video__txt h3{ font-size:1rem; font-weight:700; margin:0 0 5px; }
.video__txt p{ font-size:.875rem; color:var(--tinta-2); margin:0; line-height:1.6; }

/* ── Bloque desplegable (listas de canales) ─────────────────────────── */
.desplegable{ border:1px solid var(--linea); border-radius:var(--radio-sm); background:var(--papel); margin-top:14px; }
.desplegable > summary{
  cursor:pointer; padding:12px 16px; font-family:var(--display);
  font-weight:700; font-size:.875rem; color:var(--azul); list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.desplegable > summary::-webkit-details-marker{ display:none; }
.desplegable > summary::after{ content:"+"; font-size:1.15rem; line-height:1; color:var(--azul); }
.desplegable[open] > summary::after{ content:"–"; }
.desplegable__cuerpo{ padding:2px 16px 16px; border-top:1px solid var(--linea); }
.desplegable__cuerpo dt{
  font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tinta-3); margin-top:14px;
}
.desplegable__cuerpo dt:first-of-type{ margin-top:12px; }
.desplegable__cuerpo dd{ margin:4px 0 0; font-size:.875rem; color:var(--tinta-2); line-height:1.65; }

/* ── Logos de entidades oficiales ───────────────────────────────────
   Rejilla de escudos en circulo para las autoridades ante las que el
   usuario puede denunciar. Si el archivo del logo todavia no esta en el
   servidor, el circulo muestra el nombre de la entidad en vez de un
   icono roto (lo hace el atributo onerror del <img>).               */
ul.entidades{   /* ul. para ganarle a .prosa ul, que pone viñetas */
  display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:24px 18px; margin:22px 0 0; padding-left:0; list-style:none;
}
.entidades a{
  display:flex; flex-direction:column; align-items:center; gap:11px;
  text-decoration:none; text-align:center; color:var(--tinta-2);
  font-family:var(--display); font-size:.8125rem; font-weight:700; line-height:1.35;
}
.entidades__marca{
  width:118px; height:118px; border-radius:50%; box-sizing:border-box;
  border:3px solid var(--linea); background:#fff; padding:15px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  transition:transform .2s, border-color .2s, box-shadow .2s;
}
.entidades__marca img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.entidades a:hover{ color:var(--azul); }
.entidades a:hover .entidades__marca{
  border-color:var(--azul); box-shadow:var(--sombra); transform:translateY(-3px);
}
.entidades__marca--sin-logo::after{
  content:attr(data-sigla); font-family:var(--display); font-weight:800;
  font-size:.9375rem; line-height:1.25; color:var(--azul);
}
@media (max-width:520px){
  ul.entidades{ grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:18px 12px; }
  .entidades__marca{ width:96px; height:96px; padding:12px; }
}

.docs{ display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.docs a{
  display:flex; align-items:center; gap:13px; padding:15px 18px; text-decoration:none;
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio-sm);
  color:var(--tinta); font-weight:600; font-size:.9375rem; transition:.15s;
}
.docs a:hover{ border-color:var(--azul); background:var(--linea-suave); }
.docs svg{ width:20px; height:20px; color:var(--azul); flex-shrink:0; }
.docs small{ display:block; font-weight:400; color:var(--tinta-3); font-size:12.5px; margin-top:2px; }

/* ── Banda de contacto compacta ─────────────────────────────────────── */
.contacto-rapido{ background:var(--navy); color:#c3d8ea; padding:clamp(32px,4.5vw,46px) 0; }
.contacto-rapido__in{ display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; }
.contacto-rapido h2{ color:#fff; font-size:1.35rem; font-weight:800; margin-bottom:8px; }
.contacto-rapido p{ font-size:.9375rem; max-width:640px; }
/* :not(.btn) evita que esta regla pise el color de los botones de la banda */
.contacto-rapido a:not(.btn){ color:#8fc9f5; font-weight:700; }
.contacto-rapido__acciones{ display:flex; gap:12px; flex-wrap:wrap; }
.contacto-rapido .btn--fantasma{ background:transparent; color:#fff !important; border-color:rgba(255,255,255,.4); }
.contacto-rapido .btn--fantasma:hover{ background:rgba(255,255,255,.12); border-color:#fff; }

/* ── Sello de última actualización ──────────────────────────────────── */
.sello-actualizacion{
  display:inline-flex; align-items:center; gap:9px; font-size:12.5px; color:var(--tinta-3);
  background:var(--papel); border:1px solid var(--linea); border-radius:99px; padding:7px 15px; margin-top:26px;
}
.sello-actualizacion b{ color:var(--tinta-2); font-weight:600; }

/* ═══════════════════════════════════════════════════════════════════════
   INDICADORES DE ATENCIÓN AL USUARIO
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Franja de metadatos del reporte ────────────────────────────────── */
dl.meta-doc{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px;
  background:var(--linea); border:1px solid var(--linea); border-radius:var(--radio);
  overflow:hidden; margin-bottom:clamp(28px,4vw,40px);
}
.meta-doc div{ background:#fff; padding:16px 18px; }
.meta-doc dt{
  font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--tinta-3); margin-bottom:4px;
}
.meta-doc dd{ margin:0; font-size:.9375rem; font-weight:600; color:var(--tinta); }

/* ── Resumen de indicadores ─────────────────────────────────────────── */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:14px; }
.kpi{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  box-shadow:var(--sombra); padding:20px; display:flex; flex-direction:column; gap:4px;
}
.kpi__valor{
  font-family:var(--display); font-size:2.35rem; font-weight:800; line-height:1;
  color:var(--azul); letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.kpi__rotulo{ font-size:.875rem; color:var(--tinta-2); line-height:1.5; }
.kpi__barra{ height:6px; border-radius:99px; background:var(--linea-suave); overflow:hidden; margin-top:10px; }
.kpi__barra span{ display:block; height:100%; border-radius:99px; background:var(--azul-claro); }

/* ── Detalle por canal ──────────────────────────────────────────────── */
.grupo-ind{ background:#fff; border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); }
.grupo-ind + .grupo-ind{ margin-top:24px; }
.grupo-ind__cab{ padding:20px 22px; background:var(--papel); border-bottom:1px solid var(--linea); }
.grupo-ind__cab h3{ font-size:1.075rem; font-weight:700; margin-bottom:3px; }
.grupo-ind__cab p{ font-size:.875rem; color:var(--tinta-3); }
.indicador{ display:grid; grid-template-columns:1fr auto; gap:6px 22px; align-items:center; padding:18px 22px; border-bottom:1px solid var(--linea-suave); }
.indicador:last-child{ border-bottom:0; }
.indicador__txt{ font-size:.9375rem; color:var(--tinta-2); line-height:1.6; }
.indicador__sentido{ display:block; font-size:11.5px; color:var(--tinta-3); margin-top:4px; }
.indicador__dato{ display:flex; align-items:center; gap:12px; justify-content:flex-end; }
.indicador__valor{
  font-family:var(--display); font-size:1.6rem; font-weight:800; color:var(--tinta);
  font-variant-numeric:tabular-nums; min-width:74px; text-align:right;
}
@media (max-width:560px){
  .indicador{ grid-template-columns:1fr; }
  .indicador__dato{ justify-content:flex-start; }
  .indicador__valor{ min-width:0; text-align:left; }
}

/* Estado del indicador: turquesa cuando cumple, neutro cuando está en
   seguimiento. Se apoya también en el texto, no solo en el color. */
.estado{
  font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:5px 11px; border-radius:99px; white-space:nowrap; border:1px solid;
}
.estado--ok{ background:#dff2f0; color:#0a5f5c; border-color:#b5e0dc; }
.estado--seguimiento{ background:var(--linea-suave); color:var(--tinta-2); border-color:#cfe0ef; }

/* ── Quejas más frecuentes ──────────────────────────────────────────── */
.quejas{ display:grid; gap:12px; margin:0; padding:0; list-style:none; counter-reset:q; }
.quejas li{
  display:flex; gap:15px; align-items:flex-start; background:#fff;
  border:1px solid var(--linea); border-left:4px solid var(--azul-claro);
  border-radius:var(--radio-sm); padding:16px 18px; font-size:.9375rem; color:var(--tinta-2); line-height:1.6;
}
.quejas li::before{
  counter-increment:q; content:counter(q);
  font-family:var(--display); font-weight:800; font-size:.9375rem; color:var(--azul);
  background:var(--linea-suave); width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

/* Redes sociales dentro del pie oscuro */
.pie .redes a{ background:rgba(255,255,255,.10); color:#d6e6f5; }
.pie .redes a:hover{ background:var(--azul-claro); color:#06263f; }