/* ===================================================================
   SISTEMA DE DISEÑO — Aire acondicionado Majadahonda
   Premium · mobile-first · sin dependencias · alto rendimiento
   Cubre: home, 6 servicios, 4 landings de municipio, 3 legales
   =================================================================== */

/* -------------------------------------------------------------------
   1. TOKENS DE DISEÑO
   ------------------------------------------------------------------- */
:root {
  /* Marca — azul profesional (alineado con theme-color #0a66a8) */
  --brand-50:  #eef5fb;
  --brand-100: #d9e8f4;
  --brand-200: #b3d1e8;
  --brand-300: #7eb3d6;
  --brand-500: #1a7fc4;
  --brand-600: #0a66a8;   /* primario */
  --brand-700: #0a4f80;
  --brand-800: #0c3f63;
  --brand-900: #0a2540;   /* navy profundo */

  /* Acento cálido — campañas y detalles */
  --accent:      #ef8a2a;
  --accent-dark: #d9741a;
  --accent-soft: #fdf0e1;

  /* Neutros */
  --ink:        #16212e;
  --ink-soft:   #51606f;
  --ink-faint:  #51606f;
  --line:       #e2e8ee;
  --line-soft:  #eef2f6;
  --surface:    #f4f8fb;
  --surface-2:  #e9f1f8;
  --white:      #ffffff;

  /* Estado */
  --ok:      #15803d;
  --ok-soft: #e9f6ee;

  /* Radios */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* Sombras (suaves, en capas) */
  --sh-xs: 0 1px 2px rgba(10,37,64,.06);
  --sh-sm: 0 2px 8px rgba(10,37,64,.07);
  --sh-md: 0 6px 22px rgba(10,37,64,.10);
  --sh-lg: 0 16px 40px rgba(10,37,64,.14);

  /* Layout */
  --maxw: 1180px;
  --gutter: clamp(1rem, 3vw, 2rem);
  --section-y: clamp(2.75rem, 6vw, 5rem);
  --header-h: 68px;

  /* Compat con CSS heredado */
  --c-primary: var(--brand-600);
  --c-primary-dark: var(--brand-700);
  --c-text: var(--ink);
  --c-border: var(--line);
}

/* -------------------------------------------------------------------
   2. RESET Y BASE
   ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  overflow-x: hidden;          /* evita el scroll horizontal que provoca el drawer móvil off-canvas (se propaga al viewport y recorta el elemento position:fixed) */
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Imágenes aún no entregadas: caja-placeholder elegante en vez de icono roto */
img[src*="PENDIENTE"], img[src*="pendiente"] {
  width: 100%;
  min-height: 220px;
  padding: 1.25rem;
  background:
    repeating-linear-gradient(45deg, var(--surface-2) 0 12px, var(--brand-50) 12px 24px);
  border: 2px dashed var(--brand-200);
  border-radius: var(--r-md);
  color: var(--ink-faint);
  font-size: .85rem;
  line-height: 1.5;
}

a { color: var(--brand-700); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-600); }

::selection { background: var(--brand-600); color: #fff; }

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

strong { font-weight: 700; color: var(--brand-900); }

/* -------------------------------------------------------------------
   3. TIPOGRAFÍA
   ------------------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0 0 .6em;
  line-height: 1.18;
  color: var(--brand-900);
  letter-spacing: -.015em;
  font-weight: 800;
  text-wrap: balance;
}

h1 { font-size: clamp(1.95rem, 1.2rem + 3.2vw, 3.05rem); }
h2 { font-size: clamp(1.55rem, 1rem + 2.1vw, 2.25rem); }
h3 { font-size: clamp(1.18rem, 1rem + .7vw, 1.4rem); font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 700; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------
   4. LAYOUT
   ------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main { display: block; }

/* Ritmo vertical de secciones */
main > section,
main > article > section {
  padding-block: var(--section-y);
}

/* Fondos alternos para dar profundidad */
.marcas,
.proceso-instalacion,
.calculadora,
.por-que-nosotros,
.faq, .faq-servicio, .faq-municipio,
.que-incluye,
.precio,
.garantia-postventa,
.tipologia-municipio,
.comunidad-y-permisos,
.cobertura-municipio {
  background: var(--surface);
}

/* Encabezado de sección con acento */
main > section > .container > h2,
main > article > section > .container > h2,
main > section > h2 {
  position: relative;
  padding-top: 1.1rem;
  margin-bottom: 1.1rem;
}
main > section > .container > h2::before,
main > article > section > .container > h2::before,
main > section > h2::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 56px; height: 4px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand-600), var(--brand-300));
}

/* -------------------------------------------------------------------
   5. HEADER
   ------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.95);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-header .container {
  position: relative;            /* ancla el panel de navegación vertical */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
  padding-block: .6rem;
}

.site-header .logo { display: inline-flex; align-items: center; }
.site-header .logo img { width: auto; height: 48px; }

/* Marca en la cabecera: imagen del logo (Reparación Aire Acondicionado Majadahonda Pro) */
.site-header .brand { display: inline-flex; align-items: center; text-decoration: none; min-width: 0; }
.brand__logo { height: 50px; width: auto; display: block; }
@media (max-width: 600px) {
  .brand__logo { height: 44px; }
}
/* Clases del antiguo lockup de texto (ya sin uso en el HTML; se conservan inocuas) */
.brand__icon { width: 46px; height: 46px; flex: none; }
.brand__wm { display: flex; flex-direction: column; line-height: 1.08; }
.brand__l1 { font-size: .72rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--brand-900); white-space: nowrap; }
.brand__l2 { font-size: 1.18rem; font-weight: 800; color: var(--brand-600); letter-spacing: -.01em; line-height: 1; }
.brand__l2 strong { color: var(--accent); font-weight: 800; }

/* La navegación es un PANEL VERTICAL desplegable (botón ☰) en todos los tamaños.
   Estilos completos en la sección 25b. */

/* Botón de teléfono en cabecera */
.phone-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .62rem 1.1rem;
  background: var(--brand-600);
  color: #fff;
  text-decoration: none;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
  box-shadow: var(--sh-sm);
  transition: background .15s ease, transform .15s ease;
}
.phone-cta:hover { background: var(--brand-700); color: #fff; transform: translateY(-1px); }
.phone-icon { font-size: 1.05em; }

/* -------------------------------------------------------------------
   6. HERO
   ------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(2.5rem, 4vw + 1rem, 4.5rem);
  background:
    radial-gradient(900px 420px at 88% -8%, rgba(26,127,196,.18), transparent 60%),
    linear-gradient(180deg, var(--brand-50) 0%, #f7fbfd 58%, var(--white) 100%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.hero .container { position: relative; z-index: 1; }

.hero h1 { max-width: 17ch; }

.hero .subtitle {
  font-size: 1.05rem;
  color: var(--brand-700);
  margin-bottom: .9rem;
  font-weight: 500;
}
.hero .subtitle strong { color: var(--brand-700); }

.hero .lead {
  font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 62ch;
  margin-bottom: 1.5rem;
}

/* Variante landing de municipio */
.hero--municipio {
  background:
    radial-gradient(820px 380px at 92% -10%, rgba(239,138,42,.16), transparent 60%),
    linear-gradient(180deg, var(--brand-50) 0%, #f7fbfd 60%, var(--white) 100%);
}

/* -------------------------------------------------------------------
   7. BOTONES / CTAs
   ------------------------------------------------------------------- */
.ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin: 1.4rem 0 0;
}

.btn,
.btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .9rem 1.6rem;
  min-height: 52px;
  border-radius: var(--r-pill);
  font-size: 1.02rem;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn:hover,
.btn-primary:hover, .btn-secondary:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--brand-600);
  color: #fff;
  box-shadow: var(--sh-md);
}
.btn-primary:hover { background: var(--brand-700); color: #fff; box-shadow: var(--sh-lg); }

.btn-secondary {
  background: #fff;
  color: var(--brand-700);
  border-color: var(--brand-600);
}
.btn-secondary:hover { background: var(--brand-50); color: var(--brand-800); }

/* -------------------------------------------------------------------
   8. TRUST BAR (credenciales)
   ------------------------------------------------------------------- */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .7rem;
  list-style: none;
  padding: 0;
  margin: 1.8rem 0 0;
}
.trust-bar li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: .42rem .9rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--brand-900);
  box-shadow: var(--sh-xs);
}
.trust-bar li::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  background: var(--ok-soft);
  color: var(--ok);
  border-radius: 50%;
  font-size: .72rem;
  font-weight: 800;
}

/* -------------------------------------------------------------------
   9. BANNER PRE-TEMPORADA
   ------------------------------------------------------------------- */
.pretemporada {
  display: block;
  margin-block: 1.6rem;
  padding: 1rem 1.15rem;
  background: var(--accent-soft);
  border: 1px solid #f3d4ad;
  border-left: 5px solid var(--accent);
  border-radius: var(--r-md);
  font-size: .98rem;
  color: #6b4418;
}
.pretemporada strong { color: var(--accent-dark); }
.pretemporada a { color: var(--accent-dark); font-weight: 700; }

/* -------------------------------------------------------------------
   10. BREADCRUMB
   ------------------------------------------------------------------- */
.breadcrumb {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.breadcrumb ol,
nav[aria-label="Migas de pan"] ol {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  list-style: none;
  margin: 0;
  padding: .9rem 0;
  font-size: .88rem;
  color: var(--ink-faint);
}
.breadcrumb a,
nav[aria-label="Migas de pan"] a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-600); text-decoration: underline; }
.breadcrumb li + li::before,
nav[aria-label="Migas de pan"] li + li::before {
  content: "›";
  margin-right: .4rem;
  color: var(--ink-faint);
}
.breadcrumb [aria-current="page"] { color: var(--ink-soft); font-weight: 600; }

/* -------------------------------------------------------------------
   11. GRID DE SERVICIOS (tarjetas)
   ------------------------------------------------------------------- */
.servicios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 1.8rem;
  list-style: none;
  padding: 0;
}
.servicio-card {
  display: flex;
  flex-direction: column;
  padding: 1.6rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.servicio-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--brand-200);
}
.servicio-card h3 { margin-top: 0; margin-bottom: .5rem; }
.servicio-card h3 a { color: var(--brand-900); text-decoration: none; }
.servicio-card h3 a:hover { color: var(--brand-600); }
.servicio-card p { color: var(--ink-soft); font-size: .98rem; flex: 1; }
.servicio-card > a:last-child {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: 1rem;
  font-weight: 700;
  font-size: .95rem;
  color: var(--brand-600);
  text-decoration: none;
}
.servicio-card > a:last-child::after { content: "→"; transition: transform .15s ease; }
.servicio-card:hover > a:last-child::after { transform: translateX(3px); }

/* -------------------------------------------------------------------
   12. PROCESO (pasos numerados)
   ------------------------------------------------------------------- */
.proceso-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}
.proceso-steps li {
  position: relative;
  padding: 1.5rem 1.4rem 1.4rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
}
.proceso-steps li::before {
  counter-increment: paso;
  content: counter(paso);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin-bottom: .9rem;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-800));
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
}
.proceso-steps h3 { font-size: 1.08rem; margin-bottom: .4rem; }
.proceso-steps p { color: var(--ink-soft); font-size: .96rem; margin: 0; }

/* -------------------------------------------------------------------
   13. MARCAS
   ------------------------------------------------------------------- */
.marcas p { max-width: 75ch; color: var(--ink-soft); }
.marcas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
  list-style: none;
  padding: 0;
}
.marca-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  min-height: 90px;
}
.marca-card img { max-width: 120px; filter: grayscale(100%); opacity: .72; transition: filter .15s, opacity .15s; }
.marca-card:hover img { filter: grayscale(0); opacity: 1; }
.badge-certificado {
  position: absolute; top: .45rem; right: .45rem;
  background: var(--ok); color: #fff;
  font-size: .68rem; font-weight: 700;
  padding: .15rem .45rem; border-radius: var(--r-sm);
}

/* -------------------------------------------------------------------
   14. TARJETAS E-E-A-T / "POR QUÉ NOSOTROS"
   ------------------------------------------------------------------- */
.eeat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  gap: 1.2rem;
  margin: 1.8rem 0 0;
  list-style: none;
  padding: 0;
}
.eeat-grid li {
  padding: 1.45rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  border-top: 3px solid var(--brand-500);
}
.eeat-grid h3 { font-size: 1.05rem; margin-bottom: .4rem; color: var(--brand-800); }
.eeat-grid p { color: var(--ink-soft); font-size: .95rem; margin: 0; }

/* -------------------------------------------------------------------
   15. TABLAS COMPARATIVAS (páginas de servicio)
   ------------------------------------------------------------------- */
.tabla-wrap { overflow-x: auto; margin: 1.5rem 0; -webkit-overflow-scrolling: touch; }
.tabla-comparativa {
  width: 100%;
  border-collapse: collapse;
  font-size: .96rem;
  min-width: 460px;
  background: #fff;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-xs);
}
.tabla-comparativa th,
.tabla-comparativa td {
  padding: .8rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.tabla-comparativa thead th {
  background: var(--brand-900);
  color: #fff;
  font-weight: 700;
  letter-spacing: .01em;
}
.tabla-comparativa tbody tr:nth-child(even) { background: var(--surface); }
.tabla-comparativa tbody tr:last-child td { border-bottom: none; }

/* -------------------------------------------------------------------
   16. ZONA DE SERVICIO / LISTAS DE ENLACES
   ------------------------------------------------------------------- */
.mapa-wrapper {
  margin: 1.5rem 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;                         /* recorta las esquinas del iframe */
  box-shadow: 0 8px 24px rgba(10,37,64,.10);
  line-height: 0;                           /* evita el hueco bajo el iframe inline */
}
.mapa-wrapper iframe { width: 100%; height: 380px; border: 0; display: block; }
@media (max-width: 600px) { .mapa-wrapper iframe { height: 300px; } }

.municipios-list,
.zonas-list,
.lista-servicios,
.zonas-cercanas ul,
.enlaces-relacionados ul,
.grid-zonas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: .7rem;
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 0;
}
.municipios-list li,
.zonas-list li,
.lista-servicios li,
.zonas-cercanas li,
.enlaces-relacionados li,
.grid-zonas li {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: .85rem 1rem;
  font-size: .97rem;
  box-shadow: var(--sh-xs);
}
.municipios-list li a,
.zonas-list li a,
.lista-servicios li a,
.zonas-cercanas li a,
.enlaces-relacionados li a,
.grid-zonas li a {
  font-weight: 600;
  text-decoration: none;
  color: var(--brand-700);
}
.municipios-list li a:hover,
.zonas-list li a:hover,
.lista-servicios li a:hover,
.zonas-cercanas li a:hover,
.enlaces-relacionados li a:hover,
.grid-zonas li a:hover { color: var(--brand-600); text-decoration: underline; }

.nota-cobertura,
.cercania { color: var(--ink-soft); font-size: .97rem; margin-top: 1.1rem; }

/* -------------------------------------------------------------------
   17. CAJA DESTACADA / CALCULADORA
   ------------------------------------------------------------------- */
.calculadora .container > p,
.calculadora-link .container > p { max-width: 72ch; }
.calculadora .btn-secondary,
.calculadora-link .btn-secondary { margin-top: .6rem; }

/* -------------------------------------------------------------------
   18. TESTIMONIOS
   ------------------------------------------------------------------- */
.testimonios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
  margin: 1.8rem 0 1.2rem;
  list-style: none;
  padding: 0;
}
.testimonio {
  position: relative;
  padding: 1.6rem 1.5rem 1.4rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.testimonio::before {
  content: "\201C";
  position: absolute;
  top: .2rem; left: 1rem;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--brand-200);
  font-family: Georgia, "Times New Roman", serif;
}
.testimonio blockquote {
  margin: .8rem 0 0;
  padding: 0;
  font-size: 1rem;
  color: var(--ink);
  font-style: italic;
}
.testimonio cite,
.testimonio-autor {
  display: block;
  margin-top: .9rem;
  font-style: normal;
  font-weight: 700;
  font-size: .92rem;
  color: var(--brand-700);
}

/* -------------------------------------------------------------------
   19. FAQ  (lista de definición dl/dt/dd)
   ------------------------------------------------------------------- */
.faq-list { margin: 1.6rem 0 0; }
.faq-list dt {
  position: relative;
  margin-top: 1.1rem;
  padding: 1rem 1.2rem 1rem 2.7rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md) var(--r-md) 0 0;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--brand-900);
}
.faq-list dt::before {
  content: "?";
  position: absolute;
  left: .95rem; top: 1rem;
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: var(--brand-600);
  color: #fff;
  border-radius: 50%;
  font-size: .8rem;
  font-weight: 800;
}
.faq-list dd {
  margin: 0 0 0;
  padding: 1rem 1.2rem 1.15rem 2.7rem;
  background: #fff;
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 var(--r-md) var(--r-md);
  color: var(--ink-soft);
  font-size: .98rem;
}

/* FAQ con <details>/<summary> (compatibilidad) */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  padding: 1rem 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--brand-900);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--brand-600); font-size: 1.5rem; line-height: 1; }
.faq-item[open] summary::after { content: "−"; }

/* -------------------------------------------------------------------
   20. FORMULARIO DE PRESUPUESTO
   ------------------------------------------------------------------- */
.contacto-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  margin-top: 1.8rem;
}
@media (min-width: 880px) {
  .contacto-grid { grid-template-columns: 1.6fr 1fr; align-items: start; }
}

.form-presupuesto,
.formulario-presupuesto {
  display: grid;
  gap: 1rem;
  padding: 1.6rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.form-row { display: grid; gap: .35rem; }
.form-row label,
.form-presupuesto label,
.formulario-presupuesto label {
  font-weight: 600;
  font-size: .94rem;
  color: var(--brand-900);
}
.form-row input,
.form-row select,
.form-row textarea,
.form-presupuesto input,
.form-presupuesto select,
.form-presupuesto textarea,
.formulario-presupuesto input,
.formulario-presupuesto select,
.formulario-presupuesto textarea {
  width: 100%;
  padding: .72rem .85rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus,
.form-presupuesto :focus-visible {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(26,127,196,.18);
}
.form-row textarea { resize: vertical; min-height: 110px; }

/* Fila de consentimiento RGPD */
.form-rgpd,
.form-row--consent,
.checkbox-rgpd {
  display: flex !important;
  align-items: flex-start;
  gap: .55rem;
  font-size: .9rem;
  color: var(--ink-soft);
}
.form-rgpd label,
.form-row--consent label {
  font-weight: 400;
  font-size: .9rem;
  color: var(--ink-soft);
  display: flex;
  align-items: flex-start;
  gap: .55rem;
}
.form-rgpd input[type="checkbox"],
.form-row--consent input[type="checkbox"],
.checkbox-rgpd input[type="checkbox"] {
  width: auto;
  margin-top: .2rem;
  flex-shrink: 0;
  accent-color: var(--brand-600);
}
.form-presupuesto button[type="submit"],
.formulario-presupuesto button[type="submit"] {
  justify-self: start;
  margin-top: .3rem;
}

/* Tarjeta NAP de contacto */
.contacto-nap {
  padding: 1.6rem;
  background: var(--brand-900);
  color: #d4e2ef;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.contacto-nap h3 { color: #fff; margin-top: 0; }
.contacto-nap address { font-style: normal; line-height: 1.8; }
.contacto-nap a { color: #fff; font-weight: 600; }
.contacto-nap strong { color: #fff; }

/* Cadenas largas (email/URL) deben romper línea para no desbordar las columnas en móvil */
.contacto-grid > * { min-width: 0; }
.contacto-nap address, .contacto-nap a,
.site-footer address, .site-footer .footer-col a { overflow-wrap: anywhere; }

/* -------------------------------------------------------------------
   21. CONTENIDO LEGAL
   ------------------------------------------------------------------- */
.legal-content {
  max-width: 820px;
  padding-block: 2rem 3rem;
}
.legal-content h2 { margin-top: 2.2rem; }
.legal-content h3 { margin-top: 1.6rem; }
.legal-content ul, .legal-content ol { margin: 0 0 1rem 1.2rem; padding: 0; }
.legal-content li { margin-bottom: .4rem; }
.legal-content .actualizacion { font-size: .9rem; color: var(--ink-faint); }
.legal-content table {
  width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: .94rem;
}
.legal-content th, .legal-content td {
  border: 1px solid var(--line); padding: .6rem .75rem; text-align: left; vertical-align: top;
}
.legal-content th { background: var(--surface); font-weight: 700; }

/* -------------------------------------------------------------------
   22. STICKY CTA (móvil)
   ------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  display: flex;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 18px rgba(10,37,64,.12);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.sticky-cta a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 58px;
  padding: .5rem;
  font-weight: 700;
  font-size: .96rem;
  text-decoration: none;
  color: #fff;
}
.btn-sticky-phone { background: var(--brand-600); }
.btn-sticky-form  { background: var(--brand-800); }
.btn-sticky-phone:hover { background: var(--brand-700); color:#fff; }
.btn-sticky-form:hover  { background: var(--brand-900); color:#fff; }

@media (min-width: 1024px) { .sticky-cta { display: none; } }
@media (max-width: 1023px) { body { padding-bottom: 58px; } }

/* -------------------------------------------------------------------
   23. FOOTER
   ------------------------------------------------------------------- */
.site-footer {
  margin-top: var(--section-y);
  background: var(--brand-900);
  color: #a8bccf;
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
}
.site-footer .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2rem;
}
.site-footer h3 {
  color: #fff;
  font-size: 1.05rem;
  margin-bottom: 1rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .55rem; }
.site-footer a { color: #b9cbdc; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer address { font-style: normal; line-height: 1.8; }
.site-footer .horario { margin-top: 1rem; font-size: .94rem; }
.site-footer .credenciales { margin-top: 1rem; font-size: .82rem; color: #7e93a8; line-height: 1.6; }

.footer-bottom {
  margin-top: 2.5rem;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: 1.1rem;
}
.footer-bottom .container { display: block; }
.footer-bottom p { margin: 0; text-align: center; font-size: .86rem; color: #7e93a8; }

/* -------------------------------------------------------------------
   24. SECCIONES DE CONTENIDO (servicio / municipio)
   ------------------------------------------------------------------- */
.que-incluye .container > p,
.por-que-importante .container > p,
.precio .container > p,
.tiempo .container > p,
.casos-comunes .container > p,
.garantia-postventa .container > p,
.tipologia-municipio .container > p,
.comunidad-y-permisos .container > p,
.servicios-en-municipio .container > p,
.tiempo-llegada .container > p { max-width: 75ch; }

.que-incluye ul,
.por-que-importante ul,
.casos-comunes ul,
.garantia-postventa ul {
  margin: 1.1rem 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: .6rem;
}
.que-incluye li,
.por-que-importante li,
.casos-comunes li,
.garantia-postventa li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--ink-soft);
}
.que-incluye li::before,
.por-que-importante li::before,
.casos-comunes li::before,
.garantia-postventa li::before {
  content: "✓";
  position: absolute;
  left: 0; top: .05rem;
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: var(--ok-soft);
  color: var(--ok);
  border-radius: 50%;
  font-size: .75rem;
  font-weight: 800;
}

/* Caja de precio destacada */
.precio .container { }
.precio strong { color: var(--brand-700); }

/* Cards de tipología de municipio */
.tipologia-municipio article,
.cobertura-municipio article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.25rem;
  box-shadow: var(--sh-xs);
}
.cobertura-municipio .grid-zonas article h3 { font-size: 1.05rem; }

/* -------------------------------------------------------------------
   25. UTILIDADES Y ACCESIBILIDAD
   ------------------------------------------------------------------- */
.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;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .btn:hover, .btn-primary:hover, .btn-secondary:hover,
  .servicio-card:hover { transform: none; }
}

/* -------------------------------------------------------------------
   25b. NAVEGACIÓN: submenús desktop + drawer móvil
   ------------------------------------------------------------------- */

/* Botón ☰ del menú (solo móvil) */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--brand-900);
  padding: 0;
}
.nav-toggle:hover { background: var(--brand-50); }
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block; width: 22px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform .2s ease, top .2s ease, background-color .2s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after  { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { top: 0; transform: rotate(-45deg); }

/* === Navegación HORIZONTAL con menús desplegables verticales (escritorio) === */
.main-nav { display: block; }
.main-nav > ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: .1rem;
}
.main-nav > ul > li { position: relative; }
.main-nav > ul > li > a {
  display: block;
  padding: .55rem .8rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  color: var(--brand-900);
  white-space: nowrap;
}
.main-nav > ul > li > a:hover,
.main-nav .has-submenu:hover > a { background: var(--brand-50); color: var(--brand-700); }

/* Indicador ▾ en los que tienen submenú */
.main-nav .has-submenu > a::after {
  content: "▾";
  font-size: .7em;
  margin-left: .35rem;
  vertical-align: middle;
  color: var(--brand-600);
  display: inline-block;
  transition: transform .15s ease;
}
.main-nav .has-submenu:hover > a::after { transform: rotate(180deg); }

/* Submenú: tarjeta vertical bajo el botón, aparece al pasar el ratón */
.main-nav .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  list-style: none;
  margin: .4rem 0 0;
  padding: .4rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  z-index: 200;
  display: none;               /* oculto por defecto (inequívoco) */
}
/* Puente invisible que cubre el hueco para que NO se cierre al bajar el ratón */
.main-nav .has-submenu:hover::after {
  content: "";
  position: absolute;
  left: 0; top: 100%;
  width: 250px; height: .8rem;
}
.main-nav .has-submenu:hover > .submenu,
.main-nav .has-submenu:focus-within > .submenu {
  display: block;              /* se muestra al pasar el ratón o con foco */
}
.main-nav .submenu li { margin: 0; }
.main-nav .submenu a {
  display: block;
  padding: .6rem .8rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  font-size: .96rem;
  font-weight: 500;
  color: var(--brand-900);
  white-space: nowrap;
}
.main-nav .submenu a:hover, .main-nav .submenu a:focus { background: var(--brand-50); color: var(--brand-700); }

/* === Móvil: botón ☰ + drawer lateral con submenús desplegados === */
@media (max-width: 879px) {
  .nav-toggle { display: inline-flex; }
  .phone-cta { margin-left: auto; }
  .main-nav {
    position: fixed;
    top: 0; right: 0;
    width: min(86vw, 360px);
    height: 100dvh;
    background: #fff;
    box-shadow: -8px 0 32px rgba(10,37,64,.18);
    z-index: 150;
    padding: 5rem 1.1rem 2rem;
    overflow-y: auto;
    display: none;             /* cerrado: fuera del layout para no expandir el ancho de página ni crear scroll horizontal en móvil */
  }
  .main-nav.is-open { display: block; }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav > ul > li { position: static; border-bottom: 1px solid var(--line); }
  .main-nav > ul > li > a { font-size: 1.05rem; padding: .8rem .6rem; border-radius: 0; }
  .main-nav .has-submenu > a::after { display: none; }
  .main-nav .has-submenu:hover::after { content: none; }
  .main-nav .submenu {
    position: static; min-width: 0;
    margin: 0 0 .4rem .6rem; padding: 0 0 0 .6rem;
    background: transparent; border: none; border-left: 2px solid var(--line);
    border-radius: 0; box-shadow: none;
    display: block;            /* en el drawer móvil los submenús se ven siempre */
  }
  .main-nav .submenu a { font-size: .98rem; padding: .6rem .5rem; }
}

/* -------------------------------------------------------------------
   25c. IMÁGENES: hero con media, tarjetas con imagen, figuras
   ------------------------------------------------------------------- */

/* Hero a dos columnas (texto + imagen) */
.hero .container.hero-grid,
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 860px) {
  .hero .container.hero-grid,
  .hero-grid { grid-template-columns: 1.05fr .95fr; }
}
.hero-copy { min-width: 0; }
.hero-media {
  margin: 0;
  position: relative;
}
.hero-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  background: var(--surface-2);
}
.hero-media figcaption {
  margin-top: .6rem;
  font-size: .82rem;
  color: var(--ink-faint);
  text-align: center;
}
/* Marca de agua "imagen de muestra" sobre placeholders SVG */
.hero-media.is-sample::after,
.media-figure.is-sample::after {
  content: "Imagen de muestra · sustituible por foto real";
  position: absolute;
  left: 50%; bottom: .75rem;
  transform: translateX(-50%);
  background: rgba(10,37,64,.78);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .01em;
  padding: .25rem .7rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
  pointer-events: none;
}
.media-figure.is-sample { position: relative; }

/* Tarjeta de servicio con imagen superior */
.servicio-card { padding: 0; overflow: hidden; }
.servicio-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.servicio-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.4rem 1.5rem 1.6rem;
}
.servicio-card__body h3 { margin-top: 0; margin-bottom: .5rem; }
.servicio-card__body p { color: var(--ink-soft); font-size: .98rem; flex: 1; }
.servicio-card__body > a:last-child {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: 1rem; font-weight: 700; font-size: .95rem;
  color: var(--brand-600); text-decoration: none;
}
.servicio-card__body > a:last-child::after { content: "→"; transition: transform .15s ease; }
.servicio-card:hover .servicio-card__body > a:last-child::after { transform: translateX(3px); }

/* Figura de contenido (servicio / municipio) */
.media-figure {
  margin: 1.8rem 0 0;
}
.media-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  background: var(--surface-2);
}
.media-figure figcaption {
  margin-top: .6rem;
  font-size: .85rem;
  color: var(--ink-faint);
}
/* Banda de imagen ancha dentro de sección con fondo */
.media-band img {
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}

/* -------------------------------------------------------------------
   26. RESPONSIVE
   ------------------------------------------------------------------- */
@media (min-width: 600px) {
  .hero h1 { font-size: clamp(2.3rem, 1.4rem + 3vw, 3.05rem); }
}

@media (max-width: 480px) {
  .ctas { gap: .6rem; }
  .ctas .btn, .ctas .btn-primary, .ctas .btn-secondary {
    width: 100%;
  }
  .faq-list dt, .faq-list dd { padding-left: 2.5rem; }
}

/* Cabecera en móvil: el botón de teléfono se compacta a "icono + Llamar"
   para no desbordar con números largos */
@media (max-width: 620px) {
  .phone-cta { padding: .58rem .95rem; font-size: .95rem; }
  .phone-cta .phone-number { display: none; }
  .phone-cta::after { content: "Llamar"; }
  .site-header .logo { max-width: 60vw; overflow: hidden; }
  .site-header .logo img { max-height: 38px; }
}

/* Impresión */
@media print {
  .site-header, .sticky-cta, #cookie-banner, .ctas { display: none; }
  body { color: #000; }
}