/* ==========================================================================
   JMI x VELVET — Sistema de diseño
   Basado en la identidad real de tiendademuebles.com.ar (dark warm + Poppins)
   ========================================================================== */

:root {
  /* Paleta — cuerpo del sitio en blanco, con "islas" oscuras (header, footer,
     hero, portadas de categoría, tiles, mega-menú, lightbox) que se redefinen
     más abajo. Los mismos nombres de variable valen para los dos mundos:
     lo que cambia es SU VALOR según el contenedor, no el CSS de cada componente. */
  --bg:        #FFFFFF;
  --bg-2:      #F5F4F2;
  --panel:     #F1EFEC;
  --panel-2:   #E9E5E0;
  --line:      rgba(20, 17, 15, .10);
  --line-2:    rgba(20, 17, 15, .20);
  --txt:       #56514C;
  --txt-dim:   #8D8883;
  --white:     #1A1714;   /* "ink": color de titulares/texto fuerte sobre el fondo claro */
  /* Colores de marca JMI (manual de marca) */
  --azul:      #5B5EA6;   /* azul violáceo — isotipo */
  --azul-lt:   #9294D8;   /* versión clara, solo para uso sobre fondo oscuro */
  --accent:    var(--azul);   /* acento "de zona": azul sobre blanco, azul-lt sobre oscuro */
  --bordo:     #A93B4E;   /* rojo/bordó — sonrisa del isotipo */
  --bordo-lt:  #C9556A;
  --ink:       #26262b;   /* negro de marca */
  --azul-soft: rgba(91, 94, 166, .10);
  --wa:        #4DC247;   /* verde WhatsApp */
  --wa-dark:   #3AA636;

  --ff: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escala tipográfica */
  --fs-hero:  clamp(2.6rem, 7.2vw, 6.2rem);
  --fs-h2:    clamp(1.7rem, 3.4vw, 3rem);
  --fs-h3:    clamp(1.15rem, 1.7vw, 1.5rem);
  --fs-body:  .95rem;
  --fs-sm:    .8rem;
  --fs-xs:    .69rem;

  /* Ritmo */
  --pad-x:    clamp(1.15rem, 5vw, 5.5rem);
  --sec-y:    clamp(3.6rem, 7vw, 6.4rem);   /* UN solo aire entre secciones, en todo el sitio */
  --maxw:     1560px;

  --ease:         cubic-bezier(.22, .61, .36, 1);
  --ease-out:     cubic-bezier(.16, 1, .3, 1);
  --ease-in-out:  cubic-bezier(.77, 0, .175, 1);   /* morphing/movimiento en pantalla (carrusel, tilt) */

  --header-h: 104px;
}

/* ==========================================================================
   "ISLAS OSCURAS" — header, footer, hero, portada de categoría, tiles,
   mega-menú y lightbox siguen siendo oscuros aunque el resto del sitio
   ahora es blanco. Cada uno redefine las MISMAS variables de arriba: todo
   el CSS de componentes (tarjetas, botones, texto) queda intacto y se
   reacomoda solo, sin duplicar reglas por tema.
   ========================================================================== */
.site-header, .site-footer, .search-overlay, .wa-float,
.hero, .cover, .tile, .megamenu, .lightbox {
  --bg:        #0A0809;
  --bg-2:      #100E0F;
  --panel:     #1A1817;
  --panel-2:   #221F1E;
  --line:      rgba(191, 186, 186, .13);
  --line-2:    rgba(191, 186, 186, .26);
  --txt:       #BFBABA;
  --txt-dim:   #857F7E;
  --white:     #FFFFFF;
  --accent:    var(--azul-lt);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--ff);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.65;
  color: var(--txt);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; }
button { cursor: pointer; }
ul, ol { list-style: none; }

h1, h2, h3, h4 { font-weight: 300; line-height: 1.1; color: var(--white); letter-spacing: -.015em; }

::selection { background: var(--azul); color: #fff; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Scrollbar */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #302c2b; border-radius: 9px; }
::-webkit-scrollbar-thumb:hover { background: #45403e; }

/* ---------- Utilidades ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }
.section { padding-block: var(--sec-y); }
/* Dos secciones seguidas no suman sus paddings: el espacio entre bloques es
   siempre el mismo (--sec-y), sin importar qué haya en cada uno. */
.section + .section { padding-top: 0; }
.section.is-first { padding-top: clamp(.6rem, 1.6vw, 1.4rem); }

.eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--txt-dim);
  font-weight: 400;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 3.4rem);
}
.section-head h2 { font-size: var(--fs-h2); }
.section-head .eyebrow { display: block; margin-bottom: .9rem; }
.section-head p { max-width: 46ch; color: var(--txt-dim); font-size: var(--fs-sm); margin-top: .7rem; }

.link-more {
  font-size: var(--fs-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--white);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: .4rem;
  transition: border-color .35s var(--ease), color .35s var(--ease);
  white-space: nowrap;
}
.link-more:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Reveal (animación de entrada) ---------- */
.reveal { transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js-anim .reveal { opacity: 0; transform: translateY(26px); }
.js-anim .reveal.is-visible { opacity: 1; transform: none; }
/* Defensa obligatoria: un elemento con reveal + data-split nunca debe quedar invisible */
.js-anim .reveal[data-split] { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }

/* ==========================================================================
   BARRA PROMO + HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.header-in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--pad-x);
  height: 104px;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
}

/* Logo */
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { width: auto; height: 46px; transition: transform .4s var(--ease-out); }
.logo:hover img { transform: scale(1.04); }

/* Versión grande para el header */
.logo.is-lg img { height: 78px; }

/* Nav */
.nav { display: flex; gap: clamp(1rem, 2vw, 2.1rem); margin-left: auto; }
.nav a {
  font-size: var(--fs-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--txt);
  padding: .5rem 0;
  position: relative;
  transition: color .3s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width .4s var(--ease-out);
}
.nav a:hover, .nav a.is-active { color: var(--white); }
.nav a:hover::after, .nav a.is-active::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: .5rem; margin-left: clamp(.6rem, 2vw, 1.6rem); }
.icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  color: var(--txt);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.icon-btn:hover { border-color: var(--line-2); color: var(--white); }
.icon-btn svg { width: 17px; height: 17px; }

.btn-wa-header {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .6rem 1.1rem;
  border: 1px solid var(--line-2);
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: border-color .3s var(--ease), background .3s var(--ease);
  white-space: nowrap;
}
.btn-wa-header:hover { border-color: var(--wa); background: rgba(77, 194, 71, .1); }
.btn-wa-header svg { width: 15px; height: 15px; color: var(--wa); flex-shrink: 0; }

.burger { display: none; }

/* ==========================================================================
   BOTONES
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .92rem 2rem;
  font-size: var(--fs-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 400;
  border: 1px solid transparent;
  transition: all .38s var(--ease);
  cursor: pointer;
}
.btn-primary { background: var(--white); color: var(--bg); }
.btn-primary:hover { background: var(--azul); color: #fff; }
.btn-ghost { border-color: var(--line-2); color: var(--white); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-wa { background: var(--wa); color: #06240A; font-weight: 500; }
.btn-wa:hover { background: #5ed456; }
.btn svg { width: 16px; height: 16px; }

/* ==========================================================================
   HERO — carrusel de dos escenas, título centrado sobre foto a pantalla
   completa (formato editorial: la foto es el mensaje, el texto es breve)
   ========================================================================== */
.hero {
  position: relative;
  min-height: 560px;
  height: 92vh;
  max-height: 880px;
  overflow: hidden;
}
.hero-slide {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 1.15s var(--ease);
  pointer-events: none;
}
.hero-slide.is-active { opacity: 1; z-index: 1; pointer-events: auto; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  will-change: transform;
}
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,8,9,.32) 0%, rgba(10,8,9,.22) 40%, rgba(10,8,9,.62) 100%);
}
.hero-in {
  position: relative; z-index: 2;
  max-width: 64rem;
  margin-inline: auto;
  padding: 0 var(--pad-x);
  text-align: center;
}
.hero h1 {
  font-size: var(--fs-hero);
  font-weight: 200;
  letter-spacing: -.02em;
  margin: 1.3rem 0 2.1rem;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .eyebrow { color: rgba(255, 255, 255, .82); }
.hero .btn { margin-inline: auto; }

.hero-dots {
  position: absolute; z-index: 3;
  left: 50%; bottom: clamp(1.6rem, 4vw, 2.8rem);
  transform: translateX(-50%);
  display: flex; gap: .6rem;
}
.hero-dots button {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.4);
  transition: all .35s var(--ease);
}
.hero-dots button.is-on { background: #fff; width: 24px; border-radius: 4px; }

.hero-scroll {
  position: absolute; z-index: 3;
  right: clamp(1rem, 3vw, 2.2rem); bottom: clamp(5.6rem, 10vw, 7.2rem);
  writing-mode: vertical-rl;
  font-size: .62rem; letter-spacing: .32em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
  display: flex; align-items: center; gap: .7rem;
}
.hero-scroll::after { content: ""; width: 1px; height: 34px; background: rgba(255,255,255,.4); animation: scrollLine 2.2s var(--ease-in-out) infinite; }
@keyframes scrollLine { 0%, 100% { transform: scaleY(.4); opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .hero-scroll::after { animation: none; }
}

/* ==========================================================================
   BENEFICIOS (franja con divisores — firma visual de JMI)
   ========================================================================== */
.benefits {
  border-block: 1px solid var(--line);
  background: var(--bg-2);
}
.benefits-in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.benefit {
  display: flex; align-items: center; gap: 1rem;
  padding: 2.1rem 1.6rem;
  position: relative;
}
.benefit + .benefit::before {
  content: "";
  position: absolute; left: 0; top: 22%;
  width: 1px; height: 56%;
  background: var(--line);
}
.benefit svg { width: 27px; height: 27px; color: var(--white); flex-shrink: 0; stroke-width: 1.1; }
.benefit b {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--white);
  font-weight: 500;
  margin-bottom: .2rem;
}
.benefit span { font-size: var(--fs-sm); color: var(--txt-dim); line-height: 1.45; }

/* Garantías de "Nosotros": 4 columnas en escritorio, en columna en celular
   (antes iban con estilos en línea que pisaban la regla responsive y ensanchaban la página). */
.benefits-in.is-quad { padding: 0; }
.benefits-in.is-quad .benefit:first-child { padding-left: 0; }
.benefits-in.is-quad .benefit b { font-size: 1.9rem; letter-spacing: 0; color: var(--accent); }
@media (min-width: 901px) { .benefits-in.is-quad { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) {
  .benefits-in.is-quad .benefit { padding-inline: 0; }
  .benefits-in.is-quad .benefit + .benefit::before { left: 0; right: 0; }
}

/* ==========================================================================
   FRANJA DE BADGES CIRCULARES — firma visual de JMI
   Círculo blanco con ícono + texto bold en mayúsculas, separados por barra diagonal
   ========================================================================== */
.badges {
  border-block: 1px solid var(--line);
  background: var(--bg-2);
  overflow: hidden;
}
.badges-in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(2.2rem, 4vw, 3.4rem) var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.4rem, 3.4vw, 3.6rem);
}
.badge-item { display: flex; align-items: center; gap: clamp(.9rem, 1.6vw, 1.5rem); }
.badge-ring {
  width: clamp(58px, 6.4vw, 88px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ink);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.badge-ring svg { width: 46%; height: 46%; color: #fff; stroke-width: 1.4; }
.badge-item b {
  font-size: clamp(.95rem, 1.55vw, 1.6rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: .01em;
  color: var(--white);
  text-transform: uppercase;
  display: block;
}
.badge-sep {
  width: 2px;
  height: clamp(48px, 5.4vw, 76px);
  background: var(--line-2);
  transform: skewX(-18deg);
  flex-shrink: 0;
}

/* ==========================================================================
   BLOQUES DE CATEGORÍA A SANGRE — dos columnas, como Hogar/Oficina de JMI
   ========================================================================== */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.tile {
  position: relative;
  min-height: clamp(320px, 42vw, 560px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--panel);
}
.tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.3s var(--ease-out);
}
.tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,8,9,.9) 0%, rgba(10,8,9,.34) 46%, rgba(10,8,9,.12) 100%);
  transition: background .5s var(--ease);
}
.tile:hover img { transform: scale(1.045); }
.tile-in {
  position: relative; z-index: 2;
  padding: clamp(1.6rem, 3.4vw, 3.2rem);
  width: 100%;
}
.tile-in h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.6rem);
  font-weight: 300;
  margin-bottom: .5rem;
}
.tile-in p { color: var(--txt); font-size: var(--fs-sm); max-width: 34ch; margin-bottom: 1.3rem; }
.tile-cta {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--fs-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--white);
  border: 1px solid rgba(255,255,255,.42);
  padding: .82rem 1.5rem;
  transition: all .35s var(--ease);
}
.tile:hover .tile-cta { background: var(--white); color: var(--ink); border-color: var(--white); }

@media (max-width: 860px) {
  .badges-in { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .badge-sep { display: none; }
  .badge-item { width: 100%; }
  .tiles { grid-template-columns: 1fr; }
}

/* ==========================================================================
   TARJETA DE PRODUCTO
   ========================================================================== */
.grid-prod {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: clamp(1.4rem, 2.6vw, 2.6rem) clamp(1rem, 1.8vw, 1.8rem);
}

.card { position: relative; display: block; }
.card-media {
  position: relative;
  aspect-ratio: 4 / 3.1;
  border-radius: 2px;
  overflow: hidden;
  background: var(--panel);
  margin-bottom: 1.05rem;
}
.card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out), opacity .5s var(--ease);
}
.card-media img.card-alt {
  position: absolute; inset: 0;
  opacity: 0;
}
.card:hover .card-media img.card-main { opacity: 0; }
.card:hover .card-media img.card-alt { opacity: 1; }
.card:hover .card-media img { transform: scale(1.05); }

/* Fotos sobre fondo blanco de estudio (mesas, y fotos de fábrica sin recortar):
   se muestran COMPLETAS, sin recortar nunca — el sobrante queda como placa clara
   a juego, en vez de forzar un recorte que puede tapar el producto. */
.card-media.is-light { background: #FFFFFF; }
.card-media.is-light img { object-fit: contain; padding: .5rem; mix-blend-mode: multiply; }
.gallery-main.is-light { background: #FFFFFF; }
.gallery-main.is-light img { object-fit: contain; padding: clamp(1rem, 3vw, 2.4rem); mix-blend-mode: multiply; }
.gallery-thumbs.is-light button { background: #FFFFFF; }
.gallery-thumbs.is-light button img { object-fit: contain; padding: .3rem; mix-blend-mode: multiply; }

.badge {
  position: absolute; top: .8rem; left: .8rem;
  z-index: 2;
  background: var(--bordo);
  color: #fff;
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  padding: .3rem .62rem;
}
.badge-alt { background: var(--white); }

.card-name {
  font-size: var(--fs-body);
  color: var(--white);
  font-weight: 300;
  margin-bottom: .34rem;
  transition: color .3s var(--ease);
  line-height: 1.35;
}
.card:hover .card-name { color: var(--accent); }
.card-meta {
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-dim);
  margin-bottom: .55rem;
}
.card-price { font-size: 1.06rem; color: var(--white); font-weight: 400; letter-spacing: -.01em; }
.card-cuotas { font-size: var(--fs-xs); color: var(--accent); margin-top: .18rem; letter-spacing: .04em; }

.card-swatches { display: flex; gap: .3rem; margin-top: .7rem; }
.card-swatches i {
  width: 15px; height: 15px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line-2);
}
.card-swatches b {
  font-size: var(--fs-xs);
  color: var(--txt-dim);
  font-weight: 300;
  align-self: center;
  margin-left: .15rem;
}

/* ==========================================================================
   CARRUSEL
   ========================================================================== */
.carousel-wrap { position: relative; }
.carousel {
  display: grid;
  grid-auto-flow: column;
  /* fluido: ~3 tarjetas grandes en desktop, 1.2 en mobile. Sin depender de breakpoints. */
  grid-auto-columns: clamp(262px, 29vw, 430px);
  gap: clamp(1rem, 1.8vw, 1.8rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: .6rem;
  scrollbar-width: none;
  cursor: grab;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { scroll-snap-align: start; }


.car-nav { display: flex; gap: .5rem; }
.car-nav button {
  width: 54px; height: 54px;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--txt);
  transition: all .3s var(--ease);
}
.car-nav button:hover { border-color: var(--accent); color: var(--accent); }
.car-nav button:disabled { opacity: .28; cursor: default; }
.car-nav svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.car-nav button:hover svg { transform: translateX(0); }
.car-nav button[data-dir="1"]:hover svg { transform: translateX(3px); }
.car-nav button[data-dir="-1"]:hover svg { transform: translateX(-3px); }

/* ==========================================================================
   BLOQUES EDITORIALES DE CATEGORÍA
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
}
.split.is-rev .split-txt { order: 2; }
.split-media {
  position: relative;
  aspect-ratio: 4 / 3.2;
  overflow: hidden;
  background: var(--panel);
}
.split-media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
/* Bloque de mesas: el packshot vive sobre una placa clara (el fondo va en el contenedor,
   si se pone en la imagen el mix-blend se mezcla con el panel oscuro y desaparece) */
.split-media.is-light { background: #FFFFFF; }
.split-media.is-light img { object-fit: contain; padding: clamp(1.4rem, 3vw, 3rem); mix-blend-mode: multiply; }
.split-txt h2 { font-size: var(--fs-h2); margin: 1rem 0 1.2rem; }
.split-txt h2 em { font-style: normal; color: var(--accent); }
.split-txt p { color: var(--txt-dim); max-width: 44ch; margin-bottom: 1.4rem; font-size: var(--fs-sm); }
.split-stats { display: flex; gap: 2.4rem; margin: 1.8rem 0 2rem; }
.split-stats div b { display: block; font-size: 1.7rem; color: var(--white); font-weight: 200; line-height: 1; }
.split-stats div span { font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--txt-dim); }

/* ==========================================================================
   CATÁLOGO — filtros + resultados
   ========================================================================== */
.page-head { padding-block: clamp(1.1rem, 2.2vw, 1.5rem); }
.crumbs { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--txt-dim); }
.crumbs a:hover { color: var(--accent); }
.crumbs span:not(.crumbs-sep) { color: var(--white); }
.crumbs-sep { margin: 0 .55em; opacity: .45; }
.page-head h1 { font-size: var(--fs-h2); font-weight: 200; margin-top: 1.1rem; }
.page-head .count { font-size: var(--fs-sm); color: var(--txt-dim); margin-top: .5rem; }
/* Páginas sin portada con foto (Nosotros, Contacto): el título hace de hero,
   necesita más aire arriba y abajo que un simple breadcrumb de catálogo. */
.page-head.is-hero { padding-block: clamp(2.6rem, 6vw, 4.6rem) clamp(1.6rem, 3vw, 2.4rem); }

.cat-layout {
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: clamp(1.6rem, 3.4vw, 3.6rem);
  align-items: start;
  padding-block: clamp(2rem, 4vw, 3.4rem);
}

.filters { position: sticky; top: calc(104px + 1.4rem); }
.filters-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 1rem; margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}
.filters-head b { font-size: var(--fs-xs); letter-spacing: .24em; text-transform: uppercase; color: var(--white); font-weight: 500; }
.filters-clear { font-size: var(--fs-xs); color: var(--txt-dim); text-decoration: underline; text-underline-offset: 3px; }
.filters-clear:hover { color: var(--accent); }

.fgroup { border-bottom: 1px solid var(--line); }
.fgroup > summary {
  list-style: none;
  cursor: pointer;
  padding: 1.05rem 0;
  font-size: var(--fs-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--txt);
  display: flex; align-items: center; justify-content: space-between;
  transition: color .3s var(--ease);
}
.fgroup > summary::-webkit-details-marker { display: none; }
.fgroup > summary:hover { color: var(--white); }
.fgroup > summary::after { content: "+"; font-size: 1rem; color: var(--txt-dim); }
.fgroup[open] > summary::after { content: "–"; }
.fgroup-body { padding-bottom: 1.1rem; padding-right: .6rem; display: flex; flex-direction: column; gap: .62rem; max-height: 280px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }

.fopt { display: flex; align-items: center; gap: .6rem; cursor: pointer; font-size: var(--fs-sm); color: var(--txt-dim); transition: color .25s var(--ease); }
.fopt:hover { color: var(--white); }
.fopt input { position: absolute; opacity: 0; pointer-events: none; }
.fopt i {
  width: 14px; height: 14px;
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: all .25s var(--ease);
}
.fopt input:checked + i { background: var(--azul); border-color: var(--azul); }
.fopt input:checked + i::after { content: ""; width: 5px; height: 8px; border: solid var(--bg); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg) translate(-1px, -1px); }
.fopt input:checked ~ span { color: var(--white); }
.fopt small { margin-left: auto; color: var(--txt-dim); font-size: var(--fs-xs); }

.range-row { display: flex; gap: .5rem; align-items: center; padding-bottom: 1.1rem; }
.range-row input {
  width: 100%;
  border: 1px solid var(--line);
  padding: .55rem .6rem;
  font-size: var(--fs-sm);
  color: var(--white);
  background: var(--bg-2);
}
.range-row input:focus { border-color: var(--azul); outline: none; }
.range-row span { color: var(--txt-dim); }

.results-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-block: 1.05rem;
  border-block: 1px solid var(--line);
  margin-bottom: 1.9rem;
}
.filters-toggle-desktop {
  display: none;
  align-items: center; gap: .55rem;
  font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--txt-dim);
  transition: color .25s var(--ease);
}
.filters-toggle-desktop:hover { color: var(--white); }
.filters-toggle-desktop svg { width: 13px; height: 13px; transition: transform .35s var(--ease); }
.cat-layout.is-collapsed .filters-toggle-desktop svg { transform: rotate(180deg); }
/* "Ocultar filtros" es solo de escritorio: en celular los filtros son un panel
   lateral, y no puede quedar oculto por una preferencia guardada de otra pantalla. */
@media (min-width: 1081px) {
  .filters-toggle-desktop { display: inline-flex; }
  .cat-layout.is-collapsed .filters { display: none; }
  .cat-layout.is-collapsed { grid-template-columns: 1fr; }
}

/* Cerrar / aplicar / fondo: solo existen cuando los filtros son un panel (celular y tablet) */
.filters-close, .filters-apply, .filters-backdrop { display: none; }

.results-top-right { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin-left: auto; }
.results-count { font-size: var(--fs-sm); color: var(--txt-dim); }
.results-count b { color: var(--white); font-weight: 500; }
.rt-sep { width: 1px; height: 15px; background: var(--line-2); flex-shrink: 0; }
@media (max-width: 560px) { .rt-sep { display: none; } }

.view-toggle { display: flex; gap: .35rem; }
.view-toggle button {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  color: var(--txt-dim);
  opacity: .45;
  transition: opacity .25s var(--ease), color .25s var(--ease);
}
.view-toggle button:hover { opacity: .8; }
.view-toggle button.is-on { opacity: 1; color: var(--white); }
.view-toggle svg { width: 16px; height: 16px; }

.sort-label {
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--fs-sm); color: var(--txt-dim);
  white-space: nowrap;
}
.chips { display: flex; gap: .45rem; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid var(--line-2);
  padding: .34rem .7rem;
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  color: var(--white);
  transition: all .25s var(--ease);
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip b { font-weight: 400; }

.sort-sel {
  padding: 0 1.3rem 0 0;
  font-size: var(--fs-sm);
  color: var(--white);
  font-weight: 500;
  background:
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238D8883' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right center / 13px;
  appearance: none;
  cursor: pointer;
}
.sort-sel:focus { outline: none; color: var(--accent); }

.empty { text-align: center; padding: 5rem 1rem; color: var(--txt-dim); }
.empty b { display: block; color: var(--white); font-size: 1.2rem; font-weight: 300; margin-bottom: .6rem; }

.filters-toggle { display: none; }

/* ==========================================================================
   FICHA DE PRODUCTO
   ========================================================================== */
.prod-gallery { min-width: 0; }   /* evita que la fila de miniaturas "empuje" y agrande toda la columna */

.prod {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.8rem, 4vw, 4.5rem);
  padding-block: clamp(1.8rem, 4vw, 3.2rem);
  align-items: start;
}
.gallery-main {
  position: relative;
  aspect-ratio: 4 / 3.2;
  overflow: hidden;
  background: var(--panel);
  margin-bottom: .7rem;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: opacity .45s var(--ease); cursor: zoom-in; }

/* Carrusel de miniaturas: una sola fila, con flechas, en vez de una grilla que se desborda */
.gallery-thumbs-row { display: flex; align-items: center; gap: .5rem; margin-top: .7rem; min-width: 0; }
.gallery-thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 104px;
  gap: .55rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  min-width: 0;    /* sin esto, el contenedor pide ancho para las 17 miniaturas juntas */
  flex: 1 1 0;      /* que se achique dentro del flex row en vez de imponer su ancho de contenido */
}
.gallery-thumbs::-webkit-scrollbar { display: none; }
.gallery-thumbs button {
  scroll-snap-align: start;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--line);
  opacity: .55;
  transition: all .3s var(--ease);
  flex-shrink: 0;
}
.gallery-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs button:hover { opacity: .85; }
.gallery-thumbs button.is-on { opacity: 1; border-color: var(--azul); }
.gallery-nav {
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--txt);
  flex-shrink: 0;
  transition: all .3s var(--ease);
}
.gallery-nav:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.gallery-nav:disabled { opacity: .28; cursor: default; }
.gallery-nav svg { width: 15px; height: 15px; }
@media (max-width: 560px) {
  .gallery-thumbs { grid-auto-columns: 78px; }
}

.prod-info { position: sticky; top: calc(104px + 1.6rem); }
.prod-info h1 { font-size: clamp(1.6rem, 2.7vw, 2.4rem); font-weight: 200; margin: .7rem 0 .3rem; }
.prod-tipo { font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.prod-price { font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--white); font-weight: 200; margin-top: 1.2rem; letter-spacing: -.02em; }
.prod-cuotas { font-size: var(--fs-sm); color: var(--accent); margin-top: .25rem; }

.var-block { margin: 1.9rem 0; }
.var-label {
  font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase;
  color: var(--txt-dim); margin-bottom: .85rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
}
.var-label b { color: var(--white); font-weight: 400; letter-spacing: .04em; text-transform: none; font-size: var(--fs-sm); }
.swatches { display: flex; gap: .5rem; flex-wrap: wrap; }
.swatch {
  width: 46px; height: 46px;
  overflow: hidden;
  border: 1px solid var(--line);
  opacity: .78;
  transition: all .3s var(--ease);
  position: relative;
}
.swatch img { width: 100%; height: 100%; object-fit: cover; }
.swatch:hover { opacity: 1; transform: translateY(-2px); }
.swatch.is-on { opacity: 1; border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul); }
.swatch { cursor: zoom-in; }

/* ==========================================================================
   LIGHTBOX — foto de producto o de tela en grande, con zoom al click
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(6, 5, 5, .96);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease);
  padding: clamp(1rem, 5vw, 3rem);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox-frame {
  max-width: 100%; max-height: 100%;
  overflow: hidden;
  cursor: zoom-in;
  touch-action: none;
}
.lightbox-frame.is-zoomed { cursor: zoom-out; }
.lightbox-frame img {
  max-width: min(92vw, 1100px);
  max-height: 88vh;
  width: auto; height: auto;
  object-fit: contain;
  transform-origin: center center;
  transition: transform .35s var(--ease);
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox-close {
  position: absolute; top: clamp(.9rem, 2.4vw, 1.8rem); right: clamp(.9rem, 2.4vw, 1.8rem);
  width: 44px; height: 44px;
  border: 1px solid var(--line-2);
  background: rgba(10, 8, 9, .5);
  color: var(--white);
  display: grid; place-items: center;
  z-index: 2;
  transition: border-color .3s var(--ease);
}
.lightbox-close:hover { border-color: var(--accent); color: var(--accent); }
.lightbox-close svg { width: 18px; height: 18px; }
.lightbox-hint {
  position: absolute; bottom: clamp(1rem, 3vw, 2rem); left: 50%; transform: translateX(-50%);
  font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--txt-dim); pointer-events: none;
  opacity: 0; transition: opacity .3s var(--ease);
}
.lightbox.is-open .lightbox-hint { opacity: 1; transition-delay: .2s; }
.lightbox-frame.is-zoomed ~ .lightbox-hint,
.lightbox-nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; }
.lightbox-nav {
  width: 48px; height: 48px;
  border: 1px solid var(--line-2);
  background: rgba(10, 8, 9, .5);
  color: var(--white);
  display: grid; place-items: center;
  transition: border-color .3s var(--ease);
}
.lightbox-nav:hover { border-color: var(--accent); color: var(--accent); }
.lightbox-nav svg { width: 18px; height: 18px; }
.lightbox-nav.prev { left: clamp(.6rem, 2vw, 1.6rem); }
.lightbox-nav.next { right: clamp(.6rem, 2vw, 1.6rem); }
.lightbox-nav[hidden] { display: none; }
/* En celular las flechas se quedan (más chicas, sobre los bordes) y además se puede deslizar el dedo:
   sin eso no habría forma de pasar de una tela a otra. */
@media (max-width: 640px) {
  .lightbox-nav { width: 40px; height: 40px; }
  .lightbox-nav.prev { left: .4rem; }
  .lightbox-nav.next { right: .4rem; }
}

.prod-cta { display: flex; flex-direction: column; gap: .6rem; margin: 1.6rem 0; }
.prod-cta .btn { width: 100%; padding: 1.05rem 1.5rem; }
.cta-note { font-size: var(--fs-xs); color: var(--txt-dim); text-align: center; }

.specs { border-top: 1px solid var(--line); padding-top: 1.4rem; margin-top: 1.6rem; }
.specs li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--fs-sm);
  color: var(--txt-dim);
  margin-bottom: .55rem;
  line-height: 1.55;
}
.specs li::before { content: ""; position: absolute; left: 0; top: .62em; width: 4px; height: 1px; background: var(--accent); }

.dims { display: flex; gap: 2rem; margin-top: 1.5rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.dims div b { display: block; font-size: 1.28rem; color: var(--white); font-weight: 200; line-height: 1.1; }
.dims div span { font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--txt-dim); }

.warranty { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.warranty div { text-align: center; }
.warranty b { display: block; font-size: 1.25rem; color: var(--white); font-weight: 300; line-height: 1.1; }
.warranty span { font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-dim); line-height: 1.3; display: block; margin-top: .25rem; }

.prod-desc {
  border-top: 1px solid var(--line); padding-block: clamp(2.4rem, 5vw, 4rem);
  display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: stretch;
}
.prod-desc h2 { font-size: var(--fs-h3); margin-bottom: 1.3rem; }
.prod-desc p { max-width: 74ch; color: var(--txt-dim); margin-bottom: 1.05rem; }
/* Columna fotográfica pura: sin marco ni fondo, ocupa todo el alto del bloque
   de texto — la foto respira sola en vez de vivir metida en una caja. */
.prod-desc-img { min-height: 22rem; }
.prod-desc-img img { width: 100%; height: 100%; object-fit: contain; object-position: center top; }
@media (max-width: 860px) {
  .prod-desc { grid-template-columns: 1fr; }
  .prod-desc-img { order: -1; min-height: 20rem; }
}

.prod-maker {
  display: flex; align-items: center; gap: 1.1rem;
  padding-top: clamp(.4rem, 1vw, .8rem);
  padding-bottom: clamp(1.4rem, 2.8vw, 2rem);
  margin-bottom: clamp(1.6rem, 3.4vw, 2.6rem);
  border-bottom: 1px solid var(--line);
}
.prod-maker-by {
  font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--txt-dim);
}
.prod-maker-logo { width: clamp(84px, 9vw, 120px); height: auto; }

/* ==========================================================================
   BUSCADOR (overlay)
   ========================================================================== */
.search-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 8, 9, .96);
  backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease);
  padding-top: 13vh;
}
.search-overlay.is-open { opacity: 1; pointer-events: auto; }
.search-box { max-width: 760px; margin-inline: auto; padding-inline: 1.4rem; }
.search-box input {
  width: 100%;
  font-size: clamp(1.3rem, 3.4vw, 2.2rem);
  font-weight: 200;
  color: var(--white);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 1rem;
}
.search-box input::placeholder { color: var(--txt-dim); }
.search-box input:focus { outline: none; border-color: var(--azul); }
.search-results { margin-top: 1.6rem; max-height: 56vh; overflow-y: auto; }
.sres {
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .25s var(--ease);
}
.sres:hover { padding-left: .5rem; }
.sres img { width: 62px; height: 50px; object-fit: cover; flex-shrink: 0; background: var(--panel); }
.sres b { color: var(--white); font-weight: 300; font-size: var(--fs-body); display: block; }
.sres span { font-size: var(--fs-xs); color: var(--txt-dim); letter-spacing: .1em; text-transform: uppercase; }
.sres em { margin-left: auto; font-style: normal; color: var(--white); font-size: var(--fs-sm); white-space: nowrap; }
.sres-all {
  justify-content: center;
  font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  border-bottom: none; margin-top: .3rem; padding-top: 1.2rem;
}
.sres-all:hover { padding-left: 0; }
.search-close { position: absolute; top: 1.6rem; right: 1.8rem; }

/* ==========================================================================
   WHATSAPP FLOTANTE
   ========================================================================== */
.wa-float {
  position: fixed; right: 1.15rem; bottom: 1.15rem; z-index: 120;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--wa);
  display: grid; place-items: center;
  color: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
  transition: transform .35s var(--ease), background .3s var(--ease);
}
.wa-float:hover { transform: scale(1.07); background: #5ed456; }
.wa-float svg { width: 27px; height: 27px; }
.wa-float::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--wa);
  animation: waPulse 2.6s var(--ease-out) infinite;
}
@keyframes waPulse { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.5); opacity: 0; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-2); padding-block: clamp(3rem, 6vw, 5rem) 0; }
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(1.8rem, 4vw, 4rem);
  padding-bottom: 3rem;
}
.foot-col h4 {
  font-size: var(--fs-xs); letter-spacing: .24em; text-transform: uppercase;
  color: var(--white); font-weight: 500; margin-bottom: 1.15rem;
}
.foot-col li { margin-bottom: .6rem; }
.foot-col a, .foot-col p { font-size: var(--fs-sm); color: var(--txt-dim); transition: color .25s var(--ease); }
.foot-col a:hover { color: var(--accent); }
.foot-about p { max-width: 40ch; margin: 1.1rem 0 1.3rem; line-height: 1.7; }
.foot-social { display: flex; gap: .5rem; }
.foot-social a {
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  transition: all .3s var(--ease);
}
.foot-social a:hover { border-color: var(--accent); color: var(--accent); }
.foot-social svg { width: 15px; height: 15px; }
.foot-bottom {
  border-top: 1px solid var(--line);
  padding-block: 1.5rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--txt-dim);
  letter-spacing: .06em;
}

/* ==========================================================================
   PORTADA DE SECCIÓN — banner de categoría a pantalla completa, título
   centrado sobre la foto (formato editorial, como una tienda de muebles
   premium: la foto manda, el nombre de la categoría se lee de un vistazo).
   ========================================================================== */
.cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: clamp(280px, 36vw, 460px);
  overflow: hidden;
}
.cover-media { position: absolute; inset: 0; }
.cover-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); }
.cover::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,8,9,.55) 0%, rgba(10,8,9,.42) 45%, rgba(10,8,9,.68) 100%);
}
.cover-in { position: relative; z-index: 2; padding-inline: var(--pad-x); }
.cover-rule {
  display: block;
  width: clamp(50px, 8vw, 120px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  margin: 0 auto 1.6rem;
}
.cover h1 {
  font-size: clamp(2.4rem, 6.4vw, 5.2rem);
  font-weight: 200;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
}

@media (max-width: 700px) {
  .cover { min-height: 230px; }
  .cover h1 { letter-spacing: .02em; }
}

/* ==========================================================================
   ANIMACIONES
   ========================================================================== */

/* Titulares: aparecen desde una máscara, en vez de un fade plano */
.mask-up { display: block; overflow: hidden; }
.mask-up > span { display: block; }
.js-anim .mask-up > span {
  transform: translateY(105%);
  transition: transform 1.05s var(--ease-out);
}
.is-visible .mask-up > span,
.mask-up.is-visible > span { transform: none; }
.mask-up:nth-child(2) > span { transition-delay: .1s; }

/* Entrada escalonada de las tarjetas de una grilla o carrusel */
.js-anim .stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 65ms);
}
.js-anim .stagger.is-visible > * { opacity: 1; transform: none; }

/* Tarjeta de producto: más viva al pasar el mouse */
.card-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(91,94,166,.22), transparent 55%);
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
  z-index: 1;
}
.card:hover .card-media::after { opacity: 1; }
.card { transition: transform .5s var(--ease-out); }
.card:hover { transform: translateY(-6px); }
.card-name, .card-price { transition: color .35s var(--ease), transform .45s var(--ease-out); }
.card:hover .card-price { transform: translateX(3px); }

/* Botones: el fondo entra desde abajo */
.btn { position: relative; overflow: hidden; z-index: 0; }
.btn > * { position: relative; z-index: 2; }
.btn-ghost::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--azul);
  transform: translateY(101%);
  transition: transform .45s var(--ease-out);
  z-index: 1;
}
.btn-ghost:hover::before { transform: none; }
.btn-ghost:hover { color: #fff; border-color: var(--azul); }

/* Enlaces de "ver más": la línea barre de izquierda a derecha */
.link-more { position: relative; border-bottom-color: transparent; }
.link-more::before,
.link-more::after {
  content: "";
  position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
}
.link-more::before { background: var(--line-2); }
.link-more::after {
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--ease-out);
}
.link-more:hover::after { transform: scaleX(1); }

/* Números que cuentan hacia arriba */
.count-up { font-variant-numeric: tabular-nums; }

/* Franja de badges: el círculo respira al pasar el mouse */
.badge-item { transition: transform .45s var(--ease-out); }
.badge-item:hover { transform: translateY(-3px); }
.badge-ring { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease); }
.badge-item:hover .badge-ring { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(255,255,255,.07); }

/* Los bloques de categoría se mueven apenas con el scroll */
.tile img { will-change: transform; }

/* Tarjeta de producto: se inclina levemente al pasar el mouse, como si se
   levantara una esquina de la foto. Ángulo contenido (no literal), porque
   la tarjeta se ve tens de veces por sesión al recorrer el catálogo — un
   giro completo taparía el producto en vez de sumar. Gateado por hover real
   y por prefers-reduced-motion. */
@media (hover: hover) and (pointer: fine) {
  .card-media { transition: transform .4s var(--ease), border-radius .4s var(--ease); transform-style: preserve-3d; }
  .card:hover .card-media { transform: perspective(900px) rotateX(3deg) rotateY(-7deg) scale(1.015); }
}

/* Grilla del catálogo: cada tarjeta aparece cuando ENTRA en pantalla,
   no todas juntas al tocar el borde superior de la grilla — así se sienten
   "aparecer" a medida que se scrollea un catálogo largo. */
.js-anim .grid-prod.is-scrollreveal > .card {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.js-anim .grid-prod.is-scrollreveal > .card.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .mask-up > span { transform: none; }
  .stagger > * { opacity: 1; transform: none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .cat-layout { grid-template-columns: 1fr; }
  .filters {
    position: fixed; inset: 0 auto 0 0; z-index: 210;
    width: min(88vw, 340px);
    background: var(--bg-2);
    border-right: 1px solid var(--line);
    padding: 1.4rem;
    overflow-y: auto;
    transform: translateX(-102%);
    transition: transform .4s var(--ease-out);
    top: 0;
  }
  .filters.is-open { transform: none; }
  .filters-head-actions { display: flex; align-items: center; gap: 1.1rem; }
  .filters-close {
    display: grid; place-items: center;
    width: 36px; height: 36px; margin-right: -.5rem;
    color: var(--white);
  }
  .filters-close svg { width: 18px; height: 18px; }
  .filters-apply {
    display: block; position: sticky; bottom: -1.4rem;
    width: 100%; margin-top: 1.4rem; padding: .95rem 1rem;
    background: var(--ink); color: #fff;
    font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase;
    box-shadow: 0 -14px 18px -6px var(--bg-2);
  }
  .filters-backdrop {
    display: block; position: fixed; inset: 0; z-index: 205;
    background: rgba(10, 8, 9, .5);
    opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease-out), visibility 0s linear .3s;
  }
  .filters.is-open + .filters-backdrop { opacity: 1; visibility: visible; transition-delay: 0s; }
  .filters-toggle {
    display: inline-flex; align-items: center; gap: .5rem;
    border: 1px solid var(--line-2);
    padding: .58rem 1rem;
    font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--white);
  }
  .filters-toggle svg { width: 15px; height: 15px; }
  .prod { grid-template-columns: 1fr; }
  .prod-info { position: static; }
}

@media (max-width: 900px) {
  :root { --header-h: 100px; }
  .nav {
    position: fixed; inset: 0 0 0 auto;
    width: min(80vw, 320px);
    background: var(--bg-2);
    border-left: 1px solid var(--line);
    flex-direction: column;
    gap: 0;
    padding: 6rem 1.8rem 2rem;
    transform: translateX(102%);
    transition: transform .45s var(--ease-out);
    z-index: 150;
    margin-left: 0;
    overflow-y: auto; overscroll-behavior: contain;   /* con "Productos" abierto puede pasarse de la pantalla */
  }
  .nav.is-open { transform: none; }
  .nav a { padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
  .burger {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border: 1px solid var(--line);
    color: var(--white);
    z-index: 160;
    order: 9;
  }
  .burger svg { width: 17px; height: 17px; }
  .header-actions { margin-left: auto; }
  .btn-wa-header span { display: none; }
  .btn-wa-header { padding: .62rem .8rem; }
  /* Campos de 16px como mínimo: con menos, el iPhone hace zoom al tocarlos */
  .sort-label, .sort-sel, .range-row input { font-size: 1rem; }
  .split { grid-template-columns: 1fr; }
  .split.is-rev .split-txt { order: 0; }
  .benefits-in { grid-template-columns: 1fr; }
  .benefit + .benefit::before { left: 1.6rem; right: 1.6rem; top: 0; width: auto; height: 1px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

/* --- Hero en mobile: el titular y el botón tienen que entrar en la primera pantalla --- */
@media (max-width: 760px) {
  .hero { min-height: 540px; height: 86vh; max-height: 700px; }
  .hero-media img { object-position: 62% center; }
  /* base oscura un poco más firme bajo el texto: pantallas chicas, menos margen de sobra */
  .hero-media::after { background: linear-gradient(180deg, rgba(10,8,9,.4) 0%, rgba(10,8,9,.3) 40%, rgba(10,8,9,.72) 100%); }
  .hero h1 { font-size: clamp(2rem, 9.5vw, 3rem); margin: .9rem 0 1.6rem; }
  .hero-scroll { display: none; }
}

@media (max-width: 620px) {
  /* header más bajo y logo más chico: el de escritorio (78px) deja poco aire en 360px y ocupa 13% de la pantalla */
  :root { --header-h: 84px; }
  .header-in { height: 84px; gap: .8rem; }
  .logo.is-lg img { height: 58px; }
  .site-footer { padding-bottom: 4.6rem; }
  .grid-prod { grid-template-columns: repeat(2, 1fr); gap: 1.6rem .8rem; }
  .card-media { aspect-ratio: 3 / 3.4; }
  .card-name { font-size: var(--fs-sm); }
  .card-price { font-size: .95rem; }
  .foot-grid { grid-template-columns: 1fr; }
  .warranty { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
  .dims { gap: 1.3rem; }
  .split-stats { gap: 1.5rem; }
  .gallery-thumbs button { width: 62px; }
}

/* Solo lo verdaderamente intrusivo se desactiva con reduced-motion.
   Las microinteracciones NO se gatean: Windows trae reduce activado por defecto. */
@media (prefers-reduced-motion: reduce) {
  .wa-float::after { animation: none; }
  .hero-media img { transform: none; }
}

/* ==========================================================================
   MEGA-MENÚ — "Productos" despliega categorías (Living / Comedor / Outdoor)
   ========================================================================== */
.nav-item { position: static; display: flex; align-items: center; }
.nav-trigger {
  display: flex; align-items: center; gap: .4rem;
  font-size: var(--fs-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--txt);
  padding: .5rem 0;
  position: relative;
  transition: color .3s var(--ease);
}
.nav-trigger::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width .4s var(--ease-out);
}
.nav-trigger:hover, .nav-trigger.is-open { color: var(--white); }
.nav-trigger:hover::after, .nav-trigger.is-open::after { width: 100%; }
.nav-trigger svg { width: 9px; height: 9px; transition: transform .3s var(--ease); flex-shrink: 0; }
.nav-trigger.is-open svg { transform: rotate(180deg); }

.megamenu {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 32px 56px rgba(0,0,0,.4);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s linear .3s;
  z-index: 80;
}
.megamenu.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.megamenu-in { display: flex; gap: clamp(2.6rem, 5.5vw, 5.5rem); padding-block: clamp(2rem, 3.6vw, 3rem); }
.mega-col h4 {
  font-size: var(--fs-xs); letter-spacing: .22em; text-transform: uppercase;
  color: var(--white); font-weight: 500; margin-bottom: 1.15rem;
}
.mega-col a {
  display: block; font-size: var(--fs-sm); color: var(--txt-dim);
  padding: .42rem 0;
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.mega-col a:hover { color: var(--accent); transform: translateX(4px); }
.mega-col.is-soon h4 { color: var(--txt-dim); }
.mega-soon { display: block; font-size: var(--fs-xs); color: var(--txt-dim); opacity: .55; font-style: italic; }

@media (max-width: 900px) {
  .nav-item { width: 100%; display: block; }
  .nav-trigger {
    width: 100%; justify-content: space-between;
    padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm);
  }
  .megamenu {
    position: static;
    border: none; box-shadow: none;
    opacity: 1; visibility: visible; transform: none; transition: none;
    max-height: 0; overflow: hidden;
    transition: max-height .4s var(--ease-out);
  }
  .megamenu.is-open { max-height: 480px; }
  .megamenu-in { flex-direction: column; gap: 1.3rem; padding-block: .3rem 1rem; }
  .mega-col a { padding: .55rem 0 .55rem 1rem; border-bottom: 1px solid var(--line); }
  .mega-soon { padding-left: 1rem; }
}

/* ==========================================================================
   VISTA COMPACTA DEL CATÁLOGO — más columnas, tarjetas más chicas
   ========================================================================== */
.grid-prod.is-compact {
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: clamp(1rem, 1.6vw, 1.6rem) clamp(.7rem, 1.2vw, 1rem);
}
.grid-prod.is-compact .card-name { font-size: var(--fs-sm); }
.grid-prod.is-compact .card-price { font-size: .92rem; }
.grid-prod.is-compact .card-meta { margin-bottom: .35rem; }
@media (max-width: 620px) {
  .grid-prod.is-compact { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   MULTI-MARCA — sello en tarjeta, separadores por línea, fabricante
   ========================================================================== */
/* Sello de marca en la esquina opuesta a "Nuevo": monocromo, discreto; el
   nombre completo del fabricante aparece en el tooltip. */
.card-brand {
  position: absolute; top: .75rem; right: .75rem; z-index: 2;
  font-size: .56rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  color: var(--white); opacity: .5;
  padding: .28rem .5rem .26rem .58rem;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, .72);
  transition: opacity .3s var(--ease);
}
.card:hover .card-brand { opacity: .9; }

/* Separador a todo el ancho de la grilla ("Línea de sillas by JCL") */
.brand-divider {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 1rem;
  padding-top: clamp(1.2rem, 2.6vw, 2.2rem);
}
.brand-divider:first-child { padding-top: 0; }
.brand-divider-txt {
  font-size: var(--fs-xs); letter-spacing: .26em; text-transform: uppercase; color: var(--txt-dim);
  white-space: nowrap;
}
.brand-divider-txt em { font-style: normal; text-transform: none; letter-spacing: .04em; }
.brand-divider-mark {
  font-size: 1.02rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--white);
  white-space: nowrap;
}
.brand-divider-logo { height: 34px; width: auto; filter: grayscale(1) contrast(1.1); }
.brand-divider-rule { flex: 1; height: 1px; background: var(--line); min-width: 1.5rem; }
.brand-divider-count { font-size: var(--fs-xs); color: var(--txt-dim); letter-spacing: .08em; white-space: nowrap; }
@media (max-width: 560px) {
  .brand-divider { flex-wrap: wrap; gap: .5rem .8rem; }
  .brand-divider-txt { white-space: normal; letter-spacing: .18em; }
  .brand-divider-count { display: none; }
}

.prod-maker-brand { display: inline-flex; align-items: center; transition: opacity .3s var(--ease); }
.prod-maker-brand:hover { opacity: .7; }
.prod-maker-word {
  font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 500;
  letter-spacing: .32em; text-transform: uppercase; color: var(--white);
}

/* Varios selectores (tapizado + lustre / madera) */
.var-groups { margin: 1.9rem 0 .4rem; display: grid; gap: 1.5rem; }
.var-groups:empty { display: none; }
.var-groups .var-block { margin: 0; }

/* Mega-menú: título de ambiente clickeable, "ver todo", columna de marcas */
.megamenu-in { gap: clamp(1.6rem, 3.4vw, 4rem); }
.mega-col h4 a { color: inherit; padding: 0; display: inline; }
.mega-col h4 a:hover { color: var(--accent); transform: none; }
.mega-col a.mega-all { margin-top: .5rem; font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--white); }
.mega-brands { margin-left: auto; padding-left: clamp(1.4rem, 3vw, 3rem); border-left: 1px solid var(--line); }
.mega-brands h4 { font-size: var(--fs-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--txt-dim); font-weight: 500; margin-bottom: 1.15rem; }
.mega-brands a { display: block; padding: .42rem 0; font-size: var(--fs-sm); letter-spacing: .24em; text-transform: uppercase; color: var(--white); transition: color .25s var(--ease); }
.mega-brands a:hover { color: var(--accent); }
@media (max-width: 900px) {
  .mega-brands { margin-left: 0; padding-left: 0; border-left: none; }
  .mega-brands a { padding: .55rem 0 .55rem 1rem; border-bottom: 1px solid var(--line); }
  .mega-col h4 a { padding: 0; border: none; }
  .megamenu.is-open { max-height: 1400px; }
}

/* ==========================================================================
   HOME — ambientes, encabezado con acciones, pasos, marcas
   ========================================================================== */
.section-head-actions { display: flex; align-items: center; gap: 1.4rem; }

.rooms { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(.6rem, 1.2vw, 1.1rem); }
.room {
  position: relative; overflow: hidden; display: flex; align-items: flex-end;
  aspect-ratio: 3 / 4; background: #1A1817;
}
.room img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.room::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,8,9,.78) 0%, rgba(10,8,9,.12) 55%, rgba(10,8,9,0) 100%); }
.room-in { position: relative; z-index: 1; padding: clamp(1rem, 2vw, 1.6rem); width: 100%; }
.room-n { display: block; font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: .35rem; min-height: 1em; }
.room h3 { font-size: clamp(1.35rem, 2.2vw, 2rem); font-weight: 300; color: #fff; }
.room-cta {
  display: inline-block; margin-top: .7rem;
  font-size: var(--fs-xs); letter-spacing: .22em; text-transform: uppercase; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: .25rem;
  transition: border-color .3s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .room:hover img { transform: scale(1.05); }
  .room:hover .room-cta { border-color: #fff; }
}
@media (max-width: 860px) {
  .rooms { grid-template-columns: repeat(2, 1fr); }
  .room { aspect-ratio: 4 / 5; }
  .room:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}

.steps { list-style: none; display: grid; gap: .8rem; margin: .4rem 0 1.9rem; }
.steps li { display: flex; gap: 1rem; align-items: baseline; font-size: var(--fs-sm); color: var(--txt-dim); border-top: 1px solid var(--line); padding-top: .8rem; max-width: 44ch; }
.steps b { font-weight: 400; color: var(--accent); font-size: var(--fs-xs); letter-spacing: .14em; }

.brands { text-align: center; }
.brands-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--line); margin-top: 1.6rem;
}
.brand-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem;
  padding: clamp(1.6rem, 3.4vw, 2.8rem) 1rem; min-height: 9rem;
  transition: background .35s var(--ease);
}
.brand-cell + .brand-cell { border-left: 1px solid var(--line); }
.brand-cell img { height: clamp(40px, 4.4vw, 58px); width: auto; filter: grayscale(1); opacity: .85; }
.brand-word { font-size: clamp(1.3rem, 2.3vw, 1.9rem); font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: var(--white); line-height: 1; padding-left: .34em; }
.brand-cell span { font-size: var(--fs-xs); color: var(--txt-dim); letter-spacing: .06em; }
@media (hover: hover) and (pointer: fine) { .brand-cell:hover { background: var(--bg-2); } }
@media (max-width: 700px) {
  .brands-row { grid-template-columns: 1fr; }
  .brand-cell + .brand-cell { border-left: none; border-top: 1px solid var(--line); }
  .brand-cell { min-height: 0; }
}

/* ==========================================================================
   CONTACTO — texto a lo ancho + foto, y abajo la banda del showroom
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 4.4vw, 4.4rem); align-items: start; }
.contact-main h2 { font-size: var(--fs-h2); margin: .9rem 0 1.1rem; }
.contact-main > p { color: var(--txt-dim); font-size: var(--fs-body); line-height: 1.75; }
.contact-list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin: 1.8rem 0 2rem; }
.contact-list li { border-top: 1px solid var(--line-2); padding-top: .9rem; }
.contact-list b { display: block; font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--white); font-weight: 500; margin-bottom: .35rem; }
.contact-list span { font-size: var(--fs-sm); color: var(--txt-dim); line-height: 1.5; }
.contact-main .hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }
.contact-hours { font-size: var(--fs-xs); letter-spacing: .1em; color: var(--txt-dim); }
.contact-media { margin: 0; aspect-ratio: 4 / 3.7; overflow: hidden; background: var(--panel); }
.contact-media img { width: 100%; height: 100%; object-fit: cover; }

.showroom {
  display: grid; grid-template-columns: 1.4fr 1fr auto; gap: clamp(1.6rem, 4vw, 4rem); align-items: end;
  border-top: 1px solid var(--line); padding-top: clamp(1.8rem, 3.4vw, 2.8rem);
}
.showroom-head h2 { font-size: var(--fs-h3); margin: .8rem 0; }
.showroom-head p { color: var(--txt-dim); font-size: var(--fs-sm); max-width: 52ch; }
.showroom-hours { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.showroom-hours dt { font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--txt-dim); }
.showroom-hours dd { font-size: 1.35rem; font-weight: 200; color: var(--white); margin-top: .2rem; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-media { aspect-ratio: 4 / 3; }
  .contact-list { grid-template-columns: 1fr; gap: .9rem; }
  .showroom { grid-template-columns: 1fr; align-items: start; }
  .showroom .btn { justify-self: start; }
}

/* ==========================================================================
   CELULAR — garantía en grilla 2×2 y franja de beneficios en 3 columnas
   ========================================================================== */
@media (max-width: 900px) {
  .benefits-in.is-quad { grid-template-columns: 1fr 1fr; }
  .benefits-in.is-quad .benefit { padding: 1.3rem 1rem 1.3rem 0; align-items: flex-start; border-top: 1px solid var(--line); }
  .benefits-in.is-quad .benefit:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--line); }
  .benefits-in.is-quad .benefit + .benefit::before { display: none; }
  .benefits-in.is-quad .benefit b { font-size: 1.45rem; }
  .benefits-in.is-quad .benefit span { font-size: var(--fs-xs); display: block; line-height: 1.5; }
  .benefits-in.is-quad .benefit b { margin-bottom: .45rem; }
}
@media (max-width: 860px) {
  .badges-in {
    display: grid; grid-template-columns: repeat(3, 1fr);
    align-items: start; gap: .8rem;
    padding-block: 1.6rem;
  }
  .badge-item { flex-direction: column; text-align: center; gap: .7rem; width: auto; }
  .badge-ring { width: 52px; }
  .badge-item b { font-size: .7rem; letter-spacing: .06em; line-height: 1.25; }
}
/* Entrada de la franja: los círculos aparecen uno tras otro y el ícono "se dibuja" */
.js-anim .badges .badge-item { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.js-anim .badges.is-visible .badge-item { opacity: 1; transform: none; }
.js-anim .badges .badge-item:nth-of-type(2) { transition-delay: 90ms; }
.js-anim .badges .badge-item:nth-of-type(3) { transition-delay: 180ms; }
.js-anim .badges .badge-ring svg * { stroke-dasharray: 80; stroke-dashoffset: 80; transition: stroke-dashoffset 1.1s var(--ease-out) .25s; }
.js-anim .badges.is-visible .badge-ring svg * { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .js-anim .badges .badge-item { transform: none; }
  .js-anim .badges .badge-ring svg * { stroke-dashoffset: 0; transition: none; }
}

/* ==========================================================================
   PRECIOS con promo (esquema Velvet): contado con %OFF, lista tachada, cuotas
   ========================================================================== */
.price-off {
  display: inline-block; vertical-align: middle;
  font-size: .62rem; font-weight: 600; letter-spacing: .08em;
  color: #fff; background: var(--bordo);
  padding: .16rem .42rem; margin-left: .35rem; transform: translateY(-2px);
}
.card-contado { font-size: var(--fs-xs); color: var(--txt-dim); margin-top: .12rem; letter-spacing: .02em; }
.card-contado s { margin-left: .35rem; opacity: .75; }
.prod-price .price-off { font-size: .72rem; padding: .22rem .55rem; margin-left: .6rem; transform: translateY(-.5rem); }
.prod-price-note, .prod-price-list { display: block; font-size: var(--fs-xs); letter-spacing: .06em; color: var(--txt-dim); margin-top: .35rem; }
.prod-price-note { margin-top: .5rem; }
.prod-price-list b { font-weight: 400; text-decoration: line-through; color: var(--txt); }
.prod-cuotas b { font-weight: 500; }

/* Logos de Genoud y JCL: son wordmarks muy apaisados (≈5:1), a la misma
   altura que el de Velvet quedarían enormes — se igualan por peso visual. */
.brand-cell img[src*="genoud"], .brand-cell img[src*="jcl"] { height: clamp(24px, 2.6vw, 34px); }
.brand-divider-logo[src*="genoud"], .brand-divider-logo[src*="jcl"] { height: 20px; }
.prod-maker-logo[src*="genoud"], .prod-maker-logo[src*="jcl"] { width: clamp(96px, 10vw, 140px); }

/* Sello de marca con logo (en vez del nombre en texto) */
.card-brand { display: grid; place-items: center; padding: .34rem .55rem; }
.card-brand img { height: 11px; width: auto; display: block; }
.card-brand img[src*="velvet"] { height: 22px; margin: -.3rem -.1rem; }   /* el PNG de Velvet trae aire alrededor */
.grid-prod.is-compact .card-brand img { height: 9px; }
.grid-prod.is-compact .card-brand img[src*="velvet"] { height: 18px; }
/* el logo vive dentro de .card-media: se anulan las reglas pensadas para la foto */
.card-media .card-brand img,
.card-media.is-light .card-brand img,
.card:hover .card-media .card-brand img {
  width: auto; padding: 0; object-fit: contain; mix-blend-mode: normal;
  transform: none; opacity: 1; position: static;
}
.card-media .card-brand img { height: 11px; }
.card-media .card-brand img[src*="velvet"] { height: 22px; }
.grid-prod.is-compact .card-media .card-brand img { height: 9px; }
.grid-prod.is-compact .card-media .card-brand img[src*="velvet"] { height: 18px; }
.card-brand { opacity: .72; }

/* ==========================================================================
   AJUSTES 2026-09-28
   ========================================================================== */
/* Titulares con máscara: el recorte (overflow) comía las descendentes
   (g, j, p, q, y, coma). Se da aire abajo y se compensa con margen negativo. */
.mask-up { padding-bottom: .16em; margin-bottom: -.16em; }

/* Carrusel "Recién llegados": exactamente 3 tarjetas por vista, sin asomar la cuarta */
.carousel { grid-auto-columns: calc((100% - 2 * clamp(1rem, 1.8vw, 1.8rem)) / 3); }
@media (max-width: 900px) { .carousel { grid-auto-columns: calc((100% - clamp(1rem, 1.8vw, 1.8rem)) / 2); } }
@media (max-width: 560px) { .carousel { grid-auto-columns: 100%; } }

/* Mega-menú: columnas con la misma separación entre sí (antes cada una
   tomaba el ancho de su texto más largo y Outdoor quedaba despegado) */
@media (min-width: 901px) {
  .megamenu-in { display: grid; grid-template-columns: repeat(5, max-content) 1fr; column-gap: clamp(2rem, 3.6vw, 3.6rem); }
  .mega-brands { justify-self: end; }
}

.card-media .card-brand img[src*="jmi"] { height: 15px; }
.brand-divider-logo[src*="jmi"] { height: 26px; filter: none; }
.prod-maker-logo[src*="jmi"] { width: clamp(90px, 9vw, 120px); }

.showroom-map { display: inline-block; font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: .9rem; border-bottom: 1px solid currentColor; padding-bottom: .15rem; }

.warranty-title { grid-column: 1 / -1; font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--txt-dim); text-align: left; margin-bottom: .2rem; }

/* [hidden] tiene que ganarle al display:grid (sino la garantía Velvet aparecía en todas las marcas) */
.warranty[hidden], .dims[hidden] { display: none; }

/* ==========================================================================
   AJUSTES 2026-09-29
   ========================================================================== */
/* El nombre de la tela aparece al pasar el mouse: la fila tiene alto fijo
   para que nada salte al entrar/salir de una muestra. */
.var-label { min-height: 1.6rem; align-items: center; }
.var-label b { display: inline-block; min-height: 1.3em; line-height: 1.3; }

/* Botón fantasma: el relleno entra por detrás del texto (antes lo tapaba) */
.btn-ghost { isolation: isolate; }
.btn-ghost::before { z-index: -1; }
.btn-ghost:hover { color: #fff; }

/* Sin segunda foto, la principal no se oculta al pasar el mouse */
.card:hover .card-media:not(.has-alt) img.card-main { opacity: 1; }

.prod-pago { font-size: var(--fs-xs); color: var(--txt-dim); margin-top: .5rem; letter-spacing: .02em; }
.prod-pago b { font-weight: 500; color: var(--txt); margin-right: .35rem; }
.prod-cuotas a { color: var(--accent); border-bottom: 1px solid currentColor; }
.prod-price-note em { font-style: normal; font-size: 1.05rem; color: var(--white); font-weight: 400; margin-right: .3rem; letter-spacing: 0; }
.prod-cuotas { color: var(--accent); }
.card-cuotas.is-plain { color: var(--txt-dim); }

/* ==========================================================================
   AJUSTES 2026-09-30
   ========================================================================== */
/* Títulos: renglones de largo parejo (sin una palabra sola colgando) */
h1, h2, .split-txt h2, .section-head h2 { text-wrap: balance; }
.split-txt h2 { max-width: 19ch; }
.split-txt h2.is-long { font-size: clamp(1.5rem, 2.7vw, 2.4rem); max-width: 22ch; }
.split-txt h2 .mask-up > span { text-wrap: balance; }

/* Filtros del catálogo: columna propia con su scroll, independiente de la grilla */
@media (min-width: 1081px) {
  .filters {
    max-height: calc(100vh - var(--header-h) - 2.8rem);
    overflow-y: auto; overscroll-behavior: contain;
    padding-right: .5rem; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
  }
  .fgroup-body { max-height: none; overflow: visible; }
}

/* Celular: en los bloques foto+texto la foto va siempre primero */
@media (max-width: 900px) {
  .split .split-media { order: -1; }
  .split.is-rev .split-txt { order: 1; }
}

/* Puntos del hero: el activo se "llena" durante los 6 s que dura cada foto */
.hero-dots button { position: relative; overflow: hidden; }
.hero-dots button.is-on { background: rgba(255,255,255,.4); }
.hero-dots button.is-on::after {
  content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left;
  animation: heroDot 6s linear forwards;
}
@keyframes heroDot { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .hero-dots button.is-on::after { animation: none; } }

/* Botón de texto "Tienda online" junto a WhatsApp (el ícono de bolsa se leía como carrito) */
.btn-tienda-header {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1rem; border: 1px solid var(--line-2); color: var(--white);
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.btn-tienda-header svg { width: 13px; height: 13px; transition: transform .3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn-tienda-header:hover { border-color: var(--accent); background: rgba(146,148,216,.1); }
  .btn-tienda-header:hover svg { transform: translate(2px, -2px); }
}
.nav-tienda { display: none; }
@media (max-width: 1080px) { .btn-tienda-header { display: none; } }
@media (max-width: 1080px) and (min-width: 901px) { .nav-tienda { display: inline; } }
@media (max-width: 900px) { .nav-tienda { display: block; } }

.tienda-band {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  border-block: 1px solid var(--line); padding-block: clamp(1.8rem, 3.4vw, 2.8rem);
}
.tienda-band h2 { font-size: var(--fs-h3); margin: .8rem 0 .6rem; }
.tienda-band p { color: var(--txt-dim); font-size: var(--fs-sm); max-width: 54ch; }