/* ============================================================================
   LB JEANS — Capa de firma: escala tipográfica y sistema de movimiento
   ============================================================================

   Se carga LA ÚLTIMA, después de style.css y premium.css, así que gana por
   orden de cascada sin necesidad de !important y sin reescribir nada de lo que
   ya funciona. Si algo aquí molesta, se quita este archivo y la tienda vuelve
   exactamente a como estaba.

   POR QUÉ EXISTE
   Medido sobre la portada en producción: 12 tamaños de letra distintos, con
   valores como 9,92 px / 11,52 px / 14,72 px / 18,88 px — decimales derivados
   de multiplicar rem, no una escala decidida. 27 elementos a 11,52 px y 4 a
   9,92 px: ilegible en un celular. Y 3 elementos con animación en una portada
   de 4.496 px de alto, con 34 keyframes declarados (19 de ellos heredados de
   la plantilla de tarjetas NFC: `nfc-wave`, `orbit-rotate`, `particle-float`…).

   Es decir: el movimiento que había no era escaso por criterio, era escaso
   porque nadie lo diseñó.

   PRINCIPIO DEL MOVIMIENTO
   El denim es una tela pesada. El movimiento acompaña ese peso: entradas
   largas y desaceleradas, nada de rebotes ni de elásticos. Se mueve para
   dirigir la mirada — hacia la prenda, hacia el precio, hacia el botón — nunca
   para lucirse.

   ⚠️ ACCESIBILIDAD
   Con `prefers-reduced-motion` el contenido se ve COMPLETO e INMÓVIL. El estado
   inicial oculto lo pone JavaScript y solo cuando el movimiento está permitido,
   así que sin JS, con JS caído o con movimiento reducido no se pierde nada.
   (En Strong App un `prefers-reduced-motion` mal hecho dejó las gráficas
   invisibles: aquí es imposible por construcción.)
============================================================================ */

:root {
  /* --- Escala tipográfica -------------------------------------------------
     Razón 1.25 (tercera mayor), fluida entre 360 px y 1440 px de ancho.
     Siete pasos deliberados en vez de doce accidentales. */
  --lb-t-xs:   clamp(0.75rem,  0.72rem + 0.15vw, 0.8125rem);  /* etiquetas, badges  */
  --lb-t-sm:   clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);   /* apoyo, pies        */
  --lb-t-base: clamp(0.9375rem, 0.90rem + 0.25vw, 1rem);      /* cuerpo             */
  --lb-t-md:   clamp(1.0625rem, 1.00rem + 0.35vw, 1.1875rem); /* entradilla         */
  --lb-t-lg:   clamp(1.25rem,  1.10rem + 0.7vw,  1.5rem);     /* título de tarjeta  */
  --lb-t-xl:   clamp(1.75rem,  1.40rem + 1.6vw,  2.5rem);     /* título de sección  */
  --lb-t-2xl:  clamp(2.5rem,   1.70rem + 3.6vw,  4.5rem);     /* titular            */

  /* --- Ritmo vertical ----------------------------------------------------- */
  --lb-sp-1: 0.5rem;
  --lb-sp-2: 1rem;
  --lb-sp-3: 1.5rem;
  --lb-sp-4: 2.5rem;
  --lb-sp-5: 4rem;
  --lb-sp-6: 6rem;

  /* --- Curvas y tiempos ---------------------------------------------------
     `salida` es una exponencial: arranca rápido y se posa. Es la que da la
     sensación de peso; una `ease` normal se siente barata al lado. */
  --lb-ease-salida: cubic-bezier(0.16, 1, 0.3, 1);
  --lb-ease-suave:  cubic-bezier(0.4, 0, 0.2, 1);
  --lb-dur-corta:   200ms;
  --lb-dur-media:   420ms;
  --lb-dur-larga:   900ms;

  /* --- Sombras: una sola familia, coherente ------------------------------- */
  --lb-sombra-1: 0 1px 2px rgba(12,12,13,.04), 0 2px 8px rgba(12,12,13,.04);
  --lb-sombra-2: 0 2px 4px rgba(12,12,13,.05), 0 12px 28px rgba(12,12,13,.08);
  --lb-sombra-3: 0 4px 8px rgba(12,12,13,.06), 0 24px 56px rgba(12,12,13,.12);
  --lb-sombra-oro: 0 10px 40px rgba(200,162,74,.22);
}

/* ============================================================================
   1. TIPOGRAFÍA
   El titular en Playfair a peso 500 con tracking negativo: en las serifas de
   display, apretar las letras es lo que las hace ver caras. Y `text-wrap:
   balance` evita el clásico titular con una palabra huérfana en la última
   línea — que era justo lo que pasaba con «El jean que se vuelve tu favorito».
============================================================================ */

.lb-hero h1,
.lb-cta h2,
.lb-editorial h2,
.lb-section__title {
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.lb-hero h1 { font-size: var(--lb-t-2xl); line-height: 1.02; }
.lb-cta h2,
.lb-editorial h2,
.lb-section__title { font-size: var(--lb-t-xl); line-height: 1.1; }

/* El texto de 9,92 px y 11,52 px sube a un mínimo legible. */
.lb-eyebrow,
.badge,
.product-card__category,
.breadcrumb { font-size: var(--lb-t-xs); letter-spacing: .1em; }

small, .lb-muted, figcaption { font-size: var(--lb-t-sm); }

/* Los párrafos largos se leen mejor con medida corta. */
.lb-editorial p,
.lb-section__head p { max-width: 62ch; font-size: var(--lb-t-md); line-height: 1.65; }

/* Cifras alineadas: los precios de una rejilla deben cuadrar en columna. */
.precio, .price, [class*="precio"], .order-summary__price-cyan {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ============================================================================
   2. REVELADO AL DESPLAZAR
   El estado oculto lo pone JS con .lb-anim-listo en <html>. Sin JS, sin
   soporte o con movimiento reducido, esta regla no aplica y todo se ve.
============================================================================ */

.lb-anim-listo .lb-reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity   var(--lb-dur-larga) var(--lb-ease-salida),
    transform var(--lb-dur-larga) var(--lb-ease-salida);
  transition-delay: var(--lb-reveal-delay, 0ms);
  will-change: opacity, transform;
}
.lb-anim-listo .lb-reveal.lb-visible {
  opacity: 1;
  transform: none;
  will-change: auto;   /* se libera al terminar: dejarlo puesto gasta memoria */
}

/* Variante para imágenes: además de subir, se asientan con una escala mínima.
   Es el gesto que hace que una foto de producto se sienta "colocada". */
.lb-anim-listo .lb-reveal--foto { transform: translate3d(0, 28px, 0) scale(1.03); }
.lb-anim-listo .lb-reveal--foto.lb-visible { transform: none; }

/* ============================================================================
   3. TARJETA DE PRODUCTO
   La foto es el producto: al pasar por encima, la imagen se acerca dentro de
   su marco (no se mueve la tarjeta entera, que es lo que se ve barato) y la
   tarjeta se eleva.
============================================================================ */

.product-card,
.lb-card,
.lb-producto {
  transition:
    transform  var(--lb-dur-media) var(--lb-ease-salida),
    box-shadow var(--lb-dur-media) var(--lb-ease-salida);
}
.product-card:hover,
.lb-card:hover,
.lb-producto:hover { transform: translateY(-6px); box-shadow: var(--lb-sombra-3); }

.product-card img,
.lb-card img,
.lb-producto img { transition: transform 700ms var(--lb-ease-salida); }

.product-card:hover img,
.lb-card:hover img,
.lb-producto:hover img { transform: scale(1.055); }

/* El marco recorta el acercamiento. Sin esto la foto se sale de la tarjeta. */
.product-card__img-wrap,
.card-img-wrap,
.lb-card__media { overflow: hidden; }

/* ============================================================================
   4. BOTONES
   Un barrido de luz que cruza el botón al pasar por encima. Es el detalle que
   más separa un botón "de plantilla" de uno cuidado, y cuesta 6 líneas.
============================================================================ */

.btn {
  position: relative;
  overflow: hidden;
  transition:
    transform  var(--lb-dur-corta) var(--lb-ease-salida),
    box-shadow var(--lb-dur-corta) var(--lb-ease-salida),
    background var(--lb-dur-corta) var(--lb-ease-suave);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 750ms var(--lb-ease-salida);
  pointer-events: none;
}
.btn:hover::after { transform: translateX(120%); }

.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--lb-sombra-oro); }
.btn:active { transform: translateY(0) scale(.985); transition-duration: 90ms; }

/* Foco visible y de marca. Sin esto, quien navegue con teclado va a ciegas. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--lb-gold, #c8a24a);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ============================================================================
   5. SELECTOR DE TALLA
   La talla es la objeción número uno al comprar jeans en línea. El control
   tiene que sentirse firme: al elegir, la pastilla se asienta con un rebote
   mínimo — el único de toda la tienda, y por eso se nota.
============================================================================ */

.talla-opcion {
  transition:
    border-color var(--lb-dur-corta) var(--lb-ease-suave),
    background   var(--lb-dur-corta) var(--lb-ease-suave),
    color        var(--lb-dur-corta) var(--lb-ease-suave),
    transform    var(--lb-dur-corta) var(--lb-ease-salida);
}
.talla-opcion:hover { border-color: var(--lb-gold, #c8a24a); transform: translateY(-1px); }
.talla-opcion[aria-checked="true"] { animation: lb-talla-elegida 340ms var(--lb-ease-salida); }

@keyframes lb-talla-elegida {
  0%   { transform: scale(1); }
  42%  { transform: scale(1.09); }
  100% { transform: scale(1); }
}

/* ============================================================================
   6. CABECERA QUE SE CONDENSA
   Al bajar, la cabecera se compacta y se vuelve traslúcida: devuelve altura
   de pantalla a la prenda, que es lo que la clienta vino a ver.
============================================================================ */

.header,
.lb-header {
  transition:
    padding    var(--lb-dur-media) var(--lb-ease-salida),
    background var(--lb-dur-media) var(--lb-ease-suave),
    box-shadow var(--lb-dur-media) var(--lb-ease-suave);
}
.lb-header-compacta .header,
.lb-header-compacta .lb-header {
  padding-top: .55rem;
  padding-bottom: .55rem;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: var(--lb-sombra-1);
}
.lb-header-compacta .header__logo img,
.lb-header-compacta .lb-header__logo img {
  transform: scale(.88);
  transition: transform var(--lb-dur-media) var(--lb-ease-salida);
}

/* ============================================================================
   7. CONTADOR DEL CARRITO
   Cuando entra un jean, el número late. Es la confirmación de que la acción
   surtió efecto — antes el único indicio era un contador de 12 px que nadie ve.
============================================================================ */

.header__cart-count.lb-latido { animation: lb-latido 620ms var(--lb-ease-salida); }

@keyframes lb-latido {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.5); }
  55%  { transform: scale(.92); }
  100% { transform: scale(1); }
}

/* ============================================================================
   8. IMÁGENES QUE LLEGAN
   Una foto que aparece de golpe da la sensación de página a medio cargar.
   Con esto entra con un fundido corto.
============================================================================ */

img.lb-fundido { opacity: 0; transition: opacity 480ms var(--lb-ease-suave); }
img.lb-fundido.lb-cargada { opacity: 1; }

/* ============================================================================
   9. MOVIMIENTO REDUCIDO
   Todo queda quieto y COMPLETAMENTE VISIBLE. Nada de `visibility:hidden` ni
   de opacidades a 0: esa es exactamente la forma de dejar una página vacía
   para quien activó el ajuste por mareo o por migraña.
============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .lb-reveal,
  .lb-reveal--foto,
  img.lb-fundido {
    opacity: 1 !important;
    transform: none !important;
  }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .btn::after { display: none; }
}

/* ============================================================================
   10. RESTOS DE LA PLANTILLA DE TARJETAS NFC
   19 keyframes heredados (`nfc-wave`, `orbit-rotate`, `particle-float`,
   `glow-ring-pulse`…) que animan elementos que aquí no existen. No rompen
   nada, pero cualquiera que abra el CSS de una tienda de jeans y encuentre
   "nfc" y "orbit" pierde el hilo. Se neutralizan por si algún selector suelto
   los engancha.
============================================================================ */

[class*="nfc-"]:not(.nfc-cyan),
[class*="orbit-"],
[class*="particle-"] { animation: none !important; }

/* ============================================================================
   11. CARRUSEL DEL HERO
   Antes había una foto fija clavada en el HTML que ni siquiera correspondía a
   una referencia del catálogo: la clienta veía un jean que no podía comprar.
   Ahora rota entre prendas reales y cada lámina lleva a su ficha.

   El apilado es con `position:absolute` y fundido de opacidad, no con
   `display:none`: así la transición puede animarse y el alto del hero no salta
   entre láminas.
============================================================================ */

.lb-carrusel { position: relative; overflow: hidden; display: block; }

.lb-carrusel__lamina {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  visibility: hidden;          /* saca del foco lo que no se ve */
  transition: opacity 900ms var(--lb-ease-salida), visibility 0s linear 900ms;
  text-decoration: none;
  color: inherit;
}
.lb-carrusel__lamina.es-activa {
  opacity: 1;
  visibility: visible;
  transition: opacity 900ms var(--lb-ease-salida), visibility 0s;
  position: relative;          /* la activa marca el alto del contenedor */
}

.lb-carrusel__lamina img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Zoom lentísimo mientras la lámina está a la vista: da sensación de vida
     sin que se perciba movimiento. Al pasar el ratón, se acerca un poco más. */
  transform: scale(1.02);
  transition: transform 8s linear;
}
.lb-carrusel__lamina.es-activa img { transform: scale(1.06); }
.lb-carrusel:hover .lb-carrusel__lamina.es-activa img { transform: scale(1.09); }

/* Pie con el nombre y el precio. Degradado desde abajo para que el texto se
   lea sobre cualquier foto, clara u oscura. */
.lb-carrusel__pie {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 64px 22px 20px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  background: linear-gradient(to top, rgba(12,12,13,.82) 0%, rgba(12,12,13,.45) 45%, transparent 100%);
  color: #f4f1ea;
}
.lb-carrusel__nombre {
  font-size: var(--lb-t-sm);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .01em;
}
.lb-carrusel__precio {
  font-family: var(--font-display, serif);
  font-size: var(--lb-t-lg);
  font-weight: 700;
  color: var(--lb-gold, #c8a24a);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Puntos de navegación. Área táctil de 44px aunque el punto se vea pequeño:
   en un celular, apuntar a un círculo de 8px es fallar el toque. */
.lb-carrusel__puntos {
  position: absolute;
  top: 16px; right: 16px;
  display: flex;
  gap: 2px;
  z-index: 3;
}
.lb-carrusel__punto {
  width: 44px; height: 44px;
  padding: 0; border: 0; background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.lb-carrusel__punto::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(244,241,234,.45);
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
  transition: background 240ms var(--lb-ease-suave), transform 240ms var(--lb-ease-salida);
}
.lb-carrusel__punto:hover::before { background: rgba(244,241,234,.8); }
.lb-carrusel__punto.es-activo::before {
  background: var(--lb-gold, #c8a24a);
  transform: scale(1.45);
}

/* Con movimiento reducido: sin fundido, sin zoom. Se ve una lámina, quieta,
   y los puntos siguen sirviendo para cambiarla a mano. */
@media (prefers-reduced-motion: reduce) {
  .lb-carrusel__lamina,
  .lb-carrusel__lamina img { transition: none !important; }
  .lb-carrusel__lamina.es-activa img { transform: none !important; }
}