/* ============================================================================
   DW JEANS — COMPONENTES BASE · sistema «Índigo y puntada»
   ----------------------------------------------------------------------------
   Se carga DESPUÉS de tokens.css. Aquí no hay ni un valor literal: todo sale
   de var(). Si falta un valor, se añade a tokens.css, no aquí.

   Los selectores apuntan a las clases que EXISTEN de verdad en el HTML
   servido. Se verificaron una a una contando apariciones en los PHP y JS
   antes de escribir la regla, porque en una ronda anterior escribí reglas
   contra clases inventadas y no pintaron nada.

   Cuatro cayeron en esa comprobación y NO están aquí:
     .site-footer   → el pie es <footer class="dw-footer">, y solo ese
     .badge--oferta → el modificador real es .badge--sale
     .badge--hot    → no existe en ningún fichero
     .form-select   → los <select> llevan .form-input; el único sin clase
                      es #ordenar-select, que sí se recoge por su id
   ========================================================================== */

/* ============================================================================
   1 · BOTONES
   Un solo sistema: relleno para la acción principal, contorno para la
   alternativa, fantasma para lo terciario. El primario es índigo porque es
   el único color de la paleta que garantiza 13:1 con texto encima.
   ========================================================================== */
.btn {
  font-family: var(--dw-texto);
  font-weight: var(--peso-fuerte);
  font-size: var(--paso-sm);
  line-height: 1;
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  transition: transform var(--dur-corta) var(--curva-suave),
              opacity   var(--dur-corta) var(--curva-suave);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--c-indigo);
  color: var(--c-papel);
  border: 1px solid var(--c-indigo);
}
.btn--primary:hover { background: var(--c-indigo-alto); border-color: var(--c-indigo-alto); }

.btn--outline {
  background: transparent;
  color: var(--c-indigo);
  border: 1px solid var(--c-indigo-borde);
}
.btn--outline:hover { background: var(--c-indigo-velo); border-color: var(--c-indigo); }

.btn--ghost { background: transparent; color: var(--c-indigo); border: 1px solid transparent; }
.btn--ghost:hover { background: var(--c-indigo-velo); }

/* Sobre superficie oscura se invierte: el papel pasa a ser el relleno */
.dw-on-ink-btn { background: var(--c-papel); color: var(--c-indigo-alto); }
.dw-on-ink-btn:hover { background: var(--c-lino); }

.btn--sm { font-size: var(--paso-xs); }
.btn--lg { font-size: var(--paso-base); }

/* ----------------------------------------------------------------------------
   BOTONES SOBRE SUPERFICIE OSCURA — esto lo rompí y lo vi midiendo

   Las tres reglas de arriba dan por hecho un fondo claro. El aviso de cookies
   NO lo es: su fondo es --c-indigo-alto. Medido sobre la página viva:

     «Solo esenciales»   índigo sobre índigo-alto ....... 1,18:1  ilegible
     «Aceptar medición»  relleno IDÉNTICO al del aviso ... 1,00:1  sin forma

   O sea: uno no se leía y el otro no parecía un botón. Y es lo primero que ve
   cualquier visitante nuevo. No se arregla solo en el aviso: se arregla para
   cualquier superficie oscura, que es donde volvería a pasar.
   -------------------------------------------------------------------------- */
/* El !important NO es pereza: premium.css declara
     .btn--primary { background: var(--dw-ink) !important; }
   y --dw-ink es --c-indigo-alto, o sea EXACTAMENTE el fondo del aviso. Una
   regla normal posterior no gana a un !important anterior por mucho que
   cargue después. Comprobado enumerando qué reglas casaban con el botón:
   sin esto el relleno seguía midiendo 1,00:1 contra el fondo. */
.dw-sobre-oscuro .btn--primary,
.cookie-consent  .btn--primary {
  background: var(--c-papel) !important;
  color: var(--c-indigo-alto) !important;   /* 15,51:1 */
  border-color: var(--c-papel) !important;  /* y así la forma se recorta */
}
.dw-sobre-oscuro .btn--primary:hover,
.cookie-consent  .btn--primary:hover {
  background: var(--c-lino) !important;
  border-color: var(--c-lino) !important;
}

.dw-sobre-oscuro .btn--ghost,
.cookie-consent  .btn--ghost,
.dw-sobre-oscuro .btn--outline,
.cookie-consent  .btn--outline {
  color: var(--c-papel);                  /* 15,51:1 sobre índigo-alto */
  border-color: var(--c-papel-borde);
}
.dw-sobre-oscuro .btn--ghost:hover,
.cookie-consent  .btn--ghost:hover,
.dw-sobre-oscuro .btn--outline:hover,
.cookie-consent  .btn--outline:hover {
  background: var(--c-papel-velo);
  border-color: var(--c-papel);
}

/* ============================================================================
   2 · ZONAS TÁCTILES — solo las CUATRO que nadie cubría

   ⚠️ Aquí me iba a repetir. `refinamiento.css` (sección 3) ya resuelve siete
   objetivos: hamburguesa, buscador, carrito, redes del pie, paginación y
   migas con un ::after invisible de 44×44, y `.header__btn-store`,
   `.sidebar__cat-link`, `.product-card__name a` y `.topbar__whatsapp` con
   min-height. Volver a declararlos aquí no arregla nada y en la cabecera
   habría engordado la maqueta, que es justo lo que aquella ronda evitó.

   Su media query es `max-width: 767px`. Esta usa la misma a propósito: con
   768 quedaba una franja de un píxel con dos criterios distintos.

   Quedan estas cuatro, que no las toca ninguna hoja anterior.
   ========================================================================== */
@media (max-width: 767px) {
  /* El botón de la tarjeta de producto medía 164×38. Aparece doce veces en
     /tienda y es el que más se toca de toda la web. Los del encabezado ya
     tienen el área ampliada con un ::after invisible desde refinamiento.css
     —comprobado, no supuesto: se midió el pseudoelemento, no solo la caja—,
     pero este no la tenía y era pequeño de verdad. */
  .btn, .btn--sm { min-height: var(--tacto-min); }

  /* Se salía del ancho de la pantalla */
  .sidebar__cat-link { max-width: 100%; box-sizing: border-box; }

  .header__social-link,
  .carrito-qty__btn,
  .tab-btn,
  .dw-card__quick {
    min-width: var(--tacto-min);
    min-height: var(--tacto-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ============================================================================
   2 bis · CATEGORÍA ACTIVA DEL LATERAL

   ⚠️ Aquí me equivoqué y lo corrijo con la medición delante. Escribí texto
   papel dando por hecho que el estado activo tenía fondo oscuro, porque mi
   primera sonda devolvió rgb(21,32,57) para el contador. Era la sonda: al no
   encontrar un fondo OPACO subía por los ancestros hasta dar con uno oscuro.
   El fondo propio del enlace activo es rgba(30,44,79,0.08) — un tinte CLARO.
   Con texto papel encima quedaba en 1,14:1. Va tinta oscura.

   El separador «/» de las migas sí era un gris #E5E7EB del clon: 1,19:1.
   ========================================================================== */
/* ⚠️ SEGUNDA CORRECCIÓN, y esta la vi midiendo la página ya desplegada.
   Escribí arriba que el fondo del enlace activo era el tinte claro
   rgba(30,44,79,0.08) y que por eso el texto debía ir oscuro. **Era falso.**
   Sobre producción, `getComputedStyle` devuelve `rgb(21,32,57)` OPACO: índigo
   oscuro. Con texto índigo encima daba **1,18:1** en la pantalla que más se
   usa, la de comprar.

   Comprobado además que no es artefacto de la sonda: componiendo las capas
   translúcidas sobre sus ancestros, el fondo real sigue siendo (21,32,57).

   Así que el estado activo se declara ENTERO —fondo y texto— en vez de
   confiar en lo que herede. Queda como una pastilla seleccionada, que es lo
   que un filtro activo debe parecer. 15,51:1. */
.sidebar__cat-link.active,
.sidebar__cat-link.active:hover {
  background: var(--c-indigo-alto);
  color: var(--c-papel);
}
/* El !important está comprobado, no supuesto: inyecté esta misma regla sobre
   la página viva con y sin él. Sin !important el contador seguía en 2,46:1,
   así que alguna hoja heredada lo fija con prioridad. */
.sidebar__cat-link.active span { color: var(--c-bruma) !important; }  /* 5,04:1 */
.sidebar__cat-link span        { color: var(--c-lavado) !important; } /* 6,31:1 */

/* ----------------------------------------------------------------------------
   EL BOTÓN DE WHATSAPP LLEVABA TEXTO BLANCO SOBRE VERDE: 1,98:1
   Es el defecto más caro de los que quedaban, porque está en la ficha de
   producto y es una de las dos formas de comprar. El verde de WhatsApp es
   claro: con blanco encima nunca llega a 4,5. Con tinta encima da 9,22:1 y
   se sigue reconociendo como WhatsApp, que es lo que tiene que pasar.
   -------------------------------------------------------------------------- */
.btn--whatsapp { color: var(--c-tinta) !important; }
.btn--whatsapp i { color: inherit; }


.breadcrumb__sep { color: var(--c-lavado); }                /* era 1,19:1 */

/* ============================================================================
   2 ter · LOS DOS FALLOS QUE DEJÓ MI PROPIO PUENTE DE TOKENS

   Al mapear `--dw-gold` (38 usos) a `--c-puntada` cambié de golpe todo lo que
   antes era oro. Bien para líneas y etiquetas; mal para lo que era TEXTO
   sobre fondo claro: el ámbar da 2,79:1 sobre papel. Es exactamente lo que
   yo mismo prohibí al elegir la paleta, y lo colé por la puerta de atrás.

   Y al revés: `--on-surface-variant` vale `--c-lavado`, pensado para fondo
   claro. Dentro de una sección de fondo oscuro daba 2,46:1.

   Se arregla en la capa de tokens, no regla a regla: basta con volver a
   declarar los tokens DENTRO del subárbol oscuro. Las propiedades
   personalizadas heredan, así que las 3.300 líneas de arriba se corrigen
   solas al entrar en ese contenedor.
   ========================================================================== */
.size-guide-options,
.dw-footer,
.cookie-consent,
.dw-hero,
.store-hero,
.dw-sobre-oscuro {
  --on-surface-variant: var(--c-bruma);
  --on-surface-dim:     var(--c-bruma);
  --dw-muted:           var(--c-bruma);
  --c-lavado:           var(--c-bruma);
  --dw-gold-sobre-claro:  var(--c-puntada);
  --c-puntada-tierra:     var(--c-puntada);
}

/* El antetítulo es TEXTO, no una línea: sobre claro va tierra (6,05:1), y
   dentro de un contenedor oscuro el token de arriba lo devuelve a ámbar.

   Hace falta repetir el patrón `[class*="hero"] [class*="eyebrow"]` porque
   refinamiento.css lo usa para pintarlos de ámbar, y ese selector vale 0-2-0
   mientras que `.section__eyebrow` vale 0-1-0: aunque esta hoja cargue
   después, con menos especificidad no gana. Aquella regla se escribió para
   el hero OSCURO de la portada y atrapa de paso el de `.size-guide-hero`,
   que es claro. */
[class*="hero"] [class*="eyebrow"],
.section__eyebrow,
.dw-eyebrow { color: var(--c-puntada-tierra); }

/* ============================================================================
   3 · TARJETA DE PRODUCTO
   Conviven dos sistemas heredados, .product-card y .dw-card. No se unifican
   por dentro (sería tocar markup de doce sitios): se les da el mismo aspecto
   desde fuera, que es lo que ve el cliente.
   ========================================================================== */
.product-card,
.dw-card {
  background: var(--c-papel);
  border: 1px solid var(--c-linea);
  border-radius: var(--radius-lg);
  box-shadow: none;
  overflow: hidden;
  transition: transform var(--dur-media) var(--curva-salida),
              box-shadow var(--dur-media) var(--curva-suave);
}
.product-card:hover,
.dw-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* El hueco de la foto se reserva ANTES de que la imagen llegue: sin esto la
   rejilla salta al cargar, que es el defecto que medí en 6 de 13 imágenes. */
.product-card__image-wrap,
.dw-card__media {
  aspect-ratio: 1 / 1;
  background: var(--c-lino);
  overflow: hidden;
}
.product-card__image,
.dw-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-larga) var(--curva-salida);
}
.product-card:hover .product-card__image,
.dw-card:hover .dw-card__media img { transform: scale(1.03); }

.product-card__category,
.dw-card__cat {
  font-family: var(--dw-texto);
  font-size: var(--paso-xs);
  font-weight: var(--peso-medio);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-lavado);
}
.product-card__name,
.dw-card__name {
  font-family: var(--dw-display);
  font-size: var(--paso-base);
  font-weight: var(--peso-fuerte);
  line-height: var(--alto-apretado);
  color: var(--c-tinta);
}
.product-card__summary { font-size: var(--paso-sm); color: var(--c-lavado); line-height: var(--alto-normal); }

/* El precio lleva la puntada debajo: es lo que el ojo busca en una rejilla */
.product-card__price,
.dw-card__price {
  font-family: var(--dw-display);
  font-size: var(--paso-lg);
  font-weight: var(--peso-titulo);
  color: var(--c-tinta);
  display: inline-block;
  padding-bottom: var(--e-1);
  border-bottom: var(--puntada-claro);
}

/* ============================================================================
   4 · ETIQUETAS
   ========================================================================== */
.badge {
  font-family: var(--dw-texto);
  font-size: var(--paso-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  padding: var(--e-1) var(--e-3);
}
.badge--new    { background: var(--c-indigo); color: var(--c-papel); }
/* «Oferta» y «-N%». El ámbar aquí es campo pequeño y lleva tinta encima:
   6,29:1. Es la única superficie ámbar que se permite en todo el sistema. */
.badge--sale   { background: var(--c-puntada); color: var(--c-tinta); }
.dw-card__flag { background: var(--c-indigo); color: var(--c-papel); }

/* ============================================================================
   5 · CAMPOS
   ========================================================================== */
/* No hay .form-select: los <select> del sitio llevan .form-input. El único
   que va sin clase es el de ordenar de /tienda, y por eso entra por su id. */
.form-input, .form-textarea,
#ordenar-select,
.header__search-form input,
.carrito-qty__input,
.tienda-toolbar select,
.busqueda-form input {
  font-family: var(--dw-texto);
  font-size: var(--paso-base);   /* 16px: por debajo, iOS hace zoom al enfocar */
  color: var(--c-tinta);
  background: var(--c-papel);
  border: 1px solid var(--c-linea);
  border-radius: var(--radius-md);
  min-height: var(--tacto-min);
  transition: border-color var(--dur-corta) var(--curva-suave);
}
.form-input:hover, .form-textarea:hover, #ordenar-select:hover { border-color: var(--c-lavado); }
.form-input::placeholder, .form-textarea::placeholder,
.header__search-form input::placeholder { color: var(--c-lavado); }

/* ============================================================================
   6 · PAGINACIÓN
   ⚠️ La clase «activo» va en el <li>, NO en el enlace:
       <li class="activo"><a href="…">3</a></li>   (functions.php:736)
   Pintar el fondo en el <li> y dejar el <a> con su color heredado da texto
   índigo sobre índigo. El fondo tiene que ir en el ENLACE, que es además la
   zona que se toca. Comprobado en el HTML servido, no supuesto.
   ========================================================================== */
.paginacion a {
  font-family: var(--dw-texto);
  font-size: var(--paso-sm);
  font-weight: var(--peso-medio);
  color: var(--c-indigo);
  border: 1px solid var(--c-linea);
  border-radius: var(--radius-md);
}
.paginacion a:hover { background: var(--c-indigo-velo); border-color: var(--c-indigo-borde); }

/* La página ACTUAL no se toca desde aquí. La pinta `refinamiento.css` con
   `!important` sobre `li.activo > a`, y un !important anterior gana a una
   regla normal posterior por mucho que ésta cargue después. Escribirla aquí
   sería código muerto que parece que funciona.
   Y no hace falta: usa var(--dw-gold) y var(--dw-ink), que tokens.css ya
   reapunta a la puntada y al índigo. Hereda la paleta nueva sola. */

/* ============================================================================
   7 · ESTADO DE CARGA — esqueleto, no la página atenuada
   Antes: opacity .42 sobre la rejilla. Atenuar no reserva el hueco, así que
   al llegar los datos la página saltaba. Esto mantiene la altura y dice que
   algo está pasando.
   ========================================================================== */
.productos-grid.is-loading { opacity: 1; pointer-events: none; }
.productos-grid.is-loading .product-card,
.productos-grid.is-loading .dw-card { opacity: 0.5; }
.productos-grid.is-loading .product-card__image-wrap,
.productos-grid.is-loading .dw-card__media {
  background: var(--c-lino);
  position: relative;
  overflow: hidden;
}
.productos-grid.is-loading .product-card__image-wrap::after,
.productos-grid.is-loading .dw-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--c-papel), transparent);
  opacity: 0.6;
  transform: translateX(-100%);
  animation: dw-esqueleto 1.1s var(--curva-suave) infinite;
}
@keyframes dw-esqueleto { to { transform: translateX(100%); } }

/* ============================================================================
   8 · SALIDA DE UN ARTÍCULO DEL CARRITO
   Sustituye a los `style.transition = 'all .3s ease'` que se escribían desde
   JavaScript. `all` anima también color y alto, que provoca reflujo; aquí
   solo se mueve lo que la GPU puede mover sola.
   ========================================================================== */
.dw-se-va {
  opacity: 0;
  transform: translateX(calc(var(--e-5) * -1));
  transition: opacity var(--dur-larga) var(--curva-suave),
              transform var(--dur-larga) var(--curva-salida);
}

/* ============================================================================
   10 · LO QUE ANTES IBA EN style=" " DENTRO DEL HTML
   Tres sitios escribían color y forma directamente en el atributo, con
   !important incluido para ganarle a premium.css. Aquí tienen clase y salen
   de tokens, que es lo que permite volver a cambiar la marca en un sitio.
   ========================================================================== */

/* Botón de contorno sobre el hero y sobre la franja oscura del pie.
   Sustituye a: style="color:#f4f1ea !important; border-color:rgba(255,255,255,.4) !important"
   El !important se mantiene porque premium.css declara el color del botón
   con !important; sin él, esta regla no gana por mucho que cargue después. */
.btn--sobre-oscuro {
  color: var(--c-papel) !important;              /* 15,51:1 sobre índigo-alto */
  border-color: var(--c-papel-borde) !important;
  background: transparent !important;
}
.btn--sobre-oscuro:hover {
  background: var(--c-papel-velo) !important;
  border-color: var(--c-papel) !important;
}

/* Marca de LinkedIn en el pie del artículo: color de un tercero, pero token
   igual, para que no vuelva a aparecer un hex suelto en el markup. */
.btn--linkedin { color: var(--c-linkedin); border-color: var(--c-linkedin-borde); }

/* Botón «Ampliar» sobre la foto del producto */
.btn-zoom-trigger {
  position: absolute;
  bottom: var(--e-4);
  right: var(--e-4);
  background: var(--c-tinta-velo);
  color: var(--c-papel);
  border: none;
  border-radius: var(--radius-full);
  padding: var(--e-2) var(--e-3);
  font-family: var(--dw-texto);
  font-size: var(--paso-xs);
  font-weight: var(--peso-medio);
  display: flex;
  align-items: center;
  gap: var(--e-2);
  cursor: pointer;
  z-index: 2;
  transition: opacity var(--dur-corta) var(--curva-suave);
}
.btn-zoom-trigger:hover { opacity: 0.86; }

/* ============================================================================
   11 · DURACIONES: traer a la escala lo que se salía
   El clon dejó transiciones de 0,4 a 1,1 segundos. Un zoom de foto de 1,1 s
   no se lee como elegante: se lee como que la página va lenta. Todo lo que
   el cliente toca de verdad baja a la escala de tokens (150–300 ms).
   Solo se listan las clases que EXISTEN; las demás se fueron con el CSS
   muerto de la tarjeta NFC.
   ========================================================================== */
.dw-hero__media img,
.dw-card__media img,
.blog-card__image img,
.product-card__image { transition-duration: var(--dur-larga); }
.dw-card__quick      { transition-duration: var(--dur-media); }

/* ============================================================================
   9 · MENOS MOVIMIENTO
   Nota: `refinamiento.css` ya trae un bloque global con !important que apaga
   toda animación y transición del sitio. Esto no lo repite: solo desactiva
   los desplazamientos concretos que aquí se introducen, porque una duración
   de 0,01 ms deja el elemento en su posición FINAL, y en un translate eso
   significa «movido», no «quieto».
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .btn-zoom-trigger { transition-duration: 1ms; }
  .productos-grid.is-loading .product-card__image-wrap::after,
  .productos-grid.is-loading .dw-card__media::after { animation: none; }
  .product-card, .dw-card, .btn,
  .product-card__image, .dw-card__media img, .dw-se-va { transition-duration: 1ms; }
  .product-card:hover, .dw-card:hover { transform: none; }
  .product-card:hover .product-card__image,
  .dw-card:hover .dw-card__media img { transform: none; }
}
