/* ==========================================================================
   Páginas editoriales — Marca, Contacto, Aliados y Legal

   Réplica de las pantallas del export. Se carga sólo en estas páginas: pesan
   tanto como el catálogo y no pintan nada en el resto del sitio.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Piezas compartidas
   -------------------------------------------------------------------------- */

/* Las pantallas editoriales empiezan con una foto a sangre bajo la cabecera
   flotante. El hueco de 24px que WordPress deja entre bloques rompería el
   efecto: dejaría una franja marfil entre la barra y la foto. */
.wears-editorial {
	margin-block-start: 0;
}

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

/* Eyebrow claro, para cuando va sobre foto o violeta. */
.wears-eyebrow--claro {
	color: var( --wp--preset--color--accent );
}

/* Eyebrow centrado entre dos filetes. */
.wears-eyebrow--centro {
	justify-content: center;
}

/* El velo violeta de las secciones con foto a sangre. Los valores son los del
   export: la apertura deja respirar la foto en la franja media y el cierre la
   tapa más, porque ahí encima van dos botones. */
/* DWCW-187 (07/08): tinte superior en beige a prueba del cliente; el tramo
   bajo sigue oscuro porque sostiene el texto claro. */
.wears-marca__velo {
	position: absolute;
	background: linear-gradient(
		168deg,
		rgba( 237, 230, 216, 0.6 ) 0%,
		rgba( 28, 0, 87, 0.12 ) 42%,
		rgba( 28, 0, 87, 0.94 ) 100%
	);
	inset: 0;
	pointer-events: none;
}

.wears-marca__cierre .wears-marca__velo {
	background: linear-gradient(
		168deg,
		rgba( 237, 230, 216, 0.82 ) 0%,
		rgba( 28, 0, 87, 0.5 ) 45%,
		rgba( 28, 0, 87, 0.94 ) 100%
	);
}

/* Además, en el cierre la foto va al 55 %: es fondo de texto, no protagonista.
   Sin esto los botones y el lead se pierden sobre el cuero claro. */
.wears-marca__cierre-foto {
	opacity: 0.55;
}

/* Los otros dos héroes editoriales llevan su propio velo y su foto al 50 %.
   Iban con el velo genérico y el eyebrow se perdía sobre el cuero claro. */
.wears-aliados__hero .wears-marca__velo {
	background: linear-gradient(
		168deg,
		rgba( 237, 230, 216, 0.8 ) 0%,
		rgba( 28, 0, 87, 0.42 ) 40%,
		rgba( 28, 0, 87, 0.97 ) 100%
	);
}

.wears-contacto__hero .wears-marca__velo {
	background: linear-gradient(
		168deg,
		rgba( 237, 230, 216, 0.82 ) 0%,
		rgba( 28, 0, 87, 0.45 ) 42%,
		rgba( 28, 0, 87, 0.96 ) 100%
	);
}

.wears-aliados__hero .wears-marca__apertura-foto,
.wears-contacto__hero .wears-marca__apertura-foto {
	opacity: 0.5;
}

/* --------------------------------------------------------------------------
   Marca · apertura
   -------------------------------------------------------------------------- */

.wears-marca__apertura,
.wears-marca__cierre {
	position: relative;
	display: flex;
	overflow: hidden;
	align-items: flex-end;
	background: var( --wp--preset--color--primary-hover );
}

/* El export: `max(580px, 86vh)` en móvil y `max(640px, 94vh)` en escritorio.
   Iba a 78vh y la apertura quedaba corta. */
.wears-marca__apertura {
	min-height: max( 580px, 86vh );
}

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

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

/* Paneo lento sobre la foto de apertura, como el export. */
.wears-marca__apertura-foto {
	animation: wears-paneo 30s ease-in-out infinite alternate;
}

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

/* El sello vertical del margen izquierdo, como el export: un filete de arriba
   abajo y el rótulo sobre una pestaña violeta que lo interrumpe. Sólo en
   escritorio: en móvil no hay margen donde ponerlo sin comerse el texto. */
.wears-marca__sello {
	display: none;
}

@media ( min-width: 900px ) {
	.wears-marca__apertura::after {
		position: absolute;
		z-index: 2;
		top: 0;
		bottom: 0;
		left: clamp( 20px, 3vw, 48px );
		width: 1px;
		background: rgba( 237, 230, 216, 0.18 );
		content: '';
	}

	.wears-marca__sello {
		position: absolute;
		z-index: 3;
		top: 50%;
		left: clamp( 20px, 3vw, 48px );
		display: block;
		margin: 0;
		padding: 14px 0;
		background: var( --wp--preset--color--primary-hover );
		color: var( --wears-on-dark-70 );
		font-size: 10px;
		font-weight: 600;
		letter-spacing: 0.28em;
		text-transform: uppercase;
		transform: translate( -50%, -50% ) rotate( 180deg );
		writing-mode: vertical-rl;
	}

	/* El texto del hero se aparta del filete. */
	.wears-marca__apertura .wears-marca__apertura-texto {
		padding-left: clamp( 72px, 8vw, 128px );
	}
}

.wears-marca__apertura-texto,
.wears-marca__cierre-texto {
	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-marca__titulo {
	margin: 0 0 18px;
	color: var( --wp--preset--color--base );
	font-size: clamp( 40px, 8vw, 88px );
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 0.98;
}

.wears-marca__lead {
	max-width: 44ch;
	margin: 0;
	color: var( --wears-on-dark-70 );
	font-size: clamp( 15px, 1.6vw, 19px );
	line-height: 1.65;
}

.wears-marca__flecha {
	position: absolute;
	z-index: 2;
	bottom: 20px;
	left: 50%;
	color: var( --wears-on-dark-70 );
	transform: translateX( -50% );
}

/* --------------------------------------------------------------------------
   Marca · manifiesto
   -------------------------------------------------------------------------- */

.wears-marca__manifiesto {
	max-width: 720px;
	margin-inline: auto;
	padding: var( --wears-seccion ) clamp( 20px, 3vw, 48px );
}

.wears-marca__manifiesto p {
	margin: 0 0 22px;
	font-size: clamp( 17px, 2vw, 22px );
	line-height: 1.7;
}

.wears-marca__manifiesto p:last-child {
	margin-bottom: 0;
	color: rgba( 26, 22, 19, 0.72 );
	font-size: clamp( 15px, 1.6vw, 17px );
}

/* --------------------------------------------------------------------------
   Marca · el oficio, en cinco pasos
   -------------------------------------------------------------------------- */

/* Franja violeta, como el export: «Cinco manos antes de la tuya» es el bloque
   oscuro de la página de marca, no una sección más sobre marfil. Con el fondo
   cambia todo lo de dentro — filetes, número, cuerpo y metadatos. */
.wears-marca__oficio {
	padding: var( --wears-seccion ) 0;
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
}

.wears-marca__oficio-cabeza {
	display: grid;
	margin-bottom: clamp( 32px, 4vw, 56px );
	gap: 20px clamp( 32px, 5vw, 72px );
	grid-template-columns: 1fr;
}

@media ( min-width: 900px ) {
	.wears-marca__oficio-cabeza {
		align-items: end;
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	}
}

.wears-marca__oficio-cabeza .wears-seccion__titulo {
	margin-bottom: 0;
}

.wears-marca__oficio-lead {
	max-width: 44ch;
	margin: 0;
	color: var( --wears-on-dark-70 );
	font-size: clamp( 14px, 1.4vw, 16px );
	line-height: 1.8;
}

/* El eyebrow y el titular de esta sección van sobre oscuro. */
.wears-marca__oficio .wears-eyebrow {
	color: var( --wears-on-dark-70 );
}

.wears-marca__oficio .wears-eyebrow__rule {
	background: var( --wears-on-dark-55 );
}

.wears-marca__oficio .wears-seccion__titulo {
	color: var( --wp--preset--color--base );
}

.wears-pasos {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Cada paso es una fila con filete arriba: número, texto y metadatos. */
.wears-paso {
	display: grid;
	align-items: start;
	padding: clamp( 24px, 3.2vw, 40px ) 0;
	border-top: 1px solid rgba( 237, 230, 216, 0.2 );
	gap: 10px clamp( 20px, 3vw, 48px );
	grid-template-columns: auto 1fr;
}

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

.wears-paso__n {
	color: var( --wp--preset--color--accent );
	font-size: clamp( 20px, 2.4vw, 28px );
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
}

.wears-paso__titulo {
	margin: 0 0 10px;
	color: var( --wp--preset--color--base );
	font-size: clamp( 17px, 1.9vw, 21px );
	font-weight: 600;
	letter-spacing: -0.01em;
}

.wears-paso__cuerpo {
	max-width: 52ch;
	margin: 0;
	color: var( --wears-on-dark-70 );
	font-size: clamp( 13px, 1.35vw, 15px );
	line-height: 1.8;
}

.wears-paso__meta {
	display: flex;
	flex-direction: column;
	margin: 0;
	color: var( --wears-on-dark-70 );
	font-size: 10px;
	font-weight: 600;
	gap: 3px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* En móvil los metadatos van bajo el texto, no en columna propia. */
@media ( max-width: 899px ) {
	.wears-paso__meta {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 4px 14px;
		grid-column: 2;
	}
}

/* --------------------------------------------------------------------------
   Marca · cita del taller
   -------------------------------------------------------------------------- */

/* Sobre marfil, no en violeta: en el export la cita respira entre dos bloques
   oscuros —«El oficio» arriba y «La herencia» abajo— y es el descanso. */
.wears-marca__cita {
	max-width: var( --wears-bar-max );
	margin-inline: auto;
	padding: var( --wears-seccion ) clamp( 20px, 3vw, 48px );
	text-align: center;
}

.wears-marca__cita figure {
	max-width: 720px;
	margin: 0 auto;
}

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

.wears-marca__cita blockquote {
	margin: 0 0 26px;
	font-size: clamp( 22px, 3.4vw, 46px );
	font-weight: 500;
	font-style: italic;
	letter-spacing: -0.01em;
	line-height: 1.45;
}

.wears-marca__cita figcaption {
	color: var( --wp--preset--color--support );
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Marca · la herencia
   -------------------------------------------------------------------------- */

/* Marfil oscurecido `#E3DAC7`, el mismo de la cinta de garantías: separa la
   herencia del manifiesto sin llegar a bloque oscuro. */
.wears-marca__herencia {
	padding: var( --wears-seccion ) 0;
	background: var( --wp--preset--color--rule );
}

.wears-marca__herencia-grid {
	display: grid;
	align-items: start;
	gap: clamp( 32px, 5vw, 72px );
	grid-template-columns: 1fr;
}

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

.wears-marca__retrato {
	margin: 0;
	align-self: center;
}

.wears-marca__retrato-hueco {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 5;
	margin-bottom: 14px;
	text-align: center;
}

/* El 4:5 del export, pero sin pasarse de la pantalla: en ventanas bajas la
   foto se recorta un poco por arriba y abajo antes que desbordar. */
.wears-marca__retrato-foto {
	width: 100%;
	height: auto;
	max-height: min( 76vh, 700px );
	margin-bottom: 14px;
	border-radius: var( --wears-radius-media );
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.wears-marca__retrato figcaption {
	padding-left: 14px;
	border-left: 1px solid var( --wp--preset--color--accent );
	color: rgba( 26, 22, 19, 0.6 );
	font-size: 13px;
	line-height: 1.65;
}

.wears-marca__herencia-texto p {
	max-width: 56ch;
	margin: 0 0 18px;
	color: rgba( 26, 22, 19, 0.75 );
	font-size: 15px;
	line-height: 1.8;
}

/* Cita de Ibrahim dentro de La Herencia (DWCW-187). Mismo filete dorado que
   el pie del retrato: es cita en línea, no el bloque centrado de la sección
   "Cita del taller". */
.wears-marca__herencia-cita {
	margin: 24px 0;
	padding-left: 16px;
	border-left: 1px solid var( --wp--preset--color--accent );
}

.wears-marca__herencia-cita p {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	color: var( --wp--preset--color--contrast );
}

.wears-marca__herencia-cita cite {
	font-style: normal;
	font-size: 13px;
	color: rgba( 26, 22, 19, 0.6 );
}

/* DWCW-203: en móvil las cifras van en lista vertical a ancho completo; la
   cuadrícula de tres queda para pantallas medianas en adelante. */
.wears-marca__cifras {
	display: grid;
	margin: clamp( 28px, 3.5vw, 40px ) 0;
	gap: 20px;
	grid-template-columns: 1fr;
}

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

.wears-marca__cifras dt {
	margin-bottom: 10px;
	font-size: clamp( 26px, 3.4vw, 40px );
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
}

.wears-marca__cifras dd {
	margin: 0;
	padding-top: 10px;
	border-top: 1px solid var( --wp--preset--color--accent );
	color: rgba( 26, 22, 19, 0.55 );
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.5;
	text-transform: uppercase;
}

.wears-marca__enlace {
	display: inline-flex;
	align-items: center;
	padding-bottom: 4px;
	border-bottom: 1px solid var( --wp--preset--color--accent );
	color: var( --wp--preset--color--contrast );
	font-size: 11px;
	font-weight: 600;
	gap: 10px;
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;
}

.wears-marca__enlace:hover {
	color: var( --wp--preset--color--support );
}

/* --------------------------------------------------------------------------
   Marca · el ancla
   -------------------------------------------------------------------------- */

/* Violeta oscuro `#1C0057`: es el segundo bloque a sangre de la página, el que
   presenta el elemento de firma. Tenía el marfil oscurecido de la herencia. */
.wears-marca__ancla {
	padding: var( --wears-seccion ) 0;
	background: var( --wp--preset--color--primary-hover );
	color: var( --wp--preset--color--base );
}

.wears-marca__ancla-cabeza {
	max-width: 640px;
	margin: 0 auto clamp( 36px, 5vw, 64px );
	text-align: center;
}

.wears-marca__ancla-cabeza .wears-anchor__mark {
	margin: 0 auto 22px;
}

.wears-marca__ancla-cabeza .wears-seccion__titulo {
	margin-bottom: 16px;
}

.wears-marca__ancla-lead {
	margin: 0;
	color: rgba( 237, 230, 216, 0.74 );
	font-size: 15px;
	line-height: 1.75;
}

.wears-marca__razones {
	display: grid;
	margin-bottom: clamp( 36px, 5vw, 64px );
	gap: clamp( 20px, 3vw, 40px );
	grid-template-columns: 1fr;
}

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

.wears-razon {
	padding-top: 18px;
	border-top: 1px solid rgba( 176, 141, 79, 0.35 );
}

.wears-razon__label {
	margin: 0 0 10px;
	color: var( --wp--preset--color--accent );
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.wears-razon__titulo {
	margin: 0 0 10px;
	color: var( --wp--preset--color--base );
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.wears-razon__cuerpo {
	margin: 0;
	color: var( --wears-on-dark-70 );
	font-size: 14px;
	line-height: 1.75;
}

/* Sobre el violeta oscuro de la sección, el panel usa el violeta claro para
   que se distinga del fondo. */
.wears-marca__sello-panel {
	display: grid;
	overflow: hidden;
	border-radius: var( --wears-radius-card );
	background: var( --wp--preset--color--primary );
	grid-template-columns: 1fr;
}

@media ( min-width: 700px ) {
	.wears-marca__sello-panel {
		align-items: center;
		grid-template-columns: minmax( 0, 0.8fr ) minmax( 0, 1fr );
	}
}

.wears-marca__sello-foto {
	display: block;
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: 0;
}

.wears-marca__sello-foto img {
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
}

.wears-marca__sello-texto {
	padding: clamp( 24px, 3.5vw, 48px );
}

.wears-marca__sello-texto h3 {
	margin: 0 0 12px;
	color: var( --wp--preset--color--accent );
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.wears-marca__sello-texto p {
	max-width: 48ch;
	margin: 0;
	color: var( --wears-on-dark-70 );
	font-size: 15px;
	line-height: 1.75;
}

/* --------------------------------------------------------------------------
   Marca · el fundador
   El cliente pidió aparecer lo mínimo. La sección lo respeta: es la más
   pequeña de la página y no lleva foto.
   -------------------------------------------------------------------------- */

.wears-marca__fundador {
	max-width: 620px;
	margin-inline: auto;
	padding: var( --wears-seccion ) clamp( 20px, 3vw, 48px );
	text-align: center;
}

.wears-marca__fundador .wears-eyebrow {
	justify-content: center;
}

.wears-marca__fundador blockquote {
	margin: 0 0 16px;
	font-size: clamp( 19px, 2.4vw, 26px );
	font-weight: 400;
	font-style: italic;
	line-height: 1.5;
}

.wears-marca__fundador-nota {
	margin: 0;
	color: rgba( 26, 22, 19, 0.55 );
	font-size: 14px;
	line-height: 1.75;
}

/* --------------------------------------------------------------------------
   Marca · cierre
   -------------------------------------------------------------------------- */

/* El export deja el cierre en `68vh` en escritorio y lo suelta en móvil. */
.wears-marca__cierre {
	min-height: max( 420px, 56vh );
}

@media ( min-width: 900px ) {
	.wears-marca__cierre {
		min-height: 68vh;
	}
}

.wears-marca__cierre-texto h2 {
	max-width: 18ch;
	margin: 0 0 16px;
	color: var( --wp--preset--color--base );
	font-size: clamp( 28px, 4.6vw, 52px );
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.wears-marca__cierre-texto p {
	max-width: 46ch;
	margin: 0 0 28px;
	color: var( --wears-on-dark-70 );
	font-size: 15px;
	line-height: 1.7;
}

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

/* ==========================================================================
   Contacto — réplica de "Contacto - Cueros Wears.dc.html"
   ========================================================================== */

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

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

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

/* --------------------------------------------------------------------------
   Canales
   -------------------------------------------------------------------------- */

.wears-contacto__canales {
	display: grid;
	padding-top: clamp( 40px, 5vw, 72px );
	padding-bottom: clamp( 48px, 6vw, 80px );
	gap: clamp( 18px, 2.6vw, 32px );
	grid-template-columns: 1fr;
}

@media ( min-width: 900px ) {
	.wears-contacto__canales {
		align-items: start;
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	}
}

.wears-canal {
	display: block;
	padding: clamp( 20px, 2.4vw, 28px );
	border: 1px solid rgba( 26, 22, 19, 0.16 );
	border-radius: var( --wears-radius-card );
	background: var( --wp--preset--color--rule );
	color: inherit;
	text-decoration: none;
	transition:
		border-color var( --wears-duration-micro ) var( --wears-easing ),
		background var( --wears-duration-micro ) var( --wears-easing );
}

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

/* El canal principal es el único sobre violeta: es donde el cliente quiere
   que llegue la gente. */
.wears-canal--principal {
	display: flex;
	height: 100%;
	flex-direction: column;
	justify-content: space-between;
	border-color: transparent;
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
	gap: 24px;
}

.wears-canal--principal:hover {
	background: var( --wp--preset--color--primary-hover );
	color: var( --wp--preset--color--base );
}

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

.wears-canal--principal .wears-canal__label {
	color: var( --wp--preset--color--accent );
}

.wears-canal__valor {
	margin: 0 0 8px;
	color: var( --wp--preset--color--primary );
	font-size: clamp( 16px, 1.8vw, 19px );
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

/* Sobre el violeta del principal, el valor va en marfil: en violeta sobre
   violeta era invisible (pasaba ya con el número de WhatsApp). */
.wears-canal--principal .wears-canal__valor {
	color: var( --wp--preset--color--base );
}

.wears-canal__nota {
	max-width: 46ch;
	margin: 0;
	color: rgba( 26, 22, 19, 0.6 );
	font-size: 13px;
	line-height: 1.7;
}

.wears-canal--principal .wears-canal__nota {
	color: var( --wears-on-dark-70 );
}

.wears-canal__cta {
	display: inline-flex;
	align-items: center;
	padding-top: 18px;
	border-top: 1px solid var( --wears-bar-line );
	color: var( --wp--preset--color--accent );
	font-size: 11px;
	font-weight: 600;
	gap: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wears-contacto__otros {
	display: grid;
	gap: clamp( 14px, 2vw, 20px );
}

/* WhatsApp (DWCW-210): visible sin gritar — borde dorado (el acento es para
   línea y borde), icono y CTA como el canal principal. Nada de verde. */
.wears-canal--whatsapp {
	border-color: var( --wp--preset--color--accent );
}

.wears-canal--whatsapp .wears-canal__label {
	color: var( --wp--preset--color--support );
}

.wears-canal--whatsapp .wears-canal__cta {
	margin-top: 14px;
	border-top: 0;
	padding-top: 0;
}

/* --------------------------------------------------------------------------
   Formulario + tienda
   -------------------------------------------------------------------------- */

.wears-contacto__cuerpo {
	display: grid;
	align-items: start;
	padding-bottom: var( --wears-seccion );
	gap: clamp( 32px, 5vw, 64px );
	grid-template-columns: 1fr;
}

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

	/* La columna del manifiesto es mucho más corta que el formulario: en vez
	   de forzar alturas iguales, acompaña el scroll. El top deja aire bajo el
	   header pegajoso. Funciona porque el grid alinea arriba (align-items:
	   start): sin eso el aside mediría la fila entera y no habría recorrido. */
	.wears-contacto__tienda {
		position: sticky;
		top: 90px;
	}
}

.wears-contacto__form-lead {
	max-width: 48ch;
	margin: 0 0 8px;
	color: rgba( 26, 22, 19, 0.65 );
	font-size: 15px;
	line-height: 1.75;
}

/* En la pantalla de contacto el formulario va a una columna: al lado tiene ya
   la ficha de la tienda y dos columnas dentro de una columna se apelmazan. */
.wears-contacto__form .wears-form__campos {
	grid-template-columns: 1fr;
}

.wears-tienda {
	padding: clamp( 20px, 2.6vw, 28px );
	border: 1px solid rgba( 26, 22, 19, 0.16 );
	border-radius: var( --wears-radius-card );
	background: var( --wp--preset--color--rule );
}

.wears-tienda__titulo {
	margin: 0 0 12px;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.wears-tienda__texto {
	margin: 0 0 20px;
	color: rgba( 26, 22, 19, 0.72 );
	font-size: 14px;
	line-height: 1.7;
}

/* La foto del sello bajo el manifiesto. El span envuelve al img porque el
   radio va en el contenedor con overflow oculto, como el resto de media. */
.wears-tienda__foto {
	display: block;
	overflow: hidden;
	border-radius: var( --wears-radius-media );
}

.wears-tienda__foto img {
	display: block;
	width: 100%;
	height: auto;
}

.wears-contacto__puntos {
	margin: 18px 0 0;
	color: rgba( 26, 22, 19, 0.65 );
	font-size: 13px;
	line-height: 1.7;
}

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

.wears-contacto__faq {
	padding-block: var( --wears-seccion );
	border-top: 1px solid var( --wears-rule-light );
	background: var( --wp--preset--color--rule );
}

.wears-contacto__faq-cabeza {
	max-width: 640px;
	margin-bottom: clamp( 28px, 4vw, 44px );
}

.wears-faq__buscador {
	position: relative;
	margin-bottom: 18px;
}

.wears-faq__buscador input {
	width: 100%;
	padding: 14px 16px 14px 42px;
	border: 1px solid rgba( 26, 22, 19, 0.22 );
	border-radius: var( --wears-radius );
	background: #fff;
	font-family: inherit;
	font-size: 14px;
}

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

.wears-faq__buscador svg {
	position: absolute;
	top: 50%;
	left: 15px;
	color: var( --wp--preset--color--contrast );
	opacity: 0.45;
	transform: translateY( -50% );
}

.wears-faq__categorias {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.wears-faq__categorias button {
	padding: 8px 15px;
	border: 1px solid rgba( 26, 22, 19, 0.2 );
	border-radius: 16px;
	background: transparent;
	color: rgba( 26, 22, 19, 0.65 );
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	cursor: pointer;
	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-faq__categorias button:hover {
	border-color: var( --wp--preset--color--accent );
}

.wears-faq__categorias button.is-activo {
	border-color: var( --wp--preset--color--primary );
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
}

.wears-contacto__faq-cuerpo {
	display: grid;
	align-items: start;
	gap: clamp( 28px, 4vw, 56px );
	grid-template-columns: 1fr;
}

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

.wears-faq__cat {
	display: block;
	margin-bottom: 5px;
	color: var( --wp--preset--color--support );
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.wears-faq__vacio {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px 24px;
	border-top: 1px solid rgba( 26, 22, 19, 0.16 );
	color: rgba( 26, 22, 19, 0.6 );
	font-size: 14px;
	gap: 16px;
	line-height: 1.7;
	text-align: center;
}

.wears-faq__vacio[ hidden ] {
	display: none;
}

.wears-faq__ayuda {
	padding: clamp( 22px, 3vw, 30px );
	border-radius: var( --wears-radius-card );
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
}

.wears-faq__ayuda-label {
	margin: 0 0 10px;
	color: var( --wp--preset--color--accent );
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.wears-faq__ayuda h3 {
	margin: 0 0 12px;
	color: var( --wp--preset--color--base );
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.wears-faq__ayuda p {
	margin: 0 0 18px;
	color: var( --wears-on-dark-70 );
	font-size: 14px;
	line-height: 1.7;
}

.wears-faq__ayuda a {
	display: inline-block;
	padding-bottom: 3px;
	border-bottom: 1px solid var( --wp--preset--color--accent );
	color: var( --wp--preset--color--base );
	font-size: 17px;
	font-weight: 600;
	text-decoration: none;
}

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

/* ==========================================================================
   Aliados comerciales — réplica de
   "Aliados Comerciales - Cueros Wears.dc.html"
   ========================================================================== */

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

@media ( min-width: 900px ) {
	.wears-aliados__hero {
		min-height: max( 620px, 86vh );
	}
}

.wears-aliados__hero .wears-marca__titulo {
	font-size: clamp( 32px, 5.4vw, 62px );
	line-height: 1.05;
}

.wears-aliados__hero .wears-marca__lead {
	max-width: 52ch;
}

.wears-aliados__cta-hero {
	margin: 28px 0 0;
}

/* --------------------------------------------------------------------------
   Cifras
   -------------------------------------------------------------------------- */

.wears-aliados__cifras {
	padding-block: clamp( 32px, 4.5vw, 56px );
	border-bottom: 1px solid var( --wears-rule-light );
}

/* DWCW-203: en móvil las cifras van en lista vertical a ancho completo — la
   etiqueta de la ganancia mínima no cabía en media columna sin quebrarse. */
.wears-aliados__cifras-grid {
	display: grid;
	margin: 0;
	gap: 20px;
	grid-template-columns: 1fr;
}

@media ( min-width: 700px ) {
	.wears-aliados__cifras-grid {
		gap: 24px clamp( 20px, 3vw, 44px );
		grid-template-columns: 1fr 1fr;
	}
}

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

.wears-aliados__cifras-grid dt {
	margin-bottom: 10px;
	font-size: clamp( 24px, 3.2vw, 38px );
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
}

.wears-aliados__cifras-grid dd {
	margin: 0;
	padding-top: 10px;
	border-top: 1px solid var( --wp--preset--color--accent );
	color: rgba( 26, 22, 19, 0.55 );
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.5;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Video de la propuesta comercial (DWCW-206)
   -------------------------------------------------------------------------- */

.wears-aliados__video {
	padding-block: clamp( 32px, 4.5vw, 56px ) 0;
}

.wears-aliados__video-marco {
	max-width: 880px;
	margin: 0 auto;
}

/* La entrada compone la subida del reveal con un escalado suave, para que el
   video no pase desapercibido — misma curva y duración que todo el sitio. */
.wears-aliados__video-marco.wears-reveal {
	transform: translateY( 24px ) scale( 0.965 );
}

.wears-aliados__video-marco.wears-reveal.is-revealed {
	transform: none;
}

.wears-aliados__video-pieza {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var( --wears-radius-media );
	background: var( --wp--preset--color--contrast );
}

/* --------------------------------------------------------------------------
   Reproductor propio (aliados)

   Sin JavaScript la capa .wears-player__ui queda [hidden] y el video
   conserva sus controles nativos: todo lo de abajo es mejora progresiva.
   El vocabulario es el del sistema: aro dorado de línea fina (eco del
   ancla), filete de progreso, rótulos en eyebrow y trazos de 1.5.
   -------------------------------------------------------------------------- */

.wears-player {
	position: relative;
	overflow: hidden;
	border-radius: var( --wears-radius-media );
	background: var( --wp--preset--color--contrast );
}

/* El radio pasa al envoltorio para que también recorte la capa de controles. */
.wears-player .wears-player__media {
	border-radius: 0;
}

/* Mientras los controles duermen, el cursor también. */
.wears-player.is-oculto {
	cursor: none;
}

/* -- Portada: aro de línea fina + rótulo eyebrow -------------------------- */

.wears-player__portada {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 100%;
	padding: 0;
	border: 0;
	background: rgba( 26, 22, 19, 0.24 );
	color: var( --wp--preset--color--base );
	cursor: pointer;
	transition: background var( --wears-duration-micro ) var( --wears-easing );
}

.wears-player__portada:hover {
	background: rgba( 26, 22, 19, 0.4 );
}

.wears-player.is-iniciado .wears-player__portada {
	display: none;
}

.wears-player__aro {
	position: relative;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border: 1px solid var( --wp--preset--color--accent );
	border-radius: 50%;
	background: rgba( 26, 22, 19, 0.35 );
	transition: background var( --wears-duration-micro ) var( --wears-easing );
}

/* Segundo filete interior, como el ancla entre sus dos filetes. */
.wears-player__aro::before {
	content: '';
	position: absolute;
	inset: 4px;
	border: 1px solid rgba( 237, 230, 216, 0.25 );
	border-radius: 50%;
}

.wears-player__portada:hover .wears-player__aro {
	background: rgba( 26, 22, 19, 0.55 );
}

.wears-player__aro svg {
	width: 26px;
	height: 26px;
	/* El triángulo, un pelo a la derecha: el centro óptico no es el geométrico. */
	transform: translateX( 2px );
}

.wears-player__portada-rotulo {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* -- Barra de mandos ------------------------------------------------------ */

.wears-player__barra {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 40px 16px 10px;
	background: linear-gradient( to top, rgba( 26, 22, 19, 0.72 ), rgba( 26, 22, 19, 0 ) );
	color: var( --wp--preset--color--base );
	opacity: 0;
	transition: opacity var( --wears-duration-micro ) var( --wears-easing );
}

/* La barra sólo existe una vez arrancado el video; se esconde sola al rato. */
.wears-player.is-iniciado .wears-player__barra {
	opacity: 1;
}

.wears-player.is-iniciado.is-oculto .wears-player__barra {
	opacity: 0;
	pointer-events: none;
}

.wears-player__mandos {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wears-player__aire {
	flex: 1;
}

.wears-player__boton {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: color var( --wears-duration-micro ) var( --wears-easing );
}

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

.wears-player__boton svg {
	width: 20px;
	height: 20px;
}

/* Play/pausa y altavoz cambian de cara por clase en el envoltorio. */
.wears-player .wears-player__icono--pausa {
	display: none;
}

.wears-player.is-reproduciendo .wears-player__icono--play {
	display: none;
}

.wears-player.is-reproduciendo .wears-player__icono--pausa {
	display: block;
}

.wears-player .wears-player__icono--tacha {
	display: none;
}

.wears-player.is-silencio .wears-player__icono--ondas {
	display: none;
}

.wears-player.is-silencio .wears-player__icono--tacha {
	display: block;
}

.wears-player__tiempo {
	font-size: 11px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.14em;
	line-height: 1.4;
	white-space: nowrap;
}

/* -- Filete de progreso ---------------------------------------------------
   El relleno dorado se pinta con --wears-avance, que escribe el JS.
   WebKit va por gradiente en la pista; Firefox trae ::-moz-range-progress. */

.wears-player__progreso {
	appearance: none;
	-webkit-appearance: none;
	display: block;
	width: 100%;
	height: 16px;
	margin: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
}

.wears-player__progreso::-webkit-slider-runnable-track {
	height: 2px;
	border-radius: 1px;
	background: linear-gradient(
		to right,
		var( --wp--preset--color--accent ) var( --wears-avance, 0% ),
		rgba( 237, 230, 216, 0.28 ) var( --wears-avance, 0% )
	);
}

.wears-player__progreso::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 12px;
	height: 12px;
	margin-top: -5px;
	border: 1px solid var( --wp--preset--color--accent );
	border-radius: 50%;
	background: var( --wp--preset--color--base );
	opacity: 0;
	transition: opacity var( --wears-duration-micro ) var( --wears-easing );
}

.wears-player__progreso:hover::-webkit-slider-thumb,
.wears-player__progreso:focus-visible::-webkit-slider-thumb {
	opacity: 1;
}

.wears-player__progreso::-moz-range-track {
	height: 2px;
	border-radius: 1px;
	background: rgba( 237, 230, 216, 0.28 );
}

.wears-player__progreso::-moz-range-progress {
	height: 2px;
	border-radius: 1px;
	background: var( --wp--preset--color--accent );
}

.wears-player__progreso::-moz-range-thumb {
	width: 10px;
	height: 10px;
	border: 1px solid var( --wp--preset--color--accent );
	border-radius: 50%;
	background: var( --wp--preset--color--base );
	opacity: 0;
	transition: opacity var( --wears-duration-micro ) var( --wears-easing );
}

.wears-player__progreso:hover::-moz-range-thumb,
.wears-player__progreso:focus-visible::-moz-range-thumb {
	opacity: 1;
}

/* -- Pantalla completa ---------------------------------------------------- */

.wears-player:fullscreen {
	border-radius: 0;
}

.wears-player:fullscreen .wears-player__media {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* -- Movimiento reducido -------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	.wears-player__portada,
	.wears-player__aro,
	.wears-player__barra,
	.wears-player__boton,
	.wears-player__progreso::-webkit-slider-thumb,
	.wears-player__progreso::-moz-range-thumb {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   El Barco Wears
   -------------------------------------------------------------------------- */

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

.wears-aliados__barco-grid,
.wears-aliados__postular-grid {
	display: grid;
	align-items: start;
	gap: clamp( 32px, 5vw, 64px );
	grid-template-columns: 1fr;
}

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

.wears-aliados__lead {
	max-width: 52ch;
	margin: 0 0 24px;
	color: rgba( 26, 22, 19, 0.7 );
	font-size: 15px;
	line-height: 1.75;
}

/* DWCW-187 (07/08): «El Barco Wears» como título grande y llamativo de la
   sección del exhibidor, con su claim en peso medio debajo. */
.wears-aliados__barco-titulo {
	font-size: clamp( 32px, 4.6vw, 54px );
}

.wears-aliados__barco-claim {
	margin: 10px 0 14px;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.wears-aliados__specs {
	margin: 0;
}

.wears-aliados__specs > div {
	padding: 16px 0;
	border-top: 1px solid var( --wears-rule-light );
}

/* El punto dorado del export delante de cada rasgo. */
.wears-aliados__specs dt {
	position: relative;
	margin-bottom: 6px;
	padding-left: 18px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.wears-aliados__specs dt::before {
	position: absolute;
	top: 0.55em;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var( --wp--preset--color--accent );
	content: '';
}

.wears-aliados__specs dd {
	max-width: 52ch;
	margin: 0;
	padding-left: 18px;
	color: rgba( 26, 22, 19, 0.65 );
	font-size: 13px;
	line-height: 1.7;
}

.wears-aliados__figura {
	margin: 0;
	align-self: center;
}

/* DWCW-200: el exhibidor va en carrusel. La pista es cuadrada —las cinco
   tomas nuevas son 1:1 nativas y así se ven íntegras— y desplaza por scroll
   con snap: el swipe en móvil es scroll normal, sin JS de arrastre. El JS
   (aliados.js) sólo mueve el autoplay, las flechas y los puntos. */
.wears-barco-carrusel {
	position: relative;
}

.wears-barco-carrusel__pista {
	display: flex;
	overflow-x: auto;
	aspect-ratio: 1 / 1;
	border-radius: var( --wears-radius-media );
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.wears-barco-carrusel__pista::-webkit-scrollbar {
	display: none;
}

.wears-barco-carrusel__diapositiva {
	flex: 0 0 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.wears-barco-carrusel__diapositiva img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wears-barco-carrusel__flecha {
	position: absolute;
	top: 50%;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: var( --wears-radius );
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
	cursor: pointer;
	transform: translateY( -50% );
	transition: background-color var( --wears-duration-micro ) var( --wears-easing );
}

.wears-barco-carrusel__flecha:hover,
.wears-barco-carrusel__flecha:focus-visible {
	background: var( --wp--preset--color--primary-hover );
}

.wears-barco-carrusel__flecha--prev {
	left: 10px;
}

.wears-barco-carrusel__flecha--next {
	right: 10px;
}

.wears-barco-carrusel__puntos {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
	margin-bottom: 12px;
}

.wears-barco-carrusel__puntos button {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 26, 22, 19, 0.25 );
	cursor: pointer;
	transition: background-color var( --wears-duration-micro ) var( --wears-easing );
}

.wears-barco-carrusel__puntos button[aria-current='true'] {
	background: var( --wp--preset--color--accent );
}

.wears-aliados__figura figcaption {
	color: rgba( 26, 22, 19, 0.5 );
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-align: center;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Quién aporta qué
   -------------------------------------------------------------------------- */

/* Sobre marfil: en el export el `#E3DAC7` no es de la franja sino del panel
   «Aporta el aliado», que es lo que lo separa del violeta de al lado. */
.wears-aliados__terminos {
	padding-block: var( --wears-seccion );
}

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

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

.wears-aporta {
	padding: clamp( 26px, 3.4vw, 44px );
	border: 1px solid rgba( 26, 22, 19, 0.14 );
	border-radius: var( --wears-radius-card );
	background: var( --wp--preset--color--rule );
}

/* La columna de Wears va en violeta: es la que carga con casi todo. */
.wears-aporta--wears {
	border-color: transparent;
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
}

.wears-aporta h3 {
	margin: 0 0 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba( 26, 22, 19, 0.16 );
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.wears-aporta--wears h3 {
	border-bottom-color: var( --wears-bar-line );
	color: var( --wp--preset--color--accent );
}

.wears-aporta ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wears-aporta li {
	margin-bottom: 18px;
}

.wears-aporta li:last-child {
	margin-bottom: 0;
}

.wears-aporta strong {
	display: block;
	margin-bottom: 5px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.wears-aporta span {
	display: block;
	max-width: 46ch;
	color: rgba( 26, 22, 19, 0.65 );
	font-size: 13px;
	line-height: 1.7;
}

.wears-aporta--wears span {
	color: var( --wears-on-dark-70 );
}

/* Última fila del cuadro del aliado, tras un filete, como en el export. */
.wears-aliados__nota-terminos {
	margin: 28px 0 0;
	padding-top: 20px;
	border-top: 1px solid rgba( 26, 22, 19, 0.16 );
	color: rgba( 26, 22, 19, 0.6 );
	font-size: 13px;
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Cuatro pasos
   -------------------------------------------------------------------------- */

.wears-aliados__proceso {
	padding-block: var( --wears-seccion );
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
}

.wears-aliados__proceso .wears-seccion__titulo {
	color: var( --wp--preset--color--base );
}

.wears-aliados__proceso-grid {
	display: grid;
	margin: 0;
	padding: 0;
	gap: clamp( 20px, 3vw, 32px );
	grid-template-columns: 1fr;
	list-style: none;
}

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

.wears-aliados__proceso-grid li {
	padding-top: 18px;
	border-top: 1px solid var( --wears-bar-line );
}

.wears-aliados__proceso-n {
	display: block;
	margin-bottom: 12px;
	color: var( --wp--preset--color--accent );
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
}

.wears-aliados__proceso-grid h3 {
	margin: 0 0 8px;
	color: var( --wp--preset--color--base );
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.wears-aliados__proceso-grid p {
	margin: 0 0 14px;
	color: var( --wears-on-dark-70 );
	font-size: 13px;
	line-height: 1.7;
}

.wears-aliados__proceso-cuando {
	color: var( --wears-on-dark-70 );
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Puntos activos
   -------------------------------------------------------------------------- */

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

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

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

@media ( min-width: 1100px ) {
	.wears-aliados__puntos-grid {
		grid-template-columns: repeat( 4, 1fr );
	}
}

.wears-punto {
	padding: clamp( 20px, 2.4vw, 26px );
	border: 1px solid rgba( 26, 22, 19, 0.16 );
	border-radius: var( --wears-radius-card );
	background: var( --wp--preset--color--base );
}

.wears-punto__ciudad {
	margin: 0 0 12px;
	color: rgba( 26, 22, 19, 0.45 );
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.wears-punto__tag {
	display: inline-block;
	margin-bottom: 12px;
	padding: 5px 11px;
	border: 1px solid var( --wp--preset--color--accent );
	border-radius: 14px;
	color: var( --wp--preset--color--support );
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.wears-punto__tag--propia {
	border-color: var( --wp--preset--color--primary );
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
}

.wears-punto__nombre {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* La dirección de la tienda propia (DWCW-207): texto plano, sin GPS ni mapa. */
.wears-punto__direccion {
	margin: 0 0 8px;
	color: var( --wp--preset--color--support );
	font-size: 12px;
	line-height: 1.6;
}

.wears-punto__detalle {
	margin: 0 0 14px;
	color: rgba( 26, 22, 19, 0.65 );
	font-size: 13px;
	line-height: 1.7;
}

.wears-punto__estado {
	display: flex;
	align-items: center;
	margin: 0;
	color: var( --wp--preset--color--support );
	font-size: 10px;
	font-weight: 600;
	gap: 8px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wears-punto__estado::before {
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var( --wp--preset--color--accent );
	content: '';
}

/* «Próximamente» se distingue del activo sin gritar: texto apagado y el
   punto hueco en lugar de lleno (DWCW-207). */
.wears-punto__estado--proximamente {
	color: rgba( 26, 22, 19, 0.45 );
}

.wears-punto__estado--proximamente::before {
	border: 1px solid var( --wp--preset--color--accent );
	background: transparent;
}

/* La cinta de perfiles reutiliza la de la portada, en marfil sobre violeta. */
.wears-cinta--aliados {
	border-top: 1px solid var( --wears-bar-line );
}

/* --------------------------------------------------------------------------
   Postulación
   -------------------------------------------------------------------------- */

/* Sobre marfil, como el resto de bloques claros de la página. */
.wears-aliados__postular {
	padding-block: var( --wears-seccion );
}

@media ( min-width: 900px ) {
	.wears-aliados__postular-grid {
		grid-template-columns: minmax( 0, 0.8fr ) minmax( 0, 1.2fr );
	}

	/* El texto acompaña al formulario mientras se rellena. */
	.wears-aliados__postular-texto {
		position: sticky;
		top: 110px;
	}
}

.wears-aliados__notas {
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.wears-aliados__notas li {
	position: relative;
	margin-bottom: 14px;
	padding-left: 18px;
	color: rgba( 26, 22, 19, 0.6 );
	font-size: 13px;
	line-height: 1.7;
}

.wears-aliados__notas li::before {
	position: absolute;
	top: 9px;
	left: 0;
	width: 6px;
	height: 1px;
	background: var( --wp--preset--color--accent );
	content: '';
}

/* La caja del export: marfil oscurecido, no el fondo de la página. */
.wears-aliados__postular-form {
	padding: clamp( 24px, 3.2vw, 44px );
	border: 1px solid rgba( 26, 22, 19, 0.14 );
	border-radius: var( --wears-radius-card );
	background: var( --wp--preset--color--rule );
}

/* Chips de los metros del exhibidor. */
.wears-form__rotulo-suelto {
	display: block;
	margin-bottom: 10px;
	color: rgba( 26, 22, 19, 0.5 );
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wears-form__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* El radio va oculto pero dentro del chip. Sin el relative, el `width: 100%`
   que los campos del formulario ponen a todo input se resolvía contra el
   viewport y cada radio empujaba el documento ~900px a la derecha: era el
   scroll horizontal de Aliados y Contacto. */
.wears-form__chip {
	position: relative;
}

.wears-form__chip input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.wears-form__chip span {
	display: inline-block;
	padding: 11px 16px;
	border: 1px solid rgba( 26, 22, 19, 0.22 );
	border-radius: var( --wears-radius );
	background: transparent;
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	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-form__chip input:checked + span {
	border-color: var( --wp--preset--color--primary );
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
}

.wears-form__chip input:focus-visible + span {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 2px;
}

.wears-aliados__postular-form .wears-form {
	margin-top: 0;
}