/*
Theme Name: Rankeada
Theme URI: https://rankeada.co
Author: Blackrbbt.co
Description: Tema propio de Rankeada — sillas gamer. Sin build step, sin page builder, sin dependencias de npm. Un CSS y un JS planos.
Version: 1.9.0
Requires at least: 6.4
Requires PHP: 7.4
License: Propietario
Text Domain: rankeada
*/

/* =========================================================================
   Fuentes. Viven en el tema desde la 1.9: son los mismos cuatro WOFF2 del
   subconjunto latino que servía Google Fonts, sin la hoja externa bloqueante
   ni las dos conexiones antes del primer texto. Anybody viene instanciada en
   wdth 118 / wght 800, que es como quedó fijada la marca.
   ====================================================================== */
@font-face {
	font-family: "Anybody";
	font-style: normal;
	font-weight: 800;
	font-stretch: 118%;
	font-display: swap;
	src: url("assets/fonts/anybody-800.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/barlow-400.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("assets/fonts/barlow-500.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/barlow-700.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================================
   Fichas del sistema. El acento lo pisa el color elegido; todo lo demás es fijo.
   ====================================================================== */
:root {
	--negro:   #0A0810;
	--carbon:  #15111F;
	--linea:   #2A2338;
	--hueso:   #F2EFF7;
	--humo:    #8E8799;
	--tenue:   #635C73;
	--magenta: #E54185;
	--lectura: #C9C4D4;   /* texto largo sobre fondo oscuro */

	--acento: #A98BE0;
	/* El acento crudo no siempre se lee sobre negro — Cobalto queda en 2,5:1.
	   Esta mezcla lo aclara lo justo para pasar el contraste en los nueve. */
	--acento-txt: color-mix(in srgb, var(--acento) 55%, var(--hueso));

	--titulo: "Anybody", "Arial Narrow", system-ui, sans-serif;
	--texto:  "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

	--ancho: 1180px;
	--r: 14px;
	--suave: cubic-bezier(.2, .7, .2, 1);
}

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--negro);
	color: var(--hueso);
	font: 400 17px/1.6 var(--texto);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3 {
	font-family: var(--titulo);
	font-weight: 800;
	font-variation-settings: "wdth" 118, "wght" 800;
	line-height: 1.02;
	letter-spacing: -0.015em;
	margin: 0;
	text-wrap: balance;
}

img { max-width: 100%; height: auto; }

a { color: var(--acento-txt); }

:focus-visible {
	outline: 3px solid var(--magenta);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Oculto a la vista, presente para el teclado y el lector de pantalla. */
.vr {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	clip-path: inset(50%);
	overflow: hidden; white-space: nowrap;
}

.saltar {
	position: absolute; left: -9999px;
	background: var(--magenta); color: #fff;
	padding: 12px 20px; z-index: 99; border-radius: 0 0 var(--r) 0;
	text-decoration: none; font-weight: 600;
}
.saltar:focus { left: 0; top: 0; }

/* =========================================================================
   Movimiento. Dos cuadros y nada más: «sube» para entrar y «flota» para la
   silla del hero. Se anima `translate`, no `transform`, a propósito: el
   estante ya usa transform para el giro y las dos propiedades se suman sin
   pisarse. Quien pide menos movimiento recibe cero: ver el final del archivo.
   ====================================================================== */
@keyframes sube {
	from { opacity: 0; translate: 0 16px; }
	to   { opacity: 1; translate: 0 0; }
}
@keyframes flota {
	50% { translate: 0 -10px; }
}

/* =========================================================================
   Botones
   ====================================================================== */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 8px;
	padding: 13px 24px;
	background: var(--magenta);
	color: #fff;
	font: 600 16px/1 var(--texto);
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 0 0 0 rgba(229,65,133,0);
	transition: transform .15s ease, filter .15s ease, box-shadow .25s ease;
}
.btn:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 10px 30px -8px rgba(229,65,133,.6); }
.btn:active { transform: translateY(0); }

.btn-grande { padding: 17px 34px; font-size: 17px; }

.btn-fantasma {
	background: transparent;
	color: var(--hueso);
	border-color: var(--linea);
}
.btn-fantasma:hover { border-color: var(--acento); filter: none; box-shadow: none; }

/* =========================================================================
   Cabecera
   ====================================================================== */
.cab {
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px;
	max-width: var(--ancho);
	margin: 0 auto;
	padding: 22px 24px;
}
.cab-marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.cab-marca svg { flex: 0 0 auto; height: auto; display: block; }
.cab-marca svg:first-of-type { width: 34px; }              /* el simbolo */
.cab-marca svg:last-of-type  { width: 96px; margin-top: 3px; }  /* el logotipo */
.cab-descriptor {
	font: 500 11px/1 var(--texto);
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--humo);
	white-space: nowrap;
}
.cab-nav { display: flex; align-items: center; gap: 26px; }
.cab-nav a {
	color: var(--humo); text-decoration: none;
	font-size: 15px; font-weight: 500;
	white-space: nowrap;   /* que envuelva entre enlaces, nunca dentro de uno */
	transition: color .2s;
}
.cab-nav a:hover { color: var(--hueso); }
.cab-wa {
	border: 1px solid var(--linea);
	border-radius: 999px; padding: 9px 18px;
	color: var(--hueso) !important;
	transition: border-color .2s;
}
.cab-wa:hover { border-color: var(--magenta); }

/* =========================================================================
   Pantalla 1 — Hero
   ====================================================================== */
.hero {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 32px 48px; align-items: center;
	max-width: var(--ancho);
	margin: 0 auto;
	padding: 24px 24px 64px;
}
/* Cada bloque del texto entra un pelo después del anterior. */
.hero-txt > * { animation: sube .7s var(--suave) both; animation-delay: calc(var(--i, 0) * 90ms); }
.hero-txt > :nth-child(2) { --i: 1; }
.hero-txt > :nth-child(3) { --i: 2; }
.hero-txt > :nth-child(4) { --i: 3; }
.hero-txt > :nth-child(5) { --i: 4; }

.hero-ojo {
	margin: 0 0 18px;
	font-size: 13px; font-weight: 600;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--magenta);
}
.hero h1 { font-size: clamp(38px, 4.6vw, 62px); max-width: 15ch; }
.hero-sub {
	margin: 18px 0 0;
	font-size: 19px; color: var(--humo); max-width: 46ch;
}
/* El precio va después del argumento: aquí es pequeño y va pegado a lo que
   incluye. El número grande vive solo en la ficha (oferta, sección 3). */
.hero-precio {
	margin: 22px 0 0;
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
}
.hero-precio strong {
	font-family: var(--titulo); font-size: 28px;
	font-variation-settings: "wdth" 118, "wght" 800;
}
.hero-precio span { color: var(--humo); font-size: 15px; max-width: 40ch; }
.hero-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }
/* Un solo botón. El segundo del mismo peso era cero botones. */
.hero-wa {
	color: var(--lectura); font-weight: 500; font-size: 15px;
	text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--tenue);
	transition: color .2s;
}
.hero-wa:hover { color: var(--hueso); }

.hero-img {
	position: relative;
	display: flex; justify-content: center;
	animation: sube .9s .15s var(--suave) both;
}
.hero-img::before {
	content: "";
	position: absolute; inset: -14% -6%;
	background: radial-gradient(50% 50% at 50% 48%, rgba(229,65,133,.26), transparent 72%);
	filter: blur(10px);
	z-index: -1;
}
.hero-img img { width: min(100%, 440px); animation: flota 6s ease-in-out 1s infinite; }

/* La franja de confianza. Responde «¿esto es real?» antes del precio. */
.confianza {
	grid-column: 1 / -1;
	list-style: none; margin: 0; padding: 22px 0 0;
	border-top: 1px solid var(--linea);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 14px 28px;
	animation: sube .7s .5s var(--suave) both;
}
.confianza li { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--tenue); }
.confianza strong { color: var(--hueso); font-size: 14px; font-weight: 600; }

.sellos {
	list-style: none; margin: 26px 0 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 8px 10px;
}
.sellos li {
	font-size: 13px; color: var(--humo);
	border: 1px solid var(--linea);
	border-radius: 999px; padding: 6px 14px;
}

/* =========================================================================
   Pantalla 2 — Selector de color

   Los nueve radios son hermanos de .lienzo y .fichas, así que un `~` los
   alcanza a los dos. Las reglas por color las escribe PHP desde inc/colores.php:
   agregar un color no obliga a tocar este archivo.
   ====================================================================== */
.mundo { position: relative; }

/* Todo lo que se intercambia arranca oculto. Las etiquetas usan data-c, no
   data-color, justamente para que esta regla no las alcance. */
.mundo .silla,
.mundo .rotulo,
.mundo .deci-elegido,
.mundo .btn-wa { display: none; }

@keyframes aparece {
	from { opacity: 0; transform: translateY(8px) scale(.985); }
	to   { opacity: 1; transform: none; }
}

.lienzo {
	max-width: var(--ancho);
	margin: 0 auto;
	padding: 70px 24px 90px;
	scroll-margin-top: 24px;
}
.lienzo-tit {
	font-size: clamp(24px, 3vw, 34px);
	margin: 0 0 8px;
	color: var(--humo);
	font-weight: 500;
}

/* El rótulo del color elegido se ve siempre; el cursor sobre otra silla lo
   sobreescribe. La altura queda reservada para que al pasar el cursor no
   salte todo. Antes solo aparecía con el cursor y la pantalla entraba con un
   hueco de 172 px donde no había nada. */
.rotulos { min-height: 172px; display: flex; align-items: center; justify-content: center; }

/* Sin recuadro: el fondo y las sillas, nada más. El marco competía con el
   producto y le robaba ancho a las nueve. */
.escena {
	position: relative;
	padding: 26px 0 0;
}

/* El mundo de cada color. En el diseño esto era un video de humo teñido con
   mix-blend-mode; con gradientes pesa cero bytes y no toca el LCP. El hueco del
   video sigue aquí el día que exista el asset. */
.escena-fondo {
	position: absolute; inset: -60px calc(50% - 50vw) -40px;
	pointer-events: none;
	background:
		radial-gradient(58% 58% at 38% 42%, color-mix(in srgb, var(--acento) 42%, transparent), transparent 68%),
		radial-gradient(46% 46% at 78% 76%, color-mix(in srgb, var(--acento) 22%, transparent), transparent 70%),
		radial-gradient(70% 70% at 50% 120%, rgba(229,65,133,.16), transparent 70%);
	opacity: .85;
	/* Sin filter: un blur de 22px sobre toda la caja repinta en cada cuadro y se
	   siente en un Android de gama baja, que es medio publico objetivo. Los
	   gradientes ya salen difusos solos. Solo se anima transform, que es
	   trabajo de compositor y no cuesta repintado. */
	will-change: transform;
	animation: respira 18s ease-in-out infinite alternate;
}
@keyframes respira {
	from { transform: scale(1) translate(0, 0); }
	to   { transform: scale(1.12) translate(2%, -3%); }
}

.rotulo {
	position: relative; text-align: center;
	animation: aparece .35s ease both;
}
.rotulo-mineral {
	font-family: var(--titulo); font-variation-settings: "wdth" 118, "wght" 800;
	font-size: clamp(34px, 5vw, 56px);
	margin: 0; color: var(--acento-txt);
}
.rotulo-real {
	margin: 6px 0 0; font-size: 15px;
	letter-spacing: .1em; text-transform: uppercase; color: var(--humo);
}
.rotulo-mundo { margin: 18px auto 0; color: var(--hueso); max-width: 46ch; }

/* El estante: todas a la vez, en arco. La del medio manda; hacia los lados
   giran sobre su eje vertical hacia el centro —rotateY, no una inclinación: la
   silla se queda de pie y se voltea, como si estuvieran puestas en semicírculo—.

   Los colores NUNCA se apagan. Las nueve están a todo color siempre; lo único
   que destaca a una es que crece y que el humo del fondo toma su tono. Apagar
   las demás hacía ver el catálogo sucio y escondía justo lo que se vende. */
.estante {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: clamp(0px, .3vw, 8px);
	padding: 48px 12px 8px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: var(--linea) transparent;
	perspective: 1400px;
}
.pieza {
	--d: 0; --dir: 0; --n: 0; --tono: var(--acento);
	position: relative;
	/* Se reparten el ancho del contenedor en partes iguales, con tope. Con flex
	   no hay cuenta que hacer y entran las que sean. */
	flex: 1 1 0;
	min-width: 0;
	max-width: 190px;
	display: flex; flex-direction: column; align-items: center;
	gap: 1px;
	cursor: pointer;
	scroll-snap-align: center;
	/* Todas a la misma altura y del mismo tamaño. Lo único que cambia entre
	   ellas es cuánto giran hacia el centro. */
	transform: rotateY(calc(var(--dir) * var(--d) * -4deg));
	transform-origin: 50% 88%;
	transition: transform .4s cubic-bezier(.2, .85, .25, 1);
	/* Entran una tras otra, de izquierda a derecha. */
	animation: sube .6s var(--suave) both;
	animation-delay: calc(var(--n) * 55ms);
}
/* Un halo de piso del tono de cada silla. La Obsidiana era invisible sobre el
   fondo negro; con esto se lee, y las otras ocho ganan volumen. */
.pieza::before {
	content: "";
	position: absolute; left: 10%; right: 10%; bottom: 46px;
	height: 34px; border-radius: 50%;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--tono) 60%, transparent), transparent);
	filter: blur(8px);
	opacity: .5;
	transition: opacity .3s;
}
.pieza img { position: relative; width: 100%; height: auto; display: block; }
.pieza-nom  { font-weight: 700; font-size: 13px; color: var(--hueso); transition: color .3s; }
.pieza-real { font-size: 11px; color: var(--tenue); }

/* La señalada se endereza, sube y crece. Nada más: ni las otras se apagan ni
   esta cambia de saturación. */
.pieza:hover {
	transform: translateY(-22px) rotateY(0deg) scale(1.13);
	z-index: 3;
}
.pieza:hover::before { opacity: .95; }
.pieza:hover .pieza-real { color: var(--lectura); }

@media (min-width: 641px) {
	.estante { overflow: visible; }
}
@media (max-width: 640px) {
	/* En táctil no hay cursor, así que el rótulo del cursor no aparece nunca;
	   el del color elegido sí, y más corto. */
	.rotulos { min-height: 0; margin-bottom: 8px; }
	.rotulo-mundo { display: none; }
	.escena  { padding-top: 8px; }
	.lienzo  { padding: 40px 20px 50px; }

	.estante {
		justify-content: flex-start;
		gap: 10px;
		padding: 12px 20px 14px;
		/* Se sale del padding del contenedor para que se vea que hay más a la
		   derecha: una silla cortada en el borde invita a arrastrar mejor que
		   cualquier flecha. */
		margin-inline: -20px;
		scroll-padding-inline: 20px;
	}
	.pieza { flex: 0 0 auto; width: 132px; max-width: none; transform: none; }
	.pieza:hover { transform: none; }
	.lienzo-pie { margin-top: 18px; }
}

.lienzo-pie { margin: 34px 0 0; }

/* =========================================================================
   Pantalla 3 — Ficha, formato URVI: galería a la izquierda, decisiones a la derecha
   ====================================================================== */
.fichas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	max-width: var(--ancho);
	margin: 0 auto;
	padding: 40px 24px 100px;
	scroll-margin-top: 24px;
}
.galeria-marco {
	position: relative;
	display: flex; justify-content: center; align-items: center;
	min-height: 420px;
	border: 1px solid var(--linea);
	border-radius: 24px;
	/* El resplandor va abajo, no detras del producto: centrado a la misma altura
	   se comia la silla verde, que es del mismo tono que su propio mundo. */
	background:
		radial-gradient(75% 55% at 50% 104%, color-mix(in srgb, var(--acento) 26%, transparent), transparent 72%),
		var(--carbon);
	padding: 30px;
}
.galeria-marco .silla { width: min(100%, 380px); animation: aparece .35s ease both; }

.beneficios {
	list-style: none; margin: 18px 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.beneficios li {
	border: 1px solid var(--linea); border-radius: var(--r);
	padding: 14px 16px;
	display: flex; flex-direction: column; gap: 3px;
	transition: border-color .25s;
}
.beneficios li:hover { border-color: var(--tenue); }
.beneficios strong { font-size: 15px; }
.beneficios span { font-size: 13px; color: var(--tenue); }

.deci-ojo {
	margin: 0 0 10px; font-size: 12px; font-weight: 600;
	letter-spacing: .18em; text-transform: uppercase; color: var(--humo);
}
.fichas h2 { font-size: clamp(30px, 4vw, 46px); }
.deci-sub { color: var(--humo); margin: 14px 0 0; }
/* El único precio grande de la página. Nunca solo: va con lo que incluye. */
.deci-precio { margin: 20px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.deci-precio strong {
	font-family: var(--titulo); font-variation-settings: "wdth" 118, "wght" 800;
	font-size: 38px;
}
.deci-precio span { color: var(--humo); font-size: 14px; }

.deci { border-top: 1px solid var(--linea); margin-top: 28px; padding-top: 24px; }
.deci h3 {
	display: flex; align-items: center; gap: 12px;
	font-size: 19px; margin-bottom: 16px;
}
.deci h3 span {
	display: grid; place-items: center;
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--magenta); color: #fff;
	font: 700 13px/1 var(--texto);
}

.deci-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.mini {
	display: grid; place-items: center;
	width: 42px; height: 42px; border-radius: 50%;
	border: 2px solid var(--linea);
	cursor: pointer;
	transition: border-color .18s ease, transform .18s ease;
}
.mini:hover { transform: scale(1.08); }
.mini-punto {
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--tono);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.deci-elegido { margin: 14px 0 0; font-size: 15px; color: var(--humo); }

.cantidades { display: flex; gap: 10px; }
.cant {
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	min-width: 84px; padding: 12px 18px;
	border: 1px solid var(--linea); border-radius: var(--r);
	cursor: pointer;
	transition: border-color .18s ease;
}
.cant:hover { border-color: var(--tenue); }
.cant strong { font-family: var(--titulo); font-size: 22px; font-variation-settings: "wdth" 118, "wght" 800; }
.cant span { font-size: 12px; color: var(--tenue); }
.deci-nota { margin: 14px 0 0; font-size: 14px; color: var(--tenue); }

/* La cantidad sí es un radio pegado a su etiqueta, así que basta el hermano adyacente. */
.cantidades input:checked + .cant {
	border-color: var(--magenta);
	background: color-mix(in srgb, var(--magenta) 12%, var(--carbon));
}
.cantidades input:focus-visible + .cant { outline: 3px solid var(--magenta); outline-offset: 3px; }

.btn-wa { margin-top: 30px; width: 100%; }
.sellos-ficha { margin-top: 18px; }

/* =========================================================================
   Ficha técnica
   ====================================================================== */
.tecnica {
	max-width: var(--ancho);
	margin: 0 auto; padding: 0 24px 100px;
}
.tecnica h2 { font-size: clamp(28px, 3.4vw, 40px); }
.tecnica-fuente { color: var(--tenue); font-size: 14px; margin: 12px 0 30px; }
.tecnica dl, .color-ficha dl {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1px; margin: 0;
	background: var(--linea);
	border: 1px solid var(--linea);
	border-radius: var(--r);
	overflow: hidden;
}
.tecnica dl > div, .color-ficha dl > div { background: var(--carbon); padding: 16px 20px; }
/* Un valor largo estira toda su fila y deja huecos al lado de los cortos.
   Los largos ocupan dos columnas, que es donde dejan de mandar sobre la fila. */
@media (min-width: 641px) {
	.tecnica dl > div.largo, .color-ficha dl > div.largo { grid-column: span 2; }
}
.tecnica dt, .color-ficha dt { font-size: 13px; color: var(--humo); }
.tecnica dd, .color-ficha dd { margin: 4px 0 0; font-weight: 600; }

.aviso-admin {
	margin-top: 22px; padding: 14px 18px;
	border: 1px dashed var(--magenta); border-radius: var(--r);
	color: var(--hueso); font-size: 14px; background: rgba(229,65,133,.07);
}
.aviso-admin code { color: var(--magenta); }

/* =========================================================================
   Cómo se compra: pasos, los dos transportes y las preguntas frecuentes.
   Es la objeción número tres de la oferta, y hasta la 1.8.5 no existía.
   ====================================================================== */
.compra {
	max-width: var(--ancho);
	margin: 0 auto; padding: 0 24px 100px;
	scroll-margin-top: 24px;
}
.compra-cab { max-width: 62ch; }
.compra h2 { font-size: clamp(30px, 4vw, 46px); }
.compra-sub { color: var(--humo); margin: 14px 0 0; font-size: 18px; }

.pasos {
	list-style: none; margin: 40px 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.pasos li {
	display: flex; flex-direction: column; gap: 8px;
	padding: 24px 22px 22px;
	border: 1px solid var(--linea); border-radius: 20px;
	background: var(--carbon);
}
.pantalla .pasos li { animation: sube .6s var(--suave) both; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
.paso-n {
	display: grid; place-items: center;
	width: 30px; height: 30px; border-radius: 50%;
	background: var(--magenta); color: #fff;
	font: 700 14px/1 var(--texto);
	margin-bottom: 6px;
}
.pasos strong {
	font-family: var(--titulo); font-variation-settings: "wdth" 118, "wght" 800;
	font-size: 19px; line-height: 1.1;
}
.pasos li > span:last-child { color: var(--lectura); font-size: 15px; }

.transportes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.transporte { border: 1px solid var(--linea); border-radius: 20px; padding: 24px 22px; }
.transporte h3 { font-size: 20px; margin: 0 0 8px; }
.transporte p { margin: 0 0 6px; color: var(--lectura); font-size: 15px; }
.transporte strong { color: var(--hueso); }
.transporte a { display: inline-block; margin-top: 8px; font-size: 14px; color: var(--magenta); }

.faq { margin-top: 56px; max-width: 78ch; }
.faq h3 { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 8px; }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary {
	list-style: none; cursor: pointer;
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	padding: 18px 0;
	font-weight: 600; font-size: 17px; color: var(--hueso);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: "+";
	flex: 0 0 auto;
	display: grid; place-items: center;
	width: 28px; height: 28px; border-radius: 50%;
	border: 1px solid var(--linea);
	color: var(--magenta); font-size: 18px; font-weight: 500;
	transition: transform .25s var(--suave), border-color .25s;
}
.faq details[open] summary::after { transform: rotate(45deg); border-color: var(--magenta); }
.faq details p { margin: 0 0 20px; color: var(--lectura); }
.compra-mas { margin: 22px 0 0; }
.compra-mas a { color: var(--magenta); }

/* =========================================================================
   Lista de espera
   ====================================================================== */
.lista {
	display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
	max-width: var(--ancho);
	margin: 0 auto 100px;
	padding: 52px 24px;
	border-top: 1px solid var(--linea);
	scroll-margin-top: 24px;
}
.lista h2 { font-size: clamp(28px, 3.6vw, 42px); }
.lista-txt p { color: var(--humo); margin: 16px 0 0; max-width: 42ch; }

.campo { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.campo label { font-size: 14px; color: var(--humo); }
.campo input {
	padding: 13px 16px;
	background: var(--carbon);
	border: 1px solid var(--linea);
	border-radius: var(--r);
	color: var(--hueso);
	font: 400 16px/1.4 var(--texto);
	transition: border-color .2s;
}
.campo input:focus { border-color: var(--acento); }
.campo input:user-invalid { border-color: #E0526B; }

/* La trampa de bots: fuera de la vista pero no display:none, que algunos bots detectan. */
.trampa { position: absolute; left: -9999px; }

.campo-check {
	display: grid; grid-template-columns: auto 1fr; gap: 12px;
	align-items: start; margin: 22px 0;
	font-size: 14px; color: var(--humo); line-height: 1.5;
}
.campo-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--magenta); }

.lista-msg {
	margin: 0 0 18px; padding: 12px 16px;
	border-radius: var(--r); font-size: 15px;
}
.lista-ok  { background: rgba(125,216,50,.12); border: 1px solid rgba(125,216,50,.4); }
.lista-mal { background: rgba(224,82,107,.12); border: 1px solid rgba(224,82,107,.45); }

/* =========================================================================
   Reseñas. Solo existe cuando hay una de verdad.
   ====================================================================== */
.resenas { max-width: var(--ancho); margin: 0 auto; padding: 0 24px 100px; scroll-margin-top: 24px; }
.resenas-cab { max-width: 60ch; }
.resenas h2 { font-size: clamp(28px, 3.6vw, 42px); }
.resenas-cab p { color: var(--humo); margin: 14px 0 0; }
.resenas-lista {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px; margin-top: 36px;
}
.resena {
	margin: 0; padding: 22px;
	border: 1px solid var(--linea); border-radius: 20px; background: var(--carbon);
	display: flex; flex-direction: column; gap: 14px;
}
.resena-foto img { width: 100%; height: 220px; object-fit: cover; border-radius: 14px; }
.resena blockquote { margin: 0; color: var(--lectura); }
.resena figcaption { font-weight: 600; font-size: 14px; }

/* =========================================================================
   Pie
   ====================================================================== */
.pie {
	border-top: 1px solid var(--linea);
	background: var(--carbon);
	padding: 56px 24px 30px;
}
.pie-fila {
	display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
	max-width: var(--ancho); margin: 0 auto;
}
.pie-marca svg { width: 130px; height: auto; display: block; }
.pie-descriptor { color: var(--tenue); font-size: 13px; margin: 12px 0 0; letter-spacing: .08em; }
.pie h2, .pie-tit { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--humo); margin: 0; font-weight: 600; }
.pie-col p { margin: 14px 0 0; }
.pie-menu { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 9px; }
.pie-menu a, .pie-wa { color: var(--hueso); text-decoration: none; font-size: 15px; transition: color .2s; }
.pie-menu a:hover, .pie-wa:hover { color: var(--magenta); }

.pie-legal {
	max-width: var(--ancho); margin: 44px auto 0;
	padding-top: 22px; border-top: 1px solid var(--linea);
	color: var(--tenue); font-size: 13px;
}
.pie-legal p { margin: 6px 0; }
.pie-aviso {
	border: 1px dashed var(--magenta); border-radius: var(--r);
	padding: 12px 16px; color: var(--hueso);
}
.pie-aviso code { color: var(--magenta); }

/* =========================================================================
   Banner de cookies
   ====================================================================== */
.cookies {
	position: fixed; left: 16px; right: 16px; bottom: 16px;
	z-index: 60;
	max-width: 640px; margin: 0 auto;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	background: var(--carbon);
	border: 1px solid var(--linea);
	border-radius: 18px;
	box-shadow: 0 18px 50px rgba(0,0,0,.55);
	animation: sube .5s var(--suave) both;
}
.cookies[hidden] { display: none; }   /* display:flex le gana al hidden del navegador */
.cookies p { margin: 0; font-size: 14px; color: var(--humo); }
.cookies-btn { display: flex; gap: 10px; }
.cookies .btn { padding: 10px 18px; font-size: 14px; }

/* =========================================================================
   Páginas de texto
   ====================================================================== */
.texto {
	max-width: 72ch;
	margin: 0 auto; padding: 60px 24px 100px;
}
.texto h1 { font-size: clamp(32px, 4.4vw, 50px); margin-bottom: 28px; }
.texto h2 { font-size: 26px; margin: 44px 0 14px; }
/* Los legales se leen enteros, no se escanean. El humo pasa AA justo (5,6:1);
   esto sube a 11:1, que es la diferencia entre cumplir y que la gente lea. */
.texto p, .texto li { color: var(--lectura); }
.texto li { margin-bottom: 8px; }
.texto ul { padding-left: 20px; }
.texto a { color: var(--magenta); }
.listado { list-style: none; padding: 0; display: grid; gap: 12px; }

/* =========================================================================
   Móvil
   ====================================================================== */
@media (max-width: 900px) {
	body { font-size: 16px; }
	.cab { flex-wrap: wrap; gap: 14px; padding: 18px 20px; }
	.cab-nav { gap: 16px; }
	.cab-nav a { font-size: 14px; }
	.hero,
	.escena,
	.fichas,
	.lista,
	.pie-fila { grid-template-columns: 1fr; }
	.pie-fila { gap: 28px; }
	/* En un telefono de 844 px de alto el boton tiene que caber sin scroll.
	   La foto cede el espacio: es la que menos convierte de los bloques. */
	.hero { padding-bottom: 48px; gap: 18px; }
	.hero-img { order: -1; }
	.hero-img img { width: min(52%, 190px); }
	.hero-sub { font-size: 17px; }
	.hero h1 { font-size: clamp(34px, 9.4vw, 44px); }
	.confianza { grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 10px; }
	.lienzo, .fichas { padding-top: 50px; padding-bottom: 60px; }
	.escena { padding: 26px; min-height: 0; gap: 26px; }
	.beneficios { grid-template-columns: 1fr; }
	.galeria-marco { min-height: 300px; padding: 20px; }
	.lista { gap: 32px; }
	.pasos, .transportes { grid-template-columns: 1fr; }
	.cookies { flex-direction: column; align-items: stretch; }
	.cookies-btn { justify-content: stretch; }
	.cookies .btn { flex: 1; }
}

/* =========================================================================
   Una pantalla a la vez. Sin JavaScript: manda :target. Solo cuando
   RANKEADA_UNA_PANTALLA pone la clase en el <body>; sin ella la portada es
   una página larga con scroll.
   ====================================================================== */
/* Solo se ESCONDE; nunca se declara el display de la que se ve. Es a propósito:
   el hero, las fichas y la lista son grids de dos columnas, y un `display:block`
   en la pantalla activa les pisaba el grid y las dejaba apiladas. */
body.una-pantalla:has(.pantalla:target)       .pantalla:not(:target) { display: none; }
body.una-pantalla:not(:has(.pantalla:target)) .pantalla:not(#inicio) { display: none; }

/* La pantalla que entra, entra; no aparece de golpe. */
.pantalla:target { animation: sube .5s var(--suave) both; }

/* La cabecera es fija: sin esto el salto deja el título debajo del logo. */
.pantalla { scroll-margin-top: 88px; }

/* El paso a la pantalla siguiente. No es el botón principal de la pantalla:
   es la salida, y se lee como enlace, no como llamada a la acción. */
.paso {
	margin: 2.5rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--linea);
}
.paso a {
	color: var(--lectura);
	text-decoration: none;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: .55rem;
}
.paso a::after { content: "→"; color: var(--magenta); transition: transform .18s; }
.paso a:hover        { color: var(--hueso); }
.paso a:hover::after { transform: translateX(4px); }
.paso a:focus-visible { outline: 3px solid var(--magenta); outline-offset: 4px; }

/* =========================================================================
   El blog. Columna de lectura y nada más: el trabajo es que el texto se lea.
   ====================================================================== */
.blog {
	max-width: var(--ancho);
	margin: 0 auto;
	padding: 80px 24px 100px;
}
.blog-cab { max-width: 52ch; margin-bottom: 54px; }
.blog-cab h1 { font-size: clamp(34px, 5vw, 58px); margin: 0; }
.blog-cab p  { color: var(--humo); margin: 16px 0 0; }
.blog-vacio  { color: var(--humo); }

.blog-lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 34px 28px;
}
.nota {
	display: flex; flex-direction: column;
	padding-top: 22px;
	border-top: 1px solid var(--linea);
}
.nota-foto img {
	width: 100%; height: 180px; object-fit: cover;
	border-radius: 14px; margin-bottom: 16px;
}
.nota h2 { font-size: 21px; line-height: 1.25; margin: 6px 0 10px; }
.nota h2 a { color: var(--hueso); text-decoration: none; }
.nota h2 a:hover { color: var(--magenta); }
.nota-fecha {
	margin: 0; font-size: 12px; color: var(--tenue);
	letter-spacing: .08em; text-transform: uppercase;
}
.nota-resumen { margin: 0; color: var(--lectura); font-size: 15px; }

/* --- Una nota sola --- */
.nota-sola {
	max-width: 68ch;
	margin: 0 auto;
	padding: 70px 24px 90px;
}
.nota-sola-cab h1 {
	font-size: clamp(30px, 4.4vw, 50px);
	line-height: 1.08; margin: 12px 0 0;
}
.nota-sola-foto { margin: 34px 0 0; }
.nota-sola-foto img { width: 100%; height: auto; border-radius: 16px; }

/* El cuerpo del artículo. Lo escribe el cliente en Gutenberg, así que aquí se
   estilan las etiquetas sueltas y no clases propias. */
.texto { margin-top: 34px; color: var(--lectura); font-size: 17px; line-height: 1.72; }
.texto h2 { color: var(--hueso); font-size: 27px; margin: 46px 0 14px; }
.texto h3 { color: var(--hueso); font-size: 20px; margin: 34px 0 10px; }
.texto p  { margin: 0 0 20px; }
.texto a  { color: var(--magenta); }
.texto ul, .texto ol { margin: 0 0 20px; padding-left: 22px; }
.texto li { margin-bottom: 8px; }
.texto img { max-width: 100%; height: auto; border-radius: 14px; }
.texto blockquote {
	margin: 30px 0; padding: 4px 0 4px 22px;
	border-left: 3px solid var(--magenta);
	color: var(--hueso);
}
.texto table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 15px; }
.texto th, .texto td { padding: 10px 12px; border-bottom: 1px solid var(--linea); text-align: left; }
.texto th { color: var(--hueso); }

.nota-cierre {
	margin: 56px 0 0; padding: 28px;
	border: 1px solid var(--linea); border-radius: 20px;
	background: var(--carbon);
}
.nota-cierre p { margin: 0 0 18px; color: var(--hueso); }

.nota-nav {
	display: flex; flex-wrap: wrap; gap: 16px;
	justify-content: space-between;
	margin: 44px 0 0; padding-top: 22px;
	border-top: 1px solid var(--linea);
	font-size: 14px;
}
.nota-nav a { color: var(--lectura); text-decoration: none; }
.nota-nav a:hover { color: var(--hueso); }
.nota-volver { margin: 26px 0 0; }
.nota-volver a { color: var(--magenta); }

.pagination, .nav-links {
	display: flex; flex-wrap: wrap; gap: 8px;
	margin-top: 48px; align-items: center;
}
.pagination .page-numbers {
	padding: 9px 14px; border: 1px solid var(--linea); border-radius: 10px;
	color: var(--lectura); text-decoration: none; font-size: 14px;
}
.pagination .page-numbers:hover { border-color: var(--tenue); color: var(--hueso); }
.pagination .page-numbers.current {
	background: var(--magenta); border-color: var(--magenta); color: var(--hueso);
}
.screen-reader-text {
	position: absolute; width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* =========================================================================
   La página de un color. Es la página de venta: quien buscó «silla gamer
   morada» llega aquí y tiene que encontrar todo sin volver a la portada.
   ====================================================================== */
.color {
	position: relative;
	max-width: var(--ancho);
	margin: 0 auto;
	padding: 26px 24px 90px;
}
.color-fondo {
	position: absolute;
	inset: -40px calc(50% - 50vw) auto;
	height: 760px;
	pointer-events: none;
	background:
		radial-gradient(52% 52% at 62% 34%, color-mix(in srgb, var(--acento) 34%, transparent), transparent 70%),
		radial-gradient(60% 60% at 20% 8%, rgba(229,65,133,.12), transparent 70%);
	opacity: .8;
}

.miga { position: relative; font-size: 13px; color: var(--tenue); margin-bottom: 40px; }
.miga a { color: var(--humo); text-decoration: none; }
.miga a:hover { color: var(--hueso); }
.miga span { margin: 0 8px; }
.miga span:last-child { margin: 0; color: var(--lectura); }

.color-alto {
	position: relative;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 48px;
	align-items: center;
}
.color-txt > * { animation: sube .7s var(--suave) both; animation-delay: calc(var(--i, 0) * 70ms); }
.color-txt > :nth-child(2) { --i: 1; }
.color-txt > :nth-child(3) { --i: 2; }
.color-txt > :nth-child(4) { --i: 3; }
.color-txt > :nth-child(5) { --i: 4; }
.color-txt > :nth-child(6) { --i: 5; }
.color-txt > :nth-child(7) { --i: 6; }
.color-txt > :nth-child(8) { --i: 7; }
.color-img { animation: sube .9s .15s var(--suave) both; }
.color-img img { animation: flota 6s ease-in-out 1s infinite; }

.color-solo {
	display: inline-block; margin: 0 0 18px; padding: 7px 14px;
	font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--negro); background: var(--hueso); border-radius: 999px;
}
.color-txt h1 { font-size: clamp(38px, 6vw, 76px); line-height: .98; margin: 0; }
.color-mineral {
	margin: 14px 0 0; font-size: 14px; letter-spacing: .1em;
	text-transform: uppercase; color: var(--acento-txt);
}
.color-mundo { margin: 18px 0 0; color: var(--lectura); max-width: 44ch; font-size: 17px; }
/* El párrafo propio de cada color: lo que vuelve nueve páginas nueve. */
.color-texto { margin: 14px 0 0; color: var(--humo); max-width: 52ch; font-size: 16px; }
.color-precio { margin: 30px 0 24px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.color-precio strong { font-family: var(--titulo); font-size: clamp(34px, 5vw, 52px); }
.color-precio span { color: var(--humo); font-size: 14px; }
.color-img img { width: 100%; height: auto; display: block; }

.color-que, .color-ficha, .color-compra, .color-otros { position: relative; margin-top: 84px; }
.color-que h2, .color-ficha h2, .color-otros h2 {
	font-size: clamp(26px, 3.4vw, 38px); margin: 0 0 26px;
}
.color-compra { padding: 0; max-width: none; }
.color-compra h2 { font-size: clamp(26px, 3.4vw, 38px); }

/* Las secciones de abajo se revelan al entrar en pantalla. Es mejora
   progresiva: sin animation-timeline se ven fijas, que también está bien. */
@supports (animation-timeline: view()) {
	.color-que, .color-ficha, .color-compra, .color-otros {
		animation: sube linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 35%;
	}
}

.otros-lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
	gap: 22px 16px;
}
.otro {
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	text-decoration: none; padding: 14px 8px 16px;
	border: 1px solid transparent; border-radius: 16px;
	transition: border-color .25s, transform .25s, background .25s;
}
.otro img { width: 100%; height: auto; }
.otro-nom  { font-weight: 700; font-size: 13px; color: var(--hueso); margin-top: 8px; }
.otro-real { font-size: 11px; color: var(--tenue); }
.otro:hover {
	border-color: var(--linea); background: var(--carbon);
	transform: translateY(-4px);
}
.otro:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }

@media (max-width: 860px) {
	.color-alto { grid-template-columns: 1fr; gap: 20px; }
	/* Quien llega de Google buscando «silla gamer morada» ve la silla primero,
	   como en el hero de la portada, y el botón alcanza a caber en pantalla. */
	.color-img  { order: -1; max-width: 230px; margin: 0 auto; }
	/* El resplandor deja de salirse a todo el ancho de la ventana. En móvil el
	   `calc(50% - 50vw)` se vuelve negativo, mete desbordamiento horizontal y
	   con 760 px de gradiente absoluto el repintado al arrastrar se atasca:
	   quedaban pantallazos en negro a media página. */
	.color-fondo { inset: -20px 0 auto; height: 420px; }
}

/* Con el cursor sobre cualquier silla, mandan el rótulo y el humo de esa. No
   depende del color, así que vive aquí y no repetida nueve veces en el inline. */
.escena:has(.pieza:hover) .rotulo { display: none !important; }

/* =========================================================================
   Quien pide menos movimiento recibe menos movimiento. Nada se rompe sin la
   animación: el cambio de color es instantáneo, que es como debe ser.
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.escena-fondo,
	.hero-img img, .color-img img,
	.color-que, .color-ficha, .color-compra, .color-otros { animation: none; }
}