/* ==========================================================================
   Cerrajero Pamplona 24 Horas (CP24) - sistema de estilos global.
   Paleta DERIVADA DEL ICONO, no al reves (mismo metodo que en Electricistas
   Pamplona): el usuario aporto una llave maciza y de ella se muestreo el
   verde exacto #047857, que pasa a ser el acento de todo el site. Base
   GRAFITO FRIO casi negro + grises acero + acento VERDE ESMERALDA.
   POR QUE VERDE Y NO AZUL (antifootprint, 2026-08-10): el azul estaba ya
   cogido por dos hermanos —RGP azul petroleo #146C94 y Pintor Pamplona PRO
   azul medio #2B5D8C sobre base marino #17293B— y meter un cuarto azul en la
   red seria repetir familia de color. Los demas hermanos: EP ambar #E09A12 +
   Archivo/IBM Plex Sans, RTP terracota #A8402A, PLRM grafito+oro #C9A227,
   Pintura Hogar verde-azulado #1B3B36 + burdeos #7A2430 (base oscura
   desaturada, distinta en rol y en valor de este esmeralda de acento).
   POR QUE FUNCIONA EN ESTE SECTOR: todos los competidores de cerrajeria de
   Pamplona van de amarillo de kit digital o de rojo de urgencia de furgoneta;
   el verde es el unico registro libre, y "verde = cerrado y seguro" ya lo
   tiene interiorizado cualquiera por el candado del navegador.
   CONTRASTES MEDIDOS, no estimados (script de comprobacion, 2026-08-10):
   #047857 da 5.48:1 tanto con texto BLANCO encima (boton primario) como
   usado el mismo verde COMO TEXTO sobre blanco — es decir, aqui el acento
   sirve para las dos cosas y no hace falta el tono aparte que si necesito el
   ambar de EP. Ademas: 5.10:1 sobre --warm-bg, 4.88:1 sobre --accent-soft,
   7.81:1 blanco sobre --accent-hover, 9.20:1 --accent-light sobre --ink,
   17.70:1 blanco sobre --ink, 6.15:1 --text-muted sobre --warm-bg.
   Tipografia: Space Grotesk (display, grotesca de trazo mecanico, registro de
   seguridad tecnica y no de taller) + Source Sans 3 (cuerpo, humanista muy
   legible en parrafo largo). Ninguna de las dos usada en ningun hermano
   documentado (vetadas: Archivo, IBM Plex Sans, Plus Jakarta Sans, Manrope,
   Bitter, Nunito Sans, Lora, Public Sans, Inter, Merriweather, Work Sans).
   ========================================================================== */

:root{
  --ink:#15191B;
  --ink-soft:#2F3639;
  --ink-softer:#868E90;
  --accent:#047857;
  --accent-hover:#035E44;
  /* Verde mas oscuro. No hace falta para pasar AA como texto (el --accent ya
     lo pasa), se usa donde interesa mas peso: hover de boton y enlaces sobre
     fondos tintados. 7.81:1 con blanco encima. */
  --accent-ink:#035E44;
  --accent-light:#34D399;
  --accent-soft:#E7F5EF;
  --accent-on-accent:#FFFFFF;
  --blue:#5B6467;
  --blue-soft:#EBEEEE;
  --warm-bg:#F5F7F6;
  --warm-alt:#E9EEEB;
  --white:#FFFFFF;
  --text:#1B1F21;
  --text-muted:#575E60;
  --border:#DDE3E0;
  --border-dark:#2F3639;
  --success:#0F766E;

  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Source Sans 3', sans-serif;

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

  --shadow-sm:0 1px 3px rgba(10,20,16,.08);
  --shadow:0 8px 24px rgba(10,20,16,.10);
  --shadow-lg:0 20px 48px rgba(10,20,16,.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}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(115deg,rgba(18,19,21,.93) 20%,rgba(18,19,21,.66) 60%,rgba(18,19,21,.42) 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}