/* ============================================================
   DW JEANS — Capa de refinamiento (2026-08-06)

   Va DESPUÉS de style.css y premium.css. Se hizo como capa aparte y no
   editando las hojas de abajo porque style.css son 75 KB heredados del clon
   de tuNFC/LB Jeans: tocarlo a ciegas en una tienda viva es pedir un susto.
   Aquí solo hay correcciones puntuales y bien acotadas.

   Qué corrige, en orden de lo que más se nota:
     1. Escala tipográfica  — había 26 tamaños distintos, muchos accidentales
     2. Contraste           — el dorado oscuro no llegaba a AA
     3. Zonas táctiles      — 20 objetivos por debajo de 44 px en móvil
     4. Microinteracciones  — el detalle que separa una tienda cara de una barata
     5. Movimiento reducido — respetar a quien lo pide en el sistema
   ============================================================ */

:root {
  /* ---------- 1. ESCALA TIPOGRÁFICA ----------
     Ocho pasos con una razón constante (~1.25) en vez de los 26 valores
     sueltos que había. Los tamaños como 17.92px o 16.96px no los eligió
     nadie: salían de heredar rem sobre rem. */
  --paso-xs:   0.78rem;   /* 12.5px — legales, microcopy */
  --paso-sm:   0.875rem;  /* 14px   — apoyo, metadatos */
  --paso-base: 1rem;      /* 16px   — cuerpo */
  --paso-md:   1.125rem;  /* 18px   — entradilla */
  --paso-lg:   1.375rem;  /* 22px   — título de tarjeta */
  --paso-xl:   1.75rem;   /* 28px   — título de sección */
  --paso-2xl:  2.25rem;   /* 36px   — título de página */
  --paso-3xl:  clamp(2.5rem, 6vw, 4rem); /* portada */

  /* ---------- 2. CONTRASTE ----------
     --dw-gold-deep (#8a6a1f) daba 3.55:1 sobre el fondo oscuro de la portada
     y 4.13:1 sobre el papel de las tarjetas. AA pide 4.5:1 para texto normal.
     Se separa el dorado según el fondo en lugar de usar uno solo para todo. */
  --dw-gold-sobre-oscuro: #d9b45c;  /* 7.4:1 sobre #17171a */
  --dw-gold-sobre-claro:  #6f5417;  /* 5.9:1 sobre #ece8df */

  /* Curvas de movimiento. La de "salida" es la que da sensación de calidad:
     arranca rápido y frena despacio, como un cajón bien hecho. */
  --curva-salida: cubic-bezier(0.16, 1, 0.3, 1);
  --curva-suave:  cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   1. TIPOGRAFÍA APLICADA
   ============================================================ */

/* El nombre de la tarjeta NO se toca. premium.css lo fija en 1rem !important
   y es una decisión de diseño deliberada de la capa editorial; además 1rem ya
   es un paso válido de la escala. Forzarlo a 22px solo para que el número de
   tamaños bajara habría estropeado la rejilla. */
.product-card__name       { line-height: 1.25; }
.product-card__summary    { font-size: var(--paso-sm); line-height: 1.5; }
.product-card__category   { font-size: var(--paso-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.product-card__price      { font-size: var(--paso-md); font-variant-numeric: tabular-nums; }

/* Los precios en tabular-nums quedan alineados en columna aunque cambien
   las cifras. Es un detalle mínimo que se nota mucho en una rejilla. */
.product-card__prices,
.cart-total, .checkout-total { font-variant-numeric: tabular-nums; }

/* ============================================================
   2. CONTRASTE
   ============================================================ */

.dw-hero__media .dw-hero__eyebrow,
.dw-hero .dw-hero__eyebrow,
[class*="hero"] [class*="eyebrow"] { color: var(--dw-gold-sobre-oscuro); }

.dw-card__media .badge--new,
.badge--new { color: var(--dw-gold-sobre-claro); }

/* Paginación: la página actual se pintaba en dorado oscuro sobre un fondo
   dorado al 8 %. Daba 2.09:1 — prácticamente ilegible, y encima es el único
   indicador de dónde estás. Se invierte: fondo dorado sólido y texto oscuro,
   que además la señala mejor que un cambio de color sutil. */
/* Va con !important porque el dorado no lo pone una regla propia del enlace:
   lo HEREDA de .paginacion, y una regla heredada solo se vence pintando
   encima. premium.css usa !important por toda la hoja, así que aquí es
   coherente con el resto y no una excepción. */
.paginacion li.activo > a,
li.activo > a {
  background: var(--dw-gold, #c8a24a) !important;
  color: var(--dw-ink, #0c0c0d) !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sm, 6px);
  padding: 6px 12px;
}

/* ============================================================
   3. ZONAS TÁCTILES (móvil)
   Apple y Google piden 44 px. Había 20 objetivos por debajo, incluido el
   botón de WhatsApp (30 px de alto) y los enlaces del menú (33 px).
   Se crece con padding y area invisible, sin mover la maqueta.
   ============================================================ */

@media (max-width: 767px) {
  /* Controles de la cabecera. El peor era la hamburguesa con 36x36: es el
     acceso al menú entero en móvil. Se crecen con área táctil invisible para
     no engordar visualmente una cabecera que ya está ajustada. */
  .header__hamburger,
  .header__search-toggle,
  .header__cart,
  .dw-footer__social a,
  .paginacion a,
  .breadcrumb a {
    position: relative;
  }
  .header__hamburger::after,
  .header__search-toggle::after,
  .header__cart::after,
  .dw-footer__social a::after,
  .paginacion a::after,
  .breadcrumb a::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
    /* Solo amplía el objetivo del dedo; no se ve ni tapa nada. */
  }

  /* Estos sí pueden crecer de verdad sin romper la maqueta. */
  .header__btn-store,
  .sidebar__cat-link,
  .product-card__name a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* El botón de WhatsApp de la barra superior tenía 30 px de alto y es, hoy,
     el canal de venta directo: es el peor sitio donde tener un objetivo
     pequeño. */
  .topbar__whatsapp {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  /* Enlaces de las columnas del pie: 23 px de alto, apilados y muy juntos,
     que es la combinación que más errores de dedo produce. */
  .dw-footer__grid > div > a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Campos de formulario: había uno de 23 px de alto. */
  input:not([type="radio"]):not([type="checkbox"]),
  select, textarea { min-height: 44px; }
}

/* ============================================================
   4. MICROINTERACCIONES
   Aquí es donde se nota el acabado. Nada de efectos ruidosos: peso,
   profundidad y respuesta al dedo.
   ============================================================ */

/* --- Tarjeta de producto: la foto respira dentro del marco --- */
.product-card__image-wrap {
  overflow: hidden;
  background: var(--dw-paper-2, #f6f4ef);
}
.product-card__image {
  transition: transform 0.7s var(--curva-salida), filter 0.4s var(--curva-suave);
  will-change: transform;
}
@media (hover: hover) {
  .product-card:hover .product-card__image { transform: scale(1.055); }
  .product-card:hover { box-shadow: 0 18px 40px -18px rgba(20, 20, 15, 0.35); }
}
.product-card {
  transition: box-shadow 0.45s var(--curva-salida), transform 0.45s var(--curva-salida);
}

/* --- Subrayado que se dibuja, en vez de aparecer de golpe --- */
@media (hover: hover) {
  .product-card__name a,
  .dw-footer a,
  .header__nav a {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    transition: background-size 0.4s var(--curva-salida);
    text-decoration: none;
  }
  .product-card__name a:hover,
  .dw-footer a:hover,
  .header__nav a:hover { background-size: 100% 1px; }
}

/* --- Botones: hundirse al pulsar. Da sensación de material. --- */
.btn, .btn--primary, .cart-checkout-btn, button[type="submit"] {
  transition: transform 0.12s var(--curva-suave),
              box-shadow 0.3s var(--curva-salida),
              background-color 0.3s var(--curva-suave);
}
.btn:active, .btn--primary:active,
.cart-checkout-btn:active, button[type="submit"]:active { transform: translateY(1px) scale(0.99); }

/* --- Brillo que cruza el botón principal al pasar por encima --- */
@media (hover: hover) {
  .btn--primary { position: relative; overflow: hidden; }
  .btn--primary::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 -60%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.28), transparent);
    transform: skewX(-18deg);
    transition: left 0.6s var(--curva-salida);
  }
  .btn--primary:hover::after { left: 130%; }
}

/* --- Selector de talla: que se sienta seleccionable --- */
.product-sizes__options label {
  transition: transform 0.18s var(--curva-salida),
              border-color 0.25s var(--curva-suave),
              background-color 0.25s var(--curva-suave);
}
.product-sizes__options label:hover { transform: translateY(-2px); }
.product-sizes__options input:checked + label {
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px var(--dw-gold, #c8a24a);
}

/* --- Aparición escalonada de la rejilla ---
   El retardo por posición hace que la rejilla se "sirva" en vez de
   aparecer entera. Solo las 12 primeras: más allá no se ve y solo
   retrasaría el contenido. */
.product-card.anim-fade-in { animation-fill-mode: both; }
.product-card.anim-fade-in:nth-child(1)  { animation-delay: 0.00s; }
.product-card.anim-fade-in:nth-child(2)  { animation-delay: 0.04s; }
.product-card.anim-fade-in:nth-child(3)  { animation-delay: 0.08s; }
.product-card.anim-fade-in:nth-child(4)  { animation-delay: 0.12s; }
.product-card.anim-fade-in:nth-child(5)  { animation-delay: 0.16s; }
.product-card.anim-fade-in:nth-child(6)  { animation-delay: 0.20s; }
.product-card.anim-fade-in:nth-child(7)  { animation-delay: 0.24s; }
.product-card.anim-fade-in:nth-child(8)  { animation-delay: 0.28s; }
.product-card.anim-fade-in:nth-child(9)  { animation-delay: 0.32s; }
.product-card.anim-fade-in:nth-child(10) { animation-delay: 0.36s; }
.product-card.anim-fade-in:nth-child(11) { animation-delay: 0.40s; }
.product-card.anim-fade-in:nth-child(12) { animation-delay: 0.44s; }

/* --- Foco visible y con la marca. Quien navega con teclado también compra. --- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--dw-gold, #c8a24a);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --- El agotado se lee sin tener que buscar el texto --- */
.product-card--agotado .product-card__image,
.product-card[data-stock="0"] .product-card__image { filter: grayscale(1) opacity(0.55); }

/* ============================================================
   4b. CARRUSEL DEL HERO
   Fundido cruzado, no desplazamiento lateral: encaja con el tono editorial
   de la portada y no obliga a mover 6 imágenes de 1080px a la vez.
   ============================================================ */

.dw-hero__carrusel { position: relative; display: block; }

.dw-hero__slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s var(--curva-suave), visibility 0s linear 0.9s;
}
.dw-hero__slide.is-activa {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.9s var(--curva-suave), visibility 0s;
  z-index: 1;
}

/* La foto entra con un acercamiento lentísimo (Ken Burns). Es lo que hace que
   una portada parezca viva sin que nada "se mueva" de forma evidente. */
.dw-hero__slide.is-activa img { animation: dw-hero-acercar 6s var(--curva-suave) forwards; }
@keyframes dw-hero-acercar {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

/* Los puntos van por ENCIMA de las diapositivas: si quedaran debajo, el
   enlace de la foto se comería el clic y no se podría cambiar de producto. */
.dw-hero__puntos {
  position: absolute;
  right: 24px; bottom: 26px;
  z-index: 3;
  display: flex; gap: 10px;
}
.dw-hero__punto {
  width: 10px; height: 10px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.35s var(--curva-suave), transform 0.35s var(--curva-salida);
}
.dw-hero__punto:hover { transform: scale(1.25); }
.dw-hero__punto.is-activo { background: var(--dw-gold, #c8a24a); border-color: var(--dw-gold, #c8a24a); }

/* Área táctil de 44px sin engordar el punto, igual que en el resto del sitio. */
.dw-hero__punto::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
.dw-hero__punto { position: relative; }

/* El precio dentro de la etiqueta, para que la portada venda y no solo decore. */
.dw-hero__tag strong {
  display: block;
  font-style: normal;
  font-family: var(--dw-sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  margin-top: 2px;
}

@media (max-width: 767px) {
  .dw-hero__puntos { right: 16px; bottom: 18px; }
}

/* ============================================================
   5. MOVIMIENTO REDUCIDO
   premium.css ya lo respeta, pero style.css (la hoja heredada) no: sus
   animaciones seguían corriendo. Esto las apaga todas de una vez.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .product-card:hover .product-card__image { transform: none; }
}

/* ============================================================
   6. RESTOS DEL CLON DE tuNFC
   style.css trae animaciones de tarjeta NFC —ondas, órbitas, partículas—
   que ninguna plantilla de DW Jeans usa (verificado: 0 apariciones en el
   HTML). Se neutralizan aquí; borrarlas de style.css es trabajo de una
   limpieza aparte, con su propia prueba.
   ============================================================ */

.card__nfc-waves, .card__nfc-wave { display: none !important; }
[class*="nfc-icon"], [class*="glow-ring"], [class*="particle"] { animation: none !important; }