/* Tu Casa Respira · estilos principales (mobile-first, sin dependencias) */

@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/nunito.woff2") format("woff2"); }

:root {
  --tinta: #14323f;
  --tinta-suave: #4f6a75;
  --azul: #1d6a96;
  --azul-oscuro: #15527a;
  --azul-claro: #e8f2f8;
  --agua: #2a9d8f;
  --agua-texto: #1c7368;
  --espuma: #e6f4f1;
  --arena: #f6f1e7;
  --arena-borde: #e8dcc4;
  --alerta: #a35a12;
  --alerta-fondo: #fbefe0;
  --blanco: #fff;
  --fondo: #fbfdfd;
  --linea: #d9e6eb;

  --fuente: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radio: 18px;
  --radio-s: 12px;
  --sombra: 0 1px 2px rgb(20 50 63 / .05), 0 8px 24px rgb(20 50 63 / .07);
  --sombra-hover: 0 2px 4px rgb(20 50 63 / .06), 0 14px 32px rgb(20 50 63 / .12);
  --ancho: 1180px;
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--fuente); font-size: 1.0625rem; line-height: 1.65; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.01em; }
h1, h2 { text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.2rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.25rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
a { color: var(--azul); text-underline-offset: .18em; }
a:hover { color: var(--azul-oscuro); }
:focus-visible { outline: 3px solid var(--agua); outline-offset: 3px; border-radius: 4px; }
ul, ol { padding: 0; margin: 0; list-style: none; }

.icono { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.22em; }

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); }
.contenedor--estrecho { max-width: 820px; }
@media (min-width: 700px) { :root { --gutter: 28px; } }

.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--tinta); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.saltar:focus { top: 12px; color: #fff; }

.aviso-pruebas { background: var(--tinta); color: #dbe9ee; font-size: .8rem; text-align: center; padding: 6px var(--gutter); }

/* ---------- Botones y etiquetas ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .7em 1.35em; border-radius: 999px; background: var(--azul); color: #fff; font-weight: 800; text-decoration: none; border: 2px solid var(--azul); transition: background .2s, border-color .2s, transform .2s; }
.boton:hover { background: var(--azul-oscuro); border-color: var(--azul-oscuro); color: #fff; transform: translateY(-1px); }
.boton--secundario { background: var(--blanco); color: var(--azul); border-color: #b9d3e2; }
.boton--secundario:hover { background: var(--azul-claro); color: var(--azul-oscuro); border-color: var(--azul); }
span.boton { opacity: .6; }

.antetitulo { display: inline-flex; align-items: center; gap: .45em; margin: 0 0 .7em; color: var(--agua-texto); font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.antetitulo--claro { color: #8fd8cc; }

.etiqueta { display: inline-flex; align-items: center; gap: .4em; margin: 0; padding: .3em .75em; border-radius: 999px; font-size: .82rem; font-weight: 700; }
.etiqueta--alerta { background: var(--alerta-fondo); color: var(--alerta); }
.etiqueta--pendiente { background: var(--azul-claro); color: var(--azul-oscuro); margin-bottom: 1em; }

.enlace-flecha { display: inline-flex; align-items: center; gap: .45em; font-weight: 800; text-decoration: none; }
.enlace-flecha .icono { transition: transform .2s; }
a.enlace-flecha:hover .icono { transform: translateX(3px); }
.enlace-flecha--claro { color: #a9e4da; }
.enlace-flecha--claro:hover { color: #fff; }
span.enlace-flecha { color: var(--tinta-suave); }

/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 50; background: rgb(255 255 255 / .94); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--linea); }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.marca { display: inline-flex; align-items: center; gap: 10px; color: var(--tinta); text-decoration: none; }
.marca:hover { color: var(--tinta); }
.marca__simbolo { width: 40px; height: 40px; flex: none; }
.marca__nombre { font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.marca__nombre strong { font-weight: 800; color: var(--agua-texto); }
.marca__logo { display: block; width: auto; height: 46px; }
@media (min-width: 960px) { .marca__logo { height: 54px; } }
.marca--clara, .marca--clara:hover { color: #fff; }
.marca--clara .marca__logo { height: 60px; }
.marca--clara .marca__nombre strong { color: #8fd8cc; }

.menu-boton { display: none; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--linea); border-radius: 999px; background: var(--blanco); color: var(--tinta); font: inherit; font-weight: 700; cursor: pointer; }
.menu-boton__cerrar { display: none; }
.js .menu-boton { display: inline-flex; }
.menu-boton[aria-expanded="true"] .menu-boton__abrir { display: none; }
.menu-boton[aria-expanded="true"] .menu-boton__cerrar { display: inline; }

.menu ul { display: flex; flex-direction: column; }
.menu a { display: block; padding: 14px 4px; color: var(--tinta); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--linea); }
.menu a:hover, .menu a[aria-current="page"] { color: var(--azul); }
/* Sin JavaScript el menú se ve siempre debajo de la marca. */
html:not(.js) .cabecera__fila { flex-wrap: wrap; }
html:not(.js) .menu { width: 100%; }
/* Móvil: menú a la izquierda y logotipo centrado (dos columnas iguales a los lados). */
@media (max-width: 959.98px) {
  .cabecera__fila { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; }
  .menu-boton { grid-column: 1; grid-row: 1; justify-self: start; }
  .cabecera__fila .marca { grid-column: 2; grid-row: 1; }
  html:not(.js) .menu { grid-column: 1 / -1; }
}
/* Solo las tres rayas: la palabra «Menú» queda para lectores de pantalla. */
.menu-boton { width: 46px; height: 46px; padding: 0; justify-content: center; }
.menu-boton__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.js .menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--blanco); border-bottom: 1px solid var(--linea); box-shadow: 0 16px 30px rgb(20 50 63 / .1); padding: 0 var(--gutter) 12px; display: none; }
.js .menu.abierto { display: block; }

@media (min-width: 960px) {
  .js .menu-boton { display: none; }
  .js .menu, html:not(.js) .menu { position: static; display: block; width: auto; padding: 0; background: none; border: 0; box-shadow: none; }
  html:not(.js) .cabecera__fila { flex-wrap: nowrap; }
  .menu ul { flex-direction: row; gap: 4px; }
  .menu a { padding: 8px 14px; border: 0; border-radius: 999px; font-size: .97rem; }
  .menu a:hover { background: var(--azul-claro); }
  .menu a[aria-current="page"] { background: var(--azul-claro); }
}

/* ---------- Secciones ---------- */
.seccion { padding-block: clamp(56px, 8vw, 96px); }
.seccion--arena { background: var(--arena); }
.seccion--azul { background: var(--azul-claro); }
.seccion--espuma { background: var(--espuma); }
.seccion--tinta { background: var(--tinta); color: #dbe9ee; }
.seccion--tinta h2, .seccion--tinta h3 { color: #fff; }
.seccion__cabecera { max-width: 720px; margin-bottom: clamp(28px, 4vw, 44px); }
.seccion__cabecera > p:last-child { color: var(--tinta-suave); font-size: 1.08rem; margin: 0; }
.seccion__cabecera--centro { text-align: center; margin-inline: auto; }
.seccion__pie { margin: 28px 0 0; }
.titulo-bloque { font-size: 1.35rem; }

/* ---------- Hero ---------- */
/* Banner: imagen vertical en móvil y tableta, horizontal desde 900 px; el texto va sobre la zona despejada de la foto. */
.hero { position: relative; overflow: hidden; padding-block: clamp(32px, 6vw, 72px) 88vw; background: #dceff8; }
.hero__fondo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right bottom; }
.hero > .contenedor { position: relative; }
.hero__rejilla { display: grid; gap: 28px; align-items: center; }
.hero__texto { max-width: 600px; }
@media (min-width: 640px) { .hero { padding-bottom: 72vw; } }
@media (min-width: 900px) { .hero { display: flex; align-items: center; min-height: clamp(520px, 50vw, 720px); padding-block: 56px; } .hero > .contenedor { width: 100%; } .hero__texto { max-width: 56%; } }
.hero h1 { max-width: 15ch; }
.hero__entradilla { font-size: clamp(1.08rem, 1rem + .4vw, 1.25rem); color: var(--tinta-suave); max-width: 38em; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 22px; }
.hero__garantias { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .95rem; font-weight: 700; color: var(--tinta-suave); }
.hero__garantias li { display: inline-flex; align-items: center; gap: .45em; }
.hero__garantias .icono { color: var(--agua); stroke-width: 2.4; }

/* ---------- Problemas ---------- */
.problemas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.problema { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-content: start; padding: 22px; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); transition: box-shadow .2s, border-color .2s, transform .2s; }
.problema:hover { box-shadow: var(--sombra-hover); border-color: #bcd6e2; transform: translateY(-2px); }
.problema__icono { grid-row: span 3; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--azul-claro); color: var(--azul); }
.problema__icono .icono { width: 28px; height: 28px; }
.problema--aviso .problema__icono { background: var(--alerta-fondo); color: var(--alerta); }
.problema__titulo { margin: 2px 0 6px; font-size: 1.12rem; }
.problema__enlace { color: var(--tinta); text-decoration: none; }
a.problema__enlace::after { content: ""; position: absolute; inset: 0; border-radius: var(--radio); }
a.problema__enlace:hover { color: var(--azul); }
.problema p { margin: 0; color: var(--tinta-suave); font-size: .98rem; }
.problema .etiqueta { margin-top: 12px; justify-self: start; }

/* ---------- Origen de la humedad ---------- */
.origenes { display: grid; gap: 16px; }
@media (min-width: 860px) { .origenes { grid-template-columns: repeat(3, 1fr); } }
.origen { display: flex; flex-direction: column; padding: 26px; background: var(--blanco); border-radius: var(--radio); border-top: 5px solid var(--agua); box-shadow: var(--sombra); }
.origen--no { border-top-color: var(--alerta); }
.origen__icono { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 14px; background: var(--espuma); color: var(--agua-texto); }
.origen--no .origen__icono { background: var(--alerta-fondo); color: var(--alerta); }
.origen__icono .icono { width: 26px; height: 26px; }
.origen p { color: var(--tinta-suave); font-size: .98rem; }
.origen__veredicto { display: flex; align-items: center; gap: .5em; margin: auto 0 0; padding-top: 14px; border-top: 1px dashed var(--linea); font-weight: 800; color: var(--agua-texto) !important; }
.origen--no .origen__veredicto { color: var(--alerta) !important; }

/* ---------- Medidor ---------- */
.medidor { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .medidor { grid-template-columns: .9fr 1.1fr; gap: 56px; } }
.medidor__texto p { color: var(--tinta-suave); }
.medidor__nota { display: flex; gap: .6em; padding: 14px 16px; background: var(--azul-claro); border-radius: var(--radio-s); font-size: .95rem; color: var(--tinta) !important; }
.medidor__nota .icono { color: var(--azul); margin-top: .15em; }
.medidor__panel { padding: clamp(20px, 3vw, 32px); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }
.medidor__etiqueta { display: block; font-weight: 800; font-size: 1.05rem; margin-bottom: 10px; }
.medidor__etiqueta output { color: var(--azul); font-size: 1.5rem; margin-left: .2em; }
.js .medidor__control:not([hidden]) { display: block; }
.medidor__control { width: 100%; height: 36px; margin: 0 0 18px; accent-color: var(--azul); cursor: pointer; }
html:not(.js) .medidor__etiqueta output { display: none; }
.medidor__rangos { display: grid; gap: 8px; }
.medidor__rangos li { display: grid; gap: 2px; padding: 12px 14px 12px 18px; border-radius: var(--radio-s); background: var(--fondo); border: 1px solid var(--linea); border-left-width: 5px; transition: background .2s, border-color .2s, box-shadow .2s; }
.medidor__rangos li:nth-child(1) { border-left-color: #e3c08f; }
.medidor__rangos li:nth-child(2) { border-left-color: var(--agua); }
.medidor__rangos li:nth-child(3) { border-left-color: #5d9cc3; }
.medidor__rangos li:nth-child(4) { border-left-color: var(--azul-oscuro); }
.medidor__rangos span { color: var(--tinta-suave); font-size: .95rem; }
.medidor__rangos li.activo { background: var(--espuma); border-color: var(--agua); box-shadow: 0 0 0 1px var(--agua); }
.medidor__rangos li.activo span { color: var(--tinta); }

/* ---------- Comparativas ---------- */
.comparativas { display: grid; gap: 12px; }
@media (min-width: 860px) { .comparativas { grid-template-columns: repeat(2, 1fr); } }
.comparativa { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 20px 22px; background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); transition: box-shadow .2s, transform .2s; }
.comparativa:hover { box-shadow: var(--sombra-hover); transform: translateY(-2px); }
.comparativa__icono { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, var(--azul-claro), var(--espuma)); color: var(--azul); }
.comparativa__icono .icono { width: 28px; height: 28px; }
.comparativa__titulo { margin: 0 0 4px; font-size: 1.1rem; }
.comparativa__enlace { color: var(--tinta); text-decoration: none; }
a.comparativa__enlace::after { content: ""; position: absolute; inset: 0; border-radius: var(--radio); }
a.comparativa__enlace:hover { color: var(--azul); }
.comparativa p { margin: 0; font-size: .95rem; color: var(--tinta-suave); }
.comparativa p strong { color: var(--tinta); }
.comparativa__flecha { color: var(--azul); transition: transform .2s; }
.comparativa:hover .comparativa__flecha { transform: translateX(3px); }
/* (la última comparativa ya no ocupa todo el ancho: ver «Orden de las rejillas») */

/* ---------- Tipos de aparato ---------- */
.tipos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.tipo { padding: 22px 20px; border-radius: var(--radio); background: linear-gradient(180deg, var(--blanco), #f4f9fb); border: 1px solid var(--linea); }
.tipo__icono { display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 12px; border-radius: 14px; background: var(--espuma); color: var(--agua-texto); }
.tipo__icono .icono { width: 26px; height: 26px; }
.tipo h3 { font-size: 1.05rem; margin-bottom: .35em; }
.tipo p { margin: 0; font-size: .94rem; color: var(--tinta-suave); }

/* ---------- Guías y láminas ---------- */
.guias { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.guia { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); transition: box-shadow .2s, transform .2s; }
.guia:hover { box-shadow: var(--sombra-hover); transform: translateY(-3px); }
.guia__cuerpo { padding: 20px 22px 24px; }
.guia__categoria { margin: 0 0 6px; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--agua-texto); }
.guia__titulo { font-size: 1.15rem; margin-bottom: .45em; }
.guia__enlace { color: var(--tinta); text-decoration: none; }
a.guia__enlace::after { content: ""; position: absolute; inset: 0; }
a.guia__enlace:hover { color: var(--azul); }
.guia p:last-child { margin: 0; color: var(--tinta-suave); font-size: .96rem; }

.lamina { position: relative; display: grid; place-items: center; width: 100%; overflow: hidden; }
.lamina::before, .lamina::after { content: ""; position: absolute; border-radius: 50%; }
.lamina::before { width: 70%; aspect-ratio: 1; right: -18%; top: -30%; background: rgb(255 255 255 / .35); }
.lamina::after { width: 45%; aspect-ratio: 1; left: -10%; bottom: -25%; background: rgb(255 255 255 / .25); }
.lamina--r16-10 { aspect-ratio: 16 / 10; }
.lamina--r21-9 { aspect-ratio: 21 / 9; }
.lamina--r1-1 { aspect-ratio: 1; }
.sprite { position: absolute; }
.lamina--azul { background: linear-gradient(135deg, #d6e9f4, #eaf4f9); color: var(--azul); }
.lamina--agua { background: linear-gradient(135deg, #cfeae5, #e9f6f3); color: var(--agua-texto); }
.lamina--arena { background: linear-gradient(135deg, #efe4cf, #f8f3ea); color: #8a6a3a; }
.lamina__icono { position: relative; z-index: 1; width: 64px; height: 64px; stroke-width: 1.4; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Metodología ---------- */
.metodo { display: grid; gap: 32px; }
@media (min-width: 900px) { .metodo { grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; } .metodo__intro { position: sticky; top: 110px; } }
.metodo__intro p { color: #b9cfd7; font-size: 1.08rem; }
.metodo__pasos { display: grid; gap: 14px; }
@media (min-width: 640px) and (max-width: 899px), (min-width: 1100px) { .metodo__pasos { grid-template-columns: 1fr 1fr; } }
.metodo__pasos li { display: flex; gap: 14px; padding: 22px; border-radius: var(--radio); background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .1); }
.metodo__num { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--agua-texto); color: #fff; font-weight: 800; }
.metodo__pasos h3 { font-size: 1.05rem; margin-bottom: .35em; }
.metodo__pasos p { margin: 0; font-size: .95rem; color: #b9cfd7; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; }
.faq__item { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-s); }
.faq__item[open] { border-color: #bcd6e2; box-shadow: var(--sombra); }
.faq__item summary { position: relative; padding: 18px 54px 18px 20px; font-weight: 800; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; margin-top: -7px; border-right: 2.5px solid var(--azul); border-bottom: 2.5px solid var(--azul); transform: rotate(45deg); transition: transform .2s; }
.faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq__item p { margin: 0; padding: 0 20px 20px; color: var(--tinta-suave); }

/* ---------- Páginas interiores ---------- */
.cabecera-pagina { padding-block: 28px clamp(40px, 6vw, 64px); background: linear-gradient(180deg, var(--azul-claro), var(--fondo)); }
.cabecera-pagina h1 { font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.7rem); max-width: 22ch; }
.cabecera-pagina__icono { display: inline-grid; place-items: center; width: 56px; height: 56px; margin: 18px 0 14px; border-radius: 16px; background: var(--blanco); color: var(--azul); box-shadow: var(--sombra); }
.cabecera-pagina__icono .icono { width: 30px; height: 30px; }
.cabecera-pagina__entradilla { font-size: 1.12rem; color: var(--tinta-suave); max-width: 44em; }
.cabecera-pagina--404 { padding-top: clamp(48px, 8vw, 96px); }

.migas { font-size: .9rem; color: var(--tinta-suave); margin-bottom: 14px; }
.migas ol { display: flex; flex-wrap: wrap; gap: 4px; }
.migas li + li::before { content: "›"; margin-right: 6px; color: #9db3bc; }
.migas a { color: var(--tinta-suave); }

.indice { display: grid; gap: 10px; }
@media (min-width: 800px) { .indice { grid-template-columns: 1fr 1fr; } }
.indice__item { display: grid; gap: 2px; padding: 16px 18px; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-s); }
.indice__tipo { font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--agua-texto); }
.indice__enlace { font-weight: 800; color: var(--tinta); text-decoration: none; }
.indice__enlace:hover { color: var(--azul); text-decoration: underline; }
.indice__estado { font-size: .85rem; color: var(--tinta-suave); }

.enlaces-404 { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.enlaces-404 a { display: inline-flex; align-items: center; gap: .45em; padding: 10px 16px; border-radius: 999px; background: var(--blanco); border: 1px solid var(--linea); font-weight: 700; text-decoration: none; }

/* ---------- Pie ---------- */
.pie { background: #0f2833; color: #b9cfd7; padding-block: 56px 28px; font-size: .95rem; }
.pie a { color: #dbe9ee; text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie__rejilla { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.pie__marca { grid-column: 1 / -1; max-width: 420px; }
@media (min-width: 1000px) { .pie__rejilla { grid-template-columns: 1.4fr repeat(4, 1fr); } .pie__marca { grid-column: auto; } }
.pie__marca p { margin: 14px 0 0; }
.pie__eslogan { color: #8fd8cc; font-weight: 700; }
.pie__titulo { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; }
.pie__titulo a { color: #fff; }
.pie__columna li { margin-bottom: 8px; line-height: 1.4; }
.pie__afiliacion { display: flex; gap: 10px; margin: 40px 0 0; padding: 16px 18px; border-radius: var(--radio-s); background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .08); }
.pie__afiliacion .icono { color: #8fd8cc; margin-top: .15em; }
.pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgb(255 255 255 / .1); font-size: .86rem; }
.pie__legal p { margin: 0; max-width: 60ch; }
.pie__legal ul { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* =========================================================
   Fase 3 · Plantillas de contenido
   ========================================================= */

.chip { display: inline-block; padding: .25em .8em; border-radius: 999px; background: var(--azul); color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .03em; }
.chip--suave { background: var(--blanco); color: var(--azul-oscuro); border: 1px solid #c7dbe6; }

/* ---------- Cabecera de artículo ---------- */
.cabecera-articulo { padding-block: 24px clamp(32px, 5vw, 52px); background: linear-gradient(180deg, var(--azul-claro), var(--fondo)); }
.cabecera-articulo__etiquetas { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 14px; }
.cabecera-articulo h1 { font-size: clamp(1.85rem, 1.3rem + 2.4vw, 2.8rem); max-width: 24ch; }
.cabecera-articulo__entradilla { font-size: clamp(1.08rem, 1rem + .35vw, 1.22rem); color: var(--tinta-suave); max-width: 44em; }
.meta-articulo { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 18px; font-size: .92rem; color: var(--tinta-suave); font-weight: 700; }
.meta-articulo li { display: inline-flex; align-items: center; gap: .4em; }
.meta-articulo .icono { color: var(--agua-texto); }
.meta-articulo__revision { margin: 10px 0 0; font-size: .9rem; color: var(--tinta-suave); font-style: italic; }
.cabecera-articulo .etiqueta--pendiente { margin-top: 16px; }

/* ---------- Rejilla del artículo (sin índice lateral: ocupa el ancho del contenedor, como la portada) ---------- */
.articulo__rejilla { display: grid; gap: 24px; padding-bottom: clamp(48px, 7vw, 88px); }
.articulo__cuerpo { min-width: 0; }
@media (min-width: 1080px) {
  .articulo__rejilla { gap: 56px; }
  .indice-articulo { position: sticky; top: 96px; }
}
.articulo__portada { margin: 0 0 32px; border-radius: var(--radio); overflow: hidden; }
.articulo__portada img { display: block; width: 100%; height: auto; }

.indice-articulo { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-s); font-size: .95rem; }
.indice-articulo summary { padding: 14px 18px; font-weight: 800; cursor: pointer; list-style: none; position: relative; }
.indice-articulo summary::-webkit-details-marker { display: none; }
.indice-articulo summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--azul); border-bottom: 2px solid var(--azul); transform: rotate(45deg); transition: transform .2s; }
.indice-articulo details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.indice-articulo ol { padding: 0 18px 16px; counter-reset: ind; }
.indice-articulo li { counter-increment: ind; display: flex; gap: 8px; padding: 5px 0; line-height: 1.4; }
.indice-articulo li::before { content: counter(ind); flex: none; width: 22px; color: var(--agua-texto); font-weight: 800; }
.indice-articulo a { color: var(--tinta); text-decoration: none; }
.indice-articulo a:hover { color: var(--azul); text-decoration: underline; }

/* ---------- Texto largo (prosa) ---------- */
.prosa { font-size: 1.08rem; line-height: 1.75; }
.prosa > :first-child { margin-top: 0; }
.prosa h2, .titulo-seccion-articulo { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.8rem); margin: 2.2em 0 .6em; scroll-margin-top: 96px; }
.prosa h3 { font-size: 1.22rem; margin: 1.8em 0 .5em; }
.prosa p, .prosa ul, .prosa ol { margin: 0 0 1.15em; }
.prosa ul li { position: relative; padding-left: 1.5em; margin-bottom: .45em; }
.prosa ul li::before { content: ""; position: absolute; left: .3em; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--agua); }
.prosa ol:not(.pasos) { padding-left: 1.4em; list-style: decimal; }
.prosa ol:not(.pasos) li { margin-bottom: .45em; padding-left: .2em; }
.prosa a { font-weight: 700; }
.prosa img { border-radius: var(--radio-s); height: auto; }
.prosa figure { margin: 1.6em 0; }
.prosa figcaption { font-size: .9rem; color: var(--tinta-suave); margin-top: 8px; }
.prosa code { background: var(--azul-claro); padding: .1em .4em; border-radius: 6px; font-size: .9em; }

.pasos { counter-reset: paso; display: grid; gap: 12px; margin: 1.4em 0; }
.pasos li { counter-increment: paso; position: relative; padding: 16px 18px 16px 64px; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-s); }
.pasos li::before { content: counter(paso); position: absolute; left: 16px; top: 14px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--azul); color: #fff; font-weight: 800; }

/* Tablas: se desplazan dentro de su caja en móvil (la página nunca se desborda) */
.tabla-caja { overflow-x: auto; margin: 1.4em 0 .6em; border: 1px solid var(--linea); border-radius: var(--radio-s); background: var(--blanco); -webkit-overflow-scrolling: touch; }
.tabla-caja table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.45; }
.tabla-caja th, .tabla-caja td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
.tabla-caja thead th { background: var(--azul-claro); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--azul-oscuro); white-space: nowrap; }
.tabla-caja tbody tr:last-child > * { border-bottom: 0; }
.tabla-caja tbody th { font-weight: 800; }
.tabla-comparativa { min-width: 720px; }
.tabla-comparativa td { white-space: nowrap; }
.tabla-comparativa tbody th { min-width: 190px; }
.tabla-comparativa tbody th a { color: var(--tinta); }
.tabla-comparativa tbody th small { display: block; font-weight: 700; color: var(--agua-texto); font-size: .8rem; }
.tabla-nota { font-size: .86rem; color: var(--tinta-suave); margin: 0 0 1em; }
.sin-dato { color: #6c838c; font-style: italic; font-weight: 400; }

/* Notas destacadas dentro del contenido */
.nota { display: flex; gap: 12px; margin: 1.6em 0; padding: 16px 18px; border-radius: var(--radio-s); border-left: 5px solid var(--azul); background: var(--azul-claro); font-size: 1rem; line-height: 1.6; }
.nota > .icono { margin-top: .2em; color: var(--azul); }
.nota p { margin: 0; }
.nota p + p { margin-top: .6em; }
.nota--consejo { border-left-color: var(--agua); background: var(--espuma); }
.nota--aviso { border-left-color: #c98a2e; background: #fdf5e7; }
.nota--aviso > .icono { color: var(--alerta); }
.nota--profesional { border-left-color: var(--alerta); background: var(--alerta-fondo); }
.nota--ejemplo { border-left-color: #7a5cc2; background: #f1edfa; }
.nota--afiliacion { margin-top: 0; font-size: .92rem; background: var(--arena); border-left-color: var(--arena-borde); color: var(--tinta-suave); }
.nota--afiliacion > .icono { color: #8a6a3a; }

/* ---------- Fichas de producto ---------- */
.fichas { display: grid; gap: 22px; }
.fichas > h2 { margin-bottom: 0; }
.ficha { scroll-margin-top: 96px; padding: clamp(18px, 3vw, 28px); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }
.ficha__cabecera { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.ficha__num { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--tinta); color: #fff; font-weight: 800; font-size: 1.1rem; }
.ficha__etiqueta { margin: 0 0 2px; color: var(--agua-texto); font-size: .8rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.ficha__nombre { margin: 0; font-size: 1.3rem; }
.ficha__tipo { display: inline-flex; align-items: center; gap: .4em; margin: 4px 0 0; color: var(--tinta-suave); font-size: .92rem; font-weight: 700; }
.ficha__rejilla { display: grid; gap: 20px; }
@media (min-width: 640px) { .ficha__rejilla { grid-template-columns: 200px 1fr; align-items: start; } }
.ficha__media { border-radius: var(--radio-s); overflow: hidden; max-width: 170px; }
@media (min-width: 640px) { .ficha__media { max-width: none; } }
.ficha__media img { display: block; width: 100%; height: auto; }
.ficha__datos { display: grid; margin: 0; border: 1px solid var(--linea); border-radius: var(--radio-s); overflow: hidden; }
.ficha__datos > div { display: grid; grid-template-columns: minmax(120px, 45%) 1fr; gap: 12px; padding: 10px 14px; font-size: .95rem; }
.ficha__datos > div:nth-child(odd) { background: var(--fondo); }
.ficha__datos dt { color: var(--tinta-suave); font-weight: 700; }
.ficha__datos dd { margin: 0; font-weight: 800; }
.ficha__datos small { font-weight: 600; color: var(--tinta-suave); }
.ficha__fuente { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 10px 0 0; font-size: .86rem; color: var(--tinta-suave); }
.ficha__veredicto { margin-top: 18px; padding: 14px 18px; border-radius: var(--radio-s); background: var(--espuma); }
.ficha__veredicto p { margin: 0; }
.ficha__pros-contras { display: grid; gap: 16px; margin-top: 18px; }
@media (min-width: 640px) { .ficha__pros-contras { grid-template-columns: 1fr 1fr; } }
.ficha__lista h4 { margin: 0 0 8px; font-size: 1rem; }
.ficha__lista li { display: flex; gap: 8px; margin-bottom: 6px; font-size: .96rem; line-height: 1.45; }
.ficha__lista--pros .icono { color: var(--agua-texto); stroke-width: 2.4; }
.ficha__lista--contras .icono { color: var(--alerta); }
.ficha__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--linea); }
.ficha__ideal { margin: 0; flex: 1 1 280px; font-size: .97rem; }
.ficha__compra { display: grid; justify-items: center; gap: 4px; }
.ficha__afiliado { font-size: .78rem; color: var(--tinta-suave); }
.ficha__sin-enlace { margin: 0; padding: 10px 16px; border-radius: 999px; background: var(--fondo); border: 1px dashed var(--linea); color: var(--tinta-suave); font-size: .9rem; font-weight: 700; }
.boton--amazon { background: #ff9900; border-color: #ff9900; color: #111; }
.boton--amazon:hover { background: #f08804; border-color: #f08804; color: #111; }

/* ---------- FAQ dentro de artículos y firma ---------- */
.bloque-faq { margin-top: 2.6em; }
.bloque-faq h2 { scroll-margin-top: 96px; font-size: clamp(1.4rem, 1.15rem + 1vw, 1.8rem); }

.firma { display: flex; gap: 16px; margin-top: 44px; padding: 22px; border-radius: var(--radio); background: var(--azul-claro); }
.firma__icono .marca__simbolo { width: 48px; height: 48px; }
.firma p { margin: 0 0 10px; font-size: .97rem; color: var(--tinta-suave); }
.firma p.firma__nombre { margin: 0 0 4px; font-weight: 800; color: var(--tinta); }

/* ---------- Secciones y relacionados ---------- */
.relacionados h2 { margin-bottom: 26px; }
.grupo-titulo { margin: 34px 0 16px; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .07em; color: var(--agua-texto); }
.seccion h2 + .grupo-titulo { margin-top: 20px; }
.guias--compactas .guia__titulo { font-size: 1.08rem; }
.guia p.guia__estado { margin: 10px 0 0; font-size: .82rem; font-weight: 800; color: var(--azul-oscuro); }
.guia__imagen { display: block; width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; }

/* ---------- Páginas legales ---------- */
.pagina__cuerpo { padding-block: 8px clamp(48px, 7vw, 88px); }
mark.pendiente { background: #fdecc8; color: #7a4a00; padding: .05em .35em; border-radius: 4px; font-weight: 800; }

/* Aviso de cookies (solo aparece si hay Google Analytics configurado) */
.cookies { position: fixed; inset: auto 0 0 0; z-index: 50; background: var(--blanco); border-top: 3px solid var(--agua); box-shadow: 0 -8px 30px rgb(20 50 63 / .15); padding: 16px 0; }
.cookies__caja { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.cookies__texto { flex: 1 1 420px; margin: 0; font-size: .95rem; }
.cookies__texto strong { display: block; color: var(--tinta); }
.cookies__botones { display: flex; gap: 10px; flex-wrap: wrap; }
.cookies__botones .boton { min-width: 130px; }
.pie__enlace-boton { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* Formulario de contacto */
.formulario { margin: 40px 0 56px; padding: 28px; background: var(--blanco); border: 1px solid #dbe7ee; border-radius: 20px; }
.formulario h2 { margin-top: 0; }
.formulario__fila { display: grid; gap: 0 18px; }
@media (min-width: 640px) { .formulario__fila { grid-template-columns: 1fr 1fr; } }
.formulario__campo { margin-bottom: 18px; }
.formulario__campo > label { display: block; font-weight: 800; margin-bottom: 6px; color: var(--tinta); }
.formulario input[type=text], .formulario input[type=email], .formulario textarea { width: 100%; font: inherit; padding: 12px 14px; border: 2px solid #b9cdd8; border-radius: 12px; background: #fff; color: var(--tinta); }
.formulario input:focus, .formulario textarea:focus { outline: 3px solid rgb(29 106 150 / .3); border-color: var(--azul); }
.formulario [aria-invalid="true"] { border-color: #b3261e; }
.formulario__check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.formulario__check input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--azul); }
.formulario__error { color: #b3261e; font-weight: 700; font-size: .92rem; margin: 6px 0 0; }
.formulario__error--general { background: #fdecea; padding: 12px 14px; border-radius: 12px; margin: 0 0 18px; }
.formulario__ok { display: flex; gap: 12px; align-items: flex-start; background: #e3f3f0; color: #124d46; padding: 16px 18px; border-radius: 14px; }
.formulario__ok p { margin: 0; }
.formulario__ok .icono { width: 26px; height: 26px; flex: none; }
.formulario__trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formulario__rgpd { margin-top: 28px; padding-top: 20px; border-top: 1px solid #dbe7ee; font-size: .88rem; color: #45606c; }
.formulario__rgpd h3 { font-size: .95rem; margin: 0 0 10px; color: var(--tinta); }
.formulario__rgpd dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.formulario__rgpd dt { font-weight: 800; }
.formulario__rgpd dd { margin: 0; }
@media (max-width: 520px) { .formulario { padding: 20px; } .formulario__rgpd dl { grid-template-columns: 1fr; } .formulario__rgpd dd { margin-bottom: 6px; } }

/* ---------- Tarjetas compactas de producto (portada, comparativas y guías) ---------- */
.pmini-rejilla { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); margin: 0; padding: 0; list-style: none; }
.pmini { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }
.pmini__etiqueta { position: absolute; top: 12px; left: 12px; z-index: 1; margin: 0; padding: 3px 10px; border-radius: 999px; background: var(--tinta); color: #fff; font-size: .74rem; font-weight: 800; letter-spacing: .01em; }
.pmini__media { margin: 0 0 6px; border-radius: 12px; overflow: hidden; background: var(--azul-claro); }
.pmini__media img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; }
.pmini__tipo { margin: 0; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--agua-texto); }
.pmini__nombre { margin: 0; font-size: 1.08rem; line-height: 1.25; }
.pmini__datos { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.pmini__datos li { padding: 3px 9px; border-radius: 999px; background: var(--azul-claro); font-size: .82rem; font-weight: 700; color: var(--tinta); }
.pmini__ideal { margin: 4px 0 0; font-size: .92rem; color: var(--tinta-suave); line-height: 1.45; }
.pmini__acciones { display: grid; gap: 8px; margin-top: auto; padding-top: 12px; }
.pmini__boton { justify-self: center; }
.pmini__pendiente { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 12px; border: 2px dashed #f4b740; border-radius: 999px; background: #fff8e8; color: #7a5200; font-weight: 800; font-size: .9rem; text-align: center; }
.pmini__ficha { justify-self: center; font-weight: 700; font-size: .92rem; }
.pmini__afiliado { margin: 2px 0 0; text-align: center; font-size: .74rem; color: var(--tinta-suave); }

.seleccion { margin: 8px 0 28px; }
.seleccion .pmini-rejilla { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.productos-guia { margin: 36px 0; padding: 22px; border-radius: var(--radio); background: var(--azul-claro); }
.productos-guia h2 { margin-top: 0; font-size: 1.3rem; }
.productos-guia > p { color: var(--tinta-suave); }

/* ---------- Ilustraciones propias (iconos, fondos y guías de portada) ---------- */
.problema__icono, .origen__icono, .comparativa__icono { background: none; padding: 0; overflow: visible; }
.problema__icono { width: 64px; height: 64px; }
.problema--aviso .problema__icono { background: none; }
.origen__icono, .origen--no .origen__icono { width: 72px; height: 72px; background: none; }
.comparativa__icono { width: 64px; height: 64px; background: none; }
.problema__icono img, .origen__icono img, .comparativa__icono img { display: block; width: 100%; height: 100%; object-fit: contain; }

.seccion--foto { position: relative; background-color: var(--espuma); background-size: cover; background-position: center; }
.seccion--foto-origen { background-image: url("../img/fondos/origen-900.webp"); background-position: left bottom; }
.seccion--foto-comparativas { background-image: url("../img/fondos/comparativas-900.webp"); }
.seccion--foto-guias { background-image: url("../img/fondos/guias-900.webp"); }
.relacionados { background-image: url("../img/fondos/sigue-leyendo-900.webp"); background-size: cover; background-position: center; }
@media (min-width: 900px) {
  .seccion--foto-origen { background-image: url("../img/fondos/origen-1600.webp"); }
  .seccion--foto-comparativas { background-image: url("../img/fondos/comparativas-1600.webp"); }
  .seccion--foto-guias { background-image: url("../img/fondos/guias-1600.webp"); }
  .relacionados { background-image: url("../img/fondos/sigue-leyendo-1600.webp"); }
}
/* Legibilidad del texto sobre la foto: cabecera con fondo translúcido. */
.seccion--foto .seccion__cabecera, .relacionados h2 { display: block; width: fit-content; max-width: 100%; padding: 14px 20px; border-radius: var(--radio); background: rgb(255 255 255 / .82); }
.seccion--foto .seccion__pie { width: fit-content; padding: 8px 16px; border-radius: 999px; background: rgb(255 255 255 / .85); }

.guia__foto { margin: 0; }
.guia--portada .guia__imagen { aspect-ratio: 16 / 9; }

.ficha__num--img { width: 48px; height: 48px; padding: 0; border-radius: 50%; background: none; object-fit: contain; }

/* Higrómetro: tarjetas desplegables */
.medidor__rangos details summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; }
.medidor__rangos details summary::-webkit-details-marker { display: none; }
.medidor__rangos details summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--azul-claro); color: var(--azul); font-weight: 800; }
.medidor__rangos details[open] summary::after { content: "−"; }
.medidor__rangos details p { margin: 8px 0 0; color: var(--tinta-suave); font-size: .95rem; }
.medidor__rangos li.activo details p { color: var(--tinta); }

/* Botón de Amazon: compacto y del mismo tamaño en todas las tarjetas y fichas. */
.boton.boton--amazon { width: 210px; max-width: 100%; min-height: 38px; padding: .4em 1em; font-size: .9rem; white-space: nowrap; }
.boton.boton--amazon .icono { width: 16px; height: 16px; }

/* ---------- Orden de las rejillas: tarjetas del mismo tamaño y filas centradas ---------- */
/* Comparativas y guías: rejilla de 6 columnas (cada tarjeta ocupa 2). Todas las filas miden lo mismo
   y, si la última fila queda incompleta, sus tarjetas se centran en vez de dejar un hueco a la derecha. */
.comparativas, .guias { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 16px; }
@media (min-width: 640px) {
  .comparativas, .guias { grid-template-columns: repeat(4, 1fr); }
  .comparativas > *, .guias > * { grid-column: span 2; }
  .comparativas > :last-child:nth-child(odd), .guias > :last-child:nth-child(odd) { grid-column: 2 / span 2; }
}
@media (min-width: 960px) {
  .comparativas, .guias { grid-template-columns: repeat(6, 1fr); }
  .comparativas > *, .guias > *, .comparativas > :last-child:nth-child(odd), .guias > :last-child:nth-child(odd) { grid-column: span 2; }
  .comparativas > :last-child:nth-child(3n+1), .guias > :last-child:nth-child(3n+1) { grid-column: 3 / span 2; }
  .comparativas > :nth-last-child(2):nth-child(3n+1), .guias > :nth-last-child(2):nth-child(3n+1) { grid-column: 2 / span 2; }
}
.comparativa { height: 100%; }
/* Tarjetas de producto: rejilla según cuántas haya, columnas iguales y centradas, sin tarjetas sueltas. */
.pmini-rejilla { display: grid; gap: 16px; grid-template-columns: minmax(0, 340px); justify-content: center; align-items: stretch; }
@media (min-width: 560px) {
  .pmini-rejilla--n2, .pmini-rejilla--n4 { grid-template-columns: repeat(2, minmax(0, 270px)); }
  .pmini-rejilla--n3 { grid-template-columns: repeat(3, minmax(0, 250px)); gap: 12px; }
}
@media (min-width: 1000px) { .pmini-rejilla--n4 { grid-template-columns: repeat(4, minmax(0, 260px)); } }
.pmini__nombre { min-height: 3.75em; }
.pmini__ideal { min-height: 5.8em; }
.pmini__datos { min-height: 3.7em; align-content: flex-start; }
.pmini__ficha:empty { min-height: 1.4em; }
.pmini__media { aspect-ratio: 1; }
.pmini__media > * { width: 100%; height: 100%; }
.problemas { grid-auto-rows: 1fr; }

/* ---------- Transparencia: fondo propio y pasos desplegables ---------- */
.seccion--foto-metodo { background: var(--tinta) url("../img/fondos/metodo-900.webp") center / cover no-repeat; }
@media (min-width: 900px) { .seccion--foto-metodo { background-image: url("../img/fondos/metodo-1600.webp"); } }
.metodo__pasos { grid-template-columns: 1fr; gap: 12px; }
.metodo__pasos li { display: block; padding: 0; background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .14); backdrop-filter: blur(4px); transition: background .2s, border-color .2s; }
.metodo__pasos li:hover, .metodo__pasos li:has(details[open]) { background: rgb(255 255 255 / .12); border-color: rgb(143 216 204 / .55); }
.paso summary { display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; list-style: none; }
.paso summary::-webkit-details-marker { display: none; }
.paso summary::after { content: "+"; margin-left: auto; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgb(255 255 255 / .12); color: #fff; font-size: 1.2rem; font-weight: 800; transition: transform .2s, background .2s; }
.paso[open] summary::after { content: "−"; background: var(--agua-texto); }
.paso summary:focus-visible { outline: 3px solid #8fd8cc; outline-offset: 2px; border-radius: var(--radio); }
.paso__num { flex: none; width: 52px; height: 52px; object-fit: contain; }
.paso h3 { margin: 0; font-size: 1.1rem; color: #fff; }
.paso p { margin: 0; padding: 0 22px 18px 84px; font-size: .98rem; color: #d3e4ea; }
@media (max-width: 559px) { .paso p { padding-left: 18px; } }
@media (min-width: 960px) { .metodo { align-items: center; } }

/* Ficha desplegable dentro de la tarjeta (modelos sin comparativa propia): se abre encima de la tarjeta. */
.pmini__mas summary { display: block; text-align: center; cursor: pointer; list-style: none; color: var(--azul); text-decoration: underline; text-underline-offset: 3px; }
.pmini__mas summary::-webkit-details-marker { display: none; }
.pmini__cerrar, .pmini__mas[open] .pmini__abrir { display: none; }
.pmini__mas[open] .pmini__cerrar { display: inline; }
.pmini__mas[open] summary { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 12px; background: var(--blanco); border-top: 1px solid var(--linea); border-radius: 0 0 var(--radio) var(--radio); }
.pmini__mas-cuerpo { position: absolute; inset: 0 0 46px; z-index: 2; overflow-y: auto; padding: 18px; background: var(--blanco); border-radius: var(--radio) var(--radio) 0 0; text-align: left; }
.pmini__mas-titulo { margin: 0 0 10px; font-weight: 800; color: var(--tinta); line-height: 1.25; }
.pmini__mas-datos { margin: 0 0 12px; font-size: .86rem; }
.pmini__mas-datos div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--linea); }
.pmini__mas-datos dt { color: var(--tinta-suave); }
.pmini__mas-datos dd { margin: 0; font-weight: 700; text-align: right; }
.pmini__mas-datos small { font-weight: 400; color: var(--tinta-suave); }
.pmini__mas-sub { margin: 10px 0 4px; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--agua-texto); }
.pmini__mas-lista { margin: 0; padding-left: 18px; font-size: .86rem; color: var(--tinta); }
.pmini__mas-lista li { margin: 2px 0; }
.pmini__mas-lista--contras { color: var(--tinta-suave); }
.pmini__mas-fuente { margin: 12px 0 0; font-size: .78rem; color: var(--tinta-suave); }
/* En tarjetas estrechas el botón se ajusta al ancho de la tarjeta (todas iguales dentro de cada rejilla). */
.pmini .boton.boton--amazon { width: 100%; max-width: 210px; min-width: 0; padding-inline: .6em; font-size: .86rem; gap: .35em; }
.pmini-rejilla--n3 .pmini { padding: 16px 14px; }
.pmini__mas-datos div { flex-wrap: wrap; } .pmini__mas-datos dd { margin-left: auto; }

/* Guías maquetadas por partes: bloques de color, desplegables y tarjetas de caso (guía de deshumidificadores). */
.prosa .entradilla { font-size: 1.18rem; line-height: 1.7; color: var(--tinta); }
.resumen-rapido { margin: 1.6em 0; padding: 20px 22px; border-radius: var(--radio); background: var(--blanco); border: 1px solid var(--linea); box-shadow: var(--sombra); }
.prosa .resumen-rapido__titulo { margin: 0 0 .6em; font-weight: 800; color: var(--azul-oscuro); font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; }
.prosa .resumen-rapido ol { list-style: none; padding: 0; margin: 0; counter-reset: idea; display: grid; gap: 12px; }
.prosa .resumen-rapido ol li { counter-increment: idea; position: relative; padding-left: 44px; margin: 0; min-height: 30px; }
.prosa .resumen-rapido ol li::before { content: counter(idea); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--azul); color: #fff; font-weight: 800; font-size: .95rem; }

.bloque { margin: 2em 0; padding: 24px 16px 8px; border-radius: var(--radio); }
.prosa .bloque > h2:first-child { margin-top: 0; }
.bloque--si { background: var(--espuma); border-top: 5px solid var(--agua); }
.bloque--no { background: var(--alerta-fondo); border-top: 5px solid #c98a2e; }
.bloque--azul { background: var(--azul-claro); border-top: 5px solid var(--azul); }
@media (min-width: 700px) { .bloque { padding: 32px 32px 14px; } }

.prosa ul.lista-check li { padding-left: 2em; }
.prosa ul.lista-check li::before { left: 0; top: .32em; width: 1.25em; height: 1.25em; border-radius: 50%; background: var(--agua) 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='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }

.tarjetas-mini { display: grid; gap: 12px; margin: 0 0 1.2em; }
@media (min-width: 640px) { .tarjetas-mini { grid-template-columns: 1fr 1fr; } }
.tarjeta-mini { background: var(--blanco); border-radius: var(--radio-s); padding: 14px 16px; border-left: 4px solid #c98a2e; box-shadow: 0 1px 2px rgb(20 50 63 / .05); }
.prosa .tarjeta-mini p { margin: 0; font-size: 1rem; line-height: 1.55; }
.prosa .tarjeta-mini .tarjeta-mini__titulo { font-weight: 800; color: var(--alerta); margin-bottom: 4px; }

.desplegables { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0 0 1.2em; }
.desplegable { min-width: 0; } /* sin esto, una tabla ancha dentro ensancha la página en el móvil */
@media (min-width: 700px) { .desplegables--rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.desplegable { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-s); border-left: 5px solid var(--azul); transition: box-shadow .2s; }
.desplegable[open] { box-shadow: var(--sombra); }
.desplegable--agua { border-left-color: var(--agua); }
.desplegable--lila { border-left-color: #7a5cc2; }
.desplegable--arena { border-left-color: #c9a46a; }
.desplegable--suave { border-left-color: var(--linea); }
.desplegable summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 14px 54px 14px 16px; position: relative; cursor: pointer; list-style: none; }
.desplegable summary::-webkit-details-marker { display: none; }
.desplegable summary::after { content: "+"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--azul-claro); color: var(--azul); font-weight: 800; font-size: 1.15rem; }
.desplegable[open] summary::after { content: "−"; background: var(--azul); color: #fff; }
.desplegable summary:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.desplegable__titulo { font-weight: 800; font-size: 1.08rem; }
.desplegable__sub { flex-basis: 100%; font-size: .92rem; color: var(--tinta-suave); }
.desplegable__num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--azul); color: #fff; font-weight: 800; font-size: .95rem; }
.desplegable__cuerpo { padding: 0 14px 6px; border-top: 1px dashed var(--linea); padding-top: 14px; font-size: 1.02rem; }
.prosa .desplegable__cuerpo p { margin: 0 0 .8em; }

.prosa ul.casos { display: grid; gap: 12px; margin: 0 0 1.4em; }
@media (min-width: 640px) { .prosa ul.casos { grid-template-columns: 1fr 1fr; } }
.prosa ul.casos li { padding: 0; margin: 0; }
.prosa ul.casos li::before { display: none; }
.casos a, .casos li > strong { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 16px 44px 16px 18px; border-radius: var(--radio-s); background: var(--arena); border: 1px solid var(--arena-borde); color: var(--tinta); text-decoration: none; position: relative; transition: transform .2s, box-shadow .2s; }
.casos a::after { content: "→"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--azul); font-weight: 800; }
.casos a:hover { transform: translateY(-2px); box-shadow: var(--sombra-hover); }
.casos a strong { color: var(--azul-oscuro); font-size: 1.05rem; }
.casos a span { font-weight: 400; font-size: .95rem; color: var(--tinta-suave); }
.bloque--arena { background: var(--arena); border-top: 5px solid #c9a46a; }
.prosa .desplegable summary h3.desplegable__titulo { margin: 0; font-size: 1.08rem; line-height: 1.3; }
/* A todo el ancho: las rejillas de piezas pasan a tres columnas en pantallas grandes. */
@media (min-width: 1000px) {
  .tarjetas-mini { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .prosa ul.casos { grid-template-columns: repeat(3, 1fr); }
  .desplegables--ideas { grid-template-columns: 1fr 1fr; align-items: start; }
  .desplegables--rejilla { grid-template-columns: repeat(4, 1fr); }
}
/* La selección de las comparativas usa el mismo reparto por número de tarjetas (antes ganaba el auto-fill de .seleccion). */
.seleccion .pmini-rejilla { grid-template-columns: minmax(0, 340px); justify-content: center; }
@media (min-width: 640px) {
  .seleccion .pmini-rejilla--n2, .seleccion .pmini-rejilla--n4 { grid-template-columns: repeat(2, minmax(0, 300px)); }
  .seleccion .pmini-rejilla--n3 { grid-template-columns: repeat(3, minmax(0, 300px)); }
}
@media (min-width: 1000px) { .seleccion .pmini-rejilla--n4 { grid-template-columns: repeat(4, minmax(0, 280px)); } }
/* «Lo esencial»: números ilustrados (los mismos de la portada) en lugar de círculos con cifra. */
.prosa .resumen-rapido ol li { padding-left: 50px; min-height: 38px; }
.prosa .resumen-rapido ol li::before { content: ""; width: 38px; height: 38px; top: -4px; border-radius: 0; background: center / contain no-repeat; }
.prosa .resumen-rapido ol li:nth-child(1)::before { background-image: url("../img/iconos/num-1.webp"); }
.prosa .resumen-rapido ol li:nth-child(2)::before { background-image: url("../img/iconos/num-2.webp"); }
.prosa .resumen-rapido ol li:nth-child(3)::before { background-image: url("../img/iconos/num-3.webp"); }
.prosa .resumen-rapido ol li:nth-child(4)::before { background-image: url("../img/iconos/num-4.webp"); }
/* Desplegables numerados: números ilustrados (los de la portada). Hay imagen del 1 al 5; a partir del 6, círculo turquesa a juego. */
.desplegables .desplegable__num { width: 38px; height: 38px; margin: -4px 0; font-size: 1.05rem; background: radial-gradient(circle at 35% 30%, #5fd3c6, #1c9a8c 60%, #137267); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .6), 0 2px 4px rgb(20 50 63 / .25); text-shadow: 0 1px 2px rgb(0 0 0 / .35); }
.desplegables > details:nth-child(-n+5) .desplegable__num { color: transparent; text-shadow: none; box-shadow: none; background: center / contain no-repeat; }
.desplegables > details:nth-child(1) .desplegable__num { background-image: url("../img/iconos/num-1.webp"); }
.desplegables > details:nth-child(2) .desplegable__num { background-image: url("../img/iconos/num-2.webp"); }
.desplegables > details:nth-child(3) .desplegable__num { background-image: url("../img/iconos/num-3.webp"); }
.desplegables > details:nth-child(4) .desplegable__num { background-image: url("../img/iconos/num-4.webp"); }
.desplegables > details:nth-child(5) .desplegable__num { background-image: url("../img/iconos/num-5.webp"); }
.prosa .resumen-rapido ol li:nth-child(5)::before { background-image: url("../img/iconos/num-5.webp"); }
.firma__icono { flex: none; }
.firma__icono img { display: block; width: 64px; height: 64px; }
/* Pasos numerados (ol.pasos) y resúmenes: números ilustrados del 1 al 7; desde el 8, círculo turquesa a juego. */
.pasos li { padding-left: 70px; min-height: 66px; }
.pasos li::before { left: 14px; top: 12px; width: 42px; height: 42px; background: radial-gradient(circle at 35% 30%, #5fd3c6, #1c9a8c 60%, #137267); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .6), 0 2px 4px rgb(20 50 63 / .25); text-shadow: 0 1px 2px rgb(0 0 0 / .35); font-size: 1.1rem; }
.pasos li:nth-child(-n+7)::before { color: transparent; text-shadow: none; box-shadow: none; background: center / contain no-repeat; }
.pasos li:nth-child(1)::before { background-image: url("../img/iconos/num-1.webp"); }
.pasos li:nth-child(2)::before { background-image: url("../img/iconos/num-2.webp"); }
.pasos li:nth-child(3)::before { background-image: url("../img/iconos/num-3.webp"); }
.pasos li:nth-child(4)::before { background-image: url("../img/iconos/num-4.webp"); }
.pasos li:nth-child(5)::before { background-image: url("../img/iconos/num-5.webp"); }
.pasos li:nth-child(6)::before { background-image: url("../img/iconos/num-6.webp"); }
.desplegables > details:nth-child(6) .desplegable__num { color: transparent; text-shadow: none; box-shadow: none; background: url("../img/iconos/num-6.webp") center / contain no-repeat; }
.prosa .resumen-rapido ol li:nth-child(6)::before { background-image: url("../img/iconos/num-6.webp"); }
.pasos li:nth-child(7)::before { background-image: url("../img/iconos/num-7.webp"); }
.desplegables > details:nth-child(7) .desplegable__num { color: transparent; text-shadow: none; box-shadow: none; background: url("../img/iconos/num-7.webp") center / contain no-repeat; }
.prosa .resumen-rapido ol li:nth-child(7)::before { background-image: url("../img/iconos/num-7.webp"); }

/* ---------- Secciones con presentación propia (calidad del aire) ---------- */
/* Todas las tarjetas en una sola rejilla de dos columnas, centrada. */
@media (min-width: 640px) {
  .seccion--pares .guias { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin-inline: auto; }
  .seccion--pares .guias > *, .seccion--pares .guias > :last-child:nth-child(odd),
  .seccion--pares .guias > :last-child:nth-child(3n+1), .seccion--pares .guias > :nth-last-child(2):nth-child(3n+1) { grid-column: auto; }
  .seccion--pares .guias > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); }
}
.seccion--pares h2 { text-align: center; }
.guia__tipo { margin: 0; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--agua-texto); }
/* Fondo ilustrado (hoja y casa en las esquinas inferiores) sobre el color de la sección. */
.seccion--fondo-trans1 { background: var(--espuma) url("../img/fondos/trans1-900.webp") center bottom / 100% auto no-repeat; padding-bottom: clamp(90px, 22vw, 220px); }
@media (min-width: 900px) { .seccion--fondo-trans1 { background-image: url("../img/fondos/trans1-1600.webp"); } }
/* Cabecera con los dibujos de trans1 (calidad del aire y problemas de humedad): la hoja en el margen
   izquierdo, ajustada al hueco que deja el texto, y la casa abajo a la derecha. Solo en pantallas anchas:
   en las estrechas no hay margen y quedarían encima del texto. */
@media (min-width: 1440px) {
  .cabecera--trans1 {
    background:
      url("../img/fondos/trans1-hoja.webp") left 1vw bottom 24px / min(240px, calc(50vw - 620px)) auto no-repeat,
      url("../img/fondos/trans1-casa.webp") right 4vw bottom 24px / min(300px, 20vw) auto no-repeat,
      linear-gradient(180deg, var(--azul-claro), var(--fondo));
  }
}
/* Bloque de tarjetas con la casa y la hoja abajo (problemas de humedad). */
.seccion--fondo-trans2 { background: var(--espuma) url("../img/fondos/trans2-900.webp") center bottom / 100% auto no-repeat; padding-bottom: clamp(90px, 22vw, 220px); }
@media (min-width: 900px) { .seccion--fondo-trans2 { background-image: url("../img/fondos/trans2-1600.webp"); } }

/* ---------- Tarjetas horizontales (bloque de productos de las guías y «Nuestra selección» de las comparativas) ---------- */
/* Foto a la izquierda y datos con botón a la derecha: ocupan mucho menos alto, sobre todo en el móvil.
   Una por fila hasta 1000 px; a partir de ahí, en fila según cuántas haya. */
.productos-guia .pmini-rejilla--horizontal, .seleccion .pmini-rejilla--horizontal { grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 12px; }
@media (min-width: 1000px) {
  .productos-guia .pmini-rejilla--horizontal.pmini-rejilla--n2, .seleccion .pmini-rejilla--horizontal.pmini-rejilla--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .productos-guia .pmini-rejilla--horizontal.pmini-rejilla--n3, .seleccion .pmini-rejilla--horizontal.pmini-rejilla--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .productos-guia .pmini-rejilla--horizontal.pmini-rejilla--n4, .seleccion .pmini-rejilla--horizontal.pmini-rejilla--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Portada: también en horizontal; una por fila en el móvil y de dos en dos desde 760 px. */
.destacados .pmini-rejilla--horizontal { grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 14px; }
@media (min-width: 760px) { .destacados .pmini-rejilla--horizontal:not(.pmini-rejilla--n1) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pmini-rejilla--horizontal .pmini { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 14px; row-gap: 3px; align-content: start; padding: 12px; }
.pmini-rejilla--horizontal .pmini > * { grid-column: 2; }
.pmini-rejilla--horizontal .pmini__media { grid-column: 1; grid-row: 1 / span 6; align-self: start; margin: 0; border-radius: 10px; }
.pmini-rejilla--horizontal .pmini__etiqueta { position: static; justify-self: start; margin-bottom: 4px; border-radius: 8px; line-height: 1.35; }
.pmini-rejilla--horizontal .pmini__nombre { min-height: 0; font-size: 1rem; }
.pmini-rejilla--horizontal .pmini__datos { min-height: 0; margin: 2px 0 0; gap: 4px; }
.pmini-rejilla--horizontal .pmini__datos li { padding: 2px 8px; font-size: .76rem; }
.pmini-rejilla--horizontal .pmini__ideal { display: none; }
.pmini-rejilla--horizontal .pmini__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0; padding-top: 8px; }
.pmini-rejilla--horizontal .pmini .boton.boton--amazon { width: auto; max-width: 100%; min-height: 36px; font-size: .84rem; }
.pmini-rejilla--horizontal .pmini__ficha { justify-self: auto; font-size: .86rem; }
.pmini-rejilla--horizontal .pmini__afiliado { margin: 0; text-align: left; font-size: .7rem; }
@media (min-width: 560px) { .pmini-rejilla--horizontal .pmini { grid-template-columns: 112px minmax(0, 1fr); } }
@media (max-width: 559px) { .productos-guia { padding: 16px 14px; } }

/* ---------- Lectura cómoda (guías) ----------
   La página sigue ocupando todo el ancho (recuadros, tablas, tarjetas), pero el texto corrido va en una
   columna centrada de unos 70 caracteres por línea, que es lo que mejor se lee en pantalla. */
@media (min-width: 900px) {
  .prosa { --medida: 46rem; }
  .prosa p, .prosa > ul, .prosa > ol:not(.pasos), .prosa .bloque > ul, .prosa .bloque > ol:not(.pasos),
  .prosa h2, .prosa h3, .prosa .nota, .prosa .resumen-rapido, .prosa .desplegable__cuerpo > ul {
    max-width: var(--medida); margin-left: auto; margin-right: auto;
  }
  .prosa .entradilla { font-size: 1.24rem; }
}
.prosa p, .prosa li { text-wrap: pretty; }
.prosa h2, .prosa h3 { text-wrap: balance; }
.prosa strong { color: var(--tinta); font-weight: 750; }
@media (min-width: 900px) {
  .prosa .nota p, .prosa .resumen-rapido p, .prosa .pasos p, .prosa .tabla-caja p { max-width: none; margin-left: 0; margin-right: 0; }
  .prosa .pasos, .prosa .lista-check { max-width: var(--medida); margin-left: auto; margin-right: auto; }
}