/* ==========================================================================
   Cerrajeros en Oviedo — hoja de estilos principal
   Sitio estático, sin dependencias externas.

   Criterio cromático: la página es esencialmente monocroma —blancos, grises y
   un carbón oscuro—. El rojo de la marca es el único color y queda reservado a
   lo accionable: el botón de llamar, la página activa y poco más. El verde
   aparece solo dentro del glifo de WhatsApp, para que se reconozca.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Escala neutra */
  --ink: #14181f;
  --ink-2: #333a45;
  --muted: #6a7280;
  --muted-2: #8c939d;
  --line: #e4e6ea;
  --line-2: #eef0f3;
  --bg: #ffffff;
  --bg-alt: #f7f8f9;
  --bg-soft: #eef0f3;

  /* Superficies oscuras */
  --dark: #16191f;
  --dark-2: #22262e;
  --dark-3: #2f343d;

  /* Único acento */
  --accent: #c0392b;
  --accent-dark: #a33124;

  /* WhatsApp: solo el glifo */
  --wa: #25d366;

  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(20, 24, 31, .05);
  --shadow-md: 0 2px 6px rgba(20, 24, 31, .07), 0 8px 20px rgba(20, 24, 31, .06);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
  --wrap: 1180px;
  --header-h: 78px;

  --e-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, iframe { max-width: 100%; }
img { height: auto; display: block; border: 0; }

/* El atributo hidden solo aplica display:none desde la hoja del navegador, que
   pierde frente a cualquier regla de autor con display. El buscador de zonas
   depende de él, así que se refuerza aquí. */
[hidden] { display: none !important; }

a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  margin: 0 0 .6em;
  line-height: 1.25;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -.018em;
}

h1 { font-size: clamp(1.45rem, 1rem + 2.1vw, 2.6rem); }
h2 { font-size: clamp(1.2rem, 1rem + 1.1vw, 1.85rem); }
h3 { font-size: clamp(1.02rem, .96rem + .35vw, 1.22rem); }
h4 { font-size: 1.02rem; }

p { margin: 0 0 1.15em; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.35em; }
li { margin-bottom: .4em; }
strong, b { font-weight: 650; color: var(--ink); }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

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

/* ---------- 3. Utilidades ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.narrow { max-width: 860px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 8px; top: -60px;
  z-index: 999;
  background: var(--ink); color: #fff;
  padding: 10px 18px; border-radius: 0 0 6px 6px;
  transition: top .2s;
}
.skip-link:focus { top: 0; }

.section { padding: clamp(2.1rem, 1.1rem + 4.2vw, 4.5rem) 0; }
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--line-2); }
.section--navy { background: var(--dark); color: #b6bcc6; }
.section--navy h2, .section--navy h3 { color: #fff; }

.section-head { text-align: center; max-width: 720px; margin: 0 auto clamp(1.3rem, 3.2vw, 2.6rem); }
.section-head p { color: var(--muted); font-size: 1.02rem; margin-bottom: 0; }
.section--navy .section-head p { color: #9aa1ac; }

.eyebrow {
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: .6rem;
}
.section--navy .eyebrow { color: #7d858f; }

.rule {
  width: 40px; height: 2px;
  background: var(--ink);
  margin: 0 auto 1.3rem;
  opacity: .25;
}
.section--navy .rule { background: #fff; opacity: .3; }

/* ---------- 4. Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 50px;
  padding: .8rem 1.6rem;
  background: var(--ink);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: .98rem;
  font-weight: 650;
  text-align: center;
  cursor: pointer;
  transition: background-color .16s, border-color .16s, color .16s;
}
.btn:hover { background: var(--dark-3); text-decoration: none; color: #fff; }

/* El único botón con color: la acción principal del sitio */
.btn--primary, .cta-strip .btn:not(.btn--wa) { background: var(--accent); }
.btn--primary:hover, .cta-strip .btn:not(.btn--wa):hover { background: var(--accent-dark); }

.btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .4);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .7); }

.btn--navy { background: var(--ink); }
.btn--navy:hover { background: var(--dark-3); }

.btn--wa { background: var(--dark-2); }
.btn--wa:hover { background: var(--dark-3); }
.btn--wa svg { fill: var(--wa); }

.btn--lg { min-height: 56px; font-size: 1.05rem; padding: .95rem 2rem; }
.btn--block { display: flex; width: 100%; }

.btn svg { width: 19px; height: 19px; fill: currentColor; flex: none; }

/* ---------- 5. Barra superior en marquesina ---------- */
.topbar {
  background: var(--dark);
  color: #a8afb9;
  font-size: .82rem;
}

/* Dos copias idénticas de la lista dentro de un carril que se desplaza media
   anchura: al llegar al 50 % la segunda copia ocupa exactamente la posición
   inicial de la primera, así que el bucle no tiene costura. */
.ticker {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4rem,
                                      #000 calc(100% - 4rem), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4rem,
                                      #000 calc(100% - 4rem), transparent);
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 46s linear infinite;
}
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track { animation-play-state: paused; }

.ticker-group {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  list-style: none;
  margin: 0;
  padding: 0 1.2rem;
  min-height: 36px;
}
.ticker-group li {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  white-space: nowrap;
}
.ticker-group svg { width: 14px; height: 14px; fill: #6f7885; flex: none; }
.ticker-group li:last-child span { color: #fff; font-weight: 650; }

@keyframes ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ---------- 6. Cabecera ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }

.header-top {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  min-height: 78px;
}

.brand { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.brand:hover { text-decoration: none; }
.brand img { height: 42px; width: auto; }
.brand-text {
  display: flex; align-items: center;
  padding-left: .8rem;
  border-left: 1px solid var(--line);
}
.brand-tag {
  font-size: .7rem; color: var(--muted-2); font-weight: 650;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.3;
  max-width: 6em;
}

.header-actions { display: flex; align-items: center; gap: .45rem; }

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.05rem;
  min-height: 44px;
  border-radius: var(--radius);
  font-weight: 650;
  font-size: .92rem;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color .16s, border-color .16s;
}
.header-cta:hover { text-decoration: none; }
.header-cta svg { width: 17px; height: 17px; flex: none; }

.header-cta--call { background: var(--accent); color: #fff; }
.header-cta--call:hover { background: var(--accent-dark); color: #fff; }
.header-cta--call svg { fill: currentColor; }

.header-cta--wa { background: #fff; color: var(--ink); border-color: var(--line); }
.header-cta--wa:hover { background: var(--bg-alt); color: var(--ink); border-color: var(--muted-2); }
.header-cta--wa svg { fill: var(--wa); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: var(--ink);
  border: 0; border-radius: var(--radius);
  color: #fff; cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; fill: currentColor; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.mainnav-head, .nav-close, .mainnav-cta { display: none; }

.mainnav { margin-left: auto; }
.mainnav ul {
  display: flex;
  align-items: center;
  gap: .1rem;
  list-style: none;
  margin: 0; padding: 0;
}
.mainnav li { margin: 0; }
.mainnav ul a {
  display: block;
  position: relative;
  padding: .7rem .75rem;
  color: var(--ink-2);
  font-weight: 650;
  font-size: .93rem;
  transition: color .16s;
}
.mainnav ul a:hover { color: var(--ink); text-decoration: none; }
.mainnav ul a[aria-current="page"] { color: var(--ink); }
.mainnav ul a[aria-current="page"]::after {
  content: "";
  position: absolute; left: .75rem; right: .75rem; bottom: .3rem;
  height: 2px;
  background: var(--accent);
}

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(360px, 54vh, 520px);
  padding: clamp(2.8rem, 7vw, 5rem) 0;
  color: #fff;
  isolation: isolate;
  text-align: center;

  /* Es el elemento LCP: la imagen se declara aquí y no en un style inline, para
     que image-set() permita al navegador quedarse solo con el WebP. */
  background: var(--dark) url("/assets/img/cerrajeros-oviedo-imagen-frontal-01.jpg")
              center / cover no-repeat;
  background-image: -webkit-image-set(
    url("/assets/img/cerrajeros-oviedo-imagen-frontal-01.webp") type("image/webp"),
    url("/assets/img/cerrajeros-oviedo-imagen-frontal-01.jpg") type("image/jpeg"));
  background-image: image-set(
    url("/assets/img/cerrajeros-oviedo-imagen-frontal-01.webp") type("image/webp"),
    url("/assets/img/cerrajeros-oviedo-imagen-frontal-01.jpg") type("image/jpeg"));
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(16, 18, 22, .62), rgba(16, 18, 22, .82));
}
.hero--page { min-height: auto; padding: clamp(2.2rem, 5vw, 3.4rem) 0; text-align: left; }

/* ---------- 7b. Foto de cabecera por seccion ----------
   Cada concejo lleva la foto de su ciudad, la misma en todas sus
   localidades, y las paginas de servicio la del trabajo del que hablan.
   Solo cambia la imagen: el velo de .hero::after y el resto del hero no
   varian, asi que el titular sigue legible sobre cualquiera de ellas.
   Sin clase, el hero se queda con la foto general de arriba.
   El diseno movil de estas mismas fotos esta en la seccion 21. */

/* Oviedo y sus localidades */
.hero.hero--oviedo {
  background-image: url("/assets/img/hero-oviedo.jpg");
  background-image: -webkit-image-set(
    url("/assets/img/hero-oviedo.webp") type("image/webp"),
    url("/assets/img/hero-oviedo.jpg") type("image/jpeg"));
  background-image: image-set(
    url("/assets/img/hero-oviedo.webp") type("image/webp"),
    url("/assets/img/hero-oviedo.jpg") type("image/jpeg"));
}

/* Gijon y sus localidades */
.hero.hero--gijon {
  background-image: url("/assets/img/hero-gijon.jpg");
  background-image: -webkit-image-set(
    url("/assets/img/hero-gijon.webp") type("image/webp"),
    url("/assets/img/hero-gijon.jpg") type("image/jpeg"));
  background-image: image-set(
    url("/assets/img/hero-gijon.webp") type("image/webp"),
    url("/assets/img/hero-gijon.jpg") type("image/jpeg"));
}

/* Siero y sus localidades */
.hero.hero--siero {
  background-image: url("/assets/img/hero-siero.jpg");
  background-image: -webkit-image-set(
    url("/assets/img/hero-siero.webp") type("image/webp"),
    url("/assets/img/hero-siero.jpg") type("image/jpeg"));
  background-image: image-set(
    url("/assets/img/hero-siero.webp") type("image/webp"),
    url("/assets/img/hero-siero.jpg") type("image/jpeg"));
}

/* Langreo y sus localidades */
.hero.hero--langreo {
  background-image: url("/assets/img/hero-langreo.jpg");
  background-image: -webkit-image-set(
    url("/assets/img/hero-langreo.webp") type("image/webp"),
    url("/assets/img/hero-langreo.jpg") type("image/jpeg"));
  background-image: image-set(
    url("/assets/img/hero-langreo.webp") type("image/webp"),
    url("/assets/img/hero-langreo.jpg") type("image/jpeg"));
}

/* Mieres y sus localidades */
.hero.hero--mieres {
  background-image: url("/assets/img/hero-mieres.jpg");
  background-image: -webkit-image-set(
    url("/assets/img/hero-mieres.webp") type("image/webp"),
    url("/assets/img/hero-mieres.jpg") type("image/jpeg"));
  background-image: image-set(
    url("/assets/img/hero-mieres.webp") type("image/webp"),
    url("/assets/img/hero-mieres.jpg") type("image/jpeg"));
}

/* Llanera y sus localidades */
.hero.hero--llanera {
  background-image: url("/assets/img/hero-llanera.jpg");
  background-image: -webkit-image-set(
    url("/assets/img/hero-llanera.webp") type("image/webp"),
    url("/assets/img/hero-llanera.jpg") type("image/jpeg"));
  background-image: image-set(
    url("/assets/img/hero-llanera.webp") type("image/webp"),
    url("/assets/img/hero-llanera.jpg") type("image/jpeg"));
}

/* Resto de Asturias y el indice de zonas */
.hero.hero--asturias {
  background-image: url("/assets/img/hero-asturias.jpg");
  background-image: -webkit-image-set(
    url("/assets/img/hero-asturias.webp") type("image/webp"),
    url("/assets/img/hero-asturias.jpg") type("image/jpeg"));
  background-image: image-set(
    url("/assets/img/hero-asturias.webp") type("image/webp"),
    url("/assets/img/hero-asturias.jpg") type("image/jpeg"));
}

/* Pagina de servicios */
.hero.hero--servicios {
  background-image: url("/assets/img/hero-servicios.jpg");
  background-image: -webkit-image-set(
    url("/assets/img/hero-servicios.webp") type("image/webp"),
    url("/assets/img/hero-servicios.jpg") type("image/jpeg"));
  background-image: image-set(
    url("/assets/img/hero-servicios.webp") type("image/webp"),
    url("/assets/img/hero-servicios.jpg") type("image/jpeg"));
}

/* Cambio de cerraduras y precios */
.hero.hero--cerraduras {
  background-image: url("/assets/img/hero-cerraduras.jpg");
  background-image: -webkit-image-set(
    url("/assets/img/hero-cerraduras.webp") type("image/webp"),
    url("/assets/img/hero-cerraduras.jpg") type("image/jpeg"));
  background-image: image-set(
    url("/assets/img/hero-cerraduras.webp") type("image/webp"),
    url("/assets/img/hero-cerraduras.jpg") type("image/jpeg"));
}

/* Apertura de puertas */
.hero.hero--apertura {
  background-image: url("/assets/img/hero-apertura.jpg");
  background-image: -webkit-image-set(
    url("/assets/img/hero-apertura.webp") type("image/webp"),
    url("/assets/img/hero-apertura.jpg") type("image/jpeg"));
  background-image: image-set(
    url("/assets/img/hero-apertura.webp") type("image/webp"),
    url("/assets/img/hero-apertura.jpg") type("image/jpeg"));
}

/* Dos columnas: el discurso a la izquierda, el formulario a la derecha. Al
   convivir con la columna del formulario, el texto deja de ir centrado. */
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px;
  gap: clamp(1.6rem, 3.5vw, 3rem);
  align-items: center;
  width: 100%;
}
.hero-inner .hero-main { text-align: left; }
.hero-inner .hero-main .lead { margin-inline: 0; }
.hero-inner .hero-badges,
.hero-inner .hero-actions { justify-content: flex-start; }

.hero-form {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  color: var(--ink-2);
  text-align: left;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}
.hero-form-title {
  margin: 0 0 .3rem;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}
.hero-form-sub { margin: 0 0 1.1rem; font-size: .88rem; color: var(--muted); line-height: 1.5; }

.hero-form label {
  display: block;
  margin-bottom: .3rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-form input {
  width: 100%;
  min-height: 46px;
  margin-bottom: .9rem;
  padding: .6rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-alt);
  font: inherit;
  font-size: .94rem;
  color: var(--ink);
  transition: border-color .16s, background-color .16s;
}
.hero-form input::placeholder { color: var(--muted-2); }
.hero-form input:focus { background: #fff; border-color: var(--ink-2); outline: none; }

.hero-form .btn { margin-top: .2rem; background: var(--accent); }
.hero-form .btn:hover { background: var(--accent-dark); }
.hero-form .btn svg { fill: #fff; }

.hero-form-alt {
  margin: .9rem 0 0;
  text-align: center;
  font-size: .87rem;
  color: var(--muted);
}
.hero-form-alt a { font-weight: 700; color: var(--ink); }

.hero h1 { color: #fff; margin-bottom: .5rem; }
.hero .lead {
  font-size: clamp(1rem, .95rem + .45vw, 1.18rem);
  color: #c4cad3;
  max-width: 660px;
  margin: 0 auto 1.6rem;
}
.hero--page .lead { margin-inline: 0; }
.hero .eyebrow { color: #8f97a3 !important; }

.hero-badges {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .45rem; list-style: none; margin: 0 0 1.5rem; padding: 0;
}
.hero--page .hero-badges { justify-content: flex-start; }
.hero-badges li {
  display: inline-flex; align-items: center; gap: .4rem;
  margin: 0;
  padding: .32rem .8rem;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 100px;
  font-size: .82rem;
  font-weight: 600;
  color: #dfe3e8;
}
.hero-badges svg { width: 13px; height: 13px; fill: #9aa2ae; flex: none; }

.hero-actions { display: flex; flex-wrap: wrap; gap: .65rem; justify-content: center; }
.hero--page .hero-actions { justify-content: flex-start; }

/* Sobre el fondo oscuro del hero, un boton en tinta no se distinguiria:
   la accion principal se resuelve con el acento. */
.hero .btn:not(.btn--ghost):not(.btn--wa) { background: var(--accent); }
.hero .btn:not(.btn--ghost):not(.btn--wa):hover { background: var(--accent-dark); }

.hero-phone { display: block; margin-top: 1.2rem; font-size: .88rem; color: #9aa2ae; }
.hero-phone strong { color: #fff; font-size: 1.25rem; }

/* ---------- 8. Barra de confianza ---------- */
.trustbar { background: var(--bg-alt); border-bottom: 1px solid var(--line); padding: .9rem 0; }
.trustbar ul {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .7rem 2.2rem; list-style: none; margin: 0; padding: 0;
}
.trustbar li {
  display: flex; align-items: center; gap: .5rem;
  margin: 0; font-size: .88rem; font-weight: 600; color: var(--ink-2);
}
.trustbar svg { width: 17px; height: 17px; fill: var(--muted-2); flex: none; }

/* ---------- 9. Rejillas y tarjetas ---------- */
.grid { display: grid; gap: clamp(.9rem, 2vw, 1.3rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.3rem, 2.5vw, 1.7rem);
  transition: border-color .16s, box-shadow .16s;
}
.card:hover { border-color: var(--muted-2); box-shadow: var(--shadow-sm); }
.card h3 { margin-bottom: .4rem; text-wrap: balance; }
.card p { color: var(--muted); margin-bottom: 0; font-size: .95rem; }
.card h3 a { color: inherit; }
.card h3 a:hover { color: var(--accent-dark); text-decoration: none; }

.card-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  margin-bottom: .9rem;
  border-radius: var(--radius);
  background: var(--bg-soft);
  color: var(--ink-2);
}
.card-icon svg { width: 21px; height: 21px; fill: currentColor; }

/* Tarjetas rematadas con un botón: los textos miden distinto, así que el
   botón se empuja al fondo y queda a la misma altura en toda la fila. */
.card--cta { display: flex; flex-direction: column; }
.card--cta .card-cta { margin-top: auto; padding-top: 1.2rem; }

/* En una fila de cuatro los títulos alternan una y dos líneas y descuadran el
   arranque de los párrafos: se reserva la altura de dos para todos. */
.grid--4 .card h3 { min-height: 2.5em; display: flex; align-items: flex-end; }

/* Localidades */
.places { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.place {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .75rem .9rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-2);
  font-weight: 600;
  font-size: .92rem;
  min-height: 48px;
  transition: border-color .16s, background-color .16s;
}
.place:hover {
  text-decoration: none;
  border-color: var(--ink-2);
  background: var(--bg-alt);
  color: var(--ink);
}
.place svg { width: 14px; height: 14px; fill: var(--muted-2); flex: none; }

.zone-title {
  display: flex; align-items: center; gap: .7rem;
  font-size: .82rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); font-weight: 700; margin: 2rem 0 .9rem;
}
.zone-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.zone-title:first-child { margin-top: 0; }

/* Grupos de zona plegables.
   El contenido sigue en el HTML aunque el grupo esté cerrado, así que los
   enlaces internos y el texto se indexan igual; solo se ahorra desplazamiento. */
/* Buscador de localidades. El campo lleva un borde oscuro y marcado: es el
   control principal de la página y tiene que leerse como algo donde escribir. */
.place-search { max-width: 560px; margin: 0 auto clamp(1.6rem, 3vw, 2.4rem); }
.place-search label {
  display: block;
  margin-bottom: .5rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.place-search input {
  width: 100%;
  min-height: 52px;
  padding: .75rem 1rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  transition: box-shadow .16s;
}
.place-search input::placeholder { color: var(--muted-2); font-size: .95rem; }
.place-search input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(20, 24, 31, .12);
}

.place-empty { text-align: center; color: var(--muted); }

/* Notas al pie de sección */
.nota-legal { font-size: .92rem; color: var(--muted); }
.nota-centrada { text-align: center; margin: 1.8rem 0 0; font-size: .9rem; color: var(--muted); }
.card-lead { color: var(--muted); }

.zone-concejo { margin-bottom: 2.4rem; }
.zone-concejo-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .3rem .6rem;
  margin-bottom: .8rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--line);
}
.zone-concejo-title a { color: var(--ink); }
.zone-concejo-title a:hover { color: var(--accent-dark); }
.zone-concejo-title span {
  font-size: .84rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}

.zone-group { border-bottom: 1px solid var(--line-2); }
.zone-group:last-child { border-bottom: 0; }

.zone-group > summary {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .75rem .2rem;
  min-height: 46px;
  cursor: pointer;
  list-style: none;
  color: var(--ink-2);
  transition: color .16s;
}
.zone-group > summary::-webkit-details-marker { display: none; }
.zone-group > summary:hover { color: var(--ink); }

/* Chevron: gira al abrir, para que se lea de un vistazo que el bloque despliega */
.zone-group > summary::before {
  content: "";
  width: 8px; height: 8px;
  flex: none;
  margin-left: .15rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform .2s var(--e-out);
}
.zone-group[open] > summary::before { transform: rotate(45deg); }
.zone-group > summary:hover::before { border-color: var(--ink); }

.zone-group-name {
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* El contador anticipa cuánto hay dentro antes de abrir */
.zone-group-count {
  margin-left: auto;
  padding: .1rem .5rem;
  background: var(--bg-soft);
  border-radius: 100px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
}
.zone-group[open] .zone-group-count { background: var(--line-2); }

.zone-group .places { padding: .3rem 0 1.1rem; }

/* Concejos: rejilla de 4 columnas exactas; con 8 tarjetas salen dos filas
   completas y no queda ningún hueco suelto al final. */
.concejos { display: grid; gap: .8rem; grid-template-columns: repeat(4, 1fr); }

.concejo {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .1rem;
  min-height: 132px;
  padding: 1.1rem;
  border-radius: var(--radius-lg);
  background: var(--dark);
  color: #fff;
  border: 1px solid transparent;
  transition: background-color .18s;
}
.concejo:hover { text-decoration: none; color: #fff; background: var(--dark-3); }
.concejo strong {
  display: block;
  font-size: clamp(1.02rem, .92rem + .4vw, 1.18rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  text-wrap: balance;
}
.concejo span { font-size: .82rem; color: #9aa2ae; line-height: 1.35; }

.concejo--all { background: #fff; border-color: var(--line); color: var(--ink); }
.concejo--all:hover { background: var(--bg-alt); color: var(--ink); }
.concejo--all strong { color: var(--ink); }
.concejo--all span { color: var(--muted); }

/* ---------- 10. Pasos ---------- */
.steps { counter-reset: step; display: grid; gap: 1.3rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.step { position: relative; padding-top: 3.2rem; }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; top: 0; left: 0;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  font-weight: 700; font-size: 1rem;
}
.step h3 { margin-bottom: .3rem; }
.step p { color: var(--muted); font-size: .94rem; margin: 0; }
.section--navy .step p { color: #9aa1ac; }

/* ---------- 11. Tabla ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 460px; }
caption { text-align: left; padding: .95rem 1.15rem; color: var(--muted); font-size: .86rem; }
th, td { padding: .85rem 1.15rem; text-align: left; border-bottom: 1px solid var(--line-2); }
thead th {
  background: var(--bg-alt); color: var(--ink); font-weight: 700;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
  border-bottom: 1px solid var(--line);
}
tbody tr:last-child td { border-bottom: 0; }
td:last-child { font-weight: 700; color: var(--ink); white-space: nowrap; }

/* ---------- 12. Reseñas ---------- */
.review {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.3rem 1.4rem;
}
.stars { display: flex; gap: 2px; margin-bottom: .6rem; }
.stars svg { width: 15px; height: 15px; fill: #d8a33a; }
.review blockquote { margin: 0 0 .8rem; font-size: .96rem; color: var(--ink-2); }
.review cite { font-style: normal; font-weight: 700; color: var(--ink); font-size: .88rem; }
.review cite span { display: block; font-weight: 400; color: var(--muted); font-size: .8rem; }

/* ---------- 13. FAQ ---------- */
.faq { display: grid; gap: .5rem; max-width: 860px; margin-inline: auto; }
.faq details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq details[open] { border-color: var(--muted-2); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  cursor: pointer;
  font-weight: 650;
  color: var(--ink);
  list-style: none;
  min-height: 54px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 9px; height: 9px;
  flex: none;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-3px);
  transition: transform .2s var(--e-out);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq summary:hover { background: var(--bg-alt); }
.faq .faq-body { padding: 0 1.2rem 1.1rem; color: var(--muted); }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* ---------- 14. Migas ---------- */
.breadcrumbs { background: var(--bg-alt); border-bottom: 1px solid var(--line); font-size: .84rem; }
.breadcrumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  list-style: none; margin: 0; padding: .7rem 0;
}
.breadcrumbs li { display: flex; align-items: center; gap: .4rem; margin: 0; color: var(--muted); }
.breadcrumbs li + li::before { content: "/"; color: var(--muted-2); }
.breadcrumbs a { color: var(--ink-2); font-weight: 600; }
.breadcrumbs [aria-current="page"] { color: var(--muted); }

/* ---------- 15. Contenido ---------- */
.layout { display: grid; gap: clamp(1.6rem, 3.5vw, 2.8rem); grid-template-columns: minmax(0, 1fr) 300px; align-items: start; padding: clamp(2rem, 4.5vw, 3.2rem) 0; }

.prose { min-width: 0; font-size: 1.03rem; }
.prose h2 {
  margin-top: 2.4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { margin-top: 1.8rem; scroll-margin-top: calc(var(--header-h) + 20px); }
.prose img { margin: 1.6rem auto; border-radius: var(--radius); }
.prose a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 1.5rem; margin-bottom: .5rem; }
.prose ul li::before {
  content: "";
  position: absolute; left: .1rem; top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--muted-2);
}

.map-embed {
  position: relative;
  margin: 1.8rem 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9;
  background: var(--bg-soft);
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
  margin: 2.2rem 0;
  padding: 1.4rem 1.6rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
}
.callout-text { flex: 1 1 260px; }
.callout strong { display: block; color: var(--ink); font-size: 1.1rem; font-weight: 700; margin-bottom: .15rem; }
.callout span { color: var(--muted); font-size: .92rem; }

/* ---------- 16. Barra lateral ---------- */
.sidebar { position: sticky; top: calc(var(--header-h) + 18px); display: grid; gap: 1rem; }

.widget {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.2rem;
}
.widget h2, .widget h3 {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--muted);
  margin-bottom: .9rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line-2);
}
.widget--cta { background: var(--dark); border-color: var(--dark); color: #a8afb9; text-align: center; }
.widget--cta h2 { color: #fff; border-color: rgba(255, 255, 255, .14); }
.widget--cta .phone-big {
  display: block;
  font-size: 1.45rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .2rem;
}
.widget--cta .phone-big:hover { color: #fff; text-decoration: none; }
.widget--cta p { font-size: .86rem; margin-bottom: 1rem; }
.widget--cta .btn { width: 100%; }
.widget--cta .btn + .btn { margin-top: .5rem; }
.widget--cta .btn--wa { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); }
.widget--cta .btn--wa:hover { background: rgba(255, 255, 255, .16); }

.toc ol { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.toc li { margin-bottom: 0; }
.toc a {
  display: block;
  padding: .38rem .55rem;
  border-radius: 5px;
  color: var(--muted);
  font-weight: 600;
  border-left: 2px solid transparent;
}
.toc a:hover { background: var(--bg-alt); text-decoration: none; color: var(--ink); }
.toc a.is-active { border-left-color: var(--accent); color: var(--ink); background: var(--bg-alt); }
.toc .toc-sub { padding-left: 0; }
.toc .toc-sub a { padding-left: 1.4rem; font-weight: 400; font-size: .87rem; }

.linklist { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.linklist li { margin: 0; border-bottom: 1px solid var(--line-2); }
.linklist li:last-child { border-bottom: 0; }
.linklist a {
  display: block;
  padding: .5rem 0;
  color: var(--ink-2);
  font-weight: 600;
}
.linklist a:hover { color: var(--accent-dark); text-decoration: none; }

/* ---------- 17. Franja CTA ---------- */
.cta-strip {
  background: var(--dark);
  color: #b6bcc6;
  padding: clamp(2.4rem, 4.5vw, 3.2rem) 0;
  text-align: center;
}
.cta-strip h2 { color: #fff; margin-bottom: .5rem; }
.cta-strip p { color: #9aa1ac; max-width: 600px; margin: 0 auto 1.5rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .65rem; justify-content: center; }
.cta-strip .btn--wa { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); }
.cta-strip .btn--wa:hover { background: rgba(255, 255, 255, .16); }

/* ---------- 18. Pie ---------- */
.site-footer { background: var(--dark); color: #8d949e; font-size: .9rem; padding: clamp(2.4rem, 4.5vw, 3.2rem) 0 0; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding-bottom: 2.2rem; }
.site-footer h2, .site-footer h3 {
  color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .11em; margin-bottom: 1rem;
}
.site-footer a { color: #adb4bd; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .5rem; }

.footer-brand img {
  height: 40px; width: auto;
  margin-bottom: 1rem;
  padding: 7px 10px;
  background: #fff;
  border-radius: 6px;
}
.footer-contact li { display: flex; align-items: flex-start; gap: .55rem; }
.footer-contact svg { width: 15px; height: 15px; fill: #6f7885; flex: none; margin-top: .35em; }
.footer-phone { font-size: 1.1rem; font-weight: 700; color: #fff !important; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 1.2rem 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  align-items: center; justify-content: space-between;
  font-size: .82rem;
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.footer-bottom li { margin: 0; }

/* ---------- 19. Contacto flotante en móvil ---------- */
.callbar { display: none; }

/* ---------- 20. Páginas genéricas ---------- */
.center-block { text-align: center; max-width: 640px; margin-inline: auto; padding: clamp(3rem, 7vw, 5rem) 0; }
.code-404 { font-size: clamp(3.5rem, 12vw, 6.5rem); font-weight: 700; color: var(--line); line-height: 1; margin: 0; letter-spacing: -.04em; }

/* ---------- 21. Responsive ---------- */
@media (max-width: 1180px) {
  .header-cta span { display: none; }
  .header-cta { padding: .55rem .8rem; }
}

@media (max-width: 991px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .hero-form { max-width: 460px; }
  .concejos { grid-template-columns: repeat(2, 1fr); }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; }
  .sidebar .widget--toc { display: none; }
}

@media (max-width: 860px) {
  :root { --header-h: 58px; }

  /* En móvil el formulario del hero empujaba el contenido demasiado abajo. El
     contacto se resuelve con el botón de llamar y los dos botones redondos. */
  .hero-form { display: none; }

  .ticker-group { gap: 1.8rem; min-height: 34px; }
  .ticker-track { animation-duration: 34s; }

  .header-top { min-height: 58px; gap: .6rem; }
  .mainnav { margin-left: 0; }
  .brand-text { display: none; }
  .brand img { height: 34px; }
  .header-actions { display: none; }

  .nav-toggle { display: flex; margin-left: auto; }

  .mainnav {
    position: fixed;
    inset: 0;
    z-index: 120;
    background: #fff;
    padding: 0 20px 3rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .26s var(--e-out), visibility .26s;
  }
  .mainnav.is-open { transform: translateX(0); visibility: visible; }

  .mainnav-head {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 64px;
    margin-bottom: .5rem;
    padding-block: .5rem;
    background: #fff;
    border-bottom: 1px solid var(--line);
  }
  .mainnav-head img { height: 38px; width: auto; }

  .nav-close {
    display: flex;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    flex: none;
    background: var(--bg-alt);
    border: 0; border-radius: var(--radius);
    color: var(--ink); cursor: pointer;
  }
  .nav-close svg { width: 18px; height: 18px; fill: currentColor; }

  .mainnav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .mainnav li { border-bottom: 1px solid var(--line-2); }
  .mainnav ul a { padding: .9rem .3rem; font-size: 1.02rem; min-height: 50px; }
  .mainnav ul a[aria-current="page"]::after { display: none; }

  .mainnav-cta { display: flex; margin-top: .9rem; }

  body.nav-open { overflow: hidden; }
}

@media (max-width: 700px) {
  /* Densidad: en el móvil la escala de escritorio deja demasiado aire y obliga
     a desplazarse de más para llegar a lo que importa. Todo se ajusta un punto,
     manteniendo los 44 px mínimos de área táctil en cualquier elemento pulsable. */
  body { font-size: 15.5px; padding-bottom: 70px; }

  .wrap { padding-inline: 16px; }

  /* --- Cabecera y marquesina --- */
  .ticker-group { gap: 1.5rem; min-height: 30px; }
  .topbar { font-size: .76rem; }
  .ticker-group svg { width: 12px; height: 12px; }

  /* --- Hero ---
     La fotografía es 16:9. Usada como fondo de un bloque vertical se recortaba
     a un primer plano del que no se entendía nada, y el texto encima quedaba
     descolgado. En móvil se separa en dos piezas: la imagen arriba con su
     proporción real —así entra completa, sin recorte vertical— y el texto
     debajo sobre fondo sólido, centrado y compacto. */
  .hero {
    display: block;
    min-height: 0;
    padding: 0;
    background-color: var(--dark);
    background-image: none;
    text-align: center;
  }
  .hero::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--dark) center 32% / cover no-repeat;
    background-image: -webkit-image-set(
      url("/assets/img/cerrajeros-oviedo-imagen-frontal-01.webp") type("image/webp"),
      url("/assets/img/cerrajeros-oviedo-imagen-frontal-01.jpg") type("image/jpeg"));
    background-image: image-set(
      url("/assets/img/cerrajeros-oviedo-imagen-frontal-01.webp") type("image/webp"),
      url("/assets/img/cerrajeros-oviedo-imagen-frontal-01.jpg") type("image/jpeg"));
  }
  /* Sin velo: ya no hay texto sobre la imagen */
  .hero::after { display: none; }

  /* La foto de cada seccion, ahora en el bloque de arriba. */
  .hero.hero--oviedo { background-image: none; }
  .hero.hero--oviedo::before {
    background-image: url("/assets/img/hero-oviedo.jpg");
    background-image: -webkit-image-set(
      url("/assets/img/hero-oviedo.webp") type("image/webp"),
      url("/assets/img/hero-oviedo.jpg") type("image/jpeg"));
    background-image: image-set(
      url("/assets/img/hero-oviedo.webp") type("image/webp"),
      url("/assets/img/hero-oviedo.jpg") type("image/jpeg"));
  }
  .hero.hero--gijon { background-image: none; }
  .hero.hero--gijon::before {
    background-image: url("/assets/img/hero-gijon.jpg");
    background-image: -webkit-image-set(
      url("/assets/img/hero-gijon.webp") type("image/webp"),
      url("/assets/img/hero-gijon.jpg") type("image/jpeg"));
    background-image: image-set(
      url("/assets/img/hero-gijon.webp") type("image/webp"),
      url("/assets/img/hero-gijon.jpg") type("image/jpeg"));
  }
  .hero.hero--siero { background-image: none; }
  .hero.hero--siero::before {
    background-image: url("/assets/img/hero-siero.jpg");
    background-image: -webkit-image-set(
      url("/assets/img/hero-siero.webp") type("image/webp"),
      url("/assets/img/hero-siero.jpg") type("image/jpeg"));
    background-image: image-set(
      url("/assets/img/hero-siero.webp") type("image/webp"),
      url("/assets/img/hero-siero.jpg") type("image/jpeg"));
  }
  .hero.hero--langreo { background-image: none; }
  .hero.hero--langreo::before {
    background-image: url("/assets/img/hero-langreo.jpg");
    background-image: -webkit-image-set(
      url("/assets/img/hero-langreo.webp") type("image/webp"),
      url("/assets/img/hero-langreo.jpg") type("image/jpeg"));
    background-image: image-set(
      url("/assets/img/hero-langreo.webp") type("image/webp"),
      url("/assets/img/hero-langreo.jpg") type("image/jpeg"));
  }
  .hero.hero--mieres { background-image: none; }
  .hero.hero--mieres::before {
    background-image: url("/assets/img/hero-mieres.jpg");
    background-image: -webkit-image-set(
      url("/assets/img/hero-mieres.webp") type("image/webp"),
      url("/assets/img/hero-mieres.jpg") type("image/jpeg"));
    background-image: image-set(
      url("/assets/img/hero-mieres.webp") type("image/webp"),
      url("/assets/img/hero-mieres.jpg") type("image/jpeg"));
  }
  .hero.hero--llanera { background-image: none; }
  .hero.hero--llanera::before {
    background-image: url("/assets/img/hero-llanera.jpg");
    background-image: -webkit-image-set(
      url("/assets/img/hero-llanera.webp") type("image/webp"),
      url("/assets/img/hero-llanera.jpg") type("image/jpeg"));
    background-image: image-set(
      url("/assets/img/hero-llanera.webp") type("image/webp"),
      url("/assets/img/hero-llanera.jpg") type("image/jpeg"));
  }
  .hero.hero--asturias { background-image: none; }
  .hero.hero--asturias::before {
    background-image: url("/assets/img/hero-asturias.jpg");
    background-image: -webkit-image-set(
      url("/assets/img/hero-asturias.webp") type("image/webp"),
      url("/assets/img/hero-asturias.jpg") type("image/jpeg"));
    background-image: image-set(
      url("/assets/img/hero-asturias.webp") type("image/webp"),
      url("/assets/img/hero-asturias.jpg") type("image/jpeg"));
  }
  .hero.hero--servicios { background-image: none; }
  .hero.hero--servicios::before {
    background-image: url("/assets/img/hero-servicios.jpg");
    background-image: -webkit-image-set(
      url("/assets/img/hero-servicios.webp") type("image/webp"),
      url("/assets/img/hero-servicios.jpg") type("image/jpeg"));
    background-image: image-set(
      url("/assets/img/hero-servicios.webp") type("image/webp"),
      url("/assets/img/hero-servicios.jpg") type("image/jpeg"));
  }
  .hero.hero--cerraduras { background-image: none; }
  .hero.hero--cerraduras::before {
    background-image: url("/assets/img/hero-cerraduras.jpg");
    background-image: -webkit-image-set(
      url("/assets/img/hero-cerraduras.webp") type("image/webp"),
      url("/assets/img/hero-cerraduras.jpg") type("image/jpeg"));
    background-image: image-set(
      url("/assets/img/hero-cerraduras.webp") type("image/webp"),
      url("/assets/img/hero-cerraduras.jpg") type("image/jpeg"));
  }
  .hero.hero--apertura { background-image: none; }
  .hero.hero--apertura::before {
    background-image: url("/assets/img/hero-apertura.jpg");
    background-image: -webkit-image-set(
      url("/assets/img/hero-apertura.webp") type("image/webp"),
      url("/assets/img/hero-apertura.jpg") type("image/jpeg"));
    background-image: image-set(
      url("/assets/img/hero-apertura.webp") type("image/webp"),
      url("/assets/img/hero-apertura.jpg") type("image/jpeg"));
  }

  .hero .wrap { padding-block: 1.5rem 1.8rem; }
  .hero--page .wrap { padding-block: 1.3rem 1.5rem; }

  .hero-inner { gap: 1.1rem; }
  .hero-inner .hero-main { text-align: center; }
  .hero-inner .hero-main .lead { margin-inline: auto; }
  .hero .lead { font-size: .94rem; line-height: 1.55; margin-bottom: 1.1rem; }
  .hero .eyebrow { display: block; margin-bottom: .4rem; }
  .hero h1 { margin-bottom: .45rem; }

  /* Dos columnas iguales en lugar de un flujo que dejaba 3 + 1 descolgado */
  .hero-badges {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem;
    margin-bottom: 1.15rem;
  }
  .hero-badges li { justify-content: center; padding: .3rem .5rem; font-size: .74rem; }
  .hero-badges svg { width: 11px; height: 11px; }
  /* Si son tres, el último ocupa la fila entera y la rejilla no queda coja */
  .hero-badges li:nth-child(3):last-child { grid-column: 1 / -1; }

  /* El número ya está escrito dentro del botón de llamar */
  .hero-phone { display: none; }

  /* Botones a todo el ancho, apilados: son la acción principal */
  .hero-actions { flex-direction: column; gap: .5rem; }
  .hero-actions .btn--lg {
    width: 100%;
    min-height: 50px;
    font-size: .98rem;
    padding: .7rem 1.15rem;
  }

  /* --- Formulario --- */
  .hero-form { padding: 1.1rem; border-radius: 10px; }
  .hero-form-title { font-size: 1rem; }
  .hero-form-sub { font-size: .83rem; margin-bottom: .8rem; line-height: 1.45; }
  .hero-form label { font-size: .7rem; margin-bottom: .22rem; }
  .hero-form input { min-height: 44px; margin-bottom: .65rem; font-size: .9rem; }
  .hero-form .btn { min-height: 46px; font-size: .93rem; }
  .hero-form-alt { font-size: .82rem; margin-top: .75rem; }

  /* --- Botones generales --- */
  .btn { min-height: 46px; font-size: .93rem; padding: .65rem 1.2rem; }
  .btn--lg { min-height: 48px; font-size: .96rem; padding: .7rem 1.35rem; }
  .btn svg { width: 17px; height: 17px; }

  /* --- Bloques de contenido --- */
  .card { padding: 1.05rem; }
  .card-icon { width: 38px; height: 38px; margin-bottom: .7rem; }
  .card-icon svg { width: 18px; height: 18px; }
  .card p { font-size: .91rem; }
  .grid--4 .card h3 { min-height: 0; display: block; }

  .trustbar { padding: .7rem 0; }
  .trustbar ul { gap: .5rem 1.4rem; }
  .trustbar li { font-size: .82rem; }
  .trustbar svg { width: 15px; height: 15px; }

  .steps { gap: 1rem; }
  .step { padding-top: 2.7rem; }
  .step::before { width: 34px; height: 34px; font-size: .9rem; }
  .step p { font-size: .89rem; }

  .places { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: .4rem; }
  .place { font-size: .86rem; padding: .6rem .7rem; min-height: 44px; }

  .zone-concejo { margin-bottom: 1.8rem; }
  .place-search input { min-height: 48px; font-size: .95rem; }
  .zone-group > summary { padding: .65rem .1rem; min-height: 44px; }
  .zone-group-name { font-size: .78rem; }
  .zone-group .places { padding: .2rem 0 .9rem; }

  .concejos { grid-template-columns: repeat(2, 1fr); gap: .55rem; }
  .concejo { min-height: 94px; padding: .8rem; }
  .concejo span { font-size: .76rem; }

  .faq summary { padding: .85rem 1rem; min-height: 48px; font-size: .95rem; }
  .faq .faq-body { padding: 0 1rem 1rem; font-size: .93rem; }

  th, td { padding: .7rem .9rem; }
  caption { padding: .8rem .9rem; font-size: .82rem; }

  .callout { padding: 1.05rem; gap: .8rem; }
  .callout strong { font-size: 1rem; }

  .prose { font-size: 1rem; }
  .prose h2 { margin-top: 2rem; padding-top: 1.2rem; }
  .prose h3 { margin-top: 1.4rem; }
  .prose img { margin: 1.2rem auto; }

  .widget { padding: 1rem; }
  .cta-strip { padding: 2.1rem 0; }
  .cta-actions { gap: .5rem; }

  .site-footer { font-size: .87rem; }
  .footer-grid { gap: 1.6rem; padding-bottom: 1.8rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* --- Texto centrado ---
     En móvil todo el contenido se alinea al centro. Los elementos que combinan
     texto con un icono o un contador se recolocan para que el texto quede
     centrado de verdad y no desplazado por el elemento lateral. */
  .prose,
  .prose h2, .prose h3, .prose h4, .prose p,
  .card, .card p, .step, .step p,
  .widget, .linklist, .toc,
  .callout, .callout-text,
  .zone-concejo-title,
  .site-footer, .footer-grid > div,
  .place-search label,
  .hero-form, .hero-form-title, .hero-form-sub, .hero-form label,
  th, td, caption,
  .review, .review blockquote, .review cite { text-align: center; }

  .breadcrumbs ol { justify-content: center; }
  .footer-bottom { align-items: center; text-align: center; }
  .footer-bottom ul { justify-content: center; }
  .footer-contact li { justify-content: center; }
  .footer-contact svg { margin-top: .3em; }
  .footer-brand img { margin-inline: auto; }
  .zone-concejo-title { justify-content: center; }
  .stars { justify-content: center; }
  .card-icon { display: flex; margin-inline: auto; }
  .step::before { left: 50%; transform: translateX(-50%); }

  /* Viñetas: el punto pasa a formar parte de la línea, porque uno absoluto a
     la izquierda quedaría descolgado de un texto centrado */
  .prose ul li { padding-left: 0; }
  .prose ul li::before {
    content: "·";
    position: static;
    width: auto; height: auto;
    margin-right: .35rem;
    border-radius: 0;
    background: none;
    color: var(--muted-2);
    font-weight: 700;
  }

  /* Chips de localidad */
  .place { justify-content: center; }

  /* Desplegables: el chevron y el contador se sacan del flujo para que el
     nombre quede centrado en la fila */
  .zone-group > summary { position: relative; justify-content: center; }
  .zone-group > summary::before { position: absolute; left: .2rem; margin-left: 0; }
  .zone-group-count { position: absolute; right: .2rem; margin-left: 0; }

  /* FAQ: mismo criterio con la flecha */
  .faq summary { position: relative; justify-content: center; text-align: center; padding-inline: 2.4rem; }
  .faq summary::after { position: absolute; right: 1rem; }
  .faq .faq-body { text-align: center; }

  /* Índice lateral y listas de enlaces */
  .toc a { border-left: 0; border-bottom: 2px solid transparent; }
  .toc a.is-active { border-left-color: transparent; border-bottom-color: var(--accent); }

  /* El aviso lateral del artículo */
  .callout { justify-content: center; }
  .callout .btn { margin-inline: auto; }

  /* --- Contacto flotante: dos círculos abajo a la derecha --- */
  .callbar {
    position: fixed;
    right: 12px;
    bottom: 12px;
    z-index: 95;
    display: flex;
    flex-direction: column;
    gap: .5rem;
  }
  .cb {
    display: flex;
    align-items: center; justify-content: center;
    width: 48px; height: 48px;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(20, 24, 31, .25);
    transition: transform .18s var(--e-out);
  }
  .cb:hover, .cb:active { text-decoration: none; transform: scale(1.06); }
  .cb svg { width: 21px; height: 21px; }
  .cb--call { background: var(--accent); }
  .cb--call svg { fill: #fff; }
  .cb--wa { background: #fff; border: 1px solid var(--line); }
  .cb--wa svg { fill: var(--wa); }
}

@media (max-width: 420px) {
  .brand img { height: 34px; }
  .places { grid-template-columns: 1fr 1fr; }
}

/* ---------- 22. Preferencias del sistema ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* La marquesina se detiene y la barra pasa a poder desplazarse a mano */
  .ticker-track { animation: none; width: auto; }
  .ticker-track .ticker-group:last-child { display: none; }
  .ticker { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .site-header, .topbar, .callbar, .cta-strip, .sidebar, .site-footer,
  .hero-actions, .hero-form { display: none !important; }
  body { font-size: 12pt; color: #000; }
  .layout { grid-template-columns: 1fr; }
  .hero { background: none; color: #000; }
  .hero h1, .hero .lead { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}