/* ==========================================================================
   Papel Pintado Pamplona - sistema de estilos global.
   Paleta FRAMBUESA sobre base CIRUELA. Acento `#D81B60`, fondos de un blanco
   apenas rosado, base muy oscura con fondo violaceo.
   BAJADA DE INTENSIDAD 2026-08-14, a peticion del usuario ("la paleta es como
   demasiado llamativa"): el acento baja del rosa Material 500 al 800 y **el
   HOVER VA HACIA MAS CLARO, no hacia mas oscuro**, que es lo contrario de lo
   que hace el andamiaje y del resto de la red. Es deliberado y razonado por el
   usuario: el papel pintado es un sector decorativo donde este tono tiene
   sentido y en otros no se podria usar, asi que aqui la interfaz se permite un
   gesto propio. Antes: accent #D81B60 / hover #C2185B / ink #AD1457.
   POR QUE FRAMBUESA — NO ES UNA ELECCION ESTETICA, SALE DEL ICONO. El usuario
   aporto el icono de marca (rollo de papel pintado de Flaticon) en version de
   color, y ese icono es rosa Material 500. Muestreado el PNG, sus tonos
   dominantes son `#e91e63` (53.976 px), `#ef314c` (31.127 px), `#bb193b` y
   `#ad1457`. La paleta se deriva de ahi en vez de elegirse aparte, igual que
   se hizo en CP24 y EP.
   EL TONO DEL ICONO NO SE PUEDE USAR TAL CUAL: `#e91e63` da 4.35:1 con blanco
   encima y NO pasa AA. Se baja al siguiente escalon de la misma familia,
   `#D81B60` (4.95:1), que es el mas cercano al icono que si cumple. Y el
   `#AD1457` que ya vive en las sombras del propio icono da 6.97:1, asi que
   entra tal cual como --accent-ink. La marca y la interfaz usan literalmente
   los mismos tonos.
   POR QUE ENCAJA EN ESTE SECTOR, que es donde se separa de las hermanas: aqui
   el COLOR ES EL PRODUCTO. Esta web vende paredes estampadas, y las fotos son
   interiores decorados con papel de estampado verde, gris, floral y tropical.
   Un acento calido de la familia teja/terracota —que es lo que usan las dos
   hermanas mas cercanas— pelearia con esos estampados. El frambuesa convive
   con ellos porque es el unico tono que ninguna foto del banco tiene de fondo.
   Antifootprint: **la familia frambuesa/magenta estaba LIBRE en toda la red**
   (PLAN-RED §6). Comprobado ademas contra el CSS real de las 35 hermanas en
   disco, no contra el documento. Ya estaban cogidas: teja `#B85C10` (Quitar
   Gotele, la hermana del mismo sector y ciudad), terracota `#A8402A`
   (Reparacion Tejados), naranja `#D9722E` sobre marino (Pintor Pamplona PRO),
   verde esmeralda `#047857` (Cerrajero), ambar `#E09A12` (Electricistas),
   azul petroleo `#146C94` (Reparacion de Goteras), oro `#C9A227` (Pintores Las
   Rozas) y burdeos `#7A2430` (Pintura Hogar).
   UNICO VECINO DE TONO, anotado por honestidad: el burdeos `#7A2430` de
   Pintura Hogar cae a ~15° de tono de este frambuesa. Pero es de OTRA ciudad
   (Salamanca), y sobre todo es mucho mas oscuro y desaturado — burdeos apagado
   frente a frambuesa vivo. A dos pestañas abiertas no se parecen.
   CONTRASTES MEDIDOS CON SCRIPT, NUNCA ESTIMADOS — 23 pares comprobados:
     blanco sobre --accent (boton)        4.95:1
     blanco sobre --accent-hover          5.87:1
     --accent sobre blanco (enlace)       4.95:1
     --accent sobre --warm-bg             4.65:1
     --accent-ink sobre blanco            6.97:1
     --accent-ink sobre --warm-alt        6.11:1
     --accent-ink sobre --accent-soft     6.42:1
     --accent-light sobre --ink           8.63:1
     blanco sobre --ink                  16.82:1
     --text sobre blanco                 16.45:1
     --text sobre --warm-alt             14.44:1
     --text-muted sobre --warm-bg         7.02:1
     --text-muted sobre --warm-alt        6.56:1
     --blue sobre --blue-soft             5.34:1
   EL UNICO PAR POR DEBAJO DE 4.5, y por que se deja asi: `--accent` sobre
   `--warm-alt` da 4.34:1. Se comprobo donde se usa realmente `--accent` como
   color de TEXTO y solo hay dos sitios — `.btn-primary`, que es blanco sobre
   fondo acento (4.95:1, correcto), y `.stat__num`, que es
   `clamp(1.6rem,3vw,2.3rem)` a weight 800, o sea **25,6-36,8 px en negrita**:
   texto grande segun WCAG, donde el minimo AA es 3:1 y no 4.5:1. Pasa de
   sobra. TODO el texto pequeño del sistema (enlaces de tarjeta, navegacion,
   breadcrumbs, iconos, estrellas) usa `--accent-ink`, que da 6.11:1 sobre esa
   misma banda. Si algun dia se pone `--accent` en texto pequeño sobre
   `--section--alt`, hay que cambiarlo a `--accent-ink`.
   Se descarto aclarar `--warm-alt` hasta que el acento pasara AA encima: para
   llegar a 4.5:1 habria que subirlo a `#F9F3F6`, y entonces la banda alterna
   deja de distinguirse del fondo base (la diferencia de luminancia cae de 6,47
   a 2,73). Se prefiere una banda que se vea y un color de texto correcto.
   Tipografia: **Epilogue** (display, grotesca geometrica con letterforms
   marcados, que da caracter sin irse a lo decorativo) + **Rubik** (cuerpo,
   esquinas ligeramente redondeadas, muy legible en parrafo largo y calida al
   lado del frambuesa).
   VETADAS, y esta lista sale de LEER el CSS de las 35 carpetas hermanas en
   disco, no de fiarse del documento —que no tenia varias—: Outfit, Figtree,
   Space Grotesk, Source Sans 3, Archivo, IBM Plex Sans, Plus Jakarta Sans,
   Manrope, Bitter, Nunito Sans, Lora, Public Sans, Inter, Merriweather,
   Work Sans, Playfair Display, **Sora** (3 hermanas), **DM Sans** (3),
   **Karla**, **Fraunces** y **League Spartan**.
   ========================================================================== */

:root{
  --ink:#251A21;
  --ink-soft:#453441;
  --ink-softer:#9B8B95;
  --accent:#AD1457;
  --accent-hover:#C2185B;
  /* Frambuesa muy profundo. Es el color de TEXTO del sistema, donde hace falta
     mas peso que en un boton: 9.08:1 sobre blanco y 7.97:1 sobre --warm-alt. */
  --accent-ink:#8E1046;
  --accent-light:#F2A3C0;
  --accent-soft:#FDF3F7;
  --accent-on-accent:#FFFFFF;
  --blue:#6E5A68;
  --blue-soft:#F1EAEF;
  --warm-bg:#FAF7F8;
  --warm-alt:#F6EEF2;
  --white:#FFFFFF;
  --text:#271C23;
  --text-muted:#5F515A;
  --border:#E8DBE2;
  --border-dark:#453441;
  --success:#8E1046;

  --font-display:'Epilogue', sans-serif;
  --font-body:'Rubik', sans-serif;

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

  --shadow-sm:0 1px 3px rgba(37,26,33,.08);
  --shadow:0 8px 24px rgba(37,26,33,.10);
  --shadow-lg:0 20px 48px rgba(37,26,33,.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}
.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)}
}