/**
 * Detalle de colección (estilo-detail) — wizard 3 pasos, visor único,
 * barra de total flotante y canasto con desglose.
 * Mobile-first: base = móvil; >=768px ajusta.
 */

/* ---- Acordeón / líneas sueltas (fallback) ---- */
.estilo-acc {
	border: 1px solid var(--wp--preset--color--border-light, #e8e4dc);
	border-radius: var(--wp--custom--radius--md, 8px);
	margin-top: 0.5rem;
	background: var(--wp--preset--color--white, #fff);
	overflow: hidden;
}
.estilo-acc summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
	font-weight: 500;
	color: var(--wp--preset--color--text, #222826);
}
.estilo-acc summary::-webkit-details-marker { display: none; }
.estilo-acc summary::after {
	content: '+';
	flex: 0 0 auto;
	font-size: 1.15rem;
	line-height: 1;
	color: var(--wp--preset--color--primary, #30877c);
	transition: transform 0.2s ease;
}
.estilo-acc[open] summary::after { transform: rotate(45deg); }
.estilo-acc__body {
	padding: 0 1rem 0.9rem;
	color: var(--wp--preset--color--muted, #6b6b63);
	font-size: 0.95rem;
}
.estilo-acc--flat {
	padding: 0.85rem 1rem;
	display: flex;
	gap: 0.6rem;
	align-items: baseline;
}
.estilo-acc--flat::before {
	content: '✓';
	color: var(--wp--preset--color--primary, #30877c);
	font-weight: 600;
}

/* =========================================================================
 * Wizard
 * ========================================================================= */
.estilo-wizard { margin-top: 3rem; }

/* ---- Stepper ---- */
.estilo-steps {
	list-style: none;
	display: flex;
	gap: 0.4rem;
	margin: 0 0 1.5rem;
	padding: 0;
	counter-reset: none;
}
.estilo-steps__item { flex: 1 1 0; min-width: 0; }
.estilo-steps__btn {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	padding: 0.6rem 0.25rem;
	background: none;
	border: 0;
	border-top: 3px solid var(--wp--preset--color--border-light, #e8e4dc);
	cursor: pointer;
	font: inherit;
	color: var(--wp--preset--color--muted, #6b6b63);
	transition: color 0.2s ease, border-color 0.2s ease;
}
.estilo-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	font-size: 0.8rem;
	font-weight: 600;
	background: var(--wp--preset--color--border-light, #e8e4dc);
	color: var(--wp--preset--color--text, #222826);
}
.estilo-steps__label {
	font-size: 0.78rem;
	line-height: 1.2;
	text-align: center;
}
.estilo-steps__item.is-active .estilo-steps__btn {
	border-top-color: var(--wp--preset--color--primary, #30877c);
	color: var(--wp--preset--color--text, #222826);
}
.estilo-steps__item.is-active .estilo-steps__num,
.estilo-steps__item.is-done .estilo-steps__num {
	background: var(--wp--preset--color--primary, #30877c);
	color: #fff;
}
.estilo-steps__item.is-done .estilo-steps__btn { color: var(--wp--preset--color--primary, #30877c); }

@media (min-width: 768px) {
	.estilo-steps__btn { flex-direction: row; justify-content: center; gap: 0.5rem; padding: 0.8rem 0.5rem; }
	.estilo-steps__label { font-size: 0.9rem; }
}

/* Sin JS: todos los pasos visibles en secuencia. */
.estilo-detail:not(.is-js) .estilo-step[hidden] { display: block; }
.estilo-detail:not(.is-js) .estilo-scene[hidden] { display: block; }
.estilo-detail:not(.is-js) .estilo-roompanel[hidden] { display: block; }
.estilo-detail:not(.is-js) .estilo-nav { display: none; }

/* ---- Rango orientativo (solo paso 1) ---- */
.estilo-rangehint {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
	padding: 0.7rem 1.1rem;
	border-radius: 999px;
	background: var(--wp--preset--color--bg-secondary, #f7f4ee);
	font-size: 0.95rem;
	width: fit-content;
}
.estilo-rangehint__label {
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted, #6b6b63);
}
.estilo-rangehint strong {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-weight: 600;
}

/* ---- Total exacto (solo paso 3) ---- */
.estilo-total-box {
	margin-top: 2rem;
	padding: 2rem;
	text-align: center;
	background: var(--wp--preset--color--primary-soft, #e6f0ee);
	border-radius: var(--wp--custom--radius--lg, 16px);
}
.estilo-total-box__amount {
	margin: 0.35rem 0 0.75rem;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 2.1rem;
	font-weight: 600;
	line-height: 1.15;
}
.estilo-total-box__note {
	margin: 0;
	max-width: 46ch;
	margin-inline: auto;
	color: var(--wp--preset--color--muted, #6b6b63);
	font-size: 0.9rem;
}

/* ---- Config 1BD/2BD ---- */
.estilo-config {
	border: 0;
	margin: 0 0 1.75rem;
	padding: 0;
}
.estilo-config__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.75rem;
}
.estilo-config__pill { flex: 1 1 0; max-width: 180px; cursor: pointer; }
.estilo-config__pill input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.estilo-config__pill span {
	display: block;
	text-align: center;
	padding: 0.6rem 1rem;
	border: 1.5px solid var(--wp--preset--color--border, #d9d4c9);
	border-radius: 999px;
	font-size: 0.92rem;
	font-weight: 500;
	transition: all 0.2s ease;
}
.estilo-config__pill input:checked + span {
	border-color: var(--wp--preset--color--primary, #30877c);
	background: var(--wp--preset--color--primary-soft, #e6f0ee);
	color: var(--wp--preset--color--primary, #30877c);
}
.estilo-config__pill input:focus-visible + span {
	outline: 2px solid var(--wp--preset--color--primary, #30877c);
	outline-offset: 2px;
}

/* ---- Chips de cuarto ---- */
.estilo-chips {
	display: flex;
	gap: 0.75rem;
	overflow-x: auto;
	padding-bottom: 0.5rem;
	margin-bottom: 1.5rem;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.estilo-chips::-webkit-scrollbar { display: none; }
.estilo-chip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem 1.1rem;
	border: 1.5px solid var(--wp--preset--color--border, #d9d4c9);
	border-radius: 999px;
	background: var(--wp--preset--color--white, #fff);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--wp--preset--color--text, #222826);
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
}
.estilo-chip__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.05rem;
	height: 1.05rem;
	border-radius: 50%;
	font-size: 0.62rem;
	font-weight: 700;
	background: var(--wp--preset--color--border-light, #e8e4dc);
	color: var(--wp--preset--color--muted, #6b6b63);
	transition: all 0.2s ease;
}
.estilo-chip.is-included .estilo-chip__check {
	background: var(--wp--preset--color--primary, #30877c);
	color: #fff;
}
.estilo-chip:not(.is-included) { opacity: 0.6; }
.estilo-chip:not(.is-included) .estilo-chip__check { text-decoration: none; }
.estilo-chip.is-active {
	border-color: var(--wp--preset--color--primary, #30877c);
	background: var(--wp--preset--color--primary-soft, #e6f0ee);
}

/* ---- Visor único ----
 * Sin overflow:hidden: los popovers de hotspot deben poder salirse del marco
 * sin que se corten. El redondeado se aplica al render, no al contenedor. */
.estilo-viewer {
	position: relative;
	border-radius: var(--wp--custom--radius--lg, 16px);
	overflow: visible;
	background: var(--wp--preset--color--bg-secondary, #f7f4ee);

	/* Alto del visor. Antes era un tope fijo de 480px para TODOS los tamaños:
	 * en escritorio desperdiciaba pantalla y en un móvil corto (o en apaisado)
	 * se comía casi todo el viewport y empujaba fuera de vista los chips y el
	 * panel del cuarto.
	 *
	 * Ahora es min(vh, px) por tramo: el `vh` protege las pantallas bajas
	 * —nunca pasa de ~2/3 de lo visible— y el tope en px evita que en un
	 * monitor alto la foto crezca sin control. En el móvil típico (~800px de
	 * alto) da ~496px, algo más que los 480 de antes; en un móvil pequeño o
	 * en apaisado se encoge solo, que es justo lo que faltaba.
	 *
	 * Sube en el mismo sitio para renders (con hotspots) y fotos de cuarto:
	 * antes las fotos no llevaban tope y saltaban de tamaño al cambiar de
	 * diapositiva. */
	--estilo-viewer-h: min(62vh, 520px);
}
.estilo-viewer .homiture-hs { margin: 0; }
.estilo-viewer .homiture-hs__render,
.estilo-viewer .estilo-slide__photo {
	border-radius: var(--wp--custom--radius--lg, 16px) var(--wp--custom--radius--lg, 16px) 0 0;
	max-height: var(--estilo-viewer-h, 480px);
	object-fit: cover;
}
@media (min-width: 768px) {
	.estilo-viewer { --estilo-viewer-h: min(66vh, 580px); }
}
@media (min-width: 1180px) {
	.estilo-viewer { --estilo-viewer-h: min(70vh, 660px); }
}
/* Apaisado en móvil: la altura útil es mínima y el visor no puede quedarse con
 * toda la pantalla o no se ve ni un chip. */
@media (max-width: 900px) and (orientation: landscape) {
	.estilo-viewer { --estilo-viewer-h: min(72vh, 380px); }
}
.estilo-viewer .estilo-scene__placeholder {
	border-radius: var(--wp--custom--radius--lg, 16px) var(--wp--custom--radius--lg, 16px) 0 0;
}
.estilo-scene[hidden] { display: none; }
.estilo-scene__placeholder {
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--muted, #6b6b63);
	font-size: 0.95rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
/* El pie de texto del visor se retiró del marcado (2026-08): la regla queda
   como no-op defensivo por si algún contenido guardado todavía lo emite. */
.estilo-viewer__hint { display: none; }

/* ---- Red contra los <p> que inyecta wpautop ----
 *
 * El detalle entra en la plantilla como `wp:shortcode`, así que su HTML pasa
 * por wpautop, que envuelve en <p> cualquier contenido "en línea" suelto entre
 * bloques — y para wpautop, <button> y <label> NO son bloques. El resultado son
 * párrafos fantasma con los márgenes del tema, que abren huecos donde no debe
 * haberlos.
 *
 * La causa concreta del carrusel ya está resuelta en el marcado (las flechas
 * van dentro de un <div>). Esto es la red por si aparece en otro sitio.
 *
 * Se quita el MARGEN, no el elemento: un <p> inyectado puede llevar dentro un
 * control de verdad, y ocultarlo dejaría el visor sin flechas. `:not([class])`
 * protege los párrafos propios, que siempre llevan clase.
 */
.estilo-viewer p:not([class]),
.estilo-extras p:not([class]) { margin: 0; }
/* Vacío del todo sí se puede retirar: no hay nada dentro que perder. */
.estilo-viewer p:not([class]):empty,
.estilo-extras p:not([class]):empty { display: none; }

/* ---- Carrusel: escenas interactivas primero, fotos después ---- */
.estilo-carousel { position: relative; }
.estilo-carousel__stage { position: relative; }
.estilo-slide[hidden] { display: none; }
/* Las escenas llevan puntos; las fotos solo se miran. La distinción la usa el
 * JS para cambiar la pista de ayuda y para saber dónde buscar hotspots. */
.estilo-slide--scene,
.estilo-slide--photo { position: relative; }
.estilo-slide__photo {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--lg, 16px) var(--wp--custom--radius--lg, 16px) 0 0;
}

.estilo-carousel__nav {
	position: absolute;
	top: 40%;
	z-index: 30;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--wp--preset--color--text, #222826);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
	opacity: 0;
	transition: opacity 0.2s ease, background 0.2s ease;
}
.estilo-carousel__nav--prev { left: 0.75rem; }
.estilo-carousel__nav--next { right: 0.75rem; }
.estilo-carousel:hover .estilo-carousel__nav,
.estilo-carousel__nav:focus-visible { opacity: 1; }
.estilo-carousel__nav:hover { background: #fff; }
/* En táctil no hay hover: las flechas se quedan visibles. */
@media (hover: none) {
	.estilo-carousel__nav { opacity: 0.9; }
}

.estilo-carousel__thumbs {
	display: flex;
	gap: 0.6rem;
	padding: 0.75rem;
	overflow-x: auto;
	scrollbar-width: none;
	background: var(--wp--preset--color--bg-secondary, #f7f4ee);
	border-radius: 0 0 var(--wp--custom--radius--lg, 16px) var(--wp--custom--radius--lg, 16px);
}
.estilo-carousel__thumbs::-webkit-scrollbar { display: none; }
.estilo-thumb {
	position: relative;
	flex: 0 0 auto;
	width: 76px;
	height: 56px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	background: none;
	cursor: pointer;
	opacity: 0.65;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}
.estilo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Video de fondo sin poster todavia generado: caja lisa en vez de <img> roto. */
.estilo-thumb--noimg { background: var(--wp--preset--color--bg-secondary, #f7f4ee); }
.estilo-thumb:hover { opacity: 1; }
.estilo-thumb.is-active {
	opacity: 1;
	border-color: var(--wp--preset--color--primary, #30877c);
}
/* Distingue de un vistazo lo interactivo de lo que solo es foto. */
.estilo-thumb__badge {
	position: absolute;
	right: 3px;
	bottom: 3px;
	width: 1.1rem;
	height: 1.1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	background: var(--wp--preset--color--primary, #30877c);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
}

/* ---- Panel del cuarto activo ---- */
.estilo-roompanel {
	margin-top: 1.5rem;
	border: 1px solid var(--wp--preset--color--border-light, #e8e4dc);
	border-radius: var(--wp--custom--radius--lg, 16px);
	background: var(--wp--preset--color--white, #fff);
	padding: 1.5rem;
	overflow: hidden; /* recorta al recuadro redondeado (igual que .estilo-room) */
}
/* El tema no tiene reset global de box-sizing: sin esto, el botón
   "See what's included" (width:100% + padding + borde) calcula un ancho mayor
   que el panel y se sale del recuadro redondeado. Forzamos border-box aquí. */
.estilo-roompanel,
.estilo-roompanel * { box-sizing: border-box; }
.estilo-roompanel__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.estilo-room__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 1.25rem;
}
.estilo-room__price {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 1.2rem;
	font-weight: 600;
}
.estilo-room__price span { font-size: 0.8rem; font-weight: 400; color: var(--wp--preset--color--muted, #6b6b63); }
.estilo-room__price--tbd { font-size: 0.95rem; color: var(--wp--preset--color--muted, #6b6b63); font-weight: 500; }

/* Desplegable de piezas: botón explícito, no un caret discreto. */
.estilo-roompanel__pieces { margin-top: 1.1rem; }
.estilo-roompanel__pieces summary {
	list-style: none;
	cursor: pointer;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary, #30877c);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	width: 100%;
	padding: 0.7rem 1rem;
	border: 1.5px solid var(--wp--preset--color--primary, #30877c);
	border-radius: 999px;
	background: var(--wp--preset--color--primary-soft, #e6f0ee);
	transition: background 0.2s ease, box-shadow 0.2s ease;
}
.estilo-roompanel__pieces summary:hover {
	background: var(--wp--preset--color--white, #fff);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}
.estilo-roompanel__pieces summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #30877c);
	outline-offset: 2px;
}
.estilo-roompanel__pieces summary::-webkit-details-marker { display: none; }
.estilo-roompanel__pieces summary::after {
	content: '▾';
	flex: 0 0 auto;
	font-size: 0.95rem;
	line-height: 1;
	transition: transform 0.2s ease;
}
.estilo-roompanel__pieces[open] summary::after { transform: rotate(180deg); }
/* El texto del botón cambia según estado (abierto / cerrado). */
.estilo-roompanel__pieces .estilo-pieces__open { display: inline; }
.estilo-roompanel__pieces .estilo-pieces__close { display: none; }
.estilo-roompanel__pieces[open] .estilo-pieces__open { display: none; }
.estilo-roompanel__pieces[open] .estilo-pieces__close { display: inline; }
.estilo-pieces__count {
	flex: 0 0 auto;
	margin-left: auto;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--primary, #30877c);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
}

/* La lista expandida no debe empujar el layout: si es larga, hace scroll
 * dentro del panel en vez de estirar la columna y descuadrar el visor. */
.estilo-room__list {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0 0.25rem 0 0;
	font-size: 0.95rem;
	color: var(--wp--preset--color--muted, #6b6b63);
	max-height: 22rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}
.estilo-room__list li {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.5rem 0.5rem 0.5rem 1.5rem;
	position: relative;
	border-bottom: 1px solid var(--wp--preset--color--border-light, #eee9df);
	border-radius: 6px;
	transition: background 0.18s ease, color 0.18s ease;
}
.estilo-room__list li:last-child { border-bottom: 0; }
.estilo-room__list li::before {
	content: '✓';
	position: absolute;
	left: 0.15rem;
	color: var(--wp--preset--color--primary, #30877c);
	font-weight: 600;
}
.estilo-room__qty {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--text, #222826);
	font-weight: 600;
	font-size: 0.85rem;
}
.estilo-room__name { flex: 1 1 auto; }

/* ---- Vínculo con el visor ----
 * data-in-view: la pieza tiene punto en la diapositiva actual (se puede clicar)
 * data-hover:   cursor sobre el punto o sobre el renglón
 * data-open:    su ficha está abierta */
.estilo-room__list li[data-in-view] {
	cursor: pointer;
	color: var(--wp--preset--color--text, #222826);
}
.estilo-room__list li[data-in-view]::after {
	content: '+';
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	background: var(--wp--preset--color--border-light, #e8e4dc);
	color: var(--wp--preset--color--muted, #6b6b63);
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1;
	transition: background 0.18s ease, color 0.18s ease;
}
.estilo-room__list li[data-hover],
.estilo-room__list li[data-open] {
	background: var(--wp--preset--color--primary-soft, #e6f0ee);
	color: var(--wp--preset--color--text, #222826);
}
.estilo-room__list li[data-hover]::after,
.estilo-room__list li[data-open]::after {
	background: var(--wp--preset--color--primary, #30877c);
	color: #fff;
}
.estilo-room__list li[data-open] {
	box-shadow: inset 3px 0 0 var(--wp--preset--color--primary, #30877c);
}
@media (prefers-reduced-motion: reduce) {
	.estilo-room__list li,
	.estilo-room__list li::after { transition: none; }
}
.estilo-room__pick {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--wp--preset--color--border-light, #eee9df);
	width: 100%;
	font-size: 0.92rem;
	cursor: pointer;
	color: var(--wp--preset--color--primary, #30877c);
	font-weight: 500;
}
.estilo-room__pick input { accent-color: var(--wp--preset--color--primary, #30877c); width: 1.1rem; height: 1.1rem; }

@media (min-width: 768px) {
	/* Escena + panel lado a lado en el paso 1, con aire real entre columnas. */
	.estilo-step[data-step='1'].is-active { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2.25rem; align-items: start; }
	.estilo-step[data-step='1'].is-active .estilo-rangehint { grid-column: 1 / -1; }
	.estilo-step[data-step='1'].is-active .estilo-config { grid-column: 1 / -1; }
	.estilo-step[data-step='1'].is-active .estilo-chips { grid-column: 1 / -1; margin-bottom: 0.25rem; }
	.estilo-step[data-step='1'].is-active .estilo-viewer { grid-column: 1; }
	.estilo-step[data-step='1'].is-active .estilo-roompanel { grid-column: 2; margin-top: 0; }
}

/* En pantallas anchas el wizard rompe el ancho del contenedor (980px) para
 * darle sitio real al visor: los popovers de hotspot caben sin taparse. */
@media (min-width: 1180px) {
	/* Sin transform a propósito: un ancestro transformado convertiría cualquier
	 * position:fixed descendiente (bottom sheet móvil) en relativo al wizard. */
	.estilo-wizard {
		width: min(1040px, calc(100vw - 4rem));
		margin-left: calc((100% - min(1040px, 100vw - 4rem)) / 2);
	}
}

/* ---- Cuartos apilados (fallback sin catálogo) ---- */
.estilo-rooms { margin-top: 3rem; }
.estilo-room {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin-top: 1.5rem;
	background: var(--wp--preset--color--white, #fff);
	border: 1px solid var(--wp--preset--color--border-light, #e8e4dc);
	border-radius: var(--wp--custom--radius--lg, 16px);
	overflow: hidden;
}
.estilo-room__media { position: relative; }
.estilo-room__media .homiture-hs { margin: 0; }
.estilo-room__media img { display: block; width: 100%; height: auto; }
.estilo-room__panel { padding: 0 1.25rem 1.5rem; }
.estilo-room--noimg .estilo-room__panel { padding-top: 1.5rem; }
.estilo-room__num {
	margin: 0;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--accent, #eba607);
	font-weight: 600;
}
.estilo-room__chip {
	display: inline-block;
	margin: 0.9rem 0 0;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--wp--preset--color--primary, #30877c);
	background: var(--wp--preset--color--primary-soft, #e6f0ee);
	border-radius: 999px;
	padding: 0.3rem 0.85rem;
}
.estilo-room__extras { margin-top: 1.25rem; }
@media (min-width: 768px) {
	.estilo-room { flex-direction: row; align-items: stretch; }
	.estilo-room:nth-of-type(odd) { flex-direction: row-reverse; }
	.estilo-room__media { flex: 0 0 58%; }
	.estilo-room__panel { flex: 1 1 auto; padding: 1.75rem; display: flex; flex-direction: column; justify-content: center; }
	.estilo-room--noimg .estilo-room__panel { padding: 1.75rem; }
}

/* ---- Extras & upgrades ---- */
.estilo-extras { margin-top: 0.5rem; }
.estilo-extra {
	border: 1px solid var(--wp--preset--color--border-light, #e8e4dc);
	border-radius: var(--wp--custom--radius--md, 8px);
	background: var(--wp--preset--color--white, #fff);
	margin-top: 0.6rem;
	padding: 0.85rem 1rem;
}
.estilo-extra--radio { display: block; }
.estilo-extra--radio legend { font-weight: 600; padding: 0 0.25rem; }
.estilo-extra--radio label { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.3rem 0; cursor: pointer; }
.estilo-extra__desc { margin: 0.15rem 0 0.5rem; font-size: 0.88rem; color: var(--wp--preset--color--muted, #6b6b63); }
.estilo-extra__row { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; margin: 0; }
.estilo-extra__row span:first-of-type { flex: 1 1 auto; font-size: 0.95rem; }
.estilo-extra__price { margin-left: auto; white-space: nowrap; font-weight: 600; font-size: 0.9rem; color: var(--wp--preset--color--text, #222826); }
.estilo-extra input[type='checkbox'], .estilo-extra input[type='radio'] { accent-color: var(--wp--preset--color--primary, #30877c); }
.estilo-extra__qty {
	width: 3.6rem;
	padding: 0.3rem 0.4rem;
	border: 1px solid var(--wp--preset--color--border, #d9d4c9);
	border-radius: var(--wp--custom--radius--sm, 6px);
	font: inherit;
}
.estilo-extra__name { flex: 1 1 auto; font-size: 0.95rem; }

/* ---- "Ver más" del extra: foto específica + descripción ---- */
.estilo-extra__more {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0.5rem 0 0;
	padding: 0.3rem 0.75rem 0.3rem 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--primary, #30877c);
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
}
.estilo-extra__more::after {
	content: '▾';
	font-size: 0.8rem;
	transition: transform 0.2s ease;
}
.estilo-extra__more[aria-expanded='true']::after { transform: rotate(180deg); }
.estilo-extra__more-close { display: none; }
.estilo-extra__more[aria-expanded='true'] .estilo-extra__more-open { display: none; }
.estilo-extra__more[aria-expanded='true'] .estilo-extra__more-close { display: inline; }

.estilo-extra__detail {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin-top: 0.6rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--wp--preset--color--border-light, #eee9df);
}
.estilo-extra__detail[hidden] { display: none; }

/* Galería del extra: una foto, o carrusel si el mueble tiene varias tomas.
 * El marco manda el tamaño; las fotos se apilan dentro y solo una está
 * visible, así el bloque no salta de alto al pasar de una a otra. */
.estilo-extra__gallery {
	flex: 0 0 auto;
	width: 128px;
}
/* El marco tiene el alto fijo; la galería crece con los puntitos. Así las
 * flechas quedan centradas sobre la FOTO y no sobre foto+puntos. */
.estilo-extra__frame {
	position: relative;
	width: 100%;
	height: 128px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--wp--preset--color--bg-secondary, #f7f4ee);
}
/* Selector doble a propósito: `.estilo-extra__photo` comparte el botón con
 * `.homiture-hs__zoom` (hotspots.css), que declara position:relative y
 * width:100% con la MISMA especificidad. Cuál gana dependería del orden en que
 * se encolen las dos hojas, que no está garantizado. Con el padre delante esto
 * gana siempre. */
.estilo-extra__gallery .estilo-extra__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 10px;
	overflow: hidden;
	background: var(--wp--preset--color--bg-secondary, #f7f4ee);
	cursor: zoom-in;
}
.estilo-extra__gallery .estilo-extra__photo[hidden] { display: none; }
.estilo-extra__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Flechas: discretas sobre la foto, siempre visibles en táctil (no hay hover). */
.estilo-extra__gnav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--wp--preset--color--text, #222826);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.22);
	opacity: 0;
	transition: opacity 0.2s ease, background 0.2s ease;
}
.estilo-extra__gnav--prev { left: 0.3rem; }
.estilo-extra__gnav--next { right: 0.3rem; }
.estilo-extra__gallery:hover .estilo-extra__gnav,
.estilo-extra__gnav:focus-visible { opacity: 1; }
.estilo-extra__gnav:hover { background: #fff; }
@media (hover: none) {
	.estilo-extra__gnav { opacity: 0.92; }
}

/* Contador "2/4": dice que hay más sin depender de ver las flechas.
 * A la IZQUIERDA porque la esquina derecha la ocupa el icono de ampliar (⤢)
 * que hereda de .homiture-hs__zoom::after. */
.estilo-extra__gcount {
	position: absolute;
	left: 0.3rem;
	bottom: 0.3rem;
	z-index: 2;
	padding: 0.05rem 0.4rem;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 600;
	line-height: 1.5;
	pointer-events: none;
}
.estilo-extra__gdots {
	display: flex;
	justify-content: center;
	gap: 0.3rem;
	margin-top: 0.4rem;
}
.estilo-extra__gdot {
	width: 0.4rem;
	height: 0.4rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--border, #d9d4c9);
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}
.estilo-extra__gdot.is-active {
	background: var(--wp--preset--color--primary, #30877c);
	transform: scale(1.25);
}

.estilo-extra__detail-text {
	flex: 1 1 auto;
	margin: 0;
	font-size: 0.9rem;
	color: var(--wp--preset--color--muted, #6b6b63);
	line-height: 1.45;
}
@media (max-width: 520px) {
	.estilo-extra__detail { flex-direction: column; }
	.estilo-extra__gallery { width: 100%; }
	.estilo-extra__frame { height: 190px; }
}

/* ---- Resumen (paso 3) + líneas de desglose ---- */
.estilo-summary {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
}
.estilo-line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border-light, #eee9df);
	font-size: 0.95rem;
}
.estilo-line__name { flex: 1 1 auto; }
.estilo-line__price { font-weight: 600; white-space: nowrap; }
.estilo-line--extra .estilo-line__name { color: var(--wp--preset--color--muted, #6b6b63); }
.estilo-line--extra .estilo-line__name::before { content: '+ '; color: var(--wp--preset--color--primary, #30877c); }
.estilo-summary__empty { color: var(--wp--preset--color--muted, #6b6b63); font-size: 0.95rem; }

/* ---- Navegación del wizard ---- */
.estilo-nav {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 1.75rem;
}
.estilo-nav__back,
.estilo-nav__next {
	font: inherit;
	font-weight: 500;
	border-radius: var(--wp--custom--radius--md, 8px);
	padding: 0.75rem 1.8rem;
	cursor: pointer;
	transition: all 0.2s ease;
}
.estilo-nav__back {
	background: none;
	border: 1.5px solid var(--wp--preset--color--border, #d9d4c9);
	color: var(--wp--preset--color--text, #222826);
}
.estilo-nav__back:hover { background: var(--wp--preset--color--bg-secondary, #f7f4ee); }
.estilo-nav__next {
	margin-left: auto;
	background: var(--wp--preset--color--primary, #30877c);
	border: 1.5px solid var(--wp--preset--color--primary, #30877c);
	color: #fff;
}
.estilo-nav__next:hover { background: var(--wp--preset--color--primary-hover, #266b62); }

/* ---- Upgrades ACF (fallback) ---- */
.estilo-upgrades label { display: flex; gap: 0.6rem; align-items: baseline; cursor: pointer; margin: 0; }
.estilo-upgrades input[type='checkbox'] { accent-color: var(--wp--preset--color--primary, #30877c); }
.estilo-upgrades__total {
	margin-top: 0.75rem;
	text-align: right;
	font-weight: 600;
	color: var(--wp--preset--color--text, #222826);
}
.estilo-upgrades__total[hidden] { display: none; }

/* ---- CTA WhatsApp ---- */
.estilo-cta-wa {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--wp--preset--color--primary, #30877c);
	color: #fff;
	border-radius: var(--wp--custom--radius--md, 8px);
	padding: 0.85rem 2rem;
	font-weight: 500;
	text-decoration: none;
}
.estilo-cta-wa:hover { background: var(--wp--preset--color--primary-hover, #266b62); color: #fff; }

/* =========================================================================
 * Barra flotante (todas las resoluciones) — despegada del borde inferior
 * ========================================================================= */
.estilo-bar {
	position: fixed;
	left: 50%;
	bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	transform: translate(-50%, calc(100% + 24px));
	width: min(calc(100% - 24px), 640px);
	z-index: 90;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 0.75rem;
	background: var(--wp--preset--color--dark, #1f2a28);
	color: var(--wp--preset--color--on-dark, #f7f4ee);
	border-radius: 16px;
	box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28);
	transition: transform 0.28s ease;
}
.estilo-bar.is-visible { transform: translate(-50%, 0); }
/* Paso final: el total ya se ve en grande en el resumen, la barra sobra. */
.estilo-bar.is-hidden-step {
	transform: translate(-50%, calc(100% + 24px)) !important;
	pointer-events: none;
}

.estilo-bar__cart {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.7rem;
	height: 2.7rem;
	border: 0;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.08);
	color: inherit;
	cursor: pointer;
	transition: background 0.2s ease;
}
.estilo-bar__cart:hover { background: rgba(255, 255, 255, 0.16); }
.estilo-bar__count {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 1.2rem;
	height: 1.2rem;
	padding: 0 0.3rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--wp--preset--color--accent, #eba607);
	color: var(--wp--preset--color--text, #222826);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
}
.estilo-bar__count[hidden] { display: none; }

.estilo-bar__info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}
.estilo-bar__label {
	font-size: 0.68rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	opacity: 0.75;
}
.estilo-bar__amount {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 1.1rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.estilo-bar__note { font-size: 0.72rem; opacity: 0.7; }
.estilo-bar__note:empty { display: none; }
.estilo-bar .estilo-cta-wa { padding: 0.6rem 1.1rem; flex: 0 0 auto; font-size: 0.92rem; }
/* WhatsApp SOLO disponible en el paso Resumen: 'is-wa-ready' (JS) lo revela.
   En pasos 1-2 la barra muestra únicamente carrito + precio. */
.estilo-bar:not(.is-wa-ready) .estilo-bar__wa { display: none; }

.estilo-bar__msg {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 10px);
	transform: translateX(-50%);
	margin: 0;
	padding: 0.5rem 0.9rem;
	background: var(--wp--preset--color--error, #c75f2f);
	color: #fff;
	font-size: 0.82rem;
	border-radius: 10px;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.estilo-bar__msg::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: var(--wp--preset--color--error, #c75f2f);
}
.estilo-bar__msg[hidden] { display: none; }

/* Vibración cuando no hay selección. */
@keyframes estilo-shake {
	0%, 100% { transform: translate(-50%, 0); }
	15%, 45%, 75% { transform: translate(calc(-50% - 7px), 0); }
	30%, 60%, 90% { transform: translate(calc(-50% + 7px), 0); }
}
.estilo-bar.is-shake { animation: estilo-shake 0.5s ease; }
@media (prefers-reduced-motion: reduce) {
	.estilo-bar { transition: none; }
	.estilo-bar.is-shake { animation: none; }
}

/* La barra sustituye al float global mientras es visible (evita solaparse). */
body.estilo-bar-open .homiture-whatsapp-float {
	opacity: 0 !important;
	pointer-events: none !important;
}

/* =========================================================================
 * Móvil: la barra ancha se colapsa en un CARRITO CIRCULAR (FAB) abajo-derecha.
 * No estorba el menú; al tocarlo abre el desglose (bottom sheet, ya existente).
 * El precio se ve en el desglose y en el Resumen; WhatsApp vive en el Resumen.
 * ========================================================================= */
@media (max-width: 768px) {
	.estilo-bar {
		left: auto;
		right: calc(16px + env(safe-area-inset-right, 0px));
		width: auto;
		gap: 0;
		padding: 0;
		background: transparent;
		box-shadow: none;
		border-radius: 0;
		transform: translateY( calc( 100% + 40px ) );
	}
	.estilo-bar.is-visible { transform: translateY( 0 ); }
	/* Solo el carrito; precio y WhatsApp no van en el FAB. */
	.estilo-bar__info,
	.estilo-bar .estilo-bar__wa { display: none; }
	.estilo-bar__cart {
		width: 3.4rem;
		height: 3.4rem;
		border-radius: 50%;
		background: var(--wp--preset--color--dark, #1f2a28);
		color: var(--wp--preset--color--on-dark, #f7f4ee);
		box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
	}
	.estilo-bar__cart:hover { background: var(--wp--preset--color--dark, #1f2a28); }
	/* El aviso "sin selección" no debe salir cortado a la derecha. */
	.estilo-bar__msg { left: auto; right: 0; transform: none; }
	.estilo-bar__msg::after { left: auto; right: 20px; transform: none; }
	/* El shake no debe recolocar el FAB (ya no está centrado con -50%). */
	.estilo-bar.is-shake { animation: estilo-shake-fab 0.5s ease; }
}
@keyframes estilo-shake-fab {
	0%, 100% { transform: translateY( 0 ); }
	15%, 45%, 75% { transform: translate( -7px, 0 ); }
	30%, 60%, 90% { transform: translate( 7px, 0 ); }
}

/* =========================================================================
 * Canasto — bottom sheet con desglose
 * ========================================================================= */
.estilo-cartsheet {
	position: fixed;
	inset: 0;
	z-index: 95;
	background: rgba(23, 26, 25, 0.45);
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.estilo-cartsheet[hidden] { display: none; }
.estilo-cartsheet__panel {
	width: 100%;
	max-width: 560px;
	max-height: 78vh;
	overflow: auto;
	background: var(--wp--preset--color--white, #fff);
	color: var(--wp--preset--color--text, #222826);
	border-radius: 18px 18px 0 0;
	padding: 1.1rem 1.25rem calc(1.4rem + env(safe-area-inset-bottom, 0px));
	box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.22);
	animation: estilo-sheet-up 0.25s ease;
}
@keyframes estilo-sheet-up {
	from { transform: translateY(30px); opacity: 0.4; }
	to   { transform: translateY(0); opacity: 1; }
}
.estilo-cartsheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}
.estilo-cartsheet__close {
	border: 0;
	background: none;
	font-size: 1.7rem;
	line-height: 1;
	color: var(--wp--preset--color--muted, #6b6b63);
	cursor: pointer;
	padding: 0.15rem 0.4rem;
}
.estilo-cartsheet__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.estilo-cartsheet__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.9rem;
	padding-top: 0.9rem;
	border-top: 2px solid var(--wp--preset--color--border, #d9d4c9);
	font-weight: 600;
}
.estilo-cartsheet__total span {
	font-size: 0.78rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted, #6b6b63);
}
.estilo-cartsheet__amount {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 1.3rem;
}
.estilo-cartsheet__note {
	margin: 0.6rem 0 0;
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted, #6b6b63);
}
body.estilo-cart-open { overflow: hidden; }

@media (min-width: 768px) {
	/* En desktop el canasto se centra como modal compacto. */
	.estilo-cartsheet { align-items: center; padding: 2rem; }
	.estilo-cartsheet__panel { border-radius: 18px; }
}