/* ATMO — TD Furniture Experience. v2
   Mismo esqueleto que LUXA: sidebar fija en desktop, drawer con hamburguesa en mobile,
   topbar con eyebrow + titulo por ruta. Lo que cambia es el lenguaje visual, no la navegacion. */

:root {
  --bg: #F6F4F0;
  --bg-2: #FFFFFF;
  --panel: #FFFFFF;
  --ink: #1A1917;
  --ink-2: #6B6862;
  --ink-3: #A5A199;
  --line: #E2DED6;
  --line-soft: #EDEAE4;
  --accent: #8C5A38;
  /* Marco de las fotos de producto. Va BLANCO en las tres atmosferas, a
     proposito: los renders vienen con fondo blanco puro y cualquier otro tono
     dibuja un anillo alrededor de la foto, como un sub-marco que no esta en
     ningun lado. Blanco contra blanco no tiene costura. Se cambia aca y en un
     solo lugar. --card-lift es la sombra cuando la card se levanta, y esa si
     cambia con la atmosfera (mas abajo). */
  --frame: #FFFFFF;
  --card-lift: 0 26px 50px -28px rgba(20, 20, 25, .45);
  --radius: 2px;
  --radius-sm: 6px;
  --sidebar-w: 260px;
  --topbar-h: 76px;
  --gutter: 40px;
  /* Relleno de arriba del panel. Variable porque la portada del inicio lo
     cancela para ir de borde a borde. */
  --panel-top: 44px;
  /* Serif de titulares, la misma familia que declara LUXA. Todas las opciones
     vienen instaladas en Windows o Mac: no depende de internet, que va a
     importar cuando ATMO funcione sin conexion. */
  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --max: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* En monitores anchos, 1180px de contenido dejaban una franja vacia a la
   derecha del ancho de una tarjeta entera: la pantalla se veia a medio usar
   justo donde mas lugar hay para mostrar fotos. El tope sube por tramos —no
   se suelta del todo— para que las grillas sumen una columna y las fotos de
   ambiente se vean mas grandes. Los textos largos no se estiran: la bajada
   sigue limitada por su propio ancho de lectura. */
@media (min-width: 1400px) { :root { --max: 1320px; } }
@media (min-width: 1600px) { :root { --max: 1480px; } }
@media (min-width: 1850px) { :root { --max: 1640px; } }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141412;
    --bg-2: #1C1C19;
    --panel: #1C1C19;
    --ink: #F0EDE7;
    --ink-2: #A5A199;
    --ink-3: #6B6862;
    --line: #2C2C28;
    --line-soft: #24241F;
    --accent: #C89A72;
  }
}

/* =========================================================================
   LA ATMOSFERA TIÑE LA PLATAFORMA
   El switch Claro / Cálido / Oscuro no cambia solo los renders: corre muy
   suave la paleta de toda la interfaz, para que la app acompañe el clima del
   ambiente. Cambian SOLO colores — tipografia, medidas y espaciados quedan
   iguales. Para ajustar el clima de una atmosfera, tocar aca y nada mas.
   Los desvios son chicos a proposito: se tienen que sentir, no ver.
   Cada bloque declara la lista completa de colores. Es mas largo de leer,
   pero asi ninguna atmosfera se lleva puesto un color de otra ni del modo
   oscuro del sistema — de ahi salio el texto negro sobre fondo negro. */

/* Claro — luz de galeria: papel frio, casi blanco, y un acento azul noche
   tomado de la laca de esta misma atmosfera. */
:root[data-atmo="claro"] {
  --bg: #F1F1EF;
  --bg-2: #FFFFFF;
  --panel: #FFFFFF;
  --ink: #15171A;
  --ink-2: #5F6268;
  --ink-3: #9A9DA3;
  --line: #DCDCD8;
  --line-soft: #EAEAE6;
  --accent: #33405C;
  --card-lift: 0 26px 50px -28px rgba(20, 20, 25, .45);
}

/* Cálido — beige de tarde. Se lee ambar de lejos, pero un tercio mas contenido
   que las otras dos a proposito: es la unica atmosfera cuyo papel se acerca al
   color de las maderas del render, y un beige fuerte alrededor le apaga el
   nogal a la foto. El acento si va a fondo — es poca superficie y no compite. */
:root[data-atmo="calido"] {
  --bg: #F0EADE;
  --bg-2: #FCF8F1;
  --panel: #FCF8F1;
  --ink: #211C16;
  --ink-2: #6B6258;
  --ink-3: #A49889;
  --line: #E0D2BC;
  --line-soft: #ECE3D3;
  --accent: #8C5A33;
  --card-lift: 0 26px 50px -28px rgba(70, 45, 20, .42);
}

/* Oscuro — se da vuelta: papel grafito y tipografia clara. El acento va en
   nogal claro, que es lo unico que sube de brillo. */
:root[data-atmo="oscuro"] {
  --bg: #131312;
  --bg-2: #1C1C1A;
  --panel: #1C1C1A;
  --ink: #F1EEE8;
  --ink-2: #A29C92;
  --ink-3: #6E6A63;
  --line: #302F2B;
  --line-soft: #262622;
  --accent: #C9A177;
  --card-lift: 0 26px 50px -26px rgba(0, 0, 0, .85);
}

/* A proposito no hay variantes por modo oscuro del sistema: la atmosfera
   manda en todos los dispositivos. En una app de venta importa mas que el
   cliente vea exactamente lo mismo que vos le mostraste, y no que la
   configuracion de su telefono le cambie el clima del ambiente. */

/* Mientras dura el cambio de atmosfera, los colores se cruzan con un fundido
   corto en vez de saltar. La clase la pone y la saca js/app.js: dejarla fija
   pisaria las transiciones propias de hovers y botones. */
html.atmo-fade,
html.atmo-fade *,
html.atmo-fade *::before,
html.atmo-fade *::after {
  transition: background-color .45s var(--ease), border-color .45s var(--ease),
              color .45s var(--ease), fill .45s var(--ease), stroke .45s var(--ease) !important;
}
/* La regla de arriba le sacaba la transicion de opacidad a la imagen del
   ambiente y la foto nueva entraba de golpe: volvia el parpadeo justo cuando
   se cambiaba de atmosfera. Aca se le devuelve. Lo mismo para la capa que
   cruza las fotos del catalogo, que se usa exactamente en este momento. */
html.atmo-fade .scene-stage img.stage-next {
  transition: opacity .3s var(--ease) !important;
}
html.atmo-fade .prod-media img.prod-img-next,
html.atmo-fade .coll-thumb img.prod-img-next,
html.atmo-fade .detail-panel-media img.prod-img-next,
html.atmo-fade .home-media img.prod-img-next {
  transition: opacity .35s var(--ease) !important;
}
/* Las fotos de la portada tambien pasan con fundido: si un cambio de foto
   coincide con el de atmosfera, sin esto entraria de golpe. */
html.atmo-fade .home-hero-slide {
  transition: opacity 1.4s var(--ease) !important;
}
html.atmo-fade .home-hero-caption {
  transition: opacity .45s var(--ease) !important;
}
/* Los fundidos NO se apagan cuando el sistema pide menos animacion.
   Esa preferencia existe para el movimiento — cosas que se desplazan, giran o
   se agrandan, que es lo que marea. Un cambio de color y un cruce de fotos no
   mueven nada: solo evitan el corte seco, y sin ellos el cambio de atmosfera
   se ve peor para todo el mundo. Lo que si se sigue respetando mas abajo es el
   movimiento de verdad: el levante y el zoom de las cards. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.55 ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* =========================================================================
   APP SHELL
   ====================================================================== */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh;
}

/* =========================================================================
   SIDEBAR
   ====================================================================== */

.sidebar {
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  padding: 26px 18px 22px;
  z-index: 60;
}

.brand {
  display: flex; align-items: center; gap: 12px;
  padding: 0 8px 24px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.brand-mark {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--ink); color: var(--bg);
  font-size: 19px; font-weight: 500; letter-spacing: 0.04em; line-height: 1;
}
.brand-text { display: flex; flex-direction: column; }
.brand-name { font-size: 21px; font-weight: 600; letter-spacing: 0.22em; line-height: 1; }
.brand-by { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); margin-top: 5px; }

.nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: var(--radius-sm);
  color: var(--ink-2); font-size: 14px; letter-spacing: 0.02em;
  text-align: left; position: relative;
  transition: background .22s var(--ease), color .22s var(--ease);
}
.nav-item:hover { color: var(--ink); background: var(--line-soft); }
.nav-item svg { flex-shrink: 0; opacity: .8; }
.nav-item span:not(.nav-badge) { flex: 1; }
.nav-item.active { color: var(--ink); background: var(--line-soft); }
.nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 2px; border-radius: 2px; background: var(--ink);
}
.nav-item.active svg { opacity: 1; }

.nav-badge {
  min-width: 22px; padding: 2px 7px; border-radius: 100px;
  background: var(--line); color: var(--ink-2);
  font-size: 10px; font-weight: 600; text-align: center; letter-spacing: 0.05em;
}
.nav-item.active .nav-badge { background: var(--ink); color: var(--bg); }

.sidebar-foot {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 10px 4px; border-top: 1px solid var(--line-soft);
  margin-top: 12px; font-size: 12px; color: var(--ink-3);
}
.sidebar-foot-status { display: flex; align-items: center; gap: 10px; }
.sidebar-foot p { margin: 0; line-height: 1.3; color: var(--ink-2); }
.sidebar-foot-sub {
  margin: 0; font-size: 9px; letter-spacing: 0.2em;
  text-transform: uppercase; text-align: center; color: var(--ink-3);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: #58c773; flex: none; }

/* Redes en el pie de la sidebar. Cada icono lo muestra initSidebarSocial()
   solo si su dato esta cargado; sin dato, queda con [hidden]. */
.sidebar-social { display: flex; justify-content: center; gap: 12px; }
.sidebar-social .social-ico[hidden] { display: none; }
.social-ico {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3);
  transition: border-color .25s ease, color .25s ease, transform .25s ease;
}
.social-ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.social-ico svg.ico-fill { fill: currentColor; stroke: none; }
.social-ico:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

.sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(3px);
  z-index: 55;
}
.sidebar-backdrop[hidden] { display: none; }

/* =========================================================================
   MAIN — topbar + panel
   ====================================================================== */

.main {
  display: grid;
  grid-template-rows: var(--topbar-h) 1fr;
  height: 100vh;
  overflow: hidden;
}

.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  z-index: 20;
}

.hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; margin-left: -8px; }
.hamburger span { width: 22px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease), opacity .2s; }
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.topbar-title { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.topbar-eyebrow { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
.topbar-h1 { margin: 0; font-size: 21px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.atmo-switch { display: flex; align-items: center; gap: 12px; flex: none; }
.atmo-label { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.atmo-btns { display: flex; border: 1px solid var(--line); border-radius: 100px; overflow: hidden; background: var(--bg-2); }
.atmo-btns button {
  font-size: 12px; letter-spacing: 0.03em; color: var(--ink-2);
  padding: 7px 14px; display: flex; align-items: center; gap: 7px;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.atmo-btns button + button { border-left: 1px solid var(--line); }
.atmo-btns button:hover { color: var(--ink); }
.atmo-btns button.on { background: var(--ink); color: var(--bg); }
.atmo-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); flex: none; }

.panel { overflow-y: auto; padding: var(--panel-top) var(--gutter) 80px; }
.panel > * { max-width: var(--max); }

/* =========================================================================
   TIPOGRAFIA DE CONTENIDO
   ====================================================================== */

.eyebrow { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px; }
h2 { font-size: 21px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 12px; }
.display { font-size: clamp(28px, 4vw, 42px); font-weight: 400; letter-spacing: -0.02em; margin: 0 0 14px; }
.lede { font-size: 17px; color: var(--ink-2); max-width: 62ch; margin: 0 0 40px; }

.section { margin-top: 56px; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  margin-bottom: 20px; border-bottom: 1px solid var(--line); padding-bottom: 12px;
}
.section-head .count { font-size: 12px; color: var(--ink-3); letter-spacing: 0.06em; }

/* =========================================================================
   INICIO
   Referencia: la portada de LUXA (foto a sangre que pasa sola, tarjetas con
   foto, grilla despareja), llevada a un catalogo de muebles. Todos los
   colores salen de los tokens de la atmosfera, salvo lo que va ENCIMA de una
   foto: eso es siempre claro sobre velo oscuro, porque la foto no cambia de
   luminosidad con el switch y el texto tiene que leerse en las tres.
   ====================================================================== */

.panel > .home { max-width: none; }
.home { display: flex; flex-direction: column; gap: 72px; }

/* Caja de foto generica: position para la capa del fundido de atmosfera. */
.home-media { position: relative; display: block; overflow: hidden; }
.home-media-fill { position: absolute; inset: 0; }
.home-media-fill img,
.home-hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- portada ---- */

.home-hero {
  position: relative;
  /* Sale del relleno del panel para ir de borde a borde. */
  margin: calc(-1 * var(--panel-top)) calc(-1 * var(--gutter)) 0;
  min-height: min(78vh, 760px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: #1A1917;
  color: #F5F2EC;
}
.home-hero.is-empty { min-height: 460px; }
.home-hero-slides { position: absolute; inset: 0; }
.home-hero-slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
.home-hero-slide.is-active { opacity: 1; }

/* El velo se carga a la izquierda y abajo, donde va el texto, y deja la
   derecha de la foto limpia: el mueble es lo que se tiene que ver. */
.home-hero-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(12, 12, 11, .78) 0%, rgba(12, 12, 11, .42) 38%, rgba(12, 12, 11, 0) 68%),
    linear-gradient(0deg, rgba(12, 12, 11, .62) 0%, rgba(12, 12, 11, 0) 42%);
}

.home-hero-text {
  position: relative; z-index: 2;
  padding: 0 clamp(28px, 5vw, 72px) clamp(44px, 7vh, 76px);
  max-width: 640px;
}
.home-hero-eyebrow {
  margin: 0 0 18px;
  font-size: 10px; letter-spacing: .32em; text-transform: uppercase;
  color: rgba(245, 242, 236, .72);
}
.home-hero-title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(64px, 11vw, 132px);
  font-weight: 500; line-height: .9; letter-spacing: .12em;
}
.home-hero-tag {
  margin: 22px 0 14px;
  font-family: var(--serif);
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 400; line-height: 1.12;
  text-wrap: balance;
}
.home-hero-sub {
  margin: 0 0 30px; max-width: 44ch;
  font-size: 15px; line-height: 1.55;
  color: rgba(245, 242, 236, .78);
}
.home-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.home-btn {
  display: inline-flex; align-items: center;
  padding: 13px 26px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  border-radius: 100px;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.home-btn-solid { background: #F5F2EC; color: #15140F; border: 1px solid #F5F2EC; }
.home-btn-solid:hover { background: #FFFFFF; border-color: #FFFFFF; }
.home-btn-line { color: #F5F2EC; border: 1px solid rgba(245, 242, 236, .5); }
.home-btn-line:hover { border-color: #F5F2EC; background: rgba(245, 242, 236, .08); }
.home-btn:focus-visible { outline: 2px solid #F5F2EC; outline-offset: 3px; }

/* Epigrafe de la foto, como en un lookbook: que ambiente y que marcas. */
.home-hero-caption {
  position: absolute; z-index: 2;
  right: clamp(28px, 5vw, 72px); bottom: clamp(44px, 7vh, 76px);
  margin: 0; text-align: right;
  font-family: var(--serif); font-size: 19px; line-height: 1.2;
  color: #F5F2EC;
  text-shadow: 0 1px 18px rgba(0, 0, 0, .45);
}
.home-hero-caption span {
  display: block; margin-bottom: 4px;
  font-family: inherit;
  font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(245, 242, 236, .75);
}
.home-hero-caption em { font-style: normal; color: rgba(245, 242, 236, .7); }
/* El epigrafe se funde con la foto: si cambiara de golpe, se adelantaria
   segundo y medio a la imagen que nombra. */
.home-hero-caption { transition: opacity .45s var(--ease); }
.home-hero-caption.is-changing { opacity: 0; }

.home-hero-dots {
  position: absolute; z-index: 2;
  right: clamp(28px, 5vw, 72px); bottom: clamp(20px, 3.4vh, 34px);
  display: flex; gap: 6px;
}
.home-hero-dot {
  width: 26px; height: 18px; padding: 0; position: relative;
}
.home-hero-dot::before {
  content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px;
  background: rgba(245, 242, 236, .35);
  transition: background .3s var(--ease);
}
.home-hero-dot:hover::before { background: rgba(245, 242, 236, .7); }
.home-hero-dot.is-active::before { background: #F5F2EC; }
.home-hero-dot:focus-visible { outline: 2px solid #F5F2EC; outline-offset: 2px; }

/* ---- secciones ---- */

.home-section { max-width: var(--max); width: 100%; }
.home-section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-bottom: 26px;
}
.home-section-head .eyebrow { margin-bottom: 8px; }
.home-section-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 500; line-height: 1.05; letter-spacing: -0.005em;
  text-wrap: balance;
}
.home-section-link {
  flex: none; padding-bottom: 6px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-2);
  transition: color .2s var(--ease);
}
.home-section-link:hover { color: var(--accent); }

.home-card-cta { font-size: 12px; letter-spacing: .06em; color: var(--ink); white-space: nowrap; }
.home-card-cta i { font-style: normal; display: inline-block; margin-left: 4px; color: var(--accent); }

/* Composicion de piezas: la tarjeta de un ambiente que todavia no tiene
   render. Plato blanco, igual que las fotos de producto, en las tres
   atmosferas: los renders vienen sobre blanco puro. */
.home-vignette {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 3%;
  padding: 9% 7%;
  background: var(--frame);
}
.home-vignette-item { flex: 1; height: 100%; }
/* En la tarjeta grande las piezas quedaban chicas en un plato enorme: menos
   margen lateral para que ocupen el ancho. */
.room-card.is-featured .home-vignette { padding: 7% 4%; gap: 2%; }
.home-vignette-item img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  /* Multiplicar sobre el plato blanco borra el fondo casi-blanco de algunos
     renders de biblioteca, que dibujaba un recuadro gris alrededor de la
     pieza. Sobre blanco puro no cambia nada. */
  mix-blend-mode: multiply;
}

/* ---- marcas ---- */

.brand-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

.brand-card {
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color .35s var(--ease), box-shadow .45s var(--ease);
}
.brand-card:hover { border-color: var(--line); box-shadow: var(--card-lift); }
.brand-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.brand-card-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-2); }
.brand-card-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(12, 12, 11, .74) 0%, rgba(12, 12, 11, .2) 42%, rgba(12, 12, 11, 0) 66%);
}
.brand-card-over {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 24px;
  color: #F5F2EC;
}
.brand-card-principle {
  display: block;
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(245, 242, 236, .78);
}
.brand-card-name {
  margin: 8px 0 0;
  font-family: var(--serif);
  font-size: clamp(38px, 3.6vw, 52px);
  font-weight: 500; line-height: .95; letter-spacing: .02em;
}
.brand-card-body { flex: 1; display: flex; flex-direction: column; gap: 18px; padding: 20px 24px 22px; }
.brand-card-desc { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.brand-card-body .coll-thumbs { margin-top: auto; }
.brand-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 14px; border-top: 1px solid var(--line-soft);
  font-size: 13px; color: var(--ink-2);
}

.coll-thumbs { display: flex; gap: 6px; }
/* La caja de la miniatura: le da el tamano y, sobre todo, el position que
   necesita la capa del fundido para cruzar la foto al cambiar de atmosfera. */
/* Plato blanco (--frame) y no el color de fondo: sobre el beige de Calido el
   render recortado sobre blanco dibujaba un recuadro alrededor de la pieza.
   El blanco va en la caja y la foto se multiplica encima, asi tampoco se ve
   el borde de los renders que vienen con fondo casi-blanco. */
.coll-thumb {
  position: relative; width: 25%; aspect-ratio: 1; display: block;
  background: var(--frame);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.coll-thumbs img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  mix-blend-mode: multiply;
}

/* ---- ambientes ---- */

.room-group + .room-group { margin-top: 44px; }
.room-group-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: 18px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.room-group-head h3 { margin: 0; font-family: var(--serif); font-size: 26px; font-weight: 500; }
.room-group-head span { font-size: 12px; letter-spacing: .06em; color: var(--ink-3); }

/* Una grande y dos apiladas; el grupo siguiente la pone del otro lado. */
.room-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; }
.room-grid.is-mirrored { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
.room-card.is-featured { grid-row: 1 / span 2; }
.room-grid.is-mirrored .room-card.is-featured { grid-column: 2; }
/* Grupo de cuatro: la grande a un lado, dos chicas al lado y la cuarta
   apaisada debajo de esas dos. Con la grilla de tres quedaba sola en una
   fila, con un hueco al costado. */
.room-grid.has-4 { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr); }
.room-grid.has-4.is-mirrored { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.55fr); }
.room-grid.has-4.is-mirrored .room-card.is-featured { grid-column: 3; }
.room-grid.has-4 .room-card:last-child { grid-column: 2 / span 2; }
.room-grid.has-4.is-mirrored .room-card:last-child { grid-column: 1 / span 2; }
.room-grid.has-4 .room-card:last-child .room-card-media { aspect-ratio: 32 / 10; }

.room-card {
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color .35s var(--ease), box-shadow .45s var(--ease);
}
.room-card:hover { border-color: var(--line); box-shadow: var(--card-lift); }
.room-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.room-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-2); }
.room-card.is-featured .room-card-media { aspect-ratio: auto; flex: 1; min-height: 320px; }
.room-card-body {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  padding: 16px 20px 18px;
}
.room-card-meta { display: block; margin-bottom: 4px; font-size: 11px; letter-spacing: .08em; color: var(--ink-3); }
.room-card-name { margin: 0; font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: 1.05; }
.room-card.is-featured .room-card-name { font-size: 32px; }

/* Acercamiento lento de la foto al pasar por encima. Se aplica a la caja y no
   a la imagen: asi la capa del fundido de atmosfera se agranda junto con la
   foto y no queda desfasada si coinciden. Es movimiento: se apaga si el
   sistema pide menos animacion (mas abajo). */
.brand-card .home-media-fill,
.room-card .home-media-fill,
.room-card .home-vignette { transition: transform .9s var(--ease); }
@media (hover: hover) {
  .brand-card:hover .home-media-fill,
  .room-card:hover .home-media-fill,
  .room-card:hover .home-vignette { transform: scale(1.04); }
}

@media (max-width: 1040px) {
  .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .home { gap: 56px; }
  .home-hero { min-height: 560px; }
  /* En celular el texto ocupa todo el ancho, asi que el velo que se carga a la
     izquierda dejaba la mitad derecha del texto sobre la parte clara de la
     foto. Aca sube desde abajo y cubre todo el ancho. */
  .home-hero-veil {
    background: linear-gradient(0deg, rgba(12, 12, 11, .88) 0%, rgba(12, 12, 11, .66) 48%, rgba(12, 12, 11, .12) 85%);
  }
  .home-hero-caption { display: none; }
  .home-hero-dots { left: clamp(28px, 5vw, 72px); right: auto; }
  .home-section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .brand-grid { grid-template-columns: minmax(0, 1fr); }
  .room-grid, .room-grid.is-mirrored { grid-template-columns: minmax(0, 1fr); }
  .room-card.is-featured,
  .room-grid.is-mirrored .room-card.is-featured { grid-row: auto; grid-column: auto; }
  .room-grid.has-4, .room-grid.has-4.is-mirrored { grid-template-columns: minmax(0, 1fr); }
  .room-grid.has-4 .room-card:last-child,
  .room-grid.has-4.is-mirrored .room-card:last-child,
  .room-grid.has-4.is-mirrored .room-card.is-featured { grid-column: auto; }
  .room-grid.has-4 .room-card:last-child .room-card-media { aspect-ratio: 16 / 10; }
  .room-card.is-featured .room-card-media { aspect-ratio: 16 / 10; flex: none; min-height: 0; }
}

/* ---------- product grid ---------- */

.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.filters button {
  font-size: 12px; letter-spacing: 0.04em; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 100px; padding: 6px 14px;
}
.filters button:hover { color: var(--ink); border-color: var(--ink-3); }
.filters button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* El hueco entre cards baja porque ahora cada una trae su propio padding: si
   se dejaba en 22 se sumaban los dos y la grilla quedaba desarmada. */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 10px; }
/* El padding es el aire entre la card levantada y su contenido: sin el, la
   sombra corta al ras del nombre y del boton de abajo, como si el recuadro
   los apretara. */
.prod-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 14px 16px; border-radius: var(--radius-sm);
}
.prod-media {
  /* El marco es el passepartout de la foto: la lamina blanca del render queda
     apoyada sobre el tono de la atmosfera, en vez de ser un bloque suelto.
     En Claro casi no se nota, en Oscuro es lo que evita 37 cuadrados blancos
     flotando sobre grafito. */
  background: var(--frame); border: 1px solid var(--line); border-radius: var(--radius);
  aspect-ratio: 1; display: grid; place-items: center; overflow: hidden;
}
.prod-media img { width: 100%; height: 100%; object-fit: contain; padding: 10%; }

/* La card se levanta al pasar por encima y la foto hace un zoom lento: el
   catalogo deja de ser una grilla quieta. Solo donde hay mouse de verdad —
   en tactil el navegador deja el estado "hover" pegado despues de tocar. */
.prod-card, .prod-media, .prod-media img { transition: none; }
@media (hover: hover) {
  .prod-card {
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
  }
  .prod-media { transition: border-color .35s var(--ease); }
  .prod-media img { transition: transform .7s var(--ease); }
  .prod-card:hover { transform: translateY(-5px); box-shadow: var(--card-lift); }
  .prod-card:hover .prod-media { border-color: var(--ink-3); }
  .prod-card:hover .prod-media img { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  /* Se apaga el movimiento: el levante de la card y el zoom de la foto. El
     fundido de color se deja andando a proposito. */
  .prod-card { transition: none !important; }
  .prod-card:hover { transform: none; }
  .prod-card:hover .prod-media img { transform: none; }
  .brand-card .home-media-fill,
  .room-card .home-media-fill,
  .room-card .home-vignette { transition: none !important; transform: none !important; }
}

/* La capa que cruza la foto del producto al cambiar de atmosfera: nace
   transparente y sube a opaca, y js/app.js la saca cuando el fundido termino.
   Sin esto las fotos saltaban todas juntas en un frame mientras los colores
   tardaban 450ms, y el cambio se sentia brusco. Queda por debajo del corazon
   de "Tu Proyecto", que tiene z-index propio. */
.prod-media img.prod-img-next,
.coll-thumb img.prod-img-next,
.detail-panel-media img.prod-img-next,
.home-media img.prod-img-next {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .35s var(--ease);
}
.prod-media img.prod-img-next.on,
.coll-thumb img.prod-img-next.on,
.detail-panel-media img.prod-img-next.on,
.home-media img.prod-img-next.on { opacity: 1; }
/* En la portada la capa cubre la caja igual que la foto de abajo: recortada si
   es un ambiente, entera sobre el plato si es una pieza. */
.home-media img.prod-img-next { width: 100%; height: 100%; object-fit: cover; }
.home-vignette-item img.prod-img-next { object-fit: contain; }

.prod-name { font-size: 14px; }
.prod-cat { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.prod-swatches { display: flex; gap: 4px; }
.sw { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); flex: none; }

/* Consultar precio por WhatsApp. Discreto en la card: el protagonista sigue
   siendo el mueble y su acabado, no el boton. */
.card-quote, .detail-quote {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 100px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent); text-decoration: none;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.card-actions:empty { display: none; }

/* "Ver en ambiente": mismo tamano que Consultar precio pero en tinta neutra,
   para que el acento quede reservado a la accion comercial. */
.card-space {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 100px;
  border: 1px solid var(--line); background: transparent;
  color: var(--ink-2); text-decoration: none;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap;
  transition: border-color .18s ease, color .18s ease;
}
.card-space svg {
  width: 13px; height: 13px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.card-space:hover, .card-space:focus-visible { border-color: var(--ink); color: var(--ink); outline: none; }
.detail-actions .card-space { padding: 11px 18px; font-size: 11px; }
.card-quote:hover, .card-quote:focus-visible,
.detail-quote:hover, .detail-quote:focus-visible {
  background: var(--accent); color: var(--bg); border-color: var(--accent); outline: none;
}
.card-quote .ico-wa, .detail-quote .ico-wa {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.detail-quote { padding: 11px 18px; font-size: 11px; }

/* ---------- product detail ---------- */

.detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 52px; align-items: start; }
.detail-media {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  aspect-ratio: 1; display: grid; place-items: center; position: relative; overflow: hidden;
}
.detail-media img { width: 100%; height: 100%; object-fit: contain; padding: 7%; }
.pending-tag {
  position: absolute; left: 14px; bottom: 14px;
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--ink); color: var(--bg); padding: 6px 11px; border-radius: 100px;
}

.zone-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.zone-row:first-of-type { border-top: 1px solid var(--line); }
.zone-name { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); width: 84px; flex: none; }
.zone-mat { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.zone-mat .sw { width: 22px; height: 22px; }

.finish-list { display: flex; flex-direction: column; gap: 9px; margin: 24px 0 0; }
.finish-btn {
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 16px; transition: border-color .18s;
}
.finish-btn:hover { border-color: var(--ink-3); }
.finish-btn.on { border-color: var(--ink); }
.finish-stack { display: flex; flex: none; }
.finish-stack .sw { width: 22px; height: 22px; }
.finish-stack .sw + .sw { margin-left: -7px; }
.finish-txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.finish-txt b { font-weight: 500; font-size: 15px; }
.finish-txt small { color: var(--ink-3); font-size: 12px; }
.finish-btn .dup { margin-left: auto; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); flex: none; }

.spec { margin-top: 30px; }
.spec dl { display: grid; grid-template-columns: 110px 1fr; margin: 0; font-size: 14px; }
.spec dt { color: var(--ink-3); padding: 10px 0; border-top: 1px solid var(--line); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.spec dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--line); }
.spec dd.todo { color: var(--ink-3); font-style: italic; }

/* ---------- materials ---------- */

.mat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.mat-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.mat-chip { height: 100px; }
.mat-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.mat-body .fam { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.mat-body h3 { margin: 0; font-size: 18px; font-weight: 500; }
.mat-body p { margin: 0; font-size: 14px; color: var(--ink-2); }
.mat-note { font-size: 13px; color: var(--ink-2); border-left: 2px solid var(--line); padding-left: 11px; margin-top: 4px; }

.matrix { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.matrix th, .matrix td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.matrix th { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; }
.matrix .cell { display: flex; align-items: center; gap: 9px; }
.wrap-x { overflow-x: auto; }

/* ---------- production ---------- */

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 36px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.stat .n { font-size: 32px; font-weight: 400; letter-spacing: -0.02em; line-height: 1; }
.stat .l { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; }

.note {
  background: var(--panel); border: 1px solid var(--line); border-left: 2px solid var(--ink-3);
  border-radius: var(--radius); padding: 18px 20px; font-size: 14px; color: var(--ink-2); margin: 26px 0;
}
.note b { color: var(--ink); font-weight: 500; }

.brief-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.brief-table th, .brief-table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); }
.brief-table th { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; }
.brief-table tbody tr:hover { background: var(--bg-2); }
.brief-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.pill { display: inline-block; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--line); border-radius: 100px; padding: 3px 9px; color: var(--ink-2); }

/* =========================================================================
   RESPONSIVE
   ====================================================================== */

@media (max-width: 900px) {
  .detail { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 860px) {
  :root { --topbar-h: 64px; --gutter: 20px; --panel-top: 30px; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; width: 280px;
    transform: translateX(-100%);
    transition: transform .4s var(--ease);
  }
  .sidebar.open { transform: none; box-shadow: 30px 0 80px -20px rgba(0,0,0,.35); }
  .hamburger { display: flex; }
  .topbar-h1 { font-size: 17px; }
  .atmo-label { display: none; }
  .panel { padding: var(--panel-top) var(--gutter) 60px; }
}

@media (max-width: 560px) {
  .atmo-btns button span.txt { display: none; }
  .atmo-btns button { padding: 8px 11px; }
  .prod-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; }
  .spec dl { grid-template-columns: 96px 1fr; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================
   PRODUCTOS — filtros laterales (drawer en mobile), mismo patron que LUXA
   ====================================================================== */

.products-layout { display: grid; grid-template-columns: 210px 1fr; gap: 36px; align-items: start; }

.filters-side { position: sticky; top: 0; display: flex; flex-direction: column; gap: 22px; }
.filter-drawer-close { display: none; }

.filter-group { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.filter-group-title {
  padding: 0 0 8px; margin: 0; width: 100%;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); border-bottom: 1px solid var(--line);
}
.filter-check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--ink-2); }
.filter-check:hover { color: var(--ink); }
.filter-check input { accent-color: var(--ink); width: 15px; height: 15px; flex: none; cursor: pointer; }
.filter-check-count { margin-left: auto; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.filter-clear {
  font-size: 12px; letter-spacing: 0.03em; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 100px; padding: 7px 14px; width: fit-content;
}
.filter-clear:hover { color: var(--ink); border-color: var(--ink-3); }

.products-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.products-count { font-size: 13px; color: var(--ink-3); letter-spacing: 0.04em; }
.filters-toggle { display: none; align-items: center; gap: 9px; font-size: 13px; border: 1px solid var(--line); border-radius: 100px; padding: 8px 15px; }
.filters-toggle-count { min-width: 19px; padding: 1px 6px; border-radius: 100px; background: var(--ink); color: var(--bg); font-size: 10px; font-weight: 600; }
.filters-toggle-count[hidden] { display: none; }

.empty-inline { padding: 50px 0; color: var(--ink-3); font-size: 15px; }

/* =========================================================================
   FAVORITOS / TU PROYECTO
   ====================================================================== */

.prod-media { position: relative; }
.fav-btn {
  position: absolute; top: 9px; right: 9px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--ink-3); opacity: 0; transition: opacity .18s, color .18s, border-color .18s;
}
.prod-card:hover .fav-btn, .fav-btn.on { opacity: 1; }
.fav-btn svg { width: 16px; height: 16px; }
.fav-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.fav-btn.on { color: var(--accent); border-color: var(--accent); }
.fav-btn.on svg { fill: var(--accent); }
@media (hover: none) { .fav-btn { opacity: 1; } }

.project-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-bottom: 22px; margin-bottom: 30px; border-bottom: 1px solid var(--line);
}
.project-title-input {
  flex: 1; min-width: 220px;
  font: inherit; font-size: 19px; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: 8px 2px;
}
.project-title-input:focus { outline: none; border-bottom-color: var(--ink); }
.project-title-input::placeholder { color: var(--ink-3); }

/* Cierre comercial de Tu Proyecto: mandar la selección o bajarla en PDF. */
.project-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin: 4px 0 30px;
}
.project-actions .btn { display: inline-flex; align-items: center; gap: 9px; }
.project-actions .ico-wa,
.project-actions .ico-pdf {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; letter-spacing: 0.03em;
  border: 1px solid var(--line); border-radius: 100px; padding: 9px 17px; color: var(--ink-2);
}
.btn:hover { color: var(--ink); border-color: var(--ink-3); }
.btn-solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-solid:hover { color: var(--bg); opacity: .88; }

/* =========================================================================
   ESTADOS VACIOS
   ====================================================================== */

.empty {
  max-width: 520px; margin: 40px auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.empty-ico {
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--ink-3);
}
.empty-ico svg { width: 24px; height: 24px; }
.empty h2 { margin: 0; font-size: 21px; font-weight: 500; }
.empty p { margin: 0; color: var(--ink-2); font-size: 15px; }
.empty .btn { margin-top: 8px; }

.roadmap { text-align: left; width: 100%; margin-top: 26px; border-top: 1px solid var(--line); padding-top: 22px; }
.roadmap h3 { margin: 0 0 12px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; }
.roadmap ol { margin: 0; padding-left: 20px; color: var(--ink-2); font-size: 14px; display: flex; flex-direction: column; gap: 7px; }

/* =========================================================================
   FICHA DE PRODUCTO — panel deslizante desde la izquierda
   ====================================================================== */

.detail-overlay { position: fixed; inset: 0; z-index: 80; }
.detail-overlay[hidden] { display: none; }

.detail-backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 20, 18, .45);
  backdrop-filter: blur(3px);
  animation: detailFade .35s var(--ease);
}
@keyframes detailFade { from { opacity: 0; } to { opacity: 1; } }

.detail-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(560px, 100%);
  background: var(--bg);
  border-left: 1px solid var(--line);
  overflow-y: auto;
  animation: detailSlide .42s var(--ease);
  box-shadow: -40px 0 90px -30px rgba(0, 0, 0, .35);
}
@keyframes detailSlide { from { transform: translateX(100%); } to { transform: none; } }

.detail-close {
  position: absolute; top: 16px; right: 16px; z-index: 5;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg-2);
  color: var(--ink-2); font-size: 22px; line-height: 1;
  transition: color .25s var(--ease), border-color .25s var(--ease), transform .3s var(--ease);
}
.detail-close:hover { color: var(--ink); border-color: var(--ink-3); transform: rotate(90deg); }

.detail-panel-media {
  position: relative; overflow: hidden;
  aspect-ratio: 1; background: var(--frame);
  border-bottom: 1px solid var(--line);
  display: grid; place-items: center;
}
.detail-panel-media img { width: 100%; height: 100%; object-fit: contain; padding: 9%; }
/* Ambiente y detalle son renders apaisados: en la caja cuadrada del
   catalogo se perdia casi la mitad del ancho. La caja toma la forma del
   render mientras se lo mira y vuelve a cuadrada en catalogo. */
.detail-panel-media.is-wide { aspect-ratio: 1800 / 1005; }
/* El cambio de forma se anima por altura (la pone js/app.js un momento). */
.detail-panel-media.is-resizing { transition: height .45s var(--ease); }
/* Ambiente y detalle van a sangre; el catalogo, entero con aire alrededor. */
.detail-panel-media img.is-scene { object-fit: cover; padding: 0; }
/* La capa que entra lleva el plato blanco: si no, al pasar de un ambiente a
   la foto de catalogo, el ambiente se veia por el aire alrededor del mueble. */
.detail-panel-media img.prod-img-next:not(.is-scene) { background: var(--frame); }

/* Galeria: miniaturas sobre la foto, abajo a la derecha, como en LUXA. */
.detail-thumbs {
  position: absolute; z-index: 2; right: 14px; bottom: 14px;
  display: flex; gap: 6px;
}
.detail-thumbs button {
  position: relative; width: 58px; height: 58px; padding: 0;
  border-radius: 6px; overflow: hidden; cursor: pointer;
  background: #121210; border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .55);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.detail-thumbs button:hover { border-color: #fff; }
.detail-thumbs button.on { border-color: #fff; box-shadow: 0 0 0 2px #1A1917, 0 6px 16px -8px rgba(0, 0, 0, .55); }
.detail-panel-media .detail-thumbs img {
  width: 100%; height: 100%; object-fit: cover; padding: 0; display: block;
}
.detail-thumbs button span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 0;
  font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; text-align: center;
  color: #fff; background: rgba(18, 18, 16, .66);
}
.detail-context {
  position: absolute; z-index: 2; left: 14px; bottom: 14px; margin: 0;
  max-width: calc(100% - 230px);
  padding: 6px 12px; border-radius: 100px;
  font-size: 11px; color: rgba(255, 255, 255, .8);
  background: rgba(18, 18, 16, .58); border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.detail-context[hidden] { display: none; }
.detail-context strong { color: #fff; font-weight: 500; }

.detail-panel-body > .inner { padding: 28px 32px 44px; }
.detail-panel-body h2 { font-size: 26px; font-weight: 400; letter-spacing: -0.01em; margin: 0 0 6px; }
.detail-panel-body .desc { color: var(--ink-2); font-size: 15px; margin: 18px 0 0; }

@media (max-width: 560px) {
  .detail-panel-body > .inner { padding: 22px 20px 40px; }
  .detail-panel-body h2 { font-size: 22px; }
}

/* =========================================================================
   AMBIENTES
   ====================================================================== */

.space-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
/* En monitores anchos el ancho extra se usa para agrandar las fotos, no para
   sumar una quinta columna de tarjetas chicas: el ambiente es la foto. */
@media (min-width: 1600px) {
  .space-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
}
.space-card { display: flex; flex-direction: column; gap: 10px; }
.space-media {
  position: relative; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--panel);
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  transition: border-color .18s;
}
.space-card:hover .space-media { border-color: var(--ink-3); }
.space-media img { width: 100%; height: 100%; object-fit: cover; }
.space-pending { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.space-name { font-size: 15px; }
.space-room { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }

.scene-stage {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--panel); display: grid; place-items: center; min-height: 240px;
}
.scene-stage img { width: 100%; display: block; }
/* La imagen de la atmosfera entrante se apila encima y aparece con un fundido:
   la escena nunca queda vacia entre una variante y la otra. */
.scene-stage img.stage-next {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .3s var(--ease);
}
.scene-stage img.stage-next.on { opacity: 1; }
/* El cruce de la foto del ambiente tampoco se apaga: es un fundido, no un
   movimiento, y sin el vuelve el frame en blanco entre atmosfera y atmosfera. */
.scene-dot {
  /* Por encima del switch de colores: si un hotspot cae justo abajo en la
     foto, sigue estando a la vista y se puede tocar igual. */
  position: absolute; z-index: 3;
  width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  background: rgba(255,255,255,.9); box-shadow: 0 0 0 6px rgba(255,255,255,.28);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.scene-dot::after {
  /* Color fijo: el punto vive sobre la foto, no sobre el papel de la app. Con
     el color de la tipografia se volvia blanco sobre blanco en la atmosfera
     Oscuro y el punto desaparecia. */
  content: ''; position: absolute; inset: 9px; border-radius: 50%; background: #1A1917;
}
.scene-dot:hover { transform: scale(1.15); box-shadow: 0 0 0 10px rgba(255,255,255,.34); }

/* Switch de colores sobre la propia foto del ambiente. Colores fijos, no los
   de la paleta: vive sobre el render y tiene que leerse igual de bien sobre
   una escena clara que sobre una oscura. */
.scene-atmo {
  position: absolute; z-index: 2; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px; max-width: calc(100% - 28px);
  padding: 4px 4px 4px 14px; border-radius: 100px;
  background: rgba(18, 18, 16, .58);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}
.scene-atmo-label {
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62); margin-right: 8px; white-space: nowrap;
}
.scene-atmo button {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 7px 13px; border-radius: 100px;
  font-size: 11px; letter-spacing: 0.04em; color: rgba(255, 255, 255, .72);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.scene-atmo button:hover { color: #fff; }
.scene-atmo button.on { background: rgba(255, 255, 255, .94); color: #16150F; }
.scene-atmo button:focus-visible { outline: 2px solid rgba(255,255,255,.8); outline-offset: 1px; }
.scene-atmo .atmo-dot { box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.3); }

/* Close-up de una pieza adentro del ambiente. Tapa la foto y los puntos, pero
   deja el switch de colores arriba de todo: es donde mas sirve. El fundido
   no se apaga con "menos animacion", igual que el del ambiente. */
.scene-closeup {
  position: absolute; inset: 0; z-index: 4;
  background: #121210;
  opacity: 0; transition: opacity .45s var(--ease) !important;
}
.scene-closeup.on { opacity: 1; }
.scene-closeup.instant { transition: none !important; }
.scene-closeup img.closeup-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scene-stage.has-closeup .scene-atmo { z-index: 6; }
.closeup-video {
  position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .25s var(--ease) !important;
}
.closeup-video.on { opacity: 1; }

/* "Volver al ambiente": flecha sola, arriba a la derecha. */
.closeup-close {
  position: absolute; z-index: 2; top: 14px; right: 14px;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(18, 18, 16, .58); border: 1px solid rgba(255, 255, 255, .16); color: #fff;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: background-color .2s var(--ease);
}
.closeup-close:hover { background: rgba(18, 18, 16, .8); }
.closeup-close svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Tarjeta de la pieza: arriba a la izquierda, lejos del switch de abajo. */
.closeup-card {
  position: absolute; z-index: 2; top: 14px; left: 14px; max-width: min(320px, calc(100% - 80px));
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; border-radius: var(--radius);
  background: rgba(18, 18, 16, .58); border: 1px solid rgba(255, 255, 255, .16); color: #fff;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
  backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%);
}
.closeup-brand { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.closeup-name { font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.2; }
.closeup-finish { display: flex; align-items: center; gap: 5px; font-size: 11px; color: rgba(255, 255, 255, .72); margin-top: 2px; }
.closeup-finish > span:last-child { margin-left: 4px; }
.closeup-finish .sw { box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); }
.closeup-more {
  align-self: flex-start; margin-top: 8px; padding: 7px 14px; border-radius: 100px;
  font-size: 11px; letter-spacing: 0.04em; text-decoration: none;
  background: rgba(255, 255, 255, .94); color: #16150F;
}
.closeup-more:hover { background: #fff; }

/* En pantallas chicas la etiqueta sobra: los puntos de color ya dicen que es. */
@media (max-width: 620px) {
  .closeup-card { top: 10px; left: 10px; padding: 10px 12px; }
  .closeup-name { font-size: 16px; }
  .closeup-finish > span:last-child { display: none; }
  .closeup-close { top: 10px; right: 10px; }
  .scene-atmo { bottom: 12px; padding-left: 4px; gap: 0; }
  .scene-atmo-label { display: none; }
  /* Un poco mas de alto en celular: es donde se toca con el dedo. */
  .scene-atmo button { padding: 10px 11px; font-size: 10px; gap: 6px; }
}

/* =========================================================================
   ACERCA
   ====================================================================== */

.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 26px; }
.about-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; display: flex; flex-direction: column; gap: 10px; transition: border-color .18s;
}
a.about-card:hover { border-color: var(--ink-3); }
.about-card .k { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.about-card h3 { margin: 0; font-size: 18px; font-weight: 500; }
.about-card p { margin: 0; font-size: 14px; color: var(--ink-2); }

/* =========================================================================
   RESPONSIVE de lo nuevo
   ====================================================================== */

@media (max-width: 860px) {
  .products-layout { grid-template-columns: 1fr; gap: 0; }
  .filters-toggle { display: inline-flex; }
  .filters-side {
    position: fixed; top: 0; right: 0; bottom: 0; width: 290px; z-index: 70;
    background: var(--bg-2); border-left: 1px solid var(--line);
    padding: 56px 22px 26px; overflow-y: auto;
    transform: translateX(100%); transition: transform .35s var(--ease);
  }
  .filters-side.open { transform: none; box-shadow: -30px 0 80px -20px rgba(0,0,0,.35); }
  .filter-drawer-close {
    display: grid; place-items: center;
    position: absolute; top: 14px; right: 14px;
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--line); color: var(--ink-2); font-size: 19px; line-height: 1;
  }
}