/* ==========================================================================
   Portada
   Réplica de "Home - Cueros Wears.dc.html". Se carga sólo en la portada.
   ========================================================================== */

.wears-home {
	background: var( --wp--preset--color--base );
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.wears-hero {
	position: relative;
	display: flex;
	min-height: max( 580px, 86vh );
	align-items: flex-end;
	overflow: hidden;
	background: var( --wp--preset--color--primary-hover );
}

@media ( min-width: 900px ) {
	.wears-hero {
		min-height: max( 640px, 92vh );
	}
}

.wears-hero__video {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 0;
	inset: 0;
	object-fit: cover;
}

/* DWCW-187 (07/08): el cliente pidió probar el tinte superior en beige (base)
   en vez del azul. El tramo bajo sigue oscuro: ahí apoya el texto claro. */
.wears-hero__velo {
	position: absolute;
	background: linear-gradient(
		168deg,
		rgba( 237, 230, 216, 0.55 ) 0%,
		rgba( 28, 0, 87, 0.12 ) 38%,
		rgba( 28, 0, 87, 0.88 ) 100%
	);
	inset: 0;
}

.wears-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var( --wears-bar-max );
	margin-inline: auto;
	padding: 120px clamp( 20px, 3vw, 44px ) var( --wears-seccion );
}

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

.wears-hero__rule {
	width: clamp( 28px, 4vw, 56px );
	background: currentColor;
}

.wears-hero__titulo {
	max-width: 16ch;
	margin: 0 0 18px;
	color: var( --wp--preset--color--base );
	font-size: clamp( 38px, 6vw, 72px );
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
}

.wears-hero__lead {
	max-width: 48ch;
	margin: 0 0 32px;
	color: var( --wears-on-dark-70 );
	font-size: clamp( 15px, 1.5vw, 18px );
	line-height: 1.65;
}

.wears-hero__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.wears-hero__flecha {
	position: absolute;
	z-index: 2;
	bottom: 22px;
	left: 50%;
	color: var( --wears-on-dark-70 );
	transform: translateX( -50% );
	transition: color var( --wears-duration-micro ) var( --wears-easing );
}

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

/* --------------------------------------------------------------------------
   Cinta de rótulos
   El bucle es un desplazamiento del 50 %: la pista lleva el texto duplicado,
   así que al terminar la primera copia la segunda queda en su sitio exacto.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Franja de confianza
   -------------------------------------------------------------------------- */

.wears-confianza {
	padding: clamp( 28px, 3.2vw, 40px ) clamp( 20px, 3vw, 44px );
}

.wears-confianza__inner {
	display: grid;
	max-width: 900px;
	margin-inline: auto;
	gap: 32px;
	grid-template-columns: 1fr;
	text-align: center;
}

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

.wears-confianza__valor {
	margin: 0;
	font-size: clamp( 30px, 4vw, 46px );
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
}

/* La ondita de los eyebrows, también bajo cada cifra (antes era un filete). */
.wears-confianza__rule {
	display: block;
	width: 32px;
	height: 8px;
	margin: 10px auto;
	background: var( --wp--preset--color--accent );
	mask: var( --wears-ola ) repeat-x;
	mask-size: 32px 8px;
	-webkit-mask: var( --wears-ola ) repeat-x;
	-webkit-mask-size: 32px 8px;
}

.wears-confianza__texto {
	margin: 0;
	color: rgba( 26, 22, 19, 0.55 );
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Colecciones
   -------------------------------------------------------------------------- */

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

.wears-colecciones__cabeza {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: clamp( 28px, 3.5vw, 44px );
	gap: 20px;
}

.wears-colecciones__cabeza .wears-seccion__titulo {
	margin-bottom: 0;
}

.wears-colecciones__todo {
	border-bottom: 1px solid var( --wp--preset--color--accent );
	color: var( --wp--preset--color--contrast );
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;
}

.wears-colecciones__destacadas,
.wears-colecciones__resto {
	display: grid;
	gap: clamp( 18px, 2.4vw, 30px );
	grid-template-columns: 1fr;
}

.wears-colecciones__destacadas {
	margin-bottom: clamp( 18px, 2.4vw, 30px );
}

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

@media ( min-width: 900px ) {
	.wears-colecciones__destacadas {
		grid-template-columns: repeat( 2, 1fr );
	}

	/* Una sola fila cerrada, sin huérfanas: el patrón cuenta las tarjetas y
	   pasa el número en --wears-resto-n (4 con M Jane oculta, DWCW-198). */
	.wears-colecciones__resto {
		grid-template-columns: repeat( var( --wears-resto-n, 5 ), 1fr );
	}
}

/* La tarjeta entera es el enlace. Nada de sombra ni elevación: sólo la foto
   respira dentro de su marco. */
.wears-colec {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var( --wears-radius-media );
	background: var( --wp--preset--color--primary );
	text-decoration: none;
}

.wears-colec__foto {
	display: block;
	overflow: hidden;
	border-radius: 0;
}

.wears-colec--grande .wears-colec__foto {
	aspect-ratio: 4 / 5;
}

@media ( min-width: 900px ) {
	.wears-colec--grande .wears-colec__foto {
		aspect-ratio: 4 / 3;
	}
}

.wears-colec--chica .wears-colec__foto {
	aspect-ratio: 4 / 5;
}

.wears-colec__foto img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
	transition: transform var( --wears-duration-image ) var( --wears-easing );
}

.wears-colec:hover .wears-colec__foto img,
.wears-colec:focus-visible .wears-colec__foto img {
	transform: scale( 1.07 );
}

.wears-colec__velo {
	position: absolute;
	background: linear-gradient(
		0deg,
		rgba( 28, 0, 87, 0 ) 30%,
		rgba( 28, 0, 87, 0.55 ) 55%,
		rgba( 28, 0, 87, 0.92 ) 100%
	);
	inset: 0;
	pointer-events: none;
}

.wears-colec__texto {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	display: block;
	padding: clamp( 16px, 2vw, 26px );
}

/* El dorado sobre la foto con velo no se leía. Va en una pastilla de violeta
   plano, que es fondo opaco y no depende de lo que haya debajo. */
.wears-colec__count {
	display: inline-block;
	margin-bottom: 8px;
	padding: 5px 10px;
	border-radius: var( --wears-radius );
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--accent );
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Formato único de tarjeta (DWCW-196 + DWCW-201): a la vista sólo insignia y
   nombre, anclados ARRIBA a la izquierda; la descripción aparece en hover. El
   velo va invertido — oscuro arriba — porque la descripción en hover cae
   sobre el tercio medio de la foto y sin ese apoyo no se lee sobre las fotos
   claras. Nació para las chicas (11/08/2026) y QA pidió extenderlo a las dos
   grandes el mismo día: las siete tarjetas comparten tipografía, jerarquía y
   posición de textos; sólo cambia el tamaño de la foto.

   El nombre reserva dos líneas para que la descripción arranque a la misma
   altura en todas, mida lo que mida cada nombre.
   -------------------------------------------------------------------------- */

.wears-colec__nombre {
	display: flex;
	align-items: flex-start;
	min-height: 2.3em;
	margin-bottom: 6px;
	color: var( --wp--preset--color--base );
	font-size: clamp( 18px, 2vw, 26px );
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.15;
}

.wears-colec__pitch {
	display: -webkit-box;
	overflow: hidden;
	max-width: 34ch;
	max-height: 0;
	color: var( --wears-on-dark-70 );
	font-size: 13px;
	line-height: 1.55;
	opacity: 0;
	transform: translateY( 8px );
	transition:
		max-height var( --wears-duration-panel ) var( --wears-easing ),
		opacity var( --wears-duration-panel ) var( --wears-easing ),
		transform var( --wears-duration-panel ) var( --wears-easing );
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
}

.wears-colec:hover .wears-colec__pitch,
.wears-colec:focus-visible .wears-colec__pitch {
	max-height: 7em;
	opacity: 1;
	transform: none;
}

/* Sin puntero no hay hover: la descripción queda oculta, como pide la tarjeta. */
@media ( hover: none ) {
	.wears-colec__pitch {
		display: none;
	}
}

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

/* --------------------------------------------------------------------------
   Más vendidos
   -------------------------------------------------------------------------- */

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

.wears-vendidos > * {
	margin-block: 0;
}

.wears-vendidos__cabeza {
	margin-bottom: clamp( 28px, 3.5vw, 44px );
}

/* En la portada la rejilla va a cuatro columnas: tarjetas más contenidas que
   las tres del catálogo. En pantallas medias baja a tres y en móvil a dos,
   que es lo que ya hace la rejilla compartida. */
@media ( min-width: 900px ) {
	.wears-vendidos .wears-grid .wp-block-post-template,
	.wears-vendidos .wears-grid .wc-block-product-template {
		grid-template-columns: repeat( 4, 1fr );
	}
}

/* Las tarjetas de la portada respiran más que las del catálogo: aquí sólo hay
   seis y se leen de un vistazo, no en una rejilla larga. */
.wears-vendidos .wears-card__coleccion {
	margin: 14px 0 5px;
	font-size: 10px;
	letter-spacing: 0.18em;
}

.wears-vendidos .wears-card__nombre {
	margin: 0 0 3px;
	font-size: 18px;
	line-height: 1.3;
}

.wears-vendidos .wears-card__sku {
	margin: 0 0 6px;
	font-size: 12px;
}

.wears-vendidos .wears-card__precio {
	margin: 0 0 10px;
	font-size: 19px;
}

.wears-vendidos .wp-block-button.wears-card__boton a.wp-block-button__link,
.wears-vendidos .wp-block-button.wears-card__boton button.wp-block-button__link,
.wears-vendidos .wears-card__boton a,
.wears-vendidos .wears-card__boton button {
	padding: 15px 12px;
	font-size: 12px;
}

/* --------------------------------------------------------------------------
   Detrás del oficio
   -------------------------------------------------------------------------- */

.wears-oficio {
	margin-top: var( --wears-seccion );
	padding: var( --wears-seccion ) clamp( 20px, 3vw, 44px );
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
}

.wears-oficio__inner {
	display: grid;
	max-width: var( --wears-bar-max );
	align-items: center;
	margin-inline: auto;
	gap: clamp( 28px, 4vw, 64px );
	grid-template-columns: 1fr;
}

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

.wears-oficio__texto > * {
	margin-block: 0;
}

.wears-oficio .wears-eyebrow {
	color: var( --wp--preset--color--accent );
}

.wears-oficio .wears-seccion__titulo {
	margin-bottom: 26px;
	color: var( --wp--preset--color--base );
	font-size: clamp( 30px, 4vw, 46px );
}

/* El texto se centra contra un vídeo más alto, así que el rótulo «El oficio»
   quedaba pegado arriba. Se le da aire propio y el titular sube de tamaño. */
.wears-oficio__texto .wears-eyebrow {
	margin-top: clamp( 16px, 2.5vw, 36px );
	margin-bottom: 22px;
}

.wears-oficio__lead {
	max-width: 44ch;
	margin-bottom: 28px;
	color: var( --wears-on-dark-70 );
	font-size: 17px;
	line-height: 1.7;
}

.wears-oficio__enlace {
	display: inline-block;
	margin-top: 24px;
	border-bottom: 1px solid var( --wp--preset--color--accent );
	color: var( --wp--preset--color--base );
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;
}

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

.wears-oficio__media {
	position: relative;
	overflow: hidden;
	border-radius: var( --wears-radius-media );
}

.wears-oficio__video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* DWCW-187 (07/08): en el teléfono el <source> sirve taller-movil.mp4, que es
   vertical (640×1138); forzarlo a 16:9 lo recortaba. El corte de 899px es el
   mismo del atributo media del <source>. */
@media ( max-width: 899px ) {
	.wears-oficio__video {
		aspect-ratio: 9 / 16;
	}
}

.wears-oficio__pie {
	position: absolute;
	bottom: 14px;
	left: 16px;
	margin: 0;
	color: var( --wears-on-dark-70 );
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wears-oficio__mandos {
	position: absolute;
	right: 14px;
	bottom: 12px;
	display: flex;
	gap: 8px;
}

.wears-oficio__mando {
	display: flex;
	width: 34px;
	height: 34px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var( --wears-on-dark-30 );
	border-radius: var( --wears-radius );
	background: rgba( 28, 0, 87, 0.6 );
	color: var( --wp--preset--color--base );
	cursor: pointer;
	transition: border-color var( --wears-duration-micro ) var( --wears-easing );
}

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

/* Cada botón lleva dibujados sus dos estados y aquí se enseña el que toca.
   `aria-pressed` lo mantiene el JS, así que el icono siempre dice la verdad:
   sonido activo o mudo, reproduciendo o en pausa. */
.wears-oficio__mando svg {
	display: none;
}

.wears-oficio__mando[ aria-pressed='false' ] .wears-mando__off,
.wears-oficio__mando[ aria-pressed='true' ] .wears-mando__on {
	display: block;
}

/* El mando de pausa del hero reutiliza el del taller; sólo cambia dónde
   está. Encima del velo (z 2) y lejos de la flecha, que va centrada. */
.wears-hero__pausa {
	position: absolute;
	z-index: 3;
	right: clamp( 14px, 2vw, 28px );
	bottom: clamp( 14px, 2vw, 28px );
}

/* --------------------------------------------------------------------------
   Testimonios
   -------------------------------------------------------------------------- */

/* Fondo marfil, como el export: la sección de testimonios no es una franja
   oscura. El violeta se reserva para la captura de correo, que va justo
   después. */
.wears-testimonios {
	padding: var( --wears-seccion ) clamp( 20px, 3vw, 40px );
	background: var( --wp--preset--color--base );
	color: var( --wp--preset--color--contrast );
}

.wears-testimonios__inner {
	max-width: 820px;
	margin-inline: auto;
	text-align: center;
}

.wears-testimonios__inner .wears-anchor__mark {
	margin: 0 auto 24px;
}

.wears-testimonio {
	margin: 0;
}

.wears-testimonio__cita {
	max-width: 26ch;
	margin: 0 auto 26px;
	color: var( --wp--preset--color--contrast );
	font-size: clamp( 19px, 2.6vw, 32px );
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.35;
}

.wears-testimonio__firma {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	text-align: left;
}

/* Círculo violeta relleno, no aro dorado: así lo dibuja el export. */
.wears-testimonio__iniciales {
	display: flex;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
}

.wears-testimonio__nombre {
	display: block;
	font-size: 13px;
	font-weight: 600;
}

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

/* DWCW-178: de dónde salió el comentario, bajo la ciudad. */
.wears-testimonio__origen {
	display: flex;
	align-items: center;
	gap: 4px;
	color: var( --wp--preset--color--support );
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* El glifo de Instagram hereda el color del círculo o del rótulo (DWCW-190). */
.wears-testimonio__ig {
	display: block;
}

/* Altura fija: las citas no miden lo mismo y sin esto el bloque daba un salto
   cada vez que rotaba. Se reserva el alto de la más larga. */
.wears-testimonios__pista {
	display: flex;
	min-height: clamp( 190px, 20vw, 230px );
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.wears-testimonios__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 32px;
	gap: 18px;
}

.wears-testimonios__flecha {
	display: flex;
	width: 34px;
	height: 34px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid rgba( 26, 22, 19, 0.2 );
	border-radius: 50%;
	background: transparent;
	color: var( --wp--preset--color--contrast );
	cursor: pointer;
	transition:
		border-color var( --wears-duration-micro ) var( --wears-easing ),
		color var( --wears-duration-micro ) var( --wears-easing );
}

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

/* Filetes, no puntos: 26x2px, como el export. */
.wears-testimonios__puntos {
	display: flex;
	justify-content: center;
	gap: 10px;
}

.wears-testimonios__punto {
	width: 26px;
	height: 2px;
	padding: 0;
	border: none;
	border-radius: 0;
	background: rgba( 26, 22, 19, 0.2 );
	cursor: pointer;
	transition: background var( --wears-duration-micro ) var( --wears-easing );
}

.wears-testimonios__punto[ aria-selected='true' ] {
	background: var( --wp--preset--color--accent );
}

/* --------------------------------------------------------------------------
   Captura de correo
   -------------------------------------------------------------------------- */

/* Violeta plano, como el export: es la única franja oscura de este tramo y lo
   que separa los testimonios de la cinta de garantías. */
.wears-newsletter {
	padding: var( --wears-seccion ) clamp( 20px, 3vw, 40px );
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
}

.wears-newsletter__inner {
	max-width: 620px;
	margin-inline: auto;
	text-align: center;
}

.wears-newsletter__titulo {
	margin: 0 0 14px;
	color: var( --wp--preset--color--base );
	font-size: clamp( 24px, 3.4vw, 40px );
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.wears-newsletter__lead {
	margin: 0 0 32px;
	color: var( --wears-on-dark-70 );
	font-size: 15px;
	line-height: 1.6;
}

.wears-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.wears-newsletter__form input {
	min-width: 230px;
	flex: 1;
	padding: 15px 18px;
	border: 1px solid var( --wears-on-dark-30 );
	border-radius: var( --wears-radius );
	background: rgba( 237, 230, 216, 0.05 );
	color: var( --wp--preset--color--base );
	font-family: inherit;
	font-size: 15px;
}

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

.wears-newsletter__form input:focus {
	border-color: var( --wp--preset--color--accent );
	outline: none;
}

/* Dorado sobre violeta, con la letra en violeta: el botón del export. */
.wears-newsletter__form button {
	padding: 15px 30px;
	border: none;
	border-radius: var( --wears-radius );
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--primary );
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var( --wears-duration-micro ) var( --wears-easing );
}

.wears-newsletter__form button:hover {
	background: #c9a469;
}

.wears-newsletter__aviso {
	margin: 16px 0 0;
	color: var( --wears-on-dark-70 );
	font-size: 13px;
}

/* --------------------------------------------------------------------------
   Franja de garantías
   -------------------------------------------------------------------------- */

.wears-garantias {
	padding: clamp( 26px, 3vw, 40px ) clamp( 20px, 3vw, 44px );
}

.wears-garantias__inner {
	display: flex;
	max-width: var( --wears-bar-max );
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin-inline: auto;
	gap: clamp( 18px, 3vw, 44px );
}

.wears-garantias__item {
	display: flex;
	align-items: center;
	margin: 0;
	color: rgba( 26, 22, 19, 0.6 );
	font-size: 11px;
	font-weight: 600;
	gap: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wears-garantias__punto {
	display: block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var( --wp--preset--color--accent );
}