/* ==========================================================================
   Mibawood — hoja de estilos única para todo el sitio.

   La idea de la que sale todo: el catálogo no ordena la madera por especie,
   la ordena por COLOR dominante (Terra, Red, Sun, Dark), y lo hace a
   propósito — repartir la demanda entre especies quita presión a las más
   pedidas. Así que el color no es decoración aquí: es la taxonomía. De ahí
   el fondo oscuro de galería, las fotos a sangre y los cuatro tonos de
   madera como único color saturado de la página.

   Un solo mundo visual, a propósito: no hay tema claro alternativo. Las
   secciones técnicas van sobre papel para que las tablas se lean, y el
   resto sobre noche.
   ========================================================================== */

/* --- tipografías propias, servidas desde este dominio ------------------- */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/fraunces-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/fraunces-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/intertight-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/intertight-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* NOGAL sobre topo, maderas y cremas.  16 oct 2026

     Tercera pasada, y la que vale. Julio pidió los tonos de
     suarezinteriorismo.es y «sustituir el verde por el topo». Puse el topo de
     acento y dijo «no me gusta nada cómo quedó el color». Le monté un banco
     con seis direcciones sobre el mismo trozo de web (_paleta.html, no se
     despliega) y eligió el NOGAL de la propuesta 2, señalando el botón que
     hay justo debajo del titular.

     EL REPARTO, que es la decisión entera:
       · NOGAL #8F847B → lo principal. Botones, cifras, viñetas, subrayados.
       · NOGAL OSCURO #6B6057 → el mismo para TEXTO: rótulos, títulos de
         ficha, enlaces. 6,03 sobre crema.
       · TOPO #8F847B → no se va: baja a NEUTRO de estructura. Las rayas de
         las fichas y la del pie. Es lo que separa sin pedir atención.
       · los oscuros siguen en el tono del topo (27°), que es casi el mismo
         que el del nogal (24°), así que la familia aguanta.

     Lo que gana el nogal frente al topo, con el número delante: el botón
     principal pasa de 3,65 a 5,36, o sea que CUMPLE la norma sin negociar
     nada. Con el topo había que elegir entre la norma y el aspecto. */
  --noche:#3A342F;          /* topo hondo */
  --corteza:#48403B;        /* topo, un punto más claro */
  --humo:#5E554D;
  --papel:#FAF8F5;          /* crema */
  --papel-2:#F2F0EB;
  --papel-3:#E8E3DB;
  /* Banda de salvia: una crema con una gota de verde. Separa una sección de la
     siguiente sin recurrir al verde bosque de fondo, que a pantalla completa
     pesaba demasiado. El verde sigue estando —en las cajas, en los rótulos y
     en las rayas—, pero como acento y no como suelo. */
  --salvia-papel:#F0EAE2;
  --salvia-papel-2:#E7E0D5;

  /* texto */
  --claro:#F2F0EB;
  --claro-2:rgba(242,240,235,.72);
  --claro-3:rgba(242,240,235,.52);
  --tinta:#1A1A1A;
  --tinta-2:#3D3D3D;
  --tinta-3:#6B6560;

  /* los cuatro tonos Wild, tomados de las maderas del catálogo */
  --terra:#B0703C;
  --rojo:#9A423B;
  --sol:#D2A455;
  --gris:#7C7A72;
  /* EL COLOR. El que enseñó, exacto. Fondos, rayas, bordes y cifras grandes. */
  --savia:#8F847B;       /* NOGAL: lo principal */
  --topo:#8F847B;        /* TOPO */
  /* El color de la BANDA. Es el mismo topo. Esta aparte porque es la unica
     linea que hay que tocar si algun dia se quiere la banda mas honda:
     con #6B6057 el texto claro encima pasa de 3,44 a 5,77. */
  --banda-fuerte:#8F847B;           /* mismo valor; el nombre se queda por las llamadas */
  /* y su gemelo para TEXTO: mismo tono 27°, bajado hasta 5,77 sobre crema y
     4,66 sobre la banda. Sin esto, un rótulo en versalitas a 3,44 no se lee. */
  --savia-txt:#6B6057;   /* el mismo, para texto */
  --savia-claro:#C2BBB5;
  /* Los cuatro tonos Wild y la salvia clara son colores de MUESTRA: sobre crema
     se quedan entre 1,4 y 4,1 de contraste, por debajo del 4,5 que hace falta
     para leer. Cada uno tiene su gemelo oscurecido, que es el que va en texto;
     el vivo se queda en las rayas y las muestras, que no se leen. */
  --terra-txt:#8A5426;
  --rojo-txt:#9A423B;
  --sol-txt:#8A6520;
  --gris-txt:#5F5C55;
  --marron:#5B352D;

  --linea-osc:rgba(242,240,235,.15);
  --linea-osc-2:rgba(242,240,235,.3);
  --linea-cla:rgba(61,61,61,.14);
  --linea-cla-2:rgba(61,61,61,.28);

  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --ancho:1280px;
  --canal:clamp(20px,5vw,64px);
  --radio:2px;
  --curva:cubic-bezier(.22,.61,.36,1);
}

/* --- base --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  /* El fondo de la página era el verde bosque, y de él heredaban el texto claro
     las secciones con foto. Al pasar todo a crema hay que darle a esas tres su
     color explícito ANTES de cambiar éste, o el texto sobre las fotos se vuelve
     negro y desaparece. */
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:400;line-height:1.06;
  letter-spacing:-.018em;text-wrap:balance;font-variation-settings:'SOFT' 18,'WONK' 1}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--savia-claro);outline-offset:3px;border-radius:1px}
::selection{background:var(--savia);color:var(--papel)}

.salta{position:absolute;left:-9999px;top:0;padding:12px 18px;background:var(--papel);
  color:var(--tinta);z-index:200;border-radius:0 0 var(--radio) 0}
.salta:focus{left:0}

/* --- rejilla ------------------------------------------------------------ */
.env{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--canal)}
.env-ancho{max-width:1560px}
section{position:relative}
/* `osc` y `corteza` eran los dos fondos oscuros. Pasan a ser bandas claras: el
   nombre se queda porque lo usan once páginas y el generador de navegación,
   pero lo que hacen ahora es separar por tono, no por oscuridad. */
/* LA BANDA ALTERNA, EN TOPO.  16 oct 2026
   Julio, después de ver el banco: el topo de principal «y que se vea mucho,
   bandas enteras». Antes esta clase pintaba crema y el topo salía en un botón
   y tres rayas finas: por eso decía que no se veía el color.
   La clase se llama `osc` de cuando era verde bosque. Vuelve a ser un fondo
   con cuerpo, pero medio y no oscuro, que es justo lo que la regla de «web sin
   verde oscuro» pedía evitar: aquel verde aplastaba a 11 % de luminosidad;
   este topo está al 52 %.
   OJO: todo lo que tenga fondo blanco aquí dentro debe declarar su color de
   texto, o hereda la crema y desaparece. */
.osc{
  background:var(--banda-fuerte);color:var(--claro);
  /* Se vuelcan los tokens de TINTA, no se parchean los selectores uno a uno.
     Dentro de la banda, «tinta» quiere decir claro. Asi entra sola cualquier
     pieza nueva que use los tokens, que es lo que fallaba: .entrada, .sub,
     .menudo y las colecciones se quedaban en gris oscuro sobre topo, a 1,57. */
  /* El techo sobre este topo es 3,65 (blanco puro). Asi que los secundarios
     NO pueden bajar de opacidad como hacen sobre crema: --claro-2 al 72 %
     caia a 2,42 y «Wild Terra · Dark» no se leia. Van casi opacos. */
  --tinta:#FFFFFF; --tinta-2:#FFFFFF; --tinta-3:rgba(255,255,255,.88);
  --savia-txt:#FFFFFF;   /* el gemelo de texto tambien: sobre topo da 1,67 */
  --linea-cla:var(--linea-osc); --linea-cla-2:var(--linea-osc-2)
}
/* ...y las cajas BLANCAS de dentro los vuelven a su sitio, o se quedan con
   texto blanco sobre blanco. Van por fondo, no por nombre de componente. */
/* 17 oct: las guias de instalacion estrenaron tres cajas blancas mas y no
   estaban en esta lista, asi que dentro de una banda topo su texto salia
   CLARO SOBRE BLANCO: ilegible, y sin dar ningun error. Si se anade otra
   caja blanca, va aqui. */
.osc .pilar,.osc .paso,.osc .datos>div,.osc .tono,.osc .ficha-blanca,
.osc .pasos-instal li,.osc .incluye-instal>div,.osc .esquema-instal,
/* 17 oct 2026. .producto faltaba, y es la caja blanca MAS usada del sitio:
   28 fichas en siete secciones de cinco paginas estaban con el nombre en crema
   sobre blanco (contraste 1,14) y la descripcion en BLANCO SOBRE BLANCO (1,00).
   Julio: «el color del texto que has puesto en Clasico, Rounding, Dual, Basic,
   mas las descripciones y las medidas, has cogido un gris muy clarito y no se
   ve porque hay un fondo blanco». La medida si se veia —lleva su propio color—
   y por eso el fallo habia pasado desapercibido: la ficha no se veia VACIA. */
.osc .producto{
  --tinta:#1A1A1A; --tinta-2:#3D3D3D; --tinta-3:#6B6560; --savia-txt:#6B6057;
  --linea-cla:rgba(61,61,61,.14); --linea-cla-2:rgba(61,61,61,.28);
  color:var(--tinta)
}
.osc .cinta{color:var(--claro)}
.osc .boton{background:var(--claro);color:var(--noche)}
.osc .boton:hover{background:#fff}
.osc .boton.fantasma{background:transparent;color:var(--claro);border-color:var(--linea-osc-2)}
.osc .boton.fantasma:hover{background:var(--claro);color:var(--noche);border-color:var(--claro)}
.corteza{background:var(--papel-2);color:var(--tinta)}
.osc .enlace{color:var(--claro);border-bottom-color:var(--linea-osc-2)}
.corteza .enlace{color:var(--savia-txt);border-bottom-color:rgba(143,132,123,.35)}
.osc .enlace:hover{border-bottom-color:var(--claro)}
.corteza .enlace:hover{border-bottom-color:var(--savia)}
.cla{background:var(--papel);color:var(--tinta)}
.cla-2{background:var(--papel-2);color:var(--tinta)}
.pad{padding-block:clamp(64px,9vw,124px)}
/* páginas sin portada: hay que dejar sitio a la cabecera fija */
.bajo-cabecera{padding-top:clamp(120px,14vw,180px)}
.pad-corto{padding-block:clamp(46px,6vw,78px)}

/* --- costuras entre bandas ------------------------------------------------
   Estas clases funden una sección con la anterior, y las pone el guion
   tools/navegacion.py mirando qué fondo tenía la de arriba: a mano, en once
   páginas, se acaba olvidando una.

   Antes fundían de verde bosque a crema. Ahora las dos bandas son claras y el
   salto es de tono, no de luz, así que el degradado es corto y suave: sólo
   quita la raya dura entre dos cremas parecidas. El nombre de las clases se
   queda porque lo escribe el generador. */
.desde-verde::before,.desde-crema::before,.desde-corteza::before{
  content:"";position:absolute;top:0;left:0;right:0;
  height:clamp(40px,5vw,80px);pointer-events:none;z-index:0
}
.desde-verde::before{background:linear-gradient(180deg,var(--salvia-papel) 0%,
  rgba(239,234,226,0) 100%)}
.desde-crema::before{background:linear-gradient(180deg,var(--papel) 0%,
  rgba(250,248,245,0) 100%)}
.desde-corteza::before{background:linear-gradient(180deg,var(--papel-2) 0%,
  rgba(242,240,235,0) 100%)}
.desde-verde>*,.desde-crema>*,.desde-corteza>*{position:relative;z-index:1}
.desde-verde,.desde-crema,.desde-corteza{padding-top:clamp(78px,9vw,132px)}

/* --- tipografía --------------------------------------------------------- */
.cinta{
  font-family:var(--sans);font-size:11.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.17em;
  color:var(--tinta-3);margin:0 0 18px
}
.cinta.savia{color:var(--savia-txt)}
/* sobre fotografía el rótulo necesita más cuerpo: hay tomas con el cielo
   detrás y el gris de siempre se pierde */
/* Las tres secciones con foto a sangre llevan su texto claro por escrito: antes
   lo heredaban del fondo verde de la página, que ya no existe. */
.portada,.escena,.banda{color:var(--claro)}
/* Sobre fotografía el texto sigue siendo claro. Hay que decirlo por escrito
   porque las clases generales —entrada, parr, menudo, lista— son ya las del
   sitio claro: sin esto, el texto de la portada y de la franja de contacto se
   volvía oscuro encima de la foto y desaparecía. */
.portada .entrada,.escena .entrada,.banda .entrada,
.portada .parr,.escena .parr,.banda .parr,
.portada .menudo,.escena .menudo,.banda .menudo,
.portada .lista li,.escena .lista li,.banda .lista li{color:rgba(242,240,235,.84)}
.portada .lista b,.escena .lista b,.banda .lista b,
.portada h1,.portada h2,.escena h2,.banda h2{color:var(--claro)}
.portada .lista li::before,.escena .lista li::before,
.banda .lista li::before{background:var(--savia-claro)}
.portada .cinta,.escena .cinta,.banda .cinta{color:rgba(242,240,235,.86)}

.t-xxl{font-size:clamp(2.65rem,7.4vw,6rem);font-variation-settings:'opsz' 120,'SOFT' 24,'WONK' 1}
.t-xl {font-size:clamp(2.1rem,4.6vw,3.75rem);font-variation-settings:'opsz' 96,'SOFT' 22,'WONK' 1}
.t-l  {font-size:clamp(1.6rem,2.7vw,2.35rem);font-variation-settings:'opsz' 48,'SOFT' 18}
.t-m  {font-size:clamp(1.24rem,1.7vw,1.55rem);font-variation-settings:'opsz' 24,'SOFT' 14}
.t-s  {font-size:1.08rem;font-variation-settings:'opsz' 18,'SOFT' 10}

.entrada{font-size:clamp(1.02rem,1.35vw,1.2rem);line-height:1.62;color:var(--tinta-2);max-width:62ch}
.cla .entrada,.cla-2 .entrada{color:var(--tinta-2)}
.parr{color:var(--tinta-2);max-width:66ch}
.cla .parr,.cla-2 .parr{color:var(--tinta-2)}
.menudo{font-size:14.5px;line-height:1.5;color:var(--tinta-3)}
.cifra{font-family:var(--display);font-variant-numeric:tabular-nums;
  font-variation-settings:'opsz' 90,'SOFT' 20;letter-spacing:-.03em}

/* --- botones ------------------------------------------------------------ */
/* Un solo botón para todo el sitio: TOPO sobre crema, que es donde está casi
   siempre, y blanco cuando va encima de una fotografía. Antes el de serie era
   el blanco y había tres variantes por sección contradiciéndose.
   El topo con texto crema da 3,65. Está por debajo del 4,5 de la norma y es
   deliberado: es exactamente lo que hace suarezinteriorismo.es, la referencia
   que eligió Julio, y se lo dije con el número delante. Si algún día quiere
   que cumpla, la línea es una: el texto a var(--tinta), que sube a 4,77. */
.boton{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border:1px solid transparent;border-radius:var(--radio);
  background:var(--savia);color:var(--papel);
  font-size:14.5px;font-weight:600;letter-spacing:.01em;text-decoration:none;
  cursor:pointer;transition:background .22s var(--curva),color .22s var(--curva),
    border-color .22s var(--curva),transform .22s var(--curva)
}
.boton:hover{background:#6b6057;transform:translateY(-1px)}
.boton .fl{transition:transform .25s var(--curva)}
.boton:hover .fl{transform:translateX(4px)}
/* El botón fantasma va en dos sitios: sobre fotografía y sobre crema. El de
   serie es el de crema, que es donde está casi siempre; el claro se declara
   sólo para las secciones con foto. Antes era al revés y en suelos.html salía
   crema sobre crema. */
.boton.fantasma{background:transparent;color:var(--savia-txt);border-color:rgba(143,132,123,.4)}
.boton.fantasma:hover{background:rgba(143,132,123,.08);color:var(--savia-txt);border-color:var(--savia)}
.portada .boton,.escena .boton,.banda .boton{background:var(--claro);color:var(--noche)}
.portada .boton:hover,.escena .boton:hover,.banda .boton:hover{background:#fff}
.portada .boton.fantasma,.escena .boton.fantasma,.banda .boton.fantasma{
  color:var(--claro);border-color:var(--linea-osc-2);background:transparent}
.portada .boton.fantasma:hover,.escena .boton.fantasma:hover,.banda .boton.fantasma:hover{
  background:var(--claro);color:var(--noche);border-color:var(--claro)}
.botones{display:flex;flex-wrap:wrap;gap:12px}

.enlace{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-size:14.5px;font-weight:600;padding-bottom:3px;
  border-bottom:1px solid var(--linea-osc-2);transition:border-color .2s,color .2s
}
.enlace:hover{border-color:var(--savia-claro);color:var(--savia-claro)}
.cla .enlace{border-color:var(--linea-cla-2)}
.cla .enlace:hover{color:var(--savia-txt);border-color:var(--savia)}

/* --- cabecera ----------------------------------------------------------- */
.cab{
  position:fixed;inset:0 0 auto;z-index:100;
  display:flex;align-items:center;gap:20px;
  padding:16px var(--canal);
  transition:background .3s var(--curva),border-color .3s var(--curva),padding .3s var(--curva);
  border-bottom:1px solid transparent
}
/* La cabecera, al pegarse, va en el MISMO color que las bandas. 16 oct 2026,
   Julio: «el color de fondo que ves detrás de las fotos, el tipo arena, úsalo
   también para la cabecera, justo debajo del logo». Era rgba(58,52,47,.92),
   o sea --noche. Es el mismo 3,44 de la banda para los rótulos del menú:
   decisión suya, tomada con el número delante. */
/* DOS DISPARADORES, UN SOLO COLOR. El segundo es por recursos.html, 17 oct
   2026: Julio, «es la unica que al hacer scroll se le va el color a la
   cabecera». Medido: arriba del todo .cab va sin fondo (transparente) y el
   menu en rgb(242,240,235), crema. Eso funciona en las once paginas que
   abren con una foto oscura a sangre —.portada o .escena—, porque la foto
   hace de fondo. Recursos es la UNICA sin portada: arranca con la banda
   clara .corteza, y ahi el menu crema cae sobre crema y desaparece. Al
   bajar 24 px entraba .pegada y reaparecia; al volver arriba se iba otra
   vez, que es el parpadeo que vio.
   Se engancha a .bajo-cabecera, que es la clase que YA marca «esta pagina
   no tiene portada, deja sitio a la cabecera fija»: justo la condicion. Asi
   cualquier pagina futura sin portada lo hereda sola, y no depende del JS
   (sin JavaScript .pegada no se pone nunca y el menu seguiria invisible). */
.cab.pegada,
body:has(.bajo-cabecera) .cab{background:rgba(143,132,123,.92);border-bottom-color:var(--linea-osc);
  padding-block:11px;backdrop-filter:saturate(1.4) blur(14px)}
/* El botón del planificador de la cabecera va en CREMA. La cabecera está
   siempre sobre algo con cuerpo —la foto de portada, o la barra topo al
   bajar— así que el acento sobre el acento se perdía. El borde fino es por si
   alguna página deja la cabecera sobre crema antes de pegarse. */
.cab .boton{background:var(--claro);color:var(--noche);border-color:rgba(58,52,47,.16)}
.cab .boton:hover{background:#fff;color:var(--noche);border-color:rgba(58,52,47,.28)}

.marca{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
/* El logotipo ha subido DOS veces el mismo 20 % el 16 y el 17 de oct: 30 → 36
   → 43 px. Si vuelve a pedir «un 20 % más», es sobre 43, no sobre 30. */
.marca img{width:auto;height:43px}
.marca img{transition:opacity .2s}
.marca:hover img{opacity:.78}

.menu{display:flex;align-items:center;gap:clamp(14px,1.9vw,30px)}
.menu .grupo{position:relative}
.menu .raiz,.menu .suelto{
  display:block;text-decoration:none;font-size:11.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.13em;color:var(--claro-2);
  padding:10px 0;position:relative;transition:color .2s;white-space:nowrap
}
.menu .raiz::after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:1px;
  background:var(--savia-claro);transition:right .28s var(--curva)}
.menu .raiz:hover,.menu .raiz[aria-current]{color:var(--claro)}
.menu .raiz:hover::after,.menu .raiz[aria-current]::after{right:0}

/* El desplegable se abre al pasar por encima y también al llegar con el
   teclado: focus-within cubre el tabulador sin una línea de JavaScript. */
.menu .desplegable{
  position:absolute;top:100%;left:-18px;min-width:216px;
  /* 17 oct 2026, Julio: «el color de las cajas que muestras tiene que ser
     exactamente igual al color de donde están esas opciones de menú». Iba en
     --noche, que es el oscuro, mientras la barra pasó al topo: la caja parecía
     de otro sitio. Ahora es el MISMO color. Opaco y no al 92 % como la barra,
     porque una caja que se despliega encima del contenido tiene que taparlo.

     TRASLUCIDA, PROBADA Y DESCARTADA (18 oct 2026). Julio pidio verla al 60 %,
     le gusto, se puso en todas, luego pidio el 50 % y al verlo lo reviro:
     «dejala opaca como estaba antes, porque cuando hay letras debajo no queda
     tan bien como yo pensaba». Es lo que decian los numeros: el texto es crema
     y sobre el crema del contenido el contraste caia a 1,83 al 60 % y a 1,62 al
     50 %, cuando opaca da 3,20. Si se vuelve a plantear, la unica via que
     funciona es oscurecer el fondo de la caja respecto a la barra, y eso es
     justo lo que pidio no hacer. */
  background:var(--savia);border:1px solid var(--linea-osc-2);
  padding:10px 0;border-radius:var(--radio);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s var(--curva),transform .2s var(--curva),visibility .2s;
  box-shadow:0 24px 50px -26px rgba(0,0,0,.7);z-index:5
}
.menu .grupo:hover .desplegable,.menu .grupo:focus-within .desplegable{
  opacity:1;visibility:visible;transform:none
}
.menu .desplegable a{
  display:block;padding:9px 20px;text-decoration:none;
  font-size:14px;color:var(--claro);transition:color .18s,background .18s
}
.menu .desplegable a:hover{color:#fff;background:rgba(255,255,255,.16)}
.menu .boton{padding:11px 20px;color:var(--noche);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.11em}
.menu .boton:hover{color:var(--noche)}

.hamburguesa{display:none;width:44px;height:38px;background:none;border:1px solid var(--linea-osc-2);
  border-radius:var(--radio);cursor:pointer;padding:0;place-items:center}
.hamburguesa i{display:block;width:18px;height:1.5px;background:var(--claro);position:relative;
  transition:background .2s}
.hamburguesa i::before,.hamburguesa i::after{content:"";position:absolute;left:0;width:18px;
  height:1.5px;background:var(--claro);transition:transform .26s var(--curva)}
.hamburguesa i::before{top:-6px}
.hamburguesa i::after{top:6px}
.hamburguesa[aria-expanded="true"] i{background:transparent}
.hamburguesa[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
.hamburguesa[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1080px){
  .hamburguesa{display:grid}
  .menu{
    position:fixed;inset:0;flex-direction:column;justify-content:flex-start;align-items:stretch;
    gap:0;background:var(--noche);padding:88px var(--canal) 40px;
    overflow-y:auto;transform:translateY(-100%);
    transition:transform .38s var(--curva);visibility:hidden
  }
  .menu.abierto{transform:none;visibility:visible}
  .menu .grupo{position:static;border-bottom:1px solid var(--linea-osc);padding:14px 0}
  .menu .raiz{font-family:var(--display);font-size:1.6rem;text-transform:none;
    letter-spacing:-.01em;color:var(--claro);padding:0 0 8px}
  .menu .raiz::after{display:none}
  .menu .desplegable{position:static;opacity:1;visibility:visible;transform:none;
    background:none;border:0;box-shadow:none;padding:0;min-width:0}
  .menu .desplegable ul{display:flex;flex-wrap:wrap;gap:4px 22px}
  .menu .desplegable a{padding:4px 0;font-size:14.5px}
  .menu .desplegable a:hover{background:none}
  .menu .boton{margin-top:26px;align-self:flex-start;font-size:12px}
}

/* --- portada ------------------------------------------------------------ */
.portada{position:relative;min-height:min(100svh,880px);display:flex;align-items:flex-end;
  padding-bottom:clamp(46px,7vw,86px);overflow:hidden}
.portada .fondo{position:absolute;inset:0}
.portada .fondo img{width:100%;height:100%;object-fit:cover}
/* Si la cabecera trae VARIAS fotos, se apilan y se funden. La que manda es la
   que lleva `activa`; el guion sólo mueve esa clase. La primera la lleva ya
   escrita en el HTML, así que sin JavaScript se ve una foto fija en vez de
   ninguna. */
.portada .fondo img+img{position:absolute;inset:0}
.portada .fondo img:not(:only-child){opacity:0;transition:opacity 1.6s var(--curva)}
.portada .fondo img.activa{opacity:1}
/* Con un paso de 2 s el fundido de 1,6 s no llega a terminar: la foto no se
   queda quieta ni medio segundo y parece que la pantalla tiembla. Cuando el
   HTML pide un ritmo rapido, el fundido baja a 0,8 s y la foto respira. */
.portada .fondo[data-paso="2000"] img:not(:only-child){transition-duration:.8s}
@media (prefers-reduced-motion:reduce){
  .portada .fondo img:not(:only-child){transition:none}
}
.portada .fondo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(58,52,47,.7) 0%,rgba(58,52,47,.34) 34%,
    rgba(58,52,47,.78) 74%,rgba(58,52,47,.96) 100%)}
.portada .env{position:relative;width:100%}
.portada h1{max-width:17ch}
.portada .entrada{margin-top:22px;color:rgba(237,235,228,.84)}
.portada .botones{margin-top:34px}

.portada-corta{min-height:min(74svh,660px)}
.portada-corta h1{max-width:20ch}

/* pista de scroll */
.pista{position:absolute;right:var(--canal);bottom:clamp(46px,7vw,86px);
  display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--claro-3)}
.pista i{display:block;width:1px;height:40px;background:linear-gradient(var(--claro-3),transparent)}
@media (max-width:940px){.pista{display:none}}

/* --- franja de datos ---------------------------------------------------- */
.datos{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea-cla)}
.datos>div{background:var(--papel);padding:26px clamp(16px,2.2vw,30px)}
/* sobre la banda de salvia, las celdas van del blanco de papel para que la
   rejilla se despegue del fondo */
.osc .datos>div,.corteza .datos>div{background:#fff;color:var(--tinta)}
.datos .cifra{display:block;font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1}
.datos p{margin-top:9px;font-size:13.5px;line-height:1.45;color:var(--tinta-3)}
.cla .datos p{color:var(--tinta-3)}
@media (max-width:760px){.datos{grid-template-columns:1fr 1fr}}

/* --- rejilla de familias ------------------------------------------------ */
.familias{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
@media (max-width:920px){.familias{grid-template-columns:1fr}}
.familia{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(400px,46vw,540px);padding:clamp(24px,2.4vw,32px);
  text-decoration:none;overflow:hidden;border-radius:var(--radio);isolation:isolate
}
.familia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .8s var(--curva)}
.familia::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(58,52,47,.12) 0%,rgba(58,52,47,.5) 52%,rgba(58,52,47,.93) 100%)}
.familia:hover img{transform:scale(1.045)}
.familia .marquita{height:22px;width:auto;position:static;object-fit:contain;margin-bottom:14px;
  transform:none;z-index:1}
.familia h3{color:var(--claro)}
.familia p{margin-top:11px;font-size:14.5px;color:rgba(237,235,228,.72);max-width:34ch}
.familia .mas{margin-top:20px;font-size:13px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--savia-claro);display:inline-flex;gap:8px;align-items:center}
.familia .mas .fl{transition:transform .25s var(--curva)}
.familia:hover .mas .fl{transform:translateX(5px)}

/* --- los cuatro tonos --------------------------------------------------- */
.tonos{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,18px);
  background:transparent}
@media (max-width:820px){.tonos{grid-template-columns:1fr 1fr}}
/* Caja blanca como el resto. El color del tono vive en la raya de debajo del
   título, no en el título: sobre blanco, el terracota y el rojo se quedaban en
   3,3 de contraste, por debajo del 4,5 que hace falta para leer cómodo. */
.tono{position:relative;display:block;text-decoration:none;background:#fff;
  border:1px solid var(--linea-cla);padding-bottom:26px;overflow:hidden;
  border-radius:var(--radio);transition:border-color .25s var(--curva),box-shadow .25s var(--curva)}
.tono:hover{border-color:var(--linea-cla-2);box-shadow:0 10px 26px -14px rgba(58,52,47,.22)}
.tono .muestra{height:clamp(190px,22vw,290px);overflow:hidden}
.tono .muestra img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--curva)}
.tono:hover .muestra img{transform:scale(1.06)}
.tono .cuerpo{padding:22px clamp(16px,2vw,26px) 0}
.tono h3{font-size:1.32rem;color:var(--tinta)}
.tono .barra{height:4px;width:44px;margin-bottom:16px;border-radius:2px}
.tono p{margin-top:10px;font-size:13.6px;line-height:1.5;color:var(--tinta-3)}
.tono .dens{margin-top:14px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--savia-txt);font-weight:600;font-variant-numeric:tabular-nums}
.c-terra .barra{background:var(--terra)} .c-terra h3{color:var(--terra-txt)}
.c-rojo  .barra{background:var(--rojo)}  .c-rojo h3{color:var(--rojo-txt)}
.c-sol   .barra{background:var(--sol)}   .c-sol h3{color:var(--sol-txt)}
.c-gris  .barra{background:var(--gris)}  .c-gris h3{color:var(--gris-txt)}
/* la misma tira de tonos, sobre papel */
.cla .tonos,.cla-2 .tonos{background:var(--linea-cla)}
.cla .tono,.cla-2 .tono{background:var(--papel)}
.cla .tono p{color:var(--tinta-3)}
.cla .tono .dens{color:var(--tinta-2)}

/* --- bloque a dos columnas --------------------------------------------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.duo.arriba{align-items:start}
@media (max-width:900px){.duo{grid-template-columns:1fr;gap:34px}}
.duo .figura{border-radius:var(--radio);overflow:hidden}
/* Dos fotos en vez de texto+foto: el hueco de 80 px que separa una columna de
   texto de su imagen es demasiado entre dos fotos, que se leen como pareja. */
.duo.fotos{gap:clamp(10px,1.4vw,18px);align-items:start}
.duo.invertido .texto{order:2}
@media (max-width:900px){.duo.invertido .texto{order:0}}

.lista{margin-top:26px;display:grid;gap:15px}
.lista li{position:relative;padding-left:24px;font-size:15.4px;line-height:1.52;color:var(--tinta-2)}
.lista li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;
  background:var(--savia)}
.lista b{color:var(--tinta);font-weight:600}

/* --- fichas de producto ------------------------------------------------- */
.productos{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:clamp(14px,1.6vw,20px)}
.productos.dos{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){.productos.dos{grid-template-columns:1fr}}
/* muestra de color: sólo foto y nombre, sin ficha */
.productos.gama .producto .foto{height:clamp(150px,14.5vw,186px)}
.productos.gama .cuerpo{padding-bottom:18px}
.producto{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--linea-cla);border-radius:var(--radio);overflow:hidden;
  transition:border-color .25s var(--curva),transform .25s var(--curva),box-shadow .25s var(--curva)
}
.producto:hover{border-color:var(--linea-cla-2);transform:translateY(-2px);
  box-shadow:0 10px 26px -14px rgba(58,52,47,.22)}
/* La caja de la foto lleva altura definida y la imagen va posicionada dentro.
   Con la imagen como hija normal de una rejilla centrada, ni max-height:100%
   ni height:100% resuelven —son porcentajes contra una altura que el navegador
   considera indefinida— y cada ficha acababa con el cuadro de una altura y las
   fotos desbordando sobre el texto. Posicionada, el porcentaje sí resuelve, y
   el aire de alrededor lo da el padding de la propia imagen: object-fit mide
   sobre la caja de contenido, así que respeta ese margen. */
.producto .foto{
  position:relative;height:clamp(168px,16.5vw,214px);overflow:hidden;
  background:radial-gradient(120% 100% at 50% 22%,rgba(242,240,235,.07),transparent 68%)
}
.cla .producto .foto{background:radial-gradient(120% 100% at 50% 22%,rgba(27,26,23,.05),transparent 68%)}
.producto .foto img{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  padding:16px;object-fit:contain
}
.producto .foto.llena{background:none}
.producto .foto.llena img{padding:0;object-fit:cover}
.producto .cuerpo{padding:4px 20px 22px;display:flex;flex-direction:column;flex:1}
.producto h3{font-size:1.2rem}
.producto .medida{margin-top:5px;font-size:13px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--marron);font-variant-numeric:tabular-nums}
.producto .desc{margin-top:12px;font-size:14.2px;line-height:1.5;color:var(--tinta-3)}
.producto dl{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--linea-cla);
  display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:13.2px}
.producto dt{color:var(--tinta-3)}
.producto dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.producto .pie{margin-top:auto;padding-top:15px}

.sello{
  display:inline-flex;align-items:center;gap:7px;padding:5px 10px;
  border:1px solid var(--linea-cla-2);border-radius:99px;
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-2);font-variant-numeric:tabular-nums
}
.sello.verde{color:var(--savia-txt);border-color:rgba(143,132,123,.38)}
/* los de encima de una fotografía, al revés */
.portada .sello,.escena .sello,.banda .sello{border-color:var(--linea-osc-2);color:var(--claro-2)}
.portada .sello.verde,.escena .sello.verde,.banda .sello.verde{
  color:var(--savia-claro);border-color:rgba(194,187,181,.45)}
.sellos{display:flex;flex-wrap:wrap;gap:8px}

/* --- tabla de características ------------------------------------------ */
.ficha{margin-top:34px;border-top:1px solid var(--linea-cla)}
.ficha>div{display:grid;grid-template-columns:180px 1fr;gap:8px 34px;
  padding:17px 0;border-bottom:1px solid var(--linea-cla)}
.osc .ficha{border-top-color:var(--linea-osc-2)}
.corteza .ficha{border-top-color:var(--linea-cla-2)}
.osc .ficha>div{border-bottom-color:var(--linea-osc)}
.corteza .ficha>div{border-bottom-color:var(--linea-cla)}
.ficha dt{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta-3);margin:0}
.osc .ficha dt{color:var(--claro-2)}
.corteza .ficha dt{color:var(--tinta-3)}
.ficha dd{margin:0;font-size:15.2px;line-height:1.55;color:var(--tinta-2)}
.osc .ficha dd{color:var(--claro)}
.corteza .ficha dd{color:var(--tinta-2)}
.ficha dd b{color:var(--tinta);font-weight:600}
.osc .ficha dd b{color:#fff}
.corteza .ficha dd b{color:var(--tinta)}
@media (max-width:700px){.ficha>div{grid-template-columns:1fr;gap:5px}}

/* --- tabla de medidas --------------------------------------------------- */
.tabla{width:100%;min-width:520px;font-size:15px}
.tabla th,.tabla td{text-align:left;padding:15px 24px 15px 0;vertical-align:top;
  border-bottom:1px solid var(--linea-cla)}
.osc .tabla th,.osc .tabla td{border-bottom-color:var(--linea-osc)}
.corteza .tabla th,.corteza .tabla td{border-bottom-color:var(--linea-cla)}
.tabla th{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tinta-3);white-space:nowrap}
.osc .tabla th{color:#fff}
.corteza .tabla th{color:var(--savia-txt)}
.tabla td{color:var(--tinta-2);font-variant-numeric:tabular-nums}
.osc .tabla td{color:var(--claro)}
.corteza .tabla td{color:var(--tinta-2)}
.tabla td:first-child{color:var(--tinta);font-weight:600;white-space:nowrap}
.osc .tabla td:first-child{color:#fff}
.corteza .tabla td:first-child{color:var(--tinta)}
.tabla tr:last-child th,.tabla tr:last-child td{border-bottom:0}
.desliza{overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:thin;padding-bottom:2px}

/* --- planificador ------------------------------------------------------- */
.plan{position:relative;overflow:hidden}
.plan .env{position:relative}
.plan .pantalla{
  border-radius:var(--radio);overflow:hidden;border:1px solid var(--linea-cla);
  box-shadow:0 26px 60px -30px rgba(58,52,47,.34)
}
/* Cuatro tarjetas verdes en dos filas, no cuatro bandas de lado a lado.
   Apiladas y a todo lo ancho volvían a leerse como fondo oscuro, que es lo que
   se quería quitar; en tarjeta, el verde es un acento sobre la banda clara. */
.pasos{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(12px,1.6vw,20px)}
@media (max-width:720px){.pasos{grid-template-columns:1fr}}
.paso{background:#fff;color:var(--tinta);border:1px solid var(--linea-cla);
  border-left:3px solid var(--topo);border-radius:var(--radio);
  padding:clamp(18px,2.2vw,26px);display:grid;grid-template-columns:auto 1fr;
  gap:14px;align-items:start}
.paso .n{font-family:var(--display);font-size:1.6rem;line-height:1;
  color:var(--savia-txt);font-variant-numeric:tabular-nums}
.paso p{font-size:14.6px;line-height:1.6;color:var(--tinta-2)}
.paso b{color:var(--tinta);font-weight:600}

/* --- sostenibilidad ----------------------------------------------------- */
.pilares{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea-cla)}
/* LA REJILLA TIENE QUE CUADRAR CON CUANTOS PILARES HAY. 17 oct 2026, Julio:
   «encima de la fotografia del liston decorativo sale un cuadrado en gris».
   No era de la foto: el bloque de los dos perfiles tenia DOS pilares en una
   rejilla de TRES, y la celda vacia dejaba ver el fondo de la rejilla, que es
   gris porque es lo que pinta las lineas de separacion entre celdas.
   Sobre banda clara canta; sobre .osc no, porque alli el fondo va
   transparente. Por eso el bloque de cuatro pilares del parquet no se veia
   gris pero si dejaba uno suelto en la segunda fila. */
.pilares.dos{grid-template-columns:repeat(2,1fr)}
.pilares.cuatro{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.pilares{grid-template-columns:1fr}}
.pilar{background:var(--papel);padding:clamp(26px,3vw,40px)}
.osc .pilares{background:transparent;gap:clamp(12px,1.6vw,20px)}
.osc .pilar{background:#fff;color:var(--tinta);border:1px solid var(--linea-cla);
  border-top:3px solid var(--topo);border-radius:var(--radio)}

/* ─── GUÍAS DE INSTALACIÓN ─────────────────────────────────────────────
   17 oct 2026. El contenido viene de la web antigua de Mibawood, que trae las
   guías paso a paso que aquí no había. Cuatro piezas: lo que hay que mirar
   antes, qué trae el sistema, qué te da y los pasos numerados con su diagrama.
   Nombres comprobados antes de estrenarlos. */
.antes-instal{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,54px)}
.antes-instal h4{font-family:var(--display);font-weight:400;font-size:1.25rem;margin:0 0 12px}
@media (max-width:720px){.antes-instal{grid-template-columns:1fr}}

.esquema-instal{margin:0;background:#fff;border:1px solid var(--linea-cla);
  border-radius:var(--radio);padding:clamp(16px,2.4vw,30px)}
.esquema-instal img{width:100%;height:auto;display:block}
.esquema-instal figcaption{margin-top:12px;font-size:13px;color:var(--tinta-3)}

.incluye-instal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px)}
.incluye-instal>div{display:flex;gap:16px;align-items:flex-start;background:#fff;
  border:1px solid var(--linea-cla);border-radius:var(--radio);padding:clamp(16px,2vw,24px)}
.incluye-instal img{width:52px;height:52px;flex:none}
.incluye-instal b{display:block;font-size:15px;margin-bottom:5px}
.incluye-instal span{display:block;font-size:13.5px;line-height:1.5;color:var(--tinta-2)}
@media (max-width:860px){.incluye-instal{grid-template-columns:1fr}}

.ventajas-instal{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.6vw,22px);text-align:center}
.ventajas-instal li{font-size:13.5px;line-height:1.45;color:var(--tinta-2)}
.ventajas-instal img{width:46px;height:46px;display:block;margin:0 auto 10px}
@media (max-width:860px){.ventajas-instal{grid-template-columns:repeat(2,1fr)}}

/* Los pasos van en <ol>: son una secuencia, y el número no es decoración —si
   alguien los lee con un lector de pantalla, el orden es la información. */
.pasos-instal{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:clamp(14px,1.8vw,24px)}
.pasos-instal li{background:#fff;border:1px solid var(--linea-cla);
  border-radius:var(--radio);padding:clamp(14px,1.6vw,20px);display:flex;flex-direction:column}
.pasos-instal img{width:100%;height:auto;display:block;border-radius:var(--radio);
  background:var(--papel-2)}
.pasos-instal .n{margin:14px 0 4px;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--savia-txt)}
.pasos-instal h4{margin:0 0 7px;font-size:15.5px;font-weight:600}
.pasos-instal p{margin:0;font-size:13.5px;line-height:1.5;color:var(--tinta-2)}

/* ─── TIRA DE ESCENAS ──────────────────────────────────────────────────
   Fotos de ambiente en fila, con su pie. Nombre propio y comprobado antes de
   estrenarlo: el 17 oct llamé `tonos` a una clase mía y resultó que ya
   existía —la rejilla de cuatro colores de la portada—, y le pisé el
   display:grid en tres páginas sin que saltara nada. */
.escenas-fam{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,18px)}
.escenas-fam figure{margin:0}
.escenas-fam img{width:100%;height:auto;display:block;border-radius:var(--radio)}
.escenas-fam figcaption{
  margin-top:9px;font-size:12.5px;line-height:1.45;color:var(--tinta-3)
}
/* ─── FICHA DE PARQUET ────────────────────────────────────────────────
   17 oct 2026. Copia la ficha del catalogo TEMPO 2027 (paginas 24-30): texto
   arriba, DOS fotos —textura a la izquierda, ambiente a la derecha— y una fila
   de datos debajo.

   Las dos fotos van recortadas a 3:4 en origen, asi que la pareja casa sola sin
   object-fit ni alturas fijas. Si algun dia entra una que no sea 3:4, se vera:
   una sera mas alta que la otra.

   La seccion de parquet es .osc, o sea banda TOPO. Las celdas de datos van en
   blanco, como hace .datos, para que la rejilla se despegue del fondo; y como
   .osc vuelca los tokens en claro, dentro de la celda hay que devolverlos a
   oscuro o el texto sale blanco sobre blanco. */
.parq{margin-top:clamp(40px,5vw,72px)}
.parq-txt{max-width:62ch}
.sub-parq{margin-top:4px;font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--claro-2)}
.parq-txt .parr{margin-top:14px}
.sello-parq{margin-top:12px;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--claro-2)}
.parq-fotos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,18px);
  margin-top:clamp(18px,2.2vw,28px)}
.parq-fotos img{width:100%;height:auto;display:block;border-radius:var(--radio)}
.datos-parq{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;
  background:var(--linea-osc);margin:clamp(14px,1.8vw,22px) 0 0}
.datos-parq>div{background:#fff;padding:16px clamp(12px,1.4vw,18px);
  --tinta:#1A1A1A; --tinta-2:#3D3D3D; --tinta-3:#6B6560}
.datos-parq dt{margin:0;font-size:10.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta-3)}
.datos-parq dd{margin:5px 0 0;font-size:14px;line-height:1.4;color:var(--tinta)}
/* Seis columnas no caben en un movil, y a cuatro se parte mal porque «Especie»
   lleva una linea larga. Tres y dos. */
@media (max-width:980px){.datos-parq{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.datos-parq{grid-template-columns:repeat(2,1fr)}
  .parq-fotos{grid-template-columns:1fr}}

/* La foto ancha de portada de familia (Trama) y la de MibaIndoor. */
.lamina-parq{margin:0}
.lamina-parq img{width:100%;height:auto;display:block;border-radius:var(--radio);
  max-height:clamp(320px,46vw,560px);object-fit:cover;object-position:center 58%}

/* La foto grande de cada material en mantenimiento. Va a lo ancho y recortada
   en banda: la pagina tiene tres y, a altura completa, el lector baja tres
   pantallas de foto antes de llegar a lo que tiene que hacer con su terraza. */
.lamina-mant{margin:0}
.lamina-mant img{width:100%;height:auto;display:block;border-radius:var(--radio);
  max-height:clamp(260px,34vw,420px);object-fit:cover;object-position:center 56%}

/* La lamina «WPC coextruido» del catalogo (pag. 37), con los circulos de color.
   Viene sobre BLANCO y la banda de composite es topo, asi que se presenta como
   lamina: fondo claro, esquinas redondeadas y un poco de aire dentro. No se le
   quita el blanco porque las dos lineas de abajo —«paquetes de 3 uds.» y «otros
   colores disponibles»— van fuera del rectangulo gris y en texto oscuro.
   Tope de 1040 px: a lo ancho de la banda la letra de la lamina salia mas grande
   que la de la propia pagina, y cantaba que es una imagen pegada. */
.lamina-comp{margin:0;display:flex;justify-content:center}
.lamina-comp img{width:100%;max-width:1040px;height:auto;display:block;
  background:#fff;border-radius:18px}
/* 18 px y no var(--radio), que son 2: Julio pidio la lamina «con las esquinas
   redondeadas, igual que esta en la foto donde pone WPC coextruido», y la
   tarjeta del catalogo lleva un redondeo generoso. Con 2 px quedaba un bloque
   blanco de esquina viva con una tarjeta redondeada dentro.
   NO se le quita el blanco: probado, y al hacerlo se va tambien el antialias de
   las letras, que deja cercos y texto fantasma sobre el topo. */

/* Variante de TRES, para las fotos de baldosas de la pagina 12 del catalogo.
   Son cuadradas y pequenas: a cuatro por fila se quedaban en nada. */
.escenas-fam.tres{grid-template-columns:repeat(3,1fr)}
@media (max-width:720px){.escenas-fam{grid-template-columns:1fr 1fr}
  .escenas-fam.tres{grid-template-columns:1fr 1fr}}

/* ─── LAS TRES FAMILIAS, COMO ÍNDICE ──────────────────────────────────
   17 oct 2026. Cada ficha es un ENLACE a su bloque de abajo, donde están las
   fotos con su descripción en el formato de producto del resto del sitio.
   Antes se abría con un «details» y Julio prefirió verlo todo puesto.

   Un aviso que me costó: la clase que usé primero se llamaba `tonos` y YA
   EXISTÍA —es la rejilla de cuatro colores de la portada—, así que le pisó el
   display:grid en portada, materiales y bambú sin que saltara nada. Antes de
   estrenar un nombre de clase, buscarlo en la hoja. */
a.pilar.fam-ir{text-decoration:none;color:inherit;display:block;
  transition:border-color .22s var(--curva),transform .22s var(--curva)}
a.pilar.fam-ir:hover{transform:translateY(-2px)}
a.pilar.fam-ir:hover .abre{gap:11px}
a.pilar.fam-ir:focus-visible{outline:2px solid var(--savia);outline-offset:3px}
.fam-ir .abre{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--savia-txt);transition:gap .2s var(--curva)
}
/* la flecha hacia abajo, dibujada con bordes: un carácter ↓ cambia de forma
   en cada sistema y a 12 px canta */
.fam-ir .abre i{width:0;height:0;border:4px solid transparent;
  border-top-color:currentColor;margin-top:3px}
/* El ancla queda debajo de la cabecera fija si no se le deja hueco. */
/* Anclas que NO son una seccion entera sino un <h3> dentro de una: sin esto
   la cabecera fija de 70 px se come el titulo al que acabas de saltar. */
#origin-wood,#art-wood,#reborn-wood,#baldosas,#traviesas{scroll-margin-top:96px}

.osc .pilar h3{color:var(--tinta)}
.pilar .num{font-family:var(--display);font-size:2.6rem;line-height:1;color:var(--savia);
  font-variant-numeric:tabular-nums;font-variation-settings:'opsz' 90,'SOFT' 20}
.osc .pilar .num{color:var(--savia)}
.pilar h3{margin-top:16px;font-size:1.3rem}
.pilar p{margin-top:12px;font-size:14.6px;line-height:1.56;color:var(--tinta-2)}
.osc .pilar p{color:var(--tinta-2)}

.mezcla{display:flex;height:14px;border-radius:99px;overflow:hidden;margin-top:26px}
.mezcla i{display:block}
.mezcla .m1{width:60%;background:var(--terra)}
.mezcla .m2{width:30%;background:var(--savia)}
.mezcla .m3{width:10%;background:var(--marron)}
.leyenda{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:13.5px;
  color:var(--tinta-2)}
.osc .leyenda{color:var(--claro-2)}
.leyenda span{display:inline-flex;align-items:center;gap:8px}
.leyenda em{width:9px;height:9px;border-radius:2px;font-style:normal;flex:none}
.leyenda em.m1{background:var(--terra)}
.leyenda em.m2{background:var(--savia)}
.leyenda em.m3{background:var(--marron)}

/* --- cita --------------------------------------------------------------- */
.cita{max-width:26ch;font-size:clamp(1.7rem,3.1vw,2.6rem);line-height:1.14;
  font-variation-settings:'opsz' 72,'SOFT' 26,'WONK' 1}
.cita em{font-style:normal;color:var(--terra)}
.cla .cita em{color:var(--marron)}

/* --- banda ancha con foto ---------------------------------------------- */
.banda{position:relative;min-height:clamp(320px,42vw,520px);display:flex;align-items:center;
  overflow:hidden}
.banda>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banda::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(58,52,47,.9) 0%,rgba(58,52,47,.55) 52%,rgba(58,52,47,.25) 100%)}
.banda .env{position:relative;z-index:1}

/* --- desplegables ------------------------------------------------------- */
.acordeon{border-top:1px solid var(--linea-cla)}
.osc .acordeon{border-top-color:var(--linea-osc-2)}
.corteza .acordeon{border-top-color:var(--linea-cla-2)}
.acordeon details{border-bottom:1px solid var(--linea-cla)}
.osc .acordeon details{border-bottom-color:var(--linea-osc)}
.corteza .acordeon details{border-bottom-color:var(--linea-cla)}
.acordeon summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--display);font-size:clamp(1.15rem,1.7vw,1.42rem);
  font-variation-settings:'opsz' 30,'SOFT' 14
}
.acordeon summary::-webkit-details-marker{display:none}
.acordeon summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg);transition:transform .28s var(--curva);opacity:.6}
.acordeon details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.acordeon .contenido{padding:0 0 26px}

/* --- pie ---------------------------------------------------------------- */
/* El pie también pasa a claro. Un pie oscuro es lo convencional, pero con el
   resto de la página en cremas dejaba un bloque negro al final que era
   justamente lo que sobraba. Lo que le da peso ahora es la raya verde de
   arriba y los rótulos en verde, no el fondo. */
.pie-sitio{background:var(--salvia-papel-2);border-top:2px solid var(--topo);
  padding-block:clamp(50px,6vw,78px) 34px;color:var(--tinta)}
.pie-rejilla{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.3fr;
  gap:clamp(24px,2.4vw,44px)}
@media (max-width:1100px){.pie-rejilla{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}
@media (max-width:820px){.pie-rejilla{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pie-rejilla{grid-template-columns:1fr}}
.pie-sitio h4{font-size:12px;font-family:var(--sans);font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--savia);margin-bottom:16px}
.pie-sitio li+li{margin-top:10px}
.pie-sitio .menudo{color:var(--tinta-3)}
.pie-sitio a{text-decoration:none;font-size:14.6px;color:var(--tinta-2);transition:color .2s}
.pie-sitio a:hover{color:var(--savia-txt)}
.pie-sitio address{font-style:normal;font-size:14.6px;line-height:1.62;color:var(--tinta-2)}
.pie-marca img{height:44px;width:auto;margin-bottom:18px}
.pie-abajo{margin-top:clamp(38px,5vw,60px);padding-top:22px;border-top:1px solid var(--linea-cla);
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;
  font-size:13px;color:var(--tinta-3)}

/* --- aparición al desplazar --------------------------------------------
   Lo esconde la clase .espera, que pone el propio JavaScript pieza a pieza
   y sólo si la pestaña está a la vista. Si no hay JavaScript, o si la página
   se abrió en segundo plano — donde IntersectionObserver no dispara —, no se
   esconde nada y la página se ve entera. Nunca puede quedarse en negro. */
.rev.espera{opacity:0;transform:translateY(22px)}
.rev.dentro{opacity:1;transform:none;
  transition:opacity .7s var(--curva),transform .7s var(--curva)}
@media (prefers-reduced-motion:reduce){
  .rev.espera{opacity:1;transform:none}
  .familia img,.tono .muestra img{transition:none}
}

/* --- utilidades --------------------------------------------------------- */
.centro{text-align:center;margin-inline:auto}
.ancho-medio{max-width:70ch}
.sep{height:1px;background:var(--linea-osc);border:0;margin:0}
.cla .sep{background:var(--linea-cla)}
.mt-s{margin-top:18px}.mt-m{margin-top:30px}.mt-l{margin-top:clamp(34px,4vw,56px)}
.oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.encabezado{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:22px clamp(30px,4vw,60px);margin-bottom:clamp(34px,4vw,54px)}
.encabezado>*{flex:1 1 340px;min-width:0}
.encabezado>div{flex:1 1 460px}
.encabezado .t-xl,.encabezado .t-l{max-width:19ch}
.encabezado .parr{max-width:44ch}

/* ==========================================================================
   Bloques de portada al modo de vondom.com: la imagen manda, el texto es
   pequeño y va al pie, y las secciones se anuncian con un rótulo diminuto en
   versalitas. La diferencia es la paleta: ellos van a blanco y negro, aquí
   el fondo es verde bosque y los tonos de madera hacen de color.
   ========================================================================== */

/* --- escena: la portada con pases ------------------------------------- */
.escena{position:relative;height:min(100svh,900px);overflow:hidden;background:var(--noche)}
.escena .toma{
  position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;
  transition:opacity 2s var(--curva),visibility 2s
}
.escena .toma.activa{opacity:1;visibility:visible}
.escena .toma>img,.escena .toma>video{width:100%;height:100%;object-fit:cover}
/* El cartel del vídeo se encuadra igual que el propio vídeo: si no, mientras
   carga se ve la foto deformada y al arrancar pega un salto. */
.escena .toma>video{object-position:center;background:var(--noche)}
.escena .toma::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(58,52,47,.62) 0%,rgba(58,52,47,.14) 32%,
    rgba(58,52,47,.66) 72%,rgba(58,52,47,.94) 100%)}
.escena .rotulo{
  position:absolute;left:0;right:0;bottom:clamp(72px,9vw,120px);z-index:2;
  padding-inline:var(--canal);max-width:var(--ancho);margin-inline:auto
}
/* El titular de la portada es el h1 de la página: una web sin h1 le pone difícil
   al buscador saber de qué va. Comparte estilo con los h2 de las otras tomas. */
.escena .rotulo h1,.escena .rotulo h2{font-size:clamp(2.3rem,5.6vw,4.6rem);
  font-variation-settings:'opsz' 110,'SOFT' 24,'WONK' 1;max-width:16ch}
.escena .rotulo.largo h1,.escena .rotulo.largo h2{max-width:22ch}
.escena .rotulo p{margin-top:14px;font-size:clamp(1rem,1.3vw,1.16rem);
  color:rgba(242,240,235,.82);max-width:46ch}
.escena .rotulo .enlace{margin-top:24px}

/* mandos: una raya por pase, como el índice de un catálogo */
.mandos{position:absolute;left:0;right:0;bottom:clamp(30px,4vw,46px);z-index:3;
  display:flex;gap:10px;padding-inline:var(--canal);max-width:var(--ancho);
  margin-inline:auto}
.mandos button{
  flex:0 0 54px;height:2px;padding:0;border:0;cursor:pointer;
  background:var(--linea-osc-2);position:relative;overflow:hidden
}
.mandos button[aria-current="true"]::after{content:"";position:absolute;inset:0;
  background:var(--savia-claro)}
.mandos button:hover{background:var(--claro-3)}

/* --- declaración: el titular que se desplaza al bajar ------------------ */
.declara{overflow:hidden;padding-block:clamp(70px,10vw,140px)}
/* Medido a 1280 px: el titular salía a 147 px cuando el mayor de la página
   —los de las portadas— mide 71,7. El doble. Y con 1.811 px de ancho no cabía
   en pantalla, así que además había que leerlo a trozos. A 7vw se queda en
   torno a 90 px, vez y cuarto el titular de portada, y entra entero con
   márgenes. En móvil sigue sobresaliendo y ahí el desplazamiento tiene
   sentido; en escritorio se queda quieto, que es lo que hace la tira cuando
   no sobra nada (sobra = 0 en el guion). */
.declara .tira{white-space:nowrap;font-family:var(--display);font-weight:400;
  padding-inline:var(--canal);
  font-size:clamp(2.2rem,7vw,7rem);line-height:1;letter-spacing:-.03em;
  font-variation-settings:'opsz' 144,'SOFT' 26,'WONK' 1;
  will-change:transform}
.declara .bajo{max-width:var(--ancho);margin:clamp(30px,4vw,54px) auto 0;
  padding-inline:var(--canal);display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,60px)}
@media (max-width:820px){.declara .bajo{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.declara .tira{transform:none !important}}

/* --- colecciones: imagen grande, nombre debajo ------------------------- */
.colecciones{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.4vw,34px)}
@media (max-width:940px){.colecciones{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.colecciones{grid-template-columns:1fr}}
.coleccion{display:block;text-decoration:none}
.coleccion .marco{overflow:hidden;border-radius:var(--radio);aspect-ratio:4/5;
  background:var(--papel-3)}
.coleccion .marco img{width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--curva)}
.coleccion:hover .marco img{transform:scale(1.05)}
.coleccion h3{margin-top:18px;font-size:clamp(1.3rem,1.9vw,1.7rem)}
.coleccion .sub{margin-top:6px;font-size:13px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--tinta-3)}
.coleccion p{margin-top:11px;font-size:14.6px;line-height:1.55;color:var(--tinta-2);
  max-width:38ch}
.coleccion .ver{margin-top:16px;display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--savia-txt);border-bottom:1px solid transparent;padding-bottom:2px;
  transition:border-color .22s}
.coleccion:hover .ver{border-bottom-color:currentColor}
.coleccion .ver .fl{transition:transform .25s var(--curva)}
.coleccion:hover .ver .fl{transform:translateX(4px)}

/* cuatro colecciones: en tres columnas la última queda huérfana */
.colecciones.cuatro{grid-template-columns:repeat(4,1fr)}
@media (max-width:1120px){.colecciones.cuatro{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.colecciones.cuatro{grid-template-columns:1fr}}

/* variante ancha: dos columnas, imagen apaisada */
.colecciones.dos{grid-template-columns:1fr 1fr}
.colecciones.dos .marco{aspect-ratio:16/11}
@media (max-width:760px){.colecciones.dos{grid-template-columns:1fr}}
.productos.dos{grid-template-columns:1fr 1fr}
@media (max-width:760px){.productos.dos{grid-template-columns:1fr}}
.productos.gama{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.productos.gama{grid-template-columns:1fr 1fr}}
/* TRES fichas, no cuatro. 17 oct 2026, Julio: «en baldosas módulos hay tres
   fotos, y debajo has puesto tres fotos de jardines; haz que ocupen el mismo
   ancho, poniéndonos como referencia las fotos de abajo». Con las cuatro
   columnas de .gama las tres fichas ocupaban 3/4 del ancho y dejaban un hueco.
   Lleva el MISMO gap y el MISMO corte de 720 px que .escenas-fam.tres: con
   gaps distintos las columnas no caen en la misma vertical, y con cortes
   distintos se desalinean entre 720 y 900. Es el único bloque .gama con tres
   fichas; los otros seis tienen cuatro. */
.productos.gama.tres{grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px)}
@media (max-width:720px){.productos.gama.tres{grid-template-columns:1fr 1fr}}
.productos.gama .foto{aspect-ratio:5/4}
.productos.gama .cuerpo{padding-bottom:18px}

/* --- aviso de contenido pendiente ------------------------------------- */
.pendiente{
  border:1px dashed var(--linea-cla-2);border-radius:var(--radio);
  padding:clamp(22px,3vw,34px);background:rgba(61,61,61,.03)
}
.pendiente h3{font-size:1.24rem}
.pendiente p{margin-top:12px;font-size:15px;line-height:1.58;color:var(--tinta-2);
  max-width:60ch}
.pendiente .etiqueta{display:inline-block;margin-bottom:14px;font-size:11px;
  font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--sol-txt)}

/* ─────────────── EL SELECTOR DE IDIOMA ───────────────
   17 oct 2026, Julio: «en vez de que salgan todos arriba en la barra, que sea
   un desplegable, que por defecto salga el idioma y al pulsar se abran los
   disponibles». Antes eran cinco códigos sueltos: en móvil competían con la
   hamburguesa y en escritorio ensuciaban la barra.

   Es un <details> NATIVO, no un menú a mano. Abre, cierra, va con el teclado y
   lo lee un lector de pantalla sin que haya que programar nada; el guion sólo
   añade dos comodidades —cerrar al pulsar fuera y con Escape— y si el guion no
   carga, el desplegable sigue funcionando.

   Códigos y no banderas: una bandera es un país y un idioma no lo es —el
   portugués no es Portugal ni el francés Francia—. Dentro va el código Y el
   nombre en su propio idioma, que es como encuentra uno el suyo sin leer el
   tuyo. El idioma en el que estás no aparece en la lista: ya estás en él. */
.idiomas{position:relative;margin-left:14px;flex:none}
.idiomas>summary{
  display:flex;align-items:center;gap:5px;cursor:pointer;list-style:none;
  padding:5px 7px;border-radius:3px;font-size:11px;font-weight:600;
  letter-spacing:.06em;line-height:1;color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.14);transition:background .18s,color .18s
}
.idiomas>summary::-webkit-details-marker{display:none}
.idiomas>summary:hover,.idiomas>summary:focus-visible{color:#fff;background:rgba(255,255,255,.24)}
/* la flechita, dibujada con bordes: un carácter ▾ cambia de forma en cada
   sistema y a 11 px se nota */
.idiomas>summary i{
  width:0;height:0;border:3.5px solid transparent;border-top-color:currentColor;
  margin-top:2px;transition:transform .2s var(--curva)
}
.idiomas[open]>summary i{transform:rotate(180deg);margin-top:-2px}
.idi-lista{
  position:absolute;top:calc(100% + 7px);left:0;z-index:20;min-width:148px;
  display:flex;flex-direction:column;padding:5px;
  background:var(--savia);border:1px solid var(--linea-osc-2);
  border-radius:var(--radio);box-shadow:0 20px 44px -22px rgba(0,0,0,.45)
}
.idi-lista a{
  display:flex;align-items:baseline;gap:8px;padding:7px 9px;border-radius:3px;
  font-size:13px;text-decoration:none;color:var(--claro);white-space:nowrap
}
.idi-lista a b{font-size:10.5px;letter-spacing:.08em;opacity:.88;min-width:19px}
.idi-lista a:hover,.idi-lista a:focus-visible{background:rgba(255,255,255,.16);color:#fff}
@media (max-width:860px){
  /* Con el menú plegado el sitio es de la hamburguesa: el selector se va a su
     izquierda, pero NO se esconde. Cambiar de idioma no puede quedar detrás de
     un menú que hay que abrir. */
  .idiomas{margin-left:auto;margin-right:6px}
  .idiomas>summary{padding:5px 6px;font-size:10.5px}
}

/* ── EL MAPA DE LA RED ──────────────────────────────────────────────────────
   Dibujado en SVG a propósito: la CSP de la web es `default-src 'self'`, así
   que no caben ni Leaflet ni las teselas de nadie. Y sale ganando — ni una
   petición fuera, ni una cookie, ni un aviso de RGPD, y unos kilobytes.
   Lo genera tools/mapa-red.py: para mover una chincheta se cambia allí su
   latitud y longitud y se vuelve a pegar. Los `path` no se editan a mano. */
.mapa-env{margin:0 auto clamp(22px,3vw,36px);max-width:620px}
.mapa-red{display:block;width:100%;height:auto}
.mapa-red .tierra path{fill:var(--papel-3);stroke:var(--linea-cla-2);stroke-width:1.1;
  stroke-linejoin:round}
.mapa-red .chincheta{cursor:pointer}
.mapa-red .chincheta:focus-visible{outline:none}
.mapa-red .halo{fill:var(--savia);opacity:0;transition:opacity .18s ease}
.mapa-red .punto{fill:var(--savia);stroke:var(--papel);stroke-width:2.5;
  transition:fill .18s ease}
.mapa-red .chincheta:hover .halo,.mapa-red .chincheta:focus-visible .halo,
.mapa-red .chincheta.on .halo{opacity:.22}
.mapa-red .chincheta:hover .punto,.mapa-red .chincheta:focus-visible .punto,
.mapa-red .chincheta.on .punto{fill:var(--terra)}
.mapa-red .globo{pointer-events:none}
.mapa-red .globo rect{fill:var(--tinta)}
.mapa-red .globo text{font-family:var(--sans);fill:var(--papel)}
.mapa-red .globo .g1{font-size:15px;font-weight:600}
.mapa-red .globo .g2{font-size:12.5px;fill:rgba(250,248,245,.74)}
.mapa-pie{color:var(--tinta-3);margin-top:10px}
/* La ficha no tiene borde, así que se marca con una pestaña a la izquierda:
   se ve sin mover nada de sitio ni cambiar la altura de la rejilla. */
.pilar[data-mbw-red]{box-shadow:inset 3px 0 0 transparent;transition:box-shadow .18s ease}
.pilar[data-mbw-red].on{box-shadow:inset 3px 0 0 var(--terra)}
@media (prefers-reduced-motion:reduce){
  .mapa-red .halo,.mapa-red .punto,.pilar[data-mbw-red]{transition:none}}

/* ── LA RED: LISTA A LA IZQUIERDA, MAPA A LA DERECHA ────────────────────────
   Antes iban uno debajo del otro y había que elegir: o veías el mapa, o veías
   los distribuidores. Encenderse mutuamente no sirve de nada si para ver el
   efecto hay que hacer scroll. En pantalla ancha van en paralelo y el mapa se
   queda PEGADO arriba mientras se recorre la lista; por debajo de 900 px se
   apilan y el mapa deja de pegarse, que en un móvil taparía media pantalla. */
.red-dupla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:clamp(18px,2.6vw,38px);align-items:start}
.red-lista{display:grid;gap:1px;background:var(--linea-cla)}
.red-lista .pilar{padding:clamp(15px,1.5vw,21px)}
.red-lista .pilar h3{margin-top:2px}
.red-lista .pilar .parr{margin-top:3px}
.red-dupla .mapa-env{max-width:none;margin:0}
@media (min-width:901px){.red-dupla .mapa-env{position:sticky;top:94px}}
@media (max-width:900px){.red-dupla{grid-template-columns:1fr}}

/* ── LA TEXTURA DE CADA FAMILIA ────────────────────────────────────────────
   Salen del propio catálogo TEMPO 2027, sacadas página a página: Art Wood
   enseña sus tres acabados de una vez porque es lo que lo distingue. */
.foto-fam{margin-bottom:15px;line-height:0;display:grid;gap:2px;
  border-radius:var(--r-sm);overflow:hidden}
.foto-fam.tres{grid-template-columns:repeat(3,1fr)}
.foto-fam img{display:block;width:100%;height:132px;object-fit:cover}

/* Los dos enlaces obligatorios, al pie del pie: discretos pero siempre a la
   vista, que es donde la gente los busca. */
.pie-legal{display:flex;gap:18px;flex-wrap:wrap;margin:8px 0 0}
.pie-legal a{color:var(--claro-3);text-decoration:none;font-size:.82rem}
.pie-legal a:hover{color:var(--claro);text-decoration:underline}
/* El cuerpo de las paginas legales: una columna estrecha, que es texto para
   leer y no una pagina de producto. */
.env-txt{max-width:74ch}
.datos-legal{display:grid;gap:1px;background:var(--linea-cla);margin:18px 0 0;
  border:1px solid var(--linea-cla)}
.datos-legal>div{background:var(--papel);display:grid;grid-template-columns:150px 1fr;
  gap:14px;padding:10px 14px;font-size:.92rem}
.datos-legal dt{margin:0;color:var(--tinta-3)}
.datos-legal dd{margin:0;color:var(--tinta)}
@media(max-width:560px){.datos-legal>div{grid-template-columns:1fr;gap:2px}}
.lista{margin:12px 0 0;padding-left:20px;line-height:1.7}
.lista li{margin-bottom:8px}