/* ==== FUENTES (bloque generado por tools/_tav2_fonts.py) ==== */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700 900;
  font-display: optional;
  src: url('/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700 900;
  font-display: optional;
  src: url('/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url('/fonts/public-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url('/fonts/public-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==== FIN FUENTES ==== */

/* ==========================================================================
   Tejados Ávila — styles.css
   Paleta y estilo inspirados en la referencia (teja / ocre / crema / marrón)
   ========================================================================== */

:root {
  /* Color */
  --teja: #d95b2e;
  --teja-oscuro: #b8441c;
  --ocre: #e9b44c;
  --ocre-oscuro: #d49a2b;
  --crema: #fbf7f1;
  --blanco: #ffffff;
  --marron: #3e322b;
  --marron-2: #332822;
  --granito: #e8eaf1;   /* piedra de la muralla, para el hero */
  --tinta: #2b2420;
  --gris: #6e645d;
  --linea: #eee6da;

  /* Tipografía */
  --f-display: "Archivo", system-ui, sans-serif;
  --f-body: "Public Sans", system-ui, sans-serif;

  /* Ritmo */
  --ancho: 1160px;
  --radio: 6px;
  --sombra: 0 10px 30px rgba(43, 36, 32, 0.08);
  --transicion: 0.25s ease;
}

/* ---------- Base ---------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--gris);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 900;
  line-height: 1.15;
  color: var(--tinta);
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1em; }

a { color: var(--teja); text-decoration: none; transition: color var(--transicion); }
a:hover { color: var(--teja-oscuro); }

.contenedor {
  width: min(var(--ancho), 92%);
  margin-inline: auto;
}

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

/* Punto de firma tras los titulares (como la referencia) */
.punto { color: var(--ocre); }
.punto--teja { color: var(--teja); }

/* ---------- Botones ---------- */

.btn {
  display: inline-block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.85rem 1.9rem;
  border-radius: var(--radio);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transicion), background var(--transicion),
              color var(--transicion), border-color var(--transicion);
}

.btn:hover { transform: translateY(-2px); }

.btn--ocre { background: var(--ocre); color: var(--tinta); }
.btn--ocre:hover { background: var(--ocre-oscuro); color: var(--tinta); }

.btn--ghost { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.btn--ghost:hover { background: var(--tinta); color: var(--blanco); }

.btn--ghost-claro { background: transparent; color: var(--blanco); border-color: rgba(255,255,255,0.7); }
.btn--ghost-claro:hover { background: var(--blanco); color: var(--tinta); }

.btn--teja { background: var(--teja); color: var(--blanco); }
.btn--teja:hover { background: var(--teja-oscuro); color: var(--blanco); }

/* ---------- Barra superior ---------- */

.topbar {
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
  font-size: 0.85rem;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--tinta);
}

.marca__nombre {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--teja);
}

.marca__nombre span { color: var(--tinta); }

.marca__claim {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gris);
  font-weight: 600;
  margin-top: 0.25rem;
}

.topbar__datos {
  display: flex;
  gap: 1.6rem;
  color: var(--gris);
  text-align: right;
}

.topbar__datos strong { color: var(--tinta); display: block; }
.topbar__datos a { color: var(--gris); }
.topbar__datos a:hover { color: var(--teja); }

.social { display: flex; gap: 0.5rem; }

.social a {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--teja);
  color: var(--blanco);
  border-radius: 4px;
  transition: background var(--transicion);
}
.social a:hover { background: var(--teja-oscuro); color: var(--blanco); }
.social svg { width: 15px; height: 15px; }

/* ---------- Navegación ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #f5f1ea;
  border-bottom: 1px solid var(--linea);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 56px;
}

.nav__lista {
  display: flex;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__lista a {
  display: block;
  padding: 1rem 1rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--tinta);
}

.nav__lista a:hover,
.nav__lista a[aria-current="page"] { color: var(--teja); }

.nav__lista a[aria-current="page"] {
  box-shadow: inset 0 -3px 0 var(--ocre);
}

.nav__toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0.6rem;
  cursor: pointer;
}

.nav__toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--tinta);
  margin: 5px 0;
  transition: transform var(--transicion), opacity var(--transicion);
}

/* ---------- Hero ---------- */

.hero {
  background: var(--granito);
  position: relative;
  overflow: hidden;
}

.hero__patron {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: url("../assets/img/patron-tejas.svg");
  background-size: 140px;
  opacity: 0.5;
  pointer-events: none;
}

.hero__foto {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, var(--crema) 0%, rgba(251, 247, 241, 0.93) 32%, rgba(251, 247, 241, 0.68) 58%, rgba(232, 234, 241, 0.38) 100%);
  pointer-events: none;
}

.hero--foto .hero__patron { opacity: 0.12; }

.hero__inner {
  position: relative;
  z-index: 3;
  padding: 6.5rem 0 8rem;
  max-width: 640px;
}

.hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.3rem);
  margin-bottom: 0.4rem;
}

.hero__sub {
  font-size: 1.1rem;
  margin: 1.2rem 0 2rem;
  padding-top: 1.2rem;
  border-top: 3px solid var(--ocre);
  display: inline-block;
}

.hero__cta { display: flex; gap: 0.9rem; flex-wrap: wrap; }

.hero--interior .hero__inner { padding: 4rem 0 5.5rem; }

.hero__miga {
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--teja);
  margin-bottom: 0.8rem;
}

/* Festón de tejas (separador firma) */
.feston {
  display: block;
  width: 100%;
  height: 46px;
  background-image: url("../assets/img/feston.svg");
  background-size: 92px 46px;
  background-repeat: repeat-x;
  margin-top: -46px;
  position: relative;
  z-index: 2;
}

.feston--marron { filter: none; }

/* ---------- Secciones ---------- */

.seccion { padding: 5rem 0; }
.seccion--blanca { background: var(--blanco); }
.seccion--marron { background: var(--marron); }
.seccion--marron h2 { color: var(--blanco); }
.seccion--marron .seccion__sub { color: #cfc4bb; }

.seccion__cabecera {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3rem;
}

.seccion__cabecera h2 {
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  color: var(--teja);
}

.seccion__cabecera h2 .titulo-oscuro { color: var(--tinta); }
.seccion--marron .seccion__cabecera h2 .titulo-oscuro { color: var(--blanco); }

.seccion__sub { color: var(--gris); }

/* ---------- Tarjetas de servicios ---------- */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}

.card-servicio {
  background: var(--blanco);
  border: 1px solid var(--linea);
  padding: 2.5rem 2rem;
  text-align: center;
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.card-servicio:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra);
}

.card-servicio__icono {
  width: 96px;
  height: 96px;
  margin: 0 auto 1.5rem;
  color: var(--marron);
}

.card-servicio h3 { font-size: 1.4rem; }
.card-servicio h3::after { content: "."; color: var(--ocre); }

/* ---------- Por qué elegirnos ---------- */

.card-why {
  background: var(--blanco);
  border-top: 4px solid var(--teja);
  box-shadow: var(--sombra);
  padding: 2.2rem 1.8rem;
}

.card-why__icono { width: 46px; height: 46px; color: var(--marron); margin-bottom: 1rem; }
.card-why h3 { font-size: 1.15rem; }
.card-why h3::after { content: "."; color: var(--ocre); }
.card-why p { margin: 0; font-size: 0.95rem; }

/* ---------- Bloque "Sobre nosotros" ---------- */

.split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

.split__fotos {
  position: relative;
  min-height: 420px;
}

.split__fotos img:first-child {
  width: 78%;
  border: 6px solid var(--blanco);
  box-shadow: var(--sombra);
}

.split__fotos img:last-child {
  width: 58%;
  position: absolute;
  right: 0;
  bottom: 0;
  border: 6px solid var(--blanco);
  box-shadow: var(--sombra);
}

.split h2 { font-size: clamp(1.9rem, 4vw, 2.5rem); }
.split h2 em { font-style: normal; color: var(--teja); }

.split__destacado {
  font-size: 1.08rem;
  color: var(--tinta);
  font-weight: 600;
  border-bottom: 1px solid var(--linea);
  padding-bottom: 1.2rem;
  margin-bottom: 1.2rem;
}

.split__cta { display: flex; gap: 0.9rem; margin-top: 1.6rem; flex-wrap: wrap; }

/* ---------- Banda CTA "¿Goteras?" ---------- */

.band-goteras {
  background: var(--marron-2);
  color: #d8cfc7;
  position: relative;
  overflow: hidden;
}

.band-goteras::after {
  content: "";
  position: absolute;
  right: -120px;
  top: 50%;
  transform: translateY(-50%);
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: var(--teja);
  opacity: 0.92;
}

.band-goteras__patron {
  position: absolute;
  inset: 0;
  background-image: url("../assets/img/patron-tejas-oscuro.svg");
  background-size: 140px;
  opacity: 0.35;
}

.band-goteras__inner {
  position: relative;
  z-index: 1;
  padding: 3.6rem 0;
  max-width: 460px;
}

.band-goteras h2 { color: var(--blanco); font-size: clamp(1.7rem, 3.5vw, 2.3rem); }

.band-goteras form { display: grid; gap: 0.7rem; margin-top: 1.4rem; }

.band-goteras input {
  padding: 0.85rem 1rem;
  border: 0;
  border-radius: var(--radio);
  font: inherit;
}

.band-goteras__casa {
  position: absolute;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  width: 300px;
  height: 300px;
  z-index: 1;
  border-radius: 50%;
  object-fit: cover;
  border: 6px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* ---------- Trabajos / showcase ---------- */

.card-proyecto {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.card-proyecto:hover { transform: translateY(-6px); box-shadow: var(--sombra); }

.card-proyecto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.card-proyecto__cuerpo { padding: 1.3rem 1.4rem 1.6rem; text-align: center; }

.card-proyecto__tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teja);
  background: rgba(217, 91, 46, 0.1);
  padding: 0.25rem 0.6rem;
  border-radius: 3px;
  margin-bottom: 0.6rem;
}

.card-proyecto h3 { font-size: 1.05rem; margin-bottom: 0.2rem; }
.card-proyecto__fecha { font-size: 0.8rem; color: var(--gris); }


/* Filtros de trabajos */
.filtros {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.filtros button {
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--tinta);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 0.55rem 1.3rem;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}

.filtros button:hover { border-color: var(--teja); color: var(--teja); }
.filtros button.activo { background: var(--teja); border-color: var(--teja); color: var(--blanco); }

/* ---------- Clientes / zonas ---------- */

.zonas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
}

.zonas li {
  list-style: none;
  background: var(--blanco);
  border: 1px solid var(--linea);
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tinta);
}

.zonas li::before { content: "▲ "; color: var(--teja); font-size: 0.7em; }

/* ---------- Testimonios ---------- */

.slider { position: relative; }

.slider__viewport { overflow: hidden; }

.slider__pista {
  display: flex;
  gap: 1.8rem;
  transition: transform 0.45s ease;
}

.card-testimonio {
  flex: 0 0 calc((100% - 3.6rem) / 3);
  background: var(--blanco);
  padding: 2.2rem 1.8rem 1.8rem;
  text-align: center;
}

.card-testimonio__avatar {
  width: 72px; height: 72px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  border: 3px solid var(--teja);
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--teja);
  background: var(--crema);
}

.card-testimonio h3 { font-size: 1.05rem; }
.card-testimonio p { font-size: 0.92rem; }
.card-testimonio__fecha { font-size: 0.78rem; color: #a3968c; }
.card-testimonio__estrellas { color: var(--ocre); letter-spacing: 0.15em; margin-bottom: 0.6rem; }

.slider__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: var(--teja);
  font-size: 2.2rem;
  cursor: pointer;
  padding: 0.4rem;
  line-height: 1;
}

.slider__flecha:hover { color: var(--ocre); }
.slider__flecha--prev { left: -2.8rem; }
.slider__flecha--next { right: -2.8rem; }

/* ---------- Noticias ---------- */

.card-post { background: var(--blanco); border: 1px solid var(--linea); display: flex; flex-direction: column; }
.card-post:hover { box-shadow: var(--sombra); }
.card-post img { aspect-ratio: 16 / 10; object-fit: cover; }
.card-post__cuerpo { padding: 1.4rem 1.5rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.card-post__fecha { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teja); font-weight: 700; margin-bottom: 0.5rem; }
.card-post h3 { font-size: 1.1rem; }
.card-post h3 a { color: var(--tinta); }
.card-post h3 a:hover { color: var(--teja); }
.card-post p { font-size: 0.92rem; flex: 1; }
.card-post__mas { font-weight: 700; font-size: 0.88rem; }

/* ---------- Banda presupuesto ---------- */

.band-presupuesto {
  position: relative;
  background:
    linear-gradient(rgba(43, 36, 32, 0.55), rgba(43, 36, 32, 0.55)),
    url("../assets/img/fondo-tejado.svg") center / cover no-repeat;
  padding: 5.5rem 0;
}

.band-presupuesto__caja {
  background: var(--blanco);
  max-width: 480px;
  margin-left: auto;
  padding: 2.8rem 2.5rem;
  text-align: center;
  box-shadow: var(--sombra);
}

.band-presupuesto__caja h2 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); }
.band-presupuesto__caja h2 em { font-style: normal; color: var(--teja); }

/* ---------- Formularios ---------- */

.form { display: grid; gap: 0.9rem; text-align: left; }

.form label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--tinta);
  display: grid;
  gap: 0.35rem;
}

.form input,
.form textarea,
.form select {
  font: inherit;
  padding: 0.8rem 1rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: #faf8f4;
  color: var(--tinta);
  width: 100%;
}

.form input:focus,
.form textarea:focus,
.form select:focus {
  outline: none;
  border-color: var(--ocre);
  box-shadow: 0 0 0 3px rgba(233, 180, 76, 0.25);
}

.form textarea { min-height: 130px; resize: vertical; }

.form__aviso { font-size: 0.78rem; color: var(--gris); }

.form__ok {
  display: none;
  background: #eaf6ec;
  border: 1px solid #bfe3c6;
  color: #256b34;
  padding: 0.9rem 1rem;
  border-radius: var(--radio);
  font-size: 0.9rem;
}

.form__ok.visible { display: block; }

/* ---------- Página contacto ---------- */

.contacto-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  align-items: start;
}

.dato-contacto {
  display: flex;
  gap: 1rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--linea);
}

.dato-contacto svg { width: 26px; height: 26px; color: var(--teja); flex: none; margin-top: 0.2rem; }
.dato-contacto strong { color: var(--tinta); display: block; font-family: var(--f-display); }

.mapa {
  border: 6px solid var(--blanco);
  box-shadow: var(--sombra);
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* ---------- Cifras ---------- */

.cifras {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: center;
}

.cifra strong {
  display: block;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 2.6rem;
  color: var(--teja);
}

.cifra span { font-size: 0.9rem; font-weight: 600; color: var(--tinta); }

.seccion--marron .cifra span { color: #d8cfc7; }
.seccion--marron .cifra strong { color: var(--ocre); }

/* ---------- Equipo / valores ---------- */

.card-valor {
  background: var(--blanco);
  border: 1px solid var(--linea);
  padding: 2rem 1.7rem;
}

.card-valor h3 { font-size: 1.1rem; }
.card-valor h3::after { content: "."; color: var(--ocre); }
.card-valor p { margin: 0; font-size: 0.95rem; }

/* ---------- Footer ---------- */

.footer {
  background: var(--marron);
  color: #cfc4bb;
  padding: 4rem 0 0;
  font-size: 0.92rem;
}

.footer a { color: #cfc4bb; }
.footer a:hover { color: var(--ocre); }

.footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}

.footer h4 {
  color: var(--blanco);
  font-size: 1rem;
  margin-bottom: 1rem;
}

.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.footer .marca__nombre { color: var(--ocre); }
.footer .marca__nombre span { color: var(--blanco); }

.footer__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1.2rem 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
}

/* ---------- Animación de aparición ---------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card-servicio:hover, .card-proyecto:hover { transform: none; }
  .slider__pista { transition: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
  .split__fotos { min-height: 340px; }
  .cifras { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .card-testimonio { flex-basis: calc((100% - 1.8rem) / 2); }
  .contacto-grid { grid-template-columns: 1fr; }
  .slider__flecha--prev { left: -0.5rem; }
  .slider__flecha--next { right: -0.5rem; }
  .band-goteras__casa { display: none; }
  .topbar__datos { display: none; }
}

@media (max-width: 640px) {
  .grid-3 { grid-template-columns: 1fr; }
  .card-testimonio { flex-basis: 100%; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__inner { padding: 4.5rem 0 6rem; }
  .band-presupuesto__caja { margin-inline: auto; padding: 2.2rem 1.5rem; }
  .band-goteras::after { display: none; }

  /* Menú móvil */
  .nav__inner { justify-content: space-between; }
  .nav__toggle { display: block; }

  .nav__lista {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--blanco);
    flex-direction: column;
    gap: 0;
    border-bottom: 1px solid var(--linea);
    box-shadow: var(--sombra);
    display: none;
  }

  .nav__lista.abierta { display: flex; }
  .nav__lista a { padding: 0.9rem 1.4rem; border-top: 1px solid var(--linea); }
  .nav__lista a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--ocre); }

  .nav.abierta .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.abierta .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.abierta .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ==== SERVICIOS (bloque generado por tools/_tav2_css.py) ==== */

/* ---------- Pie: los títulos de columna son H3 (jerarquía) ---------- */

.footer h3.footer__titulo {
  color: var(--blanco);
  font-size: 1rem;
  margin-bottom: 1rem;
}

/* ---------- Submenú de servicios en la navegación ---------- */

.nav__lista > li { position: relative; }

.nav__lista .tiene-hijos > a::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.submenu {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  position: absolute;
  top: 100%;            /* sin hueco: evita que el menú se cierre al bajar */
  left: 0;
  min-width: 270px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-top: 3px solid var(--teja);
  box-shadow: var(--sombra);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
  z-index: 60;
}

.tiene-hijos:hover > .submenu,
.tiene-hijos:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.submenu a {
  padding: 0.6rem 1.2rem;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
}

.submenu a:hover { background: var(--crema); color: var(--teja); }
.submenu a[aria-current="page"] { color: var(--teja); box-shadow: inset 3px 0 0 var(--ocre); }

/* ---------- Área táctil mínima (WCAG 2.2 AA · 44x44) ---------- */

.nav__toggle { min-width: 44px; min-height: 44px; }
.social a { min-width: 32px; min-height: 32px; }

/* ---------- Miga de pan ---------- */

.miga { margin-bottom: 0.8rem; }

.miga ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}

.miga li + li::before { content: "· "; color: var(--gris); }
.miga a { color: var(--teja); }
.miga [aria-current="page"] { color: var(--gris); }

/* ---------- Prosa de contenido ---------- */

.prosa { max-width: 72ch; }
.prosa h2 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); margin-top: 2.6rem; }
.prosa h3 { font-size: 1.18rem; margin-top: 1.8rem; color: var(--tinta); }
.prosa h3::after { content: "."; color: var(--ocre); }
.prosa > :first-child { margin-top: 0; }
.prosa strong { color: var(--tinta); }

.entradilla {
  font-size: 1.1rem;
  color: var(--tinta);
  font-weight: 600;
  border-left: 4px solid var(--ocre);
  padding-left: 1.1rem;
}

/* ---------- Rejillas auxiliares ---------- */

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8rem; }

.grid-servicio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 3rem;
  align-items: start;
}

/* ---------- Columna lateral pegajosa ---------- */

.aside-servicio { position: sticky; top: 84px; display: grid; gap: 1.5rem; }

.caja-lateral {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-top: 4px solid var(--teja);
  padding: 1.6rem 1.5rem;
  box-shadow: var(--sombra);
}

.caja-lateral h2,
.caja-lateral h3 { font-size: 1.1rem; margin-bottom: 0.7rem; }
.caja-lateral p { font-size: 0.9rem; }
.caja-lateral .btn { width: 100%; text-align: center; }

.caja-lateral__tel {
  display: block;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--teja);
  margin-bottom: 0.2rem;
}

/* ---------- Listas de comprobación ---------- */

.lista-check { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 0.6rem; }

.lista-check li {
  position: relative;
  padding-left: 1.9rem;
  font-size: 0.97rem;
}

.lista-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.85rem;
  height: 0.45rem;
  border-left: 2.5px solid var(--teja);
  border-bottom: 2.5px solid var(--teja);
  transform: rotate(-45deg);
}

.lista-check--aviso li::before {
  border-color: var(--ocre-oscuro);
  transform: none;
  border: 0;
  background: var(--ocre);
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  top: 0.5em;
}

/* ---------- Tarjetas de servicio con ventajas ---------- */

.card-servicio__perks {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  text-align: left;
  display: grid;
  gap: 0.45rem;
  font-size: 0.9rem;
}

.card-servicio__perks li { position: relative; padding-left: 1.3rem; }
.card-servicio__perks li::before {
  content: "▲";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.62em;
  line-height: 2.2;
  color: var(--teja);
}

.card-servicio--compacta { padding: 2rem 1.6rem; text-align: left; }
.card-servicio--compacta .card-servicio__icono { margin: 0 0 1.1rem; width: 64px; height: 64px; }

/* ---------- Pasos del proceso ---------- */

.pasos { counter-reset: paso; list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }

.pasos li {
  counter-increment: paso;
  position: relative;
  padding-left: 4.2rem;
  min-height: 3rem;
}

.pasos li::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--marron);
  color: var(--ocre);
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.05rem;
}

.pasos h3 { margin-bottom: 0.25rem; font-size: 1.08rem; }
.pasos p { margin: 0; font-size: 0.95rem; }

/* ---------- Tablas ---------- */

.tabla-wrap { overflow-x: auto; margin: 1.4rem 0; -webkit-overflow-scrolling: touch; }

.tabla {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  background: var(--blanco);
  font-size: 0.94rem;
}

.tabla caption {
  caption-side: bottom;
  font-size: 0.8rem;
  color: var(--gris);
  text-align: left;
  padding-top: 0.7rem;
}

.tabla th,
.tabla td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--linea); text-align: left; }

.tabla thead th {
  background: var(--marron);
  color: var(--blanco);
  font-family: var(--f-display);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  border-bottom: 0;
}

.tabla tbody th { font-weight: 700; color: var(--tinta); font-family: var(--f-body); }
.tabla tbody tr:nth-child(even) { background: #fcfaf6; }
.tabla td strong { color: var(--teja); font-family: var(--f-display); }

/* ---------- Ficha Técnica y Resumen Directo (GEO / AI Overviews & UX) ---------- */

.capsula-servicio {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--teja);
  border-radius: var(--radio);
  padding: 1.4rem 1.6rem;
  margin: 1.8rem 0 2rem;
  box-shadow: 0 4px 16px rgba(43, 36, 32, 0.04);
}

.capsula-servicio__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--linea);
  flex-wrap: wrap;
}

.capsula-servicio__titulo {
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--tinta);
  margin: 0;
}

.capsula-servicio__badge {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--crema);
  color: var(--teja-oscuro);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  border: 1px solid var(--linea);
}

.capsula-servicio__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem 1.4rem;
  margin-top: 0.8rem;
}

.capsula-servicio__item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.capsula-servicio__label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--gris);
}

.capsula-servicio__valor {
  font-size: 0.92rem;
  color: var(--tinta);
  font-weight: 600;
  line-height: 1.4;
}

.capsula-servicio__desc {
  margin: 0.8rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--linea);
  font-size: 0.92rem;
  color: var(--gris);
  line-height: 1.55;
}

/* ---------- Nota / aviso destacado ---------- */

.nota {
  background: #fdf6e6;
  border-left: 4px solid var(--ocre);
  padding: 1.2rem 1.4rem;
  margin: 1.8rem 0;
  font-size: 0.95rem;
}

.nota p:last-child { margin-bottom: 0; }
.nota strong { color: var(--tinta); }

/* ---------- FAQ ---------- */

.faq { display: grid; gap: 0.8rem; max-width: 820px; margin-inline: auto; }

.faq details {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}

.faq details[open] { border-color: var(--ocre); }

.faq summary {
  cursor: pointer;
  padding: 1.1rem 3rem 1.1rem 1.3rem;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--tinta);
  position: relative;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  position: absolute;
  right: 1.3rem;
  top: 1.45rem;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2.5px solid var(--teja);
  border-bottom: 2.5px solid var(--teja);
  transform: rotate(45deg);
  transition: transform var(--transicion);
}

.faq details[open] summary::after { transform: rotate(-135deg); top: 1.6rem; }
.faq .faq__respuesta { padding: 0 1.3rem 1.2rem; font-size: 0.96rem; }
.faq .faq__respuesta p:last-child { margin-bottom: 0; }

/* ---------- Servicios relacionados ---------- */

.relacionados { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }

.relacionados a {
  display: block;
  background: var(--blanco);
  border: 1px solid var(--linea);
  padding: 1.4rem 1.5rem;
  color: var(--tinta);
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}

.relacionados a:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra);
  border-color: var(--teja);
  color: var(--tinta);
}

.relacionados strong {
  display: block;
  font-family: var(--f-display);
  font-size: 1.05rem;
  margin-bottom: 0.3rem;
}

.relacionados span { font-size: 0.9rem; color: var(--gris); }

/* ---------- Galería de imágenes de apoyo ---------- */

.media-servicio {
  border: 6px solid var(--blanco);
  box-shadow: var(--sombra);
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.media-pie { font-size: 0.82rem; color: var(--gris); margin-top: 0.6rem; }

/* ---------- Estado de envío de los formularios ---------- */

.form-status {
  margin: 0.9rem 0 0;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radio);
  border-left: 4px solid transparent;
  font-size: 0.9rem;
  line-height: 1.5;
  display: none;
}

.form-status.is-pending,
.form-status.is-success,
.form-status.is-error { display: block; }

.form-status.is-pending { background: #f3efe8; border-color: var(--gris); color: var(--tinta); }
.form-status.is-success { background: #eaf6ec; border-color: #4b9d5e; color: #1f5c2c; }
.form-status.is-error   { background: #fdecea; border-color: var(--teja); color: #8d2c0e; }

.form-goteras .form-status { background: rgba(255,255,255,0.92); }

[aria-invalid="true"] {
  border-color: var(--teja) !important;
  box-shadow: 0 0 0 3px rgba(217, 91, 46, 0.18);
}

/* Honeypot: fuera de pantalla, nunca display:none (algunos bots lo detectan) */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

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

/* Enlace de salto al contenido (WCAG 2.4.1) */
.skip-link {
  position: absolute;
  left: 0;
  top: -100px;
  z-index: 999;
  background: var(--marron);
  color: var(--blanco);
  padding: 0.85rem 1.4rem;
  font-weight: 700;
  transition: top var(--transicion);
}

.skip-link:focus { top: 0; color: var(--blanco); }

/* ---------- Páginas de zona ---------- */

.card-zona {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-top: 4px solid var(--ocre);
  padding: 1.8rem 1.7rem;
  display: flex;
  flex-direction: column;
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.card-zona:hover { transform: translateY(-5px); box-shadow: var(--sombra); }
.card-zona h3 { font-size: 1.25rem; margin-bottom: 0.2rem; }
.card-zona h3 a { color: var(--tinta); }
.card-zona h3 a:hover { color: var(--teja); }

.card-zona__comarca {
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--teja);
  margin-bottom: 0.8rem;
}

.card-zona p { font-size: 0.93rem; }
.card-zona > p:nth-of-type(2) { flex: 1; }

/* Dos datos duros por ficha: son los que deciden si el municipio es «el mío»
   antes de entrar. Van al pie, separados por una línea, para que no compitan
   con el titular. */
.card-zona__datos {
  list-style: none;
  display: flex;
  gap: 1.6rem;
  margin: 1.1rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--linea);
}

.card-zona__datos li { display: flex; flex-direction: column; gap: 0.1rem; }

.card-zona__datos span {
  font-family: var(--f-display);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gris);
}

.card-zona__datos strong { font-size: 0.95rem; color: var(--tinta); }

/* El reclamo no es enlace: el titular ya cubre la tarjeta entera. */
.card-zona__mas {
  margin: 0.9rem 0 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--teja);
}

.card-zona:hover .card-zona__mas { color: var(--teja-oscuro); }

/* Chips de zona enlazables: el padding pasa al <a> para dar área táctil */
.zonas--enlaces li { padding: 0; }
.zonas--enlaces li::before { content: none; }
.zonas--enlaces a { display: block; padding: 0.6rem 1.2rem; color: var(--tinta); }
.zonas--enlaces a:hover { color: var(--teja); }
.zonas--enlaces a::before { content: "▲ "; color: var(--teja); font-size: 0.7em; }

/* Tabla de perfil de la zona: sin cabecera, dos columnas */
.tabla--perfil { min-width: 0; }
.tabla--perfil th[scope="row"] { width: 45%; }

/* ---------- Artículos del blog ---------- */

.hero__inner--post { max-width: 760px; }

.post__categoria {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blanco);
  background: var(--teja);
  padding: 0.3rem 0.75rem;
  border-radius: 3px;
  margin-bottom: 1rem;
}

.post__meta {
  font-size: 0.88rem;
  color: var(--gris);
  margin: 0;
  padding-top: 1.1rem;
  border-top: 3px solid var(--ocre);
  display: inline-block;
}

.post__meta a { font-weight: 700; }

.post__figura { margin: 2.2rem 0; }

/* Caja «lo esencial» */
.post__clave {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-left: 5px solid var(--ocre);
  padding: 1.8rem 1.8rem 1.4rem;
  margin: 2.4rem 0;
  box-shadow: var(--sombra);
}

.post__clave h2 {
  font-size: 1.15rem !important;
  margin-top: 0 !important;
  margin-bottom: 1rem;
  color: var(--tinta);
}

.post__clave .lista-check { margin-bottom: 0; }
.post__clave li { font-size: 0.95rem; }

/* Índice de contenidos */
.post__toc {
  background: #f7f2ea;
  border: 1px dashed var(--linea);
  padding: 1.6rem 1.8rem 1.4rem;
  margin: 2.4rem 0 2.8rem;
}

.post__toc h2 {
  font-size: 1.05rem !important;
  margin-top: 0 !important;
  margin-bottom: 0.8rem;
  color: var(--tinta);
}

.post__toc ol {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.4rem;
  font-size: 0.94rem;
}

.post__toc a { font-weight: 600; }

/* La nav es sticky: los anclajes del índice deben dejarle sitio */
.post h2[id] { scroll-margin-top: 90px; }

/* Cita destacada */
.post__cita {
  margin: 2.6rem 0;
  padding: 1.6rem 1.8rem 1.6rem 3.4rem;
  background: var(--marron);
  color: #efe7df;
  position: relative;
  border-left: 5px solid var(--ocre);
}

.post__cita::before {
  content: "\201C";
  position: absolute;
  left: 1.1rem;
  top: 0.35em;
  font-family: var(--f-display);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--ocre);
}

.post__cita p {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.45;
}

/* Bloque imagen + texto dentro del artículo */
.post__split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1.8rem;
  align-items: center;
  margin: 2.6rem 0;
  padding: 1.6rem;
  background: var(--blanco);
  border: 1px solid var(--linea);
}

.post__split img { margin: 0; border-width: 4px; }
.post__split h3 { margin-top: 0 !important; font-size: 1.1rem; }
.post__split p { font-size: 0.95rem; }
.post__split p:last-child { margin-bottom: 0; }

@media (max-width: 720px) {
  .post__split { grid-template-columns: 1fr; padding: 1.2rem; }
  .post__cita { padding: 1.3rem 1.3rem 1.3rem 2.8rem; }
  .post__cita p { font-size: 1.02rem; }
}

/* Firma del artículo */
.post__firma {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linea);
  font-size: 0.9rem;
  font-style: italic;
  color: var(--gris);
}

/* Los pasos dentro de un artículo respiran algo menos */
.post .pasos { margin: 1.6rem 0 2rem; }

/* Lista de enlaces de la barra lateral */
.lista-enlaces { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }

.lista-enlaces a {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  padding-left: 1.1rem;
  position: relative;
}

.lista-enlaces__nota {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--gris);
  padding-left: 1.1rem;
  margin-top: 0.15rem;
}

.lista-enlaces a::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--ocre);
}

/* Tarjeta de artículo: el pie de fecha admite <time> */
.card-post__fecha time { color: inherit; }

/* ---------- Páginas legales ---------- */

.legal { max-width: 820px; }

.legal__fecha {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gris);
  border-bottom: 1px solid var(--linea);
  padding-bottom: 1rem;
  margin-bottom: 2.4rem;
}

.legal .prosa h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin-top: 3rem; }
.legal .prosa h3 { font-size: 1.05rem; }
.legal .prosa p,
.legal .prosa li { font-size: 0.97rem; }
.legal code {
  background: #f2ece2;
  padding: 0.1em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
}

/* ---------- Casilla de consentimiento de los formularios ---------- */

.form .form__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--gris);
  line-height: 1.45;
}

.form .form__consent input[type="checkbox"] {
  width: 20px;
  min-width: 20px;
  height: 20px;
  margin: 0.15rem 0 0;
  padding: 0;
  accent-color: var(--teja);
}

.form-goteras__aviso {
  font-size: 0.78rem;
  color: #b9aea6;
  margin: 0.2rem 0 0;
}

.form-goteras__aviso a { color: var(--ocre); text-decoration: underline; }

/* ---------- Responsive de los bloques nuevos ---------- */

@media (max-width: 980px) {
  .grid-servicio { grid-template-columns: 1fr; }
  .aside-servicio { position: static; }
  .relacionados { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}

/* ---------- Áreas táctiles en móvil ---------- */

@media (max-width: 640px) {
  .social a { min-width: 40px; min-height: 40px; }
  .social svg { width: 18px; height: 18px; }
  .miga a { display: inline-block; padding: 0.25rem 0; }
  .post__toc a { display: inline-block; padding: 0.3rem 0; }
  .caja-lateral__tel { padding: 0.3rem 0; }
  .relacionados a { padding: 1.5rem 1.4rem; }
}

@media (max-width: 640px) {
  .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    border-top: 1px solid var(--linea);
    box-shadow: none;
    min-width: 0;
    padding: 0;
    background: var(--crema);
  }
  .submenu a { padding-left: 2.4rem; }
  .nav__lista .tiene-hijos > a::after { display: none; }
  .pasos li { padding-left: 3.6rem; }
  .pasos li::before { width: 2.6rem; height: 2.6rem; font-size: 0.95rem; }
}


/* ---------- Base endurecida (rendimiento y mobile) ---------- */

/* Cero scroll horizontal en móvil pase lo que pase con un hijo ancho */
html, body { overflow-x: hidden; }
html { -webkit-text-size-adjust: 100%; }

/* Con width/height en el <img> hace falta height:auto o la imagen se deforma
   al limitarla con max-width. Sin los atributos, vuelve el CLS. */
img { height: auto; }

/* El navegador no maqueta lo que aún no se ve. Se reserva el alto aproximado
   para que la barra de scroll no dé saltos. */
.seccion:not(:first-of-type),
.band-goteras,
.band-presupuesto,
.footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* Áreas táctiles: WCAG 2.2 SC 2.5.8 pide 24x24 CSS px como mínimo absoluto;
   la casa exige 44x44 en lo que se toca de verdad. */
@media (pointer: coarse) {
  .topbar__datos a,
  .nav__lista a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
  }
  .footer ul a,
  .footer__legal a {
    display: inline-block;
    padding: 0.62rem 0;
  }
}

/* ---------- Tarjeta entera pulsable ---------- */
/* El enlace del titular se estira sobre toda la tarjeta: un solo destino, un
   área táctil de tarjeta completa y ningún <a> duplicado a la misma URL. */

.card-post,
.card-zona,
.card-servicio--compacta { position: relative; }

.card-post h3 a::after,
.card-zona h3 a::after,
.card-servicio--compacta h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* El reclamo ya no es enlace: mantiene el aspecto y hereda el color al pasar
   el ratón por la tarjeta. */
span.card-post__mas { color: var(--teja); cursor: pointer; }
.card-post:hover span.card-post__mas,
.card-zona:hover span.card-post__mas { color: var(--teja-oscuro); }

/* ---------- Enlace contextual a la home ---------- */

.enlace-home {
  border-left: 3px solid var(--ocre);
  padding-left: 1rem;
  margin: 1.6rem 0 0;
  font-size: 0.97rem;
}

/* ---------- FAQ de la home ---------- */

.faq--home { max-width: 900px; }

/* ---------- Sección de contenido de valor (texto + imagen) ---------- */
/* Banda con tono propio: se distingue tanto de .seccion (crema) como de
   .seccion--blanca, así que puede caer junto a cualquiera de las dos. */

.seccion--valor {
  background: #f4ece0;
  border-block: 1px solid var(--linea);
}

.valor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 3rem;
  align-items: start;
}

.valor--inv .valor__media { order: 2; }

/* La columna de texto es bastante más alta que el dibujo: en vez de dejar un
   hueco muerto, la imagen acompaña la lectura (mismo recurso que el aside de
   las páginas de servicio, con su mismo desplome bajo la barra de navegación). */
.valor__media { margin: 0; position: sticky; top: 84px; }

.valor__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 8px solid var(--blanco);
  box-shadow: var(--sombra);
}

.valor__kicker {
  font-family: var(--f-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teja);
  margin: 0 0 0.6rem;
}

.valor__texto h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); margin: 0 0 1.1rem; }
.valor__texto p { margin-bottom: 1rem; }
.valor__texto > p:last-child { margin-bottom: 0; }

/* Leyenda: los números casan con las chinchetas del dibujo */
.valor__lista {
  margin: 1.4rem 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
  counter-reset: capa;
  list-style: none;
}

.valor__lista li {
  position: relative;
  padding-left: 2.5rem;
  font-size: 0.95rem;
}

ol.valor__lista li::before {
  counter-increment: capa;
  content: counter(capa);
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--marron);
  color: var(--blanco);
  font-family: var(--f-display);
  font-size: 0.85rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

ul.valor__lista li::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0.55em;
  width: 0.7rem;
  height: 0.7rem;
  background: var(--ocre);
  transform: rotate(45deg);
}

.valor__lista strong { color: var(--tinta); }

/* Tira de datos: tres cifras técnicas bajo el bloque */
.valor__datos {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.valor__datos li {
  background: var(--blanco);
  border-top: 4px solid var(--ocre);
  padding: 1.3rem 1.4rem;
  box-shadow: var(--sombra);
}

.valor__datos strong {
  display: block;
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.1;
  color: var(--teja);
  margin-bottom: 0.35rem;
}

.valor__datos span { font-size: 0.88rem; display: block; }

@media (max-width: 880px) {
  .valor { grid-template-columns: 1fr; gap: 2rem; }
  .valor--inv .valor__media { order: 0; }
  .valor__media { position: static; }
  .valor__datos { grid-template-columns: 1fr; gap: 1rem; margin-top: 2.2rem; }
  .valor__datos li { padding: 1.1rem 1.2rem; }
  .valor__media img { border-width: 6px; }
}

/* ---------- Barra de acción fija en móvil ---------- */
/* Solo por debajo de 768px: en escritorio el equivalente es .fab (botón
   flotante de presupuesto), una barra a todo lo ancho ahí solo roba alto
   de pantalla. */

.cta-movil { display: none; }

@media (max-width: 767px) {
  .cta-movil {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 900;
    background: var(--marron);
    border-top: 3px solid var(--teja);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .cta-movil a {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    color: var(--crema);
  }

  .cta-movil a + a { border-left: 1px solid rgba(251, 247, 241, 0.22); }
  .cta-movil a:first-child { color: var(--ocre); }
  .cta-movil svg { width: 20px; height: 20px; flex: none; }

  /* Que la barra no tape el final del pie */
  body { padding-bottom: 56px; }
}

/* ---------- Firma del autor (blog y /empresa/) ---------- */

.post__autor {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 1.4rem;
  align-items: start;
  margin-top: 3rem;
  padding: 1.8rem;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--teja);
  border-radius: var(--radio);
}

.post__autor-avatar {
  width: 72px; height: 72px; margin: 0;
  border-radius: 50%;
  border: 3px solid var(--teja);
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--teja);
  background: var(--crema);
}

.post__autor p { margin: 0 0 0.4rem; }
.post__autor-nombre {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.15rem;
  color: var(--tinta);
}
.post__autor-cargo { font-size: 0.95rem; color: var(--gris); }
.post__autor-bio { font-size: 0.98rem; }
.post__autor-fecha { font-size: 0.88rem; color: var(--gris); margin-bottom: 0; }

@media (max-width: 620px) {
  .post__autor { grid-template-columns: 1fr; gap: 1rem; padding: 1.4rem; }
}

/* ==========================================================================
   9ª tanda — rediseño de tarjetas, banda de presupuesto y bloque de valor,
   más los componentes de las secciones semánticas nuevas.
   ========================================================================== */

/* ---------- Tarjeta de servicio (cluster de la home y «qué incluye») ------ */
/* Antes: caja plana, icono suelto de 64 px y un precio grande que dominaba la
   tarjeta. Ahora el icono va en pastilla, el titular es tinta (el naranja se
   reserva para el acento) y el pie lleva la llamada a la acción, que es lo que
   ocupaba el precio. Flex en columna para que las seis tarjetas alineen pie. */

.card-servicio--compacta {
  display: flex;
  flex-direction: column;
  padding: 2.1rem 1.7rem 1.5rem;
  border-radius: var(--radio);
  overflow: hidden;
}

.card-servicio--compacta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--ocre);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicion);
}

.card-servicio--compacta:hover::before,
.card-servicio--compacta:focus-within::before { transform: scaleX(1); }

.card-servicio--compacta .card-servicio__icono {
  width: 62px;
  height: 62px;
  margin: 0 0 1.15rem;
  padding: 13px;
  color: var(--teja);
  background: var(--crema);
  border: 1px solid var(--linea);
  border-radius: 50%;
  transition: background var(--transicion), color var(--transicion);
}

.card-servicio--compacta:hover .card-servicio__icono {
  background: var(--teja);
  color: var(--blanco);
  border-color: var(--teja);
}

.card-servicio--compacta h3 { font-size: 1.28rem; line-height: 1.25; }
.card-servicio--compacta h3 a { color: var(--tinta); }
.card-servicio--compacta:hover h3 a { color: var(--teja); }
.card-servicio--compacta > p { font-size: 0.95rem; }
.card-servicio--compacta .card-servicio__perks { flex: 1; }

/* ---------- Banda de presupuesto a dos columnas ---------- */
/* Antes el formulario flotaba a la derecha y la mitad izquierda era foto
   vacía. Ahora esa mitad sostiene el argumentario (y las KW transaccionales)
   y el teléfono; el formulario mantiene su tarjeta blanca. */

.band-presupuesto {
  background:
    linear-gradient(90deg, rgba(43, 36, 32, 0.88) 0%, rgba(43, 36, 32, 0.72) 55%, rgba(43, 36, 32, 0.6) 100%),
    url("../assets/img/fondo-tejado.svg") center / cover no-repeat;
}

.band-presupuesto__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: 3.5rem;
  align-items: center;
}

.band-presupuesto__texto { color: #efe7dd; }

.band-presupuesto__texto .valor__kicker { color: var(--ocre); }

.band-presupuesto__texto h2 {
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  color: var(--blanco);
  margin: 0 0 1rem;
}

.band-presupuesto__texto h2 em { font-style: normal; color: var(--ocre); }
.band-presupuesto__texto > p { max-width: 46ch; }

.band-presupuesto__ventajas {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}

.band-presupuesto__ventajas li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 1rem;
  align-items: start;
  font-size: 0.96rem;
}

.band-presupuesto__ventajas svg {
  width: 44px;
  height: 44px;
  padding: 10px;
  color: var(--ocre);
  border: 1px solid rgba(233, 180, 76, 0.45);
  border-radius: 50%;
}

.band-presupuesto__ventajas strong {
  display: block;
  font-family: var(--f-display);
  color: var(--blanco);
  font-size: 1.02rem;
}

.band-presupuesto__tel {
  margin: 2.2rem 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.92rem;
}

.band-presupuesto__tel a {
  display: block;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  color: var(--blanco);
  line-height: 1.2;
}

.band-presupuesto__tel a:hover { color: var(--ocre); }

.band-presupuesto__caja {
  max-width: none;
  margin-left: 0;
  border-radius: var(--radio);
  border-top: 5px solid var(--teja);
  text-align: left;
  padding: 2.4rem 2.2rem;
}

.band-presupuesto__caja .form-caja__titulo {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.35rem;
  color: var(--tinta);
  margin: 0 0 0.4rem;
}

.band-presupuesto__caja .form-caja__sub {
  font-size: 0.93rem;
  margin: 0 0 1.4rem;
}

.band-presupuesto__caja .btn { width: 100%; }

@media (max-width: 980px) {
  .band-presupuesto__grid { grid-template-columns: 1fr; gap: 2.6rem; }
  .band-presupuesto__caja { max-width: 520px; margin-inline: auto; }
}

/* ---------- Bloque de valor: columna de imagen con más peso ---------- */
/* El texto es mucho más alto que el dibujo y bajo la imagen quedaba un vacío.
   La columna pasa a ser una pieza completa: marco, pie y tarjeta de contacto,
   todo desplomado junto bajo la barra de navegación. */

.valor__col { position: sticky; top: 84px; display: grid; gap: 1.4rem; }
.valor__col .valor__media { position: static; }

.valor__media {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 0.9rem 0.9rem 0;
  overflow: hidden;
}

.valor__media img {
  border: 0;
  box-shadow: none;
  border-radius: 4px;
  background: var(--crema);
}

.valor__media .media-pie {
  margin: 0;
  padding: 0.9rem 0.3rem 1rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--gris);
  border-top: 1px solid var(--linea);
  margin-top: 0.9rem;
}

.valor__ficha {
  background: var(--marron);
  color: #e6ddd4;
  border-radius: var(--radio);
  padding: 1.4rem 1.5rem;
}

.valor__ficha p { margin: 0 0 0.5rem; font-size: 0.9rem; }

.valor__ficha strong {
  display: block;
  font-family: var(--f-display);
  color: var(--blanco);
  font-size: 1.05rem;
  margin-bottom: 0.3rem;
}

.valor__ficha a.valor__ficha-tel {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.45rem;
  color: var(--ocre);
  display: block;
  line-height: 1.3;
}

.valor__ficha a.valor__ficha-tel:hover { color: var(--blanco); }

.valor__lista li { padding-left: 2.7rem; line-height: 1.6; }

/* ---------- Sección dúo (texto-imagen / imagen-texto) ---------- */

.seccion--duo { background: var(--blanco); }
.seccion--duo + .seccion--duo { border-top: 1px solid var(--linea); }

.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3.4rem;
  align-items: center;
}

.duo + .duo { margin-top: 4.5rem; }
.duo--inv .duo__media { order: 2; }

.duo__media { position: relative; margin: 0; }

/* Cuadrado de color desplazado detrás de la imagen: da profundidad sin pedir
   otra petición al servidor. */
.duo__media::before {
  content: "";
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 62%;
  height: 62%;
  background: var(--ocre);
  opacity: 0.22;
  border-radius: var(--radio);
}

.duo--inv .duo__media::before { right: auto; left: -14px; }

.duo__media img {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  background: var(--crema);
  border: 8px solid var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.duo__media figcaption {
  position: relative;
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--gris);
  border-left: 3px solid var(--ocre);
  padding-left: 0.8rem;
}

.duo__texto h2 { font-size: clamp(1.5rem, 3.4vw, 2.05rem); margin: 0 0 1.1rem; }
.duo__texto h3 { font-size: 1.1rem; margin: 1.6rem 0 0.5rem; }
.duo__texto p { margin-bottom: 1rem; }
.duo__texto > p:last-child { margin-bottom: 0; }

/* ---------- Lista de iconos vectoriales (dúo, home, zonas) ---------- */

.lista-iconos {
  list-style: none;
  margin: 1.7rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.3rem;
}

.lista-iconos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 2rem; }
.lista-iconos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem 2rem; }

.lista-iconos li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 1rem;
  align-items: start;
  font-size: 0.94rem;
}

.lista-iconos svg {
  width: 46px;
  height: 46px;
  padding: 10px;
  color: var(--teja);
  background: var(--crema);
  border: 1px solid var(--linea);
  border-radius: 50%;
}

.seccion--blanca .lista-iconos svg { background: var(--crema); }

/* El párrafo de cierre que va detrás de la lista necesita aire: la lista no
   lleva margen inferior para poder ser el último elemento del bloque. */
.lista-iconos + p { margin-top: 1.7rem; }

.lista-iconos strong {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--tinta);
  font-size: 1.02rem;
  line-height: 1.35;
  margin-bottom: 0.15rem;
}

@media (max-width: 900px) {
  .lista-iconos--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .lista-iconos--2,
  .lista-iconos--3 { grid-template-columns: 1fr; }
}

/* ---------- Glosario de términos del oficio (capa semántica) ---------- */

.glosario {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2.2rem;
}

.glosario > div {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--ocre);
  border-radius: var(--radio);
  padding: 1.1rem 1.3rem;
}

.glosario dt {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--tinta);
  font-size: 1.02rem;
  margin-bottom: 0.25rem;
}

.glosario dd { margin: 0; font-size: 0.93rem; }

@media (max-width: 720px) {
  .glosario { grid-template-columns: 1fr; gap: 1rem; }
}

@media (max-width: 880px) {
  .duo { grid-template-columns: 1fr; gap: 2.2rem; }
  .duo--inv .duo__media { order: 0; }
  .duo + .duo { margin-top: 3.2rem; }
  .valor__col { position: static; }
}

/* ==========================================================================
   10ª tanda — cabecera con descripción ampliada, tarjeta de servicio con
   imagen, cuadrícula de zonas 5 × 2 y bloque de mapa al pie.
   ========================================================================== */

/* ---------- Cabecera: reclamo + descripción ---------- */
/* El `hero__sub` conserva su filete ocre y pasa a ser el reclamo corto; debajo
   entra la descripción larga, en cuerpo de lectura y con medida controlada
   para que no llegue a los 120 caracteres por línea en pantallas anchas. */

.hero__sub {
  margin-bottom: 0.9rem;
  max-width: 34rem;
  font-weight: 600;
}

.hero__desc {
  max-width: 44rem;
  margin: 0 0 2.2rem;
  font-size: 1.02rem;
  line-height: 1.68;
  color: var(--gris);
}

.hero--interior .hero__desc { margin-bottom: 2rem; }

@media (max-width: 620px) {
  .hero__desc { font-size: 0.97rem; line-height: 1.6; }
}

/* ---------- Tarjeta de servicio con imagen (cluster de la home) ---------- */
/* La lista de tres viñetas se sustituye por la descripción completa en prosa,
   y la tarjeta gana un hueco de imagen a sangre. El icono baja a caballo del
   borde inferior de la foto: mantiene la identidad de la tarjeta sin robarle
   una línea de altura al texto. */

.card-servicio--foto { padding-top: 0; }

.card-servicio__media {
  margin: 0 -1.7rem 0;
  background: var(--granito);
  border-bottom: 1px solid var(--linea);
  overflow: hidden;
}

.card-servicio__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform var(--transicion);
}

.card-servicio--foto:hover .card-servicio__media img { transform: scale(1.04); }

.card-servicio--foto .card-servicio__icono {
  position: relative;
  z-index: 1;
  margin: -34px 0 1rem;
  background: var(--blanco);
  box-shadow: 0 4px 14px rgba(43, 36, 32, 0.14);
}

/* La descripción estira para que las seis tarjetas cierren a la misma altura. */
.card-servicio--foto > p { flex: 1; margin-bottom: 0; }

@media (max-width: 620px) {
  .card-servicio__media { margin-inline: -1.7rem; }
  .card-servicio__media img { aspect-ratio: 16 / 9; }
}

/* ---------- Cuadrícula de zonas de la home (4 × 3) ---------- */
/* Sustituye a la fila de píldoras con el nombre pelado: cada cajita lleva
   comarca, distancia real y una línea de contexto. Doce huecos exactos: once
   municipios con página propia y la caja que lleva al hub. */

.grid-zonas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;   /* las tres filas iguales aunque una lleve más texto */
  gap: 1.1rem;
}

.zona-mini {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.15rem 1.1rem 1.25rem;
  padding-right: 4.6rem;   /* hueco del distintivo de distancia */
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}

.zona-mini:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra);
  border-color: #e0d4c0;
}

.zona-mini h3 {
  font-size: 1.05rem;
  line-height: 1.25;
  margin: 0;
}

.zona-mini h3 a { color: var(--tinta); }
.zona-mini:hover h3 a { color: var(--teja); }

/* El enlace del título cubre la caja entera: área táctil completa sin duplicar
   anclas hacia la misma URL. */
.zona-mini h3 a::after { content: ""; position: absolute; inset: 0; }

.zona-mini__dato {
  font-family: var(--f-display);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teja);
  margin: 0;
}

.zona-mini p:last-child {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--gris);
}

/* Distancia real desde la nave, en distintivo: es el dato que más se mira
   («¿de verdad venís hasta aquí?») y el que ordena mentalmente la cuadrícula. */
.zona-mini__km {
  position: absolute;
  top: 0.95rem;
  right: 0.95rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: #fdf3df;
  color: var(--teja-oscuro);
  font-family: var(--f-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.zona-mini--hub {
  background: var(--marron);
  border-color: var(--marron);
  padding-right: 1.1rem;
}

.zona-mini--hub h3 a,
.zona-mini--hub:hover h3 a { color: var(--blanco); }
.zona-mini--hub .zona-mini__dato { color: var(--ocre); }
.zona-mini--hub p:last-child { color: #cfc4bb; }

@media (max-width: 1080px) {
  .grid-zonas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .card-zona__datos { gap: 1.1rem; }
}

@media (max-width: 720px) {
  .grid-zonas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
  .zona-mini { padding: 1rem 0.9rem 1.1rem; padding-right: 0.9rem; }
  .zona-mini h3 { font-size: 0.98rem; }
  /* En dos columnas no cabe el distintivo flotando: pasa a línea de datos. */
  .zona-mini__km {
    position: static;
    align-self: flex-start;
    order: -1;
    margin-bottom: 0.15rem;
  }
}

/* ---------- «Profesionales de tejados en …» (páginas de zona) ---------- */
/* Prosa a la izquierda y cuatro fichas verificables a la derecha: el texto
   convence y las fichas se escanean en tres segundos, que es lo que hace el
   que compara tres empresas a la vez. */

.pro-bloque {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.pro-bloque__texto p { color: var(--gris); }
.pro-bloque__texto .entradilla { color: var(--tinta); }
.pro-bloque__texto .btn { margin-top: 1.8rem; }

.pro-bloque__fichas { display: grid; gap: 0.9rem; }

.pro-ficha {
  display: flex;
  gap: 0.95rem;
  padding: 1.15rem 1.25rem;
  background: var(--crema);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  transition: border-color var(--transicion), transform var(--transicion);
}

.pro-ficha:hover { border-color: #e0d4c0; transform: translateX(3px); }

.pro-ficha__icono {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 0.15rem;
  color: var(--teja);
}

.pro-ficha h3 {
  font-family: var(--f-display);
  font-size: 1rem;
  line-height: 1.3;
  margin: 0 0 0.3rem;
  color: var(--tinta);
}

.pro-ficha p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--gris);
}

/* ---------- «Tejados económicos en …» (páginas de zona) ---------- */
/* Tres palancas numeradas: es la objeción del precio respondida con criterio
   en vez de con un número inventado. */

.eco-intro {
  max-width: 820px;
  margin: 0 auto 2.6rem;
  text-align: center;
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--gris);
}

.eco-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}

.eco-card {
  position: relative;
  padding: 2.2rem 1.7rem 1.8rem;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}

.eco-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--ocre);
}

.eco-card__num {
  display: block;
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ocre);
  margin-bottom: 0.7rem;
}

.eco-card h3 {
  font-size: 1.08rem;
  line-height: 1.3;
  margin: 0 0 0.55rem;
  color: var(--tinta);
}

.eco-card p { margin: 0; font-size: 0.93rem; color: var(--gris); }

/* Cierre honesto: lo que NO abarata. Va en caja marrón para que no se lea como
   una card más y cierre la sección con el CTA. */
.eco-cierre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  margin-top: 2.2rem;
  padding: 1.9rem 2rem;
  background: var(--marron);
  border-radius: var(--radio);
}

.eco-cierre p {
  flex: 1 1 420px;
  margin: 0;
  color: #e6ddd4;
  font-size: 0.95rem;
  line-height: 1.6;
}

.eco-cierre .btn { flex: none; }

@media (max-width: 980px) {
  .pro-bloque { grid-template-columns: 1fr; gap: 2.2rem; }
  .eco-grid { grid-template-columns: 1fr; }
  .eco-intro { text-align: left; }
}

@media (max-width: 620px) {
  .eco-cierre { padding: 1.5rem 1.3rem; }
  .eco-cierre .btn { width: 100%; text-align: center; }
}

/* ---------- Bloque de mapa al pie de cada página ---------- */

.seccion--mapa { background: var(--crema); border-top: 1px solid var(--linea); }

.mapa-bloque {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 3rem;
  align-items: center;
}

.mapa-bloque__texto h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 1rem; }
.mapa-bloque__texto > p { margin-bottom: 1.4rem; }

.mapa-bloque__nap {
  font-style: normal;
  line-height: 1.75;
  padding-left: 1.1rem;
  border-left: 3px solid var(--ocre);
}

.mapa-bloque__nap strong {
  display: block;
  font-family: var(--f-display);
  color: var(--tinta);
}

.mapa-bloque__nap span { font-size: 0.88rem; color: var(--gris); }

.mapa-bloque__pie { margin: 1.2rem 0 0; font-size: 0.88rem; }

/* Los atributos width/height del <iframe> están para reservar el hueco antes
   de que cargue (CLS). En pantalla manda la proporción del CSS, así que la
   altura vuelve a auto para que `aspect-ratio` gobierne de verdad. */
.mapa-bloque .mapa { height: auto; border-radius: var(--radio); }

@media (max-width: 900px) {
  .mapa-bloque { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------- Botones flotantes de escritorio (subir / presupuesto) ---------- */
/* Bajo 768px ya cumple ese papel .cta-movil: mostrar los dos a la vez
   duplicaría el CTA y taparía el pie por partida doble. */

.fab {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 850;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.7rem;
  opacity: 1;
  transition: opacity var(--transicion), transform var(--transicion);
}

.fab.fab--oculto {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

.fab__subir {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 50%;
  background: var(--blanco);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra);
  color: var(--tinta);
  transition: transform var(--transicion), color var(--transicion);
}

.fab__subir:hover, .fab__subir:focus-visible { color: var(--teja); transform: translateY(-3px); }
.fab__subir svg { width: 20px; height: 20px; }

.fab__presupuesto {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.3rem;
  border-radius: 999px;
  background: var(--ocre);
  color: var(--tinta);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  text-decoration: none;
  box-shadow: var(--sombra);
  transition: background var(--transicion), transform var(--transicion);
}

.fab__presupuesto:hover, .fab__presupuesto:focus-visible { background: var(--ocre-oscuro); transform: translateY(-3px); }
.fab__presupuesto svg { width: 18px; height: 18px; flex: none; }

@media (max-width: 767px) {
  .fab { display: none; }
}

/* ---------- Fondos decorativos empotrados ---------- */
/* Generados por tools/_tav2_css.py: ahorran dos peticiones en el camino
   crítico (el navegador no los descubre hasta haber parseado el CSS). */

.hero__patron { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E %3Cg fill='none' stroke='%23c6cadf' stroke-width='1.5' opacity='0.55'%3E %3Cpath d='M-35 70 a35 35 0 0 1 70 0'/%3E%3Cpath d='M35 70 a35 35 0 0 1 70 0'/%3E%3Cpath d='M105 70 a35 35 0 0 1 70 0'/%3E %3Cpath d='M0 140 a35 35 0 0 1 70 0'/%3E%3Cpath d='M70 140 a35 35 0 0 1 70 0'/%3E %3Cpath d='M0 0 a35 35 0 0 1 70 0'/%3E%3Cpath d='M70 0 a35 35 0 0 1 70 0'/%3E %3C/g%3E %3C/svg%3E"); }
.feston { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='46' viewBox='0 0 92 46'%3E%3Cpath d='M0 46 A46 46 0 0 1 92 46 Z' fill='%23fbf7f1'/%3E%3C/svg%3E"); }

/* ==== FIN SERVICIOS ==== */

/* ==== AJUSTES SEO / ACCESIBILIDAD 2026-10-02 (fuera de los bloques generados) ==== */
/* 42: enlaces y botón teja con contraste AA (#b8441c sobre blanco = 5,4:1) */
a { color: var(--teja-oscuro); }
main p a:not([class]) { text-decoration: underline; text-underline-offset: 0.15em; }
.btn--teja { background: var(--teja-oscuro); }
main:focus { outline: none; }
/* 43: estrellas SVG */
.card-testimonio__estrellas svg { display: block; }
/* 26: etiqueta de la obra enlazada a su servicio */
a.card-proyecto__tag { text-decoration: none; color: var(--teja-oscuro); }
a.card-proyecto__tag:hover { background: rgba(217, 91, 46, 0.18); }
/* 24: zonas en las páginas de servicio */
.zonas-servicio { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
@media (max-width: 900px) { .zonas-servicio { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .zonas-servicio { grid-template-columns: repeat(2, 1fr); } }
.zonas-servicio li.zonas-servicio__todas { background: var(--marron); border-color: var(--marron); }
.zonas-servicio .zonas-servicio__todas a { color: var(--blanco); }
.zonas-servicio .zonas-servicio__todas a:hover { color: var(--ocre); }
.zonas-servicio .zonas-servicio__todas span { color: #cfc4bb; }
.zonas-servicio li { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.15rem; }
.zonas-servicio a { font-weight: 700; color: var(--tinta); text-decoration: none; min-height: 24px; }
.zonas-servicio a:hover { color: var(--teja-oscuro); }
.zonas-servicio span { font-size: 0.85rem; color: var(--gris); }
.zonas-servicio__guia { max-width: 760px; margin: 1.8rem auto 0; text-align: center; }