/* =============================================================================
   PRIDO — Home Modern · CSS del hero para la portada V2 · r29 (2026-09-25)
   -----------------------------------------------------------------------------
   Se encola SOLO con la portada V2 (inc/home-modern/loader.php →
   prido_home_modern_hero_r11()). El modo legado (?prido_home=legacy o
   PRIDO_HOME_V2 = false) sigue con home-modern.r28.css, que no cambia.

   Qué queda respecto de r28:
   - Base de la raíz .prido-home-modern, body.home y box-sizing.
   - [01] Hero Cifra, con tres cambios: cifra decorativa como ::before, precio
     tachado con contraste AA en claro y barra de progreso con animación CSS
     (transform) en vez de requestAnimationFrame (ver home-modern.r11.js).
   - Tres reglas globales que la home toma de hojas que se dejarán de cargar en
     ella (al final del archivo).
   Qué sale: el bloque de tokens y tipografía base copiado del maestro (ya lo
   carga prido-design-tokens.css en todo el sitio), las variables --phm-* y las
   primitivas, secciones [02]–[09], reveals y responsive de la portada V1: la V2
   no imprime ninguna de esas clases (templates/home-modern/sections/v2-*.php).
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Raíz del módulo y ajustes de la página
   -------------------------------------------------------------------------- */
.prido-home-modern {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	isolation: isolate;
}

/* ocultar título nativo de página en la home (paridad con versión anterior) */
body.home :is(.wd-page-title, .page-title) { display: none !important; }
body.home :is(.main-page-wrapper, .wd-page-content, .wd-content-area.site-content, .content-layout-wrapper) {
	margin-top: 0 !important;
	padding-top: 0 !important;
}
body.home .main-page-wrapper { padding-bottom: 0 !important; }

.prido-home-modern .prido-hm-missing { border-radius: 4px; }

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

/* -----------------------------------------------------------------------------
   [01] Hero — "Cifra sin disco" (handoff Claude Design · Hero Home PRIDO,
   dirección D). Port 1:1 del mockup: lienzos 1440x820 / 834x900 / 390x720.

   Las medidas del mockup son absolutas. Aquí se reproducen con una unidad
   proporcional `--phc-u`, que vale exactamente 1px cuando el viewport mide el
   ancho del lienzo del mockup. A ese ancho el render es pixel a pixel; en el
   resto la composición escala sin deformarse.

   Prefijo propio `phc-` para no colisionar con el CSS del resto de la home.
   -------------------------------------------------------------------------- */

.prido-home-modern .phm-hero-cifra {
	--phc-u: calc(min(100vw, 1680px) / 1440);
	/* Mitad del lienzo del mockup. Las posiciones se miden desde el centro
	   (50% ± N), no desde los bordes del viewport: así la composición queda
	   centrada y con márgenes propios en pantallas más anchas que el lienzo,
	   mientras el fondo tonal sigue ocupando todo el ancho (full bleed). */
	--phc-half: 720;
	--phc-ink: #0b1e2e;
	--phc-teal: #1fb6b0;
	--phc-teal-700: #0e7e7a;
	--phc-promo: #b7301a;
	--phc-muted: #5c6b78;
	--phc-ease: cubic-bezier(0.2, 0, 0.2, 1);
	--phc-ease-emph: cubic-bezier(0.2, 0, 0, 1);
	--phc-font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
	--phc-font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--phc-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

	position: relative;
	width: 100%;
	/* El lienzo del mockup es 1440x820: la altura se deriva de la misma unidad
	   que el resto para que la proporción se mantenga a cualquier ancho. */
	height: calc(820 * var(--phc-u));
	min-height: 560px;
	overflow: hidden;
	isolation: isolate;
	background: #f2efe9;
	border-bottom: 0;
	font-family: var(--phc-font-sans);
	contain: paint;
}
.prido-home-modern .phm-hero-cifra * { box-sizing: border-box; }

/* ---------- slides ---------- */
.prido-home-modern .phc-sl {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.62s var(--phc-ease), visibility 0.62s;
}
.prido-home-modern .phc-sl.on { opacity: 1; visibility: visible; }

.prido-home-modern .phc-rise {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.55s var(--phc-ease-emph), transform 0.55s var(--phc-ease-emph);
}
.prido-home-modern .phc-sl.on .phc-rise { opacity: 1; transform: none; }
.prido-home-modern .phc-sl.on .phc-r1 { transition-delay: 0.10s; }
.prido-home-modern .phc-sl.on .phc-r2 { transition-delay: 0.17s; }
.prido-home-modern .phc-sl.on .phc-r3 { transition-delay: 0.24s; }
.prido-home-modern .phc-sl.on .phc-r4 { transition-delay: 0.31s; }
.prido-home-modern .phc-sl.on .phc-r5 { transition-delay: 0.38s; }

/* ---------- fondo tonal + cifra ---------- */
.prido-home-modern .phc-bg { position: absolute; inset: 0; z-index: 0; }
.prido-home-modern .phc-num {
	position: absolute;
	z-index: 1;
	font-family: var(--phc-font-display);
	font-weight: 600;
	line-height: 0.76;
	letter-spacing: -0.045em;
	white-space: nowrap;
	pointer-events: none;
	font-variant-numeric: lining-nums;
	-webkit-user-select: none;
	user-select: none;
}
/* r29 (accesibilidad): la cifra es decorativa (el descuento ya se lee en .phc-off) y
   01-hero.php la imprime en data-num con el nodo vacío; así no cuenta como texto de bajo
   contraste (#e6ebef sobre blanco, 1,2:1). Mismo tamaño, fuente y posición que antes. */
.prido-home-modern .phc-num::before { content: attr(data-num); }

/* ---------- producto ---------- */
.prido-home-modern .phc-disc {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	border-radius: 0;
	background: none;
}
.prido-home-modern .phc-shot {
	width: 100%;
	height: 100%;
	transform: scale(0.955);
	transition: transform 1.1s var(--phc-ease-emph);
}
.prido-home-modern .phc-sl.on .phc-shot { transform: scale(1); }
.prido-home-modern .phc-shot img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	mix-blend-mode: darken;
}

/* ---------- bloque de texto ---------- */
.prido-home-modern .phc-info {
	position: absolute;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.prido-home-modern .phc-ey {
	display: block;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--phc-teal-700);
	margin: 0;
}
.prido-home-modern .phc-name {
	font-family: var(--phc-font-display);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
	margin: 0;
	color: var(--phc-ink);
	text-wrap: balance;
}
.prido-home-modern .phc-attrs { margin: 0; color: var(--phc-muted); }

.prido-home-modern .phc-prow {
	display: flex;
	align-items: baseline;
	gap: calc(12 * var(--phc-u));
	flex-wrap: wrap;
}
.prido-home-modern .phc-prow .phc-was {
	font-weight: 500;
	/* r29 (accesibilidad): #8a96a2 daba 3,01:1 sobre blanco; #6b7886 da 4,51:1.
	   En oscuro sigue #8a96a2 (6,2:1 sobre #0a131b). */
	color: #6b7886;
	text-decoration: line-through;
	font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] .prido-home-modern .phc-prow .phc-was { color: #8a96a2; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .prido-home-modern .phc-prow .phc-was { color: #8a96a2; }
}
.prido-home-modern .phc-prow .phc-now {
	font-weight: 800;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--phc-ink);
}
.prido-home-modern .phc-prow .phc-off {
	font-weight: 800;
	letter-spacing: 0.04em;
	border-radius: 2px;
	background: var(--phc-promo);
	color: #fff;
}
.prido-home-modern .phc-tr {
	margin: 0;
	letter-spacing: 0.01em;
	display: flex;
	align-items: center;
	color: var(--phc-muted);
}
.prido-home-modern .phc-tr i {
	border-radius: 50%;
	background: var(--phc-teal);
	flex: none;
	display: block;
}

.prido-home-modern .phc-btn {
	display: inline-flex;
	align-items: center;
	border-radius: 2px;
	font-weight: 800;
	text-transform: uppercase;
	border: 0;
	cursor: pointer;
	font-family: var(--phc-font-sans);
	text-decoration: none;
	background: var(--phc-teal-700);
	color: #fff;
	transition: background 0.18s var(--phc-ease), color 0.18s, transform 0.18s;
}
.prido-home-modern .phc-btn:hover,
.prido-home-modern .phc-btn:focus-visible {
	background: var(--phc-ink);
	color: #fff;
	transform: translateY(-2px);
}
.prido-home-modern .phc-btn svg { flex: none; }

/* ---------- navegación ---------- */
.prido-home-modern .phc-nav {
	position: absolute;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: calc(10 * var(--phc-u));
}
.prido-home-modern .phc-arr {
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: none;
	cursor: pointer;
	padding: 0;
	border: 1px solid rgba(11, 30, 46, 0.2);
	color: var(--phc-ink);
	transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.prido-home-modern .phc-arr:hover,
.prido-home-modern .phc-arr:focus-visible {
	background: var(--phc-ink);
	color: #fff;
	border-color: var(--phc-ink);
}
.prido-home-modern .phc-idx {
	font-family: var(--phc-font-mono);
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
	color: #8a8172;
}

/* ---------- rail de miniaturas ---------- */
.prido-home-modern .phc-rail {
	position: absolute;
	z-index: 4;
	display: flex;
	gap: calc(10 * var(--phc-u));
}
.prido-home-modern .phc-rail button {
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid rgba(11, 30, 46, 0.12);
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.2s, border-color 0.2s, transform 0.2s;
}
.prido-home-modern .phc-rail button img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	mix-blend-mode: darken;
}
.prido-home-modern .phc-rail button.on {
	opacity: 1;
	border-color: var(--phc-teal);
	transform: translateY(-4px);
}
.prido-home-modern .phc-rail button:hover,
.prido-home-modern .phc-rail button:focus-visible { opacity: 1; }

/* ---------- barra de progreso ---------- */
.prido-home-modern .phc-prog {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: rgba(11, 30, 46, 0.1);
	z-index: 9;
}
.prido-home-modern .phc-prog i {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--phc-teal);
	transform-origin: left;
	transform: scaleX(0);
}
/* r29: el progreso del autoplay es una animación compuesta (transform: scaleX), no un width
   escrito en cada frame de requestAnimationFrame. home-modern.r11.js pone .phc-auto al
   arrancar, alterna data-cycle a/b para reiniciarla (cambiar animation-name la reinicia sin
   forzar un reflow), .phc-paused para pausarla (puntero o foco dentro, pestaña oculta o hero
   fuera de pantalla) y avanza de slide en su animationend. Con prefers-reduced-motion no hay
   animación ni autoplay: la barra queda vacía, como antes. */
@keyframes phcProgA { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes phcProgB { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) {
	.prido-home-modern .phm-hero-cifra.phc-auto .phc-prog i { animation: phcProgA 6.2s linear forwards; }
	.prido-home-modern .phm-hero-cifra.phc-auto[data-cycle="b"] .phc-prog i { animation-name: phcProgB; }
	.prido-home-modern .phm-hero-cifra.phc-auto.phc-paused .phc-prog i { animation-play-state: paused; }
}

/* ---------- tonos por slide ---------- */
.prido-home-modern .phc-sl[data-tone="cream"] .phc-bg { background: #f2efe9; }
.prido-home-modern .phc-sl[data-tone="cream"] .phc-num { color: #dfd6c6; }
.prido-home-modern .phc-sl[data-tone="bone"] .phc-bg { background: #e8e4db; }
.prido-home-modern .phc-sl[data-tone="bone"] .phc-num { color: #d4ccbc; }
.prido-home-modern .phc-sl[data-tone="mint"] .phc-bg { background: #dcebe8; }
.prido-home-modern .phc-sl[data-tone="mint"] .phc-num { color: #bcd8d3; }
.prido-home-modern .phc-sl[data-tone="sand"] .phc-bg { background: #d9d2c4; }
.prido-home-modern .phc-sl[data-tone="sand"] .phc-num { color: #c6bdaa; }

/* =============================================================================
   Desktop — lienzo del mockup 1440 x 820
   ========================================================================== */
/* La cifra entra completa dentro del margen (el mockup la sangraba 26px por la
   derecha y se cortaba en pantallas anchas). Su margen es menor que el de los
   demás elementos a propósito: con la silla al 110% hay que correrla hacia el
   borde para que el recorte del producto no se la coma. */
/* Cifra y silla compiten por la misma franja: centrada, a la derecha del
   producto quedan ~415px libres, y a 372px la cifra medía 801 y se perdía
   detrás de la silla. Va a 280 (sigue siendo la pieza gráfica dominante) y
   pegada al borde, de modo que el producto solo le muerda el signo menos. */
.prido-home-modern .phc-num {
	right: calc(50% - (var(--phc-half) - 24) * var(--phc-u));
	top: 50%;
	transform: translateY(-50%);
	font-size: calc(280 * var(--phc-u));
}
/* La silla crece un 10% respecto al mockup (700 -> 770). Ese alto ya no cabe
   centrado sin pisar el rail de miniaturas, así que se ancla arriba y el aire
   sobrante queda abajo, donde vive la navegación. */
.prido-home-modern .phc-disc {
	left: calc(50% - (var(--phc-half) - 360) * var(--phc-u));
	top: calc(2 * var(--phc-u));
	width: calc(770 * var(--phc-u));
	height: calc(770 * var(--phc-u));
	max-height: 96%;
}
.prido-home-modern .phc-info {
	left: calc(50% - (var(--phc-half) - 104) * var(--phc-u));
	top: 50%;
	transform: translateY(-50%);
	width: calc(344 * var(--phc-u));
	gap: calc(17 * var(--phc-u));
}
.prido-home-modern .phc-ey { font-size: calc(11 * var(--phc-u)); }
.prido-home-modern .phc-name { font-size: calc(56 * var(--phc-u)); }
.prido-home-modern .phc-attrs { font-size: calc(14 * var(--phc-u)); }
.prido-home-modern .phc-prow .phc-was { font-size: calc(15 * var(--phc-u)); }
.prido-home-modern .phc-prow .phc-now { font-size: calc(40 * var(--phc-u)); }
.prido-home-modern .phc-prow .phc-off {
	font-size: calc(12 * var(--phc-u));
	padding: calc(4 * var(--phc-u)) calc(8 * var(--phc-u));
}
.prido-home-modern .phc-tr {
	font-size: calc(12.5 * var(--phc-u));
	gap: calc(7 * var(--phc-u));
}
.prido-home-modern .phc-tr i {
	width: calc(4 * var(--phc-u));
	height: calc(4 * var(--phc-u));
}
.prido-home-modern .phc-btn {
	height: calc(52 * var(--phc-u));
	padding: 0 calc(26 * var(--phc-u));
	font-size: calc(12 * var(--phc-u));
	letter-spacing: 0.14em;
	gap: calc(10 * var(--phc-u));
}
.prido-home-modern .phc-nav {
	left: calc(50% - (var(--phc-half) - 104) * var(--phc-u));
	bottom: calc(48 * var(--phc-u));
}
.prido-home-modern .phc-arr {
	width: calc(44 * var(--phc-u));
	height: calc(44 * var(--phc-u));
}
.prido-home-modern .phc-idx {
	font-size: calc(12 * var(--phc-u));
	margin-left: calc(10 * var(--phc-u));
}
.prido-home-modern .phc-rail {
	right: calc(50% - (var(--phc-half) - 104) * var(--phc-u));
	bottom: calc(30 * var(--phc-u));
}
.prido-home-modern .phc-rail button {
	width: calc(62 * var(--phc-u));
	height: calc(62 * var(--phc-u));
	padding: calc(6 * var(--phc-u));
}

/* =============================================================================
   Tablet — lienzo del mockup 834 x 900
   ========================================================================== */
@media (max-width: 1024px) {
	.prido-home-modern .phm-hero-cifra {
		--phc-u: calc(100vw / 834);
		height: calc(900 * var(--phc-u));
		max-height: none;
		min-height: 0;
	}
	.prido-home-modern .phc-num {
		right: calc(40 * var(--phc-u));
		top: calc(44 * var(--phc-u));
		transform: none;
		font-size: calc(214 * var(--phc-u));
	}
	.prido-home-modern .phc-disc {
		left: calc(197 * var(--phc-u));
		top: calc(34 * var(--phc-u));
		transform: none;
		width: calc(440 * var(--phc-u));
		height: calc(440 * var(--phc-u));
		max-height: none;
	}
	.prido-home-modern .phc-info {
		left: calc(56 * var(--phc-u));
		right: calc(56 * var(--phc-u));
		top: calc(486 * var(--phc-u));
		transform: none;
		width: auto;
		gap: calc(15 * var(--phc-u));
	}
	.prido-home-modern .phc-name { font-size: calc(46 * var(--phc-u)); }
	.prido-home-modern .phc-prow .phc-now { font-size: calc(36 * var(--phc-u)); }
	.prido-home-modern .phc-rail {
		right: calc(56 * var(--phc-u));
		bottom: calc(40 * var(--phc-u));
	}
	.prido-home-modern .phc-rail button {
		width: calc(54 * var(--phc-u));
		height: calc(54 * var(--phc-u));
	}
	.prido-home-modern .phc-nav { display: none; }
}

/* =============================================================================
   Mobile — lienzo del mockup 390 x 720
   ========================================================================== */
@media (max-width: 767px) {
	.prido-home-modern .phm-hero-cifra {
		--phc-u: calc(100vw / 390);
		height: calc(720 * var(--phc-u));
	}
	.prido-home-modern .phc-num {
		right: calc(20 * var(--phc-u));
		top: calc(22 * var(--phc-u));
		font-size: calc(142 * var(--phc-u));
	}
	.prido-home-modern .phc-disc {
		left: calc(30 * var(--phc-u));
		top: calc(34 * var(--phc-u));
		width: calc(330 * var(--phc-u));
		height: calc(330 * var(--phc-u));
	}
	.prido-home-modern .phc-info {
		left: calc(24 * var(--phc-u));
		right: calc(24 * var(--phc-u));
		top: calc(372 * var(--phc-u));
		gap: calc(12 * var(--phc-u));
	}
	.prido-home-modern .phc-name { font-size: calc(34 * var(--phc-u)); }
	.prido-home-modern .phc-attrs { font-size: calc(13 * var(--phc-u)); }
	.prido-home-modern .phc-prow .phc-now { font-size: calc(30 * var(--phc-u)); }
	.prido-home-modern .phc-btn {
		width: 100%;
		justify-content: center;
		height: calc(50 * var(--phc-u));
	}
	.prido-home-modern .phc-rail {
		left: calc(24 * var(--phc-u));
		right: auto;
		bottom: calc(32 * var(--phc-u));
		gap: calc(7 * var(--phc-u));
	}
	.prido-home-modern .phc-rail button {
		width: calc(40 * var(--phc-u));
		height: calc(40 * var(--phc-u));
		padding: calc(4 * var(--phc-u));
	}
}

/* ---------- accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
	.prido-home-modern .phc-sl,
	.prido-home-modern .phc-rise,
	.prido-home-modern .phc-shot,
	.prido-home-modern .phc-btn,
	.prido-home-modern .phc-rail button { transition: none; }
	.prido-home-modern .phc-shot,
	.prido-home-modern .phc-sl.on .phc-shot { transform: none; }
	.prido-home-modern .phc-rise { opacity: 1; transform: none; }
}
.prido-home-modern .phm-hero-cifra :focus-visible {
	outline: 2px solid var(--phc-teal-700);
	outline-offset: 3px;
}

/* -----------------------------------------------------------------------------
   Reglas globales que la portada V2 necesita de hojas que se dejarán de cargar en
   la home (A2: woocommerce-general, prido-css-maestro-v2 y style.css). Mientras esas
   hojas sigan encoladas, estas copias son idénticas y van después en la cascada, así
   que no cambian nada; cuando se desencolen, la home no pierde estas tres piezas.
   - .screen-reader-text: región viva #prido-cart-live de prido-cart.r1.js (WooCommerce).
   - html.prido-modal-open: bloqueo de scroll del drawer, el header v3 y los modales (maestro).
   - .prido-hs-tools__search: forma redonda de la lupa del header v3 (style.css).
   -------------------------------------------------------------------------- */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
html.prido-modal-open,
html.prido-modal-open body {
	overflow: hidden !important;
	position: relative !important;
}
html.prido-modal-open body { height: 100% !important; }
.prido-hs-tools__search { border-radius: 50% !important; }