/* ANNA Cuidado Técnico del Hogar — Technical Care Editorial
   Paleta y tipografía basadas en las referencias visuales de Stitch. */

:root {
  --primary: #032c1e;
  --primary-container: #1d4233;
  --on-primary: #ffffff;
  --primary-fixed: #c3ecd6;
  --primary-fixed-dim: #a7cfbb;
  --on-primary-fixed: #002115;
  --inverse-primary: #a7cfbb;

  --background: #fbf9f8;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f6f3f2;
  --surface-container: #f0eded;
  --surface-container-high: #eae8e7;
  --ivory-surface: #f9f6f0;
  --mint-subtle: #f2f7f4;

  --on-surface: #1b1c1c;
  --on-surface-variant: #414844;
  --stone-gray: #707070;
  --outline: #717974;
  --outline-variant: #c1c8c2;

  --tertiary: #202724;
  --tertiary-container: #353d39;
  --inverse-on-surface: #f3f0f0;

  --whatsapp: #25D366;

  --radius-sm: 0.125rem;
  --radius-lg: 0.25rem;
  --radius-xl: 0.5rem;
  --radius-full: 9999px;

  --gutter: 24px;
  --container-max: 1200px;
  --margin-mobile: 20px;
  --margin-desktop: 48px;
  --section-gap: 96px;

  /* ---------- Personalización por momento del día (ecualizador ANNA) ----------
     v1: dos variables numéricas (--anna-luz-warmth/--anna-luz-dim) + una
     fórmula calc() única. Quedó descartada: (a) el ecualizador nunca llegó
     a escribir esas dos variables — solo emite el código de tramo
     (AM1/AM2/MD/AT/AN1/AN2) — así que habría exigido una capa de traducción
     que nadie iba a construir, y (b) con coeficientes tan conservadores
     (0.12, 0.14, -7deg) el efecto era casi imperceptible a ojo, confirmado
     en la revisión visual.
     v2 (actual): el propio anna-equalizer-web.js 1.3.0 ya escribe
     `data-anna-luz` como atributo en <html> (además de la custom property
     --anna-luz), así que el CSS puede ramificar directamente con un
     selector de atributo normal — sin @container style() y sin variables
     intermedias. Los 6 filtros van más abajo, en
     html[data-anna-luz="…"] .hero::before / .service-visual.photo, uno por
     tramo, con valores más marcados (contrast, sepia hasta 0.25, hue-rotate
     hasta 180deg) — visibles de verdad, no solo en teoría. Ver
     web-reference/anna-luz-filters.css del paquete anna-equalizer 1.3.0. */
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--on-surface);
  font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-display {
  font-family: "Playfair Display", Georgia, serif;
  margin: 0;
  font-weight: 600;
}

p { margin: 0; }

a {
  color: inherit;
  text-decoration: none;
}

img { max-width: 100%; display: block; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--margin-mobile);
}

@media (min-width: 1024px) {
  .container { padding: 0 var(--margin-desktop); }
}

.section {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: "Source Sans 3", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}

.eyebrow .rule {
  width: 32px;
  height: 1px;
  background: color-mix(in srgb, var(--primary) 50%, transparent);
  display: inline-block;
}

.eyebrow.on-dark {
  color: var(--inverse-primary);
}
.eyebrow.on-dark .rule {
  background: color-mix(in srgb, var(--inverse-primary) 50%, transparent);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 32px;
  border-radius: var(--radius-full);
  font-family: "Source Sans 3", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 1px 2px rgba(3, 44, 30, 0.15);
}
.btn-primary:hover {
  background: var(--primary-container);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--outline-variant);
  color: var(--on-surface);
}
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }

.btn-outline.on-dark {
  border-color: rgba(255,255,255,0.3);
  color: var(--surface-container-lowest);
}
.btn-outline.on-dark:hover { border-color: rgba(255,255,255,0.6); }

.btn-whatsapp {
  background: var(--whatsapp);
  color: white;
}
.btn-whatsapp:hover { background: #1ebc59; }

.link-underline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface);
}
.link-underline span:first-child {
  border-bottom: 1px solid var(--on-surface);
  padding-bottom: 2px;
}
.link-underline:hover { color: var(--primary); }
.link-underline:hover span:first-child { border-color: var(--primary); }
.link-underline svg { transition: transform 0.2s ease; }
.link-underline:hover svg { transform: translateX(3px); }

/* ---------- Skip link (accesibilidad) ---------- */

.skip-link {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 1000;
  background: var(--primary);
  color: var(--on-primary, #fff);
  padding: 12px 20px;
  border-radius: var(--radius-full, 999px);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 12px;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: rgba(251, 249, 248, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 40%, transparent);
}

.site-header .container {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  /* The header needs more room than the page's usual 1200px content
     width once the full nav (logo, 8 links, call/CTA/lang) is on one
     line — only kicks in above the 1459px hamburger breakpoint. */
  max-width: 1550px;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.brand-lockup img { height: 34px; width: auto; }

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--gutter);
}
.main-nav a {
  font-size: 15px;
  color: var(--on-surface-variant);
  transition: color 0.2s ease;
}
.main-nav a:hover { color: var(--primary); }
.main-nav a.nav-active {
  color: var(--primary);
  font-weight: 600;
  position: relative;
}
.main-nav a.nav-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--primary);
}

/* "Servicios" — menú desplegable con dos secciones por tipo (Atención /
   Cuidado), en un único panel — nunca un submenú que abre otro submenú.
   Se implementa con <details>/<summary> nativo: funciona igual en escritorio
   (el panel flota bajo el enlace) y en móvil (se expande en línea dentro del
   propio acordeón del menú principal, sin JS adicional ni una pantalla
   nueva). Un tercer tipo, "Confianza" (mayordomo ANNA), se añadirá como
   grupo nuevo dentro de este mismo panel cuando ese servicio esté más
   avanzado — ver comentario en el HTML de este bloque. */
.nav-dropdown {
  position: relative;
}
.nav-dropdown > summary {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  color: var(--on-surface-variant);
  transition: color 0.2s ease;
}
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown > summary::marker { content: ""; }
.nav-dropdown-caret { flex-shrink: 0; transition: transform 0.2s ease; }
.nav-dropdown[open] > summary .nav-dropdown-caret { transform: rotate(180deg); }
.nav-dropdown > summary:hover { color: var(--primary); }
.nav-dropdown.nav-active > summary {
  color: var(--primary);
  font-weight: 600;
  position: relative;
}
.nav-dropdown.nav-active > summary::after {
  content: "";
  position: absolute;
  left: 0; right: 16px; bottom: -6px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--primary);
}

.nav-dropdown-panel {
  display: flex;
  gap: 28px;
}
.nav-dropdown-group {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 168px;
}
.nav-dropdown-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone-gray);
  margin: 0 0 2px 0;
}
.nav-dropdown-panel a {
  font-size: 14.5px;
  color: var(--on-surface-variant);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.nav-dropdown-panel a:hover { color: var(--primary); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

.call-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
.call-link:hover { color: var(--primary); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--on-surface);
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--on-surface-variant);
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--outline-variant) 70%, transparent);
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.lang-switch:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.legal-page .lang-switch { margin-left: auto; }

/* ---------- Hero ---------- */

.hero {
  /* La foto vive en ::before (ver más abajo), no aquí — así el filtro de
     luz del día se puede aplicar solo a la foto sin afectar al texto/
     botones de .hero-inner, que SÍ son hijos directos de .hero. Un
     `filter` en CSS afecta a todo el contenido de un elemento, texto
     incluido, así que aislar la foto en su propio pseudo-elemento es
     obligatorio, no una preferencia de estilo. */
  /* --hero-bg-image-rotate: NO se define aquí — la escribe el script
     inline del <head> de index.html (ver esa página), eligiendo entre
     hero-photo-a/b/c.jpg según el segundo actual módulo 3. Como es una
     custom property normal, hereda desde <html> hasta aquí sin problema.
     Si el script no corre (JS desactivado, u otra página con .hero que
     no lo incluye, como las heroes de zona) cae en hero-photo.jpg, que
     es una copia fija de la variante "a" — así nunca hay hueco en blanco.
     Las heroes de zona (.hero-zone-a6/a1/m30, más abajo) redefinen
     --hero-bg-image directamente y con eso basta para ganarle a este
     fallback, sin tocar nada de lo de aquí. */
  --hero-bg-image: var(--hero-bg-image-rotate, url("assets/hero-photo.9162e01f7a.jpg"));
  /* --hero-bg-image-mobile: sin definir por defecto — se rellena por
     hero (ver ".hero"/".hero-zone-*" con archivo -mobile) cuando llega el
     encuadre 9:16. --hero-bg-image-active es la que de verdad se pinta
     (ver .hero::before); en escritorio es igual a --hero-bg-image, y por
     debajo de 767px pasa a usar la mobile si existe (si no, seguimos
     viendo la de escritorio recortada — nunca un hueco en blanco). No
     redefinas --hero-bg-image-active a partir de sí misma en ningún sitio:
     sería una referencia circular y CSS invalida la propiedad entera. */
  --hero-bg-image-active: var(--hero-bg-image);
  position: relative;
  width: 100%;
  min-height: 78vh;
  display: flex;
  align-items: center;
  background: var(--tertiary);
  color: var(--surface-container-lowest);
  overflow: hidden;
}

@media (max-width: 767px) {
  .hero {
    --hero-bg-image-active: var(--hero-bg-image-mobile, var(--hero-bg-image));
  }
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--tertiary) 94%, transparent) 0%, color-mix(in srgb, var(--tertiary) 78%, transparent) 40%, color-mix(in srgb, var(--tertiary) 38%, transparent) 75%, color-mix(in srgb, var(--tertiary) 20%, transparent) 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--tertiary) 55%, transparent) 0%, transparent 55%),
    var(--hero-bg-image-active) center/cover no-repeat;
  /* Personalización por momento del día: el filtro en sí vive en las
     reglas html[data-anna-luz="…"] .hero::before de más abajo — aquí solo
     la transición. Se aplica en esta capa de la foto, nunca en .hero,
     porque .hero también envuelve el texto/botones de .hero-inner y un
     filter() tiñe todo el contenido del elemento, no solo el fondo. */
  transition: var(--anna-luz-transition, filter 0.6s ease);
}

/* ---------- Personalización por momento del día — filtros (ecualizador ANNA v1.3.0) ----------
   anna-equalizer-web.js escribe html[data-anna-luz="AM1|AM2|MD|AT|AN1|AN2"]
   además de la custom property --anna-luz (CSS no puede ramificar un
   filter() sobre el VALOR de una custom property sin @container style(),
   soporte aún desigual — el atributo sí es un selector normal). Mientras
   el ecualizador no esté conectado no hay atributo en <html>, ninguna de
   estas reglas aplica, y el sitio se ve exactamente igual que hoy —
   progressive enhancement, no una dependencia dura.
   Alcance deliberado: solo fotografía real (.hero::before,
   .method-hero.has-photo::before — heroes de las páginas de servicio,
   fichas 49-56, añadido el 12 sept en cuanto tuvieron foto real —,
   .service-visual.photo y .zone-photo-frame img — esta última añadida el
   12 sept al revisar por qué la foto de "Compromiso ANNA con el norte de
   Madrid" en /zona-a1 no cambiaba con la luz: es un <img> directo, no un
   .service-visual con background-image, así que necesitaba su propio
   selector). Nunca iconos, el gráfico de eficiencia (.energy-graphic) ni
   .concept-panel, que ya lleva su propio degradado fijo y cuya foto no
   debe variar con la luz por decisión de negocio (confirmado 12 sept).
   Origen y valores: web-reference/anna-luz-filters.css del paquete
   anna-equalizer — aquí solo se ajusta el selector del hero a
   `.hero::before` en vez de `.hero`, para no volver a teñir el texto de
   .hero-inner (ver el comentario de arriba). */
:root {
  --anna-luz-transition: filter 1.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  :root { --anna-luz-transition: none; }
}

/* 06:00–08:59 · Amanecer — luz fría-azulada rasante, sombras largas y suaves. */
html[data-anna-luz="AM1"] .hero::before,
html[data-anna-luz="AM1"] .method-hero.has-photo::before,
html[data-anna-luz="AM1"] .service-visual.photo,
html[data-anna-luz="AM1"] .zone-photo-frame img {
  filter: brightness(0.95) contrast(1.06) saturate(0.88) sepia(0.15) hue-rotate(180deg);
}

/* 09:00–12:59 · Media mañana — luz difusa fría-neutra, contraste suave.
   A diferencia de las otras 5 franjas, este filtro no es un valor fijo:
   debug.js (fijarFiltroAM2Estacional) calcula cada día, según la época del
   año, una mezcla entre una versión "invierno" (clara pero desaturada) y
   una versión "verano" (casi igual que MD) — ver la nota junto a esa
   función. Motivo: en verano el amanecer es tan temprano que a media
   mañana la luz real ya es casi de mediodía, y en invierno esta franja cae
   casi sobre el mediodía civil, así que un tono "frío" fijo todo el año no
   encaja en ningún extremo. Los valores por defecto de abajo son la
   versión "invierno" — se usan tal cual si el emisor de --am2-* no ha
   corrido todavía (por ejemplo, primer pintado antes de que corra el
   script) — y dejaron de llevar hue-rotate porque un giro de tono grande
   (como el que sigue usando AM1) resultaba indistinguible del propio AM1. */
html[data-anna-luz="AM2"] .hero::before,
html[data-anna-luz="AM2"] .method-hero.has-photo::before,
html[data-anna-luz="AM2"] .service-visual.photo,
html[data-anna-luz="AM2"] .zone-photo-frame img {
  filter: brightness(var(--am2-brightness, 0.99)) contrast(var(--am2-contrast, 1.02)) saturate(var(--am2-saturate, 0.82)) sepia(var(--am2-sepia, 0)) hue-rotate(var(--am2-hue, 0deg));
}

/* 13:00–16:59 · Mediodía — luz cenital neutra, sombras cortas (línea base). */
html[data-anna-luz="MD"] .hero::before,
html[data-anna-luz="MD"] .method-hero.has-photo::before,
html[data-anna-luz="MD"] .service-visual.photo,
html[data-anna-luz="MD"] .zone-photo-frame img {
  filter: brightness(1.05) contrast(1) saturate(1) sepia(0) hue-rotate(0deg);
}

/* 17:00–19:59 · Atardecer dorado — luz cálida rasante, sombras largas. */
html[data-anna-luz="AT"] .hero::before,
html[data-anna-luz="AT"] .method-hero.has-photo::before,
html[data-anna-luz="AT"] .service-visual.photo,
html[data-anna-luz="AT"] .zone-photo-frame img {
  filter: brightness(1) contrast(1.05) saturate(1.12) sepia(0.25) hue-rotate(-8deg);
}

/* 20:00–22:59 · Anochecer cálido — luz artificial encendida, exterior en penumbra azul. */
html[data-anna-luz="AN1"] .hero::before,
html[data-anna-luz="AN1"] .method-hero.has-photo::before,
html[data-anna-luz="AN1"] .service-visual.photo,
html[data-anna-luz="AN1"] .zone-photo-frame img {
  filter: brightness(0.9) contrast(1.08) saturate(1.05) sepia(0.2) hue-rotate(-5deg);
}

/* 23:00–05:59 · Noche — solo luces puntuales encendidas, resto en penumbra profunda. */
html[data-anna-luz="AN2"] .hero::before,
html[data-anna-luz="AN2"] .method-hero.has-photo::before,
html[data-anna-luz="AN2"] .service-visual.photo,
html[data-anna-luz="AN2"] .zone-photo-frame img {
  filter: brightness(0.78) contrast(1.15) saturate(0.9) sepia(0.1) hue-rotate(200deg);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, white 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, white 6%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 70% at 70% 30%, black, transparent);
}

.hero-inner {
  position: relative;
  z-index: 2;
  padding-top: 64px;
  padding-bottom: 64px;
  max-width: 720px;
}

.hero h1 {
  font-size: 44px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}

@media (min-width: 768px) {
  .hero h1 { font-size: 58px; }
}

.hero .lede {
  font-size: 19px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--surface-container-low) 92%, transparent);
  max-width: 520px;
  margin-bottom: 36px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 48px;
}

.service-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
}
.service-tag .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary-fixed);
}
.service-tag span.label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
}

/* ---------- El Desafío ---------- */

.challenge-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
  align-items: center;
}

@media (min-width: 1024px) {
  .challenge-grid { grid-template-columns: 5fr 7fr; gap: 48px; }
}

.challenge-copy h2 {
  font-size: 32px;
  line-height: 1.3;
  margin: 20px 0 16px 0;
}

.challenge-copy p {
  font-size: 16px;
  color: var(--on-surface-variant);
  max-width: 400px;
  margin-bottom: 24px;
}

.tech-list {
  background: var(--ivory-surface);
  border: 1px solid color-mix(in srgb, var(--outline-variant) 25%, transparent);
  border-radius: var(--radius-xl);
  padding: 40px;
  box-shadow: 0 10px 40px rgba(3, 44, 30, 0.03);
}

.tech-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.tech-list li {
  display: block;
}

.tech-item {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-decoration: none;
  color: inherit;
  padding: 4px 0;
  transition: color 0.2s ease;
}
.tech-item:hover { color: var(--primary); }
.tech-item:hover .rule { background: color-mix(in srgb, var(--primary) 35%, transparent); }
.tech-item .tech-arrow {
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.tech-item:hover .tech-arrow { opacity: 1; transform: translateX(0); }

.tech-list .num {
  font-size: 12px;
  color: var(--stone-gray);
  opacity: 0.6;
  width: 22px;
  flex-shrink: 0;
}

.tech-list .name {
  font-family: "Playfair Display", serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--on-surface);
}

.tech-list .rule {
  flex-grow: 1;
  height: 1px;
  background: color-mix(in srgb, var(--stone-gray) 12%, transparent);
}

/* ---------- Concepto ANNA ---------- */

.section-ivory { background: var(--ivory-surface); }

.concept-head {
  max-width: 780px;
  margin: 0 auto 56px auto;
  text-align: center;
}
.concept-head h2 {
  font-size: 30px;
  line-height: 1.35;
  margin-bottom: 18px;
}
@media (min-width: 768px) { .concept-head h2 { font-size: 38px; } }
.concept-head p {
  font-size: 16px;
  color: var(--on-surface-variant);
  max-width: 560px;
  margin: 0 auto;
}

.concept-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
  align-items: center;
}
@media (min-width: 768px) {
  .concept-grid { grid-template-columns: 1fr 1fr; gap: 56px; }
}

.concept-panel {
  position: relative;
  height: 420px;
  border-radius: var(--radius-xl);
  background: url("assets/concept-panel.jpg") center/cover no-repeat;
  overflow: hidden;
}

.concept-features {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.concept-feature {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.concept-feature .icon-circle {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--primary);
}
.concept-feature h4 {
  font-size: 20px;
  margin-bottom: 6px;
}
.concept-feature p {
  font-size: 15px;
  color: var(--on-surface-variant);
}

/* ---------- Servicios ---------- */

.section-head-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 56px;
  max-width: 640px;
}
.section-head-row h2 {
  font-size: 32px;
  line-height: 1.3;
}
@media (min-width: 768px) { .section-head-row h2 { font-size: 42px; } }
.section-head-row h2 em {
  font-style: italic;
  color: var(--primary);
}
.section-head-row p {
  color: var(--on-surface-variant);
  font-size: 16px;
}

/* linked directly from the "Servicios" card on centro-ayuda.html */
#desafio {
  scroll-margin-top: 96px; /* clears the sticky 80px header when jumped to */
}

.service-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  padding: 48px 0;
  border-top: 1px solid color-mix(in srgb, var(--outline-variant) 40%, transparent);
  scroll-margin-top: 96px; /* clears the sticky 80px header when jumped to from #tech-list */
}
.service-copy, .service-visual { min-width: 0; }
.service-block:first-of-type { border-top: none; padding-top: 0; }

/* La miniatura de cada servicio en la home enlaza a su página de detalle.
   display:contents saca el <a> envolvente de la caja del grid para que
   .service-visual siga siendo el elemento de grid directo (necesario para
   que `order` en .reverse funcione) y el propio <a> no reciba ancho/alto
   propios que rompan el layout — solo actúa como zona clicable. */
.service-visual-link { display: contents; }
.service-visual-link .service-visual { cursor: pointer; }

@media (min-width: 900px) {
  .service-block { grid-template-columns: 1fr 1fr; gap: 56px; }
  .service-block.reverse .service-copy { order: 2; }
  .service-block.reverse .service-visual { order: 1; }
}

.service-copy .icon-tile {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--mint-subtle);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary);
  margin-bottom: 18px;
}
.service-copy h3 {
  font-size: 24px;
  margin-bottom: 12px;
}
/* El título y cada punto del listado enlazan a la página de detalle del
   servicio (o a su sección concreta, en el caso del listado) — sin
   cambiar el aspecto por defecto (hereda color, sin subrayado, ver regla
   `a` general), solo un cambio de color sutil al pasar el ratón. */
.service-copy h3 a:hover { color: var(--primary); }
.service-copy ul li a:hover { color: var(--primary); }
.service-copy > p.desc {
  font-size: 15.5px;
  color: var(--on-surface-variant);
  max-width: 460px;
  margin-bottom: 22px;
}
.service-copy ul {
  list-style: none;
  margin: 0 0 28px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.service-copy ul li {
  font-size: 14.5px;
  color: var(--on-surface-variant);
  display: flex;
  align-items: center;
  gap: 10px;
}
.service-copy ul li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}

.service-visual {
  height: 300px;
  border-radius: var(--radius-xl);
  background: var(--surface-container);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent);
}

.service-visual.photo {
  background-size: cover;
  background-position: center;
  border: none;
  /* Div vacío (sin texto dentro) — el filtro va directo aquí, sin necesidad
     de aislarlo en un pseudo-elemento como en .hero. Reglas del filtro en
     sí: html[data-anna-luz="…"] .service-visual.photo, más abajo. */
  transition: var(--anna-luz-transition, filter 0.6s ease);
}
.service-visual.photo-electricidad { background-image: url("assets/service-electricidad.3b6350e4e8.jpg"); }
.service-visual.photo-climatizacion { background-image: url("assets/service-climatizacion.ec88f97e08.jpg"); }
.service-visual.photo-calefaccion { background-image: url("assets/service-calefaccion.63ee426274.jpg"); }
.service-visual.photo-energia { background-image: url("assets/service-energia.a3d1ba9db5.jpg"); }
.service-visual.photo-iluminacion { background-image: url("assets/service-iluminacion.e9614d5657.jpg"); }
.service-visual.photo-vehiculo-electrico-home { background-image: url("assets/service-vehiculo-electrico-home.282b3ec63e.jpg"); }
.service-visual.photo-automatizacion { background-image: url("assets/service-automatizacion.31931e15ef.jpg"); }
.service-visual.photo-tecnologia-redes { background-image: url("assets/service-tecnologia-redes.13edc6e731.jpg"); }

/* Casos concretos dentro de cada página de servicio (fichas 17+ del mapa de
   personalización) — mismo patrón .service-visual.photo que las tarjetas de
   la home, sin icon-panel ni gráfico de energía. */
.service-visual.photo-averias-urgentes { background-image: url("assets/case-averias-urgentes.b07900138f.jpg"); }
.service-visual.photo-cuadros-electricos { background-image: url("assets/case-cuadros-electricos.fe97628f87.jpg"); }
.service-visual.photo-iluminacion-eficiente { background-image: url("assets/case-iluminacion-eficiente.7466162090.jpg"); }
.service-visual.photo-vehiculo-electrico { background-image: url("assets/case-vehiculo-electrico.9e1289d19f.jpg"); }

/* `/climatizacion` — casos concretos (fichas 21-24), las 4 colocadas. Ficha 21
   (sistemas de aire acondicionado) se resolvió en la segunda tanda tras
   corregir el prompt (unidad exterior en azotea, no interior). */
.service-visual.photo-sistemas-aire-acondicionado { background-image: url("assets/case-sistemas-aire-acondicionado.4fb4b2c4ce.jpg"); }
.service-visual.photo-diagnostico-rendimiento { background-image: url("assets/case-diagnostico-rendimiento.1e65ab1e04.jpg"); }
.service-visual.photo-mantenimiento-preventivo { background-image: url("assets/case-mantenimiento-preventivo.e62a6034dc.jpg"); }
.service-visual.photo-sustitucion-mejora-equipos { background-image: url("assets/case-sustitucion-mejora-equipos.32dbd6562e.jpg"); }

/* `/calefaccion` — casos concretos (fichas 25-28), las 4 colocadas. Ficha 26
   (mantenimiento y análisis de combustión de calderas) se resolvió en la
   segunda tanda tras corregir el prompt (sonda en el conducto de humos,
   encima de la caldera, no en la propia caldera). */
.service-visual.photo-mantenimiento-calderas-rite { background-image: url("assets/case-mantenimiento-calderas-rite.e2b445a122.jpg"); }
.service-visual.photo-puesta-marcha-suelo-radiante { background-image: url("assets/case-puesta-marcha-suelo-radiante.ae26258e97.jpg"); }
.service-visual.photo-equilibrado-hidraulico { background-image: url("assets/case-equilibrado-hidraulico.2688964d0d.jpg"); }
.service-visual.photo-diagnostico-aerotermia { background-image: url("assets/case-diagnostico-aerotermia.ac42582374.jpg"); }

/* `/energia` — casos concretos (fichas 29-32), las 4 colocadas. */
.service-visual.photo-medicion-consumo { background-image: url("assets/case-medicion-consumo.d5805a5a36.jpg"); }
.service-visual.photo-optimizacion-potencia-contratada { background-image: url("assets/case-optimizacion-potencia-contratada.5915d855f3.jpg"); }
.service-visual.photo-consultoria-eficiencia { background-image: url("assets/case-consultoria-eficiencia.b7bd861c4c.jpg"); }
.service-visual.photo-sistemas-monitorizacion { background-image: url("assets/case-sistemas-monitorizacion.329476c9d3.jpg"); }

/* `/iluminacion` — casos concretos (fichas 33-36), las 4 colocadas. */
.service-visual.photo-escenas-por-estancia { background-image: url("assets/case-escenas-por-estancia.04bbe7c30d.jpg"); }
.service-visual.photo-regulacion-led { background-image: url("assets/case-regulacion-led.2033d52127.jpg"); }
.service-visual.photo-integracion-domotica { background-image: url("assets/case-integracion-domotica.6129b7f403.jpg"); }
.service-visual.photo-diagnostico-circuitos-interruptores { background-image: url("assets/case-diagnostico-circuitos-interruptores.4082d9da67.jpg"); }

/* `/vehiculo-electrico` — casos concretos (fichas 37-40), las 4 colocadas. */
.service-visual.photo-instalacion-wallbox { background-image: url("assets/case-instalacion-wallbox.c47edc444f.jpg"); }
.service-visual.photo-revision-conector-firmware { background-image: url("assets/case-revision-conector-firmware.8d2479775b.jpg"); }
.service-visual.photo-balanceo-dinamico-carga { background-image: url("assets/case-balanceo-dinamico-carga.e7e77f47dd.jpg"); }
.service-visual.photo-boletin-electrico-cie { background-image: url("assets/case-boletin-electrico-cie.b7ac665a4a.jpg"); }

/* `/automatizacion` — casos concretos (fichas 41-44), las 4 colocadas. */
.service-visual.photo-zonificacion-airzone { background-image: url("assets/case-zonificacion-airzone.3b489ce9b1.jpg"); }
.service-visual.photo-escenas-combinadas { background-image: url("assets/case-escenas-combinadas.1adfb2e8bf.jpg"); }
.service-visual.photo-integracion-app-unica { background-image: url("assets/case-integracion-app-unica.98cb99a707.jpg"); }
.service-visual.photo-diagnostico-domotico-existente { background-image: url("assets/case-diagnostico-domotico-existente.f9497f902d.jpg"); }

/* `/tecnologia-redes` — casos concretos (fichas 45-48), las 4 colocadas. */
.service-visual.photo-cableado-estructurado { background-image: url("assets/case-cableado-estructurado.b2e2e5002a.jpg"); }
.service-visual.photo-wifi-mesh { background-image: url("assets/case-wifi-mesh.d435919483.jpg"); }
.service-visual.photo-puntos-red-tv-obra { background-image: url("assets/case-puntos-red-tv-obra.7f3b94c354.jpg"); }
.service-visual.photo-diagnostico-router { background-image: url("assets/case-diagnostico-router.7b02f72e63.jpg"); }

.service-visual.energy-graphic {
  flex-direction: column;
  gap: 16px;
  height: auto;
  min-height: 300px;
  background: var(--ivory-surface);
  padding: 28px 24px;
}
.energy-ring { flex-shrink: 0; }
.energy-caption {
  max-width: 240px;
  text-align: center;
  font-size: 13px;
  color: var(--stone-gray);
}

/* Shared visual for service-blocks without a photo of their own
   (Calefacción, Iluminación, Vehículo eléctrico, Automatización) — same
   ivory-panel-with-dot-grid language as .energy-graphic/.concept-panel,
   but centred on a big icon mark instead of a photo or a stat ring, so it
   doesn't need a real customer photo or an invented statistic. */
.service-visual.icon-panel {
  flex-direction: column;
  gap: 20px;
  height: auto;
  min-height: 300px;
  background: var(--ivory-surface);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
}
.service-visual.icon-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(3, 44, 30, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(3, 44, 30, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}
.icon-panel-mark {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--mint-subtle);
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}
.icon-panel-caption {
  position: relative;
  max-width: 260px;
  text-align: center;
  font-size: 13px;
  color: var(--stone-gray);
}

/* ---------- Cómo funciona (customer journey, 15 steps) ---------- */

#cuidamos .phase {
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 28px;
  max-width: 760px;
  margin: 0 auto;
}
#cuidamos .phase-label {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 56px 0 28px;
}
#cuidamos .phase:first-of-type .phase-label { margin-top: 0; }
#cuidamos .phase-label .tag {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 18px;
  color: var(--primary);
  white-space: nowrap;
}
#cuidamos .phase-label .rule-line {
  height: 1px;
  flex: 1;
  background: var(--outline-variant);
}

#cuidamos .step {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 28px;
  position: relative;
}
#cuidamos .step + .step { margin-top: 8px; }
#cuidamos .step-rail {
  position: relative;
  display: flex;
  justify-content: center;
}
#cuidamos .step-rail::before {
  content: "";
  position: absolute;
  top: 44px;
  bottom: -8px;
  width: 1px;
  background: var(--outline-variant);
}
#cuidamos .step:last-child .step-rail::before { display: none; }
#cuidamos .step-num {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: 15px;
  position: relative;
  z-index: 1;
}
#cuidamos .step-body {
  padding-bottom: 40px;
  display: flex;
  gap: 18px;
}
#cuidamos .step-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-xl);
  background: var(--mint-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}
#cuidamos .step-icon svg { width: 24px; height: 24px; }
#cuidamos .step-text h3 {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--on-surface);
  margin-bottom: 6px;
}
#cuidamos .step-text p {
  font-size: 15px;
  color: var(--on-surface-variant);
  max-width: 560px;
}
#cuidamos .step-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
#cuidamos .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-full);
  font-size: 12.5px;
  color: var(--on-surface-variant);
  background: var(--surface-container-lowest);
}
#cuidamos .chip svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--primary); }
#cuidamos .via {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--whatsapp);
  margin-top: 4px;
}
#cuidamos .via svg { width: 13px; height: 13px; }

@media (max-width: 640px) {
  #cuidamos .phase,
  #cuidamos .step {
    grid-template-columns: 44px 1fr;
    column-gap: 16px;
  }
  #cuidamos .step-num { width: 30px; height: 30px; font-size: 13px; }
  #cuidamos .step-icon { width: 44px; height: 44px; }
  #cuidamos .step-icon svg { width: 20px; height: 20px; }
  #cuidamos .step-body { flex-direction: column; gap: 10px; }
}

/* ---------- Pasaporte ANNA ---------- */

.plan-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 900px) {
  .plan-grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
}

.plan-card {
  background: var(--surface-container-lowest);
  border: 2px solid color-mix(in srgb, var(--outline-variant) 40%, transparent);
  border-radius: var(--radius-xl);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.plan-card:hover { border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.plan-card:focus-visible {
  outline: none;
  border-color: var(--primary);
}
.plan-card.featured {
  background: var(--tertiary);
  color: var(--inverse-on-surface);
  border-color: var(--tertiary);
  box-shadow: 0 20px 50px rgba(3,44,30,0.15);
}
.plan-card.featured:hover { border-color: var(--tertiary); }
.plan-card.selected:not(.featured) {
  border-color: var(--primary);
  box-shadow: 0 20px 50px -16px rgba(3, 44, 30, 0.22);
  transform: translateY(-2px);
}

.plan-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone-gray);
  margin-bottom: 14px;
}
.plan-card.featured .plan-kicker { color: var(--inverse-primary); }

.plan-name {
  font-family: "Playfair Display", serif;
  font-size: 24px;
  margin-bottom: 12px;
}

.plan-tagline {
  font-size: 13px;
  font-style: italic;
  color: var(--stone-gray);
  margin-top: -8px;
  margin-bottom: 16px;
  line-height: 1.4;
}
.plan-card.featured .plan-tagline { color: color-mix(in srgb, var(--inverse-on-surface) 75%, transparent); }

.plan-price {
  font-family: "Playfair Display", serif;
  font-size: 34px;
  font-weight: 600;
  margin-bottom: 4px;
}
.plan-price sub {
  font-family: "Source Sans 3", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--stone-gray);
  vertical-align: baseline;
}
.plan-card.featured .plan-price sub { color: color-mix(in srgb, var(--inverse-on-surface) 65%, transparent); }

.plan-features {
  list-style: none;
  margin: 24px 0 28px 0;
  padding: 20px 0 0 0;
  border-top: 1px solid color-mix(in srgb, var(--outline-variant) 40%, transparent);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}
.plan-card.featured .plan-features { border-top-color: rgba(255,255,255,0.15); }

.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: var(--on-surface-variant);
}
.plan-card.featured .plan-features li { color: rgba(255,255,255,0.85); }
.plan-features svg { flex-shrink: 0; margin-top: 3px; color: var(--primary); }
.plan-card.featured .plan-features svg { color: var(--inverse-primary); }

.plan-feature-detail { align-items: flex-start; }
.plan-feature-detail .feature-title {
  display: block;
  font-weight: 600;
  color: var(--on-surface);
  margin-bottom: 4px;
}
.plan-card.featured .plan-feature-detail .feature-title { color: var(--inverse-on-surface); }
.plan-feature-detail .feature-desc {
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 10px 0;
}
.plan-feature-sublist {
  list-style: disc;
  padding-left: 18px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plan-feature-sublist li {
  display: list-item;
  font-size: 13px;
  line-height: 1.5;
}
.plan-feature-sublist li strong { color: inherit; }

.plan-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary-fixed);
  color: var(--on-primary-fixed);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: var(--radius-full);
}
.plan-card { position: relative; }

.plan-select-tag {
  display: none;
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: var(--radius-full);
}
.plan-card.selected:not(.featured) .plan-select-tag { display: inline-block; }

.plan-note {
  font-size: 13px;
  color: var(--stone-gray);
  margin-top: 24px;
}

.sla-table {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: color-mix(in srgb, var(--outline-variant) 40%, transparent);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.sla-row {
  background: var(--surface-container);
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.sla-row .sla-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.sla-row .icon-circle {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--surface-container-lowest);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}
.sla-row .sla-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--on-surface);
}
.sla-row .sla-sub {
  font-size: 13px;
  color: var(--stone-gray);
}
.sla-row .sla-value {
  font-family: "Playfair Display", serif;
  font-size: 22px;
  color: var(--primary);
}
.sla-row .sla-value-label {
  font-size: 12px;
  color: var(--stone-gray);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 6px;
}

/* ---------- Zonas ---------- */

.zone-map {
  margin-top: 40px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--outline-variant) 40%, transparent);
  background: var(--surface-container-lowest);
}
.zone-map-frame {
  position: relative;
  line-height: 0;
}
.zone-map-frame img {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
}
.zone-map-caption {
  padding: 14px 20px;
  font-size: 13px;
  color: var(--on-surface-variant);
  border-top: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent);
}

.zone-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 48px;
}
@media (min-width: 900px) {
  .zone-grid { grid-template-columns: repeat(3, 1fr); }
}
.zone-card {
  background: var(--surface-container-lowest);
  border: 1px solid color-mix(in srgb, var(--outline-variant) 40%, transparent);
  border-radius: var(--radius-xl);
  padding: 28px;
}
.zone-card-heading {
  display: block;
  text-decoration: none;
  color: inherit;
}
.zone-card-heading:hover .zone-kicker,
.zone-card-heading:focus-visible .zone-kicker {
  text-decoration: underline;
}
.zone-card-heading:hover h3,
.zone-card-heading:focus-visible h3 {
  color: var(--primary);
}
.zone-card .zone-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 8px;
}
.zone-card h3 {
  font-size: 22px;
  margin-bottom: 16px;
  transition: color 0.15s ease;
}
.zone-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.zone-card li {
  padding: 0;
  border-top: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent);
  font-size: 14.5px;
}
.zone-card li:first-child { border-top: none; }
.zone-card li a {
  display: block;
  padding: 10px 0;
  color: var(--on-surface-variant);
  text-decoration: none;
  transition: color 0.15s ease;
}
.zone-card li a:hover,
.zone-card li a:focus-visible {
  color: var(--primary);
  text-decoration: underline;
}
.zone-card .zone-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
.zone-card .zone-more:hover { text-decoration: underline; }

/* ---------- ANNA / quiénes somos ---------- */

.about-copy {
  max-width: 720px;
}
.about-copy p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--on-surface-variant);
  margin-bottom: 22px;
}
.about-copy p.lead {
  font-family: "Playfair Display", serif;
  font-size: 26px;
  font-weight: 500;
  color: var(--on-surface);
  line-height: 1.4;
}

/* ---------- CTA banner (La Experiencia ANNA) ---------- */

.cta-banner {
  position: relative;
  background: var(--tertiary);
  color: var(--surface-container-lowest);
  overflow: hidden;
}
.cta-banner::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 700px 400px at 80% 20%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 65%);
}
.cta-banner .container {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cta-banner .eyebrow { justify-content: center; margin-bottom: 24px; }
.cta-banner h2 {
  font-size: 30px;
  line-height: 1.4;
  max-width: 760px;
  margin-bottom: 36px;
}
@media (min-width: 768px) { .cta-banner h2 { font-size: 40px; } }
.cta-banner h2 em { font-style: italic; color: var(--inverse-primary); }

/* ---------- Contacto ---------- */

.contact-section {
  background: var(--ivory-surface);
}
.contact-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.contact-inner h2 {
  font-size: 32px;
  margin-bottom: 14px;
}
.contact-inner > p {
  font-size: 16px;
  color: var(--on-surface-variant);
  margin-bottom: 40px;
}
.contact-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.contact-detail {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  font-size: 14.5px;
  color: var(--on-surface-variant);
}
.contact-detail .row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.contact-detail svg { color: var(--primary); }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--surface-container-low);
  padding-top: 64px;
  padding-bottom: 96px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
  padding-bottom: 48px;
  border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 50%, transparent);
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-brand .brand-lockup img { height: 24px; opacity: 0.85; filter: grayscale(1); }
.footer-brand p {
  font-size: 13px;
  color: var(--stone-gray);
  max-width: 240px;
}
.footer-col h4 {
  font-family: "Source Sans 3", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface);
  margin-bottom: 14px;
}
.footer-col p, .footer-col a {
  display: block;
  font-size: 14px;
  color: var(--on-surface-variant);
  margin-bottom: 8px;
}
.footer-col a:hover { color: var(--primary); }
.footer-col a.nav-active {
  color: var(--primary);
  font-weight: 700;
}
.footer-bottom {
  padding-top: 24px;
  text-align: right;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--stone-gray);
}
@media (max-width: 767px) {
  .footer-bottom { text-align: left; }
}

/* ---------- Mobile sticky bar ---------- */

.mobile-bar {
  display: none;
}

/* ---------- Cookie consent banner ---------- */

.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  background: var(--primary);
  padding: 18px 24px;
  transform: translateY(110%);
  transition: transform 0.35s ease;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
}
.cookie-banner.visible { transform: translateY(0); }

.cookie-banner-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.cookie-banner p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.88);
  flex: 1 1 420px;
}
.cookie-banner a { color: var(--inverse-primary); text-decoration: underline; }

.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.cookie-banner .btn { padding: 9px 20px; font-size: 13px; white-space: nowrap; }
.cookie-banner .btn.cookie-accept,
.cookie-banner .btn-primary { background: #fff; color: var(--primary); border-color: #fff; }
.cookie-banner .btn.cookie-reject,
.cookie-banner .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }

@media (max-width: 900px) {
  .cookie-banner { bottom: 64px; padding: 16px; }
  .cookie-banner-inner { flex-direction: column; align-items: stretch; text-align: left; }
  .cookie-banner-actions { width: 100%; }
  .cookie-banner-actions .btn { flex: 1 1 0; }
}

/* ---------- Legal / stub pages ---------- */

.legal-page main {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px var(--margin-mobile) 96px var(--margin-mobile);
}
.legal-page h1 { font-size: 32px; margin-bottom: 12px; }
.legal-page .legal-updated {
  font-size: 13.5px;
  color: var(--stone-gray);
  margin-bottom: 40px;
}
.legal-page h2 {
  font-family: "Playfair Display", serif;
  font-size: 21px;
  font-weight: 500;
  margin: 40px 0 12px 0;
}
.legal-page h2:first-of-type { margin-top: 0; }
.legal-page p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--on-surface-variant);
  margin-bottom: 16px;
}
.legal-page ul {
  margin: 0 0 16px 0;
  padding: 0;
  list-style: none;
}
.legal-page ul li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--on-surface-variant);
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
}
.legal-page ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
}
.legal-page a { color: var(--primary); }
.legal-placeholder {
  border: 1px dashed var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  font-size: 14.5px;
  color: var(--stone-gray);
  background: var(--surface-container-low);
}

/* ---------- Responsive ---------- */

/* Nav now carries an extra item ("Por qué elegirnos"); it no longer fits in
   one line within the 1200px header container below ~1460px, so the
   hamburger menu kicks in earlier than the phone/tablet breakpoint below. */
@media (min-width: 1460px) {
  .nav-dropdown-panel {
    position: absolute;
    top: calc(100% + 16px);
    left: -22px;
    background: var(--background);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-xl);
    padding: 22px 26px;
    box-shadow: 0 16px 40px rgba(3, 44, 30, 0.12);
    z-index: 75;
  }
  /* Oculto hasta que se abre el <details> — sin esto ocuparía espacio en el
     flujo del header incluso cerrado. */
  .nav-dropdown:not([open]) .nav-dropdown-panel { display: none; }
}

@media (max-width: 1459px) {
  .main-nav { display: none; }
  .nav-toggle { display: inline-flex; }

  .site-header.nav-open .main-nav {
    display: flex;
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    background: var(--background);
    border-bottom: 1px solid var(--outline-variant);
    flex-direction: column;
    align-items: flex-start;
    padding: 20px var(--margin-mobile) 28px var(--margin-mobile);
    gap: 18px;
    z-index: 70;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
  }

  /* Móvil: el desplegable de Servicios se expande EN LÍNEA dentro del mismo
     acordeón vertical del menú — nunca como un submenú/pantalla aparte. */
  .nav-dropdown { width: 100%; }
  .nav-dropdown-panel {
    flex-direction: column;
    gap: 20px;
    margin-top: 14px;
    padding-left: 16px;
    border-left: 2px solid var(--outline-variant);
  }
}

@media (max-width: 900px) {
  .call-link { display: none; }

  /* Buttons are nowrap by default so short icon+text buttons never break
     awkwardly, but a couple of longer-text buttons (e.g. "Ver la
     metodología completa, paso a paso →") were forcing horizontal
     overflow of the whole page on phone-width screens. Let long button
     text wrap instead. */
  .btn { white-space: normal; text-align: center; }

  /* On phones the header's logo + lang-switch + hamburger already fill the
     available width; the "Necesito ayuda" button pushed the hamburger
     past the edge of the screen. The fixed mobile-bar below already
     offers Call/WhatsApp at this breakpoint, and every page still has its
     own in-page "Necesito ayuda" CTA, so the header copy is safe to drop. */
  .header-actions .btn-primary { display: none; }

  body { padding-bottom: 64px; }

  .mobile-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 60;
    background: color-mix(in srgb, var(--background) 96%, transparent);
    backdrop-filter: blur(14px);
    border-top: 1px solid color-mix(in srgb, var(--outline-variant) 50%, transparent);
  }
  .mobile-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .mobile-bar a.call { color: var(--primary); }
  .mobile-bar a.whatsapp { color: var(--whatsapp); }
  .mobile-bar .divider { width: 1px; background: var(--outline-variant); opacity: 0.5; }

  .footer-bottom { text-align: left; }
}

/* ---------- Páginas de zona ---------- */

.hero.hero-zone { min-height: 62vh; }
/* La foto de cada zona sustituye la variable, no el background-image
   directo — ahora que la foto vive en .hero::before (ver arriba), esto
   sigue funcionando igual que antes y de paso hereda el filtro de luz del
   día sin tener que repetirlo aquí. */
/* Eje A6: 3 variantes fotográficas confirmadas (11 sept), rotan por
   timestamp % 3 — la escribe el script inline del <head> de cada página
   con esta clase (zona-a6.html y las páginas de localidad del eje A6).
   Mismo mecanismo y misma mitigación de LCP (preload + fetchpriority)
   que en la home. */
.hero-zone-a6 { --hero-bg-image: var(--hero-bg-image-rotate, url("assets/zona-a6-hero-a.4205774dc8.jpg")); }
/* Eje A1: 8 variantes fotográficas confirmadas (3 originales + 5 más del
   11 sept), rotan por timestamp % 8 — la escribe el script inline del
   <head> de cada página con esta clase (zona-a1.html y las páginas de
   localidad del eje A1). Mismo mecanismo y misma mitigación de LCP
   (preload + fetchpriority) que en la home. */
.hero-zone-a1 { --hero-bg-image: var(--hero-bg-image-rotate, url("assets/zona-a1-hero.9fbfad0276.jpg")); }
/* Interior M-30: 5 variantes fotográficas confirmadas (11 sept), rotan
   por timestamp % 5 — la escribe el script inline del <head> de cada
   página con esta clase (zona-m30.html y las páginas de localidad del
   interior M-30). Mismo mecanismo y misma mitigación de LCP que en la
   home. */
.hero-zone-m30 { --hero-bg-image: var(--hero-bg-image-rotate, url("assets/zona-m30-hero-a.dfb975a879.jpg")); }
/* Cuando lleguen los encuadres móviles (9:16) de cada zona, añadir aquí
   --hero-bg-image-mobile: url("assets/zona-a6-photo-mobile.jpg"); (etc.) —
   el media query de .hero más arriba ya sabe usarla por debajo de 767px,
   no hace falta tocar nada más. */

.zone-quote {
  margin: 28px 0 0 0;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--outline-variant) 40%, transparent);
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 17px;
  color: var(--on-surface-variant);
}

.locality-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 560px) {
  .locality-list ul { grid-template-columns: 1fr 1fr; }
}
.locality-list li {
  border-top: 1px solid color-mix(in srgb, var(--stone-gray) 15%, transparent);
  font-size: 15px;
  color: var(--on-surface);
}
.locality-list li svg { color: var(--primary); flex-shrink: 0; }
.locality-list li a.locality-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 2px;
  margin: 0 -2px;
  border-radius: var(--radius-lg);
  transition: color 0.15s ease, background 0.15s ease;
}
.locality-list li a.locality-link:hover,
.locality-list li a.locality-link:focus-visible {
  color: var(--primary);
  background: var(--mint-subtle);
}

.zone-photo-frame {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent);
}
.zone-photo-frame img { display: block; width: 100%; height: auto; }

.zone-services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 40px;
}
@media (min-width: 800px) {
  .zone-services-grid { grid-template-columns: repeat(3, 1fr); }
}
.zone-service-card {
  background: var(--surface-container-lowest);
  border: 1px solid color-mix(in srgb, var(--outline-variant) 40%, transparent);
  border-radius: var(--radius-xl);
  padding: 28px;
}
.zone-service-card .icon-tile {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--mint-subtle);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary);
  margin-bottom: 18px;
}
.zone-service-card h4 { font-size: 19px; margin-bottom: 8px; }
.zone-service-card p { font-size: 14.5px; color: var(--on-surface-variant); margin-bottom: 16px; }
.zone-service-card a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
.zone-service-card a:hover { text-decoration: underline; }

/* ---------- Centro de Ayuda ---------- */

.help-hero {
  background: var(--tertiary);
  color: white;
  text-align: center;
  padding: 96px var(--margin-mobile) 72px var(--margin-mobile);
}
.help-hero h1 { font-size: 34px; margin-bottom: 14px; }
@media (min-width: 768px) { .help-hero h1 { font-size: 46px; } }
.help-hero p {
  max-width: 560px;
  margin: 0 auto 32px auto;
  font-size: 17px;
  color: color-mix(in srgb, white 78%, transparent);
}
.help-hero .hero-actions { justify-content: center; }

.faq-list {
  max-width: 780px;
  margin: 0 auto;
}
.faq-item {
  padding: 28px 0;
  border-top: 1px solid color-mix(in srgb, var(--outline-variant) 40%, transparent);
}
.faq-item:first-child { border-top: none; padding-top: 0; }
.faq-item h3 { font-size: 19px; margin-bottom: 10px; }
.faq-item p { font-size: 15.5px; color: var(--on-surface-variant); }

.help-categories {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 64px;
}
@media (min-width: 700px) {
  .help-categories { grid-template-columns: repeat(3, 1fr); }
}
.help-category {
  background: var(--ivory-surface);
  border-radius: var(--radius-xl);
  padding: 26px;
  text-align: center;
}
.help-category .icon-circle {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface-container-lowest);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary);
  margin: 0 auto 14px auto;
}
.help-category h4 { font-size: 16.5px; margin-bottom: 6px; }
.help-category p { font-size: 13.5px; color: var(--stone-gray); }

/* ---------- Metodología ---------- */

.method-hero {
  padding-top: calc(var(--section-gap) + 24px);
  padding-bottom: 56px;
  text-align: center;
}
.method-hero .eyebrow { justify-content: center; }
.method-hero h1 {
  font-size: 34px;
  line-height: 1.3;
  max-width: 720px;
  margin: 18px auto 20px auto;
}
@media (min-width: 768px) { .method-hero h1 { font-size: 46px; } }
.method-hero .lede {
  font-size: 17px;
  color: var(--on-surface-variant);
  max-width: 620px;
  margin: 0 auto 22px auto;
}
.method-hero .method-disclaimer {
  display: inline-block;
  font-size: 13px;
  color: var(--stone-gray);
  background: var(--surface-container);
  border-radius: var(--radius-lg);
  padding: 8px 16px;
  max-width: 560px;
}

/* ---------- Method-hero con foto (fichas 49-56, 12 sept; rotación 13 sept) ----------
   Mismo patrón que .hero::before (ver más arriba): la foto vive en un
   pseudo-elemento propio, nunca en .method-hero directamente, para poder
   aplicarle el filtro de luz sin afectar al texto. .method-hero sin la
   clase .has-photo (páginas que aún no tengan su foto asignada, o si algún
   día se quita) se queda exactamente como estaba: fondo liso, sin cambios.
   Ver la Nota técnica del mapa de elementos personalizables (v22): en
   cuanto una página tiene foto aquí, ese elemento pasa a ser su LCP y debe
   seguir siendo un archivo estático precargado, nunca un hueco dinámico del
   ecualizador — el <link rel="preload"> lo añade el propio script inline
   de rotación de cada página (ver el <head>), igual que hace el hero de
   home con hero-photo-a/b/c.jpg, en vez de ir fijo en el HTML.
   --method-hero-photo-rotate: la escribe ese script inline eligiendo entre
   las 2 o 3 variantes conformes de cada ficha (índice = segundo actual
   módulo nº de variantes, mismo criterio que el hero de home). Si el script
   no corre (JS desactivado), cae en --method-hero-photo, que cada regla
   .photo-{slug} de abajo fija directamente a su variante "-a" — así nunca
   hay hueco en blanco, igual que en .hero. */
.method-hero.has-photo {
  position: relative;
  overflow: hidden;
  color: var(--surface-container-lowest);
  background: var(--tertiary);
  padding-top: calc(var(--section-gap) + 64px);
  padding-bottom: 88px;
}
.method-hero.has-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--tertiary) 90%, transparent) 0%, color-mix(in srgb, var(--tertiary) 58%, transparent) 45%, color-mix(in srgb, var(--tertiary) 32%, transparent) 100%),
    var(--method-hero-photo-rotate, var(--method-hero-photo)) center/cover no-repeat;
  transition: var(--anna-luz-transition, filter 0.6s ease);
}
.method-hero.has-photo > * { position: relative; z-index: 1; }
.method-hero.has-photo .lede { color: color-mix(in srgb, var(--surface-container-lowest) 88%, transparent); }
.method-hero.has-photo .method-disclaimer {
  background: color-mix(in srgb, var(--surface-container-lowest) 16%, transparent);
  color: var(--surface-container-lowest);
}

/* Fallback sin JS por página — directamente la variante "-a" de cada
   grupo rotativo, igual que hacen .hero-zone-a6/.hero-zone-m30 más abajo.
   hash-assets.py reescribe estas URLs solas al ejecutarse; no editar el
   hash a mano. */
.method-hero.photo-electricidad { --method-hero-photo: url("assets/hero-metodo-electricidad-a.cfb5d36504.jpg"); }
.method-hero.photo-climatizacion { --method-hero-photo: url("assets/hero-metodo-climatizacion-a.79e556d855.jpg"); }
.method-hero.photo-calefaccion { --method-hero-photo: url("assets/hero-metodo-calefaccion-a.6b29fe127c.jpg"); }
.method-hero.photo-energia { --method-hero-photo: url("assets/hero-metodo-energia-a.abe6717c45.jpg"); }
.method-hero.photo-iluminacion { --method-hero-photo: url("assets/hero-metodo-iluminacion-a.03eab45074.jpg"); }
.method-hero.photo-vehiculo-electrico { --method-hero-photo: url("assets/hero-metodo-vehiculo-electrico-a.760eb815ca.jpg"); }
.method-hero.photo-automatizacion { --method-hero-photo: url("assets/hero-metodo-automatizacion-a.910e32273b.jpg"); }
.method-hero.photo-tecnologia-redes { --method-hero-photo: url("assets/hero-metodo-tecnologia-redes-a.c9f43bb291.jpg"); }

.example-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--mint-subtle);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: var(--radius-full);
  padding: 5px 12px;
}

/* Flujos: imagen y texto alternos, izquierda/derecha */

.flow-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  padding: 44px 0;
  border-top: 1px solid color-mix(in srgb, var(--outline-variant) 40%, transparent);
}
.flow-row:first-of-type { border-top: none; padding-top: 0; }

@media (min-width: 900px) {
  .flow-row { grid-template-columns: 1fr 1fr; gap: 64px; }
  .flow-row.reverse .flow-copy { order: 2; }
  .flow-row.reverse .flow-visual { order: 1; }
}

.flow-visual {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.flow-visual .example-tag { align-self: flex-start; }
.flow-visual .phone-frame {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 20px 48px -20px rgba(3, 44, 30, 0.28);
  border: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
  max-width: 340px;
}
.flow-visual .phone-frame img { width: 100%; }

.flow-copy .step-index {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 15px;
  color: var(--primary);
  margin-bottom: 10px;
}
.flow-copy h3 { font-size: 25px; margin-bottom: 12px; }
.flow-copy p.desc {
  font-size: 15.5px;
  color: var(--on-surface-variant);
  max-width: 460px;
}

/* Informes: imagen con texto encima y debajo */

.report-row {
  padding: 44px 0;
  border-top: 1px solid color-mix(in srgb, var(--outline-variant) 40%, transparent);
  text-align: center;
}
.report-row:first-of-type { border-top: none; padding-top: 0; }

.report-row .report-intro {
  max-width: 560px;
  margin: 0 auto 28px auto;
}
.report-row .report-intro .example-tag { margin-bottom: 14px; }
.report-row .report-intro h3 { font-size: 24px; margin-bottom: 10px; }
.report-row .report-intro p.desc {
  font-size: 15.5px;
  color: var(--on-surface-variant);
}

.report-row .report-card {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 20px 48px -20px rgba(3, 44, 30, 0.22);
  border: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
  max-width: 460px;
  margin: 0 auto 24px auto;
}
.report-row .report-card img { width: 100%; }

.report-row .report-caption {
  max-width: 560px;
  margin: 0 auto;
  font-size: 14.5px;
  color: var(--stone-gray);
}

/* Enlace de la tarjeta de informe a su página de detalle */

.report-row .report-card-link {
  display: block;
  max-width: 460px;
  margin: 0 auto 24px auto;
  position: relative;
}
.report-row .report-card-link .report-card {
  max-width: none;
  margin: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.report-row .report-card-link:hover .report-card,
.report-row .report-card-link:focus-visible .report-card {
  transform: translateY(-3px);
  box-shadow: 0 26px 56px -20px rgba(3, 44, 30, 0.32);
}
.report-row .report-card-link .expand-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary);
  margin-top: 10px;
}

/* ---------- Detalle de informe (páginas individuales) ---------- */

.detail-hero {
  padding-top: calc(var(--section-gap) + 24px);
  padding-bottom: 40px;
  text-align: center;
}
.detail-hero .back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--on-surface-variant);
  margin-bottom: 28px;
}
.detail-hero .eyebrow { justify-content: center; }
.detail-hero h1 {
  font-size: 32px;
  line-height: 1.3;
  max-width: 640px;
  margin: 18px auto 0 auto;
}
@media (min-width: 768px) { .detail-hero h1 { font-size: 42px; } }

.detail-image-wrap {
  max-width: 620px;
  margin: 0 auto 8px auto;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 24px 60px -22px rgba(3, 44, 30, 0.28);
  border: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
}
.detail-image-wrap img { width: 100%; }

.detail-prose {
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.detail-prose p {
  font-size: 16px;
  color: var(--on-surface-variant);
}
.detail-prose .detail-disclaimer {
  font-size: 13px;
  color: var(--stone-gray);
  background: var(--surface-container-low);
  border-radius: var(--radius-lg);
  padding: 10px 16px;
}

/* ---------- Landing de barrio / localidad ---------- */

.barrio-hero { min-height: 54vh; }
.barrio-hero .hero-inner { padding-top: 56px; padding-bottom: 56px; }

.barrio-crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.72);
  margin-bottom: 22px;
}
.barrio-crumb svg { flex-shrink: 0; }
.barrio-crumb:hover { color: #fff; }

.barrio-hero .service-tag { margin-bottom: 24px; }

.barrio-topic { max-width: 700px; }
.barrio-topic .icon-tile { margin-bottom: 18px; }
.barrio-topic h2 { font-size: 28px; margin-bottom: 16px; }
@media (min-width: 768px) { .barrio-topic h2 { font-size: 32px; } }
.barrio-topic p { font-size: 16px; color: var(--on-surface-variant); margin-bottom: 14px; }
.barrio-topic p:last-child { margin-bottom: 0; }

.barrio-quote {
  max-width: 760px;
  margin: 0 auto;
  background: var(--mint-subtle);
  border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  border-radius: var(--radius-xl);
  padding: 40px 32px;
  text-align: center;
}
.barrio-quote .icon-tile { margin: 0 auto 18px auto; }
.barrio-quote p.quote-text {
  font-style: italic;
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--on-surface);
  max-width: 620px;
  margin: 0 auto;
}
.barrio-quote .eyebrow { justify-content: center; }

/* ---------- Diagnóstico técnico: causa / efecto / prevención / diagnóstico ---------- */

.diagnostic-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 40px;
}
@media (min-width: 720px) {
  .diagnostic-grid { grid-template-columns: 1fr 1fr; }
}
.diagnostic-grid.diagnostic-grid-single {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.diagnostic-card {
  background: var(--surface-container-lowest);
  border: 1px solid color-mix(in srgb, var(--outline-variant) 60%, transparent);
  border-radius: var(--radius-xl);
  padding: 28px 26px;
  /* Grid items default to min-width:auto, which floors their width at their
     content's min-content size and can overflow a narrow phone screen.
     Allow this card to shrink below that. */
  min-width: 0;
}
.diagnostic-card h4 {
  font-size: 19px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
}
.diagnostic-rows { margin: 0; }
.drow {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 14px;
  padding: 10px 0;
}
.drow dt, .drow dd { min-width: 0; overflow-wrap: break-word; }
.drow + .drow { border-top: 1px solid color-mix(in srgb, var(--outline-variant) 35%, transparent); }
.drow dt {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  padding-top: 1px;
}
.drow dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--on-surface-variant);
}

/* ---------- Opiniones ---------- */

.reviews-empty-card {
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: 36px 40px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 40px auto 0;
}
.reviews-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ivory-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.reviews-empty-icon svg { width: 26px; height: 26px; }
.reviews-empty-copy { flex: 1; min-width: 220px; }
.reviews-empty-copy h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.reviews-empty-copy p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--on-surface-variant); }

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 22px auto 0;
  max-width: 900px;
}
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--on-surface-variant);
  background: var(--mint-subtle);
  border-radius: var(--radius-full);
  padding: 9px 14px;
  transition: background 0.15s ease, color 0.15s ease;
}
.trust-chip:hover { background: var(--primary-fixed); color: var(--on-primary-fixed); }
.trust-chip svg { width: 13px; height: 13px; color: var(--primary); flex-shrink: 0; }

/* ---------- Cifras reales (stat tiles) ---------- */

.stat-panel {
  background: var(--mint-subtle);
  border-radius: var(--radius-xl);
  padding: 32px 28px;
}
.stat-panel .stat-panel-head {
  margin-bottom: 22px;
}
.stat-panel .stat-panel-head h3 {
  font-size: 20px;
  margin-bottom: 6px;
}
.stat-panel .stat-panel-head p {
  font-size: 14px;
  color: var(--on-surface-variant);
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (min-width: 640px) {
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
}
.stat-tile {
  background: var(--surface-container-lowest);
  border-radius: var(--radius-lg);
  padding: 16px 14px;
  text-align: center;
}
.stat-tile .stat-value {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.15;
}
.stat-tile .stat-label {
  display: block;
  font-size: 12px;
  color: var(--on-surface-variant);
  margin-top: 4px;
}
.stat-source {
  font-size: 12px;
  color: var(--stone-gray);
  margin-top: 16px;
}
.stat-source a { text-decoration: underline; }

.estimate-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--surface-container-low);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-top: 18px;
  font-size: 13px;
  color: var(--on-surface-variant);
}
.estimate-note svg { flex-shrink: 0; margin-top: 1px; color: var(--stone-gray); }
.estimate-note strong { color: var(--on-surface); }

/* ---------- Municipios / distritos en cifras (zona) ---------- */

.admin-unit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 640px) {
  .admin-unit-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
  .admin-unit-grid { grid-template-columns: repeat(4, 1fr); }
}
.admin-unit-card {
  background: var(--surface-container-lowest);
  border: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
  border-radius: var(--radius-lg);
  padding: 16px 16px;
}
.admin-unit-card h5 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 10px;
  color: var(--on-surface);
}
.admin-unit-card p {
  font-size: 13px;
  color: var(--on-surface-variant);
  margin-bottom: 3px;
}
.admin-unit-card p strong { color: var(--primary); }
.admin-unit-card .unit-year {
  font-size: 11px;
  color: var(--stone-gray);
}

/* ---------- Barrio en cifras (página individual de localidad) ---------- */

.barrio-stat-panel { max-width: 760px; margin: 0 auto; }
.barrio-stat-panel .stat-grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) {
  .barrio-stat-panel .stat-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Panel de depuración (solo visible para la IP configurada) ---------- */
.anna-debug-link {
  font-family: "Source Code Pro", "SFMono-Regular", Consolas, monospace;
  font-size: 12px !important;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-full);
  color: #b3261e !important;
}
.anna-debug-link:hover { border-color: #b3261e; background: rgba(179, 38, 30, 0.06); }

.anna-debug-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 12, 0.55);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.anna-debug-panel {
  background: var(--surface-container-lowest);
  border-radius: var(--radius-xl);
  width: min(760px, 100%);
  max-height: min(80vh, 720px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.anna-debug-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--outline-variant);
  font-family: "Playfair Display", serif;
}
.anna-debug-actions { display: flex; align-items: center; gap: 8px; }
.anna-debug-copy {
  font-family: "Source Sans 3", sans-serif;
  font-size: 12.5px;
  padding: 5px 10px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-full);
  background: none;
  cursor: pointer;
  color: var(--on-surface-variant);
}
.anna-debug-copy:hover { color: var(--primary); border-color: var(--primary); }
.anna-debug-close {
  font-size: 22px;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--on-surface-variant);
  padding: 2px 6px;
}
.anna-debug-close:hover { color: var(--on-surface); }
.anna-debug-json {
  margin: 0;
  padding: 16px 18px;
  overflow: auto;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--on-surface);
  background: var(--mint-subtle);
  white-space: pre;
}

/* ---------- Selector de modo de luz (debug — los 6 filtros del ecualizador) ----------
   No modal: se queda flotando en una esquina para poder seguir navegando
   el sitio con el filtro puesto (a diferencia de .anna-debug-overlay, que
   sí bloquea el resto de la página). Esquina superior derecha, debajo de
   la cabecera, para no pisar la .mobile-bar (que vive abajo del todo en
   móvil). */
.anna-debug-luz-panel {
  position: fixed;
  top: 76px;
  right: 14px;
  z-index: 9999;
  width: min(300px, calc(100vw - 28px));
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  padding: 14px 16px 16px;
  font-family: "Source Sans 3", sans-serif;
}
.anna-debug-luz-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  font-family: "Playfair Display", serif;
  font-size: 15px;
}
.anna-debug-luz-close {
  font-size: 20px;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--on-surface-variant);
  padding: 0 4px;
}
.anna-debug-luz-close:hover { color: var(--on-surface); }
.anna-debug-luz-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  color: var(--on-surface-variant);
  margin-bottom: 10px;
}
.anna-debug-luz-field select,
.anna-debug-luz-field input {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12.5px;
  padding: 6px 8px;
  border: 1px solid var(--outline-variant);
  border-radius: 8px;
  background: var(--surface-container-lowest);
  color: var(--on-surface);
}
.anna-debug-luz-resultado {
  font-size: 12px;
  line-height: 1.5;
  color: var(--on-surface);
  background: var(--mint-subtle);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.anna-debug-luz-resultado code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 11.5px;
}
.anna-debug-luz-sol { color: var(--on-surface-variant); }
.anna-debug-luz-franjas {
  font-size: 12px;
  margin-bottom: 8px;
}
.anna-debug-luz-franjas summary {
  cursor: pointer;
  color: var(--primary);
  font-weight: 600;
  padding: 2px 0;
}
.anna-debug-luz-franjas-list {
  list-style: none;
  margin: 6px 0 0 0;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--on-surface) 12%, transparent);
}
.anna-debug-luz-franjas-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: var(--surface-container-lowest);
  border-bottom: 1px solid color-mix(in srgb, var(--on-surface) 8%, transparent);
}
.anna-debug-luz-franjas-list li:last-child { border-bottom: none; }
.anna-debug-luz-franjas-list li.activa {
  background: var(--mint-subtle);
  font-weight: 600;
}
.anna-debug-luz-franjas-cod {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--on-surface-variant);
}
.anna-debug-luz-franjas-list li.activa .anna-debug-luz-franjas-cod { color: var(--on-surface); }
.anna-debug-luz-franjas-rango { font-size: 12px; }
.anna-debug-luz-nota {
  font-size: 11px;
  color: var(--on-surface-variant);
  margin: 0;
  line-height: 1.4;
}

/* Redes sociales en el pie (16 oct 2026): Instagram y LinkedIn de ANNA.
   La columna de la marca, más ancha y con más aire respecto a «Zonas de servicio»
   (dueño, 16 oct: «sale casi pegada a las zonas de servicio»). */
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; column-gap: 56px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .footer-grid { column-gap: 48px; }
}
.footer-brand { align-items: flex-start; text-align: left; }
.footer-social { display: flex; gap: 6px 14px; flex-wrap: wrap; }
.footer-social a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--on-surface-variant); text-decoration: none;
}
.footer-social a:hover { color: var(--primary); }
.footer-social svg { flex-shrink: 0; }