/* ==========================================================================
   No Más Fugas · Sistema de diseño para Bricks
   v1.0 · 26/09/2026
   Dónde va: un único archivo encolado en el child theme (o en Bricks ›
   Settings › Custom code › CSS). Las clases se registran en Bricks ›
   Global classes con el mismo nombre (pueden quedarse vacías en el editor:
   los estilos viven aquí).
   Reglas: solo se animan transform y opacity · nada se oculta sin JS ·
   todo el movimiento se desactiva con prefers-reduced-motion.
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  /* Marca */
  --c-primary: #005991;        /* azul corporativo: titulares, enlaces, fondos de marca */
  --c-primary-dark: #00456F;   /* hover del azul */
  --c-cta: #DF2901;            /* rojo del logo: SOLO conversión (llamar, pedir diagnóstico) */
  --c-cta-dark: #C42400;       /* hover del rojo */
  --c-cta-on-dark: #FF6B45;    /* rojo para TEXTO sobre fondo oscuro (AA) */
  --c-accent: #00A2BF;         /* aguamarina: iconos, líneas, ondas (nunca texto pequeño) */
  --c-accent-text: #00707F;    /* aguamarina legible para texto (AA en blanco y surface) */
  --c-wa: #25D366;             /* WhatsApp: texto en --c-ink, nunca blanco */

  /* Neutros (sesgados al azul de marca) */
  --c-ink: #131739;            /* texto principal, secciones oscuras, footer */
  --c-ink-soft: #4A5270;       /* texto secundario */
  --c-line: #D9E6EC;           /* bordes y divisores */
  --c-surface: #E6F6F9;        /* fondo alterno de sección */
  --c-surface-2: #F4FAFC;      /* fondo de inputs y bloques sutiles */
  --c-white: #FFFFFF;
  --c-on-dark: #C9CDE0;        /* texto secundario sobre --c-ink */

  /* Tipografía */
  --ff-display: "Manrope", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ff-body: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-xs: 0.8125rem;                                   /* 13 · etiquetas, legal */
  --fs-sm: 0.9375rem;                                   /* 15 · notas, tarjetas */
  --fs-base: 1.0625rem;                                 /* 17 · cuerpo */
  --fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);/* 18→21 · lead */
  --fs-h4: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);   /* 18→20 */
  --fs-h3: clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem);     /* 20→24 */
  --fs-h2: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);    /* 28→44 */
  --fs-h1: clamp(2.25rem, 1.55rem + 3.1vw, 4rem);       /* 36→64 */
  --fs-stat: clamp(2rem, 1.6rem + 1.8vw, 3rem);         /* cifras de confianza */
  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.6;
  --ls-tight: -0.02em;
  --ls-label: 0.08em;

  /* Espaciado (escala 4 px) */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 3rem;    --sp-8: 4rem;
  --sp-section: clamp(4rem, 2.6rem + 6vw, 7.5rem);      /* 64→120 entre secciones */
  --gutter: clamp(1rem, 0.6rem + 1.8vw, 2rem);          /* 16→32 lateral */
  --container: 75rem;                                   /* 1200 */
  --container-narrow: 47.5rem;                          /* 760 · texto largo, blog */

  /* Forma y profundidad */
  --r-sm: 6px; --r-btn: 8px; --r-card: 12px; --r-lg: 20px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgb(19 23 57 / .06), 0 2px 8px rgb(19 23 57 / .06);
  --sh-2: 0 6px 24px -6px rgb(19 23 57 / .16), 0 2px 6px rgb(19 23 57 / .06);
  --sh-3: 0 24px 48px -16px rgb(0 69 111 / .28);
  --sh-cta: 0 8px 20px -6px rgb(223 41 1 / .45);

  /* Movimiento */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 160ms; --t-base: 280ms; --t-slow: 700ms;
  --header-h: 76px;
}

/* 2. BASE ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
/* Bricks fija html{font-size:62.5%}: el sistema está en rem sobre 16 px */
html:root { font-size: 100%; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  font-family: var(--ff-body); font-size: var(--fs-base); line-height: var(--lh-body);
  color: var(--c-ink); background: var(--c-white);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-family: var(--ff-display); color: var(--c-ink); font-weight: 800;
  line-height: var(--lh-snug); letter-spacing: var(--ls-tight); text-wrap: balance; margin: 0;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); line-height: 1.12; }
h3 { font-size: var(--fs-h3); font-weight: 700; }
h4 { font-size: var(--fs-h4); font-weight: 700; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--c-primary); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--c-primary-dark); }
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--c-accent); color: var(--c-white); }
img, svg, video { max-width: 100%; height: auto; }

/* 3. LAYOUT ---------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }

.section { padding-block: var(--sp-section); position: relative; }
.section--tight { padding-block: calc(var(--sp-section) * .6); }
.section--alt { background: var(--c-surface); }
.section--primary { background: var(--c-primary); color: var(--c-white); }
.section--dark { background: var(--c-ink); color: var(--c-on-dark); }
.section--primary :is(h1,h2,h3,h4), .section--dark :is(h1,h2,h3,h4) { color: var(--c-white); }
.section--dark a:not(.btn) { color: var(--c-white); }

.section-head { display: grid; gap: var(--sp-4); max-width: 44rem; margin-bottom: var(--sp-7); }
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.section-head--split { max-width: none; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 60em) { .section-head--split { grid-template-columns: 1.2fr 1fr; gap: var(--sp-7); } }

.grid { display: grid; gap: var(--sp-5); }
.grid > *, .stack > *, .hero__grid > *, .split > *, .calc > * { min-width: 0; }
.hero__grid, .split, .calc { grid-template-columns: minmax(0, 1fr); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
.stack { display: grid; gap: var(--sp-4); align-content: start; }
.stack--lg { gap: var(--sp-6); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* 4. TIPOGRAFÍA UTILITARIA -------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font: 700 var(--fs-xs)/1 var(--ff-display); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--c-accent-text);
}
.eyebrow::before { content: ""; width: 1.75em; height: 2px; background: var(--c-accent); border-radius: 2px; }
.section--primary .eyebrow, .section--dark .eyebrow, .hero .eyebrow { color: #9FD8E6; }
.lead { font-size: var(--fs-lg); line-height: 1.55; color: var(--c-ink-soft); max-width: 40rem; }
.section--primary .lead, .section--dark .lead, .hero .lead { color: rgb(255 255 255 / .86); }
.text-muted { color: var(--c-ink-soft); }
.text-small { font-size: var(--fs-sm); }
.text-balance { text-wrap: balance; }
/* Palabra clave en contorno: "Reparamos tu fuga <span class="text-outline">sin vaciar</span>" */
.text-outline {
  color: transparent; -webkit-text-stroke: 2px currentColor; paint-order: stroke fill;
  text-transform: uppercase;
}
.hero .text-outline, .section--dark .text-outline, .section--primary .text-outline { -webkit-text-stroke-color: var(--c-white); }
h1 .text-outline, h2 .text-outline { -webkit-text-stroke-color: var(--c-primary); }
.hero h1 .text-outline { -webkit-text-stroke-color: var(--c-white); }
@supports not (-webkit-text-stroke: 1px) { .text-outline { color: inherit; } }
.text-accent { color: var(--c-primary); }
.num { font-variant-numeric: tabular-nums; }

/* 5. BOTONES --------------------------------------------------------------- */
.btn {
  --btn-bg: var(--c-primary); --btn-fg: var(--c-white); --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 3rem; padding: .8rem 1.5rem; border: 2px solid var(--btn-bd); border-radius: var(--r-btn);
  background: var(--btn-bg); color: var(--btn-fg);
  font: 700 var(--fs-base)/1.1 var(--ff-display); letter-spacing: -.005em; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-base) var(--ease-out), background-color var(--t-fast), color var(--t-fast);
}
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); box-shadow: var(--sh-2); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn--primary:hover { --btn-bg: var(--c-primary-dark); }
.btn--cta { --btn-bg: var(--c-cta); box-shadow: var(--sh-cta); }
.btn--cta:hover { --btn-bg: var(--c-cta-dark); box-shadow: 0 12px 26px -8px rgb(223 41 1 / .55); }
.btn--wa { --btn-bg: var(--c-wa); --btn-fg: var(--c-ink); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--c-primary); --btn-bd: currentColor; }
.btn--outline:hover { --btn-bg: var(--c-primary); --btn-fg: var(--c-white); --btn-bd: var(--c-primary); }
.btn--light { --btn-bg: transparent; --btn-fg: var(--c-white); --btn-bd: rgb(255 255 255 / .7); }
.btn--light:hover { --btn-bg: var(--c-white); --btn-fg: var(--c-primary); --btn-bd: var(--c-white); }
.btn--lg { min-height: 3.5rem; padding-inline: 1.9rem; font-size: 1.125rem; }
.btn--sm { min-height: 2.5rem; padding: .55rem 1rem; font-size: var(--fs-sm); }
.btn--block { width: 100%; }
/* Pulso del botón de llamar: una llamada de atención cada 6 s, no un bucle continuo */
.btn--pulse { position: relative; isolation: isolate; }
.btn--pulse::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; z-index: -1;
  box-shadow: 0 0 0 0 rgb(223 41 1 / .55); animation: nmf-pulse 6s var(--ease-out) 2s infinite;
}
.link-arrow { display: inline-flex; align-items: center; gap: .4em; font: 700 var(--fs-sm)/1 var(--ff-display); text-decoration: none; }
.link-arrow::after { content: "→"; transition: transform var(--t-fast) var(--ease-out); }
.link-arrow:hover::after { transform: translateX(4px); }

/* 6. CABECERA -------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50; background: rgb(255 255 255 / .96);
  backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent;
  transition: box-shadow var(--t-base), border-color var(--t-base);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); min-height: var(--header-h); }
.site-header__logo img, .site-header__logo svg { display: block; height: 44px; width: auto; transition: height var(--t-base) var(--ease-out); }
.site-header__nav { display: none; gap: var(--sp-6); font: 600 var(--fs-sm)/1 var(--ff-display); }
.site-header__nav a { color: var(--c-ink); text-decoration: none; padding-block: .5rem; background: linear-gradient(var(--c-accent), var(--c-accent)) 0 100% / 0 2px no-repeat; transition: background-size var(--t-base) var(--ease-out); }
.site-header__nav a:hover, .site-header__nav a[aria-current] { background-size: 100% 2px; }
.site-header__actions { display: flex; align-items: center; gap: var(--sp-3); }
.site-header__phone { display: none; font: 800 var(--fs-base)/1.1 var(--ff-display); color: var(--c-ink); text-decoration: none; }
.site-header__phone small { display: block; font: 500 var(--fs-xs)/1.2 var(--ff-body); color: var(--c-ink-soft); }
.site-header.is-scrolled { box-shadow: var(--sh-1); border-color: var(--c-line); }
.site-header.is-scrolled .site-header__logo img, .site-header.is-scrolled .site-header__logo svg { height: 36px; }
@media (min-width: 64em) { .site-header__nav { display: flex; } .site-header__phone { display: block; } }

/* 7. HERO ------------------------------------------------------------------ */
.hero {
  position: relative; isolation: isolate; overflow: hidden; color: var(--c-white);
  padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) clamp(6rem, 4rem + 6vw, 9.5rem);
  background: var(--c-primary);
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::before { /* degradado de marca sobre la foto */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgb(0 69 111 / .94) 0%, rgb(0 89 145 / .82) 40%, rgb(0 89 145 / .3) 68%, rgb(0 89 145 / .15) 100%);
}
@media (max-width: 61.99em) { .hero::before { background: linear-gradient(180deg, rgb(0 69 111 / .7) 0%, rgb(0 89 145 / .88) 55%, rgb(0 69 111 / .96) 100%); }
}
.hero__grid { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 62em) { .hero__grid { grid-template-columns: 1.25fr .9fr; } }
.hero__content { display: grid; gap: var(--sp-5); align-content: start; max-width: 40rem; }
.hero h1 { color: var(--c-white); }
.hero__checks { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); list-style: none; padding: 0; margin: 0; font-weight: 600; font-size: var(--fs-sm); }
.hero__checks li { display: inline-flex; align-items: center; gap: .5em; }
.hero__checks li::before { content: ""; width: 1.25em; height: 1.25em; border-radius: 50%; background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat; flex: none; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
@media (max-width: 40em) { .hero__actions .btn { flex: 1 1 100%; } }
/* Sonar: ondas que salen del punto exacto de la fuga (motivo de la diana del logo) */
.sonar { position: absolute; z-index: -1; width: min(46rem, 90vw); aspect-ratio: 1; right: -12rem; top: 50%; translate: 0 -50%; pointer-events: none; }
.sonar span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgb(159 216 230 / .5); transform: scale(.08); opacity: 0; animation: nmf-sonar 5.4s var(--ease-out) infinite; }
.sonar span:nth-child(2) { animation-delay: 1.8s; }
.sonar span:nth-child(3) { animation-delay: 3.6s; }
.sonar::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: var(--c-cta); box-shadow: 0 0 0 6px rgb(223 41 1 / .25); }

/* Formulario de 3 campos (hero, contacto, CTA de blog) */
.form-card { background: var(--c-white); color: var(--c-ink); border-radius: var(--r-lg); padding: clamp(1.25rem, 1rem + 1.2vw, 2rem); box-shadow: var(--sh-3); display: grid; gap: var(--sp-4); }
.form-card__title { font: 800 var(--fs-h3)/1.2 var(--ff-display); letter-spacing: var(--ls-tight); }
.form-card__note { font-size: var(--fs-xs); color: var(--c-ink-soft); display: flex; gap: .5em; align-items: center; }
.field { display: grid; gap: var(--sp-1); grid-template-columns: minmax(0, 1fr); }
.calc__inputs, .calc__result { grid-template-columns: minmax(0, 1fr); }
.field label { font: 600 var(--fs-sm)/1.3 var(--ff-body); }
.input, .field input, .field select, .field textarea {
  width: 100%; min-height: 3rem; padding: .7rem .9rem; border: 1.5px solid var(--c-line); border-radius: var(--r-btn);
  background: var(--c-surface-2); font: 400 var(--fs-base)/1.4 var(--ff-body); color: var(--c-ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}
.input:focus, .field :is(input,select,textarea):focus { outline: none; border-color: var(--c-accent); background: var(--c-white); box-shadow: 0 0 0 4px rgb(0 162 191 / .18); }
.field textarea { min-height: 6rem; resize: vertical; }

/* 8. TARJETAS DE TECNOLOGÍA (solapan el borde inferior del hero) ------------ */
.overlap-up { position: relative; z-index: 2; margin-top: calc(clamp(4rem, 3rem + 4vw, 6.5rem) * -1); }
.tech-card {
  background: var(--c-white); border-radius: var(--r-card); padding: var(--sp-5); box-shadow: var(--sh-2);
  display: grid; gap: var(--sp-3); align-content: start; border-top: 3px solid var(--c-accent);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.tech-card:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }
.tech-card__icon { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--c-surface); color: var(--c-primary); }
.tech-card__icon svg { width: 1.6rem; height: 1.6rem; }
.tech-card h3 { font-size: var(--fs-h4); }
.tech-card p { font-size: var(--fs-sm); color: var(--c-ink-soft); }

/* 9. BARRA DE CONFIANZA / CIFRAS ------------------------------------------ */
.trust-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--sp-5); }
.trust-item { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--sp-3); align-items: center; }
.trust-item__icon { grid-row: span 2; width: 3.25rem; height: 3.25rem; border-radius: var(--r-card); background: var(--c-white); color: var(--c-primary); display: grid; place-items: center; box-shadow: var(--sh-1); }
.trust-item__icon svg { width: 1.6rem; height: 1.6rem; }
.trust-item__num { font: 800 var(--fs-stat)/1 var(--ff-display); letter-spacing: -.03em; color: var(--c-primary); font-variant-numeric: tabular-nums; }
.trust-item__label { font-size: var(--fs-sm); color: var(--c-ink-soft); line-height: 1.35; }
.section--dark .trust-item__num, .section--primary .trust-item__num { color: var(--c-white); }
.section--dark .trust-item__label, .section--primary .trust-item__label { color: var(--c-on-dark); }
.trust-item__num--text { font-size: var(--fs-h3); letter-spacing: var(--ls-tight); }
.section--dark .trust-item__icon { background: rgb(255 255 255 / .08); color: #9FD8E6; box-shadow: none; }

/* 10. TARJETA DE SERVICIO (imagen + panel flotante) ------------------------ */
.service-card { position: relative; display: grid; text-decoration: none; color: inherit; }
.service-card__media { aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden; background: var(--c-surface); }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.service-card__body {
  position: relative; margin: -3.5rem var(--sp-4) 0; background: var(--c-white); border-radius: var(--r-card);
  padding: var(--sp-5); box-shadow: var(--sh-2); display: grid; gap: var(--sp-2);
  border-bottom: 3px solid var(--c-accent); transition: transform var(--t-base) var(--ease-out), border-color var(--t-base);
}
.service-card__body h3 { font-size: var(--fs-h4); color: var(--c-primary); }
.service-card__body p { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.service-card__price { font: 700 var(--fs-sm)/1 var(--ff-display); color: var(--c-ink); }
.service-card:hover .service-card__media img { transform: scale(1.05); }
.service-card:hover .service-card__body { transform: translateY(-4px); border-color: var(--c-cta); }

/* 11. PROCESO EN PASOS ----------------------------------------------------- */
.steps { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); counter-reset: paso; list-style: none; padding: 0; margin: 0; }
.step { position: relative; counter-increment: paso; padding: var(--sp-6) var(--sp-5) var(--sp-5); border: 1.5px dashed var(--c-line); border-radius: var(--r-card); background: var(--c-white); display: grid; gap: var(--sp-2); align-content: start; }
.step::before { content: "Paso " counter(paso); position: absolute; top: -1px; right: var(--sp-4); translate: 0 -50%; padding: .35rem .7rem; border-radius: var(--r-sm); background: var(--c-accent-text); color: var(--c-white); font: 800 var(--fs-xs)/1 var(--ff-display); letter-spacing: var(--ls-label); text-transform: uppercase; }
.step__icon { width: 2.5rem; height: 2.5rem; color: var(--c-accent); }
.step h3 { font-size: var(--fs-h4); }
.step p { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.step:last-child { border-style: solid; border-color: var(--c-accent); background: var(--c-surface-2); }

/* 12. BLOQUE 50/50 --------------------------------------------------------- */
.split { display: grid; background: var(--c-ink); color: var(--c-on-dark); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 56em) { .split { grid-template-columns: 1fr 1fr; } .split--reverse .split__media { order: -1; } }
.split--bleed { border-radius: 0; }
.split__body { padding: clamp(2rem, 1.2rem + 4vw, 4.5rem); display: grid; gap: var(--sp-5); align-content: center; }
.split__body :is(h2,h3) { color: var(--c-white); }
.split__media { min-height: 18rem; position: relative; background: var(--c-primary); }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.check-list li { display: grid; grid-template-columns: 1.4rem 1fr; gap: var(--sp-3); align-items: start; }
.check-list li::before { content: ""; width: 1.4rem; height: 1.4rem; margin-top: .1rem; border-radius: 50%; background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat; }
.check-list strong { color: var(--c-ink); }
.split .check-list strong, .section--dark .check-list strong, .section--primary .check-list strong { color: var(--c-white); }

/* 13. PROYECTO (caso real) ------------------------------------------------- */
.project-card { background: var(--c-white); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sh-1); display: grid; grid-template-rows: auto 1fr; transition: box-shadow var(--t-base), transform var(--t-base) var(--ease-out); text-decoration: none; color: inherit; }
.project-card:hover { box-shadow: var(--sh-2); transform: translateY(-4px); }
.project-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--c-surface); }
.project-card__media img { width: 100%; height: 100%; object-fit: cover; }
.project-card__body { padding: var(--sp-5); display: grid; gap: var(--sp-3); align-content: start; }
.project-card__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); color: var(--c-ink-soft); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.project-card__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-line); }
.stat__value { font: 800 var(--fs-h3)/1 var(--ff-display); color: var(--c-primary); font-variant-numeric: tabular-nums; }
.stat__label { font-size: var(--fs-xs); color: var(--c-ink-soft); }
.badge { display: inline-flex; align-items: center; gap: .4em; padding: .35rem .7rem; border-radius: var(--r-pill); font: 700 var(--fs-xs)/1 var(--ff-display); letter-spacing: .02em; background: var(--c-surface); color: var(--c-primary); }
.badge--success { background: #DDF5E8; color: #0B6B3A; }
.badge--on-media { position: absolute; left: var(--sp-3); top: var(--sp-3); background: var(--c-white); color: var(--c-ink); box-shadow: var(--sh-1); }
.badge--on-media::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--c-wa); }

/* 14. PRECIO ORIENTATIVO --------------------------------------------------- */
.price-card { border: 1.5px solid var(--c-line); border-radius: var(--r-card); padding: var(--sp-5); display: grid; gap: var(--sp-3); background: var(--c-white); }
.price-card--featured { border-color: var(--c-primary); box-shadow: var(--sh-2); position: relative; }
.price-tag { display: flex; align-items: baseline; gap: .35em; flex-wrap: wrap; }
.price-tag__from { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.price-tag__amount { font: 800 var(--fs-h2)/1 var(--ff-display); letter-spacing: -.03em; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.price-tag__unit { font-size: var(--fs-sm); color: var(--c-ink-soft); }

/* 15. CALCULADORA DE PÉRDIDAS --------------------------------------------- */
.calc { background: var(--c-white); border-radius: var(--r-lg); box-shadow: var(--sh-2); display: grid; overflow: hidden; }
@media (min-width: 52em) { .calc { grid-template-columns: 1.1fr 1fr; } }
.calc__inputs { padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); display: grid; gap: var(--sp-4); align-content: start; }
.calc__result { padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); background: var(--c-primary); color: var(--c-white); display: grid; gap: var(--sp-3); align-content: center; }
.calc__result.is-leak { background: var(--c-ink); }
.calc__big { font: 800 clamp(2.5rem, 2rem + 2.5vw, 3.75rem)/1 var(--ff-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--c-white); }
.calc__verdict { display: inline-flex; align-items: center; gap: .5em; font-weight: 700; }
.calc__verdict::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--c-wa); }
.calc__result.is-leak .calc__verdict::before { background: var(--c-cta); box-shadow: 0 0 0 4px rgb(223 41 1 / .3); }
.range { width: 100%; accent-color: var(--c-primary); }

/* 16. FAQ ------------------------------------------------------------------ */
.faq { display: grid; gap: var(--sp-3); }
.faq__item { border: 1.5px solid var(--c-line); border-radius: var(--r-card); background: var(--c-white); transition: border-color var(--t-fast), box-shadow var(--t-base); }
.faq__item[open] { border-color: var(--c-accent); box-shadow: var(--sh-1); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); font: 700 var(--fs-base)/1.35 var(--ff-display); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--c-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v10M5 10h10' stroke='%23005991' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/60% no-repeat; transition: transform var(--t-base) var(--ease-out); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__answer { padding: 0 var(--sp-5) var(--sp-5); color: var(--c-ink-soft); }

/* 17. RESEÑAS (widget de Google estilado) --------------------------------- */
.review-card { border: 1.5px solid rgb(0 162 191 / .45); border-radius: var(--r-card); padding: var(--sp-5); background: var(--c-white); display: grid; gap: var(--sp-3); align-content: start; }
.review-card__stars { color: #F5A623; letter-spacing: .1em; font-size: 1.05rem; }
.review-card__text { color: var(--c-ink); }
.review-card__author { font: 700 var(--fs-sm)/1.3 var(--ff-display); }
.review-card__author span { display: block; font: 400 var(--fs-xs)/1.3 var(--ff-body); color: var(--c-ink-soft); }

/* 18. CTA CONTEXTUAL (blog) Y FRANJA CTA ---------------------------------- */
.cta-box { border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--c-surface); border-left: 4px solid var(--c-cta); display: grid; gap: var(--sp-4); }
.cta-box h3 { color: var(--c-ink); }
.cta-band { background: var(--c-primary); color: var(--c-white); position: relative; overflow: hidden; isolation: isolate; }
.cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-5); padding-block: var(--sp-7); }
.cta-band h2 { color: var(--c-white); font-size: var(--fs-h3); }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 88% 50%, rgb(0 162 191 / .45), transparent 45%); }

/* 19. DIVISOR DE OLA ------------------------------------------------------- */
.wave { display: block; width: 100%; height: clamp(28px, 4vw, 64px); color: var(--c-surface); }
.wave--flip { transform: scaleY(-1); }

/* 20. FOOTER --------------------------------------------------------------- */
.site-footer { background: var(--c-ink); color: var(--c-on-dark); font-size: var(--fs-sm); padding-block: var(--sp-8) var(--sp-6); }
.site-footer__grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.site-footer h4 { color: var(--c-white); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--ls-label); margin-bottom: var(--sp-3); }
.site-footer a { color: var(--c-on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--c-white); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.site-footer__bottom { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid rgb(255 255 255 / .1); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-xs); }

/* 21. BARRA FIJA MÓVIL ----------------------------------------------------- */
.mobile-bar { position: fixed; inset: auto 0 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom, 0px)); background: rgb(255 255 255 / .97); box-shadow: 0 -6px 20px rgb(19 23 57 / .12); transform: translateY(110%); transition: transform var(--t-base) var(--ease-out); }
.mobile-bar.is-visible { transform: none; }
.mobile-bar .btn { min-height: 3.1rem; font-size: var(--fs-sm); }
@media (min-width: 64em) { .mobile-bar { display: none; } }
@media (max-width: 63.99em) { body.has-mobile-bar { padding-bottom: 4.5rem; } }

/* 22. MOVIMIENTO ----------------------------------------------------------- */
/* Aparición al scroll. Sin JS todo es visible: solo se oculta si <html> tiene .js */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.js .reveal--left { transform: translateX(-24px); }
.js .reveal--right { transform: translateX(24px); }
.js .reveal.is-in { opacity: 1; transform: none; }

@keyframes nmf-sonar { 0% { transform: scale(.08); opacity: 0; } 12% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes nmf-pulse { 0%, 82% { box-shadow: 0 0 0 0 rgb(223 41 1 / .55); } 100% { box-shadow: 0 0 0 16px rgb(223 41 1 / 0); } }
@keyframes nmf-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.float { animation: nmf-float 5s var(--ease-in-out) infinite; }

/* Logo inline animable (clases incluidas en los SVG del kit) */
.logo-anim .nmf-anillo-ext { transform-origin: center; transform-box: fill-box; animation: nmf-ring 6s var(--ease-in-out) infinite; }
@keyframes nmf-ring { 0%, 90%, 100% { transform: scale(1); } 95% { transform: scale(1.04); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
  .sonar { display: none; }
}

/* 24. PLANTILLA DE ZONA ----------------------------------------------------- */
/* Migas de pan sobre el hero */
.breadcrumbs { font-size: var(--fs-xs); color: rgb(255 255 255 / .8); display: flex; flex-wrap: wrap; gap: .4em; list-style: none; padding: 0; margin: 0 0 var(--sp-2); }
.breadcrumbs li + li::before { content: "›"; margin-right: .4em; opacity: .7; }
.breadcrumbs a { color: var(--c-white); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--c-white); font-weight: 600; }

/* Intro local: texto + "Zonas que atendemos" */
.local-intro { display: grid; gap: var(--sp-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60em) { .local-intro { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.prose { display: grid; gap: var(--sp-4); max-width: 42rem; }
.prose p, .prose li { color: var(--c-ink-soft); }
.prose strong { color: var(--c-ink); }
.prose h2 { margin-bottom: var(--sp-2); }
.aside-card { background: var(--c-surface); border-radius: var(--r-card); padding: var(--sp-5); display: grid; gap: var(--sp-4); }
.aside-card h3 { font-size: var(--fs-h4); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; margin: 0; }
.chip { display: inline-flex; align-items: center; gap: .4em; padding: .45rem .8rem; border-radius: var(--r-pill); background: var(--c-white); border: 1px solid var(--c-line); font: 600 var(--fs-sm)/1.1 var(--ff-display); color: var(--c-ink); text-decoration: none; }
.chip::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--c-accent); }
a.chip { transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-out); }
a.chip:hover { border-color: var(--c-primary); color: var(--c-primary); transform: translateY(-2px); }

/* Secciones locales (repetidor zona_secciones): filas imagen + texto alternas */
.feature-rows { display: grid; gap: clamp(3rem, 2rem + 4vw, 5.5rem); }
.feature-row { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 56em) {
  .feature-row { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 5rem); }
  .feature-row:nth-child(even) .feature-row__media { order: 2; }
}
.feature-row__media { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--c-surface); box-shadow: var(--sh-2); }
.feature-row__media img { width: 100%; height: 100%; object-fit: cover; }
.feature-row__media::after { content: ""; position: absolute; inset: auto -12% -30% auto; width: 55%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgb(255 255 255 / .55); box-shadow: 0 0 0 18px rgb(255 255 255 / .12), 0 0 0 36px rgb(255 255 255 / .08); pointer-events: none; }
.feature-row__body { display: grid; gap: var(--sp-4); }

/* Tarjeta de tecnología con foto del equipo real (tec_imagen) */
.tech-card__icon img { width: 3rem; height: 3rem; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.tech-card__icon:has(img) { overflow: hidden; background: var(--c-surface); }

/* Hub: rejilla de ciudades del hub */
.hub-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.hub-link { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-card); background: var(--c-white); border: 1.5px solid var(--c-line); font: 700 var(--fs-base)/1.2 var(--ff-display); color: var(--c-ink); text-decoration: none; transition: border-color var(--t-fast), transform var(--t-base) var(--ease-out); }
.hub-link::after { content: "→"; color: var(--c-accent-text); }
.hub-link:hover { border-color: var(--c-primary); transform: translateY(-3px); }

/* Formulario nativo de Bricks dentro de .form-card */
.form-card .brxe-form { display: grid; gap: var(--sp-4); }
.form-card .brxe-form .form-group { padding: 0; margin: 0; display: grid; gap: var(--sp-1); width: 100%; }
.form-card .brxe-form label { font: 600 var(--fs-sm)/1.3 var(--ff-body); color: var(--c-ink); text-transform: none; letter-spacing: 0; }
.form-card .brxe-form .form-group:has(.options-wrapper) > :is(label, .label), .form-card .brxe-form [aria-label="Privacidad"] > :not(.options-wrapper) { display: none; }
.form-card .brxe-form .options-wrapper { list-style: none; margin: 0; padding: 0; font-size: var(--fs-xs); color: var(--c-ink-soft); }
.form-card .brxe-form .options-wrapper label { font-weight: 400; font-size: var(--fs-xs); color: var(--c-ink-soft); }
.form-card .brxe-form :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  width: 100%; min-height: 3rem; padding: .7rem .9rem; border: 1.5px solid var(--c-line); border-radius: var(--r-btn);
  background: var(--c-surface-2); font: 400 var(--fs-base)/1.4 var(--ff-body); color: var(--c-ink);
}
.form-card .brxe-form :is(input, select, textarea):focus { outline: none; border-color: var(--c-accent); background: var(--c-white); box-shadow: 0 0 0 4px rgb(0 162 191 / .18); }
.form-card .brxe-form .submit-button-wrapper { width: 100%; margin: 0; }
.form-card .brxe-form button[type="submit"] { width: 100%; min-height: 3rem; border: 0; border-radius: var(--r-btn); background: var(--c-cta); color: var(--c-white); font: 700 var(--fs-base)/1.1 var(--ff-display); cursor: pointer; box-shadow: var(--sh-cta); transition: background-color var(--t-fast), transform var(--t-fast) var(--ease-out); }
.form-card .brxe-form button[type="submit"]:hover { background: var(--c-cta-dark); transform: translateY(-2px); }
.form-card .brxe-form .message { font-size: var(--fs-sm); border-radius: var(--r-btn); }

/* Bricks: neutraliza estilos por defecto de sus elementos dentro del sistema */
.brxe-heading, .brxe-text-basic { max-width: none; }
.brxe-text > * + * { margin-top: var(--sp-4); }
.prose .brxe-text { display: grid; gap: var(--sp-4); }
.prose .brxe-text > * + * { margin-top: 0; }
.brxe-text-link.btn { display: inline-flex; }
[class*="brxe-"].container { width: 100%; }

/* 25. CABECERA GLOBAL (plantilla Header de Bricks · [nmf_header]) ----------- */
#brx-header { position: sticky; top: 0; z-index: 60; }
.admin-bar #brx-header { top: 32px; }
@media (max-width: 782px) { .admin-bar #brx-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar #brx-header { top: 0; } }
#brx-header .site-header { position: relative; }
.site-nav { display: none; }
.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--sp-2); }
.site-nav__link {
  display: inline-flex; align-items: center; gap: .35rem; padding: .6rem .75rem; border: 0; background: none; cursor: pointer;
  font: 600 var(--fs-sm)/1 var(--ff-display); color: var(--c-ink); text-decoration: none; border-radius: var(--r-sm);
  transition: color var(--t-fast), background-color var(--t-fast);
}
.site-nav__link svg { width: .75rem; height: .75rem; transition: transform var(--t-base) var(--ease-out); }
.site-nav__link:hover, .site-nav__item.is-open > .site-nav__link { color: var(--c-primary); background: var(--c-surface-2); }
.site-nav__item.is-current > .site-nav__link { color: var(--c-primary); box-shadow: inset 0 -2px 0 var(--c-accent); }
.site-nav__cta { display: none; }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--c-white); border-top: 1px solid var(--c-line); box-shadow: 0 24px 40px -24px rgb(19 23 57 / .28);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), visibility 0s linear var(--t-base); }
.mega__grid { display: grid; gap: var(--sp-6); padding-block: var(--sp-6) var(--sp-7); }
.mega__grid--servicios { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.mega__grid--zonas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mega__grid--zonas-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mega__col--tuberias { padding-left: var(--sp-5); border-left: 1px solid var(--c-line); }
.mega__grid--servicios { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(15rem, .9fr); }
.mega__title { font: 700 var(--fs-xs)/1 var(--ff-display); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-accent-text); margin-bottom: var(--sp-3); }
.mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.mega__link { display: grid; gap: .15rem; padding: .5rem .6rem; margin-inline: -.6rem; border-radius: var(--r-sm); color: var(--c-ink); text-decoration: none; transition: background-color var(--t-fast), color var(--t-fast); }
.mega__link strong { font: 700 var(--fs-base)/1.25 var(--ff-display); }
.mega__link span { font-size: var(--fs-sm); color: var(--c-ink-soft); line-height: 1.4; }
.mega__link:hover, .mega__link[aria-current] { background: var(--c-surface); color: var(--c-primary); }
.mega__list--compact .mega__link { font: 600 var(--fs-sm)/1.2 var(--ff-display); padding-block: .4rem; }
.mega__link--hub { font-weight: 800 !important; color: var(--c-primary); }
.mega__promo { background: var(--c-surface); border-radius: var(--r-card); padding: var(--sp-5); display: grid; gap: var(--sp-3); align-content: start; font-size: var(--fs-sm); color: var(--c-ink-soft); }
.mega__price { font: 800 var(--fs-h2)/1 var(--ff-display); color: var(--c-ink); letter-spacing: -.03em; }
.mega__price span { font: 600 var(--fs-sm)/1 var(--ff-body); color: var(--c-ink-soft); letter-spacing: 0; }
.nav-toggle { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: var(--r-btn); background: var(--c-surface); cursor: pointer; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 1.25rem; height: 2px; background: var(--c-ink); border-radius: 2px; position: relative; transition: transform var(--t-base) var(--ease-out), background-color var(--t-fast); }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 64em) {
  .site-nav { display: block; }
  .nav-toggle { display: none; }
  .site-nav__item.has-mega:hover > .mega, .site-nav__item.has-mega:focus-within > .mega, .site-nav__item.is-open > .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .site-nav__item.has-mega:hover > .site-nav__link svg, .site-nav__item.is-open > .site-nav__link svg { transform: rotate(180deg); }
}
@media (max-width: 63.99em) {
  .nav-open { overflow: hidden; }
  .nav-open .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--c-white); }
  .nav-open .site-nav { height: calc(100dvh - var(--header-h)); }
  .nav-open .site-nav { display: block; position: fixed; inset: var(--header-h) 0 0; z-index: 70; overflow-y: auto; background: var(--c-white); padding: var(--sp-4) var(--gutter) calc(var(--sp-7) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--c-line); }
  .admin-bar.nav-open .site-nav { top: calc(var(--header-h) + 46px); }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__item { border-bottom: 1px solid var(--c-line); }
  .site-nav__link { width: 100%; justify-content: space-between; padding: 1rem 0; font-size: var(--fs-base); border-radius: 0; }
  .site-nav__link:hover, .site-nav__item.is-open > .site-nav__link { background: none; }
  .site-nav__item.is-current > .site-nav__link { box-shadow: none; }
  .site-nav__item.is-open > .site-nav__link svg { transform: rotate(180deg); }
  .mega { position: static; display: none; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; transition: none; }
  .site-nav__item.is-open > .mega { display: block; }
  .mega .container { padding-inline: 0; }
  .mega__grid { padding-block: 0 var(--sp-5); gap: var(--sp-5); }
  .mega__grid--zonas, .mega__grid--zonas-5, .mega__grid--servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega__grid--servicios { grid-template-columns: minmax(0, 1fr); }
  .mega__col--tuberias { padding-left: 0; border-left: 0; }
  .mega__promo { display: none; }
  .site-nav__cta { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }
  .mobile-bar { transition: transform var(--t-base) var(--ease-out); }
  .nav-open .mobile-bar { transform: translateY(110%); }
}
@media (max-width: 26em) { .site-header__cta { display: none; } }

/* Footer global */
.site-footer__logo { display: block; width: 150px; }
.site-footer__logo svg { width: 100%; height: auto; }
.site-footer__zonas li { line-height: 1.6; }
.site-footer__comarca { display: block; color: var(--c-white); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; margin-top: var(--sp-2); }
@media (min-width: 64em) { .site-footer__grid { grid-template-columns: 1.1fr 1fr 1.6fr 1fr; } }

/* 23. UTILIDADES ----------------------------------------------------------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.rounded { border-radius: var(--r-card); }
.shadow { box-shadow: var(--sh-2); }

/* 26. HOME ------------------------------------------------------------------
   Portada con doble entrada (piscina / casa-edificio), audiencias, verticales,
   comparativa, cinta de técnicas y tablero de zonas. Todo con tokens del sistema. */

/* 26.1 Hero con puertas */
.home-hero { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) clamp(6rem, 4rem + 6vw, 9.5rem); }
.home-hero .hero__grid { gap: clamp(2rem, 1rem + 4vw, 4.5rem); }
@media (min-width: 64em) { .home-hero .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.home-hero h1 { font-size: clamp(2.25rem, 1.5rem + 3.2vw, 4.25rem); }
.home-hero .lead { color: rgb(255 255 255 / .88); max-width: 34rem; }

/* Palabra rotatoria: «Sin vaciar / sin picar / sin cerrar…» (CSS puro, 4 frases) */
.rotator { display: inline-flex; align-items: baseline; gap: .4em; flex-wrap: wrap; font: 700 var(--fs-lg)/1.3 var(--ff-display); color: var(--c-white); }
.rotator__window { position: relative; display: inline-block; height: 1.3em; overflow: hidden; vertical-align: bottom; min-width: 12ch; }
.rotator__list { display: grid; list-style: none; margin: 0; padding: 0; animation: nmf-rotate 10s var(--ease-in-out) infinite; }
.rotator__list > * { display: block; height: 1.3em; color: #9FE3EF; white-space: nowrap; }
@keyframes nmf-rotate {
  0%, 20% { transform: translateY(0); } 25%, 45% { transform: translateY(-1.3em); }
  50%, 70% { transform: translateY(-2.6em); } 75%, 95% { transform: translateY(-3.9em); } 100% { transform: translateY(-5.2em); }
}

/* Puertas «¿Dónde está la fuga?» */
.doors { display: grid; gap: var(--sp-4); }
.doors__q { font: 800 var(--fs-xs)/1 var(--ff-display); letter-spacing: var(--ls-label); text-transform: uppercase; color: #9FE3EF; display: flex; align-items: center; gap: .6em; }
.doors__q::after { content: ""; flex: 1; height: 1px; background: rgb(255 255 255 / .25); }
.door {
  --fill: 0%;
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center;
  padding: clamp(1.1rem, .9rem + .8vw, 1.6rem); border-radius: var(--r-lg); color: var(--c-white); text-decoration: none;
  background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .22);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform var(--t-base) var(--ease-out), border-color var(--t-base);
}
.door::before { /* el agua sube al pasar el ratón */
  content: ""; position: absolute; inset: auto 0 0; height: 100%; z-index: -1;
  background: linear-gradient(180deg, rgb(0 162 191 / .55), rgb(0 89 145 / .85));
  transform: translateY(100%); transition: transform var(--t-slow) var(--ease-out);
}
.door:hover, .door:focus-visible { transform: translateY(-3px); border-color: rgb(255 255 255 / .6); color: var(--c-white); }
.door:hover::before, .door:focus-visible::before { transform: translateY(0); }
.door__icon { width: 3.25rem; height: 3.25rem; border-radius: 14px; display: grid; place-items: center; background: var(--c-white); color: var(--c-primary); flex: none; }
.door__icon svg { width: 1.75rem; height: 1.75rem; }
.door__title { font: 800 var(--fs-h4)/1.2 var(--ff-display); letter-spacing: var(--ls-tight); display: block; }
.door__text { display: block; font-size: var(--fs-sm); color: rgb(255 255 255 / .82); margin-top: .2rem; }
.door__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.door__tags span { font-size: .75rem; font-weight: 600; padding: .2rem .55rem; border-radius: var(--r-pill); background: rgb(255 255 255 / .14); }
.door__go { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--c-cta); box-shadow: var(--sh-cta); transition: transform var(--t-base) var(--ease-out); }
.door__go svg { width: 1.2rem; height: 1.2rem; }
.door:hover .door__go { transform: translateX(4px); }
.doors__alt { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; font-size: var(--fs-sm); color: rgb(255 255 255 / .82); }
.doors__alt a { color: var(--c-white); font-weight: 700; text-decoration: none; padding: .35rem .85rem; border-radius: var(--r-pill); border: 1px solid rgb(255 255 255 / .35); transition: background var(--t-fast), color var(--t-fast); }
.doors__alt a:hover { background: var(--c-white); color: var(--c-primary); }
@media (max-width: 40em) { .door { grid-template-columns: auto minmax(0, 1fr); } .door__go { display: none; } }

/* Barra de confianza en tarjeta blanca cuando solapa el hero */
.trust-panel { background: var(--c-white); border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }

/* 26.2 Audiencias */
.audience { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.aud-card {
  position: relative; display: grid; gap: var(--sp-3); align-content: start; padding: var(--sp-6) var(--sp-5) var(--sp-5);
  border-radius: var(--r-lg); background: var(--c-white); border: 1px solid var(--c-line); color: var(--c-ink); text-decoration: none;
  box-shadow: var(--sh-1); transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base), border-color var(--t-base); overflow: hidden;
}
.aud-card:hover { transform: translateY(-6px); box-shadow: var(--sh-3); border-color: var(--c-accent); color: var(--c-ink); }
.aud-card__num { position: absolute; right: var(--sp-4); top: var(--sp-2); font: 800 clamp(4rem, 3rem + 3vw, 6rem)/1 var(--ff-display); color: var(--c-surface); z-index: 0; letter-spacing: -.04em; }
.aud-card > * { position: relative; }
.aud-card > .aud-card__num { position: absolute; }
.aud-card__icon { width: 3rem; height: 3rem; border-radius: 12px; display: grid; place-items: center; background: var(--c-surface); color: var(--c-primary); }
.aud-card__icon svg { width: 1.6rem; height: 1.6rem; }
.aud-card h3 { font-size: var(--fs-h3); }
.aud-card p { color: var(--c-ink-soft); font-size: var(--fs-sm); }
.aud-card__tag { justify-self: start; font: 700 .75rem/1 var(--ff-display); letter-spacing: .04em; text-transform: uppercase; padding: .45rem .7rem; border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-accent-text); }
.aud-card .check-list { font-size: var(--fs-sm); }
.aud-card__go { margin-top: auto; font-weight: 700; color: var(--c-primary); display: inline-flex; gap: .4em; align-items: center; }
.aud-card__go svg { width: 1.1em; height: 1.1em; transition: transform var(--t-base) var(--ease-out); }
.aud-card:hover .aud-card__go svg { transform: translateX(4px); }
.aud-card--dark { background: var(--c-ink); color: var(--c-white); border-color: var(--c-ink); }
.aud-card--dark:hover { color: var(--c-white); }
.aud-card--dark h3 { color: var(--c-white); }
.aud-card--dark p, .aud-card--dark .check-list { color: var(--c-on-dark); }
.aud-card--dark .aud-card__num { color: rgb(255 255 255 / .06); }
.aud-card--dark .aud-card__icon, .aud-card--dark .aud-card__tag { background: rgb(255 255 255 / .1); color: #9FE3EF; }
.aud-card--dark .aud-card__go { color: var(--c-white); }

/* 26.3 Verticales (bento de dos paneles) */
.verticals { display: grid; gap: var(--sp-5); }
@media (min-width: 64em) { .verticals { grid-template-columns: 1fr 1fr; } }
.vpanel { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); display: grid; gap: var(--sp-5); align-content: start; background: var(--c-white); border: 1px solid var(--c-line); box-shadow: var(--sh-1); }
.vpanel__head { display: grid; gap: var(--sp-3); }
.vpanel__label { display: inline-flex; align-items: center; gap: .5em; font: 800 var(--fs-xs)/1 var(--ff-display); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-accent-text); }
.vpanel__label svg { width: 1.3rem; height: 1.3rem; }
.vpanel h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
.vpanel__media { position: absolute; inset: 0 0 auto auto; width: 42%; height: 11rem; z-index: -1; border-bottom-left-radius: 60% 40%; overflow: hidden; opacity: .9; }
.vpanel__media img { width: 100%; height: 100%; object-fit: cover; }
.vpanel__head { max-width: 62%; }
.vpanel:not(.vpanel--dark) .svc-list__item { background: var(--c-surface-2); }
@media (max-width: 40em) { .vpanel__media { display: none; } .vpanel__head { max-width: none; } }
.vpanel--dark { background: var(--c-ink); color: var(--c-on-dark); border-color: var(--c-ink); }
.vpanel--dark h3 { color: var(--c-white); }
.vpanel--dark .vpanel__label { color: #9FE3EF; }
.svc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); counter-reset: none; }
.svc-list__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center; padding: var(--sp-4); border-radius: var(--r-card); background: var(--c-white); color: var(--c-ink); text-decoration: none; transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base); }
.svc-list__item:hover { transform: translateX(6px); box-shadow: var(--sh-2); color: var(--c-ink); }
.svc-list__n { font: 800 var(--fs-sm)/1 var(--ff-display); color: var(--c-accent-text); }
.svc-list__txt strong { display: block; font: 700 var(--fs-base)/1.3 var(--ff-display); }
.svc-list__txt span { display: block; font-size: var(--fs-sm); color: var(--c-ink-soft); margin-top: .15rem; }
.svc-list__go { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--c-surface); color: var(--c-primary); transition: background var(--t-base), color var(--t-base); }
.svc-list__go svg { width: 1.1rem; height: 1.1rem; }
.svc-list__item:hover .svc-list__go { background: var(--c-primary); color: var(--c-white); }
.vpanel--dark .svc-list__item { background: rgb(255 255 255 / .06); color: var(--c-white); }
.vpanel--dark .svc-list__item:hover { background: rgb(255 255 255 / .12); color: var(--c-white); }
.vpanel--dark .svc-list__txt span { color: var(--c-on-dark); }
.vpanel--dark .svc-list__n { color: #9FE3EF; }
.vpanel--dark .svc-list__go { background: rgb(255 255 255 / .1); color: var(--c-white); }

/* 26.4 Comparativa «obra tradicional vs sin obra» */
.versus { position: relative; display: grid; gap: var(--sp-5); }
@media (min-width: 52em) { .versus { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
.versus__col { border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); display: grid; gap: var(--sp-4); align-content: start; }
.versus__col--old { background: var(--c-surface-2); border: 1.5px dashed var(--c-line); color: var(--c-ink-soft); }
.versus__col--new { background: var(--c-primary); color: var(--c-white); box-shadow: var(--sh-3); }
.versus__col--new h3 { color: var(--c-white); }
.versus__col h3 { font-size: var(--fs-h3); }
.versus__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.versus__list li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start; }
.versus__list li::before { content: ""; width: 1.5rem; height: 1.5rem; border-radius: 50%; margin-top: .05rem; background: center/62% no-repeat; }
.versus__col--old .versus__list li::before { background-color: #F3D9D2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 6l8 8M14 6l-8 8' stroke='%23C42400' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.versus__col--new .versus__list li::before { background-color: var(--c-accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.versus__col--old .versus__list li { text-decoration: line-through; text-decoration-color: rgb(196 36 0 / .35); }
.versus__badge { justify-self: center; font: 800 var(--fs-sm)/1 var(--ff-display); width: 3.5rem; height: 3.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--c-cta); color: var(--c-white); box-shadow: var(--sh-cta); }
@media (min-width: 52em) { .versus__badge { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; } }

/* 26.5 Cinta de técnicas */
.marquee { display: flex; overflow: hidden; gap: var(--sp-6); padding-block: var(--sp-5); border-block: 1px solid var(--c-line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { flex: none; display: flex; gap: var(--sp-6); list-style: none; margin: 0; padding: 0; animation: nmf-marquee 38s linear infinite; }
.marquee__track li { display: inline-flex; align-items: center; gap: .6em; white-space: nowrap; font: 700 var(--fs-lg)/1 var(--ff-display); color: var(--c-ink); }
.marquee__track svg { width: 1.2em; height: 1.2em; color: var(--c-accent); }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes nmf-marquee { to { transform: translateX(calc(-100% - var(--sp-6))); } }

/* 26.6 Tablero de zonas */
.zone-board { display: grid; gap: var(--sp-6); }
.zone-board__grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.zone-col { background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .12); border-radius: var(--r-card); padding: var(--sp-5); display: grid; gap: var(--sp-4); align-content: start; }
.zone-col__title { display: flex; align-items: center; gap: .5em; font: 800 var(--fs-sm)/1.2 var(--ff-display); letter-spacing: .02em; color: var(--c-white); }
.zone-col__title svg { width: 1.2rem; height: 1.2rem; color: var(--c-cta-on-dark); flex: none; }
.zone-col__count { margin-left: auto; font-size: var(--fs-xs); padding: .25rem .55rem; border-radius: var(--r-pill); background: rgb(255 255 255 / .1); color: #9FE3EF; }
.zone-col__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.zone-chip { display: inline-block; padding: .4rem .75rem; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; color: var(--c-white); background: rgb(255 255 255 / .08); text-decoration: none; transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast); }
.zone-chip:hover { background: var(--c-white); color: var(--c-primary); transform: translateY(-2px); }
.zone-chip--hub { background: var(--c-accent-text); }
.zone-chip--sub { background: transparent; border: 1px dashed rgb(255 255 255 / .3); font-weight: 500; }
.zone-col__note { margin-top: calc(var(--sp-2) * -1); font-size: var(--fs-xs); color: #9FE3EF; }
.zone-board__pipes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); padding: var(--sp-5); border-radius: var(--r-card); background: linear-gradient(90deg, rgb(0 162 191 / .22), rgb(0 162 191 / .05)); }
.zone-board__pipes-title { display: inline-flex; align-items: center; gap: .5em; font: 800 var(--fs-sm)/1 var(--ff-display); color: var(--c-white); }
.zone-board__pipes-title svg { width: 1.4rem; height: 1.4rem; color: #9FE3EF; }
.zone-chip--dark { background: rgb(19 23 57 / .45); }
.zone-board__total { color: var(--c-on-dark); font-size: var(--fs-sm); }
.zone-board__total .num { font: 800 var(--fs-h3)/1 var(--ff-display); color: var(--c-white); margin-right: .3em; }

/* 26.7 Cierre con formulario */
.home-cta { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 64em) { .home-cta { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); } }
.home-cta h2 { color: var(--c-white); }
.home-cta .lead { color: rgb(255 255 255 / .85); }
.home-cta__contact { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

@media (prefers-reduced-motion: reduce) {
  .rotator__list, .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
  .door::before { transition: none; }
}
@media (max-width: 40em) {
  .svc-list__n { display: none; }
  .svc-list__item { grid-template-columns: minmax(0, 1fr) auto; }
}

/* 27. SINGLE SERVICIO ------------------------------------------------------ */
.hero__media > .brxe-shortcode { height: 100%; }
.hero__media > .brxe-shortcode img { width: 100%; height: 100%; object-fit: cover; }
.benefit-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.benefit-card { position: relative; display: grid; gap: var(--sp-3); align-content: start; padding: var(--sp-6) var(--sp-5) var(--sp-5); border-radius: var(--r-lg); background: var(--c-surface-2); border-top: 3px solid var(--c-accent); }
.benefit-card__n { font: 800 var(--fs-sm)/1 var(--ff-display); color: var(--c-accent-text); }
.benefit-card h3 { font-size: var(--fs-h4); }
.benefit-card p { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.feature-row__title { font-size: var(--fs-h3); }
.price-split { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 56em) { .price-split { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); } }
.price-card--big { padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); gap: var(--sp-4); }
.price-card__amount { font: 800 clamp(2.75rem, 2rem + 3vw, 4rem)/1 var(--ff-display); color: var(--c-primary); letter-spacing: -.03em; }
.price-card__unit { font-weight: 600; color: var(--c-ink-soft); margin-top: calc(var(--sp-3) * -1); }
.price-card__note { font-size: var(--fs-xs); color: var(--c-ink-soft); }
.cross-band { display: grid; gap: var(--sp-5); align-items: center; padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); border-radius: var(--r-lg); background: linear-gradient(120deg, var(--c-primary), #0A7FA8); color: rgb(255 255 255 / .9); }
@media (min-width: 56em) { .cross-band { grid-template-columns: minmax(0, 1.4fr) auto; } }
.cross-band h2 { color: var(--c-white); font-size: var(--fs-h3); }
.cross-band .eyebrow { color: #9FE3EF; }
.cross-band .cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.cross-band > * { min-width: 0; }
.cross-band .btn { white-space: normal; text-align: center; }
@media (max-width: 40em) { .cross-band .cluster .btn { flex: 1 1 100%; } }

/* Filas de contenido sin foto: título fijo a la izquierda + texto (sin hueco en blanco) */
.feature-rows h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); }
.feature-row--text { align-items: start; padding-top: var(--sp-6); border-top: 1px solid var(--c-line); }
.feature-rows .feature-row--text:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 56em) {
  .feature-row--text { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .feature-row__aside { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.feature-row__aside { display: grid; gap: var(--sp-3); align-content: start; }
.feature-row__num { font: 800 clamp(2.75rem, 2rem + 2.5vw, 4rem)/1 var(--ff-display); color: transparent; -webkit-text-stroke: 1.5px var(--c-accent); letter-spacing: -.02em; }
.feature-row--text .feature-row__body { padding: clamp(1.25rem, 1rem + 1vw, 2rem); border-radius: var(--r-lg); background: var(--c-surface-2); }
.section--alt .feature-row--text .feature-row__body { background: var(--c-white); }
.feature-row--text .prose ul { padding-left: 1.1rem; }


/* ==========================================================================
   27 · Hero de zona con doble entrada (zona_hero_doble · 1.4.3)
   ========================================================================== */
.doors--hero { gap: var(--sp-3); }
.doors--hero .door { padding: .85rem 1rem; gap: .9rem; }
.doors--hero .door__icon { width: 2.6rem; height: 2.6rem; border-radius: 12px; }
.doors--hero .door__icon svg { width: 1.4rem; height: 1.4rem; }
.doors--hero .door__title { font-size: 1.15rem; }
.doors--hero .door__go { width: 2.1rem; height: 2.1rem; }
.feature-row[id], #diagnostico { scroll-margin-top: 6rem; }


/* ==========================================================================
   28 · PLANTILLA DE ZONA · TUBERÍAS Y BAJANTES (1.5.0)
   Misma línea que piscinas, con otro acento: tinta en lugar de azul en el
   hero, la tubería como motivo (en vez del sonar) y bloques propios.
   ========================================================================== */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Hero: degradado de tinta y tubería animada */
.hero--pipe { background: var(--c-ink); }
.hero--pipe::before { background: linear-gradient(105deg, rgb(19 23 57 / .96) 0%, rgb(19 23 57 / .86) 42%, rgb(0 69 111 / .55) 70%, rgb(0 69 111 / .35) 100%); }
@media (max-width: 61.99em) { .hero--pipe::before { background: linear-gradient(180deg, rgb(19 23 57 / .78) 0%, rgb(19 23 57 / .92) 55%, rgb(19 23 57 / .97) 100%); } }
.hero--pipe .eyebrow { color: #FFB29E; }
.hero--pipe .eyebrow::before { background: var(--c-cta-on-dark); }
.pipe-motif { position: absolute; z-index: -1; right: -4rem; bottom: 0; width: min(44rem, 80vw); height: auto; pointer-events: none; opacity: .9; }
.pipe-motif__tube { stroke: rgb(255 255 255 / .14); stroke-width: 18; stroke-linecap: round; }
.pipe-motif__flow { stroke: #9FD8E6; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 22; animation: nmf-flow 2.4s linear infinite; opacity: .8; }
.pipe-motif__leak { fill: var(--c-cta); }
.pipe-motif__ring { fill: none; stroke: var(--c-cta-on-dark); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: nmf-leak 2.6s var(--ease-out) infinite; }
@keyframes nmf-flow { to { stroke-dashoffset: -64; } }
@keyframes nmf-leak { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(5); opacity: 0; } }

/* «¿Qué notas?» en el hero */
.quick { display: grid; gap: var(--sp-3); }
.quick__q { font: 800 var(--fs-xs)/1 var(--ff-display); letter-spacing: var(--ls-label); text-transform: uppercase; color: #FFB29E; display: flex; align-items: center; gap: .6em; }
.quick__q::after { content: ""; flex: 1; height: 1px; background: rgb(255 255 255 / .22); }
.quick__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.quick__chip { display: inline-flex; align-items: center; gap: .45em; padding: .5rem .8rem; border-radius: var(--r-pill); border: 1px solid rgb(255 255 255 / .3); background: rgb(255 255 255 / .06); color: var(--c-white); font: 600 var(--fs-sm)/1.2 var(--ff-body); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease-out); }
.quick__chip svg { width: 1.1rem; height: 1.1rem; color: #9FD8E6; flex: none; }
.quick__chip:hover { background: rgb(255 255 255 / .14); border-color: rgb(255 255 255 / .6); transform: translateY(-1px); }
.quick__chip.is-on { background: var(--c-white); color: var(--c-ink); border-color: var(--c-white); }
.quick__chip.is-on svg { color: var(--c-cta); }
@media (max-width: 40em) { .quick__chip:nth-child(n+4) { display: none; } }

/* Franja de confianza propia */
.tub-trust { background: var(--c-white); border-radius: var(--r-lg); box-shadow: var(--sh-3); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); overflow: hidden; }
.tub-trust__item { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-5); border-left: 1px solid var(--c-line); }
.tub-trust__item:first-child { border-left: 0; }
.tub-trust__icon { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; background: #FFEDE7; color: var(--c-cta); flex: none; }
.tub-trust__icon svg { width: 1.4rem; height: 1.4rem; }
.tub-trust strong { display: block; font: 800 var(--fs-h4)/1.15 var(--ff-display); color: var(--c-ink); letter-spacing: var(--ls-tight); }
.tub-trust small { display: block; font-size: var(--fs-xs); color: var(--c-ink-soft); margin-top: .15rem; }
@media (max-width: 40em) { .tub-trust__item { border-left: 0; border-top: 1px solid var(--c-line); padding: var(--sp-4); } .tub-trust__item:first-child { border-top: 0; } }

/* Autodiagnóstico */
.symptom-test { display: grid; gap: var(--sp-5); }
@media (min-width: 60em) { .symptom-test { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.symptom-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.symptom { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3); align-items: start; text-align: left; padding: var(--sp-4); border-radius: var(--r-card); border: 1.5px solid var(--c-line); background: var(--c-white); color: var(--c-ink); font: inherit; cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-base), transform var(--t-fast) var(--ease-out); }
.symptom:hover { border-color: var(--c-accent); transform: translateY(-2px); box-shadow: var(--sh-1); }
.symptom__icon { width: 2.5rem; height: 2.5rem; border-radius: var(--r-card); display: grid; place-items: center; background: var(--c-surface); color: var(--c-primary); }
.symptom__icon svg { width: 1.35rem; height: 1.35rem; }
.symptom__txt strong { display: block; font: 700 var(--fs-base)/1.3 var(--ff-display); }
.symptom__txt span { display: block; font-size: var(--fs-sm); color: var(--c-ink-soft); margin-top: .2rem; line-height: 1.45; }
.symptom__tick { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1.5px solid var(--c-line); display: grid; place-items: center; color: transparent; transition: background var(--t-fast), border-color var(--t-fast); }
.symptom__tick svg { width: 1rem; height: 1rem; }
.symptom[aria-pressed="true"] { border-color: var(--c-cta); box-shadow: 0 0 0 4px rgb(223 41 1 / .1); }
.symptom[aria-pressed="true"] .symptom__icon { background: #FFEDE7; color: var(--c-cta); }
.symptom[aria-pressed="true"] .symptom__tick { background: var(--c-cta); border-color: var(--c-cta); color: var(--c-white); }
.symptom-result { position: sticky; top: calc(var(--header-h) + 1rem); background: var(--c-ink); color: var(--c-on-dark); border-radius: var(--r-lg); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); display: grid; gap: var(--sp-4); box-shadow: var(--sh-3); }
.symptom-result h3 { color: var(--c-white); font-size: var(--fs-h3); }
.symptom-result .link-arrow { color: var(--c-white); }
.symptom-result__count { font-size: var(--fs-sm); }
.symptom-result__count b { font: 800 var(--fs-stat)/1 var(--ff-display); color: var(--c-white); margin-right: .15em; }
.meter { height: .6rem; border-radius: var(--r-pill); background: rgb(255 255 255 / .12); overflow: hidden; }
.meter__fill { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--v, 0)); background: linear-gradient(90deg, var(--c-wa), #F5A623 50%, var(--c-cta)); transition: transform var(--t-slow) var(--ease-out); }
.symptom-test.is-leak .symptom-result { box-shadow: 0 0 0 3px rgb(223 41 1 / .45), var(--sh-3); }

/* Ruta: qué te pasa → cómo lo resolvemos */
.route { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); }
.route__row { display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56em) { .route__row { grid-template-columns: minmax(0, 1fr) 5rem minmax(0, 1.15fr); align-items: stretch; gap: 0; } }
.route__problem, .route__fix { border-radius: var(--r-card); padding: var(--sp-5); display: grid; gap: var(--sp-2); align-content: start; }
.route__problem { background: var(--c-surface-2); border: 1.5px dashed var(--c-line); grid-template-columns: auto 1fr; column-gap: var(--sp-4); }
.route__problem > :not(.route__icon) { grid-column: 2; }
.route__icon { grid-row: span 3; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--c-white); color: var(--c-primary); box-shadow: var(--sh-1); }
.route__icon svg { width: 1.5rem; height: 1.5rem; }
.route__fix { background: var(--c-white); box-shadow: var(--sh-2); border-left: 4px solid var(--c-accent); }
.route__problem h3, .route__fix h3 { font-size: var(--fs-h4); }
.route__problem p, .route__fix p { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.route__tag { font: 800 .6875rem/1 var(--ff-display); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-ink-soft); }
.route__tag--fix { color: var(--c-accent-text); }
.route__link { position: relative; display: none; }
@media (min-width: 56em) {
  .route__link { display: block; }
  .route__link::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 10px; translate: 0 -50%; border-radius: 5px; background: var(--c-surface); border: 1.5px solid var(--c-line); }
  .route__drop { position: absolute; top: 50%; left: 8%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--c-accent); animation: nmf-drop 2.2s var(--ease-in-out) infinite; }
  .route__row:nth-child(2) .route__drop { animation-delay: .4s; } .route__row:nth-child(3) .route__drop { animation-delay: .8s; } .route__row:nth-child(4) .route__drop { animation-delay: 1.2s; }
}
@keyframes nmf-drop { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(3.2rem); opacity: 0; } }

/* Guía local: recorrido con nodos */
.tub-guide .feature-rows { position: relative; }
.tub-guide .feature-row--text .feature-row__num { color: transparent; -webkit-text-stroke: 1.5px var(--c-cta); }
.tub-guide .feature-row__body { border-left: 3px solid var(--c-line); }
.tub-guide .feature-row__body .prose { background: var(--c-white); }

/* Obra vs sin obra */
.vs-wrap { border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; background: var(--c-white); }
.vs-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.vs-table th, .vs-table td { padding: var(--sp-4) var(--sp-5); text-align: left; vertical-align: top; border-top: 1px solid var(--c-line); }
.vs-table thead th { border-top: 0; font: 800 var(--fs-sm)/1.2 var(--ff-display); letter-spacing: .02em; background: var(--c-surface-2); color: var(--c-ink-soft); }
.vs-table thead .vs-table__us { background: var(--c-ink); color: var(--c-white); }
.vs-table tbody th { font: 700 var(--fs-sm)/1.3 var(--ff-display); color: var(--c-ink); width: 22%; }
.vs-table td { color: var(--c-ink-soft); }
.vs-table__good { background: #F2FBFD; color: var(--c-ink) !important; font-weight: 600; }
.vs-table__ico { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; margin-right: .55rem; vertical-align: -.3rem; }
.vs-table__ico svg { width: .85rem; height: .85rem; }
.vs-table__bad .vs-table__ico { background: #FFEDE7; color: var(--c-cta); }
.vs-table__good .vs-table__ico { background: var(--c-accent); color: var(--c-white); }
@media (max-width: 44em) {
  .vs-table thead { display: none; }
  .vs-table tr { display: grid; border-top: 1px solid var(--c-line); }
  .vs-table tbody th, .vs-table td { border: 0; width: auto; padding: var(--sp-2) var(--sp-4); }
  .vs-table tbody th { padding-top: var(--sp-4); }
  .vs-table td:last-child { padding-bottom: var(--sp-4); }
}

/* Pestañas por perfil */
.tabs { background: var(--c-white); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; max-width: 58rem; margin-inline: auto; }
.tabs__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--c-line); background: var(--c-surface-2); }
.tabs__tab { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: var(--sp-4) var(--sp-2); border: 0; background: none; font: 700 var(--fs-sm)/1.2 var(--ff-display); color: var(--c-ink-soft); cursor: pointer; position: relative; transition: color var(--t-fast), background var(--t-fast); }
.tabs__tab svg { width: 1.5rem; height: 1.5rem; }
.tabs__tab::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--c-cta); transform: scaleX(0); transition: transform var(--t-base) var(--ease-out); }
.tabs__tab[aria-selected="true"] { color: var(--c-ink); background: var(--c-white); }
.tabs__tab[aria-selected="true"]::after { transform: scaleX(1); }
.tabs__tab[aria-selected="true"] svg { color: var(--c-cta); }
.tabs__panel { padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); display: grid; gap: var(--sp-5); }
.tabs__panel[hidden] { display: none; }
.tabs:not(.is-ready) .tabs__panel + .tabs__panel { border-top: 1px solid var(--c-line); }
.tabs__lead { display: flex; align-items: center; gap: var(--sp-3); }
.tabs__icon { width: 2.75rem; height: 2.75rem; border-radius: var(--r-card); display: grid; place-items: center; background: var(--c-surface); color: var(--c-primary); flex: none; }
.tabs__icon svg { width: 1.4rem; height: 1.4rem; }

/* Informe de ejemplo */
.report-split { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 60em) { .report-split { grid-template-columns: 1.1fr 1fr; } }
.report { position: relative; margin: 0; background: var(--c-white); color: var(--c-ink); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: 0 30px 60px -20px rgb(0 0 0 / .5); display: grid; gap: var(--sp-4); transform: rotate(-1.5deg); }
.report__sample { position: absolute; top: var(--sp-4); right: var(--sp-4); font: 800 .6875rem/1 var(--ff-display); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-ink-soft); border: 1px dashed var(--c-line); border-radius: var(--r-sm); padding: .3rem .5rem; }
.report__head { display: flex; gap: var(--sp-3); align-items: center; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-line); }
.report__head strong { display: block; font: 800 var(--fs-h4)/1.2 var(--ff-display); }
.report__head small { display: block; font-size: var(--fs-xs); color: var(--c-ink-soft); }
.report__logo { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--c-cta); color: var(--c-white); display: grid; place-items: center; flex: none; }
.report__logo svg { width: 1.3rem; height: 1.3rem; }
.report__plan { width: 100%; height: auto; background: var(--c-surface-2); border-radius: var(--r-card); }
.report__plan rect, .report__plan > path:first-of-type { stroke: #B8CCD6; stroke-width: 2; }
.report__pipe { stroke: var(--c-primary); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 8 6; }
.report__leak { fill: var(--c-cta); }
.report__ring { fill: none; stroke: var(--c-cta); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: nmf-leak 2.6s var(--ease-out) infinite; }
.report__plan text { font: 800 12px var(--ff-display); fill: var(--c-cta); }
.report__rows { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.report__rows div { background: var(--c-surface-2); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); }
.report__rows dt { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-soft); font-weight: 700; }
.report__rows dd { margin: .15rem 0 0; font: 700 var(--fs-sm)/1.3 var(--ff-display); }
.report__ok { color: #0B6B3A; }
.report__ok::before { content: "● "; }

/* Prueba del contador */
.meter-test { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 60em) { .meter-test { grid-template-columns: .85fr 1.4fr; } }
.meter-test__steps { counter-reset: m; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.meter-test__steps li { counter-increment: m; display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--sp-3); align-items: start; color: var(--c-ink-soft); }
.meter-test__steps li::before { content: counter(m); width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--c-ink); color: var(--c-white); font: 800 var(--fs-sm)/1 var(--ff-display); }
.meter-test__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); padding-block: var(--sp-3); border-block: 1px solid rgb(255 255 255 / .15); }
.meter-test__pair strong { display: block; font: 800 var(--fs-h3)/1 var(--ff-display); color: var(--c-white); }
.meter-test__pair span { font-size: var(--fs-xs); }
.calc--meter .field label { color: var(--c-ink); }
.calc--meter .calc__verdict::before { background: var(--c-cta); box-shadow: 0 0 0 4px rgb(223 41 1 / .3); }

/* Cruce a piscinas */
.cross-band--pool { border-left-color: var(--c-accent); }
.aside-card--tub { border-top: 4px solid var(--c-cta); }

@media (prefers-reduced-motion: reduce) { .pipe-motif__flow, .pipe-motif__ring, .route__drop, .report__ring { animation: none !important; } }


/* ==========================================================================
   29 · CRUCE ENTRE VERTICALES POR CIUDAD (29/09/2026)
   Menú, tablero de la home y bloque «¿Y si la fuga está en casa?».
   ========================================================================== */
.mega__pair { display: flex; align-items: center; gap: .35rem; padding-block: .3rem; }
.mega__pair-name { font: 600 var(--fs-sm)/1.2 var(--ff-display); color: var(--c-ink); margin-right: auto; }
.mega__tag { font: 700 .75rem/1 var(--ff-display); padding: .38rem .6rem; border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-primary); text-decoration: none; transition: background var(--t-fast), color var(--t-fast); }
.mega__tag--tub { background: #FFEDE7; color: #B32100; }
.mega__tag:hover, .mega__tag[aria-current] { background: var(--c-primary); color: var(--c-white); }
.mega__tag--tub:hover, .mega__tag--tub[aria-current] { background: var(--c-cta); color: var(--c-white); }
.zone-pair { display: flex; flex-wrap: wrap; width: 100%; border-radius: .9rem; background: rgb(255 255 255 / .08); overflow: hidden; }
.zone-pair__name { flex: 1 1 100%; padding: .5rem .75rem .45rem; font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; color: var(--c-white); }
.zone-pair__tag { flex: 1 1 50%; display: inline-flex; align-items: center; justify-content: center; gap: .3em; padding: .4rem .6rem; font-size: .75rem; font-weight: 700; color: #9FE3EF; text-decoration: none; box-shadow: -1px -1px 0 rgb(255 255 255 / .12); transition: background var(--t-fast), color var(--t-fast); }
.zone-pair__tag svg { width: .95rem; height: .95rem; }
.zone-pair__tag--tub { color: #FFB29E; }
.zone-pair__tag:hover { background: var(--c-white); color: var(--c-primary); }
.zone-pair__tag--tub:hover { color: var(--c-cta); }
.zone-board__pipes-text { flex: 1 1 22rem; font-size: var(--fs-sm); color: var(--c-on-dark); }
.zone-board__pipes-text a { color: var(--c-white); font-weight: 700; }
.cross-band--casa { background: linear-gradient(120deg, var(--c-ink), #2A2F5A); }
.cross-band--casa .eyebrow { color: #FFB29E; }


/* 30 · Zona sin intro local (29/09): la tarjeta de localidades pasa a banda horizontal a todo el ancho
   y la sección se compacta, para no dejar huecos en blanco mientras falta el texto local. */
.local-intro:not(:has(> .prose)) { grid-template-columns: minmax(0, 1fr); }
.section:has(> .local-intro:not(:has(> .prose))) { padding-block: calc(var(--sp-section) * .45); }
@media (min-width: 56em) {
  .local-intro:not(:has(> .prose)) > .aside-card { grid-template-columns: minmax(0, 1fr) minmax(16rem, auto); column-gap: var(--sp-7); align-items: center; padding: var(--sp-6); }
  .local-intro:not(:has(> .prose)) > .aside-card > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .local-intro:not(:has(> .prose)) > .aside-card > :nth-child(2) { grid-column: 1; grid-row: 2; }
  .local-intro:not(:has(> .prose)) > .aside-card > :nth-child(3) { grid-column: 2; grid-row: 1; justify-self: end; }
  .local-intro:not(:has(> .prose)) > .aside-card > :nth-child(4) { grid-column: 2; grid-row: 2; }
}


/* §31 Secciones seguidas con el mismo fondo: no se suman los dos rellenos */
.section--alt + .section--alt,
.section--dark + .section--dark,
.section:not(.section--alt):not(.section--dark):not(.section--tight) + .section:not(.section--alt):not(.section--dark):not(.section--tight) { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.section--alt:has(+ .section--alt),
.section--dark:has(+ .section--dark),
.section:not(.section--alt):not(.section--dark):not(.section--tight):has(+ .section:not(.section--alt):not(.section--dark):not(.section--tight)) { padding-bottom: clamp(2rem, 4vw, 3rem); }
.section:not(.section--alt):not(.section--dark):not(.section--tight):has(+ .section--tight) { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
/* §31b Lo mismo cuando la sección sale de un shortcode (envuelta en .brxe-shortcode) */
.section--alt + .brxe-shortcode > .section--alt:first-child,
.brxe-shortcode:has(> .section--alt:last-child) + .section--alt,
.brxe-shortcode:has(> .section--alt:last-child) + .brxe-shortcode > .section--alt:first-child { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.section--alt:has(+ .brxe-shortcode > .section--alt:first-child),
.brxe-shortcode:has(+ .section--alt) > .section--alt:last-child,
.brxe-shortcode:has(+ .brxe-shortcode > .section--alt:first-child) > .section--alt:last-child { padding-bottom: clamp(2rem, 4vw, 3rem); }
.section:not(.section--alt):not(.section--dark):not(.section--tight):has(+ .brxe-shortcode > .section--tight:first-child),
.brxe-shortcode:has(+ .brxe-shortcode > .section--tight:first-child) > .section:not(.section--alt):not(.section--dark):not(.section--tight):last-child { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }

/* 32. BLOG (1.6.0) ---------------------------------------------------------- */
/* 32.1 Hero del archivo con depósito que se vacía al hacer scroll */
.blog-hero { background: var(--c-ink); padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.blog-hero::before { background: radial-gradient(circle at 82% 40%, rgb(0 162 191 / .22), transparent 48%), linear-gradient(180deg, rgb(19 23 57 / 0) 60%, rgb(0 69 111 / .35) 100%); }
.blog-hero__grid { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 62em) { .blog-hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.blog-hero__content { display: grid; gap: var(--sp-5); align-content: start; }
.blog-hero h1 { max-width: 16ch; }
.blog-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.blog-filter { display: inline-flex; align-items: center; gap: .45em; padding: .55rem .95rem; border-radius: var(--r-pill); border: 1px solid rgb(255 255 255 / .22); color: var(--c-white); font: 700 var(--fs-sm)/1 var(--ff-display); text-decoration: none; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease-out); }
.blog-filter svg { width: 1.05rem; height: 1.05rem; }
.blog-filter span { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding-inline: .35rem; border-radius: var(--r-pill); background: rgb(255 255 255 / .12); font-size: var(--fs-xs); }
.blog-filter:hover { border-color: var(--c-white); transform: translateY(-2px); }
.blog-filter.is-active { background: var(--c-white); color: var(--c-ink); border-color: var(--c-white); }
.blog-filter.is-active span { background: var(--c-surface); color: var(--c-primary); }
.blog-hero__proof { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); list-style: none; padding: 0; margin: 0; font-size: var(--fs-sm); color: var(--c-on-dark); }
.blog-hero__proof strong { color: var(--c-white); }

.leak-tank { position: relative; justify-self: center; width: min(100%, 22rem); }
.leak-tank__svg { display: block; width: 100%; height: auto; overflow: visible; }
.leak-tank__glass { fill: rgb(255 255 255 / .04); stroke: rgb(255 255 255 / .22); stroke-width: 2; }
.leak-tank__water { transition: transform .5s var(--ease-out); }
.leak-tank__wave { animation: nmf-wave 6s linear infinite; }
.leak-tank__wave--back { fill: rgb(0 162 191 / .35); animation-duration: 9s; animation-direction: reverse; }
@keyframes nmf-wave { to { transform: translateX(120px); } }
.leak-tank__marks path { stroke: rgb(255 255 255 / .35); stroke-width: 2; stroke-linecap: round; }
.leak-tank__crack { fill: none; stroke: #FFB29E; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.leak-tank__drop { fill: var(--c-accent); animation: nmf-drip 1.8s cubic-bezier(.55, 0, 1, .45) infinite; }
.leak-tank__drop--2 { animation-delay: .9s; }
@keyframes nmf-drip { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 80% { transform: translateY(30px) scale(1); opacity: 1; } 100% { transform: translateY(34px) scale(1.4, .4); opacity: 0; } }
.leak-tank__puddle { fill: rgb(0 162 191 / .35); transform-origin: 96px 286px; animation: nmf-puddle 1.8s ease-out infinite; }
@keyframes nmf-puddle { 0%, 70% { transform: scale(.7); opacity: .5; } 100% { transform: scale(1.15); opacity: .9; } }
.leak-tank__readout { position: absolute; left: 22%; top: 16%; display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: .1em; color: var(--c-white); pointer-events: none; }
.leak-tank__num { font: 800 clamp(2.6rem, 2rem + 2.4vw, 3.6rem)/1 var(--ff-display); letter-spacing: var(--ls-tight); transition: color var(--t-base); }
.leak-tank__unit { font: 700 1.4rem/1 var(--ff-display); opacity: .8; }
.leak-tank__readout small { grid-column: 1 / -1; max-width: 12rem; margin-top: .4rem; font-size: var(--fs-xs); line-height: 1.35; color: var(--c-on-dark); }
.leak-tank.is-low .leak-tank__num { color: var(--c-cta-on-dark); }
.leak-tank.is-static .leak-tank__wave, .leak-tank.is-static .leak-tank__drop, .leak-tank.is-static .leak-tank__puddle { animation: none; }
@media (max-width: 61.99em) { .leak-tank { width: min(100%, 17rem); } }

/* 32.2 Listado */
.blog-featured { margin-bottom: var(--sp-6); }
.blog-grid { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40em) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-card { height: 100%; }
.post-card__link { display: flex; flex-direction: column; height: 100%; border-radius: var(--r-lg); background: var(--c-white); border: 1px solid var(--c-line); overflow: hidden; color: inherit; text-decoration: none; box-shadow: var(--sh-1); transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base), border-color var(--t-base); }
.post-card__link:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: transparent; }
.post-card__media { position: relative; aspect-ratio: 16 / 9; background: var(--c-surface); overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.post-card__link:hover .post-card__media img { transform: scale(1.04); }
.post-card__cat { position: absolute; left: var(--sp-3); top: var(--sp-3); display: inline-flex; align-items: center; gap: .35em; padding: .4rem .7rem; border-radius: var(--r-pill); background: var(--c-white); color: var(--c-primary); font: 700 var(--fs-xs)/1 var(--ff-display); box-shadow: var(--sh-1); }
.post-card__cat svg { width: .95rem; height: .95rem; }
.post-card--casa .post-card__cat { color: var(--c-cta); }
.post-card__body { display: grid; gap: var(--sp-3); align-content: start; flex: 1; padding: var(--sp-5); }
.post-card__meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: var(--fs-xs); color: var(--c-ink-soft); }
.post-card__meta span + span::before { content: "·"; margin-right: 1rem; opacity: .6; }
.post-card__title { font-size: var(--fs-h4); line-height: var(--lh-snug); }
.post-card__excerpt { color: var(--c-ink-soft); font-size: var(--fs-sm); margin: 0; }
.post-card__go { margin-top: auto; display: inline-flex; align-items: center; gap: .4em; font: 700 var(--fs-sm)/1 var(--ff-display); color: var(--c-primary); }
.post-card__go svg { width: 1.1rem; height: 1.1rem; transition: transform var(--t-fast) var(--ease-out); }
.post-card__link:hover .post-card__go svg { transform: translateX(4px); }
@media (min-width: 56em) {
	.post-card--featured .post-card__link { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
	.post-card--featured .post-card__media { aspect-ratio: auto; min-height: 22rem; }
	.post-card--featured .post-card__body { padding: clamp(1.75rem, 1rem + 2.5vw, 3rem); align-content: center; gap: var(--sp-4); }
	.post-card--featured .post-card__title { font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
	.post-card--featured .post-card__excerpt { font-size: var(--fs-base); }
}
.blog-promo { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: var(--sp-3); align-content: start; padding: var(--sp-6) var(--sp-5); border-radius: var(--r-lg); background: var(--c-primary); color: var(--c-white); }
.blog-promo--casa { background: var(--c-ink); }
.blog-promo::after { content: ""; position: absolute; z-index: -1; right: -3rem; bottom: -3rem; width: 11rem; height: 11rem; border-radius: 50%; border: 18px solid rgb(255 255 255 / .06); }
.blog-promo h3 { color: var(--c-white); font-size: var(--fs-h3); }
.blog-promo p { color: rgb(255 255 255 / .85); font-size: var(--fs-sm); margin: 0; }
.blog-promo__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--r-card); background: rgb(255 255 255 / .12); color: #9FE3EF; }
.blog-promo--casa .blog-promo__icon { color: #FFB29E; }
.blog-promo__icon svg { width: 1.6rem; height: 1.6rem; }
.blog-promo .btn { justify-self: start; margin-top: var(--sp-2); }
.blog-promo__price { font-size: var(--fs-xs); color: var(--c-on-dark); }
.blog-promo__price strong { color: var(--c-white); }
.blog-pagination { margin-top: var(--sp-7); }
.blog-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); list-style: none; padding: 0; margin: 0; }
.blog-pagination a, .blog-pagination span { display: grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding-inline: .6rem; border-radius: var(--r-btn); border: 1px solid var(--c-line); font: 700 var(--fs-sm)/1 var(--ff-display); color: var(--c-ink); text-decoration: none; }
.blog-pagination .current { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }
.blog-pagination a:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* 32.3 «¿Qué te está pasando?» */
.symptom-links { display: grid; gap: var(--sp-3); list-style: none; padding: 0; margin: 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40em) { .symptom-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .symptom-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.symptom-link { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--sp-4); row-gap: .35rem; align-items: center; height: 100%; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-card); background: var(--c-white); border: 1px solid var(--c-line); color: var(--c-ink); text-decoration: none; transition: border-color var(--t-fast), transform var(--t-fast) var(--ease-out), box-shadow var(--t-base); }
.symptom-link:hover { border-color: var(--c-primary); transform: translateY(-3px); box-shadow: var(--sh-2); }
.symptom-link__icon { grid-row: span 2; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: var(--r-card); background: var(--c-surface); color: var(--c-primary); }
.symptom-link--casa .symptom-link__icon { background: #FFF1EC; color: var(--c-cta); }
.symptom-link__icon svg { width: 1.5rem; height: 1.5rem; }
.symptom-link__txt { font: 700 var(--fs-base)/1.3 var(--ff-display); }
.symptom-link__type { display: inline-flex; align-items: center; gap: .35em; font: 700 var(--fs-xs)/1 var(--ff-display); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-accent-text); }
.symptom-link__type svg { width: .95rem; height: .95rem; }

/* 32.4 Entrada: barra de lectura (tubería que se llena) */
.read-progress { --p: 0; position: fixed; z-index: 1001; left: 0; right: 0; top: 0; height: 6px; background: rgb(0 89 145 / .12); pointer-events: none; }
.admin-bar .read-progress { top: 32px; }
@media (max-width: 782px) { .admin-bar .read-progress { top: 46px; } }
.read-progress__water { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p)); background: linear-gradient(90deg, var(--c-accent), var(--c-primary)); background-size: 200% 100%; animation: nmf-flow 2.4s linear infinite; }
@keyframes nmf-flow { to { background-position: -200% 0; } }
.read-progress__drop { position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--c-accent); box-shadow: 0 0 0 3px rgb(0 162 191 / .25); opacity: 0; transition: opacity var(--t-fast); }
.read-progress[style*="--p: 0."] .read-progress__drop, .read-progress.is-done .read-progress__drop { opacity: 1; }
.read-progress.is-done .read-progress__water { background: var(--c-wa); animation: none; }

/* 32.5 Entrada: cabecera */
.post-hero { background: var(--c-surface); padding-top: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); }
.post-hero__inner { display: grid; gap: var(--sp-4); padding-bottom: var(--sp-7); }
.post-hero .breadcrumbs, .post-hero .breadcrumbs a, .post-hero .breadcrumbs [aria-current] { color: var(--c-ink-soft); }
.post-hero .breadcrumbs a:hover { color: var(--c-primary); }
.post-hero__cat { justify-self: start; display: inline-flex; align-items: center; gap: .4em; padding: .45rem .8rem; border-radius: var(--r-pill); background: var(--c-white); color: var(--c-primary); font: 700 var(--fs-xs)/1 var(--ff-display); letter-spacing: .02em; text-decoration: none; box-shadow: var(--sh-1); }
.post-hero--casa .post-hero__cat { color: var(--c-cta); }
.post-hero__cat svg { width: 1rem; height: 1rem; }
.post-hero h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); text-wrap: balance; }
.post-hero .lead { color: var(--c-ink-soft); }
.post-hero__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--c-line); }
.post-hero__author { display: inline-flex; align-items: center; gap: var(--sp-3); }
.post-hero__author strong { display: block; font: 700 var(--fs-sm)/1.2 var(--ff-display); color: var(--c-ink); }
.post-hero__author small { font-size: var(--fs-xs); color: var(--c-ink-soft); }
.post-hero__avatar { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--c-white); box-shadow: var(--sh-1); }
.post-hero__avatar svg { width: 1.7rem; height: 1.7rem; }
.post-hero__facts { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: var(--fs-xs); color: var(--c-ink-soft); }
.post-hero__facts span + span::before { content: "·"; margin-right: 1rem; opacity: .6; }
.post-hero__media { margin-bottom: calc(-1 * clamp(3rem, 2rem + 4vw, 6rem)); position: relative; z-index: 1; }
.post-hero__media img { width: 100%; max-height: 32rem; aspect-ratio: 16 / 8; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--sh-3); }
body:has(.post-hero__media) .post-body { padding-top: calc(var(--sp-section) * .55 + clamp(3rem, 2rem + 4vw, 6rem)); }

/* 32.6 Entrada: índice lateral + texto */
.post-layout { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64em) { .post-layout { grid-template-columns: 16.5rem minmax(0, 46rem); justify-content: center; column-gap: clamp(2.5rem, 1rem + 3vw, 4.5rem); } }
.post-aside { display: grid; gap: var(--sp-5); align-content: start; }
@media (min-width: 64em) { .post-aside__card { order: -1; } .post-aside .toc { position: sticky; top: calc(var(--header-h) + 1.25rem); max-height: calc(100vh - var(--header-h) - 2.5rem); overflow: auto; scrollbar-width: thin; } }
.toc { padding: var(--sp-5); border-radius: var(--r-card); background: var(--c-surface-2); border: 1px solid var(--c-line); }
.toc__title { margin: 0 0 var(--sp-3); font: 800 var(--fs-xs)/1 var(--ff-display); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-accent-text); }
.toc__list { list-style: none; counter-reset: toc; padding: 0; margin: 0; display: grid; gap: .15rem; }
.toc__list li { counter-increment: toc; }
.toc__list a { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); padding: .45rem .5rem; border-radius: var(--r-sm); font-size: var(--fs-sm); line-height: 1.35; color: var(--c-ink-soft); text-decoration: none; transition: background var(--t-fast), color var(--t-fast); }
.toc__list a::before { content: counter(toc, decimal-leading-zero); font: 700 var(--fs-xs)/1.6 var(--ff-display); color: var(--c-accent); }
.toc__list a:hover { color: var(--c-primary); background: var(--c-white); }
.toc__list a.is-active { color: var(--c-primary); background: var(--c-white); font-weight: 600; box-shadow: inset 3px 0 0 var(--c-accent); }
.post-aside__card { display: grid; gap: var(--sp-2); padding: var(--sp-5); border-radius: var(--r-card); background: var(--c-ink); color: var(--c-on-dark); font-size: var(--fs-sm); }
.post-aside__card p { margin: 0; }
.post-aside__q { font: 800 var(--fs-h4)/1.25 var(--ff-display); color: var(--c-white); }
.post-aside__card .btn:first-of-type { margin-top: var(--sp-2); }
@media (max-width: 63.99em) { .post-aside__card { display: none; } }

.post-prose { font-size: var(--fs-base); line-height: 1.75; color: var(--c-ink-soft); }
.post-prose > * + * { margin-top: 1.15em; }
.post-prose h2 { margin-top: 2.2em; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: var(--lh-snug); color: var(--c-ink); scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.post-prose h3 { margin-top: 1.8em; font-size: var(--fs-h4); color: var(--c-ink); }
.post-prose h2 + *, .post-prose h3 + * { margin-top: .6em; }
.post-prose strong { color: var(--c-ink); }
.post-prose a:not(.btn):not(.link-arrow) { color: var(--c-primary); text-decoration: underline; text-decoration-color: rgb(0 162 191 / .5); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.post-prose a:not(.btn):not(.link-arrow):hover { text-decoration-color: var(--c-primary); }
.post-prose ul, .post-prose ol { padding-left: 1.3rem; display: grid; gap: .5em; }
.post-prose ul li::marker { color: var(--c-accent); }
.post-prose ol li::marker { color: var(--c-primary); font-weight: 700; }
.post-prose > p:first-child { font-size: var(--fs-lg); color: var(--c-ink); }

/* Componentes dentro del texto */
.post-quick { padding: var(--sp-5); border-radius: var(--r-card); background: var(--c-surface); border: 1px solid var(--c-line); }
.post-quick__label { display: inline-flex; align-items: center; gap: .4em; margin: 0 0 .5em; font: 800 var(--fs-xs)/1 var(--ff-display); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-accent-text); }
.post-quick p:last-child { margin-bottom: 0; }
.post-callout { position: relative; padding: var(--sp-4) var(--sp-5) var(--sp-4) calc(var(--sp-5) + 2.2rem); border-radius: var(--r-card); background: #EEF9EF; border: 1px solid #CBEBD3; color: #1F4D2E; }
.post-callout::before { content: "✓"; position: absolute; left: var(--sp-4); top: var(--sp-4); display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: #16A34A; color: var(--c-white); font: 800 .9rem/1 var(--ff-display); }
.post-callout strong { color: inherit; }
.post-callout p { margin: 0; }
.post-callout--warn { background: #FFF4EF; border-color: #FFD6C7; color: #6B2A12; }
.post-callout--warn::before { content: "!"; background: var(--c-cta); }
.post-steps { list-style: none; counter-reset: st; padding: 0 !important; display: grid; gap: var(--sp-3) !important; }
.post-steps > li { counter-increment: st; position: relative; padding: var(--sp-4) var(--sp-5) var(--sp-4) 4rem; border-radius: var(--r-card); background: var(--c-white); border: 1px solid var(--c-line); box-shadow: var(--sh-1); }
.post-steps > li::before { content: counter(st); position: absolute; left: var(--sp-4); top: var(--sp-4); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--c-primary); color: var(--c-white); font: 800 var(--fs-sm)/1 var(--ff-display); }
.post-steps > li strong { display: block; margin-bottom: .2em; font-family: var(--ff-display); }
.post-signs { list-style: none; padding: 0 !important; display: grid; gap: var(--sp-3) !important; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40em) { .post-signs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.post-signs > li { padding: var(--sp-4); border-radius: var(--r-card); background: var(--c-surface-2); border-left: 4px solid var(--c-accent); font-size: var(--fs-sm); line-height: 1.55; }
.post-signs > li strong { display: block; margin-bottom: .25em; font: 700 var(--fs-base)/1.3 var(--ff-display); }
.post-table { overflow-x: auto; border-radius: var(--r-card); border: 1px solid var(--c-line); }
.post-table table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.5; }
.post-table th { padding: .8rem 1rem; text-align: left; background: var(--c-ink); color: var(--c-white); font: 700 var(--fs-sm)/1.3 var(--ff-display); }
.post-table td { padding: .8rem 1rem; border-top: 1px solid var(--c-line); vertical-align: top; }
.post-table tr:nth-child(even) td { background: var(--c-surface-2); }
.post-table td:first-child { font-weight: 600; color: var(--c-ink); }
.post-note { font-size: var(--fs-sm); color: var(--c-ink-soft); padding-top: var(--sp-4); border-top: 1px dashed var(--c-line); }
.post-faq h3 { margin-top: 1.4em; }

/* CTA contextual dentro del texto */
.post-cta { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--sp-4); margin-block: 2em !important; border-left-color: var(--c-accent); box-shadow: var(--sh-2); background: var(--c-white); border: 1px solid var(--c-line); border-left-width: 4px; }
.post-cta--casa { border-left-color: var(--c-cta); }
.post-cta h3 { font-size: var(--fs-h4); line-height: 1.3; }
.post-cta p { margin: 0; font-size: var(--fs-sm); }
.post-cta__icon { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: var(--r-card); background: var(--c-surface); color: var(--c-primary); }
.post-cta--casa .post-cta__icon { background: #FFF1EC; color: var(--c-cta); }
.post-cta__icon svg { width: 1.5rem; height: 1.5rem; }
.post-cta .cluster { align-items: center; gap: var(--sp-3); }
@media (max-width: 40em) { .post-cta { grid-template-columns: minmax(0, 1fr); } .post-cta .btn { flex: 1 1 100%; } }

/* 32.7 Entrada: zonas cercanas */
.post-zonas__box { display: grid; gap: var(--sp-5); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-line); }
.post-zonas__box h2 { font-size: var(--fs-h3); }
.post-zonas__box p { margin: 0; color: var(--c-ink-soft); }
.post-zonas__box .eyebrow svg { width: 1rem; height: 1rem; }
.zone-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; margin: 0; }
.zone-chip--light { display: inline-flex; align-items: center; gap: .35em; background: var(--c-white); color: var(--c-ink); border: 1px solid var(--c-line); }
.zone-chip--light svg { width: 1rem; height: 1rem; color: var(--c-accent-text); }
.zone-chip--light:hover { background: var(--c-primary); color: var(--c-white); border-color: var(--c-primary); }
.zone-chip--light:hover svg { color: currentColor; }
/* 32.1b Depósito como sección de piscina */
.leak-tank__soil { stroke: none; }
.leak-tank__deck { fill: none; stroke: rgb(255 255 255 / .55); stroke-width: 6; stroke-linecap: round; }
.leak-tank__inside { fill: rgb(255 255 255 / .04); }
.leak-tank__wall { fill: none; stroke: rgb(255 255 255 / .4); stroke-width: 4; stroke-linejoin: round; }
.leak-tank__ladder path { fill: none; stroke: rgb(255 255 255 / .5); stroke-width: 3.5; stroke-linecap: round; }
.leak-tank__readout { position: static; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 .35rem; margin-top: var(--sp-3); text-align: center; }
.leak-tank__readout small { flex-basis: 100%; max-width: 17rem; margin: .4rem auto 0; }
.leak-tank__unit { font: 700 var(--fs-base)/1 var(--ff-display); opacity: .85; }

/* 33. PÁGINAS · PRECIOS Y CONTACTO (1.7.0) -------------------------------- */
.price-grid { align-items: stretch; }
.price-grid .price-card { align-content: start; }
.price-grid .price-card .link-arrow { align-self: end; }
.price-grid .price-tag__from { margin-bottom: calc(var(--sp-3) * -1); }
.price-grid__more { margin-top: var(--sp-6); text-align: center; color: var(--c-ink-soft); font-size: var(--fs-sm); }
.price-grid__more a { font-weight: 700; }
.section-head .lead { max-width: 46rem; margin-inline: auto; }
.contact-card { grid-template-rows: auto auto 1fr auto; }
.contact-card .btn { justify-self: start; }
.contact-hints .price-card { gap: var(--sp-4); }
#contacto-form { scroll-margin-top: 7rem; }

/* 34. MÓVIL · MENÚ DE ZONAS Y BARRA INFERIOR (19/10/2026) ----------------- */
/* Los botones de la barra fija viven dentro del footer: «.site-footer a» les
   pisaba el color. Texto en negro sobre el rojo y el verde. */
.site-footer a.btn { color: var(--btn-fg); }
.site-footer .mobile-bar .btn,
.site-footer .mobile-bar .btn:hover,
.site-footer .mobile-bar .btn:focus-visible,
.mobile-bar .btn { color: #000; font-weight: 800; font-size: 1rem; }
.mobile-bar .btn svg { color: currentColor; }

@media (max-width: 63.99em) {
	/* Zonas: cada ciudad con sus etiquetas Piscinas / Tuberías ocupa el ancho */
	.mega__grid--zonas .mega__col,
	.mega__grid--zonas .mega__list,
	.mega__grid--zonas-5 .mega__col,
	.mega__grid--zonas-5 .mega__list { min-width: 0; }
	.mega__grid--zonas .mega__link,
	.mega__grid--zonas-5 .mega__link { min-width: 0; overflow-wrap: anywhere; }
	.mega__pair { flex-wrap: wrap; row-gap: .3rem; }
	.mega__pair-name { flex: 1 1 8rem; min-width: 0; }
	.mega__tag { flex: none; }
}
@media (max-width: 39.99em) {
	.mega__grid--zonas,
	.mega__grid--zonas-5 { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
}