/* ══════════════════════════════════════════════════════════════
   Room · por Mentvil
   Tipografía de la casa: Montserrat (servida desde /fuentes) para
   todo. Estructura editorial en bloques de color a todo el ancho.
   ══════════════════════════════════════════════════════════════ */

/* Montserrat servida desde el propio sitio (antes venía de Google): no
   depende de un servidor ajeno ni le avisa a nadie quién visita la página.
   Es variable: un solo archivo trae todos los pesos, de 300 a 700. */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/fuentes/montserrat-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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/fuentes/montserrat-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}

:root{
  color-scheme:light;
  color-scheme:light;
  /* Paleta del manual de identidad de Room (V1.0): fondo marfil, texto
     grafito y bordó ciruela. --room es un matiz del bordó para textos chicos:
     el rosa del manual no da contraste sobre marfil y queda para detalles. */
  --papel:#e9e4dd;
  --sup:#FFFFFF;
  --sup-2:#ECE8E6;
  --linea:rgba(51,52,50,.14);
  --linea-fuerte:rgba(51,52,50,.28);
  --tinta:#333432;
  --tinta-2:#55574f;
  --tinta-3:#62635e;
  --room:#773555;
  --room-txt:#773555;
  --room-2:#5C2442;
  --hondo:#4B0E31;
  --hondo-2:#3B0A26;
  --cielo:#E3B7CB;
  --cielo-ink:#4B0E31;
  /* Letras, líneas y brillo sobre los bloques de contraste (los "hondo": las
     curvas, las franjas y el pie). En el tema oscuro la paleta se da vuelta,
     base bordó y bloques crema, así que también se dan vuelta. */
  --sobre-hondo:#FFFFFF;
  --sobre-hondo-2:rgba(255,255,255,.72);
  --sobre-hondo-3:rgba(255,255,255,.6);
  --linea-hondo:rgba(255,255,255,.18);
  --luz-rgb:227 183 203; --luz-alfa:.09;
  /* rosa fijo para lo que va sobre fotos oscuras: igual en los dos temas */
  --rosa:#E3B7CB;
  /* el rosa del manual de marca: el del segundo anillo del logo */
  --rosa-marca:#d84c7b;
  /* estados: verde de "listo" y ámbar de "ojo", con su texto legible */
  --ok:#1B7A55; --ok-txt:#155F42;
  --ojo:#96601B; --ojo-txt:#7A4E14;
  --error:#A11D1D;   /* rojo de los errores del formulario: AA (6:1) sobre el papel */
  --nav:84px;
  --e:cubic-bezier(.22,.61,.36,1);
  --alza:0 14px 32px rgba(51,52,50,.16);   /* la sombra del hover, una sola */
  --e-out:cubic-bezier(.16,1,.3,1);
  --f:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,sans-serif;
  --fd:"Montserrat",var(--f);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--f);font-size:15px;line-height:1.7;overflow-x:hidden;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--fd);font-weight:600;letter-spacing:-.035em;line-height:.94;text-wrap:balance}
p{margin:0;overflow-wrap:break-word}
:focus-visible{outline:2px solid var(--room);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── tipografía de la casa, en escala editorial ── */
/* Los dos tamaños grandes van en peso liviano, como el título de la portada:
   a este cuerpo el peso pesado se lee tosco. El interlineado y el espaciado
   entre letras están acomodados a ese peso, no al que había antes. */
.t-xxl{font-family:var(--fd);font-weight:300;font-size:clamp(2.6rem,6vw,5.4rem);
  line-height:.96;letter-spacing:-.035em}
.t-xl{font-family:var(--fd);font-weight:300;font-size:clamp(2.1rem,5.4vw,4.4rem);
  line-height:.98;letter-spacing:-.032em}
.t-l{font-family:var(--fd);font-weight:600;font-size:clamp(1.5rem,2.8vw,2.3rem);
  line-height:1.06;letter-spacing:-.03em}
.t-m{font-family:var(--fd);font-weight:600;font-size:clamp(1.1rem,1.8vw,1.42rem);
  line-height:1.15;letter-spacing:-.022em}
em.res{font-style:normal;color:var(--room-txt)}
.lead{font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.65;color:var(--tinta-2)}
.copy{font-size:.94rem;line-height:1.85;color:var(--tinta-2)}
.copy p + p{margin-top:15px}

/* ── kicker numerado ── */
.kick{display:flex;gap:14px;align-items:center;font-family:var(--fd);
  text-transform:uppercase;font-weight:700;letter-spacing:.14em;font-size:12px;
  margin-bottom:clamp(28px,4vw,48px);color:var(--tinta)}
.kick span{color:var(--room-txt)}
.kick.claro{color:rgba(255,255,255,.82)}
.kick.claro span{color:var(--rosa)}
.hondo .kick.claro,.hondo-2 .kick.claro{color:color-mix(in srgb,var(--sobre-hondo) 82%,transparent)}
.hondo .kick.claro span,.hondo-2 .kick.claro span{color:var(--cielo)}

/* ── botones y enlaces ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:17px 32px;border-radius:999px;font-family:var(--fd);font-size:12px;
  text-transform:uppercase;letter-spacing:.11em;font-weight:700;white-space:nowrap;
  transition:background .3s var(--e),color .3s var(--e),border-color .3s var(--e),
    transform .4s var(--e-out),box-shadow .4s var(--e-out)}
.btn{transform:translate(var(--mx,0px),var(--my,0px))}
.btn:hover{transform:translate(var(--mx,0px),calc(var(--my,0px) - 3px));box-shadow:var(--alza)}
/* puente bajo el botón levantado (ver la regla en el bloque de hover) */
.btn,.bt-1,.bt-2{position:relative}
.btn:hover::after,.bt-1:hover::after,.bt-2:hover::after{content:'';position:absolute;left:0;right:0;top:100%;height:4px}
.btn:active{transform:translate(var(--mx,0px),calc(var(--my,0px) - 1px));box-shadow:0 5px 14px rgba(42,10,28,.16)}
.btn.solido{background:var(--tinta);color:var(--papel)}
.btn.solido:hover{background:var(--room-2);color:var(--papel)}
.btn.claro{background:#fff;color:#4B0E31}   /* va sobre fondos que son oscuros en
   los dos temas: con los tokens, en modo oscuro quedaba oscuro sobre oscuro */
.btn.claro:hover{background:#773555;color:#fff}
.btn.linea{border:1px solid var(--linea-fuerte);color:var(--tinta)}
.btn.linea:hover{border-color:var(--tinta);background:var(--tinta);color:var(--papel)}
.btn.linea-claro{border:1px solid rgba(255,255,255,.5);color:#fff}
.btn.linea-claro:hover{background:#fff;color:var(--hondo);border-color:#fff}
/* Al pasar, la raya y la flecha se estiran hacia afuera sin cambiar el tamaño
   del enlace. Antes crecía el enlace entero: si justo no entraba en su renglón
   saltaba al de abajo, se escapaba del mouse, volvía y parpadeaba sin parar. */
.tlink{display:inline-flex;gap:20px;align-items:center;position:relative;font-family:var(--fd);
  font-size:12px;font-weight:600;letter-spacing:.02em;padding-bottom:7px;
  transition:color .2s var(--e)}
.tlink::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transition:right .3s var(--e)}
.tlink:hover{color:var(--room-txt)}
.tlink:hover::after{right:-10px}
.tlink i{font-style:normal;font-size:16px;line-height:1}
.claro .tlink:hover,.hondo .tlink:hover{color:var(--cielo)}
.hero .tlink:hover{color:var(--rosa)}

/* ══ barra ══
   Clara y esmerilada: lo que pasa por detrás se desenfoca y las letras no
   chocan con nada. Cuando lo de atrás es un bloque de contraste (las curvas
   de La marca y la Colección, las franjas y el pie) toma el color de ese
   bloque: eso lo decide el JS mirando qué hay detrás (medirBarra). Todo va
   con tokens: en el tema oscuro la barra es bordó y cambia a crema. */
.barra{position:fixed;z-index:60;top:0;left:0;width:100%;height:var(--nav);
  padding:0 clamp(18px,4vw,4vw);display:flex;align-items:center;gap:clamp(14px,2.6vw,38px);
  color:var(--tinta);border-bottom:1px solid var(--linea);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  background:color-mix(in srgb,var(--papel) 70%,transparent);
  transition:background .45s var(--e),border-color .45s var(--e),color .45s var(--e)}
.barra.fija{background:color-mix(in srgb,var(--papel) 82%,transparent)}
.barra.sobre-hondo{color:var(--sobre-hondo);border-bottom-color:var(--linea-hondo);
  background:color-mix(in srgb,var(--hondo) 60%,transparent)}
/* El logotipo oficial va como máscara: toma el color de la barra y cambia
   junto con ella. */
.marca{display:inline-flex;align-items:center;flex-shrink:0}
/* SVG en línea: se dibuja como vector a cualquier resolución. Va en un solo
   color (la versión monocromática del manual): a esta altura el filete rosa
   mide menos de medio píxel y queda como una mancha sobre la O. */
.marca-logo{display:block;height:30px;width:auto;aspect-ratio:300/88.6;color:var(--hondo);shape-rendering:geometricPrecision;
  transition:opacity .3s var(--e),color .45s var(--e)}
/* Bordó ciruela sobre fondo claro, como pide el manual. Sobre las franjas
   oscuras toma el color de la franja (en el tema oscuro eso se da vuelta solo). */
.barra.sobre-hondo .marca-logo{color:var(--sobre-hondo)}
.marca:hover .marca-logo{opacity:.7}
/* el logo del pie también va como máscara, para tomar el color del pie */
.marca-logo-pie{display:block;width:170px;aspect-ratio:300/120.89;background:currentColor;
  -webkit-mask:url(/img/room-logo-eslogan.svg) center/contain no-repeat;
  mask:url(/img/room-logo-eslogan.svg) center/contain no-repeat}
/* 30px de alto dan 101px de ancho: el manual pide al menos 100px en digital,
   también en el celular. */
.menu{display:flex;align-items:center;gap:clamp(14px,2vw,30px);margin-left:auto}
.menu a{position:relative;font-family:var(--fd);font-size:12px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-2);
  padding:4px 0;transition:color .3s var(--e)}
.menu a::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .34s var(--e)}
.menu a:hover,.menu a.act{color:var(--tinta)}
.menu a:hover::after,.menu a.act::after{transform:scaleX(1)}
.barra.sobre-hondo .menu a{color:color-mix(in srgb,var(--sobre-hondo) 74%,transparent)}
.barra.sobre-hondo .menu a:hover,.barra.sobre-hondo .menu a.act{color:var(--sobre-hondo)}
.ib{width:44px;height:44px;display:grid;place-items:center;color:var(--tinta-2);
  border-radius:999px;transition:color .3s var(--e),background .2s var(--e)}
.ib:hover{color:var(--tinta);background:color-mix(in srgb,var(--tinta) 8%,transparent)}
.barra.sobre-hondo .ib{color:color-mix(in srgb,var(--sobre-hondo) 80%,transparent)}
.barra.sobre-hondo .ib:hover{color:var(--sobre-hondo);background:color-mix(in srgb,var(--sobre-hondo) 12%,transparent)}
.ib svg{width:18px;height:18px}
.hamb{display:none}
/* El botón para comprar, siempre a la vista en compu (en el celular está en el menú). */
.menu a.menu-cta{padding:11px 20px;border-radius:999px;background:var(--room);color:var(--papel);transition:background .3s var(--e)}
.menu a.menu-cta::after{display:none}
/* Apagado por ahora a pedido de Room: para volver a mostrarlo, sacar "hidden" de los dos enlaces en index.html. */
.menu a.menu-cta[hidden],.hoja a.hoja-cta[hidden]{display:none}
.menu a.menu-cta:hover{background:var(--room-txt);color:var(--papel)}
.barra.sobre-hondo .menu a.menu-cta{background:var(--cielo);color:var(--cielo-ink)}
@media(max-width:1000px){.menu .oculta-chico,.menu .menu-cta{display:none}.hamb{display:grid}}

/* el menú del celular acompaña a la barra y cambia igual que ella */
.hoja{position:fixed;inset:var(--nav) 0 auto 0;z-index:55;
  background:color-mix(in srgb,var(--papel) 90%,transparent);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  padding:10px clamp(18px,4vw,4vw) 26px;transform:translateY(calc(-100% - var(--nav) - 2px));
  transition:transform .42s var(--e-out),background .45s var(--e),visibility 0s .42s;border-bottom:1px solid var(--linea);
  visibility:hidden}
/* Cerrada queda oculta también para el teclado (si no, Tab entra a links que no se ven). */
.hoja.abierta{transform:none;visibility:visible;transition-delay:0s}
.hoja a{display:block;padding:15px 0;font-family:var(--fd);font-size:1.02rem;font-weight:600;
  color:var(--tinta);border-bottom:1px solid var(--linea)}
.hoja a:last-child{border-bottom:0}
.hoja a.hoja-cta{margin-top:10px;padding:14px 20px;border:0;border-radius:999px;text-align:center;background:var(--room);color:var(--papel)}
.hoja.sobre-hondo a.hoja-cta{background:var(--cielo);color:var(--cielo-ink)}
.hoja.sobre-hondo{background:color-mix(in srgb,var(--hondo) 92%,transparent);border-bottom-color:var(--linea-hondo)}
.hoja.sobre-hondo a{color:var(--sobre-hondo);border-bottom-color:var(--linea-hondo)}

/* ══ portada ══ */
.hero{height:100vh;min-height:700px;position:relative;display:flex;align-items:center;
  color:#fff;overflow:hidden}
.hero-foto{position:absolute;inset:0}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:58% 62%;transform:scale(1.04)}
@supports (animation-timeline:view()){
  .hero-foto img{animation:derivar linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
}
@keyframes derivar{from{transform:scale(1.1) translateY(-2.5%)}to{transform:scale(1.1) translateY(4%)}}
.hero-sombra{position:absolute;inset:0;
  /* Tres capas: una mancha elíptica sobre el bloque de texto, un barrido
     lateral suave, y un pie oscuro. Así el texto se lee sin tapar la foto. */
  background:
    radial-gradient(125% 88% at 6% 54%,rgba(26,4,15,.93) 0%,rgba(26,4,15,.8) 30%,rgba(26,4,15,.44) 54%,rgba(26,4,15,.08) 76%,transparent 88%),
    linear-gradient(96deg,rgba(28,5,17,.72) 0%,rgba(28,5,17,.5) 30%,rgba(28,5,17,.22) 56%,rgba(28,5,17,0) 82%),
    linear-gradient(0deg,rgba(28,5,17,.6),transparent 34%)}
/* El ancho deja el mismo margen a la derecha que a la izquierda: con 92vw, en el
   celular la rayita del rótulo y el enlace quedaban pegados al borde. */
.hero-cont{position:relative;z-index:2;width:min(900px,calc(100% - 2*clamp(18px,8vw,8vw)));margin-left:clamp(18px,8vw,8vw);margin-top:6vh}
/* El piso baja a 2.15rem: la ventanita del renglón recorta, así que un
   titular que no entra no se desborda, desaparece. */
.hero h1{font-size:clamp(2.15rem,8vw,7rem);line-height:.94;letter-spacing:-.035em;
  font-weight:300;margin:26px 0 32px;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.35)}
/* sobre la foto oscura la palabra destacada va en rosa: el bordó no se lee */
.hero em.res{color:var(--rosa)}
.hero-lead{width:min(560px,84vw);font-size:17px;line-height:1.62;color:rgba(255,255,255,.82)}
.hero-acciones{display:flex;align-items:center;gap:clamp(20px,3vw,36px);margin-top:38px;flex-wrap:wrap}
.hero-indice{position:absolute;z-index:2;right:4vw;bottom:34px;display:flex;align-items:center;gap:14px;
  text-shadow:0 1px 12px rgba(0,0,0,.85);
  font-family:var(--fd);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.7)}
.hero-indice div{width:56px;height:1px;background:rgba(255,255,255,.6)}
@media(max-width:820px){
  .hero-sombra{background:linear-gradient(0deg,rgba(28,5,17,.92) 0%,rgba(28,5,17,.66) 52%,rgba(28,5,17,.5) 100%)}
  .hero-indice{display:none}
}

/* ══ secciones ══ */
.bloque{padding:clamp(70px,10vw,130px) clamp(18px,8vw,8vw)}
.bloque.hondo{background:var(--hondo);color:var(--sobre-hondo)}
.bloque.hondo .copy,.bloque.hondo .lead{color:var(--sobre-hondo-2)}
.bloque.hondo h2,.bloque.hondo h3{color:var(--sobre-hondo)}
.bloque.hondo em.res{color:var(--cielo)}
.bloque.hondo-2{background:var(--hondo-2);color:var(--sobre-hondo)}
.bloque.hondo-2 .copy,.bloque.hondo-2 .lead{color:var(--sobre-hondo-2)}
.bloque.hondo-2 h2,.bloque.hondo-2 h3{color:var(--sobre-hondo)}
.bloque.hondo-2 em.res{color:var(--cielo)}
.bloque.sup{background:var(--sup-2)}

/* cabezal de sección en dos columnas, el título manda */
/* La columna del título manda: con menos ancho los titulares grandes se
   parten en cuatro renglones. Mismo reparto en todas las secciones. */
.cab2{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,5vw,72px);align-items:end}
.cab2 > div:last-child{padding-bottom:8px}
@media(max-width:900px){.cab2{grid-template-columns:1fr;gap:24px;align-items:start}}

/* ══ cifras ══ */
/* Cada cifra toma el ancho que pide su número (15.000 es más largo que 5), así
   ningún rótulo queda partido en cuatro renglones. Una columna por cifra: con
   dos o tres no queda un hueco vacío a la derecha. */
.cifras{display:grid;grid-auto-flow:column;row-gap:30px;margin-top:clamp(60px,9vw,110px);
  border-top:1px solid var(--linea);padding-top:30px}
.cifras article{display:flex;gap:16px;border-right:1px solid var(--linea);padding:0 26px}
.cifras article:first-child{padding-left:0}
.cifras article:last-child{border-right:0;padding-right:0}
.cifras strong{font-family:var(--fd);font-weight:600;font-size:clamp(1.5rem,2.6vw,2.35rem);
  line-height:.9;letter-spacing:-.05em;font-variant-numeric:tabular-nums;flex:0 0 auto}
.cifras span{flex:1 1 auto;min-width:0;font-family:var(--fd);font-size:12px;line-height:1.5;text-transform:uppercase;
  letter-spacing:.09em;font-weight:600;color:var(--tinta-3)}
.hondo .cifras,.hondo .cifras article{border-color:var(--linea-hondo)}
.hondo .cifras span{color:var(--sobre-hondo-3)}
@media(max-width:820px){
  .cifras{grid-auto-flow:row;grid-template-columns:1fr 1fr;gap:26px 0}
  .cifras article{border-right:0;padding:0 20px 0 0;flex-direction:column;gap:9px}
}
/* Entran de a una, en orden, a medida que el bloque cruza la pantalla. */
.cifras article{opacity:0;transform:translateY(18px) scale(.99);
  transition:opacity .6s var(--e-out),transform .6s var(--e-out)}
.cifras article.on{opacity:1;transform:none}

/* ══ la zona oscura respira ══
   --dt y --db van de 0 a 1 con el scroll. La panza es medio óvalo dibujado
   fuera de la sección, hacia el blanco de arriba y el de abajo. */
/* Los dos bloques ocupan el mismo lugar, uno arriba del otro, y ninguno se
   mueve. El contenedor tiene scroll de sobra y el par queda pegado a la
   pantalla mientras dura el barrido. Lo único que cambia es el recorte del
   bloque oscuro: una figura de tope curvo que crece desde abajo. Con --p en
   cero no se ve nada de oscuro y queda la apertura entera.
   El -22% ensancha el recorte más allá de la caja: así el arco se lee como una
   curva suave a lo ancho de la pantalla y no como una cápsula. */
/* --p y --db los escribe el JS acá y bajan por herencia. Ojo: si .lente los
   declarara también, su propio valor le ganaría a lo heredado. */
/* El par se fija arriba de todo, detrás de la barra esmerilada: así la curva
   llega hasta el borde de la pantalla y la barra cambia de color cuando la
   alcanza. El contenido baja lo que mide la barra para no quedar debajo. */
.cruce{position:relative;height:calc(100dvh + 85vh);--p:0;--db:0px;--arco:0px}
.cruce-pega{position:sticky;top:0;height:100dvh}
.capa{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;padding:calc(var(--nav) + clamp(30px,5vh,70px)) clamp(18px,8vw,8vw) clamp(30px,5vh,70px)}
.capa.hondo{background:var(--hondo);color:var(--sobre-hondo)}
.capa.hondo .copy{color:var(--sobre-hondo-2)}
.capa.hondo h2{color:var(--sobre-hondo)}
.capa.hondo em.res{color:var(--cielo)}
.lente{clip-path:inset(calc((1 - var(--p)) * 100%) -22% 0% -22%
    round 50% 50% 0 0 / var(--arco) var(--arco) 0 0)}
/* Saliendo: el crema sube y le come el pie al bloque, así el oscuro se retira
   en vez de estirarse sobre lo que se quiere ver. */
.lente::after{content:"";position:absolute;left:-22%;right:-22%;bottom:0;
  height:var(--db);background:var(--papel);pointer-events:none;
  border-radius:50% 50% 0 0 / 100% 100% 0 0}
@media(max-width:900px){
  .capa{justify-content:flex-start;padding-top:calc(var(--nav) + clamp(24px,4vh,50px));overflow-y:auto}
}
@media(max-width:700px){.lente::after{left:-45%;right:-45%}
  .lente{clip-path:inset(calc((1 - var(--p)) * 100%) -45% 0% -45%
    round 50% 50% 0 0 / var(--arco) var(--arco) 0 0)}}

/* ══ pieza a dos columnas con foto ══ */
.pieza{display:grid;grid-template-columns:1fr 1fr;background:var(--sup-2);min-height:min(88vh,760px)}
.pieza-foto{position:relative;min-height:min(80vh,700px);overflow:hidden}
.pieza-foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--e-out)}
.pieza:hover .pieza-foto img{transform:scale(1.035)}
/* La foto de la planta va en blanco y negro (pedido de Leo, 02/10). */
.pieza-foto.byn img{filter:grayscale(1)}
.pieza-foto::after{content:'';position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(30,6,19,.55),transparent 52%)}
.pieza-foto > span{position:absolute;z-index:2;bottom:32px;left:36px;color:#fff;
  font-family:var(--fd);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.13em}
.pieza-copy{padding:clamp(40px,9vw,9vw) clamp(24px,7vw,7vw);display:flex;flex-direction:column;justify-content:center}
.pieza-copy h2{margin-bottom:22px}
@media(max-width:900px){.pieza{grid-template-columns:1fr}.pieza-foto{min-height:56vh}
  .pieza-copy{padding-inline:clamp(18px,8vw,8vw)}}   /* apilada, alinea con el resto de la página */

/* ══ modelos, alternando lado ══ */
.modelo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,8vw,8vw);align-items:center;
  margin-bottom:clamp(60px,10vw,120px)}
.modelo:last-child{margin-bottom:0}
.modelo.invertido .modelo-art{order:2}
.modelo-art{padding:clamp(24px,4vw,56px);background:#fff;border-radius:22px;
  display:grid;place-items:center;overflow:hidden}
.modelo-art img{width:min(470px,100%);height:auto;transition:transform .55s var(--e-out)}
.modelo:hover .modelo-art img{transform:translateY(-10px)}
.modelo-txt span.et{font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinta-3)}
.modelo-txt h3{font-family:var(--fd);font-weight:300;font-size:clamp(2rem,4.6vw,3.4rem);
  letter-spacing:-.032em;line-height:1;margin:16px 0 14px}
.modelo-txt .tag{color:var(--room-txt);font-size:1rem;margin-bottom:14px}
.modelo-txt p{font-size:.94rem;line-height:1.8;color:var(--tinta-2);max-width:46ch}
.modelo-pie{display:flex;gap:22px;align-items:baseline;flex-wrap:wrap;margin-top:26px;
  padding-top:22px;border-top:1px solid var(--linea)}
.medida b{font-family:var(--fd);font-weight:600;font-size:1.1rem;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.medida span{font-size:.84rem;color:var(--tinta-3);margin-left:8px}
@media(max-width:880px){.modelo,.modelo.invertido{grid-template-columns:1fr}.modelo.invertido .modelo-art{order:0}}
/* En la colección, en la computadora, los modelos van de a dos: foto arriba y datos abajo. */
@media(min-width:881px){
  .modelos-linea .modelos{grid-template-columns:1fr 1fr;gap:clamp(36px,4vw,56px) clamp(28px,4vw,60px)}
  /* Las dos tarjetas de una fila terminan a la misma altura: si una descripción
     ocupa un renglón más, crece el texto y la fila de datos queda pareja. */
  .modelos-linea .modelo{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:stretch;gap:26px;margin-bottom:0}
  .modelos-linea .modelo-txt{display:flex;flex-direction:column}
  .modelos-linea .modelo-txt > p:last-of-type{flex:1}
  .modelos-linea .modelo.invertido .modelo-art{order:0}
  .modelos-linea .modelo-txt h3{font-size:clamp(2rem,3.2vw,2.8rem)}
}

/* ══ lista de novedades, con desplazamiento al pasar ══ */
.linea-tiempo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,8vw,8vw)}
.linea-tiempo .fijo{position:sticky;top:calc(var(--nav) + 46px);align-self:start}
@media(max-width:900px){.linea-tiempo{grid-template-columns:1fr;gap:34px}.linea-tiempo .fijo{position:static}}
/* Los colores claros son el caso base y los oscuros la excepción. Al revés
   dependía de estar dentro de .bloque, y en /novedades las notas cuelgan de
   .sec: el texto quedaba blanco sobre crema, o sea invisible. */
.nota{position:relative;display:grid;grid-template-columns:96px 1fr;gap:26px;padding:30px 10px;
  margin-inline:-10px;border-top:1px solid var(--linea);
  transition:transform .35s var(--e-out),background .35s var(--e)}
.nota:hover{transform:translateX(10px);background:color-mix(in srgb,var(--room) 5%,transparent)}
.nota:hover::before{content:'';position:absolute;top:0;bottom:0;right:100%;width:14px}
.nota:last-child{border-bottom:1px solid var(--linea)}
.nota time{font-family:var(--fd);font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--room-txt);padding-top:5px}
.nota h3,.nota .nota-tit{font-family:var(--fd);font-weight:600;font-size:clamp(1.15rem,2vw,1.6rem);
  letter-spacing:-.03em;margin-bottom:10px}
.nota p{font-size:.9rem;line-height:1.7;color:var(--tinta-2);max-width:52ch}
.hondo .nota,.hondo-2 .nota,.hondo .nota:last-child,.hondo-2 .nota:last-child{
  border-color:var(--linea-hondo)}
.hondo .nota time,.hondo-2 .nota time{color:var(--cielo)}
.hondo .nota p,.hondo-2 .nota p{color:var(--sobre-hondo-3)}

/* ══ cierre ══ */
/* El corte con la sección de arriba era una línea dura. Ahora entra por
   degradé: arranca en el mismo crema y va bajando al gris del cierre. */
.cierre{text-align:center;padding:clamp(80px,12vw,150px) clamp(18px,8vw,8vw);
  background:var(--papel)}
.cierre h2{font-size:clamp(3.2rem,10vw,9rem);line-height:.82;letter-spacing:-.06em;margin:38px 0 46px}
.cierre .kick{justify-content:center}
.cierre-links{display:flex;justify-content:center;gap:clamp(20px,4vw,44px);flex-wrap:wrap}

/* ══ pie ══ */
.pie{background:var(--hondo);color:var(--sobre-hondo);padding:clamp(46px,6vw,72px) clamp(18px,8vw,8vw) 34px}
.pie-rej{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(26px,4vw,50px);margin-bottom:44px}
.pie h5{font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--sobre-hondo-3);margin-bottom:18px}
/* Cada enlace del pie tiene alto de sobra para tocarlo con el dedo sin errar. */
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.pie li a{display:inline-block;padding:6px 0;font-size:.88rem;color:var(--sobre-hondo-2);transition:color .2s var(--e)}
.pie li a:hover{color:var(--cielo)}
.pie-marca p{font-size:.85rem;color:var(--sobre-hondo-3);max-width:32ch;margin-top:16px;line-height:1.7}
.pie-fin{border-top:1px solid var(--linea-hondo);padding-top:22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  font-family:var(--fd);font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--sobre-hondo-3)}
@media(max-width:860px){.pie-rej{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pie-rej{grid-template-columns:1fr}
  .pie li a,.pie-fin a{display:inline-flex;align-items:center;min-height:44px}}   /* área táctil en celular */

/* ══ aparición ══ */
[data-rev]{opacity:0;transform:translateY(26px) scale(.988);
  transition:opacity .9s var(--e-out),transform .9s var(--e-out)}
[data-rev].visto{opacity:1;transform:none}

/* ── títulos que entran por renglón ──
   Cada renglón vive dentro de una ventanita que lo recorta, y sube desde
   abajo. El relleno de más abajo es para que no se corten las colas de la
   p y la y. El título en sí no se desvanece: la máscara es el efecto. */
.ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.ln > i{display:block;font-style:inherit;color:inherit;
  transition:transform 1s var(--e-out)}
[data-rev][data-lineas]{opacity:1;transform:none;transition:none}
/* Arranca más abajo que su propio alto: con 108% las puntas de las letras
   (la barra de la E, las astas de la d, los puntos de la i) asomaban 26 px
   dentro de la ventanita antes de subir. El .45em cubre el relleno de abajo
   de la ventanita y lo que las letras sobresalen de su renglón. */
[data-rev][data-lineas] .ln > i{transform:translateY(calc(100% + .45em))}
[data-rev][data-lineas].visto .ln > i{transform:none}
[data-lineas] .ln:nth-child(2) > i{transition-delay:.1s}
[data-lineas] .ln:nth-child(3) > i{transition-delay:.2s}

/* la rayita del rótulo se dibuja sola. Va en el rosa del manual, que es para
   eso: detalles y líneas, no texto (sobre marfil no da contraste para leer). */
.kick::after{content:'';height:1px;flex:0 0 auto;width:0;background:var(--rosa-marca);
  transition:width .9s var(--e-out) .25s}
.kick[data-rev].visto::after{width:clamp(26px,4vw,56px)}

/* ══ aviso ══
   Una píldora chica abajo al centro: el ícono en un círculo y el texto en
   tamaño de lectura. Los errores van en bordó. */
.globo{position:fixed;bottom:24px;left:50%;z-index:100;display:flex;align-items:center;gap:12px;
  width:max-content;max-width:min(440px,calc(100vw - 32px));padding:10px 20px 10px 10px;border-radius:16px;
  background:var(--tinta);color:var(--papel);font-family:var(--f);font-size:.9rem;font-weight:500;line-height:1.4;
  box-shadow:0 14px 36px rgba(30,6,19,.24);
  transform:translate(-50%,24px);opacity:0;pointer-events:none;
  transition:transform .45s var(--e-out),opacity .3s var(--e)}
.globo svg{flex:0 0 auto;width:30px;height:30px;padding:7px;border-radius:50%;
  background:color-mix(in srgb,currentColor 16%,transparent)}
.globo.mal{background:var(--hondo);color:var(--sobre-hondo)}
.globo.ver{transform:translate(-50%,0);opacity:1}

/* ══ colección por línea ══ */
/* Tantas columnas como entren: hoy son tres líneas, pero si mañana hay dos o
   cuatro la grilla se acomoda sola, sin dejar una tarjeta huérfana. */
.grilla-lineas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));
  gap:clamp(16px,2vw,28px);margin-top:clamp(46px,7vw,86px)}
.tarjeta-linea{position:relative;display:flex;flex-direction:column;background:var(--sup);color:inherit;
  border:1px solid var(--linea);border-radius:22px;overflow:hidden}
.linea-foto{background:#fff;aspect-ratio:16/10;display:grid;place-items:center;
  padding:clamp(18px,3vw,34px) clamp(18px,3vw,34px) 0}
.linea-foto img{width:100%;height:100%;object-fit:contain;transition:transform .6s var(--e-out)}
.linea-txt{flex:1;display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.6vw,34px)}
.linea-txt .et{font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--room-txt)}
.linea-txt h3{font-family:var(--fd);font-weight:600;font-size:clamp(1.3rem,2vw,1.7rem);
  letter-spacing:-.03em;line-height:1.1}
.linea-txt p{font-size:.92rem;line-height:1.7;color:var(--tinta-2)}
.linea-txt ul{list-style:none;margin:0;padding:16px 0 0;display:flex;flex-wrap:wrap;gap:8px;
  border-top:1px solid var(--linea)}
.linea-txt li{font-family:var(--fd);font-size:12px;font-weight:600;padding:7px 14px;border-radius:999px;
  background:var(--sup-2);color:var(--tinta)}
@media (hover:hover){.tarjeta-linea:hover .linea-foto img{transform:translateY(-8px) scale(1.03)}}

/* Portadas de línea. La primera es una sección común; las otras dos son cruces
   como el de La marca (ver .cruce), con el ancho de .caja para quedar alineadas
   con los modelos. El enlace a una línea cae justo cuando la portada se fija. */
.portada-linea{padding:clamp(28px,4vw,52px) 0 0}
.portada-linea{scroll-margin-top:var(--nav)}
/* En la colección la portada de cada línea no se arrastra con el scroll: una
   sola curva cruza la pantalla sola (la anima app.js, ver barrer). Arriba de la
   curva se ve la línea anterior; abajo, la nueva. La capa del color nuevo
   (.lente) se estira una pantalla hacia arriba y la del anterior, una hacia
   abajo; las dos se recortan con la misma curva, así nunca asoma nada entre ellas. */
.cruce-toque{height:auto;position:relative;z-index:2;--invade:100vh}
.cruce-toque .cruce-pega{position:relative;height:auto;display:grid}
.cruce-toque .capa{position:relative;inset:auto;grid-area:1/1;overflow:visible;
  padding:clamp(28px,4vw,52px) 0 clamp(36px,5vw,64px);justify-content:flex-start}
.cruce-toque .capa.lente{margin-top:calc(-1 * var(--invade));padding-top:calc(var(--invade) + clamp(28px,4vw,52px));clip-path:inset(100% 0 0 0)}
.cruce-toque .capa[aria-hidden="true"]{margin-bottom:calc(-1 * var(--invade));padding-bottom:calc(var(--invade) + clamp(36px,5vw,64px))}
@media(prefers-reduced-motion:reduce){.cruce-caja,.cruce-caja .cruce-pega{height:auto}
  .cruce-toque .capa.lente{margin-top:0;padding-top:clamp(28px,4vw,52px)}.cruce-toque .capa[aria-hidden="true"]{margin-bottom:0}}
.cruce-caja .capa{padding-left:0;padding-right:0;justify-content:center}
.cruce-caja .capa > .caja{width:100%}
.capa.crema{background:var(--papel)}
/* El color de cada línea en la colección: blanco (--sup), un gris apenas más
   oscuro que el fondo, y el bordó de los bloques "hondo". En el gris, el texto
   más tenue se oscurece un punto para no perder contraste. */
.tono-1{background:var(--sup)}
.tono-2{background:#d9d4cc;--tinta-3:var(--tinta-2)}
/* El aviso del final toma el color de la última línea, así no queda una
   franja de otro color entre esa línea y el pie. */
.cierre-linea.hondo{background:var(--hondo);color:var(--sobre-hondo)}
.cierre-linea.hondo .nota-chica{color:var(--sobre-hondo-3)}
.cierre-linea.hondo .aviso{background:color-mix(in srgb,var(--sobre-hondo) 8%,transparent);
  color:var(--sobre-hondo-2);border-left-color:var(--cielo)}
.cierre-linea.hondo .aviso strong{color:var(--sobre-hondo)}
.cierre-linea.hondo .aviso svg,.cierre-linea.hondo .aviso .ph,.cierre-linea.hondo .enl{color:var(--cielo)}
.cruce-caja.pintado .capa[aria-hidden="true"]{visibility:hidden}
/* Las dos capas tienen que coincidir: la de arriba no entra con el scroll,
   así que su rayita del número ya viene dibujada. */
.cruce-caja .lente .kick::after{width:clamp(26px,4vw,56px)}
.cruce-caja .lente::after{display:none}
/* El -1px la mete debajo de sus vecinos: sin eso, un borde en medio píxel
   deja ver el crema de la página como una raya sobre el bordó. */
.modelos-linea{padding:clamp(24px,3.5vw,48px) 0;margin:-1px 0}
.modelos-linea.bloque{padding-left:0;padding-right:0}
/* Sobre el bloque de contraste, las tarjetas de modelo toman sus letras. */
.modelos-linea.hondo{--tinta-2:var(--sobre-hondo-2);--tinta-3:var(--sobre-hondo-3);
  --room-txt:var(--cielo);--linea:var(--linea-hondo)}
.nota-chica{font-size:.8rem;color:var(--tinta-3);margin-bottom:14px}

/* escala de firmeza: la del catálogo, con la del modelo marcada */
.firmeza{list-style:none;margin:0;padding:5px;display:flex;flex-wrap:wrap;gap:2px;width:fit-content;max-width:100%;
  border:1.5px solid color-mix(in srgb,var(--room) 32%,transparent);border-radius:22px}
.firmeza li{font-family:var(--fd);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  padding:7px 12px;border-radius:999px;color:var(--tinta-3)}
.firmeza li.on{font-weight:700;color:var(--room-txt);background:color-mix(in srgb,var(--room) 12%,transparent)}
/* En celular las cinco van en una fila pareja (antes se partía 3 + 2 y dejaba de leerse como escala); cada una puede ir en dos renglones. */
@media(max-width:560px){.firmeza{display:grid;grid-template-columns:repeat(5,1fr);width:100%;border-radius:18px}
  .firmeza li{font-size:12px;letter-spacing:.02em;padding:7px 2px;overflow-wrap:anywhere;text-align:center;line-height:1.25;border-radius:12px;display:grid;place-items:center}}


/* ══════════════════════════════════════════════════════════════════
   hover
   Todo lo clicable tiene que responder. Va detrás de (hover:hover) para
   que en pantallas táctiles no queden estados pegados después de tocar.
   ══════════════════════════════════════════════════════════════════ */
@media (hover:hover){

  /* filas de construcción: corren, se tiñen y el número se enciende */
  /* La fila se corre con transform, que mueve el dibujo sin tocar el ancho:
     el texto queda cortado igual que antes de pasar el mouse. El ::before
     tapa la franja que deja libre al correrse, si no el puntero se queda
     afuera, la fila vuelve y parpadea. */
  .pilar{position:relative;transition:transform .4s var(--e-out),background .4s var(--e)}
  .pilar:hover{transform:translateX(14px);background:color-mix(in srgb,var(--room) 5%,transparent)}
  .pilar:hover::before{content:'';position:absolute;top:0;bottom:0;right:100%;width:18px}
  .pilar:hover .n{color:var(--room)}
  .pilar .n,.pilar h3{transition:color .3s var(--e),transform .4s var(--e-out)}
  .pilar:hover h3{color:var(--room-txt)}

  /* Regla para todo lo que se corre al pasar: mientras está corrido, la franja
     que dejó libre sigue siendo suya (un "puente" invisible). Sin eso, pasar
     por ese borde lo corre, el mouse queda afuera, vuelve y parpadea. */

  /* modelos: la foto sube, el marco respira y el título se tiñe */
  .modelo-art{position:relative}
  .modelo-txt h3{transition:color .35s var(--e)}
  .modelo:hover .modelo-txt h3{color:var(--room-txt)}
  .modelo:hover .modelo-art img{transform:translateY(-12px) scale(1.02)}

  /* novedades: además del corrimiento, la fecha y el título acompañan */
  .nota time,.nota h3,.nota .nota-tit{transition:color .3s var(--e),transform .4s var(--e-out)}
  .nota:hover time{transform:translateX(4px)}
  .nota:hover h3{color:var(--room-txt)}
  .hondo .nota:hover h3,.hondo-2 .nota:hover h3{color:var(--cielo)}

  /* enlaces del pie: se corren, como los del sitio de referencia */
  .pie li a{display:inline-block;position:relative;transition:color .25s var(--e),transform .35s var(--e-out)}
  .pie li a:hover{transform:translateX(7px)}
  .pie li a:hover::before{content:'';position:absolute;top:0;bottom:0;right:100%;width:8px}


  /* el subrayado del enlace de texto crece desde la izquierda y se estira
     hacia afuera, sin agrandar el enlace (mismo motivo que .tlink) */
  .enl{position:relative;border-bottom-color:transparent}
  .enl::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
    background:currentColor;transform:scaleX(.34);transform-origin:left;
    transition:transform .4s var(--e-out),right .3s var(--e)}
  .enl:hover::after{transform:scaleX(1);right:-6px}
}

/* ══ microinteracciones ══ */

/* las tres rayas se cierran en cruz al abrir el menú */
.hamb svg path{transform-box:fill-box;transform-origin:center;
  transition:transform .42s var(--e-out),opacity .22s var(--e)}
.hamb[aria-expanded="true"] .r1{transform:translateY(5px) rotate(45deg)}
.hamb[aria-expanded="true"] .r2{opacity:0;transform:scaleX(.2)}
.hamb[aria-expanded="true"] .r3{transform:translateY(-5px) rotate(-45deg)}

/* el sol y la luna se cambian girando: el ícono se reemplaza entero, así que
   la animación arranca sola cada vez que entra el nuevo */
@keyframes entra-girando{from{transform:rotate(-100deg) scale(.55);opacity:0}to{transform:none;opacity:1}}

/* botón trabajando: el texto se va y queda la ruedita */
@keyframes girando{to{transform:rotate(360deg)}}
.cargando{position:relative;color:transparent!important;pointer-events:none}
.cargando::after{content:'';position:absolute;inset:0;margin:auto;width:17px;height:17px;
  border:2px solid color-mix(in srgb,var(--hilo) 30%,transparent);border-top-color:var(--hilo);
  border-radius:50%;animation:girando .7s linear infinite}
.bt-1.cargando,.btn.solido.cargando,.bt-bl.cargando{--hilo:var(--papel)}
.bt-2.cargando,.btn.linea.cargando{--hilo:var(--tinta)}

/* el rótulo del campo se enciende cuando estás escribiendo ahí */
.campo label{transition:color .25s var(--e)}
.campo:focus-within label{color:var(--room-txt)}

/* las flechas empujan un poco más que el texto */
.tlink i,.enl i,.enl svg{transition:transform .35s var(--e-out)}
.tlink:hover i{transform:translateX(14px)}
.enl:hover i,.enl:hover svg{transform:translateX(10px)}

/* ══ fotos: entran descubriéndose de arriba hacia abajo ══
   La foto arranca recortada del todo y el recorte se abre; adentro la imagen
   viene un poco más grande y se acomoda. No se desvanece: el recorte es el
   efecto, igual que en los títulos. */
[data-rev][data-foto]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);
  transition:clip-path 1.1s var(--e-out)}
[data-rev][data-foto].visto{clip-path:inset(0 0 0 0)}
[data-foto] > img{transform:scale(1.12);transition:transform 1.7s var(--e-out)}
[data-foto].visto > img{transform:none}

/* ══ terminación ══ */


/* el texto seleccionado toma el color de la marca */
::selection{background:var(--room);color:var(--papel)}

/* barras de scroll finas y al tono, en la página y en la tira de miniaturas */
html{scrollbar-width:thin;scrollbar-color:var(--linea-fuerte) transparent}
html::-webkit-scrollbar{width:10px;height:8px}
html::-webkit-scrollbar-thumb{
  background:var(--linea-fuerte);border-radius:999px;
  border:3px solid transparent;background-clip:content-box}
html::-webkit-scrollbar-track{background:transparent}

/* el anillo del teclado tiene que verse también sobre el azul oscuro */
.hondo :focus-visible,.capa.hondo :focus-visible,.barra.sobre-hondo :focus-visible,
.pie :focus-visible,.hoja.sobre-hondo :focus-visible{outline-color:var(--cielo)}

/* el cruce de una página a la otra: se va para arriba, entra desde abajo */
::view-transition-old(root),::view-transition-new(root){
  animation-duration:.42s;animation-timing-function:var(--e-out)}
::view-transition-old(root){animation-name:cruce-sale}
::view-transition-new(root){animation-name:cruce-entra}
@keyframes cruce-sale{to{opacity:0;transform:translateY(-12px)}}
@keyframes cruce-entra{from{opacity:0;transform:translateY(16px)}}

/* ══ el mouse ══ */

/* Resplandor que acompaña al puntero sobre los bloques de contraste. --luz es un
   número registrado para que prenda y apague con transición en vez de golpe. */
@property --luz{syntax:'<number>';inherits:false;initial-value:0}
.bloque.hondo,.bloque.hondo-2,.capa.hondo,.cierre-linea.hondo,.pie{
  background-image:radial-gradient(620px circle at var(--sx,50%) var(--sy,50%),
    rgb(var(--luz-rgb) / calc(var(--luz) * var(--luz-alfa))),transparent 64%);
  transition:--luz .7s var(--e)}
.bloque.hondo.con-luz,.bloque.hondo-2.con-luz,.capa.hondo.con-luz,.cierre-linea.hondo.con-luz,.pie.con-luz{--luz:1}

/* ══ puntero ══
   La flecha y la manito de siempre, en bordó con borde blanco: se ven sobre el
   crema y sobre el bordó. Son cursores del sistema, así que no hay nada que
   siga al mouse ni ningún retraso. La versión doble es para pantallas de alta
   densidad; donde no se entiende image-set queda la simple, y si tampoco, la
   del sistema. La lupa de las fotos y la del visor ampliado siguen igual. */
@media (hover:hover) and (pointer:fine){
  html{cursor:url(/img/cursor/flecha.svg) 5 3,auto;
    cursor:image-set(url(/img/cursor/flecha.svg) 1x,url(/img/cursor/flecha-2x.svg) 2x) 5 3,auto}
  a,button,summary,label[for],select,[role="button"]{cursor:url(/img/cursor/mano.svg) 12 3,pointer;
    cursor:image-set(url(/img/cursor/mano.svg) 1x,url(/img/cursor/mano-2x.svg) 2x) 12 3,pointer}
  input,textarea{cursor:text}
}

/* ══ profundidad ══
   translate es una propiedad aparte de transform: se suma al zoom del
   revelado y del hover en vez de pisarlos. */
[data-paralaje] > img{translate:0 var(--py,0px)}
/* la foto de detalle es más alta que su marco, así al correrse no asoma el borde */
.pieza-foto[data-paralaje] > img{position:absolute;left:0;top:-52px;height:calc(100% + 104px)}

/* ══ franja de texto ══ */
.franja{overflow:hidden;padding:clamp(34px,6vw,70px) 0;
  background:var(--papel)}
.franja-pista{display:flex;width:max-content;will-change:transform}
/* Las letras van en contorno. La tipografía arma cada letra con formas
   superpuestas, y el contorno dibuja también esas costuras de adentro: por
   eso el contorno se pinta doble y por debajo de un relleno del color del
   fondo, que tapa la mitad interna y deja solo la línea de afuera. */
.franja-pista span{display:flex;align-items:center;gap:clamp(22px,3vw,44px);
  padding-right:clamp(22px,3vw,44px);white-space:nowrap;
  font-family:var(--fd);font-weight:600;font-size:clamp(3rem,9vw,8.4rem);
  line-height:1;letter-spacing:-.045em;text-transform:lowercase;
  color:var(--papel);-webkit-text-stroke:2.4px var(--linea-fuerte);
  paint-order:stroke fill}
.franja-pista i{font-style:normal;color:var(--room);-webkit-text-stroke:0;font-size:.5em}

/* ══ tarjetas que se inclinan ══
   El JS pasa el ángulo y dónde está el puntero; el CSS arma el giro y el
   brillo. Mientras el mouse se mueve la transición es corta y sigue; al
   salir es larga y la tarjeta vuelve a plano sin golpe. */
[data-tilt]{--brillo:rgba(255,255,255,.34);
  transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--ts,1))}
.modelo-art[data-tilt]{transition:background .5s var(--e),transform .75s var(--e-out)}
[data-tilt].inclinado{--ts:1.018;transition-duration:.25s,.18s}
[data-tilt]::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(460px circle at var(--gx,50%) var(--gy,50%),var(--brillo),transparent 58%);
  opacity:0;transition:opacity .5s var(--e)}
[data-tilt].inclinado::after{opacity:1}

/* ══ coreografía ══
   Todas las entradas usan relleno "backwards": el estado de partida se
   sostiene solo durante la espera, y al terminar cada elemento vuelve a sus
   estilos de siempre. Con "both" se quedaba congelado el transform final y
   el imán de los botones dejaba de responder. */
@keyframes entra-baja{from{opacity:0;transform:translateY(-14px)}}
@keyframes entra-sube{from{opacity:0;transform:translateY(24px)}}
@keyframes entra-renglon{from{transform:translateY(calc(100% + .45em))}}
@keyframes entra-foto{from{opacity:0;transform:scale(1.14)}}
@keyframes entra-fundido{from{opacity:0}}
@keyframes entra-asienta{from{transform:translateY(16px)}}
@keyframes entra-raya{from{transform:scaleX(0)}}

/* la barra: logotipo, después los enlaces de a uno */
.arranque .marca{animation:entra-baja .9s var(--e-out) .08s backwards}
.arranque .menu > *{animation:entra-baja .8s var(--e-out) backwards}
.arranque .menu > :nth-child(1){animation-delay:.2s}
.arranque .menu > :nth-child(2){animation-delay:.26s}
.arranque .menu > :nth-child(3){animation-delay:.32s}
.arranque .menu > :nth-child(4){animation-delay:.38s}
.arranque .menu > :nth-child(5){animation-delay:.46s}
.arranque .menu > :nth-child(6){animation-delay:.52s}
.arranque .menu > :nth-child(7){animation-delay:.56s}

/* el hero: la foto se asienta, el rótulo, los tres renglones, el resto */
.hero .kick::after{width:clamp(26px,4vw,56px);transform-origin:left}
.arranque .hero-foto{animation:entra-foto 2s var(--e-out) backwards}
.arranque .hero-sombra{animation:entra-fundido 1.4s var(--e) backwards}
.arranque .hero .kick{animation:entra-sube .9s var(--e-out) .38s backwards}
.arranque .hero .kick::after{animation:entra-raya 1s var(--e-out) .7s backwards}
.arranque .hero h1 .ln > i{animation:entra-renglon 1.15s var(--e-out) backwards}
.arranque .hero h1 .ln:nth-child(1) > i{animation-delay:.5s}
.arranque .hero h1 .ln:nth-child(2) > i{animation-delay:.62s}
.arranque .hero h1 .ln:nth-child(3) > i{animation-delay:.74s}
/* La bajada es lo más grande en texto: entra solo subiendo (sin arrancar invisible),
   así Google la cuenta pintada desde el primer cuadro (mejor velocidad de carga). */
.arranque .hero-lead{animation:entra-asienta .9s var(--e-out) .45s backwards}
.arranque .hero-acciones{animation:entra-sube 1s var(--e-out) 1.1s backwards}
.arranque .hero-indice{animation:entra-fundido 1.2s var(--e) 1.3s backwards}

/* listas que entran ítem por ítem en vez de en bloque */
[data-cascada][data-rev]{transform:none}
[data-cascada].visto > *{animation:entra-sube .85s var(--e-out) backwards}
[data-cascada].visto > :nth-child(2){animation-delay:.08s}
[data-cascada].visto > :nth-child(3){animation-delay:.16s}
[data-cascada].visto > :nth-child(4){animation-delay:.24s}
[data-cascada].visto > :nth-child(5){animation-delay:.32s}
[data-cascada].visto > :nth-child(n+6){animation-delay:.4s}

/* ══ menú: rayita que se desliza ══
   Mide 1 px de ancho y se estira con scaleX: así el viaje y el cambio de
   ancho van en la misma transición, sin recalcular el diseño. */
.menu{position:relative}
.menu-marca{position:absolute;left:0;top:0;width:1px;height:1px;background:var(--room);
  transform-origin:left;pointer-events:none;opacity:0;
  transform:translate(var(--mm-x,0px),var(--mm-y,0px)) scaleX(var(--mm-w,0));
  transition:transform .55s var(--e-out),opacity .3s var(--e),background .45s var(--e)}
.barra.sobre-hondo .menu-marca{background:var(--cielo)}
.menu-marca.on{opacity:1}
.con-marca a.oculta-chico::after{display:none}

/* ══ logotipo gigante del pie ══ */
.pie{overflow:hidden;--pie:1}
/* El logotipo real, usado como máscara: el degradé solo se ve dentro de la
   forma de las letras. */
.pie-gigante{margin:clamp(34px,5vw,70px) 0 calc(-1 * clamp(4px,1vw,14px));
  user-select:none;pointer-events:none}
.pie-gigante span{display:block;width:min(90%,1180px);aspect-ratio:300/88.6;margin:0 auto;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--sobre-hondo) 30%,transparent),
    color-mix(in srgb,var(--sobre-hondo) 6%,transparent));
  -webkit-mask:url(/img/room-logo.svg) center/contain no-repeat;
  mask:url(/img/room-logo.svg) center/contain no-repeat;
  transform:translateY(calc((1 - var(--pie)) * 60%))}

/* ══ galería ══ */
[data-ampliar]{cursor:zoom-in}
.caja-luz{position:fixed;inset:0;z-index:120;display:grid;place-items:center;cursor:zoom-out;
  background:rgba(28,5,17,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.caja-luz img{display:block;object-fit:contain;border-radius:14px;will-change:transform;
  box-shadow:0 40px 90px rgba(0,0,0,.45)}
.caja-cerrar{position:absolute;top:clamp(14px,3vw,26px);right:clamp(14px,3vw,26px);width:50px;height:50px;
  border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:28px;line-height:1;
  transition:background .25s var(--e),transform .45s var(--e-out)}
.caja-cerrar:hover{background:rgba(255,255,255,.24);transform:rotate(90deg)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  [data-apretar]{display:none}
  [data-rev]{opacity:1!important;transform:none!important}
  .ln > i{transform:none!important}
  .kick[data-rev].visto::after{width:clamp(26px,4vw,56px)}
  .cifras article{opacity:1!important;transform:none!important}
  /* Sin movimiento las dos capas no pueden quedar una encima de la otra:
     se desapilan y quedan como dos secciones normales, una abajo de la otra. */
  .cruce,.cruce-pega{height:auto}
  .cruce-pega{position:static}
  .capa{position:static;padding:clamp(60px,9vw,120px) clamp(18px,8vw,8vw)}
  .lente::after{display:none}
  .lente{clip-path:none!important}
  .cruce-caja .capa[aria-hidden="true"]{display:none}
  .pilar:hover,.nota:hover,.rec:hover,.pie li a:hover,
  .modelo:hover .modelo-art img{transform:none!important}
  .enl::after{transform:scaleX(1)!important}
  .cargando::after{animation-duration:1.4s!important}
  .tlink:hover i,.enl:hover i,.enl:hover svg{transform:none!important}
  .hero-foto img{animation:none!important;transform:scale(1.04)!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
  [data-paralaje] > img{translate:none!important}
  .franja-pista{transform:none!important}
  [data-tilt]{transform:none!important}
  [data-tilt]::after{display:none}
  [data-cascada].visto > *{animation:none!important}
  .pie-gigante span{transform:none!important}
  .btn,.bt-1,.bt-2{--mx:0px!important;--my:0px!important}
  [data-rev][data-foto]{clip-path:none!important}
  [data-foto] > img{transform:none!important}
}

/* Las dos capas comparten tipografía y grilla: tienen que caer en el mismo
   lugar y leerse igual, porque una reemplaza a la otra. */
.capa .kick,.portada-linea .kick{font-size:12px}
.capa .copy,.portada-linea .copy{font-size:clamp(1.02rem,1.35vw,1.22rem);line-height:1.75}
.capa .cab2,.portada-linea .cab2{align-items:center}
@media(max-width:900px){
  .capa .cab2,.portada-linea .cab2{grid-template-columns:1fr;gap:22px;align-items:start}
}

/* Mientras el JavaScript no dibujó la página, el contenedor ya ocupa una
   pantalla: así el pie queda abajo del pliegue y no se ve subir. */
#app{min-height:100vh;min-height:100dvh}

/* Las páginas internas empiezan debajo de la barra, que es fija */
.interna{padding-top:var(--nav)}
/* La marca arranca con el cruce, que ya deja lugar para la barra. Sin
   movimiento el cruce es una sección común y necesita el espacio. */
@media (prefers-reduced-motion:no-preference){.interna.de-cruce{padding-top:0}}
.interna .bloque:first-child{padding-top:clamp(46px,6vw,80px)}

/* ══════════════════════════════════════════════════════════
   PÁGINAS INTERNAS
   Mismo lenguaje que la home: bloques anchos, líneas finas,
   títulos en Montserrat y datos en mayúscula con tracking.
   ══════════════════════════════════════════════════════════ */
.caja{max-width:1320px;margin:0 auto;padding:0 clamp(18px,8vw,8vw)}
.caja-n{max-width:820px;margin:0 auto;padding:0 clamp(18px,8vw,8vw)}
.sec{padding:clamp(46px,7vw,96px) 0}
.sec-cab{margin-bottom:clamp(30px,4vw,52px);max-width:62ch}
.sec-cab h1,.sec-cab h2{font-family:var(--fd);font-weight:300;font-size:clamp(1.9rem,4.4vw,3.4rem);
  letter-spacing:-.032em;line-height:1.02;margin-bottom:16px}
.sec-cab p{color:var(--tinta-2);font-size:1rem;line-height:1.7;max-width:54ch}
.migas{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:26px 0 0;
  font-family:var(--fd);font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.11em;color:var(--tinta-3)}
.migas a:hover{color:var(--room-txt)}
.migas i{font-style:normal;opacity:.5}
.texto{max-width:64ch;display:grid;gap:16px;color:var(--tinta-2);font-size:1rem;line-height:1.85}
.texto strong{color:var(--tinta);font-weight:600}
.rot{font-family:var(--fd);font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--tinta-3)}
.etiq{display:inline-block;font-family:var(--fd);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;color:var(--room-txt);margin-bottom:8px}
.mono,.num{font-variant-numeric:tabular-nums}
/* "Más de": el + va aparte, así el número puede contar sin perderlo. */
.num[data-mas]::before{content:"+"}
.dos-col{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(26px,6vw,68px);align-items:center}
@media(max-width:880px){.dos-col{grid-template-columns:1fr!important;align-items:start}}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* Un hijo de grilla no se achica por debajo de su contenido (el select largo del motivo empujaba el borde derecho). */
.dos-col>*,.dos>*,.form>*{min-width:0}
@media(max-width:560px){.dos{grid-template-columns:1fr}}

/* botones heredados de las vistas internas */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:16px 30px;
  border-radius:999px;font-family:var(--fd);font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.11em;white-space:nowrap;transition:background .3s var(--e),color .3s var(--e),
    border-color .3s var(--e),transform .4s var(--e-out),box-shadow .4s var(--e-out)}
.bt-1,.bt-2{transform:translate(var(--mx,0px),var(--my,0px))}
.bt-1:hover,.bt-2:hover{transform:translate(var(--mx,0px),calc(var(--my,0px) - 3px));box-shadow:var(--alza)}
.bt-1:active,.bt-2:active{transform:translate(var(--mx,0px),calc(var(--my,0px) - 1px))}
.bt-1{background:var(--tinta);color:var(--papel)}
.bt-1:hover{background:var(--room-2);color:var(--papel)}
.bt-2{border:1px solid var(--linea-fuerte);color:var(--tinta)}
.bt-2:hover{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.bt-3{color:var(--tinta-2);padding:12px 4px}
.bt-3:hover{color:var(--room-txt)}
.bt-bl{width:100%}
.bt[disabled]{opacity:.4;pointer-events:none}
.enl{display:inline-flex;gap:8px;align-items:center;white-space:nowrap;font-family:var(--fd);font-size:12px;
  font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--room-txt);
  border-bottom:1px solid currentColor;padding-bottom:5px}
/* Metido en un párrafo va en línea: como caja agrandaba su renglón y el espacio
   entre renglones quedaba desparejo. */
p .enl,.aviso .enl{display:inline}

/* fichas y tarjetas */
.tarjeta{position:relative;background:var(--sup);border:1px solid var(--linea);border-radius:18px;
  padding:clamp(24px,3vw,36px);transition:border-color .25s var(--e)}
.tarjeta + .tarjeta{margin-top:16px}
.tarjeta:hover{border-color:var(--linea-fuerte)}
.tarjeta h3{font-family:var(--fd);font-weight:600;font-size:1.24rem;letter-spacing:-.03em;margin-bottom:8px}
.datos{border-top:1px solid var(--linea);margin-top:24px}
.dato{display:flex;justify-content:space-between;gap:20px;padding:14px 0;
  border-bottom:1px solid var(--linea);font-size:.92rem}
.dato dt{color:var(--tinta-3);font-family:var(--fd);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;padding-top:3px}
.dato dd{margin:0;font-weight:600;text-align:right;text-wrap:pretty}
/* Dentro de una tarjeta la última raya sobra: el borde de la tarjeta ya cierra. */
.tarjeta .dato:last-child{border-bottom:0;padding-bottom:0}
.modelos{display:grid;gap:clamp(24px,3.5vw,44px)}

/* listas de contenido */
/* La raya de arriba la pone la primera fila: así mide lo mismo que las de abajo
   (las filas se estiran a los costados por el fondo del hover). Las notas ya
   traen la suya: con la del contenedor quedaba doble. */
.pilar:first-child,.rec:first-child{border-top:1px solid var(--linea)}
/* El espacio que ocupa el fondo del hover está reservado desde el principio
   (padding fijo + margen negativo que lo compensa): al pasar el mouse cambia
   el color, nunca el ancho, así el texto no se reacomoda. */
.pilar{display:grid;grid-template-columns:52px 1fr 1.2fr;gap:clamp(16px,3vw,42px);
  padding:clamp(22px,3vw,32px) 14px;margin-inline:-14px;
  border-bottom:1px solid var(--linea);align-items:baseline}
.pilar .n{font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--room-txt)}
.pilar h3{font-family:var(--fd);font-weight:600;font-size:1.16rem;letter-spacing:-.025em}
.pilar p{color:var(--tinta-2);font-size:.94rem;line-height:1.75}
@media(max-width:820px){.pilar{grid-template-columns:34px 1fr}.pilar p{grid-column:2}}
/* Hotelería, para quién: una tarjeta con foto por tipo de alojamiento */
.tipos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:clamp(18px,2.4vw,32px);margin-top:clamp(36px,5vw,62px)}
.tipo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:14px;margin-bottom:18px;background:var(--sup-2)}
.tipo h3{font-family:var(--fd);font-weight:600;font-size:1.16rem;letter-spacing:-.025em;margin-bottom:8px}
.tipo p{color:var(--tinta-2);font-size:.94rem;line-height:1.75}
.rec{position:relative;display:grid;grid-template-columns:1fr auto;gap:18px;padding:18px 10px;
  margin-inline:-10px;align-items:center;border-bottom:1px solid var(--linea);
  transition:transform .35s var(--e-out),background .35s var(--e)}
.rec:hover{transform:translateX(8px);background:color-mix(in srgb,var(--room) 5%,transparent)}
.rec:hover::before{content:'';position:absolute;top:0;bottom:0;right:100%;width:12px}
.rec b{display:block;font-family:var(--fd);font-weight:600;font-size:1rem;margin-bottom:3px}
.rec span{font-size:.86rem;color:var(--tinta-3)}

/* formularios */
.form{display:grid;gap:18px;max-width:520px}
/* Al lado de otra columna (Contacto) el formulario ocupa la suya: apilado en la
   tablet quedaba más angosto que las tarjetas de abajo. */
.dos-col .form{max-width:none}
.campo{display:grid;gap:7px}
.campo label{font-family:var(--fd);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.campo label .opc{font-weight:500;text-transform:none;letter-spacing:0;color:var(--tinta-3)}
.campo input,.campo textarea,.campo select{width:100%;min-width:0;padding:14px 18px;border-radius:14px;
  border:1px solid var(--linea-fuerte);background:var(--sup);color:var(--tinta);
  font:inherit;font-size:16px;outline:0;transition:border-color .2s var(--e),box-shadow .2s var(--e)}   /* menos de 16px y el iPhone hace zoom */
.campo input:focus,.campo textarea:focus,.campo select:focus{border-color:var(--room);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--room) 16%,transparent)}
.campo input::placeholder,.campo textarea::placeholder{color:var(--tinta-3)}
/* La flecha del sistema queda pegada al borde: una propia, al mismo margen que el texto. */
.campo select{appearance:none;padding-right:48px;text-overflow:ellipsis;background:var(--sup) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2355574f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center}
.campo small{font-size:.8rem;color:var(--tinta-3)}
.campo textarea{resize:vertical;min-height:118px}
.campo.mal input,.campo.mal textarea{border-color:var(--error)}
.campo-error{margin:6px 0 0;font-size:.85rem;color:var(--error)}
.campo-error:empty{display:none}
.campo input:disabled{background:var(--sup-2);color:var(--tinta-3);cursor:not-allowed}
.bloqueado{padding:18px;background:var(--sup-2);border-radius:14px;margin-bottom:6px;display:grid;
  grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.bloqueado{grid-template-columns:1fr}}
.aviso{display:flex;gap:12px;align-items:flex-start;background:var(--sup-2);padding:16px 20px;
  border-radius:14px;
  font-size:.9rem;color:var(--tinta-2);line-height:1.7;border-left:2px solid var(--room)}
.aviso svg,.aviso .ph{width:17px;height:17px;font-size:17px;color:var(--room-txt);flex-shrink:0;margin-top:3px}
.aviso.ojo{border-left-color:var(--ojo);background:color-mix(in srgb,var(--ojo) 10%,transparent);color:var(--ojo-txt)}
.aviso.ok{border-left-color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent);color:var(--ok-txt)}

/* intranet */
.panel{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(24px,4vw,58px);align-items:start;padding:30px 0 0}
@media(max-width:940px){.panel{grid-template-columns:1fr}}
.lateral{position:sticky;top:calc(var(--nav) + 24px);display:grid;gap:2px}
@media(max-width:940px){.lateral{position:static;display:flex;flex-wrap:wrap;gap:6px}}
.lateral button{text-align:left;padding:12px 14px;font-family:var(--fd);font-size:12px;
  font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--tinta-3);
  border-left:2px solid transparent;transition:color .2s var(--e),border-color .2s var(--e),background .2s var(--e)}
.lateral button:hover{color:var(--tinta);background:var(--sup-2)}
.lateral button.act{color:var(--room-txt);border-left-color:var(--room)}
.bienvenida{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:26px}
.avatar{width:56px;height:56px;border-radius:50%;background:var(--room);color:var(--papel);
  display:grid;place-items:center;font-family:var(--fd);font-weight:700;font-size:1.15rem;flex-shrink:0}
.bienvenida h2{font-family:var(--fd);font-weight:600;font-size:1.5rem;letter-spacing:-.035em;margin-bottom:3px}
.bienvenida p{font-family:var(--fd);font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--tinta-3)}

/* restos de la versión anterior que las vistas todavía nombran */
.ap,.fila,.abrir{}
.portada{position:relative}
.lineas{display:block}

/* La ficha va pegada arriba (sin el margen de las otras páginas). */
.interna.pegada{padding-top:0}
/* el pie se monta 1 px sobre lo de arriba: tapa el medio píxel que dejan los
   bloques fijados al soltarse */
.pie{position:relative;z-index:1;margin-top:-1px}

/* ══ ficha de producto contada como historia (pedido de Leo, 02/10) ══
   1. portada con el producto en un ambiente, a lo ancho de la pantalla
   2. cómo se siente: firmeza, texto de la línea y tres cifras grandes
   3. las otras escenas en mosaico
   4. el producto y la ficha técnica, chica y plegada
   5. el siguiente modelo */
/* La portada ocupa la pantalla entera, sea del alto que sea, con foto de ambiente o sin. */
.fh-portada{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.fh-portada > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fh-portada.con-escena::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(30,6,19,.66),rgba(30,6,19,.14) 46%,transparent 68%),
    linear-gradient(90deg,rgba(30,6,19,.32),transparent 55%)}
.fh-portada-txt{position:relative;z-index:1;width:100%;padding-bottom:clamp(36px,6vw,72px)}
.fh-portada h1{font-family:var(--fd);font-weight:300;letter-spacing:-.04em;line-height:.9;
  font-size:clamp(4rem,12vw,10rem);margin:0}
.fh-portada .migas{padding:0 0 clamp(18px,3vw,30px)}
.fh-bajada{margin-top:16px;font-family:var(--fd);font-size:clamp(.95rem,1.4vw,1.1rem);letter-spacing:.01em}
.fh-portada.con-escena,.fh-portada.con-escena h1,.fh-portada.con-escena .migas a{color:#fff}
.fh-portada.con-escena .migas,.fh-portada.con-escena .fh-bajada{color:rgba(255,255,255,.82)}
/* Sin ambiente: la foto del producto a la derecha, sobre el blanco de las tarjetas. */
.fh-portada.sin-escena{background:var(--papel);padding-top:var(--nav)}
.fh-portada.sin-escena > img{left:auto;width:58%;object-fit:contain;padding:calc(var(--nav) + 4%) 5% 6%}
.fh-portada.sin-escena .fh-portada-txt > *{max-width:44%}
/* Con la foto al lado hay menos ancho: el nombre más largo (Residence) tiene que entrar. */
.fh-portada.sin-escena h1{font-size:clamp(2.8rem,6vw,6rem);overflow-wrap:anywhere}
@media(max-width:800px){
  .fh-portada.sin-escena{flex-direction:column;align-items:stretch;justify-content:flex-end}
  .fh-portada.sin-escena > img{position:relative;width:100%;height:auto;aspect-ratio:16/11;padding:4% 6% 0}
  .fh-portada.sin-escena .fh-portada-txt > *{max-width:none}
}

.fh-sensacion{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,90px);align-items:end;
  padding:clamp(70px,10vw,140px) 0 0}
.fh-sensacion .copy{font-size:1.02rem}
@media(max-width:860px){.fh-sensacion{grid-template-columns:1fr}}

.fh-cifras{display:grid;grid-template-columns:repeat(3,1fr);margin:clamp(56px,8vw,100px) 0 clamp(70px,10vw,130px);
  border-top:1px solid var(--linea)}
.fh-cifras div{display:grid;gap:10px;padding:26px 26px 0;border-right:1px solid var(--linea)}
.fh-cifras div:first-child{padding-left:0}
.fh-cifras div:last-child{border-right:0}
.fh-cifras b{font-family:var(--fd);font-weight:300;font-size:clamp(2.8rem,6vw,5rem);letter-spacing:-.04em;line-height:1;color:var(--tinta)}
.fh-cifras span{font-family:var(--fd);font-size:12px;font-weight:600;line-height:1.6;text-transform:uppercase;letter-spacing:.12em;color:var(--tinta-2)}
@media(max-width:600px){
  .fh-cifras{grid-template-columns:1fr}
  .fh-cifras div{padding:20px 0;border-right:0;border-bottom:1px solid var(--linea);grid-template-columns:auto 1fr;align-items:center;gap:18px}
}

/* Mosaico de escenas: una sola va a lo ancho; dos, lado a lado; tres, una
   grande y dos apiladas. */
.fh-escenas{display:grid;gap:clamp(6px,1vw,12px);padding:0 clamp(6px,1vw,12px)}
.fh-escenas figure{margin:0;overflow:hidden;border-radius:clamp(10px,1.4vw,18px);cursor:zoom-in;background:var(--sup-2)}
.fh-escenas img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e-out)}
.fh-escenas figure:hover img{transform:scale(1.03)}
.fh-escenas.n1 figure{aspect-ratio:21/9}
.fh-escenas.n2{grid-template-columns:1fr 1fr}
.fh-escenas.n2 figure{aspect-ratio:4/3}
.fh-escenas.n3{grid-template-columns:1.6fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:2.2/1}
.fh-escenas.n3 figure:first-child{grid-row:1 / 3}
@media(max-width:760px){
  .fh-escenas.n2,.fh-escenas.n3{grid-template-columns:1fr;grid-template-rows:none;aspect-ratio:auto}
  .fh-escenas.n3 figure:first-child{grid-row:auto}
  .fh-escenas figure{aspect-ratio:16/10}
}

/* Las columnas pueden achicarse más que su contenido: si no, algo ancho
   adentro estira la columna y en el celular la ficha se sale de la pantalla. */
.fh-sensacion > *,.fh-dentro > *{min-width:0}

/* ── 2 · Por dentro: cada capa contada al lado de una foto de cerca ── */
.fh-dentro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,96px);align-items:center;
  max-width:1320px;margin:0 auto;padding:clamp(70px,10vw,140px) clamp(18px,8vw,8vw)}   /* mismo ancho y margen que .caja */
.fh-dentro.sin-foto{grid-template-columns:minmax(0,1fr);max-width:860px}
.fh-dentro-foto{margin:0;aspect-ratio:1;border-radius:clamp(16px,2vw,28px);overflow:hidden;background:#fff;cursor:zoom-in}
.fh-dentro-foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e-out)}
.fh-dentro-foto:hover img{transform:scale(1.04)}
.fh-dentro-txt .t-xl{margin-bottom:clamp(16px,2vw,24px)}
.fh-dentro-lead{margin-bottom:clamp(22px,3vw,34px)}
.fh-capas{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.fh-capas li{display:grid;grid-template-columns:56px 1fr;gap:12px;padding:22px 0;border-bottom:1px solid var(--linea)}
.fh-capas li > span{font-family:var(--fd);font-size:clamp(1.4rem,2vw,1.8rem);font-weight:300;line-height:1;color:var(--room-txt)}
.fh-capas h3{font-family:var(--fd);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  color:var(--tinta-2);margin:2px 0 8px}
.fh-capas p{font-family:var(--fd);font-size:clamp(1.05rem,1.5vw,1.25rem);font-weight:300;line-height:1.45;color:var(--tinta);text-wrap:pretty}
.fh-medidas{margin-top:22px;font-size:.92rem;line-height:1.7;color:var(--tinta-2)}
@media(max-width:860px){.fh-dentro{grid-template-columns:minmax(0,1fr)}}

/* ── 3 · De cerca: las fotos del producto, grandes, en una tira que se
   desliza (en la compu se ven dos y media; en el celular, una y un poco) ── */
.fh-cerca{padding-bottom:clamp(70px,10vw,130px)}
.fh-cerca-pista{display:flex;gap:clamp(10px,1.4vw,18px);overflow-x:auto;scroll-snap-type:x mandatory;
  /* arranca donde arranca .caja (su rótulo "De cerca" está arriba, adentro de una) */
  --borde:max(8vw,calc(50% - 660px + 8vw));
  padding:4px var(--borde) 14px;scroll-padding-inline:var(--borde);scrollbar-width:thin}
.fh-cerca-pista figure{flex:0 0 clamp(260px,38vw,520px);aspect-ratio:1;margin:0;scroll-snap-align:start;
  border-radius:clamp(14px,1.8vw,24px);overflow:hidden;background:#fff;cursor:zoom-in}
.fh-cerca-pista img{width:100%;height:100%;object-fit:contain;padding:6%;transition:transform .9s var(--e-out)}
.fh-cerca-pista figure:hover img{transform:scale(1.05)}
@media(max-width:600px){.fh-cerca-pista figure{flex-basis:82vw}}

/* ── 4 · Dónde probarlo: una invitación, no un botón de compra ── */
.fh-probar{text-align:center;padding:clamp(60px,9vw,120px) 0 clamp(70px,10vw,140px)}
.fh-probar .kick{justify-content:center}
.fh-probar .copy{max-width:52ch;margin:clamp(20px,2.4vw,30px) auto 0}
.fh-probar-acciones{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 26px;margin-top:clamp(26px,3vw,38px)}
.fh-tel{font-size:.92rem;color:var(--tinta-2)}

.fh-vecinos{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:clamp(28px,4vw,48px)}
.fh-sigue{display:flex;align-items:center;gap:16px;color:inherit;min-width:0}
.fh-sigue:not(.fh-antes){margin-left:auto;flex-direction:row-reverse;text-align:right}
.fh-sigue img{width:72px;height:72px;flex:0 0 auto;object-fit:cover;border-radius:50%;background:#fff;
  transition:transform .45s var(--e-out)}
.fh-sigue:hover img{transform:scale(1.06)}
.fh-sigue .kick{display:block;margin-bottom:4px;font-size:11px;color:var(--tinta-3)}
.fh-sigue .kick::after{display:none}
.fh-sigue .kick span{color:var(--room-txt);margin-right:6px}
.fh-sigue b{display:block;font-family:var(--fd);font-weight:400;font-size:clamp(1.15rem,1.8vw,1.45rem);letter-spacing:-.02em}
.fh-sigue b i{font-style:normal;display:inline-block;color:var(--room-txt);transition:transform .35s var(--e-out)}
.fh-sigue:hover b i{transform:translateX(5px)}
.fh-antes:hover b i{transform:translateX(-5px)}
.fh-sigue .kick em{font-style:normal}
.fh-sigue b{white-space:nowrap}
@media(max-width:560px){.fh-sigue img,.fh-sigue .kick em{display:none}.fh-sigue b{font-size:1.1rem}}

/* ══ preguntas frecuentes y política de privacidad ══ */
.faq{border-top:1px solid var(--linea)}
.faq-item{border-bottom:1px solid var(--linea)}
.faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;list-style:none;
  padding:22px 0;font-family:var(--fd);font-size:clamp(1rem,1.6vw,1.15rem);font-weight:500;color:var(--tinta)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex:0 0 auto;font-size:1.5rem;font-weight:300;color:var(--room-txt);transition:transform .3s var(--e)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{margin:0 0 24px;max-width:62ch;color:var(--tinta-2);line-height:1.8}
.legal h3{font-family:var(--fd);font-size:1.1rem;font-weight:600;margin:34px 0 10px;color:var(--tinta)}
.legal h3:first-child{margin-top:0}
.legal p{color:var(--tinta-2);line-height:1.85;max-width:66ch}
.pie-fin a{display:inline-block;padding:6px 0;color:inherit;text-decoration:underline;text-underline-offset:3px}

/* Campo trampa del formulario de contacto: invisible para la gente, los robots lo llenan. */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Un recurso de la intranet que todavía no tiene archivo. */
.bt.pronto{opacity:.55;cursor:default;pointer-events:none}

/* Atajo para teclado y lectores de pantalla: aparece al tabular y lleva
   directo al contenido, salteando el menú. */
.saltar{position:absolute;left:12px;top:-80px;z-index:300;padding:12px 18px;border-radius:12px;
  background:var(--tinta);color:var(--papel);font-family:var(--fd);font-size:.9rem;font-weight:600;transition:top .2s var(--e)}
.saltar:focus{top:12px}
main:focus{outline:none}

/* La espuma, explicada. Mismo idioma que el resto: líneas finas, números en
   franja, nada de tarjetas. El dibujo es un bloque cortado en cinco colchones
   con la misma celda (puntos parejos); al aparecer, las tajadas se separan. */
.datos-espuma{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(56px,7vw,96px);
  padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--linea)}
.datos-espuma article{display:flex;flex-direction:column;gap:10px;padding:0 24px;border-right:1px solid var(--linea)}
.datos-espuma{row-gap:30px}
.datos-espuma article:nth-child(3n+1){padding-left:0}
.datos-espuma article:nth-child(3n),.datos-espuma article:last-child{border-right:0;padding-right:0}
/* Nombres o palabras muy largas (cargadas desde el panel) cortan en vez de desbordar. */
h1,h2,h3,.fh-sigue b,.t-xxl,.t-xl{overflow-wrap:anywhere}
.datos-espuma strong{font-family:var(--fd);font-weight:300;font-size:clamp(2rem,3.4vw,3rem);letter-spacing:-.03em;line-height:1;color:var(--room-txt);font-variant-numeric:tabular-nums}
.datos-espuma span{font-family:var(--fd);font-size:12px;line-height:1.55;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3);max-width:22ch}
@media(max-width:860px){
  .datos-espuma{grid-template-columns:1fr 1fr;gap:30px 0}
  .datos-espuma article{border-right:0;padding:0 18px 0 0}
}

/* Celdas parejas contra desparejas, como la lámina de la capacitación, en los
   colores de Room. Una prensa entra desde arriba, primero sobre el panal parejo
   (aprieta, sube, la espuma recupera) y después sobre el desparejo (se hunde
   torcida, las celdas débiles colapsan y se quiebran, y no vuelve). Un foco por
   vez: el segundo panel arranca cuando el primero terminó. */
.celdas-comp{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.7fr);gap:clamp(28px,5vw,72px);align-items:center;
  margin-top:clamp(56px,7vw,96px);padding-top:clamp(36px,5vw,60px);border-top:1px solid var(--linea)}
.celdas-txt h3{font-family:var(--fd);font-weight:300;font-size:clamp(2rem,3.6vw,3.2rem);letter-spacing:-.035em;line-height:1;margin:0 0 18px}
.celdas-txt p{color:var(--tinta-2);font-size:1.02rem;line-height:1.65;max-width:40ch;margin:0 0 22px}
.celdas-txt .tlink{background:none;border:0;padding:0;cursor:pointer;font:inherit}
.celdas-paneles{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px)}
.panel-celdas{margin:0;display:flex;flex-direction:column;gap:12px;padding:clamp(16px,2vw,24px);border-radius:14px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,#5A1640 0%,var(--hondo) 55%,var(--hondo-2) 100%);color:var(--sobre-hondo);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cielo) 34%,transparent)}
.panel-celdas.mal{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sobre-hondo) 14%,transparent)}
.panel-celdas figcaption{font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cielo)}
.panel-celdas.mal figcaption{color:var(--sobre-hondo-2)}
.panel-celdas svg{display:block;width:100%;height:auto;overflow:hidden}
.panel-celdas p{margin:0;font-size:.9rem;line-height:1.5;color:var(--sobre-hondo-2)}
.panel-celdas .celda{stroke:#E8BFD2;stroke-width:2.2;stroke-linejoin:round}
.panel-celdas .guia{fill:#B89AAA}
.panel-celdas .placa{filter:drop-shadow(0 6px 6px rgba(0,0,0,.35))}
.panel-celdas .placa-brillo{fill:#fff;opacity:.7}
.panel-celdas .prensa{transform-box:view-box;transform-origin:150px 20px}
.panel-celdas .grieta{fill:none;stroke:#E8BFD2;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}

@media(max-width:860px){.celdas-comp{grid-template-columns:1fr}}
@media(max-width:560px){.celdas-paneles{grid-template-columns:1fr}}



/* Alta presión, en continuo: un solo panel ancho con la línea de espumado (lo mueve app.js, cuadro por cuadro). */
.presion{margin-top:clamp(44px,6vw,80px)}
.panel-continuo{grid-column:1/-1}
.panel-continuo .paso{font-family:var(--fd);font-size:15px;font-weight:600;fill:var(--sobre-hondo)}
.panel-continuo .manguera{fill:none;stroke:#C99AB2;stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.panel-continuo .flujo{fill:none;stroke:#FBE3EE;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:3 7;opacity:0}
.panel-continuo .cabezal{filter:drop-shadow(0 4px 5px rgba(0,0,0,.4))}
.panel-continuo .chorro{fill:#F1DCE6}
.panel-continuo .cinta-v{fill:#3A0C24;stroke:rgba(232,191,210,.35);stroke-width:1}
.panel-continuo .cinta-paso{stroke:#E8BFD2;stroke-width:1.4;stroke-dasharray:4 8;opacity:.5}
.panel-continuo .rodillo circle{fill:#5A1A3B;stroke:#C99AB2;stroke-width:1.2}
.panel-continuo .rodillo line{stroke:#C99AB2;stroke-width:1.1;stroke-linecap:round}
.panel-continuo pattern circle{fill:none;stroke:#fff;stroke-opacity:.2;stroke-width:.8}
.panel-continuo .costra{fill:none;stroke:#F6DCE8;stroke-width:1.6;stroke-linejoin:round;opacity:.65}
.panel-continuo .lupa-fondo{fill:#8E4468}
#ec-z circle{stroke-opacity:.6;stroke-width:1}
.panel-continuo .lupa-aro{fill:none;stroke:#FBE3EE;stroke-width:2}
.panel-continuo .lupa{filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}

/* En pantallas táctiles, todo lo que se toca mide al menos 44 px de alto. */
@media (pointer:coarse){
  .tlink,.migas a,.pie li a,.pie-fin a,[data-apretar],.fh-sigue{min-height:44px}
  .tlink,.migas a,[data-apretar]{display:inline-flex;align-items:center}
  .pie li a{display:inline-flex;align-items:center}
}

/* Pasar de modelo: flechas arriba de la ficha y fila al final, fáciles de tocar. */
.fh-pasar{position:absolute;z-index:2;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;justify-content:space-between;
  padding:0 clamp(12px,3vw,40px);pointer-events:none}
.fh-pasar a{pointer-events:auto;display:inline-flex;align-items:center;gap:16px;min-height:48px;padding:8px 6px;
  color:inherit;font-family:var(--fd);text-shadow:0 1px 14px rgba(20,4,12,.55)}
.fh-portada.sin-escena .fh-pasar a{text-shadow:none}
/* Flecha dibujada: una línea fina con punta, que se estira al pasar el mouse. */
.fh-pasar a i{position:relative;width:34px;height:1.5px;background:currentColor;font-size:0;transition:width .35s var(--e);
  box-shadow:0 1px 10px rgba(20,4,12,.4)}
.fh-pasar a i::after{content:"";position:absolute;top:50%;width:9px;height:9px;border:solid currentColor;border-width:1.5px 1.5px 0 0}
.fh-pasar a:first-child i::after{left:0;transform:translateY(-50%) rotate(-135deg)}
.fh-pasar a:last-child i::after{right:0;transform:translateY(-50%) rotate(45deg)}
.fh-pasar a:hover i,.fh-pasar a:focus-visible i{width:54px}
.fh-pasar a span{display:flex;flex-direction:column;line-height:1.1;font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:400;letter-spacing:-.01em}
.fh-pasar a:last-child span{text-align:right}
.fh-pasar small{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.8;margin-bottom:4px}
@media(max-width:560px){.fh-pasar a{min-width:48px;justify-content:center}.fh-pasar a i{width:26px}.fh-pasar a span{display:none}}
.fh-sigue{padding:10px 12px;margin:-10px -12px;border-radius:16px;min-height:48px}
.fh-sigue:focus-visible,.fh-pasar a:focus-visible{outline:2px solid var(--room);outline-offset:3px}
.fh-portada.con-escena .fh-pasar a:focus-visible{outline-color:#fff}

/* Pie claro: cuando la página termina en claro, el pie sigue en claro. */
.pie.claro{--hondo:var(--papel);--sobre-hondo:var(--tinta);--sobre-hondo-2:var(--tinta-2);--sobre-hondo-3:var(--tinta-3);
  --linea-hondo:var(--linea);--cielo:var(--room-txt);--luz-alfa:0;border-top:0}
.pie.claro .marca{color:var(--room)}
/* Sin ambiente la foto ocupa el centro: las flechas van juntas abajo a la derecha, donde está vacío. */
.fh-portada.sin-escena .fh-pasar{top:auto;bottom:clamp(36px,6vw,72px);transform:none;justify-content:flex-end;gap:clamp(24px,4vw,56px)}
@media(max-width:800px){.fh-portada.sin-escena .fh-pasar{bottom:auto;top:calc(var(--nav) + 20px);justify-content:space-between}}