/* ============================================================
Saunas Durán · sistema visual
Portado de la demo de saunas-duran.vercel.app y adaptado a
WordPress. Sin frameworks CSS.
Las @font-face están en fuentes.css, que se carga antes.
La capa de movimiento está en motion.css, que se carga después.
============================================================ */
:root{
/* --- paleta --- */
--paper:#fafaf8; /* fondo general, crema */
--paper2:#f3efe7; /* bandas .alt, pie, huecos */
--ink:#1a1a1a; /* texto y fondos oscuros */
--muted:#6f675c; /* texto secundario */
--bord:#8b1a2b; /* burdeos de marca */
--bord2:#681420; /* burdeos, estado hover */
--wood:#c8956c; /* madera: pestañas, estrellas */
--line:rgba(26,26,26,.12); /* todos los filetes */
/* Arena. En la demo estaba suelto por la hoja; aquí es un token,
porque es el color de los eyebrows sobre fondo oscuro. */
--arena:#d4b8a0;
--arena2:#ead9bd; /* la cursiva del titular del hero */
/* --- Radios (21 sep 2026) ---
Esquinas redondeadas en fotos y tarjetas, SIEMPRE desde estos tokens:
así dos piezas del mismo tipo llevan el mismo radio aunque las escriba
otro día otra persona. El radio va según el tamaño de la pieza, no
todas iguales: una tarjeta de 300 px y una foto de 100 px no aguantan
la misma curva.
LAS CABECERAS NO LLEVAN RADIO: van a sangre, de borde a borde de la
ventana, y una esquina redonda ahí deja una muesca del fondo. */
--radio-boton:999px; /* píldora; lo pedía César */
--radio-tarjeta:16px; /* tarjetas: gama, npc, blog, modelo */
--radio-foto:12px; /* fotos grandes dentro del contenido */
--radio-foto-menor:8px; /* fotos pequeñas en fila: tira y montaje */
--serif:'Playfair Display',Georgia,'Times New Roman',serif;
--sans:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:-.01em}
/* Tipografía y paleta del manual de identidad (14 sep 2026,
referencia/manual-marca.md): Playfair Display 500 en titulares
(H1 48-64 px, H2 32-40, H3 22-28 en escritorio; en móvil, la misma
proporción que tenían), Lato 400 en cuerpo, Lato 300 en subtítulos,
Lato 700 en etiquetas (10-12 px) y botones (13-14 px). Lato no tiene
500 ni 600. Burdeos #8B1A2B, Negro Profundo #1A1A1A, Blanco Cálido
#FAFAF8, Arena #D4B8A0, Madera #C8956C. Nogal y Lino, fuera (no tienen
hueco sin cambiar la composición). */
.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--bord)}
/* BOTONES (20 sep 2026, encargo de Manu).
Esquina de píldora en los dos, que es además lo que pedía César.
El radio es un token: si algún día se abre, se abre en un sitio.
El PRIMARIO sigue relleno de burdeos: es el que más tiene que destacar
y el de la cabecera es el suyo.
El SECUNDARIO es blanco con filete y letra en burdeos, y al pasar el
ratón se rellena de burdeos con la letra en blanco. Es el estilo
general del botón secundario de TODA la web, no de una página.
Por eso se cayeron los seis retoques que lo repintaban sobre fondo
oscuro (hero con foto, hero claro, hero sin foto, npc-cta, cta-final):
ponían borde y letra blancos sin tocar el fondo, y sobre el blanco del
botón nuevo habrían dejado letra blanca sobre blanco. El botón blanco
se ve bien sobre la foto y sobre la banda tinta, que es de lo que se
trataba. */
/* Más finos, en toda la web (Manu, 21 sep 2026): menos altura, letra más
pequeña, peso 400 y más espaciado. De 52 px de alto a 41.
OJO: el manual de marca pide botón en Lato 700 a 13-14 px. Esto lo pisa a
propósito y por orden de Manu; queda anotado para no "corregirlo" luego.
Lato no tiene 500 ni 600, así que el peso ligero es el 400. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:11px 26px;border-radius:var(--radio-boton);font-family:var(--sans);font-weight:400;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;border:1px solid transparent;transition:.2s}
.btn-p{background:var(--bord);color:#fff;border-color:var(--bord)}
.btn-p:hover{background:var(--bord2);border-color:var(--bord2)}
.btn-g{background:#fff;color:var(--bord);border-color:var(--bord)}
.btn-g:hover{background:var(--bord);color:#fff}
/* Dentro de una tarjeta ocupa todo el ancho: es la única acción que hay
ahí y media tarjeta de botón se lee como un botón a medio hacer. */
.npc-card .btn-g,.sd-tarjeta .btn-g{display:flex;width:100%}
.pad{padding:clamp(64px,9vw,120px) 0}
.shead{max-width:680px;margin:0 auto clamp(38px,5vw,60px);text-align:center}
.shead h2{font-size:clamp(1.61rem,3.55vw,2.5rem);margin-top:14px}
/* :not(.eyebrow): el eyebrow es un y esta regla le quitaba tamaño, peso y
color (salía a 16,8 px, en gris y a 300). Se le devuelve solo el margen.
:where() para no subir la especificidad: con :not() a secas la regla pisaba
a .hero .sd-hero-pie y el pie de foto de vapor salía a tamaño de entradilla. */
.shead p:where(:not(.eyebrow)){color:var(--muted);margin-top:14px;font-size:1.05rem;font-weight:300}
.shead .eyebrow{margin-top:14px}
/* HEADER */
header{position:sticky;top:0;z-index:50;background:rgba(250,250,248,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo b{font-family:var(--serif);font-size:1.3rem;font-weight:600;color:var(--bord)}
.logo small{display:block;font-size:.58rem;letter-spacing:.36em;color:var(--muted);text-transform:uppercase}
.menu{display:flex;gap:34px;font-size:.85rem;font-weight:400;letter-spacing:.04em;color:var(--muted)}
.menu a:hover,.menu a.on{color:var(--ink)}
.navcta{display:flex;align-items:center;gap:18px}
.phone{font-weight:700;font-size:.9rem}
@media(max-width:1000px){.menu,.phone{display:none}}
/* ---- MENÚ MÓVIL ----
Por debajo de 1000px el menú de escritorio se esconde. Antes
no había nada en su lugar y las 7 secciones quedaban
inalcanzables desde el teléfono. El botón y el panel los
construye nav.js clonando el menú que ya existe, así nunca
se desincronizan. */
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;
background:none;border:none;cursor:pointer;padding:0;margin-left:4px;flex-shrink:0}
@media(max-width:1000px){.burger{display:flex}}
.burger span{display:block;position:relative;width:22px;height:1.5px;background:var(--ink);
transition:background .2s ease}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;
height:1.5px;background:var(--ink);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.burger span::before{top:-7px}
.burger span::after{top:7px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}
.mobnav{position:fixed;inset:0;z-index:120;background:var(--paper);
display:flex;flex-direction:column;justify-content:center;padding:90px 32px 40px;
opacity:0;visibility:hidden;transform:translateY(-14px);
transition:opacity .38s ease,transform .45s cubic-bezier(.22,1,.36,1),visibility .38s}
.mobnav.open{opacity:1;visibility:visible;transform:none}
.mobnav a{font-family:var(--serif);font-size:1.75rem;font-weight:500;color:var(--ink);
padding:13px 0;border-bottom:1px solid var(--line);
opacity:0;transform:translateY(14px);
transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1);
transition-delay:var(--d,0ms)}
.mobnav.open a{opacity:1;transform:none}
.mobnav a.on{color:var(--bord)}
.mobnav .mob-foot{margin-top:32px;display:flex;flex-direction:column;gap:12px}
.mobnav .mob-foot .tel{font-family:var(--serif);font-size:1.5rem;color:var(--bord);
border:none;padding:0}
body.nav-abierto{overflow:hidden}
/* HERO */
.hero{position:relative;min-height:86vh;display:flex;align-items:flex-end;overflow:hidden}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,8,.05) 30%,rgba(20,14,8,.72))}
.hero .wrap{position:relative;z-index:2;padding-bottom:70px;color:#fff;width:100%}
.hero .eyebrow{color:#d4b8a0}
.hero h1{font-size:clamp(2.26rem,5.22vw,4rem);max-width:820px;margin:16px 0 0;color:#fff}
.hero h1 em{font-style:italic;font-weight:400;color:#ead9bd}
/* :not(.eyebrow), por lo mismo: el eyebrow heredaba 17,6 px y el peso de la
entradilla. Conserva los márgenes que tenía, para no mover la composición. */
.hero p:where(:not(.eyebrow)){max-width:520px;margin:18px 0 30px;color:rgba(255,255,255,.85);font-size:1.1rem;font-weight:300}
.hero .eyebrow{margin:18px 0 30px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
/* HERO CLARO — para fotos luminosas (microcemento, saunas de
abeto claro). En vez de tapar la foto con negro para que se
lea el texto blanco, invertimos: velo crema desde abajo y
tipografía en tinta. La foto se conserva entera y el
conjunto queda más editorial. */
.hero--claro::after{
/* Dos velos: uno lateral que limpia la esquina donde vive el
texto (sin tocar la bañera de la derecha) y otro inferior
que funde la foto con el fondo de la página. */
background:
linear-gradient(100deg,
rgba(250,250,248,.93) 0%,
rgba(250,250,248,.68) 30%,
rgba(250,250,248,.15) 52%,
rgba(250,250,248,0) 68%),
linear-gradient(180deg,
rgba(250,250,248,0) 42%,
rgba(250,250,248,.62) 76%,
rgba(250,250,248,.94) 92%,
var(--paper) 100%);
}
.hero--claro .wrap{color:var(--ink)}
.hero--claro .eyebrow{color:var(--bord)}
.hero--claro h1{color:var(--ink);text-shadow:none}
.hero--claro h1 em{color:var(--bord)}
.hero--claro p{color:var(--muted)}
.hero--claro .scrollcue{
background:linear-gradient(180deg,transparent,rgba(26,26,26,.5));
}
/* trust strip */
/* LÍNEAS DE PRODUCTO (estilo KLAFS) */
.lines{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:900px){.lines{grid-template-columns:1fr}}
.lin{position:relative;display:block}
.lin .ph{aspect-ratio:4/5;overflow:hidden;background:var(--paper2)}
.lin .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.lin:hover .ph img{transform:scale(1.045)}
.lin .lab{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin:18px 0 6px}
.lin h3{font-size:1.55rem}
.lin p{color:var(--muted);font-size:.94rem;margin-top:6px}
.lin .go{display:inline-block;margin-top:14px;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--bord);padding-bottom:3px;color:var(--bord)}
/* CONFIGURADOR */
.alt{background:var(--paper2)}
.cfg{background:#fff;border:1px solid var(--line);box-shadow:0 30px 80px rgba(26,26,26,.08)}
.cfg-grid{display:grid;grid-template-columns:1fr 1fr}
@media(max-width:860px){.cfg-grid{grid-template-columns:1fr}}
.cfg-left{padding:clamp(30px,4.5vw,52px)}
.cfg-right{padding:clamp(30px,4.5vw,52px);background:var(--ink);color:var(--paper);display:flex;flex-direction:column;justify-content:center}
.steps{display:flex;gap:8px;margin-bottom:28px}
.stepdot{flex:1;height:3px;background:var(--line)}
.stepdot.on{background:var(--bord)}
.qlabel{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--bord);font-weight:700}
.q h3{font-size:1.6rem;margin:10px 0 22px}
.opts{display:grid;gap:12px}
.opts.grid2{grid-template-columns:1fr 1fr}
@media(max-width:440px){.opts.grid2{grid-template-columns:1fr}}
.opt{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);cursor:pointer;transition:.18s;background:#fff}
.opt:hover{border-color:var(--ink)}
.opt.sel{border-color:var(--bord);background:rgba(139,26,43,.05)}
.opt b{font-weight:700;font-size:.98rem}
.opt small{display:block;color:var(--muted);font-size:.8rem;font-weight:400}
.cfg-nav{margin-top:26px}
.link-back{background:none;border:none;color:var(--muted);cursor:pointer;font-family:var(--sans);font-size:.88rem}
.link-back:hover{color:var(--ink)}
.cfg-right .qlabel{color:#d4b8a0}
.result .gama{font-family:var(--serif);font-size:2rem;color:#d4b8a0;margin:6px 0}
.result .price{font-size:2.5rem;font-family:var(--serif)}
.result .price small{font-size:.95rem;color:rgba(250,250,248,.6);font-family:var(--sans)}
.result .desc{color:rgba(250,250,248,.75);font-size:.94rem;margin:10px 0 20px}
.capture{display:grid;gap:10px}
.capture input{width:100%;padding:14px 16px;border:1px solid rgba(250,250,248,.25);background:rgba(250,250,248,.06);color:#fff;font-family:var(--sans);font-size:1rem;outline:none}
.capture input:focus{border-color:#d4b8a0}
.cfg-hint{font-size:.76rem;color:rgba(250,250,248,.55);margin-top:12px;text-align:center}
.oknote{font-size:.8rem;color:#d4b8a0;margin-top:8px;display:none}
/* EDITORIAL SPLIT (heritage) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px);align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.split .ph{aspect-ratio:4/5;overflow:hidden}
.split .ph img{width:100%;height:100%;object-fit:cover}
.split h2{font-size:clamp(1.72rem,3.45vw,2.5rem);margin:14px 0 18px}
.split p{color:var(--muted)}
.stats{display:flex;gap:40px;margin-top:30px;flex-wrap:wrap}
.stat b{font-family:var(--serif);font-size:2.1rem;display:block;color:var(--bord)}
.stat small{color:var(--muted);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
/* PROYECTOS */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:860px){.cases{grid-template-columns:1fr}}
.case .ph{aspect-ratio:4/3;overflow:hidden;background:var(--paper2)}
.case .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.case:hover .ph img{transform:scale(1.045)}
.case h3{font-size:1.375rem;margin-top:16px}
.case p{color:var(--muted);font-size:.9rem;margin-top:6px}
.case .tag{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:16px;display:block}
.stars{color:var(--wood);font-size:.85rem;margin-top:8px;letter-spacing:.1em}
/* FAQ */
.faq{max-width:800px;margin:0 auto}
.fitem{border-bottom:1px solid var(--line)}
.fq{width:100%;text-align:left;background:none;border:none;color:var(--ink);font-family:var(--serif);font-size:1.2rem;padding:24px 0;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center}
.fq .p{color:var(--bord);transition:.2s;flex-shrink:0;font-size:1.3rem}
.fa{color:var(--muted);max-height:0;overflow:hidden;transition:max-height .3s;font-size:.95rem}
.fitem.open .fa{max-height:250px;padding-bottom:24px}
.fitem.open .fq .p{transform:rotate(45deg)}
/* CONTACTO */
/* Mensajes del formulario. El de error pesa lo mismo que el de
éxito a propósito: si algo falla, la persona tiene que verlo
igual de claro y encontrar el teléfono ahí mismo. */
.formmsg{display:none;margin-top:14px;padding:13px 16px;font-size:.9rem;line-height:1.5;border-left:3px solid}
.formmsg.ok{background:rgba(139,26,43,.06);border-color:var(--bord);color:var(--bord)}
.formmsg.err{background:rgba(26,26,26,.05);border-color:var(--ink);color:var(--ink)}
.cform button[disabled]{opacity:.6;cursor:wait}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px)}
@media(max-width:860px){.contact{grid-template-columns:1fr}}
.cform{display:grid;gap:12px}
.cform input,.cform textarea{padding:14px 16px;border:1px solid var(--line);background:#fff;color:var(--ink);font-family:var(--sans);font-size:1rem;outline:none}
.cform textarea{min-height:110px;resize:vertical}
.cform input:focus,.cform textarea:focus{border-color:var(--bord)}
/* FOOTER */
footer{border-top:1px solid var(--line);padding:52px 0 90px;background:var(--paper2)}
.fgrid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:28px}
/* Rejilla fija en escritorio (Manu, 23 sep 2026). Con flex y wrap, a
1024 px "Taller" bajaba sola a una segunda fila. Anchos por contenido:
Contacto lleva el correo, que no se puede partir (a 1024 px, con
columnas iguales, salía "saunasdur/an.com"); Redes son tres palabras
cortas. Redes solo sale si hay alguna dirección: sin ella, cuatro. */
@media(min-width:1000px){
.fgrid{display:grid;gap:32px;
grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.4fr) minmax(0,.7fr) minmax(0,1fr)}
.fgrid:not(:has(> .fcol:nth-child(5))){grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr)}
}
.fcol h4{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.fcol a{display:block;color:var(--ink);font-size:.9rem;padding:3px 0}
.fcol a:hover{color:var(--bord)}
.fbot{margin-top:36px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:.8rem}
/* BARRA FLOTANTE (estilo KLAFS) */
.floatbar{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:60;display:flex;background:var(--ink);color:var(--paper);border-radius:999px;overflow:hidden;box-shadow:0 18px 50px rgba(26,26,26,.35)}
.floatbar a{display:flex;align-items:center;gap:8px;padding:15px 24px;font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-right:1px solid rgba(250,250,248,.15);transition:.2s}
.floatbar a:last-child{border-right:none}
.floatbar a:hover{background:var(--bord)}
@media(max-width:640px){.floatbar{width:calc(100% - 24px)}.floatbar a{flex:1;justify-content:center;padding:14px 8px;font-size:.7rem}}
/* Solo tiene sentido en el móvil: ahí queda a mano del pulgar.
En escritorio el menú ya está arriba y esta barra estorba en
medio de la pantalla.
OJO: esta regla tiene que ir DESPUÉS de `.floatbar{display:flex}`.
Misma especificidad — si va antes, gana la de arriba y no pasa nada. */
@media(min-width:1001px){.floatbar{display:none}}
/* ============================================================
PÁGINAS DE PRODUCTO — sauna-interior.html y sauna-exterior.html
============================================================ */
/* contenedor estrecho para listados de texto centrados */
.narrow{max-width:840px;margin:0 auto}
/* tarjetas de ventajas / maderas / acabados (sin foto) */
.vents{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.vents.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.vents,.vents.g2{grid-template-columns:1fr}}
.vent{background:#fff;border:1px solid var(--line);padding:28px}
.vent .n{font-family:var(--serif);font-size:1.6rem;color:var(--bord);line-height:1}
.vent h3{font-size:1.375rem;margin:10px 0 0}
.vent p{color:var(--muted);font-size:.9rem;margin-top:8px}
.vent .sw{height:10px;margin-bottom:18px}
.sw-natural{background:linear-gradient(90deg,#e8d3ae,#c9a271)}
.sw-blanco{background:linear-gradient(90deg,#fafaf8,#e2dbcd)}
.sw-rustico{background:linear-gradient(90deg,#a9855c,#6d5436)}
.sw-abeto{background:linear-gradient(90deg,#e8d3ae,#d9b985)}
.sw-ayous{background:linear-gradient(90deg,#f3e5c8,#e8d3a8)}
.sw-hemlock{background:linear-gradient(90deg,#dcc39c,#c5a274)}
/* el hero (.hero .hero-sub), la banda de cierre (.cta-final) y las FAQ largas
(.faq faq-lg) reutilizan las clases compartidas definidas más abajo */
/* ======================================================================
AÑADIDO — bano-vapor.html + proyectos.html
Solo añade. No modifica ninguna regla anterior de esta hoja.
El hero interior (.hero-sub), la banda de cierre (.cta-final) y las FAQ
largas (.faq-lg) son compartidas con sauna-interior.html y
sauna-exterior.html: están definidas al final de esta hoja, una sola vez.
====================================================================== */
/* -- compartido por bano-vapor.html y proyectos.html -- */
.opt-static .opt{cursor:default}
.opt-static .opt:hover{border-color:var(--line)}
/* -- bano-vapor.html : comparativa sauna seca vs vapor -- */
.bv-vs{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:860px){.bv-vs{grid-template-columns:1fr}}
.bv-card{background:#fff;border:1px solid var(--line);padding:clamp(26px,3.6vw,42px)}
.bv-card .lab{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.bv-card h3{font-size:1.7rem;margin:8px 0 14px}
.bv-card p{color:var(--muted);font-size:.96rem}
.bv-card--ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.bv-card--ink .lab{color:#d4b8a0}
.bv-card--ink p{color:rgba(250,250,248,.75)}
.bv-spec{display:flex;gap:36px;flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.bv-card--ink .bv-spec{border-top-color:rgba(250,250,248,.22)}
.bv-spec b{display:block;font-family:var(--serif);font-size:1.55rem;font-weight:500;line-height:1.2}
.bv-spec small{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.bv-card--ink .bv-spec small{color:rgba(250,250,248,.6)}
.bv-note{max-width:760px;margin:30px auto 0;text-align:center;color:var(--muted);font-size:.86rem}
/* -- proyectos.html : fichas de obra con foto grande -- */
.pr-feat{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:center;padding:clamp(34px,4.5vw,58px) 0;border-top:1px solid var(--line)}
.pr-feat:first-of-type{border-top:none;padding-top:0}
@media(max-width:900px){.pr-feat{grid-template-columns:1fr}}
.pr-feat .ph{aspect-ratio:16/10;overflow:hidden;background:var(--paper2)}
.pr-feat .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pr-feat:hover .ph img{transform:scale(1.035)}
.pr-feat h3{font-size:clamp(1.375rem,2.44vw,1.75rem);margin:12px 0 14px}
.pr-feat p{color:var(--muted)}
.pr-tag{display:inline-block;margin-top:18px;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}
@media(min-width:901px){.pr-feat--flip .ph{order:2}}
.pr-note{max-width:760px;margin:clamp(34px,4.5vw,54px) auto 0;text-align:center;color:var(--muted);font-size:.86rem}
/* ============================================================
NUEVO · nosotros.html · proceso.html · contacto.html
Prefijo .npc- para no colisionar con reglas de otras paginas.
============================================================ */
/* Heros interiores (mas bajos que el de portada) */
.hero.npc-sub{min-height:58vh}
.hero.npc-mini{min-height:44vh}
@media(max-width:700px){.hero.npc-sub,.hero.npc-mini{min-height:52vh}}
/* Rejillas de contenido */
.npc-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.npc-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.npc-span2{grid-column:1/-1}
@media(max-width:900px){.npc-grid3{grid-template-columns:1fr}}
@media(max-width:820px){.npc-grid2{grid-template-columns:1fr}}
/* Ficha de contenido */
.npc-card{background:#fff;border:1px solid var(--line);padding:clamp(22px,3vw,32px)}
.alt .npc-card{background:var(--paper)}
.npc-card h3{font-size:1.375rem;margin-bottom:12px}
.npc-card p{color:var(--muted);font-size:.96rem}
.npc-card .lab{display:block;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.npc-card.npc-mark{border-top:3px solid var(--bord)}
/* Parrafo de entrada */
.npc-lead{color:var(--ink);font-size:1.08rem;font-weight:300;margin-bottom:14px}
.split .npc-lead{color:var(--ink)}
.split p + p{margin-top:14px}
/* Listas de oficio */
.npc-list{list-style:none;display:grid;gap:10px;margin-top:16px}
.npc-list li{position:relative;padding-left:22px;color:var(--muted);font-size:.95rem}
.npc-list li::before{content:"—";position:absolute;left:0;color:var(--bord)}
/* Pasos del proceso (reutiliza .steps/.stepdot) */
.npc-step .steps{margin-bottom:18px}
.npc-num{display:block;font-family:var(--sans);font-weight:700;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bord);margin-bottom:8px}
/* FAQ con respuestas algo mas largas */
.npc-faq .fitem.open .fa{max-height:520px}
/* Formulario de contacto */
.npc-field label{display:block;font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.npc-field input,.npc-field textarea,.npc-field select{width:100%}
.cform select{padding:14px 16px;border:1px solid var(--line);background:#fff;color:var(--ink);font-family:var(--sans);font-size:1rem;outline:none}
.cform select:focus{border-color:var(--bord)}
.npc-formnote{color:var(--muted);font-size:.78rem;margin-top:2px}
/* Banda de cierre / CTA */
.npc-cta{background:var(--ink);color:var(--paper);padding:clamp(38px,6vw,70px) clamp(24px,5vw,60px);text-align:center}
.npc-cta .eyebrow{color:#d4b8a0}
.npc-cta h2{color:var(--paper);font-size:clamp(1.7rem,3.57vw,2.5rem);margin:14px 0 14px}
.npc-cta p{color:rgba(250,250,248,.75);max-width:620px;margin:0 auto;font-size:1.02rem}
.npc-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px}
/* ----------------------------------------------------------------------
COMPARTIDO por las páginas interiores (sauna-interior, sauna-exterior,
bano-vapor, proyectos). Definido una sola vez aquí.
---------------------------------------------------------------------- */
.hero-sub{min-height:62vh}
.hero-sub .wrap{padding-bottom:56px}
.hero-sub h1{font-size:clamp(2.3rem,5.2vw,3.9rem)}
.faq-lg .fitem.open .fa{max-height:620px}
.cta-final{background:var(--ink);color:var(--paper);text-align:center;padding:clamp(60px,8vw,104px) 28px}
.cta-final .eyebrow{color:#d4b8a0}
.cta-final h2{font-size:clamp(1.67rem,3.67vw,2.5rem);margin:14px auto 12px;max-width:720px}
.cta-final p{color:rgba(250,250,248,.72);max-width:560px;margin:0 auto 30px}
.cta-final .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* Utilidades de separacion (evitan estilos inline en las paginas .npc-) */
.npc-mt{margin-top:24px}
.npc-mt-l{margin-top:clamp(38px,5vw,60px)}
.cform .btn{justify-content:center}
.cform .oknote{color:var(--bord)}
/* ===== saunas.html — estilos propios de la pagina de producto ===== */
.phero{position:relative;min-height:56vh;display:flex;align-items:flex-end;overflow:hidden}
.phero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,8,.08) 30%,rgba(20,14,8,.7))}
.phero .wrap{position:relative;z-index:2;padding-bottom:52px;color:#fff;width:100%}
.phero .eyebrow{color:#d4b8a0}
.phero h1{font-size:clamp(2.4rem,5.4vw,4rem);color:#fff;margin-top:14px}
.phero p{max-width:560px;margin-top:14px;color:rgba(255,255,255,.85);font-size:1.06rem}
.bcrumb{position:absolute;top:96px;left:0;right:0;z-index:3;color:rgba(255,255,255,.75);font-size:.78rem;letter-spacing:.08em}
.bcrumb a:hover{color:#fff}
.tabs{position:sticky;top:76px;z-index:40;background:var(--wood);overflow-x:auto}
.tabs .wrap{display:flex;gap:6px}
.tab{padding:17px 22px;font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(26,26,26,.75);white-space:nowrap;cursor:pointer;border-bottom:2px solid transparent;background:none;border-top:none;border-left:none;border-right:none;font-family:var(--sans)}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);border-bottom-color:var(--ink)}
.models{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:1000px){.models{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.models{grid-template-columns:1fr}}
.mod{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;transition:.25s}
.mod:hover{box-shadow:0 24px 60px rgba(26,26,26,.12);transform:translateY(-3px)}
.mod .ph{aspect-ratio:4/3;overflow:hidden;background:var(--paper2);position:relative}
.mod .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.mod:hover .ph img{transform:scale(1.05)}
.mod .badge{position:absolute;top:12px;left:12px;background:var(--bord);color:#fff;font-size:.625rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px}
.mod .badge.w{background:#fff;color:var(--ink)}
.mod .b{padding:22px;display:flex;flex-direction:column;flex:1}
.mod .lab{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.mod h3{font-size:1.375rem;margin:6px 0 8px}
.mod p{color:var(--muted);font-size:.9rem;flex:1}
.mod .chips{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}
.chip{font-size:.7rem;padding:4px 11px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}
.mod .foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:16px}
.mod .from{font-size:.72rem;color:var(--muted)}
.mod .from b{display:block;font-family:var(--serif);font-size:1.25rem;color:var(--ink);font-weight:500}
.mod .go{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bord);border-bottom:1px solid var(--bord);padding-bottom:2px}
.mod .go:hover{color:var(--bord2)}
.fin{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:860px){.fin{grid-template-columns:1fr}}
.f .ph{aspect-ratio:1/1;overflow:hidden}
.f .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.f:hover .ph img{transform:scale(1.05)}
.f h3{font-size:1.375rem;margin-top:14px}
.f p{color:var(--muted);font-size:.9rem;margin-top:4px}
.woods{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:860px){.woods{grid-template-columns:1fr}}
.wd{border:1px solid var(--line);background:#fff;padding:28px}
.wd .sw{height:10px;margin-bottom:18px}
.wd h3{font-size:1.375rem}
.wd p{color:var(--muted);font-size:.88rem;margin-top:8px}
.tech{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
@media(max-width:860px){.tech{grid-template-columns:1fr}}
.tech .ph{aspect-ratio:4/5;overflow:hidden}
.tech .ph img{width:100%;height:100%;object-fit:cover}
.tech h2{font-size:clamp(1.76rem,3.52vw,2.5rem);margin:12px 0 8px}
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:760px){.steps4{grid-template-columns:1fr 1fr}}
.st{padding:26px;border:1px solid var(--line);background:#fff}
.st .n{font-family:var(--serif);font-size:1.9rem;color:var(--bord)}
.st h3{font-size:1.375rem;margin:6px 0}
.st p{color:var(--muted);font-size:.88rem}
.bigcta{background:var(--ink);color:var(--paper);text-align:center;padding:clamp(60px,8vw,100px) 28px}
.bigcta .eyebrow{color:#d4b8a0}
.bigcta h2{font-size:clamp(1.67rem,3.67vw,2.5rem);margin:14px auto 12px;max-width:700px}
.bigcta p{color:rgba(250,250,248,.7);max-width:520px;margin:0 auto 30px}
/* Aquí había footer .wrap{display:flex;justify-content:space-between;
flex-wrap:wrap}, heredado de la demo, cuyo pie era una sola fila. En
este pie .wrap lleva dos bloques, .fgrid y .fbot: como elementos flex
se encogían a su contenido y ninguno llegaba al ancho. Desde 1024 px el
filete del © se quedaba en 816 px, y desde 1280 las columnas no se
repartían el ancho. Quitado el 23 sep 2026: .wrap vuelve a ser bloque y
cada uno ocupa su fila entera. */
.hide{display:none!important}
/* ===== BLOG ===== */
/* blog.html (indice) + blog-*.html (articulos).
Prefijo .bl- para no colisionar con nada anterior de esta hoja. */
/* -- rejilla de tarjetas del indice -- */
.bl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,3.2vw,36px)}
@media(max-width:820px){.bl-grid{grid-template-columns:1fr}}
.bl-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);transition:.25s}
.alt .bl-card{background:var(--paper)}
.bl-card:hover{box-shadow:0 24px 60px rgba(26,26,26,.12);transform:translateY(-3px)}
.bl-ph{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--paper2)}
.bl-ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.bl-card:hover .bl-ph img{transform:scale(1.045)}
.bl-cbody{padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;flex:1}
.bl-tag{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.bl-card h3{font-size:clamp(1.375rem,2.2vw,1.6rem);margin:10px 0}
.bl-card p{color:var(--muted);font-size:.95rem;flex:1}
.bl-go{display:inline-block;align-self:flex-start;margin-top:18px;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bord);border-bottom:1px solid var(--bord);padding-bottom:3px}
.bl-card:hover .bl-go{color:var(--bord2);border-bottom-color:var(--bord2)}
/* -- cabecera del articulo -- */
.bl-head{border-bottom:1px solid var(--line);padding:clamp(44px,6.5vw,82px) 0 clamp(32px,4.4vw,50px)}
.bl-head .wrap{max-width:900px}
.bl-crumb{font-size:.78rem;color:var(--muted);letter-spacing:.05em;margin-bottom:20px}
.bl-crumb a:hover{color:var(--bord)}
.bl-head h1{font-size:clamp(2rem,4.6vw,3.3rem);margin-top:14px}
.bl-lead{color:var(--muted);font-size:1.12rem;font-weight:300;max-width:720px;margin-top:20px}
/* -- cuerpo del articulo -- */
.bl-art{max-width:760px;margin:0 auto}
.bl-art h2{font-size:clamp(1.55rem,2.9vw,2.1rem);margin:clamp(36px,4.4vw,54px) 0 14px}
.bl-art > h2:first-child{margin-top:0}
.bl-art h3{font-size:1.375rem;margin:28px 0 10px}
.bl-art p{color:var(--muted);font-size:1rem;margin-bottom:16px}
.bl-art strong{color:var(--ink);font-weight:700}
.bl-art em{font-style:italic}
/* Los enlaces del cuerpo vienen de la base de datos, sin clase: sin esto
se leían como texto gris normal. Subrayado, no solo color. */
.bl-art a:not(.btn){color:var(--ink);text-decoration:underline;text-decoration-color:var(--bord);text-decoration-thickness:1px;text-underline-offset:.2em}
.bl-art a:not(.btn):hover{color:var(--bord)}
.bl-art ul,.bl-art ol{list-style:none;margin:0 0 22px;display:grid;gap:11px}
.bl-art li{position:relative;padding-left:24px;color:var(--muted);font-size:1rem}
.bl-art ul li::before{content:"—";position:absolute;left:0;color:var(--bord)}
.bl-art ol{counter-reset:blnum}
.bl-art ol li{counter-increment:blnum}
.bl-art ol li::before{content:counter(blnum) ".";position:absolute;left:0;color:var(--bord);font-weight:700;font-size:.9rem}
.bl-note{background:var(--paper2);border-left:3px solid var(--bord);padding:22px 24px;margin:clamp(24px,3.2vw,36px) 0}
.bl-note p{margin-bottom:0;font-size:.95rem}
/* -- cierre del articulo + articulos relacionados -- */
.bl-end{border-top:1px solid var(--line);margin-top:clamp(38px,5vw,58px);padding-top:clamp(28px,4vw,44px)}
.bl-end h2{font-size:clamp(1.53rem,2.74vw,2rem);margin:0 0 12px}
.bl-end p{color:var(--muted)}
.bl-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.bl-morehead{font-size:.7rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-top:clamp(34px,4.5vw,52px)}
.bl-more{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:16px}
@media(max-width:820px){.bl-more{grid-template-columns:1fr}}
.bl-more a{display:block;background:#fff;border:1px solid var(--line);padding:22px;transition:.2s}
.alt .bl-more a{background:var(--paper)}
.bl-more a:hover{border-color:var(--bord)}
.bl-more b{display:block;margin-top:10px;font-family:var(--serif);font-weight:500;font-size:1.06rem;line-height:1.25}
/* ======================================================================
AÑADIDO PARA WORDPRESS
Todo lo anterior viene de la demo. De aquí abajo es lo que el tema
necesita y la demo no tenía.
====================================================================== */
/* --- Salto al contenido. Primer elemento tabulable de la página. --- */
.sd-saltar{position:absolute;left:-9999px;top:0;z-index:200;
background:var(--ink);color:var(--paper);padding:14px 22px;
font-size:.85rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.sd-saltar:focus{left:0}
/* --- Foco visible. La demo no lo tenía y con teclado se navegaba a ciegas. --- */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
outline:2px solid var(--bord);outline-offset:3px}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* --- Hueco de foto ---
Ocupa el sitio exacto que ocupará la imagen, para que la maqueta se
pueda revisar antes de tener el material. En producción se ve como un
bloque de color; con WP_DEBUG lleva además su TODO al lado. */
.sd-hueco-foto{display:block;width:100%;height:100%;min-height:120px;
background:var(--paper2);
background-image:repeating-linear-gradient(45deg,
rgba(26,26,26,.045) 0 10px,transparent 10px 20px)}
/* --- Marcador de pendientes. Solo aparece con WP_DEBUG. --- */
.sd-todo{margin:10px 0;padding:9px 13px;font-family:var(--sans);font-size:.78rem;
line-height:1.45;color:var(--ink);background:#fff6d6;border-left:3px solid #d8a800}
.sd-todo b{letter-spacing:.1em}
.sd-todo[data-tipo="alonso"]{background:#ffeceb;border-left-color:var(--bord)}
/* --- Aclaración en pies de foto ---
Sirve para el pie obligatorio de las fotos de baño de vapor: no se
fabrican, solo se suministra el generador. */
.sd-aclaracion{display:block;margin-top:4px;color:var(--muted);font-size:.95em}
/* --- Submenú del menú principal ---
La demo era plana. El árbol tiene dos niveles, y el documento de
estructura pide que interior y exterior queden a un golpe de vista. */
.menu{position:relative}
.menu .sd-tiene-hijos{position:relative;display:inline-flex;align-items:center;gap:5px}
.menu .sd-sub{position:absolute;top:100%;left:50%;transform:translate(-50%,6px);
min-width:260px;padding:10px 0;background:var(--paper);
border:1px solid var(--line);box-shadow:0 24px 60px rgba(26,26,26,.14);
opacity:0;visibility:hidden;transition:opacity .22s ease,transform .28s var(--ease-out-expo,ease)}
.menu .sd-tiene-hijos:hover .sd-sub,
.menu .sd-tiene-hijos:focus-within .sd-sub{opacity:1;visibility:visible;transform:translate(-50%,0)}
.menu .sd-sub a{display:block;padding:9px 22px;font-size:.85rem;color:var(--muted)}
.menu .sd-sub a:hover,.menu .sd-sub a.on{color:var(--ink);background:var(--paper2)}
.menu .sd-sub .sd-proximamente{color:rgba(111,103,92,.6)}
.menu .sd-sub .sd-proximamente::after{content:" · próximamente";font-size:.9em}
/* --- Etiqueta de "próximamente" en tarjetas --- */
.sd-etiqueta{display:inline-block;margin-top:10px;padding:3px 10px;
font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
color:var(--muted);border:1px solid var(--line)}
/* --- Tarjetas de gama (Estándar / A medida / Personalizadas) ---
Reutilizan .lin de la demo; esto solo añade el precio y el estado. */
.sd-gama .sd-desde{display:block;margin-top:10px;font-family:var(--serif);
font-size:1.15rem;color:var(--ink)}
.sd-gama.sd-inactiva{opacity:.55}
.sd-gama.sd-inactiva .ph{filter:grayscale(1)}
/* --- Tabla de precios --- */
.sd-precios{width:100%;border-collapse:collapse;font-size:.95rem}
.sd-precios caption{text-align:left;color:var(--muted);font-size:.86rem;padding-bottom:12px}
.sd-precios th,.sd-precios td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left}
.sd-precios thead th{font-size:.66rem;font-weight:700;letter-spacing:.2em;
text-transform:uppercase;color:var(--muted)}
.sd-precios tbody th{font-weight:700}
.sd-precios td{font-family:var(--serif);font-size:1.1rem}
.sd-precios .sd-nd{font-family:var(--sans);font-size:.86rem;color:var(--muted)}
.sd-tabla-scroll{overflow-x:auto}
/* --- Lead magnet (catálogo de maderas) --- */
.sd-magnet{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px);
align-items:center;background:var(--ink);color:var(--paper);
padding:clamp(30px,4.5vw,56px)}
@media(max-width:820px){.sd-magnet{grid-template-columns:1fr}}
.sd-magnet .eyebrow{color:var(--arena)}
.sd-magnet h2{color:var(--paper);font-size:clamp(1.7rem,3.4vw,2.4rem);margin:12px 0 12px}
.sd-magnet p{color:rgba(250,250,248,.75)}
.sd-magnet .cform input{border-color:rgba(250,250,248,.25);
background:rgba(250,250,248,.06);color:#fff}
.sd-magnet .cform input:focus{border-color:var(--arena)}
/* --- Paginación --- */
.sd-paginacion{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
margin-top:clamp(34px,5vw,54px)}
.sd-paginacion .page-numbers{padding:10px 15px;border:1px solid var(--line);
font-size:.86rem;color:var(--muted)}
.sd-paginacion .page-numbers:hover{border-color:var(--ink);color:var(--ink)}
.sd-paginacion .page-numbers.current{background:var(--ink);border-color:var(--ink);color:var(--paper)}
/* --- Alineaciones del editor de bloques --- */
.alignleft{float:left;margin:0 1.5em 1em 0}
.alignright{float:right;margin:0 0 1em 1.5em}
.aligncenter{margin-left:auto;margin-right:auto}
.wp-caption-text,.wp-block-image figcaption{color:var(--muted);font-size:.82rem;margin-top:10px}
/* Enlaces de submenú dentro del panel del móvil: se leen como grupo,
no como ocho secciones más al mismo nivel. */
.mobnav a.sub{padding-left:18px;font-size:1.15rem;color:var(--muted);
border-bottom-color:rgba(26,26,26,.06)}
.mobnav a.sub.on{color:var(--bord)}
/* Hueco de foto en el hero: tiene que ocupar el mismo lugar que el
, así que heredaba el tope y "Fabricación
propia · Barcelona · Desde 1960" se partía en dos líneas en escritorio.
Solo el párrafo de verdad necesita el límite. */
.hero .eyebrow,.phero .eyebrow{max-width:none}
/* Los elementos con data-reveal="right" nacen desplazados 32 px a la
derecha y, hasta que entran, provocan una barra de desplazamiento
horizontal en pantallas estrechas. Se recorta en el eje X.
Va en html Y en body: con el recorte solo en body, el documento seguía
midiendo 384 px de ancho en un viewport de 380 y el navegador podía
seguir enseñando la barra. El elemento raíz es el que manda sobre el
desplazamiento del documento.
Tiene que ser clip y no hidden: hidden convierte el elemento en
contenedor de scroll y rompe el position:sticky de la cabecera. */
html,body{overflow-x:clip}
/* ======================================================================
MÓVIL
====================================================================== */
/* A 380 px el botón de presupuesto de la cabecera medía 225 px y, con el
logo, empujaba la hamburguesa fuera de la pantalla: el documento se
iba a 525 px de ancho. En móvil esa acción ya la cubre la barra
flotante de abajo, que además queda a mano del pulgar. */
@media(max-width:1000px){
.navcta .btn{display:none}
.navcta{gap:0}
}
/* El eyebrow con .3em de espaciado ocupaba tres líneas a 380 px.
Se aprieta la letra y se baja el cuerpo: sigue leyéndose como
versalita y cabe en una. */
@media(max-width:600px){
.eyebrow{font-size:.6875rem;letter-spacing:.16em}
.hero .eyebrow{margin-bottom:2px}
}
/* El titular del hero a 380: 2,6rem con line-height 1.08 deja las dos
líneas muy pegadas cuando la segunda va en cursiva. */
@media(max-width:480px){
.hero h1{font-size:clamp(1.83rem,7.48vw,2.26rem);line-height:1.12}
}
/* ======================================================================
REVISIÓN DE PORTADA
Correcciones sobre lo portado de la demo, tras verla en el navegador.
====================================================================== */
/* --- 1. Cabecera otra vez en una fila --- */
.barra-menu{display:contents} /* el contenedor deja de existir */
.barra-menu .wrap{display:contents}
header.scrolled .barra-menu .menu{height:auto}
.logo small{display:none} /* por si queda en alguna plantilla */
.nav{gap:clamp(12px,1.6vw,32px)}
.menu{gap:clamp(12px,1.35vw,24px);font-size:.8rem;height:auto}
.menu .sd-sub a{font-size:.82rem}
/* El submenú vuelve a colgar de la barra única. */
.menu .sd-sub{top:100%}
/* --- 2. Escala vertical ---
A 1440 el padding de sección daba 120 px arriba y 120 abajo: entre dos
bloques había 240 px de nada. Se recorta a 88 y se acorta el aire de
las cabeceras de sección. */
.pad{padding:clamp(52px,5.6vw,88px) 0}
.shead{margin-bottom:clamp(28px,3.2vw,44px)}
.cta-final{padding:clamp(48px,5.2vw,76px) 28px}
.cta-final h2{margin-top:0}
.cta-final p{margin-bottom:26px}
/* Dos secciones del MISMO fondo seguidas no necesitan el doble de aire.
Tiene que ser del mismo fondo: si cambia el color, el corte se ve, y
sin aire arriba el primer elemento queda pegado al cambio de banda. */
/* El blanco puro de los logos (.sd-clientes) es OTRO fondo: sin excluirlo, la
sección de logos y la que la seguía perdían el aire justo en el cambio de
color (portada y /proyectos/, visto por Manu el 28 sep 2026). */
/* "+ script +": el JSON-LD de las FAQ va entre la sección de FAQ y la
siguiente, y sin esto rompía el "hermano de al lado". */
.pad:not(.alt):not(.sd-clientes) + .pad:not(.alt):not(.sd-clientes),
.pad:not(.alt):not(.sd-clientes) + script + .pad:not(.alt):not(.sd-clientes),
.pad.alt + .pad.alt,
.pad.alt + script + .pad.alt,
.pad.sd-clientes + .pad.sd-clientes{padding-top:0}
/* --- 3. Nunca dos bloques oscuros con una franja clara en medio ---
El lead magnet era oscuro y el cierre también, con una banda clara
entre los dos: parecía un fallo de maquetación. El lead magnet pasa a
claro y el oscuro se reserva para el cierre, que es la llamada a la
acción de verdad. */
.sd-magnet{background:var(--paper);border:1px solid var(--line);color:var(--ink)}
.sd-magnet .eyebrow{color:var(--bord)}
.sd-magnet h2{color:var(--ink)}
.sd-magnet p{color:var(--muted)}
.sd-magnet .cform input{border-color:var(--line);background:#fff;color:var(--ink)}
.sd-magnet .cform input:focus{border-color:var(--bord)}
.sd-magnet .npc-field label{color:var(--muted)}
/* Iba pegado a la fuerza (padding-top:0) porque en la portada sigue a las
FAQ, del mismo fondo. En /saunas/maderas/ sigue a una banda .alt y el
cambio de color le caía encima (28 sep 2026). Ya no se fuerza: la regla
de "dos secciones del mismo fondo" lo pega solo cuando toca. */
/* --- 6. Botón de llamar: el número solo en móvil --- */
.sd-solo-movil{display:none}
@media(max-width:1000px){.sd-solo-movil{display:inline}}
/* --- 9. Los cuatro pasos, sin caja ---
Número grande en burdeos, título, dato. Una línea fina de 1 px une los
cuatro y crece de izquierda a derecha al entrar en pantalla. */
.sd-pasos{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
gap:clamp(20px,2.6vw,40px);position:relative;padding-top:34px;margin:0}
/* El raíl gris, siempre visible: da la referencia de hasta dónde llega. */
.sd-pasos::before{content:"";position:absolute;top:12px;left:0;right:0;height:1px;
background:var(--line)}
/* Y encima, la línea burdeos que se dibuja. */
.sd-pasos::after{content:"";position:absolute;top:12px;left:0;right:0;height:1px;
background:var(--bord);transform-origin:left center}
.js-motion .sd-pasos::after{transform:scaleX(0);
transition:transform 1400ms var(--ease-out-expo,cubic-bezier(.22,1,.36,1)) 200ms}
.js-motion .sd-pasos.is-in::after{transform:scaleX(1)}
.sd-paso{position:relative;padding-right:10px}
/* El punto que marca cada paso sobre la línea. */
.sd-paso::before{content:"";position:absolute;top:-27px;left:0;width:9px;height:9px;
border-radius:50%;background:var(--paper);border:1px solid var(--bord)}
.sd-paso-n{display:block;font-family:var(--serif);font-size:clamp(2.1rem,3.4vw,2.9rem);
line-height:1;color:var(--bord);font-weight:500}
.sd-paso h3{font-size:1.375rem;margin:10px 0 8px}
.sd-paso p{color:var(--muted);font-size:.92rem;line-height:1.6}
@media(max-width:860px){
.sd-pasos{grid-template-columns:1fr 1fr;gap:30px 24px}
}
@media(max-width:520px){
/* En una columna la línea horizontal no significa nada: se apaga y
cada paso lleva su propio filete arriba. */
.sd-pasos{grid-template-columns:1fr;padding-top:0;gap:26px}
.sd-pasos::before,.sd-pasos::after{display:none}
.sd-paso{padding-top:20px;border-top:1px solid var(--line)}
.sd-paso::before{display:none}
}
/* --- 14. Hero con foto: el degradado tiene que dejar leer el titular ---
El de la demo arrancaba en 5 % de negro y no bastaba sobre fotos
claras como la de Teià. Se refuerza abajo, que es donde vive el texto,
y se deja la mitad superior casi limpia para que la foto se vea. */
/* Dos velos, no uno.
El vertical solo se afinó a ojo, sin foto puesta. Con la de Teià —una
sala clarísima— el titular blanco caía a 1,58:1 sobre la pared del
fondo y el eyebrow desaparecía. El texto del hero vive todo en la
columna izquierda, así que el velo que hace falta es horizontal: oscurece
donde se lee y deja limpia la mitad derecha, que es la que se mira. */
.hero:not(.hero--claro)::after{
background:
linear-gradient(90deg,
rgba(20,14,8,.62) 0%,
rgba(20,14,8,.50) 30%,
rgba(20,14,8,.22) 58%,
rgba(20,14,8,0) 84%),
linear-gradient(180deg,
rgba(20,14,8,0) 0%,
rgba(20,14,8,.10) 38%,
rgba(20,14,8,.48) 68%,
rgba(20,14,8,.82) 100%);
}
/* En móvil el texto ocupa todo el ancho: ahí el velo horizontal no vale y
manda el vertical, reforzado. */
@media(max-width:700px){
.hero:not(.hero--claro)::after{
background:linear-gradient(180deg,
rgba(20,14,8,.30) 0%,
rgba(20,14,8,.44) 38%,
rgba(20,14,8,.66) 68%,
rgba(20,14,8,.86) 100%);
}
}
/* Y una sombra suave bajo el titular, para las fotos muy claras. */
.hero:not(.hero--claro) h1,
.hero:not(.hero--claro) p{text-shadow:0 1px 24px rgba(20,14,8,.35)}
/* --- 15. "Blog" fuera de la barra de escritorio ---
Con ocho secciones de nombre completo, el último enlace del menú se
salía de su propia caja (los hijos van con white-space:nowrap) y se
comía el teléfono: entre 1181 y 1399 px el .wrap mide 1240 y "Blog"
invadía el número hasta 12 px. Se lee "B933 006 157".
No se resuelve apretando más el menú: el blog no es una página
comercial y en la barra vale menos que el teléfono. Se queda en el
panel del móvil —nav.js lo clona con su clase— y en el pie. */
header .menu .sd-solo-panel{display:none}
/* --- 16. Las tres cifras de "Sobre nosotros", en rejilla ---
Iban en flex sin min-width, así que el tercer dato ("3 generaciones"
en serif de 2,1 rem, más un pie de 39 caracteres) crecía hasta
desbordar la columna del .split y dejaba el botón "Conocer el taller"
descolgado. En rejilla cada cifra ocupa un tercio y no puede empujar
a las demás. */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.stat{min-width:0}
.stat small{display:block}
@media(max-width:420px){
.stats{grid-template-columns:1fr 1fr;gap:20px}
}
/* --- 17. "Lo que incluye cada proyecto", sin caja ---
Mismo criterio que los pasos: fuera el fondo blanco y el borde, un
filete fino arriba y el dato en el texto. Cuatro cajas blancas con un
✓ es lo que tiene cualquier competidor. */
.sd-incluye{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(2,1fr);gap:clamp(26px,3.2vw,44px) clamp(30px,4vw,64px)}
.sd-incluye-i{padding-top:20px;border-top:1px solid var(--line);min-width:0}
.sd-incluye-i h3{font-family:var(--serif);font-size:1.375rem;font-weight:500;
margin:0 0 8px;line-height:1.3}
.sd-incluye-i p{color:var(--muted);font-size:.92rem;line-height:1.65;margin:0}
@media(max-width:700px){
.sd-incluye{grid-template-columns:1fr;gap:24px}
}
/* --- 18. El vacío del cierre ---
El pie reservaba 90 px abajo para la barra flotante del móvil, y en
escritorio esa barra no existe: eran 90 px de nada bajo el copyright.
La reserva pasa a donde vive la barra. Y la banda oscura llevaba el
mismo aire arriba que abajo; debajo de los botones no hay nada que
respirar, así que se recorta. */
footer{padding-bottom:56px}
@media(max-width:1000px){footer{padding-bottom:90px}}
.cta-final{padding-bottom:clamp(38px,3.4vw,50px)}
/* --- 19. La banda estrecha de la cabecera: 1181–1399 ---
Quitar "Blog" no basta. Entre 1181 y 1399 el .wrap todavía mide 1240 y
los enlaces, con white-space:nowrap, se salen de la caja del menú: a
1181 el último todavía invadía el teléfono 21 px. Se aprieta el aire,
no el texto: las etiquetas se quedan enteras y a 1181 quedan 35 px de
holgura medidos con getBoundingClientRect de los dos elementos. */
@media(min-width:1181px) and (max-width:1399px){
.nav{gap:clamp(10px,.95vw,18px)}
.menu{gap:clamp(9px,.9vw,16px)}
.navcta{gap:12px}
}
/* --- 20. El eyebrow del hero, blanco solo cuando hay foto detrás ---
El tostado #d4b8a0 nació para fondos sólidos y ahí va sobrado. Sobre la
foto de Teià —una sala clarísima— se quedaba en 2,90:1 con el velo ya
puesto, y necesita 4,5 por ser texto pequeño. En blanco sube a 4,59:1.
Se distingue por la foto, no por la plantilla, con el mismo mecanismo
que ya usa el bloque de arriba para el hueco sin foto: si hay ,
hay foto. El hero claro se queda fuera: ahí el fondo no lleva velo y el
blanco sería peor que el tostado. */
.hero:not(.hero--claro):has(img.bg) .eyebrow{color:#fff}
/* --- 21. El precio y su IVA, una sola pieza ---
El cliente publica sin IVA y el aviso va pegado a la cifra. A 40 px,
igualado al precio, el aviso competía con el número; baja un escalón
—0,68 em, unos 27 px— y la cifra vuelve a mandar.
Lo que NO cambia es lo que lo separaría de una nota al pie: mismo
color, misma familia y mismo grosor que el precio. Nada de gris
pequeño. Sigue siendo la línea de al lado, no letra menuda. */
.sd-precio{display:block}
.sd-precio-cifra,
.sd-precio-iva,
.sd-precio-plazo{
display:block;
font-weight:inherit;
font-family:inherit;
color:inherit;
line-height:1.1;
}
.sd-precio-cifra{font-size:inherit}
.sd-precio-iva{font-size:.68em;margin-top:.28em}
/* El plazo comparte jerarquía con el aviso de IVA: mismo escalón, misma
familia, mismo color. Es dato de servicio, no letra pequeña.
:empty lo esconde cuando la gama no tiene plazo confirmado; sin eso
quedaría un margen colgando bajo el precio. */
.sd-precio-plazo{font-size:.68em;margin-top:.06em}
.sd-precio-plazo:empty{display:none}
/* --- 22. El hero claro cuando de verdad lleva foto ---
El velo crema de más arriba ya estaba y aguanta: medido contra la foto
más oscura del archivo, el eyebrow da 5,56:1 y el titular 3,76:1 sobre
un mínimo de 3. Lo único que no pasaba era la entradilla, que va en
gris secundario (#6f675c) y se quedaba en 4,29:1 —y también en 4,34:1
con la foto más clara, así que no era culpa de la foto sino del gris,
que ya iba justo sobre crema liso.
Sobre una fotografía no hay gris secundario que valga: la entradilla
pasa a tinta y sube a 13,47:1. Sin foto no se toca nada. */
/* :not(.eyebrow) no es cosmético: el eyebrow es un
y sin excluirlo esta regla le robaba el burdeos de marca. */
.hero--claro:has(img.bg) p:not(.eyebrow){color:var(--ink)}
/* Pie aclaratorio de foto. Va en la tarjeta de vapor porque la imagen
enseña un hammam entero y la empresa solo pone el generador. Discreto
de tamaño, sí; opcional, no. */
.sd-aclaracion-foto{
color:var(--muted);
font-size:.78rem;
line-height:1.5;
margin-top:10px;
padding-top:10px;
border-top:1px solid var(--line);
}
/* --- 23. La secuencia de montaje de /nosotros/ ---
Cuatro fotos de una misma instalación, en el orden en que ocurrió.
Sustituyen a la foto de taller que no va a existir. Sin caja: la foto
manda y debajo van el número y el paso, como en los pasos del proceso
de la portada, para que las dos piezas se lean como la misma familia. */
.sd-taller-texto{max-width:640px;margin-bottom:clamp(30px,3.4vw,48px)}
.sd-montaje{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px)}
.sd-montaje-i{min-width:0}
.sd-montaje-i .ph{aspect-ratio:4/5;overflow:hidden;background:var(--paper2)}
.sd-montaje-i .ph img{width:100%;height:100%;object-fit:cover}
.sd-montaje-n{font-family:var(--serif);font-size:1.15rem;color:var(--bord);
line-height:1;margin:14px 0 0}
.sd-montaje-t{font-size:.9rem;color:var(--muted);line-height:1.45;margin:6px 0 0}
@media(max-width:860px){
.sd-montaje{grid-template-columns:1fr 1fr;gap:20px}
}
@media(max-width:460px){
/* A 380 dos columnas dejan la foto en 150 px y no se ve el trabajo,
que es lo único que esta secuencia tiene que enseñar. */
.sd-montaje{grid-template-columns:1fr;gap:26px}
}
/* --- 24. Casilla de consentimiento ---
Obligatoria en los tres formularios. Se lee, no se esconde: el texto va
al tamaño de la nota del formulario y el enlace a la política subrayado,
porque hay que poder llegar a ella desde donde se dan los datos. */
.sd-consent{
display:flex;
align-items:flex-start;
gap:10px;
margin:4px 0 18px;
font-size:.82rem;
line-height:1.5;
color:var(--muted);
}
.sd-consent input{
flex:0 0 auto;
width:16px;
height:16px;
margin-top:2px;
accent-color:var(--bord);
}
.sd-consent a{color:inherit;text-decoration:underline}
.sd-consent a:hover{color:var(--bord)}
/* En banda oscura —el resultado del configurador— hereda el color claro. */
.result .sd-consent{color:rgba(250,250,248,.72)}
/* --- 25. Las tres tarjetas de línea, alineadas por abajo ---
La de vapor lleva el pie que aclara que la obra del hammam no es
nuestra, y esos 56 px de más empujaban su "Ver equipos" 62 px por
debajo del de al lado: los tres enlaces caían a alturas distintas.
La caja ya medía lo mismo —es una rejilla—, lo que bailaba era el
contenido dentro. Con columna flexible y el enlace empujado al fondo,
los tres aterrizan en la misma línea aunque el texto de en medio
crezca. Y el pie se queda pegado a su foto, que es lo que exige la
regla: la aclaración acompaña a la imagen, no se va a otro sitio. */
.lin{display:flex;flex-direction:column}
.lin .ph{flex:0 0 auto}
.lin .go{margin-top:auto;padding-top:14px}
/* --- 26. La opción del configurador, sin icono ---
Quitados los emojis, la fila flexible de dos piezas se queda con una
sola: el gap y el centrado vertical ya no reparten nada. Vuelve a ser
un bloque.
Y aparece un defecto que el icono tapaba: .opt es un , así que
heredaba text-align:center y el título salía centrado sobre su propio
subtítulo. Con el icono al lado no cantaba; sin él, sí. */
.opt{display:block;text-align:left;gap:0;padding:14px 18px}
.opt b{display:block;margin-bottom:2px}
/* --- 27. La línea de los pasos, visible aunque no se anime ---
La burdeos se dibuja al entrar en pantalla: hasta entonces está a
scaleX(0). Si el reveal no llega —o una captura de página completa la
pilla antes—, lo único que queda son los cuatro puntos flotando sobre
los números, y eso parece un fallo, no un adorno.
El raíl gris de debajo ya existía, pero a 1 px de var(--line) casi no
se ve. Se refuerza para que la línea exista siempre y lo burdeos sea
solo el acabado. */
.sd-pasos::before{background:var(--arena);opacity:.9}
.sd-paso::before{background:var(--paper);border-color:var(--arena)}
.js-motion .sd-pasos.is-in ~ * .sd-paso::before,
.js-motion .sd-pasos.is-in .sd-paso::before{border-color:var(--bord)}
/* Y el fondo de la banda de cierre no se anima nunca: lo hace su
contenido. El div interior es el que lleva data-reveal. */
.cta-final-i{display:block}
/* --- 28. El hero sin foto no reserva el alto de una foto ---
.hero pide 86vh y .hero-sub 62vh porque una fotografía a sangre
necesita sitio. Sin foto eso son 560 px de crema vacío antes de que
empiece la página, y el visitante hace scroll para llegar al primer
párrafo. El hueco declarado sirve para que la maqueta no se descoloque
mientras falta la imagen, no para reservarle media pantalla.
Sin imagen, la cabecera mide lo que mide su texto. Vale para todas:
la regla mira si hay hueco, no de qué página se trata. */
.hero:has(.sd-hueco-foto){min-height:0}
.hero:has(.sd-hueco-foto) .wrap{
padding-top:clamp(40px,5vw,76px);
padding-bottom:clamp(34px,4.4vw,64px);
}
/* Y sin foto tampoco hay nada que rayar de fondo: el hueco se apaga.
Sigue en el DOM, que es lo que detecta el :has() de arriba y lo que
mantiene vivo el aviso de sd_todo() con WP_DEBUG. */
.hero .sd-hueco-foto.bg{display:none}
/* La flecha de "sigue bajando" sobra en una cabecera de texto. */
.hero:has(.sd-hueco-foto) .scrollcue{display:none}
/* Las migas van en blanco al 75 %, pensadas para foto oscura detrás.
En una cabecera sin foto —crema— eran invisibles: estaban ahí, con su
enlace y su texto, y no se veía ninguna de las dos cosas. Mismo caso en
el hero claro, que también tiene fondo pálido bajo ellas. */
.hero:has(.sd-hueco-foto) .bcrumb,
.hero--claro .bcrumb{color:var(--muted)}
.hero:has(.sd-hueco-foto) .bcrumb a:hover,
.hero--claro .bcrumb a:hover{color:var(--bord)}
/* --- 29. El plazo dentro de una tarjeta ---
En el configurador el plazo va pegado a la cifra y hereda su tamaño
(.sd-precio-plazo). En una tarjeta no hay cifra al lado: es una línea
suelta al pie del producto. Mismo criterio de siempre —color e
importancia de dato de servicio, no de letra menuda—, pero con tamaño
propio, porque heredar .68em de un párrafo de tarjeta lo dejaría en
letra pequeña de verdad. */
.sd-plazo-nota{
margin-top:16px;
padding-top:14px;
border-top:1px solid var(--line);
font-size:.9rem;
color:var(--ink);
}
/* --- 30. El precio dentro de una tarjeta de gama ---
.sd-precio-cifra hereda el tamaño de su contenedor, que en el
configurador es el bloque grande del resultado y aquí era el párrafo de
una tarjeta: la cifra salía a 15 px y el aviso del IVA, que va un
escalón por debajo, a 10 px. Eso ya es letra menuda, que es justo lo
que la regla del IVA prohíbe.
Se le da tamaño propio al contenedor y todo lo de dentro —cifra, aviso,
plazo e instalación— vuelve a su proporción. */
.npc-card .sd-precio{
font-family:var(--serif);
font-size:1.25rem;
line-height:1.2;
margin:14px 0 4px;
}
.npc-card .sd-precio-plazo{color:var(--muted)}
/* --- 31. La miga de pan cuando el hero no lleva foto ---
.bcrumb va en posición absoluta a 96 px del alto del hero. Eso funciona
mientras el hero mide 62vh por la foto: la miga flota arriba y el titular
vive abajo. Pero desde que un hero sin foto dejó de reservar altura
—regla 28—, el hero mide lo que mide su texto, y esos 96 px caen justo
encima del eyebrow. Los dos ilegibles, uno sobre otro.
Pasa en /hidroterapia/duchas/ y /crioterapia/, que son las dos fichas sin
foto propia. Dos reglas correctas por separado que juntas se estorban.
Sin foto, la miga vuelve al flujo y se coloca donde le toca.
AMPLIADO A TODAS LAS CABECERAS el 14 sep 2026. Con foto pasaba lo mismo,
y peor: .hero .wrap es position:relative, así que los 96 px se cuentan
desde el bloque de texto y no desde la cabecera, y la miga caía encima
del titular a TODOS los anchos. Medido con un iframe por página a 360,
380, 414, 768, 1024×600, 1280×720 y 1440×900: la única afectada era
/saunas/interior-a-medida/, la única con foto y miga. Pero en cuanto
llegue una foto a cualquier banda tinta le habría pasado lo mismo.
En el flujo, la miga va justo encima del eyebrow en todas. */
.hero .bcrumb,
.hero:has(.sd-hueco-foto) .bcrumb{
position:static;
margin-bottom:10px;
}
/* --- 32. Ficha de hidroterapia con un solo producto ---
Medido en el navegador: la tarjeta ocupaba 631 px de una rejilla de
1284 y dejaba 653 px vacíos a la derecha. Y la línea del envío, que va
debajo, se estiraba a los 1284 con su filete de arriba: leída así no
parecía una condición del producto, parecía una nota al pie de la
página entera.
Con un producto, la tarjeta se centra y se limita, y la línea del envío
se alinea con ella. Las dos cosas juntas se leen como un bloque. Con
dos o más productos no se toca nada: ahí la rejilla ya llena. */
.sd-fichas--una{
grid-template-columns:minmax(0,760px);
justify-content:center;
}
.sd-fichas--una + .sd-plazo-nota{
max-width:760px;
margin-left:auto;
margin-right:auto;
}
/* --- 33. Hero sin foto: banda tinta, no banda crema ---
Corrige la regla 28 sin contradecirla. Aquella decía que un hero sin
foto no reserva la altura de una imagen que no existe, y sigue siendo
verdad: no reservamos sitio para nada, ponemos una banda que se
sostiene sola.
El motivo es de coherencia, no de gusto: el patrón de esta web no es
"hay una foto arriba", es "cada sección abre con una banda a sangre y
el titular encima". La portada y /saunas/ lo hacen; /hidroterapia/ y
sus dos fichas abrían con texto sobre crema y parecían otra web.
Mismos colores que un hero con foto —el degradado los deja en blanco
sobre tinta de todas formas— y menos alto a propósito: 38vh en vez de
los 62vh de .hero-sub, porque una banda de color a 62vh es mucha nada.
Cuando llegue la foto no hay que rehacer nada: se rellena el slug y la
banda pasa a ser fotografía sola. */
.hero:has(.sd-hueco-foto){
min-height:38vh;
background:var(--ink);
}
.hero:has(.sd-hueco-foto) .wrap,
.hero:has(.sd-hueco-foto) h1,
.hero:has(.sd-hueco-foto) h1 em{color:#fff}
.hero:has(.sd-hueco-foto) .eyebrow{color:var(--arena)}
.hero:has(.sd-hueco-foto) p{color:rgba(255,255,255,.85)}
.hero:has(.sd-hueco-foto) .bcrumb{color:rgba(255,255,255,.75)}
.hero:has(.sd-hueco-foto) .bcrumb a:hover{color:#fff}
/* --- 34. Referencias profesionales ---
Son un aval, no un listín: tienen que leerse de un vistazo y no
obligar a leerlas enteras. Una por línea, sí —corridas y separadas por
guiones no se leen—, pero sin peso.
SIN CAJA. Las tres columnas traen 11, 7 y 4 nombres, y dentro de
tarjetas de igual altura la tercera dejaba 393 px de caja vacía,
medidos. El agujero no lo hacía el desequilibrio: lo hacía el borde
que lo dibujaba. Sin caja son tres columnas de un directorio, y que
una acabe antes que otra es lo normal y no se ve.
Sin filete entre nombres, y la población en la MISMA línea: con 22
obras, dos líneas cada una eran 44 líneas de pared. En muted, que se
distinga sin pesar, porque quien busca "sauna en Terrassa" tiene que
seguir encontrando Terrassa de un vistazo. */
.sd-refs-grid{align-items:start}
.sd-ref-grupo h3{
font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
color:var(--muted);margin-bottom:14px;
}
.sd-refs{list-style:none;margin:0;padding:0;display:grid;gap:7px;align-content:start}
.sd-refs li{font-size:.9rem;line-height:1.45;color:var(--ink)}
.sd-refs .loc{color:var(--muted)}
.sd-refs .loc::before{content:" · "}
/* --- 35. Referencias sueltas, fuera de la rejilla de /proyectos/ ---
En /generadores-de-vapor/profesionales/ la lista son tres nombres, no
22 repartidos en tres columnas. Hereda .sd-refs —un nombre por línea,
población al lado, sin caja— y solo cambia lo que el contexto pide:
una lista de tres a .9rem parece una nota al pie, así que sube a tamaño
de texto corrido y se le da aire entre líneas.
Ancho contenido: una línea de dos palabras estirada a 1.100 px deja el
nombre solo a la izquierda y el pueblo perdido a la derecha. */
.sd-refs--sueltas{max-width:520px;gap:12px;margin-top:22px}
.sd-refs--sueltas li{font-size:1rem}
/* --- 36. Tabla de tarifa de una gama ---
"Modelo = tarjeta, medida = fila de tabla": la decisión está escrita en
CLAUDE.md para las bañeras y vale igual aquí. Cuatro tamaños de la misma
sauna no son cuatro productos, son cuatro filas.
La cifra en serif y a la derecha, que es donde la busca el ojo, y con el
tamaño de un titular pequeño: en esta página el precio ES el contenido. */
.sd-tarifa{width:100%;border-collapse:collapse;margin-top:26px;
max-width:760px;margin-left:auto;margin-right:auto}
.sd-tarifa-cap{caption-side:top;text-align:left;font-size:.7rem;
letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
padding-bottom:12px}
.sd-tarifa th,.sd-tarifa td{padding:16px 4px;border-bottom:1px solid var(--line);
text-align:left;vertical-align:baseline}
.sd-tarifa thead th{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
color:var(--muted);font-weight:700;padding-bottom:10px}
.sd-tarifa thead th:last-child,.sd-tarifa td{text-align:right}
.sd-tarifa tbody th{font-weight:700;font-size:1rem}
.sd-tarifa tbody th small{display:block;font-size:.78rem;color:var(--muted);
margin-top:3px;font-weight:400}
.sd-tarifa td{font-family:var(--serif);font-size:1.35rem;white-space:nowrap}
.sd-tarifa tbody tr:last-child th,.sd-tarifa tbody tr:last-child td{border-bottom:none}
/* Las condiciones del precio, con el mismo peso que la cifra y no en letra
pequeña: es la regla de la casa. Lo que no se puede prometer se dice, y
lo que sí va incluido también. */
.sd-tarifa-notas{list-style:none;margin:18px auto 0;padding:0;max-width:760px;
display:grid;gap:8px}
.sd-tarifa-notas li{font-size:.94rem;color:var(--ink);padding-left:16px;
position:relative}
.sd-tarifa-notas li::before{content:"·";position:absolute;left:4px;
color:var(--bord);font-weight:700}
/* --- 38. Tarifa de tres columnas (exterior: eléctrica y leña) ---
En móvil, tres columnas con "Tradicional o infrarrojos" de cabecera no
caben a 380 px sin partir las cifras. Las cifras no se parten nunca
(white-space:nowrap en .sd-tarifa td): se encoge la cabecera y la
cifra, y el tamaño se queda con su línea. */
.sd-tarifa--tres thead th:not(:first-child){text-align:right}
.sd-tarifa-nd{color:var(--muted)}
.sd-tarifa-remite{font-family:var(--sans);font-size:.78rem;letter-spacing:.06em;
color:var(--bord);border-bottom:1px solid currentColor;white-space:normal}
@media(max-width:560px){
.sd-tarifa--tres th,.sd-tarifa--tres td{padding:13px 2px}
.sd-tarifa--tres thead th{font-size:.6rem;letter-spacing:.1em}
.sd-tarifa--tres td{font-size:1.02rem}
.sd-tarifa--tres tbody th{font-size:.9rem}
.sd-tarifa--tres tbody th small{font-size:.7rem}
}
/* --- 39. Maderas ---
.woods de la demo es de tres columnas fijas, y las naturales son cuatro:
tres y una huérfana. Con auto-fit las cuatro caben en una fila y las tres
termotratadas se reparten el ancho, sin columnas vacías. */
.sd-woods{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.sd-ficha-madera{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);
display:grid;gap:6px}
.sd-ficha-madera div{display:flex;justify-content:space-between;gap:12px;
font-size:.8rem;line-height:1.35}
.sd-ficha-madera dt{color:var(--muted);margin:0}
.sd-ficha-madera dd{margin:0;text-align:right;color:var(--ink)}
.sd-ficha-madera-nd{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
font-size:.8rem;color:var(--muted)}
.sd-maderas-gama{font-family:var(--serif);font-size:1.02rem;color:var(--ink)!important;margin-bottom:8px}
/* La tabla de estéticas reusa .sd-tarifa, pero su segunda columna es una
lista de nombres y no una cifra: a la izquierda, en sans y partiendo
línea, o a 380 px desborda. */
.sd-estetica td{text-align:left;font-family:var(--sans);font-size:.95rem;white-space:normal}
.sd-estetica thead th:last-child{text-align:left}
/* --- 40. Equipamiento: marcas y modelos ---
Reusa las tarjetas de madera (.wd) con otra cosa dentro: una marca y su
lista de modelos. "wifi" va marcado aparte porque es exactamente lo que
se busca ("control sauna wifi"). */
.sd-equipo-titulo{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:18px}
.sd-equipo-modelos{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:7px}
.sd-equipo-modelos li{font-size:.95rem;color:var(--ink);display:flex;
align-items:baseline;gap:8px;flex-wrap:wrap}
.sd-equipo-etiqueta{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--bord);border:1px solid currentColor;padding:1px 6px;line-height:1.5}
/* --- 41. Contacto: la columna de datos ---
El teléfono grande y en serif: es lo que más se usa de toda la página y
quien llega aquí desde el móvil lo pulsa. Lo demás, en lista de dos
columnas que en móvil se apila. */
.sd-contacto-datos h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:10px 0 22px}
.sd-contacto-lista{margin:0;display:grid;gap:0;border-top:1px solid var(--line)}
.sd-contacto-lista div{display:grid;grid-template-columns:110px 1fr;gap:14px;
padding:14px 0;border-bottom:1px solid var(--line)}
.sd-contacto-lista dt{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
color:var(--muted);padding-top:4px}
.sd-contacto-lista dd{margin:0;font-size:.98rem;color:var(--ink);line-height:1.5}
.sd-contacto-lista a{color:var(--ink);border-bottom:1px solid var(--line)}
.sd-contacto-lista a:hover{border-bottom-color:var(--bord)}
.sd-contacto-tel{font-family:var(--serif);font-size:1.5rem;border-bottom:none!important}
.sd-contacto-mandar{margin-top:30px}
.sd-contacto-mandar h3{font-size:1.375rem}
@media(max-width:560px){
.sd-contacto-lista div{grid-template-columns:1fr;gap:4px}
}
/* --- 42. Tarifa de tres columnas a 380 px: aire entre las cifras ---
Medido en el navegador a 380: la tabla cabe (324 px, sin desbordar),
pero la columna de leña quedaba a 73 px pegada a la de eléctrica y
"9.000 € 10.000 €" se leía como una sola cifra. Separación a la
izquierda de cada celda de precio y la del tamaño más estrecha. */
@media(max-width:560px){
.sd-tarifa--tres td{padding-left:16px;font-size:.98rem}
.sd-tarifa--tres tbody th{width:38%}
}
/* --- 43. Pie de foto dentro de una cabecera ---
Para las cabeceras con foto de un baño de vapor: la regla es que ninguna
foto de hammam va sin la aclaración de que la obra la hizo un equipo de
reformas. En la cabecera no hay figcaption, así que va como línea
pequeña bajo la entradilla. */
.hero .sd-hero-pie{margin-top:14px;font-size:.78rem;letter-spacing:.02em;
max-width:520px;opacity:.85}
/* --- 44. Carrusel de logos de clientes (final de la portada) ---
Fondo BLANCO PURO y no crema: los logos traen fondo blanco opaco, y así
se funden sin recorte ni halo. Sin degradados en los bordes.
Cuántos por página lo decide --por-pagina, y el script lo lee de aquí:
· 5 a partir de 1180 px. Por debajo, 5 por página dejaría los logos
con subtítulo por debajo de los 200 px de ancho que necesitan.
· 3 entre 760 y 1179, por el mismo motivo.
· 2 en móvil, con los logos a un 62 % de su tamaño de escritorio: en
móvil no hay suelo de 200 px (decisión del cliente) y la banda es
más baja.
Cada logo trae su tamaño óptico en --w/--h; el hueco lo limita con
max-width, así que los muy apaisados ceden antes que los demás. */
.sd-clientes{background:#fff}
.sd-carrusel{--por-pagina:5;--escala:1}
@media(max-width:1179px){.sd-carrusel{--por-pagina:3}}
@media(max-width:689px){.sd-carrusel{--por-pagina:2;--escala:.62}}
/* Sin script: carril con desplazamiento y ajuste por logo. */
.sd-carrusel-ventana{overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
.sd-carrusel-pista{list-style:none;margin:0;padding:0;display:flex}
.sd-carrusel-item{flex:0 0 calc(100% / var(--por-pagina));box-sizing:border-box;
height:calc(var(--alto-max) * var(--escala));padding:0 10px;
display:flex;align-items:center;justify-content:center;scroll-snap-align:start}
.sd-carrusel-item img{display:block;width:calc(var(--w) * var(--escala));height:auto;
max-width:100%;max-height:100%;object-fit:contain;
-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
/* Con script: páginas. La pista mide lo que la ventana, así que un hueco
es 100 % / por-pagina de su propio ancho. */
.sd-carrusel--js .sd-carrusel-ventana{overflow:hidden;touch-action:pan-y}
.sd-carrusel--js .sd-carrusel-pista{
transform:translateX(calc(var(--inicio,0) * -100% / var(--por-pagina) + var(--arrastre,0px)));
transition:transform .4s cubic-bezier(.22,1,.36,1)}
.sd-carrusel--arrastrando .sd-carrusel-pista{transition:none}
@media (prefers-reduced-motion:reduce){.sd-carrusel--js .sd-carrusel-pista{transition:none}}
/* Flechas debajo y centradas: a los lados le quitarían a cada hueco el
ancho que los logos con subtítulo necesitan, y en móvil no caben. */
.sd-carrusel-controles{display:flex;justify-content:center;gap:12px;margin-top:36px}
.sd-carrusel-flecha{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);
background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;
transition:border-color .2s ease,color .2s ease,opacity .2s ease}
.sd-carrusel-flecha[hidden]{display:none}
.sd-carrusel-flecha:hover:not(:disabled){border-color:var(--ink)}
.sd-carrusel-flecha:focus-visible{outline:2px solid var(--bord);outline-offset:3px}
.sd-carrusel-flecha:disabled{opacity:.3;cursor:default}
@media(max-width:689px){
.sd-clientes.pad{padding-top:56px;padding-bottom:56px}
.sd-carrusel-controles{margin-top:22px}
.sd-carrusel-flecha{width:44px;height:44px}
}
/* --- 45. Datos del titular en los textos legales ([sd_titular_datos]) --- */
.sd-titular-datos{margin:22px 0;border-top:1px solid var(--line)}
.sd-titular-datos div{display:grid;grid-template-columns:180px 1fr;gap:16px;
padding:10px 0;border-bottom:1px solid var(--line)}
.sd-titular-datos dt{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sd-titular-datos dd{margin:0}
@media(max-width:560px){.sd-titular-datos div{grid-template-columns:1fr;gap:2px}}
/* --- 46. Venta de piezas: qué incluye y qué no ---
Dos columnas del mismo peso. La de "no incluye" no va en gris ni más
pequeña: es la mitad de la condición, no una nota. */
.sd-venta-pieza-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,28px);max-width:900px;margin:0 auto}
.sd-venta-pieza-col{background:#fff;border:1px solid var(--line);padding:clamp(22px,3vw,32px)}
.sd-venta-pieza-col--si{border-top:3px solid var(--ink)}
.sd-venta-pieza-col--no{border-top:3px solid var(--bord)}
.sd-venta-pieza-col h3{font-size:1.375rem;margin-bottom:14px}
.sd-venta-pieza-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sd-venta-pieza-col li{position:relative;padding-left:26px;color:var(--ink);font-size:1rem;line-height:1.5}
.sd-venta-pieza-col--si li::before{content:"✓";position:absolute;left:0;color:var(--ink);font-weight:700}
.sd-venta-pieza-col--no li::before{content:"✕";position:absolute;left:0;color:var(--bord);font-weight:700}
.sd-venta-pieza-pie{max-width:900px;margin:clamp(22px,3vw,30px) auto 0;font-size:1rem;color:var(--ink);line-height:1.6}
.sd-venta-pieza-pie strong{font-weight:700}
@media(max-width:700px){.sd-venta-pieza-cols{grid-template-columns:1fr}}
/* Lo que hace falta para pedir, junto al formulario. */
.sd-pedir-lista{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--line)}
.sd-pedir-lista li{padding:14px 0;border-bottom:1px solid var(--line);font-size:.98rem;color:var(--ink);line-height:1.5}
.sd-pedir-lista li span{display:block;color:var(--muted);font-size:.9rem;margin-top:3px}
/* Tabla de compatibilidades (se pinta cuando haya datos). */
.sd-compat{width:100%;border-collapse:collapse;font-size:.96rem}
.sd-compat th,.sd-compat td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.sd-compat th{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700}
.sd-compat-scroll{overflow-x:auto}
/* --- 47. Cabecera de /generadores-de-vapor/: foto entera y velo lateral ---
La foto de Teià es clarísima y con el hero claro llevaba un velo crema
encima: lavaba el color y hacía cantar las manchas de la puerta de
madera. Aquí la foto va a plena intensidad, sin estirar, y el único velo
es oscuro, de izquierda a derecha, solo donde vive el texto, que pasa a
crema. La mitad derecha (la puerta) queda sin velo.
MEDIDO el 14 sep 2026, texto contra el píxel de fondo más claro de cada
línea y sin contar la sombra: el primer velo (0,84 → 0 al 74 %) dejaba la
primera línea del titular en 2,20:1 sobre la pared iluminada. Con este,
peor línea: titular 6,16:1, pie 7,53:1. En móvil, el velo anterior (0,18
arriba) dejaba el eyebrow en 2,01 y el titular en 1,77; con este, peor
línea 6,47:1. Si cambia la foto, se vuelve a medir.
Descartado el reencuadre sin la puerta: estiraba un 40 % una foto de
1600 px. Pendiente el original de cámara (Alonso).
Se declara después de la regla general de .hero:not(.hero--claro) y con
más especificidad, así que la sustituye (sin el velo vertical). */
.hero.hero--lateral::after{
background:linear-gradient(90deg,
rgba(20,14,8,.86) 0%,
rgba(20,14,8,.80) 36%,
rgba(20,14,8,.62) 56%,
rgba(20,14,8,.26) 68%,
rgba(20,14,8,0) 80%);
}
.hero.hero--lateral h1{color:#f6efe3}
.hero.hero--lateral p:not(.eyebrow){color:rgba(246,239,227,.92)}
.hero.hero--lateral .bcrumb,.hero.hero--lateral .bcrumb a{color:rgba(246,239,227,.8)}
.hero.hero--lateral:has(img.bg) .eyebrow{color:#d4b8a0}
/* En móvil el texto ocupa todo el ancho y un velo lateral no lo cubre:
vertical, y la foto centrada en el arco (que ya deja fuera la puerta). */
@media(max-width:700px){
.hero.hero--lateral::after{
background:linear-gradient(180deg,
rgba(20,14,8,.70) 0%,
rgba(20,14,8,.74) 45%,
rgba(20,14,8,.86) 75%,
rgba(20,14,8,.92) 100%);
}
.hero.hero--lateral img.bg{object-position:34% 50%}
}
/* Y por debajo de 1280 px, APILADA: foto arriba, entera y a sangre, y el
texto debajo sobre tinta lisa. Medido el 23 sep 2026, texto contra el
píxel de fondo más claro de cada TRAZO de texto (con el texto escondido),
en las cuatro cabeceras oscuras (vapor, particulares, profesionales y
"baño turco en casa"), con el lateral sin apilar:
a 1280 → peor 4,56:1 (la entrada del blog); las otras, 6 o más
a 1240 → 4,43:1 · a 1180 → 2,82:1 · a 1024 → 1,50:1 · a 768 → 1,07:1
Así que el lateral vale desde 1280 y por debajo se apila.
OJO, CORREGIDO EL MISMO DÍA: la primera medición daba 2,71:1 a 1280 y
llevó el corte a 1440. Estaba mal: medía también la caja del envoltorio
de línea de data-lines, que llega al ancho máximo del titular aunque el
texto acabe antes. Midiendo solo los trazos, 1280 pasa.
El 14 sep solo se midió a 1440 y a 380. Entre medias el titular ocupa
casi todo el ancho y se sale del velo, que se apaga al 68-80 %. Tapar
más con el velo apagaba la foto entera, que es justo lo que la regla de
cabeceras con foto (Manu, 23 sep 2026) prohíbe: en móvil ya se leía como
una banda oscura. Es la solución de la regla 49 para las claras,
con tinta en lugar de crema porque el texto de esta cabecera es crema. */
@media(max-width:1279px){
.hero.hero--lateral:has(img.bg){min-height:0;display:block;padding-top:min(52vw,600px);background:var(--ink)}
.hero.hero--lateral:has(img.bg) img.bg{height:min(52vw,600px);bottom:auto;object-position:50% 50%}
.hero.hero--lateral:has(img.bg)::after{inset:0 0 auto 0;height:min(52vw,600px);
background:linear-gradient(180deg,rgba(26,26,26,0) 62%,var(--ink) 100%)}
.hero.hero--lateral:has(img.bg) .wrap{padding-top:28px}
}
@media(max-width:700px){
.hero.hero--lateral:has(img.bg){padding-top:64vw}
.hero.hero--lateral:has(img.bg) img.bg,
.hero.hero--lateral:has(img.bg)::after{height:64vw}
.hero.hero--lateral:has(img.bg) .wrap{padding-top:20px}
}
/* --- 48. Publicación de un tercero bajo la galería de proyectos ---
Una línea centrada con un filete, del ancho del párrafo de cierre. Es
un aval verificable, no un reclamo: sin logo del medio y sin caja. */
.sd-publicacion{max-width:680px;margin-left:auto;margin-right:auto;text-align:center;
padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:.95rem}
.sd-publicacion a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--bord);text-underline-offset:.2em}
.sd-publicacion a:hover{color:var(--bord)}
/* --- 49. Cabeceras claras con foto en móvil: foto arriba, texto debajo ---
Medido el 14 sep 2026 a 380 px, texto contra el píxel de fondo más
desfavorable de cada línea: /saunas/, /proceso/, /nosotros/, /proyectos/
y /saunas/interior-a-medida/ NO pasaban (titulares hasta 1,02:1 sobre
follaje y madera). El velo crema de .hero--claro es lateral y desde
abajo: en escritorio el texto vive en la esquina y funciona; en móvil el
texto ocupa la cabecera entera y un velo que lo tapara todo borraría la
foto. Así que en móvil la foto va arriba, a sangre y fundida con el
fondo, y el texto debajo sobre crema liso. */
@media(max-width:700px){
.hero--claro:has(img.bg){min-height:0;display:block;padding-top:64vw;background:var(--paper)}
.hero--claro:has(img.bg) img.bg{height:64vw;bottom:auto}
.hero--claro:has(img.bg)::after{inset:0 0 auto 0;height:64vw;
background:linear-gradient(180deg,rgba(250,250,248,0) 60%,var(--paper) 100%)}
/* 20 px, no 10: con el eyebrow a 11 px el titular subía 10 px y quedaba a
80 px de la foto. Manu, 15 sep 2026: el titular donde estaba. */
.hero--claro:has(img.bg) .wrap{padding-top:20px}
}
/* La miga, gris y pequeña, se quedaba en 3,80:1 sobre la foto en
escritorio (interior a medida). Sobre foto, en tinta como la entradilla. */
.hero--claro:has(img.bg) .bcrumb{color:var(--ink)}
/* --- 50. Cabeceras claras con foto en escritorio: contraste a todos los anchos ---
Medido el 14 sep 2026 en /saunas/, /nosotros/, /proceso/, /proyectos/ e
interior a medida, a 768×1024, 1024×768, 1024×900, 1280×720, 1280×800,
1366×768 y 1440×900, con el fondo en contacto con la letra (3 px).
Con lo que había fallaban 17 casos: el velo es proporcional, pero el texto
tiene tamaño fijo y a anchos intermedios ocupa más fracción de la cabecera.
Descartado: ensanchar el velo (aclara todas las fotos), un halo detrás del
texto (se nota antes de pasar) y acortar textos.
1) Entre 701 y 1439 px, el mismo velo con MÁS OPACIDAD donde ya estaba
(termina igual, en el 68 %): no cubre más foto. Desde 1440, el aprobado.
2) Eyebrow: el 14 sep iba en #501119 (rojo oscurecido), porque con el
eyebrow a 17,6 px el #8b1a2b daba 2,81:1 a 1440. Con el eyebrow del
manual (12 px, 0,2em, Lato 700) la línea es mucho más corta y no sale
del velo: re-medido el 15 sep 2026 con capturas reales en #8B1A2B,
35 de 35, peor punto 5,61:1 (/saunas/ a 1440). Va en el rojo de marca y
el oscurecido sobra. Repaso a ojo hecho en las 35.
3) Solo /saunas/ (hero--apilar-intermedio), entre 701 y 1279 px: foto
arriba y texto debajo. Con 1 y 2 seguía fallando su eyebrow a 768×1024
(3,73) y a 1024×900 (3,21): el follaje cae justo detrás. Re-medido sin
apilar el 15 sep con la tipografía nueva: el eyebrow ya pasa, pero el
titular cae a 2,35:1 a 1024×768. Se queda.
Con las tres: 35 de 35. */
@media(min-width:701px) and (max-width:1439px){
.hero--claro:has(img.bg)::after{
background:
linear-gradient(100deg,
rgba(250,250,248,.98) 0%,
rgba(250,250,248,.94) 30%,
rgba(250,250,248,.62) 52%,
rgba(250,250,248,0) 68%),
linear-gradient(180deg,
rgba(250,250,248,0) 42%,
rgba(250,250,248,.62) 76%,
rgba(250,250,248,.94) 92%,
var(--paper) 100%);
}
}
@media(min-width:701px) and (max-width:1279px){
.hero--claro.hero--apilar-intermedio:has(img.bg){min-height:0;display:block;padding-top:min(46vw,560px);background:var(--paper)}
.hero--claro.hero--apilar-intermedio:has(img.bg) img.bg{height:min(46vw,560px);bottom:auto}
.hero--claro.hero--apilar-intermedio:has(img.bg)::after{inset:0 0 auto 0;height:min(46vw,560px);
background:linear-gradient(180deg,rgba(250,250,248,0) 70%,var(--paper) 100%)}
.hero--claro.hero--apilar-intermedio:has(img.bg) .wrap{padding-top:28px}
/* Sobre crema liso el rojo de marca de siempre pasa de sobra (8,3:1). */
.hero--claro.hero--apilar-intermedio:has(img.bg) .eyebrow{color:var(--bord)}
}
/* --- 51. Pesos de Lato en cabeceras y cabeceras de sección (14 sep 2026) ---
El eyebrow es un , y .hero p y .shead p pesan más que
.eyebrow: al pasar la entradilla a Lato 300 (subtítulo del manual), el
eyebrow se fue a 300 con ella y se leía fino. La etiqueta va a 700.
Y sobre foto la entradilla va a 400: el 300 pasa el contraste de color
pero su trazo se pierde con la textura. Sobre fondo liso sigue en 300. */
.hero .eyebrow,.shead .eyebrow,.phero .eyebrow,.bl-head .eyebrow{font-weight:700}
.hero:has(img.bg) p:not(.eyebrow){font-weight:400}
/* Titular de las cabeceras claras con foto en Playfair 600 (Manu, 14 sep
2026). A 500 el filete fino de la Didone se pierde sobre la foto aunque la
medida de contraste pase; a 600 se lee, y además el titular corta antes y
se queda dentro del velo (/proceso/ a 1024). El 700 quedaba pesado. */
.hero--claro:has(img.bg) h1{font-weight:600}
/* --- 52. Foto de producto (16 sep 2026) ---
Un equipo, no una obra: las de catálogo vienen recortadas sobre blanco y
un recorte fijo les come el producto. Marco blanco de 4:3 y la foto
entera dentro (contain). Las que son foto de verdad llenan el marco
(--foto). El pie, en el tono de dato de servicio, no en letra menuda. */
.sd-foto-producto{margin:0 0 18px}
.sd-foto-producto .marco{display:block;aspect-ratio:4/3;background:#fff;
border:1px solid var(--line);overflow:hidden}
.sd-foto-producto img{display:block;width:100%;height:100%;object-fit:contain;padding:5%}
.sd-foto-producto--foto img{object-fit:cover;padding:0}
.sd-foto-producto figcaption{margin-top:8px;font-size:.88rem;color:var(--ink)}
.sd-fotos-producto{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
margin-top:28px}
.sd-fotos-producto .sd-foto-producto{margin:0}
@media(max-width:860px){.sd-fotos-producto{grid-template-columns:repeat(2,1fr)}}
.wd .sd-foto-producto{margin:14px 0 12px}
/* Una sola foto, sin estirarse: el panel de control junto a las fotos de
recinto de vapor. Varias fotos en fila ya no van aquí, van en la tira
(regla 57). */
.sd-fotos-producto--solo{grid-template-columns:minmax(0,420px);justify-content:center}
@media(max-width:860px){.sd-fotos-producto--solo{grid-template-columns:minmax(0,420px)}}
.sd-venta-pieza-foto{max-width:560px;margin:0 auto clamp(22px,3vw,30px)}
.sd-venta-pieza-foto .sd-foto-producto{margin:0}
.sd-venta-pieza-foto figcaption{text-align:center}
/* El enlace a la otra tarifa, dentro de las condiciones: que se vea que lo es. */
.sd-tarifa-notas a{color:var(--bord);border-bottom:1px solid currentColor}
/* --- 54. Iconos (20 sep 2026) ---
Juego cerrado en inc/iconos.php: 24×24, un solo trazo de 1,6, sin
relleno. El trazo es currentColor, así que el color lo decide quien lo
usa y el mismo dibujo sirve sobre crema y sobre tinta.
flex:none para que no se encoja dentro de una fila de dato; la altura de
línea a 0 para que el SVG no arrastre el interlineado del texto vecino. */
.sd-icono{display:block;flex:none;line-height:0}
/* --- 55. Bloque de razones (pieza 4, 20 sep 2026) ---
Icono, título corto y una o dos líneas. No es una tarjeta: con caja,
borde y sombra, seis razones se leen como seis productos. Aquí manda el
dato, así que cada razón va abierta y separada solo por un filete
superior, que es lo que ordena la rejilla sin encerrar nada.
El icono hereda el burdeos por currentColor: el color lo pone esta
regla, nunca el SVG. */
.sd-razones{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,38px) 32px}
.sd-razon{border-top:1px solid var(--line);padding-top:20px}
.sd-razon-icono{display:block;color:var(--bord);margin-bottom:14px}
.sd-razon h3{font-size:1.22rem;margin-bottom:10px}
.sd-razon p{color:var(--muted);font-size:.96rem}
@media(max-width:900px){.sd-razones{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.sd-razones{grid-template-columns:1fr;gap:26px}}
/* --- 56. Figura de foto con altura máxima (pieza 2, 20 sep 2026) ---
Sustituye a .bl-fig y absorbe la antigua regla 53 (.sd-detalle).
EL TOPE ES EL MOTIVO DE LA PIEZA. Medido, no supuesto: a 16/10 y al ancho
del wrap (1.284 px), la foto del respiro de /saunas/ salía a 802 px de
alto, el 89 % de una ventana de 900. Una foto así se lee como final de
página. Con max-height el alto se recorta y el ancho sigue al 100 %, así
que la foto NO se deforma: la recorta object-fit.
El tope no vale para las cabeceras (decisión de Manu, 20 sep 2026): la
portada se queda en 86vh.
OJO: la proporción se declara, nunca se deja en auto. WordPress mete
img:is([sizes="auto"…]){contain-intrinsic-size:3000px 1500px} para las
imágenes diferidas, y sin proporción declarada ese hueco manda: la foto
sale en blanco ocupando 1.500 px de alto. Visto a 380 px el 20 sep 2026.
El detalle, en el vault → 20 Incidentes. */
.sd-figura{margin:clamp(28px,4vw,44px) 0}
.sd-figura img{width:100%;height:auto;object-fit:cover;max-height:68vh}
.sd-figura--ancha img,.sd-figura--plena img{aspect-ratio:16/10}
/* Vertical: 4/5 y contenida. A 16/10 se le corta lo que cuenta. */
.sd-figura--alta{max-width:520px;margin-left:auto;margin-right:auto}
.sd-figura--alta img{aspect-ratio:4/5}
.sd-figura figcaption{color:var(--muted);font-size:.82rem;margin-top:12px;
border-left:2px solid var(--bord);padding-left:12px;text-align:left}
@media(max-width:700px){.sd-figura img{max-height:56vh}}
/* --- 57. Tira de fotos uniforme (pieza 3, 20 sep 2026) ---
Accesorios, modelos y detalles: todas iguales o no es una tira.
Cuadrada, no 4:3 como la foto de producto suelta (regla 52): en fila, el
cuadrado es lo único que no baila cuando una foto viene apaisada y la
siguiente vertical. El marco sigue siendo el de la 52 —blanco y con un
filete—, así que la foto de catálogo entra entera y no se recorta ningún
producto.
Con número impar, la última se centra en lugar de quedarse sola a la
izquierda, que es el mismo criterio de la galería (regla 37). */
.sd-tira{display:grid;gap:18px;margin:14px 0 12px}
.sd-tira--4{grid-template-columns:repeat(4,1fr)}
.sd-tira--3{grid-template-columns:repeat(3,1fr)}
.sd-tira--2{grid-template-columns:repeat(2,1fr)}
.sd-tira .sd-foto-producto{margin:0}
.sd-tira .sd-foto-producto .marco{aspect-ratio:1/1}
.sd-tira .sd-foto-producto figcaption{font-size:.84rem}
@media(max-width:860px){.sd-tira--4,.sd-tira--3{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(max-width:560px){
.sd-tira--4,.sd-tira--3,.sd-tira--2{grid-template-columns:repeat(2,1fr)}
.sd-tira > :last-child:nth-child(odd){grid-column:1/-1;width:min(100%,calc(50% - 7px));margin-inline:auto}
}
/* --- 58. Tarjeta de gama (pieza 1, 21 sep 2026) ---
Foto con recorte fijo, nombre, precio con su "sin IVA", separador y los
cuatro datos con icono. El dato va delante del párrafo: cuatro filas con
icono dicen más que tres líneas de prosa, que es de lo que iba el
encargo.
La foto va a 4/5 y no a 4/3 porque el archivo es vertical: las diecisiete
saunas que hay son verticales, y un recorte apaisado les corta el banco.
SIN FOTO: banda lisa del mismo alto (--banda), no un recuadro vacío. Es
el patrón de la banda tinta de las cabeceras; se lee como decisión.
HUECO DE DATO (.sd-dato--falta): la fila se queda, con una raya en gris.
Quitarla descuadraría la rejilla y, sobre todo, disimularía la falta.
Nada de precios tachados ni pastillas de ahorro (Manu, 20 sep 2026). */
.sd-tarjetas{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
/* Las cuatro gamas que se venden, en una sola fila (21 sep 2026).
grid-auto-rows:1fr para que midan lo mismo TAMBIÉN cuando la rejilla baja
a dos columnas: con filas automáticas, cada fila se ajusta a su contenido
y las de arriba y abajo pueden quedar desiguales. Hoy coinciden por
casualidad; con esto coinciden por regla. */
.sd-tarjetas--cuatro{grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:20px}
.sd-tarjeta{display:flex;flex-direction:column;background:#fff;
border:1px solid var(--line);border-top:3px solid var(--bord)}
.alt .sd-tarjeta{background:var(--paper)}
.sd-tarjeta-foto{position:relative;overflow:hidden}
/* Cuadrada, no 4/5: con cuatro tarjetas en fila, el 4/5 hacía que la
tarjeta entera no cupiera en una pantalla (Manu, 21 sep 2026). */
.sd-tarjeta-foto img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover}
.sd-tarjeta-foto--banda{aspect-ratio:1/1;background:var(--paper2);
border-bottom:1px solid var(--line)}
.sd-tarjeta-cuerpo{display:flex;flex-direction:column;flex:1;
padding:clamp(20px,2.4vw,26px)}
.sd-tarjeta-cuerpo .lab{display:block;font-size:.66rem;letter-spacing:.24em;
text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.sd-tarjeta h3{font-size:1.375rem;margin-bottom:12px}
.sd-tarjeta-precio{display:flex;flex-direction:column;gap:2px;margin-bottom:16px}
.sd-tarjeta-precio .sd-precio-cifra{font-family:var(--serif);font-size:1.5rem;
line-height:1.1}
/* El aviso del IVA, con el mismo peso visual que la cifra: nunca letra menuda. */
.sd-tarjeta-precio .sd-precio-iva{font-size:.82rem;color:var(--muted)}
/* El separador: el filete que parte la tarjeta en dos mitades, la comercial
y la técnica. */
.sd-tarjeta-datos{list-style:none;display:grid;gap:12px;margin:0 0 18px;
padding-top:18px;border-top:1px solid var(--line)}
.sd-dato{display:flex;gap:11px;align-items:flex-start}
.sd-dato-icono{color:var(--bord);margin-top:1px}
.sd-dato-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.sd-dato-etiqueta{font-size:.68rem;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--muted)}
.sd-dato-valor{font-size:.94rem;line-height:1.35}
.sd-dato--falta .sd-dato-icono,.sd-dato--falta .sd-dato-valor{color:var(--muted);opacity:.75}
.sd-tarjeta-texto{color:var(--muted);font-size:.94rem;margin-bottom:20px}
/* El botón, abajo del todo y a la misma altura en todas las tarjetas. */
.sd-tarjeta .btn{margin-top:auto}
/* La línea de las gamas que vienen. Discreta a propósito: la página va de
lo que se puede comprar hoy. */
.sd-proximas{margin-top:clamp(22px,3vw,30px);text-align:center;
color:var(--muted);font-size:.9rem;font-weight:300}
@media(max-width:1100px){.sd-tarjetas--cuatro{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.sd-tarjetas{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(max-width:620px){
.sd-tarjetas{grid-template-columns:1fr}
/* En una columna la banda no alinea nada con nadie, y a 380 px son 400 px
de nada antes del primer texto: fuera. La tarjeta empieza por su
etiqueta y se lee igual. En dos y tres columnas se queda, que ahí sí
sostiene la rejilla. */
.sd-tarjeta-foto--banda{display:none}
}
/* --- 59. Carril deslizable (21 sep 2026) ---
El patrón de móvil para tarjetas y galerías: en lugar de apilar, se
desliza, y se ve UNA Y MEDIA para que se note que hay más detrás.
Sin JavaScript: scroll-snap y desbordamiento. Los márgenes negativos
sacan el carril a sangre y el padding devuelve el aire del wrap, para que
la primera tarjeta empiece alineada con el texto y la última pueda salir
por el borde.
La barra se esconde por estética; el arrastre con el dedo y la rueda
siguen funcionando, y con teclado el carril es enfocable. */
@media(max-width:620px){
.sd-carril{display:flex;grid-template-columns:none;overflow-x:auto;
scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
gap:14px;margin-inline:-28px;padding-inline:28px;padding-bottom:6px;
scroll-padding-left:28px;scrollbar-width:none}
.sd-carril::-webkit-scrollbar{display:none}
.sd-carril>*{flex:0 0 70%;scroll-snap-align:start}
}
/* --- 60. Galería (pieza 2b, 21 sep 2026) ---
La regla: hasta 4 fotos, todas en la misma fila; más de 4, carril; nunca
una foto sola en su fila. Sustituye a .gal y .gal--dos, que con tres
fotos dejaban la tercera sola y del doble de tamaño que sus hermanas.
Recorte vertical (4/5) y misma altura en todas: estas fotos existen por
su alto —una sauna bajo una escalera, otra contra un techo inclinado— y
un recorte apaisado se come el argumento.
En móvil no se apilan: son tres pantallas seguidas. Van en carril
(regla 59), con una y media a la vista. */
.sd-galeria{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:16px}
.sd-galeria .g{position:relative;overflow:hidden;background:var(--paper2);
display:block;margin:0}
.sd-galeria .g img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;
transition:transform .8s cubic-bezier(.22,1,.36,1)}
.sd-galeria .g:hover img{transform:scale(1.06)}
.sd-galeria .g::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,transparent 45%,rgba(20,14,8,.72))}
.sd-galeria .cap{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;
color:#fff;display:grid;gap:2px}
.sd-galeria .cap b{font-family:var(--serif);font-weight:500;font-size:1.05rem}
.sd-galeria .cap small{font-size:.76rem;letter-spacing:.14em;
text-transform:uppercase;color:rgba(255,255,255,.82)}
/* Más de 4: carril a todos los anchos. Las fotos mantienen su ancho y el
carril se desliza, en vez de apretarlas hasta que no se ve nada. */
.sd-galeria--carril{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
gap:16px;scrollbar-width:none;margin-inline:-28px;padding-inline:28px;
scroll-padding-left:28px;padding-bottom:6px}
.sd-galeria--carril::-webkit-scrollbar{display:none}
.sd-galeria--carril>.g{flex:0 0 clamp(240px,26%,320px);scroll-snap-align:start}
@media(max-width:900px){.sd-galeria{gap:14px}}
/* El carril de móvil, con las dos clases.
TRAMPA DE ORDEN: .sd-galeria y .sd-carril tienen la misma especificidad
—una clase cada una— y esta regla va DESPUÉS de la 59, así que su
display:grid ganaba y en el móvil salían tres columnas de 90 px en vez
del carril. Con las dos clases juntas sube la especificidad y ya manda
la intención. Visto en captura a 380 px el 21 sep 2026. */
@media(max-width:620px){
.sd-galeria.sd-carril{display:flex}
}
/* --- 61. Esquinas redondeadas (21 sep 2026) ---
Todo el radio de la web sale de los tokens de :root. Aquí solo se dice
QUÉ pieza lleva cuál, para que no haya dos criterios sueltos por la hoja.
· tarjeta → superficies con fondo y borde que contienen texto;
· foto → fotos grandes dentro del contenido;
· menor → fotos pequeñas en fila, donde 12 px ya se comen la esquina.
LAS CABECERAS SE QUEDAN A SANGRE, sin radio: .hero va de borde a borde de
la ventana y una esquina redonda ahí enseñaría el fondo por la muesca.
Tampoco lo llevan las bandas .alt ni el pie, por lo mismo.
Las tarjetas y las cajas de foto llevan overflow:hidden donde hacía falta:
sin él, la foto de dentro sigue con la esquina cuadrada y asoma. */
/* Tarjetas */
.sd-tarjeta,.npc-card,.bv-card,.bl-card,.mod,.wd{border-radius:var(--radio-tarjeta)}
.sd-tarjeta,.bl-card,.mod{overflow:hidden}
/* Fotos grandes del contenido */
/* .split .ph, el bloque de texto y foto, faltaba: la tienda de /nosotros/ y
de la portada, Roda de Barà en /proceso/ y el carpintero de interior
personalizadas salían con la esquina recta (Manu, 28 sep 2026). Van
también las cajas de foto de .pr-feat y .tech, que hoy no pinta ninguna
página, para que no vuelva a pasar el día que se usen. */
.sd-figura img,.sd-galeria .g,.lin .ph,.case .ph,
.split .ph,.pr-feat .ph,.tech .ph{border-radius:var(--radio-foto)}
.sd-galeria .g,.lin .ph,.case .ph,
.split .ph,.pr-feat .ph,.tech .ph{overflow:hidden}
/* El velo y el pie de la galería van dentro de la caja redondeada. */
.sd-galeria .g::after{border-radius:inherit}
/* Fotos pequeñas en fila */
.sd-montaje .ph{border-radius:var(--radio-foto-menor);overflow:hidden}
/* Foto de producto: EL RADIO VA EN EL MARCO, no en la imagen. El marco es
la pieza blanca que se ve; la foto vive contenida dentro de él. */
.sd-foto-producto .marco{border-radius:var(--radio-foto)}
.sd-tira .sd-foto-producto .marco{border-radius:var(--radio-foto-menor)}
/* --- 62. Desplegable (pieza 6, 22 sep 2026) ---
El detalle que ya no va visible. Cerrado sigue en el HTML: lo indexa
Google y lo lee un lector de pantalla; solo deja de ocupar pantalla.
El triángulo de serie del navegador se quita y se pone un signo propio,
que gira al abrir. La fila entera es la zona de clic. */
.sd-desplegable{border-top:1px solid var(--line);max-width:680px;
margin:0 auto}
.sd-desplegable + .sd-desplegable{border-top:1px solid var(--line)}
.sd-desplegable:last-of-type{border-bottom:1px solid var(--line)}
.sd-desplegable > summary{display:flex;align-items:center;gap:12px;
padding:16px 0;cursor:pointer;list-style:none;
font-family:var(--sans);font-size:.78rem;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;color:var(--bord)}
.sd-desplegable > summary::-webkit-details-marker{display:none}
.sd-desplegable > summary::after{content:"+";margin-left:auto;
font-size:1.1rem;font-weight:400;line-height:1;transition:transform .2s}
.sd-desplegable[open] > summary::after{transform:rotate(45deg)}
.sd-desplegable > summary:hover{color:var(--bord2)}
.sd-desplegable-cuerpo{padding:0 0 20px}
.sd-desplegable-cuerpo p{color:var(--muted);font-size:.98rem}
.sd-desplegable-cuerpo p + p{margin-top:12px}
.sd-desplegable-cuerpo ul{list-style:none;display:grid;gap:10px;margin-top:4px}
.sd-desplegable-cuerpo li{position:relative;padding-left:22px;
color:var(--muted);font-size:.96rem}
.sd-desplegable-cuerpo li::before{content:"—";position:absolute;left:0;
color:var(--bord)}
/* --- 63. Línea suelta (22 sep 2026) ---
La frase corta que queda visible cuando el párrafo largo baja a un
desplegable. Centrada y al ancho de lectura, para que no se lea como el
principio de otro bloque de texto. */
.sd-linea-suelta{max-width:680px;margin:clamp(30px,4vw,44px) auto 0;
text-align:center;font-size:1.05rem;font-weight:300;color:var(--muted)}
.sd-linea-suelta + .sd-desplegable{margin-top:18px}
/* Dos tarjetas en fila: "dónde va" de /saunas/.
La foto va a 4/3 y no al cuadrado de la tarjeta de gama: con dos columnas
de 640 px, el cuadrado daba 640 px de alto por foto y la sección se
convertía en dos fotos con un pie. Medido a 1440. */
.sd-tarjetas--dos{grid-template-columns:repeat(2,1fr)}
.sd-tarjetas--dos .sd-tarjeta-foto img{aspect-ratio:4/3}
@media(max-width:620px){.sd-tarjetas--dos{grid-template-columns:1fr}}
/* --- 64. Lo que hacemos y lo que no (pieza 7, 22 sep 2026) ---
Dos listas cortas enfrentadas. Las dos columnas pesan IGUAL: el límite de
lo que hace la casa es un dato, no una disculpa, así que la de "no" no va
ni escondida ni en letra pequeña.
El visto en burdeos y el aspa en gris: se distinguen de un vistazo sin
recurrir al verde y al rojo, que no están en la paleta. */
.sd-si-no{display:grid;grid-template-columns:repeat(2,1fr);
gap:clamp(26px,4vw,48px);max-width:900px;margin:0 auto}
.sd-si-no-col h3{font-size:1.22rem;margin-bottom:16px;padding-bottom:14px;
border-bottom:1px solid var(--line)}
.sd-si-no-col ul{list-style:none;display:grid;gap:12px}
.sd-si-no-col li{display:flex;gap:11px;align-items:flex-start;
font-size:.98rem;line-height:1.5}
.sd-si-no-icono{flex:none;margin-top:3px}
.sd-si-no-col--si .sd-si-no-icono{color:var(--bord)}
.sd-si-no-col--no{color:var(--muted)}
.sd-si-no-col--no .sd-si-no-icono{color:var(--muted);opacity:.8}
@media(max-width:620px){.sd-si-no{grid-template-columns:1fr;gap:30px}}
/* Tira con nombre debajo de cada foto: el pie sube de tamaño y se centra,
porque aquí no es un pie de foto sino el nombre de la pieza que se pide. */
.sd-tira--nombrada .sd-foto-producto figcaption{text-align:center;
font-size:.95rem;color:var(--ink);margin-top:12px}
/* --- 65. Cabecera partida (pieza 8, 22 sep 2026) ---
Texto a un lado y una foto de producto en su marco al otro. Es lo que
sustituye a la banda tinta en las páginas cuya única imagen es de
catálogo.
Hereda .hero y .hero-sub para no reinventar tipografías ni colores, pero
desactiva lo que solo tiene sentido con una foto a sangre: el alto
mínimo, el velo oscuro y el texto blanco. Aquí el fondo es crema y el
texto va en tinta, como en una cabecera sin foto.
A sangre y sin radio, como todas las cabeceras. El radio va en el marco
de la foto, que es la pieza que se ve. */
.sd-cabecera-partida{min-height:0;display:block;background:var(--paper);
overflow:visible}
.sd-cabecera-partida::after{display:none}
.sd-cabecera-partida .wrap{
display:grid;grid-template-columns:1fr minmax(0,520px);
gap:clamp(30px,5vw,68px);align-items:center;color:var(--ink);
padding-top:clamp(38px,5vw,74px);padding-bottom:clamp(38px,5vw,74px);
}
/* El velo de .hero deja una sombra de 24 px bajo el titular y la
entradilla, pensada para texto blanco sobre una foto clara. Sobre crema
no es una sombra: es un halo sucio alrededor de cada letra. Aquí no hay
foto detrás del texto, así que sobra.
Con .sd-cabecera-partida h1 a secas NO basta: .hero:not(.hero--claro) h1
empata en especificidad y gana por orden. Se sube con .wrap. */
.hero.sd-cabecera-partida .wrap h1,
.hero.sd-cabecera-partida .wrap p{text-shadow:none}
.sd-cabecera-partida h1{color:var(--ink);margin-top:14px}
.sd-cabecera-partida h1 em{color:var(--bord)}
.sd-cabecera-partida .eyebrow{color:var(--bord);margin:0}
.sd-cabecera-partida .bcrumb{position:static;margin:0 0 14px;color:var(--muted)}
.sd-cabecera-partida .bcrumb a:hover{color:var(--bord)}
.sd-cabecera-partida p:where(:not(.eyebrow)){color:var(--muted);
max-width:46ch;margin:18px 0 0}
.sd-cabecera-partida .sd-foto-producto{margin:0}
/*
* CUADRADA, Y LA MISMA EN LAS TRES CABECERAS DE LA SECCIÓN (Manu, 22 sep
* 2026). Es lo que las hace de la misma familia, y no sale de un gusto:
* las fotos de producto son apaisadas 4:3 y la de obra es vertical 3:4.
* Un marco 4:3 parte la vertical por la mitad; uno 3:4 deja las apaisadas
* diminutas. El cuadrado es el único que sirve para las dos.
*/
.sd-cabecera-partida .sd-foto-producto .marco{aspect-ratio:1/1}
/* Menos aire que en una tarjeta: aquí el producto es la imagen principal
de la página y tiene que llenar el marco.
Solo en las fotos de catálogo: una foto de obra va a sangre dentro del
marco, sin orla blanca, y el :not() es lo que lo respeta. */
.sd-cabecera-partida .sd-foto-producto:not(.sd-foto-producto--foto) img{padding:4%}
/* El recorte de la foto de obra se decide por foto: con el centro, la
sauna de Unhà se quedaba sin el agua de delante, que es para lo que
está ahí. */
.sd-cabecera-partida-foto{--pos-foto:center}
.sd-cabecera-partida .sd-foto-producto--foto img{object-position:var(--pos-foto)}
.sd-cabecera-partida .sd-foto-producto figcaption{text-align:center;
color:var(--muted);font-size:.84rem}
/* Apilada antes de que la foto se quede estrecha: por debajo de 860 px la
columna de la imagen baja de 330 px y el producto, que va contenido
dentro del marco con un 5 % de aire, deja de verse. Primero el texto,
que es quien dice de qué va la página. */
@media(max-width:860px){
.sd-cabecera-partida .wrap{grid-template-columns:1fr;gap:26px}
.sd-cabecera-partida .sd-foto-producto{max-width:420px;margin:0 auto}
}
/* --- 66. Tres tarjetas de producto miden lo mismo ---
Mismo motivo que la fila de cuatro gamas (regla 58): con filas
automáticas, al bajar a dos columnas la de arriba y la de abajo se
ajustan cada una a su contenido y quedan desiguales. Aquí se nota más,
porque las tres tarjetas llevan distinto número de datos. */
.sd-tarjetas{grid-auto-rows:1fr}
/* --- 67. Tarjeta con foto de catálogo ---
La tarjeta de gama recorta su foto a cuadrado con object-fit:cover, y
está bien: son fotos de obra, con encuadre de sobra, y recortarlas las
iguala.
Una foto de catálogo no. El producto viene ya recortado sobre blanco y
centrado en su lienzo: al recortarla a cuadrado se le va medio cubo por
arriba y por abajo. Aquí la foto entra ENTERA en el marco, sobre blanco
y con aire, igual que en sd_foto_producto(). Sigue siendo cuadrada, así
que la fila no baila.
El :not() es para la tarjeta que todavía no tiene foto: su banda se
queda en su gris cálido. Pintarla de blanco la haría idéntica al marco
de las que sí tienen foto, y un hueco no puede parecer una foto. */
.sd-tarjeta--producto .sd-tarjeta-foto:not(.sd-tarjeta-foto--banda){
background:#fff;border-bottom:1px solid var(--line)}
.sd-tarjeta--producto .sd-tarjeta-foto img{object-fit:contain;padding:7%}
/* --- 68. Bloque de texto centrado, sin foto al lado ---
Para una sección que era partida y se queda sin imagen. No se deja media
rejilla vacía ni se rellena con una foto de relleno: el texto se centra,
se limita a una medida de lectura y el botón va debajo.
Se lee como una decisión, no como un hueco. */
.sd-bloque-centrado{max-width:660px;margin:0 auto;text-align:center}
.sd-bloque-centrado .eyebrow{justify-content:center}
.sd-bloque-centrado .npc-mt{display:flex;justify-content:center}
/* --- 69. Los datos y el botón de la cabecera partida ---
El lado del texto se quedaba vacío al lado de una foto de 520 px. Debajo
de la entradilla van los mismos datos de la tarjeta —mismo icono, misma
redacción, salidos de la misma función— y el botón de presupuesto.
En columna, no en fila: los valores de hidroterapia llevan su condición
dentro ("si hay stock; si no lo hay, en unas 2 semanas") y en fila se
parten en tres líneas cada uno. */
.sd-cabecera-datos{list-style:none;display:grid;gap:12px;margin:26px 0 0;
padding-top:22px;border-top:1px solid var(--line);max-width:46ch}
.sd-cabecera-datos .sd-dato-valor{font-size:.95rem;line-height:1.4}
.sd-cabecera-accion{margin:26px 0 0}
/* El botón no va a todo el ancho aquí: en una tarjeta ocupa la columna
entera porque cierra la tarjeta, pero en una cabecera al lado de una
foto se leería como una barra. */
.sd-cabecera-accion .btn{display:inline-block;width:auto}
/* --- 70. Cabecera partida sin marco ---
En las fichas de producto el marco blanco con borde competía con la
foto: dos rectángulos, uno dentro de otro, y el producto pequeño en el
centro. Sin marco, el producto se apoya en una banda crema del tema y
puede crecer.
El radio se queda: es la banda la que lo lleva, no el marco. */
.sd-cabecera-partida--sin-marco .sd-foto-producto .marco{
background:var(--paper2);border:0}
/* Sin relleno: la foto que va aquí ya trae su propio aire alrededor del
producto y el fondo del archivo es este mismo crema, así que la banda y
la foto son el mismo color y el producto puede ocupar todo lo que da. */
.sd-cabecera-partida--sin-marco .sd-foto-producto img{padding:0}
/* --- 71. Tarjeta con foto de producto sobre crema ---
Hermana de la 67 (catálogo sobre blanco con marco): aquí la foto trae el
fondo de estudio pasado al crema del tema, así que el hueco de la foto es
del mismo crema y el producto va ENTERO, sin marco blanco ni relleno.
Primer uso: el panel de control del generador en las tarjetas de vapor
(Manu, 23 sep 2026: antes iba suelto y centrado debajo de las fotos).
La foto viene en lienzo cuadrado de crema: llena el hueco entero, así
que no hay borde entre el crema de la foto y el del tema. Con la foto
rectangular y contain, la compresión dejaba ver el rectángulo. */
.sd-tarjeta--crema .sd-tarjeta-foto{background:var(--paper2);border-bottom:1px solid var(--line)}
.sd-tarjeta--crema .sd-tarjeta-foto img{object-fit:contain}
/* --- 72. La nota de vapor bajo el texto de una sección ---
Pequeña y centrada bajo la entrada, antes de las tarjetas: acompaña a
las fotos de recinto sin pesar como un párrafo. */
.sd-aclaracion-foto--seccion{text-align:center;max-width:620px;border-top:0;padding-top:0;
margin:-8px auto clamp(26px,3vw,36px)}
/* El desplegable que cierra una fila de tarjetas no va pegado a ellas. */
.sd-tarjetas + .sd-desplegable{margin-top:clamp(28px,3.4vw,40px)}
/* --- 73. Franja de datos (pieza 12) ---
Una línea fina entre dos filetes, con dos datos con icono y un
desplegable de condiciones al lado. Se ve sin ocupar sitio: sustituye a
una sección de tarjetas que decía dos frases (Manu, 23 sep 2026, en
/equipamiento/). Abierto, el desplegable baja a su propia línea. */
.sd-franja{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
column-gap:30px;row-gap:2px;padding:8px 0;margin:0 auto clamp(28px,3.4vw,40px);
border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sd-franja-datos{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
gap:6px 28px;margin:0;padding:0}
.sd-franja .sd-dato{align-items:center;gap:9px}
.sd-franja .sd-dato-icono{margin-top:0}
.sd-franja .sd-dato-valor{font-size:.9rem}
.sd-franja .sd-franja-mas,
.sd-franja .sd-franja-mas:last-of-type{border:0;margin:0;max-width:none}
.sd-franja .sd-franja-mas > summary{padding:6px 0;font-size:.7rem;gap:8px}
.sd-franja .sd-franja-mas > summary::after{margin-left:0}
.sd-franja .sd-franja-mas[open]{flex-basis:100%}
.sd-franja .sd-franja-mas[open] > summary{justify-content:center}
.sd-franja .sd-franja-mas .sd-desplegable-cuerpo{max-width:620px;margin:0 auto;
padding:2px 0 10px;text-align:center}
/* --- 74. Grupos de un solo modelo, juntos en una fila ---
En /equipamiento/calefactores/, leña e infrarrojos tienen un modelo cada
uno: en su propia fila, la tarjeta se quedaba sola. Comparten fila, cada
uno con su H2 encima, y la tarjeta ocupa el alto que queda. */
.sd-equipo-celda{display:flex;flex-direction:column}
.sd-equipo-celda .sd-tarjeta{flex:1}
.sd-equipo-celda .sd-equipo-titulo{font-size:clamp(1.25rem,2vw,1.6rem)}
/* --- 75. Tarjetas en carril, en móvil ---
· La banda lisa de la tarjeta sin foto se queda en el carril. La regla de
móvil que la quita (58) está pensada para tarjetas apiladas; en un
carril van lado a lado, y sin la banda la tarjeta sin foto empieza por
el texto mientras sus vecinas empiezan por la foto (visto el 23 sep
2026 en /equipamiento/: Kip y Recambios; y pasaba igual con exterior
estándar en /saunas/ y la bañera geriátrica en /hidroterapia/).
· El botón de la tarjeta no se parte: a 380 px "Ver calefactores" salía
en dos líneas. Menos aire a los lados y menos espaciado de letra, solo
dentro de la tarjeta. */
@media(max-width:620px){
.sd-carril .sd-tarjeta-foto--banda{display:block}
.sd-tarjeta .btn{padding-left:12px;padding-right:12px;letter-spacing:.1em;white-space:nowrap}
}
/* --- 76. Velo crema reforzado solo detrás del texto (hero--velo-texto) ---
Para una foto clara en la zona del texto, desde 1280 px (por debajo, la
cabecera va apilada). Más opacidad hasta el 46 % del ancho, donde acaba
el bloque de texto, y la misma caída de siempre después: la mitad
derecha de la foto queda igual. Primer uso: /equipamiento/controladores/
(Blanes, madera clara y pared gris detrás del titular), medido el 23 sep
2026: el titular daba 3,78:1 a 1920 y 4,39:1 a 1440. */
@media(min-width:1280px){
.hero--claro.hero--velo-texto:has(img.bg)::after{
background:
linear-gradient(100deg,
rgba(250,250,248,.95) 0%,
rgba(250,250,248,.9) 36%,
rgba(250,250,248,.74) 46%,
rgba(250,250,248,.2) 58%,
rgba(250,250,248,0) 70%),
linear-gradient(180deg,
rgba(250,250,248,0) 42%,
rgba(250,250,248,.62) 76%,
rgba(250,250,248,.94) 92%,
var(--paper) 100%);
}
}
/* Entre 1280 y 1439 el titular ocupa más proporción del ancho y llega al
58 %: el velo fuerte llega hasta ahí y se apaga antes del 72 %. Medido
el 27 sep 2026 con Blanes reflejada (controlador al 72 %): sin este
tramo el titular daba 3,27:1 a 1280 y 3,39:1 a 1366. */
@media(min-width:1280px) and (max-width:1439px){
.hero--claro.hero--velo-texto:has(img.bg)::after{
background:
linear-gradient(100deg,
rgba(250,250,248,.95) 0%,
rgba(250,250,248,.92) 50%,
rgba(250,250,248,.82) 58%,
rgba(250,250,248,.22) 66%,
rgba(250,250,248,0) 71%),
linear-gradient(180deg,
rgba(250,250,248,0) 42%,
rgba(250,250,248,.62) 76%,
rgba(250,250,248,.94) 92%,
var(--paper) 100%);
}
}
/* --- 77. Datos con icono dentro de la tarjeta de una ficha ---
Los puntos de la tarjeta de /duchas/ y /crioterapia/, que eran una lista
de guiones (23 sep 2026). Mismo marcado que los datos de las tarjetas de
gama, sin el filete de arriba: aquí no parten la tarjeta en dos. */
.sd-tarjeta-datos--ficha{border-top:0;padding-top:0;margin:18px 0 0}
.sd-tarjeta-datos--ficha .sd-dato-valor{color:var(--muted)}
/* --- 78. Línea de tiempo vertical (/proceso/, 23 sep 2026) ---
Los siete pasos: número en un círculo sobre una línea en arena, título,
un resumen y UNA FOTO POR PASO, todas 4:5 y del mismo tamaño. El mismo
lenguaje que la línea horizontal de la portada (.sd-pasos), en vertical
porque son siete y llevan foto. El texto entero, en el desplegable.
En escritorio, EN ZIGZAG (sd-crono--zigzag): la línea en el centro y la
foto y el texto alternando de lado. Cada paso sube 80 px sobre el
anterior: como la foto de uno cae en el lado del texto del siguiente,
encajan sin tocarse y no quedan huecos (la primera versión, con la foto
siempre a la derecha, dejaba media pantalla vacía en cada paso sin
foto). Por debajo de 861 px, apilado: línea a la izquierda, número,
texto y la foto debajo. */
.sd-crono{list-style:none;position:relative;max-width:1040px;margin:0 auto 40px;padding:0}
.sd-crono::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:1px;
background:var(--arena)}
.sd-crono-paso{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);
gap:0 18px;align-items:start;padding:18px 0}
.sd-crono-n{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
width:44px;height:44px;border-radius:50%;background:var(--paper);border:1px solid var(--bord);
font-family:var(--serif);font-size:1.05rem;color:var(--bord)}
.sd-crono-txt h3{font-size:1.2rem;margin:8px 0 6px}
.sd-crono-txt p{color:var(--muted);max-width:40ch}
.sd-crono-foto{grid-column:2;margin:14px 0 0;width:100%;max-width:280px;aspect-ratio:4/5;
overflow:hidden;border-radius:var(--radio-foto)}
.sd-crono-foto img{width:100%;height:100%;object-fit:cover;display:block}
@media(min-width:861px){
/* Aire entre la foto del paso 07 y el desplegable (con 24 px se tocaban a ojo). */
.sd-crono--zigzag{margin-bottom:64px}
.sd-crono--zigzag::before{left:50%;transform:translateX(-50%);top:60px;bottom:60px}
.sd-crono--zigzag .sd-crono-paso{grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);
gap:0 36px;align-items:center;padding:0}
.sd-crono--zigzag .sd-crono-paso + .sd-crono-paso{margin-top:-80px}
.sd-crono--zigzag .sd-crono-n{grid-column:2;grid-row:1;justify-self:center;
width:56px;height:56px;font-size:1.3rem}
.sd-crono--zigzag .sd-crono-foto{grid-row:1;margin:0;width:280px}
.sd-crono--zigzag .sd-crono-txt{grid-row:1}
.sd-crono--zigzag .sd-crono-txt h3{font-size:1.375rem;margin:0 0 8px}
/* Impares: foto a la izquierda, texto a la derecha. */
.sd-crono--zigzag .sd-crono-paso:nth-child(odd) .sd-crono-foto{grid-column:1;justify-self:end}
.sd-crono--zigzag .sd-crono-paso:nth-child(odd) .sd-crono-txt{grid-column:3}
/* Pares: texto a la izquierda, alineado hacia la línea; foto a la derecha. */
.sd-crono--zigzag .sd-crono-paso:nth-child(even) .sd-crono-txt{grid-column:1;text-align:right}
.sd-crono--zigzag .sd-crono-paso:nth-child(even) .sd-crono-txt p{margin-left:auto}
.sd-crono--zigzag .sd-crono-paso:nth-child(even) .sd-crono-foto{grid-column:3;justify-self:start}
}
/* "Qué hay que prever" de hidroterapia (23 sep 2026): el tema de cada punto
en tinta y negrita, el resto en gris; algo más de aire entre puntos. */
.sd-datos-prever{gap:16px;margin-top:6px}
.sd-datos-prever .sd-dato-valor strong{color:var(--ink);font-weight:700}
/* --- 79. Testimonios en vídeo (pieza 14, 28 sep 2026) ---
Tarjetas verticales 9:16 con el póster, la frase y quién es. En
escritorio, las cinco en fila; por debajo de 1100 px, carril con una y
media a la vista (el patrón de la regla 59). La tarjeta crece un poco al
pasar el ratón (formato aprobado por Manu el 22 sep). */
.sd-testi{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;align-items:start}
.sd-testi-i{display:flex;flex-direction:column;gap:14px;
transition:transform .35s cubic-bezier(.22,1,.36,1)}
.sd-testi-video{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;
border-radius:var(--radio-foto);background:var(--ink);color:#fff}
.sd-testi-video img{width:100%;height:100%;object-fit:cover;display:block}
.sd-testi-video::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(20,14,8,0) 60%,rgba(20,14,8,.55))}
.sd-testi-play{position:absolute;left:14px;bottom:14px;z-index:1;
display:flex;align-items:center;justify-content:center;width:48px;height:48px;
border-radius:50%;background:rgba(250,250,248,.92);color:var(--bord);
transition:transform .35s cubic-bezier(.22,1,.36,1)}
.sd-testi-play svg{margin-left:3px}
.sd-testi-dur{position:absolute;right:12px;bottom:26px;z-index:1;
font-size:.78rem;font-weight:700;letter-spacing:.06em;color:#fff}
.sd-testi-video:focus-visible{outline:2px solid var(--bord);outline-offset:3px}
@media (hover:hover){
.sd-testi-i:hover{transform:scale(1.03)}
.sd-testi-i:hover .sd-testi-play{transform:scale(1.08)}
}
@media (prefers-reduced-motion:reduce){.sd-testi-i,.sd-testi-play{transition:none}}
.sd-testi-frase{margin:0;font-family:var(--serif);font-style:italic;font-weight:400;
font-size:1rem;line-height:1.45;color:var(--ink)}
.sd-testi-quien{margin:0;font-size:.82rem;line-height:1.4;color:var(--muted)}
.sd-testi-quien b{display:block;color:var(--ink);font-size:.9rem}
@media(max-width:1099px){
.sd-testi{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;
margin-inline:-28px;padding-inline:28px;scroll-padding-left:28px;
padding-bottom:6px;scrollbar-width:none}
.sd-testi::-webkit-scrollbar{display:none}
.sd-testi-i{flex:0 0 clamp(210px,34%,260px);scroll-snap-align:start}
}
@media(max-width:620px){.sd-testi-i{flex-basis:62%}}
/* El visor: a pantalla completa. El vídeo, tan alto como cabe con
su pie; las flechas a los lados en escritorio y abajo en móvil. Tocar el
fondo cierra (lo hace el script); Esc lo da el propio . */
.sd-visor{padding:0;border:0;margin:0;width:100vw;height:100dvh;
max-width:none;max-height:none;background:transparent;color:#f6efe3}
.sd-visor::backdrop{background:rgba(12,9,6,.94)}
.sd-visor-marco{position:relative;height:100%;display:flex;align-items:center;
justify-content:center;gap:24px;padding:56px 16px 24px}
.sd-visor-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;
height:100%;justify-content:center}
.sd-visor-video{display:block;height:calc(100dvh - 140px);max-height:1280px;
width:auto;max-width:calc(100vw - 32px);aspect-ratio:9/16;background:#000;
border-radius:var(--radio-foto-menor)}
.sd-visor-pie{font-size:.9rem;text-align:center}
.sd-visor-pie b{font-family:var(--serif);font-weight:500;font-size:1.05rem}
.sd-visor-pie span{color:rgba(246,239,227,.78)}
.sd-visor-pie small{display:block;margin-top:2px;font-size:.75rem;letter-spacing:.14em;
text-transform:uppercase;color:rgba(246,239,227,.6)}
.sd-visor-cerrar,.sd-visor-flecha{display:flex;align-items:center;justify-content:center;
width:48px;height:48px;border-radius:50%;border:1px solid rgba(246,239,227,.35);
background:rgba(26,26,26,.4);color:#f6efe3;cursor:pointer;flex:0 0 auto}
.sd-visor-cerrar:hover,.sd-visor-flecha:hover{border-color:#f6efe3}
.sd-visor-cerrar:focus-visible,.sd-visor-flecha:focus-visible{outline:2px solid #d4b8a0;outline-offset:3px}
.sd-visor-cerrar{position:absolute;top:12px;right:12px;z-index:2}
@media(max-width:700px){
.sd-visor-marco{padding:60px 12px 84px}
.sd-visor-video{height:calc(100dvh - 200px)}
.sd-visor-flecha{position:absolute;bottom:18px}
.sd-visor-flecha--ant{left:calc(50% - 64px)}
.sd-visor-flecha--sig{right:calc(50% - 64px)}
}
/* --- 80. Galería plegable (pieza 2b, /proyectos/, 28 sep 2026) ---
En escritorio, ocho en dos filas de cuatro y las demás detrás de "Ver
más proyectos" (siempre múltiplo de cuatro: sin filas cojas). El plegado
lo pone el script (.is-plegada); sin script se ven todas. En móvil manda
el carril de la regla 59 y el botón no se enseña. */
.sd-galeria--plegable{--cols:4}
.sd-galeria-mas{text-align:center;margin-top:28px}
@media(min-width:621px){
.sd-galeria--plegable.is-plegada .g--mas{display:none}
}
@media(max-width:620px){
.sd-galeria-mas{display:none}
}
/* --- 81. Referencias profesionales en su desplegable (28 sep 2026) ---
Las tres columnas de nombres de /proyectos/ bajan a "Ver todas las
referencias", debajo del carrusel de logos. El desplegable normal mide
680 px y pone un guion en cada punto: aquí ocupa el ancho del bloque y
cada referencia se ve como antes, un nombre por línea con su localidad. */
.sd-refs-desplegable{max-width:none;margin-top:44px}
.sd-refs-desplegable > summary{justify-content:center}
.sd-refs-desplegable > summary::after{margin-left:0}
.sd-refs-desplegable .sd-desplegable-cuerpo{padding-top:12px}
.sd-refs-desplegable .sd-refs li{padding-left:0;color:var(--ink);font-size:.9rem}
.sd-refs-desplegable .sd-refs li::before{content:none}
.sd-refs-desplegable .sd-ref-grupo h3{margin-bottom:12px}
/* --- 82. Logos sobre el claro de la página (/proyectos/, 28 sep 2026) ---
En /proyectos/ el carrusel va sobre el mismo fondo que la sección
anterior (Manu), no sobre el blanco puro de la portada. Los logos traen
fondo blanco opaco y dejaban un recuadro (255 sobre 250): "multiply" funde
ese blanco con el fondo sin tocar el archivo ni el color del logo.
OJO: la pista lleva transform, que aísla la mezcla; sin un fondo propio
el blanco se mezclaba contra transparente y el recuadro seguía. */
.sd-profesional .sd-carrusel-pista{background:var(--paper)}
.sd-profesional .sd-carrusel-item img{mix-blend-mode:multiply}
/* --- 83. Fichas de equipamiento: cinco en fila y "También servimos" ---
(28 sep 2026) Un modelo sin foto no ocupa tarjeta: sale en una línea
discreta debajo de su fila. Cinco tarjetas van en UNA fila de cinco y,
por debajo de 1100 px, en carril: ni 3+2 ni 2+2+1. */
.sd-tarjetas--cinco{grid-template-columns:repeat(5,1fr);grid-auto-rows:1fr;gap:18px}
@media(max-width:1100px){
.sd-tarjetas--cinco{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
gap:16px;margin-inline:-28px;padding-inline:28px;scroll-padding-left:28px;
padding-bottom:6px;scrollbar-width:none}
.sd-tarjetas--cinco::-webkit-scrollbar{display:none}
.sd-tarjetas--cinco>*{flex:0 0 clamp(220px,34%,280px);scroll-snap-align:start}
}
@media(max-width:620px){.sd-tarjetas--cinco>*{flex-basis:70%}}
.sd-tambien{margin:18px 0 0;text-align:center;font-size:.9rem;color:var(--muted)}
/* Dos grupos sueltos (leña e infrarrojos): dos columnas y tarjeta en
horizontal, foto a la izquierda y texto a la derecha. En cuatro columnas
dejaban media fila vacía. Por debajo de 1101 px, lo de siempre. */
@media(min-width:1101px){
.sd-equipo-sueltos--dos{grid-template-columns:repeat(2,1fr);gap:26px}
.sd-equipo-sueltos--dos .sd-tarjeta{flex-direction:row;align-items:stretch}
.sd-equipo-sueltos--dos .sd-tarjeta-foto{flex:0 0 52%;aspect-ratio:1/1;
border-bottom:0;border-right:1px solid var(--line)}
.sd-equipo-sueltos--dos .sd-tarjeta-cuerpo{display:flex;flex-direction:column;justify-content:center}
}
/* --- 84. Cabecera ancha de producto de hidroterapia (prueba, 28 sep 2026) ---
Ducha real montada sobre escena generada, con velo oscuro. Los datos van
en crema y sus iconos en arena (en burdeos no se ven sobre el velo). La
foto se encuadra a la derecha para que en móvil no se corte la ducha. */
.sd-hero-producto img.bg,
.hero.hero--lateral.sd-hero-producto:has(img.bg) img.bg{object-position:88% 40%}
.hero--lateral .sd-cabecera-datos .sd-dato-valor{color:rgba(246,239,227,.92)}
.hero--lateral .sd-cabecera-datos .sd-dato-icono{color:#d4b8a0}
/* --- 85. Cabecera oscura con foto VERTICAL anclada a la derecha (/hidroterapia/, 28 sep 2026) ---
La sauna de Unhà con el agua delante es 934×1600 y la sauna llena todo
su ancho: ningún recorte horizontal la deja a la derecha, y estirarla a
todo lo ancho pedía ×1,6 o más. Así que en escritorio la foto ocupa la
mitad derecha, entera de alto, sobre tinta, y se funde por su borde
izquierdo: el texto queda sobre tinta lisa. Escala máxima de la foto:
×1,03 (tope de 960 px). Por debajo de 1280 va apilada (regla de hero--lateral), en
franja con los bancos y el agua. Si cambia la foto, se vuelve a medir. */
.hero.hero--lateral.sd-hero-derecha{background:var(--ink)}
.hero.hero--lateral.sd-hero-derecha:has(img.bg) img.bg{object-position:50% 86%}
@media(min-width:1280px){
.hero.hero--lateral.sd-hero-derecha:has(img.bg) img.bg{left:auto;right:0;width:min(56%,960px);object-position:50% 88%;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28%);
mask-image:linear-gradient(90deg,transparent 0,#000 28%)}
.hero.hero--lateral.sd-hero-derecha::after{background:linear-gradient(90deg,
rgba(26,26,26,.55) 44%,rgba(26,26,26,0) 62%)}
}
/* --- 86. Cabecera compacta de /contacto/ (29 sep 2026) ---
La EXCEPCIÓN a "toda página abre con foto" (Manu): en la página del
formulario, el formulario va primero. Titular y entradilla en poco
alto, sin foto, y el formulario a la vista sin hacer scroll en
escritorio y a 380 px. */
.sd-cab-compacta{padding:clamp(22px,2.2vw,30px) 0 0}
.sd-cab-compacta .bcrumb{position:static;margin:0 0 10px;color:var(--muted)}
.sd-cab-compacta .bcrumb a:hover{color:var(--bord)}
.sd-cab-compacta h1{font-size:clamp(2rem,3.6vw,3rem);margin:6px 0 8px}
.sd-cab-compacta-entrada{max-width:80ch;margin:0;color:var(--muted);font-weight:300;font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.5}
.pad.sd-contacto-cuerpo{padding-top:clamp(20px,2vw,28px)}
/* Con esto, a 1440×900 el formulario entra entero, botón incluido. */
.sd-contacto-cuerpo .cform textarea{min-height:0;height:92px}
/* --- 87. WhatsApp flotante (29 sep 2026) ---
Píldora blanca abajo a la derecha, fija: icono en el verde de
WhatsApp, "Escríbenos" y la cara de Alonso en un círculo en el borde
derecho. Por encima de la barra "Llamar · Presupuesto" (z 60) y por
debajo del menú del móvil (z 120) y del visor de vídeo (capa superior).
Donde convive con la barra (hasta 1000 px) no la tapa: al lado si cabe
entera, y si no, compacta (solo icono y foto) y encima de la barra. */
.sd-wa{position:fixed;right:24px;bottom:24px;z-index:61;display:flex;align-items:center;gap:10px;
padding:6px 6px 6px 16px;background:#fff;color:var(--ink);border-radius:999px;
box-shadow:0 8px 28px rgba(26,26,26,.16),0 1px 3px rgba(26,26,26,.1);
font-family:var(--sans);font-weight:700;font-size:.9375rem;line-height:1;text-decoration:none;
transition:transform .2s,box-shadow .2s}
.sd-wa:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(26,26,26,.2),0 2px 4px rgba(26,26,26,.1)}
.sd-wa:focus-visible{outline:2px solid var(--bord);outline-offset:3px}
.sd-wa-icono{flex:none;color:#25d366}
.sd-wa-foto{flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover;display:block}
/* Con la barra a la vista (hasta 1000): a su altura, a la derecha. */
@media(max-width:1000px){.sd-wa{right:16px;bottom:14px}}
/* Por debajo de 690 la píldora entera ya choca con la barra centrada
(medido: la barra acaba en w/2+131 y la píldora mide 185):
compacta, solo icono y foto. */
@media(max-width:689px){
.sd-wa{gap:8px;padding:5px 5px 5px 12px}
.sd-wa-texto{display:none}
}
/* Y por debajo de 641 la barra ocupa todo el ancho: encima de ella. */
@media(max-width:640px){.sd-wa{right:12px;bottom:78px}}
/* --- 88. Reseñas de Google en bucle (pieza 15, 29 sep 2026) ---
Fila de tarjetas que se desplaza sola, lenta, con los bordes
difuminados. Sin JS o con "reducir movimiento": carril a mano. Se para
al pasar el ratón, con el foco dentro (la fila es una región con
tabindex) y con el botón de pausa. La duración la pone la plantilla
(unos 7 s por tarjeta). */
.sd-resenas-cab{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;margin-bottom:clamp(26px,3vw,40px)}
.sd-resenas-cab h2{margin:0;font-size:clamp(1.6rem,2.6vw,2.2rem)}
.sd-estrellas{color:var(--wood);letter-spacing:.12em;font-size:.95rem;line-height:1}
.sd-estrellas--grande{font-size:1.35rem}
.sd-resenas-marco{overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 0 18px;outline:none;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.sd-resenas-marco:focus-visible{outline:2px solid var(--bord);outline-offset:-2px}
.sd-resenas-pista{list-style:none;margin:0;padding:0 8%;display:flex;gap:20px;width:max-content}
.sd-resena{flex:0 0 clamp(260px,26vw,340px);scroll-snap-align:center;display:flex;flex-direction:column;gap:14px;
background:#fff;border:1px solid var(--line);border-radius:var(--radio-tarjeta);padding:24px 24px 20px}
.sd-resena-texto{margin:0;flex:1}
.sd-resena-texto p{margin:0;font-size:.98rem;line-height:1.55;color:var(--ink)}
.sd-resena-pie{margin:0;display:flex;flex-direction:column;gap:3px;font-size:.85rem}
.sd-resena-nombre{font-weight:700;color:var(--ink)}
.sd-resena-fecha{color:var(--muted)}
/* Con JS: la pista lleva la lista dos veces y se mueve media pista. */
.sd-resenas-marco.is-activo{overflow:hidden;scroll-snap-type:none}
.sd-resenas-marco.is-activo .sd-resenas-pista{padding:0;animation:sd-resenas var(--sd-resenas-dur,60s) linear infinite}
.sd-resenas-marco.is-activo .sd-resenas-pista > li{margin-right:20px}
.sd-resenas-marco.is-activo .sd-resenas-pista{gap:0}
.sd-resenas-marco.is-activo:hover .sd-resenas-pista,
.sd-resenas-marco.is-activo:focus-within .sd-resenas-pista,
.sd-resenas-marco.is-pausado .sd-resenas-pista{animation-play-state:paused}
@keyframes sd-resenas{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.sd-resenas-marco .sd-resenas-pista{animation:none}}
.sd-resenas-pie{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:14px 18px;margin-top:clamp(18px,2.4vw,28px)}
.sd-resenas-pausa{font:700 .75rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
background:none;border:1px solid var(--line);border-radius:var(--radio-boton);padding:12px 18px;cursor:pointer}
.sd-resenas-pausa:hover{color:var(--ink);border-color:var(--ink)}
.sd-resenas-pausa:focus-visible{outline:2px solid var(--bord);outline-offset:2px}
@media(max-width:640px){.sd-resena{flex-basis:78vw;padding:20px}}
/* A 380 el enlace partía en dos líneas dentro de la píldora. */
@media(max-width:480px){.sd-resenas-pie .btn{white-space:nowrap;letter-spacing:.05em;padding-left:18px;padding-right:18px}}
/* --- 89. Textos legales: tablas y cita del modelo (29 sep 2026) ---
La política de cookies lleva tablas y las condiciones de venta el
modelo de desistimiento. En móvil la tabla se desplaza dentro de su
caja, sin sacar a la página de ancho. */
.bl-art .sd-tabla{overflow-x:auto;margin:0 0 26px;-webkit-overflow-scrolling:touch}
.bl-art table{width:100%;min-width:520px;border-collapse:collapse;font-size:.92rem}
.bl-art th,.bl-art td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
.bl-art th{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.bl-art td{color:var(--ink)}
.bl-art code{font-size:.85em;background:var(--paper2);padding:2px 5px;border-radius:4px}
.bl-art blockquote{margin:0 0 26px;padding:18px 22px;background:var(--paper2);border-left:3px solid var(--bord);border-radius:0 var(--radio-foto-menor) var(--radio-foto-menor) 0}
.bl-art blockquote p{margin-bottom:10px}
.bl-art blockquote p:last-child{margin-bottom:0}
/* --- 90. Aviso de cookies propio (29 sep 2026) ---
Tarjeta abajo, sobre todo lo fijo (WhatsApp 61, barra 60) y debajo del
menú del móvil (120). Aceptar, Rechazar y Configurar con el MISMO peso:
rechazar tiene que ser tan fácil como aceptar. No bloquea la página. */
.sd-cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:110;display:flex;justify-content:center;pointer-events:none}
.sd-cookies[hidden]{display:none}
.sd-cookies-caja{pointer-events:auto;width:100%;max-width:880px;background:#fff;color:var(--ink);
border:1px solid var(--line);border-radius:var(--radio-tarjeta);box-shadow:0 18px 50px rgba(26,26,26,.18);
padding:20px 22px;display:grid;gap:12px}
.sd-cookies-t{font-family:var(--serif);font-size:1.15rem;margin:0}
.sd-cookies-texto{margin:0;font-size:.9rem;line-height:1.5;color:var(--muted)}
.sd-cookies-texto a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--bord);text-underline-offset:.2em}
.sd-cookies-panel{display:grid;gap:10px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sd-cookies-panel[hidden]{display:none}
.sd-cookies-op{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;line-height:1.45;color:var(--muted)}
.sd-cookies-op input{margin-top:3px;width:18px;height:18px;accent-color:var(--bord);flex:none}
.sd-cookies-op strong{color:var(--ink)}
.sd-cookies-botones{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.sd-cookies-b{font:700 .75rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
padding:13px 20px;border-radius:var(--radio-boton);border:1px solid var(--ink);background:#fff;color:var(--ink)}
.sd-cookies-b:hover{background:var(--ink);color:var(--paper)}
.sd-cookies-b[hidden]{display:none}
.sd-cookies-b:focus-visible{outline:2px solid var(--bord);outline-offset:2px}
@media(max-width:560px){
.sd-cookies{left:10px;right:10px;bottom:10px}
.sd-cookies-caja{padding:16px}
.sd-cookies-botones{display:grid;grid-template-columns:1fr 1fr}
.sd-cookies-b{padding:13px 10px}
}