/* ==========================================================================
   CLON FIEL de la landing de CEIN (Figma XJJdJEqc6OGTC5ESFmx37i, nodo 6:309,
   capas reales vía get_design_context). Todos los valores (px, colores,
   line-heights, letter-spacing) son los EXACTOS del archivo — no aproximar.
   Fuente: el archivo usa "Styrene A Web" (no licenciada aquí); se usa
   Rethink Sans como sustituta documentada, con los mismos cuerpos/interlíneas.
   Este CSS es autónomo: no depende de style.css del tema.
   ========================================================================== */
*{ margin: 0; padding: 0; box-sizing: border-box; }

@font-face{
	font-family: "Rethink Sans";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("fonts/RethinkSans-Variable.woff2") format("woff2");
}
/* Geist (variable, OFL) — la fuente REAL de Your Next Store, extraída del
   propio proyecto YNS. Skin v4: sustituye a Rethink Sans en todo el sitio. */
@font-face{
	font-family: "Geist";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("fonts/geist-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face{
	font-family: "Geist";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("fonts/geist-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-024F, U+1E00-1EFF;
}

body.cein-clone{
	font-family: "Geist", -apple-system, "Segoe UI", sans-serif;
	background: #FFFFFF;
	color: #000000;
	font-size: 13px;
	line-height: 20px;
	-webkit-font-smoothing: antialiased;
}
.cein-clone a{ color: inherit; text-decoration: none; }
.cein-clone img{ display: block; }

/* --- Barra de anuncio (skin YNS v4): gris casi negro YNS, texto 12px --- */
.cein-announce{
	background: #171717;
	color: #fafafa;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 15px;
	font-size: 12px;
	line-height: 20px;
	text-align: center;
	white-space: nowrap;
}

/* --- Header (skin YNS v4, layout.tsx): sticky con blur (bg-background/80
   backdrop-blur-md), borde inferior #e5e5e5, fila de 64px (h-16), logo bold
   izquierda, nav 14px medium gris con hover a negro, iconos derecha --- */
.cein-header{
	background: rgba(255, 255, 255, 0.8);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid #e5e5e5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 64px;
	padding: 0 32px;
	width: 100%;
}
.cein-header-left{ display: flex; align-items: center; gap: 24px; }
.cein-logo{
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 20px;
	white-space: nowrap;
}
.cein-menu{ display: flex; align-items: stretch; gap: 4px; }
/* OJO: ">" obligatorio — sin él, este padding de 22px alcanzaba también a
   los enlaces DE DENTRO del mega-menú (que son descendientes de .cein-menu)
   y abría unos espaciados enormes entre categorías del panel. */
.cein-menu > a{
	/* 22px arriba/abajo: el enlace llena los 64px del header entero — sin
	   franja muerta entre el enlace y el mega-menú al bajar el ratón (antes
	   el hover se perdía en ese hueco y el panel se esfumaba). */
	padding: 22px 10px;
	display: inline-flex;
	align-items: center;
	font-size: 14px;
	font-weight: 500;
	color: #737373;
	line-height: 20px;
	white-space: nowrap;
	transition: color .15s ease;
}
.cein-menu > a:hover{ color: #0a0a0a; }
/* Hamburguesa: oculta en escritorio; en ≤900px sustituye al menú, que se
   despliega como panel blanco bajo el header al pulsarla. */
/* El menú pasó de 5 a 8 entradas (Encuentra tu peluca, Marcas y Blog suben al
   primer nivel, como en el diseño). Entre 900 y 1200 ya no cabían junto al logo,
   el botón y los iconos: empujaban el CTA y el carrito fuera de la pantalla. Por
   eso el acordeón —que ya existía— entra antes, a 1200. */
.cein-burger{ display: none; background: none; border: none; padding: 8px; color: #0a0a0a; cursor: pointer; }
@media (max-width: 1200px){
	.cein-burger{ display: inline-flex; align-items: center; }
	.cein-menu{ display: none; }
	.cein-header.nav-open .cein-menu{
		display: flex;
		flex-direction: column;
		align-items: stretch;
		position: absolute;
		top: 100%; left: 0; right: 0;
		background: #fff;
		border-bottom: 1px solid #e5e5e5;
		padding: 8px 0;
		z-index: 60;
	}
	.cein-header.nav-open .cein-menu > a{ padding: 12px 24px; font-size: 16px; }
	.cein-header.nav-open .cein-mega{ display: none !important; }
}
.cein-icons{ display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.cein-icons svg{ width: 17px; height: 17px; display: block; }
.cein-icons .cein-icon-text{ font-size: 13px; line-height: 20px; white-space: nowrap; }
.cein-icon-count{ display: flex; align-items: center; gap: 4px; font-size: 13px; line-height: 20px; }

/* --- Hero: 712px, foto cover + velo negro 10%, contenido abajo-izq pad 64, gap 20 --- */
.cein-hero{
	position: relative;
	height: 712px;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 20px;
	padding: 64px;
}
.cein-hero::before{
	content: "";
	position: absolute;
	inset: 0;
	background: url("images/cein/hero.png") center/cover no-repeat;
}
.cein-hero::after{
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.1);
}
.cein-hero-title{
	position: relative;
	z-index: 1;
	color: #fff;
	font-size: 24px;
	line-height: 32px;
	font-weight: 400;
	white-space: pre-wrap;
}
.cein-hero-btn{
	position: relative;
	z-index: 1;
	background: #F8F9FA;
	color: #000;
	padding: 11px 18px;
	font-size: 15px;
	line-height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	font-family: inherit;
}

/* --- Sección genérica: pad 32, gap 48 título→contenido; título con pad 16 --- */
.cein-section{
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 24px 32px;
	width: 100%;
}
.cein-section-title{
	padding: 16px;
	font-size: 18px;
	line-height: 24px;
	font-weight: 400;
	width: 100%;
}
.cein-section-title.is-center{ text-align: center; }

/* --- 3 collection banners: fila gap 20, alto 532, texto blanco abajo pad 32 --- */
.cein-collections{ display: flex; gap: 20px; height: 532px; width: 100%; }
.cein-collection{
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: flex-end;
	padding: 32px;
}
.cein-collection > img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cein-collection::after{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 45.5%, rgba(0,0,0,0.1) 85%);
}
.cein-collection span{
	position: relative;
	z-index: 1;
	color: #fff;
	font-size: 18px;
	line-height: 24px;
}
/* Los 2 banners grandes: mismo componente, alto 719 y velo hasta 0.2 */
.cein-collections.is-big{ height: 719px; }
.cein-collections.is-big .cein-collection::after{
	background: linear-gradient(to bottom, rgba(0,0,0,0) 45.5%, rgba(0,0,0,0.2) 85%);
}

/* --- Fila de 5 productos: gap 20, alto 348; detalle 13/20, gap 3, pb 13 --- */
.cein-products{ display: flex; gap: 20px; width: 100%; }
.cein-product{
	flex: 1 1 0;
	min-width: 0;
	height: 348px;
	display: flex;
	flex-direction: column;
	gap: 13px;
}
.cein-product-image{
	position: relative;
	flex: 1 1 0;
	min-height: 0;
	width: 100%;
}
.cein-product-image > img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cein-product-overlay{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	padding: 15px;
}
.cein-product-overlay.has-swatches{
	background: rgba(255,255,255,0.8);
	gap: 12px;
}
.cein-swatches-info{ flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cein-swatches-info p{ font-size: 13px; line-height: 20px; }
.cein-swatch-row{ display: flex; align-items: center; gap: 4px; }
.cein-swatch{ width: 20px; height: 20px; position: relative; display: flex; align-items: center; justify-content: center; }
.cein-swatch img{ width: 16px; height: 16px; border-radius: 50%; }
.cein-swatch.is-active{ border: 1px solid #000; border-radius: 50%; }
.cein-plus{ flex: none; }
.cein-plus svg{ width: 18px; height: 18px; display: block; }
.cein-product-detail{
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding-bottom: 13px;
	font-size: 13px;
	line-height: 20px;
}

/* --- Declaración editorial: bg #f5f4f4, pt 96 pb 180, centrada, gap 47 --- */
.cein-statement{
	background: #F5F4F4;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 47px;
	padding: 56px 0 72px;
	text-align: center;
	width: 100%;
}
.cein-statement h2{ font-size: 24px; line-height: 32px; font-weight: 400; width: 720px; max-width: 90%; }
.cein-statement p{ font-size: 16px; line-height: 22px; width: 720px; max-width: 90%; }

/* --- Instagram: 5 imágenes alto 251.2, la 4ª con velo 50% + icono 34 centrado --- */
.cein-insta{ display: flex; gap: 20px; width: 100%; }
.cein-insta-item{ position: relative; flex: 1 1 0; min-width: 0; height: 251.2px; }
.cein-insta-item > img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cein-insta-item.has-overlay::after{ content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.cein-insta-item .cein-insta-icon{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 1;
}
.cein-insta-icon svg{ width: 34px; height: 34px; display: block; color: #fff; }

/* --- Footer: bg #f5f4f4, borde sup #ddd, pt 76 pb 42, gap 80 --- */
.cein-footer{
	background: #F5F4F4;
	border-top: 1px solid #ddd;
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 48px 0 32px;
	width: 100%;
}
.cein-footer-content{ display: flex; gap: 25px; padding: 0 40px; width: 100%; align-items: flex-start; }
.cein-footer-cols{ flex: 1 1 0; min-width: 0; display: flex; gap: 25px; align-items: flex-start; }
.cein-footer-col{ flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.cein-footer-col.is-wide{ flex: none; width: 370px; }
.cein-footer-label{
	color: #565656;
	font-size: 11px;
	line-height: 17px;
	letter-spacing: 0.72px;
	text-transform: uppercase;
}
.cein-footer-links{ display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 20px; color: #000; }
.cein-subscription{ flex: none; width: 491px; padding: 0 25px; display: flex; flex-direction: column; gap: 24px; }
.cein-subscription-title{ font-size: 16px; line-height: 22px; }
.cein-subscription-form{ display: flex; flex-direction: column; gap: 18px; }
.cein-input-wrap{ display: flex; flex-direction: column; gap: 5px; }
.cein-input{
	border: 1px solid #D3D4D5;
	padding: 12px 14px;
	font-size: 13px;
	line-height: 20px;
	font-family: inherit;
	color: #000;
	width: 100%;
	background: transparent;
}
.cein-input::placeholder{ color: #565656; }
.cein-legal{ font-size: 13px; line-height: 20px; }
.cein-legal a{ text-decoration: underline; }
.cein-btn-dark{
	background: #000;
	color: #fff;
	padding: 11px 18px;
	font-size: 15px;
	line-height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	border: none;
	cursor: pointer;
	font-family: inherit;
}
.cein-copyright{ padding: 0 40px; color: #565656; font-size: 13px; line-height: 20px; }

/* --- Bloque "Shop" del Product Listing (nodo 12:774, APLANADO — medidas
   tomadas de la imagen nativa 1400x2302, ±2px). Insertado bajo el header a
   petición del owner. Las 12 fotos son recortes 1:1 de los tiles originales
   (fondo gris claro incluido en el propio recorte). --- */
.cein-shop-head{ padding: 46px 16px 0; }
.cein-shop-title{ font-size: 24px; line-height: 32px; font-weight: 500; }
.cein-shop-toolbar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 16px;
	padding-left: 4px;
	padding-right: 26px;
}
.cein-pills{ display: flex; align-items: center; gap: 10px; }
.cein-pill{
	display: inline-flex;
	align-items: center;
	border: 1px solid #000;
	border-radius: 999px;
	padding: 4px 16px;
	font-size: 13px;
	line-height: 20px;
	white-space: nowrap;
	background: none;
	cursor: pointer;
	font-family: inherit;
	color: #000;
}
.cein-sortfilter{ display: flex; align-items: center; gap: 60px; font-size: 13px; line-height: 20px; }
.cein-sortfilter .cein-caret{ font-size: 10px; }
.cein-shop-grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 20px;
	row-gap: 66px;
	margin: 99px 42px 64px;
}
.cein-shop-card{ display: flex; flex-direction: column; }
.cein-shop-card-image{ position: relative; }
.cein-shop-card-image > img{ width: 100%; height: auto; display: block; }
.cein-shop-heart{
	position: absolute;
	top: 20px;
	right: 20px;
	width: 18px;
	height: 18px;
	color: #000;
}
.cein-shop-heart svg{ width: 18px; height: 18px; display: block; }
.cein-shop-plus{
	position: absolute;
	bottom: 18px;
	right: 18px;
	width: 20px;
	height: 20px;
	color: #000;
}
.cein-shop-plus svg{ width: 20px; height: 20px; display: block; }
.cein-shop-card-name{ margin-top: 24px; font-size: 13px; line-height: 20px; }
.cein-shop-card-price{ margin-top: 3px; font-size: 13px; line-height: 20px; font-weight: 600; }
.cein-shop-card-price del{ font-weight: 400; color: #8a8a8a; margin-left: 6px; }

/* Banda de color del Classic Pant — antes venía incrustada en el recorte de
   la foto (UI como imagen = mal); ahora es código real superpuesto: label +
   3 swatches (el activo con anillo) + "+", como en el diseño. */
.cein-shop-swatchband{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 93px;
	background: rgba(255,255,255,0.88);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 15px;
	gap: 12px;
}
.cein-shop-swatchband .cein-swatchband-info{ display: flex; flex-direction: column; gap: 14px; }
.cein-shop-swatchband .cein-swatchband-label{ font-size: 13px; line-height: 20px; color: #000; }
.cein-shop-swatchband .cein-swatchband-dots{ display: flex; align-items: center; gap: 8px; }
.cein-swatchdot{ width: 16px; height: 16px; border-radius: 50%; display: inline-block; }
.cein-swatchdot.is-black{ background: #1a1a1a; }
.cein-swatchdot.is-gray{ background: #a0a0a0; }
.cein-swatchdot.is-beige{ background: #d8bfa8; }
.cein-swatchdot.is-active{ box-shadow: 0 0 0 1px #fff, 0 0 0 2.5px #000; }
/* El "+" de esta tarjeta vive dentro de la banda (como en el original) */
.cein-shop-swatchband .cein-shop-plus-inline{ width: 20px; height: 20px; color: #000; flex: none; }
.cein-shop-swatchband .cein-shop-plus-inline svg{ width: 20px; height: 20px; display: block; }

/* --- Compatibilidad del header CEIN con el resto del sitio (style.css) --- */
/* El offset del top-bar viejo ya no aplica: el header viejo no se renderiza */
body.cein-chrome{ padding-top: 0 !important; }
/* style.css pinta los enlaces en terracota al hover — el header CEIN es monocromo */
.cein-header a:hover, .cein-menu a:hover, .cein-announce a:hover{ color: #000; }
.cein-announce, .cein-announce a{ color: #fff; }
/* Los iconos del header son <a> ahora: sin subrayados ni colores heredados */
.cein-icons a{ color: #000; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
/* Fallback móvil provisional del clon: el menú de texto se oculta en pantallas
   estrechas (CEIN no define header móvil desktop-first aquí; el header móvil
   real del Figma es otro nodo y se clonará aparte) */
@media (max-width: 1200px){ .cein-menu{ display: none; } .cein-icon-text{ display: none; } }

/* Hero corto en portada (petición del owner): banda de imagen bajo el menú
   que NO ocupa la pantalla entera — los productos del módulo Shop asoman ya
   en el primer pantallazo de un portátil (~700-800px útiles). El hero
   original de CEIN mide 712px; aquí 440px, mismo encuadre y contenido. */
.cein-hero--short{ height: 535px; padding: 48px 64px; } /* +95px a petición del owner: hasta donde terminaban las píldoras */

/* ============ HOME v4: estructura V1 + contenido Hairstore, piel CEIN ============ */
/* Hero con la foto de la V1 (hero-header.jpg) en vez de la de CEIN */
.cein-hero--v1::before{ background-image: url("images/hero-header.jpg"); }
.cein-hero-copy{
	position: relative;
	z-index: 1;
	color: #fff;
	font-size: 15px;
	line-height: 22px;
	max-width: 480px;
	margin: 0;
}
/* Categorías: fila deslizable horizontal (estructura V1) con tiles estilo
   collection-banner de CEIN (nombre blanco sobre degradado) */
.cein-cats{
	display: flex;
	gap: 20px;
	overflow-x: auto;
	padding-bottom: 8px;
	-webkit-overflow-scrolling: touch;
}
.cein-cat{
	position: relative;
	flex: 0 0 260px;
	height: 340px;
	display: flex;
	align-items: flex-end;
	padding: 20px;
}
.cein-cat > img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cein-cat::after{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 45.5%, rgba(0,0,0,0.25) 90%);
}
.cein-cat span{ position: relative; z-index: 1; color: #fff; font-size: 15px; line-height: 20px; }
/* La parrilla de productos de la home vive dentro de .cein-section (pad 32):
   sin el margen propio de la versión de listado */
.cein-shop-grid--home{ margin: 0; }
.cein-shop-card-image{ display: block; position: relative; }
/* Tarjeta estilo Nayzak (referencia del owner): la foto vive DENTRO de un
   tile gris claro uniforme, entera (contain, sin recortar cabezas), con
   mix-blend-mode:multiply para que los fondos blancos de las fotos se fundan
   con el tile y todas parezcan de la misma sesión. */
.cein-shop-card-image{ background: #F5F4F4; }
.cein-shop-card-image > img{
	width: 100%;
	aspect-ratio: 314/380;
	object-fit: contain;
	padding: 7%;
	box-sizing: border-box;
	mix-blend-mode: multiply;
}
/* Banda "Reservar consulta" (estructura V1, estética monocroma CEIN) */
.cein-band{
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	color: #fff !important;
	padding: 14px;
	font-size: 15px;
	line-height: 20px;
}
.cein-band:hover{ color: #fff; }
/* Opiniones (estructura V1: lista izq + foto tienda dcha) */
.cein-reviews{ display: flex; gap: 20px; align-items: stretch; }
.cein-reviews-list{ flex: 1 1 0; min-width: 0; }
.cein-review{ border-top: 1px solid #ddd; padding: 16px 0; max-width: 560px; }
.cein-review p{ font-size: 13px; line-height: 20px; }
.cein-review-head{ margin-bottom: 4px; }
.cein-review-stars{ font-size: 11px; letter-spacing: 2px; }
.cein-reviews-photo{ flex: 1 1 0; min-width: 0; }
.cein-reviews-photo img{ width: 100%; height: 100%; object-fit: cover; }
/* Marcas: fila estática centrada (estructura V1, sin marquee) */
.cein-brands{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 28px 40px;
}
.cein-brands img{ height: 24px; width: auto; opacity: 0.8; }

/* Logo original Hairstore (dos líneas), tamaño compacto para la fila CEIN */
.cein-logo--hairstore{ display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.cein-logo--hairstore .cein-logo-main{ font-size: 22px; font-weight: 700; letter-spacing: 1px; }
.cein-logo--hairstore .cein-logo-sub{ font-size: 8.5px; font-weight: 400; letter-spacing: 2.6px; margin-top: 2px; }

/* Mega-menú desplegable. Skin YNS v4: el header pasa a STICKY (como el de
   YNS, sticky top-0 z-50 con blur) — la regla de position de aquí pisa a la
   del bloque principal por venir después en el archivo, así que el sticky
   vive aquí. El mega ahora se despliega con animación (fundido + descenso)
   en vez del display:none→flex seco de antes. */
.cein-header{ position: sticky; top: 0; z-index: 50; }
.cein-has-mega{ position: static; }
.cein-mega{
	display: flex;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	border-bottom: 1px solid #e5e5e5;
	box-shadow: 0 24px 48px -24px rgba(0,0,0,0.12);
	padding: 44px 32px 60px 121px;
	z-index: 60;
	justify-content: space-between;
	gap: 40px;
}
/* Puente invisible entre el borde del header y el panel: aunque quede algún
   píxel de holgura, el hover no se corta al cruzarlo. */
.cein-mega::before{
	content: "";
	position: absolute;
	top: -24px; left: 0; right: 0; height: 24px;
}
.cein-has-mega:hover .cein-mega,
.cein-has-mega:focus-within .cein-mega{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	transition-delay: 0s;
}
.cein-mega-cols{ display: flex; gap: 60px; align-items: flex-start; }
.cein-mega-col{ display: flex; flex-direction: column; gap: 10px; min-width: 150px; }
.cein-mega-label{ color: #565656; font-size: 11px; line-height: 17px; letter-spacing: 0.72px; text-transform: uppercase; margin-bottom: 6px; }
.cein-mega-col a{ font-size: 13px; line-height: 18px; color: #000; }
.cein-mega-col a:hover{ text-decoration: underline; }
.cein-mega-photo{ width: 315px; flex: none; }
.cein-mega-photo img{ width: 315px; height: 378px; object-fit: cover; display: block; }
@media (max-width: 1200px){ .cein-mega{ display: none !important; } }

/* Carrusel lateral de categorías (Everlane nodo 4:280, CAPAS REALES):
   título 28/34 + subtítulo 16/24 con margen 42; tarjetas 282 de ancho
   (imagen 282x420 con radio suave) + nombre 13/16 y línea gris debajo;
   gap 12; flechas 40px centradas; última tarjeta asomando; indicador abajo. */
.cein-favs{ padding: 36px 0 24px; }
.cein-favs-head{ padding: 0 32px; margin-bottom: 18px; }
.cein-favs-title{ font-size: 28px; line-height: 34px; font-weight: 500; }
.cein-favs-sub{ font-size: 16px; line-height: 24px; color: #565656; margin-top: 12px; }
.cein-favs-row{ position: relative; display: flex; align-items: stretch; }
.cein-favs-arrow{
	flex: 0 0 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	color: #000;
	padding: 0;
	font-family: inherit;
}
.cein-favs-arrow svg{ width: 22px; height: 22px; }
.cein-favs-track{
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	flex: 1 1 0;
	min-width: 0;
}
.cein-favs-track::-webkit-scrollbar{ display: none; }
.cein-favs-card{ flex: 0 0 282px; }
.cein-favs-card img{ width: 282px; height: 420px; object-fit: cover; border-radius: 4px; background: #F5F4F4; display: block; }
.cein-favs-meta{ margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.cein-favs-name{ display: flex; justify-content: space-between; font-size: 13px; line-height: 16px; }
.cein-favs-extra{ font-size: 13px; line-height: 16px; color: #565656; }
.cein-favs-indicator{ margin: 18px 32px 0; height: 2px; background: #eee; position: relative; }
.cein-favs-indicator span{ position: absolute; left: 0; top: 0; height: 2px; background: #000; width: 20%; transition: left .2s ease, width .2s ease; }

/* ── Hero (skin YNS v4, components/sections/hero.tsx): banda gris muy suave
   sin foto, titular text-5xl/6xl medium tracking-tight, párrafo muted 19px,
   CTA píldora negra h-48. Sustituye al hero con foto + tarjeta blanca
   (referencia Nayzak anterior). ── */
.cein-hero--card{
	justify-content: center;
	align-items: flex-start;
	padding: 96px 32px;
	height: auto !important;
	min-height: 0;
	background: #f7f7f7;
}
/* Sin foto de fondo ni velo en el hero YNS. */
.cein-hero--card.cein-hero--v1::before{ background-image: none; background: #f7f7f7; }
.cein-hero--card::after{ background: none; }
.cein-hero-card{
	position: relative;
	z-index: 1;
	background: none;
	padding: 0;
	max-width: 640px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.cein-hero-card-title{
	font-size: clamp(36px, 4vw, 56px);
	line-height: 1.08;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: #0a0a0a;
}
.cein-hero-card-copy{ font-size: 19px; line-height: 1.6; color: #737373; }
.cein-hero-card-link{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #171717;
	color: #fafafa;
	border-radius: 999px;
	min-height: 48px;
	padding: 12px 32px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	align-self: flex-start;
	box-sizing: border-box;
	transition: background .15s ease;
}
.cein-hero-card-link:hover{ background: #2b2b2b; color: #fafafa; }
/* La flecha "→" va en un span propio — sin esto heredaba un color oscuro de
   una regla previa y desaparecía sobre el botón negro. */
.cein-hero-card-link span{ color: inherit; }

/* ── Pestañas de producto (referencia Nayzak) ── */
.cein-tabs{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	padding: 4px 16px 12px;
}
.cein-tab{
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 16px;
	line-height: 24px;
	color: #565656;
	padding: 0 0 4px;
}
.cein-tab.is-active{
	color: #000;
	font-weight: 600;
	border-bottom: 2px solid #000;
}
.cein-tab-grid{ display: none; }
.cein-tab-grid.is-active{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 20px;
	row-gap: 32px;
}
.cein-tab-cell.is-hidden{ display: none; }
.cein-loadmore-wrap{ display: flex; justify-content: center; padding-top: 24px; }

/* Carrusel: título izq + controles (flecha ← puntos → flecha) arriba-dcha,
   como la referencia "Latest Arrivals" del owner. Track a sangre del margen. */
.cein-favs-head{ display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.cein-favs-controls{ display: flex; align-items: center; gap: 14px; }
.cein-favs-controls .cein-favs-arrow{ flex: none; width: auto; }
.cein-favs-controls .cein-favs-arrow svg{ width: 24px; height: 24px; }
.cein-favs-dots{ display: inline-flex; align-items: center; gap: 8px; }
.cein-dot{ width: 7px; height: 7px; border-radius: 50%; background: #000; opacity: 0.9; display: inline-block; }
.cein-dot.is-active{ background: transparent; border: 1.5px solid #000; width: 11px; height: 11px; }
.cein-favs-trackwrap{ padding: 0 32px; }
.cein-favs-imgwrap{ display: block; background: #F5F4F4; }
.cein-favs-imgwrap img{ mix-blend-mode: multiply; }

/* Carrusel v3 (referencia "New Arrivals" con plantas): SOLO puntos arriba-dcha
   (clicables), tarjeta con botón circular blanco → dentro de la foto,
   nombre grande + "N productos" gris. Última tarjeta asomando cortada. */
.cein-dot{ cursor: pointer; }
.cein-favs-card{ flex: 0 0 340px; }
/* Skin YNS v4: foto a sangre (cover) sin el padding interior del 6% que
   dejaba un marco blanco dentro del cuadro gris, esquinas rounded-2xl. */
.cein-favs-imgwrap{ position: relative; display: block; border-radius: 16px; overflow: hidden; }
.cein-favs-imgwrap img{ width: 340px; height: 390px; object-fit: cover; padding: 0; box-sizing: border-box; display: block; }
.cein-favs-go{
	position: absolute;
	right: 16px;
	bottom: 16px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #000;
	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.cein-favs-go svg{ width: 18px; height: 18px; }
.cein-favs-meta{ margin-top: 14px; gap: 6px; }
.cein-favs-name{ font-size: 22px; line-height: 26px; font-weight: 600; }
.cein-favs-extra{ font-size: 14px; line-height: 18px; color: #8a8a8a; }
/* la fila sangra por la derecha para que la última tarjeta asome cortada */
.cein-favs-trackwrap{ padding-right: 0; }


/* ==========================================================================
   MÁRGENES LATERALES estilo V1 (preferencia del owner): las secciones y
   fotos van a sangre completa, y el CONTENIDO se alinea a un margen lateral
   fluido: 32px hasta 1400px de ancho, y a partir de ahí crece para mantener
   la columna de contenido de 1400 centrada (fórmula de la V1).
   ========================================================================== */
:root{
	--cein-inset: max(32px, calc(50vw - 912px + 32px)); /* zona de contenido ~1760px para aprovechar pantallas grandes (1920+) */
}
.cein-header{ padding: 18px var(--cein-inset); }
.cein-hero--card{ padding: 40px var(--cein-inset); }
.cein-section{ padding-left: var(--cein-inset); padding-right: var(--cein-inset); }
.cein-favs-head{ padding: 0 var(--cein-inset); }
.cein-favs-trackwrap{ padding-left: var(--cein-inset); padding-right: 0; }
.cein-footer-content{ padding: 0 var(--cein-inset); }
.cein-copyright{ padding: 0 var(--cein-inset); }
.cein-shop-head{ padding-left: var(--cein-inset); padding-right: var(--cein-inset); }
.cein-shop-grid{ margin-left: var(--cein-inset); margin-right: var(--cein-inset); }
.cein-mega{ padding-left: var(--cein-inset); padding-right: var(--cein-inset); }

/* ==========================================================================
   HOME v5 — clon de Your Next Store (bloque "v4-"). Valores portados de las
   clases Tailwind del código fuente (scratchpad/yns): contenedor max-w-7xl
   (1280px) px-8, secciones py-16/24, grid 3 col gap-8 (32px), cards
   aspect-square bg #f5f5f5 rounded-2xl (16px), botones píldora h-12 (48px)
   px-8, tipografía Geist.
   ========================================================================== */
/* La app YNS no lleva barra de anuncio — el teléfono vive en el footer. */
.cein-announce{ display: none; }

.v4-container{ max-width: none; width: 100%; margin: 0; padding: 0 var(--cein-inset); box-sizing: border-box; } /* mismo margen que cabecera/footer (--cein-inset) → todo alineado */
body.cein-clone{ font-size: 16px; line-height: 1.5; color: #0a0a0a; }

/* — Hero — */
.v4-hero{ position: relative; overflow: hidden; background: #f8f8f7; }
/* Slider de 3 fotos (petición del owner): imágenes apiladas con fundido,
   auto-avance + puntos. SIN el velo blanco degradado de antes (rechazado
   explícitamente — la foto se ve limpia). */
.v4-hero-media{ position: absolute; top: 0; right: 0; bottom: 0; width: 50%; }
.v4-hero-media img{
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; object-position: center 30%;
	opacity: 0;
	transition: opacity .8s ease;
}
.v4-hero-media img.is-active{ opacity: 1; }
/* Puntos del slider (referencia del owner): CENTRADOS abajo, el activo se
   estira en pastilla blanca; los inactivos, puntitos pequeños. */
.v4-hero-dots{
	position: absolute; left: 50%; transform: translateX(-50%); bottom: 22px;
	display: flex; align-items: center; gap: 8px; z-index: 2;
}
.v4-hero-dot{
	width: 7px; height: 7px; border-radius: 999px;
	border: none; padding: 0; cursor: pointer;
	background: rgba(255,255,255,0.6);
	transition: width .25s ease, background .2s ease;
}
.v4-hero-dot.is-active{ width: 26px; background: #fff; }
/* Decisión final del owner: la imagen ocupa TODO el hero como background
   (nada de mitad derecha ni marco). Texto encima en blanco, con un velo
   OSCURO suave de izquierda a derecha para legibilidad (el velo blanco fue
   rechazado; este es el patrón clásico foto+velo del hero V1). */
.v4-hero-media{ inset: 0; width: auto; }
.v4-hero-media::after{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.08) 100%);
	pointer-events: none;
}
.v4-hero-dots{ z-index: 3; }
.v4-hero-inner{ position: relative; z-index: 2; }
.v4-hero-inner h1{ color: #fff; }
.v4-hero-inner p{ color: rgba(255,255,255,0.85); }
.v4-hero-inner .v4-btn-ghost{
	border-color: rgba(255,255,255,0.6);
	color: #fff;
}
.v4-hero-inner .v4-btn-ghost:hover{ background: rgba(255,255,255,0.14); color: #fff; }
.v4-hero-inner .v4-btn-dark{ background: #fff; color: #0a0a0a; }
.v4-hero-inner .v4-btn-dark:hover{ background: rgba(255,255,255,0.9); color: #0a0a0a; }
/* !important: hay una regla previa .cein-clone a.v4-btn-dark{color:#fff}
   (del botón negro estándar) que ganaba y dejaba blanco-sobre-blanco. */
.v4-hero-inner .v4-btn-dark,
.cein-clone .v4-hero-inner a.v4-btn-dark{ color: #0a0a0a !important; }
.v4-hero-inner .v4-btn-dark span{ color: inherit; }

/* Carrusel de categorías: respeta los MÁRGENES del contenedor (1280px
   centrado) — antes iba a sangre completa y la primera tarjeta aparecía
   cortada en pantallas anchas. El recorte del scroll ocurre ahora en el
   borde del contenedor, no en el del viewport. */
.cein-favs{ max-width: 1760px; margin: 0 auto; box-sizing: border-box; }
.cein-favs-head{ padding: 0 32px; }
/* padding:0 explícito: una regla anterior le mete padding-left responsivo
   (--cein-inset, ~330px en pantallas anchas) que desplazaba la primera
   tarjeta lejos del margen del contenedor. */
.cein-favs-trackwrap{ margin: 0 32px; padding: 0; overflow: hidden; }
.cein-favs-track{ padding: 0 !important; margin: 0 !important; }
/* Tamaño de tarjeta FLUIDO: 4 por vista en escritorio (antes quedaban 2
   gigantes por los anchos fijos heredados de 282/340px), 2 en tablet,
   1 y pico en móvil para invitar al swipe. */
/* Gap EXPLÍCITO igual al del cálculo del ancho: si difieren, la 5ª tarjeta
   asoma un filo cortado por el borde derecho (visto por el owner). */
.cein-favs-track{ gap: 20px !important; }
.cein-favs-card{ flex: 0 0 calc((100% - 80px) / 5) !important; } /* 5 por vista, igual que Productos destacados */
.cein-favs-imgwrap img{ width: 100% !important; height: auto !important; aspect-ratio: 340 / 390; object-fit: cover; }
@media (max-width: 900px){
	.cein-favs-card{ flex-basis: calc((100% - 20px) / 2) !important; }
}
@media (max-width: 560px){
	.cein-favs-card{ flex-basis: 78% !important; }
}
@media (max-width: 560px){
	.cein-favs-trackwrap{ margin: 0 20px; }
}

/* ==========================================================================
   RITMO VERTICAL COHERENTE (petición del owner: "falta coherencia de
   espaciados") — una sola escala para toda la home: 72px entre secciones,
   32px de cabecera de sección a contenido, mitad en móvil. Pisa los
   paddings heredados dispares de cada bloque.
   ========================================================================== */
.cein-favs{ padding: 48px 0 0 !important; }
.cein-favs-head{ margin-bottom: 32px !important; }
/* Las cards del carrusel arrastran ~26px de aire propio bajo el texto — se
   compensa en la sección siguiente para que el hueco visual cards→título
   sea EXACTAMENTE 72px, igual que hero→"Categorías". */
.cein-favs + .v4-inline-panel + .v4-section{ padding-top: 46px !important; }

/* Unificación de tarjetas home (petición del owner): el carrusel de
   categorías y "Productos destacados" comparten retícula (4 por fila),
   proporción de foto (340/390 vertical) y jerarquía de texto
   (título 18/600 → línea secundaria 14 muted / precio 15/600). */
body.cein-clone .v4-grid{ grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; }
body.cein-clone .v4-card-photo{ aspect-ratio: 340 / 390 !important; }
body.cein-clone .v4-card-name{ font-size: 18px !important; font-weight: 600 !important; }
body.cein-clone .v4-card-price{ font-size: 15px !important; font-weight: 600 !important; }
.cein-favs-name,
.cein-favs-name span{ font-size: 18px !important; font-weight: 600 !important; line-height: 1.3 !important; }
.cein-favs-extra{ font-size: 14px !important; color: #737373 !important; }
@media (max-width: 900px){
	body.cein-clone .v4-grid{ grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px){
	body.cein-clone .v4-grid{ grid-template-columns: 1fr !important; }
}
.v4-section{ padding: 72px 0 !important; }
.v4-section-head{ margin-bottom: 32px !important; }
.v4-story-inner{ padding: 80px 0 !important; }
.v4-news-inner{ padding: 54px 0 !important; }
.v4-inline-panel.is-open{ padding: 48px 0 24px; }
@media (max-width: 900px){
	.cein-favs{ padding: 40px 0 0 !important; }
	.v4-section{ padding: 40px 0 !important; }
	.v4-section-head{ margin-bottom: 24px !important; }
	.v4-story-inner{ padding: 48px 0 !important; }
	.v4-news-inner{ padding: 48px 0 !important; }
}
.v4-hero-inner{ position: relative; max-width: 672px; padding: 112px 0; }
.v4-hero-inner h1{ font-size: clamp(36px, 4.2vw, 60px); line-height: 1.05; font-weight: 500; letter-spacing: -0.025em; margin: 0; }
.v4-hero-inner p{ font-size: 20px; line-height: 1.6; color: #737373; margin: 24px 0 0; }
.v4-hero-ctas{ display: flex; gap: 16px; margin-top: 40px; flex-wrap: wrap; }
.v4-btn-dark,
.v4-news-form button{
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	height: 48px; padding: 0 32px; border-radius: 999px; border: none;
	background: #0a0a0a; color: #fff; font-size: 16px; font-weight: 500;
	font-family: inherit; cursor: pointer; text-decoration: none; transition: background .15s ease;
}
/* ".cein-clone a{color:inherit}" pesa más que ".v4-btn-dark" a secas y
   dejaba el texto del botón negro invisible — se iguala especificidad. */
.cein-clone a.v4-btn-dark{ color: #fff; }
.v4-btn-dark:hover,
.cein-clone a.v4-btn-dark:hover{ background: #262626; color: #fff; }
.v4-btn-ghost{
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	height: 48px; padding: 0 32px; border-radius: 999px;
	border: 1px solid #e5e5e5; color: #0a0a0a; font-size: 16px; font-weight: 500;
	text-decoration: none; transition: background .15s ease;
}
.v4-btn-ghost:hover{ background: #f5f5f5; color: #0a0a0a; }

/* — Sección de productos — */
.v4-section{ padding: 96px 0; }
.v4-section-head{ display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 48px; gap: 24px; }
.v4-section-head h2{ font-size: 30px; line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; margin: 0; }
.v4-section-head p{ font-size: 16px; color: #737373; margin: 8px 0 0; }
.v4-viewall{ display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: #0a0a0a; text-decoration: none; white-space: nowrap; }
.v4-viewall:hover{ color: #737373; }
.v4-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.v4-card{ display: block; text-decoration: none; color: inherit; }
.v4-card-photo{ display: block; aspect-ratio: 1/1; background: #f5f5f5; border-radius: 16px; overflow: hidden; margin-bottom: 16px; }
.v4-card-photo img{ width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: opacity .3s ease; }
.v4-card:hover .v4-card-photo img{ opacity: 0.9; }
/* Puntitos de muestra de color (los de la V2, presentación elegida por el
   owner: PASTILLA BLANCA superpuesta en la esquina inferior izquierda de la
   foto, con los circulitos dentro). El wrap de la foto pasa a ser el
   contenedor de posicionamiento. */
.v4-card-photo{ position: relative; }
.v4-card-dots{
	position: absolute;
	left: 12px; bottom: 12px;
	transition: opacity .18s ease;
	display: flex; align-items: center; gap: 8px;
	background: #fff;
	border-radius: 999px;
	padding: 9px 14px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
	z-index: 1;
}
.v4-card-dot{
	width: 18px; height: 18px; border-radius: 50%;
	border: 1px solid rgba(0,0,0,0.12);
	display: inline-block;
}
.v4-card-dots-more{ font-size: 12px; color: #737373; line-height: 1; }
/* Caption de las .hb-card (tienda/relacionados/panel) unificada al patrón
   v4 de la home (owner: "3 niveles con espaciados desiguales, centrado no"):
   alineada a la IZQUIERDA, nombre 18/600 → categoría 14 muted → precio
   15/600, huecos uniformes de 4px, sin paddings extra. */
/* Compactada a 2 niveles (owner): "Nombre · Categoría" en la MISMA línea,
   precio debajo — fila flexible con salto natural si el nombre es largo. */
.hb-card .hb-card-caption{
	text-align: left !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: baseline !important;
	column-gap: 8px !important;
	row-gap: 2px !important;
	padding: 12px 0 0 !important;
}
.hb-card .hb-bestseller-cat::before{ content: "· "; color: #a3a3a3; }
.hb-card .hb-bestseller-price{ width: 100%; }
.hb-card .hb-card-caption h3{
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	margin: 0 !important;
}
.hb-card .hb-bestseller-cat{
	font-size: 14px !important;
	color: #737373 !important;
	margin: 0 !important;
	line-height: 1.4 !important;
}
.hb-card .hb-bestseller-price{
	font-size: 15px !important;
	font-weight: 600 !important;
	margin: 0 !important;
	line-height: 1.4 !important;
}
.hb-card .hb-card-caption p{ margin: 0 !important; font-size: 14px !important; line-height: 1.5 !important; }

/* Corazón de favoritos FUERA de las tarjetas (petición del owner 2026-07-19:
   "no le veo sentido") — solo en cards; el de la ficha de producto y la
   página /favoritos/ siguen operativos. Oculto por CSS: reversible. */
.hb-card .hb-favorite-btn{ display: none !important; }

/* Tarjeta v5 (referencia Krist del owner): píldora blanca "Añadir al
   carrito"/"Consultar" dentro de la foto, abajo centrada; la lupa de vista
   rápida como circulito arriba a la derecha. Ambas emergen al hover (en
   táctil, siempre visibles). */
.hb-card .hb-card-quickadd{
	position: absolute !important;
	left: 50%; bottom: 14px;
	transform: translateX(-50%);
	width: auto; height: auto;
	background: #fff !important;
	color: #0a0a0a !important;
	border: none;
	border-radius: 999px;
	padding: 12px 26px !important;
	font-size: 14px; font-weight: 500;
	font-family: inherit;
	white-space: nowrap;
	box-shadow: 0 2px 10px rgba(0,0,0,0.10);
	cursor: pointer;
	text-decoration: none !important;
	z-index: 2;
	transition: opacity .2s ease, transform .25s ease;
}
.hb-card .hb-card-quickadd:hover{ background: #0a0a0a !important; color: #fff !important; }
.hb-card .hb-card-quickview{
	position: absolute !important;
	top: 12px; right: 12px;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: #fff !important;
	color: #0a0a0a !important;
	border: none;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: 0 2px 10px rgba(0,0,0,0.10);
	cursor: pointer;
	z-index: 2;
	transition: opacity .2s ease;
}
.hb-card .hb-card-quickview:hover{ background: #0a0a0a !important; color: #fff !important; }
@media (hover: hover){
	.hb-card .hb-card-quickadd,
	.hb-card .hb-card-quickview{ opacity: 0; }
	.hb-card .hb-card-quickadd{ transform: translateX(-50%) translateY(6px); }
	.hb-card:hover .hb-card-quickadd,
	.hb-card:hover .hb-card-quickview{ opacity: 1; }
	.hb-card:hover .hb-card-quickadd{ transform: translateX(-50%) translateY(0); }
}

/* Solo al pasar el ratón (petición del owner) — en táctil (sin hover) se
   queda siempre visible, que ahí no hay ratón que pasar. */
@media (hover: hover){
	.v4-card-dots{ opacity: 0; }
	.hb-card:hover .v4-card-dots,
	.v4-card:hover .v4-card-dots,
	.hb-card-photo:hover .v4-card-dots{ opacity: 1; }
}
.v4-card-name{ display: block; font-size: 16px; font-weight: 500; margin-bottom: 4px; }
.v4-card-price{ display: block; font-size: 16px; font-weight: 600; }
.v4-card-price del{ opacity: 0.45; font-weight: 400; margin-right: 6px; }
.v4-card-price ins{ text-decoration: none; }

/* — Quiénes somos — */
.v4-story{ background: #f8f8f7; }
.v4-story-inner{ max-width: 672px; margin: 0 auto; text-align: center; padding: 96px 0; }
.v4-story-inner h2{ font-size: 36px; font-weight: 500; letter-spacing: -0.01em; margin: 0; }
.v4-story-inner p{ font-size: 18px; line-height: 1.65; color: #737373; margin: 24px 0 0; }

/* — Newsletter — */
.v4-news{ background: #0a0a0a; color: #fff; }
.v4-news-inner{ max-width: 672px; margin: 0 auto; text-align: center; padding: 80px 0; }
.v4-news-inner h2{ font-size: clamp(30px, 3.4vw, 48px); font-weight: 500; letter-spacing: -0.01em; margin: 0; }
.v4-news-inner p{ font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.6); margin: 16px auto 0; max-width: 448px; }
.v4-news-form{ display: flex; gap: 12px; max-width: 448px; margin: 40px auto 0; }
.v4-news-form input{
	flex: 1; height: 48px; border-radius: 999px; padding: 0 20px;
	border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1);
	color: #fff; font-size: 16px; font-family: inherit; outline: none;
}
.v4-news-form input::placeholder{ color: rgba(255,255,255,0.3); }
.v4-news-form input:focus{ border-color: rgba(255,255,255,0.4); }
.v4-news-form button{ background: #fff; color: #0a0a0a; flex: none; }
.v4-news-form button:hover{ background: rgba(255,255,255,0.9); }

/* — Acordeón de la ficha (Descripción / Ficha técnica / Envíos / Por qué
   elegirnos): filas con divisor fino y chevron que gira, piel YNS. — */
.v4-pdp-price-note{ font-size: 13px; color: #737373; margin: -12px 0 0; }
/* "● En stock" (add-to-cart-button.tsx tono "in": text-sm font-medium
   text-green-600 (#16a34a), punto h-1.5 w-1.5 (6px) bg-current, gap-1.5). */
.v4-pdp-stock{
	display: flex; align-items: center; gap: 6px;
	font-size: 14px; font-weight: 500; color: #16a34a;
	margin: 10px 0 0;
}
.v4-pdp-stock-dot{
	width: 6px; height: 6px; border-radius: 50%;
	background: currentColor; flex: none;
}
.v4-pdp-acc{ margin-top: 28px; border-top: 1px solid #e5e5e5; }
.v4-acc{ border-bottom: 1px solid #e5e5e5; }
.v4-acc summary{
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 0;
	font-size: 15px; font-weight: 500; color: #0a0a0a;
	cursor: pointer; list-style: none;
}
.v4-acc summary::-webkit-details-marker{ display: none; }
.v4-acc summary svg{ transition: transform .2s ease; color: #737373; flex: none; }
.v4-acc[open] summary svg{ transform: rotate(180deg); }
.v4-acc-body{ padding: 0 0 18px; font-size: 14px; line-height: 1.65; color: #404040; }
.v4-acc-body p{ margin: 0 0 0.7em; }
.v4-acc-body .hb-product-specs-table{ width: 100%; border-collapse: collapse; }
.v4-acc-body .hb-product-specs-table tr{ border-bottom: 1px solid #f0f0f0; }
.v4-acc-body .hb-product-specs-table tr:last-child{ border-bottom: none; }
.v4-acc-body .hb-product-specs-table th{
	text-align: left; font-weight: 500; color: #737373;
	padding: 7px 16px 7px 0; white-space: nowrap; width: 1%;
	vertical-align: top; background: none;
}
.v4-acc-body .hb-product-specs-table td{ padding: 7px 0; background: none; }
.v4-acc-body .hb-why-us ul{ list-style: none; margin: 0; padding: 0; }
.v4-acc-body .hb-why-us li{ padding: 4px 0 4px 24px; position: relative; }
.v4-acc-body .hb-why-us li::before{ content: "✓"; position: absolute; left: 0; color: #15803d; }
.v4-acc-body .hb-shipping-note{ font-size: 12px; color: #a3a3a3; margin-top: 8px; }
.v4-acc-body a{ color: #0a0a0a; text-decoration: underline; text-underline-offset: 2px; }

/* — "También te puede interesar" de la ficha: proporciones del "You May
   Also Like" de YNS — título 24px seminegrita pegado al grid, sin el mar de
   blanco que dejaba el padding genérico de sección (96px) sumado al hueco
   sobrante de la columna de galería. — */
.v4-pdp-related{ padding: 40px 0 88px; }
.v4-pdp-related .v4-section-head{ margin-bottom: 28px; }
.v4-pdp-related .v4-section-head h2{ font-size: 28px; line-height: 34px; font-weight: 500; letter-spacing: -0.01em; }
/* Tipos de la caption dentro de estas cards: mismos cuerpos que la tienda. */
.v4-pdp-related .hb-card-caption h3{ font-size: 16px; font-weight: 500; margin: 0 0 2px; }
.v4-pdp-related .hb-bestseller-cat{ margin: 0 0 4px !important; }
.v4-pdp-related .hb-card-caption p{ font-size: 13px; line-height: 1.5; }

/* — Footer — */
.v4-footer{ border-top: 1px solid #e5e5e5; background: #fff; }
.v4-footer-cols{ display: flex; gap: 64px; padding: 64px 0; flex-wrap: wrap; }
.v4-footer-brand{ max-width: 320px; }
.v4-footer-logo{ display: flex; flex-direction: column; line-height: 1; text-decoration: none; color: #0a0a0a; }
.v4-footer-logo span:first-child{ font-size: 20px; font-weight: 700; letter-spacing: 0.12em; }
.v4-footer-logo-sub{ font-size: 10px; font-weight: 500; letter-spacing: 0.42em; color: #737373; margin-top: 3px; }
.v4-footer-brand p{ font-size: 14px; line-height: 1.6; color: #737373; margin: 16px 0 0; }
.v4-footer-brand ul{ list-style: none; margin: 16px 0 0; padding: 0; font-size: 14px; color: #737373; }
.v4-footer-brand li{ margin-top: 4px; }
.v4-footer-brand a{ color: inherit; text-decoration: none; }
.v4-footer-brand a:hover{ color: #0a0a0a; }
.v4-footer-col h3{ font-size: 14px; font-weight: 600; margin: 0 0 16px; color: #0a0a0a; }
.v4-footer-col ul{ list-style: none; margin: 0; padding: 0; }
.v4-footer-col li{ margin-bottom: 12px; }
.v4-footer-col a{ font-size: 14px; color: #737373; text-decoration: none; transition: color .15s ease; }
.v4-footer-col a:hover{ color: #0a0a0a; }
.v4-footer-bottom{ border-top: 1px solid #e5e5e5; padding: 24px 0; font-size: 14px; color: #737373; }

/* — Móvil — */
@media (max-width: 900px){
	.v4-hero-media{ display: none; }
	.v4-hero-inner{ padding: 64px 0; }
	.v4-grid{ grid-template-columns: repeat(2, 1fr); gap: 20px; }
	.v4-section{ padding: 64px 0; }
	.v4-footer-cols{ gap: 32px; }
}
@media (max-width: 560px){
	.v4-grid{ grid-template-columns: 1fr; }
	.v4-news-form{ flex-direction: column; }
	/* Candado (verificador visual): la fila título+puntos del carrusel de
	   categorías no cabía en 375px y desbordaba la página 11px — los puntos
	   sobran en móvil (se navega con el pulgar) y el padding baja a 20px. */
	.cein-favs-head{ padding: 0 20px; }
	.cein-favs-controls{ display: none; }
}

/* =====================================================================
   FICHA DE PRODUCTO v4 — clon de la PDP de Your Next Store
   (woocommerce/content-single-product.php del tema hijo). Valores sacados
   de las clases Tailwind de app/product/[slug]/*.tsx: contenedor 1280,
   grid 2 col gap-16 (64px), foto cuadrada bg #f5f5f5 rounded-2xl (16),
   título text-4xl (36) medium tracking-tight, precio text-3xl (30)
   semibold, muted #737373, bordes #e5e5e5, botones píldora.
   Las clases funcionales heredadas (hb-gallery-v2-thumb, hb-swatch,
   hb-product-buy-row…) se re-estilizan aquí bajo el ámbito .v4-pdp —
   cein.css carga DESPUÉS de style.css, así que estas reglas ganan a las
   de la ficha v3 sin tocarlas. */

.v4-pdp{ padding: 32px 0 0; background: #fff; color: #0a0a0a; }

/* — Breadcrumb (ui/breadcrumb.tsx: lista text-sm (14) muted #737373 con
     gap-1.5 (6px) / sm:gap-2.5 (10px), chevron size-3.5 (14px), enlaces
     hover a foreground, página actual en foreground; nav mb-6 = 24px) — */
.v4-pdp-breadcrumb{ margin: 0 0 24px; }
.v4-pdp-breadcrumb ol{
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
	list-style: none; margin: 0; padding: 0;
	font-size: 14px; line-height: 1.4; color: #737373;
	overflow-wrap: anywhere; /* break-words: nombres largos no desbordan en 375 */
}
@media (min-width: 640px){ .v4-pdp-breadcrumb ol{ gap: 10px; } }
.v4-pdp-breadcrumb li{ display: inline-flex; align-items: center; }
.v4-pdp-breadcrumb a{ color: #737373; text-decoration: none; transition: color .2s ease; }
.v4-pdp-breadcrumb a:hover{ color: #0a0a0a; }
.v4-pdp-breadcrumb .v4-crumb-sep svg{ display: block; }
.v4-pdp-breadcrumb .v4-crumb-current{ color: #0a0a0a; font-weight: 400; }
.v4-pdp-grid{
	display: grid;
	grid-template-columns: minmax(0, 460px) 1fr;
	gap: 48px;
	align-items: start;
}
/* La ficha va CENTRADA en un ancho contenido (~1200px), no estirada a los lados
   como el resto del sitio (petición owner: al ensancharlo todo, la ficha quedaba
   justificada → info y botón enormes). El header/footer siguen a ancho completo. */
.single-product .v4-pdp .v4-container{ max-width: 1200px; margin: 0 auto; padding: 0 32px; }
/* Sin esto, el mínimo automático de los items de grid (min-content) deja que
   la fila de miniaturas / la fila de compra ensanchen su columna más allá del
   viewport en móvil (scroll horizontal en 375). */
.v4-pdp-grid > *{ min-width: 0; }

/* — Galería (media-gallery.tsx: aspect-square, rounded-2xl, bg-secondary;
     miniaturas w-20 rounded-lg debajo, sin flechas ni contador) — */
.v4-pdp-photo{
	aspect-ratio: 3 / 4; /* vertical como las cards (antes 1/1 cuadrada → cortaba cabezas) */
	background: #f5f5f5;
	border-radius: 16px;
	overflow: hidden;
}
.v4-pdp-photo img{
	width: 100%; height: 100%;
	object-fit: cover; object-position: center top; display: block;
	mix-blend-mode: multiply; /* mismo truco que .v4-card-photo: foto de estudio sobre gris */
}
.v4-pdp-thumbs{ display: flex; gap: 12px; margin-top: 16px; overflow-x: auto; padding: 2px; }
.v4-pdp .hb-gallery-v2-thumb{
	flex: none;
	width: 80px; height: 80px;
	padding: 0; border: none; background: #f5f5f5;
	border-radius: 8px; overflow: hidden;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity .2s ease, box-shadow .2s ease;
}
.v4-pdp .hb-gallery-v2-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; mix-blend-mode: multiply; }
.v4-pdp .hb-gallery-v2-thumb:hover{ opacity: 1; }
.v4-pdp .hb-gallery-v2-thumb.is-active{
	opacity: 1;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0a0a0a; /* ring-2 ring-foreground ring-offset-2 */
}
.v4-pdp .hb-gallery-v2-thumb:focus{ outline: none; }
.v4-pdp .hb-gallery-v2-thumb:focus-visible{ box-shadow: 0 0 0 2px #fff, 0 0 0 4px #737373; }

/* — Columna de info (page.tsx: space-y; título "text-4xl … lg:text-5xl
     text-balance" = 36px, 48px desde lg (1024), medium tracking-tight) — */
.v4-pdp-title{
	font-size: 36px; line-height: 1.11; /* text-4xl: 36/40 */
	font-weight: 500; letter-spacing: -0.025em;
	text-wrap: balance;
	margin: 0 0 12px;
}
@media (min-width: 1024px){
	.v4-pdp-title{ font-size: 48px; line-height: 1.05; } /* lg:text-5xl */
}
.v4-pdp-price{ font-size: 30px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 12px; }
.v4-pdp-price del{ opacity: 0.45; font-weight: 400; font-size: 20px; margin-right: 8px; }
.v4-pdp-price ins{ text-decoration: none; }
/* Producto de catálogo (no vendible online): el "precio" es la frase de
   contacto de hb_filter_price_html — tono muted, tamaño de texto normal. */
.v4-pdp-price .hb-catalog-cta{ font-size: 16px; font-weight: 400; color: #737373; opacity: 1; }

.v4-pdp .hb-google-reviews-badge{
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 14px; color: #0a0a0a; text-decoration: none;
	margin: 0 0 20px;
}
.v4-pdp .hb-google-reviews-stars{ color: #facc15; letter-spacing: 2px; font-size: 16px; }
.v4-pdp .hb-google-reviews-text{ color: #737373; }
.v4-pdp .hb-google-reviews-badge:hover .hb-google-reviews-text{ color: #0a0a0a; }

.v4-pdp .hb-product-short-desc{
	font-size: 16px; line-height: 1.65; color: #737373;
	opacity: 1; max-width: none; margin: 0 0 28px;
}

/* — Selector de color (variant-selector.tsx tipo "color": label + nombre a
     la derecha, círculos h-12 w-12 con ring en el activo) — */
.v4-pdp-option{ margin: 0 0 28px; }
.v4-pdp-option-head{
	display: flex; align-items: baseline; justify-content: flex-start; gap: 8px;
	margin-bottom: 12px;
}
.v4-pdp-option-label{ font-size: 14px; font-weight: 500; }
.v4-pdp-color-name{ font-size: 14px; color: #737373; }
.v4-pdp-color-name::before{ content: "·"; margin-right: 8px; color: #d4d4d4; }
.v4-pdp-swatches{ display: flex; flex-wrap: wrap; gap: 12px; }
.v4-pdp .hb-swatch.v4-pdp-swatch{
	flex: none;
	width: 48px; height: 48px;
	padding: 0; border: none; margin: 0;
	border-radius: 50%;
	font-size: 0; /* sin texto dentro: el nombre va en .v4-pdp-color-name */
	cursor: pointer;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
	transition: box-shadow .2s ease;
}
.v4-pdp .hb-swatch.v4-pdp-swatch:hover{
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08), 0 0 0 2px #fff, 0 0 0 4px #737373;
}
.v4-pdp .hb-swatch.v4-pdp-swatch.is-active{
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08), 0 0 0 2px #fff, 0 0 0 4px #0a0a0a;
}
.v4-pdp .hb-swatch.v4-pdp-swatch:focus{ outline: none; }
.v4-pdp .hb-swatch.v4-pdp-swatch:focus-visible{ box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08), 0 0 0 2px #fff, 0 0 0 4px #737373; }

/* — Fila de compra (add-to-cart-button.tsx + quantity-selector.tsx:
     stepper con borde + botón negro píldora a lo ancho; el corazón es
     nuestro favorito de siempre, re-pintado en el idioma visual YNS) — */
/* Etiqueta "Cantidad" encima del stepper (quantity-selector.tsx:
   "mb-3 block text-sm font-medium" = bloque 14px/500 con 12px debajo). */
.v4-pdp-qty-label{ display: block; font-size: 14px; font-weight: 500; margin: 0 0 12px; }
.v4-pdp .hb-product-buy-row{ display: flex; align-items: center; gap: 12px; margin-top: 0; }
.v4-pdp .hb-product-buy-row form.cart{ display: flex; flex: 1 1 auto; align-items: center; gap: 12px; margin: 0; }
.v4-pdp .hb-product-buy-row form.cart .quantity{
	flex: none; display: inline-flex; align-items: center;
	height: 48px;
	border: 1px solid #e5e5e5; border-radius: 999px;
	overflow: hidden; background: #fff;
}
.v4-pdp .hb-qty-btn{
	width: 40px; height: 100%;
	border: none; background: none; color: #0a0a0a;
	font-size: 18px; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
}
.v4-pdp .hb-qty-btn:hover{ background: #f5f5f5; color: #0a0a0a; }
.v4-pdp .hb-product-buy-row .quantity .qty{
	width: 2.6em; border: none; background: none;
	text-align: center; font-size: 15px; font-weight: 500; color: #0a0a0a;
	padding: 0; appearance: textfield; -moz-appearance: textfield;
}
.v4-pdp .hb-product-buy-row .single_add_to_cart_button{
	flex: 1 1 auto; justify-content: center;
	height: 48px; padding: 0 32px;
	background: #0a0a0a; color: #fff;
	border: none; border-radius: 999px;
	font-size: 15px; font-weight: 500; letter-spacing: 0.01em;
}
.v4-pdp .hb-product-buy-row .single_add_to_cart_button:hover{ background: #262626; color: #fff; }
/* YNS no lleva icono en el CTA: fuera el carrito-mask heredado de la v3. */
.v4-pdp .single_add_to_cart_button::before{ display: none; }
/* Botón "Info" (producto de catálogo): misma píldora negra dominante. */
.v4-pdp .hb-product-buy-row .hb-btn-compact{
	flex: 1 1 auto; justify-content: center;
	height: 48px; padding: 0 32px;
	background: #0a0a0a; color: #fff;
	border: none; border-radius: 999px;
	font-size: 15px; font-weight: 500;
}
.v4-pdp .hb-product-buy-row .hb-btn-compact:hover{ background: #262626; color: #fff; }
.v4-pdp .hb-favorite-btn{
	width: 48px; height: 48px;
	border: 1px solid #e5e5e5; color: #0a0a0a; background: #fff;
}
.v4-pdp .hb-favorite-btn:hover{ border-color: #0a0a0a; }
.v4-pdp .hb-favorite-btn.is-active{ border-color: #0a0a0a; color: #0a0a0a; }
.v4-pdp .hb-favorite-btn svg{ width: 20px; height: 20px; }
/* Anillo de foco en el idioma visual YNS (negro neutro) — el heredado de la
   ficha v3 era lila/nude y desentonaba sobre la píldora negra. */
.v4-pdp .hb-btn-compact:focus-visible,
.v4-pdp .hb-favorite-btn:focus-visible,
.v4-pdp .hb-product-buy-row .single_add_to_cart_button:focus-visible{
	outline: 2px solid #0a0a0a;
	outline-offset: 3px;
}

/* — Caja de garantías bajo el CTA (trust-badges.tsx: "grid grid-cols-3
     gap-4 rounded-xl bg-secondary/50 p-4" = 3 col, gap 16, radio 12,
     #f5f5f5 al 50% ≈ #fafafa, padding 16; icono h-5 w-5 (20px) muted mb-2,
     título text-xs (12) medium, nota text-[10px] muted) — */
.v4-pdp-trust{
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
	padding: 16px; border-radius: 12px; background: #fafafa;
	margin-top: 28px;
}
.v4-pdp-trust-item{
	display: flex; flex-direction: column;
	align-items: center; text-align: center;
	min-width: 0;
}
.v4-pdp-trust-item svg{ width: 20px; height: 20px; color: #737373; margin-bottom: 8px; flex: none; }
.v4-pdp-trust-title{ font-size: 12px; font-weight: 500; line-height: 1.35; }
.v4-pdp-trust-desc{ font-size: 10px; color: #737373; line-height: 1.4; }

/* — "También te puede interesar": 4 cards v4 limpias a ancho completo — */
.v4-pdp-related{ padding-bottom: 64px; }
.v4-grid-4{ grid-template-columns: repeat(4, 1fr); }

/* — Móvil (375): columnas apiladas — */
@media (max-width: 900px){
	.v4-pdp-grid{ grid-template-columns: 1fr; gap: 32px; }
	/* Título/precio NO encogen más aquí: YNS mantiene text-4xl (36) y
	   text-3xl (30) en móvil — los antiguos 30/26 eran invención nuestra. */
	.v4-grid-4{ grid-template-columns: repeat(2, 1fr); }
	.v4-pdp .hb-product-buy-row{ flex-wrap: wrap; }
	.v4-pdp .hb-product-buy-row form.cart{ flex-wrap: wrap; }
	.v4-pdp .hb-product-buy-row .single_add_to_cart_button{ min-width: 60%; }
}
@media (max-width: 560px){
	.v4-grid-4{ grid-template-columns: 1fr 1fr; gap: 16px; }
	/* Fila de compra en teléfono: cantidad + corazón en una fila, botón negro
	   a todo lo ancho debajo (mismo apilado que la PDP de YNS en móvil). Con
	   "display:contents" en el form, cantidad y botón participan directamente
	   en el flex de la fila y se pueden reordenar — el form sigue existiendo
	   en el DOM y el submit funciona igual. */
	.v4-pdp .hb-product-buy-row{ flex-wrap: wrap; }
	.v4-pdp .hb-product-buy-row form.cart{ display: contents; }
	.v4-pdp .hb-product-buy-row .quantity{ order: 1; }
	.v4-pdp .hb-favorite-btn{ order: 2; margin-left: auto; }
	.v4-pdp .hb-product-buy-row .single_add_to_cart_button{ order: 3; flex-basis: 100%; }
}

/* Arreglo global de móvil detectado al verificar la ficha en 375: el pie de
   página (hb_custom_footer, columnas ".hb-footer-main" 1fr/1fr en móvil con
   enlaces "white-space:nowrap") desbordaba el viewport ~34px en TODAS las
   páginas del sitio (comprobado también en /mantenimiento/ y /blog/), creando
   scroll horizontal. Mismo remedio que .v4-pdp-grid: dejar encoger las
   columnas y que los enlaces del menú puedan partir línea en pantallas
   estrechas. */
@media (max-width: 560px){
	.hb-footer-main > *{ min-width: 0; }
	.hb-footer-menu a{ white-space: normal; }
}

/* ==========================================================================
   PANEL INLINE DE CATEGORÍA de la home v5 (pieza portada de la V1, piel YNS
   "v4-"): sección blanca con borde superior fino bajo el carrusel de
   categorías. El contenido llega por AJAX (hb_v4_inline_category_html):
   cabecera (título + contador + "Ver todos en la tienda →" + "×"), píldoras
   de filtro Longitud/Color/Material/Marca y grid con la card de producto
   unificada (hb_render_product_card). La home standalone SOLO carga este
   archivo (no style.css), así que la card unificada se estiliza aquí,
   acotada a ".v4-inline-panel" para no tocar tienda/ficha.
   ========================================================================== */
.v4-inline-panel{
	background: #fff;
	/* Sin bordes a sangre completa: las líneas del panel van DENTRO del
	   contenedor (como la de debajo de la cabecera) — el owner señaló la
	   mezcla de rayas a distinto ancho. Se dibujan en el ::before/::after
	   del contenedor interior. */
	padding: 40px 0 64px;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .35s ease, transform .35s ease;
}
.v4-inline-panel.is-open{ opacity: 1; transform: none; }
/* Cambio de filtro en curso: se atenúa solo el grid (el panel entero
   parpadearía), sin saltos de layout. */
.v4-inline-panel.is-loading .v4-inline-grid{ opacity: .45; transition: opacity .15s ease; }

.v4-inline-panel > .v4-container{ border-top: 1px solid #e5e5e5; padding-top: 40px; }
.v4-inline-panel{ padding-top: 0; }
.v4-inline-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.v4-inline-title{ font-size: 30px; line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; margin: 0; }
.v4-inline-count{ font-size: 16px; color: #737373; margin: 8px 0 0; }
.v4-inline-actions{ display: flex; align-items: center; gap: 20px; }
.v4-inline-close{
	width: 40px; height: 40px;
	border-radius: 50%;
	border: 1px solid #e5e5e5;
	background: #fff;
	color: #0a0a0a;
	font-size: 22px; line-height: 1;
	font-family: inherit;
	cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	flex: none;
}
.v4-inline-close:hover{ background: #f5f5f5; }


/* Grid del panel: 4 columnas (cards más compactas que las 3 de destacados —
   aquí puede haber una categoría entera). */
.v4-inline-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 24px; }
.v4-inline-empty{ grid-column: 1 / -1; font-size: 16px; color: #737373; margin: 8px 0; }

/* Card de producto unificada dentro del panel, con la piel de .v4-card
   (foto cuadrada gris #f5f5f5, esquinas 16px, multiply; nombre 16/500,
   precio 600). Los botones circulares (favorito / vista rápida / añadir)
   son los mismos de la card, en columna sobre la esquina derecha de la foto. */
.v4-inline-panel .hb-card{ position: relative; }
.v4-inline-panel .hb-card-photo{
	position: relative;
	aspect-ratio: 1 / 1;
	background: #f5f5f5;
	border-radius: 16px;
	overflow: hidden;
}
.v4-inline-panel .hb-card-photo > a{ display: block; width: 100%; height: 100%; }
.v4-inline-panel .hb-card-photo img{
	width: 100%; height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
	transition: opacity .3s ease;
	display: block;
}
.v4-inline-panel .hb-card:hover .hb-card-photo img{ opacity: 0.9; }
.v4-inline-panel .hb-favorite-btn,
.v4-inline-panel .hb-card-quickview,
.v4-inline-panel .hb-card-quickadd{
	position: absolute;
	right: 12px;
	width: 38px; height: 38px;
	border-radius: 50%;
	border: 1px solid #e5e5e5;
	background: #fff;
	color: #0a0a0a;
	cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0;
	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
	z-index: 1;
}
.v4-inline-panel .hb-favorite-btn{ top: 12px; }
.v4-inline-panel .hb-card-quickview{ top: 58px; }
.v4-inline-panel .hb-card-quickadd{ bottom: 12px; }
.v4-inline-panel .hb-favorite-btn:hover,
.v4-inline-panel .hb-card-quickview:hover,
.v4-inline-panel .hb-card-quickadd:hover{ border-color: #0a0a0a; }
.v4-inline-panel .hb-favorite-btn.is-active{ color: #0a0a0a; }
.v4-inline-panel .hb-favorite-btn.is-active svg path{ fill: currentColor; }
.v4-inline-panel .hb-card-caption-link{ display: block; text-decoration: none; color: inherit; margin-top: 16px; }
.v4-inline-panel .hb-card-caption h3{ font-size: 16px; font-weight: 500; margin: 0 0 4px; }
.v4-inline-panel .hb-bestseller-cat{ font-size: 13px; color: #737373; margin: 0 0 4px; }
.v4-inline-panel .hb-bestseller-price{ display: block; font-size: 16px; font-weight: 600; }
.v4-inline-panel .hb-bestseller-price del{ opacity: 0.45; font-weight: 400; margin-right: 6px; }
.v4-inline-panel .hb-bestseller-price ins{ text-decoration: none; }

/* Tarjeta del carrusel con su categoría abierta en el panel: anillo negro
   fino (la clase solo la pone hb-home-inline.js en la home). */
/* ==========================================================================
   TARJETAS v5 (owner: "más rectangulares 9/16 y con más diseño, muy plano"):
   formato vertical editorial + zoom lento de la foto al hover + filete
   interior sutil + elevación con sombra. Aplica a producto Y categorías
   (siguen gemelas).
   ========================================================================== */
body.cein-clone .v4-card-photo,
.hb-card .hb-card-photo,
.cein-favs-imgwrap{
	/* 4/5 (referencia Nike del owner): vertical suave — el 9/16 inicial
	   "se pasaba de grande y de vertical" (owner dixit). */
	aspect-ratio: 4 / 5 !important;
	position: relative;
}
.cein-favs-imgwrap img{ aspect-ratio: auto !important; height: 100% !important; }
/* Filete interior: 1px casi negro al 6% por DENTRO de la foto — separa la
   foto del fondo sin ensuciar (truco editorial). */
.v4-card-photo::after,
.hb-card .hb-card-photo::after,
.cein-favs-imgwrap::after{
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 0 1px rgba(10,10,10,0.06);
	pointer-events: none;
}
/* Zoom lento de la foto (0.6s) + ligera elevación de la tarjeta. */
.v4-card-photo img,
.hb-card .hb-card-photo img,
.cein-favs-imgwrap img{
	transition: transform .6s cubic-bezier(.2,.7,.2,1) !important;
}
.v4-card:hover .v4-card-photo img,
.hb-card:hover .hb-card-photo img,
.cein-favs-card:hover .cein-favs-imgwrap img{
	transform: scale(1.05);
}
.v4-card:hover .v4-card-photo,
.hb-card:hover .hb-card-photo,
.cein-favs-card:hover .cein-favs-imgwrap{
	box-shadow: 0 14px 36px rgba(0,0,0,0.10);
}
/* La foto recortada no debe desbordar durante el zoom. */
.v4-card-photo,
.hb-card .hb-card-photo,
.cein-favs-imgwrap{ overflow: hidden !important; }

/* ==========================================================================
   RADIO COMÚN DE LAS IMÁGENES (owner 2026-08-06). Sustituye a la prueba de
   esquinas rectas del 2026-07-19: el resultado era incoherente porque el
   "border-radius: 0 !important" solo alcanzaba a lo que caía en estos
   selectores, y todo lo demás (tarjetas del asistente, cabeceras, marcas)
   conservaba su radio propio. Ahora todas las superficies de contenido
   comparten "--hb-img-radius" y se tocan desde un único sitio.
   Siguen aparte: botones píldora, inputs y swatches (elementos de acción) y
   las excepciones redondas/rectas de más abajo (avatar de autor, logos).
   ========================================================================== */
:root{ --hb-img-radius: 12px; }
.v4-card-photo,
.hb-card .hb-card-photo,
.cein-favs-imgwrap,
.v4-pdp-photo,
.v4-pdp-thumb,
.hb-gallery-v2-thumb,
.hb-gallery-v2-main,
.v4-inline-panel .hb-card-photo,
.v4-acc-body img,
.hb-cart-page img,
main img,
article img,
.hb-contact-map,
.hb-contact iframe,
iframe[src*="google.com/maps"]{
	border-radius: var(--hb-img-radius) !important;
}
/* Excepciones deliberadas al radio común:
   - el avatar del autor es redondo, como en cualquier ficha de firma;
   - los logotipos de marca van a cero: un logo recortado por las esquinas se
     lee como un error de montaje, no como un estilo. */
.hb-author-img, .hb-author-img img{ border-radius: 50% !important; }
.hb-marca-logo img, .hb-brand-logo img{ border-radius: 0 !important; }
/* Cajas de contenido también rectas (resumen del carrito, garantías de la
   ficha, cards de showroom) — mantienen borde y padding. */
.hb-cart-summary,
.v4-pdp-trust,
.v4-pdp .v4-pdp-trust,
.hb-cart-page [class*="summary"]{
	border-radius: 0 !important;
}

/* El clic dejaba el aro de FOCO azul del navegador pegado a la tarjeta
   (es un <a> que no navega) — fuera con ratón; con teclado se conserva un
   foco propio discreto. */
.cein-favs-card:focus{ outline: none; }
.cein-favs-card:focus-visible{ outline: 2px solid #0a0a0a; outline-offset: 4px; border-radius: 16px; }

/* Señal de "categoría abierta". El aro negro de 2px se descartó (chirriaba al
   owner) y NO se reintroduce. Pero la sombra sola no bastaba: era más floja
   (0 10px 28px al 14%) que la de hover (0 14px 36px), así que la tarjeta
   activa se leía MENOS que cualquiera bajo el cursor, y al apartar el ratón
   solo quedaba el chip como pista. Ahora la señal va por CONTRASTE — las no
   elegidas retroceden — en vez de por marco sobre la elegida. */
.cein-favs-card.is-open .cein-favs-imgwrap{ box-shadow: 0 14px 36px rgba(0,0,0,0.16); }
.cein-favs-card.is-open .cein-favs-go{ background: #0a0a0a; color: #fff; }
.cein-favs-card.is-open .cein-favs-name{ font-weight: 600; }

#ceinCatsTrack .cein-favs-imgwrap,
#ceinCatsTrack .cein-favs-meta{ transition: opacity .25s ease; }
#ceinCatsTrack:has(.cein-favs-card.is-open) .cein-favs-card:not(.is-open) .cein-favs-imgwrap,
#ceinCatsTrack:has(.cein-favs-card.is-open) .cein-favs-card:not(.is-open) .cein-favs-meta{
	opacity: 0.42;
}
/* Al pasar por encima de una atenuada, vuelve casi del todo: se sigue viendo
   que es clicable, sin perder cuál es la abierta. */
#ceinCatsTrack:has(.cein-favs-card.is-open) .cein-favs-card:not(.is-open):hover .cein-favs-imgwrap,
#ceinCatsTrack:has(.cein-favs-card.is-open) .cein-favs-card:not(.is-open):hover .cein-favs-meta{
	opacity: 0.85;
}
/* Sin animación de opacidad para quien la haya desactivado en el sistema. */
@media (prefers-reduced-motion: reduce){
	#ceinCatsTrack .cein-favs-imgwrap,
	#ceinCatsTrack .cein-favs-meta{ transition: none; }
}

@media (max-width: 900px){
	.v4-inline-grid{ grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
}
@media (max-width: 560px){
	.v4-inline-panel{ padding: 28px 0 48px; }
	.v4-inline-head{ flex-wrap: wrap; }
	.v4-inline-title{ font-size: 24px; }
	.v4-inline-grid{ gap: 24px 12px; }
	.v4-inline-panel .hb-card-caption h3{ font-size: 14px; }
	.v4-inline-panel .hb-bestseller-price{ font-size: 14px; }
	/* La pastilla de puntitos de color se come media card en 375 */
	.v4-inline-panel .v4-card-dots{ padding: 6px 10px; gap: 6px; }
	.v4-inline-panel .v4-card-dot{ width: 14px; height: 14px; }
}

/* Arreglo detectado al verificar el panel inline en 375: con 12 tarjetas el
   carrusel de categorías genera tantas páginas que su fila de puntitos
   (.cein-favs-dots, cabecera "Categorías") desbordaba el viewport ~11px y
   creaba scroll horizontal en TODA la home (preexistente, no lo causaba el
   panel). Se deja que los puntitos partan línea en vez de desbordar. */
.cein-favs-head > div{ min-width: 0; }
.cein-favs-controls{ min-width: 0; }
.cein-favs-dots{ flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }

/* ==========================================================================
   CONTÁCTANOS — skin v4 (mismo lenguaje que la home v5 / clon YNS).
   La página no lleva .col-full (header.php propio + Storefront full-width):
   cada banda es full-bleed natural y el ancho lo pone .v4-container, igual
   que en front-page.php. Los shortcodes [hb_biz_*] pintan clases "hb-"
   viejas (hb-contact-links, hb-htw-row) — se re-visten AQUÍ scoped bajo
   .v4-contact, sin tocar style.css (la página de Mantenimiento las reusa).
   ========================================================================== */
/* Storefront deja márgenes genéricos bajo .site-main/.hentry — el respiro
   antes del footer lo ponen las propias bandas. */
.page-id-13 .site-main,
.page-id-13 .hentry{ margin-bottom: 0; }

.v4-contact-hero{ padding: 64px 0 80px; }
.v4-contact-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
.v4-contact-intro h1{
	font-size: clamp(36px, 3.4vw, 48px);
	line-height: 1.1;
	font-weight: 500;
	letter-spacing: -0.025em;
	margin: 0 0 24px;
	color: #0a0a0a;
}
.v4-contact-intro p{
	font-size: 16px;
	line-height: 1.6;
	color: #737373;
	margin: 0 0 16px;
}
.v4-contact-data{ margin-top: 28px; }
.v4-contact-data p{ color: #0a0a0a; margin: 0 0 14px; }
.v4-contact-data strong{ font-weight: 500; }
/* Píldoras de email/WhatsApp/teléfono ([hb_biz_contact_links]) */
.v4-contact .hb-contact-links{ display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.v4-contact .hb-contact-links a{
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 24px;
	border: 1px solid #e5e5e5;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	color: #0a0a0a;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s ease;
}
.v4-contact .hb-contact-links a:hover{ background: #f5f5f5; color: #0a0a0a; }
/* Mapa: marco redondeado v4 (mismo radio 24px que las tarjetas grandes) */
.v4-contact-map{
	border-radius: 24px;
	overflow: hidden;
	background: #f5f5f5;
	align-self: stretch;
}
.v4-contact-map iframe{ display: block; width: 100%; height: 100%; min-height: 460px; border: 0; }

/* — Marquesina de transporte ([hb_transit_ticker]) — */
.v4-ticker{
	overflow: hidden;
	white-space: nowrap;
	border-top: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
	background: #fafafa;
	padding: 14px 0;
}
.v4-ticker-track{
	display: inline-flex;
	animation: v4-ticker-scroll 45s linear infinite;
}
.v4-ticker-item{
	display: inline-flex;
	align-items: center;
	gap: 56px;
	padding-right: 56px;
	font-size: 14px;
	font-weight: 500;
	color: #737373;
}
/* Punto separador uniforme (el patrón debe repetirse idéntico para que el
   bucle -50%→0 no salte). */
.v4-ticker-item::after{
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 999px;
	background: #d4d4d4;
}
@keyframes v4-ticker-scroll{
	from{ transform: translateX(-50%); }
	to{ transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce){
	.v4-ticker-track{ animation: none; }
}

/* — Banda "¿Tiene más preguntas?" + "¿Cómo llegar?" — */
.v4-contact-more{ background: #f5f5f5; padding: 96px 0; }
.v4-contact-more-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: start;
}
.v4-contact h2{
	font-size: 30px;
	line-height: 1.2;
	font-weight: 500;
	letter-spacing: -0.01em;
	margin: 0 0 12px;
	color: #0a0a0a;
}
.v4-contact-form > p{ font-size: 16px; line-height: 1.6; color: #737373; margin: 0 0 32px; }
/* Campos CF7: el template del formulario separa los campos con <br /> dentro
   de un único <p> — se anulan y cada wrap pasa a bloque con su margen. */
.v4-contact .wpcf7-form br{ display: none; }
.v4-contact .wpcf7-form p{ margin: 0; }
.v4-contact .wpcf7-form-control-wrap{ display: block; margin-bottom: 16px; }
.v4-contact .wpcf7-form input[type="text"],
.v4-contact .wpcf7-form input[type="email"],
.v4-contact .wpcf7-form input[type="tel"],
.v4-contact .wpcf7-form textarea{
	width: 100%;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	padding: 12px 16px;
	font-size: 16px;
	font-family: inherit;
	color: #0a0a0a;
	outline: none;
	transition: border-color .15s ease;
}
.v4-contact .wpcf7-form input::placeholder,
.v4-contact .wpcf7-form textarea::placeholder{ color: #737373; opacity: 1; }
.v4-contact .wpcf7-form input:focus,
.v4-contact .wpcf7-form textarea:focus{ border-color: #0a0a0a; }
.v4-contact .wpcf7-form textarea{ min-height: 160px; max-height: 320px; resize: vertical; }
.v4-contact .wpcf7-submit{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	margin-top: 8px;
	padding: 0 32px;
	border: none;
	border-radius: 999px;
	background: #0a0a0a;
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	transition: background .15s ease;
}
.v4-contact .wpcf7-submit:hover{ background: #262626; }
.v4-contact .wpcf7-not-valid-tip{ display: block; margin-top: 6px; font-size: 13px; color: #b91c1c; }
.v4-contact .wpcf7-response-output{
	margin: 20px 0 0;
	padding: 12px 16px;
	border: 1px solid #e5e5e5 !important; /* CF7 trae bordes de color inline por estado */
	border-radius: 12px;
	font-size: 14px;
	color: #0a0a0a;
	background: #fff;
}

/* Modal "Reservar consulta" (hb_render_consulta_modal): reutiliza el MISMO
   CF7 (id=11) que la página de contacto pero SIN el envoltorio .v4-contact,
   así que sin esto los campos heredaban los estilos por defecto (píldoras
   enormes, textarea gigante, botón suelto). Mismo lenguaje limpio que
   .v4-contact, en una caja blanca compacta centrada. */
#hb-consulta-modal .hb-modal-box{
	background: #fff;
	max-width: 480px;
	width: calc(100% - 32px);
	padding: 32px;
	border-radius: 20px;
}
#hb-consulta-modal .hb-modal-box h3{
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #0a0a0a;
	margin: 0 0 20px;
}
#hb-consulta-modal .hb-modal-close{ color: #0a0a0a; top: 20px; right: 20px; }
#hb-consulta-modal .wpcf7-form br{ display: none; }
#hb-consulta-modal .wpcf7-form p{ margin: 0; }
#hb-consulta-modal .wpcf7-form-control-wrap{ display: block; margin-bottom: 12px; }
#hb-consulta-modal .wpcf7-form input[type="text"],
#hb-consulta-modal .wpcf7-form input[type="email"],
#hb-consulta-modal .wpcf7-form input[type="tel"],
#hb-consulta-modal .wpcf7-form textarea{
	width: 100%;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	padding: 12px 16px;
	font-size: 16px;
	font-family: inherit;
	color: #0a0a0a;
	outline: none;
	transition: border-color .15s ease;
}
#hb-consulta-modal .wpcf7-form input::placeholder,
#hb-consulta-modal .wpcf7-form textarea::placeholder{ color: #737373; opacity: 1; }
#hb-consulta-modal .wpcf7-form input:focus,
#hb-consulta-modal .wpcf7-form textarea:focus{ border-color: #0a0a0a; }
#hb-consulta-modal .wpcf7-form textarea{ min-height: 120px; max-height: 220px; resize: vertical; }
#hb-consulta-modal .wpcf7-submit{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	margin-top: 4px;
	padding: 0 32px;
	border: none;
	border-radius: 999px;
	background: #0a0a0a;
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	transition: background .15s ease;
}
#hb-consulta-modal .wpcf7-submit:hover{ background: #262626; }
#hb-consulta-modal .wpcf7-spinner{ margin: 0 auto; }
#hb-consulta-modal .wpcf7-not-valid-tip{ display: block; margin-top: 6px; font-size: 13px; color: #b91c1c; }
#hb-consulta-modal .wpcf7-response-output{
	margin: 16px 0 0;
	padding: 12px 16px;
	border: 1px solid #e5e5e5 !important;
	border-radius: 12px;
	font-size: 14px;
	color: #0a0a0a;
	background: #fff;
}

/* Tabla "¿Cómo llegar?" ([hb_biz_howtoarrive]): filas con divisor #e5e5e5 */
.v4-contact-arrive dl{ margin: 28px 0 0; }
.v4-contact-arrive .hb-htw-row{
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 24px;
	padding: 16px 0;
	border-top: 1px solid #e5e5e5;
}
.v4-contact-arrive .hb-htw-row:last-child{ border-bottom: 1px solid #e5e5e5; }
.v4-contact-arrive dt{ font-size: 14px; font-weight: 500; color: #737373; padding-top: 2px; }
.v4-contact-arrive dd{ margin: 0; font-size: 16px; line-height: 1.6; color: #0a0a0a; }

@media (max-width: 860px){
	.v4-contact-hero{ padding: 40px 0 56px; }
	.v4-contact-grid{ grid-template-columns: 1fr; gap: 40px; }
	.v4-contact-map iframe{ min-height: 320px; }
	.v4-contact-more{ padding: 64px 0; }
	.v4-contact-more-grid{ grid-template-columns: 1fr; gap: 56px; }
	.v4-contact-arrive .hb-htw-row{ grid-template-columns: 1fr; gap: 4px; }
	.v4-contact-arrive dt{ padding-top: 0; }
}

/* ==========================================================================
   BARRIDO v4 — páginas de contenido restantes (Blog, post, Mantenimiento,
   FAQ, carrito vacío, Quiénes somos, Reserva showroom). Mismo lenguaje que
   front-page.php / ficha v4: contenedor 1280/32, Geist (ya sitewide vía
   --hb-font), títulos 30-48px peso 500 tracking negativo, muted #737373,
   bordes #e5e5e5, superficies #f5f5f5, radios 16-24, botones/etiquetas
   píldora. Todo SCOPED por página (body.page-id-*, .hb-blog,
   .hb-blog-single, .hb-faq-page, body.woocommerce-cart) para no pisar la
   home, tienda, ficha, /contactanos/ (.hb-contact, otro barrido) ni el
   header. cein.css carga el último, así que un empate de especificidad con
   style.css lo gana este bloque.
   ========================================================================== */

/* --- Contenedor v4 para las páginas del barrido (el header.php del clon no
       envuelve el contenido en ningún .col-full: sin esto, todo el
       contenido de estas páginas nace pegado al borde del viewport). --- */
.hb-blog #main,
.hb-blog-single #main,
.hb-faq-page #main,
body.page-id-103 #main,
body.page-id-12 #main,
body.page-id-14 #main,
body.hb-page-narrow #main{
	max-width: 1280px;
	margin: 0 auto;
	padding: 40px 32px 96px;
}
body.page-id-103 #main{ padding-top: 32px; }
@media (max-width: 560px){
	.hb-blog #main,
	.hb-blog-single #main,
	.hb-faq-page #main,
	body.page-id-103 #main,
	body.page-id-12 #main,
	body.page-id-14 #main,
	body.hb-page-narrow #main{ padding-left: 20px; padding-right: 20px; }
}
/* El ÍNDICE del blog va a ANCHO COMPLETO alineado con cabecera/footer
   (--cein-inset), como el Figma (grid de 4 a sangre) — NO la columna estrecha
   de 1280 de las páginas de lectura. */
.hb-blog #main{
	max-width: none;
	margin: 0;
	padding: 40px var(--cein-inset) 96px;
	box-sizing: border-box;
}
/* La ENTRADA individual también se alinea con la página (--cein-inset) y se
   ENSANCHA: antes era un #main de 1280 centrado con la columna de texto a 760,
   también centrada → título a x=580 mientras el logo está a x=80 (se veía
   angosto y descolgado). Ahora layout editorial alineado a la izquierda con la
   cabecera: título/texto a ~860 y hero más ancho, empezando en el inset. */
.hb-blog-single #main{
	max-width: none;
	margin: 0;
	padding: 40px var(--cein-inset) 96px;
	box-sizing: border-box;
}
.hb-blog-single .hb-blog-single-layout{ max-width: 880px; margin: 0 auto; } /* texto e imagen MISMO ancho (880), centrados */
.hb-blog-single .hb-blog-related{ max-width: 880px; } /* ancho base (los breakpoints de abajo lo ensanchan; va ANTES para que ganen) */

/* --- Tipos compartidos del barrido --- */
.hb-blog .woocommerce-breadcrumb,
.hb-blog-single .hb-blog-single-main .woocommerce-breadcrumb,
.hb-faq-page .woocommerce-breadcrumb{
	font-size: 14px;
	color: #737373;
	margin: 0 0 28px;
	padding: 0;
}
.hb-blog .woocommerce-breadcrumb a,
.hb-blog-single .woocommerce-breadcrumb a,
.hb-faq-page .woocommerce-breadcrumb a{ color: #737373; text-decoration: none; }
.hb-blog .woocommerce-breadcrumb a:hover,
.hb-blog-single .woocommerce-breadcrumb a:hover,
.hb-faq-page .woocommerce-breadcrumb a:hover{ color: #0a0a0a; }

/* =====================================================================
   BLOG (home.php) — cabecera compacta kicker+H1 dentro del contenedor
   (la foto hero a sangre y el banner "destacado" duplicado se quitaron
   del template), píldoras de categorías y grid de cards estilo YNS.
   ===================================================================== */
.hb-blog .hb-blog-eyebrow,
.hb-blog-single .hb-blog-eyebrow{
	display: block;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #737373;
	margin: 0;
}
.hb-blog .hb-blog-heading{ margin: 0 0 28px; }
.hb-blog .hb-blog-heading h1{
	margin: 8px 0 0;
	font-size: clamp(36px, 4vw, 48px);
	line-height: 1.05;
	font-weight: 500;
	letter-spacing: -0.025em;
	color: #0a0a0a;
}

.hb-blog .woocommerce-breadcrumb{ margin-bottom: 40px; } /* breadcrumb → píldoras 40px (Figma) */
.hb-blog .hb-blog-filters{ gap: 10px; margin: 0 0 60px; } /* píldoras → grid 60px (Figma) */
.hb-blog .hb-blog-filters a{
	display: inline-flex;
	align-items: center;
	border: 1px solid #e5e5e5;
	background: #fff;
	color: #0a0a0a;
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}
.hb-blog .hb-blog-filters a:hover{ background: #f5f5f5; }
.hb-blog .hb-blog-filters a.is-active{
	background: #0a0a0a;
	border-color: #0a0a0a;
	color: #fff;
}

.hb-blog .hb-blog-grid{ grid-template-columns: repeat(4, 1fr); gap: 30px; } /* 4 col, gap 30px (Figma 297:11571) */
@media (max-width: 1200px){ .hb-blog .hb-blog-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px){ .hb-blog .hb-blog-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .hb-blog .hb-blog-grid{ grid-template-columns: 1fr; } }

/* Cards de artículo — MEDIDAS EXACTAS del Figma (297:11587), en Geist: imagen
   (esquinas superiores 8px, ~407×283 = 1.44) APILADA sobre una caja de texto a
   ANCHO COMPLETO (bg #FCFAF5, esquinas inferiores 16px, padding 31px) con
   fecha (16px #AEAEAE) → título (22px/600, line-height 1.35, #1C1522) → "Leer
   más" (16px #1C1522 subrayado). Sin solape, sin sombra base. */
.hb-blog .hb-blog-card,
.hb-blog-single .hb-blog-card{ display: block; }
.hb-blog .hb-blog-card-img,
.hb-blog-single .hb-blog-card-img{
	aspect-ratio: 407 / 283;
	border-radius: 8px 8px 0 0;
	background-color: #f5f5f5;
	background-size: cover;
	/* Las fotos provisionales son RETRATOS verticales en un marco horizontal:
	   con "center" el recorte cortaba por la cabeza. "center top" encuadra la
	   parte superior (cara/cabeza) para que no queden decapitadas. */
	background-position: center top;
}
.hb-blog .hb-blog-card-body,
.hb-blog-single .hb-blog-card-body{
	background: #FCFAF5;
	border-radius: 0 0 16px 16px;
	padding: 31px;
	transition: box-shadow .2s ease, transform .2s ease;
}
.hb-blog .hb-blog-card:hover .hb-blog-card-body,
.hb-blog-single .hb-blog-card:hover .hb-blog-card-body{
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}
.hb-blog .hb-blog-date,
.hb-blog-single .hb-blog-date{ display: block; font-size: 16px; color: #AEAEAE; margin: 0 0 12px; }
.hb-blog .hb-blog-card h3,
.hb-blog-single .hb-blog-card h3{
	margin: 0 0 26px;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.005em;
	line-height: 1.35;
	color: #1C1522;
}
.hb-blog .hb-blog-readmore,
.hb-blog-single .hb-blog-readmore{
	font-size: 16px;
	font-weight: 400;
	color: #1C1522;
	text-decoration: underline;
	text-underline-offset: 4px;
}
.hb-blog .hb-blog-card:hover .hb-blog-readmore{ color: #737373; }

/* Paginación del listado (nav.hb-blog-pagination envuelve los
   .page-numbers de paginate_links). */
.hb-blog-pagination{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 64px;
}
.hb-blog-pagination .page-numbers{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border: 1px solid #e5e5e5;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	color: #0a0a0a;
	text-decoration: none;
}
.hb-blog-pagination a.page-numbers:hover{ background: #f5f5f5; }
.hb-blog-pagination .page-numbers.current{
	background: #0a0a0a;
	border-color: #0a0a0a;
	color: #fff;
}

/* El grid ya colapsa por reglas antiguas de style.css, pero con menos
   especificidad que las de arriba — se repiten aquí los cortes. */
@media (max-width: 900px){
	.hb-blog .hb-blog-grid{ grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
}
@media (max-width: 560px){
	.hb-blog .hb-blog-grid{ grid-template-columns: 1fr; }
}

/* =====================================================================
   POST individual (single.php)
   ===================================================================== */
.hb-blog-single .hb-blog-single-main h1{
	margin: 8px 0 10px;
	font-size: clamp(30px, 3.4vw, 40px);
	line-height: 1.15;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: #0a0a0a;
}
.hb-blog-single .hb-blog-tag{
	display: inline-block;
	margin: 16px 0 0;
	border: 1px solid #e5e5e5;
	background: #f5f5f5;
	color: #0a0a0a;
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 500;
}
/* Foto destacada como HERO acotado (antes el <img> salía a tamaño natural: los
   retratos verticales provisionales se veían a 1216×1824, enormes). Se fuerza
   un banner ~16:9 recortado con la cara arriba. Cuando el owner suba una foto
   apaisada propia, encaja igual. */
.hb-blog-single .hb-blog-single-media{ max-width: 880px; margin: 36px auto 48px; } /* mismo ancho que el texto (880), centrado */
/* Pantallas grandes: ensanchar el container (texto e imagen SIEMPRE al mismo
   ancho) para no dejar tanto margen vacío. */
@media (min-width: 1600px){
	.hb-blog-single .hb-blog-single-layout,
	.hb-blog-single .hb-blog-single-media,
	.hb-blog-single .hb-blog-related{ max-width: 1000px; }
}
@media (min-width: 2000px){
	.hb-blog-single .hb-blog-single-layout,
	.hb-blog-single .hb-blog-single-media,
	.hb-blog-single .hb-blog-related{ max-width: 1120px; }
}
@media (min-width: 2560px){
	.hb-blog-single .hb-blog-single-layout,
	.hb-blog-single .hb-blog-single-media,
	.hb-blog-single .hb-blog-related{ max-width: 1280px; }
}
.hb-blog-single .hb-blog-single-img{
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center 18%;
	border-radius: 24px;
}
.hb-blog-single .hb-blog-content{ font-size: 16px; line-height: 1.75; color: #404040; }
.hb-blog-single .hb-blog-content p{ margin-bottom: 1.3em; }
.hb-blog-single .hb-blog-share{ font-size: 14px; color: #737373; }
.hb-blog-single .hb-blog-share a{
	color: #0a0a0a;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.hb-blog-single .hb-blog-nav{
	border-top: 1px solid #e5e5e5;
	padding-top: 24px;
	font-size: 14px;
}
.hb-blog-single .hb-blog-nav a{ color: #0a0a0a; text-decoration: none; }
.hb-blog-single .hb-blog-nav a:hover{ color: #737373; }
.hb-blog-single .hb-blog-related{ margin: 96px auto 0; } /* centrado; el ancho lo fija la regla base + breakpoints */
/* "> h3" a propósito: el selector antiguo ".hb-blog-related h3" también
   alcanzaba los títulos de las cards de dentro. */
.hb-blog-single .hb-blog-related > h3{
	margin: 0 0 32px;
	font-size: 30px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: #0a0a0a;
}
.hb-blog-single .hb-blog-related-grid{ grid-template-columns: repeat(3, 1fr); gap: 28px; } /* 3 cards al ancho del artículo (no minúsculas) */
@media (max-width: 900px){
	.hb-blog-single .hb-blog-related-grid{ grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
}
@media (max-width: 560px){
	.hb-blog-single .hb-blog-related-grid{ grid-template-columns: 1fr; }
}

/* =====================================================================
   MANTENIMIENTO (page-id-103) — foto de cabecera contenida con radio 24,
   pestañas píldora v4, jerarquía de títulos, y fuera el falso reproductor
   de vídeo (".hb-maint-video": un bloque 16:10 VACÍO con un botón de play
   que no reproduce nada — tras el cambio de tokens v4 su fondo
   "--hb-negro" y su play "--hb-white" son ambos blancos, dejando media
   columna muerta a 1440 y un hueco enorme a 375; era el "artefacto"
   roto al final del contenido de las pestañas).
   ===================================================================== */
/* Hero de Mantenimiento con el MISMO estilo que el de categoría (owner
   2026-07-20): imagen a sangre + velo oscuro + título blanco grande, compacto.
   Full-bleed con el truco 100vw porque este hero vive dentro del contenedor de
   la página. Anula la pastilla blanca anterior. */
body.page-id-103 .hb-maint-hero{
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	min-height: 300px;
	max-height: 360px;
	height: auto;
	border-radius: 0;
	background-size: cover;
	background-position: center 35%;
	display: flex;
	align-items: center;
	padding: 0;
	/* Sube el hero para pegarlo al menú: cancela el padding-top:32px de
	   "body.page-id-103 #main" (franja blanca sobre el hero). */
	margin-top: -32px;
	margin-bottom: 40px;
}
body.page-id-103 .hb-maint-hero-veil{
	position: absolute; inset: 0;
	background: linear-gradient(to right, rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 46%, rgba(0,0,0,.08) 100%);
	pointer-events: none;
}
body.page-id-103 .hb-maint-hero-inner{
	position: relative; z-index: 2;
	max-width: 1400px; width: 100%; margin: 0 auto; padding: 40px 32px;
}
body.page-id-103 .hb-maint-hero h1{
	background: none;
	color: #fff;
	padding: 0;
	border-radius: 0;
	font-size: 44px;
	line-height: 1.08;
	font-weight: 700;
	letter-spacing: -.02em;
	margin: 0 0 12px;
	display: block;
}
body.page-id-103 .hb-maint-hero-inner p{
	color: rgba(255,255,255,.9);
	font-size: 18px;
	line-height: 1.55;
	margin: 0;
	max-width: 44ch;
}
@media(max-width:640px){
	body.page-id-103 .hb-maint-hero{ min-height: 240px; }
	body.page-id-103 .hb-maint-hero h1{ font-size: 30px; }
}
body.page-id-103 .hb-tabs-nav{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; }
body.page-id-103 .hb-tabs-nav button{
	appearance: none;
	border: 1px solid #e5e5e5;
	background: #fff;
	color: #0a0a0a;
	border-radius: 999px;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
body.page-id-103 .hb-tabs-nav button:hover{ background: #f5f5f5; color: #0a0a0a; }
body.page-id-103 .hb-tabs-nav button.is-active{
	background: #0a0a0a;
	border-color: #0a0a0a;
	color: #fff;
}
body.page-id-103 .hb-tabs-panel h2{
	margin: 0 0 16px;
	font-size: 30px;
	line-height: 1.2;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: #0a0a0a;
}
body.page-id-103 .hb-tabs-panel p,
body.page-id-103 .hb-tabs-panel ul{
	font-size: 16px;
	line-height: 1.65;
	color: #404040;
}
body.page-id-103 .hb-tabs-panel ul{ padding-left: 1.2em; margin: 0 0 1.5em; }
/* Dos columnas de verdad: instrucciones a la izquierda y el hueco del vídeo a
   la derecha. Antes la columna era única a 760px y el vídeo iba oculto, así que
   el texto quedaba estrecho mientras la cinta, el contacto y los relacionados
   ocupaban los 1200px del contenedor: de ahí que la página se viera descuadrada.
   Ahora la fila superior también llega a 1200 y todo comparte el mismo ancho. */
body.page-id-103 .hb-maint-columns{
	grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
	gap: 56px;
	align-items: start;
	max-width: none;
	margin-bottom: 0;
}
body.page-id-103 .hb-maint-video{
	display: block;
	position: sticky;
	top: 120px;
	aspect-ratio: 16 / 9;
	border-radius: 20px;
	overflow: hidden;
	background: #fafafa;
}
/* El aviso solo existe mientras el div esté vacío: en cuanto se pegue dentro el
   iframe del vídeo desde el editor de WordPress, ":empty" deja de casar y el
   marcador desaparece solo, sin tocar código ni CSS. */
body.page-id-103 .hb-maint-video:empty{
	display: grid;
	place-items: center;
	border: 1px dashed #e2e2e2;
}
body.page-id-103 .hb-maint-video:empty::after{
	content: "Vídeo próximamente";
	font-size: 14px;
	color: #a1a1a1;
}
body.page-id-103 .hb-maint-video iframe,
body.page-id-103 .hb-maint-video video{ width: 100%; height: 100%; border: 0; display: block; }

/* Contacto: era un párrafo centrado suelto con tres enlaces iguales, sin
   jerarquía ni superficie. Pasa a tarjeta alineada con el resto de la página y
   con WhatsApp como acción principal (es el canal que usa la tienda). */
body.page-id-103 .hb-maint-contact{
	display: grid;
	/* minmax(0,auto) en la segunda columna: con "auto" a secas los tres enlaces
	   imponían su min-content (480px) y, sumado al max-width de 600px que
	   heredaba la tarjeta, la columna del texto se quedaba a 0 y el titular se
	   partía letra a letra en vertical. */
	grid-template-columns: 200px minmax(0, 1fr) minmax(0, auto);
	gap: 32px;
	align-items: center;
	background: #f5f5f5;
	border-radius: 20px;
	padding: 32px;
	margin: 28px 0 48px;
	max-width: none;
}
/* Foto de la tienda: da cara al bloque de contacto, que era solo texto sobre
   gris. Va por CSS con ruta relativa a la hoja, no como <img> en el contenido,
   para que no quede un dominio escrito a fuego al pasar a producción. */
body.page-id-103 .hb-maint-contact-img{
	aspect-ratio: 1 / 1;
	border-radius: 16px;
	background: #e8e8e8 center / cover no-repeat url("images/store-interior.jpg");
}
body.page-id-103 .hb-maint-contact-text{ text-align: left; }
body.page-id-103 .hb-maint-contact-text h2{
	margin: 0 0 8px;
	font-size: 24px;
	line-height: 1.25;
	font-weight: 600;
}
body.page-id-103 .hb-maint-contact .hb-contact-links{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
}
body.page-id-103 .hb-maint-contact .hb-contact-links a{
	display: inline-flex;
	align-items: center;
	padding: 12px 20px;
	border: 1px solid #dcdcdc;
	border-radius: 999px;
	background: #fff;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	color: #0a0a0a;
	transition: border-color .15s ease, background .15s ease;
}
body.page-id-103 .hb-maint-contact .hb-contact-links a:hover{ border-color: #0a0a0a; }
body.page-id-103 .hb-maint-contact .hb-contact-links .hb-contact-wa{
	background: #0a0a0a;
	border-color: #0a0a0a;
	color: #fff;
	order: -1;
}
body.page-id-103 .hb-maint-contact .hb-contact-links .hb-contact-wa:hover{ background: #262626; }

@media (max-width: 1024px){
	body.page-id-103 .hb-maint-columns{ grid-template-columns: 1fr; gap: 36px; }
	body.page-id-103 .hb-maint-video{ position: static; }
	body.page-id-103 .hb-maint-contact{ grid-template-columns: 1fr; gap: 24px; padding: 24px; }
	body.page-id-103 .hb-maint-contact-img{ aspect-ratio: 16 / 7; }
	body.page-id-103 .hb-maint-contact .hb-contact-links{ justify-content: flex-start; }
}

body.page-id-103 .hb-accordion-item,
body.page-id-14 .hb-accordion-item{ border-top: 1px solid #e5e5e5; }
body.page-id-103 .hb-accordion-head,
body.page-id-14 .hb-accordion-head{ font-size: 16px; font-weight: 500; padding: 18px 0; }
body.page-id-103 .hb-accordion-body,
body.page-id-14 .hb-accordion-body{ font-size: 15px; line-height: 1.65; color: #404040; }

/* Ticker "Reservar consulta": de franja gigante (tipos --hb-h3 en negrita)
   a cinta discreta contenida, superficie #f5f5f5 con radio 16. */
/* La cinta va EXACTAMENTE igual que en el resto del sitio (owner 2026-08-05):
   a sangre, con el fondo y la tipografía de la regla general. Aquí solo queda el
   margen superior; los laterales negativos son los que completan el truco 100vw
   —el "margin: 56px 0 0" que hubo antes los anulaba y la franja desbordaba por
   la derecha. Se retiran los overrides de esta página (fondo #f5f5f5, radio 16,
   tipo a 15px) que la dejaban como pastilla contenida y desalineada. */
body.page-id-103 .hb-ticker{ margin: 56px calc(50% - 50vw) 0; }

body.page-id-103 .hb-maint-contact p{ font-size: 16px; line-height: 1.6; color: #404040; }
/* "Productos relacionados" (h2 suelto, hijo directo del contenido — los h2
   de las pestañas van anidados y no les alcanza). */
body.page-id-103 .entry-content > h2{
	margin: 64px 0 32px;
	font-size: 30px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: #0a0a0a;
}

/* =====================================================================
   FAQ (page-faq.php, ahora en /preguntas-frecuentes/) — solo piel:
   contenedor (arriba), H1/intro/títulos de sección a jerarquía v4 y
   sidebar en neutro (los iconos iban en terracota).
   ===================================================================== */
.hb-faq-page .hb-faq-main h1{
	margin: 0 0 16px;
	font-size: clamp(36px, 4vw, 48px);
	line-height: 1.05;
	font-weight: 500;
	letter-spacing: -0.025em;
	color: #0a0a0a;
}
.hb-faq-page .hb-faq-intro{ font-size: 16px; line-height: 1.65; color: #737373; }
.hb-faq-page .hb-faq-intro a{ color: #0a0a0a; }
.hb-faq-page .hb-faq-section h2{
	font-size: 24px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: #0a0a0a;
}
.hb-faq-page .hb-faq-sidebar h2{ font-size: 16px; font-weight: 600; color: #0a0a0a; }
.hb-faq-page .hb-faq-categories a{ font-size: 14px; color: #0a0a0a; border-color: #e5e5e5; }
.hb-faq-page .hb-faq-categories a:first-child{ border-top-color: #e5e5e5; }
.hb-faq-page .hb-faq-cat-icon{ color: #737373; }
.hb-faq-page .hb-faq-categories a:hover .hb-faq-cat-icon{ color: #0a0a0a; }

/* =====================================================================
   CARRITO VACÍO — el aviso "Tu carrito está vacío." salía con la barra
   azul .woocommerce-info por defecto de WooCommerce/Storefront (su hoja
   puede imprimirse después de style.css, pero este selector de 3 clases
   gana por especificidad, venga en el orden que venga). Neutro v4:
   icono de bolsa + texto + el botón píldora "Volver a la tienda" que ya
   existe debajo.
   ===================================================================== */
body.woocommerce-cart .cart-empty.woocommerce-info{
	display: block;
	background: none;
	border: none;
	box-shadow: none;
	padding: 0;
	margin: 72px auto 20px;
	max-width: 520px;
	text-align: center;
	font-size: 18px;
	font-weight: 500;
	color: #0a0a0a;
	list-style: none;
}
body.woocommerce-cart .cart-empty.woocommerce-info::after{ content: none; }
body.woocommerce-cart .cart-empty.woocommerce-info::before{
	/* Bolsa de la compra en línea 1.6, mismo trazo que los iconos del
	   header — inline como data URI, sin glifos de fuente. */
	content: "";
	display: block;
	width: 48px;
	height: 48px;
	margin: 0 auto 20px;
	position: static;
	background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.2 12H6.2z'/%3E%3Cpath d='M9 10V6a3 3 0 0 1 6 0v4'/%3E%3C/svg%3E");
}
body.woocommerce-cart .return-to-shop{ margin: 0 0 96px; }

/* =====================================================================
   QUIÉNES SOMOS (page-id-12) y RESERVA SHOWROOM (page-id-14) — pase
   rápido: título de página y secciones a jerarquía v4, fotos con radio.
   ===================================================================== */
body.page-id-12 .entry-title,
body.page-id-14 .entry-title{
	margin: 0 0 24px;
	font-size: clamp(36px, 4vw, 48px);
	line-height: 1.05;
	font-weight: 500;
	letter-spacing: -0.025em;
	color: #0a0a0a;
}

body.page-id-12 .hb-about-hero{ gap: 64px; align-items: center; }
body.page-id-12 .hb-about-hero-text h2{
	margin: 0 0 16px;
	font-size: 30px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: #0a0a0a;
}
body.page-id-12 .hb-about-hero-text p{ font-size: 16px; line-height: 1.7; color: #404040; }
body.page-id-12 .hb-about-hero-photo img{ border-radius: 24px; }
body.page-id-12 .hb-editorial-statement{ background: #f8f8f7; }
body.page-id-12 .hb-editorial-statement h2{
	font-size: clamp(28px, 3vw, 36px);
	font-weight: 500;
	letter-spacing: -0.01em;
	color: #0a0a0a;
}
body.page-id-12 .hb-editorial-statement p{ font-size: 18px; line-height: 1.65; color: #737373; }
body.page-id-12 .hb-photo-grid-head h2{
	font-size: 30px;
	font-weight: 500;
	letter-spacing: -0.01em;
	margin: 0;
	color: #0a0a0a;
}
body.page-id-12 .hb-photo-grid img{ border-radius: 16px; }
body.page-id-12 .hb-about-cta p{ font-size: 16px; color: #404040; }

/* Intro de Reserva showroom (primer <p> del contenido, antes de las
   features): sub de héroe v4 — 18px muted, columna 672. */
body.page-id-14 .entry-content > p:first-child{
	max-width: 672px;
	margin: 0 0 8px;
	font-size: 18px;
	line-height: 1.6;
	color: #737373;
}
body.page-id-14 .hb-showroom-features{ margin: 40px 0 8px; }
body.page-id-14 .hb-showroom-features-grid{ gap: 24px; }
body.page-id-14 .hb-showroom-feature{
	border: 1px solid #e5e5e5;
	border-radius: 16px;
	padding: 24px;
}
body.page-id-14 .hb-showroom-feature h3{ margin: 0 0 8px; font-size: 16px; font-weight: 600; color: #0a0a0a; }
body.page-id-14 .hb-showroom-feature p{ font-size: 14px; line-height: 1.6; color: #737373; }
body.page-id-14 .hb-showroom-steps h2{
	margin: 0 0 8px;
	font-size: 30px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: #0a0a0a;
}
body.page-id-14 .hb-giant-banner{ border-radius: 24px; min-height: 560px; }
body.page-id-14 .hb-giant-banner-content h3{
	font-size: 30px;
	line-height: 1.2;
	font-weight: 500;
	letter-spacing: -0.01em;
}
body.page-id-14 .hb-showroom-cta{ margin: 64px 0 0; }

/* ==========================================================================
   PÍLDORA "Añadir al carrito" DE TARJETA — BLOQUE FINAL GANADOR: el bloque
   del panel inline (más arriba) re-estilizaba el botón como círculo y lo
   convertía en un óvalo negro gigante (visto por el owner). Geometría
   forzada aquí con !important, y fuera el enlace "Ver carrito" que
   WooCommerce añade junto al botón tras el AJAX.
   ========================================================================== */
.hb-card .hb-card-quickadd,
.v4-inline-panel .hb-card .hb-card-quickadd{
	position: absolute !important;
	inset: auto auto 14px 50% !important;
	transform: translateX(-50%) !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	background: #fff !important;
	color: #0a0a0a !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 12px 26px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	font-family: inherit !important;
	white-space: nowrap !important;
	box-shadow: 0 2px 10px rgba(0,0,0,0.10) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.hb-card .hb-card-quickadd:hover,
.v4-inline-panel .hb-card .hb-card-quickadd:hover{
	background: #0a0a0a !important;
	color: #fff !important;
}
.hb-card .hb-card-quickadd.loading{ opacity: 0.5 !important; }
.hb-card .added_to_cart,
.v4-inline-panel .added_to_cart{ display: none !important; }
@media (hover: hover){
	.hb-card .hb-card-quickadd,
	.v4-inline-panel .hb-card .hb-card-quickadd{ opacity: 0; }
	.hb-card:hover .hb-card-quickadd,
	.v4-inline-panel .hb-card:hover .hb-card-quickadd{ opacity: 1; }
}

/* Hover-swap de foto en las tarjetas de producto (patrón YNS): la segunda
   foto del producto aparece en fundido de 0,45s al pasar el ratón. Convive
   con el zoom (ambas imágenes escalan juntas). En táctil no aplica. */
.hb-card .hb-card-photo a{ position: relative; display: block; width: 100%; height: 100%; }
.hb-card .hb-card-img-b{
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
@media (hover: hover){
	.hb-card:hover .hb-card-img-b{ opacity: 1; }
}
/* El atenuado antiguo del hover (opacity .92) ya no pinta nada con el
   hover-swap — fuera, para que la 2ª foto llegue al 100%. */
.hb-card:hover .hb-card-photo img{ opacity: 1; }
@media (hover: hover){
	.hb-card:hover .hb-card-img-b{ opacity: 1 !important; }
}
/* La pastilla de colores chocaba con la píldora "Añadir al carrito" en la
   parte baja de la foto → pasa a la esquina superior izquierda (espejo de
   la lupa), y así ambas conviven al hover. */
.v4-card-dots{ top: 12px !important; left: 12px !important; bottom: auto !important; }

/* Referencia "Latest Arrivals" del owner: proporción 3/4, badge NUEVO en
   pastilla negra arriba-izquierda, y la pastilla de colores baja a la
   esquina inferior izquierda (sobre la línea del CTA) para no chocar. */
body.cein-clone .v4-card-photo,
.hb-card .hb-card-photo,
.cein-favs-imgwrap{ aspect-ratio: 3 / 4 !important; }
.hb-card-new{
	position: absolute;
	top: 12px; left: 12px;
	background: #0a0a0a;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 8px 16px;
	border-radius: 999px;
	z-index: 2;
	pointer-events: none;
}
.v4-card-dots{ top: auto !important; bottom: 66px !important; left: 12px !important; }
/* Precio antiguo tachado en las captions de tarjeta (WooCommerce lo emite
   como <del> cuando hay oferta real). */
.hb-card .hb-bestseller-price del,
.v4-card-price del{
	color: #a3a3a3 !important;
	font-weight: 400 !important;
	text-decoration: line-through;
	margin-left: 6px;
}
.hb-card .hb-bestseller-price ins,
.v4-card-price ins{ text-decoration: none; }

/* FIX del fantasma en el hover-swap: con mix-blend-multiply, la 2ª foto se
   multiplicaba contra la 1ª (dos caras superpuestas). Crossfade real: la
   1ª se desvanece mientras entra la 2ª — cada una multiplica solo contra
   el fondo gris del cuadro. */
@media (hover: hover){
	.hb-card .hb-card-photo a > img:first-child{ transition: opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
	.hb-card:hover .hb-card-photo a > img:first-child:not(:only-child){ opacity: 0 !important; }
}

/* Cambio de foto con "flash" suave (owner: el corte era brusco): la 2ª
   foto entra un punto sobreexpuesta (brightness 1.3) y se asienta a la
   normalidad en 0,8s; fundidos alargados a 0,6s con easing suave. */
.hb-card .hb-card-img-b{
	transition: opacity .6s ease, filter .8s ease, transform .6s cubic-bezier(.2,.7,.2,1) !important;
	filter: brightness(1.3);
}
.hb-card:hover .hb-card-img-b{ filter: brightness(1); }
@media (hover: hover){
	.hb-card .hb-card-photo a > img:first-child{ transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1) !important; }
}

/* Flash-PUENTE (owner: "el flash tiene que ayudar a la transición"): un
   velo blanco pulsa sobre la foto justo durante el cruce — sube al 60% en
   el primer tercio y se disuelve mientras la 2ª foto termina de entrar.
   Sustituye al brightness de la foto entrante (doble efecto = mareo). */
.hb-card .hb-card-img-b{ filter: none !important; }
.hb-card .hb-card-photo::before{
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	opacity: 0;
	z-index: 1;
	pointer-events: none;
}
@media (hover: hover){
	.hb-card:hover .hb-card-photo::before{ animation: hbCardFlash .55s ease both; }
}
@keyframes hbCardFlash{
	0%{ opacity: 0; }
	35%{ opacity: 0.6; }
	100%{ opacity: 0; }
}

/* SWAP DEFINITIVO (owner: el crossfade doble hacía convivir las dos fotos
   a opacidades bajas = efecto raro). Patrón estándar YNS: la foto A NO se
   mueve (100% siempre); la B entra por encima OPACA — blend normal y fondo
   gris propio para tapar por completo — en un fundido único de 0,5s.
   Velo/flash anteriores anulados. */
.hb-card:hover .hb-card-photo a > img:first-child:not(:only-child){ opacity: 1 !important; }
.hb-card .hb-card-img-b{
	mix-blend-mode: normal !important;
	background: #f5f5f5 !important;
	filter: none !important;
	transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1) !important;
}
.hb-card:hover .hb-card-photo::before,
.hb-card .hb-card-photo::before{ animation: none !important; opacity: 0 !important; }

/* Botones .hb-btn-primary incrustados en CONTENIDO (p.ej. "Reserva tu
   visita" en Quiénes somos): heredaban subrayado y cuerpo del texto de la
   página y salían hinchados — normalizados a la píldora estándar v4. */
a.hb-btn-primary,
.hb-btn-primary{
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px;
	height: 48px !important;
	padding: 0 32px !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	border-radius: 999px !important;
	background: #0a0a0a !important;
	color: #fff !important;
	border: none !important;
}
a.hb-btn-primary:hover,
.hb-btn-primary:hover{ background: #262626 !important; color: #fff !important; }
a.hb-btn-primary *{ text-decoration: none !important; }

/* Miniaturas de la galería de ficha: el borde de la activa quedaba como
   barrotes negros con las esquinas rectas (owner). Indicador nuevo:
   inactivas al 55% y subrayado fino negro bajo la activa. */
.v4-pdp .hb-gallery-v2-thumb{
	border: none !important;
	opacity: 0.55;
	transition: opacity .2s ease;
	position: relative;
}
.v4-pdp .hb-gallery-v2-thumb:hover{ opacity: 0.85; }
.v4-pdp .hb-gallery-v2-thumb.is-active{ opacity: 1; }
.v4-pdp .hb-gallery-v2-thumb.is-active::after{
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 3px;
	background: #0a0a0a;
}

/* Los "barrotes negros" de la galería eran miniaturas APLASTADAS: con
   muchas fotos, las sobrantes se comprimían a ~4px (una foto oscura
   estrujada parece un barrote). Ancho fijo 80px y fila desplazable. */
.v4-pdp .hb-gallery-v2-thumb{ flex: 0 0 80px !important; width: 80px !important; height: 80px !important; }
.v4-pdp-thumbs{ overflow-x: auto; scrollbar-width: none; }
.v4-pdp-thumbs::-webkit-scrollbar{ display: none; }
/* El contenedor de miniaturas llevaba un outline negro de 3px (¡ese era el
   "barrote"!) — fuera. */
.v4-pdp-thumbs{ outline: none !important; }

/* Franja de contacto NEGRA sobre el menú (owner: dirección + teléfono +
   WhatsApp + horario, SIEMPRE fija): sticky apilada con el header — la
   franja a top:0 y el header justo debajo. Anula el display:none del clon
   YNS puro. */
.cein-announce{
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	position: sticky;
	top: 0;
	z-index: 51;
	height: 36px;
	padding: 0 16px;
	background: #0a0a0a;
	color: #fafafa;
	font-size: 12.5px;
	white-space: nowrap;
	overflow: hidden;
}
.cein-announce a{ color: inherit; text-decoration: none; }
.cein-announce a:hover{ text-decoration: underline; text-underline-offset: 2px; }
.cein-announce-wa{ display: inline-flex; align-items: center; gap: 5px; }
.cein-announce-wa svg{ flex: none; }
.cein-announce-sep{ opacity: 0.45; }
.cein-header{ top: 36px !important; }
@media (max-width: 700px){
	.cein-announce-addr,
	.cein-announce-hours,
	.cein-announce-hours-sep,
	.cein-announce-sep:first-of-type{ display: none; }
}
/* Las líneas negras verticales de la miniatura ACTIVA: un outline heredado
   en el estado is-active/focus del botón — anulado en todos los estados;
   el indicador es solo el subrayado inferior. */
.v4-pdp .hb-gallery-v2-thumb,
.v4-pdp .hb-gallery-v2-thumb.is-active,
.v4-pdp .hb-gallery-v2-thumb:focus,
.v4-pdp .hb-gallery-v2-thumb:focus-visible,
.v4-pdp .hb-gallery-v2-thumb:active{
	outline: none !important;
	box-shadow: none !important;
}

/* Acordeón de la ficha — jerarquía corregida (owner: el título salía más
   pequeño que el cuerpo): título 16/600, cuerpo 14.5 forzado (heredaba los
   16px de .hb-product-desc). Y fuera el aro azul de foco al clic. */
.v4-acc summary{ font-size: 16px !important; font-weight: 600 !important; }
.v4-acc-body,
.v4-acc-body p,
.v4-acc-body .hb-product-desc,
.v4-acc-body .hb-product-desc p{ font-size: 14.5px !important; line-height: 1.65 !important; }
.v4-acc summary:focus{ outline: none !important; }
.v4-acc summary:focus-visible{ outline: 2px solid #0a0a0a !important; outline-offset: 2px; }
/* Miniaturas CENTRADAS bajo la foto grande (owner) — "safe center": si hay
   más de las que caben, vuelven a alinearse al inicio con scroll en vez de
   cortar las primeras. */
.v4-pdp-thumbs{ justify-content: safe center; }
/* Franja de contacto repartida (owner): dirección a la IZQUIERDA alineada
   con el logo (mismo padding 32 del header) y teléfono/WhatsApp/horario
   justificados a la DERECHA a ras del carrito. */
.cein-announce{ justify-content: flex-start !important; padding: 0 32px !important; }
.cein-announce-addr{ margin-right: auto; }
.cein-announce-addr + .cein-announce-sep{ display: none; }
/* Afinado: el logo y los iconos del header arrancan/acaban con ~20px de
   aire interno extra respecto a su padding — la franja se iguala a esas
   guías reales (52px) para alineación exacta. */
.cein-announce{ padding: 0 52px !important; }
/* La alineación definitiva: el header usa el margen RESPONSIVO
   var(--cein-inset) (crece en pantallas anchas) — la franja usa la misma
   variable, no un valor fijo que solo casaba a 1440. */
.cein-announce{ padding: 0 var(--cein-inset) !important; }
/* En anchos de tableta (modo hamburguesa, ≤900) el header recoloca los
   iconos y la alineación con el carrito deja de existir — la franja pasa a
   CENTRADA con teléfono/WhatsApp/horario; la dirección se oculta ya en
   este tramo para no desbordar. */
@media (max-width: 900px){
	.cein-announce{ justify-content: center !important; }
	.cein-announce-addr{ display: none; }
}
/* Orden final de la franja (owner): dirección IZQ · horario CENTRO
   geométrico · teléfonos DER. El horario va en absoluto al 50% para que su
   centro no dependa del ancho de los laterales. */
.cein-announce{ justify-content: space-between !important; }
.cein-announce-addr{ margin-right: 0; }
.cein-announce-hours{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
.cein-announce-tels{ display: inline-flex; align-items: center; gap: 10px; }
@media (max-width: 900px){
	.cein-announce-hours{ position: static; transform: none; }
}

/* Menú: fuera el recuadro MORADO de foco de Storefront (a:focus outline
   #7f54b3) al clicar con ratón — para teclado queda un foco propio neutro.
   Y escala suave de los enlaces al hover (owner). */
.cein-header a:focus,
.cein-menu > a:focus,
.cein-mega a:focus,
.cein-icons a:focus,
.cein-burger:focus{ outline: none !important; box-shadow: none !important; }
.cein-header a:focus-visible,
.cein-burger:focus-visible{ outline: 2px solid #0a0a0a !important; outline-offset: 3px; border-radius: 4px; }
.cein-menu > a{ transition: color .15s ease, transform .18s ease !important; will-change: transform; }
.cein-menu > a:hover{ transform: scale(1.07); }
.cein-mega-col a{ display: inline-block; transition: transform .18s ease; }
.cein-mega-col a:hover{ transform: translateX(3px); }

/* Animación de los desplegables de la ficha (owner): apertura/cierre con
   altura animada — técnica nativa moderna (interpolate-size +
   ::details-content), sin JavaScript. El chevron ya rota. Y el recuadro
   negro de foco tras clicar se sustituye por un subrayado discreto solo
   para teclado. */
.v4-acc{ interpolate-size: allow-keywords; }
.v4-acc::details-content{
	height: 0;
	overflow: clip;
	transition: height .32s ease, content-visibility .32s allow-discrete;
}
.v4-acc[open]::details-content{ height: auto; }
.v4-acc summary:focus,
.v4-acc summary:focus-visible,
.v4-acc:focus,
.v4-acc:focus-visible{ outline: none !important; }
.v4-acc summary:focus-visible{ text-decoration: underline; text-underline-offset: 4px; }

/* EJECUCIÓN GLOBAL del outline morado de Storefront (a:focus/button:focus
   #7f54b3): fuera en TODO el sitio con ratón; con teclado, foco neutro en
   currentColor (se adapta a fondos claros y oscuros). El owner lo cazó en
   menú y breadcrumbs — esto lo corta de raíz en todas partes. */
a:focus,
button:focus,
summary:focus,
[tabindex]:focus{ outline: none !important; }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{ outline: 2px solid currentColor !important; outline-offset: 2px !important; }
/* 1ª foto del hero: encuadre alto (aire sobre la cabeza = zoom out) y la
   modelo descentrada (el recorte lateral la lleva a la derecha del frame). */
.v4-hero-media img.v4-hero-slide1{ object-position: center 10%; }
/* Corrección del zoom-out real de la 1ª foto: contain (se ve la foto
   ENTERA, alejada) anclada a la DERECHA; el hueco izquierdo toma el color
   del fondo de estudio de la propia foto y el velo/texto viven ahí. */
.v4-hero-media img.v4-hero-slide1{
	object-fit: contain !important;
	object-position: right center !important;
	background: #8e8d9c;
}

/* Swatches de color de la ficha PEQUEÑITOS (referencia CEIN del owner:
   circulitos ~28px con anillo fino en el activo). */
.v4-pdp .v4-pdp-swatch,
.v4-pdp .hb-swatch.v4-pdp-swatch{
	width: 28px !important;
	height: 28px !important;
	border-radius: 50% !important;
}
.v4-pdp .v4-pdp-swatch.is-active{
	box-shadow: 0 0 0 1px #fff, 0 0 0 2.5px #0a0a0a !important;
}
.v4-pdp .v4-pdp-swatches{ gap: 12px !important; }

/* REVERTIDO el experimento contain/right de la 1ª foto del hero (en
   pantallas anchas dejaba la foto pequeña pegada a la derecha sobre un mar
   gris — rechazado por el owner). Vuelta a cover a sangre; el hero V1 del
   Figma que está en construcción sustituirá esta sección. */
.v4-hero-media img.v4-hero-slide1{
	object-fit: cover !important;
	object-position: center 18% !important;
	background: none !important;
}

/* ==========================================================================
   HERO V1 (Figma 297:8428/8431/8442 → lenguaje v4). Composición del Figma:
   foto full-bleed de 958px sobre lienzo de 1920 (~66vh), bloque de texto a
   la izquierda (x100 y415, gap 30, título 35 / cuerpo 16 / botón píldora con
   borde), y fila de 3 botones de 553px en la base (y867, alto ~47, gap 30,
   radio 25, texto 20, fondo translúcido con blur — activo oscuro). Tokens
   traducidos al v4: negro #0a0a0a, píldoras 999, contenedor 1280/32.
   ========================================================================== */
.v4-hero--v1 .v4-hero-layout{
	position: relative; z-index: 2;
	display: flex; flex-direction: column;
	min-height: max(560px, 66vh);
}
.v4-hero--v1 .v4-hero-inner{
	max-width: 520px;
	padding: 96px 0 48px;
	margin: auto 0; /* centra el bloque en el espacio libre sobre los botones */
}
/* Título más contenido que el clamp v4 por defecto: el Figma usa un titular
   modesto (35px sobre 1920) — se conserva esa proporción discreta. */
.v4-hero--v1 .v4-hero-inner h1{ font-size: clamp(34px, 3.2vw, 48px); }
.v4-hero--v1 .v4-hero-inner p{ font-size: 17px; line-height: 1.6; }
.v4-hero--v1 .v4-hero-ctas{ margin-top: 30px; } /* gap 30 del Figma */

/* Fila de 3 botones (297:8442): 1/3 cada uno, pegada a la base del hero
   (Figma: 44px de aire hasta el borde inferior). Divisores = el propio hueco
   entre píldoras (30px en Figma). Traducción v4 de los fondos: translúcido
   oscuro con blur; el activo, casi negro pleno (píldora negra v4). */
.v4-hero-cats{
	display: flex; gap: 28px;
	margin-top: auto;
	padding-bottom: 44px;
}
.v4-hero-cats a{
	flex: 1 1 0; min-width: 0;
	display: inline-flex; align-items: center; justify-content: center;
	height: 48px; border-radius: 999px;
	background: rgba(10, 10, 10, 0.45);
	-webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
	color: #fff; font-size: 18px; font-weight: 500;
	text-decoration: none; white-space: nowrap;
	transition: background .15s ease;
}
.v4-hero-cats a:hover{ background: rgba(10, 10, 10, 0.68); }
.v4-hero-cats a.is-open{ background: rgba(10, 10, 10, 0.9); }

/* Puntos del slider: al borde derecho en VERTICAL (posición del Figma) — el
   centro-abajo ahora lo ocupa la fila de botones. */
.v4-hero--v1 .v4-hero-dots{
	left: auto; right: 20px; bottom: auto; top: 50%;
	transform: translateY(-50%);
	flex-direction: column;
}
.v4-hero--v1 .v4-hero-dot.is-active{ width: 7px; height: 26px; }

@media (max-width: 900px){
	/* La regla genérica de la era "foto a la derecha" esconde .v4-hero-media
	   en móvil — en el hero V1 la foto ES el fondo y debe verse siempre. */
	.v4-hero--v1 .v4-hero-media{ display: block; }
	.v4-hero--v1 .v4-hero-layout{ min-height: max(480px, 60vh); }
	.v4-hero--v1 .v4-hero-inner{ padding: 64px 0 32px; }
	.v4-hero-cats{ gap: 12px; }
	.v4-hero-cats a{ font-size: 15px; height: 44px; }
}
@media (max-width: 560px){
	.v4-hero-cats{ flex-direction: column; gap: 10px; padding-bottom: 28px; }
	.v4-hero-cats a{ width: 100%; }
	.v4-hero--v1 .v4-hero-dots{ right: 12px; }
}

/* ==========================================================================
   FOOTER V1 UNIFICADO (Figma 297:8833 + marquesina 297:8552/8555 → v4).
   Un solo bloque para TODO el sitio (hb_v1_footer en functions.php): la home
   standalone lo imprime directo y Storefront dentro de #colophon .col-full
   (ya sin max-width/padding). Medidas Figma: marquesina 150px con lockup
   ~34px; banda oscura 320px py60 texto 13, chips radio 12.5 px15 py5; barra
   inferior 55px clara. Tokens v4: #0a0a0a / #737373 / #e5e5e5 / #f5f5f5.
   Los selectores con #colophon delante pisan los estilos heredados del
   footer viejo de style.css (#colophon a{color:var(--hb-nude)}…).
   ========================================================================== */
#colophon.site-footer{ background: #fff; border-top: 0; padding: 0; }
.hbf{ font-size: 13px; color: #0a0a0a; line-height: 1.5; }
#colophon .hbf a,
.hbf a{ text-decoration: none; opacity: 1; }

/* — Banda-marquesina — */
.hbf-marquee{
	overflow: hidden;
	background: #f5f5f5;
	border-top: 1px solid #e5e5e5;
	padding: 32px 0;
}
.hbf-marquee-track{
	display: flex; width: max-content;
	animation: hbf-marquee 60s linear infinite;
}
.hbf-marquee-group{
	display: flex; align-items: center;
	gap: 96px; padding-right: 96px; /* el padding = hueco entre grupos: bucle sin costura */
}
.hbf-mark{
	display: inline-flex; flex-direction: column; align-items: center;
	line-height: 1.1; white-space: nowrap;
}
.hbf-mark-main{ font-size: 30px; font-weight: 700; letter-spacing: 0.12em; color: #0a0a0a; }
.hbf-mark-sub{ font-size: 11px; font-weight: 500; letter-spacing: 0.42em; color: #737373; margin-top: 2px; }
@keyframes hbf-marquee{
	from{ transform: translateX(0); }
	to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
	.hbf-marquee-track{ animation: none; }
}

/* — Banda oscura — */
.hbf-main{ background: #0a0a0a; color: #fff; }
.hbf-cols{
	max-width: none; margin: 0; box-sizing: border-box;
	padding: 56px var(--cein-inset); /* alineado con cabecera/contenido */
	display: grid;
	grid-template-columns: 0.9fr 0.7fr 1.4fr 1.1fr;
	gap: 32px;
	align-items: start;
}
.hbf-logo{ display: inline-flex; flex-direction: column; align-items: center; line-height: 1.2; justify-self: start; }
.hbf-logo-main{ font-size: 30px; font-weight: 700; letter-spacing: 0.08em; color: #fff; white-space: nowrap; }
.hbf-logo-sub{ font-size: 11px; font-weight: 500; letter-spacing: 0.4em; color: rgba(255, 255, 255, 0.65); margin-top: 2px; white-space: nowrap; }
.hbf-menu{ display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
#colophon .hbf-menu a,
.hbf-menu a{ color: #d4d4d4; font-size: 13px; }
#colophon .hbf-menu a:hover,
.hbf-menu a:hover{ color: #fff; }
.hbf-block p{ margin: 0 0 18px; color: #fff; }
.hbf-rows{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hbf-rows li{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: #d4d4d4; }
.hbf-cell{ flex: 0 0 auto; }
.hbf-cell-wide{ min-width: 96px; }
.hbf-arrow{ color: #737373; }
.hbf-chip{
	display: inline-block;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	padding: 4px 14px;
	color: #fff;
}
.hbf-chip .hbf-arrow{ color: rgba(255, 255, 255, 0.55); }

/* — Barra inferior clara — */
.hbf-bottom{ background: #fff; border-top: 1px solid #e5e5e5; }
.hbf-bottom-inner{
	max-width: none; margin: 0; box-sizing: border-box;
	padding: 8px var(--cein-inset);
	min-height: 56px;
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap;
}
.hbf-bottom-inner p{ margin: 0; color: #737373; }
.hbf-legal{ display: flex; gap: 24px; flex-wrap: wrap; }
#colophon .hbf-legal a,
.hbf-legal a{ color: #737373; }
#colophon .hbf-legal a:hover,
.hbf-legal a:hover{ color: #0a0a0a; }
.hbf-social{ display: flex; gap: 6px; align-items: center; }
.hbf-social a{ display: inline-flex; padding: 8px; }
.hbf-social img{ width: 20px; height: 20px; display: block; }

@media (max-width: 900px){
	.hbf-cols{ grid-template-columns: 1fr 1fr; row-gap: 40px; }
	.hbf-block.hbf-address,
	.hbf-block.hbf-contact{ grid-column: span 2; }
}
@media (max-width: 560px){
	.hbf-marquee{ padding: 18px 0; }
	.hbf-mark-main{ font-size: 22px; }
	.hbf-cols{ grid-template-columns: 1fr; row-gap: 26px; padding: 32px 20px; }
	.hbf-block.hbf-address,
	.hbf-block.hbf-contact{ grid-column: auto; }
	.hbf-logo-main{ font-size: 26px; }
	/* Menú en 2 columnas: la mitad de alto que apilado a una sola. */
	.hbf-menu{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; padding-top: 0; }
	.hbf-block p{ margin: 0 0 12px; font-size: 14px; }
	.hbf-rows{ gap: 10px; }
	.hbf-rows li{ gap: 6px; }
	/* Los "chips" de transporte/horario, sin píldora: texto muted compacto,
	   con la etiqueta (Metro/Autobús/…) destacada. Ahorra mucho alto y quita
	   el aspecto pesado en móvil. */
	.hbf-chip{ border: none; border-radius: 0; padding: 0; color: #d4d4d4; font-size: 13px; white-space: normal; }
	.hbf-chip .hbf-arrow{ color: #737373; }
	.hbf-cell{ font-weight: 600; color: #fff; }
	.hbf-bottom-inner{ flex-direction: column; align-items: flex-start; padding: 16px 20px; gap: 12px; }
	.hbf-legal{ gap: 12px 20px; }
}

/* ==========================================================================
   FICHA — hero pequeño de categoría (banda fina sobre el breadcrumb, foto de
   cabecera de la categoría a sangre del contenedor, esquinas rectas, velo
   suave y nombre de la categoría pequeño encima; discreto, no protagonista).
   ========================================================================== */
.v4-pdp-cathero{
	position: relative;
	height: 200px;
	overflow: hidden;
	border-radius: 0; /* esquinas rectas a propósito (pieza V1) */
	margin: 0 0 24px;
}
.v4-pdp-cathero img{
	width: 100%; height: 100%;
	object-fit: cover; object-position: center 22%;
	display: block;
}
.v4-pdp-cathero::after{
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(10, 10, 10, 0.45) 0%, rgba(10, 10, 10, 0.12) 55%, rgba(10, 10, 10, 0.05) 100%);
	pointer-events: none;
}
.v4-pdp-cathero-label{
	position: absolute; left: 20px; bottom: 16px; z-index: 1;
	color: #fff;
	font-size: 13px; font-weight: 500;
	letter-spacing: 0.08em; text-transform: uppercase;
}
@media (max-width: 900px){
	.v4-pdp-cathero{ height: 160px; }
}

/* HERO ALTO como el mockup del Figma V1 (proporción 958/1920 ≈ mitad del
   ancho): con esta altura el cover muestra a la modelo entera a escala
   natural — era la clave del "está superampliada" (el hero bajito recortaba
   solo la cara). Contenido centrado verticalmente. */
.v4-hero,
.v4-hero--v1{
	height: min(50vw, 80vh);
	min-height: 540px;
	display: flex;
	align-items: center;
}
.v4-hero .v4-container{ width: 100%; }
.v4-hero-inner{ padding: 0 !important; max-width: 560px; }
.v4-hero-media img{ object-position: center 22% !important; }
/* Hero = LA MITAD de la pantalla (owner). */
.v4-hero,
.v4-hero--v1{ height: 50vh !important; min-height: 440px !important; }

/* Encuadre fino de la 1ª foto del hero (owner: "cabeza más pequeña y mejor
   encuadrada"): la foto ENTERA con contain (escala natural, centrada) sobre
   una capa de LA MISMA foto desenfocada a cover — los laterales se funden
   sin bordes visibles. Solo afecta a la slide 1; las demás siguen a cover. */
.v4-hero-media::before{
	content: "";
	position: absolute;
	inset: 0;
	background: url("images/hero-header.jpg") center 25% / cover no-repeat;
	filter: blur(28px) brightness(0.96);
	transform: scale(1.08);
}
.v4-hero-media img.v4-hero-slide1{
	object-fit: contain !important;
	object-position: center bottom !important;
}

/* ENCUADRE EXACTO DEL FIGMA: el frame del hero es 1920×958 (2:1) y la foto
   hero-header.jpg es 3840×1916 (2:1) — misma proporción: con el hero a
   aspect-ratio 2/1, la foto entra ENTERA sin recorte = el encuadre del
   mockup clavado (cabeza pequeña, hombro abajo a la derecha). Se anula la
   capa desenfocada del experimento anterior. */
.v4-hero,
.v4-hero--v1{
	height: auto !important;
	aspect-ratio: 2 / 1;
	max-height: 92vh;
	min-height: 480px !important;
}
.v4-hero-media::before{ display: none !important; }
.v4-hero-media img.v4-hero-slide1{
	object-fit: cover !important;
	object-position: center top !important;
}

/* INTEGRACIÓN hero V1 × alto 2:1 (regla "ENCUADRE EXACTO DEL FIGMA" de más
   arriba): el hero es flex con align-items:center — el contenedor del hero V1
   debe OCUPAR TODO el alto (align-self:stretch) para que la fila de 3 botones
   quede pegada a la base (Figma y867/958) y el bloque de texto se centre en
   el espacio restante. El alto ya lo da el aspect-ratio 2/1 del hero: fuera
   el min-height propio del layout (si superara el alto del hero, empujaría
   los botones fuera y quedarían cortados — visto en la verificación). */
.v4-hero--v1 .v4-hero-layout,
.v4-hero--v1 .v4-hero-layout.v4-container{
	align-self: stretch;
	min-height: 0;
}
/* Párrafo del hero: la regla base ".v4-hero-inner p{color:#737373}" (línea
   ~952, posterior a la blanca de la era "foto derecha") ganaba el empate de
   cascada y dejaba el texto gris ilegible sobre la foto. Blanco explícito. */
.v4-hero--v1 .v4-hero-inner p{ color: rgba(255, 255, 255, 0.92); }
/* Hero fijo (sin rotación): fuera los puntos del slider. */
.v4-hero-dots{ display: none !important; }

/* ================= HERO — ESTADO DEFINITIVO (owner, cerrado) =================
   MEDIA PANTALLA (50vh, NO full screen) + cabeza pequeña: la foto de la
   modelo ENTERA (contain, centrada) sobre la misma foto desenfocada de
   fondo (cover) — sin bordes visibles y sin cara gigante. Fija, sin
   rotación. Este bloque pisa todos los experimentos anteriores. */
.v4-hero,
.v4-hero--v1{
	height: 50vh !important;
	aspect-ratio: auto !important;
	max-height: none !important;
	min-height: 460px !important;
}
.v4-hero-media::before{
	display: block !important;
	content: "";
	position: absolute;
	inset: 0;
	background: url("images/hero-header.jpg") center 30% / cover no-repeat;
	filter: blur(26px) brightness(0.97);
	transform: scale(1.08);
}
.v4-hero-media img.v4-hero-slide1{
	object-fit: contain !important;
	object-position: center bottom !important;
}

/* ============ HERO — CIERRE FINAL (guía: captura aprobada del owner) ============
   COVER a sangre completa (sin márgenes laterales en ninguna pantalla),
   cara de la modelo hacia la derecha del encuadre, media pantalla, fija.
   Fuera la capa desenfocada (dejaba márgenes en ultrapanorámicas). */
.v4-hero-media::before{ display: none !important; }
.v4-hero-media img.v4-hero-slide1{
	object-fit: cover !important;
	object-position: 62% 22% !important;
}
@media (max-width: 960px){
	.v4-hero,
	.v4-hero--v1{ aspect-ratio: auto !important; min-height: 420px !important; height: 46vh !important; }
}
/* Con el lienzo extendido (hero-wide.jpg, 8000x1916), cover centra a la
   modelo ENTERA y pequeña — la cara ligeramente a la derecha del centro. */
.v4-hero-media img.v4-hero-slide1{ object-position: 55% 15% !important; }

/* Velo del hero AFINADO (referencia luminosa del owner): solo un gradiente
   suave en la zona del texto; el resto de la foto, limpia y luminosa. */
.v4-hero-media::after{
	background: linear-gradient(to right, rgba(15,13,22,0.42) 0%, rgba(15,13,22,0.18) 38%, rgba(15,13,22,0.02) 60%, transparent 100%) !important;
}

/* ==========================================================================
   HERO — DESPLEGABLE EDITORIAL (recuperado de la V1: Quiénes somos / Qué
   ofrecemos / Qué vendemos). Botones píldora en la base del hero + banda
   clara debajo con el viewport de altura animada y fundido cruzado entre
   los 3 paneles. Mecánica hover-asomar / clic-fijar en el <script> de
   front-page.php (portado 1:1 de hb-tabs.js de la V1).
   ========================================================================== */
.v4-hero-tabs-nav{
	display: flex; gap: 28px;
	margin-top: auto;
	padding-bottom: 44px;
	position: relative; z-index: 2;
}
.v4-hero-tabs-nav button,
.v4-hero-tabs-nav a{
	flex: 1 1 0; min-width: 0;
	display: inline-flex; align-items: center; justify-content: center;
	height: 48px; border: none; border-radius: 999px;
	background: rgba(10, 10, 10, 0.45);
	-webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
	color: #fff; font-size: 18px; font-weight: 500;
	font-family: inherit; cursor: pointer; white-space: nowrap;
	text-decoration: none;
	transition: background .15s ease, transform .18s ease;
}
.v4-hero-tabs-nav button:hover,
.v4-hero-tabs-nav a:hover{ background: rgba(10, 10, 10, 0.68); transform: scale(1.02); color:#fff; }
/* Banner de reserva al pie de la home (#hb-reservar). */
.hb-reservar{ position: relative; overflow: hidden; background-size: cover; background-position: center 30%; margin: 0; }
.hb-reservar-veil{ position: absolute; inset: 0; background: linear-gradient(to right, rgba(10,10,10,.82) 0%, rgba(10,10,10,.55) 55%, rgba(10,10,10,.35) 100%); }
.hb-reservar-inner{ position: relative; z-index: 2; max-width: none; margin: 0; padding: 72px var(--cein-inset); box-sizing: border-box; }
.hb-reservar-inner h2{ font-size: 34px; line-height: 1.12; font-weight: 700; letter-spacing: -.02em; color:#fff; margin: 0 0 12px; max-width: 20ch; }
.hb-reservar-inner p{ font-size: 17px; line-height: 1.55; color: rgba(255,255,255,.9); margin: 0 0 26px; max-width: 52ch; }
.hb-reservar-ctas{ display: flex; flex-wrap: wrap; gap: 14px; }
.hb-reservar-ctas a{ display: inline-flex; align-items: center; gap: 8px; padding: 15px 28px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 16px; }
.hb-reservar-btn{ background: #fff; color: #0a0a0a; }
.hb-reservar-btn:hover{ background: #b3562e; color:#fff; }
.hb-reservar-ghost{ border: 1px solid rgba(255,255,255,.6); color: #fff; }
.hb-reservar-ghost:hover{ background: rgba(255,255,255,.14); }
@media(max-width:640px){ .hb-reservar-inner{ padding: 48px 20px; } .hb-reservar-inner h2{ font-size: 26px; } .hb-reservar-ctas a{ width: 100%; justify-content: center; } }
.v4-hero-tabs-nav button.is-active{ background: rgba(10, 10, 10, 0.82); }
.v4-hero-tabs-nav button.is-pinned{ background: #0a0a0a; }
.v4-hero-tabs-nav button:focus{ outline: none; }
.v4-hero-tabs-nav button:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }

/* Banda del panel: gris muy suave (continuación natural del hero), texto
   centrado, ancho de lectura contenido. */
/* gris-morado V1 (owner). La banda se SOLAPA con el hero (margin-top negativo)
   para tapar la fina línea rojiza del borde inferior de la foto del hero (el
   pelo llega al borde). Con el panel cerrado la banda tiene altura 0, así que
   el solape no se ve; con overflow:hidden no desborda. */
.v4-hero-panel-band{ background: #7B7D93; position: relative; overflow: hidden; margin-top: -6px; }
.v4-hero-panel-band .v4-container{ padding-top: 0; padding-bottom: 0; }

/* Viewport de altura animada + paneles apilados con fundido cruzado
   (portado de style.css — front-page.php carga cein.css, no style.css). */
.hb-tabs-panel-viewport{
	position: relative;
	max-width: 1120px;
	margin: 0 auto;
	overflow: hidden;
	height: 0;
	transition: height .45s cubic-bezier(0.22, 1, 0.36, 1);
}
.hb-tabs-panel-viewport .hb-tabs-panel{
	display: block; position: absolute; top: 0; left: 0; width: 100%;
	text-align: center; opacity: 0; transform: translateY(0);
	transition: transform .4s ease, opacity .4s ease; pointer-events: none;
}
.hb-tabs-panel-viewport .hb-tabs-panel.is-entering-up{ transform: translateY(24px); transition: none; }
.hb-tabs-panel-viewport .hb-tabs-panel.is-entering-down{ transform: translateY(-24px); transition: none; }
.hb-tabs-panel-viewport .hb-tabs-panel.is-active{ opacity: 1; transform: translateY(0); pointer-events: auto; }
.hb-tabs-panel-viewport .hb-tabs-panel.is-leaving-up{ opacity: 0; transform: translateY(-24px); }
.hb-tabs-panel-viewport .hb-tabs-panel.is-leaving-down{ opacity: 0; transform: translateY(24px); }
.hb-tabs-panel-inner{ padding: 3.5em 0; }
/* Paneles del hero (Quiénes somos / Reserva) A SANGRE: el texto va sobre el panel
   de color a un lado y la foto real de la tienda ocupa la otra mitad tocando el
   borde (altura completa, sin esquinas redondeadas). Reserva va en espejo. */
.hb-tabs-panel-viewport{ max-width: none; }        /* full-bleed: sin caja centrada */
.v4-hero-panel-band .v4-container{ padding: 0; }   /* la foto llega hasta el borde */
.hb-tabs-panel-inner--split{ padding: 0; position: relative; }

.hb-tabs-split{
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	gap: 0;
	min-height: 440px;
	text-align: left;
}
.hb-tabs-split > *{ min-width: 0; }
.hb-tabs-split .hb-tabs-panel-text{
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 64px 72px 64px var(--cein-inset);
	box-sizing: border-box;
}
.hb-tabs-split .hb-tabs-panel-media{ position: relative; overflow: hidden; }
.hb-tabs-split .hb-tabs-panel-media img{
	position: absolute; inset: 0;
	display: block; width: 100%; height: 100%;
	object-fit: cover; border-radius: 0;
}
.hb-tabs-split .hb-tabs-panel-text h2{ margin-top: 0; }
.hb-tabs-split .hb-tabs-panel-text p{ max-width: 48ch; margin-left: 0; margin-right: 0; }
.hb-tabs-split .hb-tab-ctas{ margin-top: 22px; }
/* Espejo: en Reserva la foto va a la izquierda y el texto a la derecha. */
.hb-tabs-split--reverse .hb-tabs-panel-text{ order: 2; padding: 64px var(--cein-inset) 64px 72px; }
.hb-tabs-split--reverse .hb-tabs-panel-media{ order: 1; }

/* Flecha (bajar / cerrar): anclada abajo, en el lado del texto de cada panel. */
.hb-tabs-panel-inner--split .hb-scroll-arrow{ position: absolute; bottom: 26px; left: var(--cein-inset); margin: 0; }
#hb-tab-reservar .hb-scroll-arrow{ left: auto; right: var(--cein-inset); }

@media (max-width: 900px){
	.hb-tabs-split{ grid-template-columns: 1fr; min-height: 0; text-align: center; }
	.hb-tabs-split .hb-tabs-panel-media,
	.hb-tabs-split--reverse .hb-tabs-panel-media{ order: 1; height: 260px; }
	.hb-tabs-split .hb-tabs-panel-media img{ position: static; height: 260px; }
	.hb-tabs-split .hb-tabs-panel-text,
	.hb-tabs-split--reverse .hb-tabs-panel-text{ order: 2; padding: 32px var(--cein-inset) 56px; }
	.hb-tabs-split .hb-tabs-panel-text p{ max-width: none; margin-left: auto; margin-right: auto; }
	.hb-tabs-panel-inner--split .hb-scroll-arrow,
	#hb-tab-reservar .hb-scroll-arrow{ position: static; left: auto; right: auto; margin: 1.2em auto 0; }
}
.hb-tabs-panel-inner h2{ font-size: 30px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 0.6em; color: #fff; }
.hb-tabs-panel-inner p{ font-size: 17px; line-height: 1.65; color: #ECECEF; margin: 0 auto 0.9em; max-width: 60ch; }
.hb-tabs-panel-inner a{ color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.hb-tabs-panel-inner .hb-scroll-arrow{
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.6); color: #fff; margin-top: 1.2em;
	font-size: 16px;
}
.hb-scroll-arrow.is-pinned{ cursor: pointer; border-color: #fff; color: #fff; }
.hb-scroll-arrow.is-pinned:focus-visible{ outline: 2px solid #0a0a0a; outline-offset: 3px; }
@media (max-width: 640px){
	/* Píldoras del hero APILADAS en móvil: en fila de 3 el texto se salía y se
	   solapaba ("Encuentra tu peluca", "Reserva tu cita" no caben en ~98px). */
	.v4-hero-tabs-nav{ flex-direction: column; gap: 10px; padding-bottom: 20px; }
	.v4-hero-tabs-nav button,
	.v4-hero-tabs-nav a{ flex: none; width: 100%; font-size: 15px; height: 46px; white-space: normal; padding: 0 14px; }
	.hb-tabs-panel-inner{ padding: 2.2em 0; }
}


/* Descripción de producto: texto inicial bajo el precio con «Ver más» (sustituye
   al antiguo extracto + acordeón «Descripción»). El HTML completo queda en el DOM. */
.hb-pdp-desc{ font-size: 15px; line-height: 1.65; color: #3a3a3a; margin: 6px 0 22px; }
.hb-pdp-desc-text p,.hb-pdp-desc-full p{ margin: 0 0 10px; }
.hb-pdp-desc-text p:last-child,.hb-pdp-desc-full p:last-child{ margin-bottom: 8px; }
.hb-pdp-desc-text ul,.hb-pdp-desc-text ol,.hb-pdp-desc-full ul,.hb-pdp-desc-full ol{ margin: 0 0 10px 1.1em; padding: 0; }
.hb-pdp-desc-text strong,.hb-pdp-desc-full strong{ color: #1a1a1a; }
.hb-pdp-desc-preview{ margin: 0; }
.hb-pdp-desc.is-collapsed .hb-pdp-desc-full{ display: none; }
.hb-pdp-desc:not(.is-collapsed) .hb-pdp-desc-preview{ display: none; }
/* «Ver más / Ver menos»: enlace inline, no botón (se anula el estilo de botón del tema). */
.hb-pdp-desc-toggle,
.hb-pdp-desc .hb-pdp-desc-toggle{
	display: inline !important; background: none !important; border: 0 !important;
	box-shadow: none !important; padding: 0 !important; margin: 0 !important;
	width: auto !important; min-width: 0 !important; height: auto !important;
	font: inherit !important; font-weight: 600 !important; color: #b3562e !important;
	text-transform: none !important; letter-spacing: 0 !important; line-height: inherit !important;
	text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap;
}
.hb-pdp-desc-toggle:hover{ color: #8f4526 !important; }
.hb-pdp-desc-full .hb-pdp-desc-toggle{ margin-left: 2px !important; }

/* Subtítulo de sección + espaciado compacto de las filas de recomendados (PDP).
   Antes: .v4-pdp-related padding 40/88 (y 64) → ~100px entre filas. Ahora ajustado. */
.v4-section-sub{ font-size: 16px; line-height: 24px; color: #565656; margin: 10px 0 0; }
.v4-pdp .v4-pdp-related{ padding: 34px 0 26px !important; }
.v4-pdp .v4-pdp-related .v4-section-head{ margin-bottom: 22px !important; }
.v4-pdp .v4-pdp-crosssell{ margin-top: 0 !important; padding: 26px 0 56px !important; }

/* Carruseles de recomendados en la ficha — mismo patrón que el carrusel de
   categorías de la home (.cein-favs-row): flechas como COLUMNAS flex a los
   lados del track, así NO pisan las cards; el track ocupa el resto y la última
   card asoma. */
.v4-scroller-wrap{ display: flex; align-items: center; gap: 8px; }
.v4-scroller{
	flex: 1 1 0; min-width: 0;
	display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity;
	scroll-behavior: smooth; padding: 2px 0 4px; -webkit-overflow-scrolling: touch;
	scrollbar-width: none; -ms-overflow-style: none;
}
.v4-scroller > *{ flex: 0 0 auto; width: 250px; scroll-snap-align: start; }
.v4-scroller::-webkit-scrollbar{ display: none; width: 0; height: 0; }
.v4-scroller-arrow{
	flex: 0 0 40px; width: 40px; height: 40px; min-width: 40px; max-width: 40px;
	padding: 0; box-sizing: border-box; /* sin el padding del <button> base: salía ovalada (47×40) */
	border-radius: 50%; background: #fff;
	border: 1px solid #e5e5e5; box-shadow: 0 3px 12px rgba(0,0,0,.10); cursor: pointer;
	display: flex; align-items: center; justify-content: center; color: #1a1a1a;
	transition: background .15s, color .15s, opacity .15s;
}
.v4-scroller-arrow:hover{ background: #0a0a0a; color: #fff; border-color: #0a0a0a; }
/* El SVG colapsaba a 0px de ancho dentro del flex (círculo vacío). Se fuerza su
   tamaño y flex:none para que la flecha se vea. */
.v4-scroller-arrow svg{ width: 20px; height: 20px; flex: none; display: block; }
.v4-scroller-arrow[disabled]{ opacity: 0 !important; pointer-events: none; } /* !important: pisa el button:disabled{opacity:.5} de Storefront */
@media (max-width: 640px){
	.v4-scroller > *{ width: 62vw; }
	.v4-scroller-arrow{ display: none; }
}

/* ===== Fixes auditoría 2026-07-21 ===== */
/* Móvil: áreas de toque ≥44px en iconos del header y teléfonos (accesibilidad). */
@media (max-width: 900px){
	.cein-icons a, .cein-icons .hb-open-search{ min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
	.cein-icons > svg, .cein-icons a > svg{ width: 22px; height: 22px; }
	.cein-burger{ width: 44px; height: 44px; }
	.cein-announce-item{ display: inline-flex; align-items: center; min-height: 40px; }
	.hb-filterbar .hb-quickfilter, .cein-shop-chips a{ min-height: 40px; }
}
/* Banner "Reserva tu cita": velo más fuerte + botones fantasma legibles sobre la foto. */
.hb-reservar-veil{ background: linear-gradient(to right, rgba(10,10,10,.86) 0%, rgba(10,10,10,.66) 55%, rgba(10,10,10,.5) 100%) !important; }
.hb-reservar-ghost{ background: rgba(255,255,255,.14) !important; border: 1px solid rgba(255,255,255,.6); color: #fff !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hb-reservar-ghost:hover{ background: rgba(255,255,255,.26) !important; }

/* Menú móvil: contraste de enlaces (iban en gris claro) + hamburguesa activa. */
@media (max-width: 900px){
	.cein-header.nav-open .cein-menu{ box-shadow: 0 14px 28px rgba(0,0,0,.10); }
	.cein-header.nav-open .cein-menu > a{ color: #1a1a1a !important; font-weight: 500; border-bottom: 1px solid #f2efec; }
	.cein-header.nav-open .cein-menu > a:last-child{ border-bottom: 0; }
	.cein-header.nav-open .cein-burger{ background: #f2f0ee; border-radius: 8px; color: #0a0a0a; }
}

/* Switcher de idioma (Polylang) en el header */
.cein-langs a{ color: #565656; text-decoration: none; font-weight: 500; }
.cein-langs a.is-current{ color: #0a0a0a; font-weight: 700; }
.cein-langs a:hover{ color: #0a0a0a; }
.cein-lang-sep{ color: #c4c1bd; margin: 0 1px; }

/* ===== Pantallas grandes (≥1500px): 5 columnas en la home ===== */
@media (min-width: 1500px){
	body.cein-clone .v4-grid{ grid-template-columns: repeat(5, 1fr) !important; }
	.v4-grid-4{ grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 1499px){
	/* Con 4 columnas se muestran 8 destacados (dos filas de 4); las 2 extra solo en ≥1500 (5+5). */
	body.cein-clone .v4-grid > *:nth-child(n+9){ display: none; }
}

/* Tienda/categoría: alinear el .content-area al ancho nuevo (--cein-inset ~1560)
   para que la zona de productos use todo el ancho y quepan 4 columnas. */
body.hb-shop-yns .content-area{
	padding-left: var(--cein-inset) !important;
	padding-right: var(--cein-inset) !important;
	box-sizing: border-box;
}

/* Tienda/categoría a ≥1500px: 4 columnas exactas de producto (con el sidebar). */
@media (min-width: 1500px){
	body.hb-shop-yns ul.products{ grid-template-columns: repeat(4, 1fr) !important; }
}

/* Alinear "Categorías" al margen común --cein-inset (iba a 1760 centrado + 32px). */
.cein-favs{ max-width: none !important; margin: 0 !important; }
.cein-favs-head{ padding-left: var(--cein-inset) !important; padding-right: var(--cein-inset) !important; }
.cein-favs-trackwrap{ padding-left: var(--cein-inset) !important; }

/* Carrusel Categorías: track alineado al margen común (--cein-inset) por AMBOS lados
   → las 5 cards quedan simétricas como Productos destacados, sin corte en el borde.
   El scroll a más categorías lo indican los puntos/flechas. */
.cein-favs-trackwrap{ margin: 0 !important; padding-left: var(--cein-inset) !important; padding-right: var(--cein-inset) !important; }

/* Panel inline de categoría: 5 columnas en pantallas grandes (como el resto). */
@media (min-width: 1500px){ .v4-inline-grid{ grid-template-columns: repeat(5, 1fr) !important; } }
@media (max-width: 1499px){ .v4-inline-grid > *:nth-child(n+9){ display: none; } } /* 4×2 = 8 en pantallas medianas */

/* (Menú centrado retirado: dejaba el logo descolgado con huecos grandes.
   Se mantiene el menú pegado al logo, coherente y sin cortes.) */

/* ==========================================================================
   Página de reserva de cita (/reservar-cita/, shortcode [hb_reservar_cita]):
   dos tarjetas (Cita en tienda / Videoconsulta) que abren Cal.com en popup.
   ========================================================================== */
.hb-cita{ max-width: 860px; margin: 0 auto; }
.hb-cita-lead{ font-size: 16px; line-height: 1.6; color: #4a4a4a; margin: 0 0 24px; }
.hb-cita-options{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px){ .hb-cita-options{ grid-template-columns: 1fr; } }
.hb-cita-card{
	display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
	text-align: left; background: #fff; border: 1px solid #e5e5e5;
	border-radius: 16px; padding: 28px 24px; cursor: pointer; font-family: inherit;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.hb-cita-card:hover{ border-color: #0a0a0a; box-shadow: 0 8px 30px rgba(0,0,0,.08); transform: translateY(-2px); }
.hb-cita-card-ico{
	display: inline-flex; width: 48px; height: 48px; align-items: center;
	justify-content: center; border-radius: 12px; background: #f5f5f5; color: #0a0a0a;
	margin-bottom: 4px;
}
.hb-cita-card-title{ font-size: 18px; font-weight: 600; color: #0a0a0a; }
.hb-cita-card-desc{ font-size: 14px; line-height: 1.5; color: #737373; }
.hb-cita-card-go{ margin-top: 8px; font-size: 14px; font-weight: 500; color: #0a0a0a; }
.hb-cita-alt{ margin: 24px 0 0; font-size: 14px; color: #737373; }
.hb-cita-alt a{ color: #0a0a0a; font-weight: 500; text-decoration: underline; }
.hb-cita--fallback .hb-cita-ctas{ display: flex; gap: 12px; margin: 0 0 28px; flex-wrap: wrap; }
/* La plantilla de página de Storefront saca el título (.entry-header) a ancho
   completo pegado a la izquierda, mientras .hb-cita se autocentra en columna:
   quedaban desalineados. Con body.hb-page-reserva, título y contenido comparten
   la MISMA columna centrada de 860px, con el mismo padding lateral → sus bordes
   izquierdos coinciden. */
/* El título va DENTRO de la tarjeta (como el modal "Reservar consulta"), así que
   se oculta el .entry-header de la plantilla de Storefront. La reserva se
   presenta como tarjeta centrada compacta sobre un fondo suave. */
body.hb-page-reserva .entry-header{ display: none; }
body.hb-page-reserva .content-area{ background: #fafafa; }
.hb-cita-page{ max-width: 720px; margin: 0 auto; padding: 48px 20px 64px; }
.hb-cita-h{ text-align: center; font-size: 32px; font-weight: 600; letter-spacing: -.02em; color: #0a0a0a; margin: 0 0 24px; }
.hb-cita-lead--center{ text-align: center; max-width: 480px; margin: 0 auto 28px; color: #737373; }
/* Tarjeta del formulario (fallback) — caja blanca compacta tipo modal. Reusa
   el borde/fondo/radio de .hb-cita-card pero en bloque (no las de opción Cal). */
.hb-cita-card--form{ display: block; cursor: default; max-width: 520px; margin: 0 auto; padding: 36px; transition: none; }
.hb-cita-card--form:hover{ border-color: #e5e5e5; box-shadow: 0 22px 60px rgba(0,0,0,.06); transform: none; }
.hb-cita-card--form .hb-cita-lead{ font-size: 15px; line-height: 1.6; color: #737373; margin: 0 0 20px; }
.hb-cita-card--form .hb-cita-ctas{ display: flex; gap: 12px; margin: 0 0 8px; flex-wrap: wrap; }
.hb-cita-card--form .hb-cita-ctas a{ flex: 1; min-width: 150px; text-align: center; }
.hb-cita-or{ position: relative; text-align: center; margin: 22px 0; }
.hb-cita-or::before{ content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #eee; }
.hb-cita-or span{ position: relative; background: #fff; padding: 0 12px; font-size: 13px; color: #999; }

/* CTAs dentro del panel desplegable "Reserva tu cita" del hero
   (#hb-tab-reservar). El panel es gris-morado (#7B7D93) con texto blanco, así
   que el botón secundario (ghost) va con borde y texto claros. Los 3 botones
   van EQUILIBRADOS (mismo ancho) con flex:1 y un máximo. */
.hb-tab-ctas{ display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; justify-content: center; align-items: stretch; }
/* Los 3 con EXACTAMENTE la misma caja (el primario trae padding/height con
   !important de base, así que se igualan con !important). */
.hb-tab-ctas .hb-btn-primary,
.hb-tab-ctas .hb-btn-ghost{
	text-decoration: none;
	flex: 1 1 0;
	min-width: 175px;
	max-width: 230px;
	height: 48px !important;
	padding: 0 20px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center;
	border-radius: 999px !important;
	font-size: 15px !important;
	box-sizing: border-box;
}
.hb-tab-ctas .hb-btn-ghost{
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.6);
	color: #fff;
}
/* Animación de hover: los 3 botones se elevan un poco con sombra (feedback
   sutil). transition con !important para ganar al base del primario. */
.hb-tab-ctas .hb-btn-primary,
.hb-tab-ctas .hb-btn-ghost{
	transition: transform .2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .2s ease, background .2s ease, border-color .2s ease !important;
}
.hb-tab-ctas .hb-btn-primary:hover,
.hb-tab-ctas .hb-btn-ghost:hover{
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}
.hb-tab-ctas .hb-btn-primary:active,
.hb-tab-ctas .hb-btn-ghost:active{ transform: translateY(-1px); }
.hb-tab-ctas .hb-btn-ghost:hover{ background: rgba(255, 255, 255, 0.16); border-color: #fff; }

/* --- Modal de reserva de cita (#hb-cita-modal): caja blanca tipo el modal de
   "Reservar consulta". --- */
/* La HOME no carga style.css (donde está ".hb-modal{display:none}" y el overlay
   base), así que el modal se pintaba VISIBLE tras el footer. Se replican aquí
   las reglas base del overlay, escopadas a este modal. */
#hb-cita-modal{ display: none; }
#hb-cita-modal.is-open{ display: block; position: fixed; inset: 0; z-index: 1000; }
#hb-cita-modal .hb-modal-overlay{ position: absolute; inset: 0; background: rgba(28,21,34,0.6); }
#hb-cita-modal .hb-modal-box{
	position: relative;
	background: #fff;
	max-width: 460px;
	width: calc(100% - 32px);
	margin: 10vh auto;
	padding: 32px;
	border-radius: 20px;
}
#hb-cita-modal .hb-modal-box h3{ font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: #0a0a0a; margin: 0 0 8px; }
#hb-cita-modal .hb-modal-close{
	position: absolute; top: 14px; right: 14px;
	width: 40px; height: 40px; padding: 0;
	display: flex; align-items: center; justify-content: center;
	background: none; border: none; border-radius: 999px;
	font-size: 24px; line-height: 1; cursor: pointer; color: #0a0a0a;
}
#hb-cita-modal .hb-modal-close:hover{ background: #f5f5f5; }
.hb-cita-modal-sub{ font-size: 15px; line-height: 1.55; color: #737373; margin: 0 0 22px; }
#hb-cita-modal .hb-cita-options--modal{ grid-template-columns: 1fr; gap: 12px; }
#hb-cita-modal .hb-cita-card{ flex-direction: row; align-items: center; justify-content: space-between; padding: 18px 20px; gap: 12px; }
#hb-cita-modal .hb-cita-card-title{ font-size: 16px; }
#hb-cita-modal .hb-cita-card-go{ margin-top: 0; white-space: nowrap; color: #737373; }
#hb-cita-modal .hb-cita-ctas{ display: flex; gap: 12px; }
#hb-cita-modal .hb-cita-ctas .hb-btn-primary,
#hb-cita-modal .hb-cita-ctas .hb-btn-ghost--line{ flex: 1; text-align: center; justify-content: center; display: inline-flex; align-items: center; border-radius: 999px; padding: 13px 20px; font-size: 15px; box-sizing: border-box; text-decoration: none; }
.hb-btn-ghost--line{ background: #fff; border: 1px solid #e5e5e5; color: #0a0a0a; }
.hb-btn-ghost--line:hover{ background: #f5f5f5; }
.hb-cita-modal-formlink{ margin: 18px 0 0; text-align: center; font-size: 14px; }
.hb-cita-modal-formlink a{ color: #0a0a0a; text-decoration: underline; }

/* =========================================================================
   REDISEÑO CRO 2026 · Cabecera y submenús contextuales
   Sustituye al mega-menú único (.cein-mega): cada sección abre su propio
   panel. Los estilos antiguos se conservan más arriba por si algún template
   suelto los usa todavía.
   ========================================================================= */

.cein-menu{ gap: 2px; }
.cein-nav-item{ position: static; display: flex; align-items: center; }
.cein-nav-item > a{
	display: inline-flex; align-items: center; gap: 5px;
	padding: 22px 12px; font-size: 14px; line-height: 20px;
	color: #3d3d3d; text-decoration: none; white-space: nowrap;
}
.cein-nav-item > a:hover{ color: #0a0a0a; }
.cein-nav-caret{ opacity: .55; transition: transform .18s ease; }
.cein-nav-item.has-sub:hover .cein-nav-caret{ transform: rotate(180deg); }
/* La flecha-botón solo existe en móvil (acordeón); en escritorio manda el hover. */
/* Storefront pinta los <button> como píldora naranja (y al pulsar deja un
   círculo de color). Aquí es solo una flecha, así que se neutraliza en todos
   sus estados, conservando un foco visible por accesibilidad. */
.cein-sub-toggle,
.cein-sub-toggle:hover,
.cein-sub-toggle:focus,
.cein-sub-toggle:active{
	display: none; background: none; border: none; box-shadow: none;
	padding: 8px; color: #3d3d3d; cursor: pointer; border-radius: 0;
}
.cein-sub-toggle:focus-visible{ outline: 2px solid #0a0a0a; outline-offset: 2px; }

/* --- Panel --- */
.cein-sub{
	position: absolute; left: 0; right: 0; top: 100%;
	background: #fff; border-top: 1px solid #ececec;
	box-shadow: 0 18px 40px -22px rgba(0,0,0,.35);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
	z-index: 60;
}
.cein-nav-item.has-sub:hover .cein-sub{ opacity: 1; visibility: visible; transform: none; }
.cein-sub-inner{
	display: flex; gap: 48px; align-items: flex-start;
	padding: 32px var(--cein-inset, 40px) 36px;
}
.cein-sub-cols{ display: flex; gap: 56px; flex: 1 1 auto; }
/* Secciones con pocas columnas: se estrecha el panel para que la tarjeta no quede
   desterrada al borde con un vacío en medio. Desde que Oncológico y Accesorios
   tienen cuatro columnas esto solo aplicaría a un panel de una sola columna. */
.cein-sub-inner--cols-1{ max-width: 980px; }
.cein-sub-inner--cols-2{ max-width: 1180px; }
/* Las columnas CRECEN a partes iguales (flex:1 1 0) en vez de quedarse en su
   ancho mínimo: si no, todo el espacio sobrante se acumulaba en un único hueco
   justo antes de la tarjeta del recomendador —211px en Pelucas—. Repartirlo
   entre las cuatro vale igual para los paneles con tarjeta y para Marcas, que
   no la tiene. */
.cein-sub-col{ display: flex; flex-direction: column; gap: 9px; min-width: 150px; flex: 1 1 0; }
.cein-sub-label{
	color: #8a8a8a; font-size: 10.5px; letter-spacing: .9px; text-transform: uppercase;
	font-weight: 600; margin: 0 0 6px;
}
.cein-sub-col a{ font-size: 13.5px; line-height: 19px; color: #111; text-decoration: none; }
.cein-sub-col a:hover{ text-decoration: underline; }
.cein-sub-n{ color: #9a9a9a; font-size: 12px; }
.cein-sub-all{ margin-top: 4px; text-decoration: underline !important; color: #444 !important; }

/* --- Tarjeta del recomendador ---
   Va SIEMPRE pegada al borde derecho (margin-left:auto) y con ancho fijo: antes,
   en los paneles de dos columnas, se quedaba flotando en medio con un hueco a cada
   lado. Ahora Oncológico y Accesorios también traen cuatro columnas, así que la
   tarjeta mantiene sus 430px: estrecharla la dejaba raquítica y el panel de Pelucas
   ya funcionaba bien con ese ancho. Las columnas caben igual porque crecen a partes
   iguales (ver .cein-sub-col). */
.cein-sub-promo{
	flex: none; width: 500px; margin-left: auto; align-self: stretch;
	display: flex; gap: 18px; align-items: stretch;
	background: #faf8f4; border: 1px solid #eee7dd; border-radius: 14px; padding: 22px;
}
.cein-sub-promo-text{ flex: 1 1 auto; display: flex; flex-direction: column; }
.cein-sub-promo-title{ font-size: 19px; line-height: 25px; font-weight: 600; color: #111; margin: 0 0 8px; }
.cein-sub-promo-title span{ color: #9a9a9a; font-weight: 400; }
.cein-sub-promo-copy{ font-size: 12.5px; line-height: 18px; color: #5c5c5c; margin: 0 0 14px; }
.cein-sub-promo-btn{
	display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
	background: #0a0a0a; color: #fff !important; text-decoration: none !important;
	font-size: 13px; font-weight: 500; padding: 11px 18px; border-radius: 999px;
}
.cein-sub-promo-btn:hover{ background: #262626; }
.cein-sub-promo-note{ font-size: 10.5px; color: #9a9a9a; margin: 10px 0 0; }
/* La foto tenía 128px de ancho y quedaba en una tira vertical en la que no se
   distinguía nada. Con align-self:stretch en la tarjeta gana además todo el alto
   del panel, no solo el de su propio texto. */
.cein-sub-promo-media{ flex: none; width: 190px; border-radius: 10px; overflow: hidden; }
.cein-sub-promo-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Botón de acción de la cabecera --- */
.cein-icons .cein-cta{
	display: inline-flex; align-items: center; gap: 8px;
	background: #0a0a0a; color: #fff !important; text-decoration: none !important;
	font-size: 13.5px; font-weight: 500; line-height: 20px;
	padding: 11px 20px; border-radius: 999px; white-space: nowrap;
}
.cein-cta:hover{ background: #262626; }

/* --- Móvil: acordeón --- */
@media (max-width: 1200px){
	.cein-nav-item{ display: block; width: 100%; position: relative; }
	.cein-nav-item > a{ padding: 14px 0; font-size: 15px; }
	.cein-nav-caret{ display: none; }
	.cein-sub-toggle{
		display: block; position: absolute; right: 0; top: 6px;
	}
	.cein-sub-toggle svg{ transition: transform .18s ease; }
	.cein-nav-item.is-open .cein-sub-toggle svg{ transform: rotate(180deg); }
	/* En táctil no hay hover: manda la clase .is-open del acordeón. */
	.cein-nav-item.has-sub:hover .cein-sub{ opacity: 0; visibility: hidden; transform: none; }
	.cein-sub{
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border-top: none; display: none;
	}
	.cein-nav-item.is-open .cein-sub{ display: block; }
	.cein-sub-inner{ display: block; padding: 4px 0 16px; }
	.cein-sub-cols{ display: block; }
	.cein-sub-col{ margin-bottom: 18px; }
	.cein-sub-promo{ width: auto; margin-top: 4px; }
	.cein-sub-promo-media{ display: none; }
	/* Especificidad: .cein-icons a (0,1,1) gana a .cein-cta (0,1,0), así que la
	   regla móvil se escribe al mismo nivel para que se aplique de verdad. */
	.cein-icons .cein-cta{ display: none; } /* en móvil su sitio es la barra inferior fija */
}

/* =========================================================================
   REDISEÑO CRO 2026 · Home
   ========================================================================= */

/* --- Hero --- */
.hb-hero{ position: relative; min-height: 620px; display: flex; align-items: center; overflow: hidden; }
.hb-hero-media{ position: absolute; inset: 0; }
.hb-hero-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
/* Scrim: el párrafo blanco se perdía sobre las zonas claras de la foto. */
.hb-hero::after{
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(90deg, rgba(12,12,16,.78) 0%, rgba(12,12,16,.55) 38%, rgba(12,12,16,0) 68%);
}
.hb-hero-inner{ position: relative; z-index: 2; margin: 0 auto; padding: 0 var(--cein-inset, 40px); width: 100%; }
.hb-hero h1{ color: #fff; font-size: clamp(34px, 4vw, 52px); line-height: 1.08; font-weight: 600; margin: 0 0 18px; max-width: 15ch; }
.hb-hero-text{ color: rgba(255,255,255,.88); font-size: 15px; line-height: 24px; max-width: 46ch; margin: 0 0 26px; }
.hb-hero-cta{
	display: inline-flex; align-items: center; gap: 9px;
	border: 1px solid rgba(255,255,255,.75); color: #fff !important; text-decoration: none !important;
	font-size: 14px; padding: 13px 26px; border-radius: 999px; transition: background .16s ease;
}
.hb-hero-cta:hover{ background: rgba(255,255,255,.14); }
.hb-hero-rating{ display: flex; align-items: center; gap: 8px; margin: 20px 0 0; color: #fff; font-size: 13px; }
.hb-hero-rating a{ color: #fff !important; text-decoration: underline; }
.hb-stars{ color: #f5a623; letter-spacing: 1px; }

/* --- Franja de confianza --- */
.hb-trust{ background: #fff; border-bottom: 1px solid #ececec; }
.hb-trust-inner{
	margin: 0 auto; padding: 22px var(--cein-inset, 40px);
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
}
.hb-trust-item{ display: flex; gap: 12px; align-items: flex-start; }
.hb-trust-ico{ color: #0a0a0a; font-size: 15px; line-height: 20px; }
.hb-trust-title{ font-size: 14px; font-weight: 600; margin: 0 0 2px; color: #0a0a0a; }
.hb-trust-text{ font-size: 13px; color: #6c6c6c; margin: 0; }

/* --- Parrilla --- */
.hb-home-grid{ background: #fff; padding: 40px 0 56px; }
.hb-home-grid-inner{ margin: 0 auto; padding: 0 var(--cein-inset, 40px); }
.hb-chips{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.hb-chip{
	font-size: 13px; color: #1a1a1a !important; text-decoration: none !important;
	border: 1px solid #e2e2e2; border-radius: 999px; padding: 8px 15px; white-space: nowrap;
}
.hb-chip:hover{ border-color: #0a0a0a; }
.hb-grid{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px 18px; }
.hb-card{ display: flex; flex-direction: column; }
.hb-card-media{ position: relative; border-radius: 4px; overflow: hidden; background: #f4f4f4; }
.hb-card-media img{ width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
/* Favorito discreto: aparece al pasar el ratón y siempre visible en táctil. */
.hb-card-media .hb-fav-btn{ position: absolute; top: 10px; right: 10px; opacity: 0; transition: opacity .15s ease; }
.hb-card:hover .hb-fav-btn{ opacity: 1; }
.hb-card-body{ display: block; text-decoration: none !important; padding-top: 10px; }
.hb-card-name{ font-size: 14px; font-weight: 600; color: #0a0a0a; margin: 0; line-height: 19px; }
.hb-card-brand{ font-size: 12.5px; color: #8a8a8a; margin: 2px 0 0; }
.hb-card-tags{ display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0 0; }
.hb-card-tags span{ font-size: 10.5px; color: #5c5c5c; border: 1px solid #e4e4e4; border-radius: 999px; padding: 3px 8px; }

.hb-grid-more{ text-align: center; margin-top: 38px; }
.hb-grid-count{ font-size: 12.5px; color: #8a8a8a; margin: 0 0 10px; }
.hb-grid-bar{ width: 190px; height: 2px; background: #e8e8e8; margin: 0 auto 18px; border-radius: 2px; overflow: hidden; }
.hb-grid-bar span{ display: block; height: 100%; background: #0a0a0a; transition: width .3s ease; }
.hb-grid-more-btn{
	background: none; border: none; font-size: 14px; color: #0a0a0a; cursor: pointer;
	text-decoration: underline; padding: 6px 10px;
}
.hb-grid-more-btn[disabled]{ opacity: .45; cursor: default; }

/* --- Reseñas --- */
/* Sin fondo: el gris cálido #faf9f7 que tenía no está en el diseño y, al ser
   ahora una plantilla compartida, se arrastraba a home, ficha y categorías. */
.hb-reviews{ background: transparent; padding: 56px 0; }
/* En categorías y tienda el bloque cae justo debajo de la parrilla y del botón
   "Mostrar más", que quedaban pegados; se le da aire por arriba. */
.woocommerce-shop .hb-reviews,
.tax-product_cat .hb-reviews{ padding-top: 88px; }
.hb-reviews-inner{ margin: 0 auto; padding: 0 var(--cein-inset, 40px); display: grid; grid-template-columns: 320px 1fr; gap: 44px; align-items: start; }
.hb-reviews-score{ display: flex; align-items: center; gap: 7px; font-size: 13px; color: #3d3d3d; margin: 0 0 14px; }
.hb-reviews-score a{ color: #3d3d3d !important; text-decoration: underline; }
.hb-reviews-lead h2{ font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; font-weight: 600; margin: 0 0 12px; }
.hb-reviews-sub{ font-size: 13.5px; color: #6c6c6c; margin: 0; }
.hb-reviews-track{ display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 18px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.hb-review{ background: #fff; border: 1px solid #ededed; border-radius: 12px; padding: 22px; scroll-snap-align: start; }
.hb-review h3{ font-size: 16px; font-weight: 600; margin: 10px 0 8px; }
.hb-review-text{ font-size: 13px; line-height: 19px; color: #5c5c5c; margin: 0 0 14px; }
.hb-review-author{ font-size: 13px; font-weight: 600; color: #0a0a0a; margin: 0; }

/* --- Mantenimiento --- */
.hb-care{ background: #fff; padding: 8px 0 64px; }
.hb-care-inner{ margin: 0 auto; padding: 0 var(--cein-inset, 40px); display: grid; grid-template-columns: 420px 1fr; gap: 32px; align-items: stretch; }
.hb-care-cover{ position: relative; border-radius: 12px; overflow: hidden; display: block; min-height: 420px; text-decoration: none !important; }
.hb-care-cover img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hb-care-cover::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.55) 100%); }
.hb-care-cover-text{ position: relative; z-index: 2; display: block; padding: 28px; }
.hb-care-eyebrow{ display: block; color: rgba(255,255,255,.85); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 6px; }
.hb-care-title{ display: block; color: #fff; font-size: 30px; font-weight: 600; }
.hb-care-btn{
	position: absolute; left: 28px; bottom: 28px; z-index: 2;
	display: inline-flex; align-items: center; gap: 8px;
	border: 1px solid rgba(255,255,255,.7); color: #fff; font-size: 13px;
	padding: 10px 18px; border-radius: 999px;
}
.hb-care-track{ display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 18px; overflow-x: auto; padding-bottom: 8px; }

@media (max-width: 1200px){
	.hb-grid{ grid-template-columns: repeat(3, 1fr); }
	.hb-reviews-inner, .hb-care-inner{ grid-template-columns: 1fr; }
	.hb-care-cover{ min-height: 300px; }
}
@media (max-width: 900px){
	.hb-hero{ min-height: 480px; }
	.hb-trust-inner{ grid-template-columns: 1fr; gap: 16px; }
	/* Dos columnas en móvil para aprovechar el scroll (anotación del Figma). */
	.hb-grid{ grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
	.hb-card-media .hb-fav-btn{ opacity: 1; }
}

/* =========================================================================
   REDISEÑO CRO 2026 · Home (ajustes tras revisión)
   ========================================================================= */

/* --- Hero como carrusel de dos slides --- */
.hb-slide{ position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; visibility: hidden; transition: opacity .4s ease; }
.hb-slide.is-active{ opacity: 1; visibility: visible; }
.hb-hero{ position: relative; }
.hb-hero-dots{ position: absolute; left: 0; right: 0; bottom: 18px; z-index: 4; display: flex; justify-content: center; gap: 8px; }
.hb-hero-dots button{
	width: 8px; height: 8px; border-radius: 50%; padding: 0; cursor: pointer;
	background: rgba(255,255,255,.45); border: none;
}
.hb-hero-dots button.is-active{ background: #fff; }
/* Bloque "¿Dónde? / ¿Cuándo?" del segundo slide. */
.hb-hero-meta{ display: flex; gap: 46px; margin-top: 26px; }
.hb-hero-meta-t{ color: #fff; font-size: 13.5px; font-weight: 600; margin: 0 0 4px; }
.hb-hero-meta-v{ color: rgba(255,255,255,.8); font-size: 12.5px; line-height: 18px; margin: 0; max-width: 28ch; }

/* --- Categorías: mismo ancho de caja que el resto de la página --- */
/* .cein-favs va a todo el ancho; el inset lo ponen head y trackwrap. */
.cein-favs-head{ padding-left: 0; padding-right: 0; }
.cein-favs-trackwrap{ margin-left: 0; margin-right: 0; }

/* --- Fila de categorías (enlaces de texto, no pastillas) --- */
.hb-catlinks{ display: flex; flex-wrap: wrap; gap: 8px 26px; padding-bottom: 18px; border-bottom: 1px solid #ededed; }
.hb-catlinks a{ font-size: 13.5px; color: #1a1a1a !important; text-decoration: none !important; white-space: nowrap; }
.hb-catlinks a:hover{ text-decoration: underline !important; }

/* --- Barra de filtros --- */
.hb-filterbar{ display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 18px 0 26px; }
.hb-filterbar-label{ font-size: 13px; color: #6c6c6c; margin-right: 4px; }
.hb-filter{ position: relative; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #dcdcdc; border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.hb-filter.is-set{ border-color: #0a0a0a; background: #0a0a0a; color: #fff; }
.hb-filter-text{ font-size: 13px; pointer-events: none; }
/* El <select> nativo cubre la píldora: accesible y con el desplegable del
   sistema, que en móvil es mucho mejor que uno hecho a mano. */
.hb-filter select{ position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; }
.hb-filterbar-right{ margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hb-filter-clear{ background: none; border: none; font-size: 12.5px; color: #6c6c6c; text-decoration: underline; cursor: pointer; }
.hb-view-label{ font-size: 13px; color: #6c6c6c; margin-right: 2px; }
.hb-view{ background: none; border: none; padding: 5px; color: #b5b5b5; cursor: pointer; line-height: 0; }
.hb-view.is-active{ color: #0a0a0a; }
.hb-grid.is-wide{ grid-template-columns: repeat(3, 1fr); }
.hb-grid-empty{ grid-column: 1 / -1; text-align: center; color: #8a8a8a; font-size: 14px; padding: 40px 0; }
.hb-grid[aria-busy="true"]{ opacity: .45; transition: opacity .15s ease; }

/* --- Carruseles con flechas (reseñas y mantenimiento) --- */
.hb-carousel{ position: relative; }
.hb-carousel-nav{
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 38px; height: 38px; border-radius: 50%; border: 1px solid #e2e2e2;
	background: #fff; color: #0a0a0a; cursor: pointer; display: flex; align-items: center; justify-content: center;
	box-shadow: 0 6px 18px -10px rgba(0,0,0,.4);
	/* Sin esto, el botón hereda el padding de los "button" de Storefront
	   (11.2px 22.4px). Con box-sizing:border-box y 38px de ancho, los 44.8px de
	   padding horizontal dejan la caja de contenido a 0 y el chevron —que es un
	   flex item— se encoge hasta 0px de ancho: se veía el círculo vacío. */
	padding: 0;
}
.hb-carousel-nav svg{ flex: 0 0 auto; }
.hb-carousel-nav[disabled]{ opacity: 0; pointer-events: none; }
.hb-carousel-nav.prev{ left: -14px; }
.hb-carousel-nav.next{ right: -14px; }
.hb-reviews-track, .hb-care-track{ scroll-behavior: smooth; scrollbar-width: none; }
.hb-reviews-track::-webkit-scrollbar, .hb-care-track::-webkit-scrollbar{ display: none; }

@media (max-width: 900px){
	.hb-hero-meta{ flex-direction: column; gap: 14px; margin-top: 18px; }
	.hb-catlinks{ gap: 8px 18px; overflow-x: auto; flex-wrap: nowrap; }
	.hb-filterbar{ gap: 8px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 18px; }
	.hb-filterbar-right{ margin-left: 12px; }
	.hb-grid.is-wide{ grid-template-columns: repeat(2, 1fr); }
}

/* Categorías: las tarjetas eran de ancho fijo (282px), así que la última
   quedaba cortada contra el borde y la sección parecía más ancha que el resto.
   Ahora entran cinco EXACTAS en la misma caja de contenido que la parrilla. */
.cein-favs-head{ padding-left: var(--cein-inset, 32px); padding-right: var(--cein-inset, 32px); }
.cein-favs-trackwrap{ margin: 0; padding: 0 var(--cein-inset, 32px); overflow: hidden; }
.cein-favs-card{ flex: 0 0 calc((100% - 4 * 12px) / 5); }
.cein-favs-card img{ width: 100%; height: auto; aspect-ratio: 282 / 420; }

@media (max-width: 1200px){
	.cein-favs-card{ flex: 0 0 calc((100% - 2 * 12px) / 3); }
}
@media (max-width: 900px){
	.cein-favs-card{ flex: 0 0 calc((100% - 12px) / 2); }
}

/* Fotos que adjunta quien escribe la reseña (como en Google). */
.hb-review-photos{ display: flex; gap: 6px; margin: 0 0 14px; flex-wrap: wrap; }
.hb-review-photos img{ width: 52px; height: 52px; object-fit: cover; border-radius: 6px; display: block; }

/* Las pistas de carrusel viven en una columna de rejilla: sin min-width:0 el
   contenido impone su tamaño mínimo y desborda la página a la derecha. */
.hb-reviews-track, .hb-care-track{ min-width: 0; }
.hb-reviews-inner, .hb-care-inner{ overflow: hidden; }

/* Una columna "1fr" no baja de su contenido mínimo: con 8 reseñas la pista
   medía 2366px y el carrusel no podía desplazarse. minmax(0,1fr) sí permite
   que la columna se encoja y que el scroll horizontal funcione. */
.hb-reviews-inner{ grid-template-columns: 320px minmax(0, 1fr); }
.hb-care-inner{ grid-template-columns: 420px minmax(0, 1fr); }
@media (max-width: 1200px){
	.hb-reviews-inner, .hb-care-inner{ grid-template-columns: minmax(0, 1fr); }
}

/* --- Ficha de producto (rediseño CRO) --- */
.v4-pdp-brand{ font-size: 13px; color: #8a8a8a; margin: 0 0 4px; }
.v4-pdp-title{ margin-top: 0; }
/* El CTA es la acción más importante de la ficha: ancho completo y sólido. */
.hb-product-buy-row .hb-open-consulta{
	flex: 1 1 auto; justify-content: center; background: #0a0a0a; color: #fff;
	border: none; border-radius: 999px; padding: 15px 24px; font-size: 14.5px; gap: 9px;
}
.hb-product-buy-row .hb-open-consulta:hover{ background: #262626; }
.hb-pdp-help{
	display: flex; align-items: center; gap: 12px; margin-top: 18px;
	border: 1px solid #ececec; border-radius: 12px; padding: 12px 16px;
	text-decoration: none !important; color: inherit;
}
.hb-pdp-help:hover{ border-color: #d5d5d5; }
.hb-pdp-help-avatar{ flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; }
.hb-pdp-help-avatar img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-pdp-help-title{ display: block; font-size: 14px; font-weight: 600; color: #0a0a0a; }
.hb-pdp-help-link{ display: block; font-size: 13px; color: #6c6c6c; margin-top: 2px; }

/* --- Ficha: bloques de cuidado, reseñas y SEO/FAQ --- */
.hb-pdp-care{ padding: 8px 0 48px; }
.hb-pdp-care-inner{ padding: 0 var(--cein-inset, 40px); display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 36px; align-items: start; }
.hb-pdp-care-lead h2{ font-size: 24px; font-weight: 600; margin: 0 0 10px; }
.hb-pdp-care-lead p{ font-size: 13.5px; color: #6c6c6c; margin: 0 0 16px; }
.hb-pdp-care-btn{
	display: inline-flex; align-items: center; gap: 8px;
	border: 1px solid #dcdcdc; border-radius: 999px; padding: 10px 18px;
	font-size: 13px; color: #0a0a0a !important; text-decoration: none !important;
}
.hb-pdp-care-btn:hover{ border-color: #0a0a0a; }

.hb-pdp-seo{ padding: 52px 0 60px; }
.hb-pdp-seo-inner{ padding: 0 var(--cein-inset, 40px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.hb-pdp-seo-text h2{ font-size: 23px; font-weight: 600; margin: 0 0 14px; }
.hb-pdp-seo-text p{ font-size: 13.5px; line-height: 21px; color: #5c5c5c; margin: 0 0 12px; }
.hb-pdp-faq-label{ font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #8a8a8a; font-weight: 600; margin: 0 0 10px; }

@media (max-width: 1000px){
	.hb-pdp-care-inner, .hb-pdp-seo-inner{ grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

/* La ficha de producto NO usa el ancho completo del sitio: su contenido va en
   un contenedor de 1200px centrado (.v4-container dentro del wrapper de
   Storefront). Los bloques que añadí al pie colgaban fuera de él y salían a
   todo lo ancho, así que se les da la misma caja. */
.single-product .hb-pdp-care-inner,
.single-product .hb-reviews-inner,
.single-product .hb-pdp-seo-inner{
	max-width: 1200px; margin: 0 auto; padding-left: 32px; padding-right: 32px;
}
/* En la ficha las reseñas van a lo ancho, sin la columna lateral de la home:
   con 1136px útiles, reservar 320 para el titular deja las tarjetas muy justas. */
.single-product .hb-reviews-inner{ grid-template-columns: minmax(0, 1fr); gap: 26px; }
.single-product .hb-reviews{ background: #faf9f7; }
/* El contenedor de reseñas es una rejilla y, sin ancho explícito, se ajustaba a
   su contenido (937px) en vez de llenar la sección y centrarse. */
.single-product .hb-reviews-inner{ width: 100%; box-sizing: border-box; }
/* La sección de reseñas heredaba display:grid, así que su contenedor actuaba
   como celda: se ajustaba al contenido y no se centraba. Como bloque, el
   max-width y el margin auto ya hacen su trabajo. */
.hb-reviews, .hb-pdp-care, .hb-pdp-seo{ display: block; }

/* Respiración entre bloques de la ficha: iban demasiado pegados y el ojo no
   distinguía dónde acaba uno y empieza el siguiente. */
.single-product .v4-pdp-related{ margin-top: 64px; }
.single-product .hb-pdp-care{ padding: 76px 0 0; }
.single-product .hb-ticker{ margin: 76px 0 0; }
.single-product .hb-reviews{ padding: 76px 0; margin-top: 0; }
.single-product .hb-pdp-seo{ padding: 76px 0 88px; }
/* Y algo más de aire dentro de cada bloque. */
.single-product .hb-pdp-care-lead h2,
.single-product .hb-reviews-lead h2,
.single-product .hb-pdp-seo-text h2{ margin-bottom: 16px; }
.single-product .hb-reviews-lead{ margin-bottom: 26px; }
.single-product .hb-pdp-care-inner{ gap: 40px; }

@media (max-width: 900px){
	.single-product .hb-pdp-care{ padding-top: 52px; }
	.single-product .hb-reviews{ padding: 52px 0; }
	.single-product .hb-pdp-seo{ padding: 52px 0 64px; }
	.single-product .hb-ticker{ margin-top: 52px; }
}

/* Aire entre el hero y la fila de categorías: iban pegados. */
.hb-shop-filters{ margin-top: 56px; }
.hb-shop-filters .hb-catlinks{ padding-bottom: 20px; }
.hb-shop-filters .hb-filterbar{ padding-top: 20px; }
.hb-shop-filters .hb-catlinks a.is-current{ font-weight: 600; text-decoration: underline !important; }
@media (max-width: 900px){ .hb-shop-filters{ margin-top: 32px; } }

/* Storefront aplica a las fotos del catálogo un margin-bottom de 1em y centra
   el texto del <li>. En esta tarjeta ambas cosas sobran: el margen dejaba
   asomar el fondo gris de la caja bajo la foto, y el nombre debe ir alineado a
   la izquierda como el resto de la tarjeta. */
.hb-card-media img{ margin: 0 !important; }
.hb-card, .hb-card *{ text-align: left; }
.woocommerce ul.products li.product .hb-card-name,
.woocommerce ul.products li.product .hb-card-brand,
.woocommerce ul.products li.product .hb-card-tags{ text-align: left; }
/* La caja se ajusta exactamente a la foto. */
.hb-card-media{ line-height: 0; font-size: 0; }
.hb-card-body{ line-height: 1.4; font-size: 14px; }

/* --- Tienda: "Así funciona tu cita" y bloque SEO --- */
.hb-steps{ margin: 72px 0 0; }
.hb-steps-title{ font-size: 22px; font-weight: 600; margin: 0 0 22px; }
.hb-steps-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hb-step{ border: 1px solid #ececec; border-radius: 12px; padding: 22px; }
.hb-step-n{
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 50%; background: #0a0a0a; color: #fff;
	font-size: 12px; font-weight: 600; margin-bottom: 12px;
}
.hb-step-title{ font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.hb-step-text{ font-size: 13px; line-height: 19px; color: #6c6c6c; margin: 0; }
.hb-shop-seo{ padding-top: 64px; }
.hb-steps + .hb-ticker{ margin-top: 64px; }
@media (max-width: 900px){
	.hb-steps-grid{ grid-template-columns: minmax(0, 1fr); }
	.hb-steps{ margin-top: 48px; }
}

/* --- Formulario de cita --- */
.hb-form-row{ margin-bottom: 16px; }
.hb-form-row--2{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hb-form-row label{ display: block; font-size: 13px; color: #3d3d3d; }
.hb-form-row input[type="text"], .hb-form-row input[type="tel"],
.hb-form-row input[type="email"], .hb-form-row input[type="date"],
.hb-form-row select, .hb-form-row textarea{
	width: 100%; margin-top: 6px; padding: 12px 14px; font-size: 14px;
	border: 1px solid #dcdcdc; border-radius: 10px; background: #fff; box-sizing: border-box;
}
.hb-form-row textarea{ min-height: 96px; resize: vertical; }
.hb-form-row input:focus, .hb-form-row select:focus, .hb-form-row textarea:focus{
	outline: none; border-color: #0a0a0a;
}
/* El consentimiento va bien visible: es requisito legal, no letra pequeña. */
.hb-form-legal{ margin: 18px 0 14px; font-size: 12.5px; color: #5c5c5c; line-height: 18px; }
.hb-form-legal .wpcf7-list-item{ margin: 0; }
.hb-form-legal input[type="checkbox"]{ margin-right: 8px; }
.hb-form-legal a{ color: #0a0a0a; text-decoration: underline; }
.hb-form-note{ font-size: 12px; color: #8a8a8a; margin: 12px 0 0; }
.wpcf7 input[type="submit"]{
	background: #0a0a0a; color: #fff; border: none; border-radius: 999px;
	padding: 14px 28px; font-size: 14.5px; cursor: pointer; width: 100%;
}
.wpcf7 input[type="submit"]:hover{ background: #262626; }
@media (max-width: 640px){ .hb-form-row--2{ grid-template-columns: minmax(0, 1fr); } }

/* --- Recomendador: resultados en la propia pantalla --- */
.hb-sim-result--final{ text-align: left; }
.hb-sim-result--final h2, .hb-sim-result--final > p{ text-align: center; }
.hb-sim-grid{
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px; margin: 26px 0 8px;
}
.hb-sim-grid[aria-busy="true"]{ opacity: .6; }
.hb-sim-loading{ grid-column: 1 / -1; text-align: center; color: #8a8a8a; font-size: 14px; padding: 28px 0; }
.hb-sim-actions{
	display: flex; align-items: center; justify-content: center; gap: 18px;
	flex-wrap: wrap; margin-top: 22px;
}
.hb-sim-actions .hb-sim-cta{ border: none; cursor: pointer; }
.hb-sim-alt{ font-size: 13.5px; color: #5c5c5c !important; text-decoration: underline; }
/* El hover de las opciones tenía muy mala legibilidad (anotación del cliente). */
.hb-sim-opt:hover, .hb-sim-opt:focus-visible{
	background: #0a0a0a !important; color: #fff !important; border-color: #0a0a0a !important;
}
.hb-sim-opt:hover *, .hb-sim-opt:focus-visible *{ color: #fff !important; }
@media (max-width: 1000px){ .hb-sim-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Fila de categorías: siempre en UNA línea, con arrastre --- */
.hb-catlinks{
	flex-wrap: nowrap !important;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	cursor: grab;
	scroll-behavior: smooth;
}
.hb-catlinks::-webkit-scrollbar{ display: none; }
.hb-catlinks.is-dragging{ cursor: grabbing; scroll-behavior: auto; }
.hb-catlinks.is-dragging a{ pointer-events: none; } /* al arrastrar no se navega */
.hb-catlinks a{ flex: 0 0 auto; }

/* --- Barra inferior fija (solo móvil) --- */
.hb-mobile-bar{ display: none; }
@media (max-width: 900px){
	.hb-mobile-bar{
		display: flex; align-items: center; gap: 10px;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
		background: #fff; border-top: 1px solid #e8e8e8;
		box-shadow: 0 -8px 24px -18px rgba(0,0,0,.5);
	}
	.hb-mobile-bar-call{
		display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
		flex: 0 0 auto; padding: 6px 12px; color: #0a0a0a !important;
		text-decoration: none !important; font-size: 11px;
	}
	.hb-mobile-bar-cta{
		flex: 1 1 auto; text-align: center; background: #0a0a0a;
		color: #fff !important; text-decoration: none !important;
		font-size: 15px; font-weight: 500; padding: 14px 18px; border-radius: 999px;
	}
	/* Que la barra no tape el final de la página. */
	body{ padding-bottom: 76px; }
}

/* --- WhatsApp flotante --- */
.hb-wa-float{
	position: fixed; right: 20px; bottom: 20px; z-index: 89;
	width: 52px; height: 52px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: #25d366; color: #fff !important;
	box-shadow: 0 10px 26px -10px rgba(0,0,0,.45);
	transition: transform .15s ease;
}
.hb-wa-float:hover{ transform: scale(1.06); }
@media (max-width: 900px){
	/* Por encima de la barra fija, no debajo. */
	.hb-wa-float{ bottom: 88px; right: 16px; width: 48px; height: 48px; }
}

/* Al quitar la columna lateral de filtros, la rejilla de .site-main seguía
   reservándole 256px: el contenido quedaba descentrado, con mucho más margen a
   la izquierda que a la derecha. Ahora ocupa una sola columna. */
/* Se aplica por AUSENCIA de barra lateral, no enumerando plantillas una a una.
   La lista anterior (archivo de producto, categoría, marca, color) había que
   ampliarla cada vez que nacía un archivo nuevo, y el fallo reaparecía: pasó con
   marcas y otra vez con las landings de color. Con ":has" la regla se mantiene
   sola — si algún día una plantilla vuelve a tener "#secondary", conserva su
   rejilla de dos columnas sin tocar nada. */
.content-area:not(:has(#secondary)) .site-main{
	/* Otra regla del tema fija la rejilla de dos columnas con más peso: de ahí
	   el !important. */
	display: block !important;
	grid-template-columns: none !important;
}

/* La banda de "Reservar cita personalizada" va a todo el ancho de la pantalla,
   no encajada en la caja de contenido: es una franja, no un bloque más. */
.hb-ticker{
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
}

/* --- Confirmación del formulario --- */
.hb-form-ok{ text-align: center; padding: 32px 24px; border: 1px solid #e6e6e6; border-radius: 14px; background: #fff; }
.hb-form-ok-icon{
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 50%; background: #0a0a0a; color: #fff;
	font-size: 22px; margin-bottom: 14px;
}
.hb-form-ok h3{ font-size: 20px; font-weight: 600; margin: 0 0 8px; }
.hb-form-ok p{ font-size: 14px; color: #5c5c5c; margin: 0 auto 6px; max-width: 40ch; }
.hb-form-ok-alt{ margin-top: 16px !important; font-weight: 600; color: #0a0a0a !important; }
.hb-form-ok-actions{ display: flex; justify-content: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.hb-form-ok-wa, .hb-form-ok-tel{
	display: inline-flex; align-items: center; padding: 11px 22px; border-radius: 999px;
	font-size: 14px; text-decoration: none !important;
}
.hb-form-ok-wa{ background: #25d366; color: #fff !important; }
.hb-form-ok-tel{ border: 1px solid #dcdcdc; color: #0a0a0a !important; }

/* Tarjeta "Próximamente" del slider de cuidado: hueco neutro con la misma caja
   que una tarjeta real (ratio 3/4), para que la fila no se descuadre mientras
   faltan productos por dar de alta. */
.hb-card-soon .hb-card-media{
	aspect-ratio: 3 / 4;
	display: grid;
	place-items: center;
	border: 1px dashed #e2e2e2;
	background: #fafafa;
}
.hb-card-soon-label{
	font-size: 13px;
	line-height: 1;
	letter-spacing: .01em;
	color: #a1a1a1;
}
/* El carrusel de relacionados respira igual que el resto de bloques y deja
   sitio a las flechas, que van fuera del track. */
.hb-related-products{ margin-top: 28px; }

/* --- Página de marca: logo a la izquierda, explicación a la derecha --- */
.hb-brand-head{
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 48px;
	align-items: center;
	padding: 8px 0 40px;
}
.hb-brand-logo{
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 12px; padding: 32px 24px;
	background: #f5f5f5; border-radius: 20px; min-height: 180px;
}
.hb-brand-logo img{ max-width: 100%; max-height: 90px; height: auto; display: block; }
.hb-brand-name{ font-size: 22px; font-weight: 600; text-align: center; line-height: 1.2; }
.hb-brand-count{ margin: 0; font-size: 13px; color: #6c6c6c; }
.hb-brand-text h1{ margin: 0 0 14px; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.15; font-weight: 600; }
.hb-brand-text p{ margin: 0 0 12px; font-size: 15.5px; line-height: 1.65; color: #404040; max-width: 68ch; }
.hb-brand-text p:last-child{ margin-bottom: 0; }
@media (max-width: 860px){
	.hb-brand-head{ grid-template-columns: 1fr; gap: 24px; padding-bottom: 28px; }
	.hb-brand-logo{ min-height: 0; padding: 24px; }
}

/* Índice de marcas ([hb_marcas], página /marcas/). Rejilla de tarjetas con el
   logo centrado: los logos vienen con proporciones muy dispares, así que la caja
   es fija y la imagen se ajusta dentro con "contain" para que la fila no baile. */
.hb-marcas-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 18px;
	margin: 32px 0 0;
}
.hb-marca-card{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
	padding: 26px 18px 20px;
	border: 1px solid #eae7e4;
	border-radius: 16px;
	background: #fff;
	text-decoration: none !important;
	transition: border-color .15s, transform .12s, box-shadow .15s;
}
.hb-marca-card:hover{
	border-color: #d3ccc5;
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(0,0,0,.07);
}
.hb-marca-logo{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 62px;
	width: 100%;
	margin-bottom: 12px;
}
.hb-marca-logo img{ max-height: 100%; max-width: 150px; width: auto; height: auto; object-fit: contain; }
/* Sin logo cargado se muestra la inicial, que es mejor que un hueco vacío. */
.hb-marca-ini{
	display: flex; align-items: center; justify-content: center;
	width: 54px; height: 54px; border-radius: 50%;
	background: #f4f2f0; color: #8a8a8a; font-size: 22px; font-weight: 700;
}
.hb-marca-n{ font-size: 15.5px; font-weight: 600; color: #0a0a0a; line-height: 1.25; }
.hb-marca-c{ font-size: 12.5px; color: #8a8a8a; }
@media (max-width: 560px){
	.hb-marcas-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.hb-marca-card{ padding: 20px 12px 16px; }
}
/* El contenedor de la descripción del archivo centra su texto; la cabecera de
   marca es un bloque propio y va alineada a la izquierda como el resto del sitio. */
.hb-brand-head, .hb-brand-text{ text-align: left; }
/* El tema ya pintaba el logo suelto y centrado en la cabecera del archivo; ahora
   vive dentro de .hb-brand-head, así que se oculta esa salida duplicada. */
.tax-product_brand .woocommerce-products-header img{ display: none; }
/* La fila de categorías de la home nunca parte en dos líneas: se arrastra en
   horizontal (js/hb-drag-scroll.js). Antes envolvía y crecía hacia abajo. */
.hb-catlinks{ flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
.hb-catlinks::-webkit-scrollbar{ display: none; }

/* =========================================================================
   BLOG · artículo a dos columnas: texto y barra derecha (contacto + productos)
   La cabecera y la foto siguen centradas a 880; solo el CUERPO se ensancha para
   dejar sitio a la columna, si no el texto se quedaba en un canal muy estrecho.
   ========================================================================= */
.hb-blog-single .hb-blog-single-layout--cols{
	max-width: 1240px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 56px;
	align-items: start;
}
@media (min-width: 1600px){
	.hb-blog-single .hb-blog-single-layout--cols{ max-width: 1360px; }
}
.hb-blog-side{
	position: sticky;
	/* La cabecera también es sticky (36 del aviso + 101 del menú = 137): con
	   top:24 la columna se metía debajo al hacer scroll. */
	top: 161px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.hb-blog-side-cta{
	background: #f6f5f4;
	border-radius: 16px;
	padding: 24px;
}
.hb-blog-side-cta h3{
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	color: #0a0a0a;
}
.hb-blog-side-cta p{
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.55;
	color: #5a5a5a;
}
.hb-blog-side-btn{
	display: block;
	text-align: center;
	background: #0a0a0a;
	color: #fff !important;
	border-radius: 999px;
	padding: 14px 18px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none !important;
	transition: background .15s;
}
.hb-blog-side-btn:hover{ background: #b3562e; }
.hb-blog-side-note{ margin: 10px 0 0 !important; font-size: 12.5px !important; color: #8a8a8a !important; text-align: center; }
.hb-blog-side-prod{
	border: 1px solid #eae7e4;
	border-radius: 16px;
	padding: 22px 20px;
}
.hb-blog-side-prod h3{
	margin: 0 0 14px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 700;
	color: #8a8a8a;
}
.hb-blog-side-card{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid #f2efec;
	text-decoration: none !important;
}
.hb-blog-side-card:last-child{ border-bottom: 0; padding-bottom: 0; }
.hb-blog-side-card:first-of-type{ padding-top: 0; }
.hb-blog-side-card-img{
	flex: none;
	width: 56px;
	height: 68px;
	border-radius: 8px;
	background-size: cover;
	background-position: center top;
	background-color: #f4f2f0;
}
.hb-blog-side-card-txt{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hb-blog-side-card-n{ font-size: 14px; font-weight: 600; color: #0a0a0a; line-height: 1.25; }
.hb-blog-side-card:hover .hb-blog-side-card-n{ color: #b3562e; }
.hb-blog-side-card-p{ font-size: 13px; color: #6a6a6a; }
.hb-blog-side-card-p del{ color: #b0aca8; margin-right: 4px; }

/* Caja de autor bajo el artículo */
.hb-author{
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 22px;
	align-items: start;
	margin: 44px 0 0;
	padding: 26px;
	background: #faf9f8;
	border-radius: 16px;
}
.hb-author-img{ width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: #efedeb; }
.hb-author-img img{ width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.hb-author-k{ margin: 0 0 2px !important; font-size: 12px !important; text-transform: uppercase; letter-spacing: .06em; color: #8a8a8a !important; font-weight: 700; }
.hb-author-n{ margin: 0 0 2px !important; font-size: 19px !important; font-weight: 700; color: #0a0a0a; }
.hb-author-r{ margin: 0 0 10px !important; font-size: 13.5px !important; color: #b3562e !important; font-weight: 600; }
.hb-author-b{ margin: 0 !important; font-size: 14.5px !important; line-height: 1.6 !important; color: #4a4a4a !important; }
.hb-author-w{ display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: #0a0a0a; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1100px){
	/* La columna baja debajo del texto: a menos de ~1100 se quedaba en un hilo. */
	.hb-blog-single .hb-blog-single-layout--cols{
		grid-template-columns: 1fr;
		max-width: 880px;
		gap: 40px;
	}
	.hb-blog-side{ position: static; }
	.hb-blog-side-prod{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 20px; }
	.hb-blog-side-prod h3{ grid-column: 1 / -1; }
}
@media (max-width: 560px){
	.hb-author{ grid-template-columns: 1fr; gap: 14px; padding: 22px 20px; }
	.hb-blog-side-prod{ grid-template-columns: 1fr; }
}

/* La foto destacada pasó a vivir DENTRO de la columna de texto (ver single.php):
   ahí no debe conservar el ancho propio ni el centrado que tenía cuando iba a
   sangre entre la cabecera y el cuerpo. */
.hb-blog-single .hb-blog-single-layout--cols .hb-blog-single-media{
	max-width: none;
	width: 100%;
	margin: 26px 0 34px;
}
.hb-blog-single .hb-blog-single-layout--cols .hb-blog-single-img{
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--hb-img-radius);
}
/* La miga y el título ya no necesitan el margen superior que compensaba la
   separación con la foto a sangre. */
.hb-blog-single .hb-blog-single-layout--cols .woocommerce-breadcrumb{ margin-top: 0; }

/* Portada de las tarjetas del blog: llevaba las esquinas de abajo rectas
   (8px 8px 0 0) porque la foto va pegada al cuerpo de la tarjeta. Se iguala al
   radio común por arriba y la tarjeta recorta el resto. */
.hb-blog-card-img{ border-radius: var(--hb-img-radius) var(--hb-img-radius) 0 0 !important; }
.hb-blog-card{ border-radius: var(--hb-img-radius); overflow: hidden; }
/* Fotos de las tarjetas del submenú: viven en la cabecera, fuera de "main", así
   que no las alcanzaba el radio común y se quedaban con los 3px de Storefront. */
.cein-sub-promo-media img{ border-radius: var(--hb-img-radius); }
/* Cierre del radio común: contenedores de imagen que no caen en el bloque de
   arriba (la HOME usa sus propias clases y no carga style.css). Las imágenes que
   van A SANGRE —el hero de portada ocupa todo el ancho— se quedan a cero: un
   radio contra el borde del navegador no se ve como estilo, se ve como un fallo. */
.hb-card-media,
.hb-card-media img,
.cein-favs-imgwrap,
.cein-favs-card img,
.hb-care-cover,
.hb-care-cover img{
	border-radius: var(--hb-img-radius);
}
.hb-card-media, .cein-favs-imgwrap, .hb-care-cover{ overflow: hidden; }
.hb-hero-media, .hb-hero-media img{ border-radius: 0; }
/* Rótulo del submenú de Marcas: va una sola vez encima de las cuatro columnas,
   no una por columna (ahí se repetía y descuadraba las filas).
   El contenedor del panel es flex EN FILA —columnas a la izquierda, tarjeta del
   recomendador a la derecha—, así que el rótulo se colocaba al lado de las columnas
   y las empujaba 205px hacia dentro. En el único panel que lleva rótulo se apila en
   vertical: título arriba, columnas debajo a todo el ancho. */
/* gap:0 al apilar: el contenedor lleva gap:48px pensado para separar las columnas
   de la tarjeta EN HORIZONTAL, y al cambiar a columna ese mismo hueco se metía
   entre el rótulo y las marcas —48px más los 14 del margen— cuando en el resto
   de submenús el rótulo va pegado a su lista. */
.cein-sub-inner:has(> .cein-sub-heading){ flex-direction: column; align-items: stretch; gap: 0; }
.cein-sub-heading{
	margin: 0 0 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #8a8a8a;
}

/* Enlace de guía dentro de una columna del submenú: no es una categoría, así que
   se separa del listado y se marca para que no se lea como una más. */
.cein-sub-guide{
	margin-top: 12px; padding-top: 12px; border-top: 1px solid #e8e4dd;
	font-weight: 600; color: #111 !important; line-height: 18px;
}

/* --- Hover de la tarjeta de producto (parrilla y carruseles) ---
   El cruce a la segunda foto ya lo resuelve .hb-card-img-b más arriba, así que
   aquí solo falta lo otro: que la tarjeta SIN segunda foto no se quede muerta al
   pasar el ratón. Un zoom contenido; el contenedor ya recorta. */
.hb-card-media .hb-card-img{ transition: transform .5s ease; }
@media (hover: hover){
	.hb-card:hover .hb-card-media:not(.has-alt) .hb-card-img{ transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce){
	.hb-card-media .hb-card-img{ transition: none; }
	.hb-card:hover .hb-card-media:not(.has-alt) .hb-card-img{ transform: none; }
}

/* Descripción del producto en la ficha v4: mismo ancho de lectura que las
   landings de guía, para que el texto no cruce toda la pantalla. */
.v4-pdp-desc{ padding: 8px 0 40px; }
.v4-pdp-desc-inner{ max-width: 820px; margin: 0 auto; padding: 0 32px; color: #3a3a3a; font-size: 16px; line-height: 1.7; }
.v4-pdp-desc-inner h2{ font-size: 26px; font-weight: 700; color: #0a0a0a; margin: 0 0 14px; letter-spacing: -.01em; }
.v4-pdp-desc-inner p{ margin: 0 0 14px; }
@media(max-width:640px){ .v4-pdp-desc-inner{ padding: 0 20px; font-size: 15px; } .v4-pdp-desc-inner h2{ font-size: 21px; } }