/* ==========================================================================
   Quitar Gotele Pamplona · Alisar Paredes - sistema de estilos global.
   Paleta CALIDA COMPLETA: base marron muy oscuro + fondos de yeso fresco +
   acento TEJA TOSTADA. Todo el site esta en la misma familia calida.
   POR QUE TEJA TOSTADA — DOS ITERACIONES DESCARTADAS ANTES, anotadas para no
   repetirlas: (1) indigo #4F46E5, rechazado por el usuario ("no me gusta pero
   nada ese morado para los botones"); (2) cobalto #1D4ED8, rechazado tambien
   ("no pega ese azul tampoco en quitar gotele"), y tenia razon: un acento frio
   sobre fondo de yeso calido peleaba con las fotos, que son todas de interiores
   calidos. El #9A3412 es el color del barro cocido — la propia materia del
   oficio— y deja el site entero en una sola familia calida.
   Antifootprint: es la familia mas poblada de la red, pero ninguna hermana usa
   este tono exacto y las diferencias son visibles: RTP terracota #A8402A es mas
   clara y menos saturada (sat 60% frente a 79%), y el naranja #D9722E de Pintor
   Pamplona PRO es mucho mas luminoso. Con el criterio que fijo el usuario (que
   no sean identicas, ver PLAN-RED §6.5) es suficiente.
   Ya estaban cogidas: verde esmeralda #047857
   (Cerrajero Pamplona), ambar #E09A12 (Electricistas Pamplona), azul petroleo
   #146C94 (Reparacion de Goteras), terracota #A8402A (Reparacion Tejados),
   oro #C9A227 (Pintores Las Rozas), naranja #D9722E sobre marino #17293B
   (Pintor Pamplona PRO, la hermana del mismo sector, la mas importante de
   evitar) y burdeos #7A2430 sobre verde-azulado #1B3B36 (Pintura Hogar).
   Criterio del usuario 2026-08-13, deliberadamente relajado: basta con que no
   sean identicas. Google no cruza paletas de CSS como señal de red; esto sirve
   para que un competidor humano que abra dos pestañas no vea la misma web.
   POR QUE FUNCIONA EN ESTE SECTOR: los fondos (#F8F6F2, #EDE7E0) son el color
   del yeso recien alisado, que es el producto que vende esta web, y el teja del
   acento es el del barro y el ladrillo que hay debajo. Ademas casa con las
   fotos, que son todas de interiores de madera y pared clara: un acento frio
   las peleaba.
   HOVER QUE VA HACIA MAS CALIDO, NO HACIA MAS OSCURO (peticion expresa del
   usuario 2026-08-13). Es lo contrario de lo que hace el andamiaje por defecto
   y de lo que hacen las hermanas, donde el hover siempre oscurece:
     --accent       #B85C10  (tono 27°, 4.59:1 con blanco)
     --accent-hover #B4600A  (tono 30°, 4.55:1 con blanco) -> mas naranja y algo
                              mas luminoso que el estado normal.
   TERCERA Y ULTIMA SUBIDA hacia el naranja (2026-08-13). **ESTO ES EL TECHO**:
   los dos siguen pasando AA con blanco encima, pero por poco (4.59 y 4.55 sobre
   un minimo de 4.5). Cualquier tono mas naranja o mas claro deja de cumplir
   —#BD5F0D ya da 4.37 y #C2620F, 4.16—. Si algun dia se quiere un naranja mas
   vivo, NO basta con cambiar el hex: habria que pasar el texto de los botones a
   oscuro en vez de blanco, y eso es rehacer el sistema de botones entero.
   --accent-ink se queda en #9A3412 (7.31:1), el tono profundo: es el que se usa
   como TEXTO sobre fondos tintados, donde hace falta peso, no calidez.
   RESTO DE CONTRASTES MEDIDOS: 5.32:1 --accent sobre --warm-bg, 5.06:1 sobre
   --accent-soft, 8.34:1 --accent-light sobre --ink, 16.47:1 blanco sobre
   --ink, 16.09:1 --text sobre blanco, 6.75:1 --text-muted sobre --warm-bg,
   13.11:1 --text sobre --warm-alt.
   Tipografia: Outfit (display, geometrica de trazo limpio y sin retorica, que
   es justo el registro de "pared lisa") + Figtree (cuerpo, humanista muy
   legible en parrafo largo). Ninguna de las dos usada en ningun hermano
   documentado (vetadas: 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).
   ========================================================================== */

:root{
  --ink:#241E19;
  --ink-soft:#423630;
  --ink-softer:#94897F;
  --accent:#B85C10;
  --accent-hover:#B4600A;
  /* Indigo mas oscuro. No hace falta para pasar AA como texto (el --accent ya
     lo pasa a 6.29:1), se usa donde interesa mas peso: hover de boton y
     enlaces sobre fondos tintados. 8.22:1 con blanco encima. */
  --accent-ink:#9A3412;
  --accent-light:#F5B183;
  --accent-soft:#FBEEE7;
  --accent-on-accent:#FFFFFF;
  --blue:#7A6A5E;
  --blue-soft:#F0EBE6;
  --warm-bg:#F8F6F2;
  --warm-alt:#EDE7E0;
  --white:#FFFFFF;
  --text:#26201B;
  --text-muted:#5E554D;
  --border:#E4DCD3;
  --border-dark:#423630;
  --success:#9A3412;

  --font-display:'Outfit', sans-serif;
  --font-body:'Figtree', sans-serif;

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

  --shadow-sm:0 1px 3px rgba(38,28,20,.08);
  --shadow:0 8px 24px rgba(38,28,20,.10);
  --shadow-lg:0 20px 48px rgba(38,28,20,.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}
.service-card__title{margin-bottom:.5rem;font-size:1.075rem}
.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}
.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)}
}