/* =========================================================================
   Hoja de estilos del sitio
   Paleta tomada del propio material: RAL 7016 antracita (el color estándar
   de la perfilería de aluminio), cal de fachada y el verde real del canto
   del vidrio float. El ámbar se reserva EXCLUSIVAMENTE para urgencias.
   ========================================================================= */

:root {
  /* TEMA OSCURO. El fondo es el RAL 7016 antracita, el color estándar de la
     perfilería de aluminio: literalmente el color del producto.
     Los nombres de variable se mantienen para no romper el resto de reglas;
     lo que cambia son los valores. --cal es ahora el fondo (oscuro) y
     --antracita el texto (claro). */
  color-scheme: dark;

  --antracita:  #ECEEEE;          /* texto principal */
  --antracita-2:#FFFFFF;          /* titulares */
  --cal:        #212C38;          /* fondo: marino del logo, aclarado */
  --cal-2:      #2C3947;          /* tarjetas y superficies */
  --hondo:      #131B24;          /* franjas, pie, aviso */
  --vidrio:     #8FB0A9;
  --vidrio-hondo:#A8C4BD;         /* enlaces: aclarado para leerse en oscuro */
  --senal:      #C6AD7E;          /* dorado del logo: acentos de marca */
  --urgencia:   #FFD60A;          /* amarillo de aviso: llamar y urgencias */
  --acero:      #6B7885;
  --linea:      #3E4B58;

  --texto:      var(--antracita);
  --texto-suave:#C2CAD2;

  --junquillo: 3px;                 /* grosor de los perfiles del marco */
  --ancho: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --f: "Archivo", "Helvetica Neue", Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

html { background: #212C38; }

body {
  margin: 0;
  background: transparent;   /* el color lo pone html; encima va la textura */
  color: var(--texto);
  font-family: var(--f);
  font-weight: 400;
  font-variation-settings: "wdth" 100, "wght" 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-synthesis: weight style;
}

img { max-width: 100%; display: block; }

a { color: var(--vidrio-hondo); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--antracita); }

:focus-visible {
  outline: 3px solid var(--senal);
  outline-offset: 2px;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-left: auto;
  margin-right: auto;
  padding-inline: var(--gutter);
}
/* En monitores muy anchos el texto no debe estirarse hasta el infinito */
@media (min-width: 1500px) {
  :root { --ancho: 1280px; }
}

.salto-contenido {
  position: absolute; left: -9999px;
  background: var(--senal); color: #131B24;
  padding: .75rem 1.25rem; z-index: 100; font-weight: 600;
}
.salto-contenido:focus { left: 1rem; top: 1rem; }

/* -------------------------------------------------------- tipografía -- */
h1, h2, h3 {
  color: var(--antracita-2);        /* negro explícito, no heredado */
  font-weight: 700; font-variation-settings: "wdth" 112, "wght" 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.6vw, 3.9rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.15rem); margin-top: 0; }
h3 { font-size: 1.15rem; font-weight: 650; font-variation-settings: "wdth" 100, "wght" 650; letter-spacing: -.01em; }

p { margin: 0 0 1.1em; max-width: 68ch; }
/* La entradilla va algo más gruesa que el cuerpo: a tamaño grande, el peso
   normal se percibe más claro aunque el color sea idéntico. */
.entradilla {
  font-size: clamp(1.08rem, 1.8vw, 1.22rem);
  line-height: 1.55;
  color: var(--antracita-2);
  font-weight: 600;
  font-variation-settings: "wdth" 100, "wght" 600;
  max-width: 58ch;
  -webkit-font-smoothing: auto;   /* sin adelgazar el trazo en Mac */
}

/* ------------------------------------------------------------ botones -- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .8rem 1.5rem;
  font: inherit; font-weight: 650; font-variation-settings: "wdth" 100, "wght" 650;
  border: var(--junquillo) solid var(--antracita);
  background: var(--antracita); color: #000000;
  text-decoration: none; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.btn:hover { background: #FFFFFF; color: #000000; }

.btn--tel { background: var(--urgencia); border-color: var(--urgencia); color: #000000; }
.btn--tel:hover { background: #FFE23D; border-color: #FFE23D; color: #000000; }

/* Verde oficial de WhatsApp (#25D366). Es el único color de fuera de la
   paleta y está puesto a propósito: se reconoce sin leer la etiqueta.
   El texto va en verde muy oscuro en vez de blanco porque el blanco sobre
   este verde no llega al contraste mínimo de accesibilidad. */
.btn--wa { background: #25D366; border-color: #25D366; color: #000000; }
.btn--wa:hover { background: #1FB855; border-color: #1FB855; color: #000000; }
.ico-wa, .ico-tel { flex: none; }

.btn--claro {
  background: #ECEEEE; color: #000000; border-color: #ECEEEE;
}
.btn--claro:hover { background: #FFFFFF; color: #000000; }

/* Botón secundario: sólido, claro y con texto oscuro. El hueco con borde no
   se leía bien sobre las tarjetas, así que se rellena. */
.btn--linea {
  background: #ECEEEE;
  color: #000000;
  border-color: #ECEEEE;
}
.btn--linea:hover {
  background: #FFFFFF; border-color: #FFFFFF; color: #000000;
}

/* ---- franja de urgencias, encima de todo -------------------------------- */
.aviso {
  background: var(--hondo);
  color: #C9CFD0;
  font-size: .87rem;
  border-bottom: 1px solid #33404C;
}
.aviso__fila {
  display: flex; align-items: center; gap: .75rem 1.25rem;
  flex-wrap: wrap; padding-block: .6rem;
}
.aviso b {
  color: var(--urgencia);
  font-weight: 650; font-variation-settings: "wdth" 104, "wght" 650;
}
.aviso__punto {
  width: 10px; height: 10px; background: var(--urgencia); flex: none;
}
/* Sobre la franja, que es azul casi negro, el texto en negro no se leería.
   Va sobre un recuadro blanco: así el negro contrasta y además parece lo que
   es, un botón. */
/* El texto va dibujado en vector, no escrito: así conserva su amarillo
   aunque el sistema fuerce sus propios colores, porque los navegadores no
   recolorean las imágenes. */
.aviso a {
  margin-left: auto;
  display: inline-flex; align-items: center;
  text-decoration: none;
  forced-color-adjust: none;
}
.aviso a svg { display: block; }
.aviso a:hover svg text,
.aviso a:hover svg path { fill: #FFFFFF; stroke: #FFFFFF; }


@media (max-width: 700px) {
  .aviso { font-size: .8rem; }
  .aviso a { margin-left: 0; }
}

/* ----------------------------------------------------------- cabecera -- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: var(--cal);
  border-bottom: 1px solid var(--linea);
}
.cabecera__fila {
  display: flex; align-items: center; gap: 1rem;
  min-height: 62px;
}
.marca {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none; margin-right: auto;
  /* Alineado con la franja de urgencias de arriba: el borde izquierdo del
     logo cae en el hueco entre el cuadrado ámbar (10 px) y la palabra
     "Urgencias", que está a 12 px de separación. Punto medio: 16 px. */
  margin-left: 16px;
}
/* Los botones van en su propia fila: así caben los dos números enteros
   sin recortarse ni pelearse con el menú. */
.cabecera__acciones {
  display: flex; gap: .6rem; flex-wrap: wrap;
  justify-content: flex-end;
  padding-bottom: .8rem;
  padding-top: .2rem;
}
.marca {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none; margin-right: auto;
  /* Alineado con la franja de urgencias de arriba: el borde izquierdo del
     logo cae en el hueco entre el cuadrado ámbar (10 px) y la palabra
     "Urgencias", que está a 12 px de separación. Punto medio: 16 px. */
  margin-left: 16px;
}
/* El logo es marino y dorado: sobre el fondo oscuro necesita placa blanca.
   Sin redondear, para seguir el lenguaje de marcos y junquillos del resto. */
/* El logo va en sus colores originales, marino y dorado, sobre placa
   blanca: sobre el fondo oscuro el marino no se vería. */
.marca img {
  height: 44px; width: auto; flex: none;
  display: block;
  background: #FFFFFF;
  padding: 6px 9px;
}
.marca__texto {
  font-weight: 750; font-variation-settings: "wdth" 118, "wght" 750;
  font-size: 1.06rem; letter-spacing: -.015em;
  color: var(--antracita); line-height: 1.1;
}
.marca__texto span {
  display: block; font-size: .68rem; font-weight: 450;
  font-variation-settings: "wdth" 100, "wght" 450;
  letter-spacing: .01em; color: var(--texto-suave);
}
@media (max-width: 420px) { .marca__texto span { display: none; } }

.pie__logo {
  height: 76px; width: auto; display: block;
  background: #FFFFFF;
  padding: 10px 14px;
  margin-bottom: 1.1rem;
}

.nav ul { display: flex; flex-wrap: wrap; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.nav a {
  text-decoration: none; color: var(--antracita); font-size: .93rem;
  font-weight: 520; font-variation-settings: "wdth" 100, "wght" 520;
  padding: .35rem 0; border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--linea); }
.nav a[aria-current="page"] {
  border-bottom-color: var(--urgencia);
  border-bottom-width: 3px;
  color: #FFFFFF;
  font-weight: 650; font-variation-settings: "wdth" 100, "wght" 650;
}
.nav a.es-urgencia { color: var(--vidrio-hondo); }
/* "Presupuesto gratis" es la acción del menú: va en negrita, sin subrayado
   fijo, para que el amarillo quede reservado a la sección en la que estás. */
.nav a.es-destacado {
  font-weight: 650; font-variation-settings: "wdth" 100, "wght" 650;
  color: var(--senal);
}
.nav a.es-destacado:hover { color: var(--urgencia); }
/* La marca de sección activa vale para las cinco entradas, incluida esta */
.nav a.es-destacado[aria-current="page"] {
  color: #FFFFFF;
  border-bottom-color: var(--urgencia);
  border-bottom-width: 3px;
}

.cabecera .btn { padding: .6rem 1.15rem; font-size: .95rem; }
@media (max-width: 620px) {
  .cabecera__acciones { justify-content: stretch; }
  .cabecera__acciones .btn { flex: 1; justify-content: center; font-size: .88rem;
    padding: .6rem .5rem; }
}

.menu-btn {
  display: none; background: none; border: var(--junquillo) solid var(--antracita);
  width: 46px; height: 42px; cursor: pointer; padding: 0;
}
.menu-btn i { display: block; width: 20px; height: 2px; background: var(--antracita); margin: 4px auto; }

@media (max-width: 800px) {
  .menu-btn { display: block; order: 3; }
  .nav {
    order: 4; flex-basis: 100%; display: none;
    border-top: 1px solid var(--linea); padding: .75rem 0 1rem;
  }
  .nav[data-abierto="si"] { display: block; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { display: block; padding: .6rem 0; border-bottom: 1px solid var(--linea); }
  .cabecera__fila { flex-wrap: wrap; }
}


/* ================================================================= HERO ==
   El hero es una ventana: un marco antracita dividido en hojas desiguales
   por junquillos. La hoja izquierda es contenido, la derecha es vidrio.
   ========================================================================= */
.hero { padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(2rem, 5vw, 3.5rem); }

/* ================================================================= HERO ==
   Texto a la izquierda, camión a la derecha. La foto sangra por la derecha
   y se desvanece por la izquierda con una máscara, en vez de ir metida en
   un recuadro con borde: así se integra en el fondo y no parece un sello.
   ========================================================================= */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 88% 40%, #2A3846 0%, rgba(42,56,70,0) 62%),
    var(--cal);
  border-bottom: 1px solid var(--linea);
  padding: 0;
}
.hero__rejilla {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.4fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}
.hero__caja { max-width: 37rem; }
.hero__caja h1 {
  color: #FFFFFF; margin-bottom: .4em;
  font-size: clamp(2.4rem, 4.6vw, 4.2rem);
  line-height: 1.03;
}
.hero__caja .entradilla {
  background: none; border-left: 0; padding: 0;
  color: #D7DDE3; margin-bottom: .55rem;
}
.marca-agua {
  display: inline-block; margin-bottom: 1.1rem;
  padding-bottom: .45rem; border-bottom: var(--junquillo) solid var(--senal);
  color: var(--senal); font-size: .84rem;
  font-weight: 600; font-variation-settings: "wdth" 104, "wght" 600;
  letter-spacing: .02em; text-transform: uppercase;
}
.hoja__acciones { display: flex; flex-wrap: wrap; gap: .75rem; }

/* cifras sueltas bajo los botones */
.hero__cifras {
  /* Cuatro cifras en dos por fila: en una sola línea no caben legibles */
  display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.25rem;
  list-style: none; margin: 0; padding: 1rem 0 0;
  border-top: 1px solid var(--linea);
}
.hero__cifras b {
  display: block; font-size: 1.6rem; line-height: 1;
  color: var(--senal);
  font-weight: 700; font-variation-settings: "wdth" 108, "wght" 700;
}
.hero__cifras li { min-width: 0; }
.hero__cifras span {
  display: block; margin-top: .25rem; line-height: 1.25;
  font-size: .84rem; color: var(--texto-suave);
}

/* la foto: sangra a la derecha y se funde por la izquierda */
/* La foto ocupa todo el lado derecho de la portada: de arriba abajo y hasta
   el borde de la pantalla. Se desvanece solo por la izquierda, que es por
   donde se junta con el texto. */
.hero__foto {
  position: absolute;
  /* Arranca a la altura de la línea "VENTANAS A MEDIDA · MADRID Y SEGOVIA"
     y se separa del lateral. Por abajo sí llega, para que rellene. */
  top: clamp(2.75rem, 5.5vw, 5.25rem);
  right: clamp(.75rem, 2.2vw, 2.25rem);
  bottom: 0;
  width: 58%;
  overflow: hidden;
}
.hero__foto picture { display: block; width: 100%; height: 100%; }
.hero__foto img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  object-position: 68% 46%;
  /* Desvanecido largo por la izquierda, donde toca el texto, y corto por
     arriba y por la derecha, ahora que no llegan al borde. */
  -webkit-mask-image:
      linear-gradient(95deg, transparent 0%, rgba(0,0,0,.10) 12%,
                      rgba(0,0,0,.42) 26%, rgba(0,0,0,.78) 38%, #000 50%),
      linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.6) 5%, #000 13%,
                      #000 68%, rgba(0,0,0,.6) 86%, transparent 100%),
      linear-gradient(to left, transparent 0%, rgba(0,0,0,.6) 4%, #000 11%);
  mask-image:
      linear-gradient(95deg, transparent 0%, rgba(0,0,0,.10) 12%,
                      rgba(0,0,0,.42) 26%, rgba(0,0,0,.78) 38%, #000 50%),
      linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.6) 5%, #000 13%,
                      #000 68%, rgba(0,0,0,.6) 86%, transparent 100%),
      linear-gradient(to left, transparent 0%, rgba(0,0,0,.6) 4%, #000 11%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.hero__caja { position: relative; z-index: 2; }

@media (max-width: 900px) {
  .hero__rejilla { grid-template-columns: 1fr; }
  .hero__foto {
    position: static; width: auto; height: auto;
  }
  .hero__foto img { height: auto; }
  .hero__caja { max-width: 37rem; }
  .hero__foto { align-self: auto; max-height: none; }
  .hero__foto img {
    max-height: none;
    width: calc(100% + var(--gutter) * 2);
    margin-left: calc(var(--gutter) * -1);
    -webkit-mask-image:
        linear-gradient(#000 66%, rgba(0,0,0,.45) 88%, transparent 100%),
        linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask-image:
        linear-gradient(#000 66%, rgba(0,0,0,.45) 88%, transparent 100%),
        linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  .hero__cifras { gap: 1.25rem; }
}
@media (max-width: 480px) {
  .hero__cifras b { font-size: 1.35rem; }
  .hoja__acciones .btn { flex: 1; justify-content: center; }
}

/* ------------------------------------------------------------ secciones */
.seccion { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.seccion--linea { border-top: 1px solid var(--linea); }
.seccion__cabecera { max-width: 60ch; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

/* --------------------------------------------------- listado servicios --
   Filetes finos, no tarjetas. La retícula recuerda a un despiece de huecos. */
.servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1px;
  background: var(--linea);          /* las líneas son el hueco de la rejilla */
  border: 1px solid var(--linea);
}
.servicio {
  background: var(--cal-2);
  padding: 1.75rem 1.6rem;
  display: flex; flex-direction: column;
}
.servicio h3 {
  margin-bottom: .5rem;
  color: #FFFFFF;                   /* casi negro: es el título de la tarjeta */
  font-size: 1.22rem;
  font-weight: 700;
  font-variation-settings: "wdth" 104, "wght" 700;
  -webkit-font-smoothing: auto;
}
.servicio p {
  font-size: .97rem; line-height: 1.55; color: var(--texto-suave);
  margin-bottom: 1.25rem; max-width: 34ch;
}
/* El título es el enlace: la tarjeta se puede pulsar sin una línea extra */
.servicio h3 a {
  color: #FFFFFF; text-decoration: none;
  border-bottom: 2px solid var(--vidrio);
  padding-bottom: 2px;
}
.servicio h3 a:hover { border-bottom-color: var(--urgencia); }
.servicio p { margin-bottom: 0; }
@media (max-width: 620px) { .servicio { padding: 1.4rem 1.25rem; } }

/* ------------------------------------------------------------- ventajas */
.ventajas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2rem 2.5rem; }
.ventaja h3 { margin-bottom: .3rem; padding-top: .9rem; border-top: var(--junquillo) solid var(--antracita); }
.ventaja p { font-size: .97rem; color: var(--texto-suave); margin: 0; }

/* ------------------------------------------------------------ urgencias --
   Única zona donde aparece el ámbar. Es la señal, no la decoración.        */
.banda-urgencias { background: var(--hondo); color: #C7CFD7; }
.banda-urgencias .contenedor { padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.banda-urgencias h2 { color: var(--urgencia); }
.banda-urgencias h2::before {
  content: ""; display: block; width: 54px; height: var(--junquillo);
  background: var(--urgencia); margin-bottom: 1rem;
}
.banda-urgencias p { color: #C6CACB; }
.banda-urgencias a:not(.btn) { color: var(--urgencia); }
.banda-urgencias__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem; align-items: center; }
@media (max-width: 780px) { .banda-urgencias__grid { grid-template-columns: 1fr; gap: 1.5rem; } }
.lista-urgencias { list-style: none; margin: 0; padding: 0; }
.lista-urgencias li { border-bottom: 1px solid #33404C; padding: .7rem 0; }
.lista-urgencias a { text-decoration: none; font-weight: 600; font-variation-settings: "wdth" 100, "wght" 600; }
.lista-urgencias a:hover { text-decoration: underline; }

/* ------------------------------------------------------- cuerpo de texto */
.prosa h2 { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--linea); }
.prosa h2:first-child { margin-top: 0; border-top: none; padding-top: 0; }
.prosa ul { padding-left: 0; list-style: none; margin: 0 0 1.4em; max-width: 68ch; }
.prosa ul li { padding: .7rem 0 .7rem 1.4rem; border-bottom: 1px solid var(--linea); position: relative; }
.prosa ul li::before {
  content: ""; position: absolute; left: 0; top: 1.35em;
  width: 8px; height: 8px; background: var(--vidrio);
}
.prosa b { font-weight: 680; font-variation-settings: "wdth" 100, "wght" 680; }

.doble { display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .doble { grid-template-columns: 1fr; } }

.aparte {
  /* Por defecto NO se queda fijo: baja con la página y se ve entero.
     Un recuadro fijo en una ventana más baja que él deja lo que sobra
     fuera de la vista para siempre, y solo se leen las primeras líneas. */
  position: static;
  align-self: start;
  border: var(--junquillo) solid var(--senal);
  background: var(--cal-2);
  padding: 1.5rem;
  width: 100%;
  max-width: 320px;
  margin-inline: auto;
  margin-bottom: 2rem;      /* aire por debajo, que no quede pegado */
  text-align: center;
}
.aparte p { max-width: none; margin-inline: auto; }
/* Solo se queda fijo cuando la ventana es lo bastante alta para mostrarlo
   entero. Por debajo de eso baja con la página, que es lo que hay que hacer. */
@media (min-height: 800px) {
  /* 148 px: la cabecera mide unos 111 y quedan 37 de aire, para que no
     parezca que se la traga al bajar. Y solo a partir de 800 px de alto,
     que es cuando el recuadro cabe entero con margen por debajo. */
  .aparte { position: sticky; top: 148px; }
}
.aparte h3 { margin-bottom: .5rem; }
.aparte p { font-size: .95rem; color: var(--texto-suave); }
.aparte .btn { width: 100%; justify-content: center; margin-bottom: .55rem; }
.aparte h3 { color: #FFFFFF; }
@media (max-width: 900px) {
  .aparte { position: static; max-height: none; overflow: visible;
            max-width: none; }
}

/* ----------------------------------------------------------------- FAQ -- */
.faq { border-top: 1px solid var(--linea); max-width: 74ch; }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary {
  cursor: pointer; padding: 1.05rem 2rem 1.05rem 0; position: relative;
  font-weight: 620; font-variation-settings: "wdth" 104, "wght" 620; font-size: 1.05rem;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .55rem; top: 1.15rem;
  width: 10px; height: 10px;
  border-right: 2.5px solid var(--antracita);
  border-bottom: 2.5px solid var(--antracita);
  transform: rotate(45deg);
  transition: transform .22s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p { padding-bottom: 1.1rem; margin: 0; color: var(--texto-suave); }

/* ---------------------------------------------------------------- zonas */
.zonas { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.zonas li { border: 1px solid var(--linea); padding: .4rem .85rem; font-size: .92rem; }

/* ------------------------------------------------------------ migas ---- */
.migas { font-size: .85rem; color: var(--texto-suave); padding: 1rem 0 0; }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.migas li::after { content: "/"; margin-left: .4rem; color: var(--acero); }
.migas li:last-child::after { content: ""; }
.migas a { color: var(--texto-suave); }

/* ------------------------------------------------------------ formulario */
.form { display: grid; gap: 1.1rem; max-width: 34rem; }
.campo { display: grid; gap: .35rem; }
.campo label { font-size: .92rem; font-weight: 600; font-variation-settings: "wdth" 100, "wght" 600; }
.campo input, .campo select, .campo textarea {
  font: inherit; font-size: 1rem;
  padding: .7rem .8rem;
  border: 1px solid var(--acero); background: #16202A; color: var(--texto);
  border-radius: 0;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--antracita); outline: 3px solid var(--senal); outline-offset: 1px;
}
.campo textarea { min-height: 130px; resize: vertical; }
.consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; color: var(--texto-suave); }
.consent input { margin-top: .25rem; }

.datos-contacto { list-style: none; padding: 0; margin: 0 0 2rem; }
.datos-contacto li { border-bottom: 1px solid var(--linea); padding: .75rem 0; }
.datos-contacto strong { display: block; font-size: .8rem; color: var(--texto-suave);
  font-weight: 550; font-variation-settings: "wdth" 100, "wght" 550; }

/* --------------------------------------------------------------- footer */
.pie { background: var(--hondo); color: #B7C0C8; margin-top: clamp(3rem, 7vw, 5rem); }
.pie .contenedor { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.pie__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2rem; }
.pie h3 { color: var(--cal); font-size: .95rem; font-weight: 650; font-variation-settings: "wdth" 104, "wght" 650; margin-bottom: .8rem; }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: .45rem; }
.pie a { color: #B7C0C8; text-decoration: none; font-size: .93rem; }
.pie a:hover { color: var(--senal); text-decoration: underline; }
.pie__legal { border-top: 1px solid #33404C; margin-top: 2.5rem; padding-top: 1.25rem;
  font-size: .84rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; justify-content: space-between; }

/* ---- burbuja flotante de WhatsApp -------------------------------------- */
.burbuja-wa {
  position: fixed; right: 20px; bottom: 20px; z-index: 70;
  display: flex; align-items: center; gap: 0;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
  text-decoration: none; overflow: hidden;
  padding-left: 14px;
  transition: width .22s ease, border-radius .22s ease, background .15s ease;
}
.burbuja-wa:hover, .burbuja-wa:focus-visible {
  width: 258px; border-radius: 29px; background: #1FB855; color: #fff;
}
.burbuja-wa__texto {
  white-space: nowrap; margin-left: 12px;
  font-size: .95rem; font-weight: 600; font-variation-settings: "wdth" 100, "wght" 600;
  opacity: 0; transition: opacity .18s ease .06s;
}
.burbuja-wa:hover .burbuja-wa__texto,
.burbuja-wa:focus-visible .burbuja-wa__texto { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .burbuja-wa, .burbuja-wa__texto { transition: none; }
}
@media (max-width: 700px) {
  /* Por encima de la barra de llamar y sin tapar el rótulo de la foto. */
  .burbuja-wa { bottom: 150px; right: 16px; }
  .burbuja-wa:hover, .burbuja-wa:focus-visible { width: 58px; border-radius: 50%; }
  .burbuja-wa__texto { display: none; }
}

/* --------------------------------------------------- barra móvil fija -- */
.barra-movil { display: none; }
@media (max-width: 700px) {
  .barra-movil {
    display: grid; grid-template-columns: 1fr;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    /* Sin borde: al invertir la paleta se veía como una línea blanca entre
       el fondo oscuro y el amarillo del botón. */
  }
  .barra-movil a {
    padding: .9rem; text-align: center; text-decoration: none;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    font-weight: 650; font-variation-settings: "wdth" 100, "wght" 650; font-size: .95rem;
  }
  .barra-movil .llamar { background: var(--urgencia); color: #000000; }
  body { padding-bottom: 56px; }
}


/* ---- salvaguarda de contraste -------------------------------------------
   Si el sistema operativo fuerza sus propios colores (modo alto contraste),
   se dejan mandar a él en vez de pelear y acabar con texto invisible.       */
@media (forced-colors: active) {
  .hero--fachada::before { background: Canvas; }
  .hero__caja h1, .hero__caja .entradilla, .hero__caja .marca-agua { color: CanvasText; }
  .btn { border-color: ButtonText; }
}


/* ---- párrafo de entrada sobre panel oscuro ------------------------------
   El texto va en blanco puro sobre antracita: se lee siempre, pinte el
   navegador la página en claro o la fuerce a oscuro. El filete ámbar de la
   izquierda lo separa del titular.                                          */
/* Sin panel: el párrafo de entrada va sobre el propio fondo, con un filete
   amarillo a la izquierda que marca dónde empieza la página. */
.seccion__cabecera .entradilla,
.prosa > .entradilla {
  background: none;
  color: #FFFFFF;
  border-left: 4px solid var(--urgencia);
  padding: .15rem 0 .15rem 1.1rem;
  margin-top: 1.25rem;
  max-width: 62ch;
  font-weight: 500;
  font-variation-settings: "wdth" 100, "wght" 500;
}

/* En la portada el hero ya es oscuro: allí no hace falta panel. */
.hero__caja .entradilla {
  background: none;
  border-left: 0;
  padding: 0;
  color: #FFFFFF;
}

@media (forced-colors: active) {
  .seccion__cabecera .entradilla,
  .prosa > .entradilla { background: Canvas; color: CanvasText; }
}

/* ---- fichas ilustradas del catálogo -------------------------------------
   Cada punto de la lista con su esquema al lado. Los dibujos son SVG
   propios, de unos 2 KB: pesan menos que una sola foto y se ven nítidos
   en cualquier pantalla.                                                    */
.prosa ul.fichas {
  list-style: none; margin: 0 0 1.6em; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1px; background: var(--linea);
  border: 1px solid var(--linea);
  max-width: none;
}
.prosa ul.fichas li.ficha {
  background: var(--cal-2);
  border: 0; padding: 1.1rem 1.2rem 1.3rem;
  display: flex; flex-direction: column; gap: .35rem;
}
.prosa ul.fichas li.ficha::before { content: none; }
.ficha img {
  width: 100%; height: auto; max-width: 210px;
  margin: 0 auto .5rem; display: block;
}
.ficha h3 {
  margin: 0 0 .25rem; font-size: 1.02rem; color: #FFFFFF;
  font-weight: 700; font-variation-settings: "wdth" 104, "wght" 700;
}
.ficha p {
  margin: 0; font-size: .93rem; line-height: 1.55;
  color: var(--texto-suave); max-width: none;
}
.ficha--sin-dibujo { justify-content: center; }
@media (max-width: 560px) {
  .prosa ul.fichas { grid-template-columns: 1fr; }
  .ficha img { max-width: 180px; }
}


/* ---- portada compacta en pantallas bajas --------------------------------
   Un portátil normal deja unos 650 px útiles. Sin esto, la portada mide más
   y las tres cifras del final se quedan fuera de la vista.                  */
@media (max-height: 860px) {
  .hero__rejilla { padding-block: clamp(1.1rem, 2vw, 1.75rem); gap: clamp(1.25rem, 3vw, 2.5rem); }
  .marca-agua { margin-bottom: .8rem; font-size: .82rem; }
  .hero__caja h1 { font-size: clamp(2rem, 3.7vw, 3rem); margin-bottom: .38em; }
  .hero__caja .entradilla { font-size: 1.12rem; line-height: 1.55; margin-bottom: .5rem; }
  .hero__cifras { margin-top: 0; padding-top: .95rem; gap: .8rem 1.1rem; }
  .hero__cifras b { font-size: 1.3rem; }
  .hero__cifras span { font-size: .78rem; }
  .hero__foto, .hero__foto img { max-height: 330px; }
  .cabecera .btn, .hoja__acciones .btn { padding: .5rem .95rem; font-size: .9rem; }
}
@media (max-height: 700px) {
  .hero__caja h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
  .hero__foto, .hero__foto img { max-height: 260px; }
  .hero__cifras { margin-top: 0; padding-top: .7rem; }
}


/* ---- la portada ocupa la pantalla justa ---------------------------------
   Alto de la ventana menos la franja de urgencias (34 px) y la cabecera
   (111 px). Así lo último que se ve sin bajar son las tres cifras, y la
   sección "Qué instalamos" queda por debajo, invitando a seguir.            */
@media (min-width: 900px) {
  .hero {
    min-height: calc(100vh - 148px);
    display: flex;
    align-items: flex-start;      /* el contenido sube */
  }
  .hero > .hero__rejilla { width: 100%; padding-block: clamp(1.75rem, 3vw, 3rem); }
}


/* ---- móvil: la primera pantalla, solo texto -----------------------------
   El bloque de texto ocupa el alto de la pantalla menos la cabecera, así que
   la foto del camión empieza justo por debajo del filo y no asoma un trozo.
   Se usa svh (alto de pantalla "pequeño") para que no dé saltos cuando el
   navegador esconde y muestra sus barras al hacer scroll.                    */
@media (max-width: 899px) {
  .hero__caja {
    /* Sin alto forzado: el texto ocupa lo suyo y la foto sube justo
       detrás de las cifras. */
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* El texto arriba: el espacio que sobra queda abajo y deja ver la foto
       del ventanal. */
    justify-content: flex-start;
  }
  .hero__rejilla { padding-top: .2rem; gap: 1.35rem; }
  /* las tres cifras, en una sola línea de tres columnas */
  .hero__cifras {
    margin-top: 0; padding-top: 1rem;
    display: grid; grid-template-columns: 1fr 1fr; gap: .7rem .9rem;
  }
  .hero__cifras b { font-size: 1.2rem; }
  .hero__cifras span { font-size: .72rem; line-height: 1.3; }
  .hero__caja h1 { font-size: clamp(1.95rem, 7.6vw, 2.6rem); }
  .hero__caja .entradilla { font-size: 1rem; margin-bottom: .45rem; }
  .hoja__acciones .btn { padding: .7rem 1rem; font-size: .92rem; }
}


/* ---- móvil: liberar alto en la cabecera ---------------------------------
   La franja de urgencias ocupaba dos o tres líneas en un móvil estrecho y se
   comía justo el espacio que necesitan las tres cifras de la portada.        */
@media (max-width: 700px) {
  .aviso__detalle { display: none; }
    .aviso { font-size: .82rem; }
  .aviso__fila { padding-block: .45rem; flex-wrap: nowrap; white-space: nowrap; }
  .marca img { height: 38px; padding: 5px 7px; }
  .marca__texto { font-size: .98rem; }
  .cabecera__fila { min-height: 54px; }
  .cabecera__acciones { padding-bottom: .55rem; padding-top: 0; }

  .hero__caja {
    /* Sin alto forzado: la foto sube justo detrás de las cifras. */
    min-height: 0;
  }
  .hero__rejilla { padding-top: .4rem; padding-bottom: .4rem; }
  .marca-agua { margin-bottom: .55rem; font-size: .74rem; padding-bottom: .3rem; }
  .hero__caja h1 { font-size: clamp(1.85rem, 7.2vw, 2.45rem); margin-bottom: .28em; }
  .hero__caja .entradilla { font-size: .96rem; line-height: 1.45; margin-bottom: .4rem; }
  .hero__cifras { padding-top: .8rem; gap: .5rem; margin-bottom: .25rem; }
  .hero__cifras b { font-size: 1.1rem; }
  .hero__cifras span { font-size: .67rem; line-height: 1.25; }
}


/* ---- tira de garantías --------------------------------------------------
   Cuatro promesas cortas bajo el titular. Es lo primero que lee quien está
   comparando tres empresas, antes de meterse en el detalle.                  */
.garantias {
  list-style: none; margin: 0 0 clamp(2rem, 4vw, 3rem); padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px; background: var(--linea);
  border: 1px solid var(--linea);
}
.garantias li {
  background: var(--cal-2);
  padding: 1rem 1.1rem 1rem 2.4rem;
  font-size: .93rem; line-height: 1.4; color: var(--texto);
  position: relative;
}
.garantias li::before {
  content: ""; position: absolute; left: 1.1rem; top: 1.35rem;
  width: 9px; height: 9px; background: var(--urgencia);
}
.seccion__cabecera .hoja__acciones { margin-top: 1.4rem; }
@media (max-width: 560px) {
  .garantias li { padding: .85rem .9rem .85rem 2.1rem; font-size: .89rem; }
}

/* ---- municipios agrupados por zona --------------------------------------
   Los que tienen página propia van enlazados y en claro; el resto, escritos.
   No se hace una página por municipio a propósito: veinte páginas clonadas
   cambiando el nombre del pueblo son "doorway pages" y Google penaliza.      */
.grupos-zona {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px; background: var(--linea);
  border: 1px solid var(--linea);
}
.grupo-zona { background: var(--cal-2); padding: 1.4rem 1.5rem 1.6rem; }
.grupo-zona h3 {
  font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--senal); margin-bottom: .9rem;
  font-weight: 650; font-variation-settings: "wdth" 100, "wght" 650;
}
.grupo-zona ul { list-style: none; margin: 0; padding: 0; }
.grupo-zona li {
  padding: .3rem 0; font-size: .95rem; color: var(--texto-suave);
  line-height: 1.4;
}
.grupo-zona li a {
  color: #FFFFFF; text-decoration: none;
  border-bottom: 2px solid var(--vidrio); padding-bottom: 1px;
  font-weight: 600; font-variation-settings: "wdth" 100, "wght" 600;
}
.grupo-zona li a:hover { border-bottom-color: var(--urgencia); }
@media (max-width: 560px) {
  .grupo-zona { padding: 1.2rem 1.2rem 1.3rem; }
}

/* ---- listado completo de municipios -------------------------------------
   En columnas para que 179 nombres no sean un muro. Los que tienen página
   propia van en blanco y enlazados; el resto, escritos.                     */
.titulo-zona {
  font-size: .84rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--urgencia); margin: 2rem 0 .9rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--linea);
  font-weight: 650; font-variation-settings: "wdth" 100, "wght" 650;
}
.titulo-zona:first-of-type { margin-top: 0; }
.municipios {
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  columns: 5 170px; column-gap: 1.75rem;
}
.municipios li {
  font-size: .88rem; line-height: 1.5; color: var(--texto-suave);
  padding: .12rem 0; break-inside: avoid;
}
.municipios li a {
  color: #FFFFFF; text-decoration: none;
  border-bottom: 2px solid var(--vidrio);
  font-weight: 600; font-variation-settings: "wdth" 100, "wght" 600;
}
.municipios li a:hover { border-bottom-color: var(--urgencia); }
@media (max-width: 560px) { .municipios { columns: 2 130px; column-gap: 1.1rem; } }




/* ---- lista plegable de servicios ----------------------------------------
   El nombre en dorado con un +. Al pulsar se abre la descripción. Lo hace el
   navegador con <details>, así que funciona sin JavaScript.                 */
.acordeon { border-top: 1px solid var(--linea); margin-bottom: 1rem; }
.plegable { border-bottom: 1px solid var(--linea); }
.plegable summary {
  cursor: pointer; list-style: none;
  padding: 1.05rem 2.5rem 1.05rem 0;
  position: relative;
  color: var(--senal);
  font-size: 1.12rem;
  font-weight: 650; font-variation-settings: "wdth" 104, "wght" 650;
}
.plegable summary::-webkit-details-marker { display: none; }
.plegable summary:hover { color: var(--urgencia); }
/* Flecha hacia abajo en lugar del signo +: se entiende mejor que la fila
   se despliega. Al abrir, gira y apunta hacia arriba. */
.plegable summary::after {
  content: ""; position: absolute; right: .75rem; top: 1.25rem;
  width: 11px; height: 11px;
  border-right: 3px solid var(--senal);
  border-bottom: 3px solid var(--senal);
  transform: rotate(45deg);
  transition: transform .22s ease;
}
.plegable[open] summary::after { transform: rotate(-135deg); }
.plegable[open] summary { color: var(--urgencia); }
.plegable__cuerpo { padding: 0 0 1.2rem; }
.plegable__cuerpo p { margin: 0 0 .8rem; color: var(--texto-suave); max-width: 62ch; }
.plegable__cuerpo a {
  color: #FFFFFF; text-decoration: none;
  border-bottom: 2px solid var(--vidrio); padding-bottom: 2px;
  font-size: .93rem;
  font-weight: 600; font-variation-settings: "wdth" 100, "wght" 600;
}
.plegable__cuerpo a:hover { border-bottom-color: var(--urgencia); }

/* la lista plegable dentro de la banda oscura de urgencias */
.banda-urgencias .acordeon { border-top-color: #33404C; margin-bottom: 0; }
.banda-urgencias .plegable { border-bottom-color: #33404C; }
.banda-urgencias .plegable summary { color: var(--urgencia); }
/* En la banda de urgencias se mantiene el signo +, como estaba */
.banda-urgencias .plegable summary::after {
  border: 0; background: var(--urgencia);
  top: 1.6rem; right: .5rem; width: 15px; height: 3px;
  transform: none;
}
.banda-urgencias .plegable summary::before {
  content: ""; position: absolute; right: 1.1rem; top: 1.0rem;
  width: 3px; height: 15px; background: var(--urgencia);
  transition: opacity .15s ease;
}
.banda-urgencias .plegable[open] summary::before { opacity: 0; }
.banda-urgencias .plegable[open] summary::after { transform: none; }
.banda-urgencias .plegable__cuerpo p { color: #C7CFD7; }

/* prosa que no va dentro de la rejilla de dos columnas */
.prosa--suelta { max-width: 66ch; }
.prosa--suelta h3 {
  margin: 1.6rem 0 .5rem; font-size: 1.08rem;
  color: #FFFFFF;
  font-weight: 650; font-variation-settings: "wdth" 104, "wght" 650;
}
.banda-urgencias .prosa--suelta h3 { color: var(--urgencia); }
.banda-urgencias .prosa--suelta p { color: #C7CFD7; }
.banda-urgencias .prosa--suelta .btn { color: #000000; }
.prosa--suelta { margin-bottom: 1.75rem; }

/* fichas de municipio: los que tienen página propia van destacados */
.zonas li a {
  color: #FFFFFF; text-decoration: none;
  font-weight: 600; font-variation-settings: "wdth" 100, "wght" 600;
}
.zonas li:has(a) { border-color: var(--senal); }
.zonas li a:hover { color: var(--urgencia); }

/* ---- los dos caminos de la portada --------------------------------------
   Instalación y urgencias son dos negocios distintos con dos clientes
   distintos. Separarlos desde la portada evita que nadie se pierda.         */
.caminos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px; background: var(--linea); border: 1px solid var(--linea);
}
.camino {
  background: var(--cal-2);
  padding: clamp(1.4rem, 2.5vw, 2rem);
  display: flex; flex-direction: column;
}
.camino h3 {
  color: #FFFFFF; font-size: 1.2rem; margin-bottom: .6rem;
  font-weight: 700; font-variation-settings: "wdth" 104, "wght" 700;
}
.camino p { color: var(--texto-suave); font-size: .98rem; margin-bottom: 1.4rem; }
.camino__acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; }
.camino--urgente { border-top: var(--junquillo) solid var(--urgencia); }
.camino--urgente h3 { color: var(--urgencia); }

/* plegables de apartado: el título hace de encabezado de sección */
.acordeon--secciones .plegable summary {
  font-size: 1.35rem; padding: 1.25rem 2.5rem 1.25rem 0;
  color: #FFFFFF;
  font-weight: 700; font-variation-settings: "wdth" 108, "wght" 700;
  letter-spacing: -.01em;
}
.acordeon--secciones .plegable summary::after {
  border-color: var(--senal); top: 1.5rem;
}
.acordeon--secciones .plegable[open] summary { color: var(--senal); }
.acordeon--secciones .plegable__cuerpo { padding-bottom: 1.6rem; }
.acordeon--secciones .plegable__cuerpo p { color: var(--texto); max-width: 68ch; }

/* ---- resumen de servicios en la portada ---------------------------------
   Solo el nombre y una línea. El desarrollo está en cada página, para no
   repetir contenido entre unas y otras.                                     */
.resumen {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px; background: var(--linea); border: 1px solid var(--linea);
}
.resumen li { background: var(--cal-2); padding: 1.1rem 1.25rem 1.2rem; }
.resumen li a {
  display: block; color: #FFFFFF; text-decoration: none;
  font-size: 1.08rem; margin-bottom: .3rem;
  border-bottom: 2px solid var(--vidrio); padding-bottom: 2px;
  width: fit-content;
  font-weight: 650; font-variation-settings: "wdth" 104, "wght" 650;
}
.resumen li a:hover { border-bottom-color: var(--urgencia); }
.resumen li span { display: block; font-size: .92rem; color: var(--texto-suave); }

/* ---- vida: apariciones y respuesta al ratón ------------------------------
   Las secciones suben al entrar en pantalla y las tarjetas responden al
   pasar por encima. Solo se activa si el navegador admite el efecto y el
   sistema no pide reducir movimiento: sin JavaScript se ve todo igual.      */
.con-animacion [data-aparece] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, .8, .3, 1);
}
.con-animacion [data-aparece].visible { opacity: 1; transform: none; }
/* Red de seguridad: pase lo que pase, el contenido acaba viéndose. */
.con-animacion [data-aparece] { animation: asegurar-visible 0s linear 2s forwards; }
@keyframes asegurar-visible { to { opacity: 1; transform: none; } }

/* las tarjetas se levantan y encienden su borde */
.resumen li, .camino, .servicio, .grupo-zona, .ventaja, .ficha {
  transition: background .22s ease, transform .22s ease;
}
.resumen li:hover, .camino:hover, .ficha:hover { background: #35455623; }
.resumen li:hover { transform: translateY(-3px); }
.resumen li img {
  width: 100%; max-width: 190px; height: auto; display: block;
  margin: 0 auto .9rem;
}

/* el dibujo de la tarjeta crece un punto al pasar por encima */
.resumen li img, .ficha img { transition: transform .3s ease; }
.resumen li:hover img, .ficha:hover img { transform: scale(1.05); }

/* los botones responden */
.btn { transition: background .15s ease, color .15s ease,
                   transform .12s ease, border-color .15s ease; }
.btn:active { transform: translateY(1px); }

/* la burbuja de WhatsApp late y suelta un halo verde, como una llamada
   entrante. Se para al pasar el ratón para no molestar al pulsarla. */
@keyframes latido {
  0%, 100% { transform: scale(1); }
  14%      { transform: scale(1.12); }
  28%      { transform: scale(.98); }
  40%      { transform: scale(1.06); }
  54%      { transform: scale(1); }
}
@keyframes halo {
  0%   { box-shadow: 0 4px 14px rgba(0,0,0,.28), 0 0 0 0 rgba(37,211,102,.6); }
  70%  { box-shadow: 0 4px 14px rgba(0,0,0,.28), 0 0 0 22px rgba(37,211,102,0); }
  100% { box-shadow: 0 4px 14px rgba(0,0,0,.28), 0 0 0 0 rgba(37,211,102,0); }
}
.burbuja-wa {
  animation: latido 2.6s ease-in-out infinite, halo 2.6s ease-out infinite;
}
.burbuja-wa:hover, .burbuja-wa:focus-visible { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .con-animacion [data-aparece] { opacity: 1; transform: none; transition: none; }
  .burbuja-wa { animation: none; }
  .resumen li:hover, .resumen li:hover img, .ficha:hover img { transform: none; }
}


/* ---- textura de fondo ---------------------------------------------------
   Una retícula muy tenue, como los junquillos de una ventana, y dos halos
   de luz. Va fija detrás de todo, así que no se mueve al hacer scroll y no
   pesa nada: son degradados de CSS, ni una imagen.                          */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    /* halo dorado arriba a la derecha */
    radial-gradient(58% 46% at 88% 6%, rgba(198,173,126,.13), transparent 62%),
    /* halo frío abajo a la izquierda */
    radial-gradient(52% 44% at 4% 92%, rgba(143,176,169,.10), transparent 64%),
    /* retícula de junquillos */
    repeating-linear-gradient(to right,
      rgba(255,255,255,.028) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,.022) 0 1px, transparent 1px 92px),
    var(--cal);
}

/* la portada lleva su propio degradado, así que la textura se atenúa */
.hero { position: relative; z-index: 0; }


/* ---- fachada de fondo en las páginas interiores -------------------------
   La portada no la lleva porque ya tiene la foto de la vivienda. En las
   demás va fija detrás de todo, muy atenuada, para que el contenido se lea
   sin esfuerzo.                                                            */
/* ---- fachada en todas las secciones -------------------------------------
   La imagen va fija a la ventana, de modo que todas las secciones enseñan
   un trozo de la misma fachada y se ve continua al bajar, sin repetirse.
   Solo en la mitad derecha: a la izquierda van los titulares y los párrafos
   y ahí el fondo se mantiene limpio.                                        */
body.con-fachada main > .seccion,
body.con-fachada main > .seccion--linea {
  position: relative;
  background:
    linear-gradient(100deg, var(--cal) 0%, var(--cal) 42%,
                    rgba(33,44,56,.88) 54%, rgba(33,44,56,.62) 70%,
                    rgba(33,44,56,.5) 100%),
    url("../img/fachada.svg") right center / cover no-repeat fixed;
}
body.con-fachada main > .seccion > .contenedor { position: relative; }

/* ---- insignia de reseñas de Google --------------------------------------
   Reservada en la portada, debajo de los botones. Solo aparece cuando hay
   datos reales en datos.py.                                                 */
.resenas {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: 1.1rem; padding: .55rem .9rem;
  border: 1px solid var(--linea);
  background: rgba(255, 255, 255, .04);
}
.resenas a, .resenas > span {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; color: inherit;
}
.resenas__nota {
  font-size: 1.2rem; color: #FFFFFF; line-height: 1;
  font-weight: 700; font-variation-settings: "wdth" 104, "wght" 700;
}
.resenas__estrellas { color: var(--urgencia); letter-spacing: .08em; font-size: 1rem; }
.resenas__texto { font-size: .88rem; color: var(--texto-suave); }
.resenas a:hover .resenas__texto { color: #FFFFFF; }

/* Botón secundario oscuro: sólido, con texto blanco. Es claramente un botón
   y se distingue del principal, que va en claro. */
.btn--oscuro {
  background: #ECEEEE;
  color: #000000;
  /* borde claro: sin él la caja oscura no se distinguía de la tarjeta,
     que también es oscura, y el texto parecía suelto */
  border-color: rgba(236, 238, 238, .75);
}
.btn--oscuro:hover {
  background: #FFFFFF; color: #000000; border-color: #FFFFFF;
}
.camino__acciones { align-items: center; gap: .6rem; }



/* ---- flecha de vuelta ---------------------------------------------------
   Arriba del titular, para regresar al listado del que viene la página.     */
.volver {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-bottom: 1.1rem;
  padding: .5rem .95rem;
  /* Blanco sólido con texto oscuro. Es la única combinación que se lee tanto
     si el navegador respeta los colores como si fuerza su modo oscuro: al
     invertirse, queda oscuro con la flecha clara, que sigue siendo legible. */
  background: #FFFFFF;
  color: #131B24;
  border: 2px solid #FFFFFF;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 650; font-variation-settings: "wdth" 100, "wght" 650;
  transition: background .15s ease, color .15s ease;
}
.volver span { font-size: 1.3rem; line-height: 1; color: inherit; }
.volver:hover { background: var(--urgencia); color: #131B24; border-color: var(--urgencia); }







/* al saltar a una sección, se deja hueco para la cabecera fija */
[id] { scroll-margin-top: 130px; }

/* ---- fichas de municipio -------------------------------------------------
   Cada zona con su nombre, una línea que la describe y, si tiene página
   propia, una flecha para entrar.                                           */
/* Tarjetas sueltas con las esquinas redondeadas, en vez de una rejilla de
   celdas pegadas. Cada municipio se lee como una pieza propia. */
/* Tarjetas pequeñas, solo con el nombre del municipio. Ángulos rectos, como
   el resto de la web: es la decisión de estilo del sitio entero. */
.zonas-fichas {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .55rem;
  background: none; border: 0;
}
.zona {
  background: var(--cal-2);
  border: 1px solid var(--linea);
  padding: .5rem 1rem;
  font-size: .94rem; color: var(--texto);
  transition: border-color .18s ease, background .18s ease;
}
.zona--enlace { padding: 0; }
.zona--enlace a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem; color: #FFFFFF; text-decoration: none;
  font-weight: 650; font-variation-settings: "wdth" 100, "wght" 650;
}
.zona--enlace { border-color: var(--senal); }
.zona--enlace:hover { background: var(--senal); }
.zona--enlace:hover a { color: #131B24; }
.zona--enlace span { font-size: 1.05em; line-height: 1; }
.zona h3 {
  font-size: 1.05rem; margin-bottom: .35rem; color: #FFFFFF;
  font-weight: 700; font-variation-settings: "wdth" 104, "wght" 700;
}
.zona p {
  font-size: .92rem; line-height: 1.45; color: var(--texto-suave);
  margin: 0 0 .9rem; max-width: none;
}
.zona__enlace {
  margin-top: auto; align-self: flex-start;
  color: var(--urgencia); text-decoration: none;
  font-size: .9rem;
  font-weight: 650; font-variation-settings: "wdth" 100, "wght" 650;
  border-bottom: 2px solid transparent; padding-bottom: 2px;
}
.zona__enlace:hover { border-bottom-color: var(--urgencia); }
.zona--simple p { margin-bottom: 0; }
.zonas-nota {
  margin: 1.5rem 0 0; font-size: .93rem; color: var(--texto-suave);
  max-width: 62ch;
}

/* título de cada grupo de municipios */
.grupo-titulo {
  font-size: .84rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--urgencia); margin: 2.25rem 0 .9rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--linea);
  font-weight: 650; font-variation-settings: "wdth" 100, "wght" 650;
}
.grupo-titulo:first-of-type { margin-top: 0; }

/* número de municipios al lado del nombre de cada zona */
.plegable__cuenta {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.9rem; height: 1.6rem; margin-left: .7rem; padding: 0 .4rem;
  background: var(--cal); color: var(--texto-suave);
  font-size: .82rem; font-weight: 650;
  font-variation-settings: "wdth" 100, "wght" 650;
  vertical-align: middle;
}
.plegable[open] .plegable__cuenta { color: var(--urgencia); }
.acordeon--secciones .plegable__cuerpo .zonas-fichas { margin-bottom: .4rem; }

/* resumen de zonas en la portada: solo el nombre y cuántos municipios */
/* Seis zonas en dos filas de tres. Con reparto automático, la última se
   estiraba sola a todo lo ancho y parecía un recuadro vacío. */
.zonas-resumen {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--linea); border: 1px solid var(--linea);
}
@media (max-width: 860px) {
  .zonas-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .zonas-resumen { grid-template-columns: 1fr; }
}
.zonas-resumen li {
  background: var(--cal-2); padding: 1.05rem 1.2rem 1.1rem;
}
.zonas-resumen b {
  display: block; color: #FFFFFF; font-size: 1.02rem; margin-bottom: .25rem;
  font-weight: 700; font-variation-settings: "wdth" 104, "wght" 700;
}
.zonas-resumen span { font-size: .9rem; color: var(--texto-suave); }

/* enlace "ver los municipios uno a uno": en amarillo, que es una invitación
   a seguir y con el color heredado se perdía dentro del párrafo */
.seccion__cabecera p a {
  color: var(--urgencia);
  font-weight: 650; font-variation-settings: "wdth" 100, "wght" 650;
  border-bottom: 2px solid var(--urgencia);
  padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
}
.seccion__cabecera p a:hover { color: #FFFFFF; border-bottom-color: #FFFFFF; }

/* ---- datos de contacto --------------------------------------------------
   El teléfono, el WhatsApp y el email son lo que la gente viene a buscar a
   esta página: van en blanco, en negrita y subrayados.                      */
.datos-contacto a {
  color: var(--urgencia);
  font-size: 1.02rem;
  font-weight: 650; font-variation-settings: "wdth" 100, "wght" 650;
  text-decoration: none;
  transition: color .15s ease;
}
.datos-contacto a:hover { color: #FFFFFF; }
.datos-contacto li { color: var(--texto); }

/* En la página de presupuesto, los datos de contacto van los primeros: quien
   entra ahí suele querer llamar, no rellenar. En pantalla ancha se colocan a
   la derecha, como en el resto del sitio. */
/* Tres piezas: titular, recuadro de contacto y formulario.
   En pantalla ancha el recuadro se coloca a la derecha, arrancando a la
   misma altura que el titular. En estrecha van uno debajo de otro en ese
   mismo orden, que es el que interesa: primero el teléfono, luego el
   formulario. */
.doble--contacto {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.doble--contacto .aparte { margin-bottom: 0; }
@media (min-width: 900px) {
  .doble--contacto {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    column-gap: clamp(2rem, 4vw, 3.5rem);
    row-gap: 1.5rem;
  }
  .doble--contacto > .seccion__cabecera { grid-column: 1; grid-row: 1; }
  .doble--contacto > .aparte {
    grid-column: 2; grid-row: 1 / span 2; align-self: start;
  }
  .doble--contacto > .form { grid-column: 1; grid-row: 2; }
}

/* Los seis datos del recuadro en amarillo: los tres primeros son enlaces y
   los otros tres, texto. Y el borde del recuadro, del mismo color. */
.datos-contacto li { color: var(--urgencia); }
.datos-contacto strong { color: var(--texto-suave); }
.doble--contacto .aparte {
  border-color: var(--urgencia);
  border-width: 2px;
}

/* el título del recuadro, también en amarillo */
.doble--contacto .aparte h3 { color: var(--urgencia); }

/* ---- modo de contraste alto ---------------------------------------------
   Cuando el sistema fuerza sus propios colores (Windows con temas de
   contraste, Android con contraste alto), el navegador ignora los fondos y
   pinta todo con dos colores. Aquí se le indica cómo hacerlo sin que la
   página pierda sentido: los botones siguen pareciendo botones y se
   distinguen unos de otros por el borde.                                    */
@media (forced-colors: active) {
  .btn, .volver, .aviso a, .barra-movil .llamar {
    border: 2px solid ButtonBorder;
    forced-color-adjust: none;
    background: ButtonFace;
    color: ButtonText;
  }
  .btn--tel, .barra-movil .llamar {
    background: Highlight; color: HighlightText;
  }
  .burbuja-wa {
    border: 2px solid ButtonBorder;
    background: ButtonFace; color: ButtonText;
  }
  .burbuja-wa svg { fill: ButtonText; }
  .marca img { forced-color-adjust: none; }
  .ficha img, .resumen li img { forced-color-adjust: none; }
  .plegable summary::after { border-color: ButtonText; }
  .zona--enlace { border: 2px solid LinkText; }
}

/* ---- cabecera con foto en las páginas de municipio ----------------------
   Mismo planteamiento que la portada: titular a la izquierda, foto a la
   derecha difuminada por el lado que toca el texto. Sin el alto mínimo de
   la portada, porque aquí debajo viene el contenido enseguida.              */
.hero--zona {
  min-height: 0;
  background: none;
  padding-bottom: clamp(1rem, 3vw, 2rem);
}
.hero--zona .hero__rejilla { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.hero--zona .hero__caja h1 { font-size: clamp(2rem, 3.6vw, 3rem); }
/* Vuelve a llenar su hueco, algo más estrecha que en la portada y con el
   borde derecho también desvanecido. */
.hero--zona .hero__foto {
  /* Empieza a la altura del titular y se acerca al texto: el botón de
     volver queda por encima de ella. */
  top: clamp(4.5rem, 7vw, 6.5rem);
  bottom: clamp(-1rem, -1.5vw, -.5rem);
  right: 0;
  width: 50%;
}
.hero--zona .hero__foto img {
  -webkit-mask-image:
      linear-gradient(95deg, transparent 0%, rgba(0,0,0,.10) 12%,
                      rgba(0,0,0,.42) 26%, rgba(0,0,0,.78) 38%, #000 50%,
                      #000 74%, rgba(0,0,0,.45) 90%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.6) 5%, #000 13%,
                      #000 78%, rgba(0,0,0,.5) 92%, transparent 100%);
  mask-image:
      linear-gradient(95deg, transparent 0%, rgba(0,0,0,.10) 12%,
                      rgba(0,0,0,.42) 26%, rgba(0,0,0,.78) 38%, #000 50%,
                      #000 74%, rgba(0,0,0,.45) 90%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.6) 5%, #000 13%,
                      #000 78%, rgba(0,0,0,.5) 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
@media (min-width: 900px) {
  .hero--zona { min-height: 0; display: block; }
}
@media (max-width: 900px) {
  .hero--zona .hero__foto { margin-top: 1.5rem; }
}

/* ---- cabecera de municipio con la foto de fondo -------------------------
   La foto ocupa todo el ancho y el titular va encima. El velo no es
   decorativo: sin él, el texto blanco sobre una foto con cielo claro no se
   leería.                                                                   */
.portada-zona {
  position: relative;
  display: flex; align-items: flex-start;
  /* Nunca más alta que la pantalla menos la cabecera fija: así la foto y el
     titular entran de una vez, sin tener que deslizar. */
  /* Ocupa justo la pantalla que queda bajo la cabecera fija: ni deja hueco
     abajo ni obliga a deslizar para ver el titular. */
  height: calc(100vh - 168px);
  min-height: 340px;
  overflow: hidden;
  margin-bottom: 0;
  background: var(--hondo);
}
.portada-zona__foto { position: absolute; inset: 0; }
.portada-zona__foto img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--foco, 50% 46%);
  display: block;
}
.portada-zona__velo {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(19,27,36,.92) 0%, rgba(19,27,36,.82) 34%,
                    rgba(19,27,36,.5) 62%, rgba(19,27,36,.28) 100%),
    linear-gradient(to bottom, rgba(19,27,36,.8) 0%, rgba(19,27,36,0) 52%);
}
.portada-zona__texto {
  position: relative;
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  max-width: 100%;
}
.portada-zona__texto h1 {
  color: #FFFFFF;
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin-bottom: .5em;
  max-width: 18ch;
}
.portada-zona__texto .entradilla {
  color: #FFFFFF;
  max-width: 52ch;
}
.portada-zona .volver { margin-bottom: 1.2rem; }
@media (max-width: 700px) {
  .portada-zona { min-height: 360px; }

}

/* Ficha del municipio del que se vuelve: se ilumina un momento. */
.zona { scroll-margin-top: 180px; }
@keyframes zona-resalte {
  0%, 35% { background: var(--senal); box-shadow: 0 0 0 4px rgba(198,173,126,.35); }
  100%    { background: var(--cal-2); box-shadow: 0 0 0 0 rgba(198,173,126,0); }
}
.zona--resaltada { animation: zona-resalte 2.2s ease-out; }
@keyframes zona-resalte-texto {
  0%, 35% { color: #131B24; }
  100%    { color: #FFFFFF; }
}
.zona--resaltada a { animation: zona-resalte-texto 2.2s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .zona--resaltada { animation: none; outline: 3px solid var(--senal); }
}

/* Copia del botón de volver que sigue al bajar la página. */
.volver--flotante {
  position: fixed;
  z-index: 45;
  margin: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.volver--flotante.volver--visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .volver--flotante { transition: none; }
}
@media print { .volver--flotante { display: none; } }

/* Enlaces a otras páginas desde las de municipio. */
.enlaces-utiles { list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .6rem; }
.enlaces-utiles li { margin: 0; }
.enlaces-utiles a {
  display: block; padding: .8rem 1rem;
  background: var(--cal-2); border: 1px solid var(--linea);
  color: #FFFFFF; text-decoration: none;
  font-weight: 620; font-variation-settings: "wdth" 100, "wght" 620;
  transition: border-color .15s ease, background .15s ease;
}
.enlaces-utiles a::after { content: " →"; color: var(--senal); }
.enlaces-utiles a:hover { border-color: var(--senal); background: var(--cal); }

/* Cierre de las páginas de municipio: una línea para llamar o escribir. */
.cierre-zona {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linea);
  font-size: 1.05rem;
}
.cierre-zona__tel, .cierre-zona__wa {
  font-weight: 700; font-variation-settings: "wdth" 100, "wght" 700;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  white-space: nowrap;
}
.cierre-zona__tel { color: var(--urgencia); }
.cierre-zona__wa { color: #25D366; }
.cierre-zona__tel:hover, .cierre-zona__wa:hover { color: #FFFFFF; }

/* ---- portada en móvil -------------------------------------------------
   La foto apaisada se ve entera, anclada abajo y a todo el ancho. El borde
   superior se funde con el fondo, así no queda un corte contra el azul.    */
@media (max-width: 899px) {
  .hero {
    position: relative; overflow: hidden;
    /* Sin alto forzado: la portada termina donde acaba la foto. */
    min-height: 0;
    padding-bottom: 0;
  }
  .hero__foto {
    /* Sube hasta la altura del párrafo: la foto queda detrás del texto,
       no debajo. */
    /* Desde la línea del rótulo hasta debajo de las cifras. */
    position: absolute; left: 0; right: 0; top: 2.05rem; bottom: 0;
    width: 100%; height: auto; max-height: none; min-height: 0;
    margin: 0; z-index: 0;
  }
  .hero__foto picture { display: block; }
  .hero__foto picture, .hero__foto img {
    width: 100%; height: 100%; max-height: none; margin: 0;
    object-fit: cover; object-position: 62% 50%;
    /* Se funde por arriba y por abajo con el fondo, sin cortes. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%,
      rgba(0,0,0,.5) 12%, #000 32%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0%,
      rgba(0,0,0,.5) 12%, #000 32%, #000 100%);
  }
  /* Velo sobre la foto: sin él, las cifras no se leerían encima. */
  .hero__foto::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(19,27,36,.82) 0%,
      rgba(19,27,36,.7) 38%, rgba(19,27,36,.42) 70%, rgba(19,27,36,.3) 100%);
  }
  .hero__velo-movil { display: none; }
  .hero__caja { position: relative; z-index: 2; }
  .hero__rejilla {
    min-height: 0;
    padding-bottom: 5.5rem;  /* hueco para que quepa la foto, que va detrás */
    align-items: start; align-content: start;
  }
}


/* Cabecera ajustada a la proporción de la foto: en ordenador se ve completa,
   sin recortar por arriba ni por abajo. */
@media (min-width: 900px) {
  .portada-zona--ajustada {
    /* el ancho manda y el alto sale de la proporción de la foto */
    height: auto; width: 100%;
    aspect-ratio: var(--proporcion, 2.4);
  }
}


/* ---- trabajos: foto y explicación ---------------------------------------
   Cada obra ocupa una fila: la foto a un lado y el texto al otro.          */
.obra {
  display: grid; gap: clamp(1.2rem, 3vw, 2.4rem);
  /* la foto manda: se lleva algo más de la mitad del ancho */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  align-items: center;
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  border-top: 1px solid var(--linea);
}
.obra:first-of-type { border-top: 0; padding-top: .5rem; }
.obra:nth-of-type(odd) .obra__lupa { order: 2; }
.obra__lupa {
  position: relative; display: block; width: 100%; padding: 0;
  border: 1px solid var(--linea); background: var(--cal-2);
  cursor: zoom-in; overflow: hidden;
}
.obra__lupa img {
  display: block; width: 100%; height: auto;
  transition: transform .35s ease, filter .35s ease;
}
.obra__lupa:hover img, .obra__lupa:focus-visible img {
  transform: scale(1.03); filter: brightness(1.05);
}
.obra__señal {
  position: absolute; right: .7rem; bottom: .7rem;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(19,27,36,.78); color: var(--senal);
  font-size: 1.35rem; line-height: 1;
}
.obra__lupa:focus-visible { outline: 3px solid var(--senal); outline-offset: 2px; }
/* Fotos verticales muy altas: se limitan para que no dominen la fila. */
.obra--menor .obra__lupa { max-width: 74%; margin-inline: auto; }

.obra__texto h2 { margin: 0 0 .6em; font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
.obra__texto p { margin: 0 0 1em; }
.obra__texto p:last-child { margin-bottom: 0; }

/* visor a pantalla completa */
.visor {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: rgba(10, 15, 20, .94);
  padding: clamp(1rem, 4vw, 3rem);
}
.visor[hidden] { display: none; }
.visor__foto {
  max-width: 100%; max-height: 100%;
  object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.visor__cerrar {
  position: absolute; top: 1rem; right: 1rem;
  width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid var(--linea); background: var(--cal-2);
  color: #FFFFFF; font-size: 1.8rem; line-height: 1; cursor: pointer;
}
.visor__cerrar:hover { border-color: var(--senal); color: var(--senal); }
@media (max-width: 900px) {
  .obra { grid-template-columns: 1fr; }
  .obra:nth-of-type(odd) .obra__lupa { order: 0; }
}

/* Texto solo para lectores de pantalla. */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* En móvil la cabecera es cuadrada y enseña la foto panorámica entera,
   estirada lo justo para llenarla: se ve toda la escena y no quedan bandas. */
@media (max-width: 899px) {
  .portada-zona { height: auto; min-height: 0; aspect-ratio: 1 / 1; }
  .portada-zona__foto img { object-fit: fill; }
  .portada-zona__texto { padding-top: 1rem; padding-bottom: 1.2rem; }
}

/* Prueba: en ordenador la cabecera vuelve a ocupar la pantalla entera. */
@media (min-width: 900px) {
  .portada-zona--ajustada { aspect-ratio: auto; height: calc(100vh - 168px); }
}

.buscador__caja input {
  width: 100%; padding: .85rem 1rem .85rem 2.9rem;
  border: 1px solid var(--linea); background: var(--cal-2); color: #FFFFFF;
  font: inherit; font-size: 1rem;
}
.buscador input::placeholder { color: rgba(255,255,255,.55); }
.buscador input:focus-visible { outline: 3px solid var(--senal); outline-offset: 2px; }
.buscador__aviso { margin: .6rem 0 0; min-height: 1.2em; color: rgba(255,255,255,.75); }
.zona[hidden], .plegable[hidden] { display: none !important; }

/* ---- buscador de municipios (colocación de la lupa) --------------------- */
.buscador { max-width: 34rem; margin: 0 0 1.6rem; }
.buscador__caja { position: relative; display: block; }
.buscador__lupa {
  position: absolute; left: .95rem; top: 50%; transform: translateY(-50%);
  color: var(--senal); display: grid; place-items: center; pointer-events: none;
}

/* ---- opiniones de Google ------------------------------------------------ */
.resenas__sello {
  margin: 0 0 .3rem; color: var(--urgencia);
  font-size: .85rem; letter-spacing: .08em; text-transform: uppercase;
}
.resenas__nota {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: 0 0 .6rem; font-size: 1.6rem; font-weight: 700;
  color: var(--urgencia);          /* el amarillo de la web */
}
.resenas__nota > span:not(.estrellas) {
  font-size: 1rem; font-weight: 400; color: rgba(255,255,255,.75);
}
.resenas__nota .estrellas { color: var(--urgencia); }
.estrellas { display: inline-flex; gap: .15rem; color: var(--urgencia); }
.resenas__aviso { max-width: 62ch; margin: 0 0 1.6rem; color: rgba(255,255,255,.78); }
.resenas {
  list-style: none; margin: 0 0 1.6rem; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.resena {
  border: 1px solid var(--linea); background: var(--cal-2);
  padding: 1.2rem 1.3rem;
}
.resena__estrellas { margin: 0 0 .6rem; }
.resena blockquote { margin: 0; }
.resena blockquote p { margin: 0; }
.resena__firma { margin: .9rem 0 0; color: rgba(255,255,255,.7); font-size: .92rem; }