/* ==========================================================================
   Páginas legales — réplica de "Legal - Cueros Wears.dc.html"

   Documento a una columna con índice fijo al lado. Medida corta: un texto
   legal es lo último que alguien quiere leer, así que al menos se lee bien.
   ========================================================================== */

.wears-legal {
	padding-bottom: var( --wears-seccion );
	background: var( --wp--preset--color--base );
}

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

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */

/* Cabecera en violeta, como el export: la página legal empieza con su franja
   oscura y el resto del documento va sobre marfil. Iba sobre marfil entera. */
.wears-legal__cabeza {
	padding-block: clamp( 36px, 4.5vw, 68px ) clamp( 30px, 3.6vw, 48px );
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
}

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

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

.wears-legal__titulo {
	max-width: 22ch;
	margin: 0 0 16px;
	color: var( --wp--preset--color--base );
	font-size: clamp( 26px, 4.4vw, 50px );
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.04;
}

.wears-legal__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	color: var( --wears-on-dark-70 );
	font-size: 11px;
	gap: 20px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Pestañas de documento
   -------------------------------------------------------------------------- */

.wears-legal__tabs {
	position: sticky;
	top: 0;
	z-index: 40;
	border-block: 1px solid var( --wears-rule-light );
	background: rgba( 237, 230, 216, 0.96 );
	backdrop-filter: blur( 8px );
}

.wears-legal__tabs .wears-legal__inner {
	display: flex;
	overflow-x: auto;
	gap: 6px;

	/* En móvil las tres pestañas no caben: se deslizan, sin barra visible. */
	scrollbar-width: none;
}

.wears-legal__tabs .wears-legal__inner::-webkit-scrollbar {
	display: none;
}

.wears-legal__tab {
	padding: 14px 16px;
	border-bottom: 2px solid transparent;
	color: rgba( 26, 22, 19, 0.55 );
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition:
		border-color var( --wears-duration-micro ) var( --wears-easing ),
		color var( --wears-duration-micro ) var( --wears-easing );
}

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

.wears-legal__tab.is-actual {
	border-bottom-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--contrast );
}

/* --------------------------------------------------------------------------
   Cuerpo
   -------------------------------------------------------------------------- */

.wears-legal__cuerpo {
	display: grid;
	align-items: start;
	padding-top: clamp( 32px, 5vw, 56px );
	gap: clamp( 28px, 4vw, 64px );
	grid-template-columns: 1fr;
}

@media ( min-width: 1000px ) {
	.wears-legal__cuerpo {
		grid-template-columns: 240px minmax( 0, 1fr );
	}
}

/* El índice sólo tiene sentido si hay sitio para él al lado del texto. */
.wears-legal__indice {
	display: none;
}

@media ( min-width: 1000px ) {
	.wears-legal__indice {
		display: block;
	}

	.wears-legal__indice-sticky {
		position: sticky;
		top: 110px;
	}
}

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

.wears-legal__indice nav {
	display: flex;
	flex-direction: column;
	padding-left: 14px;
	border-left: 1px solid var( --wears-rule-light );
	gap: 10px;
}

.wears-legal__indice nav a {
	color: rgba( 26, 22, 19, 0.65 );
	font-size: 13px;
	line-height: 1.5;
	text-decoration: none;
	transition: color var( --wears-duration-micro ) var( --wears-easing );
}

.wears-legal__indice nav a:hover {
	color: var( --wp--preset--color--support );
}

.wears-legal__ayuda {
	margin-top: 28px;
	padding: 18px;
	border-radius: var( --wears-radius-card );
	background: var( --wp--preset--color--rule );
}

.wears-legal__ayuda p {
	margin: 0 0 10px;
	color: rgba( 26, 22, 19, 0.65 );
	font-size: 13px;
	line-height: 1.6;
}

.wears-legal__ayuda a {
	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;
}

/* --------------------------------------------------------------------------
   El documento
   -------------------------------------------------------------------------- */

.wears-legal__doc {
	max-width: 68ch;
}

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

.wears-legal__doc p {
	margin: 0 0 18px;
	color: rgba( 26, 22, 19, 0.78 );
	font-size: 15px;
	line-height: 1.85;
}

/* Cada H2 abre sección con filete arriba y aire por delante: en un documento
   largo, el corte tiene que verse sin leer. */
.wears-legal__doc h2 {
	margin: clamp( 32px, 4.5vw, 52px ) 0 16px;
	padding-top: clamp( 20px, 2.6vw, 28px );
	border-top: 1px solid var( --wears-rule-light );
	font-size: clamp( 19px, 2.4vw, 26px );
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.2;

	/* Para que el anclaje no quede debajo de las pestañas pegajosas. */
	scroll-margin-top: 130px;
}

.wears-legal__doc h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.wears-legal__doc h3 {
	margin: 26px 0 10px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.wears-legal__doc ul,
.wears-legal__doc ol {
	margin: 0 0 18px;
	padding-left: 1.3em;
	color: rgba( 26, 22, 19, 0.78 );
	font-size: 15px;
	line-height: 1.85;
}

.wears-legal__doc li {
	margin-bottom: 8px;
}

.wears-legal__doc a {
	border-bottom: 1px solid var( --wp--preset--color--accent );
	color: var( --wp--preset--color--primary );
	text-decoration: none;
}

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

.wears-legal__doc strong {
	font-weight: 600;
}