/*
Theme Name: ProResolve (GP Child)
Template: generatepress
Description: Child theme de GeneratePress para ProResolve (US/EU/ES)
Version: 13.6
*/


/* ==========================================================================
   COMPARATIVA SPM vs OMEGA-3 — frame Figma 375:3876 (22/08/2026)
   --------------------------------------------------------------------------
   Lienzo 1440 con el contenido de 120 a 1320 (1200). Heroe a sangre en
   #dbe7ed de 539 de alto, cuatro bloques que alternan texto y foto, el bloque
   de "como elegir" como enunciado + rejilla 3x2 (dos fotos y cuatro textos) y
   una frase de cierre en #4a85a6.

   La columna de texto son SIEMPRE 600 (120..720 o 720..1320) y la foto, 531,
   va pegada al centro dentro de su mitad: asi salen las cotas del frame
   (foto derecha 718..1249, foto izquierda 120..651).
   ========================================================================== */

.pr-page--spm .pr-main { padding-top: 0; }
/* Solo los canvas DE LA PAGINA (dentro de <main>): con `.pr-page--spm` a secas
   el padding se comia tambien el canvas del HEADER y los iconos caian 120px a
   la izquierda, montados sobre "Noticias" (22/08/2026). */
.pr-spm .pr-esh-canvas { padding: 0 120px; }

/* ---------------- heroe ---------------- */
.pr-page--spm .pr-spm-hero {
	min-height: 539px;
	padding: 267px 0 40px;
	background: #dbe7ed;
}
.pr-page--spm .pr-spm-h1 {
	width: 560px;
	margin: 0 0 23px;
	font-family: var(--pr-font-brand);
	font-size: 40px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	color: #000;
}
/* Isotipo tras el titular (nodo 359:8034, 19,2x11,3 en #44b8d9), el mismo
   triangulo que ya lleva Conocenos. */
.pr-spm-tri {
	display: inline-block;
	/* Apoyado EN la linea base del texto, que es lo que hace el frame
	   359:8019 + 359:8034: medido sobre el render de Figma, la base del
	   triangulo cae en y=352 y la base de la ultima linea tambien en 352
	   (desvio 0), con 15px de hueco tras el texto y el triangulo a 18x11.
	   Un inline-block con `vertical-align: baseline` (el valor por defecto)
	   ya apoya ahi su borde inferior de margen, asi que NO se desplaza: los
	   intentos con `margin-bottom: -3px` y con `top: 11px` lo metian en el
	   hueco de los trazos descendentes, y los 2px que copie de Conocenos
	   (`.pr-abt-tri`) lo dejaban 2px alto (24/08/2026). */
	margin: 0 0 0 15px;
	width: 19.2px;
	height: 11.3px;
	background: #44b8d9;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.pr-page--spm .pr-spm-entrada { width: 619px; }
.pr-page--spm .pr-spm-entrada p {
	margin: 0 0 20px;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 300;
	line-height: 20px;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-page--spm .pr-spm-entrada p:last-child { margin-bottom: 0; }
.pr-page--spm .pr-spm-entrada strong { font-weight: 600; }

/* ---------------- los cuatro bloques ---------------- */
.pr-page--spm .pr-spm-bloques { padding: 96px 0 0; background: #fff; }
.pr-page--spm .pr-spm-bloque {
	display: grid;
	grid-template-columns: 600px 600px;
	align-items: center;
	margin-bottom: 96px;
	min-height: 284px;
}
.pr-page--spm .pr-spm-bloque:last-child { margin-bottom: 0; }
.pr-page--spm .pr-spm-bloque .pr-spm-txt { grid-column: 1; grid-row: 1; }
.pr-page--spm .pr-spm-bloque .pr-spm-foto { grid-column: 2; grid-row: 1; justify-self: start; }
/* Foto a la izquierda: solo se cambian de celda. La foto va SIEMPRE pegada al
   principio de su mitad (frame: 120..651 a la izquierda, 718..1249 a la
   derecha), no al centro. */
.pr-page--spm .pr-spm-bloque--izq .pr-spm-txt { grid-column: 2; }
.pr-page--spm .pr-spm-bloque--izq .pr-spm-foto { grid-column: 1; }

.pr-page--spm .pr-spm-foto {
	width: 531px;
	height: 284px;
	border-radius: 30px;
	object-fit: cover;
}
.pr-page--spm .pr-spm-h2 {
	width: 600px;
	margin: 0 0 22px;
	font-family: var(--pr-font-body);
	font-size: 32px;
	font-weight: 500;
	line-height: 32px;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-page--spm .pr-spm-cuerpo { width: 551px; }
.pr-page--spm .pr-spm-cuerpo p {
	margin: 0 0 20px;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 300;
	line-height: 20px;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-page--spm .pr-spm-cuerpo p:last-child { margin-bottom: 0; }
.pr-page--spm .pr-spm-cuerpo strong { font-weight: 600; }
/* Nota al pie: aqui van las referencias, que en el frame no tienen banda. */
.pr-page--spm .pr-spm-nota {
	width: 551px;
	margin: 24px 0 0;
	font-family: var(--pr-font-body);
	font-size: 14px;
	font-weight: 300;
	line-height: 18px;
	letter-spacing: 0.5px;
	color: #6b6b6b;
}

/* ---------------- como elegir: enunciado + rejilla ----------------
   Todo el bloque va sobre una banda #f9f9f9 a sangre con las esquinas
   superiores a 60 (nodo 359:8017: 1440x899 en y=2238; el ultimo bloque acaba
   en 2188 y el enunciado empieza en 2350). */
.pr-page--spm .pr-spm-factores {
	margin-top: 50px;
	padding: 112px 0 97px;
	background: #f9f9f9;
	border-radius: 60px 60px 0 0;
}
.pr-page--spm .pr-spm-enunciado {
	width: 805px;
	margin: 0 0 20px;
	font-family: var(--pr-font-body);
	font-size: 32px;
	font-weight: 500;
	line-height: 41px;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-page--spm .pr-spm-sub {
	width: 689px;
	margin: 0;
	font-family: var(--pr-font-body);
	font-size: 24px;
	font-weight: 400;
	line-height: 33px;
	letter-spacing: 0.5px;
	color: #000;
}
/* Rejilla 3x2: fila 1 foto + dos textos, fila 2 dos textos + foto. */
.pr-page--spm .pr-spm-rejilla {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 16px;
	row-gap: 15px;
	margin-top: 79px;
}
.pr-page--spm .pr-spm-fac-foto {
	width: 100%;
	height: 214px;
	border-radius: 30px;
	object-fit: cover;
}
/* Cada celda es una TARJETA blanca de radio 30 (nodo 359:8040), no texto
   suelto: 388x214 en el frame; min-height y no height porque el copy de ES
   es mas largo que el de EU. */
.pr-page--spm .pr-spm-celda {
	min-height: 214px;
	padding: 34px 40px;
	background: #fff;
	border-radius: 30px;
}
.pr-page--spm .pr-spm-celda-t,
.pr-page--spm .pr-spm-celda-p {
	margin: 0;
	font-family: var(--pr-font-body);
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: -0.16px;
	color: #000;
}
.pr-page--spm .pr-spm-celda-t { font-weight: 600; }
.pr-page--spm .pr-spm-celda-p { font-weight: 400; }

/* Parrafos sueltos y descargos (US lleva el de la FDA). */
.pr-page--spm .pr-spm-extra { width: 805px; margin-top: 48px; }
.pr-page--spm .pr-spm-extra p {
	margin: 0 0 20px;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 300;
	line-height: 20px;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-page--spm .pr-spm-extra p:last-child { margin-bottom: 0; }
.pr-page--spm .pr-spm-extra .pr-spm-nota { width: auto; margin-top: 0; }

/* ---------------- cierre en azul ---------------- */
.pr-page--spm .pr-spm-cierre {
	/* Sin margen: el aire lo pone ya el padding inferior de la banda gris. */
	margin-top: 0;
	padding: 40px 0 41px;
	background: #fff;
}
.pr-page--spm .pr-spm-cierre p {
	width: 689px;
	margin: 0;
	font-family: var(--pr-font-body);
	font-size: 24px;
	font-weight: 600;
	line-height: 33px;
	letter-spacing: 0.5px;
	color: #4a85a6;
}
/* ==========================================================================
   Titular rotatorio del hero (homes US y ES): tres encabezados que se
   relevan cada 5 s en bucle, como el vídeo del fondo. Se apilan en la misma
   caja y solo el `.is-on` es visible, así que el bloque no da saltos.
   ========================================================================== */
.pr-rotator { position: relative; }
.pr-rotator .pr-rot-item {
	display: block;
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Los que no tocan quedan superpuestos y transparentes */
.pr-rotator .pr-rot-item:not(.is-on) {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
}
.pr-rotator .pr-rot-item.is-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.pr-rotator .pr-rot-item { transition: none; }
}

/* ==========================================================================
   EFECTO VIDRIO — receta única (panel de Figma, 07/08/2026)
   Luz −45° 80% · Refracción 80 · Profundidad 20 · Dispersión 50 · Escarcha 4
   · Separación 0.
   · Escarcha 4      → blur(4px) sobre el fondo.
   · Refracción 80   → saturate(1.5): el fondo se ve más vivo a través del vidrio.
   · Luz −45° 80%    → degradado a 135° (perpendicular a la luz) con el brillo
                       al 80% en la esquina de entrada.
   · Dispersión 50   → el brillo se apaga hacia la mitad de la pieza (55%).
   · Profundidad 20  → filo interior de 1px.
   · Separación 0    → el filo no se despega del borde.
   Se usan estas variables en todas las piezas de vidrio del tema.
   ========================================================================== */
:root {
	--pr-glass-frost: blur(4px) saturate(1.5);
	/* OJO: literal, no var(). Un reemplazo automático la dejó apuntando a sí
	   misma y toda declaración que la usaba se invalidaba en silencio: los
	   vidrios se quedaban sin fondo (el recuadro de la home US, invisible). */
	/* La luz entra por arriba-izquierda (−45°) y se apaga enseguida
	   (dispersión 50): el centro queda limpio para que se vea el fondo. */
	--pr-glass-light: linear-gradient(135deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.05) 16%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0) 74%, rgba(255, 255, 255, 0.07) 100%);
	/* Bisel: filo iluminado arriba-izquierda, rebote suave abajo-derecha y
	   contorno de 1px (profundidad 20, separación 0). */
	--pr-glass-edge:
		inset 1px 1px 0 rgba(255, 255, 255, 0.55),
		inset -1px -1px 0 rgba(255, 255, 255, 0.16),
		inset 0 0 0 1px rgba(255, 255, 255, 0.20);
}

/* ==========================================================================
   Tipografías (autoalojadas — woff2 descargados en /fonts)
   Diseño Figma: Sansation (marca/títulos) + Funnel Sans (todo lo demás)
   ========================================================================== */

@font-face {
	font-family: 'Sansation';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('fonts/sansation-300-latin.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: 'Sansation';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('fonts/sansation-300-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Sansation';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/sansation-400-latin.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: 'Sansation';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/sansation-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Sansation';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/sansation-700-latin.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: 'Sansation';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/sansation-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Funnel Sans: fuente variable, cubre pesos 300–800 (Light→ExtraBold) */
@font-face {
	font-family: 'Funnel Sans';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('fonts/funnel-sans-300-800-latin.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: 'Funnel Sans';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('fonts/funnel-sans-300-800-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Página de producto Sports ProResolve (template page-sports-proresolve.php)
   Tokens exactos del frame Figma 365:7408 (Sports - LAPTOP USA)
   ========================================================================== */

:root {
	--pr-red: #b71f2f;
	--pr-red-nav: #b32727;
	--pr-red-dark: #8f1724;
	--pr-coral: #d94b5a;
	--pr-gray: #f5f5f5;
	--pr-gray-faq: rgba(245, 245, 245, 0.62);
	--pr-bg: #f9f9f9;
	--pr-font-brand: 'Sansation', sans-serif;
	--pr-font-body: 'Funnel Sans', sans-serif;
	--pr-radius: 30px;
}

body.pr-page {
	margin: 0;
	background: #fff;
	color: #000;
	font-family: var(--pr-font-body);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.5;
	letter-spacing: 0.5px;
	-webkit-font-smoothing: antialiased;
}
.pr-page *,
.pr-page *::before,
.pr-page *::after { box-sizing: border-box; }

.pr-page h1, .pr-page h2, .pr-page h3, .pr-page p { margin: 0; }
.pr-page a { text-decoration: none; color: inherit; }
/* Nota: sin height:auto — anularía las alturas explícitas de los componentes
   (.pr-claim img, .pr-brand-*, .pr-story img, etc.) por especificidad */
.pr-page img { max-width: 100%; display: block; }
.pr-page sup { font-size: 0.5em; }

.pr-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 40px;
}

/* Encabezados de sección (Funnel Sans Medium 40px) */
.pr-heading {
	font-size: 40px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.4px;
}
.pr-heading--coral { color: var(--pr-coral); }
.pr-heading--red   { color: var(--pr-red); }

/* Botones pastilla */
.pr-btn {
	display: inline-block;
	padding: 13px 40px;
	border: 0;
	border-radius: 40px;
	font-family: var(--pr-font-body);
	font-size: 20px;
	line-height: 1.2;
	letter-spacing: -0.2px;
	text-align: center;
	cursor: pointer;
	transition: opacity 0.2s ease;
}
.pr-btn:hover { opacity: 0.85; }
.pr-btn-red,
.pr-page a.pr-btn-red,
.pr-page a.pr-btn-red:visited { background: var(--pr-red); color: #fff; }
.pr-btn-white { background: var(--pr-gray); font-size: 25px; letter-spacing: -0.25px; padding: 10px 35px; }
.pr-btn-white--coral { color: var(--pr-coral); }
.pr-btn-white--red   { color: var(--pr-red); }

.pr-link-coral {
	color: var(--pr-coral);
	font-weight: 800;
}

/* Flechas de carrusel (chevrons de los teasers/reseñas) */
.pr-arrow {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: none;
	color: #000;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.pr-arrow::before {
	content: '';
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: rotate(45deg);
}
.pr-arrow--prev::before { transform: rotate(-135deg); }
.pr-arrow--red { color: var(--pr-red); }
/* Sin fondo, sombra ni recuadro en ningún estado: las flechas solo funcionan
   (12/08/2026). GeneratePress pinta los <button> con caja gris al pulsarlos,
   así que hay que anularlo explícitamente. */
.pr-page .pr-arrow:hover,
.pr-page .pr-arrow:focus,
.pr-page .pr-arrow:focus-visible,
.pr-page .pr-arrow:active {
	background: none;
	border: 0;
	box-shadow: none;
	outline: none;
	color: inherit;
}
.pr-page .pr-arrow--red:hover,
.pr-page .pr-arrow--red:focus,
.pr-page .pr-arrow--red:active { color: var(--pr-red); }

/* ------------------------------ Header ------------------------------ */

/* Glass en toda la barra, sin velo blanco (efecto "Vidrio" de Figma:
   escarcha 4 → blur 4px, refracción → saturate, luz -45° muy sutil) */
.pr-header {
	position: sticky;
	top: 0;
	z-index: 100;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	padding: 28px 70px 16px;
	background: var(--pr-glass-light);
	-webkit-backdrop-filter: var(--pr-glass-frost);
	backdrop-filter: var(--pr-glass-frost);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.pr-header .pr-logo { justify-self: start; }
.pr-header .pr-nav { justify-self: center; }
.pr-header .pr-header-tools { justify-self: end; }
/* Inversión a blanco sobre bloques oscuros (JS añade .is-inverted);
   el enlace activo del nav conserva su rojo */
.pr-header .pr-logo,
.pr-header .pr-lang,
.pr-header .pr-account,
.pr-header .pr-cart,
.pr-nav a { transition: color 0.3s ease; }
.pr-header.is-inverted .pr-logo,
.pr-header.is-inverted .pr-lang,
.pr-header.is-inverted .pr-account,
.pr-header.is-inverted .pr-cart,
.pr-header.is-inverted .pr-nav a { color: #fff; }
.pr-header.is-inverted .pr-nav a.is-active { color: var(--pr-red-nav); }
/* En móvil el header se esconde al llegar al footer (JS añade .is-off) */
.pr-header {
	transition: transform 0.35s ease, opacity 0.35s ease;
}
.pr-header.is-off {
	transform: translateY(-110%);
	opacity: 0;
	pointer-events: none;
}
.pr-logo {
	font-family: var(--pr-font-brand);
	font-weight: 700;
	font-size: 30px;
	letter-spacing: 0.5px;
	color: #000;
	white-space: nowrap;
}
.pr-logo sup { font-size: 12px; }
/* Píldora del nav (componente 449:210) con su propio glass, sobre la barra glass */
.pr-nav {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px;
	border-radius: 40px;
	background: var(--pr-glass-light);
	border: 1px solid rgba(255, 255, 255, 0.55);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 10px rgba(0, 0, 0, 0.05);
	-webkit-backdrop-filter: var(--pr-glass-frost);
	backdrop-filter: var(--pr-glass-frost);
}
.pr-nav a {
	padding: 8px 22px;
	font-size: 20px;
	line-height: 1.55;
	color: #000;
	white-space: nowrap;
}
/* La sección que se está viendo va en negrita, con el color de su producto
   (Sports en rojo, Active en naranja; el resto conserva el rojo por defecto). */
.pr-nav a.is-active {
	color: var(--pr-red-nav);
	font-weight: 700;
}
.pr-nav a[data-nav="active"].is-active { color: #f99b25; }
/* En ES `.pr-page--home-es .pr-nav a` fija font-weight:400 y color:#000 con la
   misma especificidad que `.pr-nav a.is-active` y gana por venir después en el
   fichero: aquí se sube la especificidad para que ni la negrita ni el color del
   producto se pierdan (Sports salía en negro; 13/08/2026). */
.pr-page--home-es .pr-nav a.is-active {
	font-weight: 700;
	color: var(--pr-red-nav);
}
.pr-page--home-es .pr-nav a[data-nav="active"].is-active { color: #f99b25; }
.pr-header-tools {
	display: flex;
	align-items: center;
	gap: 18px;
}
.pr-lang {
	background: none;
	border: 0;
	padding: 0;
	color: #000;
	cursor: pointer;
	display: inline-flex;
}
.pr-cart {
	position: relative;
	display: inline-flex;
	color: #000;
}
.pr-cart-count {
	position: absolute;
	top: -6px;
	right: -8px;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--pr-red);
	color: #fff;
	font-size: 10px;
	line-height: 17px;
	text-align: center;
	letter-spacing: 0;
}
/* Marcador de cantidad: NEGRO PURO en los tres sites (07/08/2026; antes
   rojo, y en ES con vidrio). Sobre secciones oscuras el header se invierte y
   el marcador pasa a blanco con el número en negro para seguir leyéndose. */
.pr-page .pr-cart-count {
	background: #000;
	color: #fff;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	transition: background-color 0.3s ease, color 0.3s ease;
}
.pr-page .pr-header.is-inverted .pr-cart-count,
.pr-page--home .pr-header.is-over-hero .pr-cart-count {
	background: #fff;
	color: #000;
}

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

.pr-hero {
	background: var(--pr-bg);
	padding: 44px 0 30px; /* aire entre el menú y la ficha de producto */
}
.pr-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 40px;
	align-items: center;
}
/* Imagen de producto según componente Figma 454:214 (550×589, radio 20),
   proporcional en desktop y laptop */
.pr-hero-media img {
	width: 100%;
	max-width: 550px;
	aspect-ratio: 550 / 589;
	object-fit: cover;
	border-radius: 20px;
	margin: 0 auto;
	transition: opacity 0.25s ease;
}
/* Galería: las miniaturas se pueden pulsar para pasarlas a principal */
.pr-review-thumbs img { cursor: pointer; }
.pr-product-title {
	font-family: var(--pr-font-brand);
	font-weight: 400;
	font-size: 40px;
	line-height: 1;
	color: var(--pr-red);
}
.pr-price {
	font-size: 60px;
	line-height: 1.1;
	margin-top: 10px;
}
.pr-price-unit {
	font-size: 15px;
	margin-top: 4px;
}
.pr-product-desc {
	margin-top: 28px;
	font-weight: 300;
	line-height: 30px;
	max-width: 648px;
}
.pr-product-desc p + p { margin-top: 30px; }
.pr-buy { margin-top: 36px; }
.pr-buy-label { line-height: 30px; }
.pr-buy-controls {
	display: flex;
	align-items: center;
	gap: 45px;
	margin-top: 14px;
}
.pr-qty {
	width: 200px;
	height: 58px;
	padding: 0 28px;
	border: 0;
	border-radius: 26px;
	background: #fff;
	font-family: var(--pr-font-body);
	font-size: 20px;
	text-align: center;
	cursor: pointer;
}
.pr-buy-controls .pr-btn-red {
	min-width: 198px;
	padding-top: 16px;
	padding-bottom: 16px;
}

/* Teaser de reseña bajo el hero */
.pr-review-teaser {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 619px);
	gap: 40px;
	align-items: center;
	margin-top: 40px;
}
.pr-review-thumbs {
	display: flex;
	gap: 10px;
}
.pr-review-thumbs img {
	width: 130px;
	height: 130px;
	object-fit: cover;
	border-radius: 12px;
}
.pr-review-card {
	position: relative;
	background: #fff;
	border-radius: var(--pr-radius);
	padding: 38px 45px;
}
.pr-review-card header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
}
.pr-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--pr-red-dark);
	color: #fff;
	font-size: 18px;
	line-height: 40px;
	text-align: center;
	flex-shrink: 0;
}
.pr-review-author { font-weight: 500; line-height: 30px; }
.pr-review-card > p {
	font-weight: 300;
	line-height: 30px;
}
.pr-chevron {
	position: absolute;
	right: 24px;
	top: 50%;
	width: 12px;
	height: 12px;
	border-right: 2px solid #000;
	border-top: 2px solid #000;
	transform: translateY(-50%) rotate(45deg);
}

/* ------------------------------ Tabs producto ------------------------------ */

.pr-tabs-section { padding: 60px 0 40px; }
.pr-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}
.pr-tabs [role="tab"] {
	background: none;
	border: 0;
	padding: 8px 0;
	font-family: var(--pr-font-body);
	font-weight: 300;
	font-size: 25px;
	line-height: 35px;
	letter-spacing: 0.5px;
	color: #000;
	cursor: pointer;
	flex: 1 1 auto;
	text-align: left;
}
.pr-tabs [role="tab"] { transition: color 0.25s ease; }
.pr-tabs [role="tab"].is-active { color: var(--pr-coral); }
/* Paneles de tabs: cambio directo, sin transición */
.pr-tabs-viewport { position: relative; }
.pr-tab-panel {
	margin-top: 40px;
	font-weight: 300;
	font-size: 20px;
	line-height: 35px;
	max-width: 1119px;
}
.pr-tab-panel p + p { margin-top: 35px; }
.pr-warning-title {
	font-weight: 800;
	margin-top: 35px;
}
.pr-warning-title + p { margin-top: 0; }
/* Contenido de Certifications: filas logo + texto */
.pr-cert-row {
	display: flex;
	align-items: flex-start;
	gap: 45px;
}
.pr-cert-row + .pr-cert-row { margin-top: 40px; }
.pr-cert-row img { width: 76px; flex-shrink: 0; }
.pr-cert-row h3 {
	font-size: inherit;
	font-weight: 600;
	margin-bottom: 12px;
}
/* Contenido de Shipping information: dos columnas */
.pr-ship-cols {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 60px;
}
.pr-ship-cols h3 {
	font-size: inherit;
	font-weight: 600;
	margin-bottom: 10px;
}
.pr-ship-cols ul {
	margin: 0 0 24px;
	padding-left: 20px;
}
.pr-ship-cols li { margin-bottom: 8px; }
.pr-tab-panel a {
	text-decoration: underline;
	color: inherit;
}
.pr-recycling {
	margin: 60px auto 0;
	max-width: 718px;
}

/* ------------------------------ Claims ------------------------------ */

.pr-claims {
	background: var(--pr-gray);
	padding: 80px 0;
	margin-top: 40px;
}
.pr-claims-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 55px;
}
.pr-claim { text-align: center; }
.pr-claim img {
	height: 44px;
	width: auto;
	margin: 0 auto 24px;
}
.pr-claim p {
	color: var(--pr-red);
	font-weight: 300;
	font-size: 25px;
	line-height: 1.15;
	letter-spacing: 0;
	max-width: 365px;
	margin: 0 auto;
}
.pr-claim strong { font-weight: 600; }

/* ------------------------------ Beneficios ------------------------------ */

.pr-benefits { padding: 110px 0 60px; }
.pr-section-intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 629px);
	gap: 40px;
	align-items: start;
	margin-bottom: 60px;
}
.pr-section-intro > p {
	letter-spacing: -0.2px;
	line-height: 1.2;
}
.pr-section-intro strong { font-weight: 600; }
.pr-benefits-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.pr-benefit-card {
	background: var(--pr-red-dark);
	border-radius: var(--pr-radius);
	min-height: 263px;
	padding: 31px 25px;
	color: #fff;
}
.pr-benefit-card h3 {
	font-size: 25px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.25px;
}
.pr-benefit-card p {
	font-size: 25px;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: -0.25px;
	margin-top: 6px;
}
.pr-benefit-card--photo {
	padding: 0;
	overflow: hidden;
}
.pr-benefit-card--photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Tarjetas rojas con flip 3D al pasar el ratón; reverso gris oscuro */
.pr-benefit-card.pr-flip {
	padding: 0;
	height: 263px;
	min-height: 0;
	background: transparent;
	overflow: visible;
	perspective: 1100px;
}
.pr-flip-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.pr-benefit-card.pr-flip:hover .pr-flip-inner,
.pr-benefit-card.pr-flip:focus-within .pr-flip-inner { transform: rotateY(180deg); }
.pr-flip-front,
.pr-flip-back {
	position: absolute;
	inset: 0;
	padding: 31px 25px;
	border-radius: var(--pr-radius);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	overflow: hidden;
}
.pr-flip-front { background: var(--pr-red-dark); }
.pr-flip-back {
	background: #262626; /* mismo gris oscuro que el hover de las FAQ */
	transform: rotateY(180deg);
}
.pr-flip-back p {
	font-size: 20px;
	font-weight: 300;
	line-height: 1.25;
	letter-spacing: -0.2px;
}

/* ------------------------------ Atletas / stats ------------------------------ */

.pr-athletes {
	background:
		linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
		url('assets/img/athletes-bg.jpg') center / cover no-repeat;
	color: #fff;
	padding: 150px 0;
}
.pr-athletes-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 270px);
	gap: 60px;
}
.pr-athletes-copy { max-width: 449px; }
.pr-athletes-copy p {
	font-size: 25px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.25px;
	margin-top: 24px;
}
.pr-stats {
	display: flex;
	flex-direction: column;
	gap: 30px;
}
.pr-stat {
	background: rgba(0, 0, 0, 0.1);
	border-radius: var(--pr-radius);
	min-height: 226px;
	padding: 20px 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.pr-stat-num {
	font-size: 95px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.7px;
}
.pr-stat-label {
	font-size: 30px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.7px;
}

/* ------------------------------ Bandas CTA ------------------------------ */

.pr-band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}
.pr-team-cta {
	background: var(--pr-coral);
	color: #fff;
	padding: 45px 0;
}
.pr-team-cta h2 {
	font-size: 30px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.3px;
	max-width: 531px;
}
.pr-team-cta p {
	letter-spacing: -0.2px;
	line-height: 1.2;
	margin-top: 12px;
	max-width: 384px;
}

/* ------------------------------ Historias ------------------------------ */

.pr-stories { padding: 110px 0 0; }
.pr-stories-intro { color: var(--pr-coral); }
.pr-stories-viewport { overflow: hidden; }
.pr-stories-track {
	display: flex;
	gap: 25px;
	overflow-x: auto;
	padding: 0 0 30px;
	scroll-snap-type: x mandatory;
	scrollbar-width: none; /* sin barra visible en laptop */
}
.pr-stories-track::-webkit-scrollbar { display: none; }
/* Modo carrusel (JS): 3 completos + laterales a medias con desvanecimiento */
.pr-stories-track.is-carousel {
	flex-wrap: nowrap;
	overflow: visible;
	will-change: transform;
}
.pr-stories-track.is-carousel.is-animating {
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Laterales del carrusel: los extremos al 50% y los siguientes al 20%, proporcional */
.pr-story { transition: opacity 0.45s ease; }
.pr-story.is-side { cursor: pointer; }
.pr-story.is-far  { opacity: 0.5; }
.pr-story.is-near { opacity: 0.8; }
.pr-story.is-side::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	transition: opacity 0.45s ease;
}
.pr-story.is-far.is-side--left::after   { background: linear-gradient(to left,  transparent 35%, rgba(255, 255, 255, 0.9)); }
.pr-story.is-far.is-side--right::after  { background: linear-gradient(to right, transparent 35%, rgba(255, 255, 255, 0.9)); }
.pr-story.is-near.is-side--left::after  { background: linear-gradient(to left,  transparent 55%, rgba(255, 255, 255, 0.36)); }
.pr-story.is-near.is-side--right::after { background: linear-gradient(to right, transparent 55%, rgba(255, 255, 255, 0.36)); }
.pr-story {
	position: relative;
	flex: 0 0 337px;
	height: 604px;
	margin: 0;
	overflow: hidden;
	border-radius: var(--pr-radius);
	scroll-snap-align: center;
}
.pr-story img {
	position: absolute;
	max-width: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Recortes exactos de Figma sobre las láminas-collage story-a/story-b */
.pr-story--s1 img { width: 204.97%; height: 204.22%; left: -60.2%;   top: -0.1%;    object-fit: fill; }
.pr-story--s2 img { width: 215.94%; height: 215.15%; left: -56.18%;  top: -109.37%; object-fit: fill; }
.pr-story--s3 img { width: 220.12%; height: 219.32%; left: -0.21%;   top: -116.12%; object-fit: fill; }
.pr-story--s4 img { width: 220.12%; height: 219.32%; left: -9.88%;   top: -4.26%;   object-fit: fill; }
.pr-story--s5 img { width: 220.12%; height: 219.32%; left: -124.11%; top: -115.69%; object-fit: fill; }
.pr-story--s6 img { width: 220.12%; height: 219.32%; left: -117%;    top: -5%;      object-fit: fill; }
.pr-story--edge { flex: 0 0 121px; }
.pr-story--edge img { width: 502.93%; height: 219.32%; left: -274.84%; top: -6.67%; object-fit: fill; }
.pr-story figcaption {
	position: absolute;
	left: 25px;
	bottom: 25px;
	color: #fff;
	font-size: 20px;
	letter-spacing: -0.2px;
}

/* ------------------------------ Militar ------------------------------ */

.pr-military {
	background:
		linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
		url('assets/img/military-bg.png') center bottom / cover no-repeat;
	padding: 100px 0;
	margin-top: 80px;
}
.pr-military-copy {
	max-width: 478px;
	color: #fff;
}
.pr-military-copy p {
	font-size: 25px;
	line-height: 1.2;
	letter-spacing: -0.25px;
	margin-top: 24px;
}
.pr-military-cta {
	background: var(--pr-red);
	color: #fff;
	padding: 23px 0;
}
.pr-military-cta p {
	font-size: 25px;
	line-height: 1.2;
	letter-spacing: -0.25px;
}

/* ------------------------------ Reseñas ------------------------------ */

.pr-reviews { padding: 110px 0; }
.pr-reviews-grid {
	display: grid;
	grid-template-columns: minmax(0, 619px) minmax(0, 1fr);
	gap: 75px;
	align-items: start;
}
.pr-review-filters {
	display: flex;
	gap: 12px;
	margin-bottom: 24px;
}
/* Botones Filters / Sort by (componentes Figma 448:526 / 448:528: radio pequeño) */
.pr-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 33px;
	padding: 0 14px;
	border: 0;
	border-radius: 8px;
	background: var(--pr-coral);
	color: #fff;
	font-family: var(--pr-font-body);
	font-size: 15px;
	cursor: pointer;
}
.pr-reviews-list .pr-review-card { background: var(--pr-gray); }
.pr-rating {
	font-family: var(--pr-font-brand);
	font-weight: 700;
	font-size: 120px;
	line-height: 1;
	letter-spacing: -1.2px;
	color: var(--pr-coral);
	margin-top: 20px;
}
.pr-rating-count {
	color: rgba(0, 0, 0, 0.3);
	letter-spacing: -0.2px;
	line-height: 1.2;
	margin-top: 8px;
}
.pr-stars {
	display: flex;
	gap: 1px;
	margin-top: 18px;
}
.pr-stars img { width: 30px; height: 27px; }
.pr-rate-cta {
	letter-spacing: -0.2px;
	line-height: 1.3;
	max-width: 319px;
	margin-top: 24px;
}

/* ------------------------------ Newsletter ------------------------------ */

.pr-community {
	background:
		linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
		url('assets/img/community-bg.jpg') center / cover no-repeat;
	color: #fff;
	padding: 85px 0;
}
.pr-community h2 {
	font-size: 50px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.5px;
	max-width: 401px;
}
.pr-community p {
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.2px;
	max-width: 326px;
	margin-top: 24px;
}
/* Email box + Submit (asset Figma 389:3195) */
.pr-newsletter {
	display: flex;
	gap: 12px;
	margin-top: 34px;
	max-width: 480px;
}
.pr-newsletter input {
	flex: 1 1 auto;
	min-width: 0;
	height: 41px;
	padding: 0 16px;
	border: 1px solid #d9d9d9;
	border-radius: 8px;
	background: #fff;
	font-family: var(--pr-font-body);
	font-size: 16px;
	color: #000;
}
.pr-newsletter button {
	height: 41px;
	padding: 0 20px;
	border: 0;
	border-radius: 8px;
	background: var(--pr-coral);
	color: #fff;
	font-family: var(--pr-font-body);
	font-size: 16px;
	cursor: pointer;
	transition: opacity 0.2s ease;
}
.pr-newsletter button:hover { opacity: 0.85; }

/* ------------------------------ FAQ ------------------------------ */

.pr-faq { padding: 110px 0; }
.pr-faq h2 {
	font-size: 45px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.45px;
	margin-bottom: 50px;
}
/* Acordeón exclusivo: solo una pregunta abierta, con animación de altura */
.pr-faq-item { margin-bottom: 12px; }
.pr-faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	min-height: 93px;
	padding: 20px 45px;
	border: 0;
	border-radius: var(--pr-radius);
	background: var(--pr-gray-faq);
	font-family: var(--pr-font-body);
	font-weight: 300;
	font-size: 25px;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: left;
	color: #000;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
}
.pr-faq-q::after {
	content: '';
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.3s ease;
}
.pr-faq-item:not(.is-open) .pr-faq-q:hover {
	background: #262626;
	color: #fff;
}
.pr-faq-item.is-open .pr-faq-q {
	background: var(--pr-coral);
	color: #fff;
}
.pr-faq-item.is-open .pr-faq-q::after { transform: rotate(45deg); }
.pr-faq-answer {
	height: 0;
	overflow: hidden;
	transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.pr-faq-answer-inner {
	padding: 25px 45px 35px;
	font-weight: 300;
	font-size: 20px;
	line-height: 1.2;
	max-width: 900px;
	margin: 0 auto;
}

/* ------------------------------ Footer ------------------------------ */

.pr-footer {
	background: #000;
	color: var(--pr-gray);
}
/* Solo el contenedor principal del footer lleva padding vertical:
   con selector de descendiente también lo heredaba el de .pr-footer-bar */
.pr-footer > .pr-container { padding-top: 90px; padding-bottom: 40px; }
.pr-footer-logo {
	font-family: var(--pr-font-brand);
	font-weight: 700;
	font-size: 45px;
	letter-spacing: 0.5px;
	color: #fff;
}
.pr-footer-logo sup { font-size: 16px; }
.pr-footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 483px) minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 128px;
	row-gap: 60px;
	margin-top: 70px;
}
.pr-footer-col h3 {
	font-size: 25px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0.5px;
	margin-bottom: 26px;
}
.pr-footer-col--work h3 { font-size: 30px; }
.pr-footer-col-brand { font-family: var(--pr-font-brand); }
.pr-footer-col p {
	font-weight: 300;
	font-size: 25px;
	line-height: 24px;
	letter-spacing: 0.5px;
}
.pr-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.pr-footer-col li { margin-bottom: 15px; }
.pr-footer-col a {
	font-weight: 300;
	font-size: 25px;
	line-height: 24px;
	letter-spacing: 0.5px;
}
.pr-footer-col a:hover { text-decoration: underline; }
.pr-footer-cta { margin-top: 30px; }
.pr-footer-cta a {
	color: var(--pr-coral);
	font-weight: 600;
	line-height: 30px;
}
.pr-footer-brands {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 40px;
	margin-top: 50px;
}
.pr-brand-sspaain  { height: 31px; width: auto; }
/* Lipinova en blanco sobre el footer negro (petición 22/07/2026) */
.pr-brand-lipinova { height: 32px; width: auto; filter: brightness(0) invert(1); }
.pr-brand-azur     { width: 157px; height: auto; }
.pr-footer-bar {
	background: #fff;
	color: #000;
	padding: 19px 0;
}
.pr-footer-bar .pr-container {
	display: flex;
	justify-content: flex-end;
	gap: 45px;
}
.pr-footer-bar a {
	font-weight: 300;
	font-size: 20px;
	line-height: 24px;
}

/* ==========================================================================
   Variante EU (template page-sports-proresolve-eu.php — frame Figma 389:3267
   "Sports - LAPTOP (EU) export"): escala compacta en toda la página
   ========================================================================== */

/* Columna de contenido EU: 1130px útiles (márgenes ~155 en 1440) */
.pr-page--eu .pr-container { max-width: 1216px; }
/* Header alineado con la columna de contenido */
.pr-page--eu .pr-header {
	padding-left: max(40px, calc((100% - 1136px) / 2));
	padding-right: max(40px, calc((100% - 1136px) / 2));
}
/* Filters/Sort by alineados con el borde de la tarjeta (flecha 28px + gap 18px) */
.pr-page--eu .pr-review-filters {
	margin-left: 46px;
	margin-bottom: 20px;
}

/* Menú 79:5670 (07/08/2026): logotipo de texto a 32px, alineado a 119 como
   el resto de mercados (antes iba a 25px y más a la derecha). */
.pr-page--eu .pr-logo { font-size: 25px; }
.pr-page--eu .pr-logo--text { font-size: 32px; line-height: 36px; }
.pr-page--eu .pr-nav { padding: 2px 8px; }
.pr-page--eu .pr-nav a {
	font-size: 15px;
	padding: 7px 18px;
}
.pr-account {
	display: inline-flex;
	color: #000;
}

/* Encabezados de sección compactos */
.pr-page--eu .pr-heading {
	font-size: 30px;
	letter-spacing: -0.3px;
}

/* Hero compacto */
.pr-page--eu .pr-hero-media img { max-width: 550px; }
.pr-page--eu .pr-product-title { font-size: 30px; }
.pr-page--eu .pr-price { font-size: 50px; }
.pr-page--eu .pr-price-unit {
	font-size: 16px;
	color: rgba(0, 0, 0, 0.8);
}
/* "IVA incluido" en línea con el precio */
.pr-page--eu .pr-price-tax {
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.5px;
	margin-left: 12px;
	vertical-align: middle;
}
.pr-page--eu .pr-product-desc {
	font-size: 16px;
	line-height: 20px;
	max-width: 524px;
	margin-top: 22px;
}
.pr-page--eu .pr-product-desc p + p { margin-top: 20px; }
.pr-page--eu .pr-buy-label {
	font-size: 20px;
	font-weight: 500;
}
.pr-page--eu .pr-qty {
	width: 141px;
	height: 42px;
	font-size: 20px;
}
.pr-page--eu .pr-buy-controls { gap: 33px; }
.pr-page--eu .pr-buy-controls .pr-btn-red {
	min-width: 139px;
	padding: 11px 24px;
	font-size: 17px;
	letter-spacing: -0.17px;
}

/* Teaser de reseña compacto */
.pr-page--eu .pr-review-teaser { grid-template-columns: minmax(0, 1fr) minmax(0, 530px); }
.pr-page--eu .pr-review-thumbs img { border-radius: 10px; }
.pr-page--eu .pr-review-card--teaser { padding: 26px 31px; }
.pr-page--eu .pr-review-card--teaser header {
	gap: 26px;
	margin-bottom: 28px;
}
.pr-page--eu .pr-review-card--teaser .pr-review-author {
	font-size: 16px;
	line-height: 20px;
}
.pr-page--eu .pr-review-card--teaser > p {
	font-size: 16px;
	line-height: 20px;
}
/* Círculo de inicial (asset 389:3154): fondo rosado claro, letra roja */
.pr-page--eu .pr-review-card--teaser .pr-avatar {
	width: 32px;
	height: 32px;
	line-height: 32px;
	font-size: 15px;
	background: #f7e9eb;
	color: var(--pr-red);
}
.pr-more {
	display: block;
	margin-top: 4px;
	color: var(--pr-red);
	cursor: pointer;
}
/* Carrusel de miniaturas con flechas + tarjeta con flecha roja */
.pr-thumbs-carousel,
.pr-teaser-card-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
}
.pr-teaser-card-wrap { flex: 1; }
.pr-teaser-card-wrap .pr-review-card { flex: 1; }

/* Tabs compactas: 4 columnas iguales, etiquetas alineadas a la izquierda (solo desktop) */
@media (min-width: 761px) {
	.pr-page--eu .pr-tabs {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 12px;
	}
}
/* La banda de contenido de tabs es más estrecha que el contenedor general */
.pr-page--eu .pr-tabs-section .pr-container { max-width: 1140px; }
.pr-page--eu .pr-tabs [role="tab"] {
	font-size: 20px;
	line-height: 35px;
}
.pr-page--eu .pr-tab-panel {
	font-size: 16px;
	line-height: 20px;
	max-width: 933px;
	margin-top: 32px;
}
.pr-page--eu .pr-tab-panel p + p { margin-top: 20px; }
.pr-page--eu .pr-warning-title { margin-top: 20px; }
.pr-page--eu .pr-recycling {
	max-width: 362px;
	margin: 45px 0 0; /* alineado a la izquierda como en el frame */
}

/* Claims compactos (columnas algo más anchas que el contenedor general) */
.pr-page--eu .pr-claims { padding: 55px 0; }
.pr-page--eu .pr-claims .pr-container { max-width: 1360px; }
.pr-page--eu .pr-claim img { height: 44px; }
.pr-page--eu .pr-claim p {
	font-size: 19px;
	max-width: 365px;
}

/* Beneficios compactos (cajita asset 393:305: 331×223) */
.pr-page--eu .pr-benefits { padding: 90px 0 50px; }
/* En EU el encabezado y la intro van apilados a la izquierda, no a 2 columnas */
.pr-page--eu .pr-section-intro {
	display: block;
	margin-bottom: 50px;
}
.pr-page--eu .pr-section-intro > p {
	font-size: 16px;
	letter-spacing: -0.16px;
	max-width: 551px;
	margin-top: 12px;
}
.pr-page--eu .pr-benefits-grid {
	max-width: 1023px; /* 3×331 + 2×15: tarjetas exactas del asset 393:305 */
	margin: 0 auto;
	gap: 15px;
}
.pr-page--eu .pr-benefit-card {
	height: 223px;
	min-height: 0;
	overflow: hidden;
	padding: 26px 22px;
}
.pr-page--eu .pr-benefit-card--photo { padding: 0; }
.pr-page--eu .pr-benefit-card.pr-flip { padding: 0; overflow: visible; }
.pr-page--eu .pr-flip-front,
.pr-page--eu .pr-flip-back { padding: 26px 22px; }
.pr-page--eu .pr-flip-back p { font-size: 16px; letter-spacing: -0.16px; }
.pr-page--eu .pr-benefit-card--photo:first-child img { object-position: center bottom; }
.pr-page--eu .pr-benefit-card h3 {
	font-size: 20px;
	letter-spacing: -0.2px;
}
.pr-page--eu .pr-benefit-card p {
	font-size: 20px;
	letter-spacing: -0.2px;
}

/* Newsletter compacta (fondo nuevo: bota y balón de fútbol) */
.pr-page--eu .pr-community {
	background:
		linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
		url('assets/img/community-bg-eu.jpg') center / cover no-repeat;
	padding: 70px 0;
}
.pr-page--eu .pr-community h2 {
	font-size: 35px;
	letter-spacing: -0.35px;
}
.pr-page--eu .pr-newsletter { max-width: 340px; }

/* Historias compactas (rect testimonios asset 393:334: 284×508) */
.pr-page--eu .pr-stories { padding: 90px 0 0; }
.pr-page--eu .pr-stories-intro {
	font-size: 16px;
	letter-spacing: -0.16px;
	max-width: 510px;
}
.pr-page--eu .pr-stories-track { gap: 19px; }
.pr-page--eu .pr-story {
	flex: 0 0 284px;
	height: 508px;
}
.pr-page--eu .pr-story--edge { flex: 0 0 121px; }

/* Reseñas compactas: heading negro, 4.4 a 80px con "Based on" al lado */
.pr-page--eu .pr-reviews { padding: 90px 0; }
.pr-page--eu .pr-reviews-summary .pr-heading { color: #000; }
.pr-review-row {
	display: flex;
	align-items: center;
	gap: 18px;
}
.pr-review-row .pr-review-card { flex: 1; }
.pr-rating-row {
	display: flex;
	align-items: center;
	gap: 14px;
}
.pr-page--eu .pr-rating {
	font-size: 80px;
	letter-spacing: -0.8px;
	margin-top: 12px;
}
.pr-page--eu .pr-rating-count {
	font-size: 16px;
	max-width: 130px;
	margin-top: 12px;
}
.pr-page--eu .pr-rate-cta {
	font-size: 20px;
	margin-top: 44px;
}
.pr-page--eu .pr-stars { margin-top: 12px; }
/* Letra inicial reseña inferior (asset 389:3158): fondo blanco, letra negra */
.pr-page--eu .pr-reviews-list .pr-avatar {
	background: #fff;
	color: #000;
}

/* Demanding Lifestyles (foto first responders) */
.pr-demanding {
	background:
		linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
		url('assets/img/demanding-bg-eu.jpg') center / cover no-repeat;
	color: #fff;
	padding: 95px 0 110px;
	margin-top: 80px;
}
.pr-demanding-copy { max-width: 491px; }
.pr-demanding-copy p {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.16px;
	margin-top: 20px;
}

/* Barra contact us (asset 393:342): banda negra con botón rojo */
.pr-contact-band {
	background: #000;
	color: #fff;
	padding: 18px 0;
}
.pr-contact-band p {
	font-size: 20px;
	line-height: 1.2;
	letter-spacing: -0.2px;
}
.pr-contact-band .pr-btn-red {
	min-width: 139px;
	padding: 11px 24px;
	font-size: 17px;
	letter-spacing: -0.17px;
}

/* FAQ compacta (barra asset 393:341: radio 20, 76px) */
.pr-page--eu .pr-faq { padding: 90px 0; }
.pr-page--eu .pr-faq h2 {
	font-size: 30px;
	letter-spacing: -0.3px;
	margin-bottom: 40px;
}
.pr-page--eu .pr-faq-q {
	min-height: 76px;
	padding: 16px 45px;
	border-radius: 20px;
	font-size: 20px;
}
/* Chevron coral en las preguntas cerradas (como en el frame) */
.pr-page--eu .pr-faq-item:not(.is-open) .pr-faq-q::after { border-color: var(--pr-coral); }
.pr-page--eu .pr-faq-answer-inner {
	padding: 22px 45px 30px 70px;
	max-width: 966px;
	margin: 0;
	font-size: 16px;
}

/* Accesibilidad: sin animaciones si el usuario las tiene desactivadas */
@media (prefers-reduced-motion: reduce) {
	.pr-tabs-viewport,
	.pr-tab-panel,
	.pr-faq-answer,
	.pr-faq-q,
	.pr-faq-q::after { transition: none !important; }
}

/* ------------------------------ Responsive ------------------------------ */

@media (max-width: 1100px) {
	.pr-header {
		grid-template-columns: auto 1fr;
		row-gap: 8px;
		padding: 16px 24px 12px;
	}
	.pr-header .pr-header-tools { grid-column: 2; grid-row: 1; }
	.pr-header .pr-nav {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: center;
		padding: 0;
	}
	.pr-review-teaser,
	.pr-reviews-grid,
	.pr-athletes-grid,
	.pr-section-intro { grid-template-columns: 1fr; }
	.pr-stats { flex-direction: row; }
	.pr-stat { flex: 1; min-height: 180px; }
	.pr-benefits-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
	body.pr-page { font-size: 18px; }
	.pr-container { padding: 0 24px; }
	.pr-hero-grid { grid-template-columns: 1fr; }
	.pr-heading { font-size: 32px; }
	.pr-price { font-size: 44px; }
	.pr-claims-grid,
	.pr-benefits-grid { grid-template-columns: 1fr; }
	.pr-stats { flex-direction: column; }
	.pr-band { flex-direction: column; align-items: flex-start; }
	.pr-rating { font-size: 90px; }
	.pr-faq h2 { font-size: 34px; }
	.pr-faq-q { font-size: 18px; padding: 16px 28px; min-height: 64px; }
	.pr-faq-answer-inner { padding: 20px 28px 28px; }
	.pr-footer-grid { grid-template-columns: 1fr; gap: 40px; }
	.pr-footer-brands { justify-content: flex-start; flex-wrap: wrap; }
	.pr-logo { font-size: 22px; }
	.pr-header { gap: 12px; }
	.pr-header-tools { gap: 14px; }
	.pr-nav { gap: 0; }
	.pr-nav a { padding: 5px 9px; font-size: 13px; }
}

/* ==========================================================================
   Móvil: segmented control iOS para las tabs + bloque de vídeos estilo TikTok
   (después de los overrides EU para ganar en cascada)
   ========================================================================== */

.pr-tabs-thumb { display: none; }

@media (max-width: 760px) {
	/* Hero compacto: imagen, descripción, cantidad y Add to cart visibles
	   en el primer pantallazo al aterrizar */
	.pr-page .pr-hero { padding: 10px 0 24px; }
	.pr-page .pr-hero-grid { gap: 14px; }
	.pr-page .pr-hero-media img { max-width: min(62vw, 240px); }
	.pr-page .pr-product-title { font-size: 24px; }
	.pr-page .pr-price { font-size: 34px; }
	.pr-page .pr-price-unit,
	.pr-page .pr-price-tax { font-size: 13px; }
	.pr-page .pr-product-desc {
		font-size: 14px;
		line-height: 18px;
		margin-top: 10px;
		display: -webkit-box;
		-webkit-line-clamp: 6;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.pr-page .pr-product-desc p + p { margin-top: 8px; }
	.pr-page .pr-buy { margin-top: 12px; }
	.pr-page .pr-buy-controls { margin-top: 8px; gap: 14px; }
	.pr-page .pr-qty { width: 110px; height: 40px; font-size: 16px; }
	.pr-page .pr-buy-controls .pr-btn-red { min-width: 120px; padding: 10px 18px; font-size: 15px; }

	/* Tabs como segmented control iOS: píldora gris, segmento activo blanco deslizante */
	.pr-page .pr-tabs {
		display: flex;
		position: relative;
		flex-wrap: nowrap;
		gap: 0;
		padding: 2px;
		border-radius: 10px;
		background: rgba(118, 118, 128, 0.12);
	}
	.pr-page .pr-tabs [role="tab"] {
		flex: 1 1 0;
		position: relative;
		z-index: 1;
		padding: 9px 4px;
		font-size: 13px;
		font-weight: 400;
		line-height: 1.2;
		letter-spacing: 0;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.pr-page .pr-tabs [role="tab"].is-active { color: #000; font-weight: 500; }
	.pr-page .pr-tabs .pr-tabs-thumb {
		display: block;
		position: absolute;
		top: 2px;
		bottom: 2px;
		border-radius: 8px;
		background: #fff;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
		transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}
	.pr-ship-cols { grid-template-columns: 1fr; gap: 24px; }

	/* Vídeos estilo TikTok: una tarjeta a pantalla, scroll vertical con snap
	   dentro del marco (con asomo de la siguiente), y márgenes para poder
	   seguir scrolleando la página fuera del marco */
	.pr-page .pr-stories-track.is-tiktok {
		display: block;
		width: min(78vw, calc(70vh * 284 / 508));
		height: min(70vh, calc(78vw * 508 / 284));
		margin: 0 auto;
		padding: 0;
		overflow-y: auto;
		overflow-x: hidden;
		scroll-snap-type: y mandatory;
		border-radius: var(--pr-radius);
		scrollbar-width: none;
	}
	.pr-page .pr-stories-track.is-tiktok::-webkit-scrollbar { display: none; }
	.pr-page .pr-stories-track.is-tiktok .pr-story {
		width: 100%;
		height: 100%; /* un vídeo exacto por pantalla, sin cortes */
		margin: 0;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	/* Overlay de primera visita (estilo onboarding TikTok/IG): invita a deslizar */
	.pr-stories-viewport { position: relative; }
	.pr-swipe-hint {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: min(78vw, calc(70vh * 284 / 508));
		height: min(70vh, calc(78vw * 508 / 284));
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 18px;
		border-radius: var(--pr-radius);
		background: rgba(0, 0, 0, 0.45);
		color: #fff;
		z-index: 5;
		cursor: pointer;
		transition: opacity 0.4s ease;
	}
	.pr-swipe-hint.is-hidden { opacity: 0; pointer-events: none; }
	.pr-swipe-hint p {
		font-size: 16px;
		font-weight: 500;
		letter-spacing: 0;
	}
	.pr-swipe-hint-icon {
		width: 22px;
		height: 34px;
		position: relative;
		animation: pr-swipe-up 1.6s ease-in-out infinite;
	}
	.pr-swipe-hint-icon::before,
	.pr-swipe-hint-icon::after {
		content: '';
		position: absolute;
		left: 3px;
		width: 14px;
		height: 14px;
		border-left: 3px solid #fff;
		border-top: 3px solid #fff;
		transform: rotate(45deg);
	}
	.pr-swipe-hint-icon::before { top: 0; }
	.pr-swipe-hint-icon::after { top: 14px; opacity: 0.5; }
	@keyframes pr-swipe-up {
		0%, 100% { transform: translateY(8px); opacity: 0.6; }
		50%      { transform: translateY(-8px); opacity: 1; }
	}
}

/* ==========================================================================
   Home US (template page-home-us.php — frame Figma 522:3855
   "Home ProResolve - LAPTOP USA (final version)"): hero de vídeo, línea
   temporal de la ciencia, tarjetas negras con flip a #F9F9F9, newsletter
   sobre foto de microscopio y FAQ en claro. Escala compacta (cuerpos 16px,
   headings 32px), todo bajo .pr-page--home.
   ========================================================================== */

/* El header va fixed (no sticky) para que el vídeo del hero pase por debajo */
.pr-page--home .pr-header {
	position: fixed;
	left: 0;
	right: 0;
}
/* Sobre el hero: glass en NEGRO (velo oscuro sobre el glass blanco de la barra)
   y sin cápsula del nav; al pasar el hero vuelve el aspecto normal (JS añade
   .is-over-hero mientras el hero está bajo la barra) */
.pr-page--home .pr-header::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.22) 100%);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}
.pr-page--home .pr-header.is-over-hero::after { opacity: 1; }
.pr-page--home .pr-header.is-over-hero { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
/* Sobre el hero la cápsula queda casi imperceptible (se intuye, no destaca);
   al pasar el hero recupera su glass normal */
.pr-page--home .pr-nav { transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.pr-page--home .pr-header.is-over-hero .pr-nav {
	background: var(--pr-glass-light);
	border-color: rgba(255, 255, 255, 0.13);
	box-shadow: none;
}
/* Logo: imagen blanca (asset Figma 526:720); en negro sobre fondos claros
   vía filter, y blanco cuando el header está invertido (hero/bloques oscuros) */
.pr-page--home .pr-logo img {
	height: 29px;
	width: auto;
	display: block;
	filter: brightness(0);
	transition: filter 0.3s ease;
}
.pr-page--home .pr-header.is-inverted .pr-logo img { filter: none; }
.pr-page--home .pr-footer-logo img {
	height: 47px;
	width: auto;
}

/* Botón pastilla negro (CTAs de la home) */
.pr-page--home .pr-btn-black,
.pr-page--home a.pr-btn-black,
.pr-page--home a.pr-btn-black:visited {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 9px 22px;
	background: #000;
	color: #fff;
	font-size: 16px;
	letter-spacing: -0.16px;
}
.pr-chevron-r {
	width: 7px;
	height: 7px;
	border-right: 1.6px solid currentColor;
	border-top: 1.6px solid currentColor;
	transform: rotate(45deg);
}

/* ------------------------------ Hero (vídeo) ------------------------------ */

.pr-home-hero {
	position: relative;
	height: clamp(430px, 51.8vw, 746px);
	overflow: hidden;
	background: #1e1e1e;
}
.pr-home-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Velo suave abajo-izquierda para asegurar la legibilidad del titular sobre el vídeo */
.pr-home-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(200deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.38) 100%);
	pointer-events: none;
}
.pr-home-hero-content {
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	padding-bottom: 70px;
}
.pr-home-hero-content h1 {
	font-family: var(--pr-font-brand);
	font-weight: 400;
	font-size: 40px;
	line-height: 0.9;
	letter-spacing: 0;
	color: #fff;
	max-width: 500px;
}
.pr-home-hero-content .pr-btn-black { margin-top: 28px; }

/* ------------------------ ProResolving What Matters ------------------------ */

.pr-home-intro {
	background: var(--pr-bg);
	padding: 100px 0 110px;
}
.pr-home-intro-grid {
	display: grid;
	grid-template-columns: 470px minmax(0, 1fr);
	gap: 100px;
	align-items: center;
}
.pr-home-intro-media img {
	width: 100%;
	max-width: 250px;
	margin: 0 auto;
}
.pr-home-intro-copy h2 {
	font-weight: 500;
	font-size: 32px;
	line-height: 0.9;
	letter-spacing: 0;
}
/* Prefijo .pr-page para ganar al reset .pr-page p { margin: 0 } */
.pr-page .pr-home-intro-lead {
	margin-top: 40px;
	max-width: 437px;
	font-size: 16px;
	line-height: 1.1;
	letter-spacing: 0;
}
.pr-home-intro-body {
	margin-top: 26px;
	max-width: 524px;
	font-weight: 300;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 0.5px;
}
.pr-home-intro-body p + p { margin-top: 20px; }
.pr-home-intro-copy .pr-btn-black { margin-top: 36px; }

/* --------------------- Ciencia / línea temporal SPM --------------------- */

.pr-home-science { padding: 100px 0 130px; }
.pr-home-science h2 {
	font-weight: 500;
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: -0.32px;
}
.pr-home-timeline { margin-top: 60px; }
.pr-ht-row { display: flex; align-items: flex-start; }
.pr-ht-block h3 {
	font-weight: 600;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: -0.16px;
}
.pr-ht-block p {
	font-weight: 300;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: -0.16px;
}
/* Posiciones del frame 132:5795 (porcentajes sobre el ancho de la barra).
   Los bloques no encogen: el tercero de arriba sale de la barra por la
   derecha, igual que en el diseño. */
.pr-ht-block { flex: 0 0 auto; }
.pr-ht-block--t1 { width: 29.00%; margin-left: 0.08%; }
.pr-ht-block--t2 { width: 32.25%; margin-left: 8.58%; }
.pr-ht-block--t3 { width: 27.33%; margin-left: 6.07%; }
.pr-ht-block--b1 { width: 27.75%; margin-left: 17.87%; }
.pr-ht-block--b2 { width: 22.58%; margin-left: 17.64%; }
/* Línea con marcas triangulares (isotipo 522:3901: triángulo 22×13 #1e1e1e) */
.pr-ht-line {
	position: relative;
	height: 1px;
	background: #000;
	margin: 24px 0 34px;
}
.pr-ht-mark {
	position: absolute;
	bottom: 1px;
	width: 0;
	height: 0;
	border-left: 11px solid transparent;
	border-right: 11px solid transparent;
	border-bottom: 13px solid #1e1e1e;
}
.pr-ht-mark--down {
	bottom: auto;
	top: 1px;
	border-bottom: 0;
	border-top: 13px solid #1e1e1e;
}
.pr-ht-mark--end { right: 0; }

/* ------------------- Lipinova + tarjetas de confianza ------------------- */

.pr-home-lipinova {
	background: var(--pr-bg);
	border-radius: 60px 60px 0 0;
	padding: 88px 0 100px;
}
.pr-home-lipinova h2 {
	font-weight: 500;
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: -0.32px;
}
.pr-page .pr-home-lipinova-desc {
	margin-top: 16px;
	max-width: 657px;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: -0.16px;
}
.pr-home-lipinova-desc + .pr-btn-black { margin-top: 30px; }
.pr-page .pr-home-trust-title {
	margin-top: 64px;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: -0.24px;
}
.pr-home-trust {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px 16px;
	margin-top: 33px;
}
/* Tarjetas negras con flip 3D al hover; reverso #F9F9F9 con lorem (TODO texto real) */
.pr-home-card {
	height: 214px;
	perspective: 1100px;
	outline: none;
}
.pr-home-card:hover .pr-flip-inner,
.pr-home-card:focus-within .pr-flip-inner { transform: rotateY(180deg); }
.pr-home-card .pr-flip-front,
.pr-home-card .pr-flip-back { padding: 44px 42px; }
.pr-home-card .pr-flip-front {
	background: #000;
	color: #fff;
}
.pr-home-card .pr-flip-front h4 {
	margin: 0;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: -0.16px;
}
.pr-home-card .pr-flip-front p {
	font-weight: 300;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: -0.16px;
}
.pr-home-card .pr-flip-back {
	background: #f9f9f9;
	color: #000;
	/* Borde sutil: el reverso #F9F9F9 se fundiría con el fondo #f9f9f9 de la sección */
	border: 1px solid #e8e8e8;
}
.pr-home-card .pr-flip-back p {
	font-weight: 300;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: -0.16px;
}

/* ------------------------- Newsletter (microscopio) ------------------------- */

.pr-home-community {
	position: relative;
	overflow: hidden;
	/* Fondo negro (antes #f4f4f4): va tapado por el vídeo, pero si el navegador
	   redondea la altura y deja una costura de 1px contra el footer, en claro
	   se veía como una línea fina y en negro no se nota. */
	background: #000;
	padding: 74px 0 90px;
}
.pr-home-community-video {
	position: absolute;
	inset: 0;
	width: 100%;
	/* 1px de más por el mismo motivo: el recorte "cover" no cambia y el vídeo
	   no puede quedarse corto por abajo. */
	height: calc(100% + 1px);
	object-fit: cover;
}
/* Overlay negro para que el texto (blanco) se lea bien sobre el vídeo */
.pr-home-community::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.52) 32%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0.08) 100%);
	pointer-events: none;
}
.pr-home-community .pr-container {
	position: relative;
	z-index: 1;
}
.pr-home-community-copy {
	max-width: 470px;
	padding-left: 60px;
	color: #fff;
}
.pr-home-community h2 {
	font-weight: 500;
	font-size: 24px;
	line-height: 1.25;
	letter-spacing: -0.24px;
}
.pr-home-community p {
	margin-top: 9px;
	max-width: 338px;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.25;
	letter-spacing: -0.16px;
}
/* Caja de email + Submit (componente Figma 524:4604: input píldora blanca,
   botón píldora translúcida con chevron) */
.pr-home-community .pr-newsletter { margin-top: 24px; max-width: 380px; gap: 10px; }
.pr-home-community .pr-newsletter input {
	height: 40px;
	border: 0;
	border-radius: 20px;
	padding: 0 18px;
	font-size: 14px;
}
.pr-home-community .pr-newsletter button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	border-radius: 20px;
	padding: 0 20px;
	background: rgba(255, 255, 255, 0.26);
	-webkit-backdrop-filter: var(--pr-glass-frost);
	backdrop-filter: var(--pr-glass-frost);
	color: #fff;
	font-size: 15px;
}

/* ------------------------------ FAQ en claro ------------------------------ */

.pr-page--home .pr-faq { padding: 130px 0 120px; }
.pr-page--home .pr-faq h2 {
	font-size: 32px;
	font-weight: 500;
	letter-spacing: -0.32px;
	margin-bottom: 44px;
}
.pr-page--home .pr-faq-item { margin-bottom: 8px; }
.pr-page--home .pr-faq-q {
	min-height: 78px;
	padding: 20px 62px;
	background: #f9f9f9;
	font-size: 24px;
}
.pr-page--home .pr-faq-item.is-open .pr-faq-q {
	background: #000;
	color: #fff;
}
/* GeneratePress pinta button:focus con texto blanco y su propio fondo — sin
   neutralizarlo, al cerrar una pregunta el botón queda enfocado con texto
   blanco sobre píldora clara (ilegible). Aplica a todas las páginas pr-. */
.pr-page .pr-faq-q:focus {
	color: #000;
	background: var(--pr-gray-faq);
	outline: none;
}
.pr-page .pr-faq-q:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
.pr-page .pr-faq-item.is-open .pr-faq-q:focus {
	color: #fff;
	background: var(--pr-coral);
}
.pr-page--home .pr-faq-q:focus { background: #f9f9f9; }
.pr-page--home .pr-faq-item.is-open .pr-faq-q:focus { background: #000; }
.pr-page--home .pr-faq-answer-inner {
	padding: 32px 62px 40px;
	max-width: 950px;
	margin: 0;
	font-size: 16px;
	line-height: 1.45;
}
/* Las respuestas de FAQs.docx / FAQ EU.docx traen varios párrafos: hay que
   separarlos, y las referencias bibliográficas van en letra pequeña. */
.pr-page--home .pr-faq-answer-inner p { margin: 0 0 14px; }
.pr-page--home .pr-faq-answer-inner p:last-child { margin-bottom: 0; }
.pr-page--home .pr-faq-answer-inner .pr-faq-ref {
	margin-top: 20px;
	font-size: 13px;
	line-height: 1.4;
	font-style: italic;
	opacity: 0.6;
}

/* ------------------------------ Footer home ------------------------------ */

.pr-page--home .pr-footer { border-radius: 60px 60px 0 0; }
.pr-page--home .pr-footer-bar { border-radius: 60px 60px 0 0; }

/* ------------------------------ Responsive home ------------------------------ */

@media (max-width: 1100px) {
	.pr-home-trust { grid-template-columns: repeat(2, 1fr); }
	.pr-home-intro-grid { grid-template-columns: 1fr; gap: 48px; }
	.pr-home-intro-media img { max-width: 220px; }
}

@media (max-width: 760px) {
	.pr-home-hero { height: min(72svh, 560px); }
	.pr-home-hero-content { padding-bottom: 48px; }
	.pr-home-hero-content h1 { font-size: 30px; }
	.pr-home-intro { padding: 60px 0 70px; }
	.pr-home-intro-copy h2 { font-size: 26px; }
	.pr-home-science { padding: 60px 0 80px; }
	.pr-home-science h2 { font-size: 26px; }
	/* Los <br> de los headings (saltos del frame desktop) romperían el ancho en móvil */
	.pr-home-science h2 br,
	.pr-home-lipinova h2 br { display: none; }
	.pr-home-timeline { margin-top: 36px; }
	.pr-ht-row { display: block; }
	.pr-ht-row .pr-ht-block {
		width: auto;
		margin: 0 0 28px;
	}
	.pr-ht-line { display: none; }
	.pr-home-lipinova {
		border-radius: 40px 40px 0 0;
		padding: 60px 0 70px;
	}
	.pr-home-lipinova h2 { font-size: 26px; }
	.pr-home-trust { grid-template-columns: 1fr; margin-top: 24px; }
	.pr-home-trust-title { margin-top: 44px; }
	.pr-home-card { height: auto; min-height: 200px; }
	.pr-home-card .pr-flip-inner { min-height: 200px; }
	.pr-home-card .pr-flip-front,
	.pr-home-card .pr-flip-back { padding: 30px 26px; }
	.pr-home-community { padding: 56px 0 64px; }
	.pr-home-community::after { background: rgba(0, 0, 0, 0.58); }
	.pr-home-community-copy { padding-left: 0; }
	.pr-page--home .pr-faq { padding: 70px 0 80px; }
	.pr-page--home .pr-faq h2 { font-size: 26px; margin-bottom: 28px; }
	.pr-page--home .pr-faq-q {
		min-height: 64px;
		padding: 16px 28px;
		font-size: 18px;
	}
	.pr-page--home .pr-faq-answer-inner { padding: 20px 28px 28px; }
	.pr-page--home .pr-footer,
	.pr-page--home .pr-footer-bar { border-radius: 40px 40px 0 0; }
	.pr-page--home .pr-logo img { height: 22px; }
	.pr-page--home .pr-footer-logo img { height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
	.pr-home-card .pr-flip-inner { transition: none !important; }
}

/* =====================================================================
   FICHA DE PRODUCTO — EE.UU. (frame Figma 543:1279, reconstrucción 05/08/2026)
   Solo versión laptop: cotas 1:1 del frame de 1440px medidas sobre el
   render; sin adaptación a otros formatos hasta que se apruebe.
   ===================================================================== */

.pr-page--us { background: #fff; min-width: 1440px; }

.pr-page--us .pr-container {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0;
	position: relative;
}

/* --- Header: barra glass clara (grupo 543:1740) --------------------- */
.pr-page--us:not(.pr-page--home-es) .pr-header,
.pr-page--us:not(.pr-page--home-es) .pr-header.is-inverted {
	position: sticky;
	top: 0;
	z-index: 40;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	height: 76px;
	/* la barra es de ancho completo pero su contenido se alinea con la
	   franja centrada de 1440 (como el resto de la página) */
	padding: 0 max(118px, calc((100% - 1440px) / 2 + 118px));
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.2) 45%, rgba(249, 249, 249, 0.1));
	-webkit-backdrop-filter: var(--pr-glass-frost);
	backdrop-filter: var(--pr-glass-frost);
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.pr-page--us:not(.pr-page--home-es) .pr-logo { padding: 0; background: none; }
.pr-page--us:not(.pr-page--home-es) .pr-logo img { display: block; height: 29px; width: auto; filter: none; }
/* El logotipo lo decide el estado de la barra, como en la home: negro sobre
   fondo claro y blanco cuando el header se invierte sobre un bloque oscuro.
   Iba forzado a blanco de cuando la barra de las fichas era negra, y al
   igualarla a la de la home se quedaba invisible (10/08/2026). */
.pr-page--us:not(.pr-page--home-es) .pr-logo--text { color: #000; }
.pr-page--us:not(.pr-page--home-es) .pr-header.is-inverted .pr-logo--text { color: #fff; }
.pr-page--us:not(.pr-page--home-es) .pr-nav,
.pr-page--us:not(.pr-page--home-es) .pr-header.is-inverted .pr-nav {
	display: flex;
	/* Separaciones del menú 79:4995: los ítems caen en 598 / 780,5 / 902,5.
	   Aquí los enlaces van sin relleno (regla de abajo), así que el hueco es
	   de 54; en las homes, que conservan los 22px de relleno de cada ítem,
	   el mismo resultado sale con 10. */
	gap: 54px;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.pr-page--us:not(.pr-page--home-es) .pr-nav::before { display: none; }
.pr-page--us:not(.pr-page--home-es) .pr-nav a,
.pr-page--us:not(.pr-page--home-es) .pr-header.is-inverted .pr-nav a {
	font-family: var(--pr-font-body);
	font-size: 20px;
	font-weight: 400;
	line-height: 31px;
	letter-spacing: 0.5px;
	color: #000;
	background: none;
	padding: 0;
}
.pr-page--us:not(.pr-page--home-es) .pr-nav a:hover { color: rgba(0, 0, 0, 0.6); }
.pr-page--us:not(.pr-page--home-es) .pr-nav a.is-active,
.pr-page--us:not(.pr-page--home-es) .pr-header.is-inverted .pr-nav a.is-active {
	color: var(--pr-red);
	font-weight: 600;
}
.pr-page--us:not(.pr-page--home-es) .pr-header-tools { gap: 14px; }
.pr-page--us:not(.pr-page--home-es) .pr-lang,
.pr-page--us:not(.pr-page--home-es) .pr-account,
.pr-page--us:not(.pr-page--home-es) .pr-cart,
.pr-page--us:not(.pr-page--home-es) .pr-header.is-inverted .pr-lang,
.pr-page--us:not(.pr-page--home-es) .pr-header.is-inverted .pr-account,
.pr-page--us:not(.pr-page--home-es) .pr-header.is-inverted .pr-cart { color: #000; }

/* --- Hero (fondo #f9f9f9 hasta y=1125) ------------------------------ */
.pr-page--us .pr-hero {
	position: relative;
	height: 1073px;
	margin-top: -76px; /* el fondo pasa por debajo del header glass */
	padding: 0;
	background: #f9f9f9;
}
.pr-page--us .pr-hero > .pr-container { height: 100%; }
/* relative y NO static: es el bloque contenedor de la media y la info; con
   static se anclaban a .pr-hero (ancho completo) y en pantallas >1440 la
   ficha entera se iba a la izquierda */
.pr-page--us .pr-hero-grid { display: block; padding: 0; position: relative; }

.pr-page--us .pr-hero-media { position: static; }
.pr-page--us .pr-hero-badges {
	position: absolute;
	left: 186px;
	top: 211px;
	width: 93px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 17px;
	z-index: 2;
}
.pr-page--us .pr-hero-badges .pr-badge {
	display: block;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
.pr-page--us .pr-hero-badges .pr-badge--nsf  { width: 62px; height: 68px; }
.pr-page--us .pr-hero-badges .pr-badge--seal { width: 93px; height: 42px; }
.pr-page--us .pr-hero-shot,
.pr-page--us .pr-hero-media .pr-hero-shot {
	position: absolute;
	left: 158px;
	top: 169px;
	width: 550px;
	height: 648px;
	aspect-ratio: auto;
	object-fit: cover;
	border-radius: 20px;
	margin: 0;
}

.pr-page--us .pr-hero-info { position: absolute; left: 770px; top: 174px; width: 576px; }
.pr-page--us .pr-product-title {
	font-family: var(--pr-font-brand);
	font-size: 32px;
	font-weight: 400;
	line-height: 31px;
	letter-spacing: 0.5px;
	color: var(--pr-red);
	margin: 0;
}
.pr-page--us .pr-price {
	font-family: var(--pr-font-body);
	/* 42 desde el 10/08/2026 (antes 48), en US y en EU */
	font-size: 42px;
	font-weight: 400;
	line-height: 31px;
	letter-spacing: 0.5px;
	color: #000;
	margin: 19px 0 0;
}
.pr-page--us .pr-price del { display: none; }
.pr-page--us .pr-price-tax { display: none; }
.pr-page--us .pr-price-unit {
	font-size: 18px;
	font-weight: 300;
	line-height: 20px;
	letter-spacing: 0.5px;
	color: #000;
	margin: 18px 0 0;
}
.pr-page--us .pr-product-desc {
	width: 539px;
	margin: 24px 0 0;
	font-size: 16px;
	font-weight: 300;
	line-height: 20px;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-page--us .pr-product-desc p + p { margin-top: 20px; }

.pr-page--us .pr-buy-label {
	display: block;
	font-size: 16px;
	font-weight: 500;
	line-height: 30px;
	letter-spacing: 0.5px;
	color: #000;
	margin: 31px 0 0;
}
.pr-page--us .pr-buy-controls { display: flex; align-items: center; gap: 20px; margin-top: 15px; }

/* Stepper píldora blanca (botón DS: radio 30, padding 12, gap 8) */
.pr-page--us .pr-stepper {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 40px;
	padding: 0 12px;
	background: #fff;
	border-radius: 30px;
}
.pr-page--us .pr-stepper-btn {
	background: none;
	border: 0;
	padding: 0;
	width: 16px;
	font-size: 18px;
	line-height: 1;
	color: #000;
	cursor: pointer;
}
.pr-page--us .pr-stepper input.pr-stepper-input,
.pr-page--us .pr-stepper input[type="number"] {
	width: 24px;
	border: 0;
	background: none;
	text-align: center;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 400;
	color: #000;
	padding: 0;
	-moz-appearance: textfield;
	appearance: textfield;
}
.pr-page--us .pr-stepper input::-webkit-outer-spin-button,
.pr-page--us .pr-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pr-page--us .pr-stepper input.pr-stepper-input:focus { outline: none; }
.pr-page--us .pr-stepper-unit { font-size: 16px; font-weight: 400; color: #000; }

/* Botones del design system: radio 30, padding 12, texto Funnel 16 */
.pr-page--us .pr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 14px;
	border: 0;
	border-radius: 30px;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
}
.pr-page--us .pr-btn-dark { background: #000; color: #fff; }
.pr-page--us .pr-btn-coral { background: var(--pr-coral); color: #fff; }
.pr-page--us .pr-btn--glass {
	background: rgba(0, 0, 0, 0.2);
	color: #fff;
	-webkit-backdrop-filter: var(--pr-glass-frost);
	backdrop-filter: var(--pr-glass-frost);
}
.pr-page--us .pr-btn:hover { opacity: 0.88; }

/* Tarjeta "Ordering for a team?" (rect 543:1347, 575x132 negro r30) */
.pr-page--us .pr-team-card {
	position: relative;
	width: 575px;
	height: 132px;
	margin-top: 34px;
	background: #000;
	border-radius: 30px;
	color: #fff;
}
.pr-page--us .pr-team-copy { position: absolute; left: 37px; top: 29px; width: 320px; }
.pr-page--us .pr-team-copy h2 {
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 0.5px;
	color: #fff;
	margin: 0;
}
.pr-page--us .pr-team-copy p {
	font-size: 16px;
	font-weight: 300;
	line-height: 20px;
	letter-spacing: 0.5px;
	color: #fff;
	margin: 10px 0 0;
}
.pr-page--us .pr-team-controls {
	position: absolute;
	right: 37px;
	top: 59px;
	display: flex;
	align-items: center;
	gap: 9px;
}
.pr-page--us .pr-team-cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 41px;
	height: 40px;
	border-radius: 30px;
	background: var(--pr-red);
	color: #fff;
}

/* Galería + tarjeta-reseña del hero (y=880) */
.pr-page--us .pr-review-teaser {
	position: absolute;
	top: 842px;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 1440px;
	max-width: 100%;
	display: block;
	padding: 0;
}
.pr-page--us .pr-thumbs-carousel {
	position: absolute;
	left: 126px;
	top: 3px;
	display: flex;
	align-items: center;
	gap: 10px;
	width: auto;
}
.pr-page--us .pr-review-thumbs { display: flex; gap: 10px; overflow: visible; padding: 0; }
.pr-page--us .pr-review-thumbs img {
	width: 130px;
	height: 169px;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}
.pr-page--us .pr-thumbs-carousel .pr-arrow { width: 22px; height: 22px; color: #9a9a9a; }
.pr-page--us .pr-thumbs-carousel .pr-arrow:last-child { color: #1e1e1e; }

.pr-page--us .pr-teaser-card-wrap { position: absolute; left: 772px; top: 0; width: 575px; }
.pr-page--us .pr-review-card--teaser {
	width: 575px;
	min-height: 176px;
	background: #fff;
	border-radius: 30px;
	padding: 26px 30px 20px 38px;
	box-shadow: none;
	transition: opacity 0.22s ease;
}
.pr-page--us .pr-review-card--teaser header { display: flex; align-items: center; gap: 27px; margin: 0 0 18px; }
.pr-page--us .pr-review-card--teaser .pr-avatar {
	width: 31px;
	height: 31px;
	font-size: 14px;
}
.pr-page--us .pr-review-card--teaser .pr-review-text {
	font-size: 17px;
	font-weight: 300;
	line-height: 23px;
	letter-spacing: 0.2px;
	color: #1e1e1e;
	width: 511px;
	margin: 0;
}
.pr-page--us .pr-more {
	background: none;
	border: 0;
	padding: 0;
	color: var(--pr-red);
	font: inherit;
	cursor: pointer;
}
.pr-page--us .pr-teaser-card-wrap > .pr-arrow {
	position: absolute;
	right: -34px;
	top: 74px;
	width: 27px;
	height: 27px;
	color: var(--pr-red);
}
.pr-page--us .pr-avatar {
	background: var(--pr-coral);
	color: #fff;
	font-family: var(--pr-font-body);
	font-weight: 500;
}
.pr-page--us .pr-review-author {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: #1e1e1e;
	margin: 0;
}

/* --- Tabs de producto (texto plano, activo coral) ------------------- */
.pr-page--us .pr-tabs-section { padding: 88px 0 0; }
.pr-page--us .pr-tabs {
	position: relative;
	height: 35px;
	display: block;
	background: none;
	border: 0;
	padding: 0;
}
.pr-page--us .pr-tabs [role="tab"] {
	position: absolute;
	top: 0;
	background: none;
	border: 0;
	padding: 0;
	font-family: var(--pr-font-body);
	font-size: 24px;
	font-weight: 300;
	letter-spacing: 0.5px;
	line-height: 35px;
	color: #000;
	cursor: pointer;
}
.pr-page--us .pr-tabs [role="tab"]:nth-child(1) { left: 191px; }
.pr-page--us .pr-tabs [role="tab"]:nth-child(2) { left: 475px; }
.pr-page--us .pr-tabs [role="tab"]:nth-child(3) { left: 756px; }
.pr-page--us .pr-tabs [role="tab"]:nth-child(4) { left: 1059px; }
.pr-page--us .pr-tabs [role="tab"].is-active { color: var(--pr-coral); }
.pr-page--us .pr-tabs-viewport {
	margin: 60px 0 0 194px;
	width: 933px;
	min-height: 274px; /* alto del panel "How to use" en el diseño (1304→1578) */
	transition: opacity 0.2s ease;
}
.pr-page--us .pr-tabs-viewport.is-fading { opacity: 0; }
.pr-page--us .pr-tab-panel { padding: 0; max-width: none; }
.pr-page--us .pr-tab-panel p {
	font-size: 16px;
	font-weight: 300;
	line-height: 20px;
	letter-spacing: 0.5px;
}
.pr-page--us .pr-tab-panel p + p { margin-top: 20px; }
.pr-page--us .pr-tab-panel .pr-warning-title { margin-top: 20px; margin-bottom: 0; font-weight: 600; }
.pr-page--us .pr-tab-panel .pr-warning-title + p { margin-top: 0; }
.pr-page--us .pr-fda-note {
	display: block;
	width: 508px;
	height: auto;
	margin: 14px 0 0 -32px;
}
.pr-page--us .pr-cert-row img { width: 96px; margin-left: auto; }
.pr-page--us .pr-cert-row img[alt="European Commission"] { width: 150px; }

/* --- Claims (componente Figma 556:919, entre tabs y beneficios) ------ */
.pr-page--us .pr-claims {
	margin-top: 104px;
	height: 303px;
	background: #f9f9f9;
	padding: 0;
}
.pr-page--us .pr-claims-grid {
	display: block;
	position: relative;
	height: 100%;
	padding: 0;
}
.pr-page--us .pr-claim { position: absolute; top: 90px; text-align: center; }
.pr-page--us .pr-claim:nth-child(1) { left: 130px; width: 331px; }
.pr-page--us .pr-claim:nth-child(2) { left: 532px; width: 365px; }
.pr-page--us .pr-claim:nth-child(3) { left: 968px; width: 340px; }
.pr-page--us .pr-claim img {
	display: block;
	margin: 0 auto;
	width: auto;
	height: 44px;
}
.pr-page--us .pr-claim p {
	margin: 30px 0 0;
	font-size: 16px;
	font-weight: 300;
	line-height: 1; /* Figma: 100% */
	letter-spacing: 0;
	color: var(--pr-red);
}
.pr-page--us .pr-claim strong { font-weight: 600; }
.pr-page--us .pr-claim br { line-height: 1.55; } /* aire entre título y cuerpo */

/* --- Beneficios ------------------------------------------------------ */
.pr-page--us .pr-benefits { padding: 115px 0 0; }
.pr-page--us .pr-heading {
	font-family: var(--pr-font-body);
	font-size: 32px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.32px;
	color: #000;
	margin: 0;
}
.pr-page--us .pr-heading--coral { color: var(--pr-coral); }
/* mb 63 y no 41: la caja de texto del intro en Figma mide 82px pero el texto
   real son 3 líneas (60px); se compensa para que las tarjetas caigan en y=2268 */
.pr-page--us .pr-benefits .pr-section-intro { display: block; margin: 0 0 63px 135px; padding: 0; }
.pr-page--us .pr-section-intro > p {
	width: 540px;
	max-width: none;
	margin: 17px 0 0;
	font-size: 16px;
	font-weight: 300;
	line-height: 20px;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-page--us .pr-benefits-grid {
	display: grid;
	grid-template-columns: repeat(3, 388px);
	gap: 15px 16px;
	margin-left: 135px;
	width: 1196px;
}
.pr-page--us .pr-benefit-card {
	min-height: 214px;
	border-radius: 30px;
	background: #8f1724;
	color: #fff;
	padding: 44px 42px 20px;
	overflow: hidden;
}
.pr-page--us .pr-benefit-card h3 {
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: -0.16px;
	color: #fff;
	margin: 0; /* el cuerpo sigue en la línea siguiente, sin hueco (diseño) */
}
.pr-page--us .pr-benefit-card p {
	font-size: 16px;
	font-weight: 300;
	line-height: 20px;
	letter-spacing: -0.16px;
	color: #fff;
	margin: 0;
}
.pr-page--us .pr-benefit-card--photo { padding: 0; background: #f9f9f9; }
.pr-page--us .pr-benefit-card--photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Trusted by Elite Athletes -------------------------------------- */
.pr-page--us .pr-trusted {
	position: relative;
	margin-top: 136px;
	height: 646px;
	background: url(assets/img/us-trusted-bg.jpg) center / cover no-repeat;
	color: #fff;
	padding: 0;
}
.pr-page--us .pr-trusted-copy { position: absolute; left: 141px; top: 108px; width: 460px; }
.pr-page--us .pr-trusted-copy .pr-heading { color: #fff; }
.pr-page--us .pr-trusted-copy p {
	width: 449px;
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.16px;
	color: #fff;
}
.pr-page--us .pr-trusted-copy .pr-heading + p { margin-top: 14px; }
.pr-page--us .pr-trusted-copy p + p { margin-top: 19px; }
.pr-page--us .pr-video-link {
	background: none;
	border: 0;
	padding: 0;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.16px;
	color: var(--pr-coral);
	cursor: pointer;
}
.pr-page--us .pr-video-link:hover { text-decoration: underline; }
.pr-page--us .pr-trusted-stats {
	position: absolute;
	left: 141px;
	top: 397px;
	display: flex;
	gap: 21px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.pr-page--us .pr-trusted-stats li {
	width: 170px;
	height: 143px;
	border-radius: 20px;
	background: rgba(0, 0, 0, 0.1);
	-webkit-backdrop-filter: var(--pr-glass-frost);
	backdrop-filter: var(--pr-glass-frost);
	padding: 24px 0 0 25px;
}
.pr-page--us .pr-trusted-stats strong {
	display: block;
	font-family: var(--pr-font-body);
	font-size: 50px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.3px;
	color: #fff;
}
.pr-page--us .pr-trusted-stats span {
	display: block;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.3px;
	color: #fff;
}

/* --- Banda coral ----------------------------------------------------- */
.pr-page--us .pr-contact-band--coral {
	position: relative;
	height: 123px;
	background: var(--pr-coral);
	color: #fff;
	padding: 0;
	margin: 0;
}
.pr-page--us .pr-contact-band--coral .pr-band { display: block; height: 100%; }
.pr-page--us .pr-contact-band--coral .pr-band > div { position: absolute; left: 141px; top: 23px; }
.pr-page--us .pr-contact-band--coral h2 {
	font-family: var(--pr-font-body);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.24px;
	color: #fff;
	margin: 0;
}
.pr-page--us .pr-contact-band--coral .pr-band p {
	margin: 8px 0 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.16px;
	color: #fff;
	width: 384px;
}
.pr-page--us .pr-contact-band--coral .pr-btn { position: absolute; left: 1028px; top: 40px; }

/* --- Patrocinio Sports Doctors Network ------------------------------- */
.pr-page--us .pr-sponsor { padding: 143px 0 0; }
.pr-page--us .pr-sponsor-head { position: relative; margin-left: 141px; }
.pr-page--us .pr-sponsor-head .pr-heading { width: 640px; }
.pr-page--us .pr-sponsor-head img {
	position: absolute;
	left: 1023px;
	top: -1px;
	width: 117px;
	height: auto;
}
.pr-page--us .pr-sponsor-cols {
	display: grid;
	grid-template-columns: 536px 588px;
	gap: 66px;
	margin: 26px 0 0 141px;
}
/* Regular con tracking -0,16, como manda el frame: en Light y con +0,5 cada
   renglón se alargaba unos 45px y la 1.ª columna se iba a cinco líneas. Es el
   mismo arreglo que ya lleva la banda coral de EU. */
.pr-page--us .pr-sponsor-cols p {
	font-size: 16px;
	font-weight: 400;
	line-height: 19.2px;
	letter-spacing: -0.16px;
	color: #000;
	margin: 0;
}
.pr-page--us .pr-sponsor-cols p + p { margin-top: 19px; }

/* --- Lienzo gris: historias + reseñas -------------------------------- */
.pr-page--us .pr-canvas {
	/* 78 y no 114 (cota del diseño): la Funnel autoalojada mide ~5% más y la
	   sección SDN crece ~36px; se compensa aquí para mantener el ritmo */
	margin-top: 78px;
	background: #f9f9f9;
	border-radius: 45px 45px 0 0;
	padding-bottom: 99px;
}

.pr-page--us .pr-stories { padding: 87px 0 0; margin: 0; background: none; }
/* padding-left y no margin-left: este bloque es un .pr-container de 1440,
   con margen sumaba 1581 y provocaba scroll horizontal en toda la página */
/* `margin: 0 0 83px` (sin auto) anulaba el centrado que le daba .pr-container:
   en 1440 no se notaba, pero en pantallas mas anchas el bloque se quedaba
   pegado al borde real mientras el resto del contenido se centra en el
   lienzo de 1440, y el texto salia mucho mas a la izquierda que el bloque de
   arriba (24/08/2026). */
.pr-page--us .pr-stories .pr-section-intro { display: block; margin: 0 auto 83px; padding: 0 0 0 141px; }
.pr-page--us .pr-stories-intro { color: #1e1e1e; width: 536px; }
.pr-page--us .pr-stories-viewport { overflow: hidden; }
.pr-page--us .pr-stories-track {
	display: flex;
	flex-wrap: nowrap;
	gap: 19px;
	width: max-content;
	max-width: none;
	transform: translateX(-173px);
	padding: 0;
	margin: 0;
	overflow: visible;
}
.pr-page--us .pr-stories-track.is-animating { transition: transform 0.5s ease; }
.pr-page--us .pr-story {
	flex: 0 0 288px;
	width: 288px;
	height: 508px;
	border-radius: 30px;
	overflow: hidden;
	position: relative;
	transition: opacity 0.45s ease;
}
.pr-page--us .pr-story img {
	position: static;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.pr-page--us .pr-story.is-edge { opacity: 0.5; cursor: pointer; }
.pr-page--us .pr-story figcaption {
	position: absolute;
	left: 36px;
	bottom: 30px;
	font-family: var(--pr-font-body);
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 0.5px;
	color: #fff;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

/* Reseñas */
.pr-page--us .pr-reviews { padding: 147px 0 0; background: none; }
.pr-page--us .pr-reviews-grid { position: relative; display: block; }
.pr-page--us .pr-reviews-list { width: auto; }
.pr-page--us .pr-reviews-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 39px 141px;
	width: 619px;
}
.pr-page--us .pr-reviews-head .pr-heading { margin: 0; }
.pr-page--us .pr-reviews-head .pr-tag,
.pr-page--us .pr-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 14px;
	border: 0;
	border-radius: 30px;
	background: rgba(0, 0, 0, 0.4);
	-webkit-backdrop-filter: var(--pr-glass-frost);
	backdrop-filter: var(--pr-glass-frost);
	color: #fff;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 400;
	cursor: pointer;
}
.pr-page--us .pr-review-row { position: relative; margin-left: 141px; width: 619px; }
.pr-page--us .pr-review-row .pr-review-card {
	width: 619px;
	min-height: 333px;
	background: #fff;
	border-radius: 30px;
	padding: 32px 44px 32px 46px;
	box-shadow: none;
	transition: opacity 0.22s ease;
}
.pr-page--us .pr-review-row .pr-review-card header { display: flex; align-items: center; gap: 26px; margin: 0 0 34px; }
.pr-page--us .pr-review-row .pr-avatar { width: 40px; height: 40px; font-size: 16px; }
.pr-page--us .pr-review-row .pr-review-text {
	font-size: 18px;
	font-weight: 300;
	line-height: 23px;
	letter-spacing: 0.2px;
	color: #1e1e1e;
	width: 530px;
	margin: 0;
}
.pr-page--us .pr-review-row > .pr-arrow--prev { position: absolute; left: -41px; top: 140px; width: 27px; height: 27px; color: #b9b9b9; }
.pr-page--us .pr-review-row > .pr-arrow:not(.pr-arrow--prev) { position: absolute; right: -35px; top: 140px; width: 27px; height: 27px; color: #1e1e1e; }

.pr-page--us .pr-reviews-summary { position: absolute; left: 893px; top: 88px; width: 380px; padding: 0; }
.pr-page--us .pr-reviews-lead {
	font-family: var(--pr-font-body);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.24px;
	color: #000;
	margin: 0;
	width: 380px;
}
.pr-page--us .pr-rating-row { display: flex; align-items: baseline; gap: 14px; margin-top: 15px; }
.pr-page--us .pr-rating {
	font-family: var(--pr-font-brand);
	font-size: 64px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.64px;
	color: #000;
	margin: 0;
}
.pr-page--us .pr-rating-count {
	font-size: 13px;
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: 0.4px;
	color: #000;
	margin: 0;
	white-space: nowrap;
}
.pr-page--us .pr-rate-cta {
	margin: 16px 0 0;
	font-size: 16px;
	font-weight: 300;
	line-height: 20px;
	letter-spacing: 0.5px;
	color: #000;
	width: 330px;
}
.pr-page--us .pr-reviews-summary .pr-btn { margin-top: 15px; }

/* --- Demanding Lifestyles -------------------------------------------- */
.pr-page--us .pr-demanding {
	position: relative;
	height: 432px;
	margin: 0;
	padding: 0;
	background: url(assets/img/us-demanding-bg.jpg) center / cover no-repeat;
	color: #fff;
}
/* Se sube un poco y se acerca el titulo al cuerpo: quedaba todo muy abajo,
   con mucho hueco bajo el boton (22/08/2026 -> ajuste 24/08/2026). */
.pr-page--us .pr-demanding-copy { position: absolute; left: 141px; top: 65px; max-width: none; }
.pr-page--us .pr-demanding-copy .pr-heading { color: #fff; width: 491px; }
.pr-page--us .pr-demanding-copy p {
	width: 396px;
	margin: 0;
	font-size: 16px;
	font-weight: 400; /* Funnel Regular; solo el CTA va en SemiBold */
	line-height: 1.2;
	letter-spacing: -0.16px;
	color: #fff;
}
.pr-page--us .pr-demanding-copy .pr-heading + p { margin-top: 18px; }
/* solo el CTA va en SemiBold; el resto del bloque es Regular (Figma 550:1915) */
.pr-page--us .pr-demanding-cta { margin-top: 19px !important; font-weight: 600; }
.pr-page--us .pr-demanding-copy .pr-btn { margin-top: 21px; }

/* --- FAQ -------------------------------------------------------------- */
.pr-page--us .pr-faq { padding: 141px 0 195px; background: none; }
.pr-page--us .pr-faq h2 {
	font-family: var(--pr-font-body);
	font-size: 32px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.32px;
	color: #000;
	margin: 0 0 39px 141px;
	text-align: left;
}
.pr-page--us .pr-faq-item { margin: 0 0 8px 141px; width: 1111px; }
.pr-page--us .pr-faq-q {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 78px;
	padding: 24px 110px 24px 62px;
	background: #f9f9f9;
	border: 0;
	border-radius: 30px;
	font-family: var(--pr-font-body);
	font-size: 24px;
	font-weight: 300;
	letter-spacing: 0.5px;
	line-height: 1.2;
	color: #000;
	text-align: left;
	cursor: pointer;
}
.pr-page--us .pr-faq-item:not(.is-open) .pr-faq-q:hover { background: #efefef; color: #000; }
.pr-page--us .pr-faq-q::after {
	content: "";
	position: absolute;
	right: 70px;
	top: 50%;
	width: 11px;
	height: 11px;
	border: 0;
	border-right: 2.5px solid currentColor;
	border-bottom: 2.5px solid currentColor;
	background: none;
	transform: translateY(-50%) rotate(-45deg);
	transition: transform 0.3s ease;
}
.pr-page--us .pr-faq-item.is-open .pr-faq-q {
	background: var(--pr-red);
	color: #fff;
}
.pr-page--us .pr-faq-item.is-open .pr-faq-q::after { transform: translateY(-50%) rotate(45deg); }
.pr-page--us .pr-faq-answer-inner { padding: 28px 175px 24px 62px; }
.pr-page--us .pr-faq-answer-inner p {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.25;
	letter-spacing: 0.2px;
	color: #000;
	margin: 0;
}

/* --- Newsletter (foto de basket) -------------------------------------- */
.pr-page--us .pr-community {
	position: relative;
	height: 367px;
	margin: 0;
	padding: 0;
	/* Con color de reserva, como sus gemelas ES y EU: sin él, si la foto
	   tarda o falla la banda entera se veía BLANCA sobre el pie negro. */
	background: url(assets/img/us-community-bg.jpg) center / cover no-repeat #1e1e1e;
	color: #fff;
}
.pr-page--us .pr-community::before,
.pr-page--us .pr-community::after { display: none; }
.pr-page--us .pr-community h2 {
	position: absolute;
	left: 141px;
	top: 83px;
	font-family: var(--pr-font-body);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.24px;
	color: #fff;
	margin: 0;
	text-align: left;
	max-width: none;
}
.pr-page--us .pr-community p {
	position: absolute;
	left: 141px;
	top: 122px;
	width: 338px;
	font-size: 16px;
	font-weight: 300;
	line-height: 19px;
	letter-spacing: 0.5px;
	color: #fff;
	margin: 0;
	text-align: left;
	max-width: none;
}
.pr-page--us .pr-newsletter {
	position: absolute;
	left: 141px;
	top: 213px;
	display: flex;
	gap: 12px;
	margin: 0;
	max-width: none;
	background: none;
	padding: 0;
	border: 0;
}
.pr-page--us .pr-newsletter input {
	width: 249px;
	height: 40px;
	border: 0;
	border-radius: 30px;
	background: #fff;
	padding: 0 16px;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 300;
	color: #1e1e1e;
}
.pr-page--us .pr-newsletter input::placeholder { color: #1e1e1e; opacity: 1; }
.pr-page--us .pr-newsletter button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 14px;
	border: 0;
	border-radius: 30px;
	background: var(--pr-red);
	color: #fff;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 400;
	cursor: pointer;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* --- Footer (solo columna izquierda + barra social a la derecha) ------- */
.pr-page--us .pr-footer { background: #000; border-radius: 0; }
.pr-page--us .pr-footer > .pr-container { position: relative; height: 595px; padding: 0; }
.pr-page--us .pr-footer-logo { position: absolute; left: 134px; top: 98px; margin: 0; }
.pr-page--us .pr-footer-logo img { display: block; width: 300px; height: auto; }
.pr-page--us .pr-footer-col--work { position: absolute; left: 134px; top: 199px; width: 385px; }
.pr-page--us .pr-footer-col--work h3 {
	font-family: var(--pr-font-body);
	font-size: 32px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0.5px;
	color: #f5f5f5;
	margin: 0;
}
.pr-page--us .pr-footer-col--work p {
	font-size: 16px;
	font-weight: 300;
	line-height: 20px;
	letter-spacing: 0.5px;
	color: #f5f5f5;
	margin: 21px 0 0;
}
.pr-page--us .pr-footer-cta { margin-top: 34px !important; }
.pr-page--us .pr-footer-cta a {
	font-family: var(--pr-font-body);
	font-size: 24px;
	font-weight: 600;
	line-height: 27px;
	letter-spacing: 0.5px;
	color: #f5f5f5;
	text-decoration: none;
}
.pr-page--us .pr-footer-cta a:hover { text-decoration: underline; }
.pr-page--us .pr-footer-bar { background: #fff; border-radius: 0; }
.pr-page--us .pr-footer-bar .pr-container {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 28px;
	height: 55px;
	padding: 0 98px 0 0;
}
.pr-page--us .pr-footer-bar a {
	font-family: var(--pr-font-body);
	font-size: 20px;
	font-weight: 300;
	letter-spacing: 0.5px;
	color: #000;
	text-decoration: none;
}
.pr-page--us .pr-footer-bar a:hover { text-decoration: underline; }

/* --- Pop-up de vídeo --------------------------------------------------- */
.pr-page--us .pr-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pr-page--us .pr-modal[hidden] { display: none; }
.pr-page--us .pr-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	-webkit-backdrop-filter: var(--pr-glass-frost);
	backdrop-filter: var(--pr-glass-frost);
}
.pr-page--us .pr-modal-dialog {
	position: relative;
	width: min(960px, 84vw);
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 20px;
}
.pr-page--us .pr-modal-media {
	position: absolute;
	inset: 0;
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pr-page--us .pr-modal-media iframe,
.pr-page--us .pr-modal-media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.pr-page--us .pr-modal-placeholder {
	color: rgba(255, 255, 255, 0.65);
	font-size: 18px;
	font-weight: 300;
	letter-spacing: 0.5px;
	margin: 0;
}
.pr-page--us .pr-modal-close {
	position: absolute;
	top: -44px;
	right: 0;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	/* GeneratePress le pone `padding: 10px 20px` a todo <button>: con
	   `box-sizing: border-box` los 40px de relleno lateral no caben en los 34
	   declarados y el ancho USADO sube a 40, asi que el circulo salia ovalado
	   (40x34) y la aspa caia 4px por debajo del centro, porque la linea de
	   22px arrancaba tras el relleno de 10 (medido 31/08/2026).
	   Sin relleno y centrando con flex: redonda y la X en el medio. */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	box-sizing: border-box;
}

/* =====================================================================
   FICHA US — 2.ª ronda de feedback (05/08/2026)
   Logo sin fondo, escala a viewports <1440, flip en beneficios, glass
   reforzado, modal con transición, vídeos en historias, tabs Cert/Ship
   según grupos Figma 531:3038/3039, focus sin cuadrados.
   ===================================================================== */

/* Logo del header: asset blanco (con alfa) pintado en negro */
.pr-page--us:not(.pr-page--home-es) .pr-logo img { filter: brightness(0); }
.pr-page--us .pr-footer-logo img { filter: none; }

/* La página se escala a viewports menores de 1440 vía body{zoom} (JS).
   Se mantiene min-width para que el layout interno no colapse. */

/* --- Focus: fuera el cuadrado de GeneratePress en botones ------------ */
.pr-page--us .pr-arrow:focus,
.pr-page--us .pr-arrow:active,
.pr-page--us .pr-more:focus,
.pr-page--us .pr-tag:focus,
.pr-page--us .pr-stepper-btn:focus,
.pr-page--us .pr-tabs [role="tab"]:focus,
.pr-page--us .pr-modal-close:focus,
.pr-page--us .pr-video-link:focus,
.pr-page--us .pr-team-cart:focus {
	outline: none;
	box-shadow: none;
}
.pr-page--us .pr-arrow:focus,
.pr-page--us .pr-arrow:active {
	background: transparent;
	color: inherit;
}
.pr-page--us .pr-arrow--red:focus,
.pr-page--us .pr-arrow--red:active { color: var(--pr-red); }
.pr-page--us .pr-review-row > .pr-arrow--prev:focus { color: #b9b9b9; }
.pr-page--us .pr-more:focus { background: none; color: var(--pr-red); }
.pr-page--us .pr-stepper-btn:focus { background: none; color: #000; }
.pr-page--us .pr-tabs [role="tab"]:focus { background: none; color: #000; }
.pr-page--us .pr-tabs [role="tab"].is-active:focus { color: var(--pr-coral); }
.pr-page--us .pr-faq-item:not(.is-open) .pr-faq-q:focus { background: #f9f9f9; color: #000; outline: none; }
.pr-page--us .pr-faq-item.is-open .pr-faq-q:focus { background: var(--pr-red); color: #fff; outline: none; }

/* --- FAQ: la abierta SIEMPRE roja B71F2F, también con hover. El 14/08 la
       pasé a amarillo por leer mal un mensaje: el amarillo es de Active y
       solo de Active (corregido el 17/08/2026). ---------------------------- */
.pr-page--us .pr-faq-item.is-open .pr-faq-q,
.pr-page--us .pr-faq-item.is-open .pr-faq-q:hover {
	background: var(--pr-red);
	color: #fff;
}
/* Respuesta a todo el ancho del diseño (826px), sin max-width heredado */
.pr-page--us .pr-faq-answer { max-width: none; }
.pr-page--us .pr-faq-answer-inner { padding: 28px 62px 24px; max-width: none; }
.pr-page--us .pr-faq-answer-inner p {
	width: 826px;
	max-width: 826px;
}

/* --- Avatar de reseña: círculo #F5F5F5 con la letra en rojo ---------- */
.pr-page--us .pr-avatar {
	background: #f5f5f5;
	color: var(--pr-red);
	font-family: 'Roboto', var(--pr-font-body), sans-serif;
	font-weight: 500;
	letter-spacing: 0.1px;
}

/* --- Beneficios: flip 3D al hover (reverso oscuro, lorem TODO) ------- */
.pr-page--us .pr-benefit-card.pr-flip {
	padding: 0;
	background: none;
	perspective: 1200px;
	overflow: visible;
	height: 214px;
	min-height: 214px;
}
.pr-page--us .pr-flip-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.6s cubic-bezier(0.35, 0.1, 0.2, 1);
}
.pr-page--us .pr-flip:hover .pr-flip-inner,
.pr-page--us .pr-flip:focus-within .pr-flip-inner { transform: rotateY(180deg); }
.pr-page--us .pr-flip-front,
.pr-page--us .pr-flip-back {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	border-radius: 30px;
	padding: 44px 42px 20px;
	overflow: hidden;
}
.pr-page--us .pr-flip-front { background: #8f1724; }
.pr-page--us .pr-flip-back {
	background: #262626;
	transform: rotateY(180deg);
}
.pr-page--us .pr-flip-back p {
	font-size: 16px;
	font-weight: 300;
	line-height: 20px;
	letter-spacing: -0.16px;
	color: #fff;
	margin: 0;
}
@media (prefers-reduced-motion: reduce) {
	.pr-page--us .pr-flip-inner { transition: none !important; }
}

/* --- Trusted: cajas de porcentajes con glass más marcado ------------- */
.pr-page--us .pr-trusted-stats li {
	background: rgba(0, 0, 0, 0.1);
	-webkit-backdrop-filter: blur(10px) saturate(1.2);
	backdrop-filter: blur(10px) saturate(1.2);
}

/* --- Historias: vídeos con overlay cuando no se reproducen ----------- */
.pr-page--us .pr-story video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.pr-page--us .pr-story::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 30px;
	opacity: 1;
	transition: opacity 0.35s ease;
	pointer-events: none;
	z-index: 1;
}
.pr-page--us .pr-story.is-playing::after { opacity: 0; }
.pr-page--us .pr-story figcaption { z-index: 2; }

/* --- Tabs: Certifications y Shipping según Figma 531:3038/3039 ------- */
.pr-page--us .pr-tabs-viewport { width: 1120px; }
.pr-page--us .pr-tab-panel > p { max-width: 933px; }
.pr-page--us .pr-tab-panel h3 {
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 0.5px;
	color: #000;
	margin: 0 0 20px;
}
/* 1120 y no 1020: se quedaba 100px corto del ancho real del panel
   (`.pr-tabs-viewport`) y no llegaba hasta el final del bloque (24/08/2026). */
.pr-page--us .pr-cert-row {
	display: flex;
	align-items: center;
	width: 1120px;
	max-width: none;
	padding: 0;
	border: 0;
}
.pr-page--us .pr-cert-row > div { width: 741px; }
.pr-page--us .pr-cert-row + .pr-cert-row { margin-top: 75px; }
.pr-page--us .pr-cert-row img.pr-cert-logo { margin-left: auto; height: auto; }
.pr-page--us .pr-cert-logo--nsf  { width: 96px; }
.pr-page--us .pr-cert-logo--seal { width: 162px; }
.pr-page--us .pr-cert-logo--ec   { width: 193px; }
.pr-page--us .pr-ship-cols {
	display: grid;
	grid-template-columns: 565px 472px;
	gap: 80px;
	max-width: none;
}
.pr-page--us .pr-ship-cols h3 { margin: 40px 0 20px; }
.pr-page--us .pr-ship-cols div > h3:first-child { margin-top: 0; }
.pr-page--us .pr-ship-cols p {
	font-size: 16px;
	font-weight: 300;
	line-height: 20px;
	letter-spacing: 0.5px;
}
.pr-page--us .pr-ship-cols p + p { margin-top: 20px; }
.pr-page--us .pr-ship-cols ul {
	list-style: disc;
	margin: 0 0 0 24px;
	padding: 0;
}
.pr-page--us .pr-ship-cols li {
	font-size: 16px;
	font-weight: 300;
	line-height: 20px;
	letter-spacing: 0.5px;
	margin: 0;
}
.pr-page--us .pr-ship-cols a { color: inherit; text-decoration: underline; }

/* --- Pop-up de vídeo: transición suave + blur de la página ----------- */
.pr-page--us .pr-modal {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.pr-page--us .pr-modal.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.35s ease;
}
.pr-page--us .pr-modal-backdrop {
	background: rgba(0, 0, 0, 0.55);
	-webkit-backdrop-filter: blur(10px) saturate(1.1);
	backdrop-filter: blur(10px) saturate(1.1);
}
.pr-page--us .pr-modal-dialog {
	transform: scale(0.94) translateY(12px);
	transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.pr-page--us .pr-modal.is-open .pr-modal-dialog { transform: none; }
@media (prefers-reduced-motion: reduce) {
	.pr-page--us .pr-modal,
	.pr-page--us .pr-modal-dialog { transition: none !important; }
}

/* =====================================================================
   FICHA US — 3.ª ronda (05/08/2026)
   ===================================================================== */

/* Sin desbordes horizontales aunque el zoom deje décimas de px */
.pr-page--us { overflow-x: clip; }

/* Cajas de porcentajes: efecto Vidrio de Figma (fill negro 10%, escarcha 4,
   luz -45 grados 80%) aproximado con blur + luz diagonal + borde luminoso */
.pr-page--us .pr-trusted-stats li {
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.08) 32%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.1) 100%),
		rgba(0, 0, 0, 0.1);
	-webkit-backdrop-filter: var(--pr-glass-frost);
	backdrop-filter: var(--pr-glass-frost);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.28),
		inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

/* Focus de GeneratePress: fuera el recuadro oscuro en las flechas,
   con !important porque el tema padre lo pinta con sus propias reglas */
.pr-page--us .pr-arrow:focus,
.pr-page--us .pr-arrow:focus-visible,
.pr-page--us .pr-arrow:active,
.pr-page--us .pr-more:focus,
.pr-page--us .pr-more:focus-visible,
.pr-page--us .pr-stepper-btn:focus,
.pr-page--us .pr-stepper-btn:focus-visible {
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
	border: 0 !important;
}
.pr-page--us .pr-arrow:focus,
.pr-page--us .pr-arrow:focus-visible,
.pr-page--us .pr-arrow:active { color: inherit !important; }
.pr-page--us .pr-arrow--red:focus,
.pr-page--us .pr-arrow--red:focus-visible,
.pr-page--us .pr-arrow--red:active { color: var(--pr-red) !important; }
.pr-page--us .pr-review-row > .pr-arrow--prev:focus,
.pr-page--us .pr-review-row > .pr-arrow--prev:focus-visible { color: #b9b9b9 !important; }
.pr-page--us .pr-thumbs-carousel .pr-arrow--prev:focus,
.pr-page--us .pr-thumbs-carousel .pr-arrow--prev:focus-visible { color: #9a9a9a !important; }

/* ==========================================================================
   Home ES (template page-home-es.php — frame Figma 4:10484 "Home - ES (Laptop)",
   archivo "ProResolve Website | Diseños finales", pestaña Exports).
   Maqueta fija a 1440px (solo laptop): cotas 1:1 del frame leídas por nodo y
   verificadas sobre el render; en viewports menores escala con body{zoom}
   (módulo compartido en proresolve.js). Todo bajo .pr-page--home-es.
   Glass = efecto "Vidrio" de Figma (luz -45° 80%, refracción 80, profundidad 20,
   dispersión 50, escarcha 4): degradado 135° + blur(4px) saturate.
   Sombra paralela de tarjetas: X0 Y2 blur20 #000 9% (captura del panel).
   ========================================================================== */

.pr-page--home-es { min-width: 1440px; }
.pr-page--home-es .pr-main,
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-footer,
.pr-page--home-es .pr-header { letter-spacing: 0; }
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-canvas {
	position: relative;
	width: 1440px;
	height: 100%;
	margin: 0 auto;
}
/* ® inline a 14px (así está en el frame: mismo baseline, cuerpo menor) */

/* Botones píldora (componente Button: 40px, radio 30, texto 16 + chevron 16) */
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-btn,
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) a.pr-esh-btn,
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) a.pr-esh-btn:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 12px;
	border: 0;
	border-radius: 30px;
	font-family: var(--pr-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0;
	color: #fff;
	cursor: pointer;
	transition: opacity 0.2s ease;
}
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-btn:hover { opacity: 0.85; }
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-btn svg { display: block; flex-shrink: 0; }
/* Vidrio sobre fondo claro/foto: negro 20% + luz -45° */
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-btn--glass {
	background:
		var(--pr-glass-light),
		rgba(0, 0, 0, 0.2);
	-webkit-backdrop-filter: var(--pr-glass-frost);
	backdrop-filter: var(--pr-glass-frost);
	box-shadow: var(--pr-glass-edge), 0 2px 8px rgba(0, 0, 0, 0.10);
}
/* Variante del formulario (fill #1e1e1e 20% del componente 4:10528) */
.pr-page--home-es .pr-esh-btn--glass-dark {
	background:
		var(--pr-glass-light),
		rgba(30, 30, 30, 0.2);
	-webkit-backdrop-filter: var(--pr-glass-frost);
	backdrop-filter: var(--pr-glass-frost);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 2px 8px rgba(0, 0, 0, 0.18);
}
/* "Más información" sobre claro: negro sólido con brillo de vidrio */
.pr-page--home-es .pr-esh-btn--solid {
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 55%),
		#000;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
/* Sobre la banda negra la píldora es invisible: queda como enlace de texto */
.pr-page--home-es .pr-esh-btn--bare { background: none; box-shadow: none; }

/* ------------------------------ Header (76px, glass) ------------------------------ */

/* Barra glass del frame: fill negro 10% + luz -45° (velo apenas más oscuro que
   la foto, con brillo arriba y filo claro abajo). Texto negro sobre secciones
   claras; blanco (is-inverted, JS) sobre el hero, la banda SSPAAIN y el footer.
   Siempre FIXED, para que quede pegado arriba igual que en la home. En las
   páginas sin hero el contenido compensa con padding-top (ver más abajo);
   `sticky` no valía: dentro de body{zoom} se despegaba al hacer scroll. */
.pr-page--home-es .pr-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	/* por encima del hero: si no, el desplegable de cuenta queda bajo su velo */
	z-index: 90;
	display: block;
	height: 76px;
	padding: 0;
	background:
		var(--pr-glass-light),
		rgba(0, 0, 0, 0.06);
	-webkit-backdrop-filter: var(--pr-glass-frost);
	backdrop-filter: var(--pr-glass-frost);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.18);
}
/* Capa de negro extra mientras la barra flota sobre el hero: la misma que ya
   tienen US y EU (`.pr-page--home .pr-header::after`). Sin ella, el 6% fijo de
   arriba no basta contra el vídeo y la barra se lava. */
.pr-page--home-es .pr-header::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.22) 100%);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}
.pr-page--home-es .pr-header.is-over-hero::after { opacity: 1; }
/* Sin hero (carrito, checkout, cuenta, noticias, Active, Proximamente) no hay
   nada debajo del cristal, asi que el 6% de negro con desenfoque se lee como
   una banda gris sobre el fondo claro de la pagina. En US y EU la barra de
   estas mismas paginas va en el flujo y limpia, y la estructura es la misma
   (body > header + main + footer), asi que se iguala: sticky, sin cristal y
   sin el relleno de compensacion, que al estar ya en el flujo sobra
   (22/08/2026). */
/* Active es la excepcion: no lleva `pr-has-hero` pero SI tiene hero. Su
   seccion se sube con `margin-top: -76px` contra el relleno de la barra, asi
   que ahi hay que dejar la barra flotando con su cristal y devolverle el
   relleno; en movil manda la regla de mas abajo, que lo pone a 0. */
.pr-page--apr .pr-main { padding-top: 76px; }
/* Esta regla dejaba la barra COMPLETAMENTE transparente en todas las paginas
   interiores del mercado ES -carrito, checkout, mi cuenta, noticias y
   articulos, contacto, legales, centro de ayuda-: sin fondo, sin cristal y sin
   filo. Al ser pegajosa, el contenido pasaba por detras y se leia a traves de
   ella; en los articulos el texto se cruzaba con el logotipo y el menu.
   Corregido el 26/08/2026 con la regla clara: **el menu lleva cristal
   SIEMPRE**. Aqui solo se queda lo de la colocacion, que es lo unico que esta
   regla necesitaba de verdad; el fondo, la escarcha y el filo los pone
   `.pr-header` y ya no se los quita nadie.
   La unica transparencia que sigue viva es la de `.is-over-hero`, y esa es
   deliberada: sobre el video del hero la barra tiene que desaparecer. */
.pr-page--home-es:not(.pr-has-hero):not(.pr-page--apr) .pr-header {
	position: sticky;
	left: auto;
	right: auto;
}

.pr-page--home-es .pr-logo { position: absolute; left: 119px; top: 26px; }
.pr-page--home-es .pr-logo img {
	height: 29px;
	width: auto;
	display: block;
	filter: brightness(0);
	transition: filter 0.3s ease;
}
.pr-page--home-es .pr-header.is-inverted .pr-logo img { filter: none; }
/* Logotipo de TEXTO (menú 79:5990, 07/08/2026): Sansation Bold 32, negro
   sobre secciones claras y blanco cuando el header se invierte. */
.pr-page .pr-logo--text,
.pr-page .pr-logo--text:visited {
	font-family: var(--pr-font-brand);
	font-weight: 700;
	font-size: 32px;
	line-height: 36px;
	letter-spacing: 0;
	color: #000;
	text-decoration: none;
	transition: color 0.3s ease;
	white-space: nowrap;
}
.pr-page .pr-header.is-inverted .pr-logo--text { color: #fff; }
.pr-page--home-es .pr-logo--text { top: 20px; }
/* Nav sin cápsula: texto suelto Funnel 20 tracking 0.5 */
.pr-page--home-es .pr-nav {
	position: absolute;
	left: 494px;
	top: 0;
	height: 76px;
	display: flex;
	align-items: center;
	gap: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.pr-page--home-es .pr-nav a {
	position: relative;
	padding: 9px 0;
	/* Regular, como en el frame 79:5031 y como US y EU: en light los textos
	   salían más estrechos y todo el menú se corría a la izquierda. */
	font-weight: 400;
	font-size: 20px;
	line-height: 1;
	letter-spacing: 0.5px;
	color: #000;
}
/* Separaciones del menú 79:5031. Los cuatro textos caen en 444 / 671 / 898 /
   1050, o sea centros en 536 / 763 / 952,5 / 1089; reajustadas al pasar el nav
   de light a regular (10/08/2026), que ensanchó los ítems. */
.pr-page--home-es .pr-nav { left: 449px; }
.pr-page--home-es .pr-nav a + a { margin-left: 56px; }
.pr-page--home-es .pr-nav a:nth-child(3) { margin-left: 52px; }
.pr-page--home-es .pr-nav a:nth-child(4) { margin-left: 45px; }

/* Hover del menú (07/08/2026, común a los 3 sites): el ítem cambia de COLOR
   según su producto — Sports #d94b5a, Active #f99b25 y el resto #e8e8e8 —
   salvo que sea la página en la que ya estás (.is-active). */
.pr-page .pr-nav a { transition: color 0.3s ease; }
.pr-page .pr-nav a[data-nav="sports"] { --pr-nav-hover: #d94b5a; }
.pr-page .pr-nav a[data-nav="active"] { --pr-nav-hover: #f99b25; }
.pr-page .pr-nav a:not(.is-active):hover,
.pr-page .pr-nav a:not(.is-active):focus-visible { color: var(--pr-nav-hover, #e8e8e8); }
/* Con el menú en negro (barra clara, sin invertir) el #e8e8e8 hace
   desaparecer el ítem: pasa a gris (12/08/2026, todos los sites). Los ítems
   de producto conservan su color vía --pr-nav-hover. */
.pr-page .pr-header:not(.is-inverted) .pr-nav a:not(.is-active):hover,
.pr-page .pr-header:not(.is-inverted) .pr-nav a:not(.is-active):focus-visible { color: var(--pr-nav-hover, rgba(0, 0, 0, 0.55)); }

@media (prefers-reduced-motion: reduce) {
	.pr-page--home-es .pr-nav a { transition: none; }
}
.pr-page--home-es .pr-header-tools {
	position: absolute;
	right: 121px;
	top: 0;
	height: 76px;
	display: flex;
	align-items: center;
	/* 18 y no 12, como en US y EU: en el frame 79:5031 los tres iconos van de
	   40 en 40 (1216 / 1256 / 1296) y con 12 quedaban apelotonados. */
	gap: 18px;
}
.pr-page--home-es .pr-account { display: inline-flex; }
/* El color de los tres iconos lo lleva el CONTENEDOR y los hijos lo heredan en
   todos sus estados. Antes el `color: inherit` del botón de idioma se resolvía
   contra el body (negro) y al pasar el ratón el globo se volvía negro sobre el
   hero; anclándolo aquí sigue la inversión blanco/negro como los otros dos. */
.pr-page--home-es .pr-header .pr-header-tools { color: #000; }
.pr-page--home-es .pr-header.is-inverted .pr-header-tools { color: #fff; }
.pr-page--home-es .pr-header .pr-lang,
.pr-page--home-es .pr-header .pr-lang:hover,
.pr-page--home-es .pr-header .pr-lang:focus,
.pr-page--home-es .pr-header .pr-lang:active,
.pr-page--home-es .pr-header .pr-account,
.pr-page--home-es .pr-header .pr-account:hover,
.pr-page--home-es .pr-header .pr-cart,
.pr-page--home-es .pr-header .pr-cart:hover { color: inherit; }
/* Iconos de Figma (4:10612/13/14) incrustados en línea: heredan currentColor */
.pr-page--home-es .pr-header-tools svg { display: block; }
.pr-page--home-es .pr-lang svg,
.pr-page--home-es .pr-account svg { width: 20.83px; height: 20.83px; }
.pr-page--home-es .pr-cart svg { width: 23.58px; height: 22.63px; }
/* GeneratePress pinta button:hover/:focus con su propio fondo y color: sin
   anularlo, el icono de idioma se rodea de una caja gris al pasar el ratón.
   Va para los TRES sites (07/08/2026), no solo ES. */
.pr-page .pr-lang,
.pr-page .pr-lang:hover,
.pr-page .pr-lang:focus,
.pr-page .pr-lang:active,
.pr-page .pr-lang:focus-within {
	background: none;
	background-color: transparent;
	border: 0;
	padding: 0;
	box-shadow: none;
	outline: none;
	text-decoration: none;
}
/* Sin `color` en el bloque de arriba a propósito: ponerlo aquí le ganaba a
   `.pr-header.is-inverted .pr-lang` y el icono, blanco sobre el hero, se
   volvía negro al pasar el ratón. El color lo decide el estado del header. */
.pr-page .pr-lang:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}
/* Misma sombrita que el menú, en gris, para los tres iconos. Vale para los
   tres sites (07/08/2026): en US y EU no se aplicaba. */
.pr-page .pr-header-tools > a,
.pr-page .pr-header-tools > button,
.pr-page .pr-header-tools .pr-lang,
.pr-page--home-es .pr-header-tools > * {
	transition: filter 0.28s ease;
	cursor: pointer;
}
/* El icono de idioma va dentro de `.pr-lang-wrap` desde que tiene desplegable,
   así que ya no es hijo directo del grupo: hay que nombrarlo aparte o se queda
   sin la sombrita. */
.pr-page .pr-header-tools > a:hover,
.pr-page .pr-header-tools > button:hover,
.pr-page .pr-header-tools > a:focus-visible,
.pr-page .pr-header-tools > button:focus-visible,
.pr-page .pr-header-tools .pr-lang:hover,
.pr-page .pr-header-tools .pr-lang:focus-visible,
.pr-page--home-es .pr-header-tools > a:hover,
.pr-page--home-es .pr-header-tools > button:hover,
.pr-page--home-es .pr-header-tools > a:focus-visible,
.pr-page--home-es .pr-header-tools > button:focus-visible { filter: drop-shadow(1px 2px 0 #e8e8e8); }

/* ------------------------------ Hero (foto) ------------------------------ */

/* Mismo alto que el hero de la home US —su clamp(430px, 51.8vw, 746px) da 746
   en laptop de 1440— más los 10px pedidos para que llene la pantalla. Va en px
   fijos y no en vw porque esta maqueta se escala entera con body{zoom} y las
   unidades de viewport no se ven afectadas por el zoom: se descuadraría. */
.pr-page--home-es .pr-home-hero {
	position: relative;
	height: 756px;
	overflow: hidden;
	background: #1e1e1e;
}
.pr-page--home-es .pr-home-hero::after { content: none; }
.pr-page--home-es .pr-esh-hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Mismo velo que US y EU (10/08/2026): un solo degradado hacia abajo-izquierda
   para que se lea el titular. Antes llevaba además dos degradados más y una
   capa plana de negro al 20% sobre TODA la imagen, y el hero se veía apagado
   y sin contraste al lado de los otros dos sites. */
.pr-page--home-es .pr-esh-hero-veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(200deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.38) 100%);
	pointer-events: none;
}
/* Los fotogramas claros del vídeo dejan el blanco sin contraste: una sombra
   difusa asegura la legibilidad sin ensuciar más la imagen. En el subtítulo va
   más suave: al ser Light, una sombra marcada lo engorda visualmente. */
.pr-page--home-es .pr-home-hero h1 { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5); }
.pr-page--home-es .pr-esh-hero-sub { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.38); }
.pr-page--home-es .pr-home-hero .pr-esh-canvas { z-index: 1; }
/* +10px respecto al frame: el hero creció 10px y el bloque de texto va anclado
   al borde inferior, así que baja con él y conserva el aire de abajo */
.pr-page--home-es .pr-home-hero h1 {
	position: absolute;
	left: 119px;
	top: 468px;
	width: 600px;
	font-family: var(--pr-font-brand);
	font-weight: 400;
	font-size: 40px;
	line-height: 45.5px;
	letter-spacing: 0;
	color: #fff;
}
/* Un poco más de aire entre titular, subtítulo y botón que en el frame
   (554 → 570 y 628 → 656): con el vídeo detrás el bloque se leía apelmazado */
.pr-page--home-es .pr-esh-hero-sub {
	position: absolute;
	left: 119px;
	top: 580px;
	width: 518px;
	font-weight: 300;
	font-size: 24px;
	line-height: 27px;
	color: #fff;
}
.pr-page--home-es .pr-esh-hero-cta { position: absolute; left: 119px; top: 666px; }

/* -------------------- ProResolving What Matters (tarjetas) -------------------- */

.pr-page--home-es .pr-esh-intro {
	position: relative;
	height: 746px;      /* frame 52:2733 */
	overflow: hidden;   /* recorta la lluvia de cápsulas */
	background: var(--pr-bg);
}
/* ---- Lluvia de cápsulas (decorativa; el JS crea capas y cápsulas) ----
   El desenfoque va sobre la capa de cápsulas, no como backdrop-filter del
   fondo: un cristal a pantalla completa sobre elementos en movimiento obliga
   a recomponer el blur en cada fotograma y se come los fps. */
.pr-page--home-es .pr-esh-rain {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}
.pr-page--home-es .pr-esh-rain-layer {
	position: absolute;
	inset: 0;
}
/* Fondo: pequeñas, muy difusas. Frente: mayores y casi definidas. */
/* Cápsulas nítidas (06/08: se retiró el desenfoque y la lámina de vidrio).
   La profundidad la dan el tamaño y la velocidad de cada capa, más un punto
   de opacidad en las del fondo. Sin filtros, el coste por fotograma es solo
   la composición de transforms. */
.pr-page--home-es .pr-esh-rain-layer[data-layer="0"] { opacity: 0.85; }
.pr-page--home-es .pr-esh-rain-layer[data-layer="1"] { opacity: 0.95; }
.pr-page--home-es .pr-esh-rain-layer[data-layer="2"] { opacity: 1; }
.pr-page--home-es .pr-esh-cap {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	will-change: transform;
}
/* La lámina de vidrio se retiró el 06/08 a petición: el bloque va nítido.
   Se conserva el nodo en el template por si se quiere recuperar el velo. */
.pr-page--home-es .pr-esh-rain-glass { display: none; }
/* El contenido va por encima de la lluvia y del cristal */
.pr-page--home-es .pr-esh-intro > .pr-esh-canvas {
	position: relative;
	z-index: 2;
}
/* Texto a la izquierda; el titular se parte en dos líneas por el ancho de 271 */
.pr-page--home-es .pr-esh-intro h2 {
	position: absolute;
	left: 158px;
	top: 455px;
	width: 271px;
	font-weight: 500;
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: 0;
}
.pr-page--home-es .pr-esh-intro-lead {
	position: absolute;
	left: 158px;
	top: 550px;
	width: 293px;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.2;
}
/* Tarjeta de vidrio (rects 50:9660 / 50:9689 — 393×551 r30). El efecto Vidrio
   de Figma (escarcha 4 → blur 4px, luz -45° al 80% → degradado 135°,
   refracción 80 + dispersión 50 → saturate, profundidad 20 → filo y sombra).
   Aquí el backdrop-filter SÍ compensa: es lo que difumina las cápsulas que
   caen por detrás, y son dos cajas, no la pantalla entera. */
.pr-page--home-es .pr-esh-card {
	position: absolute;
	top: 111px;
	display: block;
	width: 393px;
	height: 551px;
	border-radius: 30px;
	/* El vidrio se ha ido al anverso: la tarjeta es ahora solo el escenario
	   del giro (10/08/2026). */
	perspective: 1400px;
}
.pr-page--home-es .pr-esh-card .pr-flip-inner { z-index: 0; }
.pr-page--home-es .pr-esh-card:hover .pr-flip-inner,
.pr-page--home-es .pr-esh-card:focus-within .pr-flip-inner { transform: rotateY(180deg); }
.pr-page--home-es .pr-esh-card .pr-flip-front,
.pr-page--home-es .pr-esh-card .pr-flip-back {
	padding: 0;
	border-radius: 30px;
}
.pr-page--home-es .pr-esh-card .pr-flip-front {
	background:
		var(--pr-glass-light),
		rgba(0, 0, 0, 0.06);
	-webkit-backdrop-filter: var(--pr-glass-frost);
	backdrop-filter: var(--pr-glass-frost);
	box-shadow:
		var(--pr-glass-edge),
		0 2px 20px rgba(0, 0, 0, 0.06);
}
/* Reverso 121:7788 (Sports) y 121:7789 (Active): la foto va a sangre y la
   recorta el propio radio de la tarjeta, así que no queda marco en las
   esquinas. La frase, en blanco, sobre la parte baja.
   Las fotos son el export a 2x de los rectángulos 50:9745 y 50:9746: el fill
   de Figma lleva su propio recorte, que no viene en la imagen original, así
   que recortarla por nuestra cuenta daba un plano mucho más abierto. */
.pr-page--home-es .pr-esh-card .pr-flip-back {
	background: #1e1e1e;
	overflow: hidden;
}
.pr-page--home-es .pr-esh-card-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 30px;
	object-fit: cover;
}
/* La frase pasa arriba (frames 154:5084 y 154:5085); abajo se queda el nombre */
.pr-page--home-es .pr-esh-card .pr-esh-card-claim {
	position: absolute;
	margin: 0;
	font-family: var(--pr-font-body);
	font-weight: 400;
	font-size: 24px;
	line-height: 1.1;
	letter-spacing: 0;
	color: #fff;
}
.pr-page--home-es .pr-esh-card--sports .pr-esh-card-claim { left: 42px; top: 46px; width: 266px; }
.pr-page--home-es .pr-esh-card--active .pr-esh-card-claim { left: 46px; top: 47px; width: 232px; }
/* El nombre cuelga de la tarjeta, no del anverso: no gira con ella */
.pr-page--home-es .pr-esh-card .pr-esh-card-name { z-index: 2; }
.pr-page--home-es .pr-esh-card--sports { left: 522px; }
.pr-page--home-es .pr-esh-card--active { left: 925px; }
.pr-page--home-es .pr-esh-card-shot {
	position: absolute;
	left: 100px;
	top: 47px;
	width: 194px;
	height: 382px;
	border-radius: 30px;
}
.pr-page--home-es .pr-esh-card-name {
	position: absolute;
	top: 489px;
	width: 225px;
	font-weight: 500;
	font-size: 24px;
	line-height: 0.9;
}
/* El nombre arranca en negro y toma el color de su producto al pasar el
   ratón, igual que hace el botón de añadir al carrito (petición 07/08/2026). */
.pr-page--home-es .pr-esh-card-name { color: #000; transition: color 0.25s ease; }
.pr-page--home-es .pr-esh-card--sports .pr-esh-card-name { left: 42px; }
.pr-page--home-es .pr-esh-card--active .pr-esh-card-name { left: 46px; }
.pr-page--home-es .pr-esh-card--sports:hover .pr-esh-card-name { color: var(--pr-red); }
.pr-page--home-es .pr-esh-card--active:hover .pr-esh-card-name { color: #f99b25; }
/* Botón redondo de compra (instancia Button 41×40, negra, con el carrito) */
.pr-page--home-es .pr-esh-card-buy {
	position: absolute;
	top: 481px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 41px;
	height: 40px;
	border-radius: 30px;
	background: #000;
	color: #fff;
	transition: transform 0.25s ease, background-color 0.25s ease;
}
.pr-page--home-es .pr-esh-card--sports .pr-esh-card-buy { left: 294px; }
.pr-page--home-es .pr-esh-card--active .pr-esh-card-buy { left: 298px; }
.pr-page--home-es .pr-esh-card:hover .pr-esh-card-buy { transform: scale(1.08); }
.pr-page--home-es .pr-esh-card--sports:hover .pr-esh-card-buy { background: var(--pr-red); }
.pr-page--home-es .pr-esh-card--active:hover .pr-esh-card-buy { background: #f99b25; }

/* La tarjeta pasó de <a> a <div> para poder llevar dentro un botón real de
   añadir al carrito (07/08/2026): el enlace a la ficha cubre toda la tarjeta
   por debajo del botón. */
.pr-page--home-es .pr-esh-card-link {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 30px;
}
.pr-page--home-es .pr-esh-card-form { position: static; margin: 0; }
.pr-page--home-es button.pr-esh-card-buy {
	z-index: 2;
	padding: 0;
	border: 0;
	cursor: pointer;
}
.pr-page--home-es button.pr-esh-card-buy:focus,
.pr-page--home-es button.pr-esh-card-buy:focus-visible,
.pr-page--home-es button.pr-esh-card-buy:active { color: #fff; border: 0; box-shadow: none; outline: none; }
.pr-page--home-es button.pr-esh-card-buy:focus-visible { outline: 2px solid #1e1e1e; outline-offset: 3px; }
.pr-page--home-es .pr-esh-card-buy svg { display: block; }
.pr-page--home-es button.pr-esh-card-buy:disabled { opacity: 0.6; cursor: default; }
/* El botón manda sobre el hover del enlace */
.pr-page--home-es .pr-esh-card--sports button.pr-esh-card-buy:hover { background: var(--pr-red); transform: scale(1.12); }
.pr-page--home-es .pr-esh-card--active button.pr-esh-card-buy:hover { background: #f99b25; transform: scale(1.12); }

/* --------------------- Ciencia / línea temporal SPM --------------------- */

.pr-page--home-es .pr-esh-science {
	position: relative;
	height: 680px;
	background: #fff;
}
.pr-page--home-es .pr-esh-science h2 {
	position: absolute;
	left: 136px;
	top: 110px;
	width: 860px;
	font-weight: 500;
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: -0.32px;
}
.pr-page--home-es .pr-esh-tl {
	position: absolute;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: -0.16px;
}
.pr-page--home-es .pr-esh-tl b { font-weight: 600; }
.pr-page--home-es .pr-esh-tl--t1 { left: 132px;  top: 252px; width: 377px; }
.pr-page--home-es .pr-esh-tl--t2 { left: 616px;  top: 252px; width: 372px; }
.pr-page--home-es .pr-esh-tl--t3 { left: 1045px; top: 252px; width: 333px; }
.pr-page--home-es .pr-esh-tl--b1 { left: 345px;  top: 456px; width: 350px; }
.pr-page--home-es .pr-esh-tl--b2 { left: 891px;  top: 456px; width: 394px; }
/* Barra con marcas triangulares (componente 6:2080, triángulo 22×13 #1e1e1e) */
/* Barra con triángulos — componente Figma 50:10626 (Group 6350, 1203×26):
   línea de 2px a media altura y los isotipos de 22×13 en
   ARRIBA x0 / x485 / x1181 (=borde derecho) y ABAJO x214 / x759. */
.pr-page--home-es .pr-esh-line {
	position: absolute;
	left: 132px;
	top: 423px;
	width: 1203px;
	height: 2px;
	background: #000;
}
.pr-page--home-es .pr-esh-mark {
	position: absolute;
	bottom: 2px;
	width: 0;
	height: 0;
	border-left: 11px solid transparent;
	border-right: 11px solid transparent;
	border-bottom: 13px solid #1e1e1e;
}
.pr-page--home-es .pr-esh-mark--down {
	bottom: auto;
	top: 2px;
	border-bottom: 0;
	border-top: 13px solid #1e1e1e;
}
.pr-page--home-es .pr-esh-mark--end { right: 0; }

/* ------------------- Lipinova + tarjetas de confianza ------------------- */

.pr-page--home-es .pr-esh-lipinova {
	position: relative;
	height: 1131px;
	background: var(--pr-bg);
	border-radius: 60px 60px 0 0;
}
.pr-page--home-es .pr-esh-lipinova h2 {
	position: absolute;
	left: 135px;
	top: 108px;
	font-weight: 500;
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: -0.32px;
}
.pr-page--home-es .pr-esh-lipinova-desc {
	position: absolute;
	left: 135px;
	top: 206px;
	width: 604px;
}
.pr-page--home-es .pr-esh-lipinova-desc p {
	font-weight: 300;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: -0.16px;
}
.pr-page--home-es .pr-esh-lipinova-desc p + p { margin-top: 19px; }
.pr-page--home-es .pr-esh-lipinova-cta { position: absolute; left: 135px; top: 380px; }
.pr-page--home-es .pr-esh-trust-title {
	position: absolute;
	left: 135px;
	top: 493px;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: -0.24px;
}
.pr-page--home-es .pr-esh-trust {
	position: absolute;
	left: 135px;
	top: 556px;
	width: 1198px;
	display: grid;
	grid-template-columns: 388px 390px 388px;
	column-gap: 16px;
	row-gap: 15px;
}
/* Tarjetas negras con flip 3D al hover (componente 6:2083): reverso BLANCO con
   texto negro (lorem de momento); solo gira la tarjeta bajo el cursor */
.pr-page--home-es .pr-esh-trust-card {
	height: 214px;
	perspective: 1100px;
	outline: none;
}
.pr-page--home-es .pr-esh-trust-card:hover .pr-flip-inner,
.pr-page--home-es .pr-esh-trust-card:focus-within .pr-flip-inner { transform: rotateY(180deg); }
.pr-page--home-es .pr-esh-trust-card .pr-flip-front,
.pr-page--home-es .pr-esh-trust-card .pr-flip-back { padding: 44px 42px; }
.pr-page--home-es .pr-esh-trust-card .pr-flip-front {
	background: #000;
	color: #fff;
}
.pr-page--home-es .pr-esh-trust-card .pr-flip-front p,
.pr-page--home-es .pr-esh-trust-card .pr-flip-back p {
	font-weight: 300;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: -0.16px;
}
.pr-page--home-es .pr-esh-trust-card .pr-flip-front b { font-weight: 600; }
.pr-page--home-es .pr-esh-trust-card .pr-flip-back {
	background: #fff;
	color: #000;
	/* Borde sutil para que el reverso blanco no se funda con el fondo #f9f9f9 */
	border: 1px solid #e8e8e8;
}

/* ------------------------------ Banda SSPAAIN ------------------------------ */

/* Fondo: moléculas doradas (referencia enviada el 12/08/2026, mismo recorte
   que la banda EU pero en cálido; el oscurecido viene horneado en la imagen)
   y el aside vive en una caja de vidrio. */
.pr-page--home-es .pr-esh-band {
	position: relative;
	height: 432px;
	overflow: hidden;
	background: #000;
	color: #fff;
}
.pr-page--home-es .pr-esh-band-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pr-page--home-es .pr-esh-band .pr-esh-canvas { z-index: 1; }
.pr-page--home-es .pr-esh-band h2 {
	position: absolute;
	left: 135px;
	top: 84px;
	width: 604px;
	font-weight: 500;
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: -0.32px;
}
.pr-page--home-es .pr-esh-band-copy {
	position: absolute;
	left: 135px;
	/* Antes 181px. El h2 son dos líneas de 38,4px desde y=84, o sea que
	   acababa en 160,8 y quedaban 20px de hueco: demasiado despegado. */
	top: 172px;
	width: 547px;
}
.pr-page--home-es .pr-esh-band-copy p {
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: -0.16px;
}
.pr-page--home-es .pr-esh-band-copy p + p { margin-top: 19px; }
/* Caja de vidrio del aside (rect 55:3134 — 490×263 r30, fill negro 10% +
   efecto Vidrio: escarcha 4, luz -45° 80%, refracción 80, profundidad 20,
   dispersión 50). Aquí el backdrop-filter difumina la foto de detrás. */
.pr-page--home-es .pr-esh-band-aside {
	position: absolute;
	left: 831px;
	top: 104px;
	width: 490px;
	height: 263px;
	border-radius: 30px;
	background:
		var(--pr-glass-light),
		rgba(0, 0, 0, 0.06);
	-webkit-backdrop-filter: var(--pr-glass-frost);
	backdrop-filter: var(--pr-glass-frost);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.35),
		inset 0 0 0 1px rgba(255, 255, 255, 0.18);
	/* El hueco de los textos, aqui y no en cada uno: ver el comentario de
	   debajo. 21 a la izquierda y 33 a la derecha son los del frame (el texto
	   media 436 dentro de una caja de 490), y 36 arriba es donde arrancaba el
	   titular. El tramo de movil lo sustituye por completo con su
	   `padding: 22px 20px`. */
	padding: 36px 33px 0 21px;
}
/* 02/09/2026: el titular y el parrafo iban los DOS en absoluto con las cotas
   del frame -top 36 y top 131-, y eso daba dos problemas a la vez:

     · el titular ocupa DOS lineas y acaba en 94, asi que hasta el parrafo
       quedaban 37px de aire y se veia descolgado (es lo que pidio Pablo);
     · el parrafo ocupa CUATRO y acababa en 208, con el boton en 201: se
       solapaban 7px.

   Los dos pasan a flujo dentro de la caja: el titular arranca donde arrancaba
   -por el padding de arriba- y el parrafo le sigue a 12px, los mismos que ya
   usaba el tramo de movil. Asi el aire no depende de cuantas lineas ocupe
   cada uno, que es lo que se rompia al traducir. El boton se queda en
   absoluto, que es como esta en el frame. */
.pr-page--home-es .pr-esh-band-aside h3 {
	margin: 0;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: -0.24px;
}
.pr-page--home-es .pr-esh-band-aside p {
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: -0.16px;
}
/* Botón dentro de la caja, abajo a la derecha (instancia 55:3137) */
.pr-page--home-es .pr-esh-band-cta {
	position: absolute;
	left: 270px;
	top: 201px;
	padding: 0 12px;
}

/* ------------------------------ FAQ en claro ------------------------------ */

.pr-page--home-es .pr-faq {
	background: #fff;
	/* abajo 147: el último item aporta 8px de margen propio (147+8 = 155 del frame) */
	padding: 158px 0 147px;
}
.pr-page--home-es .pr-faq .pr-esh-canvas { padding-left: 135px; }
.pr-page--home-es .pr-faq h2 {
	margin: 0 0 37px;
	font-weight: 500;
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: -0.32px;
}
.pr-page--home-es .pr-faq-item {
	width: 1111px;
	margin-bottom: 8px;
}
.pr-page--home-es .pr-faq-q {
	min-height: 78px;
	padding: 20px 63px 20px 62px;
	border-radius: 30px;
	background: #f9f9f9;
	font-size: 24px;
	line-height: 1.2;
}
.pr-page--home-es .pr-faq-item.is-open .pr-faq-q {
	background: #000;
	color: #fff;
}
.pr-page--home-es .pr-faq-q:focus { background: #f9f9f9; color: #000; }
.pr-page--home-es .pr-faq-item.is-open .pr-faq-q:focus { background: #000; color: #fff; }
.pr-page--home-es .pr-faq-answer-inner {
	width: 921px;
	max-width: none;
	margin: 0;
	padding: 28px 0 28px 62px;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: 0;
}
/* Referencias bibliográficas en rojo (así vienen en el frame) */
/* Las referencias del pie de una respuesta van como el resto de citas de la
   web —pequeñas, en cursiva y algo apagadas—, no en rojo: el rojo las hacía
   parecer un aviso (17/08/2026). */
.pr-page--home-es .pr-esh-ref {
	margin-top: 19px;
	font-size: 13px;
	line-height: 1.4;
	font-style: italic;
	color: inherit;
	opacity: 0.6;
}

/* ------------------------- Newsletter (microscopio) ------------------------- */

.pr-page--home-es .pr-esh-news {
	position: relative;
	height: 367px;
	overflow: hidden;
	/* Oscuro, no #f4f4f4: es el color que asoma si el vídeo de Gumlet no ha
	   cargado todavía o no cubre por redondeo de subpíxel, y se veía como
	   una raya clara justo encima del pie negro (20/08/2026). */
	background: #1e1e1e;
}
.pr-page--home-es .pr-esh-news-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Overlay negro sobre el vídeo, igual que en US y EU (.pr-home-community::after):
   sin él el vídeo se ve demasiado claro y la caja de vidrio pierde contraste
   (13/08/2026, se quedó fuera al montar el cuadrado de vidrio). */
.pr-page--home-es .pr-esh-news::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.52) 32%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0.08) 100%);
	pointer-events: none;
}
/* Cuadrado de vidrio (componente 152:10478: 468×252 r30, Vidrio con Escarcha
   4) tras el copy, como en US y EU. Sustituye al velo degradado (12/08/2026):
   el título queda a 37 del borde de la caja y el texto con 44 de sangría. */
.pr-page--home-es .pr-esh-news-glass {
	position: absolute;
	left: 135px;
	top: 54px;
	width: 468px;
	height: 252px;
	border-radius: 30px;
	background:
		var(--pr-glass-light),
		rgba(0, 0, 0, 0.06);
	-webkit-backdrop-filter: var(--pr-glass-frost);
	backdrop-filter: var(--pr-glass-frost);
	box-shadow: var(--pr-glass-edge);
	pointer-events: none;
}
.pr-page--home-es .pr-esh-news .pr-esh-canvas { z-index: 1; }
.pr-page--home-es .pr-esh-news h2,
.pr-page--home-es .pr-esh-news-sub { color: #fff; }
.pr-page--home-es .pr-esh-news h2 {
	position: absolute;
	left: 179px;
	top: 91px;
	font-weight: 500;
	font-size: 24px;
	line-height: 1;
	letter-spacing: -0.24px;
}
.pr-page--home-es .pr-esh-news-sub {
	position: absolute;
	left: 179px;
	top: 130px;
	width: 338px;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: -0.16px;
}
/* Caja de correo (componente 4:10528): input píldora blanca + botón glass */
.pr-page--home-es .pr-esh-newsletter {
	position: absolute;
	left: 179px;
	top: 221px;
	display: flex;
	gap: 12px;
}
.pr-page--home-es .pr-esh-newsletter input {
	width: 249px;
	height: 40px;
	border: 0;
	border-radius: 30px;
	padding: 0 16px;
	background: #fff;
	font-family: var(--pr-font-body);
	font-weight: 300;
	font-size: 16px;
	letter-spacing: 0;
	color: #1e1e1e;
}
.pr-page--home-es .pr-esh-newsletter input::placeholder { color: #1e1e1e; opacity: 1; }
.pr-page--home-es .pr-esh-newsletter input:focus { outline: none; }
.pr-page--home-es .pr-esh-newsletter input:focus-visible { outline: 2px solid rgba(0, 0, 0, 0.45); outline-offset: 2px; }

/* La costura del pie: las alturas del contenido acaban en fracciones de
   píxel (line-height 38.4 → 38.390625 en el motor) y, al redondear la capa
   compositada del `backdrop-filter` de la banda anterior, asomaba una raya
   del BLANCO del body de lado a lado. Con 1px de solape no queda rendija.
   (Verificado exponiendo la costura a propósito: la fila pasaba de blanco
   puro al color de la propia sección.) */
.pr-footer,
.pr-esh-footer { margin-top: -1px; }

/* El circulo de la inicial de las resenas de Active, en ambar (era el rosa
   de Sports) en TODAS las pantallas. */
.pr-page--apr .pr-avatar,
.pr-page--apr .pr-apr-opinion .pr-avatar {
	background: #fdf0dd;
	color: #f99b25;
}

/* Ver pedido en escritorio: el bote a la altura de la linea de estados y
   aire debajo de "Entregado" (peticion 21/08/2026). */
/* El bote, al alto de la linea de estados (356..574 medido = 218px). */
/* Bote mas grande e IGUAL en Sports y Active: `contain` para que ninguno
   se recorte y mande la caja (21/08/2026). */
.pr-page--account .pr-vo-img {
	height: 262px;
	width: 210px;
	margin-top: 26px;
	object-fit: contain;
}
.pr-page--account .pr-vo-card { min-height: 420px; padding-bottom: 46px; }
/* 313 y no 210: "Contactanos" quedaba a 103px del final del bote, muy por
   encima; baja para acabar al ras (24/08/2026). */
.pr-vo-ayuda { position: absolute; left: 617px; top: 313px; width: 183px; }
.pr-page--account .pr-vo-ayuda-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.5px;
	color: #4a85a6;
	text-decoration: none;
}
.pr-page--account .pr-vo-ayuda-cta:hover { text-decoration: underline; }

/* La cronologia vertical es exclusiva de movil (frame 367:3854). */
.pr-scim { display: none; }

/* El envoltorio de las marcas del pie es transparente en escritorio. */
.pr-esh-marcas { display: contents; }
/* Las tres marcas van dentro de un <a> a su web (02/09/2026), y ese <a>
   TAMBIEN va con `display: contents`. Es a proposito: en escritorio los logos
   estan posicionados en absoluto con las cotas del frame, y en movil son los
   items del flex en que se convierte `.pr-esh-marcas`. Una caja intermedia
   los habria descolocado en los dos tramos; sin caja, el arbol es
   exactamente el de antes y la imagen sigue siendo hija directa de su
   contenedor. El enlace funciona igual porque el clic sobre la imagen activa
   el <a> que la envuelve.
   El foco se dibuja sobre la IMAGEN: un elemento con `display: contents` no
   genera caja y por tanto no tiene borde que perfilar. */
.pr-esh-marca-web { display: contents; }
.pr-esh-marca-web:focus-visible img {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* Las variantes móviles del copy de Conócenos no existen en escritorio. */
.pr-abt-intro--mov,
.pr-abt-spreads--mov { display: none; }

/* Sin filtros ni orden de reseñas EN NINGUNA pantalla (20/08/2026): esos
   botones eran decorativos y no queremos que las reseñas se filtren. El de
   "Escribir una reseña" (data-pr-rev-open) se queda. */
.pr-review-filters .pr-tag:not([data-pr-rev-open]),
.pr-reviews-head .pr-tag:not([data-pr-rev-open]),
button.pr-apr-filtros { display: none !important; }

/* ------------------------------ Footer ES ------------------------------ */

/* Todo el footer en Light (petición 05/08): incluye botones, listas y copyright */
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-footer,
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-footer .pr-esh-btn { font-weight: 300; }

:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-main {
	position: relative;
	height: 397px;
	background: #000;
	color: #fff;
}
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-main h2 {
	position: absolute;
	left: 134px;
	top: 78px;
	font-weight: 500;
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: -0.32px;
}
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-desc {
	position: absolute;
	left: 134px;
	top: 134px;
	width: 464px;
	font-weight: 300;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 0.5px;
}
/* Botón ÚNICO del footer (07/08/2026): sustituye a los dos anteriores. El
   texto va en dos líneas dentro de un <span>, así que el botón deja de ser
   de altura fija y crece con su contenido. Cotas de los frames 79:4985 (US
   134,243 263×45), 79:4988 (EU 134,237 263×47) y 79:4990 (ES 134,254 350×53). */
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-cta1,
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) a.pr-esh-footer-cta1 {
	position: absolute;
	left: 134px;
	top: 254px;
	width: 350px;
	height: auto;
	min-height: 53px;
	padding: 7px 14px 7px 18px;
	align-items: center;
	justify-content: space-between;
	/* Un punto más de interlineado entre las dos líneas del botón */
	line-height: 1.3;
	text-align: left;
}
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-cta1 span { display: block; }
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-cta1 svg { margin-left: 10px; }
.pr-esh-footer-cta2 { display: none; }
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-logo {
	position: absolute;
	left: 830px;
	top: 132px;
	height: 18px;
	width: auto;
}
/* Pasa de imagen a texto (97:5604/5963/6068): Sansation Bold ajustada a los
   104×18 del frame. */
/* Desde el 02/09/2026 es un <a> a la home, no un <span>: se le anade el
   `:visited` y el `text-decoration: none`, igual que el logotipo de la
   cabecera (`.pr-logo--text`), para que no salga subrayado ni cambie de color
   una vez visitado. */
.pr-page .pr-esh-footer-logo--text,
.pr-page .pr-esh-footer-logo--text:visited {
	display: block;
	font-family: var(--pr-font-brand);
	font-weight: 700;
	font-size: 17px;
	line-height: 18px;
	letter-spacing: 0;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-nav,
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-legal {
	position: absolute;
	list-style: none;
	margin: 0;
	padding: 0;
}
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-nav { left: 828px; top: 165px; }
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-legal { left: 1051px; top: 134px; }
/* US: la columna legal EMPIEZA a la altura de «Sports ProResolve» y no a la del
   rótulo PRORESOLVE (31/08/2026). Al quedarse US con un solo texto legal, la
   derecha bajó a dos ítems y el pie quedaba 4 y 2 con «Refund Policy» arriba,
   suelto y con un hueco debajo. Con «News» pasado a la derecha (lo hace
   functions.php) queda 3 y 3, y las dos columnas arrancan a la misma altura.
   Se refuerza con `.pr-esh-footer` por delante para ganar al `:is()` de arriba,
   que cuenta lo mismo y va antes. */
.pr-esh-footer.pr-esh-footer--legal-alineada .pr-esh-footer-legal { top: 165px; }
/* line-height también en el li: si no, el li crece al 1.5 del body (paso 41 y no 31) */
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-nav li,
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-legal li {
	margin-bottom: 11px;
	font-size: 16px;
	line-height: 20px;
}
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-nav a,
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-legal a {
	font-weight: 300;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 0.5px;
	color: #fff;
}
/* Al pasar el ratón, el enlace pasa a negrita (petición 06/08) */
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-nav a:hover,
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-legal a:hover,
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-nav a:focus-visible,
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-legal a:focus-visible {
	font-weight: 700;
	text-decoration: none;
}
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-footer .pr-esh-btn:hover,
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-footer .pr-esh-btn:focus-visible {
	font-weight: 700;
	opacity: 1;
}
/* Logos alineados (frames 116:14910 US, 116:14927 EU y 116:15284 ES): los tres
   comparten ahora el mismo eje vertical, el centro del de Azur (346,5). Antes
   SSPAAIN y Lipinova iban 16px más abajo. */
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-brand-sspaain {
	position: absolute;
	left: 916px;
	top: 335px;
	height: 21px;
	width: auto;
}
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-brand-lipinova {
	position: absolute;
	left: 1053px;
	top: 335px;
	height: 23px;
	width: auto;
	/* El fichero de escritorio es oscuro y el filtro lo pasa a blanco; sobre
	   el de movil (blanco con alfa) el mismo filtro tambien da blanco. */
	filter: brightness(0) invert(1);
}
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-brand-azur {
	position: absolute;
	left: 1185px;
	top: 320px;
	width: 111px;
	height: auto;
}
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-bar {
	position: relative;
	height: 55px;
	background: #fff;
	color: #1e1e1e;
}
/* Copyright y enlace de cookies en un solo grupo (31/08/2026). La posicion
   del frame la lleva AHORA el grupo, y el copyright pasa a ir en flujo dentro
   de el: antes el enlace de cookies se quedaba suelto pegado al borde
   izquierdo de la pantalla, porque copyright y redes son absolutos y el
   enlace no. */
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-bar-legal {
	position: absolute;
	left: 133px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 14px;
}
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-copyright {
	position: static;
	left: auto;
	top: auto;
	transform: none;
	font-weight: 300;
	font-size: 12px;
	letter-spacing: 0.5px;
}
/* Barra separadora, para que no parezca que el enlace forma parte del aviso
   de copyright. Va en el ::before del enlace y no como caracter en el HTML,
   asi no se lee en voz alta ni se copia al seleccionar el texto. */
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-bar-legal .pr-cookies-enlace {
	font-size: 12px;
	letter-spacing: 0.5px;
	text-decoration: underline;
	text-underline-offset: 2px;
}
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-bar-legal .pr-cookies-enlace::before {
	content: '';
	display: inline-block;
	width: 1px;
	height: 11px;
	margin-right: 14px;
	background: currentColor;
	opacity: 0.35;
	vertical-align: -1px;
}
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-social {
	position: absolute;
	right: 96px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	gap: 44px;
}
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-social a {
	font-weight: 300;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.5px;
	color: #1e1e1e;
}
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-social a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	.pr-page--home-es .pr-esh-trust-card .pr-flip-inner { transition: none !important; }
}

/* =====================================================================
   FICHA US — 4.ª ronda (06/08/2026)
   Archivo Figma NUEVO: bdtWHQdQ5Zg4wGLDNLeDQ8, frame 17:2580
   "SPR - USA (Laptop)" (1440×8265), página "Exports".
   Cambian el hero entero (más arriba y más compacto), el footer y varias
   cotas verticales. Todo lo de abajo sustituye a las rondas anteriores.
   ===================================================================== */

/* --- Menú: sombrita al pasar el ratón (igual que la home ES) --------- */
.pr-page--us:not(.pr-page--home-es) .pr-nav a { transition: color 0.3s ease, text-shadow 0.28s ease; }
.pr-page--us:not(.pr-page--home-es) .pr-nav a:hover,
.pr-page--us:not(.pr-page--home-es) .pr-nav a:focus-visible { text-shadow: 1px 2px 0 var(--pr-ush-shadow, #e8e8e8); }
.pr-page--us:not(.pr-page--home-es) .pr-nav a:nth-child(1) { --pr-ush-shadow: rgba(183, 31, 47, 0.55); }
.pr-page--us:not(.pr-page--home-es) .pr-nav a:nth-child(2),
.pr-page--us:not(.pr-page--home-es) .pr-nav a:nth-child(3) { --pr-ush-shadow: #e8e8e8; }

.pr-page--us:not(.pr-page--home-es) .pr-header-tools { gap: 12px; }
.pr-page--us:not(.pr-page--home-es) .pr-header-tools svg { display: block; }
.pr-page--us:not(.pr-page--home-es) .pr-lang svg,
.pr-page--us:not(.pr-page--home-es) .pr-account svg { width: 20.83px; height: 20.83px; }
.pr-page--us:not(.pr-page--home-es) .pr-cart svg { width: 23.58px; height: 22.63px; }
/* GeneratePress pinta button:hover/:focus con fondo propio: sin anularlo el
   icono de idioma se rodea de una caja gris */
.pr-page--us:not(.pr-page--home-es) .pr-lang,
.pr-page--us:not(.pr-page--home-es) .pr-lang:hover,
.pr-page--us:not(.pr-page--home-es) .pr-lang:focus,
.pr-page--us:not(.pr-page--home-es) .pr-lang:active {
	background: none;
	border: 0;
	padding: 0;
	box-shadow: none;
	outline: none;
}
.pr-page--us:not(.pr-page--home-es) .pr-header-tools > * {
	transition: filter 0.28s ease;
	cursor: pointer;
	color: #000;
}
.pr-page--us:not(.pr-page--home-es) .pr-header-tools > a:hover,
.pr-page--us:not(.pr-page--home-es) .pr-header-tools > button:hover,
.pr-page--us:not(.pr-page--home-es) .pr-header-tools > a:focus-visible,
.pr-page--us:not(.pr-page--home-es) .pr-header-tools > button:focus-visible { filter: drop-shadow(1px 2px 0 #e8e8e8); }
@media (prefers-reduced-motion: reduce) {
	.pr-page--us:not(.pr-page--home-es) .pr-nav a,
	.pr-page--us:not(.pr-page--home-es) .pr-header-tools > * { transition: none; }
}

/* --- Hero: más compacto (bg 1010) y con la tarjeta 471×587 ---------- */
.pr-page--us .pr-hero { height: 1010px; }
.pr-page--us .pr-hero-shot,
.pr-page--us .pr-hero-media .pr-hero-shot {
	left: 199px;
	top: 174px;
	width: 471px;
	height: 587px;
	object-fit: contain;
	border-radius: 20px;
}

/*
 * Los bloques del hero van en posición absoluta con la cota exacta del
 * diseño: en flujo, cada línea de más de la Funnel autoalojada desplazaba
 * todo lo de abajo.
 */
.pr-page--us .pr-hero-info {
	position: absolute;
	inset: 0;
	left: 0;
	top: 0;
	width: auto;
}
.pr-page--us .pr-product-title { position: absolute; left: 770px; top: 174px; margin: 0; }
.pr-page--us .pr-price { position: absolute; left: 770px; top: 224px; margin: 0; }
.pr-page--us .pr-price-unit { position: absolute; left: 772px; top: 273px; margin: 0; }
.pr-page--us .pr-product-desc {
	position: absolute;
	left: 770px;
	top: 317px;
	width: 577px;
	margin: 0;
}
.pr-page--us .pr-buy { position: absolute; left: 770px; top: 546px; margin: 0; }
.pr-page--us .pr-buy-label { margin: 0; }
.pr-page--us .pr-buy-controls { margin-top: 10px; gap: 20px; }

/* Tarjeta "Ordering for a team?": ahora 575×95 con el texto en un bloque */
.pr-page--us .pr-team-card {
	position: absolute;
	left: 772px;
	top: 656px;
	width: 575px;
	height: 95px;
	margin: 0;
	border-radius: 30px;
}
.pr-page--us .pr-team-copy { left: 36px; top: 16px; width: 322px; }
.pr-page--us .pr-team-copy h2 { margin: 0; }
.pr-page--us .pr-team-copy p { margin: 0; font-weight: 400; }
.pr-page--us .pr-team-controls { right: 35px; top: 32px; gap: 12px; }

/* Galería + tarjeta-reseña del hero (y=772) */
.pr-page--us .pr-review-teaser { top: 772px; }
.pr-page--us .pr-thumbs-carousel {
	left: 165px;
	top: 24px;
	height: 146px;
	align-items: center;
	gap: 9px;
}
.pr-page--us .pr-review-thumbs { gap: 7px; }
.pr-page--us .pr-review-thumbs img { width: 112px; height: 146px; }
.pr-page--us .pr-teaser-card-wrap { left: 770px; top: 0; width: 577px; }
.pr-page--us .pr-review-card--teaser { width: 577px; min-height: 176px; }
.pr-page--us .pr-teaser-card-wrap > .pr-arrow { right: -39px; top: 102px; }

/* --- Ritmo vertical del resto de secciones -------------------------- */
.pr-page--us .pr-tabs-section { padding: 104px 0 0; }
.pr-page--us .pr-tabs [role="tab"]:nth-child(1) { left: 194px; }
.pr-page--us .pr-tabs [role="tab"]:nth-child(2) { left: 477px; }
.pr-page--us .pr-tabs [role="tab"]:nth-child(3) { left: 770px; }
.pr-page--us .pr-tabs [role="tab"]:nth-child(4) { left: 1089px; }

.pr-page--us .pr-claims { margin-top: 145px; }
.pr-page--us .pr-benefits { padding: 148px 0 0; }
.pr-page--us .pr-trusted { margin-top: 147px; }
.pr-page--us .pr-sponsor { padding: 183px 0 0; }
/* 105 y no 141: la sección SDN crece ~36px con la Funnel autoalojada */
.pr-page--us .pr-canvas { margin-top: 105px; }
.pr-page--us .pr-stories .pr-section-intro { margin-bottom: 82px; }
.pr-page--us .pr-faq { padding: 208px 0 221px; }

/* Un renglón en blanco entre párrafos, como en el diseño */
.pr-page--us .pr-demanding-copy p + p { margin-top: 19px; }

/* Cajas de porcentajes: el relleno del diseño es casi nulo (negro 0,4%),
   el volumen lo da el efecto Vidrio */
.pr-page--us .pr-trusted-stats li {
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.07) 32%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.09) 100%),
		rgba(0, 0, 0, 0.02);
}

/* --- Footer nuevo (grupo Figma 17:2734): 397 negro + 55 blanco ------ */
.pr-page--us .pr-footer > .pr-container { height: 397px; }
.pr-page--us .pr-footer-title {
	position: absolute;
	left: 134px;
	top: 78px;
	width: 565px;
	font-family: var(--pr-font-body);
	font-size: 32px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.32px;
	color: #fff;
	margin: 0;
}
.pr-page--us .pr-footer-lead {
	position: absolute;
	left: 134px;
	top: 134px;
	width: 377px;
	font-size: 16px;
	font-weight: 300;
	line-height: 20px;
	letter-spacing: 0.5px;
	color: #fff;
	margin: 0;
}
.pr-page--us .pr-footer-btn {
	position: absolute;
	left: 134px;
	/* el diseño los fija en 223px, pero la Funnel autoalojada es ~5% más
	   ancha y "Join Our Affiliate Program" partía en dos líneas */
	min-width: 223px;
	width: auto;
	height: 40px;
	justify-content: space-between;
	white-space: nowrap;
	padding: 0 12px;
}
.pr-page--us .pr-footer-btn--a { top: 235px; }
.pr-page--us .pr-footer-btn--b { top: 289px; }

.pr-page--us .pr-footer-links {
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: 11px;
}
.pr-page--us .pr-footer-links--a { left: 828px; top: 136px; }
.pr-page--us .pr-footer-links--b { left: 1051px; top: 134px; }
.pr-page--us .pr-footer-linkslogo {
	width: 115px;
	height: auto;
	margin-bottom: 11px;
}
.pr-page--us .pr-footer-links a {
	font-size: 16px;
	font-weight: 300;
	line-height: 20px;
	letter-spacing: 0.5px;
	color: #fff;
	text-decoration: none;
}
.pr-page--us .pr-footer-links a:hover { text-decoration: underline; }

.pr-page--us .pr-footer-brands {
	position: absolute;
	left: 907px;
	top: 320px;
	width: 389px;
	height: 55px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0;
	margin: 0;
	padding: 0;
}
.pr-page--us .pr-brand-sspaain {
	width: 98px;
	height: auto;
	margin: 0 46px 0 0;
	filter: brightness(0) invert(1);
}
.pr-page--us .pr-brand-lipinova {
	width: 97px;
	height: auto;
	margin: 0 37px 0 0;
	filter: brightness(0) invert(1);
}
/* el PNG de Azur ya viene en blanco sobre fondo negro OPACO: con el filtro
   se convertía en un rectángulo blanco */
.pr-page--us .pr-brand-azur {
	width: 111px;
	height: auto;
	margin: 0;
	filter: none;
}

.pr-page--us .pr-footer-bar { background: #fff; height: 55px; }
.pr-page--us .pr-footer-bar .pr-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 55px;
	padding: 0 95px 0 136px;
}
.pr-page--us .pr-footer-copy {
	font-size: 12px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0.5px;
	color: #000;
	margin: 0;
}
.pr-page--us .pr-footer-social { display: flex; gap: 44px; }
.pr-page--us .pr-footer-social a {
	font-size: 16px;
	font-weight: 300;
	line-height: 24px;
	letter-spacing: 0.5px;
	color: #1e1e1e;
	text-decoration: none;
}
.pr-page--us .pr-footer-social a:hover { text-decoration: underline; }

/* =====================================================================
   FICHA US — 5.ª ronda (06/08/2026)
   Frame recreado: 29:3684 "SPR - USA (Laptop)" (el 17:2580 ya no existe).
   Solo cambia el hero (13px más arriba); de las tabs hacia abajo es igual.
   ===================================================================== */

/* --- Ficha de producto 13px más arriba ------------------------------ */
.pr-page--us .pr-hero-shot,
.pr-page--us .pr-hero-media .pr-hero-shot { top: 161px; }
.pr-page--us .pr-product-title { top: 161px; }
.pr-page--us .pr-price { top: 211px; }
.pr-page--us .pr-price-unit { top: 260px; }
.pr-page--us .pr-product-desc { top: 304px; }
.pr-page--us .pr-buy { top: 533px; }
.pr-page--us .pr-team-card { top: 643px; }
.pr-page--us .pr-review-teaser { top: 766px; }
.pr-page--us:not(.pr-page--home-es) .pr-logo img { margin-top: -3px; } /* logo a y=26 (antes 29) */

/* El hero arrancaba pegado al menú (12/08/2026): baja 85px, lo justo para que
   la primera pantalla termine con el bloque de compra para equipos y quede un
   respiro por debajo (con 100 el bloque llegaba al filo y se cortaba). El
   desplazamiento va en los DOS hijos absolutos de `.pr-hero` —la rejilla
   (bote, precio, compra, equipos) y el teaser de reseñas— porque cuelgan de
   contenedores distintos; el fondo crece lo mismo. */
.pr-page--us .pr-hero { height: 1095px; }
.pr-page--us .pr-hero-grid { top: 85px; }
.pr-page--us .pr-review-teaser { top: 851px; }

/* --- Menú: el MISMO de la home en todas las páginas (10/08/2026) -----
   Antes las fichas llevaban una capa extra de negro al 10% sobre el vidrio y
   los enlaces sin relleno; ahora comparten barra y cajas con la home. Las
   separaciones cambian a la vez que el relleno, así que los ítems siguen
   cayendo en 598 / 780,5 / 902,5. */
.pr-page--us:not(.pr-page--home-es) .pr-header,
.pr-page--us:not(.pr-page--home-es) .pr-header.is-inverted {
	background: var(--pr-glass-light);
	-webkit-backdrop-filter: var(--pr-glass-frost);
	backdrop-filter: var(--pr-glass-frost);
}
.pr-page--us:not(.pr-page--home-es) .pr-nav,
.pr-page--us:not(.pr-page--home-es) .pr-header.is-inverted .pr-nav { gap: 10px; }
.pr-page--us:not(.pr-page--home-es) .pr-nav a,
.pr-page--us:not(.pr-page--home-es) .pr-header.is-inverted .pr-nav a { padding: 8px 22px; }

/* La página activa no reacciona al ratón */
.pr-page--us:not(.pr-page--home-es) .pr-nav a.is-active,
.pr-page--us:not(.pr-page--home-es) .pr-nav a.is-active:hover,
.pr-page--us:not(.pr-page--home-es) .pr-nav a.is-active:focus-visible {
	text-shadow: none;
	cursor: default;
}

/* --- Avatar del bloque de reseñas: coral con la letra en blanco ----- */
/* (el del teaser del hero sigue en #f5f5f5 con la letra roja) */
.pr-page--us .pr-review-row .pr-avatar {
	background: var(--pr-coral);
	color: #fff;
}

/* --- Reels: botón de sonido abajo a la derecha ---------------------- */
.pr-page--us .pr-reel-sound {
	position: absolute;
	right: 18px;
	bottom: 26px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.38);
	-webkit-backdrop-filter: var(--pr-glass-frost);
	backdrop-filter: var(--pr-glass-frost);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.25s ease, background 0.25s ease;
}
.pr-page--us .pr-story:hover .pr-reel-sound,
.pr-page--us .pr-reel-sound:focus-visible { opacity: 1; }
.pr-page--us .pr-reel-sound:hover { background: rgba(0, 0, 0, 0.55); }
.pr-page--us .pr-reel-sound:focus,
.pr-page--us .pr-reel-sound:active {
	outline: none;
	box-shadow: none;
	color: #fff;
}
.pr-page--us .pr-reel-ico { display: none; }
.pr-page--us .pr-reel-sound .pr-reel-ico--off { display: block; }
.pr-page--us .pr-reel-sound.is-on .pr-reel-ico--off { display: none; }
.pr-page--us .pr-reel-sound.is-on .pr-reel-ico--on { display: block; }

/* --- Footer: negrita al pasar el ratón ------------------------------ */
.pr-page--us .pr-footer-links a,
.pr-page--us .pr-footer-social a,
.pr-page--us .pr-footer-btn {
	transition: font-weight 0.15s ease;
}
.pr-page--us .pr-footer-links a:hover,
.pr-page--us .pr-footer-links a:focus-visible,
.pr-page--us .pr-footer-social a:hover,
.pr-page--us .pr-footer-social a:focus-visible,
.pr-page--us .pr-footer-btn:hover,
.pr-page--us .pr-footer-btn:focus-visible {
	font-weight: 700;
	text-decoration: none;
}

/* El "[...]" es un <button>: sin display:inline el navegador lo trata como
   bloque y salta de línea aunque quepa al final del párrafo */
.pr-page--us .pr-more {
	display: inline;
	vertical-align: baseline;
	line-height: inherit;
}

/* Footer US: la disposición es la de la home ES (compartida arriba con :is),
   pero el ancho del párrafo y la altura de los botones son los del frame
   29:3838 — desc 377px y CTAs a 235/289 (en ES son 464 y 255/307). */
.pr-page--us .pr-esh-footer-desc,
.pr-page--home .pr-esh-footer-desc { width: 377px; }
/* En US el botón es más estrecho y sube (frame 79:4985) */
.pr-page--us:not(.pr-page--home-es) .pr-esh-footer-cta1,
.pr-page--home a.pr-esh-footer-cta1,
.pr-page--home .pr-esh-footer-cta1 {
	top: 243px;
	width: 263px;
	min-height: 45px;
	/* Sangría más corta que la de ES: con 18+14 la primera línea ya no cabe
	   en los 263 del frame y se partía en tres. */
	padding: 7px 12px;
}

/* =====================================================================
   DESPLEGABLE DE CUENTA (componente Figma 50:11613 "Form Log In")
   Común a todas las páginas pr-: tarjeta blanca 320px radio 20 anclada al
   grupo de iconos del header. Sin sesión = formulario de acceso; con
   sesión, variante con Mi cuenta / Pedidos / Cerrar sesión.
   ===================================================================== */

.pr-page .pr-header-tools { position: relative; }
.pr-page .pr-account-pop {
	position: absolute;
	top: calc(100% + 14px);
	right: -8px;
	width: 320px;
	padding: 24px;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 1px 30px rgba(0, 0, 0, 0.25);
	color: #1e1e1e;
	text-align: left;
	letter-spacing: 0;
	z-index: 60;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
.pr-page .pr-account-pop.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}
/* La home ES ancla los iconos con position:absolute; el pop cuelga igual */
.pr-page--home-es .pr-account-pop { top: calc(100% - 6px); }

.pr-page .pr-account-pop .pr-pop-field { margin: 0 0 24px; }
.pr-page .pr-account-pop label {
	display: block;
	margin: 0 0 8px;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: #1e1e1e;
}
.pr-page .pr-account-pop input[type="email"],
.pr-page .pr-account-pop input[type="password"] {
	display: block;
	width: 100%;
	height: 40px;
	padding: 0 16px;
	background: #fff;
	border: 1px solid #d9d9d9;
	border-radius: 8px;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 300;
	color: #1e1e1e;
}
.pr-page .pr-account-pop input::placeholder { color: #b3b3b3; opacity: 1; }
.pr-page .pr-account-pop input:focus {
	outline: none;
	border-color: #1e1e1e;
}
.pr-page .pr-account-pop .pr-pop-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 40px;
	border: 0;
	border-radius: 8px;
	background: #000;
	color: #fff;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	text-shadow: none;
}
.pr-page .pr-account-pop .pr-pop-submit:hover { opacity: 0.85; }
.pr-page .pr-account-pop .pr-pop-submit:focus,
.pr-page .pr-account-pop .pr-pop-submit:active {
	outline: none;
	box-shadow: none;
	background: #000;
	color: #fff;
}
.pr-page .pr-account-pop .pr-pop-forgot {
	display: inline-block;
	margin-top: 24px;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: #1e1e1e;
	text-decoration: underline;
}
.pr-page .pr-account-pop .pr-pop-forgot:hover { text-decoration: none; }

/* Variante con sesión iniciada (misma tarjeta) */
.pr-page .pr-account-pop .pr-pop-hi {
	margin: 0 0 16px;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: #1e1e1e;
}
.pr-page .pr-account-pop .pr-pop-links {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin: 0 0 24px;
}
.pr-page .pr-account-pop .pr-pop-links a {
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.4;
	color: #1e1e1e;
	text-decoration: none;
	text-shadow: none;
}
.pr-page .pr-account-pop .pr-pop-links a:hover { text-decoration: underline; }

/* ==========================================================================
   MI CUENTA — frames Figma 50:11210 (My orders), 50:11257 (detalle de pedido)
   y 50:11612/13 (Form Register / Form Log In). El body lleva pr-page--us
   además de pr-page--account para heredar header glass claro, footer pr-esh-*
   y el zoom a <1440. Cotas espejo-corregidas del frame (x = 1440 − left − w).
   ========================================================================== */

/* body.: GeneratePress/Woo pintan el fondo con especificidad de clase */
body.pr-page--account { background: #f9f9f9; }

/* En ES la página de cuenta usa el header de la home (pr-page--home-es), pero
   allí va `fixed` porque el hero pasa por debajo. Aquí no hay hero, así que
   sticky: se queda pegado arriba sin tapar el contenido. */
/* (el header ES ya es sticky por defecto; la home lo pasa a fixed) */

.pr-acc { position: relative; }
/* Espacio antes del pie en escritorio/portatil: la tarjeta blanca tocaba el
   pie negro sin transicion, mientras el resto de la web deja aire antes
   (24/08/2026). En movil no se toca: ahi no se notaba. */
@media (min-width: 768px) {
	.pr-acc { padding-bottom: 80px; }
}
.pr-acc-canvas {
	position: relative;
	width: 1440px;
	margin: 0 auto;
	min-height: 614px;
	display: flow-root;
}

/* Avisos de WooCommerce (login fallido, datos guardados…) */
.pr-page--account .woocommerce-error,
.pr-page--account .woocommerce-message,
.pr-page--account .woocommerce-info {
	list-style: none;
	max-width: 813px;
	margin: 40px auto 0;
	padding: 14px 20px;
	background: #fff;
	border-left: 4px solid #1e1e1e;
	border-radius: 12px;
	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.06);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-page--account .woocommerce-error { border-left-color: #b71f2f; }
.pr-page--account .woocommerce-error li,
.pr-page--account .woocommerce-message li { margin: 0; }
.pr-page--account .woocommerce-error a,
.pr-page--account .woocommerce-message a { text-decoration: underline; color: inherit; }

/* ------------------------- Sidebar (50:11210) ------------------------ */
/* Tarjeta #f9f9f9 439×614 con esquinas derechas a 30. En pantallas >1440 se
   extiende hasta el borde izquierdo del viewport para no dejar la costura de
   la sombra a la vista (min() vale 0 en la maqueta con zoom). */
.pr-acc-side {
	position: absolute;
	top: 0;
	left: min(0px, calc((1440px - 100vw) / 2));
	right: 1001px;
	height: 614px;
	background: #f9f9f9;
	border-radius: 0 30px 30px 0;
	box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
}
.pr-acc-side-in { position: relative; width: 439px; height: 100%; margin-left: auto; }

.pr-page--account .pr-acc-hi {
	position: absolute;
	left: 118px;
	top: 105px;
	width: 298px;
	margin: 0;
	font-size: 32px;
	font-weight: 400;
	line-height: 35px;
	letter-spacing: 0.5px;
	color: #000;
}

.pr-acc-nav { position: absolute; left: 118px; top: 224px; width: 298px; }
.pr-acc-nav ul { list-style: none; margin: 0; padding: 0; }
.pr-acc-nav li { margin: 0 0 6px; }
.pr-acc-nav a {
	font-size: 24px;
	font-weight: 300;
	line-height: 35px;
	letter-spacing: 0.5px;
	color: #000;
	text-decoration: none;
	transition: color 0.25s ease;
}
.pr-acc-nav a:hover,
.pr-acc-nav a:focus-visible { color: rgba(0, 0, 0, 0.6); }
.pr-acc-nav a.is-active { font-weight: 700; color: #000; }

.pr-acc-exit { position: absolute; left: 118px; top: 529px; }
.pr-acc-exit a,
.pr-acc-exit .pr-acc-delete {
	display: block;
	font-size: 14px;
	font-weight: 400;
	line-height: 23px;
	letter-spacing: 0.5px;
	color: #000;
	text-decoration: none;
}
.pr-acc-exit a:hover,
.pr-acc-exit a:focus-visible { text-decoration: underline; }
/* GP pinta sus propios estilos de button: anular en explícito (gotcha FAQ) */
.pr-acc-exit .pr-acc-delete,
.pr-acc-exit .pr-acc-delete:hover,
.pr-acc-exit .pr-acc-delete:focus,
.pr-acc-exit .pr-acc-delete:active {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	box-shadow: none;
	outline: none;
	color: #b71f2f;
	cursor: pointer;
	font-family: inherit;
	text-align: left;
}
.pr-acc-exit .pr-acc-delete:hover,
.pr-acc-exit .pr-acc-delete:focus-visible { text-decoration: underline; }

/* --------------------- Columna de contenido -------------------------- */
.pr-acc-main {
	display: flow-root;
	margin-left: 505px;
	width: 813px;
	min-height: 614px;
	padding-bottom: 82px;
}

.pr-page--account .pr-acc-title {
	margin: 145px 0 0;
	font-size: 24px;
	font-weight: 600;
	line-height: 35px;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-page--account .pr-acc-hint {
	margin: 6px 0 0;
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 0.5px;
	color: rgba(0, 0, 0, 0.6);
}

/* Botón píldora negra con chevron (componente Button Primary Medium) */
.pr-acc-btn,
a.pr-acc-btn,
a.pr-acc-btn:visited {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 38px;
	padding: 0 22px;
	background: #1e1e1e;
	border: 0;
	border-radius: 30px;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.5px;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.25s ease;
}
.pr-acc-btn svg { display: block; flex-shrink: 0; }
.pr-acc-btn:hover,
.pr-acc-btn:focus,
.pr-acc-btn:active {
	background: #1e1e1e;
	color: #fff;
	box-shadow: none;
	outline: none;
	opacity: 0.85;
}
/* CON `a.` DELANTE, y no por gusto: la base declara
   `a.pr-acc-btn:visited` (0-2-1) y estos modificadores iban a pelo (0-1-0),
   asi que EN ENLACES NO SE APLICABAN NUNCA -medido el 27/08/2026: un
   «Ver detalle» con `--ghost` salia en negro relleno-. Se mantienen tambien los
   selectores sin `a.` para los <button>. */
.pr-acc-btn--ghost,
.pr-acc-btn--ghost:hover,
.pr-acc-btn--ghost:focus,
.pr-acc-btn--ghost:active,
a.pr-acc-btn--ghost,
a.pr-acc-btn--ghost:visited,
a.pr-acc-btn--ghost:hover,
a.pr-acc-btn--ghost:focus,
a.pr-acc-btn--ghost:active {
	background: transparent;
	border: 1px solid #1e1e1e;
	color: #1e1e1e;
}
.pr-acc-btn--danger,
.pr-acc-btn--danger:hover,
.pr-acc-btn--danger:focus,
.pr-acc-btn--danger:active,
a.pr-acc-btn--danger,
a.pr-acc-btn--danger:visited,
a.pr-acc-btn--danger:hover,
a.pr-acc-btn--danger:focus,
a.pr-acc-btn--danger:active {
	background: #b71f2f;
	color: #fff;
}
.pr-acc-btn:disabled { opacity: 0.35; pointer-events: none; }

/* ------------------ Mis pedidos: tarjetas 813×95 --------------------- */
.pr-order-list { margin-top: 39px; }
.pr-order-card {
	position: relative;
	height: 95px;
	margin-bottom: 14px;
	background: rgba(232, 232, 232, 0.5);
	border-radius: 20px;
}
/* La última tarjeta no suma su margen: el footer debe caer en y=690 (frame) */
.pr-order-list .pr-order-card:last-child { margin-bottom: 0; }
.pr-page--account .pr-order-card p { margin: 0; letter-spacing: 0.5px; line-height: 35px; font-size: 16px; }
.pr-order-num { position: absolute; left: 26px; top: 13px; font-weight: 600; }
.pr-order-name { position: absolute; left: 26px; top: 40px; font-weight: 400; }
.pr-order-total { position: absolute; left: 225px; top: 29px; font-weight: 600; }
/* La columna de fecha y estado, 25px a la izquierda, y el boton pegado al
   borde: con "Estado: Preparando tu pedido" (el rotulo mas largo) el texto
   llegaba a x=588 y el boton empezaba en 586, o sea que se montaban
   (22/08/2026). */
.pr-order-date { position: absolute; left: 336px; top: 13px; font-weight: 300; }
.pr-order-status { position: absolute; left: 336px; top: 40px; font-weight: 300; }
.pr-order-status strong { font-weight: 600; }
.pr-order-btn { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); }

.pr-order-pages { display: flex; gap: 12px; margin-top: 10px; }

/* ------------------- Tarjetas genéricas de sección ------------------- */
.pr-acc-card {
	margin-top: 39px;
	background: rgba(232, 232, 232, 0.5);
	border-radius: 20px;
	padding: 36px 40px;
}
.pr-page--account .pr-acc-card p {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 300;
	line-height: 22px;
	letter-spacing: 0.5px;
}
.pr-page--account .pr-acc-card p:last-child { margin-bottom: 0; }
.pr-acc-empty .pr-acc-btn { margin-top: 10px; }
.pr-page--account .pr-acc-empty-note { color: rgba(0, 0, 0, 0.55); }

.pr-acc-help + .pr-acc-help { margin-top: 21px; }
.pr-page--account .pr-acc-help h2 { margin: 0 0 10px; font-size: 20px; font-weight: 500; letter-spacing: 0.5px; }
.pr-page--account .pr-acc-help h3 { margin: 18px 0 6px; font-size: 16px; font-weight: 600; letter-spacing: 0.5px; }
.pr-acc-help .pr-acc-btn { margin-top: 10px; }

/* -------------- Detalle de pedido (50:11257): tarjeta 812 ------------ */
.pr-page--account .pr-vo-eyebrow {
	margin: 104px 0 0;
	font-size: 16px;
	font-weight: 300;
	line-height: 35px;
	letter-spacing: 0.5px;
}
.pr-page--account .pr-vo-num {
	margin: -4px 0 0;
	font-size: 24px;
	font-weight: 600;
	line-height: 35px;
	letter-spacing: 0.5px;
}
.pr-vo-card {
	position: relative;
	width: 812px;
	min-height: 358px;
	margin-top: 16px;
	background: rgba(232, 232, 232, 0.5);
	border-radius: 30px;
	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
	padding: 28px 0 30px 58px;
}
.pr-vo-product { width: 200px; }
.pr-page--account .pr-vo-name { margin: 0; font-size: 16px; font-weight: 500; line-height: 35px; letter-spacing: 0.5px; }
.pr-page--account .pr-vo-price { margin: -7px 0 0; font-size: 14px; font-weight: 400; line-height: 31px; letter-spacing: 0.5px; }
.pr-vo-img {
	display: block;
	width: 182px;
	height: 205px;
	margin: 27px 0 0 -11px;
	border-radius: 20px;
	object-fit: cover;
}
.pr-vo-col { position: absolute; margin: 0; }
.pr-page--account .pr-vo-label { margin: 0; font-size: 12px; font-weight: 400; line-height: 35px; letter-spacing: 0.5px; }
.pr-page--account .pr-vo-value { margin: -6px 0 0; font-size: 12px; font-weight: 500; line-height: 15px; letter-spacing: 0.5px; }
.pr-vo-qty { left: 260px; top: 30px; }
.pr-vo-amount { left: 347px; top: 30px; }
.pr-vo-ship { left: 454px; top: 30px; width: 183px; }
.pr-vo-bill { left: 617px; top: 30px; width: 183px; }
.pr-vo-addr {
	margin: 0;
	font-style: normal;
	font-size: 12px;
	font-weight: 300;
	line-height: 15px;
	letter-spacing: 0.5px;
}

/* Línea de progreso: check hecho → radio actual → círculos pendientes */
/* 150 y no 99: el ultimo hito ("Entregado") quedaba 51px por encima del
   final del bote; baja para acabar al ras (24/08/2026). */
.pr-vo-progress { position: absolute; left: 259px; top: 150px; width: 195px; margin: 0; }
.pr-prog { position: relative; }
.pr-prog ol { list-style: none; margin: 0; padding: 0; }
.pr-prog-step {
	position: absolute;
	left: 22px;
	margin: 0;
	font-size: 12px;
	font-weight: 300;
	line-height: 35px;
	letter-spacing: 0.5px;
	white-space: nowrap;
}
/* Los cuatro pasos, 28px mas arriba, para que "Estado del envio" quede
   JUSTO encima del primero (habia 34px de hueco muerto; 22/08/2026). */
.pr-prog-step--1 { top: 6px; }
.pr-prog-step--2 { top: 57px; }
.pr-prog-step--3 { top: 108px; }
.pr-prog-step--4 { top: 155px; }
.pr-prog-line {
	position: absolute;
	left: 4px;
	top: 28px;
	height: 145px;
	border-left: 1px dashed #000;
}
.pr-prog-dot {
	position: absolute;
	left: -22px;
	top: 12px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	box-sizing: border-box;
}
/* El fondo de los puntos huecos tapa la línea: gris resultante de la tarjeta
   (rgba(232,232,232,.5) sobre #f9f9f9 ≈ #f0f0f0) */
.pr-prog-step.is-todo .pr-prog-dot,
.pr-prog-step.is-current .pr-prog-dot { background: #f0f0f0; border: 1px solid #000; }
.pr-prog-step.is-current .pr-prog-dot::after {
	content: "";
	position: absolute;
	inset: 2px;
	border-radius: 50%;
	background: #000;
}
.pr-prog-step.is-done .pr-prog-dot { background: #1e1e1e; }
.pr-prog-step.is-done .pr-prog-dot::after {
	content: "";
	position: absolute;
	left: 2.4px;
	top: 2.8px;
	width: 5px;
	height: 2.6px;
	border-left: 1.3px solid #fff;
	border-bottom: 1.3px solid #fff;
	transform: rotate(-45deg);
}
.pr-prog-desc {
	display: block;
	width: 168px;
	margin-top: -6px;
	font-size: 8px;
	font-weight: 300;
	line-height: 10px;
	letter-spacing: 0.5px;
	color: rgba(0, 0, 0, 0.5);
	white-space: normal;
}
.pr-page--account .pr-vo-note {
	margin: 10px 0 0;
	width: 195px;
	font-size: 12px;
	font-weight: 300;
	line-height: 16px;
	letter-spacing: 0.5px;
}
.pr-page--account .pr-vo-back { margin: 24px 0 0; font-size: 14px; letter-spacing: 0.5px; }
.pr-page--account .pr-vo-back a { color: #000; text-decoration: none; }
.pr-page--account .pr-vo-back a:hover { text-decoration: underline; }

/* --------------- Formularios (datos personales, direcciones) --------- */
.pr-acc-form { margin-top: 39px; }
.pr-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.pr-page--account .pr-field { margin: 0; }
.pr-field--full { grid-column: 1 / -1; }
.pr-page--account .pr-field label,
.pr-page--account .pr-form-grid .form-row label {
	display: block;
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-page--account .pr-field input,
.pr-page--account .pr-delete-input,
.pr-page--account .pr-form-grid input.input-text,
.pr-page--account .pr-form-grid select,
.pr-page--account .woocommerce-ResetPassword input.input-text {
	width: 100%;
	height: 40px;
	padding: 0 14px;
	border: 1px solid #d9d9d9;
	border-radius: 8px;
	background: #fff;
	color: #000;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.25px;
}
.pr-page--account .pr-field input::placeholder,
.pr-page--account .pr-form-grid input.input-text::placeholder { color: #b3b3b3; opacity: 1; }
.pr-page--account .pr-field input:focus,
.pr-page--account .pr-delete-input:focus,
.pr-page--account .pr-form-grid input.input-text:focus,
.pr-page--account .pr-form-grid select:focus,
.pr-page--account .woocommerce-ResetPassword input.input-text:focus {
	border-color: #1e1e1e;
	outline: none;
	box-shadow: none;
}
.pr-page--account .pr-form-grid .form-row { margin: 0; padding: 0; float: none; width: auto; }
.pr-page--account .pr-form-grid .form-row-wide { grid-column: 1 / -1; }
.pr-page--account .pr-form-grid .woocommerce-input-wrapper { display: block; }
.pr-page--account .pr-form-grid .required { color: #b71f2f; text-decoration: none; }
.pr-page--account .pr-form-grid .optional { color: rgba(0, 0, 0, 0.4); }

.pr-page--account .pr-form-sub { margin: 32px 0 0; font-size: 20px; font-weight: 500; letter-spacing: 0.5px; }
.pr-page--account .pr-form-hint { margin: 4px 0 16px; font-size: 14px; font-weight: 300; letter-spacing: 0.5px; color: rgba(0, 0, 0, 0.55); }
.pr-form-actions { display: flex; justify-content: flex-end; gap: 12px; margin: 28px 0 0; }

/* Direcciones: dos tarjetas lado a lado */
.pr-addr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 21px; margin-top: 39px; }
.pr-addr-card { margin-top: 0; display: flex; flex-direction: column; align-items: flex-start; min-height: 230px; }
.pr-page--account .pr-addr-card h2 { margin: 0 0 10px; font-size: 20px; font-weight: 500; letter-spacing: 0.5px; }
.pr-addr-card address {
	flex: 1;
	margin: 0 0 20px;
	font-style: normal;
	font-size: 16px;
	font-weight: 300;
	line-height: 22px;
	letter-spacing: 0.5px;
}
.pr-addr-card .pr-acc-btn { margin-top: auto; }

/* Métodos de pago guardados (cuando exista pasarela con tokenización) */
.pr-pm-list { margin-top: 39px; display: grid; gap: 14px; }
.pr-pm-card { margin-top: 0; display: flex; align-items: center; justify-content: space-between; padding: 24px 32px; }
.pr-page--account .pr-pm-name { margin: 0; font-size: 16px; font-weight: 500; letter-spacing: 0.5px; }
.pr-pm-default { margin-left: 8px; font-size: 12px; font-weight: 400; color: rgba(0, 0, 0, 0.55); }
.pr-page--account .pr-pm-exp { margin: 2px 0 0; font-size: 14px; font-weight: 300; }
.pr-pm-actions { display: flex; gap: 10px; }

/* ------------- Login / registro (50:11613 y 50:11612) ---------------- */
.pr-login-wrap { display: flex; flex-direction: column; align-items: center; padding: 110px 0 140px; }
.pr-page--account .pr-login-title { margin: 0 0 28px; font-size: 24px; font-weight: 600; letter-spacing: 0.5px; }
.pr-login-card {
	width: 380px;
	background: #fff;
	border-radius: 30px;
	padding: 32px;
	box-shadow: 0 5px 30px rgba(0, 0, 0, 0.08);
}
.pr-login-form { margin: 0; }
.pr-login-form .pr-field { margin: 0 0 24px; }
.pr-page--account .pr-login-form .pr-field label { font-size: 16px; }
.pr-check {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 4px 0 28px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.25px;
	cursor: pointer;
}
.pr-check input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: #1e1e1e; flex-shrink: 0; }
.pr-login-submit,
.pr-login-submit:hover,
.pr-login-submit:focus,
.pr-login-submit:active {
	display: block;
	width: 100%;
	height: 40px;
	border: 0;
	border-radius: 10px;
	background: #1e1e1e;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.5px;
	cursor: pointer;
	box-shadow: none;
	outline: none;
	transition: opacity 0.25s ease;
}
.pr-login-submit:hover { opacity: 0.85; }
/* "¿Has olvidado tu contraseña?" es un <a> y "¿Primera vez aquí?" un <button>:
   sin igualar aquí no casan — el reset `.pr-page a` le quitaba el subrayado al
   primero y GeneratePress mete su propia métrica en el segundo. */
.pr-page .pr-login-forgot,
.pr-page .pr-login-toggle {
	font-family: var(--pr-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.25px;
	color: #000;
	text-decoration: underline;
}
.pr-login-forgot {
	display: block;
	margin: 14px 0 0;
	text-align: center;
}
.pr-login-toggle,
.pr-login-toggle:hover,
.pr-login-toggle:focus,
.pr-login-toggle:active {
	display: block;
	margin: 18px auto 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	outline: none;
	font-family: inherit;
	font-size: 14px;
	letter-spacing: 0.25px;
	color: #000;
	text-decoration: underline;
	cursor: pointer;
}
.pr-login-toggle:hover,
.pr-page .pr-login-forgot:hover { text-decoration: none; }

/* Recuperar contraseña (plantilla estándar de Woo, restilizada) */
.pr-page--account .woocommerce-ResetPassword {
	max-width: 380px;
	margin: 110px auto 140px;
	background: #fff;
	border-radius: 30px;
	padding: 32px;
	box-shadow: 0 5px 30px rgba(0, 0, 0, 0.08);
}
.pr-page--account .woocommerce-ResetPassword p { margin: 0 0 20px; font-size: 14px; font-weight: 300; letter-spacing: 0.25px; }
.pr-page--account .woocommerce-ResetPassword label { display: block; margin: 0 0 8px; font-size: 16px; font-weight: 400; }
.pr-page--account .woocommerce-ResetPassword .form-row { float: none; width: auto; padding: 0; }
.pr-page--account .woocommerce-ResetPassword button.woocommerce-Button,
.pr-page--account .woocommerce-ResetPassword button.woocommerce-Button:hover,
.pr-page--account .woocommerce-ResetPassword button.woocommerce-Button:focus {
	display: block;
	width: 100%;
	height: 40px;
	border: 0;
	border-radius: 10px;
	background: #1e1e1e;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	cursor: pointer;
	box-shadow: none;
	outline: none;
}

/* ----------------- Modal de borrado de cuenta ------------------------ */
.pr-page--account .pr-delete-dialog {
	width: 440px;
	aspect-ratio: auto;
	background: #fff;
	border-radius: 20px;
	padding: 36px 40px;
}
.pr-page--account .pr-delete-dialog h2 { margin: 0 0 12px; font-size: 22px; font-weight: 600; letter-spacing: 0.5px; }
.pr-page--account .pr-delete-warn { margin: 0 0 20px; font-size: 14px; font-weight: 300; line-height: 20px; letter-spacing: 0.25px; }
.pr-page--account .pr-delete-label { display: block; margin: 0 0 8px; font-size: 14px; letter-spacing: 0.25px; }
.pr-page--account .pr-delete-error { margin: 10px 0 0; font-size: 13px; color: #b71f2f; }
.pr-delete-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.pr-page--account .pr-delete-modal .pr-modal-close,
.pr-page--account .pr-delete-modal .pr-modal-close:hover,
.pr-page--account .pr-delete-modal .pr-modal-close:focus {
	top: 14px;
	right: 14px;
	background: rgba(0, 0, 0, 0.06);
	color: #000;
}

/* --- Desplegable de cuenta: cara de registro (componente 50:11612) ------
   La tarjeta del header alterna acceso/registro con el enlace de abajo. */
.pr-page .pr-account-pop .pr-pop-face[hidden] { display: none; }
.pr-page .pr-account-pop .pr-pop-check {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 4px;
	font-family: var(--pr-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: #1e1e1e;
	cursor: pointer;
}
.pr-page .pr-account-pop .pr-pop-check input {
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	flex-shrink: 0;
	accent-color: #1e1e1e;
}
.pr-page .pr-account-pop .pr-pop-check span { text-shadow: none; }
/* Enlace de cambio de cara: es un <button>, hay que anular los estilos de GP */
.pr-page .pr-account-pop .pr-pop-toggle,
.pr-page .pr-account-pop .pr-pop-toggle:hover,
.pr-page .pr-account-pop .pr-pop-toggle:focus,
.pr-page .pr-account-pop .pr-pop-toggle:active {
	display: block;
	width: 100%;
	margin: 16px 0 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	outline: none;
	font-family: var(--pr-font-body);
	/* 16px: mismo tamaño que .pr-pop-forgot, que va justo encima */
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	color: #1e1e1e;
	/* Alineado a la izquierda como el "¿Has olvidado tu contraseña?" */
	text-align: left;
	text-decoration: underline;
	text-shadow: none;
	cursor: pointer;
}
.pr-page .pr-account-pop .pr-pop-toggle:hover { text-decoration: none; }
/* En la cara de registro el botón negro va pegado a los términos */
.pr-page .pr-account-pop [data-pr-pop-face="register"] .pr-pop-submit { margin-top: 20px; }

/* --- Mi cuenta: el contenido de la derecha sube 40px --------------------
   Petición del 07/08/2026: los títulos de sección quedan a la altura del
   "Hola de nuevo" del sidebar (y=105) en vez de los 145 del frame. */
.pr-page--account .pr-acc-title { margin-top: 105px; }
.pr-page--account .pr-vo-eyebrow { margin-top: 64px; }

/* ---- Selector de idioma del header (pr_lang_switcher) ---- */
.pr-page .pr-lang-wrap { position: relative; display: inline-flex; }
.pr-page .pr-lang-menu {
	position: absolute;
	top: calc(100% + 12px);
	right: -8px;
	z-index: 120;
	min-width: 132px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 30px rgba(0, 0, 0, 0.18);
}
.pr-page .pr-lang-menu[hidden] { display: none; }
.pr-page .pr-lang-menu li { margin: 0; }
.pr-page .pr-lang-menu a {
	display: block;
	padding: 8px 18px;
	font-family: var(--pr-font-body);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: 0;
	color: #1e1e1e;
	text-decoration: none;
	text-shadow: none;
}
.pr-page .pr-lang-menu a:hover { background: #f5f5f5; }
.pr-page .pr-lang-menu a.is-active { font-weight: 600; }

/* ---- Checkout sin menú (petición 07/08): el paso de pago va sin barra de
   navegación para no sacar al usuario del flujo de compra. ---- */
.pr-hide-header .site-header,
.pr-hide-header .pr-header,
.woocommerce-checkout .site-header,
.woocommerce-checkout .pr-header { display: none; }
/* sin barra fija, el contenido no necesita el hueco de 76px */
.pr-hide-header .pr-main,
.pr-hide-header .pr-acc { padding-top: 0; }

/* ==========================================================================
   CARRITO / CHECKOUT / GRACIAS / 404 — frames Figma 50:11568, 50:11491,
   50:11480 y 50:11341 ("ProResolve Website | Diseños finales"). Maqueta fija
   1440 (+zoom JS vía pr-page--home-es / pr-page--us); cotas espejo-corregidas
   del frame (x = 1440 − left − w) y verificadas sobre el render 1:1.
   ========================================================================== */

body.pr-page--cart,
body.pr-page--chk,
body.pr-page--ty,
body.pr-page--nf { background: #f9f9f9; }

/* Avisos de WooCommerce (cupones, errores de validación del checkout…) */
:is(.pr-page--cart, .pr-page--chk) .woocommerce-error,
:is(.pr-page--cart, .pr-page--chk) .woocommerce-message,
:is(.pr-page--cart, .pr-page--chk) .woocommerce-info {
	list-style: none;
	margin: 0 0 24px;
	padding: 14px 20px;
	background: #fff;
	border-left: 4px solid #1e1e1e;
	border-radius: 12px;
	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.06);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.5px;
	color: #000;
}
:is(.pr-page--cart, .pr-page--chk) .woocommerce-error { border-left-color: #b71f2f; }
:is(.pr-page--cart, .pr-page--chk) .woocommerce-error li,
:is(.pr-page--cart, .pr-page--chk) .woocommerce-message li { margin: 0; }
:is(.pr-page--cart, .pr-page--chk) :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) a { text-decoration: underline; color: inherit; }
/* Sin el icono de fuente de Woo ni el botón-bloque "Ver carrito" */
:is(.pr-page--cart, .pr-page--chk) :is(.woocommerce-error, .woocommerce-message, .woocommerce-info)::before,
:is(.pr-page--cart, .pr-page--chk) :is(.woocommerce-error li, .woocommerce-message li, .woocommerce-info li)::before { display: none; content: none; }
:is(.pr-page--cart, .pr-page--chk) :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) .button {
	float: right;
	background: none;
	border: 0;
	margin: 0 0 0 12px;
	padding: 0;
	font-size: 14px;
	font-weight: 400;
	color: inherit;
	text-decoration: underline;
	box-shadow: none;
}
/* Los 782px son la cota del artboard de escritorio, y con `max-width` en vez de
   `width` no se filtran al movil: ahi el aviso de «producto eliminado» estiraba
   el viewport de maquetacion a 802px y toda la pagina rompia el ancho
   (27/08/2026, «cuando quitas un producto del carrito la barra rompe el
   ancho»). Un hijo en bloque no deberia poder pasarse de su padre, pero un
   `width` explicito si lo hace. */
.pr-cart-notices { width: 100%; max-width: 782px; }
.pr-cart-notices:empty { display: none; }

/* ---- Avisos propios (pr_render_notices): tarjeta blanca radio 20 con filo
   de color, en lugar de la barra verde/roja de WooCommerce. ---- */
.pr-page .pr-notice {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0 0 22px;
	padding: 16px 22px 17px;
	background: #fff;
	border-radius: 20px;
	border-left: 3px solid #1e1e1e;
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.07);
}
.pr-page .pr-notice--error { border-left-color: #b71f2f; }
.pr-page .pr-notice--success { border-left-color: #1e7d3a; }
.pr-notice-ico {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-top: 1px;
	border-radius: 50%;
	color: #fff;
	background: #1e1e1e;
}
.pr-notice--error .pr-notice-ico { background: #b71f2f; }
.pr-notice--success .pr-notice-ico { background: #1e7d3a; }
.pr-notice-ico svg { display: block; }
.pr-notice-body { min-width: 0; }
.pr-page .pr-notice-title {
	margin: 0 0 4px;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-page .pr-notice-text {
	margin: 0;
	font-size: 16px;
	font-weight: 300;
	line-height: 21px;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-page .pr-notice-text + .pr-notice-text { margin-top: 4px; }
.pr-page .pr-notice-text strong { font-weight: 500; }
.pr-page .pr-notice a { text-decoration: underline; }

/* --------------------------- Carrito (50:11568) --------------------------- */

.pr-cart-canvas {
	padding: 102px 92px 60px 119px;
	min-height: 791px;
}
.pr-page .pr-cart-title {
	margin: 0 0 37px;
	font-family: var(--pr-font-body);
	font-size: 32px;
	font-weight: 600;
	line-height: 35px;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-cart-form { display: flex; align-items: flex-start; }
.pr-cart-left { flex: none; width: 782px; }
.pr-cart-cols { position: relative; height: 31px; }
.pr-cart-cols span {
	position: absolute;
	top: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 31px;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-cart-col--prod { left: 0; }
.pr-cart-col--qty { left: 375px; }
.pr-cart-col--sub { left: 501px; }

.pr-cart-row { position: relative; height: 114px; margin-top: 24px; }
.pr-cart-thumb {
	position: absolute;
	left: 0;
	top: 0;
	width: 130px;
	height: 114px;
	border-radius: 20px;
	background: rgba(217, 217, 217, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.pr-cart-thumb img { max-width: 78%; max-height: 88%; width: auto; height: auto; object-fit: contain; }
.pr-cart-info { position: absolute; left: 174px; top: 24px; }
.pr-page--cart a.pr-cart-name,
.pr-page--cart a.pr-cart-name:visited {
	display: block;
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-page .pr-cart-price { display: block; margin-top: 9px; font-size: 16px; font-weight: 400; line-height: 20px; letter-spacing: 0.5px; color: #000; }
.pr-cart-stepper { position: absolute; left: 383px; top: 39px; display: flex; align-items: center; }
.pr-cart-step {
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--pr-font-body);
	font-size: 17px;
	line-height: 1;
	color: #000;
	cursor: pointer;
}
.pr-cart-step:hover, .pr-cart-step:focus, .pr-cart-step:focus-visible, .pr-cart-step:active { background: none; border: 0; color: #000; outline: none; box-shadow: none; }
.pr-cart-step:disabled { opacity: 0.3; cursor: default; }
/* Con la especificidad de GP (input[type=text] pinta borde y fondo): el
   número va desnudo entre los ± */
.pr-page--cart input.pr-cart-qty,
.pr-page--cart input.pr-cart-qty:focus,
.pr-page--cart input.pr-cart-qty:focus-visible {
	width: 34px;
	height: 24px;
	border: 0;
	background: none;
	text-align: center;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #000;
	padding: 0;
	outline: none;
	box-shadow: none;
	border-radius: 0;
}
.pr-cart-sub { position: absolute; left: 501px; top: 41px; font-size: 16px; font-weight: 400; line-height: 20px; letter-spacing: 0.5px; color: #000; }
.pr-page--cart a.pr-cart-remove,
.pr-page--cart a.pr-cart-remove:visited {
	position: absolute;
	left: 621px;
	top: 37px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 37px;
	padding: 0 16px;
	border-radius: 30px;
	background: #000;
	color: #fff;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.5px;
}
.pr-page--cart a.pr-cart-remove:hover { opacity: 0.85; color: #fff; }
.pr-cart-remove svg { display: block; }

/* Banda "¿Pedido para un equipo?" — ahora añade la caja de 24 (producto
   woosb #29 de WPC Product Bundles). Solo aparece si hay Sports en el
   carrito; con Active sale la banda de suscripción con las mismas cotas. */
.pr-cart-team {
	position: relative;
	width: 575px;
	height: 132px;
	margin-top: 68px;
	border-radius: 30px;
	background: #e8e8e8;
}
.pr-cart-team + .pr-cart-team { margin-top: 24px; }
.pr-page .pr-cart-team h2 { position: absolute; left: 37px; top: 26px; margin: 0; font-family: var(--pr-font-body); font-size: 16px; font-weight: 600; line-height: 20px; letter-spacing: 0.5px; color: #000; }
.pr-page .pr-cart-team p { position: absolute; left: 37px; top: 56px; width: 314px; margin: 0; font-size: 16px; font-weight: 300; line-height: 20px; letter-spacing: 0.5px; color: #000; }
/* Las mismas cotas que en movil (nodo 152:8420): respiro a los lados y 8 de
   hueco a cada lado del numero. Aqui la pastilla venia con `width: 110px` y
   `padding: 0`, y el menos quedaba a 6px del borde redondeado: por eso se veia
   descentrada, apretada contra los cantos (avisado el 26/08/2026).
   Se ancla por la DERECHA en vez de por la izquierda: asi crece hacia el hueco
   vacio que tiene delante segun cambie el texto -"1 caja" / "2 cajas", y mas
   largo en ingles- y el boton rojo se queda clavado donde lo pone el diseno,
   que es el anclaje visual del bloque. */
.pr-cart-team-stepper {
	position: absolute;
	left: auto;
	right: 89px;   /* 575 de la caja - 486, que son los 494 del boton menos 8 de hueco */
	top: 58px;
	width: auto;
	height: 40px;
	padding: 0 8px;
	border-radius: 999px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.5px;
	color: #000;
}
/* Botones altos: ocupan todo el alto de la pastilla para que se puedan pulsar
   sin apuntar, y el glifo queda a 15px del borde, donde lo pone el nodo. */
.pr-page .pr-cart-team-stepper button.pr-cart-step {
	flex: 0 0 auto;
	width: 24px;
	height: 40px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	line-height: 1;
}
/* El numero y su unidad se leen como una frase -"1 caja"-, asi que van al
   mismo tamaño. El campo se dimensiona por caracteres para que la pastilla no
   pegue un salto al pasar de 1 a 10. */
.pr-page .pr-cart-team-stepper input.pr-cart-box-qty {
	flex: 0 0 auto;
	width: 2ch;
	min-width: 2ch;
	height: auto;
	padding: 0;
	font-size: 16px;
	line-height: 1.2;
	text-align: center;
}
.pr-page .pr-cart-team-stepper .pr-cart-box-unit {
	flex: 0 0 auto;
	font-size: 16px;
	line-height: 1.2;
	white-space: nowrap;
}
/* Icono como background (los svg dentro de botones colapsan aquí — mismo
   gotcha que los sellos NSF/Sltex de la ficha US) */
.pr-cart-team-add {
	position: absolute;
	left: 494px;
	top: 58px;
	width: 41px;
	height: 41px;
	border: 0;
	border-radius: 50%;
	background-color: #b71f2f;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1.4'/%3E%3Ccircle cx='19' cy='21' r='1.4'/%3E%3Cpath d='M1.5 2h3l2.6 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px;
	color: #fff;
	cursor: default;
}
.pr-cart-team-add svg { display: none; }
.pr-cart-team-add:hover, .pr-cart-team-add:focus, .pr-cart-team-add:focus-visible { background-color: #b71f2f; color: #fff; border: 0; outline: none; box-shadow: none; }
/* Ya no es inerte: añade la caja al carrito */
.pr-page--cart button.pr-cart-team-add { cursor: pointer; transition: transform 0.2s ease; }
.pr-page--cart button.pr-cart-team-add:hover { transform: scale(1.07); }
.pr-page--cart button.pr-cart-team-add:focus-visible { outline: 2px solid #1e1e1e; outline-offset: 3px; }
.pr-page--cart button.pr-cart-team-add:disabled { opacity: 0.6; cursor: default; transform: none; }

/* Stepper de cajas: el número es un input real (antes era texto inerte) */
.pr-page--cart input.pr-cart-box-qty,
.pr-page--cart input.pr-cart-box-qty:focus,
.pr-page--cart input.pr-cart-box-qty:focus-visible {
	width: 20px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
	outline: none;
	text-align: right;
	font-family: var(--pr-font-body);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-cart-box-unit { font-size: 14px; letter-spacing: 0.5px; }

/* ---- Banda de suscripción de Active (frame Figma 69:8268 del Cart ES):
   misma caja gris 575×132 radio 30, con el botón naranja 157×40 a 385,50. ---- */
.pr-page--cart button.pr-cart-subs-btn {
	position: absolute;
	left: 385px;
	top: 50px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 157px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 30px;
	background: #f99b25;
	color: #fff;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.pr-page--cart button.pr-cart-subs-btn:hover { background: #f99b25; color: #fff; opacity: 0.9; transform: translateY(-1px); }
.pr-page--cart button.pr-cart-subs-btn:focus,
.pr-page--cart button.pr-cart-subs-btn:active { background: #f99b25; color: #fff; border: 0; box-shadow: none; outline: none; }
.pr-page--cart button.pr-cart-subs-btn:focus-visible { outline: 2px solid #1e1e1e; outline-offset: 3px; }
.pr-cart-subs-btn svg { display: block; flex-shrink: 0; }

/* ---- Pop-up de condiciones de la suscripción ----
   ⚠️ `display: flex` en un selector de clase GANA al `display: none` que el
   navegador aplica por el atributo `hidden` (viene de la hoja del user
   agent). Sin esta primera regla el modal queda invisible pero ocupando la
   pantalla entera y se come TODOS los clics del carrito. */
.pr-subs-modal[hidden] { display: none; }
.pr-subs-modal {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.28s ease;
}
/* Cinturón y tirantes: mientras no esté abierto tampoco recibe puntero */
.pr-subs-modal:not(.is-open) { pointer-events: none; }
.pr-subs-modal.is-open { pointer-events: auto; }
.pr-subs-modal.is-open { opacity: 1; }
.pr-subs-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.pr-subs-dialog {
	position: relative;
	width: 520px;
	max-width: calc(100vw - 48px);
	padding: 38px 44px 34px;
	background: #fff;
	border-radius: 30px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
	transform: translateY(14px) scale(0.97);
	transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pr-subs-modal.is-open .pr-subs-dialog { transform: none; }
.pr-page .pr-subs-dialog h2 {
	margin: 0 0 16px;
	font-family: var(--pr-font-body);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	color: #000;
}
.pr-page .pr-subs-body p,
.pr-page .pr-subs-body li {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 300;
	line-height: 22px;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-subs-body ul { margin: 0 0 4px 20px; padding: 0; list-style: disc; }
.pr-page .pr-subs-todo { color: #b71f2f; font-weight: 400; }
/* El modal de suscripción se usa también en la ficha de Active: sin incluir
   `pr-page--apr` aquí, el aspa y el botón se quedaban con el estilo por
   defecto de GeneratePress y el pop-up no se parecía al del carrito. */
:is(.pr-page--cart, .pr-page--apr) button.pr-subs-x {
	position: absolute;
	right: 22px;
	top: 22px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f5f5f5;
	color: #1e1e1e;
	cursor: pointer;
}
:is(.pr-page--cart, .pr-page--apr) button.pr-subs-x:hover { background: #e8e8e8; color: #1e1e1e; }
:is(.pr-page--cart, .pr-page--apr) button.pr-subs-cta {
	display: block;
	width: 100%;
	height: 47px;
	margin-top: 22px;
	border: 0;
	border-radius: 30px;
	background: #f99b25;
	color: #fff;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.5px;
	cursor: pointer;
}
:is(.pr-page--cart, .pr-page--apr) button.pr-subs-cta:hover { background: #f99b25; color: #fff; opacity: 0.9; }
@media (prefers-reduced-motion: reduce) {
	.pr-subs-modal, .pr-subs-dialog { transition: none; }
}

/* Frase del carrito vacío, bajo el título */
.pr-page .pr-cart-empty-lead {
	margin: -14px 0 34px;
	font-size: 16px;
	font-weight: 300;
	line-height: 22px;
	letter-spacing: 0.5px;
	color: #000;
}

/* Tarjeta "Resumen del pedido" */
.pr-cart-card {
	flex: none;
	width: 447px;
	background: #fff;
	border-radius: 30px;
	padding: 23px 42px 36px;
}
.pr-page .pr-cart-card-title { margin: 0 0 0 11px; font-family: var(--pr-font-body); font-size: 24px; font-weight: 400; line-height: 35px; letter-spacing: 0.5px; color: #000; }
.pr-cart-line { position: relative; margin: 21px 0 0 11px; font-size: 16px; font-weight: 400; line-height: 20px; letter-spacing: 0.5px; color: #000; }
.pr-cart-line--ship { margin-top: 23px; }
.pr-cart-line-val { position: absolute; left: 255px; top: 0; font-weight: 500; }
.pr-page .pr-cart-taxnote { margin: 4px 0 0 11px; font-size: 14px; font-weight: 300; line-height: 20px; letter-spacing: 0.5px; color: rgba(0, 0, 0, 0.4); }

.pr-cart-coupon { display: flex; align-items: center; margin-top: 45px; }
.pr-cart-coupon input,
.pr-chk-coupon input {
	width: 248px;
	height: 37px;
	border: 0;
	border-radius: 30px;
	background: #e8e8e8;
	padding: 0 17px;
	font-family: var(--pr-font-body);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-chk-coupon input { width: 244px; }
.pr-cart-coupon input::placeholder,
.pr-chk-coupon input::placeholder { color: rgba(0, 0, 0, 0.45); }
.pr-cart-apply,
.pr-chk-apply {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 37px;
	margin-left: 14px;
	padding: 0 15px;
	border: 0;
	border-radius: 30px;
	background: #000;
	color: #fff;
	font-family: var(--pr-font-body);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.5px;
	cursor: pointer;
}
.pr-chk-apply { margin-left: 17px; }
.pr-cart-apply:hover, .pr-chk-apply:hover { background: #000; color: #fff; opacity: 0.85; }
.pr-cart-apply:focus, .pr-cart-apply:focus-visible, .pr-cart-apply:active,
.pr-chk-apply:focus, .pr-chk-apply:focus-visible, .pr-chk-apply:active { background: #000; color: #fff; border: 0; outline: none; box-shadow: none; }
.pr-cart-coupon-applied,
.pr-chk-coupon-applied { margin: 10px 0 0 11px; font-size: 13px; font-weight: 400; letter-spacing: 0.5px; color: rgba(0, 0, 0, 0.6); }
.pr-page :is(.pr-cart-coupon-applied, .pr-chk-coupon-applied) a { text-decoration: underline; color: inherit; margin-left: 6px; }

.pr-cart-total,
.pr-chk-total {
	position: relative;
	display: flex;
	align-items: center;
	height: 41px;
	margin-top: 16px;
	border-radius: 30px;
	background: #e8e8e8;
	padding-left: 11px;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.5px;
	color: #000;
}
/* Mismo criterio y misma sangria que las lineas de arriba, para que las tres
   cifras compartan vertical. */
.pr-cart-total-val,
.pr-chk-total-val {
	position: absolute;
	left: auto;
	right: 11px;
	text-align: right;
	font-weight: 500;
}
.pr-page--cart a.pr-cart-go,
.pr-page--cart a.pr-cart-go:visited,
.pr-page--chk a.pr-cart-go,
.pr-page--chk a.pr-cart-go:visited {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 51px;
	margin-top: 13px;
	border-radius: 30px;
	background: #000;
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.5px;
}
.pr-page--cart a.pr-cart-go:hover { opacity: 0.85; color: #fff; }
.pr-cart-empty { margin-top: 10px; }
.pr-page .pr-cart-empty p { margin: 0 0 24px; font-size: 16px; font-weight: 300; letter-spacing: 0.5px; color: #000; }
:is(.pr-page--cart, .pr-page--chk) a.pr-cart-go--empty { display: inline-flex; padding: 0 28px; height: 45px; align-items: center; }

/* ---- Carrito vacío: mismas filas, pero ofreciendo los productos del
   subsitio (petición 07/08/2026). ---- */
.pr-cart-col--add { left: 501px; }
.pr-cart-row--offer { height: 114px; }
.pr-page .pr-cart-unit { display: block; margin-top: 4px; font-size: 14px; font-weight: 300; line-height: 18px; letter-spacing: 0.5px; color: rgba(0, 0, 0, 0.45); }
/* En el carrito, .pr-buy es solo el gancho del efecto cápsula: fuera la
   posición absoluta que la ficha da a su formulario (.pr-page--us .pr-buy),
   que con la piel pr-page--us también alcanzaría a estos. */
.pr-page--cart .pr-buy { position: static; left: auto; top: auto; margin: 0; }
.pr-page--cart .pr-cart-add-form.pr-buy { position: absolute; left: 501px; top: 38px; margin: 0; }
.pr-page--cart button.pr-cart-add {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 41px;
	padding: 0 20px;
	border: 0;
	border-radius: 30px;
	background: #000;
	color: #fff;
	font-family: var(--pr-font-body);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: transform 0.18s ease, opacity 0.2s ease;
}
.pr-page--cart button.pr-cart-add:hover { background: #000; color: #fff; opacity: 0.85; transform: translateY(-1px); }
.pr-page--cart button.pr-cart-add:focus,
.pr-page--cart button.pr-cart-add:focus-visible,
.pr-page--cart button.pr-cart-add:active { background: #000; color: #fff; border: 0; outline: none; box-shadow: none; }
.pr-page--cart button.pr-cart-add:disabled { opacity: 0.55; cursor: default; transform: none; }
.pr-cart-add svg { display: block; flex-shrink: 0; }
.pr-page .pr-cart-empty-note { margin: 14px 0 26px 11px; font-size: 16px; font-weight: 300; line-height: 21px; letter-spacing: 0.5px; color: rgba(0, 0, 0, 0.55); }
/* CTA del resumen vacío: mismo botón en gris, para no competir con "Añadir" */
.pr-page--cart a.pr-cart-go--off,
.pr-page--cart a.pr-cart-go--off:visited {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 51px;
	margin-top: 13px;
	border-radius: 30px;
	background: #e8e8e8;
	color: #000;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.5px;
}
.pr-page--cart a.pr-cart-go--off:hover { background: #e0e0e0; color: #000; }

/* ---- Vuelo del producto hasta el icono del carrito (sustituye a la barra
   "se ha añadido a tu carrito"). El envoltorio interpola la X en lineal y
   el hijo la Y con una curva de salida: de ahí sale el arco. ---- */
.pr-fly {
	position: fixed;
	z-index: 200;
	pointer-events: none;
	transition: transform 0.72s linear;
	will-change: transform;
}
.pr-fly-in {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform 0.72s cubic-bezier(0.42, 0, 0.62, 1), opacity 0.72s ease-in;
	will-change: transform, opacity;
}
.pr-fly-in--plain { background: #b71f2f; }
/* Lo que vuela es una cápsula: sin recorte circular y con una sombra suave
   para que se despegue del fondo mientras viaja. */
.pr-fly-in--capsule {
	border-radius: 0;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18));
}
/* Rebote del icono al recibir el producto */
.pr-page .pr-cart.is-bumped { animation: pr-cart-bump 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes pr-cart-bump {
	0% { transform: scale(1); }
	38% { transform: scale(1.28); }
	100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.pr-page .pr-cart.is-bumped { animation: none; }
}

/* -------------------------- Checkout (50:11491) -------------------------- */

/* Barra sin menú: mismo glass del header ES, solo con el logotipo */
.pr-chk-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 90;
	height: 76px;
	background:
		var(--pr-glass-light),
		rgba(0, 0, 0, 0.06);
	-webkit-backdrop-filter: var(--pr-glass-frost);
	backdrop-filter: var(--pr-glass-frost);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.18);
}
.pr-chk-bar .pr-logo { position: absolute; left: 119px; top: 24px; }
/* El logotipo de la barra del checkout, IGUAL en los tres mercados.
   En US y EU el <a> se estiraba a los 75px de la barra -la piel `pr-page--us`
   le da alto completo- mientras en ES medía 36, así que el texto quedaba
   descolgado y la barra parecía otra (avisado el 26/08/2026: "menu en EU y US
   mal"). Se le fija su propio alto y se centra a mano. */
.pr-page .pr-chk-bar .pr-logo,
.pr-page--us .pr-chk-bar .pr-logo {
	display: inline-block;
	height: auto;
	line-height: 1.2;
	top: 50%;
	transform: translateY(-50%);
}

.pr-chk-bar .pr-logo--text {
	font-family: var(--pr-font-brand);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 1px;
	color: #000;
	text-decoration: none;
}

/* pr-hide-header (filtro body_class de is_checkout) pone padding 0: aquí sí
   hay barra fija de 76, así que se restaura (regla posterior, misma
   especificidad → gana). */
.pr-page--chk .pr-main { padding-top: 76px; }

.pr-chk-canvas {
	padding: 0 206px 80px 118px;
	min-height: 1036px;
}
/* `flex-wrap: wrap` no es decorativo (02/09/2026): el contenedor de avisos
   —`.woocommerce-notices-wrapper`, donde Stripe y WooCommerce pintan sus
   errores— es el PRIMER hijo de este formulario y lleva `flex: 0 0 100%`.
   Vacio no molesta porque va con `display: none`, pero en cuanto entra un
   aviso ocupa los 1116px del formulario y, sin `wrap`, se queda en la MISMA
   fila que las dos columnas: 1116 + 529 + 447 se pasaban 770px del ancho, la
   columna de datos se iba fuera de la pantalla y aparecia scroll horizontal.
   Con `wrap` el aviso se lleva su fila y las columnas bajan debajo, juntas.
   Sin aviso la maqueta es exactamente la de antes, porque las dos columnas
   (529 + 447 = 976) caben de sobra en los 1116. En movil no se notaba: alli
   este formulario ya es `flex-direction: column`. */
.pr-chk-form { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
.pr-chk-left { flex: none; width: 529px; }
.pr-page .pr-chk-title {
	margin: 99px 0 0;
	font-family: var(--pr-font-body);
	font-size: 32px;
	font-weight: 600;
	line-height: 35px;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-chk-notices { margin-top: 24px; width: 529px; }
.pr-chk-notices:empty { display: none; }
.pr-page .pr-chk-sub { margin: 38px 0 0; font-family: var(--pr-font-body); font-size: 16px; font-weight: 400; line-height: 31px; letter-spacing: 0.5px; color: #000; }
.pr-page .pr-chk-sub--billing { margin-top: 16px; }

.pr-chk-fields { display: flex; flex-wrap: wrap; column-gap: 18px; width: 529px; margin-top: 18px; }
.pr-page .pr-chk-field { width: 529px; margin: 0 0 19px; }
.pr-page .pr-chk-field--half { width: 255.5px; }
.pr-page .pr-chk-field label {
	display: block;
	margin: 0 0 5px;
	font-family: var(--pr-font-body);
	font-size: 14px;
	font-weight: 300;
	line-height: 16px;
	letter-spacing: 0;
	color: #000;
}
.pr-chk-field label span { color: #b71f2f; }
.pr-chk-field input,
.pr-chk-field select {
	width: 100%;
	height: 39px;
	border: 0;
	border-radius: 30px;
	background: #e8e8e8;
	padding: 0 17px;
	font-family: var(--pr-font-body);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-chk-field textarea {
	width: 100%;
	height: 110px;
	border: 0;
	border-radius: 20px;
	background: #e8e8e8;
	padding: 11px 17px;
	font-family: var(--pr-font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0.5px;
	color: #000;
	resize: vertical;
}
.pr-chk-field :is(input, select, textarea):focus,
.pr-chk-field :is(input, select, textarea):focus-visible {
	outline: 2px solid rgba(0, 0, 0, 0.35);
	outline-offset: -2px;
	background: #e8e8e8;
	box-shadow: none;
}
.pr-chk-field input::placeholder { color: rgba(0, 0, 0, 0.35); }
.pr-chk-field select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size: 14px;
	cursor: pointer;
}

/* ==========================================================================
   EL DESPLEGABLE DE PROVINCIA Y DE PAÍS, CON LA PIEL DEL SITIO (31/08/2026)
   --------------------------------------------------------------------------
   El <select> cerrado ya iba tematizado, pero la LISTA que se abre la pintaba
   el sistema: fondo blanco de serie y la fila elegida en el AZUL de Windows.
   Eso no se puede cambiar con CSS clásico —ni `option:checked` ni
   `accent-color` llegan al desplegable en Chrome—.
   Lo que sí llega es `appearance: base-select`: el navegador cede el control de
   la lista al CSS y aparecen `::picker(select)`, `::picker-icon` y
   `::checkmark`. Donde no esté soportado, el bloque entero se ignora y queda
   la lista nativa de siempre, que es lo que hay hoy: se mejora donde se puede
   y no se rompe donde no.
   ========================================================================== */
@supports (appearance: base-select) {
	.pr-chk-field select,
	.pr-chk-field select::picker(select) {
		appearance: base-select;
	}

	/* El campo cerrado. La flecha pasa a ser un pseudoelemento, así que se
	   retira la del fondo y el hueco que se le había reservado. */
	.pr-chk-field select {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		background-image: none;
		padding-right: 15px;
		text-align: left;
	}
	.pr-chk-field select::picker-icon {
		color: #000;
		transition: transform 0.22s ease;
	}
	.pr-chk-field select:open::picker-icon { transform: rotate(180deg); }

	/* La lista. Radio, sombra y aire de las tarjetas del sitio. */
	.pr-chk-field select::picker(select) {
		border: 0;
		border-radius: 20px;
		background: #fff;
		box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
		padding: 6px;
		margin-top: 6px;
		max-height: 320px;
		overflow-y: auto;
		min-width: anchor-size(width);
		scrollbar-width: thin;
	}
	.pr-chk-field select option {
		display: flex;
		align-items: center;
		gap: 8px;
		border-radius: 14px;
		padding: 9px 12px;
		background: transparent;
		font-family: var(--pr-font-body);
		font-size: 15px;
		font-weight: 400;
		letter-spacing: 0.5px;
		color: #000;
		cursor: pointer;
	}
	.pr-chk-field select option:hover,
	.pr-chk-field select option:focus {
		background: var(--pr-gray, #f5f5f5);
		outline: none;
	}
	/* La fila elegida, en NEGRO (peticion de Pablo, 31/08/2026): el rojo de la
	   marca se reserva para lo que pide accion, no para un estado. */
	.pr-chk-field select option:checked {
		background: #000;
		color: #fff;
	}
	/* El palote de «elegido» que añade el navegador: al final de la fila y del
	   color del texto, no el azul del sistema. */
	.pr-chk-field select option::checkmark {
		order: 1;
		margin-left: auto;
		color: currentColor;
	}
	/* La primera opción es el «Select…» / «Provincia»: se atenua, como el
	   `placeholder` de los campos de texto. */
	.pr-chk-field select option[value=""] { color: rgba(0, 0, 0, 0.45); }
	.pr-chk-field select option[value=""]:checked { color: rgba(255, 255, 255, 0.85); }
}
/* El CIF solo aparece con la empresa informada (JS pone .is-on). Se atenúa
   en el sitio en vez de aparecer de golpe; el hueco de la rejilla se
   conserva para que Apellidos no baile. */
.pr-page .pr-chk-cif {
	visibility: hidden;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.34s ease, transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.34s;
}
.pr-page .pr-chk-cif.is-on {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition: opacity 0.34s ease, transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s;
}

/* ---- Bloques que se despliegan (facturación aparte, crear cuenta, datos
   de tarjeta). `grid-template-rows: 0fr → 1fr` es lo que permite animar una
   altura automática sin medirla con JS. ---- */
.pr-chk-reveal {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition:
		grid-template-rows 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
		opacity 0.3s ease,
		margin 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pr-chk-reveal.is-open { grid-template-rows: 1fr; opacity: 1; }
.pr-chk-reveal-in { overflow: hidden; min-height: 0; }
@media (prefers-reduced-motion: reduce) {
	.pr-chk-reveal { transition: none; }
	.pr-page .pr-chk-cif { transition: none; }
}

.pr-chk-checks { width: 529px; }
.pr-chk-check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 10px;
	padding-left: 9px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 400;
	line-height: 21px;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-chk-check input {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	border: 0;
	border-radius: 4px;
	background: #e8e8e8;
	cursor: pointer;
}
.pr-chk-check input:checked {
	background-color: #1e1e1e;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px;
}
.pr-chk-check input:focus-visible { outline: 2px solid rgba(0, 0, 0, 0.35); outline-offset: 1px; }

.pr-chk-billing.is-open { margin: 14px 0 10px; }
.pr-chk-account.is-open { margin: 4px 0 10px; }
.pr-chk-account .pr-chk-fields { margin-top: 8px; }
.pr-page .pr-chk-account .pr-chk-field { margin-bottom: 8px; }
.pr-page .pr-chk-account-hint { margin: 0 0 8px; font-size: 13px; font-weight: 300; letter-spacing: 0.5px; color: rgba(0, 0, 0, 0.55); }

/* Tarjeta "Resumen del pedido" del checkout */
.pr-chk-card {
	flex: none;
	width: 447px;
	margin-top: 6px;
	background: #fff;
	border-radius: 30px;
	padding: 23px 42px 34px;
}
.pr-page .pr-chk-card-title { margin: 0 0 0 11px; font-family: var(--pr-font-body); font-size: 24px; font-weight: 400; line-height: 35px; letter-spacing: 0.5px; color: #000; }
/* Rejilla, no cotas absolutas (avisado el 26/08/2026: "se solapa el nombre del
   producto de Suscripcion").
   Lo que estaba mal: el nombre iba en `position: absolute; top: 0` con
   `line-height: 20px`, y el precio en `top: 26px`. Eso da por hecho que el
   nombre cabe en UNA linea. "Suscripcion a Active ProResolve" ocupa dos (40px),
   se metia en el hueco del precio y los dos textos se pintaban encima.
   Con la rejilla ninguna cota depende de lo que mida el texto: el nombre se
   queda las lineas que necesite y lo de abajo baja solo. Es el mismo arreglo
   que ya llevaba la version movil de esta fila.
   El `min-height` conserva los 114px del diseno cuando el nombre es corto, que
   es el alto de la foto y el que marca el ritmo de la tarjeta. */
.pr-chk-item {
	position: relative;
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr);
	grid-template-areas:
		"foto nombre"
		"foto precio"
		"foto iva"
		"foto acciones";
	align-content: start;
	align-items: start;
	column-gap: 44px;   /* 174 del diseno - 130 de la foto */
	height: auto;
	min-height: 114px;
	margin: 32px 0 0 11px;
}
.pr-chk-thumb {
	position: static;
	grid-area: foto;
	align-self: start;
	width: 130px;
	/* Alto DEFINIDO a proposito: la foto es un contenedor flex y su imagen
	   lleva `max-height: 88%`, que contra un alto `auto` no resuelve y deja
	   crecer la imagen a su tamano natural (el mismo tropiezo que en movil). */
	height: 114px;
	border-radius: 20px;
	background: rgba(217, 217, 217, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.pr-chk-thumb img { max-width: 78%; max-height: 88%; width: auto; height: auto; object-fit: contain; }
.pr-chk-item-name {
	grid-area: nombre;
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 0.5px;
	color: #000;
	/* Hasta dos lineas: los nombres de suscripcion son largos y hay que poder
	   leer de que producto son. Un nombre desmedido se corta, no descuadra. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.pr-chk-item-price { grid-area: precio; margin-top: 6px; font-size: 16px; font-weight: 400; line-height: 20px; letter-spacing: 0.5px; color: #000; }
/* El importe del IVA va JUSTO debajo del precio (Pablo, 20/08); cabe en el
   hueco de 25px que queda hasta el stepper (top 71). */
.pr-chk-item-tax { grid-area: iva; margin-top: 1px; font-size: 12px; font-weight: 300; line-height: 16px; letter-spacing: 0.5px; color: rgba(0, 0, 0, 0.4); }
.pr-page .pr-chk-taxnote { margin: 4px 0 0 11px; font-size: 14px; font-weight: 300; line-height: 20px; letter-spacing: 0.5px; color: rgba(0, 0, 0, 0.4); }
.pr-chk-stepper {
	position: static;
	grid-area: acciones;
	justify-self: start;
	margin-top: 8px;
	width: 84px;
	height: 33px;
	border-radius: 20px;
	background: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 14px;
}
.pr-page--chk .pr-chk-stepper a,
.pr-page--chk .pr-chk-stepper a,
.pr-page--chk .pr-chk-stepper .is-off {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 33px;
}
.pr-page--chk .pr-chk-stepper a:visited { color: #000; font-size: 15px; line-height: 1; }
.pr-chk-stepper b { font-weight: 400; font-size: 14px; }
.pr-chk-stepper .is-off { color: rgba(0, 0, 0, 0.3); font-size: 15px; line-height: 1; }
.pr-page--chk a.pr-chk-item-remove,
.pr-page--chk a.pr-chk-item-remove {
	/* ⚠️ El posicionamiento original estaba declarado SOLO en la variante
	   `:visited` — y los navegadores ni siquiera aplican posición desde
	   :visited (restricción de privacidad). La papelera llevaba desde el
	   principio SIN posicionar, cayendo en el flujo: la "papelera
	   descuadrada" del pantallazo de Pablo (20/08). */
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 33px;
	height: 33px;
	/* Misma celda que el selector; los separan sus propias cotas. Los 92px son
	   los que ya habia en el diseno: 266 de la papelera menos 174 del inicio de
	   la columna de texto, o sea los 84 del selector mas 8 de hueco. */
	grid-area: acciones;
	justify-self: start;
	margin: 8px 0 0 92px;
	align-self: center;
}
.pr-page--chk a.pr-chk-item-remove:visited { color: #b3b3b3; }
.pr-page--chk a.pr-chk-item-remove:hover { color: #b71f2f; }

.pr-chk-line { position: relative; margin: 23px 0 0 11px; font-size: 16px; font-weight: 400; line-height: 20px; letter-spacing: 0.5px; color: #000; }
.pr-chk-item + .pr-chk-line { margin-top: 47px; }
/* Los importes se alinean por la DERECHA, no por una `left` fija.
   Iban colocados con `left: 255px` (y el total con `left: 273px`), o sea
   alineados por la izquierda: como cada cifra mide distinto, sus bordes
   derechos caian en tres sitios — 359, 350 y 366 — y "0,00 €" quedaba
   visiblemente corto respecto a "38,00 €" (avisado el 26/08/2026).
   Una columna de dinero se lee por la derecha: las unidades tienen que caer
   siempre en la misma vertical. Los 11px son los mismos que el relleno
   izquierdo de la banda del total, asi que el bloque queda simetrico. */
.pr-chk-line-val {
	position: absolute;
	left: auto;
	right: 11px;
	top: 0;
	text-align: right;
	font-weight: 500;
}

/* Lineas de impuesto (31/08/2026). En US el rotulo lo pone Stripe Tax y puede
   ser largo de verdad — "Mecklenburg County Transit Sales Tax" —, y el importe
   va posicionado en ABSOLUTO a la derecha: sin reservarle sitio, el nombre se le
   mete por debajo. Con el relleno parte linea antes de llegar. */
.pr-chk-line--tax { padding-right: 86px; }
.pr-cart-line--tax { padding-right: 86px; }
.pr-ty-line--tax > span:first-child { padding-right: 14px; }

.pr-page .pr-chk-paytitle { margin: 51px 0 0 11px; font-size: 16px; font-weight: 400; line-height: 20px; letter-spacing: 0.5px; color: #000; }
.pr-chk-pay { margin-top: 31px; }
.pr-chk-pay-row {
	position: relative;
	display: flex;
	align-items: center;
	height: 41px;
	margin-left: 11px;
	cursor: pointer;
}
.pr-chk-pay-ico { width: 24px; height: auto; margin-left: 7px; flex: none; }
.pr-chk-pay-ico--pr_paypal { width: 30px; margin-left: 3px; }
/* Etiquetas a 10px Medium: así están en el frame (avisado como posible errata) */
.pr-chk-pay-name { margin-left: 16px; font-size: 10px; font-weight: 500; letter-spacing: 0; color: #000; }
.pr-chk-pay-row input {
	appearance: none;
	-webkit-appearance: none;
	position: absolute;
	left: 175px;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 1.6px solid #1e1e1e;
	border-radius: 50%;
	background: none;
	cursor: pointer;
}
.pr-chk-pay-row input:checked { background: radial-gradient(circle, #1e1e1e 0 4px, transparent 4.6px); }
/* El circulo de seleccion ES el propio radio, y WooCommerce le pone
   `style="display:none"` EN LINEA cuando queda UNA sola pasarela disponible
   (su plantilla lo hace a proposito: si no hay nada que elegir, no pinta el
   control). Aqui eso deja la fila sin ninguna marca: solo el icono y la
   palabra "Tarjeta", con aspecto de estar apagada — es lo que se veia como
   "no me deja el metodo de pago" (26/08/2026).
   Pasa desde que las pasarelas de demostracion se retiran solas y en ES ya
   solo queda Stripe. Con `!important` porque hay que ganarle a un estilo en
   linea. Se sigue viendo marcado, que es la informacion que importa: con esta
   tarjeta se te va a cobrar. */
.pr-chk-pay-row input.input-radio {
	display: block !important;
}
.pr-chk-pay-row input:focus-visible { outline: 2px solid rgba(0, 0, 0, 0.35); outline-offset: 2px; }
.pr-page .pr-chk-pay-none { margin: 0 0 0 11px; font-size: 14px; font-weight: 300; color: rgba(0, 0, 0, 0.6); }

/* Al intentar pagar sin elegir método: aviso en el sitio, no un error tras
   recargar. El texto lo pinta el ::after para no tocar el marcado. */
.pr-chk-pay.is-missing {
	position: relative;
	padding: 10px 0 34px;
	border-radius: 16px;
	box-shadow: 0 0 0 1.5px rgba(183, 31, 47, 0.55);
	animation: pr-pay-nudge 0.4s ease;
}
.pr-chk-pay.is-missing::after {
	content: 'Elige un método de pago para continuar.';
	position: absolute;
	left: 11px;
	bottom: 10px;
	font-size: 14px;
	font-weight: 300;
	letter-spacing: 0.5px;
	color: #b71f2f;
}
@keyframes pr-pay-nudge {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
	.pr-chk-pay.is-missing { animation: none; }
}

/* Desplegable de datos de tarjeta (los inputs no llevan name a propósito) */
.pr-chk-cardbox { width: 356px; margin-left: 11px; }
.pr-chk-cardbox.is-open { margin: 10px 0 14px 11px; }
.pr-page .pr-chk-cardbox .pr-chk-field { width: 100%; margin-bottom: 12px; }
.pr-chk-cardbox .pr-chk-fields { width: 100%; margin-top: 0; column-gap: 14px; }
.pr-page .pr-chk-cardbox .pr-chk-fields .pr-chk-field--half { width: 171px; }

.pr-chk-coupon { display: flex; align-items: center; margin-top: 32px; }
.pr-chk-total { margin-top: 15px; }
.pr-chk-place {
	display: block;
	width: 100%;
	height: 51px;
	margin-top: 13px;
	border: 0;
	border-radius: 30px;
	background: #000;
	color: #fff;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.5px;
	cursor: pointer;
}
.pr-chk-place:hover { background: #000; color: #fff; opacity: 0.85; }
.pr-chk-place:focus, .pr-chk-place:focus-visible, .pr-chk-place:active { background: #000; color: #fff; border: 0; outline: none; box-shadow: none; }

/* ---------------------- Gracias por el pedido (50:11480) ---------------------- */

.pr-ty { padding-top: 239px; }
.pr-ty-check {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	margin: 0 auto;
	border-radius: 50%;
	background: #000;
	color: #fff;
}
.pr-page .pr-ty-title {
	margin: 42px 0 0;
	font-family: var(--pr-font-body);
	font-size: 40px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.5px;
	color: #000;
	text-align: center;
}
.pr-ty-intro { width: 508px; margin: 25px auto 0; text-align: center; }
.pr-page .pr-ty-intro p { margin: 0; font-size: 16px; font-weight: 300; line-height: 20px; letter-spacing: 0.5px; color: #000; }
.pr-page .pr-ty-intro p + p { margin-top: 20px; }

/* Detalles del pedido (añadido sobre el frame, estética del resumen) */
.pr-ty-card {
	width: 640px;
	margin: 56px auto 0;
	background: #fff;
	border-radius: 30px;
	padding: 34px 48px 38px;
}
.pr-ty-card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.pr-page .pr-ty-card-head h2 { margin: 0; font-family: var(--pr-font-body); font-size: 24px; font-weight: 400; line-height: 35px; letter-spacing: 0.5px; color: #000; }
.pr-ty-meta { font-size: 14px; font-weight: 300; letter-spacing: 0.5px; color: rgba(0, 0, 0, 0.5); }
.pr-page .pr-ty-items { list-style: none; margin: 0; padding: 0; }
.pr-page .pr-ty-items li { display: flex; justify-content: space-between; margin: 0; padding: 10px 0; border-bottom: 1px solid #efefef; font-size: 16px; font-weight: 400; letter-spacing: 0.5px; color: #000; }
.pr-ty-item-name em { font-style: normal; color: rgba(0, 0, 0, 0.5); margin-left: 6px; }
.pr-ty-line { display: flex; justify-content: space-between; margin-top: 12px; font-size: 16px; font-weight: 400; letter-spacing: 0.5px; color: #000; }
.pr-ty-line--total { margin-top: 16px; padding-top: 16px; border-top: 1px solid #e8e8e8; font-weight: 600; }
.pr-page .pr-ty-taxnote { margin: 4px 0 0; font-size: 13px; font-weight: 300; letter-spacing: 0.5px; color: rgba(0, 0, 0, 0.4); }
.pr-ty-grid { display: flex; gap: 40px; margin-top: 26px; }
.pr-ty-grid > div { flex: 1; }
.pr-page .pr-ty-grid h3 { margin: 0 0 6px; font-family: var(--pr-font-body); font-size: 14px; font-weight: 600; letter-spacing: 0.5px; color: #000; }
.pr-page .pr-ty-grid .pr-ty-h3-gap { margin-top: 16px; }
.pr-page .pr-ty-grid p { margin: 0; font-size: 15px; font-weight: 300; line-height: 20px; letter-spacing: 0.5px; color: #000; }

.pr-ty-band { margin-top: 84px; background: #e8e8e8; border-radius: 60px 60px 0 0; padding: 38px 0 42px; }
.pr-ty-band-in { width: 1440px; margin: 0 auto; padding-left: 134px; }
.pr-page .pr-ty-band-in > * { width: 585px; }
.pr-page .pr-ty-band-title { margin: 0 0 20px; font-size: 16px; font-weight: 500; line-height: 20px; letter-spacing: 0.5px; color: #000; }
.pr-page .pr-ty-band-in ul { list-style: disc; margin: 0 0 20px 20px; padding: 0; }
.pr-page .pr-ty-band-in li { margin: 0; font-size: 16px; font-weight: 300; line-height: 20px; letter-spacing: 0.5px; color: #000; }
.pr-page .pr-ty-band-in p { margin: 0 0 20px; font-size: 16px; font-weight: 300; line-height: 20px; letter-spacing: 0.5px; color: #000; }
.pr-page .pr-ty-band-in p:last-child { margin-bottom: 0; }

/* ------------------------ Página no encontrada (50:11341) ------------------------ */

/* 566 = 642 (techo del footer en el frame) − 76 de la barra. El `.pr-page`
   delante es necesario: `.pr-esh-canvas` ya trae `height: 100%` desde
   `:is(.pr-page--home-es, .pr-page--us, .pr-page--home)`, que es (0,2,0). */
/* El aire de arriba va como padding del canvas y no como margen del h1: el
   margen del primer hijo se escapa del contenedor y arrastraría el footer. */
.pr-page .pr-nf-canvas { text-align: center; height: 566px; padding-top: 183px; }
.pr-page .pr-nf-title {
	margin: 0;
	font-family: var(--pr-font-body);
	font-size: 40px;
	font-weight: 600;
	line-height: 35px;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-page .pr-nf-text { width: 432px; margin: 30px auto 0; font-size: 16px; font-weight: 300; line-height: 20px; letter-spacing: 0.5px; color: #000; }
.pr-page a.pr-nf-cta,
.pr-page a.pr-nf-cta:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	margin-top: 53px;
	padding: 0 18px;
	border-radius: 30px;
	background: #000;
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.5px;
}
.pr-page a.pr-nf-cta:hover { opacity: 0.85; color: #fff; }

/* ==========================================================================
   Home US — ronda 07/08/2026 (frame 79:5330, página "Export"): menú sin
   cápsula con logotipo de texto, bote nuevo con sellos horneados, compra
   real, newsletter con caja de vidrio a la izquierda (sin titular), 7 FAQ y
   footer compartido de un solo botón. La página pasa a maqueta fija 1440
   con el zoom compartido (clase pr-page--home añadida al módulo JS).
   ========================================================================== */

body.pr-page--home { min-width: 1440px; }

/* Menú 79:5439: nav de texto suelto, sin cápsula en ningún estado */
.pr-page--home .pr-nav,
.pr-page--home .pr-header.is-over-hero .pr-nav {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	padding: 0;
	/* Separaciones del menú 79:4995: los ítems quedan centrados en
	   598 / 780,5 / 902,5 sobre el nav centrado a 720. Son 10 y no 54 porque
	   aquí cada enlace conserva sus 22px de relleno a cada lado. */
	gap: 10px;
}
/* Logotipo a 119 del borde, como el resto de mercados */
.pr-page--home .pr-header { padding: 0 max(119px, calc((100% - 1440px) / 2 + 119px)); }
.pr-page--home .pr-logo--text { line-height: 76px; }

/* Hero 782px (a 1440): titular Sansation 40 al 120% y botón a 120 del borde */
.pr-page--home .pr-home-hero { height: clamp(430px, 54.31vw, 782px); }
.pr-page--home .pr-home-hero-content { padding-bottom: 120px; }
.pr-page--home .pr-home-hero-content h1 { line-height: 1.15; max-width: 500px; }
.pr-page--home .pr-home-hero-content .pr-btn-black { margin-top: 18px; }

/* Intro: bote 550×648 (grupo 79:5424) a 11 del borde del contenedor y texto
   arrancando en 585 */
.pr-page--home .pr-home-intro { padding: 49px 0; }
/* Frames 154:5082 (US) y 154:5083 (EU): la caja de texto se alinea con el bote.
   El bote (550×648, con sus sellos ya en la propia imagen) arranca en 144 y la
   columna de texto en 759, que es el borde de la caja de vidrio (714) más sus
   45 de sangría. */
.pr-page--home .pr-home-intro-grid {
	display: grid;
	grid-template-columns: 550px 1fr;
	gap: 65px;
	/* Arriba, no centrado: así las cotas del texto se miden desde el borde
	   superior del bote, que es como están puestas en el frame. */
	align-items: start;
	/* Cotas absolutas del frame (144 → 1350) en vez del relleno del contenedor,
	   que no es el mismo en US y en EU. */
	width: 1206px;
	max-width: none;
	margin-left: max(144px, calc((100% - 1440px) / 2 + 144px));
	margin-right: 0;
	padding: 0;
}
.pr-page--home .pr-home-intro-media img { width: 550px; height: auto; max-width: none; }
/* Cotas del texto respecto al borde superior del bote (154:5082 y 154:5083):
   titular a 133, entradilla a 188 y botón a 505, dentro del vidrio (82-586).
   Antes el bloque bajaba 46 de más y el botón se salía por abajo de la caja. */
.pr-page--home .pr-home-intro-copy h2 { margin-top: 133px; }
.pr-page--home .pr-home-intro-lead { margin-top: 26px; }
/* El botón va pegado al borde derecho del texto (116:12756), no debajo a la
   izquierda: el formulario toma el ancho del cuerpo y lo empuja al final. */
.pr-home-buy {
	display: flex;
	justify-content: flex-end;
	max-width: 524px;
	margin: 0;
}
/* Botón 97:11197: 128x40 r30 en rojo de marca, con el carrito de 16 a 12 del
   borde y 8 de separación con el texto. */
.pr-page--home .pr-btn-cart,
.pr-page--home button.pr-btn-cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 128px;
	height: 40px;
	padding: 0 12px;
	border: 0;
	border-radius: 30px;
	background: var(--pr-red);
	color: #fff;
	cursor: pointer;
	font-family: var(--pr-font-body);
	font-size: 14px;
	line-height: 16px;
	letter-spacing: 0;
	margin-top: 36px;
}
.pr-page--home .pr-btn-cart svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.pr-page--home button.pr-btn-cart:hover { background: var(--pr-red); color: #fff; opacity: 0.85; }
.pr-page--home button.pr-btn-cart:focus,
.pr-page--home button.pr-btn-cart:focus-visible,
.pr-page--home button.pr-btn-cart:active { background: var(--pr-red); color: #fff; border: 0; outline: none; box-shadow: none; }

/* Newsletter: caja de vidrio 468×252 r30 (Rectangle 4198: negro 10% + Vidrio)
   a la izquierda, texto blanco de 277 y formulario dentro. Sin titular. */
.pr-page--home .pr-home-community { height: 417px; }
.pr-page--home .pr-home-community .pr-container { display: none; }
.pr-home-community-glass {
	position: absolute;
	left: max(135px, calc((100% - 1440px) / 2 + 135px));
	top: 80px;
	width: 468px;
	height: 252px;
	border-radius: 30px;
	background:
		var(--pr-glass-light),
		rgba(0, 0, 0, 0.06);
	-webkit-backdrop-filter: var(--pr-glass-frost);
	backdrop-filter: var(--pr-glass-frost);
	box-shadow: var(--pr-glass-edge);
	/* Caja 115:4776: título a 37 del borde y 44 de sangría */
	padding: 37px 44px 0 44px;
	z-index: 1;
}
/* Título "Join our community" (Medium 24) — la caja US también lo lleva */
.pr-page .pr-home-community-glass h2 {
	margin: 0 0 7px;
	font-family: var(--pr-font-body);
	font-size: 24px;
	font-weight: 500;
	line-height: 30px;
	letter-spacing: 0;
	color: #fff;
}
.pr-page .pr-home-community-glass p {
	margin: 0;
	width: 288px;
	font-size: 16px;
	font-weight: 300;
	line-height: 19px;
	letter-spacing: 0.5px;
	color: #fff;
}
.pr-home-community-glass .pr-newsletter { margin-top: 22px; display: flex; gap: 10px; }
.pr-home-community-glass .pr-newsletter input {
	width: 249px;
	height: 40px;
	border: 0;
	border-radius: 30px;
	background: #fff;
	padding: 0 16px;
	font-family: var(--pr-font-body);
	font-size: 14px;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-home-community-glass .pr-newsletter button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	border: 0;
	/* Botón del componente 115:4776: #1e1e1e al 20% con vidrio, texto blanco
	   y radio 30 (no era blanco translúcido). */
	border-radius: 30px;
	background:
		var(--pr-glass-light),
		rgba(30, 30, 30, 0.20);
	-webkit-backdrop-filter: var(--pr-glass-frost);
	backdrop-filter: var(--pr-glass-frost);
	box-shadow: var(--pr-glass-edge);
	color: #fff;
	font-family: var(--pr-font-body);
	font-size: 14px;
	letter-spacing: 0.5px;
	cursor: pointer;
}
.pr-home-community-glass .pr-newsletter button:hover { color: #fff; opacity: 0.9; }
.pr-home-community-glass .pr-newsletter button:focus,
.pr-home-community-glass .pr-newsletter button:focus-visible { color: #fff; border: 0; outline: none; box-shadow: none; }

/* ==========================================================================
   Home EU (page-home-eu.php — frame 79:5554). Hereda todo de pr-page--home;
   aquí solo van sus diferencias: bote a 68 del borde, banda SSPAAIN con caja
   de vidrio, newsletter con titular y botón del footer del frame 79:4988.
   ========================================================================== */

/* Bote EU a x68 (grupo 79:5617); el contenedor arranca en 80. OJO: un
   margin-left aquí anularía el 'margin: 0 auto' que centra .pr-container,
   así que el desplazamiento va con left relativo. */
/* EU comparte ya las cotas de US (frame 154:5083): el desplazamiento propio que
   tenía aquí sobraba desde que la rejilla va con márgenes absolutos. */
.pr-page--home-eu .pr-home-intro-grid { position: relative; left: 0; }
/* La altura natural de Lipinova flota con la carga de fuentes: se fija a
   la del frame (US 1002 / EU 1038) para que las secciones posteriores
   caigan donde deben. */
.pr-page--home .pr-home-lipinova { min-height: 1002px; }
.pr-page--home-eu .pr-home-lipinova { min-height: 1073px; }

/* Banda SSPAAIN: foto de moléculas del frame 152:10790 (1440×420 exactos),
   420 de alto; texto blanco a la izquierda y caja de vidrio 468×252 con
   "Learn more" negro dentro (cotas del frame, y de banda 3249). */
.pr-home-band {
	position: relative;
	height: 420px;
	/* Sin margen: dejaba una franja blanca entre Lipinova y la banda (los
	   35px se recuperan en el alto de la sección anterior). */
	margin-top: 0;
	background: url(assets/img/eu-band-bg.jpg) center / cover no-repeat #1e1e1e;
}
/* Sin velo, igual que la banda de ES.
   Aquí había un `rgba(0,0,0,0.45)` para hacer legible el texto blanco, pero
   ES usa la MISMA foto (`eu-band-bg.jpg`) sin velo ninguno y se lee bien, así
   que este oscurecía la banda de EU sin motivo y la dejaba distinta. */
.pr-home-band-in { position: relative; height: 100%; }
.pr-page .pr-home-band h2 {
	position: absolute;
	left: 55px;
	top: 82px;
	margin: 0;
	width: 604px;
	font-family: var(--pr-font-body);
	font-size: 32px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.32px;
	color: #fff;
}
.pr-home-band-copy {
	position: absolute;
	left: 55px;
	/* Antes 145px: el cuerpo quedaba despegado del titular (23px de hueco
	   bajo una línea de 40px). Se acerca, igual que en la banda de ES. */
	top: 136px;
	width: 560px;
}
.pr-page .pr-home-band-copy p {
	margin: 0 0 19px;
	font-size: 16px;
	font-weight: 400;
	/* Igualado a ES (1.2 / -0.16px). El 20px de interlineado con +0.5px de
	   tracking separaba las letras y el texto se veía más pesado que en ES. */
	line-height: 1.2;
	letter-spacing: -0.16px;
	color: #fff;
}
.pr-home-band-copy strong { font-weight: 600; }
.pr-home-band-box {
	position: absolute;
	left: 744px;
	top: 113px;
	width: 468px;
	height: 252px;
	border-radius: 30px;
	background:
		var(--pr-glass-light),
		rgba(0, 0, 0, 0.06);
	-webkit-backdrop-filter: var(--pr-glass-frost);
	backdrop-filter: var(--pr-glass-frost);
	box-shadow: var(--pr-glass-edge);
	padding: 25px 37px 0 28px;
}
/* El titular de la tarjeta, con las cotas del <h3> de ES (24px / 400):
   antes era el primer <p> del bloque y salía a 16px, o sea del mismo tamaño
   que el cuerpo, cuando en ES es un titular de verdad. */
.pr-page .pr-home-band-box h3 {
	margin: 0 0 18px;
	width: 403px;
	font-family: var(--pr-font-body);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.24px;
	color: #fff;
}
.pr-page .pr-home-band-box p {
	margin: 0 0 20px;
	width: 403px;
	font-size: 16px;
	font-weight: 400;
	/* Como ES: interlineado 1.2 y tracking negativo. El 20px/0.5px de antes
	   abría las letras y hacía que el texto pareciera más pesado que el de ES. */
	line-height: 1.2;
	letter-spacing: -0.16px;
	color: #fff;
}
.pr-page a.pr-home-band-btn,
.pr-page a.pr-home-band-btn:visited {
	position: absolute;
	left: 293px;
	top: 192px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 40px;
	padding: 0 18px;
	border-radius: 30px;
	background: #000;
	color: #fff;
	font-size: 16px;
	letter-spacing: -0.16px;
}
.pr-page a.pr-home-band-btn:hover { opacity: 0.85; color: #fff; }

/* El contenedor de la banda es más ancho que .pr-container (1280): las cotas
   x135/x824 del frame se consiguen con el left extra de 55/744 sobre los 80
   del contenedor centrado a 1440. */

/* Newsletter EU: mismo vidrio que la US pero con titular dentro */

/* Footer EU (79:4988): el botón sube a 237 y mide 47 de alto mínimo */
.pr-page--home-eu a.pr-esh-footer-cta1,
.pr-page--home-eu .pr-esh-footer-cta1 { top: 237px; min-height: 47px; }

/* ==========================================================================
   Ficha SPR US — ronda 07/08/2026 (frame 83:10174 + ventanas 79:8616/8620).
   ========================================================================== */

/* Sellos sueltos sobre la tarjeta del producto (ya no van horneados) */
.pr-page--us .pr-hero-media { position: relative; }
/* Los sellos son <img> dentro de `.pr-hero-media`, así que les caía entera la
   regla de la FOTO del bote (`.pr-hero-media img`: cover + radio 20 + aspect
   ratio 550/589). Sobre una caja de 51px ese radio de 20 redondeaba y cortaba
   las esquinas del cuadrado del NSF, y el `cover` recortaba el anillo del
   Informed. Se neutraliza aquí lo tres, para no depender de que cada sello lo
   repita (12/08/2026). */
.pr-page--us .pr-hero-badge {
	position: absolute;
	display: block;
	object-fit: contain;
	border-radius: 0;
	aspect-ratio: auto;
}
/* Cotas del frame, contadas desde el borde del bloque (no desde la tarjeta):
   el contenedor de los sellos es `.pr-hero-media`, que arranca en el mismo
   sitio que la propia tarjeta y no en su esquina. Antes iban en 35/39 y 21/109
   —las cotas relativas a la tarjeta— y acababan sobre la cabecera. */
/* Los dos 18px más a la izquierda (12/08/2026): al agrandar el sello sltex se
   quedaron pegados al bote (hueco 0 con el hombro del envase, frames 152:8008
   y 152:7994 piden 33 y 18 de aire respectivamente). Se mueve la pareja en
   bloque para conservar el centrado entre ambos. */
/* 17/08/2026: medido en pantalla, los sellos no es que estuvieran cerca del
   bote: lo INVADÍAN (el Informed Sport se metía 12px y el sltex 24px sobre el
   envase; en US el sltex 12px). Se desplaza cada pareja en bloque hacia la
   izquierda, conservando su composición interna, hasta dejar unos 20px de
   aire con el borde real del bote —el opaco del PNG, no el de su caja—. */
.pr-page--us .pr-hero-badge--nsf { left: 183px; top: 200px; width: 52px; height: 52px; }
/* 83×29 (antes 74×26, +12%) y centrado bajo el NSF: se quedaba pequeño frente
   al NSF y los dos sellos leían pegados. `object-fit: contain` de red por si
   el PNG (328×114, AR 2.88) no encajase justo en la caja. */
.pr-page--us .pr-hero-badge--seal { left: 168px; top: 279px; width: 83px; height: 29px; object-fit: contain; }

/* WooCommerce añade su propio sufijo de impuestos ("VAT included" en la tienda
   de EU) dentro del precio, y sale al cuerpo del precio. El frame lleva una
   sola nota, la nuestra, así que la de Woo se esconde. */
.pr-page .pr-price .woocommerce-price-suffix { display: none; }

/* "taxes included" junto al precio (nota a 959,223 del frame) */
.pr-page--us .pr-price .pr-price-tax {
	/* Una regla anterior la escondía (`.pr-page--us .pr-price-tax {display:none}`)
	   de cuando el sufijo lo ponía WooCommerce; en los frames nuevos la nota va
	   junto al precio, así que se vuelve a mostrar. */
	display: inline;
	margin-left: 18px;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 0.5px;
	color: #000;
	vertical-align: 6px;
}

/* Ingredientes: texto + logotipo Lipinova en color a la derecha (79:8616) */
.pr-ingr-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.pr-ingr-row > div { max-width: 620px; }
.pr-ingr-logo { width: 192px; height: auto; flex: none; margin-top: 2px; }

/* Logos nuevos de certificaciones (79:8620) */
.pr-cert-logo--flutex { width: 160px; }
.pr-cert-logo--cleantex { width: 160px; }
.pr-cert-logo--ec { width: 176px; }

/* ==========================================================================
   Ficha SPR EU (single-product-eu.php — frame 83:9644). Hereda la piel de la
   ficha US (el body lleva pr-page--us) y aquí cuelgan solo sus diferencias.
   ========================================================================== */

/* Sello Informed Sport sobre la tarjeta (53×67 en 32,42; nodo 83:9767) */
/* Cotas del frame 156:5141. El bote se dibujaba a 471×587 —el tamaño de la
   TARJETA, no el de la foto— y por eso invadía la columna de los sellos: en el
   diseño la foto mide 267×497 y arranca en 312, con los sellos despejados a su
   izquierda. */
/* La caja va a 507×633 y no a los 267×497 del bote: el PNG lleva alrededor
   bastante transparencia, y con `contain` hace falta esa caja para que el bote
   se dibuje a los 267×497 del frame arrancando en (312, 218). */
/* Grupo 6474 del frame (13/08/2026): el hueco de la foto es el MISMO que en
   US y Active —471x587 en (199,161)— y dentro de él el bote se dibuja a
   267x497. Estaba a 507x633 en (230,150), 67px más ancho, y por eso las fotos
   de galería se comían el aire hasta la columna de texto. */
.pr-page--eu-f .pr-hero-shot,
.pr-page--eu-f .pr-hero-media .pr-hero-shot {
	left: 199px;
	top: 161px;
	width: 471px;
	height: 587px;
}
/* Sellos: 57x67 en (231,204) y 80x36 en (220,289), cotas del mismo grupo. */
/* 02/09/2026: el de Informed Sport se veia mucho mas grande que el otro. Con
   `object-fit: contain` lo que cuenta no es la caja sino el dibujo ajustado
   dentro: el de Informed se dibujaba 53x67 (imagen 320x402) y el sello
   80x27,8 (imagen 328x114), o sea 2,4 veces mas alto. La pareja equivalente
   de la ficha de US va 52 contra 29 -1,79-, asi que se baja a 50 de alto para
   dejarlo en esa misma proporcion. La caja se queda en 40x50 para que su
   relacion (0,80) sea la de la imagen (0,796) y no sobre aire por los lados,
   y se centra en el MISMO eje vertical que el sello de abajo (x=215: el
   sello va de 175 a 255), conservando los 22px que habia entre los dos. */
.pr-page--eu-f .pr-hero-badge--informed { left: 195px; top: 221px; width: 40px; height: 50px; }
/* Un poco más de aire respecto al sello Informed Sport (12/08/2026). */
.pr-page--eu-f .pr-hero-badge--seal {
	left: 175px;
	top: 289px;
	width: 80px;
	height: 36px;
	object-fit: contain;
}

/* Fila de iconos de reciclaje del How to use (nodo 83:9735, 362×75 en x186) */
.pr-page--eu-f .pr-recycling { display: block; width: 362px; height: auto; margin-top: 26px; margin-left: -8px; }

/* Logo Informed de la pestaña de certificaciones (80×101) */
.pr-page--eu-f .pr-cert-logo--informed { width: 80px; }

/* Patrocinio SDN sobre CORAL (Rectangle 4152: 1440×516, #d94b5a) con texto
   blanco y el logo SDN en blanco. Sustituye al bloque blanco de la US. */
.pr-page--eu-f .pr-sponsor--coral { background: var(--pr-coral, #d94b5a); }
.pr-page--eu-f .pr-sponsor--coral .pr-heading,
.pr-page--eu-f .pr-sponsor--coral p { color: #fff; }

/* Cotas del frame 143:6109 (banda de 1440×516): titular en 133,94; columnas en
   133,205 y 735,205; logotipo en 1160,111. La banda de US arranca en 183 y aquí
   se subía todo ~85px de más. */
/* En EU la banda va justo detrás de las tarjetas de beneficios, que no llevan
   relleno inferior: sin estos 119 la banda se pegaba a ellas (frame 152:7428,
   donde las tarjetas acaban en 2649 y el coral entra en 2768). */
.pr-page--eu-f .pr-benefits { padding-bottom: 119px; }
.pr-page--eu-f .pr-sponsor--coral { padding: 94px 0 158px; }
.pr-page--eu-f .pr-sponsor--coral .pr-sponsor-head { margin-left: 133px; }
/* Texto de las columnas: el frame lo especifica en Funnel Sans REGULAR con un
   tracking de -0,16, y aquí iba en Light con +0,5. Esos 0,66px de más por letra
   estiraban cada renglón unos 45px y metían una línea extra en la 1.ª columna,
   con lo que las dos dejaban de ir a la par. */
.pr-page--eu-f .pr-sponsor--coral .pr-sponsor-cols p {
	font-weight: 400;
	line-height: 19.2px;
	letter-spacing: -0.16px;
}
.pr-page--eu-f .pr-sponsor--coral .pr-sponsor-head img {
	left: 1027px;
	top: 17px;
	width: 129px;
	height: auto;
}
/* El titular ocupa 2 renglones de 38,4 (94 → 170,8) y las columnas van en 205 */
.pr-page--eu-f .pr-sponsor--coral .pr-sponsor-cols { margin: 34px 0 0 133px; }
/* El lienzo gris monta sobre los últimos 61px de la banda con su radio de 45,
   como en el frame (el blanco entra en y=3223 y el coral llega a 3284). */
.pr-page--eu-f .pr-canvas { margin-top: -61px; position: relative; z-index: 1; }

/* Demanding: la foto europea (bombero) en vez de la militar de US */
.pr-page--eu-f .pr-demanding { background-image: url(assets/img/demanding-bg-eu.jpg); }

/* Newsletter con caja de vidrio sobre la foto de fútbol (Rectangle 3896,
   1440×367; caja 468×252 en x89,y58 — nodo 97:5432) */
.pr-page--eu-f .pr-community--eu {
	position: relative;
	height: 367px;
	padding: 0;
	background: url(assets/img/eu-news-bg.jpg) center / cover no-repeat #1e1e1e;
}
.pr-page--eu-f .pr-community--eu .pr-community-glass {
	position: absolute;
	left: max(89px, calc((100% - 1440px) / 2 + 89px));
	top: 58px;
	width: 468px;
	height: 252px;
	border-radius: 30px;
	background:
		var(--pr-glass-light),
		rgba(0, 0, 0, 0.06);
	-webkit-backdrop-filter: var(--pr-glass-frost);
	backdrop-filter: var(--pr-glass-frost);
	box-shadow: var(--pr-glass-edge);
	padding: 39px 44px 0 45px;
}
/* La piel de US coloca el titular, el texto y el formulario en absoluto sobre
   la sección (141,83 / 141,122 / 141,213). Aquí van dentro de la caja de
   vidrio y en flujo, así que hay que devolverlos a su sitio o el relleno de la
   caja no cuenta y todo aparece 96px a la derecha y 44 más abajo. */
.pr-page--eu-f .pr-community--eu h2,
.pr-page--eu-f .pr-community--eu p,
.pr-page--eu-f .pr-community--eu .pr-newsletter {
	position: static;
	left: auto;
	top: auto;
}
.pr-page--eu-f .pr-community--eu h2 {
	margin: 0 0 5px;
	font-family: var(--pr-font-body);
	font-size: 24px;
	font-weight: 500;
	line-height: 30px;
	letter-spacing: 0;
	color: #fff;
	text-align: left;
}
.pr-page--eu-f .pr-community--eu p {
	margin: 0;
	width: 288px;
	font-size: 16px;
	font-weight: 300;
	line-height: 19px;
	letter-spacing: 0.5px;
	color: #fff;
	text-align: left;
}
/* 14 y no 22: en el frame 143:6075 el formulario arranca en y=164 de la caja */
.pr-page--eu-f .pr-community--eu .pr-newsletter { margin-top: 14px; display: flex; gap: 10px; justify-content: flex-start; }
.pr-page--eu-f .pr-community--eu .pr-newsletter input {
	width: 249px;
	height: 40px;
	border: 0;
	border-radius: 20px;
	background: #fff;
	padding: 0 16px;
	font-family: var(--pr-font-body);
	font-size: 14px;
	letter-spacing: 0.5px;
	color: #000;
}
/* Botón rojo macizo (#B71F2F, 100×40) como en el frame 143:6075; antes era de
   vidrio translúcido y se perdía sobre la foto. */
.pr-page--eu-f .pr-community--eu .pr-newsletter button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 20px;
	background: var(--pr-red);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	color: #fff;
	font-family: var(--pr-font-body);
	font-size: 14px;
	letter-spacing: 0.5px;
	cursor: pointer;
}
.pr-page--eu-f .pr-community--eu .pr-newsletter button:hover,
.pr-page--eu-f .pr-community--eu .pr-newsletter button:focus,
.pr-page--eu-f .pr-community--eu .pr-newsletter button:active { background: var(--pr-red); color: #fff; opacity: 0.9; }
/* Sin `flex: 0 0` el campo se estira y empuja el botón fuera de su cota (305) */
.pr-page--eu-f .pr-community--eu .pr-newsletter input { flex: 0 0 251px; width: 251px; }
.pr-page--eu-f .pr-community--eu .pr-newsletter button { flex: 0 0 100px; }

/* Footer EU (79:4988): botón a 237 y 47 de alto mínimo. Doble clase para
   ganar al override de la piel US (.pr-page--us:not(...)). */
.pr-page--us.pr-page--eu-f .pr-esh-footer-cta1 { top: 237px; min-height: 47px; }

/* ==========================================================================
   Homes US y EU — 2.ª tanda del 07/08/2026: hero como el de ES (756px, con el
   botón pegado al texto), botón de vidrio, lluvia de cápsulas en la sección de
   producto y recuadro de vidrio tras el texto en US.
   ========================================================================== */

/* Hero al mismo alto que el de ES para que llegue hasta el final. El aire de
   120px bajo el botón es el del frame (782 − 662). */
.pr-page--home .pr-home-hero { height: 756px; }

/* El titular rotatorio reserva la altura del más largo; alineando su contenido
   ABAJO el hueco queda arriba (invisible sobre el vídeo) y el botón siempre
   sale pegado al texto, como en la captura. */
.pr-page--home .pr-home-hero-content .pr-rotator {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

/* Botón del hero 79:5615: vidrio negro 20% + luz -45°, radio 30 */
.pr-page--home a.pr-btn--hero-glass,
.pr-page--home a.pr-btn--hero-glass:visited {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 40px;
	margin-top: 18px;
	padding: 0 18px;
	border-radius: 30px;
	background:
		var(--pr-glass-light),
		rgba(0, 0, 0, 0.2);
	-webkit-backdrop-filter: var(--pr-glass-frost);
	backdrop-filter: var(--pr-glass-frost);
	box-shadow: var(--pr-glass-edge), 0 2px 8px rgba(0, 0, 0, 0.10);
	color: #fff;
	font-size: 16px;
	letter-spacing: -0.16px;
	transition: opacity 0.2s ease;
}
.pr-page--home a.pr-btn--hero-glass:hover { opacity: 0.88; color: #fff; }

/* La sección de producto recorta la lluvia y queda de contenedor */
.pr-page--home .pr-home-intro { position: relative; overflow: hidden; }
.pr-page--home .pr-home-intro > .pr-container { position: relative; z-index: 2; }
/* Las capas y cápsulas las genera proresolve.js; el CSS es el de la home ES
   (.pr-esh-rain / -layer / .pr-esh-cap), compartido más arriba. */
.pr-page--home .pr-esh-rain {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}
.pr-page--home .pr-esh-rain-layer { position: absolute; inset: 0; }
.pr-page--home .pr-esh-rain-layer[data-layer="0"] { opacity: 0.85; }
.pr-page--home .pr-esh-rain-layer[data-layer="1"] { opacity: 0.95; }
.pr-page--home .pr-esh-rain-layer[data-layer="2"] { opacity: 1; }
.pr-page--home .pr-esh-cap {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	will-change: transform;
}

/* Recuadro 97:11191 detrás del texto (solo US): 635×504 r30 a x621 y151 de la
   sección, con el mismo vidrio que las tarjetas. */
/* Recuadro tras el texto de producto (97:11191). Escarcha 60 en el panel de
   Figma: el fondo se difumina mucho más que en el resto de vidrios, así que
   este lleva su propio desenfoque en vez de la escarcha común de 4. */
.pr-home-intro-glass {
	position: absolute;
	/* 714 y 131 desde el 10/08/2026 (antes 621 y 151): la caja va pegada al
	   bote, 82 por debajo de su borde superior (frames 154:5082 y 154:5083). */
	left: max(714px, calc((100% - 1440px) / 2 + 714px));
	top: 131px;
	width: 635px;
	height: 504px;
	z-index: 1;
	border-radius: 30px;
	background:
		var(--pr-glass-light),
		rgba(0, 0, 0, 0.06);
	-webkit-backdrop-filter: var(--pr-glass-frost);
	backdrop-filter: var(--pr-glass-frost);
	box-shadow: var(--pr-glass-edge);
	pointer-events: none;
}
/* Escarcha 60 */
.pr-home-intro-glass {
	-webkit-backdrop-filter: blur(60px) saturate(1.5);
	backdrop-filter: blur(60px) saturate(1.5);
}

/* ==========================================================================
   Barra de compra fija de las fichas — frames 83:10729 (US), 83:10730 (EU),
   83:10731 (Sports ES) y 83:10732 (Active ES). Pastilla de 1158×95 con radio
   60 sobre rojo al 50%: bote a 65, reclamo de 657 a 171 y botón de 128×40 a
   915. Entra y sale con el scroll (ver proresolve.js).
   ========================================================================== */

.pr-sticky-buy {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 95;
	display: flex;
	justify-content: center;
	padding: 0 24px 24px;
	pointer-events: none;
}
.pr-sticky-in {
	position: relative;
	width: 1158px;
	max-width: 100%;
	height: 95px;
	border-radius: 60px;
	/* El reclamo no se selecciona: la barra es un CTA, no texto de lectura */
	-webkit-user-select: none;
	user-select: none;
	background: rgba(183, 31, 47, 0.5);
	/* La barra flota sobre el contenido: un desenfoque suave mantiene legible
	   el texto negro pase lo que pase por debajo. */
	-webkit-backdrop-filter: blur(14px) saturate(1.3);
	backdrop-filter: blur(14px) saturate(1.3);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.16);
	/* Estado de reposo: fuera de la pantalla y transparente */
	opacity: 0;
	transform: translateY(calc(100% + 24px));
	transition:
		transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1),
		opacity 0.42s ease;
	pointer-events: none;
}
.pr-sticky-buy.is-on .pr-sticky-in {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
/* Al irse baja un poco más deprisa que al entrar: se nota menos */
.pr-sticky-buy:not(.is-on) .pr-sticky-in {
	transition:
		transform 0.42s cubic-bezier(0.55, 0, 0.68, 0.3),
		opacity 0.3s ease;
}
/* Doble clase a propósito: las fichas colocan `img` y `.pr-buy` en absoluto
   con sus propias cotas, y sin esto la miniatura y el botón se iban al sitio
   del bloque de compra de arriba. */
.pr-page .pr-sticky-buy .pr-sticky-thumb {
	position: absolute;
	left: 65px;
	top: 7px;
	width: 94px;
	height: 82px;
	max-width: none;
	aspect-ratio: auto;
	border-radius: 10px;
	object-fit: cover;
	margin: 0;
}
.pr-page .pr-sticky-copy {
	position: absolute;
	left: 171px;
	top: 28px;
	width: 657px;
	margin: 0;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-sticky-copy strong { font-weight: 600; }
.pr-page .pr-sticky-buy .pr-sticky-form {
	position: absolute;
	left: 915px;
	top: 28px;
	width: auto;
	margin: 0;
}

/* El formulario de la caja para equipos lleva `pr-buy` (lo necesita el módulo
   del vuelo de la cápsula), y en las fichas esa clase va en absoluto con las
   cotas del bloque de compra. Con `display: contents` no pinta caja y sus
   hijos se colocan como antes dentro de `.pr-team-controls`. */
.pr-page .pr-team-card .pr-team-form { display: contents; }
/* Al pasar el botón de <a> a <button> el icono se quedaba en ancho 0 (los
   reset de botón le quitan el tamaño intrínseco al SVG). */
.pr-page .pr-team-card .pr-team-cart svg {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	display: block;
}
.pr-page .pr-sticky-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 128px;
	height: 40px;
	padding: 0 12px;
	border: 0;
	border-radius: 30px;
	background: var(--pr-red);
	color: #fff;
	font-family: var(--pr-font-body);
	font-size: 14px;
	line-height: 16px;
	letter-spacing: 0;
	cursor: pointer;
	transition: opacity 0.2s ease;
}
.pr-page .pr-sticky-cta:hover,
.pr-page .pr-sticky-cta:focus,
.pr-page .pr-sticky-cta:active { background: var(--pr-red); color: #fff; opacity: 0.88; }

/* Variante Active ES (frame 83:10732): misma pastilla 1158×95 r60, pero en
   naranja al 50% y con el botón naranja sólido en vez del rojo (12/08/2026). */
.pr-page--apr .pr-sticky-in { background: rgba(249, 155, 37, 0.5); }
/* El bote va con FONDO TRANSPARENTE y entero: con `cover` (que es lo que
   hereda) se recortaba por arriba y por abajo. */
/* El bote de la barra va CONTENIDO y sin radio en todas las fichas: con
   `cover` el packshot se recortaba, y el tratamiento estaba cableado solo
   para Active (20/08/2026). */
.pr-page .pr-sticky-buy .pr-sticky-thumb,
.pr-page--apr .pr-sticky-buy .pr-sticky-thumb { object-fit: contain; border-radius: 0; }
/* "Añadir al carrito" no cabe en los 128 del frame (pensados para "Add to
   cart") y partía en dos líneas: el botón se ensancha lo justo para que el
   rótulo vaya seguido. */
.pr-page--apr .pr-sticky-cta {
	background: #f99b25;
	width: auto;
	min-width: 128px;
	padding: 0 18px;
	white-space: nowrap;
}
.pr-page--apr .pr-sticky-cta:hover,
.pr-page--apr .pr-sticky-cta:focus,
.pr-page--apr .pr-sticky-cta:active { background: #f99b25; color: #fff; opacity: 0.88; }
.pr-page .pr-sticky-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pr-sticky-cta svg { flex-shrink: 0; }

@media (max-width: 1200px) {
	.pr-sticky-in { height: auto; padding: 14px 18px; display: flex; align-items: center; gap: 14px; }
	.pr-page .pr-sticky-buy .pr-sticky-thumb { position: static; width: 64px; height: 56px; }
	.pr-page .pr-sticky-copy { position: static; width: auto; flex: 1; font-size: 14px; line-height: 18px; }
	.pr-page .pr-sticky-buy .pr-sticky-form { position: static; }
}
@media (prefers-reduced-motion: reduce) {
	.pr-sticky-in { transition: opacity 0.2s ease; transform: none; }
	.pr-sticky-buy:not(.is-on) .pr-sticky-in { transform: none; }
}

/* ==========================================================================
   Titular del hero — 10/08/2026. El vídeo cambia de plano con un destello
   blanco (cimas en 3,47 / 9,47 / 15,27 s) y el relevo del texto cae dentro
   de ese fogonazo; los tiempos los lleva proresolve.js.
   ========================================================================== */

/* --- US: el bloque salta de izquierda a centro y a derecha (modo "move") --- */

/* Sale en 700 ms hacia arriba y entra en 900 desde abajo: la curva del vuelta
   es la del estado base, la de la ida la de `.is-swapping`. */
.pr-page--home .pr-home-hero-content {
	transition:
		opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pr-page--home .pr-home-hero-content.is-swapping {
	transition:
		opacity 0.7s cubic-bezier(0.55, 0, 0.68, 0.3),
		transform 0.7s cubic-bezier(0.55, 0, 0.68, 0.3);
	opacity: 0;
	transform: translateY(-14px);
}
/* Punto de partida de la entrada, colocado sin transición */
.pr-page--home .pr-home-hero-content.is-entering { opacity: 0; transform: translateY(16px); }
.pr-page--home .pr-home-hero-content.is-nofx { transition: none; }
.pr-page--home .pr-home-hero-content.is-pos-1 { align-items: flex-start; text-align: left; }
.pr-page--home .pr-home-hero-content.is-pos-2 { align-items: center; text-align: center; }
.pr-page--home .pr-home-hero-content.is-pos-3 { align-items: flex-end; text-align: right; }
/* Aquí el fundido lo hace el bloque entero: los titulares se intercambian a
   oscuras, así que no necesitan transición propia. */
.pr-page--home [data-rot-mode="move"] .pr-rot-item { transition: none; }
.pr-page--home [data-rot-mode="move"] .pr-rot-item:not(.is-on) { transform: none; }

/* --- ES: fundido, más reposado que el de antes --- */

.pr-rotator[data-rot-mode="fade"] .pr-rot-item {
	transition:
		opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pr-rotator[data-rot-mode="fade"] .pr-rot-item:not(.is-on) { transform: translateY(14px); }

/* --- EU: máquina de escribir (modo "type") --- */

/* Con JS los titulares se ocultan y el texto lo teclea un solo hueco. Hay que
   decirlo explícitamente porque `.pr-rot-item { display: block }` le gana al
   atributo [hidden]. */
.pr-rotator .pr-rot-item[hidden] { display: none; }
/* Texto y cursor comparten envoltorio: el <h1> es flex y sus hijos directos se
   vuelven bloques, así que el cursor colgando del <h1> caía a otro renglón. */
.pr-type { display: block; }
.pr-type-out { white-space: pre-wrap; }
.pr-type-caret {
	display: inline-block;
	width: 2px;
	height: 0.82em;
	margin-left: 6px;
	/* El margen negativo compensa el ancho + la separación: así el cursor no
	   cuenta para el ancho de la línea y nunca se cae al renglón de abajo
	   cuando el titular llena el ancho del bloque. */
	margin-right: -8px;
	vertical-align: -0.04em;
	background: currentColor;
	animation: pr-caret 1.15s steps(1) infinite;
}
@keyframes pr-caret {
	0%, 48% { opacity: 1; }
	50%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.pr-type-caret { animation: none; }
	.pr-page--home .pr-home-hero-content { transition: none; }
}

/* ==========================================================================
   TÉRMINOS Y CONDICIONES — 10/08/2026
   Donde se mencionen van enlazados y con un asterisco detrás. En el carrito y
   el checkout el asterisco va en rojo; en el resto hereda el color del texto.
   ========================================================================== */

.pr-terms-link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.pr-terms-link:hover,
.pr-terms-link:focus-visible { color: var(--pr-red); }
.pr-terms-star {
	margin-left: 1px;
	font-weight: 600;
}
:is(.pr-page--cart, .pr-page--chk) .pr-terms-star { color: var(--pr-red); }

/* ==========================================================================
   ® SIEMPRE ARRIBA A LA DERECHA — 10/08/2026
   Todos los ® del tema van envueltos en <sup class="pr-rr">. La regla vale
   también para los que salen de la base de datos: un filtro de functions.php
   los envuelve al vuelo.
   ========================================================================== */

/* 14/08/2026: 'vertical-align: super' la dejaba pegada al ascendente y se
   veía disparada. Con la línea base y un top medido queda a la altura del
   ojo alto de la palabra, que es como la quiere Pablo: Lipinova®. */
.pr-rr,
.pr-page .pr-rr,
sup.pr-rr {
	position: relative;
	top: -0.32em;
	font-size: 0.6em;
	line-height: 0;
	vertical-align: baseline;
	letter-spacing: 0;
	font-weight: inherit;
}

/* ==========================================================================
   MENÚ ÚNICO — 10/08/2026
   El menú de la home va en todas las páginas menos el carrito. La clase
   `pr-menu-home` la pone `proresolve_market_body_class()` en functions.php.
   Este bloque va al final a propósito: así gana a la piel de la ficha
   (.pr-page--us) sin tener que desmontarla. ES queda fuera porque su menú YA
   es el de su propia home (cuatro ítems, frame 79:5031) y aplicarle estas
   cotas lo descuadraba.
   ========================================================================== */

.pr-menu-home:not(.pr-page--home-es) .pr-header,
.pr-menu-home:not(.pr-page--home-es) .pr-header.is-inverted {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 76px;
	padding: 0 max(119px, calc((100% - 1440px) / 2 + 119px));
	background: var(--pr-glass-light);
	-webkit-backdrop-filter: var(--pr-glass-frost);
	backdrop-filter: var(--pr-glass-frost);
	box-shadow: none;
}
/* Sobre el hero (Conocenos y demas paginas con video) le faltaba la capa de
   negro al 6% y el remate de los bordes que SI lleva el mismo menu en ES:
   quedaba casi sin efecto vidrio, mas plano. Solo ".is-inverted": el resto
   de paginas de esta regla (fichas, mi cuenta...) van sobre fondo claro y
   ese menu ya esta bien tal cual (24/08/2026). */
.pr-menu-home:not(.pr-page--home-es) .pr-header.is-inverted {
	background: var(--pr-glass-light), rgba(0, 0, 0, 0.06);
	box-shadow: var(--pr-glass-edge);
}
/* 25/08/2026: tambien EN REPOSO, no solo invertido (peticion de Pablo: el
   menu de EU/US se veia blanco sobre blanco en las fichas mientras el de ES
   lleva un gris). Medido en ES contra la cascada real: el tinte lo pone
   `.pr-page--home-es .pr-header` (vidrio + negro al 6% + borde) y lo APAGA
   `:not(.pr-has-hero)` en carrito, cuenta, noticias/articulos y contacto.
   Aqui el mismo criterio por tipo de pagina, porque las plantillas US/EU no
   marcan `pr-has-hero`: tinte en home, fichas y Conocenos; limpio en el
   resto. `:not(.is-over-hero)` deja en paz el velo oscuro del hero y su
   box-shadow propio. */
.pr-menu-home:not(.pr-page--home-es):not(.pr-page--news):not(.pr-page--account):not(.pr-page--contact) .pr-header:not(.is-over-hero) {
	background: var(--pr-glass-light), rgba(0, 0, 0, 0.06);
	box-shadow: var(--pr-glass-edge);
}
/* Velo oscuro mientras la barra flota sobre un hero (lo activa el JS) */
.pr-menu-home:not(.pr-page--home-es) .pr-header::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.22) 100%);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}
.pr-menu-home:not(.pr-page--home-es) .pr-header.is-over-hero::after { opacity: 1; }
.pr-menu-home:not(.pr-page--home-es) .pr-header.is-over-hero { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }

/* Logotipo: negro sobre claro, blanco cuando la barra se invierte */
.pr-menu-home:not(.pr-page--home-es) .pr-logo--text {
	color: #000;
	line-height: 76px;
	transition: color 0.3s ease;
}
.pr-menu-home:not(.pr-page--home-es) .pr-header.is-inverted .pr-logo--text { color: #fff; }
.pr-menu-home:not(.pr-page--home-es) .pr-logo img { filter: brightness(0); transition: filter 0.3s ease; }
.pr-menu-home:not(.pr-page--home-es) .pr-header.is-inverted .pr-logo img { filter: none; }

/* Nav de texto suelto, sin cápsula en ningún estado */
.pr-menu-home:not(.pr-page--home-es) .pr-nav,
.pr-menu-home:not(.pr-page--home-es) .pr-header.is-inverted .pr-nav,
.pr-menu-home:not(.pr-page--home-es) .pr-header.is-over-hero .pr-nav {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	padding: 0;
	gap: 10px;
	transform: none;
}
.pr-menu-home:not(.pr-page--home-es) .pr-nav::before { display: none; }
.pr-menu-home:not(.pr-page--home-es) .pr-nav a,
.pr-menu-home:not(.pr-page--home-es) .pr-header.is-inverted .pr-nav a {
	padding: 8px 22px;
	font-family: var(--pr-font-body);
	font-size: 20px;
	font-weight: 400;
	line-height: 31px;
	letter-spacing: 0.5px;
	background: none;
	transition: color 0.3s ease, text-shadow 0.3s ease;
}
.pr-menu-home:not(.pr-page--home-es) .pr-nav a { color: #000; }
.pr-menu-home:not(.pr-page--home-es) .pr-header.is-inverted .pr-nav a { color: #fff; }
/* La página en la que se está, en rojo */
.pr-menu-home:not(.pr-page--home-es) .pr-nav a.is-active,
.pr-menu-home:not(.pr-page--home-es) .pr-header.is-inverted .pr-nav a.is-active {
	color: var(--pr-red);
	font-weight: 600;
	cursor: default;
}
/* Hover por producto, igual que en la home */
.pr-menu-home:not(.pr-page--home-es) .pr-nav a:hover { color: #e8e8e8; }
.pr-menu-home:not(.pr-page--home-es) .pr-nav a[data-nav="sports"]:hover { color: var(--pr-red); }
.pr-menu-home:not(.pr-page--home-es) .pr-nav a[data-nav="active"]:hover { color: #f99b25; }
.pr-menu-home:not(.pr-page--home-es) .pr-nav a.is-active:hover { color: var(--pr-red); }
/* Sobre fondo claro el gris del hover no se vería */
.pr-menu-home:not(.pr-page--home-es) .pr-header:not(.is-inverted) .pr-nav a:hover { color: rgba(0, 0, 0, 0.55); }
.pr-menu-home:not(.pr-page--home-es) .pr-header:not(.is-inverted) .pr-nav a[data-nav="sports"]:hover { color: var(--pr-red); }
.pr-menu-home:not(.pr-page--home-es) .pr-header:not(.is-inverted) .pr-nav a[data-nav="active"]:hover { color: #f99b25; }
.pr-menu-home:not(.pr-page--home-es) .pr-header:not(.is-inverted) .pr-nav a.is-active:hover { color: var(--pr-red); }

/* Iconos: color por estado y la sombrita al pasar el ratón */
body.pr-menu-home:not(.pr-page--home-es) .pr-header .pr-header-tools { gap: 18px; }
.pr-menu-home:not(.pr-page--home-es) .pr-lang,
.pr-menu-home:not(.pr-page--home-es) .pr-account,
.pr-menu-home:not(.pr-page--home-es) .pr-cart { color: #000; }
.pr-menu-home:not(.pr-page--home-es) .pr-header.is-inverted .pr-lang,
.pr-menu-home:not(.pr-page--home-es) .pr-header.is-inverted .pr-account,
.pr-menu-home:not(.pr-page--home-es) .pr-header.is-inverted .pr-cart { color: #fff; }
.pr-menu-home:not(.pr-page--home-es) .pr-cart-count { background: #000; color: #fff; }
.pr-menu-home:not(.pr-page--home-es) .pr-header.is-inverted .pr-cart-count { background: #fff; color: #000; }

/* ==========================================================================
   Página de contacto (12/08/2026) — sin frame: sigue la estética del site.
   Reutiliza los campos píldora del checkout (.pr-chk-field) y las tarjetas
   blancas r30; el menú es el de la home (pr-menu-home) y el pie el común.
   ========================================================================== */

.pr-contact-canvas { padding: 175px 119px 90px; min-height: 700px; }
/* En ES la barra es fija y `.pr-main` ya reserva sus 76px, así que sin esto
   la página arranca 76 más abajo que en US y EU (12/08/2026). */
.pr-page--home-es .pr-contact-canvas { padding-top: 99px; }
/* La barra de ES lleva un negro al 6% bajo el vidrio para aguantar sobre el
   vídeo de su home; aquí no hay vídeo y se veía como un tinte gris que US y
   EU no tienen. Se deja el mismo vidrio limpio que ellos (12/08/2026). */
.pr-page--home-es.pr-page--contact .pr-header {
	background: var(--pr-glass-light);
	box-shadow: none;
}
.pr-page .pr-contact-title {
	margin: 0 0 14px;
	font-family: var(--pr-font-body);
	font-size: 32px;
	font-weight: 600;
	line-height: 35px;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-page .pr-contact-lead {
	margin: 0 0 42px;
	max-width: 560px;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.35;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-contact-grid { display: flex; align-items: flex-start; justify-content: space-between; gap: 60px; }
.pr-contact-form { flex: none; width: 529px; }
.pr-contact-form .pr-chk-check { margin: 14px 0 26px; padding-left: 2px; }

/* Botón de envío: la píldora negra de "Completar pedido" */
.pr-page button.pr-contact-send {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 45px;
	padding: 0 34px;
	border: 0;
	border-radius: 30px;
	background: #000;
	color: #fff;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: opacity 0.25s ease;
}
.pr-page button.pr-contact-send:hover { opacity: 0.85; color: #fff; }
.pr-page button.pr-contact-send:focus,
.pr-page button.pr-contact-send:focus-visible { background: #000; color: #fff; border: 0; outline: 2px solid rgba(0, 0, 0, 0.35); outline-offset: 2px; box-shadow: none; }

/* Tarjeta de datos: blanca r30 como el resumen del checkout */
.pr-contact-card {
	flex: none;
	width: 447px;
	border-radius: 30px;
	background: #fff;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
	padding: 38px 44px 42px;
}
.pr-page .pr-contact-card h2 {
	margin: 0 0 10px;
	font-family: var(--pr-font-body);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-page .pr-contact-card-p {
	margin: 0 0 26px;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-page .pr-contact-card h3 {
	margin: 0 0 4px;
	font-family: var(--pr-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.55);
}
.pr-page .pr-contact-card p { margin: 0 0 22px; font-size: 15px; font-weight: 400; line-height: 1.45; letter-spacing: 0.5px; color: #000; }
.pr-page .pr-contact-card p:last-child { margin-bottom: 0; }
.pr-page .pr-contact-card a { color: #000; text-decoration: underline; }
.pr-page .pr-contact-card a:hover { opacity: 0.7; }
.pr-contact-social a { margin-right: 18px; }

/* Avisos de enviado/error: mismos pr-notice del checkout, con sitio debajo */
.pr-contact-canvas .pr-notice { margin-bottom: 30px; max-width: 700px; }

/* ==========================================================================
   FICHA ACTIVE ES — frame 152:7060 "APR (Laptop)" (1440×7095, 12/08/2026).
   Piel pr-page--home-es (header ES, canvas 1440, zoom) + clases pr-apr-*.
   Colores del frame: naranja #f99b25, azul #648bff, amarillo #ffe082.
   Secciones a alturas fijas del frame; hijos en absoluto sobre el canvas.
   ========================================================================== */

.pr-page--apr { background: #fff; }
.pr-page--apr .pr-esh-canvas { position: relative; }

/* ---- Hero (0..1010, fondo f9f9f9; pasa por debajo de la barra) ---- */
.pr-apr-hero {
	position: relative;
	height: 1010px;
	margin-top: -76px;
	background: #f9f9f9;
}
.pr-apr-hero .pr-esh-canvas { height: 100%; }
.pr-apr-card {
	position: absolute;
	left: 199px;
	top: 161px;
	width: 471px;
	height: 587px;
	border-radius: 20px;
	object-fit: contain;
	/* El mismo fundido que la ficha de Sports (`.pr-hero-media img`): sin él
	   el cambio de imagen daba un salto seco (12/08/2026). */
	transition: opacity 0.25s ease;
}
/* Sello suelto sobre la tarjeta: 80×36 a 21,52 del grupo 239:3589, que
   arranca en (199,161) → (220,213) en la sección. */
.pr-apr-seal {
	position: absolute;
	left: 175px;
	top: 213px;
	width: 80px;
	height: 36px;
	object-fit: contain;
	display: block;
	z-index: 1;
}
.pr-page .pr-apr-title {
	position: absolute;
	left: 770px;
	top: 161px;
	margin: 0;
	font-family: var(--pr-font-brand);
	font-size: 32px;
	font-weight: 400;
	line-height: 41px;
	letter-spacing: 0.5px;
	color: #f99b25;
}
.pr-page .pr-apr-price {
	position: absolute;
	left: 770px;
	top: 211px;
	margin: 0;
	font-size: 42px;
	font-weight: 400;
	line-height: 41px;
	letter-spacing: 0;
	color: #000;
}
.pr-apr-price .woocommerce-price-suffix { display: none; }
.pr-apr-price-tax {
	margin-left: 18px;
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 0.5px;
	vertical-align: 6px;
}
.pr-page .pr-apr-price-unit {
	position: absolute;
	left: 770px;
	top: 254px;
	margin: 0;
	font-size: 16px;
	font-weight: 300;
	line-height: 35px;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-apr-desc {
	position: absolute;
	left: 770px;
	top: 304px;
	width: 549px;
}
.pr-page .pr-apr-desc p {
	margin: 0 0 18px;
	font-size: 16px;
	font-weight: 300;
	line-height: 20px;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-page .pr-apr-qty-label {
	position: absolute;
	left: 772px;
	top: 531px;
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.5px;
	color: #000;
}
/* El formulario de compra NO hereda posiciones de otras fichas: se coloca él */
.pr-apr-buy {
	position: absolute;
	left: 770px;
	top: 573px;
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0;
}
/* Mismo stepper que Sports US/EU (radio 30, padding 12, gap 6): con
   contenido "1" da 89×40, igual que el componente de Figma 215:8862
   (12/08/2026, antes tenía cotas propias que no cuadraban con ninguno). */
.pr-apr-buy .pr-stepper {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 40px;
	padding: 0 12px;
	border-radius: 30px;
	background: #fff;
}
.pr-apr-buy .pr-stepper-btn {
	width: 16px;
	height: 40px;
	border: 0;
	padding: 0;
	background: none;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: #000;
}
.pr-apr-buy .pr-stepper-input {
	width: 24px;
	/* GeneratePress mete padding 10/15 a los inputs: sin anularlo el "1"
	   se quedaba sin sitio y desaparecía. */
	padding: 0;
	border: 0;
	background: none;
	text-align: center;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 400;
	color: #000;
	-moz-appearance: textfield;
	appearance: textfield;
}
.pr-apr-buy .pr-stepper-input::-webkit-outer-spin-button,
.pr-apr-buy .pr-stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pr-apr-buy .pr-stepper-input:focus { outline: none; }
.pr-apr-buy .pr-stepper-btn:hover,
.pr-apr-buy .pr-stepper-btn:focus,
.pr-apr-buy .pr-stepper-btn:focus-visible { background: none; color: #f99b25; outline: none; box-shadow: none; }
.pr-page button.pr-apr-add {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 40px;
	padding: 0 20px;
	border: 0;
	border-radius: 30px;
	background: #000;
	color: #fff;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: opacity 0.25s ease;
}
.pr-page button.pr-apr-add:hover { opacity: 0.85; color: #fff; }
.pr-page button.pr-apr-add:focus,
.pr-page button.pr-apr-add:focus-visible { background: #000; color: #fff; border: 0; outline: none; box-shadow: none; }

/* Banda de suscripción azul (Rectangle 4168: 575×95 r20 en 772,643) */
/* Fila flexible y alto AUTOMATICO (26/08/2026). Antes la banda tenia
   `height: 95px` clavado y dentro el parrafo y el boton en posicion absoluta,
   asi que el texto no empujaba: en INGLES ocupa cuatro renglones (88px + 14 de
   margen) y se salia 7px por abajo, cortado. Ahora crece con el texto y da
   igual el idioma. */
.pr-apr-subs {
	position: absolute;
	left: 772px;
	top: 643px;
	width: 575px;
	min-height: 95px;
	height: auto;
	padding: 16px 24px 16px 36px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	border-radius: 20px;
	background: #648bff;
}
.pr-page .pr-apr-subs p {
	position: static;
	left: auto;
	top: auto;
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	margin: 0;
	font-size: 15px;
	font-weight: 300;
	line-height: 22px;
	letter-spacing: 0;
	color: #fff;
}
.pr-page .pr-apr-subs p strong { font-weight: 600; }
.pr-page button.pr-apr-subs-btn {
	position: static;
	right: auto;
	top: auto;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 40px;
	padding: 0 18px;
	border: 0;
	border-radius: 30px;
	background: #fff;
	color: #648bff;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0;
	cursor: pointer;
	transition: opacity 0.25s ease;
}
.pr-page button.pr-apr-subs-btn:hover { opacity: 0.85; background: #fff; color: #648bff; }
.pr-page button.pr-apr-subs-btn:focus,
.pr-page button.pr-apr-subs-btn:focus-visible { background: #fff; color: #648bff; border: 0; outline: 2px solid rgba(255,255,255,0.6); outline-offset: 2px; box-shadow: none; }

/* Miniaturas + reseña (y 766..942) */
.pr-apr-thumbs {
	position: absolute;
	left: 196px;
	top: 790px;
	display: flex;
	gap: 9px;
}
.pr-apr-thumbs img { width: 112px; height: 146px; object-fit: cover; border-radius: 10px; display: block; }
/* Flechas del grupo 248:3591: 19×25 a los lados de la tira (146 y 701) y
   centradas con ella (y 851), en negro. Antes estaban a 81 y 735, con otro
   tamaño y otro color (12/08/2026). */
.pr-page button.pr-apr-thumb-arrow {
	position: absolute;
	top: 851px;
	width: 19px;
	height: 25px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: #000;
	cursor: pointer;
}
.pr-page button.pr-apr-thumb-arrow:hover,
.pr-page button.pr-apr-thumb-arrow:focus,
.pr-page button.pr-apr-thumb-arrow:focus-visible,
.pr-page button.pr-apr-thumb-arrow:active {
	background: none;
	border: 0;
	box-shadow: none;
	outline: none;
	color: #000;
}
.pr-apr-thumb-arrow svg { display: block; }
.pr-apr-thumb-prev { left: 146px; }
.pr-apr-thumb-next { left: 701px; }
.pr-apr-teaser-card { position: absolute; left: 770px; top: 766px; width: 577px; }
.pr-apr-teaser-card .pr-review-card--teaser {
	width: 577px;
	min-height: 176px;
	border-radius: 30px;
	background: #fff;
	padding: 26px 36px 24px;
	transition: opacity 0.22s ease;
}
.pr-apr-teaser-card header { display: flex; align-items: center; gap: 20px; margin: 0 0 12px; }
.pr-apr-teaser-card .pr-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #e8e8e8;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 600;
	color: #000;
}
.pr-page .pr-apr-teaser-card .pr-review-author { margin: 0; font-size: 16px; font-weight: 500; letter-spacing: 0.5px; color: #000; }
.pr-page .pr-apr-teaser-card .pr-review-text { margin: 0; font-size: 16px; font-weight: 300; line-height: 23px; letter-spacing: 0.5px; color: #000; }
.pr-apr-teaser-card > .pr-arrow { position: absolute; right: -36px; top: 78px; color: #f99b25; }
/* GeneratePress pinta los <button> con caja gris: el "[...]" de seguir
   leyendo vuelve a ser un enlace de texto naranja en línea. */
.pr-page--apr button.pr-more {
	display: inline;
	width: auto;
	height: auto;
	padding: 0;
	border: 0;
	background: none;
	color: #f99b25;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 400;
	cursor: pointer;
}
.pr-page--apr button.pr-more:hover,
.pr-page--apr button.pr-more:focus { background: none; color: #f99b25; outline: none; box-shadow: none; }

/* ---- Pestañas (1010..1628, blanco) ---- */
/* Con padding-bottom 0, la pestaña de Certificaciones (mucho más alta que las
   demás) llegaba pegada al bloque siguiente. El min-height mantiene los 618
   del frame cuando el panel es corto (12/08/2026). */
.pr-page--apr .pr-tabs-section { padding: 104px 0 90px; min-height: 618px; }
.pr-apr-tabs-canvas { padding-left: 194px; padding-right: 194px; }
.pr-page--apr .pr-tabs { display: flex; gap: 0; border: 0; }
.pr-page--apr .pr-tabs [role="tab"] {
	font-family: var(--pr-font-body);
	font-size: 24px;
	font-weight: 300;
	letter-spacing: 0.5px;
	color: #000;
	background: none;
	border: 0;
	padding: 0;
	margin-right: 116px;
	cursor: pointer;
}
.pr-page--apr .pr-tabs [role="tab"].is-active { color: #648bff; }
.pr-page--apr .pr-tabs-viewport { margin-top: 60px; max-width: 933px; }
.pr-page--apr .pr-tab-panel p { font-size: 16px; font-weight: 300; line-height: 20px; letter-spacing: 0.5px; color: #000; }
.pr-page--apr .pr-tab-panel p + p { margin-top: 20px; }
.pr-page--apr .pr-tab-panel p strong { font-weight: 600; }
/* `.pr-cert-row img` (0,1,1) gana a `.pr-cert-logo--flutex` (0,1,0), así que
   TODOS los logos se quedaban en los 76px por defecto. Anchos del grupo
   226:3584: sltex 162, Flutex 160, Cleantex 160 y Comisión Europea 176. */
.pr-page--apr .pr-cert-logo--seal { width: 162px; }
.pr-page--apr .pr-cert-logo--flutex { width: 160px; }
.pr-page--apr .pr-cert-logo--cleantex { width: 160px; }
.pr-page--apr .pr-cert-logo--ec { width: 176px; }
.pr-page--apr .pr-cert-row img { height: auto; }
/* El rótulo "Advertencia" es lo único en Bold y va pegado a su párrafo (sin
   línea en blanco), como en el texto 215:8893. */
/* `.pr-page--apr .pr-tab-panel p` (0,3,1) pisa a `.pr-warning-title` (0,2,0),
   así que el rótulo se quedaba en Light: hay que igualar especificidad. */
.pr-page--apr .pr-tab-panel p.pr-warning-title { font-weight: 700; margin-top: 20px; }
.pr-page--apr .pr-tab-panel p.pr-warning-title + p { margin-top: 0; }

/* ---- Fila de hitos naranjas (1628..1931, f9f9f9) y azules (4611..4914) ---- */
.pr-apr-hitos,
.pr-apr-cerca { position: relative; height: 303px; }
.pr-apr-hitos { background: #f9f9f9; }
.pr-apr-cerca { background: #fff; }
.pr-apr-hitos .pr-esh-canvas,
.pr-apr-cerca .pr-esh-canvas { height: 100%; }
.pr-apr-hito { position: absolute; left: var(--x); top: 87px; width: 330px; }
.pr-apr-hito img { position: absolute; left: calc(var(--i) - var(--x)); top: 0; display: block; }
/* Las dos filas van con interlineado 100% y sin tracking (frames 215:8890 y
   215:8917); antes iban a 21px y +0.5px. Anchos por columna del frame. */
.pr-page .pr-apr-hito p {
	margin: 69px 0 0;
	font-size: 16px;
	font-weight: 300;
	line-height: 16px;
	letter-spacing: 0;
	color: #000;
	text-align: center;
}
.pr-apr-hitos .pr-apr-hito:nth-child(1) { width: 284px; }
.pr-apr-hitos .pr-apr-hito:nth-child(2) { width: 329px; }
.pr-apr-hitos .pr-apr-hito:nth-child(3) { width: 307px; }
.pr-page .pr-apr-hito p strong { font-weight: 600; }
/* Fila azul (grupo 215:8917): el texto va en AZUL #648bff, no en negro, y los
   anchos son 284 / 207 / 283 con interlineado 100% y sin tracking. */
.pr-apr-cerca .pr-apr-hito { top: 96px; width: 300px; }
.pr-page .pr-apr-cerca .pr-apr-hito p {
	margin-top: 76px;
	line-height: 16px;
	letter-spacing: 0;
	color: #648bff;
}
.pr-apr-cerca .pr-apr-hito:nth-child(1) { width: 284px; }
.pr-apr-cerca .pr-apr-hito:nth-child(2) { width: 207px; }
.pr-apr-cerca .pr-apr-hito:nth-child(3) { width: 283px; }

/* ---- Banda azul "Vive cada etapa" (1931..2417) ---- */
.pr-apr-etapa { position: relative; height: 486px; background: #648bff; overflow: hidden; }
.pr-apr-etapa-foto {
	position: absolute;
	left: 0;
	top: 0;
	width: 409px;
	height: 486px;
	object-fit: cover;
}
.pr-apr-etapa .pr-esh-canvas { height: 100%; }
.pr-page .pr-apr-etapa h2 {
	position: absolute;
	left: 504px;
	top: 70px;
	width: 400px;
	margin: 0;
	font-family: var(--pr-font-body);
	font-size: 32px;
	font-weight: 500;
	line-height: 38.4px;
	letter-spacing: -0.32px;
	color: #fff;
}
.pr-apr-etapa-copy { position: absolute; left: 504px; top: 168px; width: 616px; }
.pr-page .pr-apr-etapa-copy p {
	margin: 0 0 18px;
	font-size: 16px;
	font-weight: 300;
	line-height: 19.2px;
	letter-spacing: -0.16px;
	color: #fff;
}
/* El cierre ("Porque cuidar tu cuerpo hoy…") va a 24, no a 16: en el texto
   215:8896 ese tramo es Light@24 con el mismo 120% (12/08/2026). */
.pr-page .pr-apr-etapa-copy p:last-child {
	margin-bottom: 0;
	font-size: 24px;
	line-height: 28.8px;
	letter-spacing: -0.24px;
}

/* ---- ¿Qué puede hacer por mí? (2417..3327, blanco) ---- */
.pr-apr-poder { position: relative; height: 910px; background: #fff; }
.pr-apr-poder .pr-esh-canvas { height: 100%; }
/* Tipografía del frame (grupo 235:3588): 32/Medium con interlineado 120%
   (38.4) y tracking −1% (−0.32), y la entradilla 16/Light 120% / −0.16. Antes
   iban con 49px y +0.5px, que era invento mío (12/08/2026). */
.pr-page .pr-apr-poder h2 {
	position: absolute;
	left: 139px;
	top: 122px;
	margin: 0;
	font-family: var(--pr-font-body);
	font-size: 32px;
	font-weight: 500;
	line-height: 38.4px;
	letter-spacing: -0.32px;
	color: #000;
}
.pr-page .pr-apr-poder-lead {
	position: absolute;
	left: 139px;
	top: 220px;
	width: 538px;
	margin: 0;
	font-size: 16px;
	font-weight: 300;
	line-height: 19.2px;
	letter-spacing: -0.16px;
	color: #000;
}
.pr-apr-grid {
	position: absolute;
	left: 139px;
	top: 344px;
	display: grid;
	grid-template-columns: repeat(3, 388px);
	gap: 15px 16px;
}
.pr-apr-cell { width: 388px; height: 214px; border-radius: 30px; }
.pr-apr-cell--foto { object-fit: cover; display: block; }
.pr-apr-cell--amarilla { background: #ffe082; padding: 40px 46px 0 37px; }
.pr-page .pr-apr-cell--amarilla p {
	margin: 0;
	font-size: 16px;
	font-weight: 300;
	line-height: 20px;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-page .pr-apr-cell--amarilla p strong { font-weight: 600; }
/* Flip 3D al pasar el ratón, igual que las tarjetas de Sports (.pr-flip):
   reverso oscuro, mismo gris que el hover cerrado de la FAQ (12/08/2026). */
.pr-apr-cell.pr-flip {
	background: transparent;
	padding: 0;
	perspective: 1100px;
}
.pr-apr-cell.pr-flip .pr-flip-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.pr-apr-cell.pr-flip:hover .pr-flip-inner,
.pr-apr-cell.pr-flip:focus-within .pr-flip-inner { transform: rotateY(180deg); }
.pr-apr-cell.pr-flip .pr-flip-front,
.pr-apr-cell.pr-flip .pr-flip-back {
	position: absolute;
	inset: 0;
	padding: 40px 46px 0 37px;
	border-radius: 30px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	overflow: hidden;
}
.pr-apr-cell.pr-flip .pr-flip-front { background: #ffe082; }
/* El reverso arranca ARRIBA, como en las fichas de Sports: centrado dejaba
   el texto muy bajo respecto al anverso (12/08/2026). */
.pr-apr-cell.pr-flip .pr-flip-back {
	background: #262626;
	transform: rotateY(180deg);
}
.pr-page .pr-apr-cell.pr-flip .pr-flip-back p {
	margin: 0;
	font-size: 16px;
	font-weight: 300;
	line-height: 19.2px;
	letter-spacing: -0.16px;
	color: #fff;
}

/* ---- Historias + opiniones (3327..4611, f9f9f9) ---- */
.pr-apr-historias { position: relative; height: 1284px; background: #f9f9f9; }
.pr-apr-historias .pr-esh-canvas { height: 100%; }
.pr-apr-stories { position: relative; height: 100%; }
.pr-apr-maria { position: absolute; left: 139px; top: 130px; margin: 0; }
.pr-apr-maria img { width: 747px; height: 454px; object-fit: cover; border-radius: 30px; display: block; }
.pr-apr-maria figcaption,
.pr-apr-doctor .pr-apr-story-caption {
	position: absolute;
	left: 54px;
	bottom: 24px;
	font-size: 16px;
	font-weight: 300;
	line-height: 24px;
	letter-spacing: 0.5px;
	color: #fff;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
	text-align: left;
}
.pr-apr-maria figcaption strong,
.pr-apr-doctor .pr-apr-story-name { font-weight: 600; font-size: 20px; }
/* La segunda línea del rótulo ("Paciente de artrosis"…) va en naranja */
.pr-apr-cap-sub { color: #f99b25; }
/* Intercambio grande↔pequeña: fundido corto y suave, sin desenfoque ni zoom.
   Se queda en 0.18s con salida `ease-out`: se nota el relevo pero no llega a
   sentirse como una animación (12/08/2026, antes 0.3s y antes de eso con
   blur, que resultaba pesado). Cuadra con el setTimeout del JS, que cambia el
   src a mitad de camino. */
.pr-apr-maria img,
.pr-apr-doctor img,
.pr-apr-maria figcaption,
.pr-apr-doctor .pr-apr-story-caption {
	transition: opacity 0.18s cubic-bezier(0.33, 0, 0.2, 1);
}
/* 17/08/2026: aquí se bajaba la foto y el pie a opacidad 0 para cambiar de
   historia, y entre una y otra se veía el hueco. Ahora el módulo deja una
   copia calcada encima y funde solo esa, así que no hay que ocultar nada. */
.pr-apr-fantasma {
	position: absolute;
	margin: 0;
	pointer-events: none;
	z-index: 4;
	opacity: 1;
	transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
	.pr-apr-maria img, .pr-apr-doctor img, .pr-apr-maria figcaption, .pr-apr-doctor .pr-apr-story-caption { transition: none; }
}
.pr-page .pr-apr-historias-h2 {
	position: absolute;
	left: 940px;
	top: 206px;
	width: 420px;
	margin: 0;
	font-family: var(--pr-font-body);
	font-size: 32px;
	font-weight: 500;
	line-height: 38.4px;
	letter-spacing: -0.32px;
	color: #f99b25;
}
.pr-page .pr-apr-historias-sub {
	position: absolute;
	left: 940px;
	top: 296px;
	width: 380px;
	margin: 0;
	font-size: 16px;
	font-weight: 300;
	line-height: 19.2px;
	letter-spacing: -0.16px;
	color: #000;
}
/* Flechas del carrusel de historias (grupo 243:3590, que arranca en (69,130)
   de la sección): izquierda a (0,201) y derecha a (1232,341) del grupo. */
.pr-apr-historias-prev,
.pr-apr-historias-next {
	position: absolute;
	width: 34px;
	height: 34px;
	color: #f99b25;
}
.pr-apr-historias-prev { left: 69px; top: 331px; }
.pr-apr-historias-next { left: 1301px; top: 471px; }
/* Es un <button> (para poder clicarla): resetea lo que trae GeneratePress.
   Sin recuadro, sombra ni escalado en ningún estado — las fotos van limpias
   (12/08/2026); lo único que hace es funcionar. */
.pr-apr-doctor {
	position: absolute;
	left: 940px;
	top: 381px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.pr-apr-doctor img { width: 336px; height: 203px; object-fit: cover; border-radius: 20px; display: block; }
.pr-apr-doctor .pr-apr-story-caption { left: 35px; bottom: 16px; }
.pr-page .pr-apr-doctor:hover,
.pr-page .pr-apr-doctor:focus,
.pr-page .pr-apr-doctor:focus-visible,
.pr-page .pr-apr-doctor:active {
	background: none;
	border: 0;
	box-shadow: none;
	outline: none;
	transform: none;
}
.pr-page .pr-apr-doctor img,
.pr-page .pr-apr-maria img { border: 0; outline: none; box-shadow: none; }

.pr-page .pr-apr-opinan-h2 {
	position: absolute;
	left: 139px;
	top: 703px;
	margin: 0;
	font-family: var(--pr-font-body);
	font-size: 32px;
	font-weight: 500;
	line-height: 38.4px;
	letter-spacing: -0.32px;
	color: #000;
}
/* Texto 215:8910: 418 de ancho, 24/Light con interlineado 130% (31.2) y
   tracking −1% (−0.24). */
.pr-page .pr-apr-opinan-sub {
	position: absolute;
	left: 139px;
	top: 775px;
	width: 418px;
	margin: 0;
	font-size: 24px;
	font-weight: 300;
	line-height: 31.2px;
	letter-spacing: -0.24px;
	color: #000;
}
.pr-apr-nota { position: absolute; left: 139px; top: 897px; }
.pr-apr-nota-num { font-size: 64px; font-weight: 700; letter-spacing: 0; color: #000; }
.pr-apr-nota-txt {
	display: inline-block;
	width: 150px;
	margin-left: 14px;
	font-size: 14px;
	font-weight: 300;
	line-height: 20px;
	letter-spacing: 0.5px;
	color: #000;
	vertical-align: 12px;
}
.pr-page .pr-apr-opinar {
	position: absolute;
	left: 139px;
	top: 983px;
	width: 320px;
	margin: 0;
	font-size: 16px;
	font-weight: 300;
	line-height: 25px;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-page button.pr-apr-btn-naranja {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 24px;
	border: 0;
	border-radius: 30px;
	background: #f99b25;
	color: #fff;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0;
	cursor: pointer;
	transition: opacity 0.25s ease;
}
.pr-page button.pr-apr-btn-naranja:hover { opacity: 0.85; background: #f99b25; color: #fff; }
.pr-page button.pr-apr-btn-naranja:focus,
.pr-page button.pr-apr-btn-naranja:focus-visible { background: #f99b25; color: #fff; border: 0; outline: 2px solid rgba(0,0,0,0.25); outline-offset: 2px; box-shadow: none; }
/* Botón 215:8914: 186×40 con el texto a 12 del borde izquierdo y el chevron
   pegado al derecho — antes iba centrado con padding 24 y sin flecha. */
.pr-page button.pr-apr-escribir {
	position: absolute;
	left: 139px;
	top: 1049px;
	width: 186px;
	justify-content: space-between;
	padding: 0 12px;
}
.pr-apr-escribir svg { flex: 0 0 auto; }
/* Botón 215:8877: 99×43 con el icono de filtros a la izquierda (el texto
   arranca en 39) — en ES pone "Filtros", no "Filters". */
/* `button.pr-apr-btn-naranja` fija height:40 con más peso: hay que igualar la
   especificidad para que valgan los 43 del frame. */
.pr-page button.pr-apr-filtros {
	position: absolute;
	left: 1156px;
	top: 778px;
	width: 99px;
	height: 43px;
	gap: 8px;
	padding: 0;
}
.pr-apr-filtros svg { flex: 0 0 auto; }
/* Grupo 228:3586 (748×302 a x587): la TARJETA blanca mide 632 y va a x644;
   los 748 del grupo incluyen una flecha de 34 a cada lado. Dentro: avatar
   40×40 a (58,39), autor 20/Medium lh30 y texto de 511 a (58,102) 16/Light
   lh20. */
.pr-apr-opinion-row {
	position: absolute;
	left: 587px;
	top: 839px;
	width: 748px;
	height: 302px;
}
.pr-apr-opinion-prev,
.pr-apr-opinion-next {
	position: absolute;
	top: 134px;
	width: 34px;
	height: 34px;
	color: #f99b25;
}
.pr-apr-opinion-prev { left: 0; }
.pr-apr-opinion-next { left: 714px; }
.pr-apr-opinion {
	position: absolute;
	left: 57px;
	top: 0;
	width: 632px;
	height: 302px;
	border-radius: 30px;
	background: #fff;
	padding: 39px 58px 30px;
	transition: opacity 0.22s ease;
}
.pr-apr-opinion header { display: flex; align-items: center; gap: 19px; margin: 0 0 22px; }
.pr-apr-opinion .pr-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #f4e9e9;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	font-weight: 600;
	/* Ámbar de Active, no el rojo de Sports (20/08/2026). */
	color: #f99b25;
}
.pr-page .pr-apr-opinion .pr-review-author { margin: 0; font-size: 20px; font-weight: 500; line-height: 30px; letter-spacing: 0.5px; color: #000; }
.pr-page .pr-apr-opinion .pr-review-text { margin: 0; width: 511px; font-size: 16px; font-weight: 300; line-height: 20px; letter-spacing: 0.5px; color: #000; }

/* ---- FAQ (blanco; abierta en amarillo) ---- */
.pr-page--apr .pr-faq { padding: 136px 0 130px; background: #fff; }
.pr-page--apr .pr-faq .pr-esh-canvas { padding-left: 141px; }
.pr-page--apr .pr-faq h2 {
	margin: 0 0 77px;
	font-family: var(--pr-font-body);
	font-size: 32px;
	font-weight: 500;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-page--apr .pr-faq-item { width: 1111px; margin-bottom: 8px; }
.pr-page--apr .pr-faq-q {
	background: #f9f9f9;
	border-radius: 30px;
	padding: 27px 62px;
}
/* Igual que la ficha de Sports EU pero en amarillo (12/08/2026). Hay que fijar
   TAMBIÉN el color del texto: la regla base pone #fff al pasar el ratón
   (`.pr-faq-item:not(.is-open) .pr-faq-q:hover`) y la de la home ES lo repite
   al abrir, así que antes quedaba blanco sobre claro y no se leía. */
.pr-page--apr .pr-faq-item:not(.is-open) .pr-faq-q:hover,
.pr-page--apr .pr-faq-item:not(.is-open) .pr-faq-q:focus { background: #efefef; color: #000; }
.pr-page--apr .pr-faq-item.is-open .pr-faq-q,
.pr-page--apr .pr-faq-item.is-open .pr-faq-q:hover,
.pr-page--apr .pr-faq-item.is-open .pr-faq-q:focus { background: #ffe082; color: #000; }
.pr-page--apr .pr-faq-answer-inner { padding: 22px 62px 30px; }

/* ---- Newsletter (banda 428: foto del nodo 152:7225 y velo oscuro por la
   izquierda para el copy, que en el frame va como capa aparte) ---- */
.pr-apr-news { position: relative; height: 428px; overflow: hidden; background: #1e1e1e; }
.pr-apr-news-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pr-apr-news .pr-esh-canvas { position: relative; z-index: 1; height: 100%; }
/* Caja de vidrio del grupo 228:3587 (Rectangle 4197: 446×252 r30, negro 10% +
   Vidrio con la misma receta del resto del site: luz −45° 80%, refracción 80,
   profundidad 20, dispersión 50, escarcha 4, separación 0). Sustituye al velo
   degradado de antes, que no estaba en el frame (12/08/2026). */
.pr-apr-news-glass {
	position: absolute;
	left: 82px;
	top: 88px;
	width: 446px;
	height: 252px;
	border-radius: 30px;
	background:
		var(--pr-glass-light),
		rgba(0, 0, 0, 0.1);
	-webkit-backdrop-filter: var(--pr-glass-frost);
	backdrop-filter: var(--pr-glass-frost);
	box-shadow: var(--pr-glass-edge);
	pointer-events: none;
}
.pr-page .pr-apr-news h2 {
	position: absolute;
	left: 126px;
	top: 127px;
	margin: 0;
	font-family: var(--pr-font-body);
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 0.5px;
	color: #fff;
}
.pr-page .pr-apr-news p {
	position: absolute;
	left: 126px;
	top: 167px;
	width: 331px;
	margin: 0;
	font-size: 16px;
	font-weight: 300;
	line-height: 19px;
	letter-spacing: 0.5px;
	color: #fff;
}
.pr-apr-news-form { position: absolute; left: 126px; top: 268px; display: flex; gap: 12px; }
.pr-apr-news-form input {
	width: 249px;
	height: 40px;
	border: 0;
	border-radius: 30px;
	padding: 0 16px;
	background: #fff;
	font-family: var(--pr-font-body);
	font-weight: 300;
	font-size: 16px;
	color: #1e1e1e;
}
.pr-apr-news-form input::placeholder { color: #1e1e1e; opacity: 1; }
.pr-apr-news-form input:focus { outline: none; }
.pr-apr-news-form input:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: 2px; }
/* Botón NARANJA sólido (93×40 r30, texto a 12 y chevron al final), no el
   vidrio que tenía antes — formulario 215:8992. */
.pr-page .pr-apr-news-form button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 93px;
	height: 40px;
	padding: 0 12px;
	border: 0;
	border-radius: 30px;
	background: #f99b25;
	color: #fff;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0;
	cursor: pointer;
	transition: opacity 0.25s ease;
}
.pr-page .pr-apr-news-form button:hover,
.pr-page .pr-apr-news-form button:focus { background: #f99b25; color: #fff; opacity: 0.9; }
.pr-apr-news-form button svg { flex: 0 0 auto; }

/* Los avisos de Woo (cupones, añadido…) no deben descolocar el hero fijo */
.pr-apr-hero .woocommerce-message,
.pr-apr-hero .woocommerce-info,
.pr-apr-hero .woocommerce-error { position: absolute; top: 86px; left: 50%; transform: translateX(-50%); z-index: 5; }

/* ==========================================================================
   FICHA SPORTS ES — reconciliación de pieles (13/08/2026)
   single-product-es-sports.php replica la maqueta europea (pr-page--us +
   pr-page--eu-f) pero lleva el header y el footer del sitio español, que
   exigen pr-page--home-es. Esa clase arrastra ajustes propios de la home ES
   —FAQ oscura y estrecha, interletraje 0— que aquí sobran. Este bloque va al
   final del fichero a propósito: con la misma especificidad, gana por orden.
   ========================================================================== */

/* El cuerpo mantiene el interletraje europeo; header y footer siguen a 0. */
.pr-page--spr-es .pr-main { letter-spacing: 0.5px; }

/* FAQ: la del frame 83:9644 (sin fondo propio, pregunta abierta en rojo). */
.pr-page--spr-es .pr-faq { background: none; }
.pr-page--spr-es .pr-faq h2 { margin: 0 0 39px 141px; }
.pr-page--spr-es .pr-faq-q { padding: 24px 110px 24px 62px; }
.pr-page--spr-es .pr-faq-item.is-open .pr-faq-q,
.pr-page--spr-es .pr-faq-item.is-open .pr-faq-q:hover,
.pr-page--spr-es .pr-faq-item.is-open .pr-faq-q:focus {
	background: var(--pr-red);
	color: #fff;
}
.pr-page--spr-es .pr-faq-item:not(.is-open) .pr-faq-q:focus { background: #f9f9f9; color: #000; }
.pr-page--spr-es .pr-faq-answer-inner {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 28px 62px 24px;
	font-size: 20px;
	line-height: 1.2;
	letter-spacing: 0.5px;
}

/* El logo de la Comisión Europea se dimensionaba por el alt en inglés
   (`img[alt="European Commission"]`), que en castellano no casa. Va por clase,
   que es la que ponen las tres fichas. */
.pr-page--us .pr-cert-row img.pr-cert-logo--ec { width: 150px; }

/* Igual que en la ficha Active: "Añadir al carrito" no cabe en los 128px del
   frame (pensados para "Add to cart") y partía en dos líneas. El botón sigue
   siendo rojo, solo se ensancha lo justo. */
.pr-page--spr-es .pr-sticky-cta {
	width: auto;
	min-width: 128px;
	padding: 0 18px;
	white-space: nowrap;
}

/* ==========================================================================
   FOTO DE PRODUCTO — las cuatro fichas (13/08/2026)

   Tres cosas que pidió Pablo:

   1) La foto principal quedaba pegada a la tira de miniaturas. El hueco era de
      42px en US y en Active en reposo, pero solo de 7px en EU y ES (su caja es
      de 633 y no de 587). Se sube la columna de la foto —bote y sellos, para
      no descomponer el grupo— hasta dejar los mismos 42px en las cuatro.

   2) En Active la caja CRECÍA al cambiar de imagen (de 587 a 614) y el hueco
      caía a 15px: `.woocommerce img { height: auto }` (0,1,1) ganaba a
      `.pr-apr-card` (0,1,0). Con la clase de página delante ya no.

   3) Ninguna imagen de producto lleva esquinas redondeadas. Las reglas van por
      contenedor, no por clase de imagen ni por fichero, para que cualquier
      foto que se suba mañana desde WordPress salga igual: entera (contain,
      sin recorte ni deformación) y sin bordes.
   ========================================================================== */

/* --- 1) (retirado) El aire hasta las miniaturas lo da ya la caja correcta
   de 471x587 en (199,161), que es la del frame. Antes se subía la columna
   35px a mano porque la caja estaba mal dimensionada. --------------------- */

/* --- 2) La caja de Active no crece con la imagen que toque ------------- */
.pr-page--apr .pr-apr-card {
	height: 587px;
	object-fit: contain;
}

/* --- 3) Las esquinas las redondea el CSS, no el fichero ---------------
   El redondeo del diseño se mantiene (20px la principal, 10px las miniaturas):
   lo que sobraba era el BLANCO. Las us-gallery-*.jpg venían de Figma con las
   esquinas pintadas de blanco —un JPG no tiene transparencia—, así que sobre
   el redondeo del CSS aparecía un halo claro. Corregidas las fotos para que
   la imagen llegue hasta el borde, el `border-radius` recorta limpio.
   Aquí no hace falta declarar nada: valen las reglas de cada piel. */

/* La principal LLENA su caja. Con `contain` las fotos de galería (260x338 en
   una caja de 507x633) dejaban franjas blancas a los lados: eran los "bordes
   blancos". Con `cover` no hay franja nunca, y las tarjetas de producto no se
   notan recortadas porque su proporción ya es la de la caja (942x1175 sobre
   507x633 pierde medio píxel). Vale igual para lo que se suba mañana. */
.pr-page .pr-hero-media .pr-hero-shot,
.pr-page .pr-apr-hero .pr-apr-card { object-fit: cover; }

/* Los sellos solo acompañan a la tarjeta del producto: al cambiar de imagen se
   van con el mismo fundido que la foto (clase que pone proresolve.js). */
.pr-page .pr-hero-badge,
.pr-page .pr-apr-seal { transition: opacity 0.25s ease; }
.pr-page .pr-sin-sellos .pr-hero-badge,
.pr-page .pr-sin-sellos .pr-apr-seal,
.pr-sin-sellos .pr-hero-badge,
.pr-sin-sellos .pr-apr-seal { opacity: 0; pointer-events: none; }

/* --- 4) Footer ES: deshacer lo que le cuela la piel inglesa -------------
   El body lleva `pr-page--us` para heredar la maqueta del cuerpo, y con ella
   se colaban dos medidas pensadas para el footer INGLÉS: el párrafo a 377px
   (en castellano es más largo y saltaba a seis líneas) y el botón 17px más
   arriba, que acababa montado encima del texto. Se devuelven a las del footer
   español, que son las que usa la ficha de Active. */
.pr-page--spr-es .pr-esh-footer-desc { width: 464px; }
/* Mi cuenta en ES lleva `pr-page--us` para heredar la maqueta del cuerpo y
   con ella se colaba el footer INGLES (parrafo a 377px y boton 17px mas
   arriba). Mismo trato que la ficha de Sports ES.
   24/08/2026: el parrafo se corrigio al ancho espanol (464) pero el boton se
   quedo en la cota INGLESA (237/47), 17px mas arriba que en el resto de la
   web, y por eso seguia pegado al parrafo. Van las del footer espanol
   (254/53), las mismas que usa cualquier otra pagina ES. */
.pr-page--account.pr-page--home-es .pr-esh-footer-desc { width: 464px; }
.pr-page--account.pr-page--home-es .pr-esh-footer-cta1 { top: 254px; min-height: 53px; }
.pr-page--spr-es.pr-page--eu-f .pr-esh-footer-cta1 { top: 254px; }

/* --- 5) Caja de equipos en ES: dos líneas ------------------------------
   "Elige la cantidad que mejor se adapte a tus necesidades. Cada caja incluye
   10 botes." es más largo que el inglés y a 16px saltaba a tres líneas, que no
   caben en la caja de 95px del frame. Medido en el navegador: con la misma
   columna de 322px, a 15px entra en dos. Es el cambio más pequeño que lo
   arregla — no toca ni la caja ni los controles. */
.pr-page--spr-es .pr-team-copy p {
	font-size: 15px;
	line-height: 19px;
}

/* --- 6) Cotas finas del grupo 6474 (EU/ES) -----------------------------
   Con el frame delante: la línea del precio por unidad va 6px más arriba, la
   descripción mide 551 y no 577 —cambia dónde parte el texto— y la tira de
   miniaturas ocupa 474 (de 196 a 670), no 469. */
.pr-page--eu-f .pr-price-unit { top: 254px; }
.pr-page--eu-f .pr-product-desc { width: 551px; }
.pr-page--eu-f .pr-review-thumbs {
	width: 474px;
	gap: 0;
	justify-content: space-between;
}

/* La descripción en castellano es una línea más larga que la inglesa, así que
   a los 551px del frame invadía "Cantidad". Se baja el bloque de compra 20px
   —lo que crece el texto— en lugar de ensanchar la columna y salirse del
   diseño. La caja de equipos no se mueve: sigue en los 644 del frame. */
.pr-page--spr-es .pr-buy { top: 553px; }

/* ==========================================================================
   CONÓCENOS / ABOUT US — frame 215:9511 (1440×4012, 13/08/2026)
   Una plantilla para los tres sites (page-about.php). Maqueta fija 1440 como
   el resto: secciones position:relative de alto fijo, hijos absolutos en las
   cotas del frame. La piel del mercado pone header, footer, canvas y zoom.
   ========================================================================== */

.pr-page--about .pr-main { padding-top: 0; }
.pr-page--about .pr-main,
.pr-page--about .pr-abt-hero { margin-top: 0; }

/* El ítem activo del menú no es un producto: negro en claro, blanco sobre
   el hero y el footer (el frame lo pinta blanco Bold, no rojo). En US/EU la
   regla roja lleva `:not(.pr-page--home-es)` y 6 clases: se iguala. */
.pr-page--about .pr-nav a.is-active,
.pr-page--us.pr-page--about .pr-nav a.is-active { color: #000; }
.pr-page--about .pr-header.is-inverted .pr-nav a.is-active,
.pr-page--us.pr-page--about .pr-header.is-inverted .pr-nav a.is-active { color: #fff; }

/* ------------------------------- Hero ---------------------------------- */
.pr-abt-hero {
	position: relative;
	height: 782px;
	overflow: hidden;
	background: #1e1e1e;
}
.pr-abt-hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Velo del frame: negro plano al 20% (segundo fill del rectángulo 215:9512) */
.pr-abt-hero .pr-abt-veil {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.2);
	pointer-events: none;
}
.pr-abt-hero .pr-esh-canvas { position: relative; z-index: 1; height: 100%; }
.pr-abt-h1 {
	position: absolute;
	left: 119px;
	top: 513px;
	width: 493px;
	margin: 0;
	font-family: var(--pr-font-brand);
	font-weight: 400;
	font-size: 40px;
	line-height: 1.2;
	letter-spacing: 0;
	color: #fff;
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.4);
}
.pr-abt-hero-cta { position: absolute; left: 119px; top: 629px; }

/* ------------------------ What we're made of --------------------------- */
/* Del final del hero (782) al arranque de la banda gris (1722). */
.pr-abt-made {
	position: relative;
	height: 940px;
	background: #fff;
}
.pr-abt-made .pr-esh-canvas,
.pr-abt-equipo .pr-esh-canvas,
.pr-abt-ciencia .pr-esh-canvas { position: relative; height: 100%; }
.pr-page--about .pr-abt-h2 {
	position: absolute;
	left: 119px;
	margin: 0;
	font-family: var(--pr-font-body);
	font-weight: 500;
	font-size: 32px;
	line-height: 1;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-abt-made .pr-abt-h2 { top: 119px; }
.pr-abt-intro {
	position: absolute;
	left: 119px;
	top: 193px;
	width: 524px;
}
.pr-abt-intro p,
.pr-abt-spreads p,
.pr-abt-bio p {
	margin: 0;
	font-family: var(--pr-font-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-abt-intro p + p,
.pr-abt-spreads p + p { margin-top: 20px; }
.pr-abt-intro strong { font-weight: 500; }
.pr-abt-frase {
	position: absolute;
	left: 119px;
	top: 420px;
	width: 524px;
	margin: 0;
	font-family: var(--pr-font-body);
	font-weight: 500;
	font-size: 24px;
	line-height: 32px;
	letter-spacing: 0.5px;
	color: #000;
}
/* La intro castellana mide dos líneas más que la inglesa (240px por 200):
   la frase baja lo mismo para conservar el aire de 27px del frame. */
.pr-page--home-es .pr-abt-frase { top: 460px; }
.pr-abt-foto {
	position: absolute;
	width: 531px;
	height: 284px;
	border-radius: 30px;
	object-fit: cover;
	display: block;
}
.pr-abt-foto--1 { left: 717px; top: 174px; }
.pr-abt-foto--2 { left: 119px; top: 570px; }
.pr-abt-h3 {
	position: absolute;
	left: 720px;
	top: 524px;
	margin: 0;
	font-family: var(--pr-font-body);
	font-weight: 500;
	font-size: 24px;
	line-height: 32px;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-abt-spreads {
	position: absolute;
	left: 720px;
	top: 574px;
	width: 551px;
}

/* ------------------- Embajadores y asesores (banda gris) ---------------- */
.pr-abt-equipo {
	position: relative;
	height: 1354px;
	background: #f9f9f9;
	/* que el ancla no esconda el título bajo el menú fijo */
	scroll-margin-top: 90px;
}
.pr-abt-equipo .pr-abt-h2 { top: 109px; }
.pr-abt-equipo-lead {
	position: absolute;
	left: 119px;
	top: 166px;
	width: 505px;
	margin: 0;
	font-family: var(--pr-font-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: 0.5px;
	color: #000;
}
/* Cada fila coloca foto y bio en las cotas del frame (255/578/930). */
.pr-abt-fila { position: absolute; left: 0; width: 100%; }
.pr-abt-fila--1 { top: 255px; }
.pr-abt-fila--2 { top: 578px; }
.pr-abt-fila--3 { top: 930px; }
.pr-abt-card {
	position: absolute;
	top: 0;
	width: 531px;
	height: 284px;
	margin: 0;
	border-radius: 30px;
	overflow: hidden;
}
.pr-abt-fila--izq .pr-abt-card { left: 119px; }
.pr-abt-fila--dcha .pr-abt-card { left: 720px; }
.pr-abt-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Rótulo sobre la foto: nombre SemiBold 24 + cargo Light 16 en blanco,
   a (51,207) de la esquina de la tarjeta, con un degradado sutil de apoyo. */
.pr-abt-card figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 90px 30px 31px 51px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.42) 100%);
	color: #fff;
}
.pr-abt-card strong {
	display: block;
	font-family: var(--pr-font-body);
	font-weight: 600;
	font-size: 24px;
	line-height: 1;
	letter-spacing: 0.5px;
}
.pr-abt-card span {
	display: block;
	margin-top: 6px;
	font-family: var(--pr-font-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 0.5px;
}
/* Bios: anchos y desfases medidos por fila (33 / 69 / 54 desde su foto). */
.pr-abt-bio { position: absolute; }
.pr-abt-fila--1 .pr-abt-bio { left: 768px; top: 33px; width: 450px; }
.pr-abt-fila--2 .pr-abt-bio { left: 170px; top: 69px; width: 480px; }
.pr-abt-fila--3 .pr-abt-bio { left: 771px; top: 54px; width: 447px; }

/* --------------------- The Science... (caja glass) ---------------------- */
.pr-abt-ciencia {
	position: relative;
	height: 484px;
	background: url(assets/img/about-science-bg.jpg) center / cover no-repeat #1e1e1e;
}
.pr-abt-ciencia .pr-abt-veil {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.2);
	pointer-events: none;
}
/* Caja 468×261 r30 en (151,111): negro 10% + GLASS r4 (mismo efecto que el
   resto de vidrios del sitio: luz -45 grados, refracción .8). */
.pr-abt-glass {
	position: absolute;
	left: 151px;
	top: 111px;
	width: 468px;
	height: 261px;
	border-radius: 30px;
	background:
		var(--pr-glass-light),
		rgba(0, 0, 0, 0.1);
	-webkit-backdrop-filter: var(--pr-glass-frost);
	backdrop-filter: var(--pr-glass-frost);
	box-shadow: var(--pr-glass-edge), 0 2px 8px rgba(0, 0, 0, 0.10);
}
.pr-abt-glass h2 {
	position: absolute;
	left: 45px;
	top: 48px;
	width: 260px;
	margin: 0;
	font-family: var(--pr-font-body);
	font-weight: 500;
	font-size: 24px;
	line-height: 1.25;
	letter-spacing: 0.5px;
	color: #fff;
}
.pr-abt-glass p {
	position: absolute;
	left: 45px;
	top: 108px;
	width: 377px;
	margin: 0;
	font-family: var(--pr-font-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 0.5px;
	color: #fff;
}
/* Botón blanco del frame (215:9556): píldora 40 r30, texto negro. */
.pr-abt-btn-blanco {
	position: absolute;
	right: 46px;
	bottom: 23px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	border-radius: 30px;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 55%),
		#fff;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 8px rgba(0, 0, 0, 0.18);
	font-family: var(--pr-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0;
	color: #000;
	transition: opacity 0.2s ease;
}
.pr-abt-btn-blanco:hover,
.pr-abt-btn-blanco:focus { color: #000; opacity: 0.85; }
.pr-abt-btn-blanco svg { display: block; flex-shrink: 0; }

/* -------- Footer: logo de Azur del grupo 6469, solo en esta página ------ */
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-brand-azur--about {
	left: 1183px;
	top: 305px;
	width: 111px;
	height: 55px;
	object-fit: contain;
}

/* --- Correcciones del 13/08/2026 sobre el frame ------------------------- */

/* Isotipo de Solutex tras el claim (grupo 269:8006): triángulo de 12,8×8 en
   #44B8D9 —path M6.4 0 L12.8 8 L0 8 Z, vértice arriba— a 243,17 del inicio
   del texto. Va absoluto y no inline porque el claim ya no se traduce nunca:
   la cota es la misma en los tres sites (texto medido: 235,9 px). */
/* En línea tras la palabra (antes iba clavado a 243,17, que era justo el
   final de "hechos"; al mover el span de h3 a h2 el ancla cambió y pisaba
   el texto — 20/08/2026). */
.pr-abt-tri {
	position: static;
	display: inline-block;
	/* Apoyado EN la línea base, sin levantarlo.
	   Los 2px de `margin-bottom` que había aquí lo dejaban flotando: medido
	   contra la base real del texto (métricas de la fuente, no la caja de
	   línea) quedaba a −3px, y en la referencia de Figma la base del
	   triángulo cae al nivel de las letras. Un inline-block vacío con
	   `vertical-align: baseline` ya apoya su borde inferior en la base, así
	   que basta con no empujarlo (25/08/2026).
	   El hueco son 4px y no 10: el grupo 421:3853 del frame mide 255,8 de
	   ancho con el texto en 239 y el triángulo en 12,8, así que entre los dos
	   quedan exactamente 4. Con 10 el triángulo caía 6px a la derecha.
	   (Medido con el conector de Figma, no a ojo.) */
	margin: 0 0 0 4px;
	width: 12.8px;
	height: 8px;
	background: #44b8d9;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* Bios de los asesores: el frame separa los dos párrafos con un salto. */
.pr-abt-bio p + p { margin-top: 20px; }

/* Cuadro glass: el titular va a interlineado 100% (24px), no 1,25. Con 1,25
   las dos líneas medían 60px y quedaban pegadas al párrafo, que arranca a
   +60 del titular. El ancho es 260 y no los 249 del frame porque la Funnel
   autoalojada mide ~5% más y a 249 el titular inglés saltaba a tres líneas;
   con 260 rompe donde el diseño, tras "That". */
.pr-abt-glass h2 {
	width: 260px;
	line-height: 1;
}

/* Logo de Azur de esta página: es a color (triángulo azul + "Azur" en blanco),
   así que va en SVG y sin el filtro de blanco de los otros logos del footer. */
:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-brand-azur--about {
	filter: none;
}

/* ==========================================================================
   NOTICIAS / NEWS — frame 273:8247 (1440×2766, 13/08/2026)
   Una plantilla para los tres sites (page-news.php). Sin artículos reales:
   todo es placeholder. Secciones relative de alto fijo, hijos absolutos en
   las cotas del frame (restado el header de 76 en la primera sección).
   ========================================================================== */

.pr-page--news .pr-main { padding-top: 76px; }

/* El ítem activo del menú tampoco es un producto (mismo criterio que en
   Conócenos): negro en claro, blanco sobre el footer. */
.pr-page--news .pr-nav a.is-active,
.pr-page--us.pr-page--news .pr-nav a.is-active { color: #000; }
.pr-page--news .pr-header.is-inverted .pr-nav a.is-active,
.pr-page--us.pr-page--news .pr-header.is-inverted .pr-nav a.is-active { color: #fff; }

/* --------------------- Carrusel de últimos artículos -------------------- */
.pr-nws-hero {
	position: relative;
	/* 898 en el frame: el bloque sube 100px y la foto pierde 48 de alto
	   para que quepa entero en la primera pantalla de un portátil. */
	height: 750px;
	background: #fff;
}
.pr-nws-hero .pr-esh-canvas { position: relative; height: 100%; }
.pr-nws-h1 {
	position: absolute;
	left: 119px;
	top: 40px;
	width: 493px;
	margin: 0;
	font-family: var(--pr-font-brand);
	font-weight: 400;
	font-size: 40px;
	line-height: 1.2;
	letter-spacing: 0;
	color: #000;
}
.pr-nws-sub {
	position: absolute;
	left: 119px;
	top: 145px;
	width: 493px;
	margin: 0;
	font-family: var(--pr-font-body);
	font-weight: 300;
	font-style: italic;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-nws-marco {
	position: absolute;
	left: 119px;
	top: 228px;
	width: 824px;
	height: 404px;
	border-radius: 30px;
	overflow: hidden;
	display: block;
}
/* Las dos capas ocupan el marco entero; solo la que lleva .is-on se ve. */
.pr-nws-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0;
}
.pr-nws-img.is-on { opacity: 1; }
/* Píldora de categoría (273:8256): negra glass, blanca 14, r30, alto 38. */
.pr-nws-cat {
	position: absolute;
	left: 989px;
	top: 258px;
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 12px;
	border-radius: 30px;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 55%),
		#000;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
	font-family: var(--pr-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0;
	color: #fff;
}
.pr-nws-titulo {
	position: absolute;
	left: 989px;
	top: 337px;
	width: 337px;
	margin: 0;
	font-family: var(--pr-font-body);
	font-weight: 500;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-nws-texto {
	position: absolute;
	left: 989px;
	top: 446px;
	width: 333px;
	margin: 0;
	font-family: var(--pr-font-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 0.5px;
	color: #000;
	/* Red de seguridad: hasta "Leer más" (top 592) caben 6 líneas. wp_trim_words
	   ya recorta a un nº de palabras razonable; esto cubre el caso extremo. */
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* "Read more": botón desnudo del frame (sin fondo), negro 16 + chevron. */
.pr-nws-leer {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	font-family: var(--pr-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0;
	color: #000;
	transition: opacity 0.2s ease;
}
.pr-nws-leer:hover,
.pr-nws-leer:focus { color: #000; opacity: 0.6; }
.pr-nws-leer svg { display: block; flex-shrink: 0; }
.pr-nws-hero > .pr-esh-canvas > .pr-nws-leer,
.pr-nws-hero .pr-nws-leer[data-nws-leer] {
	position: absolute;
	right: 118px;
	top: 592px;
}
/* Cambio de artículo: fundido largo y suave, con una deriva de 8px que da
   sensación de relevo en vez de parpadeo. La foto se cruza entre las dos
   capas —la entrante aparece ENCIMA de la saliente— y nunca se pasa por el
   fondo blanco, que era lo que se veía como flash. */
.pr-nws-cat, .pr-nws-titulo, .pr-nws-texto {
	transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.pr-nws-img { transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
.pr-nws-hero.is-fading .pr-nws-cat,
.pr-nws-hero.is-fading .pr-nws-titulo,
.pr-nws-hero.is-fading .pr-nws-texto {
	opacity: 0;
	transform: translateY(8px);
}

/* Indicadores (266:3869 activo 30×18 azul, 266:3870 resto 18×18 gris). */
.pr-nws-dots {
	position: absolute;
	left: 668px;
	top: 682px;
	display: flex;
	align-items: center;
	gap: 13px;
}
.pr-nws-dot {
	width: 18px;
	height: 18px;
	padding: 0;
	border: 0;
	border-radius: 9px;
	background: #d9d9d9;
	cursor: pointer;
	transition: width 0.3s ease, background-color 0.3s ease;
}
.pr-nws-dot.is-on {
	width: 30px;
	background: #4a85a6;
	cursor: default;
}
.pr-nws-dot:focus-visible { outline: 2px solid #4a85a6; outline-offset: 2px; }

/* ------------------- Banda gris: explora + filtros + grid --------------- */
/* Alto en flujo, no fijo: la lista de artículos es real y su altura varía
   según cuántos haya (13/08/2026). Los huecos verticales entre bloques son
   ahora márgenes que reproducen el ritmo del frame, no cotas absolutas. */
.pr-nws-banda { background: #f9f9f9; }
.pr-nws-banda .pr-esh-canvas { position: relative; padding: 78px 0 70px; }
/* Con la clase de página delante: el reset `.pr-page p {margin:0}` es
   (0,1,1) y ganaba a `.pr-nws-explore` (0,1,0), dejándolo pegado al borde
   izquierdo en cuanto pasó de absoluto a flujo. */
.pr-page--news .pr-nws-explore {
	width: 592px;
	margin: 0 0 60px 134px;
	font-family: var(--pr-font-body);
	font-weight: 300;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: 0.5px;
	color: #000;
}

/* Fila de filtros: botón gris del frame (negro 40%) + píldoras negras.
   position:relative (no absolute): sigue siendo el ancla del panel. */
.pr-nws-filtros {
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0 0 56px 134px;
	z-index: 5;
}
.pr-nws-btn-filtros {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 14px;
	border: 0;
	border-radius: 30px;
	background: rgba(0, 0, 0, 0.4);
	font-family: var(--pr-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.pr-nws-btn-filtros:hover,
.pr-nws-btn-filtros[aria-expanded="true"] { background: rgba(0, 0, 0, 0.55); }
.pr-nws-btn-filtros svg { display: block; flex-shrink: 0; }
.pr-nws-pills { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Píldora de categoría seleccionada (215:9581): negra sólida 38, r30. */
.pr-nws-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 12px;
	border: 0;
	border-radius: 30px;
	background: #000;
	font-family: var(--pr-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}
/* El color va con .pr-page delante porque .pr-page a{color:inherit} (0,1,1)
   le ganaba a .pr-nws-pill (0,1,0) y la píldora salía negra sobre negra
   (14/08/2026). */
.pr-page a.pr-nws-pill,
.pr-page a.pr-nws-pill:visited,
.pr-page a.pr-nws-pill:hover { color: #fff; }
.pr-nws-pill svg { display: block; flex-shrink: 0; opacity: 0.7; }
.pr-nws-pill:hover svg { opacity: 1; }

/* Quitar filtros: enlace discreto bajo el botón Aplicar. */
.pr-page a.pr-nws-panel-quitar {
	display: block;
	margin: 12px 0 0;
	font-family: var(--pr-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	color: rgba(0, 0, 0, 0.55);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}
.pr-page a.pr-nws-panel-quitar:hover { color: #000; }

/* Panel de filtros (diseño propio: tarjeta del desplegable de cuenta). */
.pr-nws-panel {
	position: absolute;
	left: 0;
	top: 48px;
	width: 280px;
	padding: 22px 24px 20px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 1px 30px rgba(0, 0, 0, 0.25);
}
.pr-nws-panel-t {
	margin: 0 0 12px;
	font-family: var(--pr-font-body);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-nws-panel-t--orden {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid #ececec;
}
/* El nombre de la categoria va en un <span> propio desde el 02/09/2026, y
   esta es la razon: estas etiquetas son contenedores FLEX, y en un flex cada
   trozo de texto suelto se convierte en su propio item. Con «Lipinova®» el
   tema pinta el simbolo dentro de un <sup class="pr-rr">, asi que salian DOS
   items -«Lipinova» y «®»- y el `gap` de 10px los separaba, ademas de que
   `align-items: center` bajaba el simbolo al centro de la fila en vez de
   dejarlo arriba. Dentro del span vuelven a ser un solo item y el ® se
   comporta como texto normal. El `nowrap` es para que no se parta el nombre
   del simbolo al final de una linea. Lo mismo vale para `.pr-nws-pill`. */
.pr-nws-etq { white-space: nowrap; }

.pr-nws-check,
.pr-nws-radio {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	font-family: var(--pr-font-body);
	font-weight: 300;
	font-size: 16px;
	letter-spacing: 0.5px;
	color: #000;
	cursor: pointer;
}
.pr-nws-check input,
.pr-nws-radio input { position: absolute; opacity: 0; pointer-events: none; }
.pr-nws-caja {
	width: 18px;
	height: 18px;
	border: 1.5px solid #d9d9d9;
	border-radius: 5px;
	background: #fff;
	flex-shrink: 0;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pr-nws-check input:checked + .pr-nws-caja {
	background: #000 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>') center / 11px no-repeat;
	border-color: #000;
}
.pr-nws-circulo {
	width: 18px;
	height: 18px;
	border: 1.5px solid #d9d9d9;
	border-radius: 50%;
	background: #fff;
	flex-shrink: 0;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pr-nws-radio input:checked + .pr-nws-circulo {
	border-color: #000;
	box-shadow: inset 0 0 0 4.5px #000;
}
/* Botón "Aplicar" del formulario: sin JS, el envío recarga con los filtros
   marcados. Sin él, marcar una casilla no tendría forma de dispararse. */
.pr-nws-panel-aplicar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 40px;
	margin-top: 18px;
	border: 0;
	border-radius: 30px;
	background: #000;
	font-family: var(--pr-font-body);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0;
	color: #fff;
	cursor: pointer;
	transition: opacity 0.2s ease;
}
.pr-nws-panel-aplicar:hover { opacity: 0.85; }

/* ------------------------------- Grid ----------------------------------- */
/* En flujo, no absoluto: con artículos reales el número de tarjetas varía
   (hoy 1; el frame asumía siempre 6). */
.pr-nws-grid {
	width: 1198px;
	margin: 0 0 70px 119px;
	display: grid;
	grid-template-columns: repeat(3, 388px);
	column-gap: 17px;
	row-gap: 51px;
}
/* Estado vacío: al filtrar por una categoría sin artículos. */
.pr-nws-vacio {
	grid-column: 1 / -1;
	margin: 0;
	font-family: var(--pr-font-body);
	font-weight: 300;
	font-size: 16px;
	letter-spacing: 0.5px;
	color: #666;
}
.pr-nws-card {
	position: relative;
	height: 407px;
}
.pr-nws-card img {
	width: 388px;
	height: 214px;
	border-radius: 30px;
	object-fit: cover;
	display: block;
}
.pr-nws-card h3 {
	position: absolute;
	left: 25px;
	top: 241px;
	width: 337px;
	margin: 0;
	font-family: var(--pr-font-body);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: 0.5px;
	color: #000;
	/* Título real: puede ser más largo que el del frame. Se corta a 2 líneas
	   (caben 51px hasta el extracto) para que nunca se solape con él. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.pr-nws-card p {
	position: absolute;
	left: 25px;
	top: 292px;
	width: 333px;
	margin: 0;
	font-family: var(--pr-font-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 0.5px;
	color: #000;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.pr-nws-card .pr-nws-leer {
	position: absolute;
	right: 0;
	top: 367px;
}

/* ---------------------------- Paginación -------------------------------- */
/* Componente 273:8304 (centrado). Venía en Montserrat, de un UI kit: aquí va
   la Funnel del sitio. Se oculta entera si todo cabe en una página (PHP). */
.pr-nws-pag {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	font-family: var(--pr-font-body);
	font-weight: 400;
	font-size: 16px;
	letter-spacing: 0;
	color: #000;
}
.pr-nws-pag a { color: #000; transition: opacity 0.2s ease; }
.pr-nws-pag a:hover { opacity: 0.6; }
.pr-nws-pag-prev,
.pr-nws-pag-next {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.pr-nws-pag-flecha {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	color: #000;
}
.pr-nws-pag-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 32px;
	padding: 0 6px;
	border-radius: 8px;
}
.pr-nws-pag-num.is-on {
	background: #1e1e1e;
	color: #fff;
}
.pr-nws-pag-gap { padding: 0 2px; }

/* "Novedades sobre la resolución de la inflamación." no cabe en dos líneas
   en los 493px del frame (la Funnel/Sansation autoalojadas miden ~5% más):
   con 530 rompe donde toca, tras "resolución". El resto del bloque no se
   mueve, así que la cota del subtítulo sigue siendo la del diseño. */
.pr-page--home-es.pr-page--news .pr-nws-h1 { width: 530px; }

/* El hueco del título del carrusel es de tres líneas (caja 337×91 del frame):
   un título más largo se recorta en vez de comerse el extracto. */
.pr-nws-titulo {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ==========================================================================
   PLANTILLA DE ARTÍCULO — frame 251:7845 (13/08/2026)
   Documento en flujo (los artículos reales tendrán largos distintos): del
   frame se toman los espaciados y las cotas horizontales, no las alturas.
   ========================================================================== */

/* 48 y no 140 (26/08/2026: "tienes que subir los articulos mas cerca del
   menu"): el titular quedaba a 214px de la barra. En movil ya estaba a 6. */
.pr-page--art .pr-art-canvas { position: relative; padding: 48px 0 156px; }

/* Título: Funnel Medium 32 (el H1 de la portada de Noticias es Sansation 40;
   el del artículo no). */
/* Con dos clases: la piel del mercado trae un reset de h1 más específico
   que pisaba los márgenes. El margen inferior es 35 y no los 21 del hueco
   aparente: la caja de texto de Figma mide 91 con el texto a 77. */
.pr-page--art .pr-art-titulo {
	width: 588px;
	margin: 0 0 35px 122px;
	font-family: var(--pr-font-body);
	font-weight: 500;
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: 0.5px;
	color: #000;
}
/* El contenedor de la foto existe SOLO para que la píldora se posicione
   respecto a LA IMAGEN. Se lleva las cotas que antes tenía la imagen. */
.pr-art-media {
	position: relative;
	width: 1010px;
	margin-left: 122px;
}

/* Píldora de la categoría (251:7850): negra al 50%, blanca 16, r30, a 40px del
   borde derecho de la imagen y 21 de su borde superior.
   ⚠️ LAS COTAS SON RESPECTO A LA IMAGEN, no al lienzo. Antes eran
   `top: 181px; right: 348px` medidas desde el lienzo, y las dos estaban mal
   por el mismo motivo: dependían de cosas que cambian.
     - `top: 181` salía del frame de Figma, que traía un titular de DOS líneas.
       Con tres (el de «Omega-3 y SPM…») la imagen baja 38px y la píldora se
       quedaba 17px POR ENCIMA del borde de la foto, medio flotando en blanco
       (avisado el 27/08/2026, y el diagnóstico de Pablo era el correcto).
     - `right: 348` sale de 1440 menos el borde derecho de la imagen (1132) más
       40; en cuanto la ventana no medía 1440 exactos el hueco se encogía:
       medido 35px a 1280 y 33px a 1200. */
.pr-art-cat {
	position: absolute;
	top: 21px;
	right: 40px;
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 16px;
	border-radius: 30px;
	background: rgba(0, 0, 0, 0.5);
	font-family: var(--pr-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0;
	color: #fff;
}
.pr-art-img {
	display: block;
	width: 100%;
	height: 554px;
	border-radius: 30px;
	object-fit: cover;
}

/* Autor + fecha (azul 4A85A6) con los iconos de compartir a la derecha. */
.pr-art-meta {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 998px;
	margin: 36px 0 0 144px;
}
.pr-art-autor-fecha {
	margin: 0;
	font-family: var(--pr-font-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: 0.5px;
	color: #4a85a6;
}
.pr-art-autor-fecha strong { font-weight: 500; }
.pr-art-compartir {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	/* En el frame los iconos acaban 62px antes del borde de la columna. */
	margin: 12px 62px 0 0;
}
.pr-art-compartir button {
	display: block;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	background: none;
	color: #000;
	cursor: pointer;
	transition: opacity 0.2s ease;
}
.pr-art-compartir button:hover { opacity: 0.55; }
.pr-art-compartir svg { display: block; }
.pr-art-avisado {
	position: absolute;
	right: 0;
	top: 30px;
	padding: 6px 12px;
	border-radius: 8px;
	background: #1e1e1e;
	font-family: var(--pr-font-body);
	font-weight: 300;
	font-size: 13px;
	letter-spacing: 0.3px;
	color: #fff;
	white-space: nowrap;
}

/* Cuerpo: Light 16 al 120%, con los ladillos del frame (SemiBold los h2,
   Medium los h3, al mismo cuerpo que el texto). */
.pr-art-cuerpo {
	width: 998px;
	margin: 36px 0 0 144px;
	font-family: var(--pr-font-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-art-cuerpo p { margin: 0 0 19px; }
.pr-art-cuerpo p:last-child { margin-bottom: 0; }
.pr-art-cuerpo h2,
.pr-art-cuerpo h3 {
	margin: 19px 0;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-art-cuerpo h2 { font-weight: 600; }
.pr-art-cuerpo h3 { font-weight: 500; }
.pr-art-cuerpo a { color: #4a85a6; text-decoration: underline; }

/* Autor + cargo (SemiBold 24 negro / Light 24 azul) con la firma enfrente. */
.pr-art-pie {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 998px;
	margin: 86px 0 0 144px;
	min-height: 128px;
}
.pr-page--art .pr-art-firma-autor {
	margin: 17px 0 0 9px;
	max-width: 420px;
	font-family: var(--pr-font-body);
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: 0.5px;
}
.pr-art-firma-autor strong {
	display: block;
	font-weight: 600;
	color: #000;
}
.pr-art-firma-autor span {
	display: block;
	font-weight: 300;
	color: #4a85a6;
}
.pr-art-firma {
	display: block;
	width: 337px;
	height: 128px;
	margin-right: 10px;
	object-fit: contain;
	flex-shrink: 0;
}

/* Banda gris de referencias (251:7870): #D9D9D9 a todo el ancho, con 21px
   de aire arriba y abajo (2102-2081 del frame). */
.pr-art-refs {
	background: #d9d9d9;
	padding: 21px 0;
}
.pr-page--art .pr-art-refs-t,
.pr-page--art .pr-art-ref {
	margin: 0 0 0 144px;
	width: 998px;
	font-family: var(--pr-font-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: 0.5px;
	color: #000;
}
/* En el frame es UN solo nodo de texto a 19,2px seguidos (interlineado 120%,
   sin espaciado de párrafo): título y referencias van a línea corrida. */
.pr-page--art .pr-art-refs-t { margin-bottom: 0; }
.pr-page--art .pr-art-ref { margin-top: 0; }

/* ==========================================================================
   MENÚ US/EU = MENÚ ES (13/08/2026, petición de Pablo)
   Fuera el efecto propio que tenían Sports/News en US y EU (la sombra
   fantasma 1px 2px y el rojo duro #B71F2F del hover) y el mismo
   comportamiento que ES: hover con el color suave del producto (Sports
   #d94b5a, Active #f99b25), gris para el resto, sin sombra, y el ítem
   activo no reacciona al ratón. Va al final para ganar los empates.
   ========================================================================== */
.pr-page--us:not(.pr-page--home-es) .pr-nav a:hover,
.pr-page--us:not(.pr-page--home-es) .pr-nav a:focus-visible { text-shadow: none; }
.pr-menu-home:not(.pr-page--home-es) .pr-nav a:hover { color: #e8e8e8; }
.pr-menu-home:not(.pr-page--home-es) .pr-nav a[data-nav="sports"]:hover { color: #d94b5a; }
.pr-menu-home:not(.pr-page--home-es) .pr-nav a[data-nav="active"]:hover { color: #f99b25; }
.pr-menu-home:not(.pr-page--home-es) .pr-header:not(.is-inverted) .pr-nav a:hover { color: rgba(0, 0, 0, 0.55); }
.pr-menu-home:not(.pr-page--home-es) .pr-header:not(.is-inverted) .pr-nav a[data-nav="sports"]:hover { color: #d94b5a; }
.pr-menu-home:not(.pr-page--home-es) .pr-header:not(.is-inverted) .pr-nav a[data-nav="active"]:hover { color: #f99b25; }
/* El activo se queda como está, también con el ratón encima (como en ES). */
.pr-menu-home:not(.pr-page--home-es) .pr-nav a.is-active:hover,
.pr-menu-home:not(.pr-page--home-es) .pr-header:not(.is-inverted) .pr-nav a.is-active:hover { color: var(--pr-red); }
.pr-page--us.pr-page--about .pr-nav a.is-active:hover,
.pr-page--us.pr-page--news .pr-nav a.is-active:hover,
.pr-page--us.pr-page--about .pr-header:not(.is-inverted) .pr-nav a.is-active:hover,
.pr-page--us.pr-page--news .pr-header:not(.is-inverted) .pr-nav a.is-active:hover { color: #000; }
.pr-page--us.pr-page--about .pr-header.is-inverted .pr-nav a.is-active:hover,
.pr-page--us.pr-page--news .pr-header.is-inverted .pr-nav a.is-active:hover { color: #fff; }

/* ==========================================================================
   ARTÍCULOS DEL BLOG — bloque Yoast FAQ y tablas comparativas (13/08/2026)
   ========================================================================== */
/* Las FAQs del artículo son desplegables, con el mismo acordeón del resto de
   la web (14/08/2026) pero a la escala de la columna de texto: la pregunta es
   la barra gris con la flechita, y al abrirse pasa a coral. */
.pr-art-cuerpo .schema-faq { margin: 19px 0 0; }
.pr-art-cuerpo .schema-faq-section { margin: 0 0 10px; }
.pr-art-cuerpo .schema-faq-question {
	/* En bloque, NO en flex: las preguntas llevan <sup>®</sup> dentro y con
	   flex + space-between cada trozo de texto se vuelve un elemento suelto,
	   así que la pregunta salía partida a los lados (14/08/2026). La flecha va
	   colocada, y el hueco se lo hace el padding de la derecha. */
	display: block;
	position: relative;
	width: 100%;
	min-height: 62px;
	padding: 19px 52px 19px 24px;
	border-radius: var(--pr-radius);
	background: var(--pr-gray-faq);
	font-family: var(--pr-font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.2;
	letter-spacing: 0;
	color: #000;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
}
.pr-art-cuerpo .schema-faq-question::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 26px;
	width: 10px;
	height: 10px;
	margin-top: -8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.3s ease;
}
.pr-art-cuerpo .schema-faq-section:not(.is-open) .schema-faq-question:hover {
	background: #262626;
	color: #fff;
}
/* Al abrir, como en la home: negra con el texto en blanco (17/08/2026). Ni
   el amarillo de Active ni el rojo que tuvo antes. */
.pr-art-cuerpo .schema-faq-section.is-open .schema-faq-question {
	background: #000;
	color: #fff;
}
.pr-art-cuerpo .schema-faq-section.is-open .schema-faq-question::after { transform: rotate(45deg); margin-top: -4px; }
/* Panel que crea el JS al envolver la respuesta. */
.pr-art-cuerpo .pr-artfaq-panel {
	height: 0;
	overflow: hidden;
	transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.pr-art-cuerpo .pr-artfaq-panel .schema-faq-answer {
	margin: 0;
	padding: 18px 24px 22px;
}
/* Sin JS la respuesta se ve, para no esconder contenido. */
.pr-art-cuerpo .schema-faq-answer { margin: 0 0 12px; }
.pr-art-tabla {
	margin: 19px 0;
	overflow-x: auto;
}
.pr-art-tabla table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
	line-height: 1.25;
	letter-spacing: 0.5px;
}
.pr-art-tabla th,
.pr-art-tabla td {
	padding: 10px 14px;
	border: 1px solid #e2e2e2;
	text-align: left;
	vertical-align: top;
	font-weight: 300;
}
.pr-art-tabla th { font-weight: 500; background: #f7f7f7; }
.pr-art-tabla tr:nth-child(even) td { background: #fafafa; }


/* ==========================================================================
   CONTACTO CON WPFORMS (14/08/2026)
   El formulario lo sirve ahora WPForms Lite para que Pablo lo edite desde el
   escritorio. Su HTML y su CSS son otros, así que aquí se le da el mismo
   aspecto que tenía el de a mano: etiqueta pequeña arriba, campo píldora gris
   de 39, nombre partido en dos medias, casillas r4 y botón negro r30.

   Dos avisos para el que venga detrás:
   · WPForms 2.0 se pinta con variables (--wpforms-*). Lo que se puede ajustar
     por variable se ajusta por variable, que es lo que aguanta sus updates.
   · Su hoja carga DESPUÉS que esta y trae selectores como
     .wpforms-container select.wpforms-field-medium { max-width: 60% } (0,2,1).
     Por eso las reglas propias llevan delante .pr-contact-form--wpf
     div.wpforms-container: no es palabrería, es lo que hace falta para ganar.
   Todo cuelga de .pr-contact-form--wpf para no tocar otros formularios.
   ========================================================================== */
.pr-contact-form--wpf { width: 529px; }
.pr-contact-form--wpf div.wpforms-container {
	margin: 18px 0 0;
	--wpforms-field-background-color: #e8e8e8;
	--wpforms-field-border-color: transparent;
	--wpforms-field-border-size: 0;
	--wpforms-field-border-radius: 30px;
	--wpforms-field-text-color: #000;
	--wpforms-field-size-input-height: 39px;
	--wpforms-field-size-input-spacing: 19px;
	--wpforms-field-size-font-size: 15px;
	--wpforms-field-size-padding-h: 17px;
	--wpforms-label-color: #000;
	--wpforms-label-size-font-size: 14px;
	--wpforms-label-size-line-height: 16px;
	--wpforms-label-sublabel-color: #000;
	--wpforms-label-error-color: #b71f2f;
	--wpforms-button-background-color: #000;
	--wpforms-button-text-color: #fff;
	--wpforms-button-border-radius: 30px;
	--wpforms-button-border-size: 0;
	--wpforms-button-size-height: 45px;
	--wpforms-button-size-font-size: 16px;
	--wpforms-button-size-padding-h: 34px;
}
.pr-page .pr-contact-form--wpf div.wpforms-container .wpforms-field {
	padding: 0;
	margin: 0 0 19px;
	/* Sin tocar 'clear': las medias columnas (wpforms-one-half) van flotadas y
	   es WPForms quien limpia el flotado en la siguiente. Poner clear:none aquí
	   metía el campo de después en el hueco que quedaba al lado. */
}
/* La media columna de la derecha se separa 18 de la izquierda, como el
   checkout, en vez del 4% que trae WPForms. */
.pr-page .pr-contact-form--wpf div.wpforms-container .wpforms-field.wpforms-one-half {
	width: 255.5px;
	margin-right: 0;
}
.pr-page .pr-contact-form--wpf div.wpforms-container .wpforms-field.wpforms-one-half.wpforms-first { margin-right: 18px; }
.pr-page .pr-contact-form--wpf div.wpforms-container .wpforms-field-label,
.pr-page .pr-contact-form--wpf div.wpforms-container legend.wpforms-field-label {
	display: block;
	float: none;
	margin: 0 0 5px;
	padding: 0;
	font-family: var(--pr-font-body);
	font-size: 14px;
	font-weight: 300;
	line-height: 16px;
	letter-spacing: 0;
	color: #000;
}
.pr-contact-form--wpf .wpforms-required-label { color: #b71f2f; border: 0; }

/* --- Nombre: el campo va en fieldset + legend, y las sub-etiquetas
       (First/Last) vienen DETRÁS del input. Se esconde el legend y se le da
       la vuelta a cada bloque para que la sub-etiqueta haga de etiqueta. --- */
.pr-page .pr-contact-form--wpf div.wpforms-container .wpforms-field-name fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}
.pr-page .pr-contact-form--wpf div.wpforms-container .wpforms-field-name legend.wpforms-field-label { display: none; }
.pr-page .pr-contact-form--wpf div.wpforms-container .wpforms-field-row {
	display: flex;
	gap: 18px;
	max-width: 100%;
}
.pr-page .pr-contact-form--wpf div.wpforms-container .wpforms-field-row-block {
	display: flex;
	flex-direction: column-reverse;
	float: none;
	width: 100%;
	padding: 0;
}
.pr-page .pr-contact-form--wpf div.wpforms-container .wpforms-field-sublabel {
	display: block;
	margin: 0 0 5px;
	padding: 0;
	font-family: var(--pr-font-body);
	font-size: 14px;
	font-weight: 300;
	line-height: 16px;
	letter-spacing: 0;
	color: #000;
}

/* --- Campos ------------------------------------------------------------ */
.pr-page .pr-contact-form--wpf div.wpforms-container input[type="text"],
.pr-page .pr-contact-form--wpf div.wpforms-container input[type="email"],
.pr-page .pr-contact-form--wpf div.wpforms-container input[type="tel"],
.pr-page .pr-contact-form--wpf div.wpforms-container select {
	width: 100%;
	max-width: 100%;
	height: 39px;
	border: 0;
	border-radius: 30px;
	background: #e8e8e8;
	padding: 0 17px;
	font-family: var(--pr-font-body);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.5px;
	color: #000;
	box-shadow: none;
}
.pr-page .pr-contact-form--wpf div.wpforms-container textarea {
	width: 100%;
	max-width: 100%;
	height: 110px;
	border: 0;
	border-radius: 20px;
	background: #e8e8e8;
	padding: 11px 17px;
	font-family: var(--pr-font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0.5px;
	color: #000;
	resize: vertical;
	box-shadow: none;
}
.pr-page .pr-contact-form--wpf div.wpforms-container :is(input, select, textarea):focus,
.pr-page .pr-contact-form--wpf div.wpforms-container :is(input, select, textarea):focus-visible {
	outline: 2px solid rgba(0, 0, 0, 0.35);
	outline-offset: -2px;
	background: #e8e8e8;
	box-shadow: none;
}
.pr-page .pr-contact-form--wpf div.wpforms-container select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size: 14px;
}

/* --- El desplegable, sin el azul del sistema (14/08/2026) --------------
   La lista que abre un <select> la pinta el navegador y el resaltado azul
   sale de los colores del sistema: no hay forma de tocarlo con CSS normal.
   Chrome/Edge sí permiten quedarse con la lista mediante el select
   personalizable (appearance: base-select + ::picker), y eso es lo que se
   usa aquí, con el gris de la web. Va dentro de @supports: donde no exista
   —Safari, Firefox— el desplegable sigue siendo el nativo de siempre, que
   funciona igual, solo que con el resaltado del sistema. */
@supports (appearance: base-select) {
	.pr-page .pr-contact-form--wpf div.wpforms-container select,
	.pr-page .pr-contact-form--wpf div.wpforms-container select::picker(select) {
		appearance: base-select;
	}
	.pr-page .pr-contact-form--wpf div.wpforms-container select {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		text-align: left;
	}
	/* La flecha ya la pinta el fondo de la píldora. */
	.pr-page .pr-contact-form--wpf div.wpforms-container select::picker-icon { display: none; }
	.pr-page .pr-contact-form--wpf div.wpforms-container select::picker(select) {
		margin-top: 6px;
		padding: 6px;
		border: 0;
		border-radius: 20px;
		background: #fff;
		box-shadow: 0 1px 30px rgba(0, 0, 0, 0.22);
		max-height: 320px;
		overflow-y: auto;
	}
	.pr-page .pr-contact-form--wpf div.wpforms-container option {
		padding: 9px 14px;
		border: 0;
		border-radius: 12px;
		background: #fff;
		font-family: var(--pr-font-body);
		font-size: 15px;
		font-weight: 400;
		letter-spacing: 0.5px;
		color: #000;
		transition: background-color 0.15s ease;
	}
	.pr-page .pr-contact-form--wpf div.wpforms-container option::checkmark { display: none; }
	.pr-page .pr-contact-form--wpf div.wpforms-container option:hover,
	.pr-page .pr-contact-form--wpf div.wpforms-container option:focus {
		background: #e8e8e8;
		color: #000;
	}
	.pr-page .pr-contact-form--wpf div.wpforms-container option:checked {
		background: #1e1e1e;
		color: #fff;
	}
	/* El "Selecciona…" que no se puede elegir, en gris. */
	.pr-page .pr-contact-form--wpf div.wpforms-container option:disabled,
	.pr-page .pr-contact-form--wpf div.wpforms-container option.placeholder {
		color: rgba(0, 0, 0, 0.35);
		background: #fff;
	}
}

/* --- Casillas: suscripción y privacidad -------------------------------- */
.pr-page .pr-contact-form--wpf div.wpforms-container .wpforms-field-checkbox,
.pr-page .pr-contact-form--wpf div.wpforms-container .wpforms-field-gdpr-checkbox { margin: 0 0 10px; }
.pr-page .pr-contact-form--wpf div.wpforms-container .wpforms-field-checkbox > .wpforms-field-label,
.pr-page .pr-contact-form--wpf div.wpforms-container .wpforms-field-checkbox legend.wpforms-field-label,
.pr-page .pr-contact-form--wpf div.wpforms-container .wpforms-field-gdpr-checkbox > .wpforms-field-label,
.pr-page .pr-contact-form--wpf div.wpforms-container .wpforms-field-gdpr-checkbox legend.wpforms-field-label { display: none; }
.pr-page .pr-contact-form--wpf div.wpforms-container .wpforms-field-checkbox fieldset,
.pr-page .pr-contact-form--wpf div.wpforms-container .wpforms-field-gdpr-checkbox fieldset { margin: 0; padding: 0; border: 0; }
.pr-page .pr-contact-form--wpf div.wpforms-container .wpforms-field-checkbox ul,
.pr-page .pr-contact-form--wpf div.wpforms-container .wpforms-field-gdpr-checkbox ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.pr-page .pr-contact-form--wpf div.wpforms-container .wpforms-field-checkbox li,
.pr-page .pr-contact-form--wpf div.wpforms-container .wpforms-field-gdpr-checkbox li { margin: 0; }
.pr-page .pr-contact-form--wpf div.wpforms-container .wpforms-field-checkbox label,
.pr-page .pr-contact-form--wpf div.wpforms-container .wpforms-field-gdpr-checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding-left: 9px;
	cursor: pointer;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 21px;
	letter-spacing: 0.5px;
	color: #000;
}
.pr-page .pr-contact-form--wpf div.wpforms-container input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	border: 0;
	border-radius: 4px;
	background: #e8e8e8;
	cursor: pointer;
}
.pr-page .pr-contact-form--wpf div.wpforms-container input[type="checkbox"]:checked {
	background-color: #1e1e1e;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px;
}
.pr-page .pr-contact-form--wpf div.wpforms-container input[type="checkbox"]:focus-visible { outline: 2px solid rgba(0, 0, 0, 0.35); outline-offset: 1px; }

/* --- Botón de enviar ---------------------------------------------------- */
.pr-contact-form--wpf .wpforms-submit-container { padding: 8px 0 0; }
.pr-page .pr-contact-form--wpf div.wpforms-container .wpforms-form button[type="submit"],
.pr-page .pr-contact-form--wpf div.wpforms-container .wpforms-form button[type="submit"]:not(:hover):not(:active) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 45px;
	padding: 0 34px;
	border: 0;
	border-radius: 30px;
	background-color: #000;
	color: #fff;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: opacity 0.25s ease;
}
.pr-page .pr-contact-form--wpf div.wpforms-container .wpforms-form button[type="submit"]:hover {
	opacity: 0.85;
	background-color: #000;
	color: #fff;
}
.pr-page .pr-contact-form--wpf div.wpforms-container .wpforms-form button[type="submit"]:focus-visible {
	background-color: #000;
	color: #fff;
	outline: 2px solid rgba(0, 0, 0, 0.35);
	outline-offset: 2px;
	box-shadow: none;
}

/* --- Errores y confirmación --------------------------------------------- */
.pr-page .pr-contact-form--wpf div.wpforms-container .wpforms-error,
.pr-page .pr-contact-form--wpf div.wpforms-container em.wpforms-error,
.pr-page .pr-contact-form--wpf div.wpforms-container label.wpforms-error {
	display: block;
	margin: 5px 0 0;
	font-size: 13px;
	font-weight: 300;
	font-style: normal;
	letter-spacing: 0.5px;
	color: #b71f2f;
}
.pr-page .pr-contact-form--wpf div.wpforms-container :is(input, select, textarea).wpforms-error {
	outline: 2px solid #b71f2f;
	outline-offset: -2px;
}
.pr-page .pr-contact-form--wpf div.wpforms-container .wpforms-confirmation-container-full {
	margin: 18px 0 0;
	padding: 18px 22px;
	border: 0;
	border-radius: 20px;
	background: #e8e8e8;
	color: #000;
}
.pr-page .pr-contact-form--wpf div.wpforms-container .wpforms-confirmation-container-full p {
	margin: 0;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.35;
	letter-spacing: 0.5px;
}

/* Cruce de dos capas al cambiar de reseña (14/08/2026): la copia saliente se
   funde encima de la entrante, así nunca se ve el fondo entre una y otra. */
.pr-review-ghost {
	position: absolute;
	margin: 0;
	pointer-events: none;
	z-index: 3;
	opacity: 1;
	transition: opacity 0.4s ease;
}

/* ==========================================================================
   PRÓXIMAMENTE / COMING SOON (14/08/2026)
   Destino del botón de afiliados del footer. Reaprovecha la maqueta de la 404
   (.pr-nf-*) y solo añade el antetítulo y la fila de dos botones.
   ========================================================================== */
.pr-page .pr-soon-canvas { height: auto; padding-top: 176px; padding-bottom: 150px; }
.pr-page .pr-soon-kicker {
	margin: 0 0 14px;
	font-family: var(--pr-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.5);
}
.pr-page .pr-soon-botones {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin: 0;
}
.pr-page .pr-soon-botones a.pr-nf-cta { margin-top: 45px; }
.pr-page a.pr-nf-cta--ghost,
.pr-page a.pr-nf-cta--ghost:visited {
	background: transparent;
	border: 1px solid rgba(0, 0, 0, 0.25);
	color: #000;
}
.pr-page a.pr-nf-cta--ghost:hover { opacity: 1; background: #e8e8e8; color: #000; }

/* ==========================================================================
   REFERENCIAS DEL DOCUMENTO DE REVISIÓN (17/08/2026)
   Las citas que Daniel revisó se pintan con el mismo tono discreto que ya
   tenían las de las FAQ de la home: 13px, cursiva y algo apagadas, para que
   acompañen al texto sin competir con él.
   ========================================================================== */
.pr-page .pr-home-card-ref,
.pr-page .pr-benefit-ref {
	margin-top: 14px;
	font-family: var(--pr-font-body);
	font-size: 13px;
	font-weight: 300;
	line-height: 1.4;
	font-style: italic;
	letter-spacing: 0;
	opacity: 0.6;
}
/* En el reverso de la tarjeta de beneficio la cita es el único texto: ahí
   respira desde arriba, no desde el párrafo anterior. */
.pr-page .pr-flip-back .pr-benefit-ref { margin-top: 0; }

/* ==========================================================================
   Foto en el reverso de las tarjetas flip (18/08/2026)
   --------------------------------------------------------------------------
   Lo pinta `pr_flip_card()` cuando la tarjeta trae la clave 'img'. La foto va
   a sangre y la recorta el `overflow:hidden` del reverso por el radio de 30px,
   igual que en las tarjetas de producto de la home ES.

   Los reversos de las homes son CLAROS (#f9f9f9 en US/EU, #fff en ES) con
   texto negro, así que sobre una foto el texto desaparece: con imagen la
   tarjeta pasa a modo oscuro (velo + texto blanco). Por eso las reglas van
   colgadas de `.pr-flip--photo` y no del reverso a secas.
   ========================================================================== */
.pr-flip-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--pr-radius);
}
/* Velo para que el texto se lea sobre cualquier foto. Va como pseudoelemento
   del reverso y no como filtro de la imagen para no recomponer el bitmap.
   19/08/2026: negro plano al 20% — el mismo valor exacto del frame Figma
   323:3744 ("reverso de las tarjetas de confianza"), no un degradado propio;
   ese frame es la referencia real, sustituye al degradado que se inventó
   antes de tener el diseño definitivo. */
.pr-flip--photo .pr-flip-back::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--pr-radius);
	background: rgba(0, 0, 0, 0.2);
}
/* El texto por encima del velo; sin esto quedaría debajo de la foto. */
.pr-flip--photo .pr-flip-back > :not(.pr-flip-photo) {
	position: relative;
	z-index: 1;
}
/* Se anulan el fondo claro y el borde que llevan los reversos sin foto. */
.pr-home-card.pr-flip--photo .pr-flip-back,
.pr-page--home-es .pr-esh-trust-card.pr-flip--photo .pr-flip-back {
	background: #1e1e1e;
	border: 0;
	color: #fff;
}
.pr-home-card.pr-flip--photo .pr-flip-back p,
.pr-page--home-es .pr-esh-trust-card.pr-flip--photo .pr-flip-back p { color: #fff; }
/* La cita sobre foto sigue el frame 323:3744, no el tratamiento discreto
   (13px cursiva 60%) que llevaba sobre fondo liso: aquí va Funnel Light 14px
   recto, interlineado 1.2, sin atenuar — así la especificó el diseño. */
.pr-flip--photo .pr-flip-back .pr-home-card-ref,
.pr-flip--photo .pr-flip-back .pr-benefit-ref {
	font-size: 14px;
	font-style: normal;
	line-height: 1.2;
	letter-spacing: -0.14px;
	opacity: 1;
}

/* ==========================================================================
   Botón de afiliados del footer en ESPAÑOL (18/08/2026)
   --------------------------------------------------------------------------
   El ancho de 263px viene del frame INGLÉS ("Join our affiliate program / or
   become an ambassador."). En español la primera línea mide 291px y solo hay
   213 disponibles, así que se partía en TRES líneas y el botón crecía a 76px
   de alto, desbordando la píldora.

   Se le da el ancho de 350px que el footer del mercado ES ya usa para este
   mismo botón — medida probada — y se sube la sangría izquierda a la de ES.
   Va scopeado por `html[lang]`, así que solo afecta a la versión española.
   ========================================================================== */
html[lang^="es"] :is(.pr-page--us, .pr-page--home) .pr-esh-footer-cta1,
html[lang^="es"] :is(.pr-page--us, .pr-page--home) a.pr-esh-footer-cta1 {
	width: 350px;
	padding: 7px 14px 7px 18px;
}

/* ==========================================================================
   Popup de reseñas (18/08/2026) — .pr-rev-*
   --------------------------------------------------------------------------
   Mismo lenguaje que el modal de suscripción (backdrop con blur, tarjeta
   blanca radio 30, aspa). El contra-zoom y el tamaño de la hoja móvil los
   pone el JS (reviewWizard): la maqueta fija 1440 + body{zoom} haría
   minúsculo un modal normal en móvil.
   ========================================================================== */
.pr-rev-modal[hidden] { display: none; }
.pr-rev-modal {
	position: fixed;
	inset: 0;
	z-index: 400;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.28s ease;
}
.pr-rev-modal:not(.is-open) { pointer-events: none; }
.pr-rev-modal.is-open { pointer-events: auto; opacity: 1; }
.pr-rev-lock { overflow: hidden; }
.pr-rev-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.pr-rev-card {
	position: relative;
	width: 560px;
	max-width: calc(100vw - 48px);
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	padding: 38px 44px 34px;
	background: #fff;
	border-radius: 30px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
	transform: translateY(14px) scale(0.97);
	transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
	font-family: var(--pr-font-body);
}
.pr-rev-modal.is-open .pr-rev-card { transform: none; }
/* Hoja a pantalla completa en móvil: el ancho/alto en px los fija el JS */
.pr-rev-card.is-sheet {
	max-width: none;
	max-height: none;
	border-radius: 0;
	padding: 24px 20px 28px;
}
.pr-page button.pr-rev-x {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f5f5f5;
	color: #1e1e1e;
	cursor: pointer;
}
.pr-page button.pr-rev-x:hover,
.pr-page button.pr-rev-x:focus {
	background: #e8e8e8;
	color: #1e1e1e;
	border: 0;
	outline: none;
	box-shadow: none;
}
.pr-page .pr-rev-card h3 {
	margin: 0 0 14px;
	font-family: var(--pr-font-body);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	color: #000;
}
.pr-page .pr-rev-lead,
.pr-page .pr-rev-benefit,
.pr-page .pr-rev-guide li,
.pr-page .pr-rev-fallback p {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 300;
	line-height: 22px;
	letter-spacing: 0.2px;
	color: #000;
}
.pr-rev-guide { margin: 0 0 18px 20px; padding: 0; list-style: disc; }
.pr-page .pr-rev-label { margin: 14px 0 6px; font-size: 14px; font-weight: 500; color: #000; }
/* Botones del asistente */
.pr-page .pr-rev-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 8px 22px;
	border: 1px solid #1e1e1e;
	border-radius: 30px;
	background: #fff;
	color: #1e1e1e;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	cursor: pointer;
}
.pr-page .pr-rev-btn:hover { background: #f5f5f5; color: #1e1e1e; }
.pr-page .pr-rev-btn--black,
.pr-page .pr-rev-btn--black:hover { background: #1e1e1e; border-color: #1e1e1e; color: #fff; }
.pr-page .pr-rev-btn--ghost { border-color: #d9d9d9; color: #666; }
.pr-page .pr-rev-btn--rec,
.pr-page .pr-rev-btn--rec:hover { background: #b71f2f; border-color: #b71f2f; color: #fff; }
.pr-page .pr-rev-btn[disabled] { opacity: 0.55; cursor: default; }
.pr-rev-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.is-sheet .pr-rev-choice { grid-template-columns: 1fr; }
.pr-rev-actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	flex-wrap: wrap;
	margin-top: 18px;
}
/* Estrellas */
.pr-rev-stars { display: flex; gap: 4px; }
.pr-page .pr-rev-stars button {
	padding: 0 2px;
	border: 0;
	background: none;
	font-size: 30px;
	line-height: 1;
	color: #d9d9d9;
	cursor: pointer;
}
.pr-page .pr-rev-stars button.is-on { color: #f99b25; }
.pr-page .pr-rev-stars button:hover,
.pr-page .pr-rev-stars button:focus { background: none; border: 0; outline: none; box-shadow: none; }
/* Texto */
.pr-page .pr-rev-card textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #d9d9d9;
	border-radius: 8px;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 300;
	color: #000;
	resize: vertical;
}
.pr-rev-check {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin-top: 14px;
	font-size: 14px;
	font-weight: 300;
	line-height: 19px;
}
.pr-rev-check input { margin-top: 2px; }
.pr-rev-check a { text-decoration: underline; color: inherit; }
/* Grabación */
.pr-rev-stage { position: relative; margin-top: 6px; }
.pr-rev-stage video {
	display: block;
	width: 100%;
	max-height: 340px;
	background: #000;
	border-radius: 20px;
	object-fit: cover;
}
.is-sheet .pr-rev-stage video { max-height: 52vh; }
.pr-rev-timer {
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 2px 10px;
	border-radius: 20px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}
.pr-page .pr-rev-wait { margin: 0 0 10px; font-size: 14px; font-weight: 300; color: #666; }
.pr-rev-fallback { margin-top: 14px; }
/* Progreso de subida */
.pr-rev-progress {
	height: 6px;
	margin-top: 14px;
	border-radius: 3px;
	background: #eee;
	overflow: hidden;
}
.pr-rev-progress span { display: block; width: 0; height: 100%; background: #1e1e1e; transition: width 0.2s ease; }
/* Error */
.pr-page .pr-rev-error { margin: 12px 0 0; font-size: 14px; font-weight: 400; color: #b71f2f; }
/* La tarjeta de login/registro del header, embebida en el popup: en su sitio
   original es un desplegable absoluto invisible hasta que se abre; aquí va
   en flujo y siempre visible. */
.pr-rev-account .pr-account-pop {
	position: static;
	display: block;
	width: 100%;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: none;
	border: 1px solid #e8e8e8;
}
@media (prefers-reduced-motion: reduce) {
	.pr-rev-modal,
	.pr-rev-card,
	.pr-rev-progress span { transition: none; }
}

/* --- Popup de reseñas, 2.ª pasada (18/08/2026): estética de la web y
       detalle de producto. El acento llega en --pr-rev-accent (rojo Sports,
       ámbar Active) desde pr_review_modal(). --- */
.pr-rev-product {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: -4px 0 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid #e8e8e8;
}
.pr-rev-product img {
	height: 64px;
	width: auto;
	max-width: 64px;
	object-fit: contain;
}
.pr-page .pr-rev-kicker {
	display: block;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: #666;
}
.pr-page .pr-rev-product strong {
	display: block;
	font-family: var(--pr-font-body);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.15;
	color: var(--pr-rev-accent, #1e1e1e);
}
/* Acento del producto en los detalles interactivos */
.pr-page .pr-rev-stars button.is-on { color: var(--pr-rev-accent, #f99b25); }
.pr-page .pr-rev-btn--rec,
.pr-page .pr-rev-btn--rec:hover { background: var(--pr-rev-accent, #b71f2f); border-color: var(--pr-rev-accent, #b71f2f); }
.pr-rev-progress span { background: var(--pr-rev-accent, #1e1e1e); }
/* Botones de elección: tarjetas con icono, como las píldoras del site */
.pr-page .pr-rev-btn--choice {
	flex-direction: column;
	gap: 10px;
	min-height: 96px;
	padding: 18px 14px;
	border: 1px solid #e8e8e8;
	border-radius: 20px;
	font-weight: 500;
}
.pr-page .pr-rev-btn--choice:hover {
	background: #fafafa;
	border-color: var(--pr-rev-accent, #1e1e1e);
	color: #1e1e1e;
}
.pr-page .pr-rev-btn--choice svg { color: var(--pr-rev-accent, #1e1e1e); }
/* La tarjeta de login/registro embebida: estática y a todo el ancho. Sus
   estilos internos cuelgan de .pr-account-pop (ya presente como envoltorio). */
.pr-rev-account .pr-account-pop {
	position: static;
	width: 100%;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: none;
	border: 1px solid #e8e8e8;
	border-radius: 20px;
	transition: none;
	z-index: auto;
}

/* --- Hoja móvil del popup de reseñas, 3.ª pasada (18/08/2026).
       El tamaño va en % (no en px): dentro del contra-zoom los px son
       unidades propias del elemento y se renderizaban ~4x, cortando el
       contenido por la derecha. La media query SÍ ve el viewport real. --- */
@media (max-width: 767px) {
	.pr-rev-card,
	.pr-rev-card.is-sheet {
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
		border-radius: 0;
		padding: 22px 18px 26px;
	}
	.pr-rev-choice { grid-template-columns: 1fr; }
	.pr-page .pr-rev-product strong { font-size: 21px; }
	.pr-rev-actions .pr-rev-btn { flex: 1 1 auto; }
}
/* Cinturón: el contenido nunca puede empujar la tarjeta a lo ancho. */
.pr-rev-card { overflow-x: hidden; }
.pr-rev-card * { max-width: 100%; }

/* ==========================================================================
   Biografía del autor bajo la firma (tarea C6, 19/08/2026)
   --------------------------------------------------------------------------
   Va debajo del nombre y el cargo, con el mismo margen izquierdo de la firma
   (9px) para que las tres líneas queden alineadas. Cuerpo a 16px: la firma va
   a 24px y el cargo también, así que la bio tiene que ceder peso visual para
   no competir con el nombre.
   ========================================================================== */
/* Frame 341:7694: el nombre en negro y la descripción DEBAJO, en el azul de
   marca y al mismo cuerpo, no en gris pequeño a su derecha. */
.pr-art-autor-bloque { max-width: 460px; }
/* Igual que el nombre (24px) se leia demasiado grande para ser la
   descripcion secundaria del autor; un punto mas pequena que en movil
   (18px) para conservar algo de jerarquia (24/08/2026). */
.pr-page--art .pr-art-bio {
	margin: 2px 0 0 9px;
	max-width: 420px;
	font-family: var(--pr-font-body);
	font-size: 19px;
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: 0.5px;
	color: #4a85a6;
}

/* ==========================================================================
   Modo edición sobre la propia página (19/08/2026)
   --------------------------------------------------------------------------
   Solo se carga con ?pr_edit=1 y sesión de administrador. Nada de esto afecta
   a la web pública: sin ese parámetro el JS no marca ningún elemento.
   ========================================================================== */
#pr-edit-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99999;
	display: flex;
	gap: 18px;
	align-items: center;
	padding: 10px 20px;
	background: #1e1e1e;
	color: #fff;
	font: 400 14px/1.3 system-ui, sans-serif;
}
#pr-edit-bar a { color: #7ec7ff; text-decoration: underline; }
#pr-edit-bar [data-pr-edit-info] { flex: 1 1 auto; opacity: 0.85; }
/* Lo editable se insinúa; no se subraya para no falsear el diseño */
.pr-editable { outline: 1px dashed rgba(0, 122, 204, 0.55); outline-offset: 2px; cursor: text; }
.pr-editable:hover { outline-color: #007acc; background: rgba(0, 122, 204, 0.06); }
.pr-editable.is-editing {
	outline: 2px solid #007acc;
	background: rgba(0, 122, 204, 0.1);
}
.pr-editable.is-saving { outline-color: #f99b25; }
.pr-editable.is-saved { outline: 2px solid #2e7d32; }
.pr-editable.is-failed { outline: 2px solid #b71f2f; background: rgba(183, 31, 47, 0.08); }

/* --- Medios editables en modo edición (19/08/2026) --- */
.pr-media-edit { outline: 2px dashed rgba(249, 155, 37, 0.75); outline-offset: 2px; cursor: pointer; }
.pr-media-edit:hover { outline-color: #f99b25; filter: brightness(1.05); }
.pr-media-bg-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 9999;
	padding: 6px 12px;
	border: 0;
	border-radius: 20px;
	background: rgba(30, 30, 30, 0.85);
	color: #fff;
	font: 500 13px/1 system-ui, sans-serif;
	cursor: pointer;
}
.pr-media-bg-btn:hover { background: #f99b25; color: #1e1e1e; }

/* ============ S8 · Mi suscripción (pausar / reanudar) ============ */
/* ====================================================================
   MI SUSCRIPCIÓN — 27/08/2026
   Era una tabla con líneas grises, esquinas rectas y los dos botones
   apretados en la última celda: la única pantalla de Mi cuenta que no
   hablaba el idioma del resto («debe ir en línea con el estilo de la
   página… queda todo muy pegado»). Ahora es el MISMO material que Mis
   pedidos —tarjeta gris al 50 % con radio 20— y los botones son los de
   la sección (`.pr-acc-btn`), no unos propios.
   Sin `font-family` propia: antes forzaba 'Funnel Display' y el resto de
   Mi cuenta va con la del cuerpo, así que la tabla cantaba.
   ==================================================================== */
.pr-subs {
	/* 39px igual que .pr-order-list, para que la separación respecto al título
	   sea la misma que en Mis pedidos. */
	margin-top: 39px;
}

/* Aviso de la acción (tras pausar o reanudar). Radio 20 y relleno de tarjeta,
   como el resto de la sección; sin contorno, que el color ya distingue. */
.pr-subs-aviso {
	margin: 0 0 18px;
	padding: 16px 24px;
	border-radius: 20px;
	font-size: 16px;
	font-weight: 300;
	line-height: 22px;
	letter-spacing: 0.5px;
}
.pr-subs-aviso.is-ok  { background: #eef7ee; color: #1f5f24; }
.pr-subs-aviso.is-err { background: #fdeeee; color: #8f1724; }

/* ---------------------------- La tarjeta ---------------------------- */
.pr-subs-card {
	/* 813 es el ancho de las tarjetas de Mis pedidos: sin cota, en pantallas
	   anchas la rejilla de datos se estiraba a seis columnas y los dos datos
	   quedaban perdidos en un campo de fútbol (medido: 1425px de tarjeta). */
	max-width: 813px;
	margin-bottom: 14px;
	padding: 28px 32px 30px;
	background: rgba(232, 232, 232, 0.5);
	border-radius: 20px;
}
.pr-subs-card:last-child { margin-bottom: 0; }

.pr-subs-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.pr-page--account .pr-subs-num {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.5px;
}

/* Los datos en rejilla y no en tabla: cada dato es un rótulo pequeño con su
   valor debajo, que es como se leen los del detalle de pedido. Las columnas se
   reparten solas, así que el mismo bloque sirve para tres datos o para cinco. */
.pr-subs-datos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 22px 34px;
	margin: 26px 0 0;
}
.pr-subs-dato { min-width: 0; }
.pr-subs-dato--ancho { grid-column: 1 / -1; }
.pr-page--account .pr-subs-datos dt {
	margin: 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 15px;
	letter-spacing: 0.5px;
	color: rgba(0, 0, 0, 0.55);
}
.pr-page--account .pr-subs-datos dd {
	margin: 7px 0 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 22px;
	letter-spacing: 0.5px;
}
/* El importe lo pinta el plugin y puede venir envuelto en <p> o <span>: se
   neutraliza su margen para que no descuadre la fila. */
.pr-page--account .pr-subs-datos dd p,
.pr-page--account .pr-subs-datos dd span { margin: 0; font: inherit; letter-spacing: inherit; }

/* La píldora de estado */
.pr-subs-estado {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.3px;
	white-space: nowrap;
}
.pr-subs-estado.is-active    { background: #eef7ee; color: #1f5f24; }
.pr-subs-estado.is-paused    { background: #fff4e2; color: #8a5200; }
.pr-subs-estado.is-cancelled,
.pr-subs-estado.is-expired   { background: #f2f2f2; color: #555; }
.pr-subs-estado.is-pending,
.pr-subs-estado.is-on-hold   { background: #eef2fb; color: #2b4a8a; }

/* La nota de pausa: dentro de la tarjeta, no una fila suelta de la tabla. */
.pr-page--account .pr-subs-nota {
	margin: 24px 0 0;
	padding: 14px 18px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	font-weight: 300;
	line-height: 20px;
	letter-spacing: 0.5px;
	color: #8a5200;
}

.pr-subs-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }

/* Volver, con aire por debajo: antes eran 18px y el enlace quedaba pegado al
   siguiente bloque. */
.pr-page--account .pr-subs-volver {
	display: inline-block;
	margin: 0 0 24px;
	font-size: 14px;
	font-weight: 300;
	letter-spacing: 0.5px;
	color: rgba(0, 0, 0, 0.6);
	text-decoration: none;
}
.pr-page--account .pr-subs-volver:hover { color: #1e1e1e; }

/* Móvil: la rejilla a una columna y los botones a todo el ancho, que a 375px
   dos píldoras seguidas no caben sin partirse. */
@media (max-width: 767px) {
	.pr-subs-card { padding: 22px 20px 24px; border-radius: 20px; }
	.pr-subs-datos { grid-template-columns: 1fr; gap: 18px; margin-top: 22px; }
	.pr-subs-acciones { margin-top: 24px; }
	.pr-subs-acciones .pr-acc-btn { flex: 1 1 100%; justify-content: center; }
	.pr-subs-aviso { padding: 14px 18px; font-size: 15px; }
}

/* El CTA "Comparte tu experiencia" pasó de <a href="#"> a <button> (19/08/2026):
   abre el popup de reseñas, no navega. Un <button> no hereda la apariencia de un
   enlace, así que se neutraliza el estilo nativo de control de formulario para
   que se vea EXACTAMENTE igual que antes. */
button.pr-btn {
	appearance: none;
	-webkit-appearance: none;
	background-clip: padding-box;
	text-decoration: none;
}

/* ⚠️ El wizard de reseñas oculta/muestra por fases con el atributo `hidden`,
   pero `.pr-page .pr-rev-btn{display:inline-flex}` y `.pr-rev-stage video
   {display:block}` GANAN a la regla `[hidden]{display:none}` del navegador (una
   clase tiene más especificidad que un atributo suelto). Resultado: se veían
   los CUATRO botones de grabación y los DOS reproductores a la vez.
   Esta regla hace inviolable el `hidden` dentro del modal. */
.pr-rev-modal [hidden] { display: none !important; }

/* ====================================================================
   MÓVIL (<768px) — maqueta real, sin zoom (20/08/2026)
   --------------------------------------------------------------------
   Por debajo de 768px el módulo de zoom de proresolve.js se APAGA (antes
   escalaba la maqueta de 1440 a 0,26: texto a ~4px, medido). Aquí entra
   una maqueta móvil real. Este bloque contiene los CIMIENTOS comunes a
   todas las páginas (header, panel de menú, canvas, pie); cada plantilla
   añade después su propio bloque de secciones.

   No hay frames móviles de la web en Figma (comprobado en los dos files:
   solo laptop) — la referencia son los frames laptop y el criterio del
   sistema: mismas fuentes, mismos colores, columnas apiladas.
   ==================================================================== */

/* La hamburguesa y el bloque extra del panel solo existen en móvil. */
.pr-burger { display: none; }
.pr-nav-extra { display: none; }

@media (max-width: 767px) {

	/* ---------- base ---------- */
	/* El min-width:1440 de los body era el cinturón del zoom (evitaba que la
	   maqueta escalada dejara hueco). Sin zoom, es LO que mantenía todo a
	   1440: fuera en móvil. */
	body.pr-page--home,
	body.pr-page--home-es,
	body.pr-page--us { min-width: 0; }

	:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-canvas {
		width: 100%;
		min-width: 0;
		height: auto;
		padding-left: 20px;
		padding-right: 20px;
	}
	/* ⚠️ `height: auto` a secas ROMPÍA los vídeos y fotos a sangre: pisaba su
	   `height: 100%` y el vídeo del héroe quedaba en 185px dentro de una
	   sección de 585 (medido), dejando el resto en negro. Solo se aplica a lo
	   que va en flujo; lo posicionado en absoluto conserva su altura. */
	.pr-page img,
	.pr-page video { max-width: 100%; }
	/* Se excluyen también las marcas del pie: esta regla tiene especificidad 4
	   y le ganaba a la que las dimensiona, así que se iban a su tamaño natural
	   (Lipinova de 95×23 a 335×81). */
	.pr-page :is(img, video):not(.pr-home-hero-video):not(.pr-home-community-video):not(.pr-flip-photo):not([class*="pr-esh-brand"]):not(.pr-esh-hero-bg):not(.pr-esh-news-bg):not(.pr-esh-card-photo):not(.pr-esh-band-bg):not(.pr-apr-news-bg):not(.pr-apr-etapa-foto):not(.pr-abt-hero-bg):not(.pr-nws-img) {
		height: auto;
	}
	.pr-page .pr-home-hero-video,
	.pr-page .pr-home-community-video {
		height: 100%;
		object-fit: cover;
	}

	/* ---------- header ---------- */
	/* UN SOLO header en móvil, gane quien gane en escritorio: al hacer scroll
	   la home cambiaba a otra variante fija (alto 100→76, logo de x=16 a
	   x=119, fondo transparente — medido) y el menú "se movía". Aquí se
	   cubren TODAS las variantes con la misma geometría y un fondo de vidrio
	   claro SIEMPRE, para que nunca salte ni quede texto blanco sobre blanco. */
	.pr-page .pr-header,
	.pr-page .pr-header.is-inverted,
	.pr-page .pr-header.is-over-hero,
	/* Carrito y checkout (26/08/2026): sus body llevan `pr-page--us` pero su
	   barra va SIN `is-inverted`, y la unica variante de esa piel que cubria
	   esta lista era la invertida. La regla de escritorio
	   `.pr-page--us:not(.pr-page--home-es) .pr-header` (3 clases, display:grid)
	   le ganaba a `.pr-page .pr-header` (2) y en movil la barra se quedaba en
	   rejilla de escritorio: logotipo centrado y el panel encajado en una
	   columna de 180px. La home US se libraba porque su body no lleva esa
	   clase. */
	.pr-page--us:not(.pr-page--home-es) .pr-header,
	.pr-page--home .pr-header,
	.pr-page--home .pr-header.is-inverted,
	.pr-page--home-es .pr-header,
	.pr-menu-home:not(.pr-page--home-es) .pr-header,
	.pr-menu-home:not(.pr-page--home-es) .pr-header.is-inverted,
	.pr-menu-home.pr-page--home-es .pr-header.is-inverted,
	.pr-page--us:not(.pr-page--home-es) .pr-header.is-inverted {
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		display: flex;
		align-items: center;
		gap: 10px;
		height: 60px;
		padding: 0 16px;
		/* El MISMO vidrio que en laptop (pedido expreso 20/08): el degradado
		   translúcido del token + su desenfoque. El panel desplegable, en
		   cambio, va SÓLIDO — ahí hay que leer, no lucir. */
		background: var(--pr-glass-light);
		-webkit-backdrop-filter: var(--pr-glass-frost);
		backdrop-filter: var(--pr-glass-frost);
		box-shadow: none;
	}
	.pr-page .pr-header .pr-logo,
	.pr-page--home .pr-logo--text,
	.pr-menu-home:not(.pr-page--home-es) .pr-logo--text {
		position: static;
		margin-right: auto;
		line-height: 1;
		color: #000;
	}
	/* Con fondo claro fijo, el estado invertido del héroe ya no pinta nada
	   en blanco: iconos y hamburguesa siempre en negro. */
	/* El "esconder el header al ver el pie" (clase is-off, JS con
	   IntersectionObserver) era de la época del zoom: en páginas cortas como
	   Mi cuenta el pie es visible AL CARGAR y el menú nacía oculto
	   (medido: header en y=-66). Con header móvil real, siempre visible. */
	/* El JS esconde el header cuando el pie está a la vista (is-off): en
	   páginas cortas (carrito, cuenta) desaparecía el MENÚ entero. Fuera. */
	.pr-page .pr-header.is-off {
		transform: none !important;
		opacity: 1 !important;
		pointer-events: auto !important;
	}

	/* El velo oscuro del vidrio sobre el hero, mas suave (peticion 21/08). */
	.pr-page--home .pr-header::after,
	.pr-page--home-es .pr-header::after {
		background: linear-gradient(135deg, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.10) 100%);
	}

	/* El header cambia con el fondo, como en escritorio: transparente y en
	   blanco sobre secciones oscuras (el JS ya marca is-inverted), y vuelve
	   al vidrio claro con tinta negra en claro o con el panel abierto. */
	.pr-page .pr-header.is-inverted:not(.pr-menu-abierto),
	.pr-page .pr-header.is-over-hero:not(.pr-menu-abierto) {
		background: transparent;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.pr-page .pr-header.is-inverted:not(.pr-menu-abierto) .pr-logo--text { color: #fff !important; }
	.pr-page .pr-header.pr-menu-abierto .pr-logo--text { color: #000 !important; }
	/* Con el panel abierto la barra es SÓLIDA clara (sobre el vídeo del hero
	   el vidrio no aclaraba y el velo ::after de la home seguía oscuro). */
	.pr-page .pr-header.pr-menu-abierto {
		background: #f9f9f9 !important;
		/* El cristal, tambien con el panel abierto y en TODAS las paginas
		   (avisado el 26/08/2026: "en el menu falta el glass effect que debe
		   tener toda la web").
		   En la home el desenfoque venia de la regla base de `.pr-header`, pero
		   las paginas interiores -el centro de ayuda, contacto, los legales- lo
		   perdian: sin `is-inverted` ni `is-over-hero` no entraba ninguna regla
		   que lo devolviera, y la barra quedaba un rectangulo plano. Aqui se
		   declara suelto para que no dependa de en que bloque este el scroll.
		   Va con `!important` a proposito, igual que el fondo de arriba: quien lo
		   apagaba es
		     `.pr-page--home-es:not(.pr-has-hero):not(.pr-page--apr) .pr-header`
		   -cuatro clases contra las tres de aqui-, una regla pensada para las
		   paginas interiores planas de ES. Con el panel abierto esa regla no
		   deberia mandar, y competir a base de apilar clases seria mas fragil que
		   decirlo claro. */
		-webkit-backdrop-filter: var(--pr-glass-frost) !important;
		backdrop-filter: var(--pr-glass-frost) !important;
	}

	/* (Aqui hubo un parche solo para el centro de ayuda. Ya no hace falta: la
	   regla que apagaba el cristal en las paginas interiores de ES se corrigio
	   en su origen, asi que lo tienen TODAS.) */
	.pr-page .pr-header.pr-menu-abierto::after { opacity: 0 !important; }
	.pr-page .pr-header.is-inverted.pr-menu-abierto .pr-burger span { color: #000; }

	/* Esta regla ponia el logotipo y la hamburguesa en NEGRO siempre que el
	   header estuviera invertido, y ademas con !important y DESPUES de la que
	   los pone en blanco (linea ~11777), asi que ganaba siempre: sobre el video
	   del hero el logotipo salia negro en las tres home (avisado el 26/08/2026).
	   Viene de cuando el header movil era claro y solido; luego se hizo
	   transparente sobre el hero y esta se quedo sin revisar.
	   Ahora solo aplica con el PANEL ABIERTO, que es cuando la barra si es
	   clara y solida y la tinta tiene que ser negra. */
	.pr-page .pr-header.is-inverted.pr-menu-abierto :is(.pr-logo, .pr-burger span, .pr-cart),
	.pr-menu-home:not(.pr-page--home-es) .pr-header.is-inverted.pr-menu-abierto .pr-logo--text,
	.pr-page--home .pr-header.is-inverted.pr-menu-abierto .pr-logo--text {
		color: #000 !important;
	}
	/* Y sobre el hero o cualquier bloque oscuro, en blanco: logotipo Y
	   hamburguesa, en los tres sitios. */
	.pr-page .pr-header.is-inverted:not(.pr-menu-abierto) :is(.pr-logo, .pr-logo--text, .pr-burger span, .pr-cart),
	.pr-page .pr-header.is-over-hero:not(.pr-menu-abierto) :is(.pr-logo, .pr-logo--text, .pr-burger span, .pr-cart) {
		color: #fff !important;
	}
	/* (La regla que igualaba aquí los paddings por-mercado se retiró: el
	   header unificado de arriba ya cubre todas las variantes, y al venir
	   esta DESPUÉS en el fichero le pisaba la altura — 68 frente a 60 al
	   cargar, el "salto" que veía Pablo.) */
	.pr-page .pr-header .pr-header-tools { order: 2; }
	.pr-page .pr-burger { order: 3; margin-right: -10px; }
	.pr-page .pr-header .pr-logo { font-size: 20px; }
	/* Cuenta e idioma se mudan AL PANEL. El CARRITO no: se queda en la barra,
	   al lado de las tres rayitas (pedido el 26/08/2026, y ya antes).
	   Dos razones para que este a la vista y no dentro del panel: es el unico
	   icono que cambia solo -lleva el contador de unidades- y es el destino de
	   la capsula que vuela al agregar. Metido en el panel, `getBoundingClientRect`
	   devolvia 0x0 en el origen y la capsula salia disparada a la esquina de
	   arriba a la izquierda en lugar de al carrito. */
	.pr-page .pr-header .pr-header-tools,
	.pr-page--home-es .pr-header-tools {
		display: flex;
		align-items: center;
		gap: 0;
		margin-right: 2px;
		/* De vuelta al flujo. En ES esto venia con
		     `position: absolute; right: 121px; top: 0; height: 76px`
		   -medidas de la barra de escritorio- y en movil dejaba el carrito
		   clavado en mitad de la barra, a 123px de las rayitas, y con 76px de
		   alto dentro de una barra de 60. Estando en el flujo, el margen
		   automatico de abajo lo pega a la hamburguesa. */
		position: static;
		right: auto;
		top: auto;
		height: auto;
	}
	/* De todo lo que vive ahi dentro, solo el carrito: la cuenta, el selector de
	   idioma y el desplegable de acceso siguen en el panel. */
	.pr-page .pr-header .pr-header-tools > *:not(.pr-cart),
	.pr-page--home-es .pr-header-tools > *:not(.pr-cart) { display: none; }
	.pr-page .pr-header .pr-header-tools .pr-cart {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: relative;
		width: 40px;
		height: 44px;
	}
	.pr-page .pr-header .pr-header-tools .pr-cart svg { display: block; width: 22px; height: 22px; }
	/* En los sitios ES la barra es un flex con `space-between` y tres hijos
	   -logotipo, carrito y hamburguesa-, asi que el carrito se quedaba CENTRADO,
	   a 123px de las rayitas, en vez de al lado. El margen automatico se come el
	   hueco libre y deja el logotipo a la izquierda y los dos iconos juntos a la
	   derecha, que es como esta en EU y US.
	   Va por el envoltorio `.pr-esh-canvas`, que es lo que distingue a esa
	   cabecera: por clase de body no vale, porque `pr-page--home-es` la llevan
	   tambien paginas que usan la otra. */
	.pr-page .pr-header .pr-esh-canvas > .pr-header-tools {
		margin-left: auto;
		align-self: center;
		/* 12px, el mismo hueco que en EU y US: alli lo da el `gap` de la rejilla
		   de la barra y aqui hay que ponerlo a mano. */
		margin-right: 12px;
	}
	/* El contador, pegado al icono y siempre legible: circulo rojo con numero
	   blanco, que no depende del color que herede la barra. */
	.pr-page .pr-header .pr-header-tools .pr-cart .pr-cart-count {
		position: absolute;
		top: 4px;
		right: 0;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 999px;
		background: var(--pr-red, #e2001a);
		color: #fff !important;
		font-size: 10px;
		font-weight: 600;
		line-height: 1;
	}

	/* La hamburguesa: tres barras que se cruzan al abrir. */
	.pr-page .pr-burger {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		padding: 10px;
		border: 0;
		background: none;
		cursor: pointer;
		justify-self: end;
		order: 4;
	}
	.pr-page .pr-burger span {
		display: block;
		width: 22px;
		height: 2px;
		background: currentColor;
		color: #000;
		transition: transform 0.25s ease, opacity 0.2s ease;
	}
	/* Las rayas siguen al logo: blancas sobre fondo oscuro, negras en claro
	   y negras con el panel abierto (peticion 21/08/2026). */
	.pr-page .pr-header.is-inverted:not(.pr-menu-abierto) .pr-burger span { color: #fff !important; }
	.pr-page .pr-header.pr-menu-abierto .pr-burger span { color: #000 !important; }
	.pr-page .pr-header.pr-menu-abierto .pr-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.pr-page .pr-header.pr-menu-abierto .pr-burger span:nth-child(2) { opacity: 0; }
	.pr-page .pr-header.pr-menu-abierto .pr-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	/* El .pr-nav pasa de fila a PANEL desplegable bajo el header.
	   ⚠️ ESPECIFICIDAD: la regla de escritorio
	   `.pr-page--us:not(.pr-page--home-es) .pr-header.is-inverted .pr-nav`
	   fuerza `background:none` y `backdrop-filter:none` con especificidad 4,
	   así que `.pr-page .pr-header .pr-nav` (3) NO la gana: el panel salía
	   TRANSPARENTE sobre la foto del héroe y no se leía nada. Estos
	   selectores igualan esa especificidad. */
	/* APARIENCIA del panel (sin `display`: ver más abajo). */
	.pr-page .pr-header .pr-nav,
	.pr-page--us:not(.pr-page--home-es) .pr-header .pr-nav,
	.pr-page--us:not(.pr-page--home-es) .pr-header.is-inverted .pr-nav,
	.pr-menu-home:not(.pr-page--home-es) .pr-header .pr-nav,
	.pr-menu-home:not(.pr-page--home-es) .pr-header.is-inverted .pr-nav,
	.pr-menu-home.pr-page--home-es .pr-header.is-inverted .pr-nav {
		/* Panel premium: hoja a pantalla completa bajo el header, sobre un
		   vidrio claro, con los enlaces grandes y el bloque de cuenta/carrito/
		   idioma al pie. `fixed` (no absolute): el header es fixed y un
		   absoluto dentro de flex calcula el ancho por contenido (medido:
		   193px). 100svh: la barra del navegador móvil no cuenta en vh. */
		position: fixed;
		top: 60px;
		left: 0;
		right: 0;
		width: 100%;
		height: calc(100svh - 60px);
		box-sizing: border-box;
		overflow-y: auto;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		padding: 26px 24px 32px;
		/* Sólido: con 0.97 + blur el héroe se transparentaba por abajo. */
		background: #f9f9f9;
		box-shadow: none;
	}

	/* ⚠️ ESTADO aparte de la apariencia, y esto importa: al escalar el
	   selector de arriba a especificidad 5, el `display:none` que llevaba
	   dentro se volvió MÁS fuerte que la regla de "abierto" (4) y el panel no
	   se desplegaba nunca (el icono sí cambiaba a X). Cada par cerrado/abierto
	   se declara con la abierta SIEMPRE una clase por encima. */
	.pr-page .pr-header .pr-nav,
	.pr-page--us:not(.pr-page--home-es) .pr-header.is-inverted .pr-nav,
	.pr-menu-home:not(.pr-page--home-es) .pr-header.is-inverted .pr-nav,
	.pr-menu-home.pr-page--home-es .pr-header.is-inverted .pr-nav {
		display: none;
	}
	.pr-page .pr-header.pr-menu-abierto .pr-nav,
	.pr-page--us:not(.pr-page--home-es) .pr-header.is-inverted.pr-menu-abierto .pr-nav,
	.pr-menu-home:not(.pr-page--home-es) .pr-header.is-inverted.pr-menu-abierto .pr-nav,
	.pr-menu-home.pr-page--home-es .pr-header.is-inverted.pr-menu-abierto .pr-nav {
		display: flex;
	}
	/* En escritorio los ítems se separan 54px; en columna deja huecos enormes. */
	.pr-page--us:not(.pr-page--home-es) .pr-header.is-inverted .pr-nav,
	.pr-menu-home:not(.pr-page--home-es) .pr-header.is-inverted .pr-nav,
	.pr-page .pr-header .pr-nav { gap: 0; }
	.pr-page .pr-header .pr-nav a:last-child { border-bottom: 0; }
	/* ⚠️ El ganador de la cascada aquí es
	   `.pr-menu-home:not(.pr-page--home-es) .pr-header.is-inverted .pr-nav a`
	   (especificidad 5), no las variantes `--us`: en las homes el body lleva
	   `pr-page--home` + `pr-menu-home`. Consultado con el navegador, no a ojo. */
	.pr-page .pr-header .pr-nav > a,
	.pr-page--us:not(.pr-page--home-es) .pr-nav > a,
	.pr-page--us:not(.pr-page--home-es) .pr-header.is-inverted .pr-nav > a,
	.pr-menu-home:not(.pr-page--home-es) .pr-nav > a,
	.pr-menu-home:not(.pr-page--home-es) .pr-header.is-inverted .pr-nav > a,
	.pr-menu-home.pr-page--home-es .pr-header.is-inverted .pr-nav > a {
		position: relative;
		padding: 19px 28px 19px 2px;
		font-family: var(--pr-font-body);
		font-size: 23px;
		font-weight: 400;
		letter-spacing: -0.2px;
		line-height: 1.25;
		color: #000;
		text-align: left;
		background: none;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	}
	/* Flecha fina a la derecha, como las FAQ del sitio. */
	.pr-page .pr-header .pr-nav > a::after {
		content: '';
		position: absolute;
		right: 8px;
		top: 50%;
		width: 9px;
		height: 9px;
		border-right: 1.8px solid rgba(0, 0, 0, 0.45);
		border-bottom: 1.8px solid rgba(0, 0, 0, 0.45);
		transform: translateY(-50%) rotate(-45deg);
	}

	/* Tinta del panel SIEMPRE negra, gane quien gane fuera (is-inverted pinta
	   blanco con especificidad 5; tercera escalada — esta es la definitiva y
	   por eso lleva !important: es una invariante del panel, no un parche). */
	.pr-page .pr-header .pr-nav > a { color: #000 !important; background: none !important; }
	/* La página ACTIVA va en semibold; y solo los productos llevan color,
	   únicamente cuando son la página activa (petición 20/08/2026). */
	.pr-page .pr-header .pr-nav > a.is-active { font-weight: 600 !important; }
	.pr-page .pr-header .pr-nav > a[data-nav="sports"].is-active { color: var(--pr-red, #b71f2f) !important; }
	.pr-page .pr-header .pr-nav > a[data-nav="active"].is-active { color: #f99b25 !important; }
	.pr-page .pr-nav-extra-item { color: #000 !important; background: none !important; }
	.pr-page .pr-nav-extra-item svg { color: #000 !important; }
	.pr-page .pr-nav-idioma { color: #000 !important; background: none !important; }
	.pr-page .pr-nav-idioma.is-activo {
		background: #1e1e1e !important;
		border-color: #1e1e1e !important;
		color: #fff !important;
	}
	.pr-page .pr-header .pr-nav a:last-child { border-bottom: 0; }
	.pr-page .pr-header.is-inverted .pr-nav a { color: #000; }

	/* -------- bloque cuenta / carrito / idioma del panel -------- */
	.pr-page .pr-nav-extra {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		margin-top: 14px;   /* separa el bloque de Mi cuenta del menu (26/08/2026) */
		padding-top: 0;
		border-top: 0;
	}
	.pr-page .pr-nav-extra-item {
		display: flex;
		align-items: center;
		gap: 14px;
		/* Con !important a proposito (avisado el 26/08/2026: "my account movido").
		   Estos items son <a> dentro de .pr-nav, y la regla de ESCRITORIO
		   `.pr-menu-home:not(...) .pr-header.is-inverted .pr-nav a` (5 clases) les
		   metia su `padding: 8px 22px`: el icono quedaba 20px mas adentro que los
		   enlaces del menu. Empatar 5 clases desde aqui seria mas fragil que
		   decirlo claro. */
		padding: 19px 2px !important;
		font-size: 17px;
		font-weight: 400;
		color: #000;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	}
	.pr-page .pr-nav-extra-item:last-child { border-bottom: 0; }
	.pr-page .pr-nav-extra-item svg {
		width: 21px;
		height: 21px;
		flex-shrink: 0;
		color: #000;
	}
	.pr-page .pr-nav-extra-badge {
		display: inline-block;
		min-width: 22px;
		margin-left: 8px;
		padding: 3px 8px;
		border-radius: 12px;
		background: #1e1e1e;
		color: #fff;
		font-size: 12px;
		text-align: center;
	}
	/* El idioma, al FONDO del panel (margin-top:auto dentro del extra). */
	.pr-page .pr-nav-idiomas { justify-content: space-between; margin-top: auto; border-bottom: 0; }
	.pr-page .pr-nav-idiomas-lista { display: flex; gap: 8px; }
	/* Redondos de verdad, no pastillas achatadas. */
	.pr-page .pr-nav-idioma {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		padding: 0;
		border: 1px solid rgba(0, 0, 0, 0.25);
		border-radius: 50%;
		font-size: 13px;
		font-weight: 500;
		color: #000;
	}
	.pr-page .pr-nav-idioma.is-activo {
		background: #1e1e1e;
		border-color: #1e1e1e;
		color: #fff;
	}

	/* ---------- pie ---------- */
	:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-main {
		height: auto;
		padding: 44px 0 36px;
	}
	:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-main .pr-esh-canvas {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-main
		:is(h2, .pr-esh-footer-desc, .pr-esh-footer-cta1, .pr-esh-footer-logo, .pr-esh-footer-nav, .pr-esh-footer-legal) {
		position: static;
		left: auto;
		top: auto;
		width: auto;
	}
	:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-main h2 { font-size: 26px; }
	:is(.pr-page--home-es, .pr-page--us, .pr-page--home) a.pr-esh-footer-cta1 { max-width: 350px; }
	:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-logo { margin-top: 20px; }
	:is(.pr-page--home-es, .pr-page--us, .pr-page--home) :is(.pr-esh-footer-nav, .pr-esh-footer-legal) li { margin: 0 0 10px; }

	/* Barra inferior (blanca o social): en flujo y con aire propio. */
	/* Aire sobre el "© All rights reserved" (iba pegado a los logos) y MENOS
	   por debajo de la fila social, que dejaba una franja vacía enorme. */
	:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-bar {
		height: auto;
		padding: 40px 20px 20px;
	}
	:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-bar .pr-esh-canvas {
		row-gap: 12px;
	}
	:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-bar :is(p, span, ul, li) { margin: 0; }
	:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-bar > *,
	:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-brand-azur,
	:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-social,
	:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-social a {
		position: static;
		left: auto;
		top: auto;
	}
	:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 12px;
	}
	:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-social {
		display: flex;
		align-items: center;
		gap: 16px;
		width: auto;
	}
	/* Los hijos reales de la barra viven DENTRO del canvas (el selector
	   `> *` solo alcanzaba al canvas): social y copyright en fila, sin
	   posiciones absolutas del frame. */
	:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-bar .pr-esh-canvas {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 8px 18px;
		height: auto;
	}
	:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-bar .pr-esh-canvas > * {
		position: static;
		left: auto;
		right: auto;
		top: auto;
	}
	/* En movil la banda ya es una fila/columna en flujo, asi que el grupo no
	   tiene que posicionar nada: se quita de la ecuacion con `display:
	   contents` y copyright y enlace vuelven a ser hijos directos del lienzo,
	   exactamente como antes de agruparlos. */
	:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-bar-legal {
		display: contents;
	}
}

/* ====================================================================
   MÓVIL · Home US y EU (pr-page--home) — 20/08/2026
   Referencia: frames laptop 116:12101 / 116:12626 apilados a una columna.
   ==================================================================== */
@media (max-width: 767px) {

	.pr-page--home .pr-container,
	.pr-page--us .pr-container {
		width: 100%;
		max-width: none;
		padding-left: 20px;
		padding-right: 20px;
	}

	/* ---------- héroe ---------- */
	/* Alto de pantalla COMPLETO al entrar. `svh` y no `vh`: en móvil `vh`
	   cuenta la ventana SIN la barra del navegador, así que al cargar el
	   héroe queda más alto que lo visible y empuja el contenido. */
	.pr-page--home .pr-home-hero {
		height: 100vh;
		height: 100svh;
		min-height: 0;
	}
	/* La lluvia de cápsulas la posiciona el JS en coordenadas de 1440:
	   decorativa y fuera de sitio en 375. */
	.pr-page .pr-esh-cap { display: none; }
	/* La máquina de escribir compone líneas pensadas para 500px: que rompa. */
	.pr-page--home .pr-rotator :is(.pr-type, .pr-type-out) { white-space: normal; }
	.pr-page--home .pr-home-hero-content { padding-bottom: 62px; }
	.pr-page--home .pr-home-hero-content h1 { font-size: 27px; max-width: 20ch; }
	/* Las posiciones alternas del rotador (izda/centro/dcha) marean en una
	   pantalla estrecha: en móvil el titular se queda siempre a la izquierda. */
	.pr-page--home .pr-home-hero-content.is-pos-2,
	.pr-page--home .pr-home-hero-content.is-pos-3 {
		align-items: flex-start;
		text-align: left;
	}

	/* ---------- intro (bote + texto) ---------- */
	/* En escritorio la rejilla usa cotas absolutas del frame (ancho 1206 +
	   margen 144): aquí vuelve a ser un contenedor normal a una columna. */
	.pr-page--home .pr-home-intro-grid {
		grid-template-columns: 1fr;
		gap: 10px;
		width: auto;
		margin-left: 0;
		margin-right: 0;
		padding: 0 20px;
	}
	/* Marcas del pie: en flujo y TODAS a la izquierda (antes Lipinova salía
	   centrada por un `margin: auto` y quedaba desalineada con Azur). */
	:is(.pr-page--home-es, .pr-page--us, .pr-page--home) :is(.pr-esh-brand-lipinova, .pr-esh-brand-sspaain, .pr-esh-brand-azur) {
		position: static;
		display: block;
		margin: 16px 0 0;
		margin-inline: 0;
		/* Sin el alto fijo del frame la imagen se iba a su tamaño natural
		   (Lipinova pasó de 95×23 a 335×81): se acota por alto, que es como
		   estaban pensadas, y el ancho va solo. */
		height: 26px;
		width: auto;
		max-width: 100%;
		object-fit: contain;
		object-position: left center;
	}
	:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-brand-azur { height: 46px; }
	/* En el pie, las tres marcas pequeñas y en UNA sola línea: el lienzo
	   del footer es flex-column en móvil, así que hace falta la FILA
	   `.pr-esh-marcas` (display:contents en escritorio). */
	.pr-esh-marcas {
		display: flex;
		align-items: center;
		gap: 22px;
		margin-top: 22px;
	}
	.pr-esh-footer-main :is(.pr-esh-brand-lipinova, .pr-esh-brand-sspaain, .pr-esh-brand-azur) {
		display: block;
		height: 15px;
		width: auto;
		margin: 0;
		flex: 0 0 auto;
	}
	.pr-esh-footer-main .pr-esh-brand-azur { height: 26px; }
	/* El bote lleva los sellos NSF y Sltex horneados en la misma imagen, así
	   que agrandarlo agranda también las certificaciones. */
	.pr-page--home .pr-home-intro-media img {
		width: 100%;
		max-width: 320px;
		margin: 0 auto;
		display: block;
	}
	/* Hueco bote→título medido en 161px (28 de rejilla + márgenes del frame):
	   se recorta la rejilla y se anulan los márgenes de escritorio del H2. Y
	   el lead iba PEGADO al título (0px medido): 14 de aire. */
	.pr-page--home .pr-home-intro-copy h2 { margin: 0 0 14px; font-size: 26px; }
	.pr-page .pr-home-intro-lead { max-width: none; font-size: 17px; line-height: 1.3; margin-top: 0; }
	.pr-home-intro-body { max-width: none; }
	.pr-home-buy { max-width: none; justify-content: flex-start; }
	/* La caja de vidrio pegada al bote es una cota de escritorio. */
	.pr-home-intro-glass { position: static; width: auto; margin-top: 18px; }

	/* ---------- ciencia (línea temporal) ---------- */
	.pr-home-science { padding: 56px 0 64px; }
	.pr-home-science h2 { font-size: 24px; }
	.pr-home-timeline { margin-top: 28px; }
	/* Las dos filas con huecos y la barra de triángulos son geometría de
	   1440: en móvil los 5 bloques se apilan y la barra sobra. */
	.pr-home-timeline .pr-ht-row {
		display: flex;
		flex-direction: column;
		gap: 14px;
		position: static;
		height: auto;
	}
	.pr-home-timeline .pr-ht-block {
		position: static;
		width: auto;
		max-width: none;
		padding: 18px 20px;
		background: #f9f9f9;
		border-radius: 20px;
	}
	.pr-home-timeline .pr-ht-row--bottom { margin-top: 14px; }
	.pr-home-timeline .pr-ht-line { display: none; }

	/* ---------- Lipinova + tarjetas de confianza ---------- */
	.pr-page--home .pr-home-lipinova,
	.pr-page--home-eu .pr-home-lipinova {
		min-height: 0;
		padding: 56px 0 64px;
		border-radius: 30px 30px 0 0;
	}
	.pr-home-lipinova h2 { font-size: 24px; }
	.pr-page .pr-home-lipinova-desc { max-width: none; }
	.pr-home-trust { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
	/* La foto del reverso desbordaba la tarjeta 23px por abajo (medido:
	   img 223px dentro de una cara de 200): que llene la cara y recorte. */
	.pr-home-card .pr-flip-back { overflow: hidden; }
	.pr-home-card .pr-flip-photo {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* ---------- comunidad / newsletter ---------- */
	.pr-page--home .pr-home-community { height: auto; padding: 44px 0; }
	/* El velo de escritorio es un degradado HORIZONTAL (0,72 a la izquierda,
	   transparente a la derecha) pensado para 1440: en una pantalla estrecha
	   solo se ve la parte negra. En móvil, velo vertical y más suave, que la
	   caja de vidrio ya aporta contraste por sí misma. */
	.pr-page--home .pr-home-community::after {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.26) 100%);
	}
	/* La tarjeta de vidrio añadía su propia capa oscura encima del velo:
	   en móvil se aclara para que el conjunto no apague el vídeo. */
	.pr-page--home .pr-home-community-glass {
		background: rgba(30, 30, 30, 0.38);
		-webkit-backdrop-filter: blur(10px) saturate(1.3);
		backdrop-filter: blur(10px) saturate(1.3);
	}
	.pr-home-community-glass {
		position: static;
		width: auto;
		height: auto;
		margin: 0 20px;
		padding: 24px 20px;
	}
	.pr-page .pr-home-community-glass p { width: auto; }
	.pr-home-community-glass .pr-newsletter { flex-wrap: wrap; }
	.pr-home-community-glass .pr-newsletter input { width: 100%; flex: 1 1 100%; }

	/* ---------- banda SSPAAIN (solo EU) ---------- */
	.pr-home-band { height: auto; }
	.pr-home-band-in {
		display: flex;
		flex-direction: column;
		gap: 18px;
		padding: 36px 20px 40px;
		height: auto;
	}
	.pr-page .pr-home-band h2,
	.pr-home-band-copy,
	.pr-home-band-box,
	.pr-page a.pr-home-band-btn,
	.pr-page a.pr-home-band-btn:visited {
		position: static;
		left: auto;
		top: auto;
		width: auto;
	}
	.pr-page .pr-home-band h2 { font-size: 24px; }
	/* El logo SSPAAIN también iba clavado en coordenadas del frame. */
	.pr-page .pr-esh-brand-sspaain {
		position: static;
		display: block;
		margin: 4px 0 0;
		margin-inline: 0;
		max-width: 180px;
	}
	.pr-home-band-box { height: auto; padding: 22px 20px; }
	/* El titular tambien: llevaba `width: 403px` de escritorio y en movil se
	   salia de su caja de 320px, cortando la palabra a media linea (avisado el
	   26/08/2026: "este texto esta roto en EU"). El reseteo estaba puesto para
	   el parrafo y se quedo sin el h3. */
	.pr-page .pr-home-band-box h3,
	.pr-page .pr-home-band-box p { width: auto; max-width: 100%; }
	.pr-page a.pr-home-band-btn { align-self: flex-start; }
	/* Mismo recorte que en ES (peticion 27/08/2026): el parrafo «Si quieres
	   aportar datos...» repite en pequeno lo que la banda ya cuenta, y en movil
	   solo alarga la tarjeta. Titular + boton. */
	.pr-page .pr-home-band-box > p { display: none; }
	.pr-page .pr-home-band-box > h3 { margin-bottom: 20px; }

	/* ---------- FAQ ---------- */
	.pr-page--home .pr-faq { padding: 56px 0 64px; }
	.pr-faq h2 { font-size: 24px; margin-bottom: 24px; }
	.pr-page--home .pr-faq-q {
		min-height: 60px;
		padding: 16px 42px 16px 18px;
		font-size: 16px;
		border-radius: 20px;
	}
	.pr-page--home .pr-faq-answer-inner {
		max-width: none;
		padding: 18px 18px 22px;
		font-size: 15px;
	}
}

/* ====================================================================
   MÓVIL · Home ES (pr-page--home-es) — 20/08/2026
   Plantilla propia (frame 4:10484, clases pr-esh-*): sus secciones van
   clavadas en cotas de 1440, así que aquí todo vuelve al flujo y se
   apila, con las mismas decisiones que la home US/EU (bloque anterior).
   ==================================================================== */
@media (max-width: 767px) {

	/* ---------- héroe ---------- */
	.pr-page--home-es .pr-home-hero {
		height: 100vh;
		height: 100svh;
		min-height: 0;
	}
	/* El bloque de texto deja las cotas del frame y se ancla abajo. */
	.pr-page--home-es .pr-home-hero .pr-esh-canvas {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-start;
		height: 100%;
		padding-bottom: 62px;
	}
	.pr-page--home-es .pr-home-hero h1 {
		position: static;
		width: auto;
		max-width: 20ch;
		font-size: 27px;
		line-height: 1.15;
	}
	/* La máquina de escribir compone líneas pensadas para 600px: que rompa. */
	.pr-page--home-es .pr-rotator :is(.pr-type, .pr-type-out) { white-space: normal; }
	.pr-page--home-es .pr-esh-hero-sub {
		position: static;
		width: auto;
		margin-top: 12px;
		font-size: 17px;
		line-height: 1.3;
	}
	.pr-page--home-es .pr-esh-hero-cta {
		position: static;
		margin-top: 18px;
	}

	/* ---------- ProResolving What Matters (2 tarjetas) ---------- */
	.pr-page--home-es .pr-esh-intro { height: auto; padding: 56px 0 64px; }
	.pr-page--home-es .pr-esh-intro h2 {
		position: static;
		width: auto;
		margin: 0 0 14px;
		font-size: 26px;
	}
	.pr-page--home-es .pr-esh-intro-lead {
		position: static;
		width: auto;
		font-size: 17px;
		line-height: 1.3;
	}
	/* La tarjeta conserva su alto de 551 (anverso y reverso son capas
	   absolutas del giro); solo pierde las cotas del frame y se centra. */
	.pr-page--home-es .pr-esh-card {
		position: relative;
		top: auto;
		width: 100%;
		max-width: 393px;
		margin: 24px auto 0;
	}
	.pr-page--home-es .pr-esh-card--sports,
	.pr-page--home-es .pr-esh-card--active { left: auto; }
	/* El bote iba a x=100 (centro de 393): centrado de verdad. */
	.pr-page--home-es .pr-esh-card-shot {
		left: 50%;
		transform: translateX(-50%);
	}
	/* El botón de compra iba a x=294 y se salía en tarjetas más estrechas. */
	.pr-page--home-es .pr-esh-card .pr-esh-card-buy {
		left: auto;
		right: 24px;
	}
	/* En móvil el toque GIRA la tarjeta (clase del JS); el nombre navega.
	   El :hover/:focus-within se queda pegado tras el toque en pantallas
	   tactiles y el reverso no volvia: aqui manda solo `is-girada`. */
	.pr-page--home-es .pr-esh-card:hover .pr-flip-inner,
	.pr-page--home-es .pr-esh-card:focus-within .pr-flip-inner { transform: none; }
	.pr-page--home-es .pr-esh-card.is-girada .pr-flip-inner { transform: rotateY(180deg); }
	.pr-page--home-es a.pr-esh-card-name { text-decoration: none; }

	/* ---------- ciencia / línea temporal ---------- */
	.pr-page--home-es .pr-esh-science { height: auto; padding: 56px 0 64px; }
	/* En 1440 la cronología se lee por posición x (arriba/abajo alternos):
	   apilada se reordena con flex para conservar la narrativa t1-b1-t2-b2-t3. */
	.pr-page--home-es .pr-esh-science .pr-esh-canvas {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}
	.pr-page--home-es .pr-esh-science h2 {
		position: static;
		width: auto;
		order: 0;
		margin: 0 0 10px;
		font-size: 24px;
	}
	.pr-page--home-es .pr-esh-tl {
		position: static;
		width: auto;
		padding: 18px 20px;
		background: #f9f9f9;
		border-radius: 20px;
	}
	.pr-page--home-es .pr-esh-tl--t1 { order: 1; }
	.pr-page--home-es .pr-esh-tl--b1 { order: 2; }
	.pr-page--home-es .pr-esh-tl--t2 { order: 3; }
	.pr-page--home-es .pr-esh-tl--b2 { order: 4; }
	.pr-page--home-es .pr-esh-tl--t3 { order: 5; }
	.pr-page--home-es .pr-esh-line { display: none; }

	/* ---------- Lipinova + tarjetas de confianza ---------- */
	.pr-page--home-es .pr-esh-lipinova {
		height: auto;
		padding: 56px 0 64px;
		border-radius: 30px 30px 0 0;
	}
	.pr-page--home-es .pr-esh-lipinova h2 {
		position: static;
		margin: 0 0 18px;
		font-size: 24px;
	}
	.pr-page--home-es .pr-esh-lipinova-desc {
		position: static;
		width: auto;
	}
	.pr-page--home-es .pr-esh-lipinova-cta {
		position: static;
		margin-top: 18px;
	}
	.pr-page--home-es .pr-esh-trust-title {
		position: static;
		margin: 40px 0 0;
	}
	.pr-page--home-es .pr-esh-trust {
		position: static;
		width: auto;
		grid-template-columns: 1fr;
		gap: 12px;
		margin-top: 20px;
	}
	/* Menos relleno para que el texto quepa en los 214px de la tarjeta. */
	.pr-page--home-es .pr-esh-trust-card .pr-flip-front,
	.pr-page--home-es .pr-esh-trust-card .pr-flip-back { padding: 28px 24px; }
	.pr-page--home-es .pr-esh-trust-card .pr-flip-back { overflow: hidden; }
	.pr-page--home-es .pr-esh-trust-card .pr-flip-photo {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* ---------- banda SSPAAIN ---------- */
	.pr-page--home-es .pr-esh-band { height: auto; }
	.pr-page--home-es .pr-esh-band .pr-esh-canvas {
		display: flex;
		flex-direction: column;
		gap: 18px;
		padding-top: 36px;
		padding-bottom: 40px;
	}
	.pr-page--home-es .pr-esh-band h2 {
		position: static;
		width: auto;
		font-size: 24px;
	}
	.pr-page--home-es .pr-esh-band-copy {
		position: static;
		width: auto;
	}
	.pr-page--home-es .pr-esh-band-aside {
		position: static;
		width: auto;
		height: auto;
		padding: 22px 20px;
	}
	.pr-page--home-es .pr-esh-band-aside h3,
	.pr-page--home-es .pr-esh-band-aside p {
		position: static;
		width: auto;
	}
	.pr-page--home-es .pr-esh-band-aside p { margin-top: 12px; }
	/* FUERA el parrafo «Si te interesa contribuir con datos...» en movil
	   (peticion 27/08/2026). Son 115px de letra pequena repitiendo lo que ya
	   dice la banda justo encima; en el movil la tarjeta pasaba de 314px de
	   alto para no aportar nada nuevo. Se queda el titular y el boton, que es
	   la accion. En escritorio sigue igual, que ahi hay sitio de sobra. */
	.pr-page--home-es .pr-esh-band-aside > p { display: none; }
	.pr-page--home-es .pr-esh-band-cta {
		position: static;
		margin-top: 16px;
	}
	/* Sin el parrafo, el boton necesita su propio aire respecto al titular. */
	.pr-page--home-es .pr-esh-band-aside > h3 + .pr-esh-band-cta,
	.pr-page--home-es .pr-esh-band-aside > p + .pr-esh-band-cta { margin-top: 20px; }

	/* ---------- FAQ ---------- */
	.pr-page--home-es .pr-faq { padding: 56px 0 64px; }
	.pr-page--home-es .pr-faq .pr-esh-canvas { padding-left: 20px; }
	.pr-page--home-es .pr-faq h2 { margin: 0 0 24px; font-size: 24px; }
	.pr-page--home-es .pr-faq-item { width: auto; }
	.pr-page--home-es .pr-faq-q {
		min-height: 60px;
		padding: 16px 42px 16px 18px;
		font-size: 16px;
		border-radius: 20px;
	}
	.pr-page--home-es .pr-faq-answer-inner {
		width: auto;
		padding: 18px 18px 22px;
		font-size: 15px;
	}

	/* ---------- newsletter (microscopio) ---------- */
	.pr-page--home-es .pr-esh-news { height: auto; padding: 44px 0; }
	/* El velo horizontal de 1440 dejaba solo la parte negra: vertical y
	   suave, como en US/EU. */
	.pr-page--home-es .pr-esh-news::after {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.26) 100%);
	}
	/* El cristal es un span decorativo detrás del copy: aquí se estira para
	   cubrir el contenido, que pasa a estar en flujo encima. */
	.pr-page--home-es .pr-esh-news .pr-esh-canvas {
		width: auto;
		margin: 0 20px;
		padding: 24px 20px;
	}
	.pr-page--home-es .pr-esh-news-glass {
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(30, 30, 30, 0.38);
		-webkit-backdrop-filter: blur(10px) saturate(1.3);
		backdrop-filter: blur(10px) saturate(1.3);
	}
	/* relative y no static: el cristal es un hermano absoluto y pintaría
	   encima del contenido en flujo (blur sobre el texto, medido). */
	.pr-page--home-es .pr-esh-news h2 {
		position: relative;
		z-index: 1;
		left: auto;
		top: auto;
		margin: 0 0 10px;
	}
	.pr-page--home-es .pr-esh-news-sub {
		position: relative;
		z-index: 1;
		left: auto;
		top: auto;
		width: auto;
	}
	.pr-page--home-es .pr-esh-newsletter {
		position: relative;
		z-index: 1;
		left: auto;
		top: auto;
		margin-top: 18px;
		flex-wrap: wrap;
	}
	.pr-page--home-es .pr-esh-newsletter input {
		width: 100%;
		flex: 1 1 100%;
	}
}

/* ====================================================================
   MÓVIL · Ficha de producto US (frame 83:10174, skin pr-page--us)
   — 20/08/2026. Todo vuelve al flujo; el header fijo de 60px se salva
   con el padding-top del hero.
   ==================================================================== */
@media (max-width: 767px) {

	/* ---------- héroe / producto ---------- */
	.pr-page--us .pr-hero {
		height: auto;
		margin-top: 0;
		padding: 68px 0 44px;
	}
	.pr-page--us .pr-hero > .pr-container { height: auto; }
	/* Los sellos van anclados a la FOTO, no a la página. */
	/* Receta del movil del sandbox: imagen contenida, precio y CTA a un
	   primer vistazo. */
	.pr-page--us .pr-hero-media { position: relative; text-align: center; }
	/* El 8% que centra el bote (más abajo) saca la CAJA de la imagen 7px del
	   ancho del documento, y eso ESTIRABA el header fijo: medido 382px con un
	   viewport de 375, con el carrito y la hamburguesa 7px a la derecha. Al
	   pasar a una foto de galería el JS quita el transform, el desbordamiento
	   desaparece y el menú volvía de golpe a su sitio: eso es el «menú que se
	   mueve» al cambiar de imagen (31/08/2026).
	   El recorte va en la SECCIÓN y no en `.pr-hero-media`: la caja de la
	   imagen acaba en 382 pero el bote pintado acaba en 364, mientras que el
	   contenedor cierra en 355, así que recortando ahí se comía 9px de bote.
	   La sección mide justo el ancho del viewport, luego lo único que se
	   pierde son los 18px de caja vacía que deja `object-fit: contain`.
	   `clip` y no `hidden` a propósito: no crea contenedor de scroll ni rompe
	   posiciones sticky. */
	.pr-page--us .pr-hero { overflow-x: clip; }
	/* Ancho completo: packshot y fotos de galería comparten proporción
	   (942x1175 y 942x1174, medido), así que con `height:auto` ninguna se
	   recorta y todas llenan el hueco. El tope de 240px de la ronda
	   anterior dejaba las fotos de estilo de vida flotando en el gris. */
	/* La foto PRINCIPAL (el packshot) va limpia: sin fondo, centrada y
	   entera. Las de GALERÍA sí llenan el hueco de borde a borde.
	   El JS marca el hero con `.pr-sin-sellos` en cuanto se cambia de foto,
	   así que esa clase distingue los dos casos sin tocar el marcado. */
	.pr-page--us .pr-hero-media .pr-hero-shot {
		position: static;
		display: block;
		width: 100%;
		max-width: none;
		height: auto;
		max-height: 46svh;
		object-fit: contain;
		object-position: center;
		margin: 0 auto;
		background: none;
	}
	/* Los packshots de Sports traen el bote descentrado 9,6% hacia la
	   izquierda DENTRO del archivo (contenido en x147..614 de 942, medido),
	   así que centrado a secas se ve escorado.
	   Antes se corregía con `object-position: 100%`, que empuja la foto al
	   extremo derecho aprovechando el sobrante de `contain`. El problema es
	   que ese sobrante depende del ALTO de la pantalla: el borde derecho del
	   bote acaba a 0,348 × el ancho renderizado del borde de la caja,
	   mientras los sellos están a 102px fijos, así que en cuanto la pantalla
	   no es muy alta el bote los pisa (medido: −10px de hueco a 360x720).
	   Ahora se centra el bote con un `translateX` sobre el ANCHO DEL PROPIO
	   ELEMENTO, que no depende del alto, y los sellos se apartan al borde
	   para dejarle sitio. */
	.pr-page--us .pr-hero-media .pr-hero-shot {
		object-position: center;
		transform: translateX(8%);
	}
	/* ...pero SOLO para el packshot del tema. Las fotos de galería son otros
	   archivos con el bote ya centrado, así que ese 8% las empujaba 28px a la
	   derecha y las sacaba del ancho (medido: caja 48..398 en una ventana de
	   398). El JS marca el héroe con `pr-sin-sellos` en cuanto se cambia de
	   foto, que es justo la señal que hace falta (25/08/2026). */
	.pr-page--us .pr-sin-sellos .pr-hero-media .pr-hero-shot {
		transform: none;
	}
	.pr-page--us .pr-sin-sellos .pr-hero-media .pr-hero-shot {
		object-fit: cover;
		object-position: center;
	}
	/* Sellos a la DERECHA de la foto, en columna (petición 20/08). */
	.pr-page--us .pr-hero-badge {
		position: absolute;
		left: auto; /* el left de escritorio (183/168) seguía mandando */
		right: 0;
		display: block;
		margin: 0;
		z-index: 2;
	}
	/* Al pasar a una foto de galería el JS marca `.pr-sin-sellos` y los
	   atenúa a opacity 0; en escritorio son absolutos y no ocupan, pero
	   aquí van en flujo y dejaban una banda vacía de ~45px bajo la foto
	   (medido). En móvil salen del flujo directamente. */
	.pr-sin-sellos .pr-hero-badge,
	.pr-sin-sellos .pr-apr-seal { display: none; }
	/* Arrancan a la altura del TAPON (medido: el bote empieza en y=46 dentro
	   del marco) y mas cerca del producto, cuyo borde derecho cae en x=267
	   de los 390 del marco (peticion 21/08/2026). */
	/* Los sellos se apartan al borde: con el bote ya centrado su lado derecho
	   llega hasta ~246px de los 320 del hueco, y en las cotas anteriores
	   (56/44) los sellos arrancaban en 238 y se los comía. */
	.pr-page--us .pr-hero-badge--nsf { top: 46px; right: 20px; width: 34px; height: auto; }
	.pr-page--us .pr-hero-badge--seal { top: 94px; right: 8px; width: 58px; height: auto; }
	.pr-page--eu-f .pr-hero-badge--informed { top: 46px; right: 20px; width: 34px; height: auto; }
	.pr-page--eu-f .pr-hero-badge--seal { top: 96px; right: 10px; width: 56px; height: auto; }
	/* La ronda del 06/08 clavo los HIJOS del hero en absoluto (titulo,
	   precio, compra, equipos) y corrio la rejilla 85px: todo al flujo. */
	.pr-page--us .pr-hero-grid { top: auto; }
	/* El bloque de compra SUBE por delante de la descripcion (flex order):
	   imagen → titulo → precio → CTA, todo en la primera pantalla. */
	/* Fila envolvente: todo ocupa el ancho salvo precio y precio/cápsula,
	   que comparten línea alineados por abajo (petición 20/08). */
	.pr-page--us .pr-hero-info {
		position: static;
		display: flex;
		flex-flow: row wrap;
		align-items: flex-end;
		width: auto;
		margin-top: 18px;
	}
	.pr-page--us .pr-hero-info > * { width: 100%; }
	.pr-page--us .pr-product-title {
		position: static;
		order: 1;
		margin: 0;
		font-size: 24px;
	}
	.pr-page--us .pr-price {
		position: static;
		order: 2;
		width: auto;
		margin: 10px 0 0;
		font-size: 34px;
		line-height: 1;
	}
	.pr-page--us .pr-price .pr-price-tax { font-size: 13px; }
	.pr-page--us .pr-price-unit {
		position: static;
		order: 3;
		width: auto;
		margin: 0 0 1px 12px;
		font-size: 13px;
		line-height: 1.2;
	}
	.pr-page--us .pr-buy {
		position: static;
		order: 4;
		margin: 12px 0 0;
	}
	/* Descripción COMPLETA (petición 20/08). El recorte no venía de aquí:
	   el bloque HEREDADO del sandbox (media 760) declara line-clamp 6 y hay
	   que deshacerlo en explícito. */
	.pr-page--us .pr-product-desc {
		position: static;
		order: 5;
		width: auto;
		margin: 16px 0 0;
		font-size: 14px;
		line-height: 19px;
		display: block;
		-webkit-line-clamp: unset;
		overflow: visible;
	}
	.pr-page--us .pr-product-desc p + p { margin-top: 8px; }
	.pr-page--us .pr-buy-controls { flex-wrap: wrap; }
	.pr-page--us .pr-team-card {
		position: static;
		order: 6;
		width: 100%;
		height: auto;
		margin-top: 24px;
		padding: 24px 20px;
	}
	.pr-page--us .pr-team-copy {
		position: static;
		width: auto;
	}
	.pr-page--us .pr-team-controls {
		position: static;
		margin-top: 16px;
		flex-wrap: wrap;
	}

	/* Galería + reseña destacada: la galería pasa a carrusel nativo (se
	   desliza con el dedo) y las flechas de JS sobran. */
	.pr-page--us .pr-review-teaser {
		position: static;
		width: auto;
		margin-top: 36px;
	}
	.pr-page--us .pr-thumbs-carousel {
		position: static;
		width: auto;
		height: auto;
	}
	.pr-page--us .pr-thumbs-carousel > .pr-arrow { display: none; }
	.pr-page--us .pr-review-thumbs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 6px;
		gap: 10px;
	}
	/* Mas grandes (se veian enanas) y con proporcion fija: el height fijo
	   se lo come el height:auto general, la proporcion no. */
	.pr-page--us .pr-review-thumbs img {
		width: 172px;
		height: auto;
		aspect-ratio: 112 / 146;
		object-fit: cover;
	}
	.pr-page--us .pr-teaser-card-wrap {
		position: relative;
		left: auto;
		top: auto;
		width: auto;
		margin-top: 20px;
	}
	.pr-page--us .pr-review-card--teaser {
		width: auto;
		padding: 24px 20px 20px;
	}
	.pr-page--us .pr-review-card--teaser .pr-review-text { width: auto; }
	.pr-page--us .pr-teaser-card-wrap > .pr-arrow {
		right: 14px;
		top: auto;
		bottom: 12px;
	}

	/* ---------- tabs: segmented control iOS (receta del sandbox) ---------- */
	.pr-page--us .pr-tabs-section { padding: 48px 0 0; }
	.pr-page--us .pr-tabs {
		display: flex;
		flex-wrap: nowrap;
		gap: 0;
		height: auto;
		overflow: visible;
		padding: 2px;
		border-radius: 10px;
		background: rgba(118, 118, 128, 0.12);
	}
	.pr-page--us .pr-tabs [role="tab"] {
		position: static;
		flex: 1 1 0;
		min-width: 0;
		padding: 9px 4px;
		font-size: 13px;
		font-weight: 400;
		line-height: 1.2;
		letter-spacing: 0;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #000;
		border-radius: 8px;
	}
	/* Sin span deslizante en estas plantillas: el segmento activo lleva la
	   pastilla blanca directamente. */
	.pr-page--us .pr-tabs [role="tab"].is-active,
	.pr-page--us .pr-tabs-section .pr-tabs [role="tab"].is-active {
		color: #000;
		font-weight: 500;
		background: #fff;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
	}
	.pr-page--us .pr-tabs-viewport {
		margin: 24px 0 0;
		width: auto;
		min-height: 0;
	}
	.pr-page--us .pr-fda-note {
		width: 100%;
		max-width: 508px;
		margin: 14px 0 0;
	}
	/* El sello de reciclaje iba a 362px fijos (y en la plantilla vieja con
	   max-width propio): que quepa. */
	.pr-page--eu .pr-recycling,
	.pr-page--eu-f .pr-recycling {
		width: 100%;
		max-width: 335px;
		margin-left: 0;
	}
	.pr-page--us .pr-cert-row {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.pr-page--us .pr-cert-row img { margin-left: 0; }

	/* ---------- claims ---------- */
	.pr-page--us .pr-claims { height: auto; padding: 8px 0 44px; margin-top: 56px; }
	.pr-page--us .pr-claims-grid { height: auto; }
	.pr-page--us .pr-claim:nth-child(n) {
		position: static;
		width: auto;
		max-width: 340px;
		margin: 36px auto 0;
	}

	/* ---------- beneficios ---------- */
	.pr-page--us .pr-benefits { padding: 64px 0 0; }
	.pr-page--us .pr-benefits .pr-section-intro { margin: 0 0 32px; }
	.pr-page--us .pr-section-intro > p { width: auto; }
	.pr-page--us .pr-benefits-grid {
		grid-template-columns: 1fr;
		gap: 12px;
		width: auto;
		margin-left: 0;
	}
	.pr-page--us .pr-benefit-card { padding: 32px 24px 20px; }
	.pr-page--us .pr-benefit-card--photo { height: 220px; padding: 0; }

	/* ---------- Trusted by Elite Athletes ---------- */
	.pr-page--us .pr-trusted { height: auto; padding: 48px 0 52px; margin-top: 64px; }
	.pr-page--us .pr-trusted-copy {
		position: static;
		width: auto;
	}
	.pr-page--us .pr-trusted-copy p { width: auto; }
	.pr-page--us .pr-trusted-stats {
		position: static;
		margin-top: 28px;
		flex-wrap: wrap;
		gap: 12px;
	}

	/* ---------- banda coral ---------- */
	.pr-page--us .pr-contact-band--coral { height: auto; padding: 28px 0 32px; }
	.pr-page--us .pr-contact-band--coral .pr-band { height: auto; }
	.pr-page--us .pr-contact-band--coral .pr-band > div {
		position: static;
	}
	.pr-page--us .pr-contact-band--coral .pr-band p { width: auto; }
	.pr-page--us .pr-contact-band--coral .pr-btn {
		position: static;
		margin-top: 18px;
	}

	/* ---------- patrocinio SDN ---------- */
	.pr-page--us .pr-sponsor { padding: 56px 0 0; }
	.pr-page--us .pr-sponsor-head {
		margin-left: 0;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 14px;
	}
	/* El titular va a tres lineas y el logo, algo mas arriba, a su derecha. */
	.pr-page--us .pr-sponsor-head .pr-heading { font-size: 24px; line-height: 1.2; }
	.pr-page--eu-f .pr-sponsor--coral .pr-sponsor-head img,
	.pr-page--us .pr-sponsor-head img { margin-top: -4px; }
	.pr-page--us .pr-sponsor-head .pr-heading { width: auto; flex: 1 1 auto; }
	/* El logo, más pequeño y encajado a la derecha del titular de 3 líneas. */
	.pr-page--us .pr-sponsor-head img {
		position: static;
		flex: 0 0 auto;
		width: 84px;
		margin: 4px 0 0;
	}
	.pr-page--us .pr-sponsor-cols {
		grid-template-columns: 1fr;
		gap: 20px;
		margin: 22px 0 0;
	}

	/* ---------- lienzo gris: historias + reseñas ---------- */
	.pr-page--us .pr-canvas { margin-top: 56px; border-radius: 30px 30px 0 0; }
	.pr-page--us .pr-stories { padding: 56px 0 0; }
	.pr-page--us .pr-stories .pr-section-intro { margin: 0 0 32px; padding: 0 20px; }
	.pr-page--us .pr-stories-intro { width: auto; }
	/* Historias estilo TikTok (maqueta del sandbox reactivada): un video
	   por pantalla, snap vertical dentro del marco. El JS anade .is-tiktok
	   en movil y reproduce el visible. */
	.pr-page--us .pr-stories-viewport { position: relative; overflow: visible; }
	.pr-page .pr-stories-track.is-tiktok {
		display: block;
		width: min(78vw, calc(70vh * 284 / 508));
		height: min(70vh, calc(78vw * 508 / 284));
		margin: 0 auto;
		padding: 0;
		overflow-y: auto;
		overflow-x: hidden;
		scroll-snap-type: y mandatory;
		border-radius: var(--pr-radius, 30px);
		scrollbar-width: none;
		transform: none;
	}
	.pr-page .pr-stories-track.is-tiktok::-webkit-scrollbar { display: none; }
	.pr-page .pr-stories-track.is-tiktok .pr-story {
		flex: none;
		width: 100%;
		height: 100%;
		margin: 0;
		scroll-snap-align: start;
		scroll-snap-stop: always;
		opacity: 1;
	}
	.pr-page--us .pr-story figcaption { left: 20px; bottom: 18px; }
	.pr-page--us .pr-reel-sound { right: 16px; bottom: 16px; }

	/* ---------- reseñas ---------- */
	.pr-page--us .pr-reviews { padding: 64px 0 0; }
	.pr-page--us .pr-reviews-head {
		width: auto;
		margin: 0 0 24px;
		flex-wrap: wrap;
		gap: 12px;
	}
	.pr-page--us .pr-review-row { margin-left: 0; width: auto; }
	.pr-page--us .pr-review-row .pr-review-card {
		width: auto;
		min-height: 0;
		padding: 28px 40px;
	}
	.pr-page--us .pr-review-row .pr-review-text {
		width: auto;
		font-size: 16px;
		line-height: 22px;
	}
	/* Las flechas entran DENTRO de la tarjeta, a media altura. */
	.pr-page--us .pr-review-row > .pr-arrow--prev { left: 6px; top: 50%; }
	.pr-page--us .pr-review-row > .pr-arrow:not(.pr-arrow--prev) { right: 6px; top: 50%; }
	.pr-page--us .pr-reviews-summary {
		position: static;
		width: auto;
		margin-top: 36px;
	}
	.pr-page--us .pr-reviews-lead { width: auto; }
	.pr-page--us .pr-rate-cta { width: auto; }

	/* ---------- Demanding Lifestyles ---------- */
	.pr-page--us .pr-demanding { height: auto; padding: 48px 0 52px; }
	.pr-page--us .pr-demanding-copy {
		position: static;
	}
	.pr-page--us .pr-demanding-copy .pr-heading { width: auto; }
	.pr-page--us .pr-demanding-copy p { width: auto; }

	/* ---------- FAQ ---------- */
	.pr-page--us .pr-faq { padding: 64px 0 72px; }
	.pr-page--us .pr-faq h2 { margin: 0 0 24px; }
	.pr-page--us .pr-faq-item { margin: 0 0 8px; width: auto; }
	.pr-page--us .pr-faq-q {
		min-height: 60px;
		padding: 16px 46px 16px 18px;
		font-size: 16px;
		border-radius: 20px;
	}
	.pr-page--us .pr-faq-q::after { right: 18px; }
	.pr-page--us .pr-faq-answer-inner { padding: 18px 18px 22px; }
	/* La respuesta iba a los 826px del frame y el overflow de la animacion
	   la recortaba sin avisar. */
	.pr-page--us .pr-faq-answer-inner p {
		width: auto;
		max-width: none;
		font-size: 15px;
	}

	/* ---------- newsletter EU (caja de vidrio propia) ---------- */
	.pr-page--eu-f .pr-community--eu { height: auto; padding: 44px 0; }
	.pr-page--eu-f .pr-community--eu .pr-community-glass {
		position: relative;
		left: auto;
		top: auto;
		width: auto;
		height: auto;
		margin: 0 20px;
		padding: 24px 20px;
	}
	.pr-page--eu-f .pr-community--eu p { width: auto; }
	.pr-page--eu-f .pr-community--eu .pr-newsletter { flex-wrap: wrap; }
	.pr-page--eu-f .pr-community--eu .pr-newsletter input { flex: 1 1 100%; width: 100%; }

	/* ---------- barra de compra fija ---------- */
	/* A 375 la fila no cabe (miniatura 64 + boton 128 dejaban 79px al
	   texto, medido): el CTA pasa a su propia fila a todo el ancho. */
	.pr-sticky-buy { padding: 0 12px 12px; }
	.pr-sticky-in {
		flex-wrap: wrap;
		row-gap: 10px;
		padding: 12px 16px;
		border-radius: 28px;
	}
	/* Barra más compacta (20/08): bote pequeño y SOLO la frase en negrita.
	   ⚠️ `height` con `!important`: la regla de los cimientos
	   `.pr-page :is(img,video):not(…)×12 { height:auto }` suma una clase por
	   cada `:not()` y gana a cualquier selector razonable de aquí. */
	.pr-page .pr-sticky-buy .pr-sticky-thumb {
		width: 42px;
		height: 72px !important;
		object-fit: contain;
		border-radius: 0;
		align-self: center;
	}
	/* El texto normal desaparece con font-size 0; el <strong> lo recupera. */
	.pr-page .pr-sticky-copy {
		font-size: 0;
		line-height: 0;
	}
	.pr-page .pr-sticky-copy strong {
		font-size: 14px;
		line-height: 18px;
	}
	.pr-page .pr-sticky-copy { flex: 1 1 calc(100% - 56px); }
	.pr-page .pr-sticky-buy .pr-sticky-form { flex: 1 1 100%; }
	.pr-page .pr-sticky-cta { width: 100%; }

	/* ---------- newsletter ---------- */
	.pr-page--us .pr-community { height: auto; padding: 44px 0 48px; }
	.pr-page--us .pr-community h2 {
		position: static;
		margin: 0;
	}
	.pr-page--us .pr-community p {
		position: static;
		width: auto;
		margin: 10px 0 0;
	}
	.pr-page--us .pr-newsletter {
		position: static;
		margin-top: 18px;
		flex-wrap: wrap;
	}
	.pr-page--us .pr-newsletter input {
		width: 100%;
		flex: 1 1 100%;
	}
}

/* ====================================================================
   MÓVIL · Ficha Active ES (frame 152:7060, skin pr-page--apr)
   — 20/08/2026. Mismo criterio que la ficha US: todo al flujo.
   ==================================================================== */
@media (max-width: 767px) {

	/* ---------- héroe ---------- */
	.pr-apr-hero {
		height: auto;
		margin-top: 0;
		/* La foto arrancaba 76px mas abajo que en Sports (medido 144 vs 68). */
		padding: 68px 0 44px;
	}
	.pr-apr-hero > .pr-esh-canvas { padding-top: 0; margin-top: 0; }
	.pr-apr-hero .pr-apr-card { margin-top: 0; }
	/* La piel ES suma 76px al main de las paginas sin hero
	   (.pr-page--home-es:not(.pr-has-hero) .pr-main) y la ficha de Sports no
	   los lleva: por eso la foto de Active arrancaba 76px mas abajo. */
	.pr-page--apr:not(.pr-has-hero) .pr-main { padding-top: 0; }
	/* El mismo colchon de 76px de la piel ES sobraba en carrito, checkout,
	   Mi cuenta y el "gracias": todas tienen ya su propio relleno y el
	   header movil mide 60 (peticion 21/08: "subir hacia el menu"). */
	.pr-page--cart:not(.pr-has-hero) .pr-main,
	.pr-page--chk:not(.pr-has-hero) .pr-main,
	.pr-page--account:not(.pr-has-hero) .pr-main,
	.pr-page--account:not(.pr-has-hero) .pr-acc,
	.pr-page--ty:not(.pr-has-hero) .pr-main { padding-top: 0; }
	.pr-page--chk .pr-main { padding-top: 0; }
	/* Hero compacto con orden: imagen → titulo → precio → cantidad → CTA →
	   suscripcion; la descripcion (recortada) baja detras. */
	.pr-apr-hero .pr-esh-canvas {
		height: auto;
		display: flex;
		flex-flow: row wrap;
		align-items: flex-end;
	}
	.pr-apr-hero .pr-esh-canvas > * { width: 100%; }
	/* Igual que en Sports: el packshot limpio y centrado, las de galería
	   a sangre. */
	.pr-apr-card {
		position: static;
		order: 1;
		display: block;
		width: 100%;
		max-width: none;
		height: auto;
		max-height: 46svh;
		object-position: center;
		margin: 0 auto;
		align-self: stretch;
		background: none;
	}
	/* Con `.pr-page .pr-apr-hero` delante: la base declara
	   `.pr-page .pr-apr-hero .pr-apr-card { object-fit: cover }` (0-3-0) y le
	   ganaba al selector a pelo, así que el packshot seguía recortándose. */
	.pr-page .pr-apr-hero .pr-apr-card { object-fit: contain; }
	.pr-page .pr-apr-hero.pr-sin-sellos .pr-apr-card { object-fit: cover; }
	/* Con el lienzo en fila (`> * { width:100% }`, 0-2-0) el selector a pelo
	   perdía el ancho: se iguala la especificidad. */
	.pr-apr-hero .pr-esh-canvas > .pr-apr-seal {
		position: absolute;
		left: auto;
		top: 62px;   /* el tapon del bote, medido dentro del marco */
		right: 46px;
		width: 56px;
		height: auto;
		margin: 0;
		z-index: 2;
	}
	.pr-page .pr-apr-title {
		position: static;
		order: 3;
		margin: 16px 0 0;
		font-size: 24px;
		line-height: 1.2;
	}
	.pr-page .pr-apr-price {
		position: static;
		order: 4;
		width: auto;
		margin: 10px 0 0;
		font-size: 34px;
		line-height: 1;
	}
	.pr-apr-price-tax { font-size: 13px; }
	.pr-page .pr-apr-price-unit {
		position: static;
		order: 5;
		width: auto;
		margin: 0 0 1px 12px;
		font-size: 13px;
		line-height: 1.2;
	}
	.pr-page .pr-apr-qty-label {
		position: static;
		order: 6;
		margin: 12px 0 0;
	}
	.pr-apr-buy {
		position: static;
		order: 7;
		margin: 10px 0 0;
		flex-wrap: wrap;
	}
	.pr-apr-desc {
		position: static;
		order: 9;
		width: auto;
		margin: 16px 0 0;
		font-size: 14px;
		line-height: 19px;
	}
	.pr-page .pr-apr-desc p { margin: 0 0 8px; font-size: 14px; line-height: 18px; }
	.pr-apr-subs {
		position: static;
		order: 8;
		width: 100%;
		height: auto;
		margin-top: 20px;
		padding: 24px 20px;
		/* `display: block` OTRA VEZ: el 26/08/2026 se paso la banda de
		   ESCRITORIO a fila flexible para que creciera con el texto ingles, y en
		   movil eso estrujaba el parrafo en una columna estrecha con el boton al
		   lado. En movil van apilados: texto entero arriba y boton debajo. */
		display: block;
	}
	.pr-page .pr-apr-subs p {
		position: static;
		width: auto;
	}
	.pr-page button.pr-apr-subs-btn {
		position: static;
		margin-top: 14px;
	}
	/* Galería: carrusel nativo, sin flechas de JS. */
	/* La galeria y la reseña viven en un envoltorio comun (.pr-apr-teaser):
	   el orden va en EL, no en sus hijos. */
	.pr-apr-hero .pr-apr-teaser { order: 10; }
	.pr-apr-thumbs {
		position: static;
		width: auto;
		margin-top: 32px;
		display: flex;
		gap: 10px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 6px;
	}
	.pr-page button.pr-apr-thumb-arrow { display: none; }
	.pr-apr-thumbs img {
		width: 172px;
		height: auto;
		aspect-ratio: 112 / 146;
		object-fit: cover;
	}
	.pr-apr-teaser-card {
		position: relative;
		left: auto;
		top: auto;
		width: auto;
		margin-top: 20px;
	}
	.pr-apr-teaser-card .pr-review-card--teaser {
		width: auto;
		padding: 24px 20px 20px;
	}
	.pr-page .pr-apr-teaser-card .pr-review-text { width: auto; }
	.pr-apr-teaser-card > .pr-arrow {
		right: 14px;
		top: auto;
		bottom: 12px;
	}

	/* ---------- tabs: mismo segmented control que Sports ---------- */
	.pr-page--apr .pr-tabs-section { padding: 48px 0 40px; min-height: 0; }
	.pr-page--apr .pr-tabs {
		flex-wrap: nowrap;
		gap: 0;
		overflow: visible;
		padding: 2px;
		border-radius: 10px;
		background: rgba(118, 118, 128, 0.12);
	}
	.pr-page--apr .pr-tabs [role="tab"] {
		flex: 1 1 0;
		min-width: 0;
		margin-right: 0; /* el escritorio separa las pestañas con 116px */
		padding: 9px 4px;
		font-size: 13px;
		font-weight: 400;
		line-height: 1.2;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #000;
		border-radius: 8px;
	}
	/* La "capsula blanca" suelta era el thumb deslizante colocado con cotas
	   de escritorio: fuera; la pastilla la lleva el segmento activo. */
	.pr-page--apr .pr-tabs .pr-tabs-thumb { display: none; }
	.pr-page--apr .pr-tabs [role="tab"].is-active {
		color: #000;
		font-weight: 500;
		background: #fff;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
	}
	.pr-page--apr .pr-tabs-viewport { margin-top: 24px; max-width: none; }
	/* Paneles con el MISMO tratamiento que los de Sports (20/08). */
	.pr-page--apr .pr-tab-panel p {
		font-size: 16px;
		font-weight: 300;
		line-height: 20px;
		letter-spacing: 0.5px;
	}
	.pr-page--apr .pr-tab-panel p strong,
	.pr-page--apr .pr-tab-panel p.pr-warning-title { font-weight: 600; }
	.pr-page--apr .pr-cert-row h3 {
		font-size: 16px;
		font-weight: 600;
		margin: 0 0 6px;
	}

	/* ---------- hitos (banda gris) y "cada vez más cerca" ---------- */
	.pr-apr-hitos,
	.pr-apr-cerca { height: auto; padding: 8px 0 44px; }
	.pr-apr-hitos .pr-esh-canvas,
	.pr-apr-cerca .pr-esh-canvas { height: auto; }
	.pr-apr-hitos .pr-apr-hito:nth-child(n),
	.pr-apr-cerca .pr-apr-hito:nth-child(n) {
		position: static;
		width: auto;
		max-width: 320px;
		margin: 36px auto 0;
		text-align: center;
	}
	.pr-apr-hito img {
		position: static;
		margin: 0 auto;
	}
	.pr-page .pr-apr-hito p { margin: 14px 0 0; }
	.pr-page .pr-apr-cerca .pr-apr-hito p { margin-top: 14px; }

	/* ---------- etapa (banda azul con foto) ---------- */
	.pr-apr-etapa { height: auto; }
	.pr-apr-etapa-foto {
		position: static;
		width: 100%;
		height: 280px;
	}
	.pr-apr-etapa .pr-esh-canvas {
		height: auto;
		padding-top: 28px;
		padding-bottom: 40px;
	}
	.pr-page .pr-apr-etapa h2 {
		position: static;
		width: auto;
		font-size: 26px;
		line-height: 1.2;
	}
	.pr-apr-etapa-copy {
		position: static;
		width: auto;
		margin-top: 16px;
	}

	/* ---------- el poder del omega-3 (rejilla) ---------- */
	.pr-apr-poder { height: auto; padding: 48px 0 56px; }
	.pr-apr-poder .pr-esh-canvas { height: auto; }
	.pr-page .pr-apr-poder h2 {
		position: static;
		font-size: 26px;
	}
	.pr-page .pr-apr-poder-lead {
		position: static;
		width: auto;
		margin-top: 14px;
	}
	.pr-apr-grid {
		position: static;
		width: auto;
		grid-template-columns: 1fr;
		gap: 12px;
		margin-top: 24px;
	}
	.pr-apr-cell { width: 100%; }
	.pr-apr-cell--amarilla { padding: 28px 24px 20px; }

	/* ---------- historias + opiniones ---------- */
	.pr-apr-historias { height: auto; padding: 48px 0 56px; }
	.pr-apr-stories { height: auto; }
	/* relative y no static: el pie de foto es absoluto y perdía el ancla. */
	.pr-apr-maria {
		position: relative;
		left: auto;
		top: auto;
		width: auto;
	}
	.pr-apr-maria img {
		width: 100%;
		height: auto;
		border-radius: 20px;
	}
	.pr-apr-maria figcaption {
		left: 20px;
		top: auto;
		bottom: 16px;
	}
	/* Un solo video y un selector debajo para ir cambiando (peticion 20/08):
	   la miniatura del doctor se esconde y las flechas pasan a botones bajo
	   la foto grande. */
	.pr-apr-doctor { display: none; }
	/* Las flechas del selector, a la DERECHA bajo el vídeo. */
	.pr-apr-stories { text-align: right; }
	.pr-apr-stories .pr-apr-maria,
	.pr-apr-stories figcaption { text-align: left; }
	.pr-page .pr-apr-historias-sub { text-align: left; }
	.pr-apr-historias-prev,
	.pr-apr-historias-next {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: static;
		width: 44px;
		height: 44px;
		margin: 14px 0 0 12px;
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
		color: #1e1e1e;
	}
	.pr-page .pr-apr-historias-h2 {
		position: static;
		width: auto;
		margin-top: 24px;
		font-size: 26px;
		line-height: 1.25;
		text-align: left;
	}
	.pr-page .pr-apr-historias-sub {
		position: static;
		width: auto;
		margin-top: 10px;
	}
	.pr-apr-doctor {
		position: relative;
		left: auto;
		top: auto;
		margin-top: 16px;
	}
	/* El clon fantasma de la animación de intercambio anclaba al lienzo y
	   pintaba un segundo pie encima del real. */
	.pr-apr-fantasma { display: none; }
	.pr-apr-doctor img { width: 100%; height: auto; }
	.pr-page .pr-apr-opinan-h2 {
		position: static;
		/* 44 -> 24: el bloque quedaba muy despegado de lo anterior en movil
		   (pedido el 26/08/2026: "sube un poco lo de Lo que opinan nuestros
		   clientes"). No se baja mas para que siga leyendose como una seccion
		   nueva y no pegada a la de arriba. */
		margin-top: 24px;
		font-size: 26px;
	}
	.pr-page button.pr-apr-filtros {
		position: static;
		margin-top: 14px;
	}
	.pr-page .pr-apr-opinan-sub {
		position: static;
		width: auto;
		margin-top: 10px;
		font-size: 17px;
		line-height: 1.35;
	}
	.pr-apr-nota {
		position: static;
		margin-top: 18px;
	}
	.pr-page .pr-apr-opinar {
		position: static;
		width: auto;
		margin-top: 14px;
	}
	.pr-page button.pr-apr-escribir {
		position: static;
		width: auto;
		margin-top: 14px;
	}
	.pr-apr-opinion-row {
		position: relative;
		left: auto;
		top: auto;
		width: auto;
		height: auto;
		margin-top: 28px;
	}
	.pr-apr-opinion {
		position: static;
		width: auto;
		height: auto;
		padding: 24px 40px;
	}
	.pr-page .pr-apr-opinion .pr-review-text { width: auto; }
	.pr-apr-opinion-prev,
	.pr-apr-opinion-next {
		width: 44px;
		height: 44px;
		z-index: 2;
	}
	.pr-apr-opinion-prev { left: 0; top: 50%; }
	.pr-apr-opinion-next { left: auto; right: 0; top: 50%; }

	/* ---------- FAQ ---------- */
	.pr-page--apr .pr-faq .pr-esh-canvas { padding-left: 20px; }
	.pr-page--apr .pr-faq-item { width: auto; }

	/* ---------- newsletter ---------- */
	.pr-apr-news { height: auto; padding: 44px 0; }
	.pr-apr-news .pr-esh-canvas {
		height: auto;
		padding: 24px 20px;
		width: auto;
		margin: 0 20px;
	}
	.pr-apr-news-glass {
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
	/* `.woocommerce img { height:auto }` (0,1,1) le ganaba al height:100%
	   del fondo (0,1,0) y dejaba un bloque negro bajo la foto. */
	.pr-page .pr-apr-news-bg {
		height: 100%;
		object-fit: cover;
	}
	/* relative + z1: el cristal es un hermano absoluto y pintaba encima
	   del contenido en flujo (mismo fallo que la newsletter de la home ES). */
	.pr-apr-news .pr-esh-canvas h2,
	.pr-apr-news .pr-esh-canvas p {
		position: relative;
		z-index: 1;
		left: auto;
		top: auto;
		width: auto;
	}
	.pr-apr-news .pr-esh-canvas p { margin-top: 10px; }
	.pr-apr-news-form {
		position: relative;
		z-index: 1;
		left: auto;
		top: auto;
		width: auto;
		margin-top: 16px;
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}
	.pr-apr-news-form input {
		flex: 1 1 100%;
		width: 100%;
	}
}

/* ====================================================================
   MÓVIL · Carrito y checkout — 20/08/2026.
   La fila de producto conserva el esquema absoluto del resumen del
   checkout (que ya cabe en 335px); columnas y formularios se apilan.
   ==================================================================== */
@media (max-width: 767px) {

	/* ---------- carrito ---------- */
	.pr-cart-canvas {
		padding: 60px 20px 48px;
		min-height: 0;
	}
	.pr-page .pr-cart-title { margin-top: 8px; }
	.pr-cart-form { flex-direction: column; }
	.pr-cart-left { width: 100%; }
	/* Las cabeceras de columna (Producto / Cantidad / Subtotal) son
	   geometría de tabla: en una columna no cuentan nada. */
	.pr-cart-cols { display: none; }
	/* La fila crece para acoger nombre, precio y stepper a la derecha
	   de la foto. */
	.pr-cart-row { height: 150px; }
	.pr-cart-info { left: 174px; top: 8px; }
	.pr-cart-sub { left: 174px; top: 58px; }
	/* El precio unitario dentro de la info duplicaba el subtotal de línea. */
	.pr-cart-info .pr-cart-price { display: none; }
	.pr-cart-stepper { left: 174px; top: 88px; }
	/* "Eliminar": icono pequeño y centrado, SEGUIDO del stepper (20/08). */
	.pr-page--cart a.pr-cart-remove,
	.pr-page--cart a.pr-cart-remove:visited {
		left: 268px;
		right: auto;
		top: 88px;
		width: 33px;
		height: 33px;
		padding: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0;
		font-size: 0;
	}
	.pr-page--cart a.pr-cart-remove {
		width: 28px;
		height: 28px;
		line-height: 0;
	}
	/* El dibujo del icono no esta centrado dentro de su viewBox (2px a la
	   izquierda, medido): se compensa para que quede centrado en el circulo. */
	.pr-page--cart a.pr-cart-remove svg { width: 11px; height: 11px; display: block; transform: translateX(2px); }
	/* Filas de oferta (carrito vacío): el botón Añadir bajo el nombre.
	   La columna entera arranca en 150 y no en 174 (donde empieza la de las
	   filas de verdad) por una razón medida: con 174 el botón se quedaba en
	   141px para un contenido de 134 —icono 16 + hueco 9 + texto 109—, o sea
	   4px de holgura a cada lado, con un `padding` de 14 que no cabía. De ahí
	   el «quedan muy justos» del 27/08/2026. Con 150 el botón mide 165 y la
	   holgura sube a 15. Se mueven los tres —nombre, precio unitario y
	   botón— para que sigan alineados entre sí.
	   Y el botón sube a 76 para que su base cuadre con la de la foto (114) y
	   quede aire por debajo: antes acababa a 10px del borde de la tarjeta. */
	.pr-page--cart .pr-cart-row--offer .pr-cart-info { left: 150px; }
	.pr-page--cart .pr-cart-add-form.pr-buy { left: 150px; top: 76px; right: 20px; }
	.pr-page--cart button.pr-cart-add {
		width: 100%;
		justify-content: center;
		height: 38px;
		padding: 0 14px;
		font-size: 14px;
		white-space: nowrap;
	}
	.pr-page--cart .pr-cart-row--offer { height: 132px; }

	/* Caja "¿Pedido para un equipo?": fila flexible para que el stepper y
	   el botón queden alineados de verdad (20/08). */
	.pr-cart-team {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
		height: auto;
		padding: 24px 20px;
	}
	.pr-cart-team h2,
	.pr-cart-team p { width: 100%; }
	.pr-page .pr-cart-team h2 {
		position: static;
		margin: 0;
	}
	.pr-page .pr-cart-team p {
		position: static;
		width: auto;
		margin: 10px 0 0;
	}
	/* inline-flex: con display:flex el stepper ocupa línea entera y el
	   botón del carrito caía debajo. */
	.pr-cart-team-stepper {
		position: static;
		display: inline-flex;
		margin: 16px 12px 0 0;
		vertical-align: middle;
		/* Cotas del nodo 152:8420 (movil): pastilla de 40 de alto con 16 de
		   respiro a los lados y 8 de hueco a cada lado del numero.
		   Lo que estaba mal: heredaba `width: 110px` y `padding: 0` de la version
		   de escritorio, asi que el menos y el mas quedaban PEGADOS al borde
		   redondeado -tocandolo- y el ancho no acompanaba al texto, que cambia
		   entre "1 caja" y "2 cajas" y entre idiomas.
		   El respiro se reparte: 8px en la pastilla y otros 8 los aportan los
		   botones, que se ensanchan a 24px para que se puedan pulsar con el dedo
		   sin mover el glifo de donde lo pone el nodo. */
		/* `flex: 0 0 auto` y NO `min-width: 0`: la pastilla es un flex item de
		   `.pr-cart-team`, asi que con `width: auto` y encogido libre se quedaba
		   en 16px de ancho y el contenido se salia por los dos lados. Que se
		   dimensione por su contenido y que NO la encojan. */
		flex: 0 0 auto;
		width: auto;
		height: 40px;
		padding: 0 8px;
		gap: 8px;
		border-radius: 999px;
		font-size: 16px;
	}
	/* Botones altos y anchos para el dedo (24x40 = objetivo comodo), con el
	   glifo centrado donde lo deja el nodo. */
	.pr-page .pr-cart-team-stepper button.pr-cart-step {
		flex: 0 0 auto;
		width: 24px;
		height: 40px;
		padding: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 17px;
		line-height: 1;
	}
	/* El numero y su unidad se leen como una sola frase -"1 caja"-, asi que van
	   al mismo tamaño; el nodo pone el numero a 16. El campo se ajusta al
	   contenido para que la pastilla no baile al pasar de 1 a 10. */
	/* Con `.pr-page` delante: `input.pr-cart-box-qty` a secas perdia el tamaño
	   de letra contra las reglas de campos del checkout y se quedaba en 14,
	   descuadrado respecto a la palabra que va justo al lado. */
	.pr-page .pr-cart-team-stepper input.pr-cart-box-qty {
		flex: 0 0 auto;
		width: 2ch;
		min-width: 2ch;
		height: auto;
		padding: 0;
		font-size: 16px;
		line-height: 1.2;
		text-align: center;
	}
	.pr-page .pr-cart-team-stepper .pr-cart-box-unit {
		flex: 0 0 auto;
		font-size: 16px;
		line-height: 1.2;
		white-space: nowrap;
	}
	.pr-cart-team-add,
	.pr-page--cart button.pr-cart-team-add {
		position: static;
		margin: 16px 0 0;
		vertical-align: middle;
	}
	/* La banda de suscripcion comparte caja con la de equipo, pero su boton
	   seguia en absoluto a 385px y sacaba la pagina a 562px de ancho. */
	.pr-page--cart button.pr-cart-subs-btn {
		position: static;
		width: 100%;
		margin: 18px 0 0;
	}

	/* Resumen del pedido */
	.pr-cart-card {
		width: 100%;
		margin-top: 32px;
		padding: 23px 24px 32px;
	}
	.pr-cart-line-val { left: auto; right: 0; }
	.pr-cart-total-val { left: auto; right: 14px; }
	.pr-cart-coupon input { flex: 1 1 auto; width: auto; min-width: 0; }

	/* ---------- checkout ---------- */
	.pr-chk-bar { height: 60px; }
	/* El lienzo interior colapsa a alto 0 y el translate del logo lo cortaba
	   por la mitad: la barra pasa a flex y el logo a flujo normal. */
	.pr-chk-bar .pr-esh-canvas {
		display: flex;
		align-items: center;
		width: 100%;
		height: 100%;
		padding: 0 16px;
	}
	/* CON `.pr-page` DELANTE, y no por gusto: la regla de escritorio
	   `.pr-page .pr-chk-bar .pr-logo` centra el logo con
	   `top:50%; transform:translateY(-50%)`, y pesa mas que un
	   `.pr-chk-bar .pr-logo` a secas. Sin igualar la especificidad el
	   `translate` sobrevivia aqui y subia el logo 12px sobre su sitio: medido
	   6px de hueco arriba contra 30 abajo en una barra de 60 (27/08/2026,
	   «en mobile, en el checkout el menu esta mal... tambien la pagina de
	   agradecimiento»). Las dos paginas comparten esta barra. */
	.pr-page .pr-chk-bar .pr-logo,
	.pr-page--us .pr-chk-bar .pr-logo {
		position: static;
		left: auto;
		top: auto;
		transform: none;
	}
	.pr-chk-bar .pr-logo--text { font-size: 20px; line-height: 1; }
	.pr-chk-canvas {
		padding: 60px 20px 48px;
		min-height: 0;
	}
	.pr-page .pr-chk-title { margin-top: 8px; }
	.pr-page .pr-chk-title { margin-top: 24px; }
	.pr-chk-form { flex-direction: column; }
	.pr-chk-left { width: 100%; }
	.pr-chk-notices { width: auto; }
	.pr-chk-fields { width: 100%; }
	.pr-chk-checks { width: 100%; }
	.pr-chk-reveal { width: 100%; }
	.pr-page .pr-chk-field { width: 100%; }
	.pr-page .pr-chk-field--half { width: calc(50% - 9px); }
	.pr-chk-card {
		width: 100%;
		margin-top: 32px;
		padding: 23px 20px 32px;
	}
	/* ---------- Línea de producto del resumen ----------
	   Estaba maquetada con todo en posición absoluta y cotas de ESCRITORIO: la
	   columna de texto arrancaba en `left: 174px` dentro de una caja que en un
	   móvil de 320 mide 229, o sea 55px de sitio. Con eso la nota de IVA partía
	   en tres líneas y se metía en el selector de cantidad (medido: solape de
	   55x24px), y la papelera acababa en x=299 de 229, fuera del viewport.
	   El parche anterior solo rescató el NOMBRE con `nowrap`, y precio e IVA
	   seguían partiendo.

	   Se pasa a rejilla: la foto ocupa toda la altura en su columna, el texto va
	   en filas propias y la papelera en su columna a la derecha. Así no hay
	   ninguna cota que dependa de lo que mida el texto, que es lo que rompía —y
	   el importe del IVA cambia de longitud con cada producto. */
	.pr-chk-item {
		display: grid;
		grid-template-columns: 96px minmax(0, 1fr);
		grid-template-areas:
			"foto nombre"
			"foto precio"
			"foto iva"
			"foto acciones";
		align-content: start;
		align-items: start;
		column-gap: 14px;
		row-gap: 2px;
		height: auto;
		margin: 24px 0 0;
	}
	/* Alto DEFINIDO, no `auto`: la foto es un contenedor flex y su imagen lleva
	   `max-height: 88%`, que contra un alto indefinido no resuelve y no limita
	   nada — la imagen crecía a su tamaño natural, inflaba las cuatro filas de
	   la rejilla que atraviesa y la línea acababa midiendo 180px en vez de 110
	   (medido: filas de 37,8 / 41,8 / 35,8 / 58,8). */
	.pr-chk-thumb {
		position: static;
		grid-area: foto;
		align-self: start;
		width: 96px;
		height: 110px;
	}
	.pr-chk-item-name,
	.pr-chk-item-price,
	.pr-chk-item-tax,
	.pr-chk-stepper,
	.pr-page--chk a.pr-chk-item-remove,
	.pr-page--chk a.pr-chk-item-remove:visited {
		position: static;
		left: auto;
		top: auto;
		right: auto;
		bottom: auto;
	}
	/* Antes se cortaba a UNA linea con puntos suspensivos, y "Suscripcion a
	   Active ProResolve" quedaba en "Suscripcion a Active..." — no se sabia de
	   que producto era. Dos lineas, como en escritorio. */
	.pr-chk-item-name {
		grid-area: nombre;
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: clip;
	}
	.pr-chk-item-price { grid-area: precio; margin-top: 4px; }
	.pr-chk-item-tax   { grid-area: iva; margin-top: 2px; }
	/* Selector de cantidad y papelera comparten fila, cada uno pegado a su
	   lado. Dos elementos en la MISMA celda no se pisan porque los coloca su
	   propio `justify-self`, y así la columna de texto se queda con los 130px
	   que antes se comía una tercera columna: con 83px la nota de IVA partía en
	   tres líneas (medido), con 130 cabe en una. */
	.pr-chk-stepper {
		grid-area: acciones;
		margin-top: 8px;
		justify-self: start;
	}
	.pr-page--chk a.pr-chk-item-remove,
	.pr-page--chk a.pr-chk-item-remove:visited {
		grid-area: acciones;
		margin-top: 8px;
		justify-self: end;
		align-self: center;
	}
	/* Los dos con la MISMA sangria: con 0 en las lineas y 14 en el total, las
	   cifras acababan en verticales distintas (316 contra 302, medido). Aqui va
	   14 y no 0 porque el total esta dentro de una banda con esquinas de 30px de
	   radio y a ras del borde se le monta encima la curva. */
	.pr-chk-line-val { left: auto; right: 14px; }
	.pr-chk-total-val { left: auto; right: 14px; }
	.pr-chk-coupon input { flex: 1 1 auto; width: auto; min-width: 0; }
	.pr-page .pr-chk-cardbox .pr-chk-fields .pr-chk-field--half { width: calc(50% - 7px); }
}

/* ====================================================================
   MÓVIL · Mi cuenta (page-my-account.php) — 20/08/2026.
   La barra lateral pasa a tarjeta superior; el contenido, debajo.
   ==================================================================== */
@media (max-width: 767px) {

	.pr-acc-canvas {
		width: 100%;
		min-height: 0;
	}

	/* ---------- acceso / registro ---------- */
	.pr-login-wrap { padding: 100px 20px 80px; }
	.pr-login-card {
		width: 100%;
		max-width: 380px;
		padding: 28px 24px;
	}

	/* ---------- barra lateral → tarjeta superior ---------- */
	.pr-acc-side {
		position: static;
		height: auto;
		border-radius: 0 0 24px 24px;
		padding: 66px 20px 18px;
	}
	.pr-acc-side-in {
		width: auto;
		height: auto;
		margin: 0;
	}
	.pr-page--account .pr-acc-hi {
		position: static;
		width: auto;
		margin: 0;
		font-size: 21px;
		line-height: 1.25;
	}
	.pr-acc-nav {
		position: static;
		width: auto;
		margin-top: 12px;
	}
	.pr-acc-nav a { font-size: 16px; line-height: 1.4; }
	.pr-acc-nav li { margin: 0 0 2px; }
	/* Mas aire entre "Centro de ayuda" y "Cerrar sesion". */
	.pr-acc-exit {
		position: static;
		margin-top: 26px;
	}
	.pr-acc-exit a,
	.pr-acc-exit .pr-acc-delete { font-size: 13px; line-height: 20px; }

	/* ---------- columna de contenido ---------- */
	.pr-acc-main {
		margin-left: 0;
		width: auto;
		min-height: 0;
		/* La seccion abierta, algo mas separada de la tarjeta gris. */
		padding: 10px 20px 60px;
	}
	.pr-page--account .pr-acc-title { margin-top: 22px; font-size: 19px; line-height: 1.3; }
	/* El botón "Volver a pedir" (absoluto) pisaba la línea de estado. */
	.pr-page--account .pr-order-card { height: 196px; }
	.pr-page--account .pr-order-num { left: 20px; top: 10px; }
	.pr-page--account .pr-order-total { left: auto; right: 20px; top: 10px; }
	.pr-page--account .pr-order-name { left: 20px; top: 44px; }
	.pr-page--account .pr-order-date { left: 20px; top: 74px; }
	.pr-page--account .pr-order-status { left: 20px; right: auto; top: 104px; text-align: left; }
	.pr-page--account .pr-order-btn {
		left: 20px;
		right: auto;
		top: auto;
		bottom: 14px;
		transform: none;
	}
	/* La píldora de afiliados conservaba un ancho fijo de 350px del footer
	   inglés y a 375 invadía el margen (mi-cuenta lleva pr-page--us). */
	html[lang^="es"] :is(.pr-page--us, .pr-page--home) .pr-esh-footer-cta1 {
		width: auto;
		max-width: 350px;
	}
	/* Aire entre el último campo y "Guardar cambios". */
	.pr-acc-form .pr-acc-btn { margin-top: 18px; }
	.pr-page--account .pr-acc-hint { font-size: 14px; }
	.pr-page--account .pr-order-card p { font-size: 14px; line-height: 30px; }
	.pr-page--account .pr-acc-card p { font-size: 14px; }
	/* Direcciones: las dos tarjetas en columna (a dos rompian el ancho). */
	.pr-addr-grid {
		grid-template-columns: 1fr;
		gap: 14px;
		margin-top: 22px;
	}
	.pr-addr-card { min-height: 0; }
	.pr-page--account .pr-addr-card h2 { font-size: 17px; }
	/* Datos personales: los campos, alineados por ABAJO, para que "Nueva
	   contrasena" y "Confirmar nueva contrasena" tengan la caja a la misma
	   altura (la segunda etiqueta ocupa dos lineas). El contenedor es
	   `.pr-form-grid` con hijos `p.pr-field`. */
	.pr-page--account .pr-form-grid { align-items: end; }
	/* El ultimo `.pr-field` de cada rejilla se quedaba sin margen inferior
	   (`.pr-acc-card p:last-child`, 0-3-1) y, al alinear por abajo (que va
	   por caja de MARGEN), su campo caia 12px mas bajo que el de al lado.
	   Hace falta 0-4-0 para ganarle. */
	.pr-page--account .pr-acc-card .pr-form-grid .pr-field { margin-bottom: 12px; }
	.pr-page--account :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) {
		max-width: none;
		margin: 24px 20px 0;
	}

	/* ---------- Gracias por tu pedido ---------- */
	.pr-ty {
		padding: 92px 20px 56px;
		width: auto;
		max-width: none;
	}
	.pr-ty-check { width: 64px; height: 64px; }
	.pr-ty-check svg { width: 30px; height: 30px; }
	.pr-page .pr-ty-title { font-size: 26px; line-height: 1.2; margin-top: 20px; }
	.pr-ty-intro,
	.pr-page .pr-ty-intro p { width: auto; max-width: none; font-size: 15px; line-height: 1.4; }
	.pr-ty-card {
		width: auto;
		max-width: none;
		margin: 28px 0 0;
		padding: 22px 20px;
	}
	.pr-ty-card-head { display: flex; flex-direction: column; gap: 4px; }
	.pr-page .pr-ty-card-head h2 { font-size: 19px; }
	.pr-ty-items,
	.pr-ty-lineas { width: auto; }
	.pr-ty-items li,
	.pr-ty-linea {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
	}
	.pr-ty-cta,
	.pr-page a.pr-ty-cta { width: 100%; justify-content: center; }
	/* La banda gris del final llevaba el lienzo fijo de 1440 y sus bloques a
	   585px: rompia el ancho por 1030px (medido). */
	/* La banda gris llega HASTA EL PIE (pedido el 26/08/2026: "el bloque gris
	   de proximos pasos se debe llegar hasta el final, encima del footer").
	   Dos cosas lo impedian: los 56px de `padding-bottom` de `.pr-ty`, que
	   dejaban una franja blanca entre la banda y el pie, y sus 20px laterales,
	   que impedian que la banda llegara a los bordes cuando el diseno la quiere
	   de lado a lado con las esquinas de arriba redondeadas. El margen negativo
	   cancela esos laterales sin tocar el relleno del resto del contenido. */
	.pr-ty-band {
		margin: 48px -20px 0;
		width: auto;
		border-radius: 30px 30px 0 0;
		padding: 28px 0 34px;
	}
	.pr-page--ty .pr-ty { padding-bottom: 0; }
	.pr-ty-band-in { width: auto; padding: 0 20px; }
	.pr-page .pr-ty-band-in > * { width: auto; }
	.pr-page .pr-ty-band-title { font-size: 15px; }
	.pr-page .pr-ty-band-in li,
	.pr-page .pr-ty-band-in p { font-size: 14px; line-height: 19px; }

	/* ---------- Próximamente y 404 ---------- */
	.pr-page .pr-soon-canvas,
	.pr-page .pr-nf-canvas { padding: 130px 20px 80px; }
	.pr-page .pr-nf-title { font-size: 26px; line-height: 1.2; }
	.pr-page .pr-soon-eyebrow { font-size: 13px; }
	.pr-page .pr-soon-botones {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 18px;
		margin-top: 30px;
	}
	.pr-page .pr-soon-botones a.pr-nf-cta { margin-top: 0; }

	/* ---------- Ver pedido ----------
	   Rejilla de dos columnas: a la izquierda titulo, precio, cantidad e
	   importe; a la derecha la foto, que abarca las cuatro filas. Con
	   `display: contents` en `.pr-vo-product` sus hijos (nombre, precio y
	   foto) pasan a ser celdas de la tarjeta sin tocar la plantilla. */
	.pr-vo-card {
		width: 100%;
		min-height: 0;
		padding: 24px 20px 28px;
		display: grid;
		grid-template-columns: minmax(0, 1fr) 50%;
		/* Las tres primeras filas, a su contenido: la foto abarca las cuatro
		   y, sin esto, repartia su alto entre todas y separaba los textos. */
		grid-template-rows: auto auto auto 1fr;
		column-gap: 14px;
		align-items: start;
	}
	.pr-vo-product { display: contents; }
	.pr-page--account .pr-vo-name,
	.pr-page--account .pr-vo-price,
	.pr-vo-qty,
	.pr-vo-amount { grid-column: 1; }
	/* Alto FIJO: con `height: 100%` el bloque contenedor es indefinido, se
	   resolvia a `auto` y la foto se salia de la tarjeta por abajo. Asi
	   manda la caja y los dos botes (Sports y Active) salen iguales. */
	.pr-page--account .pr-vo-img {
		grid-column: 2;
		grid-row: 1 / span 4;
		align-self: start;
		width: 100%;
		/* `!important` porque `.pr-page :is(img, video):not(...)` (0-13-1)
		   fuerza `height: auto` y la foto se salia de la tarjeta. */
		height: 240px !important;
		margin: 0;
		object-fit: contain;
	}
	.pr-vo-col {
		position: static;
		margin-top: 14px;
	}
	.pr-page--account .pr-vo-name { font-size: 17px; line-height: 1.25; }
	.pr-page--account .pr-vo-price { margin-top: 4px; }
	.pr-vo-progress,
	.pr-vo-ship,
	.pr-vo-bill,
	.pr-vo-ayuda {
		grid-column: 1 / -1;
	}
	.pr-vo-progress {
		position: static;
		width: auto;
		margin-top: 18px;
	}
	/* "Pedido confirmado" pegado a "Estado del envio". */
	.pr-vo-progress { margin-top: 22px; }
	.pr-vo-progress .pr-prog { margin-top: 2px; }
	.pr-prog-step--1 { top: 6px; }
	.pr-prog-step--2 { top: 57px; }
	.pr-prog-step--3 { top: 108px; }
	.pr-prog-step--4 { top: 155px; }
	/* Los pasos de la línea vertical van en absoluto: sin alto explícito
	   el bloque colapsa a 0 en flujo. */
	.pr-prog { height: 190px; }
	/* La linea punteada, del primer punto al ultimo (con las cotas de
	   escritorio sobraba por abajo). */
	.pr-prog-line { top: 28px; height: 145px; }

}

/* ====================================================================
   MÓVIL · Conócenos / About (pr-abt) — 20/08/2026
   ==================================================================== */
@media (max-width: 767px) {

	/* ---------- héroe (vídeo): pantalla completa, como el de la home ---------- */
	.pr-abt-hero {
		height: 100vh;
		height: 100svh;
	}
	/* height:100%: los cimientos ponen height:auto en el lienzo y el texto
	   se iba arriba, bajo el header (medido en el movil de Pablo). */
	.pr-abt-hero .pr-esh-canvas {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-start;
		height: 100%;
		padding-bottom: 58px;
	}
	.pr-abt-h1 {
		position: static;
		width: auto;
		font-size: 28px;
	}
	.pr-abt-hero-cta {
		position: static;
		margin-top: 18px;
	}

	/* ---------- hecho con ciencia (fotos + spreads) ---------- */
	.pr-abt-made { height: auto; padding: 48px 0 56px; }
	/* En columna, el titulo "Science that spreads" va ANTES de la foto de
	   moleculas (peticion 20/08): se reordena con flex. */
	.pr-abt-made .pr-esh-canvas {
		display: flex;
		flex-direction: column;
	}
	.pr-abt-made .pr-abt-h2 { order: 0; }
	.pr-abt-made .pr-abt-intro { order: 1; }
	.pr-abt-made .pr-abt-frase { order: 2; }
	.pr-abt-made .pr-abt-foto--1 { order: 3; }
	.pr-abt-made .pr-abt-h3 { order: 4; }
	.pr-abt-made .pr-abt-spreads { order: 5; }
	.pr-abt-made .pr-abt-foto--2 { order: 6; }
	/* El triangulo de Azur vuelve a ir detras de "hechos", como en laptop. */
	.pr-abt-tri {
		position: static;
		display: inline-block;
		/* Igual que en escritorio: apoyado en la base y con el hueco de 4px
		   del frame. En móvil el titular sigue a 24px, así que el hueco no
		   hay que escalarlo. */
		margin: 0 0 0 4px;
	}
	.pr-abt-made .pr-esh-canvas,
	.pr-abt-equipo .pr-esh-canvas,
	.pr-abt-ciencia .pr-esh-canvas { height: auto; }
	.pr-page--about .pr-abt-h2,
	.pr-abt-made .pr-abt-h2,
	.pr-abt-equipo .pr-abt-h2 {
		position: static;
		top: auto;
		font-size: 26px;
	}
	.pr-abt-intro {
		position: static;
		width: auto;
		margin-top: 16px;
	}
	/* En móvil va el copy REDUCIDO (la frase queda integrada en él). */
	.pr-abt-frase { display: none; }
	.pr-abt-made .pr-solo-desk { display: none; }
	.pr-abt-intro--mov { display: block; }
	.pr-abt-spreads--mov { display: block; }
	.pr-page--home-es .pr-abt-frase { top: auto; }
	.pr-abt-foto {
		position: static;
		width: 100%;
		margin-top: 24px;
	}
	/* Con .pr-page delante: el reset global de títulos (0-1-1) ganaba y el
	   margen quedaba en 0 (mismo caso que el titular de noticias). */
	.pr-page .pr-abt-h3 {
		position: static;
		margin-top: 56px;
	}
	.pr-abt-foto--2 { margin-top: 16px; }
	.pr-abt-spreads {
		position: static;
		width: auto;
		margin-top: 18px;
	}
	/* Aire homogeneo titulo→parrafo en toda la pagina. */
	.pr-page--about .pr-abt-h2,
	.pr-abt-made .pr-abt-h2,
	.pr-abt-equipo .pr-abt-h2 { margin-bottom: 4px; }
	.pr-abt-intro { margin-top: 16px; }
	.pr-abt-intro p + p,
	.pr-abt-spreads p + p { margin-top: 18px; }

	/* ---------- equipo ---------- */
	.pr-abt-equipo { height: auto; padding: 48px 0 56px; }
	.pr-page .pr-abt-equipo-lead {
		position: static;
		width: auto;
		margin-top: 22px;
	}
	/* Mas aire entre asesores: tarjeta + bio respiran (peticion 20/08). */
	.pr-abt-fila {
		position: static;
		margin-top: 44px;
	}
	/* La tarjeta guarda su proporción para que el pie superpuesto siga
	   cayendo sobre la foto. */
	.pr-abt-fila--izq .pr-abt-card,
	.pr-abt-fila--dcha .pr-abt-card {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 531 / 284;
	}
	.pr-abt-fila--1 .pr-abt-bio,
	.pr-abt-fila--2 .pr-abt-bio,
	.pr-abt-fila--3 .pr-abt-bio {
		position: static;
		width: auto;
		margin-top: 20px;
	}
	.pr-abt-bio p + p { margin-top: 16px; }

	/* ---------- banda de ciencia (glass) ---------- */
	.pr-abt-ciencia { height: auto; padding: 44px 0; }
	.pr-abt-glass {
		position: relative;
		left: auto;
		top: auto;
		width: auto;
		height: auto;
		margin: 0;
		padding: 26px 22px;
	}
	.pr-abt-glass h2,
	.pr-abt-glass p {
		position: static;
		width: auto;
	}
	.pr-abt-glass p { margin-top: 12px; }
	/* El boton iba encogido: alto fijo de 40 con el texto en dos lineas. */
	.pr-abt-btn-blanco {
		position: static;
		display: inline-flex;
		width: auto;
		height: auto;
		min-height: 40px;
		padding: 10px 18px;
		margin-top: 18px;
		line-height: 1.2;
		text-align: left;
	}
}

/* ====================================================================
   MÓVIL · Noticias / News (pr-nws) — 20/08/2026
   ==================================================================== */
@media (max-width: 767px) {

	/* Menos hueco bajo el menu: quedaba "Novedades..." muy abajo (24/08/2026). */
	.pr-nws-hero { height: auto; padding: 6px 0 40px; }
	.pr-nws-hero .pr-esh-canvas { height: auto; }
	.pr-nws-h1,
	.pr-page--home-es.pr-page--news .pr-nws-h1 {
		position: static;
		width: auto;
		font-size: 28px;
		font-weight: 600;
	}
	/* `.pr-page h1,h2,h3,p { margin: 0 }` (0-1-1) le ganaba a `.pr-nws-sub`
	   (0-1-0) y el margen no se aplicaba: el subtitulo quedaba PEGADO al
	   titular. Con `.pr-page` delante ya manda (22/08/2026). */
	.pr-nws-sub,
	.pr-page .pr-nws-sub {
		position: static;
		width: auto;
		margin-top: 18px;
		font-size: 14px;
	}
	/* relative, no static: la foto es absoluta con inset 0 y sin ancla se
	   estiraba sobre el hero entero tapando el titular (visto en el móvil). */
	.pr-nws-marco {
		position: relative;
		left: auto;
		top: auto;
		display: block;
		width: 100%;
		height: 52vw;
		margin-top: 26px;
	}
	/* Píldora a la DERECHA (mas pequena, al tamano del titular) y el titular
	   fluye a su izquierda. */
	.pr-nws-cat {
		position: static;
		display: inline-flex;
		float: right;
		height: 28px;
		padding: 0 12px;
		margin: 26px 0 0 12px;
		font-size: 13px;
	}
	.pr-nws-titulo {
		position: static;
		width: auto;
		margin-top: 12px;
	}
	/* Adelanto en 2 líneas justas, con aire respecto al titular. */
	.pr-nws-texto {
		position: static;
		width: auto;
		margin-top: 14px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.pr-nws-hero > .pr-esh-canvas > .pr-nws-leer,
	.pr-nws-hero .pr-nws-leer[data-nws-leer] {
		position: static;
		margin-top: 12px;
	}
	/* Los puntos, a la altura del "Leer más", a la derecha y algo menores. */
	.pr-nws-dots {
		position: static;
		margin: -26px 0 0;
		justify-content: flex-end;
	}
	.pr-nws-dot { width: 12px; height: 12px; border-radius: 6px; }
	.pr-nws-dot.is-on { width: 22px; }

	/* ---------- explora + rejilla ---------- */
	.pr-nws-banda .pr-esh-canvas { padding: 44px 20px 48px; }
	.pr-page--news .pr-nws-explore {
		position: static;
		width: auto;
		margin: 0 0 20px;
	}
	.pr-nws-grid {
		width: auto;
		margin: 32px 0 0;
		grid-template-columns: 1fr;
		row-gap: 32px;
	}
	.pr-nws-card { height: auto; padding-bottom: 6px; }
	.pr-nws-card img { width: 100%; }
	.pr-nws-card h3 {
		position: static;
		width: auto;
		margin: 14px 0 0;
	}
	.pr-nws-card p {
		position: static;
		width: auto;
		margin: 8px 0 0;
	}
	.pr-nws-card .pr-nws-leer {
		position: static;
		margin: 12px 0 0;
	}
}

/* ====================================================================
   MÓVIL · Contacto (formulario WPForms) — 20/08/2026
   ==================================================================== */
@media (max-width: 767px) {

	.pr-contact-canvas { padding: 96px 20px 60px; min-height: 0; }
	.pr-page--home-es .pr-contact-canvas { padding-top: 96px; }
	.pr-contact-grid { flex-direction: column; gap: 36px; }
	.pr-contact-card {
		width: 100%;
		padding: 30px 24px 34px;
	}
	.pr-contact-form { width: 100%; }
	.pr-contact-form--wpf { width: 100%; }
	.pr-page .pr-contact-form--wpf div.wpforms-container .wpforms-field.wpforms-one-half {
		width: calc(50% - 9px);
	}
}

/* ====================================================================
   MÓVIL · Artículo y comparativa SPM (piel pr-art) + 404 — 20/08/2026
   ==================================================================== */
@media (max-width: 767px) {

	/* El main del skin de noticias ya aparta 60px para el header fijo:
	   aqui solo un respiro. */
	/* Menos hueco bajo el menu, igual que en el listado de Noticias (24/08/2026). */
	.pr-page--art .pr-art-canvas {
		padding-top: 6px;
		padding-bottom: 64px;
	}
	.pr-page--art .pr-art-titulo {
		width: auto;
		margin: 0 0 24px;
		font-size: 23px;
	}
	/* Mas pequena y pegada al titular. */
	.pr-page--art .pr-art-titulo { margin-bottom: 8px; }
	/* AQUI NO SE SUPERPONE: la píldora va encima de la foto, entre ella y el
	   titular, pegada a la derecha (20/08). El contenedor de la foto se pone en
	   columna y la píldora vuelve al flujo, así que basta con `align-self`.
	   Ya no hace falta el `order: -1` que llevaba el titular: la píldora está
	   dentro del contenedor de la foto, que va DESPUÉS del titular en el HTML. */
	.pr-art-media {
		display: flex;
		flex-direction: column;
		width: 100%;
		margin-left: 0;
	}
	.pr-art-cat {
		position: static;
		display: inline-flex;
		align-self: flex-end;
		height: 28px;
		padding: 0 12px;
		margin: 0 0 14px;
		font-size: 13px;
	}
	.pr-art-img { width: 100%; }
	.pr-art-meta {
		width: auto;
		margin: 24px 0 0;
		flex-wrap: wrap;
		gap: 12px;
	}
	.pr-art-compartir { margin: 12px 6px 0 0; }
	.pr-art-cuerpo {
		width: auto;
		margin: 24px 0 0;
		line-height: 1.35;
	}
	.pr-art-pie {
		width: auto;
		margin: 48px 0 0;
		flex-wrap: wrap;
	}
	.pr-art-autor-bloque { max-width: none; flex: 1 1 100%; }
	/* El nombre llevaba 9px de sangría de escritorio y quedaba desalineado
	   con la descripción, que va a 0. */
	.pr-page--art .pr-art-firma-autor { margin-left: 0; }
	.pr-page--art .pr-art-bio {
		margin-left: 0;
		max-width: none;
		font-size: 18px;
	}
	/* La firma no cabe al lado del texto (337px de firma en 390 de hueco):
	   va debajo y alineada a la derecha, como en el frame. */
	.pr-art-firma { margin-left: auto; }
	.pr-art-firma {
		max-width: 100%;
		margin-right: 0;
		margin-top: 18px;
	}
	.pr-page--art .pr-art-refs-t,
	.pr-page--art .pr-art-ref {
		width: auto;
		margin-left: 0;
	}
	/* Las tablas del cuerpo (composición nutricional…) no caben: que
	   se deslicen dentro de su propia caja. */
	.pr-art-cuerpo table {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* ---------- 404 / próximamente ---------- */
	.pr-page .pr-nf-canvas {
		height: auto;
		padding: 150px 20px 90px;
	}
	.pr-page .pr-nf-text { width: auto; max-width: 432px; }

	/* El salto del [...] no debe aterrizar bajo el header fijo. */
	.pr-reviews,
	.pr-apr-opinan-h2 { scroll-margin-top: 72px; }

	/* AQUI NO VA NADA sobre la ®, y es a proposito (27/08/2026).
	   Habia una regla que le ponia `vertical-align: 0.34em` SIN quitar el
	   `top: -0.32em` de la regla base, asi que las dos subidas se SUMABAN y en
	   movil volaba un 63 % mas alto que en escritorio: medido 0,516em de
	   levante contra 0,316em. Justo el efecto «disparada» que la regla base
	   dice evitar. Con el override fuera, movil mide 0,335em, o sea lo mismo
	   que escritorio: una sola regla manda en todas las anchuras. */

	/* La inicial de las reseñas iba con `line-height: 40px` heredado dentro
	   de un circulo de 31-32px: la letra salia baja. */
	.pr-page .pr-avatar {
		line-height: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	/* Fondo ambar en Active (era el rosa de Sports). */
	.pr-page--apr .pr-avatar,
	.pr-page--apr .pr-apr-opinion .pr-avatar {
		background: #fdf0dd;
		color: #f99b25;
	}

	/* Aire para la flecha de la reseña destacada: pisaba el final del texto. */
	.pr-page--us .pr-review-card--teaser .pr-review-text,
	.pr-apr-teaser-card .pr-review-card--teaser .pr-review-text { padding-bottom: 26px; }
	.pr-page--us .pr-teaser-card-wrap > .pr-arrow,
	.pr-apr-teaser-card > .pr-arrow { right: 16px; bottom: 14px; }

	/* Flechas de las reseñas de texto: rojas y centradas en la TARJETA. */
	.pr-page--us .pr-review-row > .pr-arrow--prev,
	.pr-page--us .pr-review-row > .pr-arrow:not(.pr-arrow--prev) {
		top: 50%;
		transform: translateY(-50%);
		color: var(--pr-red, #b71f2f);
	}

	/* ---------- modal de reseñas ---------- */
	/* El `max-width:100%` general le ganaba al tope de 64px de la foto
	   del producto y el bote llenaba la cabecera. */
	.pr-page .pr-rev-product img {
		width: 64px;
		max-width: 64px;
		height: auto;
	}
}

/* ====================================================================
   MÓVIL · Remates del feedback en dispositivo (20/08/2026, 2.ª ronda)
   ==================================================================== */
@media (max-width: 767px) {

	/* ---------- menú: paridad con la home en TODAS las páginas ---------- */
	/* La home ES separa sus ítems de escritorio con `margin-left: 56px`
	   (`.pr-page--home-es .pr-nav a + a`) y en el panel en columna eso
	   sangraba todos los enlaces menos el primero (visto en el móvil). */
	.pr-page .pr-header .pr-nav a { margin: 0; }
	/* La hamburguesa heredaba la caja de botón de GeneratePress al tocar. */
	.pr-page .pr-burger,
	.pr-page .pr-burger:hover,
	.pr-page .pr-burger:focus,
	.pr-page .pr-burger:active {
		background: none;
		border: 0;
		box-shadow: none;
		outline: none;
	}
	.pr-page .pr-burger:focus-visible { outline: 2px solid #1e1e1e; outline-offset: 2px; }

	/* ---------- reseñas de texto: flechas tocables y cambio sin fantasma ---------- */
	.pr-page--us .pr-review-row > .pr-arrow--prev {
		left: 0;
		width: 40px;
		height: 48px;
		z-index: 2;
	}
	.pr-page--us .pr-review-row > .pr-arrow:not(.pr-arrow--prev) {
		right: 0;
		width: 40px;
		height: 48px;
		z-index: 2;
	}
	/* El cruce de capas del cambio de reseña se ve raro en móvil: fuera. */
	.pr-page .pr-review-ghost { display: none; }
	.pr-page .pr-review-card,
	.pr-page .pr-apr-opinion { transition: none; }

	/* ---------- ficha EU/ES: banda coral del patrocinio SDN ---------- */
	/* Sin margen arriba, el color coral arrancaba justo donde acaba la foto
	   de arriba: quedaba pegado (24/08/2026). */
	.pr-page--eu-f .pr-sponsor--coral { margin-top: 24px; padding: 44px 0 96px; }
	.pr-page--eu-f .pr-sponsor--coral .pr-sponsor-head { margin-left: 0; }
	.pr-page--eu-f .pr-sponsor--coral .pr-sponsor-cols { margin: 20px 0 0; }
	.pr-page--eu-f .pr-sponsor--coral .pr-sponsor-head img {
		position: static;
		flex: 0 0 auto;
		width: 84px;
		margin: 4px 0 0;
	}
	/* El lienzo gris vuelve a MONTAR sobre el final del coral (mi margen
	   positivo dejaba una franja blanca entre ambos, vista en el móvil). */
	.pr-page--eu-f .pr-canvas { margin-top: -45px; }

	/* ---------- ficha EU/ES: pestañas de ingredientes/certificados ---------- */
	.pr-ingr-row { flex-direction: column; gap: 16px; }
	.pr-ingr-row > div { max-width: none; }
	.pr-ingr-logo { width: 150px; margin-top: 4px; }
	/* La ronda de escritorio fija la fila a 1020px y su texto a 741: fuera. */
	.pr-page--us .pr-cert-row {
		width: auto;
		gap: 14px;
	}
	.pr-page--us .pr-cert-row > div { width: auto; }
	.pr-page--us .pr-cert-row + .pr-cert-row { margin-top: 28px; }
	.pr-page--us .pr-cert-row img.pr-cert-logo { margin-left: 0; }
	.pr-page--us .pr-ship-cols {
		grid-template-columns: 1fr;
		width: auto;
		gap: 20px;
	}
	/* Mismo tratamiento que en Sports: texto y logo apilados, logo CENTRADO
	   y del mismo tamano en las dos fichas (peticion 21/08/2026). */
	.pr-page--us .pr-cert-row,
	.pr-page--apr .pr-cert-row {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}
	.pr-page--us .pr-cert-row > div,
	.pr-page--apr .pr-cert-row > div { width: auto; }
	.pr-page--us .pr-cert-row img,
	.pr-page--apr .pr-cert-row img {
		width: auto;
		max-width: 150px;
		height: auto;
		margin: 0 auto;
	}
	.pr-page--us .pr-cert-row h3,
	.pr-page--apr .pr-cert-row h3 {
		font-size: 16px;
		font-weight: 600;
		line-height: 1.25;
		margin: 0 0 6px;
	}
	.pr-page--us .pr-cert-row p,
	.pr-page--apr .pr-cert-row p {
		font-size: 16px;
		font-weight: 300;
		line-height: 20px;
		letter-spacing: 0.5px;
	}
	.pr-page--us .pr-cert-row + .pr-cert-row,
	.pr-page--apr .pr-cert-row + .pr-cert-row { margin-top: 28px; }
}

/* ====================================================================
   MÓVIL · Remates 3.ª ronda de feedback en dispositivo (20/08/2026)
   ==================================================================== */
@media (max-width: 767px) {

	/* ---------- header: el lienzo interior media 71px dentro de la barra
	   de 60 (logo + hamburguesa apilados en bloque) y el logo asomaba
	   cortado por arriba EN TODAS LAS PÁGINAS con header compartido. ---------- */
	.pr-page .pr-header > .pr-esh-canvas {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 100%;
		padding: 0;
	}

	/* ---------- Noticias ---------- */
	/* El hero arranca justo bajo el menú. */
	.pr-page--news .pr-main { padding-top: 60px; }
	/* El fundido de escritorio (0,7s) dejaba el texto invisible ~1,4s por
	   giro, y quitarlo del todo lo convertía en un parpadeo. Aquí, un cruce
	   corto: sale rápido con un pequeño desplazamiento y entra suave,
	   dentro de los 520ms que el JS mantiene la clase `is-fading`. */
	.pr-nws-cat,
	.pr-nws-titulo,
	.pr-nws-texto {
		transition:
			opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
			transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
	}
	.pr-nws-hero.is-fading .pr-nws-cat,
	.pr-nws-hero.is-fading .pr-nws-titulo,
	.pr-nws-hero.is-fading .pr-nws-texto {
		opacity: 0;
		transform: translateY(-8px);
	}
	.pr-nws-img { transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }

	/* Titular y adelanto al MISMO tamano, y "Leer mas" igual (todo algo mas
	   pequeno; peticion 21/08/2026). */
	.pr-page .pr-nws-titulo { margin-top: 22px; font-size: 17px; line-height: 1.3; }
	.pr-nws-texto,
	.pr-page .pr-nws-texto { font-size: 17px; line-height: 1.35; }
	.pr-nws-leer,
	.pr-page .pr-nws-leer { font-size: 15px; }
	.pr-page--news .pr-nws-explore { font-size: 19px; line-height: 1.3; }
	.pr-nws-card h3 { font-size: 17px; }
	.pr-nws-card p { font-size: 15px; }
	/* Filtros a la izquierda: el margen de 134px es cota de escritorio y
	   empujaba la fila entera al centro-derecha (medida: empezaba en 154). */
	.pr-nws-filtros {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		text-align: left;
		gap: 10px;
		margin: 0 0 32px;
	}
	/* El panel se salía 4px por la derecha (right:-24px de escritorio). */
	.pr-nws-panel {
		left: 0;
		right: auto;
		width: min(280px, calc(100vw - 40px));
	}
	/* Tarjetas de artículo como tarjetas de verdad. */
	.pr-nws-grid { row-gap: 24px; }
	.pr-nws-card {
		background: #fff;
		border-radius: 20px;
		overflow: hidden;
		padding: 0 0 20px;
	}
	.pr-nws-card img {
		width: 100%;
		border-radius: 0;
		/* Todas las fotos al MISMO recorte, como en escritorio. La regla
		   general de movil pone `height: auto` en cualquier imagen y le gana a
		   la de la tarjeta por especificidad (su cadena de `:not()` suma 13),
		   asi que una foto vertical se iba a su proporcion natural: la de
		   «Blocking or Resolving Inflammation» (819x1024) media 419px de alto
		   frente a los 214 de las demas (medido 31/08/2026).
		   No se pelea la especificidad: se fija la PROPORCION, que esa regla no
		   toca, y con `height: auto` el alto sale del ancho. Es el mismo
		   388x214 del diseno, recortando por el centro. */
		aspect-ratio: 388 / 214;
		height: auto;
		object-fit: cover;
	}
	.pr-nws-card h3 {
		margin: 16px 16px 0;
		font-size: 18px;
		line-height: 1.25;
	}
	.pr-nws-card p {
		margin: 8px 16px 0;
		font-size: 15px;
		line-height: 1.4;
	}
	.pr-nws-card .pr-nws-leer { margin: 14px 16px 0; }

	/* ---------- artículo: el lienzo es flex para que la píldora quede
	   entre el título y la imagen sin ocupar todo el ancho ---------- */
	.pr-page--art .pr-art-canvas {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}
	.pr-page--art .pr-art-canvas > * { width: auto; }
	/* El hueco lo lleva el CONTENEDOR: la imagen ya no es hija directa del
	   lienzo y su `margin-top` habría metido 14px DENTRO del contenedor, entre
	   la píldora y la foto, sumándose a los 14 de la píldora. */
	.pr-art-media { margin-top: 0; }
}

/* ==========================================================================
   TEXTOS LEGALES (20/08/2026) — piel de page-legal.php
   Parte de `pr-page--art` (la piel editorial de los artículos) y solo cambia
   lo que un documento legal necesita y un artículo no:

   1. El interlineado. El cuerpo editorial va a 1.2 porque sigue una cota de
      Figma; en 15 pantallas de texto corrido eso no se lee. Aquí sube a 1.55
      SOLO dentro de .pr-legal-cuerpo, sin tocar el artículo.
   2. Ladillos numerados por contador CSS: en un legal se citan por número
      ("según la cláusula 7") y numerar a mano se descuadra en cuanto Irene
      inserte o quite una sección.
   3. Los avisos de borrador. Son deliberadamente FEOS y ajenos a la marca:
      no deben poder confundirse con contenido aprobado ni sobrevivir a una
      revisión por despiste. Ámbar = falta un dato; rojo = falta una decisión
      legal.
   ========================================================================== */

.pr-page--legal .pr-legal-cuerpo {
	line-height: 1.55;
	counter-reset: pr-legal-h2;
}
.pr-page--legal .pr-legal-cuerpo p { margin: 0 0 14px; }

/* Ladillos: número automático y aire suficiente para separar secciones. */
.pr-page--legal .pr-legal-cuerpo h2 {
	counter-increment: pr-legal-h2;
	counter-reset: pr-legal-h3;
	margin: 34px 0 12px;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 600;
}
.pr-page--legal .pr-legal-cuerpo h2::before {
	content: counter(pr-legal-h2) ". ";
}
.pr-page--legal .pr-legal-cuerpo > h2:first-child { margin-top: 0; }
.pr-page--legal .pr-legal-cuerpo h3 {
	counter-increment: pr-legal-h3;
	margin: 20px 0 10px;
	font-size: 16px;
	line-height: 1.35;
	font-weight: 600;
}
.pr-page--legal .pr-legal-cuerpo h3::before {
	content: counter(pr-legal-h2) "." counter(pr-legal-h3) " ";
}

/* Listas: el cuerpo editorial no las estilaba porque los artículos no las
   usan; un legal es casi todo enumeración. */
.pr-page--legal .pr-legal-cuerpo ul,
.pr-page--legal .pr-legal-cuerpo ol {
	margin: 0 0 14px;
	padding-left: 22px;
}
.pr-page--legal .pr-legal-cuerpo li { margin: 0 0 7px; }
.pr-page--legal .pr-legal-cuerpo li:last-child { margin-bottom: 0; }
.pr-page--legal .pr-legal-cuerpo ul { list-style: disc; }
.pr-page--legal .pr-legal-cuerpo ul ul { list-style: circle; margin: 7px 0 0; }
.pr-page--legal .pr-legal-cuerpo ol { list-style: decimal; }
.pr-page--legal .pr-legal-cuerpo dl { margin: 0 0 14px; }
.pr-page--legal .pr-legal-cuerpo dt { font-weight: 600; margin-top: 10px; }
.pr-page--legal .pr-legal-cuerpo dd { margin: 3px 0 0; }

/* Tablas (categorías de cookies, finalidades y bases jurídicas, plazos): el
   artículo las envuelve en .pr-art-tabla; aquí van sueltas desde el editor,
   así que el estilo cuelga del propio <table>. */
.pr-page--legal .pr-legal-cuerpo table {
	width: 100%;
	margin: 0 0 18px;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.45;
}
.pr-page--legal .pr-legal-cuerpo th,
.pr-page--legal .pr-legal-cuerpo td {
	padding: 9px 12px;
	border: 1px solid #e2e2e2;
	text-align: left;
	vertical-align: top;
}
.pr-page--legal .pr-legal-cuerpo th {
	font-weight: 600;
	background: #f4f4f4;
}
.pr-page--legal .pr-legal-cuerpo tbody tr:nth-child(even) td { background: #fafafa; }
.pr-page--legal .pr-legal-cuerpo caption {
	caption-side: bottom;
	padding: 7px 0 0;
	font-size: 13px;
	font-style: italic;
	color: #555;
	text-align: left;
}

/* --------------------------------------------------------------------------
   Cartel de borrador (lo pinta la plantilla mientras _pr_legal_borrador = 1)
   -------------------------------------------------------------------------- */
.pr-page--legal .pr-legal-aviso {
	width: 998px;
	margin: 28px 0 0 144px;
	padding: 16px 20px;
	border: 1px solid #e0c26a;
	border-left: 5px solid #a97b00;
	border-radius: 3px;
	background: #fff8e4;
	font-family: var(--pr-font-body);
	font-weight: 300;
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: 0.3px;
	color: #1e1e1e;
}
.pr-page--legal .pr-legal-aviso p { margin: 0 0 8px; }
.pr-page--legal .pr-legal-aviso p:last-child { margin-bottom: 0; }
.pr-page--legal .pr-legal-aviso-t {
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: #7a5900;
}
.pr-page--legal .pr-legal-aviso strong { font-weight: 600; }

/* Píldora que acompaña a CADA ladillo: ninguna sección está aprobada, y eso
   tiene que verse sección por sección, no solo en el cartel de arriba. */
.pr-page--legal .pr-legal-cuerpo .pr-legal-rev {
	display: inline-block;
	margin-left: 9px;
	padding: 2px 8px 1px;
	border: 1px solid #e0c26a;
	border-radius: 20px;
	background: #fff8e4;
	font-size: 10px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	white-space: nowrap;
	color: #7a5900;
	vertical-align: 2px;
}

/* Las urls largas se parten (31/08/2026). Los documentos legales imprimen
   algunas direcciones ENTERAS como texto visible, y la de soporte de Microsoft
   mide 403px sin un solo espacio donde cortar: en un movil de 375 empujaba la
   pagina a 423px de ancho. Se deja romper por donde haga falta, que en una url
   no molesta a la lectura. */
.pr-page--legal .pr-legal-cuerpo a {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Cada tabla legal, en su propio contenedor con desplazamiento (31/08/2026).
   La tabla de cookies de terceros tiene SEIS columnas y necesita 646px: en un
   movil de 375 empujaba el documento entero a 423px de ancho, o sea que la
   pagina se desplazaba en horizontal. Con esto se desplaza la tabla y la
   pagina se queda quieta. En escritorio no cambia nada: la tabla cabe. */
.pr-page--legal .pr-legal-cuerpo .pr-legal-tabla {
	margin: 0 0 14px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.pr-page--legal .pr-legal-cuerpo .pr-legal-tabla table { margin-bottom: 0; }
@media (max-width: 767px) {
	/* Un ancho minimo para que las columnas no se estrujen hasta partir cada
	   palabra en dos lineas; se lee desplazando, que es lo normal en una tabla
	   de datos en el movil. */
	.pr-page--legal .pr-legal-cuerpo .pr-legal-tabla table { min-width: 560px; }
	.pr-page--legal .pr-legal-cuerpo .pr-legal-tabla th,
	.pr-page--legal .pr-legal-cuerpo .pr-legal-tabla td { font-size: 14px; }
}

/* Nota de traducción de cortesia (31/08/2026). Los documentos legales estan
   redactados y aprobados en castellano; las paginas en ingles de /eu/ y /es/
   llevan una traduccion para que se puedan leer, con la advertencia de que la
   version vinculante es la española. Va discreta pero visible: es una
   advertencia, no un titular. */
.pr-page--legal .pr-legal-cuerpo .pr-legal-nota {
	margin: 0 0 22px;
	padding: 12px 16px;
	border-left: 3px solid #d9d9d9;
	background: #f6f6f6;
	font-size: 15px;
	font-style: italic;
	line-height: 1.45;
	color: #555;
}

/* El boton que reabre el panel de cookies, cuando va DENTRO del texto legal:
   el del pie hereda el color de su barra, pero aqui tiene que leerse como un
   enlace del cuerpo. */
.pr-page--legal .pr-legal-cuerpo .pr-cookies-enlace {
	font-size: inherit;
	font-weight: 500;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Dato que falta: dirección fiscal, NIF, registro mercantil, plazos… */
.pr-page--legal .pr-legal-cuerpo .pr-legal-ph,
.pr-page--legal .pr-legal-aviso .pr-legal-ph {
	padding: 1px 6px;
	border: 1px dashed #a97b00;
	border-radius: 2px;
	background: #ffe9a8;
	font-weight: 500;
	letter-spacing: 0.4px;
	color: #4a3600;
	white-space: normal;
}

/* Decisión legal que NO se escribe hasta que la tome la asesoría: aquí no
   falta un dato, falta un criterio. Por eso va en rojo y no en ámbar. */
.pr-page--legal .pr-legal-cuerpo .pr-legal-revisar {
	display: block;
	margin: 12px 0;
	padding: 11px 14px;
	border: 1px dashed var(--pr-red);
	border-radius: 3px;
	background: #fdeeef;
	font-size: 14px;
	line-height: 1.5;
	color: #6d1119;
}
/* El rótulo ("REVISIÓN LEGAL" / "LEGAL REVIEW") va en el contenido y no en
   un ::before: el documento ya es bilingüe por página, y meter el idioma en
   un selector de CSS obliga a mantenerlo en dos sitios. */
.pr-page--legal .pr-legal-cuerpo .pr-legal-revisar strong {
	font-weight: 600;
	letter-spacing: 0.8px;
}

/* Remisión a otro documento legal del mismo sitio. */
.pr-page--legal .pr-legal-cuerpo .pr-legal-ref { font-style: italic; }

.pr-page--legal .pr-legal-fecha {
	margin: 34px 0 0;
	padding-top: 14px;
	border-top: 1px solid #e2e2e2;
	font-size: 14px;
	color: #555;
}

/* El pie del legal no necesita el aire enorme del artículo. */
.pr-page--legal .pr-art-canvas { padding-bottom: 70px; }

@media (max-width: 767px) {
	.pr-page--legal .pr-legal-aviso {
		width: auto;
		margin-left: 0;
		margin-right: 0;
	}
	.pr-page--legal .pr-legal-cuerpo table {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.pr-page--legal .pr-legal-cuerpo .pr-legal-rev {
		display: inline-block;
		margin: 4px 0 0;
		vertical-align: baseline;
	}
}

/* Impresión: la asesoría va a leer esto en papel o en PDF. Fuera cabecera,
   pie y fondos; los avisos de revisión se quedan (son el motivo del envío). */
@media print {
	.pr-page--legal .pr-header,
	.pr-page--legal .pr-esh-footer { display: none !important; }
	.pr-page--legal .pr-art-canvas { padding-bottom: 0; }
	.pr-page--legal .pr-legal-cuerpo,
	.pr-page--legal .pr-legal-aviso,
	.pr-page--legal .pr-art-titulo {
		width: auto;
		margin-left: 0;
	}
	.pr-page--legal .pr-legal-cuerpo h2 { break-after: avoid; }
	.pr-page--legal .pr-legal-cuerpo table { break-inside: avoid; }
}

/* ==========================================================================
   PIE: columna legal de seis ítems (20/08/2026)
   Al enlazar los textos legales reales, ES y EU pasan de 5 a 6 enlaces en esa
   columna (aviso, privacidad, cookies, condiciones de venta, devoluciones y
   contacto). US se queda en 5 y no lleva esta clase.

   La columna está clavada en 1051,134 sobre el lienzo de 1440×397 y justo
   debajo, a 320 y 335px, están los logos de Azur y Lipinova. Con el paso de
   31px (20 de línea + 11 de margen) seis ítems llegan a 320px y se meten
   encima de los logos. Con 27px el bloque termina en 289px, exactamente donde
   terminaba la lista de cinco: la huella de la columna no se mueve y no hay
   nada que recalibrar.

   Va en min-width para no pisar el `margin: 0 0 10px` del pie en móvil, que
   está en un @media anterior de este mismo fichero.
   ========================================================================== */
@media (min-width: 768px) {
	:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-legal--compacta li {
		margin-bottom: 7px;
	}
}

/* ====================================================================
   MÓVIL · Cronología de la ciencia en vertical (frame Figma 367:3854)
   Línea central, cinco bloques que alternan lado y un marcador
   triangular apuntando a cada uno. Sustituye a la barra horizontal.
   ==================================================================== */
@media (max-width: 767px) {

	/* Fuera la versión de escritorio (los textos sueltos de ES y la
	   cronología por filas de US/EU). */
	.pr-page--home-es .pr-esh-tl,
	.pr-page--home-es .pr-esh-line,
	.pr-home-timeline { display: none; }

	.pr-scim {
		position: relative;
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 22px;
		/* Los bloques van casi seguidos, como en el frame. */
		row-gap: 4px;
		margin: 22px 0 0;
		/* Sin relleno abajo: la linea tiene que acabar EXACTAMENTE en la
		   ultima flecha, como en el frame. */
		padding: 0;
		list-style: none;
	}
	/* La línea central recorre todo el bloque. */
	.pr-scim-linea {
		position: absolute;
		left: 50%;
		/* De punta a punta. En el frame la linea va de y=0 a 446 y los
		   triangulos de 0 a 8 y de 440 a 446: arrancan y acaban CON ella, no
		   en su mitad. Recortandola 4px por lado la mitad de arriba de la
		   primera flecha y la de abajo de la ultima se quedaban sin linea
		   detras, y ese hueco es el escalon que se veia (22/08/2026). */
		top: 0;
		bottom: 0;
		width: 2px;
		margin-left: -1px;
		background: #1e1e1e;
	}
	.pr-scim-item {
		position: relative;
		margin: 0;
		padding: 0;
	}
	/* Cada bloque en SU PROPIA fila: asi quedan escalonados como en el
	   frame (con dos por fila se pegaban a la misma altura). */
	.pr-scim-item--izq { grid-column: 1; }
	.pr-scim-item--der { grid-column: 2; }
	.pr-scim-item:nth-of-type(1) { grid-row: 1; }
	.pr-scim-item:nth-of-type(2) { grid-row: 2; }
	.pr-scim-item:nth-of-type(3) { grid-row: 3; }
	.pr-scim-item:nth-of-type(4) { grid-row: 4; }
	.pr-scim-item:nth-of-type(5) { grid-row: 5; }

	/* Marcador triangular sobre la línea, apuntando a su bloque (el mismo
	   isotipo que la barra de escritorio, girado 90°). */
	/* Flechas medidas sobre el componente 373:3860 y el frame 367:3854: el
	   SVG es un triangulo isosceles de 8,92 de base por 5,27 de altura, o
	   sea 5,3px de salida por 8,9 de alto una vez girado 90 grados.

	   Lo que estaba MAL (22/08/2026): la flecha de un bloque de la izquierda
	   se dibujaba a la DERECHA de la linea, y la de un bloque de la derecha
	   a la izquierda. Medido en el frame, la linea esta en x=189..190 y la
	   flecha de un bloque izquierdo ocupa x=181..188 (a su izquierda); en el
	   tema la linea caia en 174..176 y la flecha en 175..181. Van del reves:
	   la BASE se apoya en la linea y la PUNTA sale hacia su propio bloque. */
	.pr-scim-marca {
		position: absolute;
		top: 3px;
		width: 0;
		height: 0;
		border-top: 4.5px solid transparent;
		border-bottom: 4.5px solid transparent;
	}
	/* -12px = la mitad del hueco entre columnas (22) mas el medio grosor de
	   la linea (1): la base del triangulo llega al borde OPUESTO de la linea
	   y la tapa entera. Con -10px solo la tocaba y en los extremos se veia el
	   remate cuadrado de la linea asomando junto a la punta, como un escalon
	   (asi esta en el frame: la linea va de x=6 a 8 y el triangulo de la
	   izquierda de 2 a 7,5, o sea montado encima). */
	/* -10px = medio hueco entre columnas (22) menos medio grosor de la linea
	   (1): la base del triangulo queda PEGADA a su borde, como en el frame
	   (linea en x=7..8, base en x=7), sin montarse encima. */
	.pr-scim-item--izq .pr-scim-marca {
		right: -10px;
		border-right: 5.3px solid #1e1e1e;
	}
	.pr-scim-item--der .pr-scim-marca {
		left: -10px;
		border-left: 5.3px solid #1e1e1e;
	}
	/* Las flechas de los EXTREMOS van a ras: la primera arriba del todo y la
	   ultima al final, como en el componente 373:3860 (la primera esta en
	   y=0..8 de una linea de 0..447 y la ultima en 439..447). Las de en medio
	   siguen a 3px, alineadas con la primera linea de su titular.
	   `-of-type` y no `-child`: el primer hijo del <ol> es el <span> de la
	   linea, asi que `:first-child` no casaria con ningun <li>. */
	.pr-scim-item:first-of-type .pr-scim-marca {
		top: 0;
	}
	.pr-scim-item:last-of-type .pr-scim-marca {
		top: auto;
		bottom: 0;
	}

	.pr-page .pr-scim-t {
		margin: 0 0 6px;
		font-family: var(--pr-font-body);
		font-size: 15px;
		font-weight: 600;
		line-height: 1.25;
		letter-spacing: -0.1px;
		color: #000;
	}
	.pr-page .pr-scim-p {
		margin: 0;
		font-size: 14px;
		font-weight: 300;
		line-height: 1.35;
		letter-spacing: 0;
		color: #000;
	}

	/* El titular de la sección, con aire respecto a la cronología. */
	.pr-page--home-es .pr-esh-science h2,
	.pr-page--home .pr-home-science h2 { margin-bottom: 6px; }
}

/* ====================================================================
   MÓVIL · Comparativa SPM — la misma maqueta, apilada (22/08/2026)
   ==================================================================== */
@media (max-width: 767px) {

	.pr-page--spm .pr-esh-canvas { width: 100%; padding: 0 20px; }

	.pr-page--spm .pr-spm-hero {
		min-height: 0;
		padding: 108px 0 40px;
	}
	.pr-page--spm .pr-spm-h1 {
		width: auto;
		margin-bottom: 18px;
		font-size: 28px;
	}
	.pr-spm-tri { margin: 0 0 0 8px; width: 15px; height: 9px; }
	.pr-page--spm .pr-spm-entrada { width: auto; }
	.pr-page--spm .pr-spm-entrada p { font-size: 15px; line-height: 21px; }

	.pr-page--spm .pr-spm-bloques { padding-top: 44px; }
	/* Una sola columna: foto arriba y texto debajo, en las cuatro. */
	.pr-page--spm .pr-spm-bloque {
		display: flex;
		flex-direction: column;
		min-height: 0;
		margin-bottom: 48px;
	}
	.pr-page--spm .pr-spm-foto { order: -1; }
	.pr-page--spm .pr-spm-foto {
		display: block;
		width: 100%;
		height: 52vw;
		margin-bottom: 22px;
		border-radius: 20px;
	}
	.pr-page--spm .pr-spm-h2 {
		width: auto;
		margin-bottom: 16px;
		font-size: 22px;
		line-height: 1.2;
	}
	.pr-page--spm .pr-spm-cuerpo,
	.pr-page--spm .pr-spm-nota { width: auto; }
	.pr-page--spm .pr-spm-cuerpo p { font-size: 15px; line-height: 21px; }

	.pr-page--spm .pr-spm-factores {
		margin-top: 24px;
		padding: 44px 0 40px;
		border-radius: 30px 30px 0 0;
	}
	.pr-page--spm .pr-spm-enunciado {
		width: auto;
		margin-bottom: 14px;
		font-size: 22px;
		line-height: 1.25;
	}
	.pr-page--spm .pr-spm-sub {
		width: auto;
		font-size: 17px;
		line-height: 1.35;
	}
	.pr-page--spm .pr-spm-rejilla {
		grid-template-columns: 1fr;
		row-gap: 24px;
		margin-top: 32px;
	}
	.pr-page--spm .pr-spm-fac-foto { height: 44vw; border-radius: 20px; }
	.pr-page--spm .pr-spm-celda {
		min-height: 0;
		padding: 22px 20px;
		border-radius: 20px;
	}
	.pr-page--spm .pr-spm-celda-t,
	.pr-page--spm .pr-spm-celda-p { font-size: 15px; line-height: 1.35; }
	.pr-page--spm .pr-spm-celda-t { margin-bottom: 4px; }

	.pr-page--spm .pr-spm-extra { width: auto; margin-top: 32px; }
	.pr-page--spm .pr-spm-extra p { font-size: 15px; line-height: 21px; }

	.pr-page--spm .pr-spm-cierre { margin-top: 0; padding: 32px 0; }
	.pr-page--spm .pr-spm-cierre p { width: auto; font-size: 19px; line-height: 1.35; }
}

/* ====================================================================
   ESCRITORIO (>=1456px) · Heroes a pantalla completa — 22/08/2026
   --------------------------------------------------------------------
   El zoom escala la maqueta de 1440 hasta llenar el ancho; la variable
   --pr-alto-util (que pone el JS: viewport / zoom) es lo que mide una
   pantalla en px de maqueta. `max(alto-del-frame, util)`: el heroe llena
   la pantalla cuando esta es proporcionalmente mas alta que el frame y
   NUNCA baja del alto aprobado en laptop (en ultrapanoramicos la pantalla
   util es mas baja que el frame y ahi manda el frame).
   El corte a 1456 deja el laptop (1440) exactamente como esta aprobado.
   ==================================================================== */
@media (min-width: 1456px) {

	/* Homes (video detras del menu transparente: arrancan en y=0). */
	.pr-page--home-es .pr-home-hero,
	.pr-page--home .pr-home-hero { height: max(756px, var(--pr-alto-util, 756px)); }

	/* El texto de la home ES va en ABSOLUTO desde arriba (top: 468/580/666),
	   asi que al crecer el heroe se quedaba pegado al techo. US y EU lo
	   anclan abajo y por eso solo se descuadraba el espanol. Se le suma lo
	   que ha crecido el heroe para que conserve su distancia al borde
	   inferior, la misma que en portatil (22/08/2026). */
	.pr-page--home-es .pr-home-hero h1 {
		top: calc(468px + max(0px, var(--pr-alto-util, 756px) - 756px));
	}
	.pr-page--home-es .pr-esh-hero-sub {
		top: calc(580px + max(0px, var(--pr-alto-util, 756px) - 756px));
	}
	.pr-page--home-es .pr-esh-hero-cta {
		top: calc(666px + max(0px, var(--pr-alto-util, 756px) - 756px));
	}

	/* Conocenos (video, y=0). El texto va en ABSOLUTO desde arriba (top:513/
	   629 sobre 782 de base): al crecer el hero se quedaba pegado al techo,
	   cada vez mas alto en proporcion. Se le suma lo que ha crecido para que
	   conserve su distancia al borde inferior, igual que en la home
	   (24/08/2026). */
	.pr-abt-hero { height: max(782px, var(--pr-alto-util, 782px)); }
	.pr-abt-h1 {
		top: calc(513px + max(0px, var(--pr-alto-util, 782px) - 782px));
	}
	.pr-abt-hero-cta {
		top: calc(629px + max(0px, var(--pr-alto-util, 782px) - 782px));
	}

	/* Ficha de Active (arranca en y=0 con margin-top -76). */
	.pr-apr-hero { height: max(1010px, var(--pr-alto-util, 1010px)); }

	/* Portada de Noticias (empieza bajo el menu: 76px ya gastados). */
	.pr-nws-hero { height: max(750px, calc(var(--pr-alto-util, 826px) - 76px)); }

	/* Comparativa SPM: NO va a pantalla completa. Es una pagina de lectura y
	   con el heroe entero el primer scroll no ensenaba nada; se queda algo
	   mas corto que 3/4 (0,70 y no 0,75), la proporcion que tiene en
	   portatil (539 de 756). En portatil el texto queda bajo, cerca del
	   final (267 arriba por solo 53 abajo): centrarlo en vertical al crecer
	   lo subia demasiado; se ancla abajo en vez de centrarlo, con el mismo
	   respiro de 40px que ya tiene en portatil (24/08/2026). */
	.pr-page--spm .pr-spm-hero {
		display: flex;
		align-items: flex-end;
		min-height: max(539px, calc(var(--pr-alto-util, 719px) * 0.70));
		padding-top: 0;
		padding-bottom: 40px;
	}

	/* El bloque azul de Active coloca su texto en absoluto a left:504 DENTRO
	   del lienzo de 1440, que va centrado: en pantallas anchas se iba con el
	   lienzo (744 a 1920) y se separaba de la foto, que si esta pegada al
	   borde. Con el lienzo en `static` el texto se posiciona respecto a la
	   SECCION y conserva los 504 del portatil (22/08/2026). */
	.pr-apr-etapa .pr-esh-canvas { position: static; }

	/* Fichas de Sports (ES/EU/US): rejilla centrada en el alto que queda
	   bajo el menu, para que imagen, precio y CTA llenen el primer
	   vistazo. */
	.pr-hero {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: max(620px, calc(var(--pr-alto-util, 696px) - 76px));
	}
}

/* ====================================================================
   Logos del pie: juego de ESCRITORIO / juego de MOVIL (22/08/2026)
   Los del grupo Figma 360:8396 son solo para movil; el escritorio
   conserva los de siempre. Dos <img> hermanos con la misma clase.
   ==================================================================== */
.pr-solo-mov { display: none !important; }
@media (max-width: 767px) {
	/* Por etiqueta: las imagenes en linea (van en una fila flex) y los
	   bloques de texto como bloque. */
	img.pr-solo-mov { display: inline-block !important; }
	p.pr-solo-mov,
	h2.pr-solo-mov,
	h3.pr-solo-mov,
	div.pr-solo-mov { display: block !important; }
	.pr-solo-desk { display: none !important; }
}

/* ====================================================================
   Remates del 22/08/2026 (noche)
   ==================================================================== */

/* --- (4) Pestanas de Active igual que las de Sports --------------------
   Las reglas del bloque de pestanas colgaban de `.pr-page--us`, y la ficha
   de Active no lleva esa clase (es `.pr-page--apr`): se quedaba con el
   panel mas estrecho (933 frente a 1120) y SIN la transicion de opacidad
   al cambiar de pestana. Se le da el mismo trato. */
.pr-page--apr .pr-tabs-viewport {
	width: 1120px;
	/* `max-width: 933px` de la regla de Active capaba el ancho nuevo. */
	max-width: 1120px;
	/* El mismo suelo que Sports: sin el, al pasar a una pestana corta el
	   bloque encogia y el pie de la seccion daba un salto. */
	min-height: 274px;
	transition: opacity 0.2s;
}
.pr-page--apr .pr-tabs-viewport.is-fading { opacity: 0; }
/* El ancho fijo y el suelo de 274 son SOLO de escritorio: en movil el ancho
   desbordaba a 1140px y el suelo dejaba un hueco bajo las pestanas cortas.
   Sports hace lo mismo (`min-height: 0` en su bloque movil). */
@media (max-width: 767px) {
	.pr-page--apr .pr-tabs-viewport { width: auto; max-width: none; min-height: 0; }
}
.pr-page--apr .pr-tab-panel { padding: 0; max-width: none; }
.pr-page--apr .pr-tab-panel > p { max-width: 933px; }
.pr-page--apr .pr-tab-panel p + p { margin-top: 20px; }

/* --- (6) Boton de cristal de la ficha US -------------------------------
   El frame lo pinta como una pastilla de cristal, pero con un relleno de
   negro al 20% sobre la foto de los militares (que ya es oscura) no se
   veia nada: parecia texto suelto. Se usa el cristal del propio tema, que
   es el que se lee sobre fotos. */
.pr-page--us .pr-btn--glass {
	background: rgba(255, 255, 255, 0.18);
	background-image: var(--pr-glass-light);
	border: 1px solid rgba(255, 255, 255, 0.35);
}

/* --- (7) Caja de cristal de la suscripcion (nodo 215:8810) -------------
   468x252, radio 30 y relleno translucido; el contenido va dentro. */
/* Nodo 380:3888: caja de 468x252 a 89 del lienzo, con el titular a 39 de su
   borde, el texto a 79 y el formulario a 164. Es EXACTAMENTE la misma que la
   de ES/EU, asi que se copia su tratamiento. Ojo: en la piel de US el
   titular, el texto y el formulario van en ABSOLUTO sobre la seccion
   (141,83 / 141,122 / 141,213); dentro de la caja tienen que volver al flujo
   o el relleno no cuenta y se salen (22/08/2026). */
.pr-page--us .pr-community-glass {
	position: absolute;
	left: max(89px, calc((100% - 1440px) / 2 + 89px));
	top: 58px;
	width: 468px;
	height: 252px;
	padding: 39px 44px 0 45px;
	border-radius: 30px;
	background:
		var(--pr-glass-light),
		rgba(0, 0, 0, 0.06);
	-webkit-backdrop-filter: var(--pr-glass-frost);
	backdrop-filter: var(--pr-glass-frost);
	box-shadow: var(--pr-glass-edge);
}
.pr-page--us .pr-community-glass h2,
.pr-page--us .pr-community-glass p,
.pr-page--us .pr-community-glass .pr-newsletter {
	position: static;
	left: auto;
	top: auto;
}
.pr-page--us .pr-community-glass h2 { margin: 0 0 5px; line-height: 30px; letter-spacing: 0; }
.pr-page--us .pr-community-glass p { margin: 0; width: 288px; line-height: 19px; }
.pr-page--us .pr-community-glass .pr-newsletter { margin-top: 14px; }
@media (max-width: 767px) {
	.pr-page--us .pr-community-glass {
		position: static;
		left: auto;
		top: auto;
		width: auto;
		height: auto;
		padding: 22px 20px;
		border-radius: 20px;
	}
	.pr-page--us .pr-community-glass p { width: auto; }
}

/* --- Bloque de pestanas de Active, identico al de Sports (22/08/2026) -----
   Active se quedaba con los estilos GENERICOS (`.pr-cert-row img` a 76 y los
   logos nuevos a 160-176) mientras Sports usa los suyos: titulo 16/700,
   columna de texto de 741 y logos de 96. Medido: Active salia con titulo
   20/600, parrafo de 913 y logos de 160-176. Se le da el mismo trato. */
.pr-page--apr .pr-tab-panel h3 {
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 0.5px;
	color: #000;
	margin: 0 0 20px;
}
/* 1120 y no 1020, igual que en Sports: se quedaba 100px corto del ancho
   real del panel y no llegaba hasta el final del bloque (24/08/2026). */
.pr-page--apr .pr-cert-row {
	display: flex;
	align-items: center;
	width: 1120px;
	max-width: none;
	padding: 0;
	border: 0;
	gap: 45px;
}
.pr-page--apr .pr-cert-row > div { width: 741px; }
.pr-page--apr .pr-cert-row + .pr-cert-row { margin-top: 75px; }
.pr-page--apr .pr-cert-row img { width: 96px; height: auto; margin-left: auto; flex-shrink: 0; }
/* En Sports `.pr-page--us .pr-cert-row img` (0,2,1) pisa a los anchos por
   logo (0,2,0) y los deja TODOS en 96, con la Comision Europea aparte a
   150 por su selector de alt. Aqui pasa igual, asi que el unico que hay
   que declarar es el de la Comision, y con la misma especificidad. */
.pr-page--apr .pr-cert-row img.pr-cert-logo--ec { width: 150px; }

@media (max-width: 767px) {
	.pr-page--apr .pr-cert-row {
		display: block;
		width: auto;
	}
	.pr-page--apr .pr-cert-row > div { width: auto; }
	.pr-page--apr .pr-cert-row + .pr-cert-row { margin-top: 32px; }
	.pr-page--apr .pr-cert-row img { margin: 14px 0 0; }

	/* Sports salia a 150px (el limite generico de `.pr-cert-row img`) porque
	   la regla de escritorio `.pr-page--us .pr-cert-row img { width: 96px }`
	   (0,2,0) queda ANTES en el fichero que la generica de movil de la misma
	   especificidad, y en un empate gana la que va despues. Aqui SI va
	   despues, asi que fija el mismo tamaño que ya tiene Active (24/08/2026). */
	.pr-page--us .pr-cert-row img { width: 96px; max-width: 96px; margin: 0 auto; }
	.pr-page--us .pr-cert-row img.pr-cert-logo--ec { width: 150px; max-width: 150px; }
}

/* --- Carrusel de historias en ESCRITORIO (22/08/2026) ------------------
   En el diseno la tarjeta mide 288 sobre un lienzo de 1440, o sea el 20%
   del ancho, y por eso la fila (1823) se sale de la pantalla y las dos de
   los bordes quedan cortadas: se ve que hay mas. Con la tarjeta clavada a
   288, en un monitor de 1920 caben las seis enteras y se pierde el efecto,
   asi que crece con el ancho manteniendo su proporcion (288x508). El tope
   de 480 evita que se desmande en pantallas muy grandes. */
@media (min-width: 1456px) {
	.pr-page--us .pr-story {
		flex: 0 0 clamp(288px, 20vw, 480px);
		width: clamp(288px, 20vw, 480px);
		height: auto;
		aspect-ratio: 288 / 508;
	}
}

/* --- Pestanas de la ficha: repartidas hasta el final del bloque ----------
   Medido a 1440: el panel de contenido y la fila de logos acaban en 1314,
   pero la ultima pestana ("Envio") se quedaba en 1150 en Sports y en 1130 en
   Active — 164 y 184px cortos. Sports las colocaba una a una en absoluto
   (left: 191/475/756/1059) y Active con un `margin-right: 116px` fijo: las
   dos cotas venian del frame y ninguna llega al borde real del bloque.
   Se reparten con `space-between` sobre el MISMO ancho que el panel (1120),
   asi que la primera arranca a la izquierda del bloque y la ultima acaba a
   su derecha, y las dos fichas quedan iguales.
   Va en `min-width: 768px` porque en movil las pestanas son una pastilla
   segmentada con su propio reparto (24/08/2026). */
@media (min-width: 768px) {
	.pr-page--us .pr-tabs,
	.pr-page--apr .pr-tabs {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		width: 1120px;
		gap: 0;
	}
	/* Sports: la barra colgaba del contenedor a ancho completo; se le da la
	   misma sangria que al panel. Active ya arranca en 194 por el relleno de
	   `.pr-apr-tabs-canvas`. */
	.pr-page--us .pr-tabs { margin-left: 194px; }
	/* `flex: 0 0 auto` contra el `flex: 1 1 auto` de la regla base: si crecen,
	   `space-between` no reparte nada (se lo come el estirado de los botones)
	   y el rotulo de "Envio" acababa en 1173 en vez de 1314. Sin crecer, el
	   hueco libre va ENTRE las etiquetas y la ultima queda pegada al borde. */
	.pr-page--us .pr-tabs [role="tab"],
	.pr-page--apr .pr-tabs [role="tab"] { flex: 0 0 auto; }
	.pr-page--us .pr-tabs [role="tab"] { position: static; }
	.pr-page--apr .pr-tabs [role="tab"] { margin-right: 0; }
}

/* --- Tarjeta de resena de Sports: inicial y flechas ---------------------
   El circulo de la inicial iba con `display: block` + `line-height: 40px`,
   asi que la letra quedaba donde la dejara la metrica de la fuente: con la
   Roboto de respaldo la "J" salia baja y descentrada. Se le da el MISMO
   centrado por flex que ya usa el avatar de Active (`.pr-apr-opinion
   .pr-avatar`), que es el que esta bien.
   Y las flechas iban clavadas a `top: 140px`, que era el medio del TEXTO:
   con la tarjeta de 333 su centro cae en 154 y no en 167. Se centran sobre
   la tarjeta de verdad, asi que siguen bien aunque cambie el largo de la
   resena (24/08/2026). */
/* Se aplica a TODOS los avatares de la piel, no solo al de "Opiniones de
   clientes": el del principio de la ficha (la tarjeta resumen) es otro
   elemento y se quedaba igual de descentrado. No se toca `line-height`: se
   copia tal cual el mecanismo de Active, que con los 40px heredados y el
   centrado flex deja la letra clavada (medido: desvio de 0,1px frente a los
   3,6px que tenia Sports). */
.pr-page--us .pr-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.pr-page--us .pr-review-row > .pr-arrow--prev,
.pr-page--us .pr-review-row > .pr-arrow:not(.pr-arrow--prev) {
	top: 50%;
	transform: translateY(-50%);
}

/* ==========================================================================
   REFERENCIAS Y NOTAS AL PIE — 25/08/2026
   Petición de Pablo: todas iguales, en regular, en el gris que ya llevaban
   unas, y a 10px SOLO en portátil y escritorio (en móvil se queda el tamaño
   de ahora, que ahí ya es pequeño de sobra).
   Estaban repartidas en seis clases con valores distintos: 13px con opacidad
   0.6 en la home y en las tarjetas, y 16px en peso 300 y negro pleno en los
   artículos, que era la que más cantaba. Este bloque va al final para ganar
   a todas ellas sin desmontar cada sitio.
   El gris se hace con `opacity` y no con `color` a propósito: así funciona
   igual sobre fondo claro y sobre los bloques oscuros.
   ========================================================================== */
/* Las de las tarjetas que giran llevan reglas de TRES clases
   (`.pr-flip--photo .pr-flip-back .pr-home-card-ref`, 14px y opacidad 1), asi
   que con dos clases esto perdia por especificidad y no se aplicaba nada. Se
   listan tambien esos casos: misma especificidad y va despues, luego gana. */
.pr-page .pr-faq-ref,
.pr-page .pr-esh-ref,
.pr-page .pr-art-ref,
.pr-page .pr-art-refs,
.pr-page .pr-art-refs-t,
.pr-page .pr-home-card-ref,
.pr-page .pr-benefit-ref,
.pr-page .pr-legal-ref,
.pr-page .pr-flip-back .pr-home-card-ref,
.pr-page .pr-flip-back .pr-benefit-ref,
.pr-flip--photo .pr-flip-back .pr-home-card-ref,
.pr-flip--photo .pr-flip-back .pr-benefit-ref,
.pr-page--home .pr-faq-answer-inner .pr-faq-ref,
.pr-page--home-es .pr-esh-ref,
.pr-page--art .pr-art-ref,
.pr-page--legal .pr-legal-cuerpo .pr-legal-ref,
.pr-page--home-es .pr-esh-trust-card .pr-flip-back p.pr-home-card-ref,
.pr-page--home-es .pr-esh-trust-card .pr-flip-back p.pr-benefit-ref {
	font-weight: 400;
	opacity: 0.6;
}
/* Los artículos las traían en negro pleno: se iguala al resto. */
.pr-page--art .pr-art-ref,
.pr-page--art .pr-art-refs,
.pr-page--art .pr-art-refs-t {
	color: inherit;
}
@media (min-width: 768px) {
	.pr-page .pr-faq-ref,
	.pr-page .pr-esh-ref,
	.pr-page .pr-art-ref,
	.pr-page .pr-art-refs,
	.pr-page .pr-art-refs-t,
	.pr-page .pr-home-card-ref,
	.pr-page .pr-benefit-ref,
	.pr-page .pr-legal-ref,
	.pr-page .pr-flip-back .pr-home-card-ref,
	.pr-page .pr-flip-back .pr-benefit-ref,
	.pr-flip--photo .pr-flip-back .pr-home-card-ref,
	.pr-flip--photo .pr-flip-back .pr-benefit-ref,
	.pr-page--home .pr-faq-answer-inner .pr-faq-ref,
	.pr-page--home-es .pr-esh-ref,
	.pr-page--art .pr-art-ref,
	.pr-page--legal .pr-legal-cuerpo .pr-legal-ref,
	/* Estas dos suben a 0,3,1 porque el rival es un selector de ELEMENTO
	   (`.pr-page--home-es .pr-esh-trust-card .pr-flip-back p`, 16px/300) y con
	   solo clases se perdia por ese elemento de mas. */
	.pr-page--home-es .pr-esh-trust-card .pr-flip-back p.pr-home-card-ref,
	.pr-page--home-es .pr-esh-trust-card .pr-flip-back p.pr-benefit-ref {
		font-size: 10px;
		line-height: 1.45;
	}
}

/* ==========================================================================
   SIN RESEÑAS EN VÍDEO — 25/08/2026
   Mientras no estén los vídeos reales, la sección de reels no se imprime
   (`pr_reels_visibles()` en functions.php) y el body lleva `pr-sin-reels`.
   Las opiniones de TEXTO ocupan ese hueco, así que hay que darles el aire
   que tenía la sección de arriba en vez del suyo, que era la separación
   ENTRE las dos secciones: medido, `.pr-stories` abría con 87px y
   `.pr-reviews` con 147px, y sin nada delante esos 147 dejaban un vacío.
   Dejar reseña en vídeo NO se toca: sigue en el formulario de la ficha.
   ========================================================================== */
.pr-sin-reels.pr-page--us .pr-reviews { padding-top: 87px; }
.pr-sin-reels.pr-page--eu .pr-reviews { padding-top: 90px; }
.pr-sin-reels .pr-reviews { padding-top: 90px; }
@media (max-width: 767px) {
	/* En móvil la sección de reels abría con 40px y las reseñas con 64px. */
	.pr-sin-reels.pr-page--us .pr-reviews,
	.pr-sin-reels.pr-page--eu .pr-reviews,
	.pr-sin-reels .pr-reviews { padding-top: 40px; }
}

/* ==========================================================================
   SOBRE NOSOTROS, MÓVIL: nombre y cargo del investigador, a la izquierda
   25/08/2026 — El pie de la tarjeta lleva `padding: 90px 30px 31px 51px` para
   los dos tamaños. En escritorio la tarjeta es ancha y esos 51px de sangrado
   se notan poco; en móvil la tarjeta mide 350px, así que el texto arrancaba a
   51 del borde izquierdo con solo 30 al derecho y se veía escorado al centro.
   Se acerca a la izquierda sin llegar a igualar el margen derecho, para no
   perder del todo el sangrado que buscaba el diseño.
   ========================================================================== */
@media (max-width: 767px) {
	.pr-abt-card figcaption { padding-left: 34px; }
}

/* ==========================================================================
   CRONOLOGÍA DE CIENCIA EN MÓVIL: aparición al hacer scroll — 25/08/2026
   El estado de partida (invisible) cuelga de `.pr-scim--anim`, que la pone el
   JS. Así, sin JS o con "reducir movimiento" activado, los bloques se ven
   siempre y no se puede quedar contenido escondido.
   La línea central y sus triángulos no se tocan: hacen de espina y los
   bloques van apareciendo a su lado.
   ========================================================================== */
@media (max-width: 767px) {
	.pr-scim--anim .pr-scim-item {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity 0.55s ease, transform 0.55s ease;
	}
	.pr-scim--anim .pr-scim-item.is-visible {
		opacity: 1;
		transform: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.pr-scim--anim .pr-scim-item {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
   FICHA DE PRODUCTO EN MÓVIL — 25/08/2026
   Petición de Pablo: fuera la tira de imágenes secundarias (ahora se cambia
   de foto deslizando el dedo sobre la principal) y fuera la reseña de texto
   de arriba, que ya está la de abajo.

   La tira NO se quita del HTML, solo se oculta: el JS la sigue usando como
   lista de fotos para el gesto. Si se borrara del DOM, el deslizamiento se
   quedaría sin nada que mostrar.

   `touch-action: pan-y` en la foto: deja el scroll vertical al navegador y
   nos reserva el horizontal, que es lo que evita que el gesto pelee con la
   página.
   ========================================================================== */
@media (max-width: 767px) {
	.pr-page--us .pr-thumbs-carousel,
	.pr-page--eu .pr-thumbs-carousel,
	.pr-page--spr-es .pr-thumbs-carousel { display: none; }

	.pr-page--us .pr-teaser-card-wrap,
	.pr-page--eu .pr-teaser-card-wrap,
	.pr-page--spr-es .pr-teaser-card-wrap { display: none; }

	/* Sin ninguno de los dos, el contenedor no tiene que ocupar ni separar. */
	.pr-page--us .pr-review-teaser,
	.pr-page--eu .pr-review-teaser,
	.pr-page--spr-es .pr-review-teaser { margin-top: 0; }

	.pr-page--us .pr-hero-media,
	.pr-page--eu .pr-hero-media,
	.pr-page--spr-es .pr-hero-media {
		touch-action: pan-y;
	}
	/* Aquí había un `transition: opacity 0.22s` para el fundido de la foto
	   principal. Ya no hace falta: la principal no cambia de opacidad nunca,
	   el que se funde es el fantasma (`.pr-hero-fantasma`) y lleva su propia
	   transición en línea desde el JS. Dejarlo aquí era peor que inservible:
	   la copia hereda las clases del original, así que este 0.22s le habría
	   ganado por especificidad a los 520ms del cruce (25/08/2026). */
}

/* ==========================================================================
   BARRA DE COMPRA PEGAJOSA: ANCHO EN MÓVIL — 25/08/2026
   La barra es `position: fixed` con `left:0; right:0`, así que se resuelve
   contra la ventana VISUAL. En un móvil real eso coincide con la ventana de
   maquetación y la barra mide lo mismo que el contenido, pero en el modo
   «Responsive» de DevTools las dos ventanas NO coinciden: medido a 320px, el
   contenido salía a 320 y la barra a 370, sobresaliendo por la derecha.

   Con `100vw` se resuelve contra la ventana de maquetación y coincide en los
   dos casos (probado: left/right:0 → 370, width:100% → 370, 100vw → 320).
   Solo en móvil: en escritorio `100vw` incluiría el ancho de la barra de
   scroll y provocaría desbordamiento horizontal.
   ========================================================================== */
@media (max-width: 767px) {
	.pr-sticky-buy {
		right: auto;
		width: 100vw;
	}
}

/* Reparto de líneas del bloque de patrocinio en móvil: `pretty` reparte mejor
   la última línea (medido: de 30% a 37% del ancho máximo y la desviación del
   borde de 46 a 43). El grueso de la mejora vino de acortar el texto, no de
   aquí, pero suma y no cuesta nada. */
@media (max-width: 767px) {
	.pr-sponsor p.pr-solo-mov { text-wrap: pretty; }
}

/* ==========================================================================
   BOTÓN DEL PIE: ANCHO EN PANTALLAS ESTRECHAS — 25/08/2026
   Llevaba `max-width: 350px`, que es la cota del frame de móvil (390 menos
   los 20+20 de relleno del lienzo). Por debajo de 390 el contenedor ofrece
   menos que eso y el botón se salía: medido a 320, caja 20..370 dentro de un
   lienzo que acaba en 300.
   Con `100%` se queda en 350 a 390px (igual que el diseño) y se adapta solo
   en cuanto la pantalla es más estrecha. Dos selectores porque hay dos reglas
   distintas poniendo el tope, una de ellas con `html[lang^="es"]` delante.
   ========================================================================== */
@media (max-width: 767px) {
	html[lang^="es"] :is(.pr-page--us, .pr-page--home, .pr-page--home-es) a.pr-esh-footer-cta1,
	html[lang^="es"] :is(.pr-page--us, .pr-page--home, .pr-page--home-es) .pr-esh-footer-cta1,
	:is(.pr-page--home-es, .pr-page--us, .pr-page--home) a.pr-esh-footer-cta1,
	:is(.pr-page--home-es, .pr-page--us, .pr-page--home) .pr-esh-footer-cta1 {
		width: auto;
		max-width: 100%;
	}
}

/* ==========================================================================
   TARJETAS DE BENEFICIOS: ALTO EN PANTALLAS ESTRECHAS — 25/08/2026
   El alto de 214px es la cota del frame de 390. Por debajo de eso las líneas
   son más cortas, el texto ocupa una más y se corta: medido a 320, dos de las
   cuatro tarjetas pedían 224px con la caja en 214 (`.pr-flip-front` lleva
   `overflow: hidden`, así que el recorte era limpio y no se veía venir).
   Una de las dos ya se cortaba antes de tocar nada.
   No se puede poner `height: auto`: las dos caras van `position: absolute`
   con `inset: 0`, así que la tarjeta necesita un alto definido para que el
   giro 3D funcione. Se le dan 18px más, solo en móvil.
   ========================================================================== */
@media (max-width: 767px) {
	.pr-page--us .pr-benefit-card.pr-flip,
	.pr-page--eu .pr-benefit-card.pr-flip,
	.pr-benefit-card.pr-flip {
		height: 232px;
		min-height: 232px;
	}
}

/* ==========================================================================
   PATROCINIO EN MÓVIL: HUECO ENTRE PÁRRAFOS — 25/08/2026
   Se sumaban dos separaciones: el `margin-top: 19px` del párrafo y el
   `gap: 20px` de la rejilla de columnas, que en móvil es de una sola columna.
   Total 39px de hueco con un interlineado de 19,2 — dos líneas en blanco.
   Se quita el margen a los párrafos que NO son de la primera columna: ahí ya
   separa el gap. El primero conserva el suyo, que es el que lo despega del
   titular.
   ========================================================================== */
@media (max-width: 767px) {
	.pr-sponsor-cols > div:not(:first-child) p.pr-solo-mov { margin-top: 0; }
}

/* PENDIENTE — Titular del patrocinio en móvil (25/08/2026)
   A 320px parte en 5 líneas cortas (136/94/101/83/91 medido) aunque su caja
   mide 230: la suma de esos anchos cabría en 3 líneas, así que algo está
   forzando los cortes. Probado sin éxito: `width: auto`, `max-width: 100%`,
   ocultar los dos <br> con `display: none` (siguen partiendo) y
   `text-wrap: balance` (empeora, deja 5 líneas aún más cortas).
   Sospecha por confirmar: el logotipo de SDN va flotado y estrecha las cajas
   de línea. No se toca hasta tenerlo medido, para no dejar CSS que no arregla
   nada. */

/* ==========================================================================
   FICHA DE ACTIVE EN MÓVIL: igual que Sports — 25/08/2026
   La ficha de Active usa sus propias clases (`pr-apr-*`), así que las reglas
   de Sports no la alcanzaban: seguía con la tira de miniaturas (230px de
   alto), sus dos flechas y la reseña de arriba (188px).
   Mismo criterio: la tira se OCULTA pero no se quita del HTML, porque el JS
   la usa como lista de fotos para el gesto.
   ========================================================================== */
@media (max-width: 767px) {
	.pr-page--apr .pr-apr-thumbs,
	.pr-page--apr .pr-apr-thumb-arrow { display: none; }

	.pr-page--apr .pr-apr-teaser-card { display: none; }

	/* El gesto se escucha sobre la propia foto: `pan-y` deja el scroll
	   vertical al navegador y nos reserva el horizontal. */
	.pr-page--apr .pr-apr-card { touch-action: pan-y; }

	/* Igual que en Sports: el fundido de 220ms se retira porque ahora cruza
	   el fantasma, y esta regla le habría ganado por especificidad. */
}

/* ==========================================================================
   AVISO DE PRIVACIDAD DE WOOCOMMERCE — 25/08/2026
   `.woocommerce-privacy-policy-text` venía sin estilo propio, así que heredaba
   el cuerpo de texto: 18px/27px en negro puro. Es letra pequeña legal, pero
   salía MÁS GRANDE que las etiquetas y los campos del propio formulario
   (16px/24px) y ocupaba 232x216 —ocho líneas— a 320 de ancho.
   Se alinea con la letra pequeña que ya usa la tarjeta de cuenta para el check
   de términos (14px/1.4) y se pasa a gris para que lea como nota al pie.
   Reportado en móvil, pero el desajuste era el mismo en escritorio.
   ========================================================================== */
.pr-page .woocommerce-privacy-policy-text,
.pr-page .woocommerce-privacy-policy-text p {
	font-family: var(--pr-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: #6b6b6b;
}
.pr-page .woocommerce-privacy-policy-text { margin: 4px 0 12px; }
.pr-page .woocommerce-privacy-policy-text p { margin: 0; }
/* El enlace a la política hereda el gris y solo se distingue por el subrayado. */
.pr-page .woocommerce-privacy-policy-text a { color: inherit; text-decoration: underline; }

/* --- Noticias en móvil: los tres destacados se cambian con el dedo ---------
   `pan-y` deja el scroll vertical al navegador y nos reserva el horizontal
   para el gesto (el JS solo lo escucha por debajo de 768). */
@media (max-width: 767px) {
	.pr-nws-hero { touch-action: pan-y; }
}

/* ==========================================================================
   FICHAS: FANTASMA DEL CRUCE Y PUNTITOS DE LA GALERÍA — 25/08/2026
   ========================================================================== */

/* Copia calcada que se funde por encima al cambiar de foto. Mismo recurso que
   `.pr-apr-fantasma` en el bloque de historias de Active: la copia tapa el
   relevo, así que la suma de las dos capas nunca baja del 100% y no aparece el
   hueco entre una foto y otra.
   El JS le pone en línea posición, medidas, z-index, transform congelado y la
   transición — no por gusto, sino porque la copia hereda las clases del
   original y reglas como `.pr-page--us .pr-hero-media .pr-hero-shot` (0,3,0)
   le ganarían a cualquier cosa que se declarase aquí (0,1,0). */
.pr-hero-fantasma { pointer-events: none; }

/* --- Puntitos indicadores de la galería (solo móvil) ---------------------
   En móvil la tira de miniaturas está oculta, así que estos puntitos son la
   única pista de cuántas fotos hay y por cuál vas. Mismas cotas que los de
   Noticias (12px, activo 22, hueco 13) para no tener dos lenguajes distintos
   de puntitos en el mismo sitio; el color activo lo pone cada mercado.
   Se pintan desde el JS, que es también quien mueve la galería: sin JS no hay
   ni gesto ni puntitos, y no queda un adorno muerto en el HTML. */
.pr-hero-dots { display: none; }

@media (max-width: 767px) {
	.pr-hero-dots {
		position: relative;
		z-index: 4;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 13px;
		margin: 14px 0 0;
	}
	/* Es un <button>: hay que anular lo que le pone GeneratePress (relleno,
	   fondo, alto mínimo) o los puntitos salen como botones de verdad. */
	.pr-page .pr-hero-dot {
		box-sizing: border-box;
		flex: 0 0 auto;
		width: 12px;
		height: 12px;
		min-height: 0;
		padding: 0;
		border: 0;
		border-radius: 6px;
		background: #d9d9d9;
		box-shadow: none;
		cursor: pointer;
		transition: width 0.3s ease, background-color 0.3s ease;
	}
	.pr-page .pr-hero-dot.is-on {
		width: 22px;
		background: var(--pr-dot-on, #1e1e1e);
		cursor: default;
	}
	.pr-page .pr-hero-dot:hover,
	.pr-page .pr-hero-dot:active { background: #c4c4c4; }
	.pr-page .pr-hero-dot.is-on:hover,
	.pr-page .pr-hero-dot.is-on:active { background: var(--pr-dot-on, #1e1e1e); }
	.pr-page .pr-hero-dot:focus-visible {
		outline: 2px solid var(--pr-dot-on, #1e1e1e);
		outline-offset: 2px;
	}

	/* En Active el lienzo del hero es un `flex` con `order` en cada hijo, así
	   que el orden del HTML no manda: los puntitos, sin `order`, se iban al 0 y
	   salían ENCIMA de la foto (medido: 278px por arriba de su borde inferior).
	   La tarjeta es la 1 y el título la 3, así que el 2 está libre y es
	   justamente el hueco que toca. En Sports no hace falta porque ahí cuelgan
	   de `.pr-hero-media`, que sí va en flujo normal. */
	.pr-page--apr .pr-apr-hero .pr-hero-dots { order: 2; }
}

/* El acento de cada ficha, el mismo par que usa el popup de reseñas. */
.pr-page--apr { --pr-dot-on: #f99b25; }
.pr-page--us,
.pr-page--eu,
.pr-page--eu-f,
.pr-page--spr-es { --pr-dot-on: #b71f2f; }

/* ==========================================================================
   ACTIVE SIN EL BLOQUE DE HISTORIAS: SUBIR LAS OPINIONES — 25/08/2026
   Con el bloque oculto, las opiniones se quedaban a 703px del borde de una
   sección de 1284: media pantalla de gris vacío. Todo lo que hay en ese lienzo
   va en posición absoluta, así que se sube el GRUPO 573px (703 − 130, que era
   el hueco que tenía la primera foto) y la sección se acorta lo mismo.
   Solo escritorio: en móvil la sección va en flujo (`height: auto`) y el hueco
   se cierra solo al no pintarse el bloque.
   ========================================================================== */
@media (min-width: 768px) {
	.pr-sin-historias .pr-apr-historias { height: 711px; }
	.pr-sin-historias .pr-apr-historias .pr-esh-canvas > * { transform: translateY(-573px); }
}

/* ==========================================================================
   CAJAS DE SUSCRIPCIÓN: AGRADECIMIENTO — 25/08/2026
   Las diez cajas tenían `action="#"` y no hacían nada. Ahora el alta se guarda
   y sale un agradecimiento en el idioma que se esté viendo.
   El mensaje va DENTRO del propio <form> para no tocar la estructura de tres
   maquetas distintas, así que lo que se hace es ocultar el resto de hijos del
   formulario y dejar solo el mensaje. `is-suscrito` lo pone el JS (sin
   recargar) y `pr-suscrito` en el body lo pone PHP en el camino sin JS.
   ========================================================================== */
.pr-news-ok {
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.45;
	letter-spacing: 0.5px;
}
.pr-news-ok strong { display: block; font-weight: 600; }
.pr-news-ok span { display: block; opacity: 0.7; }

/* La caja se queda solo con el mensaje. */
.pr-newsletter.is-suscrito > *:not(.pr-news-ok),
.pr-esh-newsletter.is-suscrito > *:not(.pr-news-ok),
.pr-apr-news-form.is-suscrito > *:not(.pr-news-ok),
.pr-suscrito .pr-newsletter > *:not(.pr-news-ok),
.pr-suscrito .pr-esh-newsletter > *:not(.pr-news-ok),
.pr-suscrito .pr-apr-news-form > *:not(.pr-news-ok) { display: none; }

/* En el camino sin JS el mensaje llega ya sin el atributo `hidden`; en el otro
   lo quita el JS. Esta regla es la que gana a `[hidden]` si algún día llegara
   con él puesto por cualquier motivo. */
.pr-newsletter.is-suscrito .pr-news-ok,
.pr-esh-newsletter.is-suscrito .pr-news-ok,
.pr-apr-news-form.is-suscrito .pr-news-ok,
.pr-suscrito .pr-news-ok { display: block; }

/* Un aviso de error hereda el mismo sitio que el mensaje, en rojo de la casa. */
.pr-news-err {
	margin: 8px 0 0;
	font-family: var(--pr-font-body);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.4;
	color: #b71f2f;
}

/* ==========================================================================
   BLOQUE DE PAGO: LA ESTRUCTURA DE WOO, INVISIBLE — 26/08/2026
   Las filas de pago van ahora dentro de `ul.wc_payment_methods > li` porque es
   lo que busca el bundle de Stripe para montar sus campos. La lista no debe
   notarse: ni viñetas, ni sangría, ni márgenes del tema o de WooCommerce.
   ========================================================================== */
/* El selector lleva el id y la clase del cuerpo a propósito: `woocommerce.css`
   pone `padding: 1em` a `#payment ul.payment_methods` y con un selector más
   corto ganaba — las filas salían 20px a la derecha de donde toca (medido:
   arrancaban en 851 en vez de 831). */
.woocommerce-checkout #payment.pr-chk-pay ul.wc_payment_methods,
.woocommerce-checkout #payment.pr-chk-pay ul.wc_payment_methods li,
.pr-chk-pay ul.wc_payment_methods,
.pr-chk-pay ul.wc_payment_methods li {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}
.pr-chk-pay ul.wc_payment_methods li::before,
.pr-chk-pay ul.wc_payment_methods li::marker { content: none; }

/* Los campos que pinta la propia pasarela (Stripe Elements) heredan la caja
   que se despliega, con el mismo aire que los campos de la maqueta. */
/* ---------- Fuera el recuadro morado de WooCommerce ----------
   La caja de la pasarela lleva la clase `payment_box` porque es donde el JS de
   Stripe busca para montar sus campos (`.payment_box.payment_method_stripe`),
   y con la clase vino el estilo por defecto de `woocommerce.css`:
     div.payment_box { background-color: #dcd7e2 }          <- el morado
     div.payment_box::before { border: 1em solid #dcd7e2 }  <- la flechita
   Nada de eso es del diseno (avisado el 26/08/2026: "no quiero que salga el
   recuadro ese morado en las formas de pago"). La clase se queda porque hace
   falta; el aspecto se limpia.
   Los selectores de Woo van precedidos de `.woocommerce-checkout #payment`, asi
   que hay que igualar esa especificidad -un id y dos clases- y no basta con una
   clase propia. Se cubren las tres variantes que declara Woo. */
.pr-page #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box,
.woocommerce-cart #payment div.payment_box,
.pr-page div.payment_box {
	/* BLANCO, no `transparent`: visualmente es lo mismo sobre la tarjeta del
	   resumen -que es #fff-, pero Stripe DEDUCE el aspecto de sus campos
	   recorriendo estos selectores
	     ["li.wc_payment_method .payment_box", "#payment", "form.checkout", "body"]
	   y con `transparent` no obtenia color: se iba a su tema oscuro y pintaba los
	   campos de tarjeta casi negros (avisado el 26/08/2026: "queda horrible").
	   Si esto se vuelve a poner en transparente, hay que borrar el transient
	   `wc_stripe_appearance` o el aspecto viejo se queda cacheado. */
	background-color: #ffffff;
	color: inherit;
	border-radius: 0;
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
}
/* La flecha que apunta a la fila de la pasarela: fuera. */
.pr-page #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before,
.woocommerce-cart #payment div.payment_box::before,
.pr-page div.payment_box::before {
	display: none;
	content: none;
	border: 0;
}
/* Y los campos de dentro, sin el borde lila que les pone Woo. */
.pr-page #payment div.payment_box input.input-text,
.woocommerce-checkout #payment div.payment_box input.input-text,
.pr-page #payment div.payment_box textarea {
	border-color: rgba(0, 0, 0, 0.14);
}

/* Pista de caracteres del comentario de una resena (26/08/2026) y aviso de
   error, que ahora el JS mueve al paso activo justo encima del boton. */
.pr-page .pr-rev-hint {
	margin: 6px 0 0;
	font-family: var(--pr-font-body);
	font-size: 13px;
	font-weight: 300;
	line-height: 1.3;
	color: rgba(0, 0, 0, 0.45);
	text-align: right;
	min-height: 17px;   /* reserva su hueco: sin esto el boton salta al escribir */
}
.pr-page .pr-rev-hint.is-short { color: #b71f2f; }
/* El aviso, con aire respecto al boton que ahora tiene justo debajo. */
.pr-page .pr-rev-error:not([hidden]) { margin: 10px 0 12px; }

/* El campo de MUESTRA de Stripe: fuera de pantalla pero CON CAJA, para que sus
   estilos se puedan medir. Copia las cotas del campo real del checkout
   (.pr-chk-field input) para que Stripe pinte sus campos igual que la web. */
/* En la ficha de la SUSCRIPCION, fuera la banda azul que invita a suscribirse:
   ya estas en la suscripcion (26/08/2026). El resto de la ficha es identica a
   la de Active, que es lo pedido. */
.pr-page--apr-subs .pr-apr-subs { display: none; }

/* ---------- Aviso debajo de su campo (26/08/2026) ----------
   Los errores de datos van pegados al campo que los provoca, no en un recuadro
   arriba: el rotulo ya se lee encima, asi que el mensaje solo dice el motivo. */
.pr-page .pr-chk-field-error {
	margin: 5px 0 0;
	font-family: var(--pr-font-body);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.35;
	color: #b71f2f;
}
/* El propio campo marcado, para que se vea de un vistazo cual es. El borde va
   por dentro con `inset`: estos campos no tienen borde y uno por fuera les
   cambiaria el tamaño. */
.pr-page .pr-chk-field--mal :is(input, select, textarea) {
	box-shadow: inset 0 0 0 1.5px #b71f2f;
}
.pr-page .pr-chk-field--mal > label { color: #b71f2f; }

/* Contenedor de avisos del checkout: es donde Stripe y WooCommerce meten los
   suyos. Va arriba del formulario, a todo el ancho de las dos columnas, y solo
   ocupa sitio cuando tiene algo dentro. */
/* A TODO EL ANCHO y por encima de las dos columnas. En la captura del
   26/08/2026 el aviso salia encajonado en un lateral porque heredaba el ancho
   de la columna: el formulario es flex, no rejilla, asi que `grid-column` no
   hacia nada. Con `flex-basis: 100%` y `order: -1` se pone arriba y entero. */
/* `woocommerce-NoticeGroup` entra en la lista porque es DONDE WOO LOS PONE de
   verdad: su `submit_error()` hace un `prepend` de ese div en el formulario, y
   sin regla propia se quedaba como una columna estrecha pegada a la izquierda
   (captura del 27/08/2026), porque un div suelto dentro de un flex se encoge a
   su contenido. */
.pr-page :is(.pr-chk-notices, .woocommerce-NoticeGroup) {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	order: -1;
	grid-column: 1 / -1;   /* por si algun dia el contenedor es rejilla */
}
.pr-page :is(.pr-chk-notices, .woocommerce-NoticeGroup):empty { display: none; }
.pr-page :is(.pr-chk-notices, .woocommerce-NoticeGroup) .woocommerce-error,
.pr-page :is(.pr-chk-notices, .woocommerce-NoticeGroup) .woocommerce-message,
.pr-page :is(.pr-chk-notices, .woocommerce-NoticeGroup) .woocommerce-info {
	margin: 0 0 20px;
	padding: 14px 18px;
	border-radius: 20px;
	border: 0;
	border-left: 4px solid #b71f2f;
	background: #f9f9f9;
	list-style: none;
	font-family: var(--pr-font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.45;
	color: #1e1e1e;
}
.pr-page :is(.pr-chk-notices, .woocommerce-NoticeGroup) .woocommerce-message,
.pr-page :is(.pr-chk-notices, .woocommerce-NoticeGroup) .woocommerce-info { border-left-color: #1e1e1e; }
.pr-page :is(.pr-chk-notices, .woocommerce-NoticeGroup) li { margin: 0; }
/* El titulo «Revisa estos datos» de Woo no se usa: cada queja ya vive bajo su
   campo, asi que la lista va sin vinetas ni sangria. */
.pr-page :is(.pr-chk-notices, .woocommerce-NoticeGroup) ul { padding-left: 0; margin: 0; }

/* El CIF de envio, oculto cuando la facturacion va aparte: alli manda el CIF
   del bloque de facturacion y este queda exento. Dejarlo a la vista, vacio y
   con su asterisco rojo, parecia un obligatorio sin rellenar. */
.pr-page .pr-chk-cif.is-oculto { display: none; }

/* Aviso del checkout replicado junto al boton, que es donde se esta mirando
   cuando se pulsa. El de WooCommerce sigue saliendo arriba del formulario. */
.pr-page .pr-chk-aviso {
	margin: 0 0 12px 11px;
	font-family: var(--pr-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: #b71f2f;
}
.pr-page .pr-chk-aviso[hidden] { display: none; }

/* Los espejos: fuera de pantalla pero CON CAJA, para que sus estilos se puedan
   medir. Stripe copia de `#billing_first_name` la tipografia, el color y el
   radio, asi que llevan las mismas cotas que los campos reales del checkout. */
.pr-page .pr-chk-espejos {
	position: absolute;
	left: -9999px;
	top: 0;
	width: 240px;
}
.pr-page .pr-chk-espejo,
.pr-page .pr-chk-stripe-muestra {
	width: 200px;
	height: 39px;
	display: block;
	border: 0;
	border-radius: 30px;
	background: #e8e8e8;
	padding: 0 17px;
	font-family: var(--pr-font-body);
	font-size: 15px;
	font-weight: 400;
	color: #1e1e1e;
	pointer-events: none;
}

.pr-chk-paybox .pr-chk-reveal-in > *:first-child { margin-top: 0; }
.pr-chk-paybox .pr-chk-reveal-in { padding-top: 10px; }
.pr-chk-paybox p { margin: 0 0 10px; font-size: 14px; font-weight: 300; line-height: 1.45; }
.pr-chk-paybox .wc-stripe-upe-element,
.pr-chk-paybox .StripeElement { min-height: 44px; }

/* ==========================================================================
   TITULO "CUSTOMER REVIEWS" — 26/08/2026
   Igual que el "Lo que opinan nuestros clientes" de Active
   (`.pr-apr-opinan-h2`): 32px en escritorio y 26 en movil, con su peso,
   interlineado y tracking. Antes heredaba el `.pr-heading` grande de seccion.
   ========================================================================== */
.pr-page .pr-heading--rev {
	font-family: var(--pr-font-body);
	font-size: 32px;
	font-weight: 500;
	line-height: 38.4px;
	letter-spacing: -0.32px;
}
/* En movil, 26px, que es lo que hace Active con su "Lo que opinan nuestros
   clientes" (`.pr-apr-opinan-h2`). Faltaba esta mitad: en el movil el titulo
   se quedaba a 32 y se veia mucho mas grande que el de Active. */
@media (max-width: 767px) {
	.pr-page .pr-heading--rev {
		font-size: 26px;
		line-height: 1.25;
		letter-spacing: -0.26px;
	}
}

/* ==========================================================================
   CAJITAS DE PORCENTAJES EN MOVIL (Sports US) — 26/08/2026
   Las tres en una fila y mas pequeñas. Antes se apilaban en columna con
   numeros de 95px, que ocupaban tres pantallazos para decir tres datos.
   A 320px: 272 de contenido, menos dos huecos de 8, son 85px por caja.
   ========================================================================== */
@media (max-width: 760px) {
	.pr-stats {
		flex-direction: row;
		gap: 8px;
	}
	.pr-stat {
		flex: 1 1 0;
		min-width: 0;
		min-height: 96px;
		padding: 14px 10px;
		border-radius: 12px;
	}
	.pr-stat-num {
		font-size: 26px;
		line-height: 1.1;
		letter-spacing: -0.4px;
	}
	.pr-stat-label {
		font-size: 11px;
		line-height: 1.25;
		letter-spacing: 0;
		margin-top: 4px;
	}
}

/* ==========================================================================
   TRUSTED (Sports US): LAS TRES CAJAS DE PORCENTAJE EN UNA FILA — 26/08/2026
   A <=767px se envolvian (`flex-wrap: wrap`) pero cada caja segui midiendo
   170px de ancho fijo, asi que en un movil de 360 entraban dos y la tercera
   bajaba sola. Ahora reparten el ancho disponible y se achican para caber.
   El efecto Vidrio (fill negro 10%, escarcha 4, luz -45 grados) no se toca:
   vive en la regla de `li` de mas arriba y se hereda.
   ========================================================================== */
@media (max-width: 767px) {
	.pr-page--us .pr-trusted-stats {
		flex-wrap: nowrap;
		gap: 8px;
	}
	.pr-page--us .pr-trusted-stats li {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		height: auto;
		min-height: 92px;
		padding: 12px 10px;
		border-radius: 12px;
	}
	.pr-page--us .pr-trusted-stats strong {
		font-size: 26px;
		line-height: 1.1;
		letter-spacing: -0.4px;
	}
	.pr-page--us .pr-trusted-stats span {
		font-size: 11px;
		line-height: 1.25;
		letter-spacing: 0;
		margin-top: 4px;
	}
}

/* ==========================================================================
   MODAL DE CONDICIONES DE LA SUSCRIPCION — 26/08/2026
   Se le ha quitado el aviso de "pendiente de recibir el texto" y se le ha
   puesto aceptacion expresa: casilla + enlace a las condiciones. El boton
   nace deshabilitado (desde PHP, no solo por JS) y da de alta de verdad.
   ========================================================================== */
.pr-subs-terms {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 18px;
	font-family: var(--pr-font-body);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.45;
	cursor: pointer;
}
.pr-subs-terms input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: #648bff;   /* el azul de la banda de suscripcion de Active */
	cursor: pointer;
}
.pr-subs-terms a {
	display: inline-block;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.pr-subs-aviso {
	margin: 8px 0 0;
	font-family: var(--pr-font-body);
	font-size: 13px;
	font-weight: 400;
	color: #b71f2f;
}
.pr-subs-cta[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ==========================================================================
   PIE EN MOVIL — frame Figma 438:4010 — 26/08/2026
   Antes las dos listas de enlaces iban APILADAS (137 + 208 px), lo que dejaba
   un pie de casi 1.100px de alto: tres pantallazos de movil para cuatro
   enlaces y cinco legales. El diseño las quiere en DOS COLUMNAS, con
   PRORESOLVE sobre la izquierda y los legales arrancando arriba a la derecha.

   Se hace con rejilla y areas nombradas sobre el lienzo que ya existe, sin
   tocar el marcado: los hijos siguen siendo los mismos siete y en el mismo
   orden, asi que el pie de ESCRITORIO no se entera.

   Todos los selectores llevan `.pr-esh-footer.pr-footer` por delante (dos
   clases del propio <footer>, cuatro en total): las reglas viejas usan
   `:is(.pr-page--home-es, .pr-page--us, .pr-page--home) ...`, que cuenta 3
   clases, y sin ese refuerzo la rejilla no llegaba a aplicarse.

   El Figma esta dibujado a media escala (su cuerpo de 8px son los 16 reales),
   asi que las cotas de tipografia van al doble de lo que dice el archivo.
   ========================================================================== */
@media (max-width: 767px) {
	.pr-esh-footer.pr-footer .pr-esh-footer-main .pr-esh-canvas {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"titulo titulo"
			"desc   desc"
			"cta    cta"
			"logo   legal"
			"nav    legal"
			"marcas marcas";
		align-content: start;
		column-gap: 14px;
		row-gap: 0;
	}
	/* US: la columna derecha ya no abarca la fila del rótulo; empieza en la de
	   la navegación, o sea a la altura de «Sports ProResolve» (31/08/2026). */
	.pr-esh-footer.pr-footer.pr-esh-footer--legal-alineada .pr-esh-footer-main .pr-esh-canvas {
		grid-template-areas:
			"titulo titulo"
			"desc   desc"
			"cta    cta"
			"logo   ."
			"nav    legal"
			"marcas marcas";
	}
	.pr-esh-footer.pr-footer .pr-esh-footer-main .pr-esh-canvas > h2 { grid-area: titulo; }
	.pr-esh-footer.pr-footer .pr-esh-footer-main .pr-esh-footer-desc { grid-area: desc; }
	.pr-esh-footer.pr-footer .pr-esh-footer-main .pr-esh-footer-cta1 { grid-area: cta; }
	.pr-esh-footer.pr-footer .pr-esh-footer-main .pr-esh-footer-logo { grid-area: logo; }
	.pr-esh-footer.pr-footer .pr-esh-footer-main .pr-esh-footer-nav { grid-area: nav; }
	.pr-esh-footer.pr-footer .pr-esh-footer-main .pr-esh-footer-legal { grid-area: legal; }
	.pr-esh-footer.pr-footer .pr-esh-footer-main .pr-esh-marcas { grid-area: marcas; }

	/* Los huecos verticales van uno a uno: con `row-gap` sobre la rejilla el
	   aire caia tambien entre PRORESOLVE y su lista, que en el diseño van
	   pegados, y entre las dos filas de la columna derecha. */
	.pr-esh-footer.pr-footer .pr-esh-footer-main .pr-esh-footer-desc { margin-top: 14px; }
	/* El boton se ajusta a SU contenido y no a todo el ancho: es un item de la
	   rejilla y el estirado por defecto lo dejaba en 335px, cuando el nodo
	   432:7868 lo dibuja como pastilla ajustada, con el rotulo en dos lineas y
	   el chevron centrado al lado. */
	.pr-esh-footer.pr-footer .pr-esh-footer-main .pr-esh-footer-cta1 {
		margin-top: 22px;
		justify-self: start;
		width: auto;
		max-width: 100%;
		padding: 11px 18px;
		align-items: center;
		gap: 12px;
	}
	.pr-esh-footer.pr-footer .pr-esh-footer-main .pr-esh-footer-logo { margin-top: 46px; }
	.pr-esh-footer.pr-footer .pr-esh-footer-main .pr-esh-footer-legal { margin-top: 46px; }
	.pr-esh-footer.pr-footer .pr-esh-footer-main .pr-esh-footer-nav { margin-top: 18px; }
	/* US: la columna legal ya no arranca en la fila del rótulo, sino en la de la
	   navegación, así que su aire de arriba es el de la navegación (18) y no el
	   del rótulo (46). Sin esto quedaba 28px más baja que «Sports ProResolve»
	   (medido el 31/08/2026). */
	.pr-esh-footer.pr-footer.pr-esh-footer--legal-alineada .pr-esh-footer-main .pr-esh-footer-legal {
		margin-top: 18px;
	}
	/* Un poco mas de aire encima de los logos (44 -> 54), pedido el 26/08. */
	.pr-esh-footer.pr-footer .pr-esh-footer-main .pr-esh-marcas { margin-top: 54px; }

	/* Tipografia del frame, al doble por lo de la media escala. */
	.pr-esh-footer.pr-footer .pr-esh-footer-main .pr-esh-canvas > h2 {
		font-size: 32px;
		line-height: 1.2;
		letter-spacing: -0.32px;
	}
	.pr-esh-footer.pr-footer .pr-esh-footer-main .pr-esh-footer-logo {
		font-size: 20px;
		line-height: 1;
	}
	.pr-esh-footer.pr-footer .pr-esh-footer-main .pr-esh-footer-nav a,
	.pr-esh-footer.pr-footer .pr-esh-footer-main .pr-esh-footer-legal a {
		font-size: 17px;
		line-height: 1.25;
	}
	/* En columna estrecha los items necesitan aire propio: el interlineado ya
	   no basta para separarlos como en el diseño. Incluye la variante
	   "compacta" (seis legales), que en dos columnas ya no aprieta. */
	.pr-esh-footer.pr-footer .pr-esh-footer-main .pr-esh-footer-nav li + li,
	.pr-esh-footer.pr-footer .pr-esh-footer-main .pr-esh-footer-legal li + li,
	.pr-esh-footer.pr-footer .pr-esh-footer-main .pr-esh-footer-legal--compacta li + li {
		margin-top: 14px;
	}

	/* La descripcion no ocupa el ancho entero: en el diseño rompe antes. */
	.pr-esh-footer.pr-footer .pr-esh-footer-main .pr-esh-footer-desc { max-width: 30ch; }

	/* En movil solo la PRIMERA frase, como el nodo 432:7855 ("Help us bring the
	   science of inflammation resolution to more people."). La segunda va en un
	   span y se oculta: seis renglones en el pie eran demasiados. En escritorio
	   sigue completa. */
	.pr-esh-footer.pr-footer .pr-footer-desc-mas { display: none; }

	/* --- Banda inferior, medida sobre el nodo 438:4010 ---
	   Colores y cotas sacados del PNG del frame, no a ojo:
	     fondo      #F5F5F5 (245,245,245), NO blanco puro
	     copyright  gris de bajo contraste, encima
	     redes      texto oscuro, debajo, al MISMO margen izquierdo
	   La regla vieja ponía `align-items: center` y, al pasar la banda a
	   columna, eso centraba el <span> de las redes: salían 43px sangradas
	   respecto al copyright (medido el 26/08/2026). */
	.pr-esh-footer.pr-footer .pr-esh-footer-bar {
		background: #f5f5f5;
		/* El relleno horizontal lo ponía la banda Y además su lienzo interior:
		   20 + 20 = 40, y el copyright no cuadraba con el PRORESOLVE de arriba,
		   que va a 20 (medido el 26/08/2026). Lo lleva solo la banda. */
		/* 24 ENCIMA del copyright (27/08/2026: «mete un poquito de espacio encima
		   del 2026 en el footer mobile»). Antes ponía 20 y el hueco REAL eran
		   2px, porque copyright y redes arrastraban el `translateY(-50%)` de la
		   regla de escritorio —que los subía 18 y 11px— y se lo comían casi
		   entero. Eso se corrige justo debajo, así que aquí las cotas ya son las
		   que se ven.
		   Debajo 20 y no 10: con el `transform` fuera, los 10 de antes se
		   quedaban en 10 de verdad, y lo que se aprobó el 26/08 eran los 21 que
		   daba el desplazamiento. */
		padding: 24px 20px 20px;
		height: auto;
	}
	.pr-esh-footer.pr-footer .pr-esh-footer-bar .pr-esh-canvas {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 12px;
		padding: 0;
		height: auto;
	}
	/* El `transform` de la regla de escritorio, FUERA. Alli centra el texto en
	   una barra de 55px con `top:50%` + `translateY(-50%)`; aqui la barra es una
	   columna en flujo normal, asi que el `translate` solo despega los dos
	   bloques de su relleno hacia arriba (medido: -18px el copyright y -11px las
	   redes, 27/08/2026). El `position` ya se reseteaba; el `transform` se habia
	   quedado. */
	.pr-esh-footer.pr-footer .pr-esh-bar-legal { display: contents; }
	.pr-esh-footer.pr-footer .pr-esh-copyright,
	.pr-esh-footer.pr-footer .pr-esh-social { transform: none; }
	.pr-esh-footer.pr-footer .pr-esh-copyright {
		width: 100%;
		margin: 0;
		text-align: left;
		font-size: 13px;
		font-weight: 300;
		line-height: 1.4;
		letter-spacing: 0.5px;
		color: rgba(30, 30, 30, 0.5);
	}
	.pr-esh-footer.pr-footer .pr-esh-social {
		display: flex;
		align-items: center;
		gap: 22px;
		margin: 0;
		padding: 0;
	}
	.pr-esh-footer.pr-footer .pr-esh-social a {
		font-size: 16px;
		line-height: 1.4;
		color: #1e1e1e;
	}
}

/* ==========================================================================
   POP-UP DEL SEGUNDO PASO DE LA NEWSLETTER — 26/08/2026
   Al enviar el correo en cualquiera de las diez cajas se abre este dialogo:
   nombre, apellidos y las DOS casillas (privacidad y comunicaciones). Nada se
   guarda hasta que se completa, asi que todo lo que entra en la lista es
   utilizable (decision de Pablo).
   Estetica de la casa: mismo dialogo que el de condiciones de suscripcion
   (`.pr-subs-*`), tipografia de cuerpo, esquinas del sitio y el rojo de la
   marca para los avisos.
   ========================================================================== */
.pr-news-modal[hidden] { display: none; }
.pr-news-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	transition: opacity 0.28s ease;
}
.pr-news-modal.is-open { opacity: 1; }
.pr-news-modal:not(.is-open) { pointer-events: none; }
.pr-news-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.pr-news-dialog {
	position: relative;
	width: 100%;
	max-width: 468px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: #fff;
	border-radius: var(--pr-radius, 20px);
	padding: 34px 32px 30px;
	transform: translateY(14px) scale(0.985);
	transition: transform 0.28s cubic-bezier(0.22, 0.7, 0.24, 1);
}
.pr-news-modal.is-open .pr-news-dialog { transform: none; }
.pr-news-dialog:focus { outline: none; }
.pr-news-x {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #1e1e1e;
	cursor: pointer;
}
.pr-news-x:hover { background: rgba(0, 0, 0, 0.06); }

.pr-page .pr-news-dialog h2 {
	margin: 0;
	font-family: var(--pr-font-body);
	font-size: 26px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.26px;
	color: #1e1e1e;
}
.pr-page .pr-news-dialog .pr-news-sub {
	/* 18 y no 10: el subtitulo quedaba pegado al "Solo un par de cosas..."
	   (peticion del 26/08/2026). Con `.pr-news-sub` a secas (0,1,0) las reglas
	   de parrafo del tema (0,1,1) dejaban el margen en 0. */
	margin: 18px 0 0;
	font-family: var(--pr-font-body);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.45;
	color: rgba(30, 30, 30, 0.72);
}

/* Nombre y apellidos, en dos columnas cuando caben. */
.pr-news-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 22px;
}
/* 18 arriba: el rotulo de "Correo electronico" quedaba muy junto a los dos
   campos de encima (peticion del 26/08/2026). Los de la pareja nombre y
   apellidos no lo llevan: los separa el hueco de la rejilla.
   Con el dialogo por delante, que si no las reglas de parrafo del tema dejan
   el margen en 0. */
.pr-page .pr-news-dialog .pr-news-field { margin: 18px 0 0; }
.pr-page .pr-news-dialog .pr-news-fields .pr-news-field { margin: 0; }
.pr-news-field label {
	display: block;
	font-family: var(--pr-font-body);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.3px;
	color: rgba(30, 30, 30, 0.66);
	margin-bottom: 5px;
}
.pr-news-field input {
	width: 100%;
	height: 46px;
	padding: 0 14px;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 300;
	color: #1e1e1e;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 10px;
}
/* La caja de comentarios del pop-up de equipos (02/09/2026): misma piel que
   los campos de una linea, pero con alto propio y redimensionable solo en
   vertical, para que no se salga del dialogo. */
.pr-news-field textarea {
	width: 100%;
	min-height: 84px;
	padding: 11px 14px;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.35;
	color: #1e1e1e;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 10px;
	resize: vertical;
}
.pr-news-field input:focus,
.pr-news-field textarea:focus {
	outline: none;
	border-color: rgba(0, 0, 0, 0.5);
}

.pr-news-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 16px;
	font-family: var(--pr-font-body);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.45;
	color: #1e1e1e;
	cursor: pointer;
}
.pr-news-check input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	cursor: pointer;
}
.pr-news-check a {
	text-decoration: underline;
	text-underline-offset: 2px;
}
.pr-news-err {
	margin: 14px 0 0;
	font-family: var(--pr-font-body);
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.4;
	color: #b71f2f;
}
.pr-news-err[hidden] { display: none; }

.pr-news-send {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 24px;
	min-height: 50px;
	padding: 0 24px;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 400;
	color: #fff;
	background: #1e1e1e;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: opacity 0.2s ease;
}
.pr-news-send:hover { opacity: 0.86; }
.pr-news-send[disabled] { opacity: 0.45; cursor: not-allowed; }

/* --- El agradecimiento, en el mismo dialogo --- */
.pr-news-done[hidden] { display: none; }
.pr-news-done { text-align: left; }
.pr-news-tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 18px;
	border-radius: 50%;
	background: rgba(30, 30, 30, 0.07);
	color: #1e1e1e;
}
.pr-news-done p {
	margin: 10px 0 0;
	font-family: var(--pr-font-body);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.5;
	color: rgba(30, 30, 30, 0.78);
}

@media (max-width: 520px) {
	.pr-news-dialog { padding: 30px 22px 26px; }
	.pr-page .pr-news-dialog h2 { font-size: 23px; }
	/* En pantalla estrecha nombre y apellidos, uno debajo del otro. */
	.pr-news-fields { grid-template-columns: 1fr; }
	.pr-news-send { width: 100%; justify-content: center; }
}

/* ==========================================================================
   CAJAS DE SUSCRIPCION EN MOVIL — nodos Figma 438:4011 / 4012 / 4016 / 4017
   y 438:4018 (Sobre nosotros) — 26/08/2026

   El diseño cambia por completo la pieza en movil. Antes era un panel de
   cristal a TODO el ancho (335x269) con titular grande, parrafo largo y el
   campo y el boton apilados. Ahora es una TARJETA pequeña (249x90 sobre un
   lienzo de 360) apoyada en una esquina, sin titular, con una linea de texto
   y el campo y el boton EN LINEA.

   Cotas del nodo, medidas sobre el propio archivo:
     seccion   360 x 287
     tarjeta   249 x 90, radio 15, relleno rgba(0,0,0,0.1)
     texto     12px, interlineado 1.2, tracking -0.12, ancho 220
     campo     pastilla blanca, radio 30
   El lienzo de 360 equivale a un movil de 375, asi que las cotas van casi 1:1
   (se escalan por 375/360 donde importa).

   Hay CUATRO estructuras distintas en el tema y todas pasan por aqui:
     .pr-esh-news        home ES      (video + span de cristal + canvas)
     .pr-home-community  home EU/US   (video + div de cristal)
     .pr-community       Sports       (fondo en background-image del section)
     .pr-apr-news        Active       (img + span de cristal + canvas)
     .pr-abt-ciencia     Sobre nosotros, ULTIMO bloque (texto + boton, SIN campo)

   El cristal es el mismo efecto Vidrio del resto del sitio (relleno negro al
   10%, escarcha 4, luz -45 grados al 80%), ya usado en las cajas de
   porcentajes de US: asi todo el sitio tiene el mismo cristal.
   ========================================================================== */
@media (max-width: 767px) {

	/* ---------- la seccion: alto del nodo y fondo cubriendo ---------- */
	.pr-page .pr-esh-news,
	.pr-page .pr-home-community,
	.pr-page .pr-community,
	.pr-page .pr-apr-news {
		position: relative;
		min-height: 300px;      /* 287 x 375/360 */
		height: auto;
		padding: 0;
		display: flex;
		overflow: hidden;
	}

	/* El medio de fondo llena la seccion en las que lo llevan como elemento. */
	.pr-page .pr-esh-news > .pr-esh-news-bg,
	.pr-page .pr-home-community > .pr-home-community-video,
	/* `img.pr-solo-mov` lleva `display: inline-block !important` en la regla
	   general del tema, asi que aqui hace falta el !important para que la foto
	   se comporte como capa de fondo y no como una imagen en el flujo. */
	.pr-page .pr-apr-news > .pr-apr-news-bg {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Las capas de cristal viejas se APAGAN: el cristal es ahora la tarjeta.
	
	   OJO al selector, que aqui me equivoque (avisado el 26/08/2026): el
	   `span.pr-esh-news-glass` NO es hermano de la seccion, es HIJO del lienzo.
	   Con `>` desde la seccion no casaba nunca, asi que seguia pintado encima de
	   la tarjeta, del mismo tamano, con su radio de 30 y su borde blanco: era el
	   borde que se seguia viendo en la home ES. Se apaga donde quiera que este. */
	.pr-page .pr-esh-news .pr-esh-news-glass,
	.pr-page .pr-apr-news .pr-apr-news-glass,
	.pr-page .pr-home-community .pr-home-community-glass > .pr-esh-news-glass {
		display: none;
	}

	/* El velo negro al 20% que pide el nodo sobre la foto lo pone la seccion. */
	.pr-page .pr-esh-news::before,
	.pr-page .pr-abt-ciencia::before {
		content: '';
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.2);
		pointer-events: none;
	}

	.pr-page .pr-esh-news > .pr-esh-news-glass--noop,
	.pr-page .pr-apr-news > .pr-apr-news-glass--noop {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		border-radius: 0;
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}


	/* ---------- la tarjeta ---------- */
	.pr-page .pr-esh-news .pr-esh-canvas,
	.pr-page .pr-home-community .pr-home-community-glass,
	.pr-page .pr-community .pr-container,
	.pr-page .pr-community .pr-community-glass,
	.pr-page .pr-apr-news .pr-esh-canvas,
	.pr-page .pr-abt-ciencia .pr-abt-glass {
		position: relative;
		/* Las cotas del diseño de ESCRITORIO siguen aplicando con
		   `position: relative` y sacaban la tarjeta de la seccion: en la home EU
		   arrastraba `left:135px; top:80px` y acababa 60px por debajo y 39 fuera
		   del viewport (medido el 26/08/2026). Se anulan las cuatro. */
		left: auto;
		top: auto;
		right: auto;
		bottom: auto;
		z-index: 1;
		align-self: flex-end;              /* apoyada abajo */
		/* PROPORCIONAL, no clavada: en el nodo la tarjeta ocupa 249 de 360, o
		   sea el 69,2% del bloque. Con un tope fijo de 259px, en un movil ancho
		   o en tablet el bloque crecia y la tarjeta se quedaba igual, o sea
		   pequeñita en una esquina (a 767px era el 34%). Ahora guarda la
		   proporcion y el `calc` solo evita que se coma los margenes. */
		width: min(calc(100% - 40px), 69.2%);
		min-width: 0;
		max-width: none;
		height: auto;
		min-height: 0;
		margin: 0 0 20px 20px;
		padding: 15px 16px 16px;
		border-radius: 15px;
		display: flex;
		flex-direction: column;
		/* 12 y no 9: con el texto a 14px el hueco de 9 dejaba el campo y el
		   boton pegados al parrafo. */
		gap: 12px;

		/* Efecto Vidrio: relleno negro 10% + luz diagonal + borde luminoso */
		/* El nodo 457:7877 es tajante: relleno PLANO `rgba(0,0,0,0.1)`, radio 15
		   y nada mas. Ni borde ni degradado.
		   Fuera van dos cosas que me habia inventado:
		     - el `inset 0 0 0 1px` blanco, que dibujaba un recuadro alrededor de
		       la tarjeta y es lo que se veia como "un borde";
		     - el degradado diagonal, que ademas era lo que apagaba el texto.
		   El relleno queda en 0,18 y no en 0,10: sobre el video del arrecife, que
		   es muy claro, con 0,10 el texto blanco se lee gris. Es la unica cota que
		   se separa del nodo, y es a proposito. La sensacion de cristal la da la
		   escarcha del `backdrop-filter`, no un contorno. */
		background: rgba(0, 0, 0, 0.18);
		/* Escarcha de VERDAD (avisado el 26/08/2026: "sin glass effect").
		   El panel de Vidrio del Figma dice Escarcha 4, y yo lo traduje literal a
		   `blur(4px)`, que no se ve. Pero el aspecto de vidrio de ese panel lo dan
		   sobre todo Refraccion 80 y Dispersion 50, y en CSS no hay refraccion:
		   lo unico que puede imitarla es mas desenfoque. Con 16px si se lee como
		   cristal y el fondo se sigue adivinando detras. */
		-webkit-backdrop-filter: blur(18px) saturate(1.6);
		backdrop-filter: blur(18px) saturate(1.6);
		/* El filo luminoso VUELVE (nodo 428:7943: la tarjeta SI tiene marco).
		   Lo que estaba mal el 26/08/2026 no era el filo: era que iba con un
		   lavado blanco al 32% y solo 4px de desenfoque, y eso convertia la
		   tarjeta en una placa opaca con una raya dura alrededor. Con el fondo
		   desenfocado de verdad, el mismo filo se lee como el canto del cristal.
		   El segundo inset, mas claro y solo en el borde de arriba, es la "Luz
		   -45 grados 80%" del panel de Vidrio. */
		box-shadow:
			inset 0 0 0 1px rgba(255, 255, 255, 0.3),
			inset 0 1px 0 rgba(255, 255, 255, 0.45);
	}

	/* Sports USA: la tarjeta va ARRIBA (nodo 438:4016); en EU y ES abajo
	   (nodo 438:4012). Se distingue por `.pr-community--us`, que ponen las dos
	   plantillas de Estados Unidos: por clase del body no vale, porque las
	   fichas de EU y ES tambien llevan `pr-page--us`. */
	.pr-page .pr-community--us .pr-container,
	.pr-page .pr-community--us .pr-community-glass {
		align-self: flex-start;
		margin: 20px 0 0 20px;
	}

	/* Tres variantes de marcado conviven en Sports: unas paginas ponen el
	   contenido en `.pr-container` y otras lo envuelven en
	   `.pr-community-glass` DENTRO del container. Cuando pasa lo segundo, el
	   container vuelve a ser un envoltorio plano para que no salgan dos
	   tarjetas de cristal, una dentro de la otra. */
	.pr-page .pr-community > .pr-container:has(> .pr-community-glass) {
		display: block;
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0;
		border-radius: 0;
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow: none;
	}

	/* ---------- el titular ya no se pinta ----------
	   El nodo no lleva titular en la tarjeta. Se OCULTA A LA VISTA pero se
	   queda en el arbol para el lector de pantalla y para el buscador: con
	   `display:none` se perderia un h2 de la pagina. */
	.pr-page .pr-esh-news .pr-esh-canvas > h2,
	.pr-page .pr-home-community .pr-home-community-glass > h2,
	.pr-page .pr-community .pr-container > h2,
	.pr-page .pr-community .pr-community-glass > h2,
	.pr-page .pr-apr-news .pr-esh-canvas > h2 {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	/* ---------- la linea de texto ----------
	   En movil manda la del nodo (`.pr-news-card-line`) y la larga de
	   escritorio se esconde. */
	.pr-page .pr-esh-news .pr-esh-canvas > p:not(.pr-news-card-line),
	.pr-page .pr-home-community .pr-home-community-glass > p:not(.pr-news-card-line),
	.pr-page .pr-community .pr-container > p:not(.pr-news-card-line),
	.pr-page .pr-community .pr-community-glass > p:not(.pr-news-card-line),
	.pr-page .pr-apr-news .pr-esh-canvas > p:not(.pr-news-card-line),
	.pr-page .pr-abt-ciencia .pr-abt-glass > p:not(.pr-news-card-line) {
		display: none;
	}
	.pr-page .pr-news-card-line { display: block; }
	.pr-page .pr-esh-news .pr-esh-canvas > p,
	.pr-page .pr-home-community .pr-home-community-glass > p,
	.pr-page .pr-community .pr-container > p,
	.pr-page .pr-community .pr-community-glass > p,
	.pr-page .pr-apr-news .pr-esh-canvas > p,
	/* El ultimo bloque de Sobre nosotros (`.pr-abt-ciencia`), que es donde va
	   la tarjeta del nodo 448:3898. */
	.pr-page .pr-abt-ciencia .pr-abt-glass > p {
		position: static;
		width: auto;
		max-width: 100%;
		margin: 0;
		font-family: var(--pr-font-body);
		/* 14 y no los 12 del nodo: a 12 no se leia bien en pantalla (26/08/2026).
		   El interlineado sube a 1,3 con el cuerpo para que no se apelotone. */
		font-size: 14px;
		font-weight: 400;
		line-height: 1.3;
		letter-spacing: -0.14px;
		color: #fff;
	}

	/* ---------- el campo y el boton, EN LINEA ---------- */
	.pr-page .pr-esh-news .pr-esh-newsletter,
	.pr-page .pr-home-community .pr-newsletter,
	.pr-page .pr-community .pr-newsletter,
	.pr-page .pr-apr-news .pr-apr-news-form {
		position: static;
		width: auto;
		margin: 0;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 8px;
	}
	.pr-page .pr-esh-news .pr-esh-newsletter input[type="email"],
	.pr-page .pr-home-community .pr-newsletter input[type="email"],
	.pr-page .pr-community .pr-newsletter input[type="email"],
	.pr-page .pr-apr-news .pr-apr-news-form input[type="email"] {
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
		height: 40px;
		padding: 0 14px;
		border: 0;
		border-radius: 30px;
		background: #fff;
		font-family: var(--pr-font-body);
		font-size: 12px;
		font-weight: 300;
		color: #1e1e1e;
	}
	.pr-page .pr-esh-news .pr-esh-newsletter button,
	.pr-page .pr-home-community .pr-newsletter button,
	.pr-page .pr-community .pr-newsletter button,
	.pr-page .pr-apr-news .pr-apr-news-form button {
		flex: 0 0 auto;
		width: auto;
		height: 40px;
		padding: 0 14px;
		display: inline-flex;
		align-items: center;
		gap: 5px;
		border: 0;
		border-radius: 30px;
		font-family: var(--pr-font-body);
		font-size: 12px;
		font-weight: 400;
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
	}

	/* ---------- color del boton, por pagina ---------- */
	/* Home y Sobre nosotros: de cristal (nodos 4011 y 4018). */
	.pr-page .pr-esh-news .pr-esh-newsletter button,
	.pr-page .pr-home-community .pr-newsletter button {
		color: #fff;
		background: rgba(255, 255, 255, 0.14);
		-webkit-backdrop-filter: blur(14px) saturate(1.5);
		backdrop-filter: blur(14px) saturate(1.5);
		/* En el nodo el boton es otra pieza de cristal, con su propio canto:
		   no una pastilla rellena. */
		box-shadow:
			inset 0 0 0 1px rgba(255, 255, 255, 0.42),
			inset 0 1px 0 rgba(255, 255, 255, 0.55);
	}
	/* Sports (EU, ES y US): ROJO y sin cristal (nodos 4012 y 4016). */
	.pr-page .pr-community .pr-newsletter button {
		color: #fff;
		background: var(--pr-red, #b71f2f);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow: none;
	}
	/* Active: ambar de la marca (nodo 4017). */
	.pr-page .pr-apr-news .pr-apr-news-form button {
		color: #fff;
		background: #f99b25;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow: none;
	}

	/* LA FOTO SUBE 66px (peticion 27/08/2026: «sube un poco la imagen de la caja
	   de suscripcion de active, que se vea la capsula»).
	   Medido con los pixeles de la propia foto: la capsula ocupa la franja
	   y 144..328 de los 600 de alto, o sea 72..164 en pantalla, y la tarjeta
	   arranca en 142: los ultimos 22px quedaban tapados.
	   La foto (750x600) se servia a 375x300, MISMO aspecto, asi que no habia
	   recorte y `object-position` no podia hacer nada. Se le da 66px de alto de
	   mas y se sube otros 66: `object-fit: cover` la agranda un 22% (457x366,
	   por debajo de su tamano real, sin perdida), la banda sigue cubierta de
	   punta a punta y la capsula queda en 22..134, con 8px de aire antes de la
	   tarjeta. El recorte horizontal (41px por lado) no toca la capsula, que va
	   centrada. */
	.pr-page .pr-apr-news > img.pr-apr-news-bg.pr-solo-mov {
		display: block !important;
		position: absolute;
		inset: -66px 0 0;
		width: 100%;
		height: calc(100% + 66px);
		object-fit: cover;
		object-position: 50% 50%;
	}

	/* Active va sobre foto CLARA: el texto de la tarjeta es negro (nodo 4017). */
	.pr-page .pr-apr-news .pr-esh-canvas > p,
	.pr-page .pr-apr-news .pr-news-card-line { color: #1e1e1e; }
	/* Active va sobre foto CLARA y su texto es negro: ahi el relleno se aclara
	   para que el negro se lea. Tambien plano y sin contorno, como el nodo. */
	.pr-page .pr-apr-news .pr-esh-canvas {
		background: rgba(255, 255, 255, 0.42);
		-webkit-backdrop-filter: blur(18px) saturate(1.6);
		backdrop-filter: blur(18px) saturate(1.6);
		/* El filo luminoso VUELVE (nodo 428:7943: la tarjeta SI tiene marco).
		   Lo que estaba mal el 26/08/2026 no era el filo: era que iba con un
		   lavado blanco al 32% y solo 4px de desenfoque, y eso convertia la
		   tarjeta en una placa opaca con una raya dura alrededor. Con el fondo
		   desenfocado de verdad, el mismo filo se lee como el canto del cristal.
		   El segundo inset, mas claro y solo en el borde de arriba, es la "Luz
		   -45 grados 80%" del panel de Vidrio. */
		box-shadow:
			inset 0 0 0 1px rgba(255, 255, 255, 0.75),
			inset 0 1px 0 rgba(255, 255, 255, 0.9);
	}

	/* ---------- Sobre nosotros: el ULTIMO bloque (nodo 448:3898) ----------
	   OJO: esto va en `.pr-abt-ciencia`, el bloque final, NO en el hero. El
	   26/08/2026 se aplico por error al hero y se lo llevo por delante: le
	   escondio el h1 y lo dejo convertido en una tarjeta pequeña. El hero no se
	   toca. */
	.pr-page .pr-abt-ciencia {
		position: relative;
		min-height: 300px;
		height: auto;
		padding: 0;
		display: flex;
		overflow: hidden;
	}
	/* El lienzo es solo el envoltorio: la tarjeta de cristal es `.pr-abt-glass`,
	   que es quien lleva dentro el titular, el texto y el boton. */
	.pr-page .pr-abt-ciencia .pr-esh-canvas {
		flex: 1 1 auto;
		display: flex;
		align-items: flex-end;
		height: auto;
		padding: 0;
	}
	/* El titular del bloque cede el sitio a la linea del nodo, pero se queda en
	   el arbol para el lector de pantalla y para el buscador. */
	.pr-page .pr-abt-ciencia .pr-abt-glass > h2 {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
	.pr-page .pr-abt-ciencia .pr-abt-btn-blanco {
		position: static;
		left: auto;
		top: auto;
		/* El margen de escritorio dejaba 30px entre el texto y el boton, cuando
		   en las otras cuatro tarjetas son 12: lo pone el `gap` de la tarjeta. */
		margin: 0;
		width: auto;
		max-width: 100%;
		align-self: flex-start;
		min-height: 40px;
		height: auto;
		padding: 9px 14px;
		display: inline-flex;
		align-items: center;
		gap: 5px;
		border-radius: 30px;
		font-size: 12px;
		font-weight: 400;
		line-height: 1.25;
		/* Sin `nowrap`: el rotulo en español es largo y se salia de la tarjeta. */
		white-space: normal;
	}
}

/* ==========================================================================
   LINEA DE TEXTO DE LA TARJETA MOVIL — nodos 448:3895 a 448:3898 — 26/08/2026
   El cambio de diseño es solo de movil, asi que conviven dos textos: el largo
   de siempre en escritorio y el corto del nodo en movil. Solo se ve uno.
   ========================================================================== */
.pr-news-card-line { display: none; }

/* ==========================================================================
   CENTRO DE AYUDA — 26/08/2026
   Un "cuadrado" por categoria que se despliega con sus preguntas, como pide la
   nota del disenador del propio documento. Cada pregunta reutiliza el acordeon
   `.pr-faq-*` de las fichas, asi que aqui solo va lo propio de la pagina.
   ========================================================================== */
.pr-ayuda-hero {
	padding: 96px 0 40px;
	background: #f5f5f5;
}
.pr-page .pr-ayuda-h1 {
	margin: 0;
	font-family: var(--pr-font-body);
	font-size: 56px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -1.12px;
	color: #1e1e1e;
}
.pr-ayuda-sub {
	max-width: 46ch;
	margin: 16px 0 0;
	font-family: var(--pr-font-body);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.5;
	color: rgba(30, 30, 30, 0.72);
}

/* --- buscador --- */
.pr-ayuda-buscar {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 520px;
	margin-top: 32px;
}
.pr-ayuda-buscar[hidden] { display: none; }
.pr-ayuda-lupa {
	position: absolute;
	left: 18px;
	display: inline-flex;
	color: rgba(30, 30, 30, 0.5);
	pointer-events: none;
}
.pr-ayuda-buscar input {
	width: 100%;
	height: 56px;
	padding: 0 48px 0 48px;
	font-family: var(--pr-font-body);
	font-size: 17px;
	font-weight: 300;
	color: #1e1e1e;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.14);
	border-radius: 999px;
	-webkit-appearance: none;
	appearance: none;
}
.pr-ayuda-buscar input:focus {
	outline: none;
	border-color: rgba(0, 0, 0, 0.45);
}
.pr-ayuda-buscar input::-webkit-search-cancel-button { display: none; }
.pr-ayuda-x {
	position: absolute;
	right: 14px;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.06);
	color: #1e1e1e;
	cursor: pointer;
}
.pr-ayuda-x[hidden] { display: none; }
.pr-ayuda-cuenta {
	margin: 14px 0 0;
	font-family: var(--pr-font-body);
	font-size: 15px;
	font-weight: 400;
	color: rgba(30, 30, 30, 0.62);
}
.pr-ayuda-cuenta[hidden] { display: none; }

/* --- categorias --- */
.pr-ayuda-cats { padding: 48px 0 96px; }
.pr-ayuda-cat {
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 20px;
	background: #fff;
	overflow: hidden;
}
.pr-ayuda-cat + .pr-ayuda-cat { margin-top: 16px; }
.pr-ayuda-cat[hidden] { display: none; }
.pr-page .pr-ayuda-cat-h { margin: 0; font-size: inherit; }
.pr-ayuda-cat-btn {
	width: 100%;
	min-height: 82px;
	padding: 20px 28px;
	display: flex;
	align-items: center;
	gap: 14px;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
	font-family: var(--pr-font-body);
}
/* Los estados del boton, fijados uno a uno (avisado el 26/08/2026: "arregla
   ese efecto de hover en el titular de la seccion").
   El boton heredaba `color: #fff` de las reglas de botones del tema, asi que
   todo lo que no llevara color propio -el contador de preguntas- salia blanco
   sobre blanco; y al pasar por encima le entraba el fondo de boton de
   WooCommerce/GeneratePress. Se declaran reposo y hover completos para que no
   quede ni una propiedad a merced del tema: esto es un titular que se pulsa,
   no un boton de formulario. */
.pr-page .pr-ayuda-cat-btn,
.pr-page .pr-ayuda-cat-btn:hover,
.pr-page .pr-ayuda-cat-btn:focus,
.pr-page .pr-ayuda-cat-btn:focus-visible,
.pr-page .pr-ayuda-cat-btn:active {
	color: #1e1e1e;
	border: 0;
	box-shadow: none;
	text-decoration: none;
	filter: none;
	transform: none;
	background-image: none;
}
.pr-page .pr-ayuda-cat-btn { background-color: transparent; }
.pr-page .pr-ayuda-cat-btn:hover { background-color: rgba(0, 0, 0, 0.025); }
/* El foco por teclado si tiene que verse, pero por DENTRO: un `outline` por
   fuera se sale del `border-radius` de la tarjeta y se ve cortado. */
.pr-page .pr-ayuda-cat-btn:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px rgba(30, 30, 30, 0.55);
}
.pr-ayuda-cat-txt {
	flex: 1 1 auto;
	font-size: 26px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.26px;
	color: #1e1e1e;
}
/* El numero de preguntas: orienta antes de abrir. */
.pr-ayuda-cat-n {
	flex: 0 0 auto;
	min-width: 30px;
	height: 26px;
	padding: 0 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.07);
	font-size: 14px;
	font-weight: 500;
	color: rgba(30, 30, 30, 0.66);
}
/* La cruz que gira, igual que la del acordeon de las fichas. */
.pr-ayuda-cat-mas {
	flex: 0 0 auto;
	position: relative;
	width: 18px;
	height: 18px;
	transition: transform 0.28s ease;
}
.pr-ayuda-cat-mas::before,
.pr-ayuda-cat-mas::after {
	content: '';
	position: absolute;
	background: #1e1e1e;
}
.pr-ayuda-cat-mas::before { left: 0; top: 8px; width: 18px; height: 2px; }
.pr-ayuda-cat-mas::after { left: 8px; top: 0; width: 2px; height: 18px; }
.pr-ayuda-cat-btn[aria-expanded="true"] .pr-ayuda-cat-mas { transform: rotate(45deg); }

/* El cuerpo: rejilla de una fila que pasa de 0fr a 1fr, el mismo mecanismo
   que el resto de desplegables del sitio. */
.pr-ayuda-cat-body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.34s cubic-bezier(0.22, 0.7, 0.24, 1);
}
.pr-ayuda-cat-body.is-open { grid-template-rows: 1fr; }
.pr-ayuda-cat-in {
	overflow: hidden;
	padding: 0 28px;
}
.pr-ayuda-cat-body.is-open .pr-ayuda-cat-in { padding-bottom: 12px; }

.pr-ayuda-faq[hidden] { display: none; }
/* En escritorio se hereda el `padding: 20px 63px 20px 62px` de la ficha, que
   para una pastilla de este ancho es demasiado: se recorta a algo proporcional
   al tamano de letra de aqui, dejando sitio al chevron por la derecha. */
/* ==== EU y US igualados a ES (avisado el 26/08/2026: "compara como lo pones
   en EU y ES, iguala el de ES"). El centro de ayuda de esos mercados va con la
   carroceria `pr-page--us`, que es la piel de la FICHA de producto, y por ahi
   se colaban tres cosas suyas que en esta pagina no pintan nada:
     - `.pr-page--us .pr-faq-item` mete `margin-left: 141px` (la sangria de la
       ficha): las preguntas quedaban empujadas a la derecha del titular.
     - su estado abierto es ROJO (`--pr-red`): aqui va NEGRO, como en ES.
     - su barra es `position: fixed` y no ocupa sitio, asi que el titular
       quedaba debajo; en ES es pegajosa y empuja el contenido. Se compensa
       con el alto de la barra en el relleno del hero.
   Van con `.pr-page--ayuda` delante y DESPUES de las reglas de la ficha, para
   ganarles el desempate con su misma especificidad. */
.pr-page--ayuda .pr-ayuda-faq { margin: 0 0 8px; }
.pr-page--ayuda .pr-ayuda-faq:not(.is-open) .pr-faq-q:hover { background: #262626; color: #fff; }
.pr-page--ayuda .pr-ayuda-faq.is-open .pr-faq-q,
.pr-page--ayuda .pr-ayuda-faq.is-open .pr-faq-q:hover,
.pr-page--ayuda .pr-ayuda-faq.is-open .pr-faq-q:focus {
	background: #000;
	color: #fff;
}
/* La barra fija no empuja: el hero absorbe sus 75px ademas de los 96 propios. */
.pr-page--us.pr-page--ayuda .pr-ayuda-hero { padding-top: 171px; }

.pr-ayuda-faq .pr-faq-q {
	font-size: 18px;
	padding: 18px 56px 18px 28px;
	min-height: 0;
}
/* Red de seguridad para las respuestas (avisado el 26/08/2026: "falta TODO el
   contenido de las FAQs"). `.pr-faq-answer` nace con `height: 0` y es el JS
   quien la abre midiendo el contenido; el JS de esta pagina solo ponia la
   clase, asi que el texto estaba en el HTML -y en el schema- pero no se veia
   nunca. Ahora el JS mide, y ademas esto lo deja visible aunque el JS no
   llegue a ejecutarse. */
.pr-page .pr-ayuda-faq.is-open .pr-faq-answer { height: auto; }
/* Aire entre parrafos (avisado el 26/08/2026: "cuando haya un salto de
   parrafo, aplica un espacio. ahora queda raro").
   Las respuestas del documento vienen partidas en varios parrafos -la del
   sello de calidad tiene tres- y salian pegados unos a otros, leyendose como
   un solo bloque. El tema si tiene este ritmo, pero solo lo declara para
   `.pr-page--home` y `.pr-page--us`; el centro de ayuda va con la carroceria
   de `pr-page--home-es`, que se quedo sin la regla.
   Se limita a las respuestas de ESTA pagina para no cambiar el interlineado de
   las FAQ de las fichas, que ya estan revisadas. */
.pr-page .pr-ayuda-faq .pr-faq-answer-inner p { margin: 0 0 14px; }
.pr-page .pr-ayuda-faq .pr-faq-answer-inner > *:last-child { margin-bottom: 0; }
/* El rotulo de un sub-bloque -"Condiciones de devolucion", "Direccion de
   devolucion"- necesita mas aire ARRIBA que entre parrafos: abre seccion. */
.pr-ayuda-sub-h { margin-top: 20px; }
.pr-page .pr-ayuda-faq .pr-faq-answer-inner .pr-ayuda-sub-h { margin-bottom: 8px; }
.pr-ayuda-lista {
	margin: 8px 0 0;
	padding-left: 20px;
	list-style: disc;
}
.pr-ayuda-lista li {
	margin: 0 0 6px;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
}

/* --- sin resultados --- */
.pr-ayuda-nada { padding: 36px 4px; }
.pr-ayuda-nada[hidden] { display: none; }
.pr-ayuda-nada-h {
	margin: 0;
	font-family: var(--pr-font-body);
	font-size: 20px;
	font-weight: 500;
	color: #1e1e1e;
}
.pr-ayuda-nada-p {
	margin: 8px 0 0;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 300;
	color: rgba(30, 30, 30, 0.7);
}
.pr-ayuda-volver {
	margin-top: 18px;
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 999px;
	background: none;
	font-family: var(--pr-font-body);
	font-size: 15px;
	cursor: pointer;
}

/* --- cierre --- */
.pr-ayuda-cierre {
	padding: 72px 0 88px;
	background: #1e1e1e;
	color: #fff;
}
.pr-page .pr-ayuda-cierre h2 {
	margin: 0;
	font-family: var(--pr-font-body);
	font-size: 36px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.36px;
	color: #fff;
}
.pr-ayuda-cierre p {
	max-width: 56ch;
	margin: 14px 0 0;
	font-family: var(--pr-font-body);
	font-size: 17px;
	font-weight: 300;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.8);
}
/* El boton llevaba tinta blanca sobre fondo blanco (avisado el 26/08/2026:
   "el bloque de estamos aqui para ayudarte esta directamente roto"): el color
   lo ponia `.pr-esh-btn`, que sobre los fondos oscuros del resto de la web va
   en blanco y aqui gana por ir despues en la hoja. Se sube la especificidad
   con `.pr-page` y se declaran tambien el hover y el foco. */
.pr-page .pr-ayuda-cierre .pr-ayuda-cta,
.pr-page .pr-ayuda-cierre .pr-ayuda-cta:hover,
.pr-page .pr-ayuda-cierre .pr-ayuda-cta:focus,
.pr-page .pr-ayuda-cierre .pr-ayuda-cta:focus-visible {
	background: #fff;
	color: #1e1e1e;
}
.pr-page .pr-ayuda-cierre .pr-ayuda-cta svg { flex: 0 0 auto; }
/* El relleno TAMBIEN con `.pr-page` delante: la regla de abajo pide 26px pero
   `.pr-esh-btn` los bajaba a 12 por especificidad, y el rotulo quedaba pegado a
   los bordes de la pildora (medido: pildora de 208 para un texto de 186). */
.pr-page .pr-ayuda-cierre .pr-ayuda-cta { padding: 0 26px; }
.pr-page .pr-ayuda-cierre .pr-ayuda-cta:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.7);
	outline-offset: 3px;
}
.pr-ayuda-cierre .pr-ayuda-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 26px;
	min-height: 52px;
	padding: 0 26px;
	border-radius: 999px;
	background: #fff;
	color: #1e1e1e;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 400;
}
.pr-ayuda-cierre .pr-ayuda-cta:hover { opacity: 0.88; }

/* ---------------------------- MOVIL ---------------------------- */
@media (max-width: 767px) {
	.pr-ayuda-hero { padding: 40px 0 28px; }
	/* En EU y US la barra movil tambien es fija: mismos 60px de compensacion. */
	.pr-page--us.pr-page--ayuda .pr-ayuda-hero { padding-top: 100px; }
	.pr-page .pr-ayuda-h1 {
		font-size: 32px;
		letter-spacing: -0.32px;
	}
	.pr-ayuda-sub {
		max-width: none;
		margin-top: 12px;
		font-size: 16px;
		line-height: 1.45;
	}
	.pr-ayuda-buscar {
		max-width: none;
		margin-top: 22px;
	}
	.pr-ayuda-buscar input {
		height: 50px;
		font-size: 16px;   /* 16 o menos hace que iOS haga zoom al enfocar */
	}

	.pr-ayuda-cats { padding: 28px 0 56px; }
	.pr-ayuda-cat { border-radius: 15px; }
	.pr-ayuda-cat + .pr-ayuda-cat { margin-top: 12px; }
	.pr-ayuda-cat-btn {
		min-height: 68px;
		padding: 16px 18px;
		gap: 10px;
	}
	.pr-ayuda-cat-txt {
		font-size: 19px;
		letter-spacing: -0.19px;
	}
	.pr-ayuda-cat-in { padding: 0 18px; }
	/* La pastilla llevaba `padding-left: 0` -errata mia del 26/08/2026- y el
	   texto de la pregunta salia pegado al borde redondeado, tocandolo.
	   18px a la izquierda y 42 a la derecha son las mismas cotas que usan las
	   FAQ de las fichas en movil, asi que las preguntas de aqui respiran igual
	   que las de Sports o Active. Los 42 de la derecha dejan sitio al chevron. */
	.pr-ayuda-faq .pr-faq-q {
		font-size: 16px;
		padding: 14px 42px 14px 18px;
		min-height: 0;
	}
	.pr-ayuda-lista li { font-size: 15px; }

	.pr-ayuda-cierre { padding: 44px 0 52px; }
	.pr-page .pr-ayuda-cierre h2 {
		font-size: 26px;
		letter-spacing: -0.26px;
	}
	.pr-ayuda-cierre p {
		max-width: none;
		margin-top: 12px;
		font-size: 16px;
	}
	/* PILDORA, no losa. En movil llevaba `width:100%` y salia como una barra
	   blanca de 335px a todo el ancho del bloque oscuro, mientras en escritorio
	   es una pildora de 208 ajustada al texto: de ahi el «el bloque negro no se
	   ve bien, el boton sobre todo» del 27/08/2026. Se deja al ancho de su
	   contenido y alineada a la izquierda, como el titular y el parrafo. */
	.pr-ayuda-cierre .pr-ayuda-cta {
		margin-top: 26px;
		width: auto;
		align-self: flex-start;
		justify-content: center;
	}
}

/* ==========================================================================
   TITULAR DE FAQ EN MOVIL, IGUAL QUE EL DE RESEÑAS — 26/08/2026
   Medido: en Sports EU y US salia a 32px y en ES y Active a 24, mientras el de
   reseñas va a 26. El culpable era `.pr-page--us .pr-faq h2` (dos clases), que
   le ganaba a la regla movil de una sola y colaba la cota de escritorio.
   Los cuatro a 26, como `.pr-heading--rev` y `.pr-apr-opinan-h2`.
   ========================================================================== */
@media (max-width: 767px) {
	.pr-page .pr-faq h2,
	.pr-page--us .pr-faq h2,
	.pr-page--eu .pr-faq h2,
	.pr-page--home .pr-faq h2,
	.pr-page--home-es .pr-faq h2,
	.pr-page--spr-es .pr-faq h2,
	.pr-page--apr .pr-faq h2 {
		font-size: 26px;
		font-weight: 500;
		line-height: 1.25;
		letter-spacing: -0.26px;
		margin-bottom: 24px;
	}
}

/* ==========================================================================
   FRICCION PARA NO DESCARGAR IMAGENES — 26/08/2026
   Pedido: que no se pueda guardar una imagen manteniendo pulsado ni con el
   clic derecho. Conviene tener claro el alcance: esto NO protege el archivo.
   Para pintar una imagen el navegador ya la ha descargado al dispositivo, asi
   que cualquiera con las herramientas de desarrollo, la pestaña de red, curl,
   una extension o una captura de pantalla la tiene igual. Lo que se consigue
   es cortar el gesto facil, que es la via del 95% de los casos.

   Se aplica SOLO a imagenes y videos. El texto se sigue pudiendo seleccionar
   y copiar a proposito: bloquearlo estorba a quien quiere copiar una
   direccion, un codigo de descuento o un dato de contacto, y a los lectores
   de pantalla.
   ========================================================================== */
img,
video,
picture,
.pr-page img,
.pr-page video {
	/* El menu de iOS al mantener pulsado ("Guardar en Fotos"). */
	-webkit-touch-callout: none;
	/* Que no se pueda seleccionar la imagen y arrastrarla. */
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	user-drag: none;
}

/* Los iconos y logotipos decorativos tampoco necesitan puntero de "arrastrar". */
img { -webkit-tap-highlight-color: transparent; }

/* ==========================================================================
   COOKIES — banner propio (27/08/2026)
   Sustituye a Complianz. Habla el idioma de la web: tarjeta blanca radio 30,
   sombra suave, botones píldora y la tipografía del cuerpo. Abajo a la
   izquierda y NO a pantalla completa: no tapa el contenido ni obliga a
   decidir para poder leer, que es lo que convierte un banner en un muro.
   ========================================================================== */
.pr-cookies[hidden] { display: none; }
.pr-cookies {
	position: fixed;
	z-index: 9000;   /* por encima del header fijo (90) y del carrito */
	left: 20px;
	right: 20px;
	bottom: 20px;
	display: flex;
	justify-content: flex-start;
	pointer-events: none;   /* solo la tarjeta recibe clics */
}
.pr-cookies-caja {
	pointer-events: auto;
	width: 100%;
	max-width: 460px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 26px 28px 24px;
	background: #fff;
	border-radius: 30px;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
	font-family: var(--pr-font-body);
	/* Entra deslizando desde abajo; con `prefers-reduced-motion` se queda
	   quieta (la regla está al final del fichero, con el resto). */
	transform: translateY(12px);
	opacity: 0;
	transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.32s ease;
}
.pr-cookies.is-visible .pr-cookies-caja { transform: none; opacity: 1; }

.pr-page .pr-cookies-titulo {
	margin: 0 0 8px;
	font-family: var(--pr-font-body);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0.5px;
	color: #1e1e1e;
}
.pr-page .pr-cookies-texto {
	margin: 0;
	font-size: 15px;
	font-weight: 300;
	line-height: 21px;
	letter-spacing: 0.3px;
	color: rgba(0, 0, 0, 0.72);
}
.pr-page .pr-cookies-texto a { color: #1e1e1e; text-decoration: underline; }

/* El detalle por categorías */
.pr-cookies-detalle[hidden] { display: none; }
.pr-cookies-detalle { margin-top: 18px; }
.pr-cookies-cat {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 14px;
	cursor: pointer;
}
.pr-cookies-cat:last-child { margin-bottom: 0; }
.pr-cookies-cat input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: #1e1e1e;
	cursor: pointer;
}
.pr-cookies-cat input:disabled { cursor: default; opacity: 0.55; }
.pr-page .pr-cookies-cat span {
	font-size: 14px;
	font-weight: 300;
	line-height: 19px;
	letter-spacing: 0.3px;
	color: rgba(0, 0, 0, 0.7);
}
.pr-page .pr-cookies-cat strong {
	display: block;
	font-weight: 600;
	color: #1e1e1e;
}

/* Botones: los mismos que el resto de la web, en pequeño */
.pr-cookies-botones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}
.pr-cookies-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	padding: 0 20px;
	border: 0;
	border-radius: 30px;
	background: #1e1e1e;
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.3px;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: opacity 0.2s ease;
}
.pr-cookies-btn:hover { opacity: 0.85; }
.pr-cookies-btn--fantasma {
	background: transparent;
	border: 1px solid rgba(0, 0, 0, 0.25);
	color: #1e1e1e;
}
.pr-cookies-btn--fantasma:hover { border-color: #1e1e1e; opacity: 1; }
.pr-cookies-btn[hidden] { display: none; }
/* «Aceptar todas» al final de la fila y estirándose: es la acción principal y
   así queda a la derecha en escritorio y a todo el ancho en móvil. */
.pr-cookies-botones [data-pr-cookies-aceptar] { flex: 1 1 auto; }

/* El enlace del pie para volver a decidir (revocar) */
.pr-esh-footer .pr-cookies-enlace,
.pr-cookies-enlace {
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: 0.5px;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}
.pr-cookies-enlace:hover { text-decoration: underline; }

@media (max-width: 767px) {
	.pr-cookies { left: 12px; right: 12px; bottom: 12px; }
	.pr-cookies-caja {
		max-width: none;
		padding: 22px 20px 20px;
		border-radius: 24px;
	}
	.pr-page .pr-cookies-titulo { font-size: 18px; }
	.pr-page .pr-cookies-texto { font-size: 14px; line-height: 20px; }
	/* A 375px cuatro píldoras en fila no caben: cada una a todo el ancho. */
	.pr-cookies-botones { gap: 8px; }
	.pr-cookies-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.pr-cookies-caja { transition: none; transform: none; }
}