/* =========================================================================
   LAS FUENTES, SERVIDAS POR NOSOTROS

   Antes venían de fonts.googleapis.com con una hoja de estilos que BLOQUEA el
   renderizado. Tres costes que se suman antes de que se vea la primera letra:
   resolver un dominio nuevo, negociar TLS con él, y esperar ese CSS. PageSpeed
   lo midió: 910 ms.

   Y era el problema principal, no un detalle. En un móvil de 412 px el
   elemento más grande de la primera pantalla es TEXTO -el h1 y el párrafo de
   debajo-, no una imagen. El LCP de un texto se registra cuando el texto se
   pinta con SU fuente:

       FCP 2,8 s   el texto aparece con la fuente de reserva
       LCP 8,4 s   llega la fuente de Google y el texto se REPINTA

   Ocho segundos y medio, y de ahí la nota de 70 en móvil con un Total
   Blocking Time de 0 ms y un CLS de 0. Todo el déficit era esto.

   Los ficheros salen de `herramientas/fuentes-web.py`, subconjuntados al
   latino completo: 87,5 KB los cinco, un 83 % menos que los TTF.

   `font-display: swap` se mantiene a propósito: si la fuente tarda, se lee el
   texto con la de reserva en vez de quedarse en blanco. Ahora el cambio se
   nota mucho menos porque los dos ficheros de la primera pantalla van
   precargados desde el HTML.
   ========================================================================= */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/archivo-black-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/barlow-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/barlow-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/barlow-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/barlow-700.woff2') format('woff2');
}

/* =========================================================================
   Multiservicios José Bolívar — sistema visual

   Registro: oscuro de extremo a extremo, petróleo y cian hielo, con brasa
   para las llamadas a la acción.

   Jerarquía tipográfica deliberada:
   · Archivo Black SOLO en el titular de portada, el rótulo y los ganchos de
     promoción. Usada con cuentagotas es lo que la hace pegar.
   · Barlow en negrita para los titulares de sección, en caja baja. En
     versales todo el rato la página gritaba.
   · Monoespaciada del sistema en etiquetas y números, como la lectura de un
     manómetro. Cero coste de descarga.

   La firma sigue siendo la rejilla de lamas: el logotipo, la persiana que se
   abre en la portada y la esquina de las tarjetas de consejo. Los cortes de
   sección desaparecieron: con toda la página oscura ya no separaban nada.
   ========================================================================= */

:root {
  /* Superficies, de la más honda a la más cercana.
     Azul marino casi negro, no petróleo: el verde de la mezcla anterior
     aclaraba el fondo y le quitaba profundidad. */
  --sup-0: #050E1B;   /* fondo de página */
  --sup-1: #081525;   /* sección alterna */
  --sup-2: #0C1D2F;   /* tarjeta */
  /* Azul del carrusel, medido sobre las propias imágenes de servicio: es
     exactamente el tono dominante de sus fondos. Cualquier tarjeta se
     enciende con él al pasar el cursor, así todo el sitio habla el mismo
     idioma que la portada. */
  --azul-carrusel: #072950;
  --sup-3: var(--azul-carrusel);

  /* Trama de puntos: la única textura de fondo de la página. La usan la
     portada y la esquina de las tarjetas de consejo. En variable para que no
     vuelvan a aparecer dos patrones distintos compitiendo. */
  --trama-puntos: radial-gradient(circle, rgba(69, 211, 242, .3) 1.4px, transparent 1.5px);
  --trama-paso: 18px 18px;

  /* El resplandor frío que traen las imágenes. En variable porque lo usan
     las tarjetas de servicio, las de consejo y las de promoción. */
  --resplandor: radial-gradient(ellipse 95% 65% at 50% 0%, rgba(69, 211, 242, .09), transparent 72%);
  --resplandor-fuerte: radial-gradient(ellipse 95% 65% at 50% 0%, rgba(69, 211, 242, .18), transparent 72%);
  --resplandor-brasa: radial-gradient(ellipse 95% 65% at 50% 0%, rgba(255, 122, 61, .15), transparent 72%);

  /* El mismo fondo en componentes para poder darle transparencia.
     Estaba repetido a mano en ocho sitios y cualquier cambio de color
     dejaba la mitad de la página desincronizada. */
  --sup-0-rgb: 5, 14, 27;

  --borde:   rgba(255, 255, 255, .10);
  --borde-2: rgba(255, 255, 255, .17);

  /* Frío */
  --petroleo: #0D2136;
  --acero:    #12556E;
  --hielo:    #45D3F2;
  --hielo-2:  #8AE6FA;

  /* Calor */
  --brasa:    #F2591F;
  --brasa-2:  #FF7A3D;

  /* La brasa que LLEVA TEXTO encima.
     #F2591F con texto blanco da 3,37:1 y AA pide 4,5 para lo que no es letra
     grande. Estas dos son la misma brasa más oscura: 4,99 la primera y 5,70 la
     del hover. Sobre el fondo del sitio siguen dando 3,88, por encima del 3:1
     que necesita un botón para distinguirse de lo que lo rodea.

     --brasa a secas se queda para bordes, contornos de foco y los iconos que
     se encienden al pasar el cursor: ahí el mínimo es 3:1 y lo cumple. Cambiar
     --brasa entero habría apagado el acento de toda la página para arreglar
     tres sitios.

     El hover va más OSCURO y no más claro, que es lo habitual: más claro no
     hay ningún naranja que llegue a 4,5. */
  --brasa-solida:   #C24719;
  --brasa-solida-2: #B34114;

  /* Texto */
  --titulo: #FFFFFF;
  --txt:    #C2D8E3;
  --txt-2:  #8BA9B8;
  /* El gris más apagado. Era #62808F y sobre las tarjetas (--sup-2) daba
     4,06:1, por debajo del 4,5 de AA, con texto de verdad encima: la
     vigencia y la letra pequeña de las promociones. Este da 4,77 ahí,
     5,42 sobre el fondo de la página, y sigue siendo claramente el más
     apagado de los tres. */
  --txt-3:  #6E8C9A;


  /* Estados */
  --wa:        #25D366;
  --wa-oscuro: #128C4A;
  --verde:     #35C77A;
  --rojo:      #FF6B5E;

  /* Espaciado */
  --e1: .25rem; --e2: .5rem;  --e3: .75rem; --e4: 1rem;
  --e5: 1.5rem; --e6: 2rem;   --e7: 3rem;   --e8: 4.5rem; --e9: 7rem;

  /* Formas */
  --r-s: 6px; --r-m: 12px; --r-l: 18px; --r-xl: 26px;

  /* Sombras: en oscuro casi no se ven, así que la profundidad la dan los
     bordes y el brillo, no la sombra. Se reservan para lo que flota. */
  --s-m: 0 8px 20px rgba(0, 0, 0, .35);
  --s-l: 0 18px 46px rgba(0, 0, 0, .5);
  --s-brasa: 0 8px 22px rgba(242, 89, 31, .38);

  --ancho: 1340px;
  --t: 200ms cubic-bezier(.22, .61, .36, 1);

  --f-display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --f-texto: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;

  --barra-alto: 78px;

  /* Botón de contorno: cada contenedor puede redefinir esto */
  --lin-txt: #fff;
  --lin-bor: var(--borde-2);
  --lin-bg-h: rgba(255, 255, 255, .1);
  --lin-txt-h: #fff;
  --lin-bor-h: #fff;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--barra-alto) + 14px);
  -webkit-text-size-adjust: 100%;
  background: var(--sup-0);
}

body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--txt);
  background: var(--sup-0);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  color: var(--titulo);
  margin: 0 0 var(--e4);
  text-wrap: balance;
  /* En titulares nunca se parte una palabra por la mitad */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* El único sitio con la display en versales */
h1 {
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 4.3vw, 3.5rem);
  line-height: .98;
  letter-spacing: -.025em;
}

h2 {
  font-family: var(--f-texto);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.3vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -.015em;
}

h3 {
  font-family: var(--f-texto);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  line-height: 1.2;
  letter-spacing: -.01em;
}

h4 { font-family: var(--f-texto); font-size: 1rem; font-weight: 700; margin-bottom: var(--e3); }

p { margin: 0 0 var(--e4); }
p:last-child { margin-bottom: 0; }
a { color: var(--hielo); text-underline-offset: 3px; }
a:hover { color: var(--hielo-2); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 var(--e4); padding-left: 1.3rem; }
li { margin-bottom: var(--e2); }
li:last-child { margin-bottom: 0; }
strong { color: #E4F1F7; }

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

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--brasa-solida); color: #fff; padding: var(--e3) var(--e5);
}
.saltar:focus { left: 0; }

/* ---------- Estructura ---------- */
.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--e5); }
.seccion { padding-block: clamp(3.5rem, 7vw, var(--e9)); position: relative; }
.seccion-alt { background: var(--sup-1); }

.etiqueta {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-family: var(--f-mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--hielo); margin: 0 0 var(--e4);
}

.encabezado { max-width: 46rem; margin-bottom: var(--e7); }
.encabezado.centro { margin-inline: auto; text-align: center; }
.entradilla { font-size: clamp(1.05rem, 1.5vw, 1.15rem); color: var(--txt-2); max-width: 42rem; }
.encabezado.centro .entradilla { margin-inline: auto; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  font-family: var(--f-texto); font-size: 1rem; font-weight: 700; line-height: 1;
  padding: 1.05rem 1.7rem; min-height: 54px;
  border: 2px solid transparent; border-radius: var(--r-s);
  text-decoration: none; cursor: pointer; text-align: center; white-space: nowrap;
  transition: transform var(--t), box-shadow var(--t), background-color var(--t), color var(--t), border-color var(--t);
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0); }

.boton-brasa { background: var(--brasa-solida); color: #fff; box-shadow: var(--s-brasa); }
.boton-brasa:hover { background: var(--brasa-solida-2); color: #fff; }

.boton-wa { background: var(--wa); color: #04301A; box-shadow: 0 8px 20px rgba(37,211,102,.28); }
.boton-wa:hover { background: #1FBE5C; color: #04301A; }

.boton-linea {
  background: transparent;
  color: var(--lin-txt); border-color: var(--lin-bor);
}
.boton-linea:hover { background: var(--lin-bg-h); color: var(--lin-txt-h); border-color: var(--lin-bor-h); }

.boton-mini { padding: .65rem 1.15rem; min-height: 44px; font-size: .9rem; }
.boton-ancho { width: 100%; }
.botones { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }

/* ---------- Barra ---------- */
.barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background-color var(--t), border-color var(--t), backdrop-filter var(--t);
}
.barra[data-solida='true'] {
  background: rgba(var(--sup-0-rgb), .9);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--borde);
}
.barra-in { display: flex; align-items: center; gap: var(--e4); min-height: var(--barra-alto); }

/* La marca es el logotipo entero, imagen incluida el nombre y el lema.
   Se escala por la ALTURA y no por el ancho: lo que fija su sitio es lo alto
   que puede ser dentro de la barra (78 px), y el ancho sale de ahí.
   A 58 px de alto ocupa 216, casi lo mismo que ocupaban el icono y el nombre
   escritos que había antes, así que el menú no se mueve. */
.marca { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.marca picture { display: block; }
.marca-logo { height: 58px; width: auto; display: block; }

/* En el móvil baja a 44: el lema se sigue distinguiendo y deja sitio al
   botón de presupuesto, que es lo que de verdad tiene que caber. */
@media (max-width: 700px) {
  .marca-logo { height: 44px; }
}

/* El menú y las acciones se agrupan a la derecha: con space-between el primer
   enlace quedaba pegado al rótulo y se leían como una sola cosa. */
.menu {
  display: flex; align-items: center;
  gap: clamp(.9rem, 1.6vw, 1.65rem);
  margin-inline-start: auto;
  padding-inline-start: clamp(1rem, 3vw, 2.5rem);
}
.menu a {
  position: relative; padding-block: 7px;
  font-size: .95rem; font-weight: 500; color: var(--txt);
  text-decoration: none; white-space: nowrap;
  transition: color var(--t);
}
.menu a:hover { color: #fff; }
/* Subrayado que crece de izquierda a derecha al pasar por encima */
.menu a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 1px; background: var(--hielo);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--t);
}
.menu a:hover::after, .menu a:focus-visible::after { transform: scaleX(1); }

.barra-acc { display: flex; align-items: center; gap: var(--e4); margin-inline-start: clamp(1rem, 2.5vw, 2rem); }
.tel-barra {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-family: var(--f-texto); font-weight: 700; font-size: 1.05rem;
  color: #fff; text-decoration: none; white-space: nowrap;
}
.tel-barra svg { color: var(--hielo); }

.boton-menu {
  display: none; width: 46px; height: 46px; cursor: pointer;
  background: rgba(255,255,255,.08); border: 1px solid var(--borde-2);
  border-radius: var(--r-s); color: #fff; place-items: center;
}

/* Cajón móvil */
.cajon { position: fixed; inset: 0; z-index: 150; background: rgba(var(--sup-0-rgb), .78); opacity: 0; visibility: hidden; transition: opacity var(--t), visibility var(--t); }
.cajon[data-abierto='true'] { opacity: 1; visibility: visible; }
.cajon-panel {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(340px, 88vw);
  background: var(--sup-1); padding: var(--e5);
  display: flex; flex-direction: column; gap: var(--e1);
  transform: translateX(100%); transition: transform var(--t); overflow-y: auto;
  border-left: 1px solid var(--borde);
}
.cajon[data-abierto='true'] .cajon-panel { transform: translateX(0); }
.cajon-cerrar {
  align-self: flex-end; width: 44px; height: 44px; cursor: pointer; margin-bottom: var(--e4);
  background: rgba(255,255,255,.08); border: 1px solid var(--borde-2);
  border-radius: var(--r-s); color: #fff;
}
.cajon-enlace {
  padding: var(--e3) 0; font-weight: 700; font-size: 1.1rem;
  color: #fff; text-decoration: none; border-bottom: 1px solid var(--borde);
}
.cajon-enlace:hover { color: var(--hielo); }
.cajon-pie { margin-top: var(--e6); display: grid; gap: var(--e3); }

/* =========================================================================
   PORTADA
   ========================================================================= */
.portada {
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: calc(var(--barra-alto) + clamp(2rem, 5vw, 3.5rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
/* Atmósfera: resplandor frío arriba a la derecha y trama de puntos a la
   izquierda, el mismo lenguaje que traen las imágenes de servicio. */
.portada::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 55% 60% at 74% 22%, rgba(69,211,242,.16), transparent 68%),
    radial-gradient(ellipse 45% 50% at 6% 88%, rgba(18,85,110,.30), transparent 70%);
}
.portada::after {
  content: ''; position: absolute; z-index: -1;
  left: 0; top: 12%; width: 220px; height: 240px;
  background-image: var(--trama-puntos);
  background-size: var(--trama-paso);
  -webkit-mask-image: linear-gradient(115deg, #000, transparent 72%);
  mask-image: linear-gradient(115deg, #000, transparent 72%);
  pointer-events: none;
}

.portada-in {
  position: relative; display: grid;
  grid-template-columns: 1fr 1.06fr;
  gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
}
.portada-texto { max-width: 34rem; }
.portada h1 { margin-bottom: var(--e5); }
.portada h1 em { font-style: normal; color: var(--hielo); }
.portada-bajada { font-size: clamp(1.05rem, 1.5vw, 1.15rem); color: var(--txt-2); margin-bottom: var(--e4); }
.portada-bajada:last-of-type { margin-bottom: var(--e6); }

.chip-vivo {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-family: var(--f-mono); font-size: .62rem; font-weight: 700;
  /* El espaciado entre letras era lo que partía la frase en dos: con .16em,
     67 caracteres en monoespaciada no caben en el ancho del titular. */
  letter-spacing: .07em; text-transform: uppercase;
  color: #fff; background: rgba(69,211,242,.1);
  border: 1px solid rgba(69,211,242,.3); border-radius: 999px;
  padding: .4rem .9rem .4rem .6rem; margin-bottom: var(--e5);
  white-space: nowrap;
}
/* Por debajo de 540 px no cabe en una línea sin dejar la letra ilegible, así
   que ahí se deja partir. Una frase en dos líneas se lee; a 7 px, no. */
@media (max-width: 540px) {
  .chip-vivo {
    white-space: normal; font-size: .58rem; letter-spacing: .05em;
    line-height: 1.5;
  }
}
.punto {
  width: 8px; height: 8px; border-radius: 50%; background: var(--hielo); flex-shrink: 0;
  animation: latido 2.4s infinite;
}
@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(69,211,242,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(69,211,242,0); }
  100% { box-shadow: 0 0 0 0 rgba(69,211,242,0); }
}

/* Sellos de confianza: icono en círculo y etiqueta a dos líneas */
.portada-pie {
  display: flex; flex-wrap: wrap; gap: var(--e5) var(--e6);
  margin-top: var(--e7); padding-top: var(--e5);
  border-top: 1px solid var(--borde);
}
.sello { display: flex; align-items: center; gap: var(--e3); }
.sello-icono {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(69,211,242,.12); color: var(--hielo);
  border: 1px solid rgba(69,211,242,.28);
}
.sello-txt { display: flex; flex-direction: column; line-height: 1.25; font-size: .9rem; }
.sello-txt b { color: #fff; font-weight: 700; }
.sello-txt span { color: var(--txt-2); }

/* Persiana: las lamas se abren al cargar, como la rejilla de un split */
.persiana { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 2; pointer-events: none; display: flex; flex-direction: column; }
.persiana span { flex: 1; background: var(--sup-0); transform-origin: center bottom; }
.persiana-anima span { animation: abrir .85s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes abrir { to { transform: scaleY(0); } }

/* =========================================================================
   CARRUSEL DE OFICIOS
   Las imágenes ya traen el número, el nombre y el subtítulo incrustados,
   así que aquí NO se superpone texto: solo se añade la llamada a la acción
   y los controles, colocados donde no tapan nada de la composición.
   ========================================================================= */
.carrusel { position: relative; }
.carrusel-marco {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); aspect-ratio: 4 / 3;
  border: 1px solid rgba(69,211,242,.2);
  box-shadow: var(--s-l);
  background: var(--petroleo);
}
.diapo {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  transition: opacity .7s ease;
  text-decoration: none; display: block;
}
.diapo[data-activa='true'] { opacity: 1; pointer-events: auto; }
.diapo img { width: 100%; height: 100%; object-fit: cover; }

/* "Ver servicio" va arriba a la izquierda: en las seis imágenes esa zona
   está vacía y no pisa ni el nombre ni la insignia. */
.diapo-ir {
  position: absolute; top: var(--e5); left: var(--e5);
  display: inline-flex; align-items: center; gap: var(--e2);
  font-size: .88rem; font-weight: 700; color: #fff;
  background: rgba(var(--sup-0-rgb), .74); backdrop-filter: blur(8px);
  border: 1px solid var(--borde-2); border-radius: 999px;
  padding: .5rem 1rem; transition: gap var(--t), background-color var(--t);
}
.diapo:hover .diapo-ir { gap: var(--e4); background: var(--brasa-solida); border-color: var(--brasa-solida); }

/* Flechas */
.carrusel-flecha {
  position: absolute; top: 50%; z-index: 4;
  width: 48px; height: 48px; margin-top: -24px;
  display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; border: 1px solid var(--borde-2);
  background: rgba(var(--sup-0-rgb), .84); backdrop-filter: blur(8px);
  color: #fff; transition: background-color var(--t), border-color var(--t), transform var(--t);
}
.carrusel-flecha:hover { background: var(--brasa); border-color: var(--brasa); transform: scale(1.06); }
.flecha-antes { left: clamp(-22px, -1.6vw, 0px); }
.flecha-despues { right: clamp(-22px, -1.6vw, 0px); }

/* Puntos */
.carrusel-puntos { display: flex; justify-content: center; gap: var(--e2); margin-top: var(--e4); }
.carrusel-puntos button {
  width: 30px; height: 4px; padding: 0; border: 0; cursor: pointer;
  border-radius: 2px; background: rgba(255,255,255,.18);
  transition: background-color var(--t);
}
.carrusel-puntos button[aria-current='true'] { background: var(--hielo); }
.carrusel-puntos button:hover { background: rgba(255,255,255,.45); }

/* =========================================================================
   SERVICIOS
   ========================================================================= */
/* Flex con envoltura centrada y no una rejilla de columnas fijas.
   Los servicios son SIETE, y siete no se divide entre ninguna cantidad de
   columnas: con rejilla, la última tarjeta se quedaba sola y pegada a la
   izquierda en todos los anchos. Centrando la fila incompleta, la que sobra
   queda en el medio y se lee como una decisión y no como un descuadre.
   Y si mañana entra un octavo servicio, esto no hay que volver a tocarlo. */
.rejilla-servicios {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e4);
}
/* Cuatro por fila y no seis: a 1280 px las seis salían a 190 px, que para un
   icono, un título y tres líneas de texto va muy justo. */
.tarjeta-servicio { flex: 0 1 calc((100% - 3 * var(--e4)) / 4); }

.tarjeta-servicio {
  display: flex; flex-direction: column; text-align: center;
  background: var(--sup-2); border: 1px solid var(--borde);
  border-radius: var(--r-l); padding: var(--e6) var(--e4) var(--e5);
  transition: transform var(--t), border-color var(--t), background-color var(--t);
}
.tarjeta-servicio:hover {
  transform: translateY(-5px);
  border-color: rgba(69,211,242,.45);
  background-color: var(--azul-carrusel);
  background-image: var(--resplandor);
}
.tarjeta-servicio.destacada { border-color: rgba(69,211,242,.34); }

/* Servicio elegido desde el carrusel o desde el pie.
   Se resuelve con :target, sin una línea de JavaScript: al pulsar la
   diapositiva la URL pasa a #serv-plomeria y el navegador marca esa tarjeta.
   Se mantiene marcada hasta que se elija otra, que es lo que se pidió. */
.tarjeta-servicio:target {
  border-color: var(--hielo);
  background-color: var(--azul-carrusel);
  background-image: var(--resplandor-fuerte);
  box-shadow: 0 0 0 1px var(--hielo), 0 0 40px rgba(69, 211, 242, .3);
  scroll-margin-top: calc(var(--barra-alto) + 24px);
}
/* Un destello al llegar, para que el ojo lo encuentre sin buscarlo */
.tarjeta-servicio:target .icono-servicio { animation: destello 1.1s ease-out 2; }
.tarjeta-servicio:target:hover .icono-servicio { animation: none; }
@keyframes destello {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.14); }
}
/* Etiqueta que confirma la elección */
.tarjeta-servicio:target::after {
  content: 'Servicio elegido';
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--f-mono); font-size: .6rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  background: var(--hielo); color: var(--sup-0);
  padding: .3rem .7rem; border-radius: 999px; white-space: nowrap;
}
.tarjeta-servicio { position: relative; }

/* Iconos de neón: llevan su propio color y su halo dentro del PNG, así que
   aquí no se tiñen. Se les deja aire de sobra para que el halo no se corte. */
.icono-servicio {
  width: 88px; height: 88px; margin: 0 auto var(--e4);
  display: grid; place-items: center;
  transition: transform var(--t);
}
.icono-servicio img { width: 100%; height: 100%; object-fit: contain; }
.tarjeta-servicio:hover .icono-servicio { transform: scale(1.07); }
.tarjeta-servicio h3 { margin-bottom: var(--e3); }
.tarjeta-servicio p { font-size: .9rem; color: var(--txt-2); line-height: 1.5; }

.enlace-wa {
  margin-top: auto; padding-top: var(--e5);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  font-weight: 700; font-size: .9rem; color: var(--hielo); text-decoration: none;
  transition: gap var(--t), color var(--t);
}
.enlace-wa:hover { gap: var(--e3); color: #fff; }

/* =========================================================================
   FICHA DE SERVICIO — ventana emergente
   Se usa <dialog> nativo: trae el foco atrapado, el cierre con Escape y el
   velo de fondo sin escribirlos a mano. Si el navegador no lo soporta, el
   enlace sigue siendo el de WhatsApp que era antes.
   ========================================================================= */
.ficha-servicio {
  width: min(680px, calc(100vw - 2rem));
  max-height: min(86vh, 900px);
  padding: 0; border: 1px solid var(--borde-2);
  border-radius: var(--r-xl);
  background: var(--sup-2);
  background-image: var(--resplandor-fuerte);
  color: var(--txt);
  box-shadow: var(--s-l);
  overflow: hidden;
}
.ficha-servicio::backdrop { background: rgba(2, 7, 14, .78); backdrop-filter: blur(5px); }

.ficha-cuerpo {
  max-height: min(86vh, 900px);
  overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  /* Barra de desplazamiento fina y con su hueco reservado: así no salta el
     contenido al aparecer ni queda pegada al botón de cerrar. */
  scrollbar-width: thin;
  scrollbar-color: var(--borde-2) transparent;
  scrollbar-gutter: stable;
}
.ficha-cuerpo::-webkit-scrollbar { width: 9px; }
.ficha-cuerpo::-webkit-scrollbar-track { background: transparent; }
.ficha-cuerpo::-webkit-scrollbar-thumb {
  background: var(--borde-2); border-radius: 5px;
  border: 2px solid transparent; background-clip: content-box;
}

/* La cabecera reserva el hueco del botón para que el título no pase por
   debajo de él. */
.ficha-cabecera {
  display: flex; align-items: flex-start; gap: var(--e5);
  margin-bottom: var(--e5); padding-right: 3.25rem;
}
.ficha-icono { width: 84px; height: 84px; flex-shrink: 0; }
.ficha-icono img { width: 100%; height: 100%; object-fit: contain; }
.ficha-titulo { flex: 1; min-width: 0; }
.ficha-titulo .etiqueta { margin-bottom: var(--e2); }
.ficha-titulo h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: var(--e2); }
.ficha-titulo p { color: var(--txt-2); font-size: .98rem; margin: 0; }

.ficha-cerrar {
  position: absolute; top: var(--e4); right: calc(var(--e4) + 14px); z-index: 2;
  width: 42px; height: 42px; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(var(--sup-0-rgb), .7); border: 1px solid var(--borde-2);
  border-radius: 50%; color: #fff;
  transition: background-color var(--t), transform var(--t);
}
.ficha-cerrar:hover { background: var(--brasa); border-color: var(--brasa); transform: rotate(90deg); }

.ficha-servicio h3 {
  font-size: .78rem; font-family: var(--f-mono); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--hielo);
  margin: var(--e6) 0 var(--e3);
}
.ficha-servicio ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e2); }
.ficha-servicio ul li { display: flex; gap: var(--e3); font-size: .95rem; margin: 0; }
.ficha-servicio ul li::before {
  content: ''; flex-shrink: 0; width: 16px; height: 16px; margin-top: .25em; background: var(--hielo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Las señales de aviso no son ventajas: llevan otro símbolo y otro color */
.ficha-servicio .senales li::before {
  background: var(--brasa-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2 1 21h22zm-1 7h2v6h-2zm0 8h2v2h-2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2 1 21h22zm-1 7h2v6h-2zm0 8h2v2h-2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.ficha-nota {
  margin-top: var(--e6); padding: var(--e4);
  background: rgba(var(--sup-0-rgb), .5); border: 1px solid var(--borde);
  border-radius: var(--r-m); font-size: .9rem; color: var(--txt-2);
}
/* Aviso de seguridad dentro de una ficha. Doble clase para que gane a
   .ficha-nota sin depender del orden en el fichero. Lleva el naranja de las
   alertas pero no su degradado: aquí compite con el texto de al lado, y a
   pantalla completa el bloque relleno se come la ficha entera. */
.ficha-nota.ficha-alerta {
  background: rgba(242, 89, 31, .1);
  border-color: rgba(242, 89, 31, .45);
  border-left: 3px solid var(--brasa);
  color: var(--txt);
}
.ficha-nota.ficha-alerta strong { color: #FFC0A4; }

.ficha-pie {
  margin-top: var(--e6); padding-top: var(--e5);
  border-top: 1px solid var(--borde);
  display: flex; flex-wrap: wrap; gap: var(--e3);
}

@media (max-width: 560px) {
  .ficha-cabecera { flex-direction: column; gap: var(--e4); }
  .ficha-icono { width: 68px; height: 68px; }
  .ficha-pie .boton { width: 100%; }
}

/* =========================================================================
   ANTES / DESPUÉS

   Fue un deslizador de arrastrar con un solo par. Ahora es un carrusel: hay
   varios trabajos y el visitante quiere verlos, no quedarse en el primero.

   Se dejó de superponer las dos fotos porque los pares reales no comparten
   encuadre —el compresor se abre en el taller y vuelve montado en su sitio— y
   un deslizador promete justo eso. Lado a lado y con su etiqueta, la
   comparación se entiende venga la foto de donde venga.
   ========================================================================= */
.comparador-pie {
  max-width: 46rem; margin: 0 auto var(--e5); text-align: center;
  color: var(--txt-2); font-size: .95rem;
}

.carrusel-trabajos { max-width: 940px; margin-inline: auto; }
/* El marco se adapta a la diapositiva: el par mide distinto que una foto
   sola, y forzar una proporción fija recortaría los pies de foto. */
.carrusel-trabajos .carrusel-marco { aspect-ratio: auto; background: transparent; border: 0; }
.carrusel-trabajos .diapo-par {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity .5s ease;
}
.carrusel-trabajos .diapo-par[data-activa='true'] { opacity: 1; pointer-events: auto; }
/* La primera se queda en el flujo para que el marco tenga altura propia.
   Las demás se apilan encima en absoluto. */
.carrusel-trabajos .diapo-par:first-child { position: relative; }

/* --- El deslizador ---------------------------------------------------- */
.comp {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: var(--r-l);
  border: 1px solid var(--borde); background: var(--sup-0);
  box-shadow: var(--s-l); touch-action: pan-y;   /* deja desplazar la página */
}
.comp-cara { position: absolute; inset: 0; }
.comp-cara img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* La de arriba se recorta por donde está el tirador. */
.comp-despues { clip-path: inset(0 0 0 var(--corte, 50%)); }

.comp-marca {
  position: absolute; top: var(--e4); z-index: 4;
  font-family: var(--f-mono); font-size: .64rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  background: rgba(var(--sup-0-rgb), .8); color: #fff;
  padding: .35rem .8rem; border-radius: 999px;
  backdrop-filter: blur(6px); pointer-events: none;
}
.marca-antes { left: var(--e4); }
.marca-despues { right: var(--e4); }

.comp-tirador {
  position: absolute; top: 0; bottom: 0; left: var(--corte, 50%); z-index: 5;
  width: 3px; background: #fff; transform: translateX(-1.5px);
}
.comp-tirador::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 52px; height: 52px; transform: translate(-50%,-50%);
  border-radius: 50%; background: #fff; box-shadow: var(--s-m);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='%23050E1B'%3E%3Cpath d='M9.5 7 4.5 12l5 5zm5 0 5 5-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.comp-rango {
  position: absolute; inset: 0; z-index: 6; width: 100%; margin: 0;
  opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; background: transparent;
}
/* Se navega con teclado: el tirador tiene que verse al llegar con el tabulador */
.comp-rango:focus-visible + .comp-tirador { box-shadow: 0 0 0 3px var(--brasa); }

.par-pie {
  margin: var(--e4) 0 0; text-align: center;
  font-size: .9rem; line-height: 1.55; color: var(--txt-2);
}
.par-pie strong { color: var(--txt); }

/* Las flechas van más arriba que en el de servicios: en el centro caerían
   sobre el tirador del deslizador y se pelearían por el mismo clic. */
.carrusel-trabajos .carrusel-flecha { top: 22%; }

/* En móvil las dos fotos se apilan: una al lado de otra a 160 px de ancho no
   se distingue ni la mugre ni la limpieza, que es todo el argumento. */
@media (max-width: 700px) {
  /* Las flechas bajan a los lados de los puntos: encima de la foto competirían
     con el tirador, y el dedo acertaría la que no es. */
  .carrusel-trabajos .carrusel-flecha { top: auto; bottom: -6px; }
  .carrusel-trabajos .carrusel-flecha.flecha-antes { left: 24%; }
  .carrusel-trabajos .carrusel-flecha.flecha-despues { right: 24%; }
  .par-pie { padding-bottom: var(--e6); }
  .comp-marca { font-size: .58rem; padding: .28rem .6rem; }
}

/* Enlace desde la ficha a la pagina completa del servicio. */
.ficha-mas { margin: var(--e4) 0 0; font-size: .9rem; }
.ficha-mas a { color: var(--hielo); font-weight: 600; text-decoration: none; }
.ficha-mas a:hover { text-decoration: underline; }

/* =========================================================================
   MIGAS DE PAN

   En las páginas de servicio. No son decoración: le dicen al visitante dónde
   está y le dan una salida, y a Google la jerarquía del sitio. Van con los
   datos estructurados de BreadcrumbList de cada página.
   ========================================================================= */
.migas {
  /* --txt-3 daba 4.06:1 sobre este fondo, por debajo del minimo legible.
     Es el mismo fallo que ya aparecio en la letra pequena del boletin. */
  font-size: .82rem; color: var(--txt-2);
  margin: 0 0 var(--e4);
}
.migas a { color: var(--txt-2); }
.migas a:hover { color: var(--hielo); }

/* =========================================================================
   GALERÍA DE TRABAJOS

   La prueba de que el trabajo existe. Por eso cada foto lleva pie visible y
   no un tooltip: quien pasa deprisa tiene que poder leerlo sin detenerse, y
   en un móvil no hay ratón con el que pasar por encima.
   ========================================================================= */
.galeria {
  list-style: none; margin: var(--e7) 0 0; padding: 0;
  display: grid; gap: var(--e5);
  /* Tres columnas y no cuatro. Con cuatro, las 9 fotos dejaban una tarjeta
     sola en la última fila y tres huecos al lado. Con tres salen tres filas
     exactas, y de paso las tarjetas pasan de unos 290 px a unos 390: las fotos
     se sirven a 800 px, así que ganan al verse más grandes en vez de
     desperdiciar resolución.

     Si algún día hay 10 fotos, la fila vuelve a quedar coja. Con 12 vuelve a
     cuadrar. No hay número de columnas que aguante cualquier cantidad; se
     eligió el que cuadra con lo que hay. */
  grid-template-columns: repeat(3, 1fr);
}
.galeria figure {
  position: relative;
  margin: 0; height: 100%;
  display: flex; flex-direction: column;
  background: var(--sup-2); border: 1px solid var(--borde);
  border-radius: var(--r-m); overflow: hidden;
}
.galeria picture { display: block; }
.galeria img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  /* Fondo mientras baja: sin esto se ve un hueco blanco sobre fondo oscuro */
  background: var(--sup-0);
}
/* Etiqueta de esquina para el par de fotos que cuenta un antes y un después.
   Va sobre la foto y no en el pie: hay que poder emparejarlas de un vistazo,
   sin leer. */
.galeria-marca {
  position: absolute; top: var(--e3); left: var(--e3); z-index: 2;
  font-family: var(--f-mono); font-size: .62rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  background: rgba(var(--sup-0-rgb), .82); color: #fff;
  padding: .3rem .7rem; border-radius: 999px;
  border: 1px solid var(--borde-2); backdrop-filter: blur(6px);
}
.galeria figcaption {
  padding: var(--e4); font-size: .84rem; line-height: 1.5; color: var(--txt-2);
}
/* El vídeo de un trabajo. Va entre el carrusel y la galería, centrado.

   780 px de ancho cuando el archivo mide 640: es un 22% de ampliación, y en
   vídeo eso no se nota porque el movimiento tapa la falta de nitidez -en una
   fotografía sí se notaría-. A 640 quedaba demasiado pequeño entre dos bloques
   que ocupan todo el ancho y se leía como algo que sobró. */
.video-trabajo { margin: var(--e7) auto 0; max-width: 780px; }
.video-trabajo video {
  width: 100%; height: auto; display: block; background: var(--sup-2);
  border-radius: var(--r-l); border: 1px solid var(--borde);
}
.video-trabajo figcaption {
  margin-top: var(--e3); font-size: .92rem; color: var(--txt-2); text-align: center;
}

.galeria-nota {
  margin: var(--e6) 0 0; text-align: center;
  font-size: .92rem; color: var(--txt-2);
}

/* 4 / 2 / 1 columnas. Con ocho fotos las tres reparten en filas completas y
   no queda una suelta al final, que es lo que hace que una rejilla se vea
   descuadrada aunque las fotos estén bien. */
@media (max-width: 1099px) { .galeria { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 559px)  { .galeria { grid-template-columns: 1fr; } }

/* =========================================================================
   HOGAR / EMPRESA
   ========================================================================= */
.publicos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e5); }
.publico {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  padding: clamp(1.75rem, 3.2vw, 2.75rem); display: flex; flex-direction: column;
  min-height: 440px; isolation: isolate; border: 1px solid var(--borde);
}
.publico::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  background-image: var(--foto); background-color: var(--sup-2);
}
.publico::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(var(--sup-0-rgb), .45), rgba(var(--sup-0-rgb), .95));
}
.publico h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.publico p { color: var(--txt-2); font-size: .98rem; }
.publico .botones { margin-top: auto; padding-top: var(--e5); }
.publico-hogar { --foto: url('/assets/img/hogar.jpg'); }
.publico-empresa { --foto: url('/assets/img/empresa.jpg'); }
.publico-empresa::after { background: linear-gradient(180deg, rgba(242,89,31,.2), rgba(var(--sup-0-rgb), .96)); }

.tildes { list-style: none; padding: 0; margin: var(--e4) 0 var(--e5); display: grid; gap: var(--e2); }
.tildes li { display: flex; gap: var(--e3); font-size: .95rem; color: var(--txt); margin: 0; text-align: left; }
.tildes li::before {
  content: ''; flex-shrink: 0; width: 17px; height: 17px; margin-top: .22em; background: var(--hielo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* =========================================================================
   PROMOCIONES
   ========================================================================= */
/* Cuatro tarjetas con cortes explícitos, no con auto-fit.
   Con auto-fit y mínimo de 280px, a anchos intermedios salían 3 + 1: una
   tarjeta sola en su fila. Cuatro se dividen bien entre 4, 2 y 1, así que
   esos son los únicos repartos que se permiten. */
.promos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e5); }

@media (max-width: 1180px) { .promos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .promos { grid-template-columns: 1fr; } }
.promo {
  position: relative; display: flex; flex-direction: column;
  background: var(--sup-2); border: 1px solid var(--borde);
  border-radius: var(--r-l); padding: var(--e6) var(--e5) var(--e5);
  transition: border-color var(--t), transform var(--t);
}
.promo:hover {
  transform: translateY(-4px);
  border-color: rgba(69,211,242,.45);
  background-color: var(--azul-carrusel);
  background-image: var(--resplandor);
}

/* La promoción marcada conserva su tinte naranja y se enciende en brasa, no
   en azul. Necesita más peso de selector que `.promo:hover`, si no el azul
   se la comería por venir después en el fichero. */
.promo.marcada { border-color: var(--brasa); background-color: rgba(242,89,31,.08); }
.promo.marcada:hover {
  border-color: var(--brasa-2);
  background-color: rgba(242,89,31,.15);
  background-image: var(--resplandor-brasa);
}
.promo .cinta {
  position: absolute; top: -12px; left: var(--e5);
  font-family: var(--f-mono); font-size: .62rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  background: var(--brasa-solida); color: #fff; padding: .35rem .8rem; border-radius: 999px;
}
/* El gancho baja de tamaño respecto a cuando eran tres tarjetas anchas.
   Con cuatro tarjetas de ~260px, el tamaño anterior hacía que un beneficio
   de varias palabras ocupara tres líneas y se comiera la tarjeta entera. */
.promo .gancho {
  font-family: var(--f-display); font-size: clamp(1.5rem, 2.1vw, 1.9rem);
  line-height: 1; letter-spacing: -.03em; text-transform: uppercase;
  color: var(--brasa-2); margin-bottom: var(--e3);
  /* Equilibra las líneas en vez de dejar una palabra suelta abajo */
  text-wrap: balance;
}
.promo h3 { margin-bottom: var(--e3); }
.promo p { font-size: .95rem; color: var(--txt-2); }
.promo .fina { margin-top: auto; padding-top: var(--e5); font-size: .8rem; color: var(--txt-3); border-top: 1px solid var(--borde); }

/* ---- Cuatro tarjetas: descripción, vigencia y botones ----
   La rejilla de arriba es auto-fit con mínimo 280px, así que con cuatro
   tarjetas se reparte sola: 4 en línea en pantalla ancha, 2x2 en tablet y
   1 en móvil. No hace falta ningún punto de ruptura nuevo. */
.promo .promo-desc { font-size: .95rem; color: var(--txt-2); }

/* La vigencia empuja a los botones abajo, así que las cuatro tarjetas
   alinean sus botones aunque los textos midan distinto. */
.promo .promo-vigencia {
  margin-top: auto; padding-top: var(--e5);
  font-size: .78rem; color: var(--txt-3);
  border-top: 1px solid var(--borde);
}
.promo .promo-vigencia.permanente { color: var(--hielo); }

/* Botones apilados, no en fila.
   En fila se partían solo en la tarjeta cuyo texto era más largo, y quedaban
   dos tarjetas con los botones en una línea y dos en dos. Apilados, las
   cuatro se ven igual y cada botón es un objetivo cómodo para el pulgar. */
.promo-acciones {
  display: flex; flex-direction: column; gap: var(--e3); margin-top: var(--e4);
}
.boton-mini {
  padding: .7rem 1.1rem; min-height: 46px; font-size: .88rem; width: 100%;
}

/* Promoción terminada: no se borra, se apaga. Que siga en la página deja
   claro que existió, y evita que alguien con el enlace guardado crea que se
   lo estamos escondiendo. */
.promo[data-terminada="si"] { opacity: .55; }
.promo[data-terminada="si"]:hover { transform: none; border-color: var(--borde); background-image: none; }
.promo[data-terminada="si"] .promo-vigencia { color: var(--brasa-2); font-weight: 700; }
.promo[data-terminada="si"] [data-promo-solicitar] { display: none; }

.promo-generales { text-align: center; margin-top: var(--e6); }
.enlace-sobrio {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: .85rem; color: var(--txt-2);
  text-decoration: underline; text-underline-offset: 4px;
}
.enlace-sobrio:hover { color: var(--hielo); }

/* ---- Modal de condiciones ----
   Reutiliza el aspecto de las fichas de servicio para no inventar un segundo
   lenguaje visual dentro de la misma página. */
.condiciones-cuerpo ul { margin: 0; padding-left: 1.15rem; }
.condiciones-cuerpo li { font-size: .92rem; color: var(--txt); margin-bottom: var(--e3); }
.condiciones-cuerpo li::marker { color: var(--hielo); }

/* ---- Ayuda bajo el campo de código ---- */
.ayuda-campo {
  font-size: .8rem; color: var(--txt-3); margin: var(--e2) 0 0; line-height: 1.5;
}
#codigo_promo { text-transform: uppercase; letter-spacing: .04em; }
#codigo_promo::placeholder { text-transform: none; letter-spacing: 0; }

/* Cuando una promoción rellena el campo, este parpadea un momento. El campo
   está lejos del botón que se pulsó, y rellenarlo en silencio deja al
   visitante sin saber que ocurrió algo. */
#codigo_promo.recien-rellenado {
  border-color: var(--brasa);
  box-shadow: 0 0 0 3px rgba(242, 89, 31, .22);
}
.ayuda-precargado { color: var(--hielo); }

@media (prefers-reduced-motion: reduce) {
  #codigo_promo.recien-rellenado { transition: none; }
}

/* =========================================================================
   CÓMO TRABAJAMOS
   ========================================================================= */
.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: var(--e5); }
.paso { padding-top: var(--e5); border-top: 3px solid var(--borde); }
.paso[data-activo] { border-top-color: var(--hielo); }
.paso .n {
  font-family: var(--f-mono); font-size: .7rem; font-weight: 700;
  letter-spacing: .2em; color: var(--brasa); display: block; margin-bottom: var(--e3);
}
.paso h3 { font-size: 1.1rem; margin-bottom: var(--e2); }
.paso p { font-size: .95rem; color: var(--txt-2); }

/* =========================================================================
   VÍDEO
   ========================================================================= */
.video-marco {
  position: relative; border-radius: var(--r-l); overflow: hidden;
  aspect-ratio: 16/9; background: var(--sup-2); box-shadow: var(--s-l);
  display: grid; place-items: center; border: 1px solid var(--borde);
}
.video-marco video { width: 100%; height: 100%; object-fit: cover; }
.play {
  width: 84px; height: 84px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--brasa); color: #fff; display: grid; place-items: center;
  box-shadow: var(--s-brasa); transition: transform var(--t);
}
.play:hover { transform: scale(1.07); }
.video-nota {
  position: absolute; bottom: var(--e5); left: var(--e5); right: var(--e5);
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--txt-3); text-align: center;
}

/* =========================================================================
   COBERTURA
   ========================================================================= */
.cobertura {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) 1.2fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.cobertura-paneles { display: grid; gap: var(--e5); }

.panel {
  background: var(--sup-2); border: 1px solid var(--borde);
  border-radius: var(--r-l); padding: var(--e6);
  transition: border-color var(--t);
}
.panel:hover { border-color: rgba(69,211,242,.35); }
.panel-cabecera { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e3); }
.panel-cabecera h3 { margin: 0; }
.panel-icono {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(69,211,242,.12); border: 1px solid rgba(69,211,242,.28);
  color: var(--hielo);
}
.panel-icono.calida { background: rgba(242,89,31,.14); border-color: rgba(242,89,31,.34); color: var(--brasa-2); }
.panel p { font-size: .95rem; color: var(--txt-2); }

/* ---------- Mapa de cobertura ----------
   El mapa vive en /assets/img/mapa-cobertura.svg, fuera del HTML: son 34 KB
   de trazado que así se cachean aparte y no engordan cada carga de página.
   Las animaciones van dentro del propio SVG, porque una imagen enlazada no
   hereda el CSS de la página. */
.mapa { width: 100%; max-width: 430px; margin-inline: auto; }
.mapa-img { width: 100%; height: auto; display: block; }

.mapa-leyenda {
  list-style: none; padding: 0; margin: var(--e4) 0 0;
  display: grid; gap: var(--e2);
}
.mapa-leyenda li {
  display: flex; align-items: center; gap: var(--e3); margin: 0;
  font-size: .82rem; color: var(--txt-2);
}
.llave { width: 15px; height: 15px; border-radius: 4px; flex-shrink: 0; }
.llave-base {
  background: var(--brasa); border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(242, 89, 31, .22);
}
.llave-zona {
  background-color: #180D10;
  background-image: repeating-linear-gradient(45deg, #FF6B5E 0 2px, transparent 2px 5px);
  border: 1px solid rgba(255, 107, 94, .6);
}

/* La licencia de los límites estatales pide atribución, así que va visible */
.mapa-credito {
  margin: var(--e3) 0 0; font-size: .68rem; line-height: 1.4; color: var(--txt-3);
}
.fichas { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e5); }
.ficha {
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(69,211,242,.1); border: 1px solid rgba(69,211,242,.3);
  border-radius: var(--r-s); padding: .4rem .75rem; color: var(--hielo-2);
}

/* =========================================================================
   FORMULARIO
   ========================================================================= */
.caja-form {
  background: var(--sup-2); border: 1px solid var(--borde);
  border-radius: var(--r-xl); box-shadow: var(--s-l);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
}
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: var(--e4); }
.campo { display: flex; flex-direction: column; gap: var(--e2); }
.campo.total { grid-column: 1 / -1; }
.campo label { font-weight: 700; font-size: .9rem; color: #fff; }
.campo .ayuda { font-size: .82rem; color: var(--txt-3); }
.obl { color: var(--brasa-2); }

.campo input, .campo select, .campo textarea {
  font-family: inherit; font-size: 1rem; color: #fff;
  background: rgba(0,0,0,.28); border: 2px solid var(--borde-2); border-radius: var(--r-m);
  padding: .85rem 1rem; width: 100%; min-height: 52px;
  transition: border-color var(--t), background-color var(--t);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--txt-3); }
.campo textarea { min-height: 128px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  background: rgba(0,0,0,.4); border-color: var(--hielo); outline: none;
}
.campo input:user-invalid, .campo textarea:user-invalid { border-color: var(--rojo); }
.campo select {
  appearance: none; padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238BA9B8' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: 22px;
}
.campo select option { background: var(--sup-1); color: #fff; }
.casilla { display: flex; gap: var(--e3); align-items: flex-start; font-size: .95rem; color: var(--txt-2); }
.casilla input[type='checkbox'] { width: 22px; height: 22px; min-height: 22px; margin-top: .15rem; flex-shrink: 0; accent-color: var(--hielo); }

.aviso { border-radius: var(--r-m); padding: var(--e4); font-size: .95rem; font-weight: 600; display: none; }
.aviso[data-tipo='ok']    { display: block; background: rgba(53,199,122,.14); color: #8FE9BA; border: 1px solid rgba(53,199,122,.4); }
.aviso[data-tipo='error'] { display: block; background: rgba(255,107,94,.14); color: #FFB3AC; border: 1px solid rgba(255,107,94,.4); }

/* =========================================================================
   CONSEJOS
   ========================================================================= */
.consejos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e5); }
.consejo {
  position: relative; overflow: hidden;
  background: var(--sup-2); border: 1px solid var(--borde);
  border-radius: var(--r-l); padding: var(--e6) var(--e5) var(--e5);
  transition: transform var(--t), border-color var(--t);
}
.consejo:hover {
  transform: translateY(-4px);
  border-color: rgba(69,211,242,.45);
  background-color: var(--azul-carrusel);
  background-image: var(--resplandor);
}
/* Trama de puntos en la esquina, la misma que la portada.
   Antes eran líneas y chocaban: la página tiene una sola textura de fondo y
   dos patrones distintos compitiendo se leen como un descuido. */
.consejo::before {
  content: ''; position: absolute; top: 0; right: 0;
  width: 136px; height: 100px; pointer-events: none;
  background-image: var(--trama-puntos);
  background-size: var(--trama-paso);
  opacity: .55;
  -webkit-mask-image: linear-gradient(215deg, #000, transparent 70%);
  mask-image: linear-gradient(215deg, #000, transparent 70%);
}
.consejo .cat {
  display: block; font-family: var(--f-mono); font-size: .66rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--brasa-2); margin-bottom: var(--e3);
}
.consejo h3 { font-size: 1.05rem; margin-bottom: var(--e3); position: relative; }
.consejo p { font-size: .95rem; color: var(--txt-2); margin: 0; position: relative; }

.alerta {
  margin-top: var(--e5);
  display: flex; align-items: center; gap: var(--e5);
  background: linear-gradient(100deg, var(--brasa), var(--brasa-2));
  color: #fff; border-radius: var(--r-l);
  padding: var(--e5) clamp(1.25rem, 3vw, 2.25rem);
  box-shadow: var(--s-brasa);
}
.alerta-icono { flex-shrink: 0; color: #fff; }
.alerta h3 { color: #fff; font-size: 1.15rem; margin-bottom: var(--e2); }
.alerta p { color: rgba(255,255,255,.94); font-size: .95rem; margin: 0; }

/* =========================================================================
   INVITACIÓN A SUSCRIBIRSE

   En <dialog> nativo, igual que las fichas de servicio: trae de serie el
   foco atrapado, el cierre con Escape y el velo. Aparece abajo a la derecha
   en pantalla grande, como una tarjeta que no tapa la página; en móvil sube
   desde abajo, que es de donde el pulgar la puede cerrar.
   ========================================================================= */
.boletin {
  border: 0; padding: 0; background: transparent;
  max-width: 26rem; width: calc(100% - 2rem);
  margin: auto auto 1.25rem auto; margin-inline-end: 1.25rem;
  color: var(--txt);
}
.boletin::backdrop { background: rgba(var(--sup-0-rgb), .55); backdrop-filter: blur(2px); }

.boletin-cuerpo {
  position: relative;
  background: var(--sup-2); border: 1px solid var(--borde-2);
  background-image: var(--resplandor);
  border-radius: var(--r-l); padding: var(--e6) var(--e5) var(--e5);
  box-shadow: var(--s-l);
}
.boletin h2 { font-size: 1.3rem; margin-bottom: var(--e3); }
.boletin-texto { font-size: .92rem; color: var(--txt-2); margin-bottom: var(--e5); }

.boletin-cerrar {
  position: absolute; top: .6rem; right: .6rem; z-index: 2;
  width: 34px; height: 34px; display: grid; place-items: center;
  background: rgba(var(--sup-0-rgb), .6); border: 1px solid var(--borde);
  border-radius: 50%; color: var(--txt-2); cursor: pointer;
}
.boletin-cerrar:hover { color: #fff; border-color: var(--borde-2); }

.boletin-campos { display: grid; gap: var(--e3); }
.boletin-campos input {
  width: 100%; padding: .9rem 1rem; font: inherit; font-size: 1rem;
  background: rgba(var(--sup-0-rgb), .55); color: #fff;
  border: 1px solid var(--borde-2); border-radius: var(--r-s);
}
.boletin-campos input:focus { outline: 2px solid var(--hielo); outline-offset: -1px; }
.boletin-campos .boton { width: 100%; }

/* El "no soy un robot" del cartel.

   El widget de Turnstile mide 300 px FIJOS y no se estrecha. El cartel, en un
   móvil de 360 px, deja 280 de hueco: 375 de pantalla menos 2rem de margen
   menos 2 x 1.5rem de relleno. Desbordaría.

   Se reduce a escala en vez de estrechar la tarjeta, porque estrechar la
   tarjeta cambiaría la maquetación de todo su contenido para acomodar un solo
   elemento. La escala no toca la caja de maquetación, así que deja unos
   píxeles de aire de más debajo; a esa distancia no se nota. */
.boletin-campos #boletin-humano { display: flex; justify-content: center; }

@media (max-width: 380px) {
  .boletin-campos #boletin-humano { transform: scale(.9); transform-origin: center top; }
}

/* Antes iba en --txt-3: 4.06:1 sobre la tarjeta, por debajo del 4.5:1 que
   pide la letra pequeña. --txt-2 da 6.9:1 y sigue leyéndose como secundario. */
.boletin-legal { font-size: .76rem; color: var(--txt-2); margin: var(--e3) 0 0; line-height: 1.5; }
.boletin-aviso { font-size: .85rem; margin: var(--e3) 0 0; display: none; }
.boletin-aviso[data-tipo] { display: block; }
.boletin-aviso[data-tipo="ok"] { color: var(--verde); }
.boletin-aviso[data-tipo="error"] { color: var(--rojo); }
.boletin-aviso[data-tipo="info"] { color: var(--txt-2); }

/* Aparición discreta: se desvanece y sube un poco. Nada llamativo, y quien
   pida movimiento reducido no ve ninguna animación. */
@media (prefers-reduced-motion: no-preference) {
  .boletin[open] { animation: boletin-entra 260ms cubic-bezier(.22,.61,.36,1); }
  .boletin[open]::backdrop { animation: boletin-velo 260ms ease-out; }
}
@keyframes boletin-entra {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes boletin-velo { from { opacity: 0; } to { opacity: 1; } }

/* El foco tiene que verse: hay quien navega solo con teclado. */
.boletin :focus-visible { outline: 3px solid var(--brasa); outline-offset: 2px; }

/* "Ahora no" en texto plano y discreto: rechazar tiene que ser fácil, pero
   no competir visualmente con el botón que sí queremos que pulsen. */
.boletin-no {
  display: block; margin: var(--e4) auto 0; background: none; border: 0;
  color: var(--txt-2); font: inherit; font-size: .82rem; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
  /* 44 px de alto: es la zona mínima que un dedo acierta sin pelearse.
     Rechazar tiene que ser tan fácil como aceptar. */
  padding: .5rem 1rem; min-height: 44px;
}
.boletin-no:hover { color: var(--txt); }

/* Campo trampa: fuera de la vista sin usar display:none, que algunos robots
   detectan y saltan. */
.trampa {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0;
}

@media (max-width: 640px) {
  /* 92 vw: se ve que hay página detrás, así que no parece que la web se haya
     ido a otra pantalla. Pegada abajo, que es donde llega el pulgar. */
  .boletin {
    max-width: none; width: 92vw;
    margin: auto auto 1rem auto;
  }
  .boletin-cuerpo {
    padding: var(--e6) var(--e4) var(--e4);
    padding-bottom: calc(var(--e4) + env(safe-area-inset-bottom, 0px));
  }
  .boletin h2 { font-size: 1.15rem; }
  /* Móviles bajos: que no se coma la pantalla y se pueda desplazar dentro. */
  .boletin-cuerpo { max-height: 88vh; overflow-y: auto; }
}

/* =========================================================================
   PREGUNTAS
   ========================================================================= */
.faq { max-width: 52rem; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--borde); }
.faq summary {
  cursor: pointer; list-style: none; position: relative;
  padding: var(--e5) 3rem var(--e5) 0;
  font-weight: 700; font-size: 1.0625rem; color: #fff;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: .5rem; top: 50%; margin-top: -6px;
  width: 13px; height: 13px; border-right: 2.5px solid var(--hielo); border-bottom: 2.5px solid var(--hielo);
  transform: rotate(45deg) translateY(-2px); transition: transform var(--t);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq summary:hover { color: var(--hielo); }
.faq .resp { padding: 0 var(--e6) var(--e5) 0; color: var(--txt-2); }

/* =========================================================================
   CIERRE Y PIE
   ========================================================================= */
.cierre { position: relative; text-align: center; padding-block: clamp(3.5rem, 7vw, 6rem); isolation: isolate; overflow: hidden; }
.cierre::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 58% 90% at 50% 0%, rgba(69,211,242,.16), transparent 70%), var(--sup-1);
}
.cierre .entradilla { margin-inline: auto; margin-bottom: var(--e6); }
.cierre .botones { justify-content: center; }

.pie { background: var(--sup-0); color: var(--txt-2); padding-block: var(--e8) var(--e6); font-size: .95rem; border-top: 1px solid var(--borde); }
.pie-rejilla { display: grid; grid-template-columns: 1.6fr 1fr 1fr .9fr; gap: var(--e6); margin-bottom: var(--e7); }
.pie h4 { color: #fff; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: var(--e4); }
.pie a { color: var(--txt-2); text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e3); }
.pie-legal {
  border-top: 1px solid var(--borde); padding-top: var(--e5);
  display: flex; flex-wrap: wrap; gap: var(--e3) var(--e5); justify-content: space-between;
  font-size: .85rem; color: var(--txt-3);
}

.redes { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--e3); }
.redes li { margin: 0; }
.red {
  width: 46px; height: 46px; border-radius: var(--r-m);
  background: var(--brasa); color: #fff; display: grid; place-items: center;
  transition: transform var(--t), background-color var(--t);
}
.red:hover { background: var(--brasa-solida-2); color: #fff; transform: translateY(-3px); }
.red svg { display: block; }

/* ---------- WhatsApp flotante ---------- */
.wa-flota {
  position: fixed; right: clamp(1rem,3vw,1.75rem); bottom: clamp(1rem,3vw,1.75rem); z-index: 90;
  display: inline-flex; align-items: center; gap: var(--e3);
  background: var(--wa); color: #04301A; font-weight: 700; text-decoration: none;
  padding: .95rem 1.4rem; border-radius: 999px;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  transition: transform var(--t);
}
.wa-flota:hover { transform: scale(1.05); color: #04301A; }

/* ---------- Revelado al entrar en pantalla ----------
   El contenido es visible POR DEFECTO. El estado oculto solo se aplica
   cuando app.js ha confirmado que puede revelarlo. Si el JavaScript no
   carga, la página se ve entera en vez de quedarse en blanco. */
.con-revelado .revelar {
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.con-revelado .revelar[data-visible='true'] { opacity: 1; transform: none; }

/* ---------- Páginas legales ---------- */
.legal { max-width: 46rem; }
.legal h2 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  margin-top: var(--e8); margin-bottom: var(--e4);
}
.legal h2:first-of-type { margin-top: var(--e7); }
.legal ul { display: grid; gap: var(--e3); padding-left: 1.2rem; }
.legal li { margin: 0; }
.legal a { text-decoration: underline; }

/* El marco legal va destacado: es lo que explica por qué esta política dice
   lo que dice, y en Venezuela casi nadie lo sabe. */
.legal-marco {
  margin-top: var(--e7); padding: var(--e6);
  background: var(--sup-2); border: 1px solid var(--borde);
  border-left: 3px solid var(--hielo);
  border-radius: var(--r-l);
}
.legal-marco h2 { margin-top: 0; }

/* ---------- Páginas simples ---------- */
.pagina-simple { min-height: 100vh; display: grid; place-items: center; }
.centrado { text-align: center; max-width: 38rem; padding-block: var(--e8); }
.centrado .botones { justify-content: center; margin-top: var(--e6); }

/* ---------- Utilidades ---------- */
.solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

/* ---------- Pantallas ---------- */
@media (max-width: 1240px) {
  .tarjeta-servicio { flex-basis: calc((100% - 2 * var(--e4)) / 3); }
}
@media (max-width: 1080px) {
  /* Siete secciones no caben con holgura: pasa al menú de hamburguesa */
  .menu, .tel-barra { display: none; }
  .boton-menu { display: grid; }
  .barra-acc { margin-inline-start: auto; }
  /* El carrusel baja debajo del texto: en pantalla estrecha lo primero
     tiene que ser quién eres y el botón de WhatsApp */
  .portada-in { grid-template-columns: 1fr; }
  .carrusel { max-width: 680px; }
  .portada-texto { max-width: none; }
  .consejos { grid-template-columns: repeat(2, 1fr); }
  .publicos { grid-template-columns: 1fr; }
  .pie-rejilla { grid-template-columns: 1fr 1fr; }
  /* El mapa baja: primero lo que se lee, después lo que decora */
  .cobertura { grid-template-columns: 1fr; }
  .cobertura-paneles { order: -1; }
  .mapa { max-width: 340px; }
}
@media (max-width: 680px) {
  .tarjeta-servicio { flex-basis: calc((100% - var(--e4)) / 2); }
  .consejos { grid-template-columns: 1fr; }
  .alerta { flex-direction: column; align-items: flex-start; gap: var(--e4); }
  .contenedor { padding-inline: var(--e4); }
  .pie-rejilla { grid-template-columns: 1fr; }
  .botones .boton { width: 100%; }
  .wa-flota span { display: none; }
  .wa-flota { padding: 1.05rem; }
  .comparador { aspect-ratio: 4/3; }
  .flecha-antes { left: 8px; }
  .flecha-despues { right: 8px; }
  .carrusel-flecha { width: 42px; height: 42px; margin-top: -21px; }
}
@media (max-width: 560px) {
  .barra-acc .boton { display: none; }
  .tarjeta-servicio { flex-basis: 100%; }
}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .persiana { display: none; }
  .con-revelado .revelar { opacity: 1; transform: none; }
  .diapo { transition: none; }
  /* El mapa respeta el movimiento reducido desde su propio SVG: una imagen
     enlazada no hereda el CSS de la página. */
}

@media print {
  .barra, .wa-flota, .cajon, .persiana, .pie, .carrusel-flecha { display: none !important; }
  body { color: #000; background: #fff; }
}