/* ==========================================================================
   satdescalcificadores.es — hoja única
   Paleta: azul de agua profunda como base, ámbar cálido para las llamadas a
   la acción. Pila del sistema: cero fuentes externas.
   Sin estilos en línea en ningún sitio: la CSP los bloquea.
   ========================================================================== */

:root {
  --mar: #0c3b57;
  --mar-2: #134e72;
  --mar-rgb: 12, 59, 87;
  --agua: #1b6f99;
  --agua-oscura: #155a7d;
  --agua-claro: #e3f0f7;
  --agua-suave: #f0f6fa;
  --sol: #f39c1f;
  --sol-oscuro: #d4831a;
  --sol-texto: #9a5b0b;
  --tinta: #16222c;
  --gris: #55636f;
  --linea: #d8e2e8;
  --fondo: #f5f8fa;
  --blanco: #ffffff;
  --ok: #1a7440;
  --ok-fondo: #e7f5ec;
  --error: #b42318;
  --error-fondo: #fdecea;
  --wa: #147a3c;
  --radio: 12px;
  --radio-s: 8px;
  --sombra: 0 4px 18px rgba(var(--mar-rgb), .09);
  --sombra-alta: 0 12px 34px rgba(var(--mar-rgb), .2);
  --marco: 1120px;
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--fondo);
  overflow-wrap: anywhere;
}
[id] { scroll-margin-top: 84px; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--agua-oscura); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--mar); }
p, ul, ol { margin: 0 0 1rem; }
ul, ol { padding-left: 1.3rem; }
li + li { margin-top: .25rem; }
strong { font-weight: 700; }
abbr[title] { text-decoration: none; }
:focus-visible { outline: 3px solid var(--sol); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 0; background: var(--sol); color: var(--tinta); padding: .5rem 1rem; z-index: 200; }
.saltar:focus { left: 8px; top: 8px; }
.centinela { position: absolute; top: 140px; left: 0; width: 1px; height: 1px; pointer-events: none; }
.pendiente { color: inherit; }

h1, h2, h3, h4 { color: var(--mar); line-height: 1.18; letter-spacing: -.01em; margin: 0 0 .7em; }
h1 { font-size: clamp(1.85rem, 4vw, 2.7rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); font-weight: 800; margin-top: 1.6em; }
h3 { font-size: 1.15rem; font-weight: 700; margin-top: 1.3em; }
h2:first-child, h3:first-child { margin-top: 0; }
.entradilla { font-size: 1.18rem; line-height: 1.55; color: var(--gris); max-width: 62ch; }

.wrap { width: min(var(--marco), 100% - 2rem); margin-inline: auto; }
.seccion { padding: clamp(2.1rem, 5vw, 3.6rem) 0; }
.seccion-estrecha { max-width: 800px; }
.seccion-gris { background: var(--agua-claro); }
.seccion-blanca { background: var(--blanco); }
.seccion-oscura { background: var(--mar); color: rgba(255, 255, 255, .9); }
.seccion-oscura h2, .seccion-oscura h3 { color: var(--blanco); }
.seccion-oscura a { color: var(--blanco); }
.seccion-oscura a:hover { color: var(--sol); }
.nota { font-size: .95rem; color: var(--gris); display: flex; gap: .5rem; align-items: flex-start; }
.nota .ic { color: var(--agua); margin-top: .2em; }
.aviso {
  border-left: 5px solid var(--sol);
  background: var(--blanco);
  padding: .9rem 1rem;
  border-radius: var(--radio-s);
  margin: 1.2rem 0;
}

/* ---------- Iconos ---------- */
.ic { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -.2em; flex: none; }
.ic-grande { width: 1.5em; height: 1.5em; }
.ic-wa { width: 1.55em; height: 1.55em; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .72rem 1.15rem; border-radius: 999px;
  font-weight: 700; text-decoration: none; line-height: 1.2;
  border: 2px solid transparent; cursor: pointer; font-family: inherit; font-size: 1rem;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-llamar { background: var(--sol); color: var(--tinta); box-shadow: 0 4px 14px rgba(243, 156, 31, .35); }
.btn-llamar:hover { background: var(--sol-oscuro); color: var(--tinta); }
.btn-secundario { background: var(--mar); color: var(--blanco); }
.btn-secundario:hover { background: var(--mar-2); color: var(--blanco); }
/* Sobre fondo oscuro (héroe, banda de CTA, secciones oscuras) la pareja es naranja y blanco:
   un secundario azul marino se funde con el fondo, y más al pasar el ratón. */
.hero .btn-secundario, .cta .btn-secundario, .seccion-oscura .btn-secundario { background: var(--blanco); color: var(--mar); }
.hero .btn-secundario:hover, .cta .btn-secundario:hover, .seccion-oscura .btn-secundario:hover { background: var(--agua-claro); color: var(--mar); }
/* Las puertas de la home son tarjetas blancas dentro del héroe: ahí vuelve el azul marino. */
.hero .puerta .btn-secundario { background: var(--mar); color: var(--blanco); }
.hero .puerta .btn-secundario:hover { background: var(--mar-2); color: var(--blanco); }
.btn-borde { background: transparent; color: var(--mar); border-color: var(--mar); }
.btn-borde:hover { background: var(--agua-claro); color: var(--mar); }
.btn-wa { background: var(--wa); color: var(--blanco); }
.btn-wa:hover { background: #106630; color: var(--blanco); }
.btn-grande { padding: .9rem 1.4rem; font-size: 1.06rem; }
.btn-num { font-variant-numeric: tabular-nums; }
.btn .btn-texto + .btn-num::before { content: ""; width: 1px; height: 1.1em; background: currentColor; opacity: .35; display: inline-block; margin-right: .5rem; vertical-align: -.2em; }
.fila-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.2rem 0; }
.tel-inline, .wa-inline { font-weight: 700; white-space: nowrap; }

/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 80; background: var(--mar); color: var(--blanco); box-shadow: 0 2px 12px rgba(var(--mar-rgb), .25); }
.cabecera-inner { display: flex; align-items: center; gap: 1rem; min-height: 68px; position: relative; }
.marca { display: flex; align-items: center; gap: .6rem; color: var(--blanco); text-decoration: none; min-width: 0; }
.marca:hover, .marca:focus-visible { color: var(--blanco); }
.marca-logo { width: 42px; height: 42px; flex: none; }
.logo-gota { fill: rgba(255, 255, 255, .04); stroke: var(--agua-claro); stroke-width: 1.9; stroke-linejoin: round; transition: fill .2s ease; }
.marca:hover .logo-gota { fill: rgba(255, 255, 255, .12); }
.logo-onda { fill: none; stroke: var(--sol); stroke-width: 2.1; stroke-linecap: round; }
.logo-onda-2 { stroke: var(--agua-claro); stroke-width: 1.5; opacity: .85; }
.marca-txt { display: flex; flex-direction: column; line-height: 1.1; }
.marca-1 { font-weight: 700; font-size: 1.1rem; letter-spacing: -.005em; }
.marca-sat { color: var(--sol); font-weight: 800; letter-spacing: .06em; }
.marca-2 { font-size: .76rem; opacity: .78; letter-spacing: .01em; }
/* Auto a los dos lados: el menú queda centrado en el hueco entre la marca y el botón. */
.nav-escritorio { margin-inline: auto; }
.nav-escritorio ul { display: flex; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.nav-escritorio li { margin: 0; }
.nav-escritorio a {
  display: inline-block; padding: .55rem .8rem; border-radius: 999px;
  color: var(--blanco); text-decoration: none; font-weight: 600; font-size: .98rem;
}
.nav-escritorio a:hover { background: rgba(255, 255, 255, .12); color: var(--blanco); }
.nav-escritorio a[aria-current="page"] { background: rgba(255, 255, 255, .16); box-shadow: inset 0 -3px 0 var(--sol); }
.cabecera-acciones { display: flex; align-items: center; gap: .5rem; }
.btn-cabecera { padding: .55rem .95rem; white-space: nowrap; }

.nav-movil { position: static; }
.nav-movil summary {
  list-style: none; cursor: pointer; width: 44px; height: 44px;
  display: none; align-items: center; justify-content: center;
  border-radius: 999px; color: var(--blanco);
}
.nav-movil summary::-webkit-details-marker { display: none; }
.nav-movil summary:hover { background: rgba(255, 255, 255, .12); }
.nav-movil .ic-menu, .nav-movil .ic-cerrar { width: 26px; height: 26px; }
.nav-movil .ic-cerrar { display: none; }
.nav-movil[open] .ic-menu { display: none; }
.nav-movil[open] .ic-cerrar { display: inline-block; }
.nav-movil-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--blanco); color: var(--tinta);
  box-shadow: var(--sombra-alta); padding: .8rem 1rem 1.2rem;
  max-height: calc(100vh - 68px); overflow-y: auto; z-index: 90;
  border-bottom-left-radius: var(--radio); border-bottom-right-radius: var(--radio);
}
.nav-movil-panel ul { list-style: none; margin: 0 0 .8rem; padding: 0; }
.nav-movil-panel li { margin: 0; }
.nav-movil-panel li a { display: block; padding: .75rem .5rem; font-weight: 600; text-decoration: none; color: var(--mar); border-bottom: 1px solid var(--linea); }
.nav-movil-panel li a:hover { color: var(--agua); }
.nav-movil-panel li a[aria-current="page"] { color: var(--agua); box-shadow: inset 4px 0 0 var(--sol); padding-left: .8rem; }
.nav-movil-contacto { display: flex; flex-wrap: wrap; gap: .6rem; }
.nav-movil-horario { display: flex; gap: .5rem; align-items: flex-start; margin: .8rem 0 0; font-size: .95rem; color: var(--gris); }
.nav-movil-horario small { display: block; font-size: .85rem; opacity: .85; }
.nav-movil-horario .ic { margin-top: .15em; flex: none; }

/* ---------- Migas ---------- */
.migas { font-size: .9rem; color: var(--gris); margin: 0 0 1rem; }
.migas ol { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.migas li { margin: 0; }
.migas li + li::before { content: "›"; margin-right: .3rem; color: var(--gris); }
.migas a { color: var(--gris); }
.hero .migas, .hero .migas a, .hero .migas li + li::before { color: rgba(255, 255, 255, .75); }

/* ---------- Hero ---------- */
.hero { background: linear-gradient(160deg, var(--mar) 0%, var(--mar-2) 70%, #1a6288 100%); color: var(--blanco); }
.hero h1 { color: var(--blanco); }
.hero .entradilla { color: rgba(255, 255, 255, .9); }
.hero a:not(.btn) { color: var(--blanco); }
.hero a:not(.btn):hover { color: var(--sol); }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 2rem; align-items: center; }
.hero-texto { min-width: 0; }
.hero-figura .figura { margin: 0; }
.hero-figura .figura-lienzo { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }
.hero-figura figcaption { color: rgba(255, 255, 255, .78); }
.hero-figura .dg-leyenda { display: none; }

/* ---------- Sellos ---------- */
.sellos { display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; list-style: none; margin: 1rem 0 0; padding: 0; font-size: .95rem; }
.sellos li { display: flex; align-items: center; gap: .45rem; margin: 0; }
.sellos .ic { color: var(--sol); }
.hero .sellos { color: rgba(255, 255, 255, .92); }

/* ---------- Dos puertas ---------- */
.puertas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 1.6rem; }
.puerta {
  background: var(--blanco); color: var(--tinta); border-radius: var(--radio);
  padding: 1.4rem 1.4rem 1.5rem; border-top: 7px solid var(--agua);
  box-shadow: var(--sombra-alta); display: flex; flex-direction: column; gap: .6rem;
}
.puerta-averia { border-top-color: var(--sol); }
.puerta h2 { font-size: 1.45rem; margin: 0; }
.puerta p { margin: 0; color: var(--gris); }
.puerta ul { margin: .3rem 0 .4rem; padding-left: 1.2rem; color: var(--tinta); }
.puerta a:not(.btn) { color: var(--agua); }
.puerta a:not(.btn):hover { color: var(--agua-oscura); }
.puerta-botones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; padding-top: .4rem; }
.puerta-etiqueta { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--agua); }
.puerta-averia .puerta-etiqueta { color: var(--sol-texto); }

/* ---------- Tarjetas ---------- */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 1rem; margin: 1.4rem 0; }
.tarjeta {
  display: flex; flex-direction: column; gap: .35rem;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 1.1rem 1.1rem 1rem; color: inherit; text-decoration: none; box-shadow: var(--sombra);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
a.tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); border-color: var(--agua); color: inherit; }
.tarjeta-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--agua-claro); color: var(--agua); display: flex; align-items: center; justify-content: center; margin-bottom: .3rem; }
.tarjeta-ic .ic { width: 24px; height: 24px; }
.tarjeta-averia .tarjeta-ic { background: #fdf1de; color: var(--sol-texto); }
.tarjeta-titulo { font-weight: 700; color: var(--mar); font-size: 1.08rem; line-height: 1.25; }
.tarjeta-texto { color: var(--gris); font-size: .95rem; }
.tarjeta-mas { margin-top: auto; padding-top: .5rem; color: var(--agua); font-weight: 700; font-size: .92rem; display: inline-flex; align-items: center; gap: .3rem; }
.tarjeta-pendiente { opacity: .8; }

/* ---------- Pasos ---------- */
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; list-style: none; padding: 0; margin: 1.4rem 0; counter-reset: paso; }
.pasos li { margin: 0; background: var(--blanco); border-radius: var(--radio); padding: 1.2rem 1.1rem 1.1rem; border: 1px solid var(--linea); position: relative; }
.pasos li::before {
  counter-increment: paso; content: counter(paso);
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; background: var(--sol); color: var(--tinta);
  font-weight: 800; margin-bottom: .6rem;
}
.pasos h3 { margin: 0 0 .3rem; font-size: 1.08rem; }
.pasos p { margin: 0; color: var(--gris); font-size: .97rem; }

/* ---------- Listas con icono ---------- */
.lista-marcada { list-style: none; padding: 0; margin: 1rem 0; }
.lista-marcada li { position: relative; padding-left: 1.75rem; margin: 0 0 .55rem; }
.lista-marcada li > .ic { position: absolute; left: 0; top: .2em; color: var(--agua); }
.lista-check .ic { color: var(--ok); }
.lista-inline { margin: .4rem 0; }
.columnas-2 { columns: 2; column-gap: 2rem; }
.columnas-2 li { break-inside: avoid; }

/* ---------- Tablas ---------- */
.envoltorio-tabla { overflow-x: auto; margin: 1.2rem 0; }
.tabla { border-collapse: collapse; width: 100%; background: var(--blanco); font-size: .97rem; }
.tabla th, .tabla td { border: 1px solid var(--linea); padding: .6rem .7rem; text-align: left; vertical-align: top; }
.tabla th { background: var(--agua-claro); color: var(--mar); }

/* ---------- Acordeones y FAQ ---------- */
.acc { border-bottom: 1px solid var(--linea); }
.acc-grupo { margin: 1rem 0 1.4rem; border-top: 1px solid var(--linea); }
.acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .8rem; padding: .85rem 0; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary h3, .acc summary span { margin: 0; flex: 1; font-size: 1.06rem; color: var(--mar); font-weight: 700; }
.acc-chevron { color: var(--agua); transition: transform .2s ease; }
.acc[open] .acc-chevron { transform: rotate(180deg); }
.acc-cuerpo { padding: .1rem 0 1rem; }
.acc-cuerpo > :last-child { margin-bottom: 0; }
.faq-lista { border-top: 1px solid var(--linea); }

/* ---------- Figuras y diagramas ---------- */
.figura { margin: 1.6rem 0; }
.figura-lienzo { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: .8rem; }
.diagrama { width: 100%; height: auto; display: block; }
figcaption { font-size: .9rem; color: var(--gris); margin-top: .5rem; }
.dg-leyenda { columns: 2; column-gap: 1.5rem; list-style: none; padding: 0; margin: .8rem 0 0; font-size: .93rem; }
.dg-leyenda li { display: flex; gap: .5rem; align-items: center; break-inside: avoid; margin: 0 0 .35rem; }
.dg-leyenda-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sol); color: var(--tinta); font-weight: 800; font-size: .8rem; flex: none; }

.dg-suelo { stroke: var(--linea); stroke-width: 3; }
.dg-tubo { stroke: var(--agua); stroke-width: 8; fill: none; stroke-linecap: round; }
.dg-tubo-bypass { stroke: #9dbccd; }
.dg-valvula-bp { fill: var(--mar-2); }
.dg-flecha { fill: var(--agua); }
.dg-txt { font-size: 14px; fill: var(--gris); font-family: var(--fuente); }
.dg-valvula { fill: var(--mar); }
.dg-pantalla { fill: #cfe6ee; }
.dg-boton { fill: var(--sol); }
.dg-botella { fill: #eaf2f6; stroke: var(--mar-2); stroke-width: 2.5; }
.dg-resina { fill: #f2c96b; }
.dg-tubo-central { stroke: var(--mar-2); stroke-width: 4; fill: none; }
.dg-difusor { stroke: var(--mar-2); stroke-width: 4; stroke-linecap: round; }
.dg-deposito { fill: #f7fafc; stroke: var(--mar-2); stroke-width: 2.5; }
.dg-tapa { fill: var(--mar-2); }
.dg-sal { fill: var(--blanco); stroke: #c3d2db; stroke-width: 2; }
.dg-agua-sal { stroke: var(--agua); stroke-width: 2; stroke-dasharray: 5 4; }
.dg-pozo { fill: var(--blanco); stroke: #9dbccd; stroke-width: 2; }
.dg-flotador { fill: var(--sol); }
.dg-tubo-fino { stroke: var(--mar-2); stroke-width: 3; fill: none; stroke-linecap: round; }
.dg-desague { stroke: var(--gris); stroke-width: 4; stroke-linecap: round; }
.dg-leader { stroke: var(--sol-oscuro); stroke-width: 1.5; fill: none; }
.dg-num { fill: var(--sol); stroke: var(--blanco); stroke-width: 2; }
.dg-num-txt { fill: var(--tinta); font-weight: 700; font-size: 13px; font-family: var(--fuente); }

/* ---------- Banda de CTA ---------- */
.cta { background: var(--mar-2); color: var(--blanco); padding: 1.8rem 0; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; }
.cta-texto { min-width: 0; flex: 1 1 320px; }
.cta-titulo { font-size: 1.25rem; font-weight: 800; margin: 0 0 .2rem; }
.cta-sub { margin: 0; color: rgba(255, 255, 255, .85); }
.cta-botones { display: flex; flex-wrap: wrap; gap: .6rem; }
.cta a:not(.btn) { color: var(--blanco); }
.cta a:not(.btn):hover { color: var(--sol); }

/* ---------- Formulario ---------- */
.formulario { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.4rem; box-shadow: var(--sombra); margin: 1.2rem 0; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-tipos { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.form-tipos legend { font-weight: 700; color: var(--mar); padding: 0; margin-bottom: .5rem; }
.form-tipos-lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.form-tipo { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--linea); border-radius: 999px; padding: .55rem .85rem; cursor: pointer; font-size: .97rem; background: var(--fondo); }
.form-tipo:has(input:checked) { background: var(--agua-claro); border-color: var(--agua); color: var(--mar); font-weight: 700; }
.form-tipo input { margin: 0; accent-color: var(--agua); }
.form-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; }
.form-campo { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.form-campo-ancho { grid-column: 1 / -1; }
.form-campo label { font-weight: 600; font-size: .95rem; }
.form-opcional { font-weight: 400; color: var(--gris); }
.form-campo input, .form-campo textarea {
  width: 100%; font: inherit; font-size: 1rem; padding: .7rem .85rem;
  border: 1px solid #b9c7d0; border-radius: var(--radio-s); background: var(--blanco); color: var(--tinta);
}
.form-campo input:focus, .form-campo textarea:focus { border-color: var(--agua); outline: 3px solid rgba(27, 111, 153, .25); outline-offset: 0; }
.form-campo textarea { resize: vertical; min-height: 120px; }
.form-consent { display: flex; gap: .6rem; align-items: flex-start; margin: 1rem 0 .5rem; font-size: .95rem; }
.form-consent input { margin: .3em 0 0; accent-color: var(--agua); flex: none; width: 18px; height: 18px; }
.form-nota { font-size: .9rem; color: var(--gris); margin: 0 0 1rem; }
.form-envio { margin: 0; }
.form-estado { margin: 1rem 0 0; padding: .8rem 1rem; border-radius: var(--radio-s); font-weight: 600; }
.form-estado--ok { background: var(--ok-fondo); color: var(--ok); }
.form-estado--error { background: var(--error-fondo); color: var(--error); }
.contacto-rejilla { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 2rem; align-items: start; }
.contacto-lateral { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.3rem; }

/* ---------- Pie ---------- */
.pie { background: var(--mar); color: rgba(255, 255, 255, .86); padding: 2.6rem 0 1.2rem; margin-top: 2rem; }
.pie a { color: var(--blanco); }
.pie a:hover { color: var(--sol); }
.pie-rejilla { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2rem; }
.pie-marca { font-weight: 800; font-size: 1.15rem; color: var(--blanco); margin: 0 0 .4rem; }
.pie-claim { font-size: .95rem; margin-bottom: .9rem; }
.pie-datos { list-style: none; padding: 0; margin: 0 0 1rem; }
.pie-datos li { display: flex; gap: .5rem; align-items: flex-start; margin: 0 0 .45rem; }
.pie-datos .ic { color: var(--sol); margin-top: .25em; }
.pie-titulo { font-weight: 700; color: var(--blanco); text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; margin: 0 0 .7rem; }
.pie-lista { list-style: none; padding: 0; margin: 0; font-size: .95rem; }
.pie-lista li { margin: 0 0 .4rem; }
.pie-tira { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .16); display: grid; gap: .5rem; font-size: .93rem; }
.pie-tira-fila { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .55rem; }
.pie-tira-titulo { font-weight: 700; color: var(--blanco); text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; margin-right: .3rem; }
.pie-sep { opacity: .45; }
.pie-redes { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pie-redes a { display: inline-block; padding: .35rem .75rem; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; text-decoration: none; font-size: .9rem; }
.pie-legal { border-top: 1px solid rgba(255, 255, 255, .18); margin-top: 2.2rem; padding-top: 1rem; font-size: .86rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.5rem; }
.pie-legal p { margin: 0; }
.pie-legal-enlaces a { margin-right: 1rem; }

/* ---------- Barra fija y WhatsApp ---------- */
.barra-fija {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: none; grid-template-columns: 1fr 1fr;
  box-shadow: 0 -4px 18px rgba(var(--mar-rgb), .25);
  transition: transform .25s ease;
}
.barra-oculta { transform: translateY(110%); }
.barra-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem .6rem; min-height: 58px; font-weight: 700; text-decoration: none; font-size: 1.02rem; }
.barra-llamar { background: var(--sol); color: var(--tinta); }
.barra-llamar:hover { background: var(--sol-oscuro); color: var(--tinta); }
/* La barra pasa por encima de la banda final y del pie, que son oscuros: naranja y blanco. */
.barra-form { background: var(--blanco); color: var(--mar); border-top: 1px solid var(--linea); }
.barra-form:hover { background: var(--agua-claro); color: var(--mar); }
.wa-wrap { position: fixed; right: 16px; bottom: 22px; z-index: 71; display: flex; align-items: center; gap: .5rem; }
.wa-flotante { width: 56px; height: 56px; border-radius: 50%; background: var(--wa); color: var(--blanco); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); border: 3px solid var(--blanco); text-decoration: none; transition: transform .15s ease, background-color .15s ease; }
.wa-flotante:hover, .wa-flotante:focus-visible { background: #106630; color: var(--blanco); transform: scale(1.06); }
.wa-globo { background: var(--blanco); color: var(--tinta); padding: .45rem .8rem; border-radius: 999px; box-shadow: var(--sombra-alta); font-size: .88rem; font-weight: 600; white-space: nowrap; }
.wa-globo-oculto { display: none; }

/* ---------- Legales ---------- */
.pag-legal main { font-size: 1rem; }
.pag-legal h2 { font-size: 1.25rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .nav-escritorio { display: none; }
  .nav-movil summary { display: flex; }
  .hero-inner { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  body { padding-bottom: 64px; }
  .barra-fija { display: grid; }
  .wa-wrap { bottom: 74px; }
  .pie-rejilla { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
  .contacto-rejilla { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body { font-size: 1rem; }
  .puertas { grid-template-columns: 1fr; }
  .pasos { grid-template-columns: 1fr; }
  .btn-cabecera .btn-num { display: none; }
  .cabecera-inner { min-height: 60px; }
  .marca-logo { width: 36px; height: 36px; }
  .marca-1 { font-size: 1rem; }
  .marca-2 { font-size: .72rem; }
  .columnas-2 { columns: 1; }
  .dg-leyenda { columns: 1; }
  .cta-inner { flex-direction: column; align-items: stretch; }
  .cta-texto { flex: 0 0 auto; }
  .figura-lienzo { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .diagrama-ciclo, .diagrama-mezcla, .diagrama-duplex, .diagrama-dureza, .diagrama-combo { min-width: 620px; }
  .diagrama-botella, .diagrama-decision { min-width: 560px; }
  .figura-lienzo:has(.diagrama-ciclo, .diagrama-mezcla, .diagrama-duplex, .diagrama-dureza, .diagrama-combo, .diagrama-botella, .diagrama-decision)::after { content: 'desliza para ver el diagrama entero'; display: block; font-size: .78rem; color: var(--gris); padding-top: .3rem; }
  /* Las tablas de texto se apilan por filas; las compactas (dos columnas cortas) se quedan como tabla. */
  .tabla:not(.tabla-compacta) thead { display: none; }
  .tabla:not(.tabla-compacta), .tabla:not(.tabla-compacta) tbody, .tabla:not(.tabla-compacta) tr, .tabla:not(.tabla-compacta) td { display: block; width: 100%; }
  .tabla:not(.tabla-compacta) tr { border: 1px solid var(--linea); border-radius: var(--radio); margin: 0 0 .8rem; overflow: hidden; }
  .tabla:not(.tabla-compacta) td { border: 0; border-top: 1px solid var(--linea); padding: .5rem .8rem; }
  .tabla:not(.tabla-compacta) td:first-child { border-top: 0; background: var(--agua-claro); color: var(--mar); font-weight: 700; }
  .cta-botones .btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 620px) {
  .form-rejilla { grid-template-columns: 1fr; }
  .form-tipos-lista { grid-template-columns: 1fr; }
  .pie-rejilla { grid-template-columns: 1fr; }
  .pie-legal { flex-direction: column; }
}
@media (max-width: 420px) {
  .btn-cabecera .btn-texto { display: none; }
  .btn-cabecera { padding: .55rem .7rem; }
  .fila-cta .btn { flex: 1 1 100%; justify-content: center; }
  .puerta-botones .btn { flex: 1 1 100%; justify-content: center; }
  .wa-globo { display: none; }
}
@media (min-width: 1001px) {
  html { scrollbar-gutter: stable; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}
@media print {
  .cabecera, .pie, .barra-fija, .wa-wrap, .cta { display: none; }
}

/* ---------- Diagramas: ciclo, dureza, combo ---------- */
.hero-interior .entradilla { color: rgba(255, 255, 255, .9); }
.dg-leyenda-fila { columns: 1; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.dg-caja { fill: var(--blanco); stroke: var(--linea); stroke-width: 2; }
.dg-caja-servicio { fill: var(--agua-suave); stroke: var(--agua); }
.dg-txt-caja { fill: var(--mar); font-weight: 700; font-size: 14px; }
.dg-flecha-fina { fill: none; stroke: var(--agua); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dg-vuelta { fill: none; stroke: var(--gris); stroke-width: 1.5; stroke-dasharray: 5 4; }
.dg-mini-botella { fill: #eaf2f6; stroke: var(--mar-2); stroke-width: 2; }
.dg-mini-deposito { fill: var(--blanco); stroke: var(--mar-2); stroke-width: 2; }
.dg-burbuja { fill: var(--agua); }
.dg-dz { stroke: var(--blanco); stroke-width: 2; }
.dg-dz-1 { fill: #cfe8f3; }
.dg-dz-2 { fill: #a9d3e6; }
.dg-dz-3 { fill: #f6d59a; }
.dg-dz-4 { fill: var(--sol); }
.dg-dz-5 { fill: var(--sol-oscuro); }
.dg-txt-dz { fill: var(--tinta); font-weight: 700; font-size: 13px; }
.dg-txt-menor { font-size: 12px; }
.dg-tick { stroke: var(--gris); stroke-width: 1.5; }
.dg-umbral { stroke: var(--sol-oscuro); stroke-width: 2; }
.dg-casa { fill: var(--agua-suave); stroke: var(--linea); stroke-width: 2; }
.dg-casa-tejado { fill: none; stroke: var(--mar-2); stroke-width: 3; stroke-linecap: round; }
.dg-tubo-blanda { stroke: #6fb1d1; }
.dg-mueble { fill: #e8dcc8; stroke: #c9b89b; stroke-width: 2; }
.dg-encimera { stroke: #8a7a5c; stroke-width: 5; stroke-linecap: round; }
.dg-osmosis { fill: var(--blanco); stroke: var(--mar-2); stroke-width: 2; }
.dg-tanque { fill: #eaf2f6; stroke: var(--mar-2); stroke-width: 2; }
.dg-tubo-osmosis { stroke: var(--agua); }
.dg-grifo { fill: none; stroke: var(--mar); stroke-width: 4; stroke-linecap: round; }
.dg-gota { fill: var(--agua); }

/* ---------- Diagramas: sal, fugas, etiqueta ---------- */
.dg-costra { fill: #f3f6f8; stroke: #9aa9b3; stroke-width: 2.5; }
.dg-hueco { fill: var(--blanco); }
.dg-agua-sola { fill: #cfe6f2; }
.dg-grieta { fill: none; stroke: var(--error); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.dg-lcd { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 22px; fill: var(--mar); letter-spacing: 2px; }
.dg-boton-gris { fill: #9aa9b3; }
.dg-pegatina { fill: #fffdf5; stroke: #c9c2a8; stroke-width: 1.5; }
.dg-pegatina-txt { stroke: #8a8470; stroke-width: 3; stroke-linecap: round; }
.dg-pegatina-barras { stroke: var(--tinta); stroke-width: 6; }

/* ---------- Diagramas: fase destacada, dúplex y líneas con mezcla ---------- */
.dg-caja-alerta { fill: #fff6e6; stroke: var(--sol-oscuro); stroke-width: 2.5; }
.dg-alerta { fill: var(--sol); }
.dg-tubo-mezcla { fill: none; stroke: var(--sol-oscuro); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 9 7; }
.dg-tubo-cero { fill: none; stroke: var(--agua); stroke-width: 5; stroke-linecap: round; }
.dg-botella-regenera { fill: #fff6e6; stroke: var(--sol-oscuro); stroke-width: 2; }
.dg-etiqueta-caja { fill: var(--agua-claro); stroke: var(--agua); stroke-width: 1.5; }
.dg-etiqueta-caja-sol { fill: #fff6e6; stroke: var(--sol-oscuro); stroke-width: 1.5; }
.dg-grano { fill: #e0ac3f; }
.dg-grava { fill: #eee4d2; }
.dg-piedra { fill: #c9b692; }
.dg-txt-cambia { fill: var(--sol-texto); font-weight: 700; }
.dg-txt-queda { fill: var(--agua); }
.dg-caja-pregunta { fill: var(--blanco); stroke: var(--mar-2); stroke-width: 2; }
/* Guía en PDF: tarjeta con título, de qué trata y la ficha del fichero. */
.guia { display: flex; align-items: flex-start; gap: .9rem; max-width: 40rem; padding: 1rem 1.15rem; border: 1px solid var(--linea); border-top: 3px solid var(--sol); border-radius: var(--radio); background: var(--blanco); color: var(--tinta); text-decoration: none; box-shadow: var(--sombra); }
.guia:hover { border-color: var(--agua); border-top-color: var(--sol); }
.guia:hover strong { color: var(--agua); text-decoration: underline; }
.guia-icono { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 10px; background: var(--agua-claro); color: var(--mar); }
.guia-texto { display: grid; gap: .2rem; }
.guia-texto strong { color: var(--mar); font-size: 1.05rem; }
.guia-texto span { font-size: .95rem; }
.guia-texto small { color: var(--gris); font-size: .82rem; }
.descargas { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1rem 0 0; }
.pie-datos small { display: block; opacity: .7; font-size: .8rem; }

/* ---------- Resumen «En 30 segundos» de las páginas de avería ---------- */
.resumen { background: var(--blanco); border: 1px solid var(--linea); border-left: 5px solid var(--sol); border-radius: var(--radio); padding: 1rem 1.15rem; margin: 0 0 1.6rem; box-shadow: var(--sombra); }
.resumen-titulo { display: flex; gap: .45rem; align-items: center; font-weight: 800; color: var(--mar); margin: 0 0 .55rem; }
.resumen-titulo .ic { color: var(--sol-texto); }
.resumen-lista { margin: 0; display: grid; gap: .5rem; }
.resumen-lista div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .7rem; }
.resumen-lista dt { font-weight: 700; color: var(--mar); }
.resumen-lista dd { margin: 0; }
@media (max-width: 620px) {
  .resumen-lista div { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
}