/*
  Sitio público de MotoRed Fibra — identidad visual (D102 a D107).

  El hilo gráfico sale del logo: la nube dibujada como cable de fibra con
  conectores en las puntas, y las líneas de velocidad de la moto. Colores del
  logo; texto en grafito; fondos oscuros en marino profundo. Sin morados, sin
  vidrio esmerilado, sin degradados arcoíris ni ilustraciones genéricas.

  Ligero: Figtree alojada en el sitio (400 y 800, solo latín), íconos y fibras
  en SVG dentro del HTML, sin JavaScript fuera del mapa. Accesible AA desde
  360 px. Animaciones suaves, lentas y con sentido (D121, sustituye la D114):
  todas se apagan si el visitante pidió «reducir movimiento».
*/

@font-face {
  font-family: "Figtree";
  src: url("../fuentes/figtree-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fuentes/figtree-800.woff2") format("woff2");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --fondo-claro: var(--cielo-suave);
  --azul-real: #1e6fe0;
  --indigo: #2d2df0;          /* el de la camioneta: solo fibras, brillos y líneas */
  --violeta: #6a4bf5;         /* un toque: solo algunas fibras y brillos (D110) */
  --fibra: linear-gradient(90deg, var(--cielo), var(--azul-real) 60%, var(--indigo));
  --boton: linear-gradient(135deg, #1577b0, #1e6fe0);
  --boton-hover: linear-gradient(135deg, #0f5f8e, #1a5fc4);
  --sombra: 0 1px 2px rgba(11, 34, 53, .06), 0 8px 24px rgba(11, 34, 53, .08);
  --sombra-alta: 0 2px 6px rgba(11, 34, 53, .08), 0 18px 40px rgba(11, 34, 53, .14);
  --radio-grande: 16px;
  --alto-encabezado: 5.5rem;
}

body.sitio { font-family: "Figtree", var(--letra); font-size: 1.0625rem; color: var(--tinta); background: var(--blanco); }
.sitio h1, .sitio h2, .sitio h3 { font-weight: 800; letter-spacing: -.015em; color: var(--marino); }
.sitio h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem); }
.sitio h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); }
.sitio strong, .sitio b { font-weight: 800; }
html { scroll-padding-top: calc(var(--alto-encabezado) + 1rem); }

.envoltura { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.principal { padding-top: 0; padding-bottom: 3.5rem; min-height: 50vh; }
.principal--completo { padding-bottom: 0; }
p, li, dd { overflow-wrap: anywhere; }
.nota { color: var(--tinta-suave); }
.sitio a { color: var(--azul); }
.sitio a:hover { color: var(--azul-fuerte); }

.icono { width: 1.5rem; height: 1.5rem; flex: none; vertical-align: middle; }
.icono--chico { width: 1.1rem; height: 1.1rem; }

/* ---------- Motivos de la marca ---------- */

/* Líneas de velocidad de la moto: tres trazos que se adelgazan hacia la izquierda */
.lineas-velocidad, .titulo-seccion::before {
  content: ""; display: inline-block; flex: none;
  width: 2.6rem; height: .85rem;
  background:
    linear-gradient(90deg, transparent, var(--cielo)) right top / 100% 3px no-repeat,
    linear-gradient(90deg, transparent, var(--azul-real)) right center / 72% 3px no-repeat,
    linear-gradient(90deg, transparent, var(--indigo)) right bottom / 46% 3px no-repeat;
}
.titulo-seccion { display: flex; align-items: center; gap: .75rem; margin-top: 0; }
.titulo-seccion::before { border-radius: 2px; }

/* Cable de fibra fino con conector en la punta, sin animación */
.fibra-linea { position: relative; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--cielo) 18%, var(--azul-real) 60%, var(--indigo) 96%); margin-right: 18px; }
.fibra-linea::after {
  content: ""; position: absolute; right: -18px; top: -5px; width: 16px; height: 12px;
  border-radius: 3px; background: var(--azul-real); box-shadow: 0 0 6px rgba(207, 244, 255, .35);
}
/* ---------- Páginas interiores (D133) ---------- */
/* Encabezado: banda marino de ~200 px con fibras finas brillantes, ruta, título y subtítulo. */
.cabecera-pagina {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 7.5rem; display: flex; align-items: flex-end;
  background: linear-gradient(180deg, #0b2235 0%, #081a2b 100%); color: #d6ebf7;
}
.cabecera-fibras { position: absolute; right: 0; bottom: 0; width: max(100%, 1440px); height: 120px; z-index: -1; overflow: visible; }
.cabecera-fibras__haz path { fill: none; stroke-linecap: round; filter: drop-shadow(0 0 2px rgba(45, 185, 233, .8)); }
.cabecera-fibras__haz .cabecera-fibras__resplandor { stroke-width: 5; stroke-opacity: .12; filter: none; }
.cabecera-fibras__punta { fill: #e6f8ff; }
.cabecera-fibras__pulso { fill: none; stroke: #e6f8ff; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 3 97; stroke-dashoffset: 100; filter: drop-shadow(0 0 3px #2db9e9); animation: cabecera-pulso 7s linear infinite; }
.cabecera-fibras__pulso--2 { animation-delay: 2.3s; }
.cabecera-fibras__pulso--3 { animation-delay: 4.6s; }
@keyframes cabecera-pulso { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.cabecera-pagina__contenido { width: 100%; padding-top: 1.1rem; padding-bottom: 1.5rem; }
.sitio .cabecera-pagina__titulo { color: var(--blanco); margin: 0 0 .25rem; max-width: 22ch; line-height: 1.15; }
.cabecera-pagina__subtitulo { margin: 0; max-width: 60ch; color: #c9e3f2; font-size: 1.1rem; }
@media (max-width: 40rem) {
  .cabecera-pagina__contenido { padding-top: .75rem; padding-bottom: 1rem; }
  .cabecera-fibras { opacity: .45; }
  .cabecera-pagina__subtitulo { font-size: 1rem; }
}
.principal--interior { max-width: 72rem; margin: 0 auto; padding: 1.5rem 1rem 3.5rem; }
.principal--interior > h2:first-child, .principal--interior > .bloque:first-child > h2:first-child { margin-top: 0; }
.lectura, .principal--interior > p, .principal--interior > ul, .principal--interior > ol:not(.pasos):not(.linea-pasos), .principal--interior > dl { max-width: 75ch; }

/* Bloques con título y tarjetas con ícono en 2 o 3 columnas */
.bloque { margin: 0 0 3rem; }
.bloque > .titulo-seccion { margin-bottom: 1.1rem; }
.bloque__intro { max-width: 75ch; margin: -.4rem 0 1.25rem; color: var(--tinta-suave); }
.rejilla { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 44rem) { .rejilla--2, .rejilla--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 44rem) { .rejilla--4 { grid-template-columns: repeat(2, 1fr); } }
/* D274: 10 trámites en línea: 2 columnas (5 filas) y, con espacio para que quepan, 5 columnas (2 filas). */
@media (min-width: 44rem) { .rejilla--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80rem) {
  .rejilla--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .rejilla--5 > .ficha { padding-left: 1rem; padding-right: 1rem; }
  .rejilla--5 .plazo { font-size: .82rem; padding: .2rem .55rem; white-space: normal; max-width: 100%; border-radius: .8rem; }
}
@media (min-width: 64rem) { .rejilla--3 { grid-template-columns: repeat(3, 1fr); } .rejilla--4 { grid-template-columns: repeat(4, 1fr); } }
.ficha {
  position: relative; display: flex; flex-direction: column; gap: .4rem;
  padding: 1.35rem 1.35rem 1.25rem; background: var(--blanco);
  border: 1px solid var(--borde-suave); border-radius: var(--radio-grande); box-shadow: var(--sombra);
}
.ficha--linea::before { content: ""; position: absolute; left: 1.25rem; right: 1.25rem; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--fibra); }
.ficha__icono { width: 2.75rem; height: 2.75rem; padding: .6rem; border-radius: 12px; background: var(--fondo-claro); color: var(--azul); }
.sitio .ficha__titulo { margin: .35rem 0 0; font-size: 1.15rem; }
.ficha p { margin: 0; }
.ficha__dato { font-weight: 800; color: var(--marino); }
.ficha__pie { margin-top: auto !important; padding-top: .6rem; }
.ficha ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.ficha--oscura { background: var(--marino); border-color: var(--marino); color: #d6ebf7; }
.sitio .ficha--oscura .ficha__titulo { color: var(--blanco); }
.ficha--oscura .ficha__icono { background: rgba(45, 185, 233, .15); color: var(--cielo); }
.sitio .ficha--oscura a { color: #9fdcf5; }

/* Lista con palomitas */
.lista-check { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .5rem; }
.lista-check li { display: flex; gap: .55rem; align-items: flex-start; }
.lista-check .icono { color: var(--azul); width: 1.25rem; height: 1.25rem; margin-top: .1rem; }

/* Aviso destacado: ícono y fondo suave */
.destacado {
  display: flex; gap: .85rem; align-items: flex-start; max-width: 75ch;
  margin: 1.25rem 0; padding: 1rem 1.15rem; border-radius: var(--radio-grande);
  background: var(--fondo-claro); border: 1px solid #cfe9f6; color: var(--tinta);
}
.destacado > .icono { color: var(--azul); width: 1.6rem; height: 1.6rem; }
.destacado strong { color: var(--marino); }
.destacado--seguridad { background: #eefaf3; border-color: #bfe6cf; }
.destacado--seguridad > .icono { color: #1d7a46; }
.destacado--enlace { align-items: center; }

/* Píldora de plazo: «Máx. 2 días hábiles» */
.plazo {
  display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start;
  padding: .25rem .7rem; border-radius: 999px; font-size: .9rem; font-weight: 800;
  background: #e8f1fd; color: #0f4fa8; border: 1px solid #c6dbf8; white-space: nowrap;
}
.plazo .icono { width: 1rem; height: 1rem; }

/* Tarjeta de documento PDF */
.documento-pdf { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; align-items: start; }
.documento-pdf__icono { grid-row: span 3; width: 3rem; height: 3.4rem; display: grid; place-items: center; border-radius: 10px; background: #fdecea; color: #a8322a; font-size: .75rem; font-weight: 800; position: relative; }
.documento-pdf__icono .icono { width: 1.6rem; height: 1.6rem; }
.documento-pdf__icono span { position: absolute; bottom: .2rem; font-size: .62rem; letter-spacing: .04em; }
.sitio .documento-pdf__titulo { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.documento-pdf__datos { margin: 0; font-size: .92rem; color: var(--tinta-suave); }
.documento-pdf .boton { grid-column: 2; justify-self: start; margin-top: .5rem; }

/* Línea de pasos con fibra y pulso */
.linea-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; position: relative; counter-reset: paso; }
.linea-pasos::before { content: ""; position: absolute; left: 1.5rem; top: 1.5rem; bottom: 1.5rem; width: 2px; background: linear-gradient(180deg, var(--cielo), var(--azul-real) 60%, var(--indigo)); border-radius: 2px; }
.linea-pasos__paso { counter-increment: paso; position: relative; display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: start; }
.linea-pasos__numero { position: relative; z-index: 1; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--marino); color: var(--cielo); box-shadow: 0 0 0 3px var(--blanco), 0 0 0 5px var(--cielo), 0 0 18px 4px rgba(45, 185, 233, .5); }
/* Tramo de un paso al siguiente: lleva la luz que enciende el número siguiente (D140) */
.linea-pasos__tramo { position: absolute; z-index: 2; left: calc(1.5rem - 1px); top: 3rem; bottom: -1rem; width: 2px; pointer-events: none; }
.linea-pasos__luz { position: absolute; left: -2px; top: 0; width: 6px; height: 26px; border-radius: 4px; opacity: 0; background: linear-gradient(180deg, transparent, #e6f8ff, transparent); box-shadow: 0 0 8px 2px rgba(45, 185, 233, .7); animation: viaje-vertical 10s ease-in-out infinite; }
.linea-pasos__numero .icono { width: 1.35rem; height: 1.35rem; }
.linea-pasos__cuerpo { padding: 1rem 1.15rem; background: var(--blanco); border: 1px solid var(--borde-suave); border-radius: var(--radio-grande); box-shadow: var(--sombra); display: flex; flex-direction: column; gap: .35rem; }
.linea-pasos__titulo { margin: 0; font-weight: 800; color: var(--marino); font-size: 1.08rem; }
.linea-pasos__titulo small { display: block; font-size: .85rem; color: var(--tinta-suave); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.linea-pasos__cuerpo p { margin: 0; }
@media (min-width: 64rem) {
  .linea-pasos { grid-template-columns: repeat(5, 1fr); gap: 1rem; }
  .linea-pasos::before { left: 1.5rem; right: 1.5rem; top: 1.5rem; bottom: auto; width: auto; height: 2px; background: var(--fibra); }
  .linea-pasos__paso { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: stretch; }
  .linea-pasos__numero { justify-self: start; }
  .linea-pasos__tramo { left: 3rem; right: -1rem; top: calc(1.5rem - 1px); bottom: auto; width: auto; height: 2px; }
  .linea-pasos__luz { top: -2px; left: 0; width: 34px; height: 6px; background: linear-gradient(90deg, transparent, #e6f8ff, transparent); animation-name: viaje-horizontal; }
}

/* Cifra grande (tiempos de atención) */
.cifra { display: flex; align-items: baseline; gap: .4rem; margin: .2rem 0 0 !important; }
.cifra__numero { font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--marino); }
.cifra__unidad { font-weight: 800; color: var(--tinta-suave); }

/* Acordeón */
.acordeon { border: 1px solid var(--borde-suave); border-radius: var(--radio-grande); background: var(--blanco); box-shadow: var(--sombra); margin: 0 0 .75rem; }
.acordeon > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .75rem; padding: 1rem 1.15rem; font-weight: 800; color: var(--marino); min-height: 48px; }
.acordeon > summary::-webkit-details-marker { display: none; }
.acordeon > summary::after { content: ""; margin-left: auto; flex: none; width: .6rem; height: .6rem; border-right: 2px solid var(--azul); border-bottom: 2px solid var(--azul); transform: rotate(45deg); transition: transform .3s ease; }
.acordeon[open] > summary::after { transform: rotate(-135deg); }
.acordeon > summary .icono { color: var(--azul); }
.acordeon__cuerpo { padding: 0 1.15rem 1.1rem; max-width: 75ch; }
.acordeon__cuerpo > :first-child { margin-top: 0; }

/* Tablas que se vuelven tarjetas en el celular */
@media (max-width: 40rem) {
  .tabla.tabla--tarjetas { min-width: 0; }
  .tabla.tabla--tarjetas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla.tabla--tarjetas, .tabla.tabla--tarjetas tbody, .tabla.tabla--tarjetas tr, .tabla.tabla--tarjetas td, .tabla.tabla--tarjetas th[scope="row"] { display: block; width: 100%; }
  .tabla-envoltura:has(.tabla--tarjetas) { border: 0; box-shadow: none; background: transparent; overflow: visible; }
  .tabla.tabla--tarjetas tr { margin: 0 0 .85rem; background: var(--blanco); border: 1px solid var(--borde-suave); border-radius: var(--radio-grande); box-shadow: var(--sombra); padding: .4rem 0; }
  .tabla.tabla--tarjetas td, .tabla.tabla--tarjetas th[scope="row"] { border: 0; padding: .35rem 1rem; }
  .tabla.tabla--tarjetas th[scope="row"] { font-size: 1.05rem; color: var(--marino); }
  .tabla.tabla--tarjetas td[data-etiqueta]::before { content: attr(data-etiqueta); display: block; font-size: .85rem; font-weight: 800; color: var(--tinta-suave); }
}

/* ---------- Botones ---------- */
.sitio .boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 999px; padding: .75rem 1.4rem; min-height: 48px; font-weight: 800;
  background: var(--boton); border-color: transparent; color: var(--blanco);
  box-shadow: 0 1px 2px rgba(11, 34, 53, .14);
  transition: transform .15s ease, box-shadow .2s ease, background-color .15s ease;
}
/* Degradado de #1577B0 a #1E6FE0: blanco sobre ambos extremos cumple AA (4.9 y 4.8). Brillo suave al pasar el cursor. */
.sitio .boton:hover { background: var(--boton-hover); color: var(--blanco); box-shadow: 0 0 0 4px rgba(45, 185, 233, .22), 0 8px 24px rgba(30, 111, 224, .35); }
.sitio .boton--chico { min-height: 40px; padding: .5rem 1rem; font-size: .95rem; }
.sitio .boton--secundario { background: var(--blanco); color: var(--azul); border-color: var(--azul); }
.sitio .boton--secundario:hover { background: var(--fondo-claro); color: var(--azul-fuerte); }
.sitio .boton--luz { background: var(--blanco); color: var(--marino); border-color: var(--blanco); }
.sitio .boton--luz:hover { background: #dff3fb; color: var(--marino); border-color: #dff3fb; box-shadow: 0 0 0 4px rgba(45, 185, 233, .25); }
.sitio .boton--contorno { background: transparent; color: var(--blanco); border-color: var(--cielo); }
.sitio .boton--contorno:hover { background: rgba(45, 185, 233, .14); color: var(--blanco); border-color: var(--cielo); }
.boton--grande { font-size: 1.15rem; padding: .9rem 1.8rem !important; }

/* ---------- Encabezado fijo (D139, D150) ----------
   Dos estados. Arriba de la página (sitio.js pone «encabezado--arriba»): transparente con el azul
   del logo, texto blanco y logo para fondo oscuro, sobre la portada o la banda oscura. Al bajar,
   y siempre sin JavaScript o con el menú de celular abierto: blanco al 92 % con desenfoque, un
   azul difuminado en el borde inferior, menú marino y el logo original. Los colores del menú van
   en variables para que todo cambie junto. Lo que sigue al encabezado deja arriba su alto. */
.encabezado {
  --enc-texto: #0b2235;            /* marino sobre blanco: más de 12 a 1 aun con contenido oscuro detrás */
  --enc-actual: #0f5f8e;           /* tono oscuro del azul de botones: 5.5 a 1 en el peor caso (#1577B0 bajaba a 3.9) */
  --enc-borde: rgba(11, 34, 53, .22);
  --enc-menu-fondo: #ffffff;
  --enc-menu-linea: #e3edf3;
  --enc-menu-actual-fondo: var(--cielo-suave);
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 6px 22px rgba(11, 34, 53, .12);
  transition: background-color .35s ease, box-shadow .35s ease;
}
.encabezado--arriba:not(:has(.navegacion--movil[open])) {
  --enc-texto: #ffffff;
  --enc-actual: #9fdcf5;           /* cielo claro: 5.8 a 1 o más sobre el azul del logo */
  --enc-borde: rgba(201, 230, 245, .45);
  background: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* Capa de color: al bajar, el azul del logo (#219AD6 → #2DB9E9, 18 %) que sube desde el borde
   inferior y se difumina; arriba, el azul del logo al 30 % que baja y se funde con el marino. */
.encabezado::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, rgba(33, 154, 214, .18) 0%, rgba(45, 185, 233, .08) 35%, rgba(45, 185, 233, 0) 75%);
  transition: opacity .35s ease;
}
.encabezado--arriba:not(:has(.navegacion--movil[open]))::before {
  height: calc(100% + 3rem);
  background: linear-gradient(180deg, rgba(33, 154, 214, .3) 0%, rgba(45, 185, 233, .2) 45%, rgba(45, 185, 233, .07) 75%, rgba(45, 185, 233, 0) 100%);
}
.encabezado::after { content: none; }
/* D145: fibra delgada en el borde inferior, en todo lo ancho y en ambos estados, con un pulso
   lento que la recorre y un destello suave en la orilla cuando llega. */
.encabezado__fibra { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, rgba(45, 185, 233, .15), rgba(45, 185, 233, .7) 35%, rgba(159, 220, 245, .85) 70%, rgba(45, 185, 233, .6)); box-shadow: 0 0 6px rgba(45, 185, 233, .45); }
.encabezado__pulso { position: absolute; top: -2px; left: 0; width: 180px; height: 5px; border-radius: 5px; opacity: 0; background: linear-gradient(90deg, transparent, #e6f8ff 50%, transparent); box-shadow: 0 0 12px 3px rgba(45, 185, 233, .7); animation: pulso-encabezado 9s ease-in-out infinite; }
.encabezado__destello { position: absolute; right: 0; top: -9px; width: 34px; height: 19px; border-radius: 50%; opacity: 0; background: radial-gradient(ellipse at 70% 50%, rgba(230, 248, 255, .95), rgba(45, 185, 233, .5) 40%, transparent 70%); animation: destello-encabezado 9s ease-in-out infinite; }
@keyframes pulso-encabezado {
  0% { left: 0; opacity: 0; }
  4% { opacity: 1; }
  40% { opacity: 1; }
  45% { left: calc(100% - 180px); opacity: 0; }
  100% { left: calc(100% - 180px); opacity: 0; }
}
@keyframes destello-encabezado {
  0%, 40% { opacity: 0; transform: scale(.6); }
  45% { opacity: 1; transform: scale(1.15); }
  58%, 100% { opacity: 0; transform: scale(.8); }
}
/* Resplandor cielo muy tenue detrás del logo */
.logotipo { position: relative; isolation: isolate; }
.logotipo::before { content: ""; position: absolute; inset: -30% -18%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at center, rgba(45, 185, 233, .2) 0%, rgba(45, 185, 233, .07) 45%, rgba(45, 185, 233, 0) 72%); opacity: 0; transition: opacity .35s ease; }
.encabezado--arriba:not(:has(.navegacion--movil[open])) .logotipo::before { opacity: 1; }
/* Dos logos encimados: el original (fondo claro) y el de fondo oscuro; cambian con un fundido suave */
.logotipo__imagen { transition: height .2s ease, opacity .35s ease; }
.logotipo__imagen--oscuro { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; }
.encabezado--arriba:not(:has(.navegacion--movil[open])) .logotipo--doble .logotipo__imagen--oscuro { opacity: 1; }
.encabezado--arriba:not(:has(.navegacion--movil[open])) .logotipo--doble .logotipo__imagen--claro { opacity: 0; }
.encabezado + .mantenimiento, .encabezado + .cabecera-pagina, .encabezado + .principal > .portada:first-child, .encabezado + .principal > .inicio:first-child > .portada:first-child { padding-top: var(--alto-encabezado); }
.encabezado__fila { display: flex; align-items: center; gap: .75rem; min-height: var(--alto-encabezado); max-width: 92rem; transition: min-height .2s ease; }
@media (min-width: 79rem) and (max-width: 119.99rem) { .encabezado__fila { gap: .5rem; } .logotipo__imagen { height: 3.5rem; } .navegacion--escritorio a { padding-left: .4rem; padding-right: .4rem; } }
.encabezado--compacto .encabezado__fila { min-height: 4.25rem; }
.logotipo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--enc-texto) !important; font-weight: 800; font-size: 1.25rem; margin-right: auto; white-space: nowrap; }
.encabezado--arriba:not(:has(.navegacion--movil[open])) .logotipo--placa { padding: .25rem .6rem; border-radius: 12px; background: var(--blanco); }
.logotipo__circulo {
  display: inline-grid; place-items: center; flex: none;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--azul-marca); color: var(--blanco); font-size: 1.2rem; font-weight: 800;
}
.logotipo__imagen { height: 4rem; width: auto; max-width: min(15rem, 52vw); object-fit: contain; display: block; }
.encabezado--compacto .logotipo__imagen { height: 3.25rem; }
.oculto-chico { display: inline; }

/* Teléfono de atención: píldora pequeña; en pantallas medianas y en celular, solo el ícono */
.encabezado__telefono {
  display: inline-flex; align-items: center; gap: .4rem; flex: none; min-height: 44px; min-width: 44px; justify-content: center;
  padding: .4rem 1rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22);
  /* D143: relleno de azul fuerte a índigo; blanco sobre ambos extremos cumple AA (4.8 y 7.7) */
  background: linear-gradient(135deg, #1e6fe0, #2d2df0);
  color: var(--blanco) !important; font-weight: 800; font-size: .92rem; text-decoration: none; white-space: nowrap;
  box-shadow: 0 0 14px 2px rgba(45, 185, 233, .35), 0 0 0 3px rgba(45, 185, 233, .12);
  transition: box-shadow .25s ease, transform .2s ease;
}
.encabezado__telefono .icono { color: var(--blanco); }
.encabezado__telefono:hover, .encabezado__telefono:focus-visible { box-shadow: 0 0 22px 5px rgba(45, 185, 233, .6), 0 0 0 4px rgba(45, 185, 233, .25); transform: translateY(-1px); }
.encabezado__telefono-texto { color: var(--blanco); font-weight: 400; }
/* Píldora completa en pantallas muy anchas; solo el número en tabletas y computadoras medianas;
   solo el ícono en celular y donde el menú completo ocupa casi toda la fila (79 a 88 rem). */
@media (max-width: 119.99rem) { .encabezado__telefono-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@media (max-width: 47.99rem), (min-width: 79rem) and (max-width: 99.99rem) {
  .encabezado__telefono { padding: .35rem; }
  .encabezado__telefono-numero { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .encabezado__telefono .icono { width: 1.25rem; height: 1.25rem; }
}
@media (min-width: 120rem) { .encabezado__fila { max-width: 96rem; } }
@media (min-width: 79rem) and (max-width: 87.99rem) { .logotipo__imagen { height: 3.2rem; } .navegacion--escritorio a { font-size: .9rem; padding-left: .35rem; padding-right: .35rem; } }
@media (max-width: 47.99rem) { .logotipo__imagen { max-width: 44vw; } }

.navegacion ul { list-style: none; margin: 0; padding: 0; }
.navegacion--escritorio { display: none; }
.navegacion--escritorio ul { display: flex; flex-wrap: nowrap; gap: .1rem; }
.navegacion--escritorio a {
  position: relative; display: block; padding: .55rem .5rem; white-space: nowrap;
  color: var(--enc-texto) !important; text-decoration: none; font-weight: 800; font-size: .95rem; transition: color .35s ease;
}
.navegacion--escritorio a::after {
  content: ""; position: absolute; left: .6rem; right: .6rem; bottom: .2rem; height: 2px; border-radius: 2px;
  background: var(--fibra); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.navegacion--escritorio a:hover::after, .navegacion--escritorio a[aria-current="page"]::after { transform: scaleX(1); }
/* Página actual y cursor: azul oscuro de botones sobre blanco, cielo claro arriba (ver variables) */
.navegacion--escritorio a[aria-current="page"], .navegacion--escritorio a:hover { color: var(--enc-actual) !important; }
.navegacion--escritorio a[aria-current="page"]::after { background: linear-gradient(90deg, #1577b0, #1e6fe0); }
.encabezado--arriba:not(:has(.navegacion--movil[open])) .navegacion--escritorio a[aria-current="page"]::after { background: var(--fibra); }
.sitio .boton--pagar { padding: .6rem 1.15rem; min-height: 44px; white-space: nowrap; }

/* D176, D178: «Folio»: contorno discreto con los colores del encabezado; no compite con el teléfono ni con «Pagar en línea».
   La palabra «Folio» siempre se ve: al lado del ícono en pantallas muy anchas y, donde no cabe, en letra pequeña debajo. */
.encabezado__folio {
  display: inline-flex; align-items: center; gap: .35rem; flex: none; min-height: 44px; min-width: 44px; justify-content: center;
  padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--enc-borde);
  color: var(--enc-texto) !important; font-weight: 800; font-size: .92rem; text-decoration: none; white-space: nowrap;
  transition: color .35s ease, border-color .35s ease, background .2s ease;
}
.encabezado__folio:hover, .encabezado__folio[aria-current="page"] { background: rgba(45, 185, 233, .14); }
@media (min-width: 48rem) and (max-width: 78.99rem) { .logotipo__imagen { height: 3.5rem; } }
@media (max-width: 99.99rem) {
  .encabezado__folio { flex-direction: column; gap: .05rem; padding: .2rem .45rem; border-radius: 12px; line-height: 1; }
  .encabezado__folio .icono { width: 1.15rem; height: 1.15rem; }
  .encabezado__folio-texto { font-size: .72rem; letter-spacing: .01em; }
}
@media (max-width: 26rem) {
  .encabezado__fila { gap: .3rem !important; }
  .logotipo__imagen, .encabezado--compacto .logotipo__imagen { max-width: 30vw !important; }
  .sitio .encabezado .boton--pagar { padding: .5rem .65rem; }
}
@media (max-width: 21.5rem) {
  .logotipo__imagen, .encabezado--compacto .logotipo__imagen { max-width: 24vw !important; }
  .navegacion--movil summary { padding: .45rem .45rem; }
}
.navegacion--movil .navegacion__folio { display: flex; align-items: center; gap: .5rem; }

/* Menú de celular: hamburguesa sin JavaScript; al abrirlo el encabezado pasa a blanco y el menú es blanco con texto marino (D150) */
.navegacion--movil summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem;
  min-height: 44px; padding: .45rem .7rem; border: 1px solid var(--enc-borde); border-radius: 12px;
  color: var(--enc-texto); font-weight: 800; transition: color .35s ease, border-color .35s ease;
}
.navegacion--movil summary::-webkit-details-marker { display: none; }
.navegacion--movil .icono--cerrar, .navegacion--movil[open] .icono--abrir { display: none; }
.navegacion--movil[open] .icono--cerrar { display: inline; }
.navegacion--movil nav {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--enc-menu-fondo); border-top: 1px solid var(--enc-menu-linea); box-shadow: 0 18px 40px rgba(11, 34, 53, .18);
  max-height: calc(100vh - var(--alto-encabezado)); overflow-y: auto;
}
.navegacion--movil ul { list-style: none; margin: 0; padding: 0; }
.navegacion--movil li + li { border-top: 1px solid var(--enc-menu-linea); }
.navegacion--movil a { display: block; padding: .95rem 1.25rem; color: #0b2235 !important; text-decoration: none; font-weight: 800; }
.navegacion--movil a:hover { background: var(--cielo-suave); }
.navegacion--movil a[aria-current="page"] { color: #0f5f8e !important; background: var(--cielo-suave); box-shadow: inset 4px 0 0 #1577b0; }
.navegacion--movil .navegacion__pagar { margin: .75rem 1.25rem 1rem; text-align: center; border-radius: 999px; background: var(--boton); color: var(--blanco) !important; }
@media (max-width: 26rem) {
  :root { --alto-encabezado: 4.5rem; }
  .encabezado__fila { gap: .45rem; }
  .logotipo__imagen, .encabezado--compacto .logotipo__imagen { max-width: 40vw; height: 3rem; }
  .oculto-chico { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .navegacion--movil summary { padding: .45rem .55rem; }
  .navegacion__etiqueta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sitio .boton--pagar { padding: .55rem .8rem; font-size: .95rem; }
  .boton--pagar .icono { display: none; }
}
@media (min-width: 79rem) {
  .navegacion--escritorio { display: block; }
  .navegacion--movil { display: none; }
}
/* D176: va después de las reglas base del menú para que sí se aplique. Con «Mi folio» en la fila,
   de 1264 a 1407 px el menú se compacta un poco para que quepa «Pagar en línea». */
@media (min-width: 79rem) and (max-width: 87.99rem) { .encabezado__fila { gap: .35rem; } .navegacion--escritorio a { font-size: .87rem; padding-left: .3rem; padding-right: .3rem; } .navegacion--escritorio a::after { left: .3rem; right: .3rem; } }

/* ---------- Aviso de mantenimiento: barra marino con punto ámbar que late ---------- */
.mantenimiento { color: #c9e6f5; background: #0b2235 linear-gradient(180deg, rgba(33, 154, 214, .2) 0%, rgba(45, 185, 233, .1) 55%, rgba(45, 185, 233, 0) 100%); }
/* D142: sin bordes duros. El fondo de la barra continúa el azul del encabezado y termina en el
   marino exacto de la portada, así no hay ninguna línea entre las tres piezas. */
.mantenimiento__aviso { background: transparent; }
.mantenimiento__aviso[open] { background: rgba(33, 154, 214, .12); }

.mantenimiento__resumen {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .7rem;
  min-height: 48px; padding-top: .45rem; padding-bottom: .45rem;
}
.mantenimiento__resumen::-webkit-details-marker { display: none; }
.mantenimiento__icono { flex: none; color: #f5a524; width: 1.35rem; height: 1.35rem; }
.mantenimiento__pildora { flex: none; padding: .18rem .7rem; border-radius: 999px; background: #f5a524; color: var(--marino); font-weight: 800; font-size: .85rem; white-space: nowrap; animation: brillo-ambar 2.5s ease-in-out infinite; }
@keyframes brillo-ambar {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 165, 36, 0); }
  50% { box-shadow: 0 0 10px 3px rgba(245, 165, 36, .55); }
}
.mantenimiento__titulo { flex: 1 1 auto; min-width: 0; color: var(--blanco); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mantenimiento__fechas, .mantenimiento__corto { flex: none; white-space: nowrap; color: #c9e6f5; }
.mantenimiento__corto { display: none; }
.mantenimiento__ver {
  flex: none; padding: .3rem .85rem; border: 1px solid var(--cielo); border-radius: 999px;
  color: var(--blanco); font-weight: 800; font-size: .9rem; white-space: nowrap;
}
.mantenimiento__resumen:hover .mantenimiento__ver { background: rgba(45, 185, 233, .16); }
.mantenimiento__aviso[open] .mantenimiento__ver { background: rgba(45, 185, 233, .16); }
.mantenimiento__panel {
  margin: 0 0 1rem; padding: 1rem 1.15rem; border-radius: var(--radio-grande);
  background: #10324d; border: 1px solid #1d4d70; color: #e0f1fa;
}
.mantenimiento__panel p { margin: .35rem 0; }
.mantenimiento__panel-titulo { color: var(--blanco); font-weight: 800; font-size: 1.1rem; }
.mantenimiento__datos { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; margin: .5rem 0; }
.mantenimiento__datos dt { font-weight: 800; color: var(--cielo); }
.mantenimiento__datos dd { margin: 0; }
@media (max-width: 40rem) {
  .mantenimiento__fechas, .mantenimiento__titulo { display: none; }
  .mantenimiento__corto { display: inline; flex: 1 1 auto; }
  .mantenimiento__resumen { gap: .5rem; }
  /* «programado» se oculta a la vista pero se sigue leyendo en voz alta */
  .mantenimiento__largo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 26rem) {
  .mantenimiento__corto { display: none; }
  .mantenimiento__pildora { margin-right: auto; }
}

/* ---------- Portada sobre marino profundo con hilos de fibra ---------- */
.portada {
  position: relative; isolation: isolate; overflow: hidden; color: var(--blanco);
  /* D131: marino profundo casi negro, más oscuro abajo */
  background: linear-gradient(180deg, #0b2235 0%, #081a2b 55%, #06101c 100%);
}
.portada__foto { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; }
.portada--con-foto::before { content: ""; position: absolute; inset: 0; z-index: -2; background: rgba(11, 34, 53, .8); }
/* Viñeta suave en las orillas */
.portada::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  /* D142: la viñeta no toca la orilla de arriba, para que la portada empate sin línea con el encabezado y la barra */
  background: radial-gradient(ellipse 90% 92% at 50% 0%, transparent 60%, rgba(3, 8, 15, .6) 100%);
}
.fibras { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
/* En celular el texto ocupa todo el ancho: el haz se ve más pequeño y abajo */
@media (max-width: 48rem) { .fibras { top: auto; height: 46%; } }

/* La escena de la red (portada) está en escena.css: la comparten el sitio y la entrada al panel (D249). */
.portada__fibras-movil { display: none; }

/* Fibras a lo largo del borde inferior de una sección, juntándose en un conector a la derecha */
.borde-fibras { position: absolute; left: 0; right: 0; bottom: 0; height: 4.5rem; pointer-events: none; }
.borde-fibras svg { position: absolute; left: 0; right: 22px; bottom: 0; width: calc(100% - 22px); height: 100%; }
.borde-fibras__conector {
  position: absolute; right: 6px; bottom: calc(4.5rem * 40 / 90 * -1 + 4.5rem - 11px);
  width: 16px; height: 12px; border-radius: 3px; background: var(--azul-real); box-shadow: 0 0 6px rgba(45, 185, 233, .45);
}
.borde-fibras--oscuro .borde-fibras__conector { background: #0f3a57; border: 1px solid rgba(207, 244, 255, .7); }

.portada__contenido { padding-top: clamp(2.75rem, 7vw, 5.5rem); padding-bottom: clamp(5rem, 10vw, 8.25rem); }
/* D137: en pantallas anchas la portada crece un poco para que la escena (que siempre se ve completa) no quede pequeña */
@media (min-width: 100rem) { .portada { min-height: min(32vw, 44rem); } }
.portada__antetitulo { display: flex; align-items: center; gap: .6rem; margin: 0 0 .9rem; color: var(--cielo); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .95rem; }
.portada__titulo { color: var(--blanco) !important; font-size: clamp(2.1rem, 1.3rem + 3.6vw, 3.75rem) !important; line-height: 1.05; max-width: 16ch; margin: 0 0 1.1rem; }
.portada__texto { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); max-width: 36rem; color: #c9e6f5; margin: 0 0 2rem; }
.portada__botones { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }
/* D154: localidades con servicio, tomadas del módulo de Cobertura (cielo claro sobre marino: más de 10 a 1) */
.portada__localidades { display: flex; align-items: flex-start; gap: .45rem; margin: -1.1rem 0 1.75rem; max-width: 40rem; color: #9fdcf5; font-weight: 800; font-size: 1rem; }
.portada__localidades .icono { color: var(--cielo); margin-top: .15rem; }
.portada__botones .boton { font-size: 1.1rem; padding: .85rem 1.7rem; }

/* ---------- Accesos rápidos sobre la orilla de la portada ---------- */
.accesos { position: relative; z-index: 2; margin: -3.25rem 0 2rem; display: grid; gap: .85rem; grid-template-columns: 1fr; }
@media (min-width: 36rem) { .accesos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .accesos { grid-template-columns: repeat(4, 1fr); } }
.acceso {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: .9rem; row-gap: .15rem; align-items: start; align-content: start;
  padding: 1.15rem 1.2rem; min-height: 5.75rem;
  background: var(--blanco); color: var(--marino) !important; text-decoration: none;
  border: 1px solid var(--borde-suave); border-radius: var(--radio-grande); box-shadow: var(--sombra);
  transition: transform .15s ease, box-shadow .15s ease;
}
.acceso::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--fibra); transform: scaleX(.25); transform-origin: left; transition: transform .25s ease; }
.acceso:hover { box-shadow: var(--sombra-alta); }
.acceso:hover::after { transform: scaleX(1); }
.acceso__icono { grid-row: span 2; width: 2.85rem; height: 2.85rem; padding: .6rem; border-radius: 12px; background: var(--fondo-claro); color: var(--azul-marca); }
.acceso__titulo { font-weight: 800; font-size: 1.08rem; }
.acceso__texto { color: var(--tinta-suave); font-size: .95rem; }

/* ---------- Franja de servicios, como en la camioneta ---------- */
.servicios-franja { padding: 0 0 1.75rem; }
.servicios-franja__lista { list-style: none; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem; }
@media (max-width: 40rem) { .servicios-franja__lista { display: grid; justify-content: start; } }
@media (min-width: 64rem) {
  .servicios-franja__lista { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
  .servicio { justify-content: center; }
  .servicio__texto { font-size: 1rem; max-width: 13rem; }
}
.servicio { display: inline-flex; align-items: center; gap: .7rem; }
.servicio__circulo { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--cielo); box-shadow: 0 0 0 4px rgba(45, 185, 233, .18); }
.servicio__icono { color: var(--blanco); width: 1.6rem; height: 1.6rem; }
.servicio__texto { font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .02em; color: var(--marino); font-size: 1.05rem; }

/* ---------- Bandas alternas ---------- */
.banda { padding: 2.6rem 0; }
.banda--clara { background: var(--fondo-claro); }
.banda__texto { color: var(--tinta-suave); margin-top: -.25rem; }
.banda__accion { margin: 1.5rem 0 0; text-align: center; }

/* ---------- Tarjetas de planes (D119): lo esencial a la vista, el resto en «Ver detalles» ---------- */
.planes {
  display: grid; gap: 1.5rem; margin: 1.25rem 0; align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 21.5rem)); justify-content: center;
  align-items: start; /* D122: una tarjeta abierta no estira a las demás */
}
.plan {
  position: relative; display: flex; flex-direction: column;
  padding: 1.75rem 1.4rem 1.4rem; background: var(--blanco);
  border: 1px solid var(--borde); border-radius: var(--radio-grande); box-shadow: var(--sombra);
  transition: box-shadow .2s ease;
}
/* Línea superior tipo fibra iluminada */
.plan::before {
  content: ""; position: absolute; left: 1.4rem; right: 1.4rem; top: -1px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--fibra);
}
.plan:hover { box-shadow: var(--sombra-alta); }
/* El destacado lleva el borde de fibra completo */
.plan--destacado {
  border: 2px solid transparent;
  background: linear-gradient(var(--blanco), var(--blanco)) padding-box, linear-gradient(135deg, var(--cielo), var(--azul-real) 60%, var(--indigo)) border-box;
}
.plan--destacado::before { display: none; }
.plan__etiqueta {
  position: absolute; top: -.9rem; left: 1.4rem; margin: 0;
  padding: .22rem .85rem; border-radius: 999px; background: var(--marino); color: var(--blanco);
  font-size: .85rem; font-weight: 800; letter-spacing: .03em; box-shadow: 0 0 0 2px var(--cielo);
}
.plan__nombre { margin: 0 0 .55rem; font-size: 1rem !important; color: var(--tinta-suave) !important; text-transform: uppercase; letter-spacing: .06em; }
.plan__velocidad { position: relative; display: flex; align-items: center; gap: .55rem; margin: 0; padding-left: 2.6rem; color: var(--azul-marca); }
.plan__velocidad::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 3.4rem; height: 1.6rem; transform: translateY(-50%);
  background:
    linear-gradient(90deg, transparent, rgba(45, 185, 233, .6)) right top / 100% 2px no-repeat,
    linear-gradient(90deg, transparent, rgba(30, 111, 224, .55)) right center / 70% 2px no-repeat,
    linear-gradient(90deg, transparent, rgba(45, 45, 240, .5)) right bottom / 42% 2px no-repeat;
}
.plan__cifra { position: relative; font-size: 3.6rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.plan__unidad { font-weight: 800; line-height: 1.15; color: var(--marino); }
.plan__caracteristicas { list-style: none; margin: .85rem 0 .25rem; padding: 0; display: grid; gap: .45rem; }
.plan__caracteristicas li { display: flex; gap: .6rem; align-items: center; }
.plan__caracteristicas .icono { color: var(--azul-marca); width: 1.3rem; height: 1.3rem; }
.plan__precio { display: flex; align-items: center; gap: .7rem; margin: .85rem 0 .35rem; padding-top: .85rem; border-top: 1px solid var(--borde-suave); }
.precio { color: var(--marino); line-height: 1; white-space: nowrap; }
.precio__pesos { font-size: 2.2rem; font-weight: 800; letter-spacing: -.02em; }
.precio__centavos { font-size: 1.05rem; font-weight: 800; vertical-align: top; position: relative; top: .2rem; }
.plan__periodo { color: var(--tinta-suave); font-size: .9rem; line-height: 1.2; }
.plan__pequeno { margin: .15rem 0; font-size: .92rem; color: var(--tinta-suave); }
.plan__folio-numero { white-space: nowrap; font-weight: 800; }
/* Los botones van justo debajo del contenido; sitio.js iguala la altura de las tarjetas cerradas de cada fila */
.plan__pie { margin-top: auto; padding-top: 1.1rem; display: grid; gap: .6rem; }
.plan__boton { width: 100%; }
.plan__detalles > summary { list-style: none; cursor: pointer; }
.plan__detalles > summary::-webkit-details-marker { display: none; }
.plan__detalles[open] > summary { background: var(--fondo-claro); }
.plan__ocultar, .plan__detalles[open] .plan__ver { display: none; }
.plan__detalles[open] .plan__ocultar { display: inline; }
.plan__detalles[open] .plan__condiciones { animation: desplegar .35s ease-out; }
@keyframes desplegar { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.plan__condiciones { margin: .85rem 0 0; padding: .9rem 1rem; font-size: .95rem; background: var(--fondo-claro); border-radius: 12px; }
.plan__condiciones dt { font-weight: 800; color: var(--marino); }
.plan__condiciones dt:not(:first-child) { margin-top: .6rem; }
.plan__condiciones dd { margin: 0; color: var(--tinta); }

/* ---------- Contrata en 4 pasos: fibras entre pasos y un pulso que viaja del 1 al 4 (D123) ---------- */
.pasos-fibra { list-style: none; counter-reset: paso; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.75rem; grid-template-columns: 1fr; position: relative; }
@media (min-width: 52rem) { .pasos-fibra { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
.pasos-fibra__paso { counter-increment: paso; position: relative; display: flex; gap: .9rem; align-items: center; }
@media (min-width: 52rem) { .pasos-fibra__paso { flex-direction: column; align-items: flex-start; } }
.pasos-fibra__paso::before {
  content: counter(paso); flex: none; display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem; border-radius: 10px;
  background: var(--marino); color: var(--cielo); font-weight: 800; font-size: 1.2rem;
  box-shadow: 0 0 0 2px var(--cielo), 0 0 16px 3px rgba(45, 185, 233, .55);
}
.pasos-fibra__texto { font-weight: 800; font-size: 1.08rem; color: var(--marino); }
/* El cable: en celular baja de un paso al siguiente; en computadora va de lado */
.pasos-fibra__cable {
  position: absolute; left: 1.45rem; top: 3.15rem; bottom: -1.6rem; width: 1.5px;
  background: linear-gradient(180deg, var(--cielo), var(--azul-real) 70%, var(--indigo)); opacity: .85;
}
.pasos-fibra__luz {
  position: absolute; left: -2px; top: 0; width: 5px; height: 26px; border-radius: 4px; opacity: 0;
  background: linear-gradient(180deg, transparent, #cff4ff, transparent); box-shadow: 0 0 8px 2px rgba(45, 185, 233, .6);
  animation: viaje-vertical 10s ease-in-out infinite;
}
@media (min-width: 52rem) {
  .pasos-fibra__cable { left: 3.6rem; right: -1.25rem; top: 1.45rem; bottom: auto; width: auto; height: 1.5px; background: var(--fibra); }
  .pasos-fibra__luz { top: -2px; left: 0; width: 34px; height: 5px; background: linear-gradient(90deg, transparent, #cff4ff, transparent); animation-name: viaje-horizontal; }
}
@keyframes viaje-horizontal {
  0% { left: 0; opacity: 0; }
  1% { opacity: 1; }
  11% { opacity: 1; }
  12% { left: calc(100% - 34px); opacity: 0; }
  100% { left: calc(100% - 34px); opacity: 0; }
}
@keyframes viaje-vertical {
  0% { top: 0; opacity: 0; }
  1% { opacity: 1; }
  11% { opacity: 1; }
  12% { top: calc(100% - 26px); opacity: 0; }
  100% { top: calc(100% - 26px); opacity: 0; }
}

/* D140: secuencia de 10 s. El paso k se enciende a los (k-1)·1.4 s (borde y número en cielo con
   brillo); el pulso de cada tramo sale 0.2 s después y llega justo cuando se enciende el siguiente.
   Al 80 % del ciclo todos se apagan suavemente y la secuencia vuelve a empezar. Sin animación
   («reducir movimiento») todos quedan encendidos, quietos. */
.pasos-fibra__paso:nth-child(1)::before { animation: enciende-fibra-1 10s ease-in-out infinite; }
.linea-pasos__paso:nth-child(1) .linea-pasos__numero { animation: enciende-linea-1 10s ease-in-out infinite; }
.pasos-fibra__paso:nth-child(1) .pasos-fibra__luz, .linea-pasos__paso:nth-child(1) .linea-pasos__luz { animation-delay: 0.2s; }
@keyframes enciende-fibra-1 {
  0%, 0% { color: var(--blanco); box-shadow: 0 0 0 2px rgba(45, 185, 233, .35), 0 0 0 0 rgba(45, 185, 233, 0); }
  3%, 80% { color: var(--cielo); box-shadow: 0 0 0 2px var(--cielo), 0 0 16px 3px rgba(45, 185, 233, .55); }
  88%, 100% { color: var(--blanco); box-shadow: 0 0 0 2px rgba(45, 185, 233, .35), 0 0 0 0 rgba(45, 185, 233, 0); }
}
@keyframes enciende-linea-1 {
  0%, 0% { color: var(--blanco); box-shadow: 0 0 0 3px var(--blanco), 0 0 0 5px rgba(45, 185, 233, .35), 0 0 0 0 rgba(45, 185, 233, 0); }
  3%, 80% { color: var(--cielo); box-shadow: 0 0 0 3px var(--blanco), 0 0 0 5px var(--cielo), 0 0 18px 4px rgba(45, 185, 233, .5); }
  88%, 100% { color: var(--blanco); box-shadow: 0 0 0 3px var(--blanco), 0 0 0 5px rgba(45, 185, 233, .35), 0 0 0 0 rgba(45, 185, 233, 0); }
}
.pasos-fibra__paso:nth-child(2)::before { animation: enciende-fibra-2 10s ease-in-out infinite; }
.linea-pasos__paso:nth-child(2) .linea-pasos__numero { animation: enciende-linea-2 10s ease-in-out infinite; }
.pasos-fibra__paso:nth-child(2) .pasos-fibra__luz, .linea-pasos__paso:nth-child(2) .linea-pasos__luz { animation-delay: 1.6s; }
@keyframes enciende-fibra-2 {
  0%, 14% { color: var(--blanco); box-shadow: 0 0 0 2px rgba(45, 185, 233, .35), 0 0 0 0 rgba(45, 185, 233, 0); }
  17%, 80% { color: var(--cielo); box-shadow: 0 0 0 2px var(--cielo), 0 0 16px 3px rgba(45, 185, 233, .55); }
  88%, 100% { color: var(--blanco); box-shadow: 0 0 0 2px rgba(45, 185, 233, .35), 0 0 0 0 rgba(45, 185, 233, 0); }
}
@keyframes enciende-linea-2 {
  0%, 14% { color: var(--blanco); box-shadow: 0 0 0 3px var(--blanco), 0 0 0 5px rgba(45, 185, 233, .35), 0 0 0 0 rgba(45, 185, 233, 0); }
  17%, 80% { color: var(--cielo); box-shadow: 0 0 0 3px var(--blanco), 0 0 0 5px var(--cielo), 0 0 18px 4px rgba(45, 185, 233, .5); }
  88%, 100% { color: var(--blanco); box-shadow: 0 0 0 3px var(--blanco), 0 0 0 5px rgba(45, 185, 233, .35), 0 0 0 0 rgba(45, 185, 233, 0); }
}
.pasos-fibra__paso:nth-child(3)::before { animation: enciende-fibra-3 10s ease-in-out infinite; }
.linea-pasos__paso:nth-child(3) .linea-pasos__numero { animation: enciende-linea-3 10s ease-in-out infinite; }
.pasos-fibra__paso:nth-child(3) .pasos-fibra__luz, .linea-pasos__paso:nth-child(3) .linea-pasos__luz { animation-delay: 3.0s; }
@keyframes enciende-fibra-3 {
  0%, 28% { color: var(--blanco); box-shadow: 0 0 0 2px rgba(45, 185, 233, .35), 0 0 0 0 rgba(45, 185, 233, 0); }
  31%, 80% { color: var(--cielo); box-shadow: 0 0 0 2px var(--cielo), 0 0 16px 3px rgba(45, 185, 233, .55); }
  88%, 100% { color: var(--blanco); box-shadow: 0 0 0 2px rgba(45, 185, 233, .35), 0 0 0 0 rgba(45, 185, 233, 0); }
}
@keyframes enciende-linea-3 {
  0%, 28% { color: var(--blanco); box-shadow: 0 0 0 3px var(--blanco), 0 0 0 5px rgba(45, 185, 233, .35), 0 0 0 0 rgba(45, 185, 233, 0); }
  31%, 80% { color: var(--cielo); box-shadow: 0 0 0 3px var(--blanco), 0 0 0 5px var(--cielo), 0 0 18px 4px rgba(45, 185, 233, .5); }
  88%, 100% { color: var(--blanco); box-shadow: 0 0 0 3px var(--blanco), 0 0 0 5px rgba(45, 185, 233, .35), 0 0 0 0 rgba(45, 185, 233, 0); }
}
.pasos-fibra__paso:nth-child(4)::before { animation: enciende-fibra-4 10s ease-in-out infinite; }
.linea-pasos__paso:nth-child(4) .linea-pasos__numero { animation: enciende-linea-4 10s ease-in-out infinite; }
.pasos-fibra__paso:nth-child(4) .pasos-fibra__luz, .linea-pasos__paso:nth-child(4) .linea-pasos__luz { animation-delay: 4.4s; }
@keyframes enciende-fibra-4 {
  0%, 42% { color: var(--blanco); box-shadow: 0 0 0 2px rgba(45, 185, 233, .35), 0 0 0 0 rgba(45, 185, 233, 0); }
  45%, 80% { color: var(--cielo); box-shadow: 0 0 0 2px var(--cielo), 0 0 16px 3px rgba(45, 185, 233, .55); }
  88%, 100% { color: var(--blanco); box-shadow: 0 0 0 2px rgba(45, 185, 233, .35), 0 0 0 0 rgba(45, 185, 233, 0); }
}
@keyframes enciende-linea-4 {
  0%, 42% { color: var(--blanco); box-shadow: 0 0 0 3px var(--blanco), 0 0 0 5px rgba(45, 185, 233, .35), 0 0 0 0 rgba(45, 185, 233, 0); }
  45%, 80% { color: var(--cielo); box-shadow: 0 0 0 3px var(--blanco), 0 0 0 5px var(--cielo), 0 0 18px 4px rgba(45, 185, 233, .5); }
  88%, 100% { color: var(--blanco); box-shadow: 0 0 0 3px var(--blanco), 0 0 0 5px rgba(45, 185, 233, .35), 0 0 0 0 rgba(45, 185, 233, 0); }
}
.pasos-fibra__paso:nth-child(5)::before { animation: enciende-fibra-5 10s ease-in-out infinite; }
.linea-pasos__paso:nth-child(5) .linea-pasos__numero { animation: enciende-linea-5 10s ease-in-out infinite; }
.pasos-fibra__paso:nth-child(5) .pasos-fibra__luz, .linea-pasos__paso:nth-child(5) .linea-pasos__luz { animation-delay: 5.8s; }
@keyframes enciende-fibra-5 {
  0%, 56% { color: var(--blanco); box-shadow: 0 0 0 2px rgba(45, 185, 233, .35), 0 0 0 0 rgba(45, 185, 233, 0); }
  59%, 80% { color: var(--cielo); box-shadow: 0 0 0 2px var(--cielo), 0 0 16px 3px rgba(45, 185, 233, .55); }
  88%, 100% { color: var(--blanco); box-shadow: 0 0 0 2px rgba(45, 185, 233, .35), 0 0 0 0 rgba(45, 185, 233, 0); }
}
@keyframes enciende-linea-5 {
  0%, 56% { color: var(--blanco); box-shadow: 0 0 0 3px var(--blanco), 0 0 0 5px rgba(45, 185, 233, .35), 0 0 0 0 rgba(45, 185, 233, 0); }
  59%, 80% { color: var(--cielo); box-shadow: 0 0 0 3px var(--blanco), 0 0 0 5px var(--cielo), 0 0 18px 4px rgba(45, 185, 233, .5); }
  88%, 100% { color: var(--blanco); box-shadow: 0 0 0 3px var(--blanco), 0 0 0 5px rgba(45, 185, 233, .35), 0 0 0 0 rgba(45, 185, 233, 0); }
}
.pasos-fibra__paso:nth-child(6)::before { animation: enciende-fibra-6 10s ease-in-out infinite; }
.linea-pasos__paso:nth-child(6) .linea-pasos__numero { animation: enciende-linea-6 10s ease-in-out infinite; }
.pasos-fibra__paso:nth-child(6) .pasos-fibra__luz, .linea-pasos__paso:nth-child(6) .linea-pasos__luz { animation-delay: 7.2s; }
@keyframes enciende-fibra-6 {
  0%, 70% { color: var(--blanco); box-shadow: 0 0 0 2px rgba(45, 185, 233, .35), 0 0 0 0 rgba(45, 185, 233, 0); }
  73%, 80% { color: var(--cielo); box-shadow: 0 0 0 2px var(--cielo), 0 0 16px 3px rgba(45, 185, 233, .55); }
  88%, 100% { color: var(--blanco); box-shadow: 0 0 0 2px rgba(45, 185, 233, .35), 0 0 0 0 rgba(45, 185, 233, 0); }
}
@keyframes enciende-linea-6 {
  0%, 70% { color: var(--blanco); box-shadow: 0 0 0 3px var(--blanco), 0 0 0 5px rgba(45, 185, 233, .35), 0 0 0 0 rgba(45, 185, 233, 0); }
  73%, 80% { color: var(--cielo); box-shadow: 0 0 0 3px var(--blanco), 0 0 0 5px var(--cielo), 0 0 18px 4px rgba(45, 185, 233, .5); }
  88%, 100% { color: var(--blanco); box-shadow: 0 0 0 3px var(--blanco), 0 0 0 5px rgba(45, 185, 233, .35), 0 0 0 0 rgba(45, 185, 233, 0); }
}


/* ---------- ¿Por qué MotoRed? ---------- */
.razones { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .razones { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .razones { grid-template-columns: repeat(3, 1fr); } }
.razon {
  display: flex; gap: .85rem; align-items: center; padding: 1.1rem 1.2rem;
  background: var(--blanco); border: 1px solid var(--borde-suave); border-radius: var(--radio-grande);
  box-shadow: var(--sombra); font-weight: 800; color: var(--marino);
}
.razon__icono { width: 3.1rem; height: 3.1rem; padding: .6rem; border-radius: 14px; background: var(--fondo-claro); color: var(--azul-marca); flex: none; }
.razon__icono path, .razon__icono circle, .razon__icono rect { stroke-width: 1.4; }
@media (min-width: 64rem) {
  .razones--5, .razones { grid-template-columns: repeat(5, 1fr); }
  .razon { flex-direction: column; align-items: flex-start; text-align: left; gap: .75rem; padding: 1.25rem 1.1rem; }
}

/* ---------- Nuestra red (D118): fotos verticales u horizontales sin deformarse ---------- */
.red__texto { max-width: 42rem; color: var(--tinta-suave); margin-top: -.25rem; }
.red__fotos { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .red__fotos--2, .red__fotos--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .red__fotos--3 { grid-template-columns: repeat(3, 1fr); } }
.red__fotos--2 { max-width: 46rem; }
.red__foto { border-radius: var(--radio-grande); overflow: hidden; box-shadow: var(--sombra); background: var(--fondo-claro); aspect-ratio: 4 / 5; max-height: 30rem; }
.red__fotos--1 .red__foto { aspect-ratio: 16 / 9; max-width: 48rem; }
.red__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Franja de cobertura ---------- */
.franja-cobertura__fila { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 52rem) { .franja-cobertura__fila { grid-template-columns: 1fr auto; } }
.localidades { list-style: none; margin: 1.25rem 0 .75rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.localidad {
  display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .8rem;
  border: 1px solid var(--borde); border-radius: 999px; background: var(--blanco); font-weight: 800; color: var(--marino);
}
.localidad .icono { color: var(--azul-marca); }
.localidad--expansion { border-style: dashed; }
.localidad__nota { font-weight: 400; color: var(--tinta-suave); }
.franja-cobertura__accion { margin: 0; }

.informacion-banda { background: var(--fondo-claro); }
.informacion-destacada { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 56rem) { .informacion-destacada { grid-template-columns: 1.15fr 1fr; } }
.informacion-destacada__texto { display: flex; gap: 1.25rem; align-items: flex-start; }
.accesos-directos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.pildora {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .5rem 1rem;
  border: 1px solid var(--borde); border-radius: 999px; background: var(--blanco);
  color: var(--marino) !important; font-weight: 800; text-decoration: none; box-shadow: var(--sombra);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pildora .icono { color: var(--azul-marca); }
.pildora:hover { border-color: var(--cielo); box-shadow: 0 0 0 3px rgba(45, 185, 233, .18); }
.informacion-destacada__icono { width: 3.25rem; height: 3.25rem; padding: .65rem; border-radius: 14px; background: var(--blanco); color: var(--azul-marca); box-shadow: var(--sombra); }
.informacion-destacada p { max-width: 42rem; }

/* ---------- Franja «¿Listo para contratar?» (D132): llamada a la acción ---------- */
.llamado {
  position: relative; overflow: hidden; color: var(--blanco); padding: 3rem 0;
  /* Degradado vivo, distinto del pie marino. Texto siempre blanco: 4.8 a 7.7 de contraste */
  background: linear-gradient(110deg, #1577b0 0%, #1e6fe0 55%, #2d2df0 100%);
}
.llamado__fila { position: relative; display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 56rem) { .llamado__fila { grid-template-columns: 1fr auto; gap: 3rem; } }
.llamado__titulo { color: var(--blanco) !important; margin: 0 0 .5rem; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem) !important; }
.llamado__texto { margin: 0; max-width: 34rem; color: var(--blanco); font-size: 1.1rem; }
.llamado__accion { display: grid; gap: .9rem; justify-items: start; }
.sitio .llamado__telefono {
  display: inline-flex; align-items: center; gap: .6rem; color: var(--blanco); text-decoration: none;
  font-size: clamp(2rem, 1.5rem + 2.4vw, 2.9rem); font-weight: 800; letter-spacing: -.01em; line-height: 1;
}
.llamado__telefono .icono { width: 2rem; height: 2rem; }
.sitio .llamado__telefono:hover { color: var(--blanco); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.llamado__botones { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.llamado__boton-envoltura { position: relative; display: inline-flex; isolation: isolate; }
/* Fibras que convergen en el botón y dos ondas de señal que se expanden despacio */
.llamado__fibras { position: absolute; left: 50%; top: 50%; width: 900px; height: 360px; transform: translate(-50%, -50%); z-index: -2; pointer-events: none; overflow: visible; }
.llamado__fibras g path { fill: none; stroke: #cff4ff; stroke-width: 1.1; stroke-linecap: round; filter: drop-shadow(0 0 2px rgba(207, 244, 255, .9)); }
.llamado__pulso { fill: none; stroke: #ffffff; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 6 94; stroke-dashoffset: 100; opacity: 0; filter: drop-shadow(0 0 4px #ffffff); animation: hacia-boton 6s ease-in infinite; }
.llamado__pulso--1 { animation-duration: 6.5s; animation-delay: 0.0s; }
.llamado__pulso--2 { animation-duration: 7.3s; animation-delay: 0.63s; }
.llamado__pulso--3 { animation-duration: 8.1s; animation-delay: 1.26s; }
.llamado__pulso--4 { animation-duration: 6.9s; animation-delay: 1.89s; }
.llamado__pulso--5 { animation-duration: 7.7s; animation-delay: 2.52s; }
.llamado__pulso--6 { animation-duration: 8.5s; animation-delay: 3.15s; }
.llamado__pulso--7 { animation-duration: 6.2s; animation-delay: 3.78s; }
.llamado__pulso--8 { animation-duration: 7.0s; animation-delay: 4.41s; }
.llamado__pulso--9 { animation-duration: 7.9s; animation-delay: 5.04s; }
.llamado__pulso--10 { animation-duration: 6.6s; animation-delay: 5.67s; }
.llamado__pulso--11 { animation-duration: 8.3s; animation-delay: 6.3s; }
.llamado__pulso--12 { animation-duration: 7.4s; animation-delay: 6.93s; }
/* Destellos sobre las fibras: aparecen y se desvanecen despacio, cada uno a su tiempo */
.llamado__destello { fill: #ffffff; opacity: 0; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 8px rgba(207, 244, 255, .8)); animation: destello 5.5s ease-in-out infinite; }
.llamado__destello--1 { animation-delay: 0.4s; animation-duration: 5.5s; }
.llamado__destello--2 { animation-delay: 2.9s; animation-duration: 6.2s; }
.llamado__destello--4 { animation-delay: 1.6s; animation-duration: 5.8s; }
.llamado__destello--5 { animation-delay: 4.1s; animation-duration: 6.6s; }
.llamado__destello--7 { animation-delay: 3.3s; animation-duration: 5.2s; }
.llamado__destello--8 { animation-delay: 0.9s; animation-duration: 6.9s; }
.llamado__destello--10 { animation-delay: 5.0s; animation-duration: 6.0s; }
.llamado__destello--11 { animation-delay: 2.2s; animation-duration: 5.6s; }
@keyframes destello {
  0%, 100% { opacity: 0; transform: scale(.4); }
  12% { opacity: 1; transform: scale(1.3); }
  28% { opacity: 0; transform: scale(.6); }
}
/* Cables del borde superior e inferior: un pulso los recorre y el conector de la orilla destella al llegar */
.llamado__cable { position: absolute; left: 0; right: 0; height: 2px; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(207, 244, 255, .15), rgba(207, 244, 255, .75) 30%, #cff4ff 80%); box-shadow: 0 0 8px rgba(207, 244, 255, .5); }
.llamado__cable--arriba { top: 6px; }
.llamado__cable--abajo { bottom: 6px; }
.llamado__cable-luz { position: absolute; top: -2px; left: 0; width: 140px; height: 6px; border-radius: 6px; opacity: 0; background: linear-gradient(90deg, transparent, #ffffff 50%, transparent); box-shadow: 0 0 16px 4px rgba(255, 255, 255, .7); animation: pulso-cable 6s ease-in-out infinite; }
.llamado__conector { position: absolute; right: 0; top: -4px; width: 16px; height: 10px; border-radius: 3px 0 0 3px; background: #cff4ff; box-shadow: 0 0 6px rgba(255, 255, 255, .5); animation: conector-destello 6s ease-in-out infinite; }
.llamado__cable--abajo .llamado__cable-luz, .llamado__cable--abajo .llamado__conector { animation-delay: 3s; }
@keyframes pulso-cable {
  0% { left: 0; opacity: 0; }
  5% { opacity: 1; }
  33% { opacity: 1; }
  38% { left: calc(100% - 140px); opacity: 0; }
  100% { left: calc(100% - 140px); opacity: 0; }
}
@keyframes conector-destello {
  0%, 32% { background: #cff4ff; box-shadow: 0 0 6px rgba(255, 255, 255, .5); }
  38% { background: #ffffff; box-shadow: 0 0 20px 7px rgba(255, 255, 255, .95); }
  55%, 100% { background: #cff4ff; box-shadow: 0 0 6px rgba(255, 255, 255, .5); }
}
@keyframes hacia-boton {
  0% { stroke-dashoffset: 100; opacity: 0; }
  5% { opacity: 1; }
  40% { opacity: 1; }
  45% { stroke-dashoffset: -6; opacity: 0; }
  100% { stroke-dashoffset: -6; opacity: 0; }
}
.llamado__boton-envoltura::before, .llamado__boton-envoltura::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .7); opacity: 0; animation: onda 4.5s ease-out infinite;
}
.llamado__boton-envoltura::after { animation-delay: 2.25s; }
@keyframes onda {
  0% { transform: scale(1); opacity: .7; }
  70% { opacity: 0; }
  100% { transform: scale(1.45, 1.9); opacity: 0; }
}
.sitio .boton--llamar { background: var(--blanco); color: var(--marino); border-color: var(--blanco); font-size: 1.1rem; padding: .85rem 1.7rem; box-shadow: 0 6px 22px rgba(6, 16, 28, .3); }
.sitio .boton--llamar:hover { background: #eaf6fd; color: var(--marino); border-color: #eaf6fd; }
.sitio .boton--contorno-blanco { background: transparent; color: var(--blanco); border-color: var(--blanco); }
.sitio .boton--contorno-blanco:hover { background: rgba(255, 255, 255, .14); color: var(--blanco); }
.sitio .llamado__enlace { color: var(--blanco); text-underline-offset: 4px; font-weight: 800; }
.sitio .llamado__enlace:hover { color: var(--blanco); }
.llamado :focus-visible { outline-color: var(--blanco); }
@media (max-width: 40rem) {
  .llamado__accion, .llamado__botones { justify-items: stretch; width: 100%; }
  .llamado__botones { display: grid; }
  .llamado__boton-envoltura, .llamado__botones .boton { width: 100%; }
  .llamado__boton-envoltura .boton { width: 100%; }
}

/* ---------- Otras páginas ---------- */
.tarjetas { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-bottom: 1.5rem; }
@media (min-width: 42rem) { .tarjetas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .tarjetas { grid-template-columns: repeat(3, 1fr); } }
.tarjeta-plan {
  position: relative; border: 1px solid var(--borde); border-radius: var(--radio-grande);
  padding: 1.35rem 1.25rem 1.25rem; background: var(--blanco); display: flex; flex-direction: column; gap: .25rem; box-shadow: var(--sombra);
}
.tarjeta-plan::before { content: ""; position: absolute; left: 1.25rem; right: 1.25rem; top: -1px; height: 4px; border-radius: 0 0 4px 4px; background: var(--fibra); }
.tarjeta-plan p { margin: .3rem 0; }
.tarjeta-plan__nombre { margin: 0 0 .25rem; font-size: 1.25rem !important; }
.tarjeta-plan__precio { font-size: 1.6rem; font-weight: 800; color: var(--marino); line-height: 1.2; }
.tarjeta-plan__precio span { display: block; font-size: 1rem; font-weight: 400; color: var(--tinta-suave); }
.tarjeta-plan__folio { margin-top: auto !important; padding-top: .75rem; border-top: 1px solid var(--borde-suave); }

.ficha-plan { margin: .5rem 0; display: grid; gap: .1rem; }
.ficha-plan dt { font-weight: 800; margin-top: .55rem; color: var(--marino); }
.ficha-plan dd { margin: 0; }
.ficha-plan ul { margin: .2rem 0; padding-left: 1.2rem; }

.recuadro {
  background: var(--fondo-claro); border: 1px solid #d4ebf6; border-left: 4px solid var(--azul-marca); border-radius: var(--radio-grande);
  padding: 1.1rem 1.25rem; margin: 1.25rem 0;
}
.recuadro h2, .recuadro h3 { margin-top: 0; }
.recuadro--importante { font-weight: 800; color: var(--marino); }
.recuadro--enlace { font-size: 1.05rem; }
.recuadro--pago { background: var(--blanco); box-shadow: var(--sombra); }
.nota-formulario { margin: 0; }

.pasos { list-style: none; counter-reset: paso; padding: 0; display: grid; gap: .65rem; }
.pasos li { counter-increment: paso; display: flex; gap: .85rem; align-items: flex-start; padding: .85rem 1rem; background: var(--blanco); border: 1px solid var(--borde-suave); border-radius: var(--radio-grande); box-shadow: var(--sombra); }
.pasos li::before { content: counter(paso); flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; background: var(--marino); color: var(--blanco); font-weight: 800; box-shadow: 0 0 0 2px var(--cielo); }
.lista-espaciada li { margin: .5rem 0; }
.lista-columnas { columns: 2 12rem; padding-left: 1.2rem; }
.lista-localidades { padding-left: 1.2rem; }
.lista-localidades li { margin: .3rem 0; }
.dato-copiable { font-family: var(--mono); font-size: 1.1rem; letter-spacing: .03em; }
.foto-equipo { max-width: 100%; height: auto; border-radius: var(--radio); margin: .5rem 0; }

.tabla-envoltura { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio-grande); margin-bottom: 1.25rem; box-shadow: var(--sombra); background: var(--blanco); }
.tabla { width: 100%; border-collapse: collapse; min-width: 32rem; }
.tabla th, .tabla td { text-align: left; vertical-align: top; padding: .7rem .85rem; border-bottom: 1px solid var(--borde-suave); }
.tabla thead th { background: var(--fondo-claro); color: var(--marino); }

.tramite { background: var(--blanco); border: 1px solid var(--borde-suave); border-radius: var(--radio-grande); padding: .25rem 1.25rem 1rem; margin-bottom: 1rem; box-shadow: var(--sombra); }
.tramite__nombre { font-size: 1.2rem !important; margin: 1rem 0 .25rem; }

.lista-documentos { list-style: none; padding: 0; display: grid; gap: .65rem; }
.lista-documentos li { padding: .9rem 1.1rem; display: grid; gap: .15rem; background: var(--blanco); border: 1px solid var(--borde-suave); border-radius: var(--radio-grande); box-shadow: var(--sombra); }
.lista-documentos a { font-weight: 800; font-size: 1.05rem; }
.lista-documentos__datos { color: var(--tinta-suave); }

/* Información para usuarios (D136): 4 bloques; cada punto es un renglón compacto
   (número, título corto, estado y enlace) con el nombre oficial en letra chica. */
.bloque-usuarios { margin-bottom: 2.25rem; }
.sitio .bloque-usuarios__titulo { display: flex; align-items: center; gap: .7rem; margin: 0 0 .9rem; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); }
.bloque-usuarios__icono { width: 2.5rem; height: 2.5rem; padding: .5rem; border-radius: 12px; background: var(--marino); color: var(--cielo); }
.indice-usuarios { list-style: none; padding: 0; margin: 0; background: var(--blanco); border: 1px solid var(--borde-suave); border-radius: var(--radio-grande); box-shadow: var(--sombra); overflow: hidden; }
.indice-usuarios__punto { display: grid; grid-template-columns: 2.4rem 1fr; gap: .2rem .9rem; align-items: center; padding: .8rem 1.1rem; border-top: 1px solid var(--borde-suave); }
.indice-usuarios__punto:first-child { border-top: 0; }
@media (min-width: 52rem) { .indice-usuarios__punto { grid-template-columns: 2.4rem minmax(14rem, 1fr) auto minmax(10rem, 20rem); } }
.indice-usuarios__numero {
  display: inline-grid; place-items: center; width: 2.4rem; height: 2.1rem;
  border-radius: 8px; background: var(--fondo-claro); color: var(--marino); font-weight: 800; font-size: .88rem;
}
.indice-usuarios__titulo { margin: 0; font-weight: 800; color: var(--marino); }
.indice-usuarios__oficial { margin: .1rem 0 0; font-size: .85rem; color: var(--tinta-suave); }
.indice-usuarios__punto > .etiqueta, .indice-usuarios__enlaces { grid-column: 2; justify-self: start; }
@media (min-width: 52rem) { .indice-usuarios__punto > .etiqueta { grid-column: 3; } .indice-usuarios__enlaces { grid-column: 4; justify-self: end; text-align: right; } }
.indice-usuarios__enlaces { margin: 0; display: flex; flex-wrap: wrap; gap: .2rem .9rem; }
.indice-usuarios__enlaces a { display: inline-flex; align-items: center; justify-content: flex-end; gap: .25rem; font-weight: 800; min-height: 32px; overflow-wrap: normal; }
.indice-usuarios__enlaces .nota { font-size: .9rem; }
.etiqueta { display: inline-block; margin: 0; padding: .12rem .65rem; border-radius: 999px; font-size: .85rem; font-weight: 800; }
.etiqueta--disponible { background: #e3f4ea; color: #17663a; }
.etiqueta--actualizacion { background: #fbeedb; color: #7d4707; }

/* Mapa: su propio contexto de apilamiento, para que nunca pase encima del encabezado fijo */
.mapa { position: relative; z-index: 0; isolation: isolate; width: 100%; height: 24rem; border: 1px solid var(--borde); border-radius: var(--radio-grande); background: var(--superficie-2); box-shadow: var(--sombra); }
@media (max-width: 30rem) { .mapa { height: 18rem; } }
.mapa[hidden], .ver-mapa[hidden] { display: none; }
.ver-mapa { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-block: 1rem; }
.ver-mapa .nota { margin: 0; }
.leyenda-mapa { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; color: var(--tinta-suave); }
.muestra { display: inline-block; width: 1.4rem; height: .9rem; border: 2px solid; margin-right: -.6rem; vertical-align: middle; }
.muestra--cobertura { border-color: #0b4f7a; background: rgba(11, 79, 122, .25); }
.muestra--expansion { border-color: #98590c; border-style: dashed; background: rgba(152, 89, 12, .25); }

.numeros-emergencia { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0; }
.numero-emergencia { display: flex; align-items: center; gap: .75rem; margin: 0; padding: .85rem 1.2rem; border: 3px solid var(--error); border-radius: var(--radio-grande); background: var(--blanco); box-shadow: var(--sombra); }
.numero-emergencia--denuncia { border-color: var(--azul); }
.numero-emergencia__numero { font-size: 2rem; font-weight: 800; color: var(--error); line-height: 1; }
.numero-emergencia--denuncia .numero-emergencia__numero { color: var(--azul); }
.numero-emergencia__texto { font-weight: 800; }

.aviso-obra { max-width: 42rem; margin-top: 2rem; padding: 1.5rem; border-radius: var(--radio-grande); background: var(--fondo-claro); border-left: 5px solid var(--azul-marca); }
.aviso-obra p { font-size: 1.1rem; }
.enlace-fuerte { font-weight: 800; }
.detalle-error { white-space: pre-wrap; font-family: var(--mono); font-size: .85rem; background: var(--lienzo); padding: 1rem; overflow-x: auto; }

/* ---------- Pie de página en marino profundo ---------- */
/* ---------- Pie de página (D147): compacto, 4 columnas, degradado con resplandor y textura de fibra ---------- */
.pie {
  position: relative; overflow: hidden; isolation: isolate; color: #c9e6f5; padding: 2.5rem 0 0; font-size: .95rem;
  background:
    radial-gradient(ellipse 55% 70% at 50% -10%, rgba(33, 154, 214, .16), rgba(33, 154, 214, 0) 70%),
    linear-gradient(180deg, #0b2235 0%, #081a2b 55%, #06101c 100%);
}
.pie__textura { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.pie__textura path { fill: none; stroke: #2db9e9; stroke-width: 1; }
.pie__fibra { position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, rgba(45, 185, 233, .1), rgba(45, 185, 233, .6) 40%, rgba(159, 220, 245, .7) 75%, rgba(45, 185, 233, .2)); }
.pie__pulso { position: absolute; top: -2px; left: 0; width: 160px; height: 5px; border-radius: 5px; opacity: 0; background: linear-gradient(90deg, transparent, #e6f8ff 50%, transparent); box-shadow: 0 0 12px 3px rgba(45, 185, 233, .6); animation: pulso-encabezado 11s ease-in-out infinite; animation-delay: 2s; }
.pie a { color: var(--blanco) !important; text-underline-offset: 3px; }
.pie a:hover { color: #9fdcf5 !important; }
.pie :focus-visible { outline-color: var(--cielo); }
.pie__rejilla { display: grid; gap: 1.75rem; padding-bottom: 2rem; }
@media (min-width: 40rem) { .pie__rejilla { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .pie__rejilla { grid-template-columns: 1.1fr 1.85fr .9fr .9fr; gap: 2rem; } }
.pie__titulo { color: var(--cielo) !important; font-size: .9rem !important; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .75rem; }
.pie__marca { display: flex; align-items: center; gap: .6rem; color: var(--blanco) !important; font-size: 1.3rem !important; margin: 0 0 .7rem; }
.pie__logo { height: 2.9rem; width: auto; max-width: 14rem; object-fit: contain; display: block; }
.pie__placa { display: inline-flex; padding: .45rem .8rem; border-radius: 12px; background: var(--blanco); box-shadow: 0 0 0 1px rgba(45, 185, 233, .35); }
.pie__placa .pie__logo { height: 2.6rem; }
.pie__servicios { margin: 0 0 .9rem; color: #c9e6f5; font-size: .93rem; line-height: 1.45; }
.pie__contacto { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.pie__contacto li { display: flex; gap: .55rem; align-items: flex-start; line-height: 1.4; }
.pie__contacto .icono { color: var(--cielo); margin-top: .15rem; }
/* Enlaces sin subrayado; se subrayan al pasar el cursor o al enfocarlos con el teclado */
.pie__enlaces { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .9375rem; line-height: 1.35; }
.pie__enlaces a { text-decoration: none; display: inline-block; padding: .1rem 0; }
.pie__enlaces a:hover, .pie__enlaces a:focus-visible { text-decoration: underline; text-decoration-color: var(--cielo); }
.pie__destacado { font-weight: 800; }
.pie__redes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pie__redes a { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem; border: 1px solid rgba(45, 185, 233, .45); border-radius: 999px; text-decoration: none; font-size: .9rem; }
.pie__redes a:hover { background: rgba(45, 185, 233, .12); }
/* Acordeones: abiertos y sin flecha en computadora; en celular se pliegan */
.pie__acordeon > summary { list-style: none; }
.pie__acordeon > summary::-webkit-details-marker { display: none; }
@media (min-width: 40rem) { .pie__acordeon > summary { pointer-events: none; cursor: default; } }
@media (max-width: 39.99rem) {
  .pie__rejilla { gap: 1.25rem; }
  .pie__acordeon { border-top: 1px solid rgba(45, 185, 233, .2); }
  .pie__acordeon > summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; cursor: pointer; }
  .pie__acordeon > summary .pie__titulo { margin: 0; }
  .pie__acordeon > summary::after { content: ""; width: .55rem; height: .55rem; border-right: 2px solid var(--cielo); border-bottom: 2px solid var(--cielo); transform: rotate(45deg); transition: transform .3s ease; margin-right: .3rem; }
  .pie__acordeon[open] > summary::after { transform: rotate(-135deg); }
  .pie__acordeon .pie__enlaces { padding-bottom: .75rem; }
  .pie__enlaces a { padding: .35rem 0; }
}
.pie__base { position: relative; border-top: 1px solid rgba(45, 185, 233, .12); padding: .8rem 0; color: #9fd3ec; font-size: .88rem; }
.pie__base-fila { display: flex; flex-wrap: wrap; gap: .25rem 0; margin: 0 auto; }
.pie__base-fila > span + span::before { content: "·"; margin: 0 .6rem; color: rgba(159, 211, 236, .6); }
@media (max-width: 39.99rem) { .pie__base-fila { flex-direction: column; gap: .2rem; } .pie__base-fila > span + span::before { content: none; } }
.pie__base a { text-decoration: none; }
.pie__base a:hover, .pie__base a:focus-visible { text-decoration: underline; }

/* Con «reducir movimiento», ninguna animación: los pulsos se ocultan y el brillo se queda fijo */
@media (prefers-reduced-motion: reduce) {
  .encabezado__pulso, .encabezado__destello, .pie__pulso { display: none; animation: none; }
  .pie__acordeon > summary::after { transition: none; }
  .encabezado__telefono { transition: none; }
  .encabezado__telefono:hover { transform: none; }
  .fibras__pulso, .llamado__pulso, .pasos-fibra__luz, .escena__pulso, .escena__enlace-luz { display: none; animation: none; }
  .llamado__boton-envoltura::before, .llamado__boton-envoltura::after, .llamado__destello, .llamado__cable-luz { display: none; }
  .llamado__conector { animation: none; }
  .escena__senal, .casa__ventanas rect { animation: none; }
  .casa__ventanas rect { fill-opacity: .35; }
  .mantenimiento__pildora, .plan__detalles[open] .plan__condiciones { animation: none; }
  .cabecera-fibras__pulso { display: none; animation: none; }
  .linea-pasos__luz { display: none; animation: none; }
  .pasos-fibra__paso::before, .linea-pasos__numero { animation: none !important; }
  .grupo-planes--entrando, .promo__vigencia--ultimos .icono { animation: none; }
  .acordeon > summary::after { transition: none; }
}

@media print {
  .navegacion--escritorio, .navegacion--movil, .encabezado__telefono, .encabezado__folio, .consulta-compacta, .encabezado__fibra, .saltar, .boton--pagar, .accesos, .portada__botones, .fibras, .escena, .borde-fibras, .fibra-linea, .llamado__fibras, .llamado__cable, .mantenimiento__ver, .cabecera-fibras, .linea-pasos__tramo { display: none !important; }
  .cabecera-pagina { background: none; color: var(--tinta); min-height: 0; }
  .sitio .cabecera-pagina__titulo, .cabecera-pagina__subtitulo { color: var(--tinta) !important; }
  .encabezado { position: static; box-shadow: none; background: none; }
  .encabezado + .mantenimiento, .encabezado + .cabecera-pagina, .encabezado + .principal > .portada:first-child, .encabezado + .principal > .inicio:first-child > .portada:first-child { padding-top: 0; }
  .portada, .llamado { color: var(--tinta); background: none; }
  .portada::before, .portada::after, .portada__foto { display: none; }
  .portada__titulo, .portada__texto, .llamado__titulo { color: var(--tinta) !important; }
  .pie, .pie__base { background: none; color: var(--tinta); }
  .pie__textura, .pie__fibra { display: none; }
  .pie a, .pie__titulo, .pie__marca { color: var(--tinta) !important; }
}


.llamado .boton--contorno { background: var(--marino); }



/* ---------- Planes por tecnología (D127) ---------- */
.grupo-planes { margin-top: 1.5rem; }
.grupo-planes__titulo { margin-bottom: .25rem; }
.grupo-planes__titulo::before { display: none; }
.grupo-planes__icono { width: 2.4rem; height: 2.4rem; padding: .45rem; border-radius: 12px; background: var(--fondo-claro); color: var(--azul-marca); }
.grupo-planes__subtitulo { display: flex; align-items: center; gap: .5rem; margin: 1.25rem 0 .25rem; font-size: 1.15rem !important; }
.grupo-planes__subtitulo .icono, .pestana-plan .icono { color: var(--azul-marca); }
.pestanas-planes { display: inline-flex; gap: .25rem; padding: .3rem; margin: .5rem 0 .25rem; border-radius: 999px; background: var(--blanco); border: 1px solid var(--borde); }
.pestana-plan {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .45rem 1.15rem;
  border: 0; border-radius: 999px; background: transparent; color: var(--marino); font: inherit; font-weight: 800; cursor: pointer;
}
.pestana-plan[aria-selected="true"] { background: var(--boton); color: var(--blanco); }
.pestana-plan[aria-selected="true"] .icono { color: var(--blanco); }
@media (max-width: 26rem) { .pestanas-planes { display: flex; } .pestana-plan { flex: 1; justify-content: center; padding: .45rem .6rem; } }

/* Tarjeta de Internet dedicado, distinta y sin precio */
.plan-dedicado {
  display: grid; gap: 1rem 1.5rem; align-items: center; margin-top: 1rem; padding: 1.5rem;
  border-radius: var(--radio-grande); background: var(--marino); color: #c9e6f5; position: relative; overflow: hidden;
}
@media (min-width: 48rem) { .plan-dedicado { grid-template-columns: auto 1fr auto; } }
.plan-dedicado::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--fibra); }
.plan-dedicado__icono { width: 3.25rem; height: 3.25rem; padding: .65rem; border-radius: 14px; background: rgba(45, 185, 233, .15); color: var(--cielo); }
.plan-dedicado__titulo { color: var(--blanco) !important; margin: 0 0 .35rem; font-size: 1.4rem !important; }
.plan-dedicado__titulo span { font-weight: 400; color: #c9e6f5; font-size: 1.05rem; }
.plan-dedicado p { margin: 0; }
.sitio .plan-dedicado__boton { white-space: nowrap; }

/* Franja de servicios: «Internet dedicado» lleva a su página */
.servicio__enlace { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.servicio__enlace:hover .servicio__texto { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Página Internet dedicado (D128) ---------- */
.dedicado { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 56rem) { .dedicado { grid-template-columns: 1.2fr 1fr; } }
.dedicado__intro { font-size: 1.15rem; max-width: 42rem; }
.dedicado__puntos { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .6rem; }
.dedicado__puntos li { display: flex; gap: .6rem; align-items: center; font-weight: 800; color: var(--marino); }
.dedicado__puntos .icono { color: var(--azul-marca); }
.dedicado__foto { width: 100%; height: auto; border-radius: var(--radio-grande); box-shadow: var(--sombra); }
.recuadro--formulario { background: var(--blanco); box-shadow: var(--sombra); }
.formulario-publico .campo input, .formulario-publico .campo select, .formulario-publico .campo textarea { border-color: var(--tinta-suave); border-radius: 10px; }
.consentimiento { gap: .6rem; }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Cobertura por tecnología (D127) ---------- */
.filtro-cobertura { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0 0 1rem; }
.filtro-cobertura[hidden] { display: none; }
.filtro-cobertura__etiqueta { font-weight: 800; }
.filtro-cobertura__botones { display: flex; flex-wrap: wrap; gap: .5rem; }
.filtro {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .45rem 1rem;
  border: 1px solid var(--borde); border-radius: 999px; background: var(--blanco); color: var(--marino); font: inherit; font-weight: 800; cursor: pointer;
}
.filtro[aria-pressed="true"] { background: var(--boton); color: var(--blanco); border-color: transparent; }
.leyenda-mapa { list-style: none; padding: 0; margin: .75rem 0 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; color: var(--tinta-suave); }
.leyenda-mapa li { display: inline-flex; align-items: center; gap: .45rem; }
.muestra { display: inline-block; width: 1.6rem; height: 1rem; border: 2px solid; border-radius: 3px; margin: 0; }
.muestra--fibra { border-color: #1577b0; background: rgba(21, 119, 176, .28); }
.muestra--inalambrico { border-color: #2db9e9; border-style: dotted; background: rgba(45, 185, 233, .28); }
.muestra--ambas { border-color: #2d2df0; background: rgba(45, 45, 240, .28); }
.muestra--expansion { border-color: var(--tinta-suave); border-style: dashed; background: transparent; }
.lista-localidades { list-style: none; padding: 0; }
.lista-localidades__item { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.lista-localidades__item .icono { color: var(--azul-marca); }
.lista-localidades__item[hidden] { display: none; }

/* ---------- Filtro de planes (D133) ---------- */
.selector-planes--pagina .pestanas-planes { margin: 0 0 1.5rem; padding: .35rem; box-shadow: var(--sombra); }
.selector-planes--pagina .pestana-plan { min-height: 48px; padding: .55rem 1.25rem; font-size: 1.02rem; }
.pestanas-planes { scroll-margin-top: calc(var(--alto-encabezado) + 1rem); }
.plan { scroll-margin-top: calc(var(--alto-encabezado) + 1rem); }
.selector-planes--pagina .grupo-planes { margin-top: 0; }
.grupo-planes--entrando { animation: entrar-planes .45s ease-out; }
@keyframes entrar-planes { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 40rem) {
  .selector-planes--pagina .pestanas-planes { display: flex; width: 100%; }
  .selector-planes--pagina .pestana-plan { flex: 1; justify-content: center; padding: .45rem .5rem; font-size: .92rem; text-align: center; }
  .selector-planes--pagina .pestana-plan .icono { display: none; }
}

/* ---------- Promociones (D134) ---------- */
.promos { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 22rem)); justify-content: center; }
.promo {
  position: relative; display: flex; flex-direction: column; gap: .5rem; overflow: hidden;
  padding: 1.6rem 1.4rem 1.4rem; text-align: center; align-items: center;
  background: var(--blanco); border: 1px solid var(--borde-suave); border-radius: var(--radio-grande); box-shadow: var(--sombra);
}
.promo::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--fibra); }
.promo__etiqueta { display: inline-flex; align-items: center; gap: .35rem; margin: 0; padding: .2rem .75rem; border-radius: 999px; background: var(--marino); color: var(--blanco); font-size: .85rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.promo__etiqueta .icono { color: var(--cielo); }
/* D188: etiqueta corta opcional de la promoción, junto a «Promoción». */
.promo__extra { margin-left: .35rem; padding: 0 .5rem; border-radius: 999px; background: var(--cielo); color: var(--marino); letter-spacing: 0; text-transform: none; }
.sitio .promo__nombre { margin: .25rem 0 0; font-size: 1.2rem; }
.promo__beneficio { margin: .1rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .1rem .45rem; }
.promo__monto { font-size: 3rem; font-weight: 800; line-height: 1; color: var(--marino); letter-spacing: -.02em; }
.promo__concepto { font-weight: 800; color: var(--marino); }
.promo__antes { flex-basis: 100%; color: var(--tinta-suave); font-size: .98rem; }
.promo__descripcion { margin: 0; max-width: 34ch; }
.promo__vigencia { display: inline-flex; align-items: center; gap: .4rem; margin: .1rem 0 0; padding: .25rem .75rem; border-radius: 999px; background: var(--fondo-claro); color: #0f4f78; font-weight: 800; font-size: .93rem; }
.promo__vigencia--ultimos { background: #fff4e0; color: #7a4300; }
.promo__vigencia--ultimos .icono { animation: brillo-suave 3s ease-in-out infinite; }
@keyframes brillo-suave { 50% { opacity: .55; } }
.promo__letra-chica { font-size: .88rem; color: var(--tinta-suave); border-top: 1px solid var(--borde-suave); padding-top: .65rem; margin-top: .25rem; width: 100%; }
.promo__letra-chica p { margin: .2rem 0; }
.promo__boton { margin-top: auto; width: 100%; }

/* Variantes de tarjeta (D133) */
.ficha--grande { padding: 1.6rem 1.5rem 1.5rem; }
.sitio .ficha--grande .ficha__titulo { font-size: 1.35rem; }
.ficha__grande { font-size: 1.6rem; font-weight: 800; }
.ficha__titulo--con-icono { display: flex; gap: .5rem; align-items: center; margin-top: 0 !important; }
.ficha__titulo--con-icono .icono { color: var(--azul); }
.sitio .boton--ancho { width: 100%; }
.ficha .icono--chico { color: var(--azul); }
.ficha--enlace { text-decoration: none; color: var(--tinta) !important; transition: transform .2s ease, box-shadow .2s ease; }
.ficha--enlace:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.ficha--enlace .ficha__titulo { font-weight: 800; color: var(--azul); font-size: 1.15rem; }
.lista-enlaces { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; max-width: 75ch; }
.lista-enlaces a { display: flex; gap: .6rem; align-items: center; padding: .8rem 1rem; border: 1px solid var(--borde-suave); border-radius: var(--radio-grande); background: var(--blanco); box-shadow: var(--sombra); font-weight: 800; text-decoration: none; min-height: 48px; }
.lista-enlaces a:hover { background: var(--fondo-claro); }
.pildoras { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.pildoras a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .45rem 1rem; border: 1px solid var(--azul); border-radius: 999px; font-weight: 800; text-decoration: none; background: var(--blanco); }
.pildoras a:hover { background: var(--fondo-claro); }
@media (prefers-reduced-motion: reduce) { .ficha--enlace { transition: none; } .ficha--enlace:hover { transform: none; } }
.ficha .boton .icono--chico { color: inherit; }

/* ---------- Solicitudes con folio (Fase 4) ---------- */
.formulario-publico { display: grid; gap: 1.1rem; }
.formulario-publico__rejilla { display: grid; gap: 1rem 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 44rem) { .formulario-publico__rejilla { grid-template-columns: 1fr 1fr; } .campo--ancho { grid-column: 1 / -1; } }
.formulario-publico .campo label, .formulario-publico legend { font-weight: 800; color: var(--marino); }
.formulario-publico .campo input, .formulario-publico .campo select, .formulario-publico .campo textarea { min-height: 48px; padding: .6rem .8rem; }
.formulario-publico .ayuda { margin: 0; color: var(--tinta-suave); font-size: .93rem; }
.campo--error input, .campo--error select, .campo--error textarea { border-color: var(--error) !important; border-width: 2px; }
.campo-opciones { border: 0; margin: 0; padding: 0; display: grid; gap: .45rem; }
.campo-opciones legend { padding: 0; margin-bottom: .35rem; }
.formulario-publico .campo-opciones .casilla { font-weight: 400; color: var(--tinta); align-items: center; min-height: 32px; }
.formulario-publico .campo-opciones .casilla input { margin-top: 0; }
.consentimiento { display: grid; padding: 1rem 1.1rem; border-radius: var(--radio-grande); background: var(--fondo-claro); border: 1px solid #cfe9f6; }
.consentimiento__aviso { margin: 0 0 .25rem; font-size: .93rem; color: var(--tinta-suave); white-space: pre-line; }
.consentimiento.campo--error { border-color: var(--error); }
.formulario-publico > .nota { margin: 0; font-size: .93rem; }
.formulario-publico .boton { justify-self: start; }
@media (max-width: 40rem) { .formulario-publico .boton { justify-self: stretch; } }
.solicitud-pagina { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 64rem) { .solicitud-pagina { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); } }
.solicitud-pagina__lado { display: grid; gap: 1rem; }
.lista-pasos-chica { margin: .25rem 0 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
/* Comprobante: se lee bien en pantalla y se imprime limpio en una hoja */
.comprobante { max-width: 44rem; }
.comprobante__marca { margin: 0; font-weight: 800; color: var(--tinta-suave); font-size: .93rem; text-transform: uppercase; letter-spacing: .05em; }
.sitio .comprobante__titulo { margin: .25rem 0 .75rem; font-size: 1.3rem; }
.comprobante__folio { display: grid; gap: .1rem; margin: 0 0 1rem; padding: 1rem 1.1rem; border-radius: var(--radio-grande); background: var(--marino); color: #c9e6f5; }
.comprobante__folio strong { color: var(--blanco); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); letter-spacing: .02em; overflow-wrap: anywhere; }
.comprobante__datos { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: 0 0 1rem; }
.comprobante__datos dt { font-weight: 800; color: var(--marino); }
.comprobante__datos dd { margin: 0; }
.comprobante__nota { font-size: .95rem; color: var(--tinta-suave); }
.comprobante__fecha { font-size: .95rem; color: #e6f8ff; }
.comprobante__url { font-size: .85rem; overflow-wrap: anywhere; }
.comprobante__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.estado-solicitud { display: inline-block; margin: 0 0 .5rem; padding: .25rem .8rem; border-radius: 999px; font-weight: 800; background: #e8f1fd; color: #0f4fa8; }
.estado-solicitud--resuelta, .estado-solicitud--cerrada { background: #e3f4ea; color: #17663a; }
.estado-solicitud--requiere_info { background: #fbeedb; color: #7d4707; }
.historial { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: .35rem; border-left: 2px solid var(--cielo); padding-left: .9rem; }
.historial__fecha { color: var(--tinta-suave); font-size: .93rem; margin-right: .35rem; }
@media print {
  .comprobante__acciones, .cabecera-pagina, .mantenimiento, .pie, .llamado { display: none !important; }
  .comprobante__folio { background: none; color: var(--tinta); border: 2px solid var(--tinta); }
  .comprobante__folio strong, .comprobante__fecha { color: var(--tinta); }
}
.historial__mensaje { margin: .2rem 0 .3rem; padding: .5rem .7rem; border-radius: 10px; background: var(--fondo-claro); font-size: .95rem; }

/* ---------- Avisos de mantenimiento (D89) ---------- */
.filtro-avisos { display: grid; gap: .4rem; margin: 0 0 1.5rem; max-width: 34rem; }
.filtro-avisos label { font-weight: 800; color: var(--marino); }
.filtro-avisos__fila { display: flex; flex-wrap: wrap; gap: .5rem; }
.filtro-avisos select { flex: 1 1 14rem; min-height: 48px; padding: .5rem .75rem; border: 1px solid var(--tinta-suave); border-radius: 10px; }
.aviso-tarjeta__estado { display: inline-block; margin: 0; padding: .15rem .7rem; border-radius: 999px; font-size: .88rem; font-weight: 800; align-self: flex-start; }
.aviso-tarjeta--en_curso .aviso-tarjeta__estado { background: #fbeedb; color: #7d4707; }
.aviso-tarjeta--proximo .aviso-tarjeta__estado { background: #e8f1fd; color: #0f4fa8; }
.aviso-tarjeta--terminado .aviso-tarjeta__estado { background: #edf0f3; color: #4a5b6b; }
.acciones-aviso { display: flex; flex-wrap: wrap; gap: .6rem; }
.dato-copiable { overflow-wrap: anywhere; user-select: all; }
.texto-legal h3 { margin: 1.5rem 0 .4rem; font-size: 1.15rem; } .texto-legal p, .texto-legal li { line-height: 1.6; }
.casilla--chica { font-size: .95rem; margin-top: .15rem; } .formulario-publico input:disabled { background: #eef2f5; color: var(--tinta-suave); }
.formulario-publico .campo .casilla--chica { font-weight: 400; color: var(--tinta); align-items: center; } .formulario-publico .campo .casilla--chica input { margin-top: 0; }

/* D170: «Ver PDF» y «Descargar» juntos; en celular, uno junto al otro y fáciles de tocar */
.acciones-pdf { display: inline-flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; }
.acciones-pdf .boton { min-height: 44px; }
@media (max-width: 40rem) { .acciones-pdf { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } .acciones-pdf .boton { width: 100%; padding-left: .5rem; padding-right: .5rem; } }
.documento-pdf .acciones-pdf { grid-column: 2; margin-top: .5rem; }
@media (max-width: 40rem) { .documento-pdf .acciones-pdf { grid-column: 1 / -1; } }
.documento-pdf .acciones-pdf .boton { grid-column: auto; justify-self: stretch; margin-top: 0; }

/* ---------- D176: consulta de folio compacta (Atención y quejas; en el Inicio se quitó, D278) ---------- */
.consulta-compacta {
  margin: 1.25rem 0 0; padding: 1rem 1.15rem; border-radius: 18px;
  background: var(--blanco); border: 1px solid #d3e0e8; box-shadow: 0 6px 22px rgba(11, 34, 53, .07);
}
.consulta-compacta__titulo { display: flex; gap: .5rem; align-items: center; margin: 0 0 .6rem; color: var(--marino); }
.consulta-compacta__titulo .icono { color: var(--azul-marca); flex: none; }
.consulta-compacta__campos { display: grid; gap: .75rem; }
.consulta-compacta .campo { display: grid; gap: .25rem; }
.consulta-compacta label { font-weight: 800; font-size: .92rem; }
.consulta-compacta input { min-height: 46px; padding: .55rem .75rem; border: 1px solid var(--tinta-suave); border-radius: 10px; width: 100%; }
.consulta-compacta .boton { min-height: 46px; display: inline-flex; gap: .4rem; align-items: center; justify-content: center; }
@media (min-width: 48rem) {
  .consulta-compacta { display: grid; grid-template-columns: minmax(14rem, 1fr) 2.2fr; gap: 1.25rem; align-items: end; }
  .consulta-compacta__titulo { margin: 0 0 .6rem; align-self: center; }
  .consulta-compacta__campos { grid-template-columns: 1.3fr 1fr auto; align-items: end; }
}
.bloque--consulta { padding-bottom: 0; }
.bloque--consulta .consulta-compacta { margin-top: 0; }
.mensaje-cliente { margin: .75rem 0 1rem; padding: .75rem .9rem; border-radius: 12px; background: var(--cielo-suave); border-left: 4px solid var(--azul-marca); }
.mensaje-cliente p { margin: 0; overflow-wrap: anywhere; }
.mensaje-cliente__titulo { display: flex; gap: .4rem; align-items: center; font-weight: 800; color: var(--marino); margin-bottom: .3rem !important; }
@media (max-width: 36rem) {
  .comprobante__datos { grid-template-columns: 1fr; gap: 0; }
  .comprobante__datos dt { margin-top: .6rem; }
}

/* ---------- D187: cifras del Inicio ---------- */
.cifras { padding: 0 0 2rem; }
.cifras__lista { list-style: none; margin: 0 auto; padding-top: 0; padding-bottom: 0; display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cifras__lista--1 { grid-template-columns: minmax(0, 22rem); justify-content: center; }
@media (min-width: 48rem) {
  .cifras__lista--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cifras__lista--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cifra-inicio {
  display: grid; justify-items: center; text-align: center; gap: .15rem; padding: 1.1rem .75rem;
  border-radius: 18px; background: linear-gradient(180deg, #f3fafe 0%, #ffffff 100%); border: 1px solid #d3e0e8;
}
/* Número grande (texto grande: el azul del logo cumple AA con 3:1). */
.cifra-inicio__numero { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); font-weight: 800; line-height: 1.05; color: #1577b0; letter-spacing: -.01em; }
.cifra-inicio__texto { color: var(--tinta-suave); font-weight: 700; font-size: .98rem; }

/* ---------- D189: carrusel del Inicio ---------- */
.carrusel { position: relative; margin: 1.5rem 0 1.75rem; border-radius: 22px; overflow: hidden; background: var(--marino); box-shadow: 0 10px 30px rgba(11, 34, 53, .12); }
.carrusel__pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; }
.carrusel--activo .carrusel__pista { scrollbar-width: none; }
.carrusel--activo .carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__banner { position: relative; flex: 0 0 100%; scroll-snap-align: start; min-height: 18rem; display: grid; color: var(--blanco); }
.carrusel__foto, .carrusel__foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.carrusel__foto img { object-fit: cover; }
/* Degradado para que el texto blanco siempre cumpla el contraste sobre cualquier foto. */
.carrusel__banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 34, 53, .92) 0%, rgba(11, 34, 53, .78) 45%, rgba(11, 34, 53, .15) 100%); }
.carrusel__texto { position: relative; z-index: 1; align-self: center; max-width: 36rem; padding: 2rem 2rem 4.9rem; display: grid; gap: .6rem; }
.sitio .carrusel__titulo { margin: 0; color: var(--blanco); font-size: clamp(1.4rem, 1rem + 1.8vw, 2.1rem); line-height: 1.15; }
.carrusel__descripcion { margin: 0; color: #e6f4fb; font-size: 1.05rem; }
.carrusel__promo { display: flex; gap: .45rem; align-items: flex-start; margin: 0; padding: .45rem .7rem; border-radius: 10px; background: rgba(255, 255, 255, .12); color: #e6f4fb; font-size: .93rem; }
.carrusel__promo a { color: var(--blanco); font-weight: 800; }
.carrusel__accion { margin: .25rem 0 0; }
.carrusel__controles { position: absolute; z-index: 2; left: 1.25rem; right: 1.25rem; bottom: .9rem; display: flex; align-items: center; gap: .5rem; }
.carrusel__boton {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); background: rgba(11, 34, 53, .55);
  color: var(--blanco); font-size: 1.35rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.carrusel__boton:hover { background: rgba(11, 34, 53, .85); }
.carrusel__boton[data-pausa] { font-size: .8rem; }
.carrusel__puntos { display: flex; gap: .1rem; flex-wrap: wrap; }
.carrusel__punto { width: 44px; height: 44px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; padding: 0; }
.carrusel__punto::before { content: ""; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--blanco); background: transparent; }
.carrusel__punto[aria-current="true"]::before { background: var(--blanco); width: 26px; border-radius: 999px; }
@media (max-width: 47.99rem) {
  /* D196: en celular, la foto completa arriba y sin oscurecer; debajo, el título, el texto, la vigencia y el botón. */
  .carrusel { border-radius: 16px; }
  .carrusel__banner { display: flex; flex-direction: column; min-height: 0; }
  .carrusel__banner::after { content: none; }
  .carrusel__foto { position: static; display: block; }
  .carrusel__foto img { position: static; display: block; width: 100%; height: auto; }
  .carrusel__texto { align-self: stretch; max-width: none; padding: 1.1rem 1.1rem 1.25rem; flex: 1; }
  /* Los controles van debajo, en su propia franja: nunca se enciman con el botón del banner. */
  .carrusel__controles { position: static; flex-wrap: wrap; justify-content: center; padding: .25rem .5rem .6rem; border-top: 1px solid rgba(255, 255, 255, .12); }
  .carrusel__puntos { justify-content: center; }
  .carrusel__punto { width: 26px; }
  .carrusel__controles { gap: .35rem; }
}
@media (prefers-reduced-motion: reduce) { .carrusel__pista { scroll-behavior: auto; } }

/* ---------- D190, D194: ventana emergente ---------- */
/* Computadora: al centro del espacio libre, con el fondo oscurecido. El encabezado (z-index 1000) y el aviso de
   mantenimiento quedan por encima del fondo; la ventana empieza debajo de ellos (--ventana-arriba lo calcula sitio.js). */
.ventana-fondo { position: fixed; inset: 0; z-index: 900; background: rgba(11, 34, 53, .62); opacity: 0; transition: opacity .3s ease; }
.ventana-fondo--visible { opacity: 1; }
.con-ventana .mantenimiento { position: relative; z-index: 960; }
.ventana {
  --ventana-arriba: var(--alto-encabezado);
  position: fixed; z-index: 950; left: 50%; top: calc(var(--ventana-arriba) + (100vh - var(--ventana-arriba)) / 2);
  width: min(520px, calc(100vw - 3rem)); max-height: calc(100vh - var(--ventana-arriba) - 2rem); overflow-y: auto;
  border-radius: 18px; background: var(--blanco); color: var(--tinta);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45); border: 1px solid #d3e0e8;
  opacity: 0; transform: translate(-50%, calc(-50% + 16px)); transition: opacity .3s ease, transform .3s ease;
}
.ventana--visible { opacity: 1; transform: translate(-50%, -50%); }
.ventana:focus { outline: none; }
.ventana:focus-visible { outline: 3px solid var(--cielo); outline-offset: 2px; }
.ventana__cerrar {
  position: absolute; top: .5rem; right: .5rem; z-index: 1; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: rgba(11, 34, 53, .75); color: var(--blanco); font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.ventana__cerrar:hover { background: var(--marino); }
.ventana__foto { display: block; width: 100%; height: 220px; max-height: 220px; object-fit: cover; }
.ventana__cuerpo { padding: 1.1rem 1.35rem 1.35rem; display: grid; gap: .6rem; }
.sitio .ventana__titulo { margin: 0; padding-right: 2.5rem; font-size: 1.4rem; color: var(--marino); }
.ventana__foto:not([hidden]) + .ventana__cuerpo .ventana__titulo { padding-right: 0; }
.ventana__texto { margin: 0; }
.ventana__promo { display: flex; gap: .45rem; align-items: flex-start; margin: 0; padding: .5rem .7rem; border-radius: 10px; background: var(--cielo-suave); font-size: .93rem; }
.ventana__accion { margin: .2rem 0 0; }
.ventana__previa { margin: 0; padding: .4rem 1rem; background: #fbeedb; color: #7d4707; font-weight: 800; font-size: .85rem; }
@media (max-width: 47.99rem) {
  /* Celular: tarjeta abajo, sin oscurecer; nunca más del 70 % de la pantalla y fácil de cerrar. */
  .ventana-fondo { display: none; }
  .ventana { left: .75rem; right: .75rem; top: auto; bottom: .75rem; width: auto; max-height: 70vh; transform: translateY(16px); }
  .ventana--visible { transform: none; }
  .ventana__foto { height: 9rem; max-height: 9rem; }
}
@media (prefers-reduced-motion: reduce) { .ventana, .ventana-fondo { transition: none; } }
/* Vista previa del panel («Así se verá»): una muestra simple de la página detrás. */
.vista-previa__encabezado { position: sticky; }
.vista-previa__menu { display: flex; gap: .8rem; margin-right: auto; }
.vista-previa__menu span { width: 4.5rem; height: .6rem; border-radius: 4px; background: #d3e0e8; }
@media (max-width: 47.99rem) { .vista-previa__menu { display: none; } }
.vista-previa__pagina { padding: 1.5rem 0 3rem; min-height: 100vh; }
.vista-previa__relleno { display: grid; gap: .6rem; margin: 1.5rem 0; }
.vista-previa__relleno span { display: block; height: 1rem; border-radius: 6px; background: #e3edf3; }
.vista-previa__relleno span:first-child { width: 40%; height: 1.6rem; }
.vista-previa__relleno span:last-child { width: 75%; }
@media print { .ventana, .carrusel__controles { display: none !important; } }
@media (max-width: 26rem) { .vista-previa .logotipo__texto { display: none; } }

/* D196: botón que lleva a otro sitio: ícono pequeño de «sale del sitio». */
.boton__externo { display: inline-flex; margin-left: .35rem; }
.boton__externo .icono { width: .95em; height: .95em; }


/* ===== Entrega 3: páginas por bloques, galería, preguntas frecuentes y noticias (D197 a D200) ===== */
.bloques-pagina { display: flex; flex-direction: column; gap: 2.5rem; padding-block: 1rem 3rem; }
.bloques-inicio { padding-block: 2.5rem 1rem; }
.bloques-inicio .bloques-pagina { padding-block: 0; }
.bloque-contenido { margin: 0; min-width: 0; }
.bloque-contenido > .titulo-seccion { margin-bottom: 1rem; }
.texto-bloque { max-width: 75ch; }
.texto-bloque > :first-child { margin-top: 0; }
.texto-bloque h3 { margin: 1.6rem 0 .5rem; font-size: 1.2rem; color: var(--marino); }
.texto-bloque ul, .texto-bloque ol { padding-left: 1.4rem; }
.texto-bloque li { margin-bottom: .3rem; }
.bloque-contenido--imagen figcaption, .galeria__pie { margin-top: .5rem; color: var(--tinta-suave); font-size: .95rem; }
.bloque-contenido__foto { display: block; width: 100%; max-width: 72rem; height: auto; border-radius: var(--radio-grande); }
.bloque-contenido--video { max-width: 48rem; }
.bloque-contenido__nota { margin: .6rem 0 0; color: var(--tinta-suave); }
.bloque-contenido--boton { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Preguntas que se abren y se cierran */
.pregunta { border: 1px solid var(--borde-suave); border-radius: var(--radio); background: var(--blanco); margin-bottom: .6rem; }
.pregunta > summary {
  display: flex; gap: .75rem; align-items: center; justify-content: space-between;
  padding: .9rem 1rem; min-height: 44px; cursor: pointer; list-style: none;
  font-weight: 700; color: var(--marino);
}
.pregunta > summary::-webkit-details-marker { display: none; }
.pregunta > summary::after {
  content: ""; flex: none; width: .6rem; height: .6rem; margin-right: .2rem;
  border-right: 2px solid var(--azul); border-bottom: 2px solid var(--azul); transform: rotate(45deg); transition: transform .2s;
}
.pregunta[open] > summary::after { transform: rotate(-135deg); }
.pregunta > summary:hover { background: var(--cielo-suave); }
.pregunta > summary:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.pregunta__respuesta { padding: 0 1rem 1rem; }
.pregunta__respuesta > :first-child { margin-top: 0; }
.pregunta__respuesta > :last-child { margin-bottom: 0; }
.bloque-preguntas { margin-bottom: 2.25rem; scroll-margin-top: 6rem; }
.temas-preguntas ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.temas-preguntas a {
  display: inline-flex; align-items: center; min-height: 44px; padding: .4rem 1rem;
  border: 1px solid var(--borde); border-radius: 999px; background: var(--blanco); font-weight: 600; text-decoration: none;
}
.temas-preguntas a:hover { background: var(--cielo-suave); }

/* Galería: álbumes y cuadrícula de fotos */
.albumes, .galeria, .noticias { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.albumes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.galeria { grid-template-columns: repeat(auto-fill, minmax(min(46%, 14rem), 1fr)); gap: .9rem; }
.album-tarjeta__enlace {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; text-decoration: none; color: var(--tinta);
  border: 1px solid var(--borde-suave); border-radius: var(--radio-grande); background: var(--blanco); box-shadow: var(--sombra);
}
.album-tarjeta__foto { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.album-tarjeta__texto { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1rem 1rem; }
.album-tarjeta__texto strong { color: var(--azul); font-size: 1.1rem; }
.album-tarjeta__texto span { color: var(--tinta-suave); font-size: .95rem; }
.album-tarjeta__enlace:hover strong { text-decoration: underline; }
.galeria__foto { margin: 0; min-width: 0; }
.galeria__foto > a { display: block; border-radius: var(--radio); overflow: hidden; }
.galeria__foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .25s; }
.galeria__foto > a:hover img { transform: scale(1.03); }
.galeria__foto > a:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }

/* Visor de fotos (sitio.js): fondo oscuro, flechas grandes, Esc para cerrar. */
.visor { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(6, 18, 29, .94); color: var(--blanco); }
.visor::backdrop { background: rgba(6, 18, 29, .94); }
.visor__marco { display: grid; grid-template-rows: auto 1fr auto; height: 100%; }
.visor__barra { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem .75rem; }
.visor__contador { font-weight: 700; }
.visor__escena { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 3.75rem; }
.visor__foto { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.visor__pie { margin: 0; padding: .75rem 1rem 1.25rem; text-align: center; min-height: 3rem; }
.visor__boton {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border: 2px solid rgba(255, 255, 255, .6); border-radius: 50%; background: rgba(11, 34, 53, .7); color: var(--blanco); cursor: pointer;
}
.visor__boton:hover { background: var(--azul); border-color: var(--blanco); }
.visor__boton:focus-visible { outline: 3px solid var(--cielo); outline-offset: 2px; }
.visor__boton .icono { width: 1.4rem; height: 1.4rem; }
.visor__anterior, .visor__siguiente { position: absolute; top: 50%; transform: translateY(-50%); }
.visor__anterior { left: .5rem; }
.visor__siguiente { right: .5rem; }
@media (max-width: 47.99rem) {
  .visor__escena { padding: 0 .5rem; }
  .visor__anterior, .visor__siguiente { top: auto; bottom: .5rem; transform: none; }
}

/* Noticias */
.noticias { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); margin-top: 1.5rem; }
.noticia-tarjeta > article {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border: 1px solid var(--borde-suave); border-radius: var(--radio-grande); background: var(--blanco); box-shadow: var(--sombra);
}
.noticia-tarjeta__foto { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.noticia-tarjeta__cuerpo { padding: 1rem 1.15rem 1.2rem; }
.noticia-tarjeta__cuerpo > p { margin: .4rem 0 0; }
.noticia-tarjeta__fecha, .noticia__fecha { margin: 0; color: var(--tinta-suave); font-size: .92rem; font-weight: 600; }
.noticia-tarjeta__titulo { margin: .3rem 0 0; font-size: 1.2rem; line-height: 1.3; }
.noticia-tarjeta__titulo a { text-decoration: none; }
.noticia-tarjeta__titulo a:hover { text-decoration: underline; }
.noticia__foto { display: block; width: 100%; height: auto; margin: 1rem 0; border-radius: var(--radio-grande); }
.noticia__resumen { font-size: 1.15rem; font-weight: 600; color: var(--marino); }
.paginacion-publica { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: center; margin-top: 2rem; }
/* El título del video va en blanco sobre la miniatura (le gana a «.sitio a»). */
.sitio .video__portada, .sitio .video__portada:hover { color: var(--blanco); }

/* D287: fecha con calendario en los formularios (el mismo del panel; dentro del formulario, empuja lo de abajo). */
.campo-dia__fila { display: flex; gap: .5rem; align-items: stretch; }
.campo-dia__fila input { flex: 1 1 auto; min-width: 0; }
.boton-calendario { display: inline-flex; align-items: center; gap: .35rem; flex: none; min-height: 2.75rem; padding: .25rem .85rem; border: 1px solid var(--azul); border-radius: var(--radio); background: var(--blanco); color: var(--azul); font: inherit; font-weight: 700; cursor: pointer; }
.boton-calendario[hidden] { display: none; }
.boton-calendario:hover { background: var(--cielo-suave); color: var(--azul-fuerte); }
.calendario { margin-top: .5rem; max-width: 22rem; border: 1px solid var(--borde); border-radius: 12px; padding: .6rem; background: var(--blanco); }
.calendario[hidden] { display: none; }
.calendario__cabeza { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.calendario__mes { margin: 0; font-weight: 800; color: var(--marino); text-transform: capitalize; }
.calendario__flecha { min-width: 2.75rem; min-height: 2.75rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--blanco); color: var(--azul); font-size: 1.2rem; cursor: pointer; }
.calendario__tabla { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: .35rem; }
.calendario__tabla th { font-size: .82rem; color: var(--tinta-suave); padding: .2rem 0; }
.calendario__tabla abbr { text-decoration: none; }
.calendario__tabla td { padding: 2px; text-align: center; }
.calendario__dia { width: 100%; min-height: 2.6rem; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--tinta); font: inherit; cursor: pointer; }
.calendario__dia:hover { background: var(--cielo-suave); }
.calendario__dia--hoy { border-color: var(--azul-marca); font-weight: 800; }
.calendario__dia[aria-pressed="true"] { background: var(--azul); color: var(--blanco); font-weight: 800; }
.calendario__dia:disabled { color: #aab6bf; cursor: not-allowed; background: none; text-decoration: line-through; }
.calendario .ayuda { font-size: .82rem; margin: .35rem 0 0; }
/* ---------- D279: publicar solo lo completo ---------- */
.en-actualizacion__datos { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; }
.en-actualizacion__datos li { display: flex; gap: .55rem; align-items: flex-start; }
.en-actualizacion__datos .icono { color: var(--azul-marca); flex: none; margin-top: .15rem; }
/* Solo el personal en «Ver todo» ve estas marcas: lo que el público no ve. */
mark.incompleto { background: #fde2e1; color: #8a1c13; outline: 2px solid #d93025; border-radius: 3px; padding: 0 .15em; }
.incompleto-caja { outline: 3px dashed #d93025; outline-offset: 4px; border-radius: 12px; background: #fff5f5; }
/* D279: en «Ver todo», lo que lleva a una sección oculta se ve, marcado en rojo. */
[data-oculto-publico] { outline: 2px dashed #d93025; outline-offset: 2px; }
[data-oculto-publico]::after { content: "Oculto al público"; display: inline-block; margin-left: .4em; padding: 0 .35em; border-radius: 4px; background: #fde2e1; color: #8a1c13; font-size: .72rem; font-weight: 800; line-height: 1.5; vertical-align: middle; white-space: nowrap; }
.incompleto-caja__razon { display: block; margin: 0 0 .4rem; color: #8a1c13; font-weight: 800; font-size: .9rem; }
/* D314: pegada abajo pero dentro de la página (al final no tapa nada) y se encoge con un toque. */
.vista-personal {
  position: sticky; bottom: .75rem; z-index: 60; width: fit-content; max-width: min(36rem, calc(100vw - 2rem)); margin: 1rem;
  padding: .6rem .8rem; border-radius: 12px; background: var(--marino); color: #fff; box-shadow: 0 8px 28px rgba(0, 0, 0, .3); font-size: .9rem;
}
.vista-personal--todo { background: #8a1c13; }
.vista-personal a { color: #fff; }
.vista-personal__caja > summary { cursor: pointer; }
.vista-personal__caja:not([open]) .vista-personal__encoger { display: none; }
.vista-personal__encoger { font-weight: 400; opacity: .85; }
.vista-personal__modo { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: .35rem 0 0; align-items: center; }
.vista-personal__modo a[aria-current] { font-weight: 800; text-decoration-thickness: 3px; }
.vista-personal__detalle { margin-top: .5rem; max-height: 40vh; overflow: auto; }
.vista-personal__detalle ul { margin: .4rem 0; padding-left: 1.2rem; }
@media print { .vista-personal { display: none; } }

/* ---------- D321: Inicio con más aire y mejor en celular ----------
   Un solo hueco a los lados (--hueco-inicio) para todo el Inicio, más espacio entre secciones y
   alrededor de los textos. El encabezado (botones «Folio» y de llamada) no cambia. */
.inicio { --hueco-inicio: clamp(1.25rem, 4vw, 2rem); }
.inicio .envoltura { padding-left: var(--hueco-inicio); padding-right: var(--hueco-inicio); }
.inicio .banda { padding: clamp(3rem, 2.25rem + 3vw, 4.75rem) 0; }
.inicio .titulo-seccion { margin-bottom: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.inicio .banda__texto { margin: -.5rem 0 1.5rem; max-width: 60ch; }
.inicio .banda__accion { margin-top: 2.25rem; }
.inicio .portada__antetitulo { margin-bottom: 1.1rem; }
.inicio .portada__titulo { margin-bottom: 1.25rem; }
.inicio .portada__texto { line-height: 1.55; }
.inicio .accesos { gap: 1rem; margin-bottom: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); }
/* Con tres tarjetas (la de cobertura se oculta mientras no haya localidades, D279), tres columnas y sin hueco */
@media (min-width: 36rem) { .inicio .accesos:not(:has(> .acceso:nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.inicio .servicio__circulo { flex: none; }
.inicio .servicios-franja { padding-bottom: clamp(2.75rem, 2rem + 3vw, 4rem); }
.inicio .pasos-fibra { margin-top: 0; }
.inicio .razones { margin-top: 0; gap: 1.1rem; }
.inicio .localidades { margin-top: 0; }
.inicio .informacion-destacada { gap: 2.25rem; }
.inicio .informacion-destacada p { line-height: 1.6; }
.inicio .accesos-directos { gap: .75rem; }

/* Celular y tableta: la escena va dentro de la portada, debajo del texto; termina antes de las tarjetas */
@media (max-width: 48rem) {
  .inicio .portada__contenido { padding-bottom: 4.5rem; }
  .inicio .portada__texto { margin-bottom: 0; }
  .inicio .portada__botones { margin-top: 1.75rem; }
}

/* Celular: las tarjetas de acceso, compactas en una fila (en dos si son cuatro); la descripción solo para lectores de pantalla */
@media (max-width: 35.99rem) {
  .inicio .accesos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-top: -3rem; }
  .inicio .accesos:has(> .acceso:nth-child(4)) { grid-template-columns: 1fr 1fr; }
  .inicio .acceso {
    grid-template-columns: 1fr; grid-template-rows: auto auto; justify-items: center; text-align: center;
    row-gap: .5rem; padding: .85rem .45rem .95rem; min-height: 0; border-radius: 14px;
  }
  .inicio .acceso__icono { grid-row: auto; width: 2.3rem; height: 2.3rem; padding: .45rem; border-radius: 10px; }
  .inicio .acceso__titulo { font-size: .9rem; line-height: 1.2; }
  .inicio .acceso__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Celular y tableta: los cuatro servicios en 2 × 2, con letra normal e íconos más chicos */
@media (max-width: 48rem) {
  .inicio .servicios-franja__lista { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1rem; justify-content: stretch; }
  .inicio .servicio, .inicio .servicio__enlace { gap: .6rem; align-items: center; }
  .inicio .servicio__circulo { width: 2.25rem; height: 2.25rem; box-shadow: 0 0 0 3px rgba(45, 185, 233, .16); }
  .inicio .servicio__icono { width: 1.15rem; height: 1.15rem; }
  .inicio .servicio__texto { font-style: normal; text-transform: none; letter-spacing: 0; font-size: .95rem; line-height: 1.25; }
}