/*
Theme Name: Wears
Theme URI: https://cueroswears.com
Description: Tema de bloques de Cueros Wears (Inversiones Wearslife, C.A. — Venezuela). Replica del export de diseño aprobado. Todos los tokens salen de theme.json.
Author: Inversiones Wearslife, C.A.
Version: 1.10.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: wears
Tags: block-theme, e-commerce, full-site-editing
*/

/* ==========================================================================
   Tipografía — Poppins auto-alojada (06/08/2026)

   Sustituye a Archivo como única familia del sitio. Tres pesos y ninguno más:
   400 cuerpo, 500 navegación/etiquetas, 600 títulos y negritas. El 700 no se
   carga a propósito — la "negrita" de este tema es el 600, y cualquier
   font-weight mayor sintetizaría un falso bold.

   theme.json declara estas mismas caras en settings.typography.fontFamilies
   (así la fuente existe también en el editor); este @font-face duplicado es
   inocuo —mismo fichero, el navegador lo baja una sola vez— y cubre el CSS
   servido fuera de los estilos globales. Se sirve en local, sin CDN (RGPD).
   ========================================================================== */

@font-face {
	font-family: 'Poppins';
	src: url('assets/fonts/poppins-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('assets/fonts/poppins-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('assets/fonts/poppins-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* La negrita del navegador es 700 y ese peso no existe aquí: se fija al 600
   real para que <strong> y <b> no rendericen un bold sintético emborronado. */
strong,
b {
	font-weight: 600;
}

/* ==========================================================================
   Equivalente en bolívares (DWCW-185)

   Lo imprime el plugin wears-pagos bajo cada precio, a la tasa EUR del BCV.
   Va aquí y no en shop.css porque aparece en cualquier plantilla con precio:
   catálogo, ficha, cross-sell, carrito y checkout. Texto auxiliar: el precio
   protagonista sigue siendo el de USD.
   ========================================================================== */

.wears-precio-bs {
	display: block;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.6;
	color: rgba( 26, 22, 19, 0.62 );
}

/* Sobre el violeta del megamenú la tinta desaparece: variante clara. */
.wears-mega .wears-precio-bs {
	color: var( --wears-on-dark-70 );
	font-size: 12px;
}

/* ==========================================================================
   Caja

   El export lo declara en su primera línea (`*{box-sizing:border-box}`) y el
   tema no lo tenía. Sin esto, cualquier elemento con ancho en porcentaje **y**
   relleno se sale de su contenedor: era lo que desbordaba la barra de filtros
   9px en móvil, y habría vuelto a pasar en cada caja nueva.
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ==========================================================================
   Sin márgenes automáticos entre bloques hermanos

   WordPress escribe esto en sus estilos globales, a partir del `blockGap` de
   theme.json:

       :root :where(.is-layout-flow) > *        { margin-block-start: 24px }
       :root :where(.is-layout-constrained) > * { margin-block-start: 24px }
       :where(.wp-site-blocks) > *              { margin-block-start: 24px }

   O sea, 24px de separación entre **cualquier** par de hermanos, y lo mismo
   entre la cabecera, el contenido y el pie, que son los tres hijos de
   `.wp-site-blocks`. En este tema sobra y estorba: la regla del proyecto es
   agrupar con `gap`, y cada sección ya trae su propio relleno vertical de 40 a
   104px. Lo que añadía era una franja de fondo marfil entre secciones que
   deberían ir pegadas — se veía entre el hero y la cinta, entre el banner de
   colección y su barra de búsqueda, y encima del pie violeta. Contradice el
   «nada se ve montado» que pidió el cliente.

   Se anula con **la misma especificidad** que usa WordPress, no con más:
   `:root :where(…)` vale (0,1,0), igual que una clase. Como `style.css` se
   encola después de `global-styles`, esta regla gana; y como las hojas del
   tema (`home.css`, `shop.css`…) se encolan después de `style.css`, cualquier
   margen propio del tema —`.wears-oficio`, por ejemplo— sigue ganando a ésta.
   Con un `!important` o con más especificidad se habrían borrado también esos.

   El `gap` de flex y grid **no se toca**: lo usan la paginación del catálogo y
   los chips de filtro activo, que no declaran gap propio.
   ========================================================================== */

:root :where( .is-layout-flow ) > *,
:root :where( .is-layout-constrained ) > *,
:where( .wp-site-blocks ) > * {
	margin-block-start: 0;
}

/* ==========================================================================
   Sólo para lectores de pantalla

   WordPress la da por hecha y WooCommerce la usa mucho —la etiqueta del campo
   de cupón, por ejemplo— pero ningún estilo del núcleo la define en el front
   de un tema de bloques. Sin ella esas etiquetas ocupan sitio de verdad: era
   lo que sacaba barra horizontal en el carrito.

   Se oculta con `clip-path` y no con `display:none` para que el texto siga
   llegando al lector de pantalla.
   ========================================================================== */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	border: 0;
	clip-path: inset( 50% );
	white-space: nowrap;
	word-wrap: normal;
}

/* Al tabular hasta un enlace de salto, tiene que verse. */
.screen-reader-text:focus {
	z-index: 100000;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	padding: 14px 22px;
	border-radius: var( --wears-radius, 2px );
	background: var( --wp--preset--color--base );
	clip-path: none;
	color: var( --wp--preset--color--contrast );
	font-size: 14px;
	text-decoration: none;
}

/* ==========================================================================
   Tokens locales derivados de theme.json
   Nada de valores nuevos: todo sale de settings.custom del theme.json.
   ========================================================================== */

:root {
	--wears-radius: var( --wp--custom--radius, 2px );
	--wears-radius-media: var( --wp--custom--radius-media, 12px );
	--wears-radius-card: var( --wp--custom--radius-card, 8px );
	--wears-easing: var( --wp--custom--easing, cubic-bezier( 0.22, 1, 0.36, 1 ) );
	--wears-duration-micro: var( --wp--custom--duration--micro, 0.28s );
	--wears-duration-block: var( --wp--custom--duration--block, 0.9s );
	--wears-duration-panel: var( --wp--custom--duration--panel, 0.44s );
	--wears-duration-image: var( --wp--custom--duration--image, 1.1s );

	/* DWCW-202: el aire entre secciones sale de un solo token. QA encontró
	   franjas de 104–128px sueltas por las hojas; la escala aprobada dice
	   48–96 con clamp y esto la hace imposible de desobedecer sin querer. */
	--wears-seccion: var( --wp--custom--seccion--aire, clamp( 48px, 6.5vw, 96px ) );

	/* Filetes: contrast al 18 % sobre marfil, base al 30 % sobre violeta. */
	--wears-rule-light: rgba( 26, 22, 19, 0.18 );
	--wears-rule-dark: rgba( 237, 230, 216, 0.3 );
}

/* ==========================================================================
   Forma — tres radios, no uno

   El export venía con 2px en todo. DWCW-176 pide suavizar las puntas de
   imágenes y vídeos para que no queden como cuadros rígidos, así que la
   escala se abre en tres:

     media (12px)  fotos, vídeos, portadas — el gesto que pidió el cliente
     card  (8px)   tarjetas, paneles, drawer, acordeones
     base  (2px)   botones, campos y chips: siguen siendo de vitrina

   Los filetes y las líneas no llevan radio en ningún caso.
   ========================================================================== */

img,
video,
.wp-block-image img,
.wp-block-post-featured-image img,
.wp-block-cover,
.wp-block-video video,
.wp-block-embed iframe {
	border-radius: var( --wears-radius-media );
}

.wp-block-button__link,
.wp-element-button,
.wp-block-search__input,
.wp-block-search__button,
input[ type='text' ],
input[ type='email' ],
input[ type='tel' ],
input[ type='number' ],
input[ type='password' ],
input[ type='search' ],
input[ type='url' ],
select,
textarea {
	border-radius: var( --wears-radius );
}

/* El recorte va en el marco, no en la foto: si el contenedor tiene overflow
   oculto para el hover, es él quien tiene que llevar el radio. */
.wears-media,
.is-style-media {
	border-radius: var( --wears-radius-media );
}

.wears-media img,
.wears-media video,
.is-style-media img,
.is-style-media video {
	border-radius: 0;
}

/* Un logo o una firma recortada por la esquina se ve mal: el radio es para
   fotografía, no para marcas. */
.wears-logo img,
.custom-logo,
.wp-block-site-logo img {
	border-radius: 0;
}

/* ==========================================================================
   Movimiento — una sola curva
   ========================================================================== */

/* Micro: color y borde. */
a,
.wp-block-button__link,
.wp-element-button,
.wears-swatch {
	transition:
		color var( --wears-duration-micro ) var( --wears-easing ),
		background-color var( --wears-duration-micro ) var( --wears-easing ),
		border-color var( --wears-duration-micro ) var( --wears-easing );
}

/* Entrada de bloque: fade + 24px de subida, 0.9s, escalonado 90ms (JS),
   se dispara al entrar en viewport una sola vez. */
.wears-reveal,
.is-style-reveal {
	opacity: 0;
	transform: translateY( 24px );
	transition:
		opacity var( --wears-duration-block ) var( --wears-easing ),
		transform var( --wears-duration-block ) var( --wears-easing );
	will-change: opacity, transform;
}

.wears-reveal.is-revealed,
.is-style-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* En el editor los bloques deben verse siempre: allí no corre el observador. */
.editor-styles-wrapper .wears-reveal,
.editor-styles-wrapper .is-style-reveal {
	opacity: 1;
	transform: none;
}

/* Panel / drawer: un único plano que se desliza completo. */
.wears-panel {
	transform: translateX( 100% );
	transition: transform var( --wears-duration-panel ) var( --wears-easing );
}

.wears-panel.is-open {
	transform: translateX( 0 );
}

/* Hover de imagen: la foto respira, la tarjeta no se mueve.
   Nunca sombra ni elevación. */
.wears-media,
.is-style-media {
	position: relative;
	display: block;
	overflow: hidden;
}

.wears-media img,
.wears-media video,
.is-style-media img,
.is-style-media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: center;
	transition: transform var( --wears-duration-image ) var( --wears-easing );
}

.wears-media:hover img,
.wears-media:focus-visible img,
.wears-media:hover video,
.is-style-media:hover img,
.is-style-media:focus-visible img,
.is-style-media:hover video {
	transform: scale( 1.07 );
}

/* Prohibido en todo el sitio: bounce, rotate, parpadeo, sombra genérica. */
.wp-block-image,
.wp-block-cover,
.wp-block-group,
.wp-block-column {
	box-shadow: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.wears-reveal,
	.is-style-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.wears-panel {
		transition: none;
	}

	.wears-media img,
	.wears-media video,
	.is-style-media img,
	.is-style-media video {
		transition: none;
	}

	.wears-media:hover img,
	.wears-media:focus-visible img,
	.wears-media:hover video,
	.is-style-media:hover img,
	.is-style-media:focus-visible img,
	.is-style-media:hover video {
		transform: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   Elemento de firma — el ancla en línea fina dorada
   Máximo una por pantalla larga, siempre centrada entre dos filetes.
   ========================================================================== */

.wears-anchor {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 18px;
}

/* Los filetes crecen hasta 200px cada uno. Necesitan base declarada:
   dentro de un contenedor que se encoge al contenido, flex:1 daría 0.
   Van como ondas —las mismas de los eyebrows— en vez de línea recta. */
.wears-anchor__rule {
	flex: 1 1 200px;
	max-width: 200px;
	height: 8px;
	background: var( --wears-rule-light );
	mask: var( --wears-ola ) repeat-x;
	mask-size: 32px 8px;
	-webkit-mask: var( --wears-ola ) repeat-x;
	-webkit-mask-size: 32px 8px;
}

/* En línea: el ancla sola, sin filetes ni ancho propio. */
.wears-anchor--linea {
	display: inline-flex;
	width: auto;
}

/* El ancla del logo (DWCW-172): el lockup completo —ancla circulada y la
   caligrafía «Wears»— como máscara, coloreado por el fondo del elemento.
   Dorado por defecto, como manda el sistema. El fichero es el mismo del
   logo de cabecera, así no hay dos versiones que mantener. */
.wears-anchor__mark {
	display: block;
	flex: none;
	background: var( --wp--preset--color--accent );
	aspect-ratio: 600 / 619;
	mask: url( 'assets/img/logo-wears.png' ) center / contain no-repeat;
	-webkit-mask: url( 'assets/img/logo-wears.png' ) center / contain no-repeat;
}

.wears-anchor__mark--linea {
	width: 30px;
}

.wears-anchor__mark--divisor {
	width: 52px;
}

.wears-anchor__mark--hito {
	width: 76px;
}

/* Sobre fondo violeta los filetes cambian de tono, el ancla no. */
.has-primary-background-color .wears-anchor__rule,
.has-primary-hover-background-color .wears-anchor__rule,
.wears-anchor--on-dark .wears-anchor__rule {
	background: var( --wears-rule-dark );
}

/* Hito: sin filetes, el ancla sola marca el corte. */
.wears-anchor--hito {
	gap: 0;
}

/* ==========================================================================
   Tipografía — reglas que theme.json no puede expresar
   ========================================================================== */

/* Eyebrow / etiqueta: 11px, 600, 0.22em, uppercase, madera natural. */
.wears-eyebrow,
.is-style-eyebrow {
	font-size: var( --wp--preset--font-size--label );
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --wp--preset--color--support );
}

/* Medidas de línea. */
.wears-measure-body {
	max-width: var( --wp--custom--measure--body, 38ch );
}

.wears-measure-small {
	max-width: var( --wp--custom--measure--small, 34ch );
}

/* Nombre de producto: 17px / 600 / 1.3 / sin tracking. */
.wears-product-name {
	font-size: var( --wp--preset--font-size--product );
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
}

/* Auxiliar: 13px / 400 / 1.6. */
.wears-aux {
	font-size: var( --wp--preset--font-size--small );
	font-weight: 400;
	line-height: 1.6;
}

/* ==========================================================================
   Accesibilidad — foco visible por teclado (WCAG 2.1 AA)
   ========================================================================== */

:where( a, button, input, select, textarea, summary, [ tabindex ] ):focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 2px;
}

/* ==========================================================================
   SESIÓN 2 — Cabecera, menú móvil y pie
   Valores literales de Header.dc.html, "Menú móvil - Cueros Wears.dc.html" y
   del pie de "Home - Cueros Wears.dc.html". El punto de corte entre móvil y
   escritorio es 900px, el mismo del export.
   ========================================================================== */

:root {
	/* Marfil sobre fondo oscuro. El export usa nueve alfas distintas; están
	   todas aquí para no repetir números rgba() por la hoja. */
	--wears-on-dark-05: rgba( 237, 230, 216, 0.05 );
	--wears-on-dark-06: rgba( 237, 230, 216, 0.06 );
	--wears-on-dark-10: rgba( 237, 230, 216, 0.1 );
	--wears-on-dark-12: rgba( 237, 230, 216, 0.12 );
	--wears-on-dark-14: rgba( 237, 230, 216, 0.14 );
	--wears-on-dark-22: rgba( 237, 230, 216, 0.22 );
	--wears-on-dark-26: rgba( 237, 230, 216, 0.26 );
	--wears-on-dark-30: rgba( 237, 230, 216, 0.3 );
	--wears-on-dark-40: rgba( 237, 230, 216, 0.4 );
	--wears-on-dark-42: rgba( 237, 230, 216, 0.42 );
	--wears-on-dark-45: rgba( 237, 230, 216, 0.45 );
	--wears-on-dark-50: rgba( 237, 230, 216, 0.5 );
	--wears-on-dark-55: rgba( 237, 230, 216, 0.55 );
	--wears-on-dark-60: rgba( 237, 230, 216, 0.6 );
	--wears-on-dark-62: rgba( 237, 230, 216, 0.62 );
	--wears-on-dark-70: rgba( 237, 230, 216, 0.7 );

	--wears-bar-bg: rgba( 28, 0, 87, 0.95 );
	--wears-bar-bg-hero: rgba( 28, 0, 87, 0.32 );
	--wears-bar-line: rgba( 176, 141, 79, 0.5 );
	--wears-mega-line: rgba( 176, 141, 79, 0.4 );
	--wears-search-line: rgba( 176, 141, 79, 0.35 );
	--wears-veil-bg: rgba( 28, 0, 87, 0.4 );
	--wears-search-bg: rgba( 28, 0, 87, 0.5 );

	--wears-bar-max: var( --wp--custom--bar--max, 1440px );
	--wears-bar-gutter: var( --wp--custom--bar--gutter, clamp( 20px, 3vw, 44px ) );
	--wears-bar-pad: var( --wp--custom--bar--pad, 14px );
	--wears-bar-pad-scrolled: var( --wp--custom--bar--pad-scrolled, 10px );
	--wears-duration-mega: var( --wp--custom--duration--mega, 0.32s );
	--wears-logo-h: var( --wp--custom--logo--mobile, 56px );
}

@media ( min-width: 900px ) {
	:root {
		--wears-logo-h: var( --wp--custom--logo--desktop, 68px );
	}
}

@keyframes wears-drop {
	from {
		opacity: 0;
		transform: translateY( -10px );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes wears-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* Mientras el drawer ocupa la pantalla, la página de debajo no se desplaza. */
html.wears-bloqueado,
html.wears-bloqueado body {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Barra
   -------------------------------------------------------------------------- */

.wears-header {
	position: sticky;
	top: 0;
	z-index: var( --wp--custom--z--bar, 70 );
	color: var( --wp--preset--color--base );
	border-bottom: 1px solid var( --wears-bar-line );
	padding-block: var( --wears-bar-pad );
	transition:
		padding var( --wears-duration-micro ) var( --wears-easing ),
		border-color var( --wears-duration-micro ) var( --wears-easing );
}

/* El desenfoque va en una capa aparte a propósito. `backdrop-filter` sobre el
   propio <header> lo convertiría en bloque contenedor y el drawer, que es
   position:fixed y cuelga de aquí, quedaría anclado a la barra en vez de a la
   ventana. */
.wears-header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var( --wears-bar-bg );
	backdrop-filter: blur( 12px );
	transition: background var( --wears-duration-micro ) var( --wears-easing );
}

.wears-header.is-scrolled {
	padding-block: var( --wears-bar-pad-scrolled );
}

/* Sobre una pieza a sangre la barra flota translúcida; en cuanto se baja o se
   abre un panel vuelve a ser opaca. */
.wears-header.is-over-hero {
	position: fixed;
	inset-inline: 0;
	border-bottom-color: var( --wears-on-dark-12 );
}

.wears-header.is-over-hero::before {
	background: var( --wears-bar-bg-hero );
}

.wears-header.is-over-hero.is-scrolled,
.wears-header.is-over-hero.is-solid {
	border-bottom-color: var( --wears-bar-line );
}

.wears-header.is-over-hero.is-scrolled::before,
.wears-header.is-over-hero.is-solid::before {
	background: var( --wears-bar-bg );
}

.wears-header__bar {
	position: relative;
	z-index: 3;
	display: flex;
	max-width: var( --wears-bar-max );
	align-items: center;
	justify-content: space-between;
	margin-inline: auto;
	padding-inline: var( --wears-bar-gutter );
	gap: 20px;
}

.wears-header__bar > *,
.wears-header__left > * {
	margin-block: 0;
}

.wears-header__left {
	display: flex;
	min-width: 0;
	flex: 1 1 0;
	align-items: center;
	gap: 26px;
}

/* --------------------------------------------------------------------------
   Botón de menú, disparador del megamenú y navegación de escritorio
   -------------------------------------------------------------------------- */

.wears-burger {
	display: flex;
	padding: 6px 2px;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.wears-megatrigger {
	display: none;
	align-items: center;
	padding: 6px 0;
	border: 0;
	border-bottom: 1px solid transparent;
	background: none;
	color: inherit;
	cursor: pointer;
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	gap: 7px;
	transition:
		color var( --wears-duration-micro ) var( --wears-easing ),
		border-color var( --wears-duration-micro ) var( --wears-easing );
}

.wears-megatrigger:hover,
.wears-megatrigger.is-active {
	border-bottom-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--accent );
}

/* En una página de tienda —catálogo, colección o ficha— «Tienda» queda
   marcado como sección actual con el mismo trazo del hover. El giro del
   chevron se reserva para cuando el panel está abierto. */
.woocommerce-shop .wears-megatrigger,
.tax-product_cat .wears-megatrigger,
.single-product .wears-megatrigger {
	border-bottom-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--accent );
}

.wears-megatrigger svg {
	transition: transform var( --wears-duration-micro ) var( --wears-easing );
}

.wears-megatrigger.is-active svg {
	transform: rotate( 180deg );
}

/* Sobre el elemento <nav>, no sobre .wears-nav a secas: el bloque de
   navegación repite la clase en el <ul> y ahí sí hace falta el flex de core. */
.wears-header nav.wears-nav {
	display: none;
}

.wears-nav .wp-block-navigation-item__content {
	padding: 6px 0;
	border-bottom: 1px solid transparent;
	color: var( --wp--preset--color--base );
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition:
		color var( --wears-duration-micro ) var( --wears-easing ),
		border-color var( --wears-duration-micro ) var( --wears-easing );
}

.wears-nav .wp-block-navigation-item__content:hover,
.wears-nav .current-menu-item > .wp-block-navigation-item__content {
	border-bottom-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--accent );
}

@media ( min-width: 900px ) {
	.wears-burger {
		display: none;
	}

	.wears-megatrigger {
		display: flex;
	}

	.wears-header nav.wears-nav {
		display: flex;
	}
}

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */

.wears-header__logo {
	flex-shrink: 0;
}

/* El selector va cargado a propósito: core sirve
   `.wp-block-site-logo.is-default-size img { width: 120px }` y en el export el
   logo se mide por alto, no por ancho. */
.wears-header .wp-block-site-logo.wears-header__logo img {
	display: block;
	width: auto;
	max-width: none;
	height: var( --wears-logo-h );
	transition: height var( --wears-duration-micro ) var( --wears-easing );
}

.wears-header.is-scrolled .wp-block-site-logo.wears-header__logo img {
	height: var( --wp--custom--logo--scrolled, 48px );
}

/* --------------------------------------------------------------------------
   Acciones: buscar, cuenta, carrito
   -------------------------------------------------------------------------- */

.wears-actions {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: flex-end;
	gap: clamp( 14px, 1.6vw, 20px );
}

.wears-actions__btn {
	display: flex;
	padding: 5px;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	opacity: 0.85;
	transition: opacity var( --wears-duration-micro ) var( --wears-easing );
}

/* `min-height` y algo de aire lateral: en móvil el enlace del carrito medía
   18×25px, que es media yema de dedo. */
.wears-actions__link {
	display: flex;
	min-height: 40px;
	align-items: center;
	padding-inline: 4px;
	color: var( --wp--preset--color--base );
	gap: 8px;
	opacity: 0.85;
	text-decoration: none;
	transition: opacity var( --wears-duration-micro ) var( --wears-easing );
}

.wears-actions__btn:hover,
.wears-actions__link:hover {
	color: var( --wp--preset--color--base );
	opacity: 1;
}

.wears-actions__label {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.wears-actions__cart {
	padding-block: 4px;
	gap: 9px;
}

.wears-actions__cart-icon {
	position: relative;
	display: flex;
}

/* Píldora, no cuadrado de 2px: es la única excepción de forma del export y
   está en su marcado, no es una decisión nueva. */
.wears-actions__count {
	position: absolute;
	top: -6px;
	right: -7px;
	display: flex;
	min-width: 16px;
	height: 16px;
	align-items: center;
	justify-content: center;
	padding-inline: 4px;
	border-radius: 8px;
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--primary );
	font-size: 9px;
	font-weight: 600;
}

.wears-actions__count.is-empty {
	display: none;
}

.wears-actions__divider {
	width: 1px;
	height: 16px;
	background: var( --wears-on-dark-22 );
}

/* En móvil la barra sólo lleva buscar y carrito: cuenta y etiquetas viven en
   el drawer. */
.wears-actions__account,
.wears-actions__divider,
.wears-actions__cart .wears-actions__label {
	display: none;
}

@media ( min-width: 900px ) {
	.wears-actions__account {
		display: flex;
	}

	.wears-actions__divider {
		display: block;
	}

	.wears-actions__cart .wears-actions__label {
		display: inline;
	}
}

/* --------------------------------------------------------------------------
   Buscador de la barra
   -------------------------------------------------------------------------- */

.wears-search {
	position: relative;
	z-index: 3;
	margin-top: var( --wears-bar-pad );
	border-top: 1px solid var( --wears-search-line );
	background: var( --wears-search-bg );
}

.wears-header.is-scrolled .wears-search {
	margin-top: var( --wears-bar-pad-scrolled );
}

.wears-search.is-open {
	animation: wears-fade var( --wears-duration-micro ) var( --wears-easing ) both;
}

.wears-search__inner {
	max-width: var( --wears-bar-max );
	margin-inline: auto;
	padding: 16px var( --wears-bar-gutter );
}

.wears-search__field {
	position: relative;
	max-width: 640px;
	margin-inline: auto;
}

.wears-search__input {
	width: 100%;
	padding: 14px 44px 14px 42px;
	border: 1px solid var( --wears-on-dark-30 );
	background: var( --wears-on-dark-06 );
	color: var( --wp--preset--color--base );
	font-family: inherit;
	font-size: 15px;
	outline: none;
	transition: border-color var( --wears-duration-micro ) var( --wears-easing );
}

.wears-search__input::placeholder {
	color: var( --wears-on-dark-62 );
}

.wears-search__input:focus {
	border-color: var( --wp--preset--color--accent );
}

.wears-search__icon {
	position: absolute;
	top: 50%;
	left: 14px;
	opacity: 0.55;
	transform: translateY( -50% );
}

.wears-search__close {
	position: absolute;
	top: 50%;
	right: 12px;
	padding: 6px;
	border: 0;
	background: none;
	color: var( --wp--preset--color--base );
	cursor: pointer;
	opacity: 0.6;
	transform: translateY( -50% );
}

.wears-search__results {
	display: flex;
	max-width: 640px;
	flex-direction: column;
	margin: 14px auto 0;
	gap: 2px;
}

.wears-search__empty {
	max-width: 640px;
	margin: 16px auto 0;
	color: var( --wears-on-dark-60 );
	font-size: 13px;
	line-height: 1.7;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Fila de resultado — compartida por la barra y el drawer
   -------------------------------------------------------------------------- */

.wears-result {
	display: flex;
	align-items: center;
	padding: 10px 6px;
	border-bottom: 1px solid var( --wears-on-dark-10 );
	gap: 13px;
	text-decoration: none;
	transition:
		padding-left var( --wears-duration-micro ) var( --wears-easing ),
		background var( --wears-duration-micro ) var( --wears-easing );
}

.wears-result:hover {
	padding-left: 12px;
}

.wears-result__thumb {
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	background-color: var( --wp--preset--color--primary );
	background-position: center;
	background-size: cover;
}

.wears-result__text {
	min-width: 0;
	flex: 1;
}

.wears-result__name {
	display: block;
	color: var( --wp--preset--color--base );
	font-size: 14px;
	font-weight: 600;
}

.wears-result__meta {
	display: block;
	color: var( --wears-on-dark-70 );
	font-size: 11px;
}

.wears-result__price {
	color: var( --wp--preset--color--base );
	font-size: 13px;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Megamenú
   -------------------------------------------------------------------------- */

.wears-mega {
	position: absolute;
	z-index: 2;
	top: 100%;
	left: 0;
	right: 0;
	border-top: 1px solid var( --wears-mega-line );
	border-bottom: 1px solid var( --wears-mega-line );
	background: var( --wp--preset--color--primary-hover );
	box-shadow: 0 30px 60px rgba( 0, 0, 0, 0.4 );
}

.wears-mega.is-open {
	animation: wears-drop var( --wears-duration-mega ) var( --wears-easing ) both;
}

.wears-mega__inner {
	display: grid;
	max-width: var( --wears-bar-max );
	margin-inline: auto;
	padding: clamp( 28px, 3vw, 40px ) var( --wears-bar-gutter );
	grid-template-columns: 2.4fr 1fr;
	gap: clamp( 28px, 3.5vw, 56px );
}

.wears-mega__eyebrow {
	display: flex;
	align-items: center;
	margin: 0 0 22px;
	color: var( --wp--preset--color--accent );
	font-size: 10px;
	font-weight: 600;
	gap: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.wears-mega__eyebrow.is-solo {
	display: block;
	margin-bottom: 16px;
	letter-spacing: 0.2em;
}

.wears-mega__rule {
	display: block;
	width: 26px;
	height: 1px;
	background: currentColor;
}

.wears-mega__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 18px 26px;
}

.wears-mega__card {
	display: flex;
	align-items: center;
	gap: 13px;
	text-decoration: none;
	transition: transform var( --wears-duration-micro ) var( --wears-easing );
}

.wears-mega__card:hover {
	transform: translateX( 4px );
}

.wears-mega__thumb {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	background-color: var( --wp--preset--color--primary );
	background-position: center;
	background-size: cover;
}

.wears-mega__card-text {
	min-width: 0;
}

.wears-mega__card-name {
	display: block;
	margin-bottom: 3px;
	color: var( --wp--preset--color--base );
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.wears-mega__card-meta {
	display: block;
	color: var( --wears-on-dark-70 );
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.wears-mega__links {
	display: flex;
	flex-wrap: wrap;
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid var( --wears-on-dark-14 );
	gap: 26px;
}

.wears-mega__link {
	color: var( --wears-on-dark-70 );
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color var( --wears-duration-micro ) var( --wears-easing );
}

.wears-mega__link:hover {
	color: var( --wp--preset--color--accent );
}

.wears-mega__link.is-primary {
	padding-bottom: 3px;
	border-bottom: 1px solid var( --wp--preset--color--accent );
	color: var( --wp--preset--color--base );
	font-weight: 600;
}

.wears-mega__feature {
	display: flex;
	flex-direction: column;
	padding-left: clamp( 24px, 3vw, 44px );
	border-left: 1px solid var( --wears-on-dark-14 );
	text-decoration: none;
}

.wears-mega__feature-img {
	width: 100%;
	margin-bottom: 14px;
	aspect-ratio: 4 / 3;
	background-color: var( --wp--preset--color--primary );
	background-position: center;
	background-size: cover;
}

.wears-mega__feature-name {
	margin-bottom: 5px;
	color: var( --wp--preset--color--base );
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.wears-mega__feature-desc {
	margin-bottom: 10px;
	color: var( --wears-on-dark-70 );
	font-size: 12px;
	line-height: 1.6;
}

/* El precio del destacado del megamenú, sobre fondo violeta. */
.wears-mega__feature-precio {
	align-self: flex-start;
	color: var( --wp--preset--color--base );
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* Dato que el cliente todavía no ha entregado. Se marca, no se inventa. */
.wears-placeholder {
	display: inline-block;
	align-self: flex-start;
	padding: 4px 8px;
	border: 1px dashed currentColor;
	border-radius: var( --wears-radius );
	color: var( --wp--preset--color--accent );
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Velo del megamenú
   -------------------------------------------------------------------------- */

.wears-veil {
	position: fixed;
	z-index: 1;
	inset: 0;
	background: var( --wears-veil-bg );
}

.wears-veil.is-open {
	animation: wears-fade var( --wears-duration-micro ) var( --wears-easing ) both;
}

/* --------------------------------------------------------------------------
   Menú móvil
   Las capas del drawer se numeran dentro del contexto de apilado del header
   (z-index 70), no en el del documento: por eso 4 basta para tapar la barra.
   -------------------------------------------------------------------------- */

.wears-drawer {
	position: fixed;
	z-index: 4;
	display: flex;
	flex-direction: column;
	inset: 0;
	background: var( --wp--preset--color--primary );
	opacity: 0;
	pointer-events: none;
	transform: translateX( -100% );
	/* `visibility` saca el panel cerrado del orden de tabulación. Sin ella, con
	   opacity:0 los enlaces del drawer siguen siendo alcanzables con Tab desde
	   la página de debajo. Se retrasa hasta que termina el deslizamiento. */
	visibility: hidden;
	transition:
		transform var( --wears-duration-panel ) var( --wears-easing ),
		opacity var( --wears-duration-micro ) var( --wears-easing ),
		visibility 0s linear var( --wears-duration-panel );
}

.wears-drawer.is-open {
	opacity: 1;
	pointer-events: auto;
	transform: none;
	visibility: visible;
	transition:
		transform var( --wears-duration-panel ) var( --wears-easing ),
		opacity var( --wears-duration-micro ) var( --wears-easing ),
		visibility 0s;
}

.wears-drawer__top {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: space-between;
	padding: 16px clamp( 18px, 4vw, 24px );
	border-bottom: 1px solid var( --wears-on-dark-12 );
}

.wears-drawer__top .custom-logo-link {
	display: block;
}

.wears-drawer__top img {
	display: block;
	width: auto;
	max-width: none;
	height: 52px;
}

.wears-drawer__close {
	display: flex;
	padding: 6px;
	border: 0;
	background: none;
	color: var( --wp--preset--color--base );
	cursor: pointer;
}

.wears-drawer__search {
	flex-shrink: 0;
	padding: 14px clamp( 18px, 4vw, 24px );
}

.wears-drawer__field {
	position: relative;
}

.wears-drawer__field .wears-icon--buscar {
	position: absolute;
	top: 50%;
	left: 13px;
	color: var( --wp--preset--color--base );
	opacity: 0.5;
	transform: translateY( -50% );
}

.wears-drawer__input {
	width: 100%;
	padding: 13px 40px 13px 38px;
	border: 1px solid var( --wears-on-dark-26 );
	background: var( --wears-on-dark-06 );
	color: var( --wp--preset--color--base );
	font-family: inherit;
	font-size: 14px;
	outline: none;
	transition: border-color var( --wears-duration-micro ) var( --wears-easing );
}

.wears-drawer__input::placeholder {
	color: var( --wears-on-dark-62 );
}

.wears-drawer__input:focus,
.wears-drawer__input.has-query {
	border-color: var( --wp--preset--color--accent );
}

.wears-drawer__clear {
	position: absolute;
	top: 50%;
	right: 11px;
	padding: 6px;
	border: 0;
	background: none;
	color: var( --wp--preset--color--base );
	cursor: pointer;
	opacity: 0.55;
	transform: translateY( -50% );
}

.wears-drawer__body {
	flex: 1;
	padding: 0 clamp( 18px, 4vw, 24px ) 24px;
	overflow-y: auto;
}

.wears-drawer__eyebrow {
	display: flex;
	align-items: center;
	margin: 0 0 14px;
	color: var( --wears-on-dark-70 );
	font-size: 10px;
	font-weight: 500;
	gap: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* Subcabecera de grupo por público dentro de la lista de colecciones
   (DWCW-188): Caballero · Dama · Accesorios · Niños. */
.wears-drawer__publico {
	margin: 18px 0 6px;
	color: var( --wp--preset--color--accent );
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.wears-drawer__publico:first-child {
	margin-top: 0;
}

.wears-drawer__rule {
	display: block;
	width: 22px;
	height: 1px;
	background: var( --wp--preset--color--accent );
}

.wears-drawer__collections {
	display: flex;
	flex-direction: column;
	margin-bottom: 26px;
	gap: 2px;
}

.wears-drawer__collection {
	display: flex;
	align-items: center;
	padding: 11px 10px 11px 0;
	border-bottom: 1px solid var( --wears-on-dark-10 );
	gap: 14px;
	text-decoration: none;
	transition:
		padding-left var( --wears-duration-micro ) var( --wears-easing ),
		background var( --wears-duration-micro ) var( --wears-easing );
}

.wears-drawer__collection:hover {
	padding-left: 8px;
	background: var( --wears-on-dark-05 );
}

.wears-drawer__thumb {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	background-color: var( --wp--preset--color--primary );
	background-position: center;
	background-size: cover;
}

.wears-drawer__collection-text {
	min-width: 0;
	flex: 1;
}

.wears-drawer__collection-name {
	display: block;
	margin-bottom: 2px;
	color: var( --wp--preset--color--base );
	font-size: 15px;
	font-weight: 500;
	line-height: 1.25;
}

.wears-drawer__collection-count {
	display: block;
	color: var( --wears-on-dark-70 );
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wears-drawer__collection .wears-icon--chevron {
	flex-shrink: 0;
	color: var( --wp--preset--color--accent );
}

.wears-drawer__all {
	display: block;
	padding: 16px 0 4px;
	color: var( --wp--preset--color--accent );
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
}

.wears-drawer__nav {
	display: flex;
	flex-direction: column;
}

.wears-drawer__nav a {
	padding: 16px 0;
	border-bottom: 1px solid var( --wears-on-dark-14 );
	color: var( --wp--preset--color--base );
	font-size: 19px;
	font-weight: 500;
	letter-spacing: -0.01em;
	text-decoration: none;
}

.wears-drawer__nav a:hover {
	color: var( --wp--preset--color--accent );
}

.wears-drawer__utils {
	display: flex;
	flex-direction: column;
	padding-top: 26px;
	gap: 20px;
}

.wears-drawer__utils a {
	display: flex;
	align-items: center;
	color: var( --wp--preset--color--base );
	font-size: 14px;
	font-weight: 500;
	gap: 13px;
	text-decoration: none;
	transition: color var( --wears-duration-micro ) var( --wears-easing );
}

.wears-drawer__utils a:hover {
	color: var( --wp--preset--color--accent );
}

.wears-drawer__utils a.is-accent {
	color: var( --wp--preset--color--accent );
	font-weight: 600;
}

.wears-drawer__cta {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var( --wears-on-dark-14 );
}

.wears-drawer__soporte {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 15px;
	border-radius: var( --wears-radius );
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--primary );
	font-size: 11px;
	font-weight: 600;
	gap: 10px;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
}

.wears-drawer__soporte:hover {
	color: var( --wp--preset--color--primary );
}

.wears-drawer__results-label {
	margin: 0 0 14px;
	color: var( --wears-on-dark-70 );
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.wears-drawer__results {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wears-drawer__results .wears-result {
	padding: 11px 8px 11px 0;
}

.wears-drawer__results .wears-result:hover {
	padding-left: 8px;
	background: var( --wears-on-dark-05 );
}

.wears-drawer__results .wears-result__thumb {
	width: 52px;
	height: 52px;
}

.wears-drawer__empty {
	padding: 34px 8px;
	text-align: center;
}

.wears-drawer__empty .wears-anchor__mark {
	margin: 0 auto 18px;
	opacity: 0.65;
}

.wears-drawer__empty-title {
	margin: 0 0 8px;
	color: var( --wp--preset--color--base );
	font-size: 16px;
	font-weight: 600;
}

.wears-drawer__empty-text {
	margin: 0 0 22px;
	color: var( --wears-on-dark-70 );
	font-size: 13px;
	line-height: 1.65;
}

.wears-drawer__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

/* Radio 14px: la ficha es literal del export. Es la segunda y última excepción
   a los 2px, junto al contador del carrito. */
.wears-drawer__chips button {
	padding: 8px 14px;
	border: 1px solid var( --wears-on-dark-22 );
	border-radius: 14px;
	background: var( --wears-on-dark-06 );
	color: var( --wp--preset--color--base );
	cursor: pointer;
	font-family: inherit;
	font-size: 11px;
	transition:
		color var( --wears-duration-micro ) var( --wears-easing ),
		border-color var( --wears-duration-micro ) var( --wears-easing );
}

.wears-drawer__chips button:hover {
	border-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--accent );
}

/* A partir de 900px mandan el megamenú y la navegación de la barra. */
@media ( min-width: 900px ) {
	.wears-drawer {
		display: none;
	}
}

@media ( max-width: 899px ) {
	.wears-mega,
	.wears-veil {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */

.wears-footer {
	padding: clamp( 48px, 6vw, 80px ) clamp( 20px, 3vw, 40px ) 32px;
	background: var( --wp--preset--color--primary-hover );
	color: var( --wp--preset--color--base );
}

.wears-footer__grid {
	display: grid;
	max-width: 1320px;
	margin-inline: auto;
	margin-bottom: clamp( 36px, 5vw, 64px );
	grid-template-columns: 1fr;
	gap: clamp( 28px, 4vw, 48px );
}

.wears-footer__grid > *,
.wears-footer__col > * {
	margin-block: 0;
}

.wears-footer__logo {
	margin-bottom: 20px;
}

.wears-footer .wp-block-site-logo.wears-footer__logo img {
	display: block;
	width: auto;
	max-width: none;
	height: var( --wp--custom--logo--footer, 96px );
}

.wears-footer__tagline {
	max-width: 26ch;
	margin: 0;
	color: var( --wears-on-dark-70 );
	font-size: 13px;
	line-height: 1.7;
}

.wears-footer__title {
	margin: 0 0 18px;
	color: var( --wp--preset--color--base );
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
}

.wears-footer__links {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	gap: 11px;
	line-height: 1.2;
	list-style: none;
}

.wears-footer__links a {
	color: var( --wears-on-dark-62 );
	font-size: 14px;
	text-decoration: none;
	transition: color var( --wears-duration-micro ) var( --wears-easing );
}

.wears-footer__links a:hover {
	color: var( --wp--preset--color--accent );
}

.wears-footer__links a.is-accent {
	color: var( --wp--preset--color--accent );
	font-weight: 600;
}

.wears-footer__bottom {
	display: flex;
	max-width: 1320px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	margin-inline: auto;
	padding-top: 24px;
	border-top: 1px solid var( --wears-on-dark-12 );
	gap: 14px;
}

.wears-footer__legal {
	margin: 0;
	color: var( --wears-on-dark-70 );
	font-size: 12px;
}

.wears-footer__legal-links {
	display: flex;
	gap: 22px;
}

.wears-footer__legal-links a {
	color: var( --wears-on-dark-70 );
	font-size: 12px;
	text-decoration: none;
	transition: color var( --wears-duration-micro ) var( --wears-easing );
}

.wears-footer__legal-links a:hover {
	color: var( --wp--preset--color--accent );
}

@media ( min-width: 900px ) {
	.wears-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
	}
}

/* --------------------------------------------------------------------------
   [hidden] tiene que ganarle a los display de arriba
   -------------------------------------------------------------------------- */

.wears-search[ hidden ],
.wears-mega[ hidden ],
.wears-veil[ hidden ],
.wears-drawer__clear[ hidden ],
[ data-wears-drawer-menu ][ hidden ],
[ data-wears-drawer-results ][ hidden ],
[ data-wears-drawer-empty ][ hidden ] {
	display: none;
}

/* ==========================================================================
   Huecos visibles

   Regla del proyecto: cuando falta un dato del cliente no se rellena con algo
   plausible — se deja el hueco marcado para que se vea en pantalla qué falta.
   Se pinta en rojo de error con trama, para que nadie lo confunda con copy
   definitivo ni se cuele a producción por descuido.
   ========================================================================== */

.wears-hueco {
	display: inline-block;
	padding: 6px 12px;
	border: 1px dashed var( --wp--preset--color--danger );
	border-radius: var( --wears-radius );
	background: repeating-linear-gradient(
		135deg,
		rgba( 140, 31, 31, 0.06 ) 0,
		rgba( 140, 31, 31, 0.06 ) 3px,
		transparent 3px,
		transparent 11px
	);
	color: var( --wp--preset--color--danger );
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.5;
	text-transform: none;
}

.wears-hueco::before {
	content: 'Pendiente · ';
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Sobre fondo violeta el rojo de error no se lee: allí va en dorado. */
.wears-hero-col .wears-hueco,
.wears-hero-cat .wears-hueco,
.wears-filters .wears-hueco {
	border-color: var( --wp--preset--color--accent );
	background: rgba( 176, 141, 79, 0.12 );
	color: var( --wp--preset--color--accent );
}

/* ==========================================================================
   Rótulos de sección — eyebrow y titular

   Viven aquí y no en la hoja de tienda porque los usan la portada, la ficha,
   la marca y las páginas de contenido por igual.
   ========================================================================== */

.wears-eyebrow {
	display: flex;
	align-items: center;
	margin: 0 0 12px;
	color: var( --wp--preset--color--support );
	font-size: 11px;
	font-weight: 500;
	gap: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

/* ==========================================================================
   La onda de la marca

   Sustituye al filete recto que iba delante de cada eyebrow (DWCW-175).

   Va como `mask-image` y no como imagen de fondo para que siga tomando el
   color de cada sitio: dorado sobre marfil, `currentColor` sobre las cabeceras
   oscuras. Un solo trazo, un solo color, cuatro clases.

   El motivo mide 32px y se repite en horizontal, así que encaja igual en los
   32px de un eyebrow que en los 56px del hero sin deformarse ni cortarse.

   El trazado es provisional: el de verdad es el del empaque de la marca, que
   sigue sin estar en `Insumos/`. Cuando llegue se cambia aquí y cambia el
   sitio entero. Ver PENDIENTES, DWCW-175.
   ========================================================================== */

:root {
	--wears-ola: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 8'%3E%3Cpath d='M0 4 Q4 1 8 4 T16 4 T24 4 T32 4' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E" );
}

.wears-eyebrow__rule,
.wears-hero__rule,
.wears-hero-cat__rule,
.wears-hero-col__rule {
	display: block;
	height: 8px;
	flex-shrink: 0;
	mask-image: var( --wears-ola );
	mask-repeat: repeat-x;
	mask-size: 32px 8px;
	-webkit-mask-image: var( --wears-ola );
	-webkit-mask-repeat: repeat-x;
	-webkit-mask-size: 32px 8px;
}

.wears-eyebrow__rule {
	width: 32px;
	background: var( --wp--preset--color--accent );
}

.wears-seccion__titulo {
	margin: 0 0 30px;
	font-size: clamp( 23px, 3vw, 34px );
	font-weight: 600;
	letter-spacing: -0.02em;
}

/* ==========================================================================
   Páginas de contenido — marca, contacto, aliados, tallas, FAQ, legales

   Comparten el trato editorial: una columna, medida corta, secciones separadas
   por aire y no por cajas. Nada se ve montado.
   ========================================================================== */

.wears-pagina {
	padding-block: var( --wears-seccion );
}

.wears-pagina__cabeza {
	max-width: var( --wears-bar-max );
	margin-inline: auto;
	padding-inline: clamp( 20px, 3vw, 44px );
}

/* --------------------------------------------------------------------------
   Formularios de contacto y de aliados
   -------------------------------------------------------------------------- */

.wears-form {
	margin-top: clamp( 24px, 3vw, 40px );
}

.wears-form__campos {
	display: grid;
	gap: 18px;
	grid-template-columns: 1fr;
}

@media ( min-width: 700px ) {
	.wears-form__campos {
		grid-template-columns: 1fr 1fr;
	}

	.wears-form__campo--ancho,
	.wears-form__enviar {
		grid-column: 1 / -1;
	}
}

.wears-form__campo {
	margin: 0;
}

.wears-form__campo label {
	display: block;
	margin-bottom: 8px;
	color: rgba( 26, 22, 19, 0.55 );
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.wears-form__opcional {
	color: rgba( 26, 22, 19, 0.35 );
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: none;
}

.wears-form__campo input,
.wears-form__campo select,
.wears-form__campo textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid rgba( 26, 22, 19, 0.22 );
	border-radius: var( --wears-radius );
	background: #fff;
	color: var( --wp--preset--color--contrast );
	font-family: inherit;
	font-size: 15px;
}

.wears-form__campo textarea {
	resize: vertical;
}

.wears-form__campo input:focus,
.wears-form__campo select:focus,
.wears-form__campo textarea:focus {
	border-color: var( --wp--preset--color--accent );
	outline: none;
}

/* La trampa para robots: fuera de pantalla, no `display:none` — algunos
   robots saltan justamente lo que está oculto de esa forma. */
.wears-form__trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.wears-form__enviar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 6px 0 0;
	gap: 16px;
}

.wears-form__enviar button {
	padding: 17px 34px;
	border: none;
	border-radius: var( --wears-radius );
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var( --wears-duration-micro ) var( --wears-easing );
}

.wears-form__enviar button:hover {
	background: var( --wp--preset--color--primary-hover );
}

.wears-form__nota {
	color: rgba( 26, 22, 19, 0.5 );
	font-size: 12px;
}

.wears-form__aviso {
	margin: 0 0 24px;
	padding: 14px 18px;
	border-left: 2px solid var( --wp--preset--color--accent );
	border-radius: 0 var( --wears-radius-card ) var( --wears-radius-card ) 0;
	background: var( --wp--preset--color--rule );
	font-size: 14px;
}

.wears-form__aviso--error {
	border-left-color: var( --wp--preset--color--danger );
	color: var( --wp--preset--color--danger );
}

/* --------------------------------------------------------------------------
   Guía de tallas como página
   -------------------------------------------------------------------------- */

.wears-guia-pagina {
	margin-top: clamp( 24px, 3vw, 40px );
}

.wears-guia-pagina .wears-guia__croquis {
	display: block;
	width: 100%;
	max-width: 300px;
	height: auto;
	margin: 0 auto 28px;
}

.wears-guia-pagina .wears-guia__pasos {
	margin: 0 0 28px;
	padding-left: 1.2em;
	font-size: 15px;
	line-height: 1.8;
}

.wears-guia-pagina .wears-guia__tabla {
	width: 100%;
	max-width: 520px;
	margin-bottom: 24px;
	border-collapse: collapse;
	font-size: 14px;
}

/* Las correas miden el largo de la correa, no el pie: se aclara en la fila
   para que 102 cm no se lea en la misma clave que 27 cm. */
.wears-guia-pagina .wears-guia__aclara {
	display: block;
	max-width: 34ch;
	margin-top: 2px;
	color: var( --wp--preset--color--support );
	font-size: 13px;
	line-height: 1.6;
}

.wears-guia-pagina .wears-guia__nota {
	max-width: 60ch;
	margin: 0;
	padding: 16px 18px;
	border-left: 2px solid var( --wp--preset--color--accent );
	border-radius: 0 var( --wears-radius-card ) var( --wears-radius-card ) 0;
	background: var( --wp--preset--color--rule );
	font-size: 14px;
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Preguntas frecuentes
   -------------------------------------------------------------------------- */

.wears-faq {
	margin-top: clamp( 20px, 3vw, 32px );
}

.wears-faq .wears-acordeon__item:last-of-type {
	border-bottom: 1px solid rgba( 26, 22, 19, 0.16 );
}

.wears-faq__pendientes {
	margin-top: clamp( 32px, 4vw, 48px );
}

.wears-faq__pendientes ul {
	margin: 14px 0 0;
	padding-left: 1.2em;
	color: rgba( 26, 22, 19, 0.6 );
	font-size: 14px;
	line-height: 1.75;
}

/* --------------------------------------------------------------------------
   Error 404
   -------------------------------------------------------------------------- */

.wears-error {
	position: relative;
	overflow: hidden;
	background: var( --wp--preset--color--primary-hover );
	color: var( --wp--preset--color--base );
}

/* La foto teñida del export: producto al 30 % con paneo lento, y el velo
   violeta encima. Sin foto (por si el producto se despublica), queda el
   violeta liso de siempre. */
.wears-error__fondo {
	position: absolute;
	animation: wears-paneo 30s ease-in-out infinite alternate;
	background-position: center;
	background-size: cover;
	inset: 0;
	opacity: 0.3;
}

@media ( prefers-reduced-motion: reduce ) {
	.wears-error__fondo {
		animation: none;
	}
}

.wears-error__velo {
	position: absolute;
	background: linear-gradient(
		168deg,
		rgba( 28, 0, 87, 0.9 ) 0%,
		rgba( 28, 0, 87, 0.68 ) 45%,
		rgba( 28, 0, 87, 0.97 ) 100%
	);
	inset: 0;
}

.wears-error__inner {
	position: relative;
	z-index: 2;
}

.wears-error__inner {
	display: grid;
	max-width: var( --wears-bar-max );
	align-items: center;
	margin-inline: auto;
	padding: var( --wears-seccion ) clamp( 20px, 3vw, 44px );
	gap: clamp( 32px, 5vw, 72px );
	grid-template-columns: 1fr;
}

@media ( min-width: 900px ) {
	.wears-error__inner {
		grid-template-columns: minmax( 0, 1.4fr ) minmax( 0, 1fr );
	}
}

.wears-error__codigo {
	margin: 0 0 14px;
	color: var( --wp--preset--color--accent );
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.wears-error__titulo {
	margin: 0 0 18px;
	color: var( --wp--preset--color--base );
	font-size: clamp( 30px, 5vw, 56px );
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.02;
}

.wears-error__lead {
	max-width: 46ch;
	margin: 0 0 14px;
	color: var( --wears-on-dark-70 );
	font-size: 16px;
	line-height: 1.7;
}

.wears-error__apoyo {
	max-width: 46ch;
	margin: 0 0 30px;
	color: var( --wears-on-dark-70 );
	font-size: 14px;
	line-height: 1.7;
}

.wears-error__acciones {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 36px;
	gap: 12px;
}

.wears-error__boton {
	padding: 15px 28px;
	border: 1px solid transparent;
	border-radius: var( --wears-radius );
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
}

.wears-error__boton--solido {
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--primary );
}

.wears-error__boton--solido:hover {
	background: #c9a469;
	color: var( --wp--preset--color--primary );
}

.wears-error__boton--linea {
	border-color: var( --wears-on-dark-40 );
	color: var( --wp--preset--color--base );
}

.wears-error__boton--linea:hover {
	border-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--accent );
}

.wears-error__ayuda-titulo {
	margin: 0 0 14px;
	color: var( --wears-on-dark-70 );
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.wears-error__atajos {
	display: grid;
	margin: 0;
	padding: 0;
	gap: 10px 24px;
	grid-template-columns: repeat( auto-fit, minmax( 180px, 1fr ) );
	list-style: none;
}

.wears-error__atajos a {
	color: var( --wp--preset--color--base );
	font-size: 14px;
	text-decoration: none;
	border-bottom: 1px solid var( --wears-on-dark-30 );
}

.wears-error__atajos a:hover {
	border-bottom-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--accent );
}

/* El ancla suelta: el único sitio del sistema donde el elemento de firma
   aparece descolocado a propósito. */
.wears-error__ancla {
	text-align: center;
}

.wears-error__ancla .wears-anchor__mark {
	margin: 0 auto 16px;
	transform: rotate( -12deg );
}

.wears-error__pie {
	margin: 0;
	color: var( --wears-on-dark-70 );
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* ==========================================================================
   Acordeón — <details> nativo, sin JavaScript

   Lo usan la ficha de producto y las preguntas frecuentes, así que vive aquí
   y no en la hoja de tienda. El signo lo gira el CSS.
   ========================================================================== */


.wears-acordeon {
	max-width: 860px;
	margin-inline: auto;
	padding: clamp( 56px, 7vw, 96px ) clamp( 20px, 3vw, 40px ) 0;
}

.wears-acordeon__item {
	border-top: 1px solid rgba( 26, 22, 19, 0.16 );
}

.wears-acordeon__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 0;
	cursor: pointer;
	list-style: none;
}

.wears-acordeon__cabecera::-webkit-details-marker {
	display: none;
}

.wears-acordeon__cabecera:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 4px;
}

.wears-acordeon__titulo {
	font-size: clamp( 15px, 1.6vw, 18px );
	font-weight: 600;
	letter-spacing: -0.01em;
}

.wears-acordeon__signo {
	color: var( --wp--preset--color--accent );
	font-size: 22px;
	line-height: 1;
	transition: transform 0.35s var( --wears-easing );
}

.wears-acordeon__item[ open ] .wears-acordeon__signo {
	transform: rotate( 45deg );
}

.wears-acordeon__cuerpo {
	max-width: 62ch;
	padding: 0 0 26px;
	color: rgba( 26, 22, 19, 0.7 );
	font-size: 14px;
	line-height: 1.8;
}

.wears-acordeon__cuerpo > :first-child {
	margin-top: 0;
}

.wears-especificaciones {
	display: grid;
	margin: 0;
	gap: 0 18px;
	grid-template-columns: max-content 1fr;
}

.wears-especificaciones dt {
	padding: 8px 0;
	border-top: 1px solid rgba( 26, 22, 19, 0.1 );
	color: var( --wp--preset--color--contrast );
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.wears-especificaciones dd {
	margin: 0;
	padding: 8px 0;
	border-top: 1px solid rgba( 26, 22, 19, 0.1 );
}


/* ==========================================================================
   Zona táctil de los enlaces de texto en móvil

   El diseño usa enlaces finos con filete dorado —«Ver todo el catálogo», «Ver
   el taller», «Guía de tallas»—. Miden unos 20px de alto, que con el pulgar se
   fallan. Se agranda **sólo el área pulsable** con un pseudoelemento: el trazo
   y el filete no se mueven ni un píxel, y en escritorio no cambia nada.
   ========================================================================== */

@media ( max-width: 699px ) {
	.wears-colecciones__todo,
	.wears-oficio__enlace,
	.wears-guia__abrir,
	.wears-marca__enlace,
	.wears-aliados__enlace {
		position: relative;
	}

	.wears-colecciones__todo::after,
	.wears-oficio__enlace::after,
	.wears-guia__abrir::after,
	.wears-marca__enlace::after,
	.wears-aliados__enlace::after {
		position: absolute;
		inset: -12px -8px;
		content: '';
	}
}

/* ==========================================================================
   Botones de llamada sobre fondo oscuro

   Los usan el hero de la portada, el cierre de `/marca/` y la cabecera de
   aliados. Vivían en `home.css`, que sólo se encola en la portada: en las
   otras dos pantallas los enlaces salían sin relleno y con la tinta oscura del
   cuerpo sobre el violeta, o sea prácticamente invisibles.
   ========================================================================== */

.wears-hero__boton {
	padding: 16px 30px;
	border: 1px solid transparent;
	border-radius: var( --wears-radius );
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
	transition:
		background var( --wears-duration-micro ) var( --wears-easing ),
		border-color var( --wears-duration-micro ) var( --wears-easing ),
		color var( --wears-duration-micro ) var( --wears-easing );
}

.wears-hero__boton--solido {
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--primary );
}

.wears-hero__boton--solido:hover {
	background: #c9a469;
	color: var( --wp--preset--color--primary );
}

.wears-hero__boton--linea {
	border-color: var( --wears-on-dark-40 );
	color: var( --wp--preset--color--base );
}

.wears-hero__boton--linea:hover {
	border-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--accent );
}

/* ==========================================================================
   Cinta de rótulos

   La usan la portada y la página de aliados. Vivía en `home.css`, que sólo se
   encola en la portada: en aliados los seis perfiles salían como texto corrido
   sobre marfil, sin banda, sin versalitas y sin movimiento.

   En aliados el export le añade filete dorado arriba y abajo, y menos alto.
   ========================================================================== */

.wears-cinta {
	overflow: hidden;
	border-bottom: 1px solid var( --wears-bar-line );
	background: var( --wp--preset--color--primary );
	padding-block: 14px;
}

.wears-cinta__pista {
	display: flex;
	width: max-content;
	gap: 44px;
	animation: wears-cinta 38s linear infinite;
}

@keyframes wears-cinta {
	from {
		transform: translateX( 0 );
	}

	to {
		transform: translateX( -50% );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.wears-cinta__pista {
		animation: none;
	}
}

.wears-cinta__item {
	color: var( --wears-on-dark-70 );
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	white-space: nowrap;
}

.wears-cinta__item::after {
	margin-left: 44px;
	color: var( --wp--preset--color--accent );
	content: '·';
}

.wears-cinta--aliados {
	padding-block: 15px;
	border-top: 1px solid rgba( 176, 141, 79, 0.4 );
	border-bottom: 1px solid rgba( 176, 141, 79, 0.4 );
}

.wears-cinta--aliados .wears-cinta__item {
	color: var( --wears-on-dark-70 );
	letter-spacing: 0.24em;
}