/* ═══════════════════════════════════════════════════════════════════
   FLUIDEZ — capa de movimiento sobre styles.css y experience.css
   Viene de la versión de prueba "SkinLeatherWeb-pruebas" (set. 2026) y se adaptó a la web
   reparada el 6-10-2026. Si algo no convence, se sacan este archivo, fluidez.js y vendor/lenis.*
   y la web queda con el movimiento anterior.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --sl-suave: cubic-bezier(0.22, 1, 0.36, 1);   /* frena largo: entradas */
}

/* ─── 1. EL HERO ENTRA EN CASCADA ─────────────────────────────────────
   "backwards" y no "both": al terminar la animación el elemento queda libre, así el botón
   conserva su efecto al pasar el mouse. */
@media (prefers-reduced-motion: no-preference) {
  #hero .hero-eyebrow { animation: slSube 1s 0.1s var(--sl-suave) backwards; }
  #hero .hero-word { animation: slTitulo 1.25s 0.2s var(--sl-suave) backwards; }
  #hero .hero-word + .hero-word { animation-delay: 0.34s; }
  #hero .hero-sub { animation: slSube 1.1s 0.55s var(--sl-suave) backwards; }
  #hero .hero-cta { animation: slSube 1.1s 0.7s var(--sl-suave) backwards; }
  #hero .hero-origin { animation: slSube 1.1s 0.85s var(--sl-suave) backwards; }
  #hero .hero-scroll-stage { animation: slPieza 1.6s 0.05s var(--sl-suave) backwards; }
  #hero .hero-scroll-hint { animation: slSube 1s 1.1s var(--sl-suave) backwards; }
}
@keyframes slSube {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slTitulo {
  from { opacity: 0; transform: translateY(24px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* El sillón no se funde (es la imagen principal): aparece descubriéndose desde abajo. */
@keyframes slPieza {
  from { transform: scale(1.04); clip-path: inset(12% 0 0 0); }
  to   { transform: scale(1);    clip-path: inset(0 0 0 0); }
}


/* ─── 2. "LEATHER" HECHO DE CUERO ─────────────────────────────────────
   La palabra se rellena con la foto del cuero suela de la casa. Al deslizar, la veta se corre
   y las letras se separan apenas: el despiece del sillón, dicho en tipografía. */
#hero .hero-title {
  letter-spacing: calc(-0.045em + var(--sl-abre, 0) * 0.04em);
}
#hero .hero-leather {
  padding: 0 0.06em 0.08em 0;   /* la itálica se sale de su caja: que no se corte */
  background-image: url("img/cueros/suela.webp");
  background-size: 160% auto;
  background-position: 50% var(--sl-veta, 40%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  #hero .hero-leather { color: #876647; -webkit-text-fill-color: #876647; }
}


/* ─── 3. EL EPÍGRAFE DEL DESPIECE ─────────────────────────────────────
   Ocupa el lugar de la leyenda anterior (hereda .hero-craft-caption: posición y reglas de
   celular). Narra qué se ve mientras la pieza se desarma; la barra de avance es un pespunte. */
.sl-despiece { opacity: 0; transition: opacity 0.6s var(--sl-suave); }
.sl-despiece.activo { opacity: 1; }
.sl-despiece .sl-capitulo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.75em;
  white-space: nowrap;
}
.sl-despiece .sl-num {
  font-family: var(--font-serif);
  font-size: 1.9em;
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #94734e;
}
.sl-despiece .sl-texto {
  display: inline-block;
  transition: opacity 0.3s ease, transform 0.45s var(--sl-suave);
}
.sl-despiece .sl-texto.cambiando { opacity: 0; transform: translateY(5px); }
.sl-despiece .hero-progress {
  height: 1px;
  background: repeating-linear-gradient(to right, rgba(92, 74, 53, 0.25) 0 6px, transparent 6px 11px);
}
.sl-despiece .hero-progress i {
  background: repeating-linear-gradient(to right, #94734e 0 6px, transparent 6px 11px);
  transition: none;
}


/* ─── 4. SECCIONES Y MUEBLES QUE ENTRAN CON FRENO ─────────────────────
   Más largo y con freno que los 420 ms anteriores: se nota el movimiento sin demorar la lectura.
   Mismo observador de motion.js (agrega .visible); acá solo cambia el tiempo y la distancia. */
html .reveal, html .product-card, html .product-card-poltrona, html .product-card-sillon, html .sillones-callout {
  transition: opacity 0.9s var(--sl-suave), transform 0.9s var(--sl-suave) !important;
}
html :is(.reveal, .product-card, .product-card-poltrona, .product-card-sillon, .sillones-callout).motion-pending {
  transform: translateY(26px);
}
/* En cascada cuando entran juntos. */
html .cueros-grid .reveal:nth-child(2) { transition-delay: 0.06s !important; }
html .cueros-grid .reveal:nth-child(3) { transition-delay: 0.12s !important; }
html .cueros-grid .reveal:nth-child(4) { transition-delay: 0.18s !important; }
html .cueros-grid .reveal:nth-child(5) { transition-delay: 0.24s !important; }
html .cueros-grid .reveal:nth-child(6) { transition-delay: 0.30s !important; }
html .cueros-grid .reveal:nth-child(7) { transition-delay: 0.36s !important; }
html .cueros-grid .reveal:nth-child(8) { transition-delay: 0.42s !important; }
html .beneficios-grid .reveal:nth-child(2) { transition-delay: 0.08s !important; }
html .beneficios-grid .reveal:nth-child(3) { transition-delay: 0.16s !important; }
html .beneficios-grid .reveal:nth-child(4) { transition-delay: 0.24s !important; }
html .products-grid > :nth-child(even) { transition-delay: 0.08s !important; }

/* Títulos palabra por palabra (de "stagger-text", Vengeance UI): fluidez.js envuelve cada
   palabra y sube cuando su bloque .reveal se vuelve visible. */
.sl-palabra {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;   /* que no se corten las descendentes, sin agrandar el renglón */
  margin-bottom: -0.08em;
}
.sl-palabra > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1s var(--sl-suave);
  transition-delay: calc(var(--i, 0) * 60ms + 100ms);
}
.reveal.visible .sl-palabra > span { transform: translateY(0); }
section h2 { text-wrap: balance; }


/* ─── 5. DETALLES ─────────────────────────────────────────────────── */
/* El cuero se acerca al pasar. */
.cuero-swatch img { transition: transform 1.2s var(--sl-suave); }
.cuero-card:hover .cuero-swatch img { transform: scale(1.08); }

/* Hilo dorado de avance de la página. */
.sl-progreso {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 1001;
  background: #94734e;
  transform-origin: left center;
  transform: scaleX(0);
  pointer-events: none;
}

/* La pista se va con un fundido cuando empezás a deslizar. */
.hero-scroll-hint { transition: opacity 0.45s ease, transform 0.45s ease; }


/* ─── 6. SCROLL SUAVE (Lenis, solo con mouse o trackpad) ─────────── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }


/* ─── Quien pidió menos movimiento, recibe menos movimiento ────────── */
@media (prefers-reduced-motion: reduce) {
  .sl-palabra > span { transform: none; transition: none; }
  .cuero-swatch img { transition: none; }
  .sl-progreso { display: none; }
}


/* ═══ 2026-10-07 — vuelven la pantalla de carga y el ritmo original de las animaciones ═══ */

/* ─── 7. LA PANTALLA DE CARGA SE ABRE EN DOS ──────────────────────────
   Dos mitades que se separan desde la línea dorada, como se abre un cuero al cortarlo.
   app.js la saca del DOM 800 ms después de .fade-out. */
#page-curtain { background: transparent; }
#page-curtain::before,
#page-curtain::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 50.5%;            /* el medio punto de más evita una rayita de luz en el corte */
  background: #0D0806;
  transition: transform 0.72s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}
#page-curtain::before { top: 0; }
#page-curtain::after { bottom: 0; }
#page-curtain .curtain-inner { position: relative; z-index: 1; }
#page-curtain.fade-out { opacity: 1 !important; }
#page-curtain.fade-out::before { transform: translateY(-100%); }
#page-curtain.fade-out::after { transform: translateY(100%); }
#page-curtain.fade-out .curtain-inner { animation: slTelonSeVa 0.3s ease forwards; }
@keyframes slTelonSeVa {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.96); }
}
.curtain-corte {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 1px;
  background: #C9A96E;
  box-shadow: 0 0 10px rgba(201, 169, 110, 0.6);
  transform: translate(-50%, -50%);
  z-index: 2;
  opacity: 0;
}
#page-curtain.fade-out .curtain-corte { animation: slCorte 0.72s cubic-bezier(0.76, 0, 0.24, 1) forwards; }
@keyframes slCorte {
  0%   { width: 0;     opacity: 1; }
  45%  { width: 100vw; opacity: 1; }
  100% { width: 100vw; opacity: 0; }
}
#page-curtain.curtain-quick::before,
#page-curtain.curtain-quick::after { transition-duration: 0.4s; }
#page-curtain.curtain-quick.fade-out .curtain-corte { animation-duration: 0.4s; }

/* El hero espera a que se abra: su entrada arranca junto con la apertura. */
body.curtain-active #hero :is(.hero-eyebrow, .hero-word, .hero-sub, .hero-cta, .hero-origin, .hero-scroll-stage, .hero-scroll-hint) {
  animation-play-state: paused;
}


/* ─── 8. MENÚ: SE ABRE EN CÍRCULO Y LAS OPCIONES ENTRAN EN CASCADA ────
   Tiempos del menú original (0,5 s y opciones de a 50 ms). Al cerrar, sin demora. */
#navbar .nav-links {
  transition: clip-path 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, visibility 0.55s;
}
#navbar .nav-links li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.45s var(--sl-suave);
}
#navbar .nav-links.open li { opacity: 1; transform: none; }
#navbar .nav-links.open li:nth-child(1) { transition-delay: 0.10s !important; }
#navbar .nav-links.open li:nth-child(2) { transition-delay: 0.15s !important; }
#navbar .nav-links.open li:nth-child(3) { transition-delay: 0.20s !important; }
#navbar .nav-links.open li:nth-child(4) { transition-delay: 0.25s !important; }
#navbar .nav-links.open li:nth-child(5) { transition-delay: 0.30s !important; }
#navbar .nav-links.open li:nth-child(6) { transition-delay: 0.35s !important; }
#navbar .nav-links.open li:nth-child(7) { transition-delay: 0.40s !important; }
#navbar .nav-links.open li:nth-child(n+8) { transition-delay: 0.45s !important; }


/* ─── 9. EL NOMBRE DEL COLOR TAMBIÉN SE FUNDE ─────────────────────────
   experience.css lo dejaba fijo durante el cambio; acá vuelve a fundirse con la foto. */
.is-updating .swatch-active-display.fading { opacity: 0; }


@media (prefers-reduced-motion: reduce) {
  #page-curtain::before, #page-curtain::after { transition: none; }
  .curtain-corte { display: none; }
  #navbar .nav-links, #navbar .nav-links li { transition: none; }
}


/* ═══ 2026-10-07 — ajustes de celular ═══ */
@media (max-width: 768px) {
  /* ─── 10. EL NOMBRE DEL COLOR NO EMPUJA NADA ──────────────────────────
     Compartía renglón con los círculos: los nombres cortos ("Caoba") entraban al costado y los
     largos ("Marrón Africano") saltaban abajo y movían los botones. Ahora vive fijo en el renglón
     del título del grupo, alineado a la derecha, fuera del flujo. Sobra lugar: en el peor caso
     quedan ~100 px libres a 375 px de ancho. */
  .swatch-col { position: relative; }
  .swatch-col > .swatch-active-display {
    position: absolute;
    top: -6px;
    right: 0;
    min-height: 0;
    margin: 0;
    padding-left: 12px;
    line-height: 19.5px;
    max-width: 55%;
    white-space: nowrap;
  }
  /* Sillones: no muestran título, así que el nombre queda al costado de los círculos. Los
     círculos no se parten de renglón y, si el nombre no entra, se parte en dos líneas en su
     lugar (la fila mide 44 px y dos líneas entran). */
  .sillon-swatches-wrap { flex-wrap: nowrap !important; }
  .sillon-swatches-wrap > .swatch-active-display {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    justify-content: flex-end;
    white-space: normal;
    text-wrap: balance;
    line-height: 1.15;
  }

}

/* ─── 11. "CONSULTAR" CENTRADO EN EL MENÚ ─────────────────────────────
   Era un botón angosto pegado a la izquierda (tenía display:inline-block escrito en el HTML).
   Ocupa el ancho del menú, como la línea de abajo, con el texto al centro; al pasar el mouse no
   se corre (el resto de los links sí se desplaza a la derecha). */
#navbar .nav-links a.nav-cta {
  display: flex;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}
#navbar .nav-links a.nav-cta:hover { padding-left: 1.1rem !important; }
@media (min-width: 769px) {
  #navbar .nav-links a.nav-cta:hover { padding-left: 1.4rem !important; }
}