/*
 * Click Retail · Secciones — Home (haussen.cl / haussen.mx)
 * Manual de marca Haussen 2025: colores #C62437 (rojo), #000000, #FFFFFF, #F6F6F6 y #EDEDED.
 * Avenir Next para títulos, subtítulos y destacados; Poppins solo para párrafos (bajadas).
 * Avenir Next es la tipografía del sistema en iPhone, iPad y Mac (se ve sin descargar nada); en el
 * resto de los equipos se usa DM Sans, la tipografía de títulos que el sitio ya carga.
 * Reglas: solo clases propias .crh-*; nada sobre .elementor-*, .wd-* ni .whb-* (así las actualizaciones
 * de Elementor/Woodmart no cambian este diseño). Las únicas clases ajenas que aparecen (.products,
 * .product, .add_to_cart_button) son el contrato público de WooCommerce/GTM4WP y aquí se neutralizan.
 */

/* =====================================================================================
   Base compartida por todas las secciones
   ===================================================================================== */
.crh-sec,
.crh-qv {
	--crh-star-on: #FFB400;  /* estrellas: el mismo dorado de la ficha de producto (buybox --star) */
	--crh-star-off: #D2D2D7;
	--crh-red: #C62437;
	--crh-red-light: #E04757; /* tonos del mismo rojo de marca */
	--crh-red-dark: #A11C2D;
	--crh-black: #000000;
	--crh-white: #FFFFFF;
	--crh-gray-1: #F6F6F6;
	--crh-gray-2: #EDEDED;
	--crh-sand: #F5F3EE;   /* arena de la propuesta: tarjetas y fondos que van directo sobre blanco (más contraste que #F6F6F6) */
	--crh-sand-2: #EBE7DF;
	--crh-mute: rgba(0, 0, 0, .58); /* negro de marca atenuado para textos secundarios */
	--crh-ease: cubic-bezier(.2, .7, .2, 1);
	--crh-font: "Avenir Next", "Avenir", var(--wd-title-font, "DM Sans"), system-ui, sans-serif;
	--crh-font-text: "Poppins", var(--wd-text-font, "Poppins"), system-ui, sans-serif;
	--btn-transform: none; /* los <button> del tema van en MAYÚSCULAS por defecto: aquí nunca */
	color: var(--crh-black);
	font-family: var(--crh-font);
	line-height: 1.4;
}
.crh-sec *, .crh-sec *::before, .crh-sec *::after,
.crh-qv *, .crh-qv *::before, .crh-qv *::after { box-sizing: border-box; }

/* Encabezado: título + bajada + enlace «ver todo» */
.crh-sec .crh-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 24px;
	margin: 0 0 24px;
}
/* Una sola escala de títulos en toda la home (los de Elementor usan la misma: ver .crh-h abajo). */
.crh-sec .crh-title {
	margin: 0;
	padding: 0;
	font-family: var(--crh-font);
	font-weight: 800;
	font-size: clamp(30px, 2.2vw + 16px, 48px);
	line-height: 1.05;
	letter-spacing: -.035em;
	color: var(--crh-black);
	text-transform: none;
	font-style: normal;
}
.crh-sec .crh-accent {
	font-family: var(--crh-font);
	font-style: normal; /* sin cursivas en el sitio (decisión del cliente) */
	font-weight: inherit;
	color: inherit;
}
/* Texto solo para lectores de pantalla */
.crh-sec .crh-sr, .crh-qv .crh-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.crh-sec .crh-sub {
	margin: 10px 0 0;
	max-width: 560px;
	font-family: var(--crh-font-text);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--crh-mute);
}
.crh-sec .crh-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding: 10px 0 3px; /* zona de toque más alta sin mover el diseño */
	margin-top: -10px;
	font-family: var(--crh-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	color: var(--crh-black);
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat;
	transition: background-size .3s var(--crh-ease), color .2s;
}
.crh-sec .crh-link { position: relative; }
.crh-sec .crh-link::after { content: ""; position: absolute; inset: -8px -6px -10px; } /* zona de toque ≥ 44 px */
.crh-sec .crh-link:hover,
.crh-sec .crh-link:focus-visible { color: var(--crh-red); background-size: 0 1.5px; background-position: 100% 100%; }
.crh-sec .crh-link:focus-visible { outline: 2px solid var(--crh-red) !important; outline-offset: 4px !important; }
.crh-sec .crh-link span { transition: transform .3s var(--crh-ease); }
.crh-sec .crh-link:hover span { transform: translateX(3px); }
/* Sin título propio (vive en Elementor), el enlace solo ocupa la fila y va a la derecha. */
.crh-sec .crh-head > .crh-link:only-child { margin-left: auto; }
/* …y en computador sube a la fila del título de Elementor (a la derecha, alineado abajo, como el diseño). */
@media (min-width: 768px) {
	.crh-sec.crh-cats, .crh-sec.crh-tops, .crh-sec.crh-packs, .crh-sec.crh-blog { position: relative; }
	.crh-sec .crh-head--solo { position: absolute; right: 0; bottom: calc(100% + var(--kit-widget-spacing, 20px)); margin: 0; }
}
/* El puntaje de reseñas es ancho: sube a la fila del título solo cuando hay espacio. */
@media (min-width: 901px) {
	.crh-sec.crh-rev { position: relative; }
	.crh-sec .crh-rev__top--solo { position: absolute; right: 0; bottom: calc(100% + var(--kit-widget-spacing, 20px)); margin: 0; }
}

/* Títulos y bajadas hechos con widgets NATIVOS de Elementor (clase CSS «crh-h» / «crh-s» en Avanzado):
			misma tipografía que las secciones del plugin, con la familia de respaldo del sitio (DM Sans) donde
			no está Avenir Next. Es la única regla sobre clases de Elementor: .elementor-heading-title es su clase
			pública estable. */
.elementor-widget-heading.crh-h .elementor-heading-title {
	margin: 0;
	font-family: "Avenir Next", "Avenir", var(--wd-title-font, "DM Sans"), system-ui, sans-serif;
	font-size: clamp(30px, 2.2vw + 16px, 48px);
	font-weight: 800;
	font-style: normal;
	line-height: 1.05;
	letter-spacing: -.035em;
	text-transform: none;
	color: #000;
}
.elementor-widget-text-editor.crh-s,
.elementor-widget-text-editor.crh-s p {
	max-width: 560px;
	margin: 0;
	font-family: "Poppins", var(--wd-text-font, "Poppins"), system-ui, sans-serif;
	font-size: 15px;
	font-style: normal;
	line-height: 1.55;
	color: rgba(0, 0, 0, .58);
}
/* Títulos con una parte en negrita y otra regular, como la propuesta pero sin cursiva (crh_title_html()):
			- con <b>/<strong>: lo marcado va en negrita y el resto del título regular;
			- con <em>/<i>: lo marcado va regular y derecho (el botón de cursiva de Elementor también sirve);
			- sin etiquetas: todo en negrita, como siempre. */
:is(.elementor-widget-heading.crh-h .elementor-heading-title, .crh-sec .crh-title, .crh-sec .crh-news__title, .crh-sec .crh-hero__title):has(b, strong) { font-weight: 400; letter-spacing: -.025em; }
:is(.elementor-widget-heading.crh-h .elementor-heading-title, .crh-sec .crh-title, .crh-sec .crh-news__title, .crh-sec .crh-hero__title) :is(b, strong) { font-weight: 800; letter-spacing: -.035em; }
:is(.elementor-widget-heading.crh-h .elementor-heading-title, .crh-sec .crh-title, .crh-sec .crh-news__title, .crh-sec .crh-hero__title) :is(em, i) { font-style: normal; font-weight: 400; letter-spacing: -.025em; }
/* Ritmo vertical: cada sección nueva de la home (clase «crh-blk» en la sección de Elementor). */
.crh-blk { padding-top: 48px; } /* la mitad que antes: home más compacta */
@media (max-width: 1024.98px) { .crh-blk { padding-top: 36px; } }
@media (max-width: 767.98px) {
	.crh-blk { padding-top: 28px; }
	.elementor-widget-heading.crh-h .elementor-heading-title { font-size: 30px; }
	.elementor-widget-text-editor.crh-s, .elementor-widget-text-editor.crh-s p { font-size: 14px; }
}

/* =====================================================================================
   «Explora tu casa»: categorías como historias
   ===================================================================================== */
.crh-cats {
	--crh-gap: 20px;
	--crh-ring: 144px;      /* diámetro del círculo */
	--crh-item: 120px;      /* ancho mínimo de cada historia (8 caben en una fila de escritorio) */
}
/* Una sola fila. Si no caben todas, se desliza hacia el lado (como las historias de Instagram).
   El relleno arriba/abajo evita que el scroll recorte el «salto» del hover y el foco del teclado. */
.crh-cats .crh-cats__list {
	list-style: none;
	display: flex;
	flex-wrap: nowrap;
	gap: var(--crh-gap);
	margin: -8px -8px 0;
	padding: 8px 8px 4px;
	overflow-x: auto;
	overflow-y: hidden;
	justify-content: space-between; /* llena el ancho si sobran px; con desborde se comporta como flex-start */
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-padding-inline: 8px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--crh-gray-2) transparent;
}
.crh-cats .crh-cat {
	flex: 1 0 var(--crh-item);
	max-width: calc(var(--crh-ring) + 40px);
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-align: start;
}
.crh-cats .crh-cat::before, .crh-cats .crh-cat::marker { content: none; }
.crh-cats .crh-cat__a {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: var(--crh-black);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}
/* Anillo de historia nueva: degradado en tonos del rojo de marca, separación blanca y foto. */
.crh-cats .crh-cat__ring {
	display: block;
	position: relative;
	width: var(--crh-ring);
	max-width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0 0 10px;
	border-radius: 50%;
	background: conic-gradient(from 210deg, var(--crh-red), var(--crh-red-light), var(--crh-red-dark), var(--crh-red));
	transition: transform .4s var(--crh-ease), box-shadow .3s var(--crh-ease);
}
.crh-cats .crh-cat__ph {
	/* Marco fijo dentro del anillo: la foto nunca deforma el círculo (vertical, horizontal o cuadrada). */
	position: absolute;
	inset: 3px;
	display: block;
	overflow: hidden;
	border: 3px solid var(--crh-white);
	border-radius: 50%;
	background: var(--crh-sand);
	isolation: isolate; /* Safari: recorta el zoom de la imagen dentro del círculo */
}
.crh-cats .crh-cat__ph img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	border-radius: 0;
	transition: transform .7s var(--crh-ease);
}
.crh-cats .crh-cat__ini {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 2.2em;
	font-weight: 700;
	color: var(--crh-red);
}
.crh-cats .crh-cat__name {
	display: block;
	max-width: 100%;
	font-family: var(--crh-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--crh-black);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis; /* como Instagram: un nombre muy largo se corta con «…», nunca en 2 líneas */
}
.crh-cats .crh-cat__tag {
	display: block;
	margin-top: 2px;
	font-family: var(--crh-font);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--crh-red);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
@media (hover: hover) and (pointer: fine) {
	.crh-cats .crh-cat__a:hover .crh-cat__ring { transform: translateY(-4px); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .35); }
	.crh-cats .crh-cat__a:hover .crh-cat__ph img { transform: scale(1.08); }
	.crh-cats .crh-cat__a:hover:active .crh-cat__ring { transform: translateY(-2px) scale(.97); transition-duration: .15s; }
	.crh-cats .crh-cats__list::-webkit-scrollbar { height: 6px; }
	.crh-cats .crh-cats__list::-webkit-scrollbar-thumb { background: var(--crh-gray-2); border-radius: 3px; }
}
.crh-cats .crh-cat__a:active .crh-cat__ring { transform: scale(.96); transition-duration: .15s; }
.crh-cats .crh-cat__a:focus-visible { outline: 0 !important; }
.crh-cats .crh-cat__a:focus-visible .crh-cat__ring { box-shadow: none; outline: 2px solid var(--crh-black); outline-offset: 2px; }
.crh-cats .crh-cat__a:focus-visible .crh-cat__name { text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================================
   «Lo más vendido»: carrusel de productos con pestañas
   ===================================================================================== */
.crh-tops { --crh-gap: 20px; --crh-w: 100%; --crh-basis: calc((var(--crh-w) - 3 * var(--crh-gap)) / 4.25); } /* 4¼ tarjetas a la vista: la última se asoma */
.crh-tops .crh-head__txt { min-width: 0; }

/* Barra: pestañas (las flechas van a los lados del carrusel, ver .crh-tops__stage) */
.crh-tops .crh-tops__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 24px;
}
.crh-tops .crh-tabs {
	position: relative;
	display: inline-flex;
	gap: 2px;
	max-width: 100%;
	padding: 4px;
	border-radius: 999px;
	background: var(--crh-sand);
	overflow-x: auto;
	scrollbar-width: none;
}
.crh-tops .crh-tabs::-webkit-scrollbar { display: none; }
.crh-tops .crh-tabs__ind {
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 0;
	width: 0;
	border-radius: 999px;
	background: var(--crh-black);
	transition: transform .45s var(--crh-ease), width .45s var(--crh-ease);
	z-index: 0;
}
.crh-tops .crh-tab {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: 0 0 auto;
	height: 40px;
	margin: 0;
	padding: 0 18px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	font-family: var(--crh-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	color: var(--crh-black);
	cursor: pointer;
	transition: color .3s var(--crh-ease);
}
.crh-tops .crh-tab em { font-style: normal; font-size: 11px; font-weight: 600; opacity: .55; }
/* El tema pinta todos los <button> al pasar el mouse (gris #e0e0e0): aquí se anula solo en las pestañas. */
.crh-tops .crh-tabs .crh-tab,
.crh-tops .crh-tabs .crh-tab:hover,
.crh-tops .crh-tabs .crh-tab:focus { min-height: 0; border: 0; background: transparent; box-shadow: none; }
.crh-tops .crh-tabs .crh-tab:not(.is-on):hover { color: var(--crh-red); }
.crh-tops .crh-tabs .crh-tab.is-on,
.crh-tops .crh-tabs .crh-tab.is-on:hover { color: var(--crh-white); }
/* Antes de que cargue el JS la pestaña activa ya se ve negra; el indicador se anima recién después. */
.crh-tops .crh-tabs:not(.is-ready) .crh-tab.is-on { background: var(--crh-black); }
.crh-tops .crh-tabs:not(.is-ready) .crh-tabs__ind { transition: none; }
.crh-tops .crh-tabs .crh-tab:focus-visible { outline: 2px solid var(--crh-red) !important; outline-offset: 2px !important; }
.crh-tops .crh-arrows { display: flex; gap: 8px; flex: 0 0 auto; }
.crh-tops .crh-arrow {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--crh-white);
	box-shadow: inset 0 0 0 1.5px var(--crh-gray-2);
	color: var(--crh-black);
	cursor: pointer;
	transition: background .2s, color .2s, box-shadow .2s, opacity .2s;
}
.crh-tops .crh-arrows .crh-arrow,
.crh-tops .crh-arrows .crh-arrow:hover,
.crh-tops .crh-arrows .crh-arrow:focus { min-height: 0; background: var(--crh-white); color: var(--crh-black); box-shadow: inset 0 0 0 1.5px var(--crh-gray-2); }
.crh-tops .crh-arrows .crh-arrow.is-off { opacity: .35; cursor: default; }
.crh-tops .crh-arrows .crh-arrow:focus-visible { outline: 2px solid var(--crh-red) !important; outline-offset: 2px !important; }
.crh-tops.is-static .crh-arrows, .crh-tops.is-static .crh-prog { visibility: hidden; } /* todo cabe: sin flechas ni barra */
/* Flechas a los lados de las tarjetas, centradas en la foto (--crh-arrow-y lo calcula el JS con la altura real
   de la foto; 38 % es el respaldo). Medio botón queda fuera del carrusel para no tapar la tarjeta. */
.crh-tops .crh-tops__stage { position: relative; }
.crh-tops .crh-tops__stage .crh-arrows { position: absolute; inset: 0; z-index: 3; gap: 0; pointer-events: none; }
.crh-tops .crh-tops__stage .crh-arrows .crh-arrow { position: absolute; top: var(--crh-arrow-y, 38%); transform: translateY(-50%); pointer-events: auto; box-shadow: 0 6px 18px rgba(0, 0, 0, .14), inset 0 0 0 1.5px var(--crh-gray-2); }
.crh-tops .crh-tops__stage .crh-arrow[data-dir="-1"] { left: -23px; }
.crh-tops .crh-tops__stage .crh-arrow[data-dir="1"] { right: -23px; }
.crh-tops .crh-tops__stage .crh-arrows .crh-arrow.is-off { opacity: 0; pointer-events: none; } /* al inicio/final: se oculta */
.crh-tops .crh-tops__stage .crh-arrows .crh-arrow.is-off:focus-visible { opacity: .35; }
@media (max-width: 1199.98px) { /* pantallas angostas: las flechas entran al carrusel para no salirse de la pantalla */
	.crh-tops .crh-tops__stage .crh-arrow[data-dir="-1"] { left: 8px; }
	.crh-tops .crh-tops__stage .crh-arrow[data-dir="1"] { right: 8px; }
}

/* Pista del carrusel. Neutraliza los estilos que WooCommerce/Woodmart dan a .products / li.product. */
.crh-tops .crh-track {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--crh-gap);
	width: auto;
	margin: 0;
	padding: 0 0 4px;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	cursor: grab;
}
.crh-tops .crh-track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.crh-tops .crh-track.is-drag * { pointer-events: none; }
.crh-tops .crh-track::-webkit-scrollbar { display: none; }
.crh-tops .crh-track::before, .crh-tops .crh-track::after { content: none; display: none; }
.crh-tops .crh-track.is-in .crh-card:not([hidden]) { animation: crh-in .45s var(--crh-ease) both; }
@keyframes crh-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.crh-tops .crh-card {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 0 0 var(--crh-basis);
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	float: none;
	list-style: none;
	text-align: left;
	scroll-snap-align: start;
}
.crh-tops .crh-card[hidden] { display: none !important; }
.crh-tops .crh-card::before, .crh-tops .crh-card::marker { content: none; }

/* Foto */
.crh-tops .crh-card__media {
	position: relative;
	aspect-ratio: 707 / 800; /* proporción de las fotos de producto de Haussen */
	border-radius: 18px;
	overflow: hidden;
	background: var(--crh-sand);
	isolation: isolate;
}
.crh-tops .crh-card__img { position: absolute; inset: 0; display: block; }
.crh-tops .crh-card__img img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	border-radius: 0;
	transition: opacity .5s var(--crh-ease), transform 1s var(--crh-ease);
}
.crh-tops .crh-card__img .crh-card__alt { opacity: 0; object-fit: contain; background: var(--crh-white); } /* foto de producto completa sobre blanco */

/* Insignias: % de descuento (rojo) y «Top ventas» (negro) */
.crh-tops .crh-card__tags {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	pointer-events: none;
}
.crh-tops .crh-tag {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-family: var(--crh-font);
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .01em;
	color: var(--crh-white);
}
.crh-tops .crh-tag--off { background: var(--crh-red); }
.crh-tops .crh-tag[hidden] { display: none; }
.crh-tops .crh-tag--top { background: var(--crh-black); }

/* Botón «Agregar» sobre la foto (en computador aparece al pasar el mouse) */
.crh-tops .crh-card__qa {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	display: flex;
	gap: 8px;
	transition: opacity .35s var(--crh-ease), transform .35s var(--crh-ease);
}
.crh-tops .crh-card__qa .crh-add {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 1 1 auto;
	width: 100%;
	height: 44px;
	min-height: 0;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: var(--crh-red);
	box-shadow: none;
	font-family: var(--crh-font);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	color: var(--crh-white);
	opacity: 1;
	transition: background .2s, color .2s;
}
.crh-tops .crh-card__qa .crh-add svg,
.crh-qv .crh-qv__add svg { transition: transform .25s var(--crh-ease); }
.crh-tops .crh-card__qa .crh-add:focus-visible { background: var(--crh-red-dark); color: var(--crh-white); }
/* «Ver opciones» (blanco) con borde y sombra: se ve igual sobre cualquier foto. */
.crh-tops .crh-card__qa .crh-add--link { background: var(--crh-white); color: var(--crh-black); box-shadow: inset 0 0 0 1.5px var(--crh-black), 0 4px 14px -6px rgba(0, 0, 0, .35); }
.crh-tops .crh-card__qa .crh-add--link:focus-visible { box-shadow: none; }
.crh-tops .crh-card__qa .crh-add.loading { opacity: .7; pointer-events: none; }
.crh-tops .crh-card__qa .crh-add.loading::after,
.crh-tops .crh-card__qa .crh-add::before { content: none; display: none; }
.crh-tops .crh-card__qa .crh-add:focus-visible { outline: 2px solid var(--crh-white) !important; outline-offset: -4px !important; }
.crh-tops .crh-card .added_to_cart { display: none !important; }
/* Ojo: vista rápida */
.crh-tops .crh-card__qa .crh-card__qv {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--crh-white);
	box-shadow: inset 0 0 0 1.5px var(--crh-black), 0 4px 14px -6px rgba(0, 0, 0, .35);
	color: var(--crh-black);
	font-size: 0;
	line-height: 0;
	text-transform: none;
	cursor: pointer;
	transition: background .2s, color .2s;
}
.crh-tops .crh-card__qa .crh-card__qv:focus { background: var(--crh-white); color: var(--crh-black); }
.crh-tops .crh-card__qa .crh-card__qv:focus-visible { outline: 2px solid var(--crh-red) !important; outline-offset: 2px !important; }
.crh-tops .crh-card.is-picked .crh-card__alt { display: none; } /* con un color elegido, la segunda foto (otra vista) no corresponde */

/* Datos: marca, nombre, estrellas, precio, cuotas y colores (cada fila reserva su alto para que
   nombres y precios queden a la misma altura en todas las tarjetas aunque falte la marca o las reseñas) */
.crh-tops .crh-card__meta { display: flex; flex-direction: column; padding: 14px 2px 0; }
.crh-tops .crh-card__brand {
	display: block;
	min-height: 15px;
	font-family: var(--crh-font);
	font-size: 11px;
	font-weight: 700;
	line-height: 15px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--crh-mute);
}
.crh-tops .crh-card__name {
	display: -webkit-box;
	min-height: calc(2 * 1.3em);
	margin: 4px 0 6px;
	padding: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	font-family: var(--crh-font);
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--crh-black);
}
.crh-tops .crh-card__name a { color: inherit; text-decoration: none; }
.crh-tops .crh-card__name a:focus-visible { outline: 0 !important; text-decoration: underline; text-underline-offset: 3px; }
.crh-tops .crh-card__rating {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 18px;
	font-family: var(--crh-font);
	font-size: 13px;
	line-height: 18px;
	color: var(--crh-mute);
}
/* Estrellas con relleno exacto (4,6 → 92 %) sin imágenes ni íconos externos */
.crh-tops .crh-stars {
	--crh-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5l2.6 5.6 6.1.7-4.5 4.2 1.2 6L10 15l-5.4 3 1.2-6L1.3 7.8l6.1-.7z'/%3E%3C/svg%3E");
	display: inline-block;
	width: 70px;
	height: 13px;
	background: linear-gradient(90deg, var(--crh-star-on) calc(var(--crh-r, 0) / 5 * 100%), var(--crh-star-off) 0);
	-webkit-mask: var(--crh-star) left center / 14px 13px repeat-x;
	mask: var(--crh-star) left center / 14px 13px repeat-x;
}
.crh-tops .crh-card__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 8px;
	min-height: 25px;
	margin-top: 9px;
	font-family: var(--crh-font);
	font-variant-numeric: tabular-nums;
}
.crh-tops .crh-card__price b { font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--crh-red); }
.crh-tops .crh-card__price s { font-size: 13.5px; font-weight: 500; color: var(--crh-mute); text-decoration: line-through; }
.crh-tops .crh-card__cuotas {
	min-height: 17px;
	margin-top: 3px;
	font-family: var(--crh-font);
	font-size: 12.5px;
	line-height: 17px;
	color: rgba(0, 0, 0, .75);
}
.crh-tops .crh-card__cuotas strong { font-weight: 700; color: var(--crh-black); }
.crh-tops .crh-card__sw { display: flex; gap: 6px; margin-top: 10px; }
.crh-tops .crh-card__sw span {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}
/* Colores elegibles: botón de 28 px (área táctil) con el círculo de color al centro */
.crh-tops .crh-card__sw.is-pick { gap: 2px; margin: 6px 0 0 -6px; flex-wrap: wrap; }
.crh-tops .crh-sw {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	transition: box-shadow .2s var(--crh-ease);
}
.crh-tops .crh-sw:focus { background: transparent; }
.crh-tops .crh-sw i { display: block; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.crh-tops .crh-sw.is-on { box-shadow: inset 0 0 0 1.5px var(--crh-black); }
.crh-tops .crh-sw.is-oos { cursor: not-allowed; opacity: .4; }
.crh-tops .crh-sw.is-oos::after,
.crh-qv .crh-opt--sw.is-oos::after { content: ""; position: absolute; left: 50%; top: 50%; width: 70%; height: 1.5px; background: var(--crh-black); transform: translate(-50%, -50%) rotate(-45deg); }
.crh-tops .crh-sw:focus-visible { outline: 2px solid var(--crh-red) !important; outline-offset: 0 !important; }

/* Barra de avance */
.crh-tops .crh-prog { position: relative; height: 3px; margin-top: 28px; border-radius: 2px; background: var(--crh-gray-2); overflow: hidden; }
.crh-tops .crh-prog i { position: absolute; top: 0; bottom: 0; left: 0; width: 25%; border-radius: 2px; background: var(--crh-black); transition: left .15s linear, width .3s var(--crh-ease); }

@media (hover: hover) and (pointer: fine) {
	.crh-tops .crh-card__qa { opacity: 0; transform: translateY(12px); }
	.crh-tops .crh-card:hover .crh-card__qa,
	.crh-tops .crh-card:focus-within .crh-card__qa { opacity: 1; transform: none; }
	.crh-tops .crh-card:hover .crh-card__main { transform: scale(1.04); }
	.crh-tops .crh-card.has-alt:hover .crh-card__alt { opacity: 1; }
	.crh-tops .crh-card__qa .crh-add:hover { background: var(--crh-red-dark); color: var(--crh-white); box-shadow: none; }
	/* Sin animación del ícono en la tarjeta (decisión del cliente): solo la vista rápida la lleva. */
	.crh-tops .crh-card__name a:hover { color: var(--crh-red); }
	.crh-tops .crh-card__qa .crh-card__qv:hover { background: var(--crh-sand); color: var(--crh-black); box-shadow: inset 0 0 0 1.5px var(--crh-black); }
	.crh-tops .crh-sw:not(.is-on):not(.is-oos):hover { box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .35); }
	.crh-tops .crh-arrows .crh-arrow:not(.is-off):hover { background: var(--crh-black); color: var(--crh-white); box-shadow: inset 0 0 0 1.5px var(--crh-black); }
}

/* =====================================================================================
   Responsive
   ===================================================================================== */
@media (max-width: 1024.98px) {
	.crh-cats { --crh-ring: 100px; --crh-item: 112px; --crh-gap: 16px; }
	.crh-cats .crh-cat { flex: 0 0 var(--crh-item); }
	.crh-cats .crh-cat__name { font-size: 14px; }
	.crh-cats .crh-cat__tag { font-size: 12.5px; }
	.crh-tops { --crh-gap: 16px; --crh-basis: calc((var(--crh-w) - 2 * var(--crh-gap)) / 3.2); }
}
@media (max-width: 767.98px) {
	.crh-sec .crh-head { flex-direction: column; align-items: flex-start; margin-bottom: 16px; }
	.crh-sec .crh-title { font-size: 30px; }
	.crh-sec .crh-sub { font-size: 14px; margin-top: 8px; }
	.crh-sec .crh-link { font-size: 14px; }
	.crh-sec .crh-head > .crh-link:only-child { margin-left: 0; } /* en celular, bajo el título y a la izquierda (como el diseño) */

	.crh-cats { --crh-ring: 76px; --crh-item: 84px; --crh-gap: 12px; }
	.crh-cats .crh-cat__ring { margin-bottom: 6px; }
	.crh-cats .crh-cat__ph { inset: 2.5px; border-width: 2.5px; }
	.crh-cats .crh-cat__name { font-size: 12px; }
	.crh-cats .crh-cat__tag { font-size: 11.5px; }

	.crh-tops { --crh-gap: 12px; --crh-basis: calc((var(--crh-w) - var(--crh-gap)) / 1.6); }
	.crh-tops .crh-tops__bar { margin-bottom: 16px; }
	.crh-tops .crh-tab { height: 36px; padding: 0 14px; font-size: 13px; }
	.crh-tops .crh-card__qa { left: 8px; right: 8px; bottom: 8px; }
	.crh-tops .crh-card__qa .crh-add { height: 44px; font-size: 13px; }
	.crh-tops .crh-card__name { font-size: 14px; }
	.crh-tops .crh-card__price b { font-size: 17px; }
	.crh-tops .crh-prog { margin-top: 20px; }
}
/* Pantallas táctiles: las filas llegan de borde a borde (como Instagram), la primera tarjeta queda
   alineada con el título, sin barras de scroll y sin flechas (se desliza con el dedo). */
@media (max-width: 1024.98px) and (pointer: coarse) {
	.crh-cats .crh-cats__list,
	.crh-tops .crh-track {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		padding-left: max(16px, calc(50vw - 50%));
		padding-right: max(16px, calc(50vw - 50%));
		scroll-padding-inline: max(16px, calc(50vw - 50%));
		scrollbar-width: none;
	}
	.crh-cats .crh-cats__list::-webkit-scrollbar { display: none; }
}
@media (pointer: coarse) {
	.crh-tops .crh-arrows { display: none; }
	.crh-tops .crh-tabs .crh-tab { min-height: 44px; }
	.crh-tops .crh-sw, .crh-sec .crh-look__swbtn { width: 40px; height: 40px; }
	.crh-tops .crh-card__sw.is-pick, .crh-sec .crh-look__sw { gap: 4px; }
	.crh-tops .crh-card__sw.is-pick { margin-left: -10px; }
}

@media (prefers-reduced-motion: reduce) {
	.crh-sec *, .crh-sec *::before, .crh-sec *::after,
	.crh-qv *, .crh-qv *::before, .crh-qv *::after { transition: none !important; animation: none !important; }
	.crh-cats .crh-cat__a:hover .crh-cat__ring, .crh-cats .crh-cat__a:hover .crh-cat__ph img, .crh-tops .crh-card:hover .crh-card__main { transform: none !important; }
}

/* Sin letras en cursiva en títulos (decisión del cliente): sin reglas de acento. */

/* Columnas de Elementor que contienen una sección crh: siempre a todo el ancho, incluso si el
 * constructor genera una clase de ancho vacía (elementor-col-) que las dejaría angostas. */
.elementor-column.elementor-col-:has(> .elementor-widget-wrap > [class*="elementor-widget-crh_"]) { width: 100%; max-width: 100%; flex: 0 0 100%; }

/* =====================================================================================
   «Shop the look»: foto con puntos + lista con casillas, total y agregar el look
   ===================================================================================== */
.crh-look .crh-eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--crh-red); }
.crh-look .crh-head .crh-title { margin-top: 12px; }
.crh-look__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.crh-look__gal { min-width: 0; }
.crh-look__ph { position: relative; display: block; margin: 0; padding: 0; aspect-ratio: 1 / 1; border-radius: 28px; overflow: hidden; background: var(--crh-sand); } /* cuadrada como las fotos y la propuesta: los puntos caen donde van */
.crh-look__ph[hidden] { display: none; }
.crh-sec .crh-look__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; }
.crh-sec .crh-look__spot { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; z-index: 4; } /* sobre la tarjeta: un punto nunca queda tapado */
.crh-sec .crh-look__dot { position: relative; display: grid; place-items: center; width: 34px; height: 34px; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--crh-white); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); cursor: pointer; transition: transform .25s var(--crh-ease); }
.crh-sec .crh-look__dot[aria-expanded="true"] { transform: scale(1.12); }
.crh-sec .crh-look__dot::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .8); animation: crh-ring 2s infinite; }
@keyframes crh-ring { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
.crh-sec .crh-look__dot i { width: 10px; height: 10px; border-radius: 50%; background: var(--crh-black); transition: background .2s; }
.crh-sec .crh-look__dot[aria-expanded="true"] i { background: var(--crh-red); }
.crh-sec .crh-look__dot:focus-visible { outline: 2px solid var(--crh-red) !important; outline-offset: 2px !important; }
.crh-look__pop { position: absolute; z-index: 3; width: 250px; max-width: calc(100% - 24px); margin: 0; padding: 10px; border-radius: 16px; background: var(--crh-white); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .45); list-style: none; }
.crh-look__popp { display: block; margin: 0; padding: 0; width: auto; max-width: none; float: none; }
.crh-look__pop[hidden] { display: none; }
.crh-look__popa { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.crh-sec .crh-look__popimg { flex: none; width: 64px; height: 64px; max-width: none; border-radius: 10px; object-fit: contain; background: var(--crh-white); }
.crh-look__poptxt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.crh-look__poptxt b { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.crh-look__popprice { font-size: 14px; font-weight: 700; color: var(--crh-red); font-variant-numeric: tabular-nums; }
.crh-look__info { min-width: 0; }
.crh-look__info .crh-head { margin-bottom: 18px; }
.crh-look__pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.crh-sec .crh-look__pill { height: 44px; min-width: 0; margin: 0; padding: 0 20px; border: 0; border-radius: 999px; background: var(--crh-white); box-shadow: inset 0 0 0 1.5px var(--crh-gray-2); font-family: var(--crh-font); font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; color: var(--crh-black); cursor: pointer; transition: background .2s, color .2s; }
.crh-sec .crh-look__pill.is-on { background: var(--crh-black); color: var(--crh-white); box-shadow: none; }
.crh-sec .crh-look__pill:focus-visible { outline: 2px solid var(--crh-red) !important; outline-offset: 2px !important; }
.crh-look__rows { display: flex; flex-direction: column; gap: 10px; }
.crh-look__rows[hidden] { display: none; }
.crh-look__row { display: flex; gap: 14px; align-items: center; margin: 0; padding: 10px; border: 1px solid var(--crh-gray-2); border-radius: 16px; background: var(--crh-white); transition: border-color .2s, box-shadow .2s, opacity .2s; }
.crh-look__row { cursor: pointer; }
.crh-look__row:not(.is-off):not(.is-link) { border-color: var(--crh-black); box-shadow: 0 0 0 1px var(--crh-black); }
.crh-sec .crh-look__chk { display: grid; place-items: center; flex: none; width: 24px; height: 24px; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 7px; background: var(--crh-black); box-shadow: none; color: var(--crh-white); cursor: pointer; }
.crh-sec .crh-look__chk svg { width: 14px; height: 14px; flex: none; }
.crh-sec .crh-look__row.is-off .crh-look__chk { background: transparent; box-shadow: inset 0 0 0 1.5px var(--crh-gray-2); color: transparent; }
.crh-sec .crh-look__chk:focus-visible { outline: 2px solid var(--crh-red) !important; outline-offset: 2px !important; }
.crh-sec .crh-look__thumb { flex: none; width: 68px; height: 68px; max-width: none; border-radius: 12px; object-fit: contain; background: var(--crh-white); }
.crh-look__txt { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.crh-look__name { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.crh-look__name a { color: inherit; text-decoration: none; }
.crh-look__price { font-size: 14px; font-weight: 700; color: var(--crh-red); font-variant-numeric: tabular-nums; }
.crh-look__price s { font-weight: 400; color: var(--crh-mute); font-size: 12.5px; margin-left: 6px; }
.crh-sec .crh-look__eye { display: grid; place-items: center; flex: none; width: 44px; height: 44px; min-width: 0; border-radius: 50%; color: var(--crh-black); }
.crh-sec .crh-look__eye:focus-visible { outline: 2px solid var(--crh-red) !important; outline-offset: 2px !important; }
/* Colores elegibles en la fila (variables con un solo atributo de color): igual que las tarjetas. */
.crh-sec .crh-look__sw { display: flex; gap: 2px; margin: 6px 0 0 -6px; flex-wrap: wrap; }
.crh-sec .crh-look__swbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; font-size: 0; line-height: 0; cursor: pointer; }
.crh-sec .crh-look__swbtn i { display: block; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.crh-sec .crh-look__swbtn.is-on { box-shadow: inset 0 0 0 1.5px var(--crh-black); }
.crh-sec .crh-look__swbtn.is-oos { cursor: not-allowed; opacity: .4; }
.crh-sec .crh-look__swbtn.is-oos::after { content: ""; position: absolute; left: 50%; top: 50%; width: 70%; height: 1.5px; background: var(--crh-black); transform: translate(-50%, -50%) rotate(-45deg); }
.crh-sec .crh-look__swbtn:focus-visible { outline: 2px solid var(--crh-red) !important; outline-offset: 0 !important; }
/* Pack con componentes variables: un selector por componente, con su nombre corto delante. */
.crh-sec .crh-look__sw--b { align-items: center; margin-left: 0; }
.crh-look__swl { margin-right: 4px; font-size: 12px; font-weight: 600; color: var(--crh-mute); }
.crh-look__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; }
/* En el teléfono, total y botón en la misma línea (como la propuesta): botón y total algo más compactos. */
@media (max-width: 600px) {
	.crh-sec .crh-look__foot { gap: 10px; }
	.crh-sec .crh-look__foot .crh-look__tot { flex: 0 0 auto; }
	.crh-sec .crh-look__foot .crh-look__tot b { font-size: 22px; }
	.crh-sec .crh-look__foot .crh-look__add { flex: 0 1 auto; height: 48px; margin-left: auto; padding: 0 18px; font-size: 14px; white-space: nowrap; }
}
@media (max-width: 359.98px) { .crh-sec .crh-look__foot .crh-look__add { padding: 0 14px; } .crh-sec .crh-look__foot .crh-look__add svg { display: none; } }
.crh-look__tot span { display: block; font-size: 13px; color: var(--crh-mute); }
.crh-look__tot b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.crh-sec .crh-look__add { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; min-width: 0; margin: 0; padding: 0 28px; border: 0; border-radius: 999px; background: var(--crh-red); font-family: var(--crh-font); font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; white-space: nowrap; color: var(--crh-white); cursor: pointer; transition: background .2s, opacity .2s; }
.crh-sec .crh-look__add svg { width: 16px; height: 16px; flex: none; transition: transform .25s var(--crh-ease); }
.crh-sec .crh-look__add:disabled { opacity: .45; cursor: default; }
.crh-sec .crh-look__add.loading { opacity: .8; cursor: progress; }
.crh-sec .crh-look__add.loading svg { display: none; }
.crh-sec .crh-look__add.loading::before { content: ""; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: var(--crh-white); border-radius: 50%; animation: crh-spin .8s linear infinite; }
.crh-sec .crh-look__add:focus-visible { outline: 2px solid var(--crh-red) !important; outline-offset: 2px !important; }
.crh-look__msg { flex: 0 0 100%; order: -1; margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--crh-red); }
.crh-look__msg:empty { display: none; }
.crh-look .added_to_cart { display: none !important; } /* sin el «Ver carrito» de WooCommerce junto al botón */
@media (hover: hover) and (pointer: fine) {
	.crh-sec .crh-look__pill:not(.is-on):hover { box-shadow: inset 0 0 0 1.5px var(--crh-black); }
	.crh-sec .crh-look__eye:hover { color: var(--crh-red); }
	.crh-sec .crh-look__add:not(:disabled):hover { background: var(--crh-red); }
	.crh-sec .crh-look__add:not(:disabled):hover svg { transform: translateX(3px); }
	.crh-look__row.is-link:hover { border-color: var(--crh-black); }
}
@media (max-width: 1024.98px) {
	.crh-look__grid { gap: 28px; }
}
@media (max-width: 900px) {
	.crh-look__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* =====================================================================================
   «Tres marcas, un hogar»: acordeón de paneles con foto (sin consultas de productos)
   ===================================================================================== */
.crh-brands { display: flex; gap: 14px; height: 540px; }
.crh-brand {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	border-radius: 28px;
	overflow: hidden;
	color: var(--crh-white);
	cursor: pointer;
	transition: flex .7s var(--crh-ease);
	isolation: isolate;
}
.crh-brand.is-on { flex: 3.2 1 0; }
.crh-sec .crh-brand__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; z-index: -2; transition: transform 1.2s var(--crh-ease); }
.crh-brand.is-on .crh-brand__img { transform: scale(1.03); }
.crh-brand::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .05) 60%); }
.crh-brand__vt {
	position: absolute;
	left: 26px;
	bottom: 28px;
	font-family: var(--crh-font);
	font-weight: 900;
	font-size: 40px;
	letter-spacing: -.03em;
	text-transform: uppercase;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	transition: opacity .4s;
}
.crh-brand.is-on .crh-brand__vt { opacity: 0; }
/* Contraído: invisible y sin clics, pero alcanzable con Tab (al recibir el foco el panel se abre). */
.crh-brand__in {
	position: absolute;
	left: 36px;
	right: 36px;
	bottom: 36px;
	opacity: 0;
	pointer-events: none;
	transform: translateY(16px);
	transition: opacity .5s var(--crh-ease), transform .5s var(--crh-ease);
}
.crh-brand.is-on .crh-brand__in { opacity: 1; pointer-events: auto; transform: none; transition-delay: .25s; }
/* Etiquetas en rojo Haussen sobre fondo blanco: legibles sobre cualquier foto. */
.crh-brand__tags { display: inline-block; padding: 5px 10px; border-radius: 999px; background: var(--crh-white); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--crh-red); }
.crh-brand__name {
	margin: 10px 0 0;
	padding: 0;
	font-family: var(--crh-font);
	font-size: 64px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.04em;
	text-transform: uppercase;
	color: var(--crh-white);
}
.crh-brand__in p { margin: 12px 0 20px; max-width: 380px; font-family: var(--crh-font-text); font-size: 16px; line-height: 1.5; color: #e6e6e6; }
.crh-brand__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 46px;
	padding: 0 24px;
	border-radius: 999px;
	background: var(--crh-white);
	font-family: var(--crh-font);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	color: var(--crh-black);
	transition: background .25s var(--crh-ease);
}
.crh-brand__btn svg { transition: transform .25s var(--crh-ease); }
.crh-sec .crh-brand__btn:focus-visible { outline: 2px solid var(--crh-white) !important; outline-offset: 3px !important; } /* blanco: va sobre la foto */
@media (hover: hover) and (pointer: fine) {
	.crh-brand__btn:hover { background: var(--crh-gray-1); color: var(--crh-black); }
	.crh-brand__btn:hover svg { transform: translateX(3px); }
}
@media (max-width: 900px) {
	.crh-brands { flex-direction: column; height: auto; }
	.crh-brand, .crh-brand.is-on { flex: none; height: 360px; }
	.crh-brand::after { background: linear-gradient(0deg, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .6) 62%, rgba(0, 0, 0, .3) 100%); } /* texto legible sobre fotos claras */
	.crh-brand__vt { display: none; }
	.crh-brand__in { left: 22px; right: 22px; bottom: 22px; opacity: 1; pointer-events: auto; transform: none; }
	.crh-brand__name { font-size: 44px; }
}

/* Avisos solo visibles en el editor de Elementor */
.crh-sec.crh-empty { padding: 24px; border: 1px dashed #EDEDED; border-radius: 12px; text-align: center; color: #555; font-size: 14px; }
.crh-sec .crh-notice { margin: 0 0 16px; padding: 10px 14px; border-radius: 8px; background: var(--crh-gray-1); color: var(--crh-black); font-size: 13px; line-height: 1.4; }

/* =====================================================================================
   Vista rápida (modal propio, fuera de la sección: va al final del <body>)
   ===================================================================================== */
html.crh-qv-open { overflow: hidden; }
.crh-qv {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	color: var(--crh-black);
	font-family: var(--crh-font);
	line-height: 1.4;
	text-align: left;
}
.crh-qv[hidden] { display: none !important; }
.crh-qv__scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .45);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity .3s var(--crh-ease);
}
.crh-qv.is-on .crh-qv__scrim { opacity: 1; }
.crh-qv__box {
	position: relative;
	width: min(1000px, 100%);
	max-height: min(90vh, 780px);
	overflow: auto;
	overscroll-behavior: contain;
	border-radius: 28px;
	background: var(--crh-white);
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .35);
	outline: 0;
	opacity: 0;
	transform: translateY(16px) scale(.98);
	transition: opacity .3s var(--crh-ease), transform .4s var(--crh-ease);
}
.crh-qv.is-on .crh-qv__box { opacity: 1; transform: none; }
.crh-qv button { font-family: var(--crh-font); text-transform: none; letter-spacing: 0; }
.crh-qv .crh-qv__x {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--crh-white);
	box-shadow: inset 0 0 0 1.5px var(--crh-gray-2);
	color: var(--crh-black);
	cursor: pointer;
	transition: background .2s, color .2s;
}
.crh-qv .crh-qv__load { display: flex; align-items: center; justify-content: center; min-height: 420px; }
.crh-qv .crh-qv__inner.is-skel .crh-qv__load { flex: 1 1 auto; min-height: 160px; }
.crh-qv .crh-qv__spin { width: 34px; height: 34px; border: 3px solid var(--crh-gray-2); border-top-color: var(--crh-black); border-radius: 50%; animation: crh-spin .8s linear infinite; }
@keyframes crh-spin { to { transform: rotate(360deg); } }

.crh-qv .crh-qv__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.crh-qv .crh-qv__gal { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 20px; background: var(--crh-sand); }
.crh-qv .crh-qv__big { position: relative; aspect-ratio: 707 / 800; border-radius: 18px; overflow: hidden; background: var(--crh-white); }
.crh-qv .crh-qv__big img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: contain; }
.crh-qv .crh-qv__big { touch-action: pan-y; -webkit-user-select: none; user-select: none; } /* deslizar en horizontal cambia de foto; en vertical sigue el scroll */
.crh-qv .crh-qv__big img { -webkit-user-drag: none; }
/* Flechas entre fotos: el mismo diseño que las de la ficha de producto (.crb-arrow). */
.crh-qv .crh-qv__big .crh-qv__arrow { position: absolute; top: 50%; z-index: 4; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: none; color: #86868b; cursor: pointer; transform: translateY(-50%); transition: background .15s, color .15s, transform .1s; }
.crh-qv .crh-qv__big .crh-qv__arrow.prev { left: 6px; right: auto; }
.crh-qv .crh-qv__big .crh-qv__arrow.next { right: 6px; left: auto; }
.crh-qv .crh-qv__big .crh-qv__arrow svg { flex: none; width: 18px; height: 18px; }
.crh-qv .crh-qv__box .crh-qv__big .crh-qv__arrow:is(:hover, :focus-visible) { background: rgba(255, 255, 255, .9); color: #1d1d1f; }
.crh-qv .crh-qv__box .crh-qv__big .crh-qv__arrow:active { transform: translateY(-50%) scale(.92); }
.crh-qv .crh-qv__thumbs { display: flex; gap: 10px; padding: 3px; overflow-x: auto; scrollbar-width: none; }
.crh-qv .crh-qv__thumbs::-webkit-scrollbar { display: none; }
.crh-qv .crh-qv__th {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 12px;
	overflow: hidden;
	background: var(--crh-white);
	box-shadow: none;
	outline: 2px solid transparent;
	outline-offset: 2px;
	cursor: pointer;
	transition: outline-color .2s;
}
.crh-qv .crh-qv__th img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.crh-qv .crh-qv__th.is-on { outline-color: var(--crh-black); }

.crh-qv .crh-qv__info { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 40px 36px 32px; }
.crh-qv .crh-qv__brand { font-size: 11px; font-weight: 700; line-height: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--crh-mute); }
.crh-qv .crh-qv__name {
	margin: 8px 44px 10px 0;
	padding: 0;
	font-family: var(--crh-font);
	font-size: clamp(22px, 1vw + 16px, 30px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--crh-black);
	outline: 0;
}
.crh-qv .crh-qv__rating { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--crh-mute); }
.crh-qv .crh-stars {
	--crh-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5l2.6 5.6 6.1.7-4.5 4.2 1.2 6L10 15l-5.4 3 1.2-6L1.3 7.8l6.1-.7z'/%3E%3C/svg%3E");
	display: inline-block;
	width: 70px;
	height: 13px;
	background: linear-gradient(90deg, var(--crh-star-on) calc(var(--crh-r, 0) / 5 * 100%), var(--crh-star-off) 0);
	-webkit-mask: var(--crh-star) left center / 14px 13px repeat-x;
	mask: var(--crh-star) left center / 14px 13px repeat-x;
}
.crh-qv .crh-qv__price { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 16px; font-variant-numeric: tabular-nums; }
.crh-qv .crh-qv__price b { font-size: 30px; font-weight: 700; line-height: 1.2; color: var(--crh-red); }
.crh-qv .crh-qv__price s { font-size: 16px; font-weight: 500; color: var(--crh-mute); text-decoration: line-through; }
.crh-qv .crh-qv__price s[hidden], .crh-qv .crh-tag[hidden] { display: none; }
.crh-qv .crh-tag { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--crh-red); font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--crh-white); }
.crh-qv .crh-qv__cuotas { min-height: 20px; margin-top: 6px; font-size: 14px; line-height: 20px; color: rgba(0, 0, 0, .75); }
.crh-qv .crh-qv__cuotas strong { font-weight: 700; color: var(--crh-black); }

.crh-qv .crh-qv__attr { margin-top: 20px; }
.crh-qv .crh-qv__alabel { display: block; margin-bottom: 8px; font-size: 13.5px; color: var(--crh-mute); }
.crh-qv .crh-qv__alabel b { font-weight: 600; color: var(--crh-black); }
.crh-qv .crh-qv__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.crh-qv .crh-opt {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	min-height: 0;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: var(--crh-white);
	box-shadow: inset 0 0 0 1.5px var(--crh-gray-2);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	color: var(--crh-black);
	cursor: pointer;
	transition: box-shadow .2s var(--crh-ease);
}
.crh-qv .crh-opt:focus { background: var(--crh-white); color: var(--crh-black); }
.crh-qv .crh-opt.is-on { box-shadow: inset 0 0 0 2px var(--crh-black); }
.crh-qv .crh-opt.is-oos { color: var(--crh-mute); }
.crh-qv .crh-opt.is-oos:not(.crh-opt--sw) { text-decoration: line-through; }
.crh-qv .crh-opt--sw { width: 44px; padding: 0; }
.crh-qv .crh-opt--sw i { display: block; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.crh-qv .crh-opt--sw.is-oos i { opacity: .45; }

.crh-qv .crh-qv__perks { display: flex; flex-direction: column; gap: 10px; margin: 22px 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.4; color: rgba(0, 0, 0, .8); }
.crh-qv .crh-qv__perks li { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 0; list-style: none; }
.crh-qv .crh-qv__perks li[hidden] { display: none; }
.crh-qv .crh-qv__perks li::before { content: none; }
.crh-qv .crh-qv__perks svg { flex: none; margin-top: 1px; color: var(--crh-red); }

.crh-qv .crh-qv__buy { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.crh-qv .crh-qty { display: inline-flex; flex: none; align-items: center; height: 52px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--crh-gray-2); }
.crh-qv .crh-qty button {
	width: 44px;
	height: 52px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	color: var(--crh-black);
	cursor: pointer;
}
.crh-qv .crh-qty button:focus { background: transparent; color: var(--crh-black); }
.crh-qv .crh-qty input {
	width: 34px;
	height: 52px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: var(--crh-font);
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	color: var(--crh-black);
	-moz-appearance: textfield;
	appearance: textfield;
}
.crh-qv .crh-qty input::-webkit-inner-spin-button,
.crh-qv .crh-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.crh-qv .crh-qv__add {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 52px;
	min-height: 0;
	margin: 0;
	padding: 0 20px;
	border: 0;
	border-radius: 999px;
	background: var(--crh-red);
	box-shadow: none;
	font-family: var(--crh-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	color: var(--crh-white);
	cursor: pointer;
	transition: background .2s, color .2s, opacity .2s;
}
.crh-qv .crh-qv__add:focus { background: var(--crh-red-dark); color: var(--crh-white); }
.crh-qv .crh-qv__add:disabled { background: var(--crh-gray-2); color: var(--crh-mute); cursor: not-allowed; }
.crh-qv .crh-qv__add.loading,
.crh-qv .crh-qv__add.loading:disabled { background: var(--crh-red-dark); color: var(--crh-white); opacity: .8; cursor: progress; }
.crh-qv .crh-qv__add.loading svg { display: none; }
.crh-qv .crh-qv__add.loading::before { content: ""; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: var(--crh-white); border-radius: 50%; animation: crh-spin .8s linear infinite; }
.crh-qv .crh-qv__add.loading::after { content: none; }
.crh-qv .added_to_cart { display: none !important; }
.crh-qv .crh-qv__msg { flex: 0 0 100%; order: -1; margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--crh-red); } /* dentro de la barra de compra: visible también con la barra fija del celular */
.crh-qv .crh-qv__msg:empty { display: none; }
.crh-qv .crh-qv__more {
	align-self: flex-start;
	margin-top: 18px;
	font-size: 14px;
	font-weight: 600;
	color: var(--crh-black);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 4px;
}
.crh-qv .crh-qv__x:focus-visible,
.crh-qv .crh-qv__th:focus-visible,
.crh-qv .crh-opt:focus-visible,
.crh-qv .crh-qty button:focus-visible,
.crh-qv .crh-qty input:focus-visible,
.crh-qv .crh-qv__add:focus-visible,
.crh-qv .crh-qv__more:focus-visible { outline: 2px solid var(--crh-red) !important; outline-offset: 2px !important; }

@media (hover: hover) and (pointer: fine) {
	.crh-qv .crh-qv__x:hover { background: var(--crh-black); color: var(--crh-white); box-shadow: none; }
	.crh-qv .crh-qv__th:not(.is-on):hover { outline-color: rgba(0, 0, 0, .3); }
	.crh-qv .crh-opt:not(.is-on):hover { box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .45); }
	.crh-qv .crh-qty button:hover { color: var(--crh-red); background: transparent; }
	.crh-qv .crh-qv__add:not(:disabled):hover { background: var(--crh-red-dark); color: var(--crh-white); }
	.crh-qv .crh-qv__add:not(:disabled):hover svg { transform: translateX(3px); }
	.crh-qv .crh-qv__more:hover { color: var(--crh-red); }
}
@media (max-width: 1024.98px) {
	.crh-qv .crh-qv__info { padding: 32px 24px 24px; }
}
/* Celular: hoja que sube desde abajo, con «Agregar» siempre a la vista */
@media (max-width: 767.98px) {
	.crh-qv { align-items: flex-end; padding: 0; }
	.crh-qv__box { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 22px 22px 0 0; transform: translateY(100%); }
	.crh-qv__box::before { content: ""; display: block; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: var(--crh-gray-2); }
	.crh-qv .crh-qv__x { top: 10px; right: 10px; }
	.crh-qv .crh-qv__load { min-height: 50vh; }
	.crh-qv .crh-qv__inner.is-skel .crh-qv__load { min-height: 120px; }
	.crh-qv .crh-qv__inner { grid-template-columns: minmax(0, 1fr); }
	.crh-qv .crh-qv__gal { padding: 12px 16px; background: var(--crh-white); }
	.crh-qv .crh-qv__big { aspect-ratio: auto; height: min(42vh, 100vw); border-radius: 16px; background: var(--crh-sand); }
	.crh-qv .crh-qv__th { flex-basis: 56px; width: 56px; height: 56px; }
	.crh-qv .crh-qv__info { padding: 4px 20px 0; }
	.crh-qv .crh-qv__name { margin-right: 0; font-size: 22px; }
	.crh-qv .crh-qv__price b { font-size: 24px; }
	.crh-qv .crh-qv__perks { margin: 18px 0; font-size: 13.5px; }
	.crh-qv .crh-qv__buy {
		position: sticky;
		bottom: 0;
		z-index: 2;
		margin: auto -20px 0;
		padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
		background: var(--crh-white);
		box-shadow: 0 -10px 20px -16px rgba(0, 0, 0, .35);
	}
	.crh-qv .crh-qv__more { margin: 14px 0 calc(20px + env(safe-area-inset-bottom)); }
}

/* =====================================================================================
   «Packs que rinden más»: grilla de packs con ahorro en verde y agregar directo
   ===================================================================================== */
.crh-packs__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.crh-pack {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	border-radius: 20px;
	overflow: hidden;
	background: var(--crh-sand);
	transition: transform .35s var(--crh-ease), box-shadow .35s var(--crh-ease);
}
.crh-pack__media { position: relative; display: block; aspect-ratio: 707 / 800; overflow: hidden; background: var(--crh-white); color: inherit; text-decoration: none; }
.crh-sec .crh-pack__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; transition: opacity .5s var(--crh-ease), transform 1s var(--crh-ease); }
.crh-sec .crh-pack__media .crh-pack__alt { opacity: 0; object-fit: contain; }
.crh-pack__tag { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--crh-red); font-family: var(--crh-font); font-size: 11.5px; font-weight: 700; line-height: 1.3; color: var(--crh-white); font-variant-numeric: tabular-nums; }
.crh-pack__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 0; padding: 18px 20px 22px; }
.crh-pack__name { margin: 0; padding: 0; font-family: var(--crh-font); font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--crh-black); }
.crh-pack__name a { color: inherit; text-decoration: none; }
.crh-pack__inc { display: block; margin-top: 3px; font-family: var(--crh-font); font-size: 13.5px; line-height: 1.4; color: var(--crh-mute); }
.crh-pack__rating { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-family: var(--crh-font); font-size: 13px; line-height: 18px; color: var(--crh-mute); }
.crh-packs .crh-stars {
	--crh-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5l2.6 5.6 6.1.7-4.5 4.2 1.2 6L10 15l-5.4 3 1.2-6L1.3 7.8l6.1-.7z'/%3E%3C/svg%3E");
	display: inline-block;
	width: 70px;
	height: 13px;
	background: linear-gradient(90deg, var(--crh-star-on) calc(var(--crh-r, 0) / 5 * 100%), var(--crh-star-off) 0);
	-webkit-mask: var(--crh-star) left center / 14px 13px repeat-x;
	mask: var(--crh-star) left center / 14px 13px repeat-x;
}
.crh-pack__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; margin-top: 9px; font-family: var(--crh-font); font-variant-numeric: tabular-nums; }
.crh-pack__price b { font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--crh-red); }
.crh-pack__price s { font-size: 13.5px; font-weight: 500; color: var(--crh-mute); }
.crh-pack__save { align-self: flex-start; margin-top: 10px; padding: 3px 8px; border-radius: 6px; background: #e5f4ea; font-family: var(--crh-font); font-size: 12px; font-weight: 700; color: #146c33; font-variant-numeric: tabular-nums; }
.crh-sec .crh-pack__add {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 44px;
	min-height: 0;
	margin: auto 0 0; /* siempre al fondo de la tarjeta: botones y precios alineados entre packs */
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: var(--crh-red);
	box-shadow: none;
	font-family: var(--crh-font);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	color: var(--crh-white);
	transition: background .2s;
}
.crh-pack__body > :has(+ .crh-pack__add) { margin-bottom: 14px; } /* aire fijo antes del botón (aunque WooCommerce agregue «Ver carrito» después) */
.crh-sec .crh-pack__add svg { flex: none; transition: transform .25s var(--crh-ease); }
.crh-sec .crh-pack__add:focus-visible { outline: 2px solid var(--crh-red) !important; outline-offset: 2px !important; }
.crh-sec .crh-pack__add.loading { opacity: .7; pointer-events: none; }
.crh-sec .crh-pack__add.loading::after, .crh-sec .crh-pack__add::before { content: none; display: none; }
.crh-pack .added_to_cart { display: none !important; }
@media (hover: hover) and (pointer: fine) {
	.crh-pack:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -26px rgba(0, 0, 0, .35); }
	.crh-pack:hover .crh-pack__main { transform: scale(1.04); }
	.crh-pack:hover .crh-pack__alt { opacity: 1; }
	.crh-sec .crh-pack__add:hover { background: var(--crh-red-dark); color: var(--crh-white); }
	.crh-sec .crh-pack__add:hover svg { transform: translateX(3px); }
	.crh-sec .crh-pack__name a:hover { color: var(--crh-red); }
}
@media (max-width: 1024.98px) {
	.crh-packs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 767.98px) {
	.crh-packs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.crh-pack__body { padding: 14px; }
	.crh-sec .crh-pack__add { gap: 6px; padding: 0 10px; }
	.crh-pack__name { font-size: 15px; }
	.crh-pack__price b { font-size: 17px; }
}
@media (max-width: 359.98px) {
	.crh-pack__body { padding: 12px; }
	.crh-sec .crh-pack__add { font-size: 12px; gap: 5px; padding: 0 8px; }
}


/* =====================================================================================
   «Lo que dicen en casa»: puntaje + doble marquesina de reseñas (contenido fijo, sin JS)
   ===================================================================================== */
.crh-rev__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; flex-wrap: wrap; }
.crh-rev__score { display: flex; align-items: center; gap: 18px; }
.crh-rev__num { font-family: var(--crh-font); font-size: 88px; font-weight: 800; letter-spacing: -.05em; line-height: .9; }
.crh-rev__stars {
	--crh-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5l2.6 5.6 6.1.7-4.5 4.2 1.2 6L10 15l-5.4 3 1.2-6L1.3 7.8l6.1-.7z'/%3E%3C/svg%3E");
	display: inline-block;
	width: 104px;
	height: 19px;
	background: linear-gradient(90deg, var(--crh-star-on) calc(var(--crh-r, 5) / 5 * 100%), var(--crh-star-off) 0);
	-webkit-mask: var(--crh-star) left center / 20.8px 19px repeat-x;
	mask: var(--crh-star) left center / 20.8px 19px repeat-x;
}
.crh-rev__count { display: block; margin-top: 6px; font-family: var(--crh-font-text); font-size: 14px; color: var(--crh-mute); }
.crh-rev__rows { display: flex; flex-direction: column; gap: 16px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
/* Filas de borde a borde de la PANTALLA (como el diseño); el puntaje queda al ancho del contenido.
			Sin overflow en la sección: el recorte lo hace la propia fila (overflow:hidden), que mide 100vw. */
.crh-rev__rows {
	width: var(--crh-vw, 100vw); /* --crh-vw = ancho real sin la barra de scroll (lo mide home.js): sin scroll lateral en Windows */
	max-width: var(--crh-vw, 100vw);
	margin-left: calc((100% - var(--crh-vw, 100vw)) / 2);
	margin-right: calc((100% - var(--crh-vw, 100vw)) / 2);
}
/* Sin gap: cada tarjeta lleva su margen, así la mitad de la fila es exactamente 2 vueltas (sin saltos). */
.crh-rev__row { display: flex; gap: 16px; padding-right: 16px; width: max-content; animation: crh-mq 60s linear infinite; } /* gap + relleno final: la mitad de la fila es exactamente 2 vueltas */
.crh-rev__row.is-rev { animation-direction: reverse; animation-duration: 70s; }
.crh-rev__rows:hover .crh-rev__row { animation-play-state: paused; } /* pausa al pasar el mouse */
@keyframes crh-mq { to { transform: translateX(-50%); } }
.crh-rev__card { display: flex; flex-direction: column; width: 380px; flex: none; margin: 0; padding: 22px 24px; border: 1px solid var(--crh-gray-2); border-radius: 20px; background: var(--crh-white); }
.crh-rev__card .crh-rev__stars { width: 84px; height: 15px; -webkit-mask-size: 16.8px 15px; mask-size: 16.8px 15px; }
.crh-rev__card q { display: block; margin-top: 12px; font-family: var(--crh-font-text); font-size: 15px; font-style: normal; line-height: 1.5; color: var(--crh-black); quotes: "“" "”"; }
.crh-rev__card q::before { content: open-quote; } /* el tema las quita: aquí vuelven */
.crh-rev__card q::after { content: close-quote; }
.crh-rev__who { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 14px; font-family: var(--crh-font); font-size: 13.5px; font-weight: 600; }
.crh-rev__av { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--crh-sand-2); font-size: 12px; font-weight: 700; }
@media (max-width: 767.98px) {
	.crh-rev__num { font-size: 64px; }
	.crh-rev__card { width: 300px; }
}
/* Movimiento reducido: sin marquesina; las reseñas se recorren deslizando (solo las únicas). */
@media (prefers-reduced-motion: reduce) {
	.crh-rev__rows { -webkit-mask-image: none; mask-image: none; }
	.crh-rev__row { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: max(16px, calc((var(--crh-vw, 100vw) - 1192px) / 2)); scroll-padding-inline: max(16px, calc((var(--crh-vw, 100vw) - 1192px) / 2)); } /* cada fila se desliza por separado */
	.crh-rev__card { scroll-snap-align: start; }
	.crh-rev__card[aria-hidden="true"] { display: none; }
}

/* =====================================================================================
   «Guías para tu hogar»: hasta 4 artículos del mismo tamaño a todo el ancho de la página (sin JS).
   Escritorio: 4 columnas; tablet: 2 × 2; móvil: fila deslizable (se asoma la siguiente).
   ===================================================================================== */
.crh-blog__grid {
	box-sizing: border-box;
	display: grid;
	grid-auto-flow: column; /* hasta 4 columnas iguales: con menos entradas, las que haya ocupan todo el ancho */
	grid-auto-columns: minmax(0, 1fr);
	gap: 20px;
	width: var(--crh-vw, 100vw); /* --crh-vw = ancho real sin la barra de scroll (lo mide home.js) */
	max-width: var(--crh-vw, 100vw);
	margin-left: calc((100% - var(--crh-vw, 100vw)) / 2);
	margin-right: calc((100% - var(--crh-vw, 100vw)) / 2);
	padding-inline: var(--crh-blog-gut, 20px);
}
.crh-post {
	position: relative;
	display: flex;
	aspect-ratio: 4 / 5;
	min-width: 0;
	margin: 0;
	border-radius: 24px;
	overflow: hidden;
	background: #1a1a1a; /* sin foto (o mientras carga) el texto blanco igual se lee */
	color: var(--crh-white);
	text-decoration: none;
	isolation: isolate;
}
.crh-sec .crh-post__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; z-index: -2; transition: transform 1s var(--crh-ease); }
/* Sombra solo detrás del texto: el degradado sale del bloque de texto (.in) y sube 140 px más, con una curva
   suave (sin corte visible). La parte de arriba de la foto queda tal cual. */
.crh-post .in { position: relative; box-sizing: border-box; width: 100%; margin-top: auto; padding: 24px; } /* todo el ancho: la sombra no deja un borde vertical */
.crh-post .in::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: calc(100% + 140px); pointer-events: none; background: linear-gradient(0deg, rgba(0, 0, 0, .78) 0, rgba(0, 0, 0, .7) calc(100% - 170px), rgba(0, 0, 0, .55) calc(100% - 126px), rgba(0, 0, 0, .36) calc(100% - 84px), rgba(0, 0, 0, .18) calc(100% - 46px), rgba(0, 0, 0, .06) calc(100% - 16px), rgba(0, 0, 0, 0) 100%); }
/* Rojo Haussen sobre fondo blanco: legible sobre cualquier foto. */
.crh-post__eyebrow { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--crh-white); font-family: var(--crh-font); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--crh-red); }
.crh-post h3, .crh-post h4 { display: -webkit-box; margin: 8px 0 0; padding: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; font-family: var(--crh-font); font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--crh-white); }
.crh-post__desc { display: -webkit-box; margin-top: 8px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-family: var(--crh-font-text); font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .9); }
.crh-sec .crh-post:focus-visible { outline: 2px solid var(--crh-red) !important; outline-offset: 2px !important; }
@media (hover: hover) and (pointer: fine) {
	.crh-post:hover .crh-post__img { transform: scale(1.05); }
}
/* Título (Elementor) e «Ir al blog» quedan en el contenedor, como el resto de las secciones; las tarjetas van a todo el ancho. */
.crh-blog { --crh-blog-gut: 20px; }
/* 1025–1279 px: 2 × 2 apaisado (en 4 columnas los títulos se cortaban y la sombra tapaba la foto). */
@media (min-width: 1025px) and (max-width: 1279.98px) {
	.crh-blog__grid { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.crh-post { aspect-ratio: 4 / 3; }
}
/* 1280–1599 px: 4 columnas con letra, aire y sombra que se ajustan al ancho de cada tarjeta. */
@media (min-width: 1280px) and (max-width: 1599.98px) {
	.crh-post .in { padding: 20px; }
	.crh-post h3, .crh-post h4 { font-size: clamp(18px, 1.4vw, 21px); -webkit-line-clamp: 4; line-clamp: 4; }
	.crh-post__desc { -webkit-line-clamp: 1; line-clamp: 1; }
	.crh-post .in::before { height: calc(100% + 90px); }
}
@media (max-width: 1024.98px) {
	.crh-blog { --crh-blog-gut: 16px; }
	.crh-blog__grid { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 16px; gap: 16px; }
	.crh-post { aspect-ratio: 1 / 1; } /* cuadradas: el texto no tapa toda la foto */
}
@media (max-width: 767.98px) {
	.crh-blog__grid { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; }
	.crh-blog__grid::-webkit-scrollbar { display: none; }
	.crh-post { flex: 0 0 82%; aspect-ratio: 4 / 5; max-height: 460px; scroll-snap-align: start; }
	.crh-post .in { padding: 20px; }
	.crh-post h3, .crh-post h4 { font-size: 20px; }
}

/* =====================================================================================
   «Club Haussen»: panel rojo con formulario (embed de Omnisend o provisorio)
   ===================================================================================== */
.crh-news__box {
	position: relative;
	display: grid;
	grid-template-columns: 1.1fr minmax(0, 1fr);
	gap: 48px;
	align-items: center;
	padding: 56px 64px;
	border-radius: 32px;
	background: var(--crh-red);
	overflow: hidden;
	isolation: isolate;
}
.crh-news__box::before {
	content: "";
	position: absolute;
	right: -120px;
	top: -160px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	z-index: -1;
}
.crh-news__eyebrow { display: block; font-family: var(--crh-font); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--crh-white); }
.crh-news__title {
	margin: 12px 0 0;
	padding: 0;
	font-family: var(--crh-font);
	font-size: clamp(34px, 1vw + 30px, 48px);
	font-weight: 800;
	line-height: 1;
		letter-spacing: -.035em;
		color: var(--crh-white);
		text-wrap: balance;
	}
	.crh-news__sub { margin: 12px 0 0; max-width: 440px; font-family: var(--crh-font-text); font-size: 15px; line-height: 1.55; color: var(--crh-white); }
.crh-news__form { min-width: 0; }
.crh-sec .crh-news__fake {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}
.crh-sec .crh-news__pill {
	display: flex;
	gap: 6px;
	align-items: center;
	margin: 0;
	padding: 6px;
	border-radius: 999px;
	background: var(--crh-white);
}
/* El botón va solo abajo, a todo el ancho: con nombre + correo no cabe dentro de la píldora. */
.crh-sec .crh-news__fake > button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 52px;
	min-height: 0;
	margin: 0;
	padding: 0 28px;
	border: 0;
	border-radius: 999px;
	background: var(--crh-black);
	box-shadow: none;
	font-family: var(--crh-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	color: var(--crh-white);
	cursor: pointer;
	transition: background .2s;
}
.crh-sec .crh-news__fake > button:focus-visible { outline: 2px solid var(--crh-white) !important; outline-offset: 2px !important; }
.crh-sec .crh-news__fake input {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	margin: 0;
	padding: 0 20px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	font-family: var(--crh-font-text);
	font-size: 15px;
	color: var(--crh-black);
}
.crh-sec .crh-news__fake input:focus { outline: 0; box-shadow: none; }
.crh-sec .crh-news__pill:focus-within { box-shadow: 0 0 0 3px rgba(0, 0, 0, .85); } /* foco visible sobre el rojo */
.crh-sec .crh-news__fake input[aria-invalid="true"] { color: var(--crh-red-dark); }
.crh-news__err { margin: 0; font-family: var(--crh-font); font-size: 13.5px; font-weight: 600; color: var(--crh-white); }
.crh-news__err:empty { display: none; }
.crh-sec .crh-news__fake input::placeholder { color: #9a9a9a; opacity: 1; }
/* (el botón de prueba usa la regla «> button» de arriba: 52 px, igual que el del formulario real) */
.crh-news__ok { margin: 0; padding: 16px 20px; border-radius: 16px; background: rgba(255, 255, 255, .14); font-family: var(--crh-font); font-size: 15px; font-weight: 600; color: var(--crh-white); }
.crh-news__ok[hidden] { display: none; }
.crh-news__small { margin: 12px 0 0; font-family: var(--crh-font-text); font-size: 12.5px; color: var(--crh-white); }
.crh-news__note { margin: 12px 0 0; font-size: 13px; color: var(--crh-white); background: rgba(0, 0, 0, .25); border-radius: 8px; padding: 8px 12px; }
/* Formulario real de Omnisend (embed): espacio reservado (sin saltos al cargar) y el mismo diseño que
			la propuesta: campos blancos tipo píldora, texto de ayuda claro y botón negro a todo el ancho debajo. */
.crh-news__embed { min-width: 0; min-height: 186px; }
.crh-sec .crh-news__embed form { margin: 0 !important; padding: 0 !important; background: transparent !important; }
.crh-sec .crh-news__embed input[type="text"],
.crh-sec .crh-news__embed input[type="email"] { height: 52px !important; padding: 0 22px !important; border: 0 !important; border-radius: 999px !important; background: var(--crh-white) !important; box-shadow: none !important; font-family: var(--crh-font-text) !important; font-size: 15px !important; font-style: normal !important; color: var(--crh-black) !important; }
.crh-sec .crh-news__embed input::placeholder { color: #9a9a9a !important; opacity: 1 !important; }
.crh-sec .crh-news__embed input:focus { outline: 0 !important; box-shadow: 0 0 0 3px rgba(0, 0, 0, .85) !important; }
.crh-sec .crh-news__embed button[type="submit"] { width: 100% !important; height: 52px !important; border: 0 !important; border-radius: 999px !important; background: var(--crh-black) !important; box-shadow: none !important; font-family: var(--crh-font) !important; font-size: 15px !important; font-weight: 600 !important; font-style: normal !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--crh-white) !important; }
/* Omnisend pone los campos en contenedores flex (flex-basis:0) y su propio radio: se corrigen aquí. */
.crh-sec .crh-news__embed input[type="text"],
.crh-sec .crh-news__embed input[type="email"] { min-height: 52px !important; padding: 14px 22px !important; flex-basis: auto !important; }
.crh-sec .crh-news__embed input[type="text"]:not(#crh-x),
.crh-sec .crh-news__embed input[type="email"]:not(#crh-x) { border-radius: 999px !important; }
.crh-sec .crh-news__embed input.error:not(#crh-x) { box-shadow: 0 0 0 3px var(--crh-white) !important; }
.crh-sec .crh-news__embed [id$="-error"], .crh-sec .crh-news__embed [id$="-required"], .crh-sec .crh-news__embed label.error, .crh-sec .crh-news__embed [class*="submit-error"] { color: var(--crh-white) !important; }
/* Mensajes del formulario (éxito «¡Listo!», «Ya estás suscrito»…): blancos y con la tipografía del sitio. */
.crh-sec .crh-news__embed [class*="-text-"], .crh-sec .crh-news__embed [class*="-text-"] p { color: var(--crh-white) !important; font-family: var(--crh-font) !important; font-size: clamp(16px, 2vw, 28px) !important; font-style: normal !important; }
.crh-sec .crh-news__embed label, .crh-sec .crh-news__embed p { font-style: normal !important; }
.crh-sec .crh-news__embed button[type="submit"]:focus-visible { outline: 2px solid var(--crh-white) !important; outline-offset: 2px !important; }
/* Sin los rellenos internos de Omnisend: campos y botón alineados con el título y a 10 px entre sí. */
.crh-sec .crh-news__embed [class*="-section-"] { padding: 0 !important; }
.crh-sec .crh-news__embed [class*="-field-container-"]:not([class*="-wrapper-"]):not(input):not(label),
.crh-sec .crh-news__embed [class*="-action-container-"] { padding: 5px 0 !important; }
.crh-sec .crh-news__embed [class$="-content-inner"] { margin: 0 -5px !important; padding: 0 5px !important; } /* aire para los anillos de foco/error (el contenedor recorta) */
.crh-sec .crh-news__embed [id$="-error"], .crh-sec .crh-news__embed [id$="-required"], .crh-sec .crh-news__embed [class*="submit-error"] { font-family: var(--crh-font) !important; font-size: 13.5px !important; font-weight: 600 !important; }
@media (hover: hover) and (pointer: fine) {
	.crh-sec.crh-news .crh-news__fake > button:hover,
	.crh-sec .crh-news__embed button[type="submit"]:hover { background: #222 !important; color: var(--crh-white) !important; }
}
.crh-sec.crh-news .crh-news__fake > button:focus { background: var(--crh-black); color: var(--crh-white); }
/* El bloque rojo pisa el footer oscuro, como el diseño: el desplazamiento lo hace el footer (sube y
			agranda su relleno superior), así el rojo nunca tapa contenido de la página ni del footer. */
.crh-sec.crh-news { position: relative; z-index: 2; }
body:has(.crh-sec.crh-news) .hft { margin-top: -106px; padding-top: 150px; } /* 56 de traslape + 40 del contenedor del tema + 10 de la columna */
@media (max-width: 900px) {
	.crh-news__box { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 767.98px) {
	.crh-news__box { padding: 36px 22px; border-radius: 24px; }
	.crh-news__title { font-size: 34px; }
	body:has(.crh-sec.crh-news) .hft { margin-top: -90px; padding-top: 120px; }
}

/* =====================================================================================
   Hero cinematográfico: slider con zoom lento, tarjeta flotante y confianza
   ===================================================================================== */
.crh-hero__slider { position: relative; height: 640px; border-radius: 28px; overflow: hidden; isolation: isolate; }
/* Colores de cada escena: los define su tema (oscuro/claro) y, si se eligió, su color propio
			(style="--crh-hero-bg:…" en la escena). Panel de texto y degradado sobre la foto leen lo mismo. */
.crh-hero__slide { --crh-hero-bg: #16110d; --crh-hero-fg: #fff; --crh-hero-eyebrow: var(--crh-red-light); position: absolute; inset: 0; display: grid; grid-template-columns: 44% 56%; opacity: 0; visibility: hidden; transition: opacity .9s var(--crh-ease), visibility .9s; }
.crh-hero__slide[data-tema="claro"] { --crh-hero-bg: #efe7db; --crh-hero-fg: var(--crh-black); --crh-hero-eyebrow: var(--crh-red); }
.crh-hero__slide { background: var(--crh-hero-bg); } /* sin línea clara en la unión texto/foto (píxeles fraccionarios) */
.crh-hero:not(.is-warm) .crh-hero__slide:not(.is-on) .crh-hero__img { display: none; } /* las otras escenas cargan su foto después de la página */
.crh-hero__slide.is-on { opacity: 1; visibility: visible; z-index: 1; }
.crh-sec .crh-hero__slide[hidden] { display: grid; } /* oculta con visibility (fundido y alto estable), no con display */
.crh-hero__txt { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 64px 0 120px 64px; background: var(--crh-hero-bg); color: var(--crh-hero-fg); }
.crh-hero__eyebrow { font-family: var(--crh-font); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--crh-hero-eyebrow); }
/* Titular por capas: eyebrow, título, bajada y botones entran uno tras otro; la tarjeta, al final. */
.crh-hero__txt > *, .crh-hero__card { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--crh-ease), transform .8s var(--crh-ease); }
.crh-hero__slide.is-on .crh-hero__txt > *, .crh-hero__slide.is-on .crh-hero__card { opacity: 1; transform: none; }
.crh-hero__slide.is-on .crh-hero__txt > :nth-child(2) { transition-delay: .12s; }
.crh-hero__slide.is-on .crh-hero__txt > :nth-child(3) { transition-delay: .22s; }
.crh-hero__slide.is-on .crh-hero__txt > :nth-child(4) { transition-delay: .32s; }
.crh-hero__slide.is-on .crh-hero__card { transition-delay: .45s; }
.crh-hero__title { margin: 20px 0; padding: 0; font-family: var(--crh-font); font-size: clamp(42px, 4.5vw, 72px); font-weight: 800; line-height: .95; letter-spacing: -.035em; color: inherit; white-space: pre-line; }
.crh-hero__lead { margin: 0; max-width: 420px; font-family: var(--crh-font-text); font-size: 18px; line-height: 1.5; }
.crh-hero__slide.is-on .crh-hero__lead { opacity: .82; }
.crh-hero__ctas { display: flex; gap: 10px; margin-top: 30px; flex-wrap: wrap; }
.crh-sec .crh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; min-width: 0; min-height: 0; margin: 0; padding: 0 28px; border: 0; border-radius: 999px; font-family: var(--crh-font); font-weight: 600; font-size: 15px; line-height: 1; letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap; transition: background .25s var(--crh-ease), color .25s; }
.crh-sec .crh-btn svg { transition: transform .25s var(--crh-ease); }
.crh-sec .crh-btn:hover svg { transform: translateX(3px); }
.crh-sec .crh-btn--red { background: var(--crh-red); color: var(--crh-white); }
.crh-sec .crh-btn--red:hover { background: var(--crh-red-dark); }
.crh-sec .crh-btn--ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
@media (hover: hover) and (pointer: fine) {
	.crh-sec .crh-hero__txt .crh-btn--ghost:hover { background: var(--crh-hero-fg); color: var(--crh-hero-bg); box-shadow: inset 0 0 0 1.5px var(--crh-hero-fg); }
}
.crh-sec .crh-btn:focus-visible { outline: 2px solid var(--crh-red) !important; outline-offset: 2px !important; }
.crh-hero__media { position: relative; overflow: hidden; }
.crh-sec .crh-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; transform: scale(1.12); transition: transform .9s var(--crh-ease); }
.crh-hero__slide.is-on .crh-hero__img { transform: scale(1); transition: transform var(--crh-hero-ms, 5000ms) linear; } /* el zoom dura lo mismo que la escena */
@starting-style { .crh-sec .crh-hero__slide.is-on .crh-hero__img { transform: scale(1.12); } } /* la 1.ª escena también parte ampliada: misma área LCP que las demás */
.crh-hero__media::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 38%; z-index: 1; background: linear-gradient(90deg, var(--crh-hero-bg), transparent); }
/* Tarjeta flotante */
.crh-hero__card { position: absolute; right: 28px; bottom: 96px; z-index: 3; display: flex; gap: 14px; align-items: center; padding: 10px 12px 10px 10px; border-radius: 18px; background: rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .4); color: var(--crh-black); }
.crh-sec .crh-hero__thumb { width: 64px; height: 64px; max-width: none; border-radius: 12px; object-fit: contain; background: var(--crh-white); flex: none; }
.crh-hero__cardtxt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.crh-hero__cardtag { font-family: var(--crh-font); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--crh-mute); }
.crh-hero__cardtxt b { display: block; max-width: 190px; font-size: 14px; font-weight: 600; line-height: 1.25; }
.crh-hero__cardprice { font-size: 15px; font-weight: 700; color: var(--crh-red); font-variant-numeric: tabular-nums; }
.crh-hero__cardprice s { color: var(--crh-mute); font-weight: 400; font-size: 12.5px; margin-left: 6px; }
.crh-sec .crh-hero__add { display: grid; place-items: center; flex: none; width: 42px; height: 42px; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--crh-black); font-size: 22px; font-weight: 400; line-height: 1; text-decoration: none; color: var(--crh-white); cursor: pointer; transition: background .2s; }
.crh-sec a.crh-hero__add.loading, .crh-sec .crh-hero__add.loading { opacity: .7; pointer-events: none; }
.crh-sec .crh-hero__add.added { background: var(--crh-red); }
.crh-hero__card .added_to_cart { display: none !important; } /* sin el «Ver carrito» de WooCommerce dentro de la tarjeta */
.crh-sec.crh-hero .crh-hero__add:hover, .crh-sec.crh-hero .crh-hero__add:focus { color: var(--crh-white); }
.crh-sec .crh-hero__add:focus-visible { outline: 2px solid var(--crh-red) !important; outline-offset: 2px !important; }
/* Pestañas de progreso + pausa */
.crh-hero__ctl { position: absolute; left: 64px; right: 28px; bottom: 30px; z-index: 5; display: flex; gap: 26px; align-items: flex-end; color: #fff; }
.crh-sec .crh-hero__pg { display: block; flex: 0 0 170px; height: auto; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-family: var(--crh-font); font-weight: inherit; line-height: normal; letter-spacing: 0; text-transform: none; text-align: left; color: inherit; cursor: pointer; }
/* El tema pinta todos los <button> al pasar el mouse (caja gris): en la navegación del hero, no. */
.crh-sec.crh-hero .crh-hero__pg:hover, .crh-sec.crh-hero .crh-hero__pg:focus, .crh-sec.crh-hero .crh-hero__pg:active { background: transparent; color: inherit; box-shadow: none; }
.crh-hero__pg > span:first-child { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 9px; font-family: var(--crh-font); font-size: 12.5px; font-weight: 600; opacity: .6; }
.crh-hero__pg > span:first-child b { font-variant-numeric: tabular-nums; }
.crh-hero__pg.is-on > span:first-child { opacity: 1; }
.crh-hero__bar { display: block; height: 3px; border-radius: 2px; background: currentColor; opacity: .25; position: relative; overflow: hidden; }
.crh-hero__pg.is-on .crh-hero__bar { opacity: 1; background: rgba(127, 127, 127, .35); }
.crh-hero__bar i { position: absolute; inset: 0; width: 100%; background: var(--crh-red); transform: scaleX(0); transform-origin: left center; } /* avance con transform: sin recalcular el diseño en cada cuadro */
.crh-sec .crh-hero__pg:focus-visible { outline: 2px solid var(--crh-red) !important; outline-offset: 4px !important; }
/* Navegación legible según el fondo de la escena (oscuro = claro, claro = oscuro). */
.crh-hero__slider.is-light .crh-hero__ctl { color: var(--crh-black); }
@media (hover: hover) and (pointer: fine) {
	.crh-sec .crh-hero__pg:not(.is-on):hover > span:first-child { opacity: 1; }
}
/* Pausa con fondo propio: siempre cae sobre la foto, así se lee en cualquier escena. */
.crh-sec .crh-hero__pp { display: grid; place-items: center; flex: none; width: 40px; height: 40px; min-width: 0; min-height: 0; margin: 0 0 0 auto; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: none; color: var(--crh-white); cursor: pointer; }
.crh-sec.crh-hero .crh-hero__pp:hover, .crh-sec.crh-hero .crh-hero__pp:focus { background: rgba(0, 0, 0, .65); color: var(--crh-white); box-shadow: none; }
.crh-sec .crh-hero__pp[hidden] { display: none; }
.crh-sec .crh-hero__pp .crh-ic-play { display: none; }
.crh-sec .crh-hero__pp[aria-pressed="true"] .crh-ic-play { display: block; }
.crh-sec .crh-hero__pp[aria-pressed="true"] .crh-ic-pause { display: none; }
.crh-sec .crh-hero__pp:focus-visible { outline: 2px solid var(--crh-red) !important; outline-offset: 2px !important; }
/* Confianza */
.crh-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.crh-trust__item { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 16px; background: var(--crh-sand); }
.crh-trust__ic { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--crh-white); color: var(--crh-black); }
.crh-trust__item p { display: flex; flex-direction: column; gap: 2px; margin: 0; font-family: var(--crh-font-text); font-size: 13px; color: var(--crh-mute); }
.crh-trust__item b { font-family: var(--crh-font); font-size: 14px; color: var(--crh-black); }
@media (hover: hover) and (pointer: fine) {
	.crh-sec .crh-hero__add:hover { background: var(--crh-red); }
}
@media (max-width: 1024.98px) {
	.crh-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	/* Todas las escenas en la misma celda: el alto es el de la más alta y la página no salta al cambiar. */
	.crh-hero__slider { display: grid; height: auto; border-radius: 22px; }
	.crh-hero__slide { position: relative; inset: auto; grid-area: 1 / 1; grid-template-columns: minmax(0, 1fr); grid-template-rows: 340px auto; }
	.crh-hero__media { order: -1; }
	.crh-hero__media::before { inset: auto 0 0 0; width: auto; height: 45%; background: linear-gradient(0deg, var(--crh-hero-bg), transparent); }
	.crh-hero__txt { padding: 6px 22px 96px; }
	.crh-hero__title { font-size: 42px; }
	.crh-hero__lead { font-size: 16px; }
	.crh-hero__card { display: none; }
	.crh-hero__ctl { left: 22px; right: 22px; bottom: 22px; gap: 12px; }
	.crh-sec .crh-hero__pg { flex: 1 1 0; min-width: 0; }
	.crh-sec .crh-hero__pg > span:first-child b { display: none; } /* como el diseño: solo el nombre, para que quepan las 3 */
}
@media (pointer: coarse) {
	.crh-sec .crh-hero__pg { padding-top: 14px; } /* zona de toque más alta */
}
/* Teléfonos: foto un poco más baja, título algo menor y botones lado a lado, para que «Comprar» quede en la
   primera pantalla (360×780 incluido). Tarjetas de confianza más compactas (2 × 2 sin cortes raros). */
@media (max-width: 600px) {
	.crh-hero__slide { grid-template-rows: 240px auto; }
	.crh-hero__txt { padding: 4px 20px 84px; }
	.crh-hero__title { margin: 14px 0; font-size: 36px; }
	.crh-hero__lead { font-size: 15px; line-height: 1.45; }
	.crh-hero__ctas { flex-wrap: wrap; gap: 8px; margin-top: 20px; } /* si no caben lado a lado, el segundo baja (nunca se aplastan) */
	.crh-sec .crh-hero__ctas .crh-btn { flex: 0 1 auto; height: 46px; padding: 0 18px; font-size: 14px; white-space: nowrap; }
	.crh-trust { gap: 10px; margin-top: 12px; }
	/* teléfonos: ícono + título (la descripción se omite por espacio) */
	.crh-trust__item { align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; }
	.crh-trust__ic { width: 34px; height: 34px; border-radius: 10px; }
	.crh-trust__ic svg { width: 18px; height: 18px; }
	.crh-trust__item p span { display: none; }
	.crh-trust__item b { font-size: 13px; line-height: 1.3; }
}
@media (max-width: 400px) { .crh-sec .crh-hero__ctas .crh-btn { padding: 0 14px; } }
@media (max-width: 379.98px) { .crh-sec .crh-hero__ctas .crh-btn svg { display: none; } } /* teléfonos angostos: sin flecha, ambos botones caben */
.crh-sec .crh-btn svg { flex: none; } /* la flecha nunca se encoge */

/* =====================================================================================
   Botones del tema: Woodmart pinta TODOS los <button> al pasar el mouse (fondo gris #e0e0e0, texto
   #3e3e3e, sin sombra) con una regla que carga después de esta hoja. Aquí cada botón propio declara su
   estado hover/foco con más especificidad (fuera de @media hover, para cubrir también el «hover pegado»
   de las pantallas táctiles). Así ningún hover se vuelve gris aunque el tema cambie el orden de carga.
   ===================================================================================== */
.crh-sec.crh-look .crh-look__dot:hover, .crh-sec.crh-look .crh-look__dot:focus { background: var(--crh-white); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.crh-sec.crh-look .crh-look__row .crh-look__chk:hover, .crh-sec.crh-look .crh-look__row .crh-look__chk:focus { background: var(--crh-black); color: var(--crh-white); box-shadow: none; }
.crh-sec.crh-look .crh-look__row.is-off .crh-look__chk:hover, .crh-sec.crh-look .crh-look__row.is-off .crh-look__chk:focus { background: transparent; color: transparent; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .45); }
.crh-sec.crh-look .crh-look__swbtn:hover, .crh-sec.crh-look .crh-look__swbtn:focus,
.crh-tops .crh-card .crh-sw:hover, .crh-tops .crh-card .crh-sw:focus { background: transparent; color: inherit; }
.crh-sec.crh-look .crh-look__swbtn.is-on:hover, .crh-tops .crh-card .crh-sw.is-on:hover { box-shadow: inset 0 0 0 1.5px var(--crh-black); }
.crh-sec.crh-look .crh-look__pill:hover, .crh-sec.crh-look .crh-look__pill:focus { background: var(--crh-white); color: var(--crh-black); box-shadow: inset 0 0 0 1.5px var(--crh-black); }
.crh-sec.crh-look .crh-look__pill.is-on:hover, .crh-sec.crh-look .crh-look__pill.is-on:focus { background: var(--crh-black); color: var(--crh-white); box-shadow: none; }
/* «Agregar N al carrito»: siempre rojo con texto blanco (el texto no se oscurece al pasar el mouse). */
.crh-sec.crh-look .crh-look__add:hover, .crh-sec.crh-look .crh-look__add:focus, .crh-sec.crh-look .crh-look__add:active { background: var(--crh-red); color: var(--crh-white); box-shadow: none; }
.crh-qv .crh-qv__box .crh-opt:hover, .crh-qv .crh-qv__box .crh-opt:focus { background: var(--crh-white); color: var(--crh-black); }
.crh-qv .crh-qv__box .crh-opt.is-oos:hover { color: var(--crh-mute); }
.crh-qv .crh-qv__box .crh-qv__th:hover { background: var(--crh-white); }
.crh-qv .crh-qv__box .crh-qv__add:not(:disabled):hover { background: var(--crh-red-dark); color: var(--crh-white); }
.crh-qv .crh-qv__box .crh-qv__x:hover { background: var(--crh-black); color: var(--crh-white); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
	.crh-sec.crh-look .crh-look__dot:hover { transform: scale(1.12); }
	.crh-sec.crh-look .crh-look__swbtn:not(.is-on):not(.is-oos):hover { box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .35); }
	.crh-sec.crh-look .crh-look__add:not(:disabled):hover svg { transform: translateX(3px); }
}
/* Arrastre del carrusel con el mouse: sin seleccionar texto ni «agarrar» las fotos. */
@media (hover: hover) and (pointer: fine) {
	.crh-tops .crh-track { -webkit-user-select: none; user-select: none; }
	.crh-tops .crh-track img { -webkit-user-drag: none; }
}