/* ==========================================================================
   EL DETALLE IDEAL PARA … — widget hda-ocasiones (interruptor previsto
   hda_ocasiones_v2_enabled). Spec: desarrollo/web/ocasiones-v2.md §3/§3.10.
   Tokens propios en .hoc (no hereda de .hh2/.hda-header/.hcat: no son
   ancestros). Construido en el banco dentro del envoltorio real de Elementor
   (gotcha 94): `.elementor img{height:auto}` y las reglas de Astra por
   etiqueta (h2, a, del/ins) están en juego a propósito.
   ========================================================================== */

.hoc {
	--hoc-brand: #7A0D13;
	--hoc-cream: #FEF3E7;
	--hoc-ink: #2B1520;
	--hoc-font-display: "Qalogre fit", Georgia, serif;
	--hoc-font-text: "Founders Grotesk Official", Arial, sans-serif;
	--hoc-pad: clamp(16px, calc(16px + (100vw - 390px) * .099), 154px);

	/* Tarjeta (escritorio ≥1200, spec §3.10) */
	--hoc-card-w: 272px;
	--hoc-card-h: 360px;
	--hoc-card-radius: 12px;
	--hoc-gap-v: 140px;      /* gap vertical entre tarjetas de una columna */
	--hoc-offset: 180px;     /* desfase de la columna derecha */
	--hoc-gap-col: 32px;     /* aire entre columna y bloque central (no lo fija el spec; ver REPORTE) */

	/* Título */
	--hoc-title-size: 66px;
	--hoc-title-lh: 1.02;

	/* Píldora */
	--hoc-pill-h: 84px;
	--hoc-pill-pad: 0 32px;
	--hoc-pill-radius: 22px;
	--hoc-pill-font: 40px;
	--hoc-pill-gap: 40px;    /* separación "para" ↔ píldora */

	/* Overlay de producto */
	--hoc-ov-inset: 14px;
	--hoc-ov-h: 60px;
	--hoc-ov-radius: 14px;
	--hoc-ov-thumb: 44px;
	--hoc-ov-thumb-radius: 10px;
	--hoc-ov-name: 14px;
	--hoc-ov-price: 13px;
	--hoc-ov-price-del: 12px;
	--hoc-ov-btn: 30px;
	/* Corrección hallazgo 1/3 (2026-09-23): el spec fija miniatura/inset/alto
	   y alto del botón, pero NO fija el gap interno del panel ni el padding
	   horizontal del botón "Ver" — son detalle de implementación. Medido con
	   Puppeteer que a 768px y 390px esos dos valores (8px/16px, iguales a
	   escritorio) dejaban .hoc__meta en 45.9px/34.9px de ancho real: no
	   alcanzaba ni para un precio de 8 cifras, y en Charme D'amour (con
	   oferta) el <ins> con el precio vigente quedaba 0% visible. Se angostan
	   SOLO en tablet/móvil (abajo) sin tocar ningún número de §3.10. */
	--hoc-ov-gap: 8px;
	--hoc-ov-btn-pad: 16px;

	position: relative;
	display: block;
	background: var(--hoc-cream);
	padding-block: 80px;
	overflow: clip; /* evita que el desfase de la columna derecha abra scroll horizontal */
}

@media (min-width: 768px) and (max-width: 1199px) {
	.hoc {
		--hoc-card-w: 200px;
		--hoc-card-h: 267px;
		--hoc-gap-v: 100px;
		--hoc-offset: 134px;
		--hoc-title-size: 52px;
		--hoc-pill-h: 64px;
		--hoc-pill-pad: 0 24px;
		--hoc-pill-font: 30px;
		--hoc-ov-gap: 6px;
		--hoc-ov-btn-pad: 10px;
		padding-block: 64px;
	}
}

@media (max-width: 767px) {
	.hoc {
		--hoc-pad: 16px; /* fijo en móvil (no el clamp): la fórmula del ancho de tarjeta lo asume así */
		/* Corrección hallazgo 8 (2026-09-23): esta variable se REFERENCIABA
		   con fallback pero nunca se declaraba — el 12px real vivía
		   hardcodeado aparte en `column-gap` de .hoc__grid (abajo). Ambos
		   coincidían de casualidad; ahora hay una sola fuente de verdad. */
		--hoc-gap-col-mobile: 12px;
		--hoc-card-w: calc((100vw - (2 * var(--hoc-pad)) - var(--hoc-gap-col-mobile, 12px)) / 2);
		--hoc-card-h: auto;
		--hoc-card-radius: 10px;
		--hoc-gap-v: 40px;
		--hoc-offset: 60px;
		--hoc-title-size: 34px;
		--hoc-pill-h: 52px;
		--hoc-pill-pad: 0 20px;
		--hoc-pill-radius: 14px;
		--hoc-pill-font: 24px;
		--hoc-pill-gap: 14px;
		--hoc-ov-inset: 10px;
		--hoc-ov-h: 52px;
		--hoc-ov-thumb: 36px;
		--hoc-ov-thumb-radius: 8px;
		--hoc-ov-name: 12px;
		--hoc-ov-price: 12px;
		--hoc-ov-price-del: 11px;
		--hoc-ov-btn: 26px;
		--hoc-ov-gap: 5px;
		--hoc-ov-btn-pad: 8px;
		/* Ajuste §3.11 (2026-09-23, última hora): padding-block parejo (48px)
		   dejaba un vacío de ~300px bajo la última tarjeta izquierda (el
		   desfase de la columna derecha + el aire de la sección siguiente).
		   Se separa: el tope queda igual, la base baja a 24px. */
		padding-top: 48px;
		padding-bottom: 24px;
	}
}

/* ===== Rejilla =====
   Escritorio/tablet: 3 columnas (auto 1fr auto) pegadas a --hoc-pad de cada
   lado; la columna del medio es flexible y aloja el bloque sticky centrado.
   Móvil: 2 columnas iguales (izq/der); el bloque de texto pasa a franja
   sticky de ancho completo, primero en el DOM visual (order: -1). */
.hoc .hoc__grid {
	display: grid;
	grid-template-columns: auto 1fr auto;
	column-gap: var(--hoc-gap-col);
	align-items: start;
	padding-inline: var(--hoc-pad);
}
@media (max-width: 767px) {
	.hoc .hoc__grid {
		grid-template-columns: 1fr 1fr;
		column-gap: var(--hoc-gap-col-mobile);
		row-gap: 0;
	}
}

.hoc .hoc__col {
	display: flex;
	flex-direction: column;
	gap: var(--hoc-gap-v);
	width: var(--hoc-card-w);
}
.hoc .hoc__col--der {
	padding-top: var(--hoc-offset);
}
@media (max-width: 767px) {
	.hoc .hoc__col { width: auto; }
}

/* ===== Tarjeta =====
   Toda la tarjeta es UN <a> (el botón "Ver" es un <span> decorativo, sin
   interactivos anidados). Astra pone `a{transition:all .2s linear;
   color:...; text-decoration:...}` y un `:focus{outline:1px dotted}`: se
   neutralizan explícitos, sin depender de :where(). */
.hoc a.hoc__card {
	position: relative;
	display: block;
	width: var(--hoc-card-w);
	height: var(--hoc-card-h);
	border-radius: var(--hoc-card-radius);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	background: var(--hoc-ink);
	transition: none;
}
@media (max-width: 767px) {
	.hoc a.hoc__card { aspect-ratio: 3 / 4; }
}
.hoc a.hoc__card:focus:not(:focus-visible) { outline: 0; }
.hoc a.hoc__card:focus-visible {
	outline: 3px solid var(--hoc-brand);
	outline-offset: 3px;
}

/* (0,3,0) — le gana a `.elementor img{height:auto}` (0,1,1) sin !important
   (gotcha 94, mismo patrón que categorias-v2.css). */
.hoc .hoc__card .hoc__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: inherit;
	transition: transform .4s ease;
}
.hoc a.hoc__card:hover .hoc__img,
.hoc a.hoc__card:focus-visible .hoc__img {
	transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
	.hoc .hoc__card .hoc__img { transition: none; }
}

/* ===== Overlay translúcido de producto ===== */
.hoc .hoc__panel {
	position: absolute;
	left: var(--hoc-ov-inset);
	right: var(--hoc-ov-inset);
	bottom: var(--hoc-ov-inset);
	height: var(--hoc-ov-h);
	border-radius: var(--hoc-ov-radius);
	display: flex;
	align-items: center;
	gap: var(--hoc-ov-gap);
	padding-inline: var(--hoc-ov-gap);
	/* Ajuste §3.11 (2026-09-23, última hora): .35 -> .5. El contraste del
	   texto crema no llegaba a 4.5:1 sobre 4 de las 6 fotos reales
	   (hallazgo 7 del panel de escépticos, documentado en REPORTE.md §7).
	   El text-shadow de .hoc__name/.hoc__price (abajo) queda como red de
	   seguridad adicional, no como sustituto de este arreglo. */
	background: rgba(30, 20, 22, .5);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--hoc-cream);
	overflow: hidden; /* el precio con oferta (del+ins) no puede desbordar el panel a 173px (móvil) */
}
/* Sin soporte de backdrop-filter: fondo más opaco para que el texto crema
   siga legible sobre cualquier foto (gotcha del spec §3.10). */
@supports not (backdrop-filter: blur(1px)) {
	.hoc .hoc__panel { background: rgba(20, 13, 15, .62); }
}

.hoc .hoc__thumb {
	flex: none;
	width: var(--hoc-ov-thumb);
	height: var(--hoc-ov-thumb);
	border-radius: var(--hoc-ov-thumb-radius);
	background: #fff;
	object-fit: cover;
}

.hoc .hoc__meta {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hoc .hoc__name {
	font-family: var(--hoc-font-text);
	font-weight: 400;
	font-size: var(--hoc-ov-name);
	line-height: 1.2;
	color: var(--hoc-cream);
	text-transform: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/* Mitigación hallazgo 7 (2026-09-23): sobre las 6 fotos reales el overlay
	   al 35% (rgba(30,20,22,.35), número fijado en §3.10) no siempre llega a
	   4.5:1 (medido: 3 de 18 combinaciones texto×foto pasan AA). Subir la
	   opacidad arreglaría el contraste de verdad, pero es un valor explícito
	   del spec — no se toca sin que el dueño lo decida (queda documentado en
	   REPORTE.md). Esta sombra es una red de seguridad independiente del
	   fondo: no sustituye el arreglo real. */
	text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

.hoc .hoc__price {
	font-family: var(--hoc-font-text);
	font-weight: 400;
	font-size: var(--hoc-ov-price);
	line-height: 1.2;
	color: rgba(254, 243, 231, .8);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.hoc .hoc__price del {
	font-size: var(--hoc-ov-price-del);
	color: rgba(254, 243, 231, .6);
	text-decoration: line-through;
	margin-right: 4px;
}
.hoc .hoc__price ins {
	text-decoration: none;
}
/* Corrección hallazgo 1/3 (2026-09-23): en tablet y móvil, con el precio en
   oferta (<del>…</del> <ins>…</ins>, con un espacio real entre los dos) el
   nowrap+ellipsis dejaba el <ins> con el precio vigente 0% visible — el
   cliente solo veía el precio TACHADO. Se permite envolver en el espacio
   ya existente entre <del> y <ins> (el panel mide 52-60px de alto, sobra
   para 2 líneas) en vez de recortar con "…". No toca ningún número de
   §3.10 (inset/alto/miniatura/tipografía siguen igual). */
@media (max-width: 1199px) {
	.hoc .hoc__price {
		white-space: normal;
		overflow-wrap: normal;
		text-overflow: clip;
	}
}

/* Ajuste §3.11 (2026-09-23, última hora): a 173px de tarjeta (móvil) la
   miniatura + el nombre + el precio no entran en una sola línea de 52px
   sin recortar el nombre con "…". Se oculta la miniatura y se deja que el
   nombre envuelva hasta 2 líneas — el panel crece (height -> min-height)
   para darle espacio a la segunda línea sin desbordar la tarjeta. No toca
   ningún número de §3.10 (inset/miniatura/tipografía de escritorio y
   tablet siguen igual; el panel de escritorio/tablet sigue con altura
   fija). Verificado con Puppeteer contra las 6 tarjetas reales a 390px:
   ningún nombre queda cortado con elipsis. */
@media (max-width: 767px) {
	.hoc .hoc__thumb {
		display: none;
	}
	.hoc .hoc__panel {
		height: auto;
		min-height: var(--hoc-ov-h);
	}
	.hoc .hoc__name {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		overflow-wrap: break-word;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
}

.hoc .hoc__btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--hoc-ov-btn);
	padding-inline: var(--hoc-ov-btn-pad);
	border-radius: 999px;
	background: var(--hoc-cream);
	color: var(--hoc-brand);
	font-family: var(--hoc-font-text);
	font-weight: 400;
	font-size: 13px;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
}

/* ===== Tarjetas que NO son producto (spec ocasiones-v2.md §10) =====
   Modo 'enlace': mismo .hoc__panel de siempre, con la clase extra
   .hoc__panel--enlace y SOLO .hoc__meta>.hoc__name + .hoc__btn adentro (sin
   .hoc__thumb): no hay que "liberar" el hueco de la miniatura con CSS
   porque el markup nunca la imprime — el flex del panel base (gap/
   padding-inline en --hoc-ov-gap) ya reparte el espacio entre los dos
   hijos que SÍ existen. El título queda centrado verticalmente por el
   `align-items: center` del panel base (herencia, sin regla propia) y a
   la izquierda porque `.hoc__meta` es `flex: 1 1 auto` con texto LTR de
   toda la vida; el botón sigue `flex: none` a la derecha. Mismo alto que
   el panel de producto en escritorio/tablet: hereda `--hoc-ov-h` del
   panel base sin overrides ahí. */
.hoc .hoc__panel.hoc__panel--enlace .hoc__name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
@media (max-width: 767px) {
	/* Corolario del hallazgo 8/§3.11: la regla móvil ".hoc .hoc__panel"
	   (altura variable + nombre a 2 líneas) existe para el panel de
	   PRODUCTO, que a 173px de tarjeta se queda sin ancho con miniatura +
	   nombre + precio juntos. El panel--enlace no tiene miniatura ni
	   precio: le sobra ancho, así que no necesita esa muleta — se fija de
	   nuevo a --hoc-ov-h (sin min-height) para no quedar "más alto de lo
	   necesario". (0,3,0) le gana a ".hoc .hoc__panel" ((0,2,0), la regla
	   móvil de arriba) sin !important — gotcha 54/94. */
	.hoc .hoc__panel.hoc__panel--enlace {
		height: var(--hoc-ov-h);
	}
}

/* Modo 'foto': sin panel — la tarjeta es solo la foto. La base
   ".hoc a.hoc__card" (más arriba) está acotada a la etiqueta <a> a
   propósito (nota de esa regla); acá se repite el mismo tamaño/forma
   para que el <div> SIN enlazar (spec §10: "sin url_<lado>, la tarjeta es
   un <div> no enlazado") se vea IGUAL que la variante <a>. (0,3,0): más
   clases que ".hoc a.hoc__card" (0,2,1), sin !important. */
.hoc .hoc__card.hoc__card--foto {
	position: relative;
	display: block;
	width: var(--hoc-card-w);
	height: var(--hoc-card-h);
	border-radius: var(--hoc-card-radius);
	overflow: hidden;
	background: var(--hoc-ink);
}
@media (max-width: 767px) {
	.hoc .hoc__card.hoc__card--foto { aspect-ratio: 3 / 4; }
}

/* ===== Bloque central (titular + píldora) =====
   Escritorio/tablet: sticky centrado en la ventana mientras dura la
   sección. Los -100px son la mitad aproximada del alto del bloque (título +
   píldora), medida en el banco — no es una fórmula genérica. */
.hoc .hoc__text {
	position: sticky;
	top: 50vh; /* fallback sin svh */
	top: calc(50svh - 100px);
	align-self: start;
	width: 100%;
	max-width: 480px;
	margin-inline: auto;
}

.hoc h2.hoc__title {
	margin: 0;
	font-family: var(--hoc-font-display);
	font-weight: 400;
	font-size: var(--hoc-title-size);
	line-height: var(--hoc-title-lh);
	color: var(--hoc-brand);
	text-transform: none; /* Astra: h2{text-transform:capitalize} (gotcha 85) */
}
.hoc .hoc__line {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--hoc-pill-gap);
	line-height: inherit; /* explícito: no heredar el .83em de Astra en px fijo (gotcha 85) */
}

/* ===== Píldora "odómetro" =====
   display:inline-grid con las tres palabras en la MISMA celda (grid-area
   1/1): el ancho de la píldora queda fijado por la palabra más larga sin
   JS, porque el tamaño de la pista de grid se calcula con el contenido
   intrínseco de los tres hijos aunque estén desplazados con `transform`
   (transform no afecta layout/sizing). */
.hoc .hoc__pill {
	display: inline-grid;
	place-items: center;
	height: var(--hoc-pill-h);
	padding: var(--hoc-pill-pad);
	border-radius: var(--hoc-pill-radius);
	background: var(--hoc-brand);
	overflow: hidden;
	vertical-align: bottom;
}

.hoc .hoc__word {
	grid-area: 1 / 1;
	display: block;
	white-space: nowrap;
	font-family: var(--hoc-font-display);
	font-weight: 400;
	font-size: var(--hoc-pill-font);
	line-height: 1;
	color: var(--hoc-cream);
	text-transform: none;
	transform: translateY(110%);
	opacity: 0;
	transition: transform .4s cubic-bezier(.22, .61, .36, 1),
		opacity .4s cubic-bezier(.22, .61, .36, 1),
		visibility 0s linear .4s;
	visibility: hidden;
}
.hoc .hoc__word.is-active {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
	transition: transform .4s cubic-bezier(.22, .61, .36, 1),
		opacity .4s cubic-bezier(.22, .61, .36, 1);
}
.hoc .hoc__word.is-above { transform: translateY(-110%); opacity: 0; }
.hoc .hoc__word.is-below { transform: translateY(110%); opacity: 0; }

@media (max-width: 767px) {
	.hoc .hoc__text {
		position: sticky;
		top: calc(86px + 12px); /* alto de header móvil (86px) + 12px de aire */
		grid-column: 1 / -1;
		order: -1;
		z-index: 2;
		background: var(--hoc-cream);
		max-width: none;
		padding-block: 16px;
		text-align: center;
	}
	.hoc .hoc__line { justify-content: center; }
	/* El header se autooculta al bajar (.is-hidden, header-scroll.js): la
	   franja sube con él para no dejar un hueco crema flotando. */
	body:has(.hda-header.is-hidden) .hoc .hoc__text { top: 12px; }
}

/* ===== prefers-reduced-motion: cambio instantáneo, sin zoom de hover ===== */
@media (prefers-reduced-motion: reduce) {
	.hoc .hoc__word,
	.hoc .hoc__word.is-active {
		transition: none;
	}
	.hoc .hoc__text { scroll-behavior: auto; }
}