/* ============================================================
   PURA CLIMA — style.css
   Sistema de diseño según Manual de marca v2 (adenda web)
   Paleta cerrada · Nunito Sans + Caveat autohospedadas
   ============================================================ */

/* ------------------------------------------------------------
   1. FUENTES AUTOHOSPEDADAS
   ------------------------------------------------------------ */
@font-face{
  font-family:'Nunito Sans';
  src:url('/assets/fonts/nunito-sans-latin-400-normal.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Nunito Sans';
  src:url('/assets/fonts/nunito-sans-latin-600-normal.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Nunito Sans';
  src:url('/assets/fonts/nunito-sans-latin-700-normal.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Nunito Sans';
  src:url('/assets/fonts/nunito-sans-latin-800-normal.woff2') format('woff2');
  font-weight:800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Caveat';
  src:url('/assets/fonts/caveat-latin-600-normal.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}

/* ------------------------------------------------------------
   2. VARIABLES — paleta oficial + tonos de uso web
   ------------------------------------------------------------ */
:root{
  /* Paleta oficial */
  --azul:        #003E7D;  /* Azul Profundo: titulares, fondos oscuros, texto */
  --azul-vivo:   #1A80FF;  /* iconos y gráficos. NUNCA texto pequeño encima  */
  --verde:       #46B034;  /* logo, onda, acentos gráficos                   */
  --verde-claro: #8ED268;  /* SOLO sobre fondo azul oscuro                   */
  --carbon:      #333333;  /* texto corrido                                  */
  --gris-suave:  #F2F4F7;  /* fondo de sección clara                         */
  --azul-marino: #0A4F80;  /* apoyo                                          */
  --azul-cielo:  #28A6E0;  /* apoyo                                          */
  --gris-claro:  #E6E9EE;  /* bordes suaves                                  */

  /* Tonos de uso web (añadidos por accesibilidad, obligatorios) */
  --azul-enlace: #1565C0;  /* enlaces y texto azul sobre blanco   5.75:1 */
  --verde-accion:#2F7D22;  /* botón principal con texto blanco    5.15:1 */
  --verde-ui:    #3C9A2C;  /* iconos y bordes verdes              3.59:1 */
  --gris-texto:  #5A6B7A;  /* párrafos secundarios                5.50:1 */
  --linea:       rgba(0,62,125,.12);

  /* Sistema */
  --fuente: 'Nunito Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fuente-claim: 'Caveat', 'Segoe Script', cursive;
  --sombra: 0 2px 14px rgba(0,62,125,.07);
  --radio-tarjeta: 8px;
  --radio-boton: 6px;
  --radio-input: 4px;
  --transicion: 180ms ease-out;
  --ancho: 1200px;
  --pad-lateral: 24px;
  --alto-header: 76px;
}

/* ------------------------------------------------------------
   3. RESET Y BASE
   ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--alto-header) + 16px);
}
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}

body{
  font-family:var(--fuente);
  font-size:17px;
  line-height:1.65;
  color:var(--carbon);
  background:#fff;
  overflow-wrap:break-word;
}
@media (min-width:900px){
  body{font-size:18px}
}
/* Hueco para la barra fija móvil */
@media (max-width:899px){
  body{padding-bottom:66px}
}

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

ul,ol{list-style:none}

a{color:var(--azul-enlace);text-decoration:none;transition:color var(--transicion)}
a:hover{text-decoration:underline}

button{font:inherit;background:none;border:none;cursor:pointer;color:inherit}

:focus-visible{
  outline:3px solid var(--azul-vivo);
  outline-offset:2px;
  border-radius:2px;
}
.seccion--azul :focus-visible,
.seccion--marino :focus-visible,
.menu-movil :focus-visible,
.pie :focus-visible{
  outline-color:var(--verde-claro);
}

/* Enlace para saltar al contenido */
.salto-contenido{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--azul);color:#fff;
  padding:12px 20px;font-weight:700;border-radius:0 0 var(--radio-boton) 0;
}
.salto-contenido:focus{left:0}

/* ------------------------------------------------------------
   4. TIPOGRAFÍA
   ------------------------------------------------------------ */
h1,h2,h3,h4{
  font-family:var(--fuente);
  color:var(--azul);
  text-wrap:balance;
}
h1{
  font-size:clamp(32px,6vw,56px);
  font-weight:800;
  line-height:1.10;
  letter-spacing:-.02em;
}
h2{
  font-size:clamp(25px,4vw,38px);
  font-weight:800;
  line-height:1.18;
}
h3{
  font-size:21px;
  font-weight:700;
  line-height:1.3;
}
p{max-width:70ch}

.texto-sec{font-size:15px;color:var(--gris-texto)}

.etiqueta{
  display:inline-block;
  font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;
  color:var(--verde-ui);
}
.etiqueta--clara{color:var(--verde-claro)}

.dato-grande{
  font-weight:800;font-size:40px;color:var(--azul);line-height:1.1;
}

.claim{
  font-family:var(--fuente-claim);
  font-weight:600;
  font-size:26px; /* Caveat: mínimo 22px, solo claim decorativo */
  line-height:1.25;
}

/* Separador de título: barra 64×4 verde + 18×4 azul vivo */
.sep-titulo{
  display:flex;align-items:center;gap:8px;
  margin:14px 0 0;
}
.sep-titulo::before{
  content:"";width:64px;height:4px;border-radius:2px;background:var(--verde);
}
.sep-titulo::after{
  content:"";width:18px;height:4px;border-radius:2px;background:var(--azul-vivo);
}
.sep-titulo--centro{justify-content:center}
.seccion--azul .sep-titulo::before,
.seccion--marino .sep-titulo::before{background:var(--verde-claro)}

/* ------------------------------------------------------------
   5. ESTRUCTURA DE SECCIÓN
   ------------------------------------------------------------ */
.contenedor{
  max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:var(--pad-lateral);
}

.seccion{padding-block:56px}
@media (min-width:900px){
  .seccion{padding-block:88px}
}

.seccion--gris{background:var(--gris-suave)}
.seccion--azul{background:var(--azul);color:#fff}
.seccion--marino{background:var(--azul-marino);color:#fff}

.seccion--azul h1,.seccion--azul h2,.seccion--azul h3,
.seccion--marino h2,.seccion--marino h3{color:#fff}
.seccion--azul p,.seccion--marino p{color:#fff}

.cabecera-seccion{margin-bottom:40px}
.cabecera-seccion--centro{text-align:center}
.cabecera-seccion--centro .sep-titulo{justify-content:center}
.cabecera-seccion .entradilla{margin-top:16px;color:var(--gris-texto)}
.seccion--azul .entradilla,.seccion--marino .entradilla{color:rgba(255,255,255,.85)}
.cabecera-seccion--centro .entradilla{margin-inline:auto}

/* ------------------------------------------------------------
   6. ONDA DE MARCA
   ------------------------------------------------------------ */
.onda{
  display:block;width:100%;height:64px;
}
@media (min-width:900px){
  .onda{height:110px}
}
/* Envoltura de la onda cuando la sección anterior es gris */
.onda-sobre-gris{background:var(--gris-suave);line-height:0;font-size:0}

/* ------------------------------------------------------------
   7. BOTONES
   ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-size:16px;font-weight:700;line-height:1.2;
  padding:14px 26px;
  border-radius:var(--radio-boton);
  border:2px solid transparent;
  text-decoration:none;
  transition:background-color var(--transicion),color var(--transicion),border-color var(--transicion);
  cursor:pointer;
}
.btn:hover{text-decoration:none}
.btn svg{flex:none}

.btn--primario{
  background:var(--verde-accion);color:#fff;border-color:var(--verde-accion);
}
.btn--primario:hover{background:var(--verde-ui);border-color:var(--verde-ui)}

.btn--secundario{
  background:transparent;color:var(--azul);border-color:var(--azul);
}
.btn--secundario:hover{background:var(--azul);color:#fff}

/* Variante para fondos azules: borde blanco */
.btn--blanco{
  background:transparent;color:#fff;border-color:#fff;
}
.btn--blanco:hover{background:#fff;color:var(--azul)}

.btn--terciario{
  padding:0;border:none;border-radius:0;
  color:var(--azul-enlace);font-weight:700;font-size:16px;
  background:none;
}
.btn--terciario:hover{text-decoration:underline}

.btn--bloque{width:100%}

.grupo-botones{display:flex;flex-wrap:wrap;gap:14px}

/* ------------------------------------------------------------
   8. ICONOS
   ------------------------------------------------------------ */
.icono{
  width:28px;height:28px;
  stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
  fill:none;
  flex:none;
}
.icono--azul{color:var(--azul-vivo)}
.icono--verde{color:var(--verde-ui)}
.seccion--azul .icono--verde,
.seccion--marino .icono--verde,
.pie .icono--verde{color:var(--verde-claro)}
.icono--peq{width:20px;height:20px}
.icono--gran{width:36px;height:36px}

/* ------------------------------------------------------------
   9. TOPBAR (solo escritorio)
   ------------------------------------------------------------ */
.topbar{
  display:none;
  background:var(--azul);color:#fff;
  font-size:13px;font-weight:600;
  height:36px;
}
@media (min-width:900px){
  .topbar{display:block}
  .topbar .contenedor{
    display:flex;align-items:center;justify-content:space-between;
    height:36px;
  }
}
.topbar__derecha{display:flex;align-items:center;gap:18px}
.topbar__sep{color:var(--verde-claro)}
.topbar a{color:var(--verde-claro);font-weight:700}
.topbar a:hover{color:#fff;text-decoration:none}

/* ------------------------------------------------------------
   10. HEADER
   ------------------------------------------------------------ */
.cabecera{
  position:sticky;top:0;z-index:100;
  background:#fff;
  border-bottom:1px solid var(--linea);
  transition:box-shadow var(--transicion);
}
.cabecera.con-sombra{box-shadow:var(--sombra)}
.cabecera .contenedor{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:var(--alto-header);
}

/* Logotipo montado: isotipo SVG + texto en fuentes del sistema */
.logo{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;
  min-width:150px;
}
.logo:hover{text-decoration:none}
.logo__iso{width:42px;height:41px}
.logo__texto{
  display:flex;flex-direction:column;align-items:flex-start;line-height:1;
  position:relative;padding-bottom:8px;
}
.logo__nombre{
  display:flex;align-items:baseline;gap:5px;
  white-space:nowrap;
}
.logo__pura{
  font-weight:800;font-size:23px;letter-spacing:.01em;color:var(--azul);
}
.logo__clima{
  font-family:var(--fuente-claim);font-weight:600;font-size:26px;
  color:var(--verde);
  transform:skewX(-4deg);
  display:inline-block;
}
/* Descriptor: en el header se escala para ocupar el mismo ancho que
   «PURA Clima», como en el logotipo real del manual */
.logo__descriptor{
  position:absolute;left:0;bottom:0;
  font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--azul);white-space:nowrap;
  transform:scale(.334);transform-origin:left bottom;
}
.logo__descriptor .punto{color:var(--verde)}

/* Colores del isotipo por contexto (variables que atraviesan el <use>) */
.menu-movil .logo__iso,
.pie .logo__iso{--iso-hoja:var(--verde-claro);--iso-flor:#FFFFFF}
.hero__marca{--iso-hoja:#FFFFFF;--iso-flor:#FFFFFF}

/* Navegación escritorio */
.nav{display:none}
@media (min-width:900px){
  .nav{display:flex;align-items:center;gap:4px}
}
.nav__enlace{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 12px;
  font-size:16px;font-weight:700;color:var(--azul);
  border-radius:var(--radio-boton);
  transition:background-color var(--transicion);
}
.nav__enlace:hover{background:var(--gris-suave);text-decoration:none}
.nav__enlace[aria-current="page"]{color:var(--azul-enlace)}
.nav__caret{width:12px;height:12px;transition:transform var(--transicion)}
.nav__item--desplegable{position:relative}
.nav__item--desplegable [aria-expanded="true"] .nav__caret{transform:rotate(180deg)}

.cabecera__cta{display:none}
@media (min-width:900px){
  .cabecera__cta{display:inline-flex;padding:12px 20px}
}

/* Desplegable de servicios */
.desplegable{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  width:640px;max-width:calc(100vw - 48px);
  background:#fff;border:1px solid var(--gris-claro);border-radius:var(--radio-tarjeta);
  box-shadow:var(--sombra);
  padding:14px;
  display:none;
  grid-template-columns:1fr 1fr;gap:4px;
}
.desplegable.abierto{display:grid}
.desplegable__enlace{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px;border-radius:var(--radio-boton);
  transition:background-color var(--transicion);
}
.desplegable__enlace:hover{background:var(--gris-suave);text-decoration:none}
.desplegable__enlace .icono{margin-top:2px}
.desplegable__nombre{display:block;font-weight:700;font-size:16px;color:var(--azul)}
.desplegable__desc{display:block;font-size:14px;color:var(--gris-texto);line-height:1.4}

/* Botón hamburguesa */
.btn-menu{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--radio-boton);
  color:var(--azul);
}
@media (min-width:900px){
  .btn-menu{display:none}
}

/* Menú móvil a pantalla completa */
.menu-movil{
  position:fixed;inset:0;z-index:200;
  background:var(--azul);color:#fff;
  padding:20px 24px 40px;
  display:none;
  flex-direction:column;
  overflow-y:auto;
}
.menu-movil.abierto{display:flex}
.menu-movil__cabecera{
  display:flex;align-items:center;justify-content:space-between;
  min-height:56px;margin-bottom:28px;
}
.menu-movil .logo__pura{color:#fff}
.menu-movil .logo__clima{color:var(--verde-claro)}
.menu-movil .logo__descriptor{color:#fff}
.menu-movil .logo__descriptor .punto{color:var(--verde-claro)}
.btn-cerrar-menu{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;color:#fff;border-radius:var(--radio-boton);
}
.menu-movil__lista > li + li{border-top:1px solid rgba(255,255,255,.14)}
.menu-movil__enlace{
  display:block;padding:16px 0;
  font-size:22px;font-weight:800;color:#fff;
}
.menu-movil__enlace:hover{color:var(--verde-claro);text-decoration:none}
.menu-movil__sub{padding:0 0 12px}
.menu-movil__sub a{
  display:block;padding:8px 0 8px 16px;
  font-size:17px;font-weight:600;color:rgba(255,255,255,.85);
}
.menu-movil__sub a:hover{color:var(--verde-claro);text-decoration:none}
.menu-movil__pie{margin-top:auto;padding-top:32px}
.menu-movil__tel{
  display:inline-flex;align-items:center;gap:10px;
  font-size:24px;font-weight:800;color:var(--verde-claro);
}
.menu-movil__tel:hover{color:#fff;text-decoration:none}

/* Bloqueo de scroll cuando el menú está abierto */
body.sin-scroll{overflow:hidden}

/* ------------------------------------------------------------
   11. BARRA FIJA MÓVIL
   ------------------------------------------------------------ */
.barra-movil{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  display:grid;grid-template-columns:1fr 1fr 1fr;
  background:#fff;
  border-top:1px solid var(--gris-claro);
}
@media (min-width:900px){
  .barra-movil{display:none}
}
.barra-movil a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:9px 4px 10px;
  font-size:12px;font-weight:700;color:#fff;
}
.barra-movil a:hover{text-decoration:none}
.barra-movil .icono{width:22px;height:22px;color:#fff}
.barra-movil__llamar{background:var(--verde-accion)}
.barra-movil__whatsapp{background:#25D366} /* color oficial WhatsApp, exigido en §6 */
.barra-movil__presupuesto{background:var(--azul)}

/* ------------------------------------------------------------
   12. TARJETAS
   ------------------------------------------------------------ */
.tarjeta{
  background:#fff;
  border:1px solid var(--gris-claro);
  border-radius:var(--radio-tarjeta);
  box-shadow:var(--sombra);
  padding:28px;
}

/* Tarjeta de servicio (cuadrícula 3×2) */
.rejilla-servicios{
  display:grid;gap:20px;
  grid-template-columns:1fr;
}
@media (min-width:640px){
  .rejilla-servicios{grid-template-columns:1fr 1fr}
}
@media (min-width:980px){
  .rejilla-servicios{grid-template-columns:repeat(3,1fr)}
}
.tarjeta-servicio{
  display:flex;flex-direction:column;gap:12px;
  transition:border-color var(--transicion);
}
.tarjeta-servicio:hover{border-color:var(--azul-vivo)}
.tarjeta-servicio h3{margin-top:4px}
.tarjeta-servicio p{font-size:16px;color:var(--gris-texto);flex-grow:1}
.tarjeta-servicio .btn--terciario{align-self:flex-start}

/* Tarjeta de segmento (imagen + velo azul) */
.rejilla-segmentos{
  display:grid;gap:20px;grid-template-columns:1fr;
}
@media (min-width:900px){
  .rejilla-segmentos{grid-template-columns:repeat(3,1fr)}
}
.tarjeta-segmento{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:320px;
  border-radius:var(--radio-tarjeta);
  overflow:hidden;
  box-shadow:var(--sombra);
  background:var(--gris-claro);
}
.tarjeta-segmento:hover{text-decoration:none}
.tarjeta-segmento__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.tarjeta-segmento__velo{
  position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(0,62,125,.86), rgba(0,62,125,.55));
  transition:background-color var(--transicion);
}
.tarjeta-segmento:hover .tarjeta-segmento__velo{background:linear-gradient(100deg, rgba(0,62,125,.92), rgba(0,62,125,.66))}
.tarjeta-segmento__contenido{
  position:relative;padding:26px;color:#fff;
}
.tarjeta-segmento__contenido .etiqueta--clara{margin-bottom:6px}
.tarjeta-segmento__titulo{color:#fff;font-size:25px;font-weight:800}
.tarjeta-segmento__texto{color:rgba(255,255,255,.92);font-size:16px;margin-top:6px}
.tarjeta-segmento__flecha{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:14px;font-weight:700;font-size:15px;color:var(--verde-claro);
}
/* Nombre del archivo de foto pendiente, hasta tener imagen real */
.tarjeta-segmento__pendiente{
  position:absolute;top:12px;right:14px;z-index:1;
  font-size:12px;font-weight:700;color:rgba(255,255,255,.65);
}

/* Placeholder para imágenes pendientes */
.img-pendiente{
  display:flex;align-items:center;justify-content:center;
  background:var(--gris-claro);
  color:var(--gris-texto);
  font-size:14px;font-weight:700;text-align:center;
  border-radius:var(--radio-tarjeta);
  min-height:220px;
  padding:20px;
  word-break:break-all;
}

/* ------------------------------------------------------------
   13. LISTAS DE CHECKS / CRUCES / SELLOS
   ------------------------------------------------------------ */
.lista-checks li,
.lista-cruces li{
  display:flex;gap:12px;align-items:flex-start;
  padding-block:7px;
}
.lista-checks .icono{color:var(--verde-ui);margin-top:3px}
.seccion--azul .lista-checks .icono{color:var(--verde-claro)}
.lista-cruces .icono{color:var(--gris-texto);margin-top:3px}
.lista-cruces li{color:var(--gris-texto)}

.sellos{
  display:flex;flex-wrap:wrap;gap:14px 28px;
}
.sello{
  display:flex;align-items:center;gap:10px;
  font-size:15px;font-weight:700;
}
.seccion--azul .sello{color:#fff}
.sello .icono{color:var(--verde-claro)}

/* Etiquetas tipo chip (credenciales) */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;
  border:1.5px solid var(--linea);
  border-radius:999px;
  font-size:14px;font-weight:700;color:var(--azul);
  background:var(--gris-suave);
}
.chip .icono{width:18px;height:18px;color:var(--verde-ui)}

/* ------------------------------------------------------------
   14. PASOS NUMERADOS (cómo trabajamos)
   ------------------------------------------------------------ */
.pasos{
  display:grid;gap:36px;grid-template-columns:1fr;
  counter-reset:paso;
  position:relative;
}
@media (min-width:900px){
  .pasos{grid-template-columns:repeat(4,1fr);gap:28px}
}
.paso{position:relative;padding-left:0}
.paso__num{
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;
  background:var(--verde-claro);
  color:var(--azul);font-weight:800;font-size:19px;
  margin-bottom:16px;
  position:relative;z-index:1;
}
/* Línea fina que une los pasos */
@media (min-width:900px){
  .paso:not(:last-child)::before{
    content:"";position:absolute;top:26px;left:52px;right:-28px;
    height:2px;background:var(--verde-claro);opacity:.45;
  }
}
/* En móvil el número va a la izquierda y el texto indentado,
   para que la línea vertical no cruce el contenido */
@media (max-width:899px){
  .paso{padding-left:70px;min-height:52px}
  .paso__num{position:absolute;left:0;top:0;margin-bottom:0}
  .paso:not(:last-child)::before{
    content:"";position:absolute;top:52px;left:25px;bottom:-36px;
    width:2px;background:var(--verde-claro);opacity:.45;
  }
}
.paso h3{color:#fff;margin-bottom:6px}
.paso p{color:rgba(255,255,255,.85);font-size:16px}

/* ------------------------------------------------------------
   15. BLOQUES "POR QUÉ" (icono + título + texto)
   ------------------------------------------------------------ */
.rejilla-porque{
  display:grid;gap:32px;grid-template-columns:1fr;
}
@media (min-width:640px){
  .rejilla-porque{grid-template-columns:1fr 1fr}
}
.porque{display:flex;gap:16px;align-items:flex-start}
.porque .icono{margin-top:4px}
.porque h3{margin-bottom:6px}
.porque p{font-size:16px;color:var(--gris-texto)}

/* ------------------------------------------------------------
   16. FAQ — acordeón con <details>
   ------------------------------------------------------------ */
.faq{max-width:820px;margin-inline:auto}
.faq details{
  border:1px solid var(--gris-claro);
  border-radius:var(--radio-tarjeta);
  background:#fff;
  margin-bottom:12px;
  overflow:hidden;
}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;
  font-weight:700;font-size:17px;color:var(--azul);
  cursor:pointer;list-style:none;
  transition:background-color var(--transicion);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--gris-suave)}
.faq summary .icono{
  width:22px;height:22px;color:var(--azul-vivo);
  transition:transform var(--transicion);
}
.faq details[open] summary .icono{transform:rotate(45deg)}
.faq .faq__respuesta{
  padding:0 22px 20px;
  font-size:16px;color:var(--carbon);
}

/* ------------------------------------------------------------
   17. FORMULARIO
   ------------------------------------------------------------ */
.formulario{
  background:#fff;
  border-radius:var(--radio-tarjeta);
  box-shadow:var(--sombra);
  padding:32px 28px;
}
.formulario h3{margin-bottom:4px}
.formulario .texto-sec{margin-bottom:20px}

.campo{margin-bottom:16px}
.campo label{
  display:block;
  font-size:15px;font-weight:700;color:var(--azul);
  margin-bottom:6px;
}
.campo input[type="text"],
.campo input[type="tel"],
.campo input[type="email"],
.campo select,
.campo textarea{
  width:100%;
  font:inherit;font-size:16px;color:var(--carbon);
  background:#fff;
  border:1.5px solid var(--gris-claro);
  border-radius:var(--radio-input);
  padding:12px 14px;
  transition:border-color var(--transicion);
}
.campo select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23003E7D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:40px;
}
.campo textarea{min-height:110px;resize:vertical}
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible{
  outline:3px solid var(--azul-vivo);outline-offset:1px;
  border-color:var(--azul-vivo);
}
.campo.campo--error input,
.campo.campo--error select,
.campo.campo--error textarea{border-color:var(--azul-vivo);border-width:2px}

.campo__error{
  display:none;
  margin-top:6px;
  font-size:13px;font-weight:700;color:var(--carbon);
  align-items:center;gap:6px;
}
.campo--error .campo__error{display:flex}
.campo__error .icono{width:16px;height:16px;color:var(--azul-vivo)}

.consentimiento{
  display:flex;gap:10px;align-items:flex-start;
  margin-top:20px;
}
.consentimiento input{
  width:20px;height:20px;flex:none;margin-top:2px;
  accent-color:var(--verde-accion);
}
.consentimiento label{
  font-size:14px;font-weight:400;color:var(--gris-texto);margin:0;
}

/* Estados de envío del formulario (fetch a /enviar.php) */
.form-estado{
  display:none;
  font-size:15px;font-weight:700;
  margin-bottom:14px;
}
.form-estado--error{
  display:block;
  color:#C0392B; /* color de error exigido por la integración con el backend */
}
.form-exito{text-align:center;padding:16px 0}
.form-exito .icono{
  width:48px;height:48px;color:var(--verde-ui);
  margin:0 auto 12px;
}
.form-exito h3{margin-bottom:8px}

/* ------------------------------------------------------------
   18. HERO
   ------------------------------------------------------------ */
.hero{
  position:relative;
  background:var(--azul);color:#fff;
  overflow:hidden;
}
.hero__contenido{
  position:relative;z-index:1;
  display:grid;gap:40px;grid-template-columns:1fr;
  padding-block:56px 24px;
  align-items:center;
}
@media (min-width:900px){
  .hero__contenido{
    grid-template-columns:55fr 45fr;
    padding-block:88px 40px;
    min-height:640px;
  }
}
.hero .etiqueta--clara{margin-bottom:14px}
.hero h1{color:#fff;max-width:16ch}
.hero__parrafo{
  margin-top:18px;
  color:rgba(255,255,255,.9);
  max-width:54ch;
}
.hero .grupo-botones{margin-top:28px}
.hero .sellos{margin-top:32px}
.hero__imagen img,
.hero__imagen .img-pendiente{
  border-radius:var(--radio-tarjeta);
  width:100%;
}
.hero__imagen .img-pendiente{min-height:300px}
@media (min-width:900px){
  .hero__imagen .img-pendiente{min-height:420px}
}
/* Isotipo de fondo, marca de agua */
.hero__marca{
  position:absolute;right:-120px;top:-40px;
  width:560px;height:auto;
  opacity:.07;
  pointer-events:none;
}
.hero .onda{position:relative;z-index:1}

/* ------------------------------------------------------------
   19. TIRA DE CONFIANZA
   ------------------------------------------------------------ */
.tira-confianza{
  background:#fff;
  border-bottom:1px solid var(--gris-claro);
}
.tira-confianza .contenedor{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:14px 40px;
  padding-block:20px;
}
.tira-confianza__item{
  display:flex;align-items:center;gap:10px;
  font-size:15px;font-weight:700;color:var(--azul);
}
.tira-confianza__item .icono{width:22px;height:22px}
.tira-confianza__marcas{color:var(--gris-texto);font-weight:600}

/* ------------------------------------------------------------
   20. BLOQUE SUBVENCIONES / CTA BANDA
   ------------------------------------------------------------ */
.banda-dos-col{
  display:grid;gap:32px;grid-template-columns:1fr;align-items:center;
}
@media (min-width:900px){
  .banda-dos-col{grid-template-columns:3fr 2fr}
  .banda-dos-col--40-60{grid-template-columns:2fr 3fr}
  .banda-dos-col .grupo-botones{justify-content:flex-end}
}

/* ------------------------------------------------------------
   21. CTA FINAL + CONTACTO
   ------------------------------------------------------------ */
.cta-final__rejilla{
  display:grid;gap:48px;grid-template-columns:1fr;align-items:start;
}
@media (min-width:900px){
  .cta-final__rejilla{grid-template-columns:1fr 1fr}
}
.cta-final__tel{
  display:inline-flex;align-items:center;gap:14px;
  font-size:clamp(28px,4vw,40px);font-weight:800;color:#fff;
  margin-top:20px;
}
.cta-final__tel:hover{color:var(--verde-claro);text-decoration:none}
.cta-final__tel .icono{width:34px;height:34px;color:var(--verde-claro)}
.cta-final__horario{
  margin-top:10px;
  color:rgba(255,255,255,.85);font-size:16px;
}
.cta-final .btn{margin-top:24px}
.cta-final .claim{
  margin-top:36px;
  color:var(--verde-claro);
}

/* ------------------------------------------------------------
   22. ZONAS
   ------------------------------------------------------------ */
.lista-zonas{
  display:flex;flex-wrap:wrap;gap:12px;
}
.lista-zonas a,
.lista-zonas span{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;
  background:#fff;
  border:1px solid var(--gris-claro);
  border-radius:999px;
  font-size:15px;font-weight:700;color:var(--azul);
  transition:border-color var(--transicion);
}
.lista-zonas a:hover{border-color:var(--azul-vivo);text-decoration:none}
.lista-zonas .icono{width:17px;height:17px;color:var(--verde-ui)}

/* ------------------------------------------------------------
   23. FOOTER
   ------------------------------------------------------------ */
.pie{
  background:var(--azul);color:#fff;
}
.pie__rejilla{
  display:grid;gap:40px;grid-template-columns:1fr;
  padding-block:56px 40px;
}
@media (min-width:640px){
  .pie__rejilla{grid-template-columns:1fr 1fr}
}
@media (min-width:980px){
  .pie__rejilla{grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
}
.pie .logo__pura{color:#fff}
.pie .logo__clima{color:var(--verde-claro)}
/* En el pie hay sitio: descriptor a tamaño legible (9px) */
.pie .logo__texto{padding-bottom:0}
.pie .logo__descriptor{
  position:static;transform:none;white-space:normal;
  margin-top:5px;line-height:1.6;
  color:#fff;
}
.pie .logo__descriptor .punto{color:var(--verde-claro)}
.pie__claim{
  font-family:var(--fuente-claim);font-weight:600;font-size:24px;
  color:var(--verde-claro);
  margin-top:18px;
}
.pie__tel{
  display:inline-flex;align-items:center;gap:10px;
  font-size:26px;font-weight:800;color:#fff;
  margin-top:14px;
}
.pie__tel:hover{color:var(--verde-claro);text-decoration:none}
.pie__tel .icono{color:var(--verde-claro);width:24px;height:24px}
.pie__correo{color:var(--verde-claro);font-weight:700}
.pie__correo:hover{color:#fff}
.pie h2{
  font-size:15px;font-weight:800;color:#fff;
  text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:16px;
}
.pie__lista li{margin-bottom:9px}
.pie__lista a{color:rgba(255,255,255,.85);font-size:15px;font-weight:600}
.pie__lista a:hover{color:var(--verde-claro);text-decoration:none}
.pie__fiscal{
  font-size:13px;color:rgba(255,255,255,.7);
  margin-top:18px;line-height:1.6;
}
.pie__final{
  border-top:1px solid rgba(255,255,255,.14);
  padding-block:18px;
  font-size:13px;color:rgba(255,255,255,.7);
  text-align:center;
}
.pie__final a{
  color:rgba(255,255,255,.85);
  font-weight:700;
}
.pie__final a:hover{color:var(--verde-claro)}

/* ------------------------------------------------------------
   24. BREADCRUMB (páginas interiores)
   ------------------------------------------------------------ */
.migas{
  padding-block:14px;
  font-size:14px;color:var(--gris-texto);
}
.migas ol{display:flex;flex-wrap:wrap;gap:6px}
.migas li + li::before{content:"›";margin-right:6px;color:var(--gris-texto)}
.migas a{color:var(--azul-enlace);font-weight:600}
.migas [aria-current="page"]{color:var(--gris-texto)}

/* ------------------------------------------------------------
   25. TABLA (precios)
   ------------------------------------------------------------ */
.tabla-envoltura{overflow-x:auto;border:1px solid var(--gris-claro);border-radius:var(--radio-tarjeta)}
.tabla{width:100%;border-collapse:collapse;font-size:16px;background:#fff}
.tabla th{
  background:var(--azul);color:#fff;text-align:left;
  padding:14px 16px;font-weight:700;font-size:15px;
}
.tabla td{padding:14px 16px;border-top:1px solid var(--gris-claro);vertical-align:top}
.tabla td:first-child{font-weight:700;color:var(--azul)}

/* Aviso destacado */
.aviso{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--gris-suave);
  border-left:4px solid var(--verde-ui);
  border-radius:var(--radio-input);
  padding:18px 20px;
  font-size:16px;
}
.aviso .icono{color:var(--verde-ui);margin-top:2px}

/* ------------------------------------------------------------
   26. ANIMACIÓN DE ENTRADA (IntersectionObserver)
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference){
  html.js .reveal{
    opacity:0;
    transform:translateY(12px);
    transition:opacity 180ms ease-out,transform 180ms ease-out;
  }
  html.js .reveal.visible{
    opacity:1;
    transform:none;
  }
}

/* ------------------------------------------------------------
   27. UTILIDADES
   ------------------------------------------------------------ */
.mt-8{margin-top:8px}
.mt-16{margin-top:16px}
.mt-24{margin-top:24px}
.mt-32{margin-top:32px}
.mt-40{margin-top:40px}
.centro{text-align:center}
.oculto-visualmente{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ============================================================
   28. AMPLIACIONES — páginas interiores e imágenes
   (solo clases nuevas; no se modifica lo anterior)
   ============================================================ */

/* Cabecera de página interior: variante compacta del hero */
.hero--pagina .hero__contenido{padding-block:32px 24px}
@media (min-width:900px){
  .hero--pagina .hero__contenido{min-height:0;padding-block:48px 40px}
}
.hero--pagina h1{max-width:20ch}

/* Migas de pan sobre fondo azul */
.migas--clara{color:rgba(255,255,255,.75);padding-block:0 18px}
.migas--clara a{color:var(--verde-claro)}
.migas--clara li + li::before{color:rgba(255,255,255,.55)}
.migas--clara [aria-current="page"]{color:rgba(255,255,255,.75)}

/* Foto de fondo en tarjeta de segmento */
.tarjeta-segmento__foto{position:absolute;inset:0}
.tarjeta-segmento__foto img{width:100%;height:100%;object-fit:cover}

/* Foto superior en tarjeta de servicio */
.tarjeta-servicio__foto{
  margin:-28px -28px 18px;
  border-radius:var(--radio-tarjeta) var(--radio-tarjeta) 0 0;
  overflow:hidden;
}
.tarjeta-servicio__foto img{width:100%;height:180px;object-fit:cover}

/* Imagen suelta en banda de dos columnas */
.banda-dos-col__imagen img{border-radius:var(--radio-tarjeta);width:100%;height:auto}

/* Mapa de OpenStreetMap */
.mapa{
  display:block;width:100%;height:380px;
  border:1px solid var(--gris-claro);
  border-radius:var(--radio-tarjeta);
}

/* Guía larga con índice lateral pegajoso (subvenciones) */
.guia{display:grid;gap:40px;grid-template-columns:1fr;align-items:start}
@media (min-width:900px){
  .guia{grid-template-columns:260px 1fr}
}
.guia__indice{
  background:var(--gris-suave);
  border-radius:var(--radio-tarjeta);
  padding:22px;
}
@media (min-width:900px){
  .guia__indice{position:sticky;top:calc(var(--alto-header) + 24px)}
}
.guia__indice h2{
  font-size:15px;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:10px;
}
.guia__indice a{
  display:block;padding:7px 0;
  font-size:15px;font-weight:600;color:var(--azul-enlace);
}
.guia__cuerpo > h2{margin-top:48px}
.guia__cuerpo > h2:first-child{margin-top:0}
.guia__cuerpo p,.guia__cuerpo ul{margin-top:14px}

/* Línea de última actualización */
.fecha-actualizacion{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:700;color:var(--gris-texto);
}

/* Tarjeta destacada (ejemplo numérico) */
.tarjeta--destacada{border:2px solid var(--verde-ui)}

/* Línea de marcas */
.marcas-linea{font-weight:800;font-size:clamp(20px,3vw,28px);color:var(--azul)}

/* Utilidades de centrado (gracias / 404) */
.mx-auto{margin-inline:auto}
.flex-centro{justify-content:center}

/* Frase de marca destacada (biografía) */
.frase-marca{
  font-weight:700;font-size:20px;line-height:1.5;color:var(--azul);
  border-left:4px solid var(--verde);padding-left:16px;
  max-width:70ch;
}

/* Nota RGPD bajo el formulario */
.nota-rgpd{
  font-size:12px;color:var(--gris-texto);line-height:1.5;
  margin:14px 0 2px;
}
.nota-rgpd a{font-weight:700}

/* Séptima tarjeta de servicio, destacada */
.tarjeta-servicio--destacada{border:2px solid var(--verde)}
@media (min-width:980px){
  .tarjeta-servicio--destacada{grid-column:1 / -1}
}

/* Botón flotante de WhatsApp — solo escritorio
   (en móvil ya existe la barra fija inferior con WhatsApp) */
.whatsapp-flotante{
  display:none;
  position:fixed;right:28px;bottom:28px;z-index:150;
  width:58px;height:58px;border-radius:50%;
  background:#25D366; /* color oficial WhatsApp, exigido en §6 */
  align-items:center;justify-content:center;
  box-shadow:var(--sombra);
  transition:transform var(--transicion);
}
.whatsapp-flotante:hover{transform:scale(1.08)}
.whatsapp-flotante .icono{width:30px;height:30px;color:#fff}
@media (min-width:900px){
  .whatsapp-flotante{display:flex}
}

/* Teléfono grande sobre fondo claro (gracias, 404, contacto) */
.tel-grande{
  display:inline-flex;align-items:center;gap:14px;
  font-size:clamp(28px,4vw,40px);font-weight:800;color:var(--azul);
}
.tel-grande:hover{color:var(--azul-enlace);text-decoration:none}
.tel-grande .icono{width:34px;height:34px;color:var(--verde-ui)}

/* Logotipo completo (solo gracias y 404, según manual) */
.logo-completo{max-width:320px;margin-inline:auto}

/* Lista de definiciones en legales */
.legal h2{margin-top:40px}
.legal p,.legal ul{margin-top:14px}
.legal ul{list-style:disc;padding-left:24px}
.legal li{margin-top:6px}