/*
 * home.css — portada de C.C Visto.
 *
 * Paleta muestreada del PNG de referencia por promedio de regiones, no estimada
 * a ojo: el degradado va de #A31A2A (arriba-izquierda) a #F69050
 * (abajo-derecha), con #C74E39 en el punto medio.
 *
 * Reglas del proyecto que aquí se respetan:
 *  - Prohibido @media (prefers-color-scheme). La única @media de color admitida
 *    es prefers-reduced-motion.
 *  - Todo bloque que cambia el fondo declara `color` explícitamente. Cambiar uno
 *    y no el otro es como se llega a texto invisible.
 *  - Sin fuentes remotas ni librerías. Manrope ya la sirve el tema padre desde
 *    sus propios archivos.
 */

.svt-home {
	--svt-carmin:  #a31a2a;
	--svt-brasa:   #c74e39;
	--svt-naranja: #f69050;
	--svt-tinta:   #111111;
	--svt-carbon:  #1f1f1f;
	--svt-noche:   #252526;
	--svt-base:    #ffffff;
	--svt-humo:    #f6f6f6;
	--svt-oro:     #f5b133;

	--svt-campo: linear-gradient(128deg, #a31a2a 0%, #b8362f 34%, #c74e39 58%, #f69050 100%);

	--svt-margen: clamp(1rem, 4.5vw, 4rem);
	--svt-ancho:  1440px;

	--svt-curva:  cubic-bezier(0.16, 1, 0.3, 1);

	background: var(--svt-base);
	color: var(--svt-tinta);
	font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
	overflow-x: clip;
}

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

.svt-home img { display: block; max-width: 100%; height: auto; }

/*
 * Integración con el envoltorio del tema padre.
 *
 * Twenty Twenty-Five usa `useRootPaddingAwareAlignments`, así que mete relleno
 * lateral en `.wp-site-blocks` y separación vertical entre sus hijos directos.
 * Las secciones del home van a sangre y traen su propio ritmo vertical, así que
 * aquí se anulan las dos cosas. Se hace en CSS y no en un theme.json propio a
 * propósito: los Estilos globales guardados en base de datos le ganarían a un
 * theme.json del tema, y en este servidor no puedo comprobar si existen.
 */
.svt-home .wp-site-blocks {
	padding-left: 0;
	padding-right: 0;
	background: var(--svt-base);
	color: var(--svt-tinta);
}

.svt-home .wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }

.svt-saltar {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 0.85rem 1.25rem;
	background: var(--svt-carbon);
	color: var(--svt-base);
	font-weight: 700;
	text-decoration: none;
	border-radius: 0 0 10px 0;
}

.svt-saltar:focus { left: 0; top: 0; }

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

.svt-limite {
	max-width: var(--svt-ancho);
	margin-inline: auto;
	padding-inline: var(--svt-margen);
}

/* ===================================================================
   Cabecera
   =================================================================== */

.svt-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: var(--svt-ancho);
	margin-inline: auto;
	padding: 1.35rem var(--svt-margen);
	background: var(--svt-base);
	color: var(--svt-tinta);
}

.svt-logo {
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: -0.04em;
	font-style: italic;
	text-transform: uppercase;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

.svt-nav { display: flex; gap: clamp(1rem, 2.2vw, 2.25rem); }

.svt-nav a {
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: inherit;
	text-decoration: none;
	padding-block: 0.25rem;
	border-bottom: 2px solid transparent;
	transition: border-color 0.18s var(--svt-curva);
}

.svt-nav a:hover,
.svt-nav a:focus-visible { border-bottom-color: var(--svt-tinta); }

.svt-utiles { display: flex; align-items: center; gap: 0.5rem; }

.svt-util {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 40px;
	padding-inline: 0.7rem;
	border: 1px solid color-mix(in srgb, var(--svt-tinta) 16%, transparent);
	border-radius: 999px;
	background: var(--svt-base);
	color: var(--svt-tinta);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.18s var(--svt-curva), background-color 0.18s var(--svt-curva);
}

.svt-util:hover,
.svt-util:focus-visible {
	border-color: var(--svt-tinta);
	background: var(--svt-humo);
}

.svt-util svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.svt-util--busca { min-width: 168px; justify-content: flex-start; color: color-mix(in srgb, var(--svt-tinta) 62%, transparent); }

/* ===================================================================
   Portada: titular a escala de valla, roto por el riel y el campo
   =================================================================== */

.svt-portada { position: relative; background: var(--svt-base); color: var(--svt-tinta); }

.svt-titular {
	max-width: var(--svt-ancho);
	margin: clamp(0.5rem, 1.5vw, 1.25rem) auto 0;
	padding-inline: var(--svt-margen);
	font-size: clamp(3.1rem, 13.2vw, 12.5rem);
	font-weight: 800;
	line-height: 0.82;
	letter-spacing: -0.048em;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--svt-tinta);
}

/* En ancho de escritorio el titular va en UNA línea y llena el ancho, como en la
   referencia. Partido en dos dejaba un hueco blanco de casi un cuarto del primer
   viewport a la derecha de «CIUDAD», porque la segunda línea es más corta. */
@media (min-width: 900px) {
	.svt-titular {
		font-size: min(10.4vw, 10rem);
		white-space: nowrap;
	}
}

/* El riel sube y muerde el titular: esa oclusión es la firma de la portada. */
.svt-marquesina {
	position: relative;
	z-index: 2;
	margin-top: clamp(-1.4rem, -2.6vw, -0.6rem);
	padding-block: 0.75rem;
	background: var(--svt-noche);
	color: var(--svt-base);
	overflow: hidden;
	-webkit-mask-image: none;
}

.svt-marquesina__pista {
	display: flex;
	width: max-content;
	animation: svt-correr 34s linear infinite;
}

.svt-marquesina__grupo { display: flex; align-items: center; flex: 0 0 auto; }

.svt-marquesina__item {
	padding-inline: 1.4rem;
	font-size: clamp(0.9rem, 1.5vw, 1.0625rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	white-space: nowrap;
	color: inherit;
}

.svt-marquesina__chispa { width: 15px; height: 15px; flex: 0 0 auto; fill: var(--svt-naranja); }

@keyframes svt-correr {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-33.3333%, 0, 0); }
}

/* ===================================================================
   Hero
   =================================================================== */

.svt-hero { position: relative; z-index: 1; background: var(--svt-base); color: var(--svt-tinta); }

/* Rejilla con el contenido anclado abajo. Antes esto era un bloque normal y el
   `margin-top:auto` de la copia no hacía nada: la posición dependía de un
   padding-top gigante que dejaba ~190 px de degradado muerto bajo la píldora. */
.svt-hero__campo {
	position: relative;
	isolation: isolate;
	display: grid;
	align-content: end;
	min-height: clamp(420px, 52vw, 620px);
	background: var(--svt-campo);
	color: var(--svt-base);
	overflow: hidden;
}

.svt-hero__laminas { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }

.svt-hero__lamina {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.9s var(--svt-curva);
}

.svt-hero__lamina.is-activa { opacity: 1; }

.svt-hero__lamina img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 68% center;
}

/* Velo direccional: garantiza contraste de la copia sobre el extremo naranja,
   donde blanco sobre #F69050 se queda en 2.3:1. */
/* Velo direccional. Blanco sobre el extremo naranja #F69050 da 2.3:1, y con la
   chaqueta amarilla debajo llega a bajar a 1.35:1. El velo es lo que sostiene el
   contraste sin renunciar al degradado; no es decoración. */
.svt-hero__velo {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(20, 5, 7, 0.86) 0%, rgba(20, 5, 7, 0.6) 30%, rgba(20, 5, 7, 0.16) 62%, rgba(20, 5, 7, 0) 82%),
		linear-gradient(to right, rgba(20, 5, 7, 0.62) 0%, rgba(20, 5, 7, 0.12) 42%, rgba(20, 5, 7, 0) 62%);
	pointer-events: none;
}

.svt-hero__copia {
	position: relative;
	z-index: 3;
	max-width: min(30rem, 82%);
	padding: clamp(1.5rem, 4vw, 3.25rem);
	color: var(--svt-base);
}

.svt-hero__titulo {
	margin: 0 0 0.6rem;
	font-size: clamp(1.6rem, 3.1vw, 2.4rem);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.04em;
	color: inherit;
}

.svt-hero__bajada {
	margin: 0 0 1.4rem;
	max-width: 34ch;
	font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
	line-height: 1.5;
	color: color-mix(in srgb, #ffffff 88%, var(--svt-carmin));
}

/* Tarjetas flotantes con marco blanco macizo, como en la referencia.
   Sin vidrio ni sombra difusa: el contrato de dirección los prohíbe, y una
   primera versión con backdrop-filter los tenía. La sombra lleva desplazamiento
   real, no es un halo centrado. */
.svt-hero__flotante {
	position: absolute;
	z-index: 3;
	margin: 0;
	width: clamp(96px, 13vw, 168px);
	padding: 5px 5px 0;
	border: 2px solid #ffffff;
	border-radius: 10px;
	background: rgba(20, 5, 7, 0.28);
	color: var(--svt-base);
	box-shadow: 6px 12px 0 -2px rgba(20, 5, 7, 0.32);
}

.svt-hero__flotante img { border-radius: 6px; aspect-ratio: 3 / 4; object-fit: cover; }

.svt-hero__flotante figcaption {
	padding: 0.4rem 0.1rem 0.45rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: inherit;
}

.svt-hero__flotante--alta { top: 11%; left: clamp(18%, 26vw, 30%); }
.svt-hero__flotante--baja { bottom: 12%; right: clamp(4%, 6vw, 8%); }

.svt-hero__mandos {
	position: absolute;
	z-index: 3;
	top: 50%;
	right: clamp(0.75rem, 2vw, 1.6rem);
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

.svt-hero__puntos { display: flex; flex-direction: inherit; align-items: center; gap: 0.5rem; }

/* WCAG 2.2.2: un carrusel que gira solo necesita una forma de detenerlo, y
   `mouseenter` no existe en táctil, que es donde más se ve este home. */
.svt-hero__pausa {
	width: 30px; height: 30px;
	display: grid; place-items: center;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 999px;
	background: rgba(20, 5, 7, 0.4);
	color: #ffffff;
	cursor: pointer;
}

.svt-hero__pausa svg { width: 13px; height: 13px; fill: currentColor; }
.svt-hero__pausa:hover { background: rgba(20, 5, 7, 0.65); border-color: #ffffff; }
.svt-hero__pausa .svt-icono-play { display: none; }
.svt-hero__pausa[data-parado="si"] .svt-icono-play  { display: block; }
.svt-hero__pausa[data-parado="si"] .svt-icono-pausa { display: none; }

.svt-hero__punto {
	width: 26px; height: 26px;
	display: grid; place-items: center;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.svt-hero__punto::before {
	content: "";
	width: 7px; height: 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.5);
	transition: background-color 0.25s var(--svt-curva), transform 0.25s var(--svt-curva);
}

.svt-hero__punto.is-activa::before { background: #ffffff; transform: scale(1.35); }
.svt-hero__punto:hover::before    { background: rgba(255, 255, 255, 0.85); }

/* ===================================================================
   Píldoras y enlaces
   =================================================================== */

.svt-pildora {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding-inline: 1.5rem;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.2s var(--svt-curva), background-color 0.2s var(--svt-curva);
}

.svt-pildora--clara  { background: var(--svt-base);   color: var(--svt-tinta); }
.svt-pildora--oscura { background: var(--svt-carbon); color: var(--svt-base); }

.svt-pildora:hover  { transform: translateY(-2px); }
.svt-pildora--clara:hover  { background: #f0efec; }
.svt-pildora--oscura:hover { background: #000000; }

.svt-enlace-simple {
	font-size: 0.9375rem;
	font-weight: 600;
	color: inherit;
	text-underline-offset: 4px;
}

.svt-home :focus-visible {
	outline: 3px solid var(--svt-carmin);
	outline-offset: 3px;
	border-radius: 4px;
}

.svt-hero :focus-visible,
.svt-madrugon :focus-visible,
.svt-cierre :focus-visible { outline-color: #ffffff; }

/* ===================================================================
   Carrusel de producto
   =================================================================== */

.svt-carrusel {
	max-width: var(--svt-ancho);
	margin-inline: auto;
	padding: clamp(3rem, 7vw, 6rem) 0 clamp(1rem, 2vw, 2rem);
	background: var(--svt-base);
	color: var(--svt-tinta);
}

.svt-carrusel__cabeza {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	padding-inline: var(--svt-margen);
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.svt-carrusel__titulo {
	margin: 0;
	font-size: clamp(1.75rem, 4vw, 2.9rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.045em;
	color: inherit;
}

.svt-carrusel__mandos { display: flex; align-items: center; gap: 0.5rem; }

.svt-flecha {
	width: 44px; height: 44px;
	display: grid; place-items: center;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--svt-tinta) 18%, transparent);
	border-radius: 999px;
	background: var(--svt-base);
	color: var(--svt-tinta);
	cursor: pointer;
	transition: background-color 0.18s var(--svt-curva), border-color 0.18s var(--svt-curva), opacity 0.18s var(--svt-curva);
}

.svt-flecha svg { width: 19px; height: 19px; }
.svt-flecha:hover:not(:disabled) { background: var(--svt-humo); border-color: var(--svt-tinta); }
.svt-flecha:disabled { opacity: 0.32; cursor: default; }

.svt-carrusel__pista {
	display: grid;
	grid-auto-flow: column;
	gap: clamp(0.75rem, 1.4vw, 1.25rem);
	padding-inline: var(--svt-margen);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--svt-margen);
	scrollbar-width: none;
}

.svt-carrusel__pista::-webkit-scrollbar { display: none; }

/* Ancho explícito, no fracciones del contenedor.
 *
 * Primero fueron 3 y 4 columnas exactas: las flechas nacían deshabilitadas
 * porque no había nada que desplazar. Después `calc((100% - …) / 3.4)` para que
 * el siguiente artículo asomara, y el porcentaje resolvió contra algo distinto
 * de lo previsto: las tarjetas se encogieron a ~160 px y el texto se salió de la
 * tesela. Un ancho explícito no depende de cómo resuelva el porcentaje, y con
 * ocho referencias siempre queda contenido fuera de vista. */
.svt-carrusel--horizontal .svt-carrusel__pista { grid-auto-columns: clamp(272px, 29vw, 384px); }
.svt-carrusel--retrato    .svt-carrusel__pista { grid-auto-columns: clamp(196px, 21vw, 288px); }

/* --- Tarjeta ------------------------------------------------------- */

.svt-producto { scroll-snap-align: start; min-width: 0; }

.svt-producto__medio {
	display: block;
	overflow: hidden;
	background: var(--svt-humo);
	color: var(--svt-tinta);
}

.svt-producto__medio img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--svt-curva);
}

.svt-producto:hover .svt-producto__medio img { transform: scale(1.04); }

.svt-sin-foto {
	display: grid;
	place-items: center;
	height: 100%;
	background: var(--svt-campo);
	color: var(--svt-base);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.04em;
}

/* Horizontal: imagen a la izquierda, datos a la derecha, sobre humo. */
.svt-producto--horizontal {
	display: grid;
	grid-template-columns: 40% 1fr;
	align-items: center;
	gap: clamp(0.75rem, 1.4vw, 1.15rem);
	padding: 0.75rem 1.15rem 0.75rem 0.75rem;
	background: var(--svt-humo);
	color: var(--svt-tinta);
	border-radius: 14px;
}

.svt-producto--horizontal .svt-producto__medio { border-radius: 9px; aspect-ratio: 3 / 4; }

/* Retrato: la imagen es la tarjeta, sobre el campo de degradado. */
.svt-producto--retrato .svt-producto__medio {
	aspect-ratio: 3 / 4;
	border-radius: 14px;
	background: var(--svt-campo);
}

.svt-producto--retrato .svt-producto__cuerpo { padding-top: 0.85rem; }

.svt-producto__marca {
	margin: 0 0 0.3rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	color: color-mix(in srgb, var(--svt-tinta) 70%, transparent);
}

.svt-producto__nombre {
	margin: 0 0 0.35rem;
	font-size: clamp(0.9375rem, 1.25vw, 1.0625rem);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.03em;
	color: inherit;
}

.svt-producto__nombre a { color: inherit; text-decoration: none; }
.svt-producto__nombre a:hover { text-decoration: underline; text-underline-offset: 3px; }

.svt-producto__valoracion { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.5rem; }

.svt-estrellas { display: inline-flex; gap: 1px; }
.svt-estrella { width: 13px; height: 13px; fill: color-mix(in srgb, var(--svt-tinta) 20%, transparent); }
.svt-estrella--llena { fill: var(--svt-oro); }

.svt-resenas {
	font-size: 0.75rem;
	font-weight: 600;
	color: color-mix(in srgb, var(--svt-tinta) 70%, transparent);
}

.svt-producto__precio {
	margin: 0;
	font-size: clamp(1rem, 1.35vw, 1.1875rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	color: inherit;
}

.svt-producto__unidad {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0;
	color: color-mix(in srgb, var(--svt-tinta) 70%, transparent);
}

/* Distintivos públicos. La disponibilidad la REPORTA LA MARCA: en este sistema
   no hay inventario por unidades, es declarativa, y la interfaz tiene que
   decirlo. Por eso el título del chip, y por eso no dice «en stock». */
.svt-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin: 0.55rem 0 0;
}

.svt-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.16rem 0.5rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--svt-tinta) 8%, transparent);
	color: color-mix(in srgb, var(--svt-tinta) 78%, transparent);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	white-space: nowrap;
}

.svt-chip--ok       { background: color-mix(in srgb, #1a7a4f 15%, transparent); color: color-mix(in srgb, #135a3a 88%, var(--svt-tinta)); }
.svt-chip--no       { background: color-mix(in srgb, var(--svt-carmin) 13%, transparent); color: var(--svt-carmin); }
.svt-chip--pedido   { background: color-mix(in srgb, #a06a00 15%, transparent); color: color-mix(in srgb, #7a5000 90%, var(--svt-tinta)); }
.svt-chip--madrugon { background: var(--svt-noche); color: #ffffff; }

.svt-producto--horizontal .svt-chips { margin-top: 0.45rem; }

/* Rótulo de datos de demostración: obligación de honestidad, no decoración. */
.svt-demo-aviso {
	max-width: min(var(--svt-ancho), 72ch);
	margin: clamp(1.5rem, 3vw, 2.75rem) auto 0;
	padding: 0 var(--svt-margen);
	font-size: 0.75rem;
	font-weight: 600;
	color: color-mix(in srgb, var(--svt-tinta) 70%, transparent);
}

/* ===================================================================
   Filler 1 — los tres pisos
   =================================================================== */

.svt-pisos {
	display: grid;
	gap: 0;
	max-width: var(--svt-ancho);
	margin: clamp(3rem, 7vw, 6.5rem) auto 0;
	padding-inline: var(--svt-margen);
	background: var(--svt-base);
	color: var(--svt-tinta);
}

@media (min-width: 940px) {
	.svt-pisos { grid-template-columns: 1.05fr 1fr; align-items: stretch; gap: clamp(1.5rem, 3vw, 3rem); }
}

.svt-pisos__foto { overflow: hidden; border-radius: 16px; background: var(--svt-campo); min-height: 260px; }
.svt-pisos__foto img { width: 100%; height: 100%; object-fit: cover; }

.svt-pisos__panel { display: flex; flex-direction: column; justify-content: center; padding-block: clamp(1.75rem, 3vw, 2.5rem); }

.svt-pisos__titulo {
	margin: 0 0 0.75rem;
	font-size: clamp(1.9rem, 4.4vw, 3.4rem);
	font-weight: 800;
	line-height: 0.96;
	letter-spacing: -0.045em;
	color: inherit;
}

.svt-pisos__bajada {
	margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
	max-width: 46ch;
	font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
	line-height: 1.55;
	color: color-mix(in srgb, var(--svt-tinta) 68%, transparent);
}

.svt-pisos__lista { margin: 0; padding: 0; list-style: none; }

.svt-piso {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.35rem 1.15rem;
	align-items: baseline;
	padding-block: clamp(0.9rem, 1.8vw, 1.3rem);
	border-top: 1px solid color-mix(in srgb, var(--svt-tinta) 14%, transparent);
}

.svt-piso:last-child { border-bottom: 1px solid color-mix(in srgb, var(--svt-tinta) 14%, transparent); }

.svt-piso__num {
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	color: var(--svt-carmin);
	font-variant-numeric: tabular-nums;
}

.svt-piso__nombre { margin: 0 0 0.2rem; font-size: clamp(1rem, 1.35vw, 1.1875rem); font-weight: 800; letter-spacing: -0.03em; color: inherit; }
.svt-piso__desc   { margin: 0; font-size: 0.875rem; line-height: 1.5; color: color-mix(in srgb, var(--svt-tinta) 62%, transparent); }

.svt-piso__dato {
	grid-column: 2;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	color: color-mix(in srgb, var(--svt-tinta) 70%, transparent);
}

@media (min-width: 620px) {
	.svt-piso { grid-template-columns: auto 1fr auto; align-items: center; }
	.svt-piso__dato { grid-column: 3; white-space: nowrap; }
}

/* ===================================================================
   Filler 2 — el madrugón
   =================================================================== */

.svt-madrugon {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: end;
	min-height: clamp(400px, 52vw, 620px);
	margin-top: clamp(3rem, 7vw, 6.5rem);
	background: #1a0f12;
	color: var(--svt-base);
	overflow: hidden;
}

.svt-madrugon > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }

.svt-madrugon__velo {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(14, 5, 7, 0.86) 8%, rgba(14, 5, 7, 0.45) 46%, rgba(14, 5, 7, 0.14) 100%);
}

.svt-madrugon__copia {
	max-width: min(46rem, 100%);
	padding: clamp(2rem, 5vw, 4.5rem) var(--svt-margen);
	color: var(--svt-base);
}

.svt-madrugon__kicker {
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--svt-naranja);
	font-variant-numeric: tabular-nums;
}

.svt-madrugon__titulo {
	margin: 0 0 0.85rem;
	font-size: clamp(1.75rem, 4.6vw, 3.5rem);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: -0.045em;
	color: inherit;
}

.svt-madrugon__bajada {
	margin: 0 0 1.6rem;
	max-width: 48ch;
	font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
	line-height: 1.55;
	color: color-mix(in srgb, #ffffff 84%, var(--svt-carmin));
}

/* ===================================================================
   Cierre
   =================================================================== */

.svt-cierre {
	position: relative;
	isolation: isolate;
	margin-top: clamp(3rem, 7vw, 6.5rem);
	padding: clamp(3rem, 8vw, 7rem) 0;
	background: var(--svt-campo);
	color: var(--svt-base);
}

/* Mismo problema que el hero, misma solución: la columna de texto cruzaba el
   extremo naranja y caía a 3.25:1. El velo la devuelve por encima de 4.5:1. */
.svt-cierre::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(128deg, rgba(20, 5, 7, 0) 0%, rgba(20, 5, 7, 0.22) 42%, rgba(20, 5, 7, 0.58) 100%);
}

.svt-cierre__interior { max-width: 62rem; margin-inline: auto; padding-inline: var(--svt-margen); text-align: center; }

.svt-cierre__titulo {
	margin: 0 0 0.85rem;
	font-size: clamp(2rem, 5.4vw, 4rem);
	font-weight: 800;
	line-height: 0.96;
	letter-spacing: -0.048em;
	color: inherit;
}

.svt-cierre__bajada {
	margin: 0 auto 2rem;
	max-width: 54ch;
	font-size: clamp(0.9375rem, 1.25vw, 1.125rem);
	line-height: 1.55;
	color: color-mix(in srgb, #ffffff 90%, var(--svt-carmin));
}

.svt-cierre__acciones { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: center; }
.svt-cierre .svt-enlace-simple { color: #ffffff; }

/* ===================================================================
   Pie
   =================================================================== */

.svt-pie {
	padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.75rem, 3vw, 2.5rem);
	background: var(--svt-noche);
	color: var(--svt-base);
}

.svt-pie__interior {
	max-width: var(--svt-ancho);
	margin-inline: auto;
	padding-inline: var(--svt-margen);
	display: grid;
	gap: clamp(1.75rem, 4vw, 3rem);
}

@media (min-width: 760px) { .svt-pie__interior { grid-template-columns: 1.4fr 1fr 1fr; } }

.svt-pie h2 { margin: 0 0 0.6rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.045em; font-style: italic; text-transform: uppercase; color: inherit; }
.svt-pie h3 { margin: 0 0 0.85rem; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, #ffffff 62%, var(--svt-noche)); }
.svt-pie p  { margin: 0; max-width: 38ch; font-size: 0.875rem; line-height: 1.6; color: color-mix(in srgb, #ffffff 78%, var(--svt-noche)); }
.svt-pie ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; }
.svt-pie a  { font-size: 0.875rem; font-weight: 600; color: #ffffff; text-decoration: none; }
.svt-pie a:hover { text-decoration: underline; text-underline-offset: 4px; }

.svt-pie__nota {
	max-width: var(--svt-ancho);
	margin: clamp(2rem, 4vw, 3rem) auto 0;
	padding: 1.5rem var(--svt-margen) 0;
	border-top: 1px solid color-mix(in srgb, #ffffff 16%, transparent);
	font-size: 0.75rem;
	line-height: 1.6;
	color: color-mix(in srgb, #ffffff 62%, var(--svt-noche));
}

/* ===================================================================
   Movimiento reducido — la única @media de color/movimiento admitida
   =================================================================== */

@media (prefers-reduced-motion: reduce) {
	.svt-marquesina__pista { animation: none; transform: none; }
	.svt-home *,
	.svt-home *::before,
	.svt-home *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
	.svt-producto:hover .svt-producto__medio img { transform: none; }
	.svt-pildora:hover { transform: none; }
}

/* ===================================================================
   Tira de categorías — solo en angosto
   =================================================================== */

/* La cabecera no cabe en 390 px con la navegación dentro. En vez de esconder
   las categorías y dejarlas inalcanzables, bajan a una tira desplazable. */
.svt-tiras { display: none; }

@media (max-width: 719px) {
	.svt-tiras {
		display: flex;
		gap: 0.5rem;
		padding: 0 var(--svt-margen) 0.35rem;
		overflow-x: auto;
		scrollbar-width: none;
		background: var(--svt-base);
		color: var(--svt-tinta);
	}

	.svt-tiras::-webkit-scrollbar { display: none; }

	.svt-tiras a {
		flex: 0 0 auto;
		min-height: 36px;
		display: inline-flex;
		align-items: center;
		padding-inline: 0.9rem;
		border: 1px solid color-mix(in srgb, var(--svt-tinta) 18%, transparent);
		border-radius: 999px;
		font-size: 0.8125rem;
		font-weight: 700;
		color: inherit;
		text-decoration: none;
		white-space: nowrap;
	}
}

/* ===================================================================
   Ajustes de composición en pantallas angostas
   =================================================================== */

@media (max-width: 719px) {
	.svt-nav { display: none; }
	.svt-util--busca { display: none; }
	.svt-util--idioma { display: none; }

	/* El velo tiene que apretar más: a este ancho la chaqueta amarilla queda
	   justo debajo de la copia y el blanco sobre amarillo cae a 1.35:1. */
	.svt-hero__velo {
		background: linear-gradient(to top, rgba(20, 5, 7, 0.9) 0%, rgba(20, 5, 7, 0.78) 34%, rgba(20, 5, 7, 0.4) 62%, rgba(20, 5, 7, 0.05) 88%);
	}

	.svt-hero__flotante--alta { top: 6%; left: auto; right: 4%; width: 88px; }
	.svt-hero__flotante--baja { display: none; }

	/* El campo ya ancla el contenido abajo; aquí solo hay que dejar sitio para
	   la fila de puntos y el botón de pausa, que en angosto van debajo. */
	.svt-hero__copia { max-width: 100%; padding-bottom: 3.75rem; }
	.svt-hero__mandos { top: auto; bottom: 0.75rem; right: 50%; transform: translateX(50%); flex-direction: row; }

	.svt-carrusel__cabeza { flex-wrap: wrap; align-items: center; }
	.svt-carrusel__mandos .svt-flecha { display: none; }

	.svt-producto--horizontal { grid-template-columns: 38% 1fr; }
}