/* ==========================================================================
   Pintores Chalets Pamplona - sistema de estilos global.
   Paleta VERDE AZULADO (teal) sobre base GRAFITO AZULADO, con fondos calidos
   de arena. Acento `#0F766E`, base `#2B2B3D`, fondos `#FBF8F4` / `#F4EDE3`.

   DE DONDE SALE — DEL ICONO, PERO NO COMO EN LAS HERMANAS. El icono de marca
   (casa con rodillo, Flaticon) es NARANJA/MELOCOTON con contorno oscuro. En
   Papel Pintado el icono dicto el acento porque su frambuesa estaba libre;
   aqui NO se puede hacer lo mismo: el naranja es la familia mas gastada de la
   red — Pintor Pamplona PRO `#D9722E`, Quitar Gotele `#B85C10` (la hermana
   directa, mismo oficio y misma ciudad), Reparacion Tejados `#A8402A`,
   Electricistas `#E09A12`, y una docena mas de naranjas y terracotas en el
   resto de carpetas. Ademas su naranja `#f07848` da 2.81:1 con blanco: ni
   siquiera serviria como color de boton.
   LO QUE SI SE HEREDA DEL ICONO, y por eso la marca y la interfaz siguen
   siendo la misma cosa:
     - `--ink` sale de su CONTORNO `#303048` (12.79:1 sobre blanco),
       redondeado a `#2B2B3D`. Es un grafito azulado, familia "azul
       medianoche", que el PLAN-RED §6 daba por LIBRE.
     - `--warm-bg` y `--warm-alt` salen de sus MELOCOTONES (`#ffd890`,
       `#ffc090`), rebajados a fondos de arena. Ahi el contraste no importa y
       el icono queda integrado en la pagina en vez de pegado encima.
     - El ACENTO se elige de una familia libre que CONVIVA con el naranja del
       icono en vez de copiarlo: el teal es su complementario natural, asi que
       el icono destaca sobre la interfaz en lugar de fundirse con ella.
   El icono NO se recolorea (regla 0.0ter punto 6) — solo se redimensiona.

   POR QUE TEAL Y NO OTRA COSA: es el complementario del naranja del icono,
   contrasta con el verde de jardin y la madera que dominan las fotos de
   exterior de este banco, y no compite con el ladrillo ni con la teja de las
   fachadas. Un acento calido —que es lo que usan las dos hermanas de
   pintura— se confundiria con las propias fachadas fotografiadas.
   VECINOS DE TONO, anotados por honestidad y aceptados: Impermeabilizaciones
   `#0E7C8C`, Humedades `#0E7490`, Limpiezas `#0EA5A5` y Reparacion de Goteras
   `#146C94` estan en la banda azul-cian. Este `#0F766E` es el mas VERDE de
   todos (los otros tiran a cian y a azul). Criterio del usuario, PLAN-RED
   §6.5 y confirmado de nuevo 2026-08-15: **"mientras los colores no sean
   exactos o muy parecidos no hay problema... son colores, no es texto
   plagiado"**. El esfuerzo antifootprint va al TEXTO, que es lo unico que
   Google cruza de verdad.

   CONTRASTES MEDIDOS CON SCRIPT, NUNCA ESTIMADOS — 27 pares, los 27 pasan AA:
     blanco sobre --accent (boton)        5.47:1
     blanco sobre --accent-hover          7.73:1
     --accent sobre blanco (enlace)       5.47:1
     --accent sobre --warm-bg             5.17:1
     --accent sobre --warm-alt            4.71:1
     --accent sobre --accent-soft         5.11:1
     --accent-ink sobre blanco            9.48:1
     --accent-ink sobre --warm-alt        8.15:1
     --accent-ink sobre --accent-soft     8.85:1
     --ink sobre blanco                  13.86:1
     --ink sobre --warm-alt              11.92:1
     --text sobre blanco                 14.12:1
     --text sobre --warm-alt             12.15:1
     --text-muted sobre --warm-bg         6.59:1
     --text-muted sobre --warm-alt        6.00:1
     --ink-soft sobre blanco              8.63:1
     --blue sobre --blue-soft             4.87:1
     --success sobre blanco               7.92:1
   NINGUN PAR POR DEBAJO DE 4.5, a diferencia de las dos hermanas, que dejaron
   uno cada una justificado. `--ink-softer` se subio de proposito a `#6E6E80`
   (5.02:1): hoy no se usa en ninguna regla, pero se deja utilizable por si
   algun dia entra como texto, en vez de dejar una trampa en el sistema.
   El verde `#1F5C3A` del aviso de formulario enviado es SEMANTICO, no de
   marca, y se queda verde (7.92:1). El `#25D366` del boton flotante es el
   verde de WhatsApp.

   Tipografia: **Urbanist** (display, geometrica de asta limpia y muy buena en
   titulares grandes, que es donde vive el H1 de este nicho) + **Mulish**
   (cuerpo, humanista y redonda, legible en parrafo largo y con suficiente
   contraste de forma frente a la display).
   VETADAS, y esta lista sale de LEER el `css/styles.css` de las 38 carpetas
   hermanas en disco, no de fiarse del documento: **Inter** (10 hermanas),
   **Manrope** (7), **Sora** + **DM Sans** (3), **Outfit** (2), **Plus Jakarta
   Sans** (2), **Epilogue** + **Rubik** (Papel Pintado, la hermana directa),
   Figtree, Space Grotesk, Source Sans 3, Archivo, IBM Plex Sans, Bitter,
   Nunito Sans, Lora, Public Sans, Merriweather, Work Sans, Playfair Display,
   Karla, Fraunces y League Spartan.
   ========================================================================== */

:root{
  /* Grafito azulado. Sale del contorno del icono (`#303048`), redondeado. */
  --ink:#2B2B3D;
  --ink-soft:#4A4A5E;
  --ink-softer:#6E6E80;
  --accent:#0F766E;
  --accent-hover:#0B5D57;
  /* Teal muy profundo. Es el color de TEXTO del sistema, donde hace falta mas
     peso que en un boton: 9.48:1 sobre blanco y 8.15:1 sobre --warm-alt. */
  --accent-ink:#134E4A;
  --accent-light:#7FD1C6;
  --accent-soft:#EDFAF7;
  --accent-on-accent:#FFFFFF;
  --blue:#5B6B7A;
  --blue-soft:#EEF2F5;
  /* Fondos de arena, derivados de los melocotones del icono. */
  --warm-bg:#FBF8F4;
  --warm-alt:#F4EDE3;
  --white:#FFFFFF;
  --text:#2A2A38;
  --text-muted:#585868;
  --border:#E4DCD0;
  --border-dark:#4A4A5E;
  --success:#1F5C3A;

  --font-display:'Urbanist', sans-serif;
  --font-body:'Mulish', sans-serif;

  --radius-sm:6px;
  --radius:10px;
  --radius-lg:16px;
  --radius-pill:999px;

  --shadow-sm:0 1px 3px rgba(43,43,61,.08);
  --shadow:0 8px 24px rgba(43,43,61,.10);
  --shadow-lg:0 20px 48px rgba(43,43,61,.16);

  --container:1240px;
  --t-fast:150ms ease-out;
  --t:220ms ease-out;
  --z-nav:100;
  --z-float:90;
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  font-family:var(--font-body);
  color:var(--text);
  background:var(--warm-bg);
  line-height:1.65;
  font-size:16px;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
input,textarea,select{font:inherit;color:inherit}
svg{flex-shrink:0}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ---- Typography ---- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.12;
  font-weight:600;
  letter-spacing:-0.01em;
  margin-bottom:.75rem;
}
h1{font-size:clamp(1.9rem,3.2vw,2.6rem);font-weight:600}
h2{font-size:clamp(1.35rem,2vw,1.8rem)}
h3{font-size:clamp(1.1rem,1.4vw,1.3rem)}
p{color:var(--text)}
.lead{font-size:1.0625rem;color:var(--text-muted);line-height:1.75}

.skip-link{position:fixed;top:-100%;left:1rem;z-index:9999;padding:.75rem 1.25rem;background:var(--accent-light);color:var(--ink);border-radius:var(--radius-sm);font-weight:600;transition:top var(--t)}
.skip-link:focus{top:1rem}

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

/* ---- Layout helpers ---- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:1.25rem}
.section{padding-block:clamp(3rem,6vw,5.5rem)}
.section--tight{padding-block:clamp(1.75rem,3.5vw,3rem)}
.section--cozy{padding-block:clamp(2.25rem,4.5vw,4rem)}
.section--alt{background:var(--warm-alt)}
#intro-zona-title{margin-bottom:1.5rem}
/* #faq-zona-title va envuelto en .section-header (margin-bottom:2.5rem); para que el
   extra se note hay que superar ese valor, no solo el margin-bottom por defecto del h2 */
#faq-zona-title{margin-bottom:3rem}
.section--dark{background:var(--ink);color:#fff}
.section--dark h2,.section--dark h3{color:#fff}
.section--dark .section-lead{color:rgba(255,255,255,.68)}

/* Variante para la ultima seccion antes del footer: si ambas usaran --ink
   quedarian visualmente pegadas como un unico bloque. */
.section--dark2{background:var(--ink-soft);color:#fff}
.section--dark2 h2,.section--dark2 h3{color:#fff}
.section--dark2 .section-lead{color:rgba(255,255,255,.68)}

.section-header{max-width:1040px;margin-bottom:2.5rem}
.section-header--center{margin-inline:auto;text-align:center}
.section-label{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.8125rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--accent-ink);
  margin-bottom:.6rem;
}
.section--dark .section-label{color:var(--accent-light)}
.section-title{margin-bottom:.75rem}
.pseudo-h2{font-family:var(--font-display);color:var(--ink);line-height:1.15;font-weight:600;font-size:clamp(1.6rem,3vw,2.35rem);margin-bottom:.75rem}
.section-lead{color:var(--text-muted);font-size:1.0625rem}

.grid{display:grid;gap:1.5rem;grid-template-columns:1fr;min-width:0}
.grid>*{min-width:0}
@media(min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px){.grid-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.grid-4{grid-template-columns:repeat(4,1fr)}}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.6rem;border-radius:var(--radius-pill);
  font-family:var(--font-display);font-size:.95rem;font-weight:700;
  border:2px solid transparent;white-space:nowrap;cursor:pointer;
  max-width:100%;text-align:center;
  transition:background var(--t),color var(--t),border-color var(--t),transform 150ms ease-out,box-shadow var(--t);
}
@media(max-width:479px){.btn{white-space:normal}}
.btn:active{transform:scale(.97)}
/* Texto blanco sobre el verde, y aqui SI cumple: 5.48:1 sobre --accent y
   7.81:1 sobre --accent-hover (medidos). El hover oscurece, con lo que el
   contraste sube en vez de bajar. En Electricistas Pamplona este mismo boton
   era el punto flojo de la paleta —blanco sobre ambar daba 2.39:1 y hubo que
   asumirlo por decision del usuario—; con este acento el problema no existe,
   asi que no hay ninguna excepcion de accesibilidad que documentar. */
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff;box-shadow:var(--shadow)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--border)}
.btn-outline:hover{border-color:var(--ink);background:var(--warm-alt)}
.btn-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-dark:hover{background:var(--ink-soft);border-color:var(--ink-soft)}
.btn-outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-outline-white:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-white{background:#fff;color:var(--ink);border-color:#fff}
.btn-white:hover{background:var(--warm-alt)}
.btn-link{background:none;color:var(--accent-ink);padding:.4rem 0;font-weight:700}
.btn-link:hover{color:var(--accent-ink)}
.btn-lg{padding:1rem 2.1rem;font-size:1.0625rem}
.btn-sm{padding:.55rem 1.1rem;font-size:.85rem}
.btn-group{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.w-full{width:100%}

/* ---- Header / Nav ---- */
.site-header{position:sticky;top:0;z-index:var(--z-nav);background:var(--warm-bg);border-bottom:1px solid var(--border)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:72px}
.site-logo{display:flex;align-items:center;gap:.65rem;flex-shrink:0}
.site-logo img{width:38px;height:38px;object-fit:contain}
.site-logo__text{display:flex;flex-direction:column;line-height:1.1}
.site-logo__name{font-family:var(--font-display);font-size:clamp(.95rem,1.1vw,1.15rem);font-weight:800;color:var(--ink);white-space:nowrap}
.site-logo__sub{font-size:.75rem;color:var(--text-muted);letter-spacing:.04em;text-align:center}

.main-nav{display:none;align-items:center;gap:.15rem}
.nav-link{padding:.6rem .85rem;font-family:var(--font-display);font-size:1.0625rem;font-weight:600;color:var(--ink);border-radius:var(--radius-sm);transition:color var(--t-fast),background var(--t-fast);white-space:nowrap;display:inline-flex;align-items:center;gap:.3rem}
.nav-link:hover,.nav-link.active{color:var(--accent-ink);background:var(--accent-soft)}
.header__cta{display:none;align-items:center;gap:.75rem;flex-shrink:0}

.nav-item--dropdown{position:relative}
.nav-dropdown{display:none;position:absolute;top:calc(100% + 10px);left:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);min-width:440px;max-height:70vh;overflow-y:auto;padding:.5rem;z-index:101}
.nav-dropdown::before{content:'';position:absolute;top:-10px;left:0;right:0;height:10px}
.nav-dropdown--wide{min-width:720px}
.nav-item--dropdown:hover .nav-dropdown,.nav-item--dropdown:focus-within .nav-dropdown,.nav-item--dropdown.open .nav-dropdown{display:grid;grid-template-columns:1fr 1fr;gap:.15rem}
.nav-dropdown__link{display:block;padding:.5rem .7rem;font-size:.95rem;font-family:var(--font-body);font-weight:600;color:var(--text);border-radius:var(--radius-sm);transition:background var(--t-fast),color var(--t-fast)}
.nav-dropdown__link:hover{background:var(--warm-alt);color:var(--accent-ink)}
.nav-dropdown__all{grid-column:1/-1;border-top:1px solid var(--border);margin-top:.35rem;padding-top:.6rem;font-weight:700;color:var(--accent-ink)}

.nav-toggle{display:flex;flex-direction:column;gap:5px;padding:.5rem;border-radius:var(--radius-sm)}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);border-radius:2px;transition:transform var(--t),opacity var(--t)}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-nav{display:none;flex-direction:column;background:var(--warm-bg);border-top:1px solid var(--border);padding:.5rem 0;max-height:calc(100vh - 72px);overflow-y:auto}
.mobile-nav.open{display:flex}
.mobile-nav .nav-link{padding:.85rem 1.5rem;border-radius:0;border-bottom:1px solid var(--border);font-size:1.0625rem;justify-content:space-between}
.mobile-nav__sub{display:none;flex-direction:column;background:var(--warm-alt)}
.mobile-nav__sub.open{display:flex}
.mobile-nav__sub .nav-link{padding-left:2.5rem;font-size:.875rem;color:var(--text-muted);border-bottom:1px solid var(--border)}
.mobile-nav__cta{padding:1rem 1.5rem .5rem}

@media(min-width:1024px){
  .main-nav{display:flex}
  .header__cta{display:flex}
  .nav-toggle{display:none}
}

/* ---- Hero ---- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero__bg{position:absolute;inset:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.4}
/* Overlay aligerado DOS VECES a peticion del usuario 2026-08-13: partia de
   .93/.66/.42 (la foto no se veia), se bajo a .74/.46/.24 y el lado izquierdo
   seguia muy oscuro. Ahora .58/.34/.16. Se mantiene el gradiente diagonal, que
   es lo que sostiene la legibilidad del H1 sin tener que oscurecer todo el
   ancho. Si se baja mas, hay que comprobar el contraste del H1 sobre la foto. */
.hero__overlay{position:absolute;inset:0;background:linear-gradient(115deg,rgba(18,19,21,.58) 20%,rgba(18,19,21,.34) 60%,rgba(18,19,21,.16) 100%)}
.hero__content{position:relative;padding-block:clamp(3.5rem,8vw,6rem);max-width:1400px;margin-inline:auto;text-align:center}
.hero__content .btn-group{justify-content:center}
.hero__ctas{margin-top:.75rem}
.hero__title{font-family:var(--font-display);font-weight:600;letter-spacing:-0.01em;line-height:1.12;color:#fff;margin-bottom:1.75rem;font-size:clamp(1.9rem,3.2vw,2.6rem)}
.hero__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem}
.hero__chip{font-size:.75rem;font-weight:700;font-family:var(--font-display);letter-spacing:.03em;padding:.35rem .8rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-pill);color:rgba(255,255,255,.82)}
.hero__subtitle{font-size:1.0625rem;color:rgba(255,255,255,.78);margin-bottom:1.75rem;line-height:1.75}
.hero__stats{position:relative;border-top:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.16)}
.hero__stats-inner{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;padding-block:1.5rem}
.hero__stat{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero__stat-number{font-family:var(--font-display);font-size:1.9rem;font-weight:800;color:#fff}
.hero__stat-label{font-size:.8125rem;color:rgba(255,255,255,.65)}
@media(min-width:768px){.hero__stats-inner{grid-template-columns:repeat(4,1fr)}}
@media(max-width:767px){.hero__content>.section-label{display:none}}

.hero__quickform{position:relative;padding-block:clamp(1.75rem,4vw,2.5rem);background:rgba(0,0,0,.12)}
.quickform-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:1.5rem}
.quickform-fields{display:flex;flex-direction:column;gap:1rem}
.quickform-input{padding:.85rem 1rem;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:.9375rem;width:100%;background:#fff;color:var(--text)}
.quickform-input:focus{border-color:var(--accent-hover);outline:none}
.quickform-btn{width:100%;justify-content:center}
.quickform-check{display:flex;align-items:flex-start;gap:.5rem;font-size:.75rem;color:var(--text-muted);margin-top:.85rem}
.quickform-check a{color:var(--accent-ink);text-decoration:underline}
@media(min-width:900px){
  .quickform-fields{flex-direction:row;align-items:stretch}
  .quickform-input{flex:1;min-width:0}
  .quickform-select{flex:0 0 168px}
  .quickform-btn{width:auto}
  .quickform-fields--vertical{flex-direction:column}
  .quickform-fields--vertical .quickform-input,
  .quickform-fields--vertical .quickform-select{flex:none;width:100%}
  .quickform-fields--vertical .quickform-btn{width:100%}
}

/* ---- Page hero (interior pages: servicios, zonas, etc.) ---- */
.page-hero{position:relative;background:var(--ink);color:#fff}
.page-hero__inner{position:relative;padding-block:clamp(3.75rem,6vw,7rem);text-align:center}
.page-hero .breadcrumbs{margin-bottom:1rem;justify-content:center}
.page-hero h1{color:#fff;margin-bottom:1rem}
.page-hero p{color:rgba(255,255,255,.75);max-width:1100px;margin-inline:auto;font-size:1.0625rem}
.page-hero .btn-group{justify-content:center}
.page-hero__quickform{position:relative;padding-block:clamp(1.5rem,4vw,2rem);background:rgba(0,0,0,.12)}

.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.8125rem;color:rgba(255,255,255,.55)}
.breadcrumbs a{color:rgba(255,255,255,.75)}
.breadcrumbs a:hover{color:var(--accent-ink)}
.breadcrumbs--light{color:var(--text-muted)}
.breadcrumbs--light a{color:var(--text-muted)}
.breadcrumbs--light a:hover{color:var(--accent-ink)}

/* ---- Cards ---- */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:box-shadow var(--t),transform var(--t)}

.service-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow var(--t),transform var(--t)}
.service-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.service-card__img{aspect-ratio:4/3;overflow:hidden;background:var(--warm-alt)}
.service-card__img img{width:100%;height:100%;object-fit:cover}
.service-card__body{padding:1.5rem;display:flex;flex-direction:column;flex:1}
/* 1rem, no 1.075: con el ancho de tarjeta de la grid de 3 columnas (336px
   utiles) es el tamaño que deja margen real para que el titulo mas largo del
   sistema entre en UNA linea. Ver regla 4.7bis, que fija el limite en 35
   caracteres y explica como recalcularlo si cambia el contenedor o la fuente. */
.service-card__title{margin-bottom:.5rem;font-size:1rem;line-height:1.25}
.service-card__desc{color:var(--text-muted);font-size:.9375rem;line-height:1.65;margin-bottom:1rem;flex:1}
.service-card__link{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-display);font-weight:700;color:var(--accent-ink);font-size:1rem}
.service-card__link:hover{color:var(--accent-ink)}
.service-card__link svg{transition:transform var(--t-fast)}
.service-card:hover .service-card__link svg{transform:translateX(3px)}

.services-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:640px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.services-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1280px){.services-grid--4{grid-template-columns:repeat(4,1fr)}}

.zone-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;text-align:center;display:block;transition:box-shadow var(--t),transform var(--t),border-color var(--t)}
.zone-card:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:var(--accent-hover)}
.zone-card__img{aspect-ratio:4/3;overflow:hidden;background:var(--warm-alt)}
.zone-card__img img{width:100%;height:100%;object-fit:cover}
.zone-card__body{padding:1.5rem}
.zone-card__pop{font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);margin-bottom:.35rem}
.zone-card__title{font-size:1.1rem;margin-bottom:.4rem}
.zone-card__dist{font-size:.875rem;color:var(--text-muted);margin-bottom:.85rem}
.zone-card__link{display:inline-flex;align-items:center;gap:.35rem;justify-content:center;font-family:var(--font-display);font-weight:700;color:var(--accent-ink);font-size:.875rem}

.zones-grid{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:640px){.zones-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.zones-grid{grid-template-columns:repeat(3,1fr)}}

.zone-chip{display:flex;align-items:center;justify-content:center;padding:1rem 1.25rem;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);font-family:var(--font-display);font-weight:700;color:var(--ink);text-align:center;transition:box-shadow var(--t),transform var(--t),border-color var(--t),color var(--t)}
.zone-chip:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:var(--accent-hover);color:var(--accent-ink)}

/* ---- Gallery grid (trabajos realizados) ---- */
/* Numero de columnas segun cantidad real de fotos, nunca fijo a 3:
   4 fotos -> 2 columnas (2x2), 6 fotos -> 3 columnas (2x3). Movil siempre 1 columna. */
.gallery-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.gallery-grid__item{aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--warm-alt)}
.gallery-grid__item img{width:100%;height:100%;object-fit:cover;display:block}
@media(min-width:640px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.gallery-grid--3col{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.gallery-grid--4col{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1180px){.gallery-grid--4col{grid-template-columns:repeat(4,1fr)}}

/* ---- Situations / "te suena" list ---- */
.situations-list{display:flex;flex-direction:column;gap:1.5rem}
.situation{display:flex;gap:1rem;align-items:flex-start}
.situation__icon{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center}
.situation__q{font-family:var(--font-display);font-weight:700;color:var(--ink);margin-bottom:.35rem;font-size:1.0625rem}
.situation__a{color:var(--text-muted);font-size:1.0625rem;line-height:1.7}

/* ---- Why-us / diff cards ---- */
.diff-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:640px){.diff-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.diff-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.diff-grid--proceso{grid-template-columns:repeat(3,1fr)}}
/* 4 tarjetas en una sola fila: es el caso del bloque "de que depende lo que
   cuesta" de las paginas de servicio, donde el contenido son 4 factores y a 3
   columnas dejaba una fila coja de 1 (regla 4.4.sexies). */
@media(min-width:1024px){.diff-grid--4{grid-template-columns:repeat(4,1fr)}}
.diff-card{padding:1.75rem;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg)}
.diff-card__icon{width:44px;height:44px;border-radius:var(--radius);background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
.diff-card__title{font-size:1.05rem;margin-bottom:.5rem}
.diff-card__text{color:var(--text-muted);font-size:.9375rem;line-height:1.7}

/* ---- Process steps ---- */
.process-steps{display:grid;grid-template-columns:1fr;gap:1.75rem;counter-reset:step}
@media(min-width:768px){.process-steps{grid-template-columns:repeat(5,1fr)}}
.process-step{display:flex;flex-direction:column;gap:.75rem}
.process-step__num{width:40px;height:40px;border-radius:50%;background:var(--accent-light);color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:1.05rem}
.process-step__title{font-family:var(--font-display);font-weight:700;color:#fff;font-size:1rem}
.process-step__text{color:rgba(255,255,255,.68);font-size:.875rem;line-height:1.65}
@media(max-width:767px){.process-step{align-items:center;text-align:center}}

/* ---- Testimonials & Reviews ---- */
.testimonials-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:768px){.testimonials-grid{grid-template-columns:repeat(3,1fr)}}
.testimonial-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.75rem}
.testimonial-stars{color:var(--accent-ink);letter-spacing:.1em;margin-bottom:.85rem;font-size:.95rem}
.testimonial-text{font-size:.9375rem;line-height:1.75;color:var(--text);margin-bottom:1.25rem}
.testimonial-author{display:flex;align-items:center;gap:.75rem}
.testimonial-author img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.testimonial-author__name{font-family:var(--font-display);font-weight:700;font-size:.9375rem;color:var(--ink)}
.testimonial-author__detail{font-size:.8125rem;color:var(--text-muted)}

.reviews-summary{display:flex;align-items:center;gap:.75rem;margin-bottom:1.75rem;flex-wrap:wrap}
.reviews-summary__stars{color:var(--accent-ink);font-size:1.15rem;letter-spacing:.08em}
.reviews-summary__text{font-family:var(--font-display);font-weight:700;color:var(--ink)}
.reviews-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-bottom:1.75rem}
@media(min-width:768px){.reviews-grid{grid-template-columns:repeat(3,1fr)}}
.review-card{background:var(--warm-alt);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem}
.review-card__reply{margin-top:1rem;padding-top:1rem;border-top:1px dashed var(--border);font-size:.8125rem;color:var(--text-muted);font-style:italic}

/* ---- FAQ Accordion ---- */
.faq-list{display:flex;flex-direction:column;gap:.75rem}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.35rem;text-align:left}
.faq-question__text{font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:1.0625rem}
.faq-icon{flex-shrink:0;color:var(--accent-ink);transition:transform var(--t)}
.faq-item.open .faq-icon{transform:rotate(180deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height var(--t)}
.faq-item.open .faq-answer{max-height:600px}
.faq-answer p{padding:0 1.35rem 1.25rem;color:var(--text-muted);font-size:1.0625rem;line-height:1.75}

/* ---- Forms ---- */
.form-group{display:flex;flex-direction:column;gap:.4rem}
.form-row{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:560px){.form-row{grid-template-columns:1fr 1fr}}
.form-label{font-size:.8125rem;font-weight:700;font-family:var(--font-display);color:var(--ink)}
.form-input,.form-textarea,.form-select{
  padding:.75rem .9rem;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  background:#fff;font-size:.9375rem;transition:border-color var(--t-fast);width:100%;
}
.form-input:focus,.form-textarea:focus,.form-select:focus{border-color:var(--accent-hover)}
.form-textarea{resize:vertical;min-height:110px}
.form-check{display:flex;align-items:flex-start;gap:.6rem;font-size:.8125rem;color:var(--text-muted)}
.form-check input{margin-top:.2rem;flex-shrink:0}
.form-check a{color:var(--accent-ink);text-decoration:underline}
.form-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow-sm)}
p.form-success{display:none;padding:.9rem 1rem;background:#EAF4EE;border:1px solid #B9DCC3;border-radius:var(--radius-sm);color:#1F5C3A;font-weight:700;font-size:.875rem;margin-top:.75rem}
.form-success.show{display:block}

/* ---- Contact info blocks ---- */
.contact-info{display:flex;flex-direction:column;gap:1.25rem}
.contact-info__item{display:flex;gap:.9rem;align-items:flex-start}
.contact-info__icon{flex-shrink:0;width:40px;height:40px;border-radius:var(--radius);background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center}
.contact-info__item>div{min-width:0}
.contact-info__label{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:.15rem}
.contact-info__value{font-family:var(--font-display);font-weight:700;color:var(--ink);overflow-wrap:break-word}
.contact-map{border-top:1px solid var(--border)}
.contact-map iframe{width:100%;height:460px;border:0;display:block}

/* ---- Blog cards ---- */
.blog-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:640px){.blog-grid{grid-template-columns:repeat(3,1fr)}}
.blog-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}
.blog-card__img{aspect-ratio:16/9;overflow:hidden;background:var(--warm-alt)}
.blog-card__img img{width:100%;height:100%;object-fit:cover}
.blog-card__body{padding:1.5rem;display:flex;flex-direction:column;flex:1}
.blog-card__meta{display:flex;align-items:center;gap:.4rem;font-size:.75rem;color:var(--text-muted);margin-bottom:.6rem}
.blog-card__title{font-size:1.05rem;margin-bottom:.6rem}
.blog-card__excerpt{color:var(--text-muted);font-size:.9rem;line-height:1.6;margin-bottom:1rem;flex:1}
.blog-card__link{font-family:var(--font-display);font-weight:700;color:var(--accent-ink);font-size:.875rem}

/* ---- Check list ---- */
.check-list{display:flex;flex-direction:column;gap:.65rem}
/* Variante con descripcion: el item lleva titulo en negrita y explicacion, asi
   que no puede centrarse verticalmente ni limitarse a una linea. */
.check-list--desc{gap:1.1rem;max-width:900px}
.check-list__item--desc{align-items:flex-start;line-height:1.7}
.check-list__item--desc svg{margin-top:.35rem}
.check-list__item--desc strong{color:var(--ink)}
.check-list__item{display:flex;align-items:center;gap:.65rem;font-size:1.0625rem;color:var(--text)}
.check-list__item svg{flex-shrink:0;color:var(--success)}

/* ---- Badge / pill ---- */
.badge{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1.1rem;border-radius:var(--radius-pill);font-size:.9rem;font-weight:700;font-family:var(--font-display)}
.badge-cloud .badge{width:100%;justify-content:center;text-align:center}
.badge-accent{background:var(--accent-soft);color:var(--accent-ink)}
.badge-blue{background:var(--blue-soft);color:var(--blue)}

/* Nube de badges con filas fijas (ej. "otras zonas de la comarca"): grid en
   vez de flex-wrap para que el reparto por fila no dependa del ancho de
   cada texto y quede siempre equilibrado. repeat(7) porque las paginas de
   zona de RTP enlazan a las 14 "otras zonas" (15 ZONAS_SERVICIO - la
   propia), multiplo exacto de 7 = 2 filas completas en escritorio. */
.badge-cloud{display:grid;grid-template-columns:repeat(7,auto);gap:.6rem;justify-content:center}
@media(max-width:1023px){.badge-cloud{grid-template-columns:repeat(4,auto)}}
@media(max-width:639px){.badge-cloud{grid-template-columns:repeat(2,auto)}}
/* Variante de 15 items (paginas de servicio, badge-cloud a las 15 zonas):
   fila de 8 + fila de 7, cada una centrada de forma independiente (grid
   con columnas fijas deja la fila corta pegada a la izquierda, con hueco a
   la derecha; con dos filas flex separadas cada una se centra por si sola,
   y en movil cada fila puede seguir envolviendo con flex-wrap). */
.badge-cloud-rows{display:flex;flex-direction:column;gap:.6rem}
.badge-cloud-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}

/* ---- Footer ---- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.7)}
.footer-main{padding-block:3.5rem}
.footer-grid{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media(min-width:768px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr}}
@media(min-width:1024px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.footer-logo{display:flex;align-items:center;gap:.65rem;margin-bottom:1rem}
.footer-logo img{width:32px;height:32px;object-fit:contain}
.footer-logo__name{font-family:var(--font-display);font-weight:800;color:#fff;font-size:clamp(.85rem,1.6vw,1rem);white-space:nowrap}
.footer-tagline{font-size:.875rem;line-height:1.7;color:rgba(255,255,255,.58);max-width:320px}
.footer-col__title{font-family:var(--font-display);font-weight:700;color:#fff;font-size:.9rem;margin-bottom:1rem;letter-spacing:.02em}
.footer-links{display:flex;flex-direction:column;gap:.6rem}
.footer-link{display:flex;align-items:center;gap:.4rem;font-size:.875rem;color:rgba(255,255,255,.62);transition:color var(--t-fast)}
.footer-link:hover{color:#fff}
.footer-link svg{flex-shrink:0;opacity:.6}
.footer-contact{display:flex;flex-direction:column;gap:.85rem;font-size:.875rem}
.footer-contact-item{display:flex;align-items:flex-start;gap:.6rem;color:rgba(255,255,255,.62)}
.footer-contact-item svg{flex-shrink:0;width:16px;height:16px}
.footer-contact-item a{color:rgba(255,255,255,.78);min-width:0;overflow-wrap:break-word}
.footer-contact-item a:hover{color:#fff}
@media(max-width:767px){
  .footer-grid{text-align:center}
  .footer-logo{justify-content:center}
  .footer-tagline{margin-inline:auto}
  .footer-links{align-items:center}
  .footer-contact{align-items:center}
  .footer-contact-item{align-items:center}
}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-block:1.5rem}
.footer-bottom__inner{display:flex;flex-direction:column;gap:.75rem;align-items:center;text-align:center;font-size:.8125rem;color:rgba(255,255,255,.58)}
.footer-bottom__inner p{color:rgba(255,255,255,.58)}
.footer-legal{display:flex;flex-wrap:wrap;gap:1.25rem}
.footer-legal a{color:rgba(255,255,255,.55)}
.footer-legal a:hover{color:#fff}

/* ---- WhatsApp float ---- */
.wa-float{position:fixed;bottom:1.5rem;right:1.5rem;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:var(--shadow-lg);z-index:var(--z-float);transition:transform var(--t)}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:28px;height:28px}

/* Modal previo al chat de WhatsApp (click-to-chat con formulario) */
.wa-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:1rem}
.wa-modal.open{display:flex}
.wa-modal__overlay{position:absolute;inset:0;background:rgba(20,16,12,.55)}
.wa-modal__card{position:relative;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:1.75rem;max-width:420px;width:100%;max-height:90vh;overflow-y:auto}
.wa-modal__close{position:absolute;top:.85rem;right:.85rem;width:32px;height:32px;border-radius:50%;border:none;background:var(--warm-alt);color:var(--text);font-size:1rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--t-fast)}
.wa-modal__close:hover{background:var(--border)}
.wa-modal h3{font-family:var(--font-display);font-weight:700;font-size:1.25rem;margin-bottom:.4rem;padding-right:2rem}
.wa-modal__lead{color:var(--text-muted);font-size:.9rem;margin-bottom:1.2rem}
.wa-modal .btn svg{width:18px;height:18px;margin-right:.4rem}
body.wa-modal-open{overflow:hidden}

/* ---- Pricing / info block ---- */
.info-block{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem}
.info-block p + p{margin-top:1rem}
.info-block p{color:var(--text-muted);font-size:1.0625rem;line-height:1.75}

/* ---- Legal content pages ---- */
.legal-content{max-width:760px;margin-inline:auto}
.legal-content p{margin-bottom:1rem;line-height:1.75;color:var(--text)}
.legal-content h2{margin-top:2.25rem;margin-bottom:.85rem}
.legal-content h2:first-child{margin-top:0}
.legal-content--blog h2{text-align:center}
/* Imagen dentro del cuerpo del articulo (regla 8.4): la inserta
   generate-blog.js antes del segundo H2. */
.post-figure{margin:2rem 0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border)}
.post-figure img{display:block;width:100%;height:auto}
.legal-content h3{margin-top:1.5rem;margin-bottom:.5rem}
.legal-content ul,.legal-content ol{margin:0 0 1.25rem 1.25rem;padding-left:1rem}
.legal-content ul{list-style:disc}
.legal-content ol{list-style:decimal}
.legal-content li{margin-bottom:.5rem;line-height:1.7;color:var(--text)}
.legal-content a{color:var(--accent-ink);text-decoration:underline}
.legal-content strong{color:var(--ink)}
.legal-content .legal-updated{font-size:.875rem;color:var(--text-muted);margin-bottom:2rem}

/* ---- Utility ---- */
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mb-1{margin-bottom:1rem}.mb-2{margin-bottom:2rem}
.text-center{text-align:center}
.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}

/* ---- Cifras de la home (bloque de confianza bajo el hero) ---- */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:2.25rem 0}
.stat{text-align:center;padding:0 .75rem;border-right:1px solid var(--border)}
.stat:last-child{border-right:0}
.stat__num{font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,3vw,2.3rem);color:var(--accent);line-height:1.1;display:block}
.stat__label{font-size:.9375rem;color:var(--text-muted);margin-top:.35rem}
@media (max-width:760px){
  .stats-row{grid-template-columns:repeat(2,1fr);gap:1.5rem .5rem}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-child(-n+2){padding-bottom:1.25rem;border-bottom:1px solid var(--border)}
}