/* TMV Banners Hoteles — v1.0.0 */
.tmvbh {
	--tmvbh-primary: #0B1F3A;
	--tmvbh-accent: #F5B800;
	--tmvbh-text: #fff;
	--tmvbh-radius: 14px;
	--tmvbh-wa: #25D366;
	--tmvbh-bg: var(--tmvbh-primary);
	--tmvbh-fg: var(--tmvbh-text);
	--tmvbh-muted: rgba(255, 255, 255, .78);
	--tmvbh-line: rgba(255, 255, 255, .14);
	position: relative;
	container-type: inline-size;
	max-width: 100%;
	margin: 0 0 1.5em;
	font-family: inherit;
	line-height: 1.35;
	color: var(--tmvbh-fg);
	-webkit-font-smoothing: antialiased;
}
.tmvbh--claro {
	--tmvbh-bg: #fff;
	--tmvbh-fg: var(--tmvbh-primary);
	--tmvbh-muted: #4b5a70;
	--tmvbh-line: #e3e8ef;
}
.tmvbh *, .tmvbh *::before, .tmvbh *::after { box-sizing: border-box; }
.tmvbh h3.tmvbh-title { margin: 0; padding: 0; color: inherit; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; font-size: clamp(1.05rem, 6cqi, 1.6rem); }
.tmvbh p { margin: 0; }
.tmvbh img { max-width: 100%; display: block; border: 0; }
.tmvbh a, .tmvbh a:hover, .tmvbh a:focus, .tmvbh a:visited { text-decoration: none !important; box-shadow: none; }

.tmvbh-heading {
	display: inline-block; margin: 0 0 .6em; padding: .3em .8em;
	background: var(--tmvbh-accent); color: var(--tmvbh-primary);
	font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
	border-radius: 999px;
}
.tmvbh-empty { padding: 12px; border: 1px dashed #c3c4c7; color: #50575e; font-size: 13px; border-radius: 8px; }

/* ---------- piezas comunes ---------- */
.tmvbh-ico { width: 1em; height: 1em; flex: none; }
.tmvbh-badge {
	position: absolute; top: 12px; left: 12px; z-index: 3;
	padding: .3em .7em; border-radius: 999px; white-space: nowrap;
	background: var(--tmvbh-accent); color: var(--tmvbh-primary);
	font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.tmvbh-stars { color: var(--tmvbh-accent); font-size: .95rem; letter-spacing: 1px; line-height: 1; }
.tmvbh-stars-off { opacity: .28; }
.tmvbh-loc { display: flex; align-items: center; gap: .3em; color: var(--tmvbh-muted); font-size: .88rem; margin-top: .3em; }
.tmvbh-loc .tmvbh-ico { color: var(--tmvbh-accent); }
.tmvbh-sub, .tmvbh-desc { color: var(--tmvbh-muted); font-size: .9rem; margin-top: .4em !important; }
.tmvbh-price { font-size: .82rem; color: var(--tmvbh-muted); white-space: nowrap; }
.tmvbh-price strong { color: var(--tmvbh-accent); font-size: 1.35rem; font-weight: 900; letter-spacing: -.01em; }
.tmvbh--claro .tmvbh-price strong { color: var(--tmvbh-primary); }
.tmvbh-price strong span { font-size: inherit; }
.tmvbh-from { text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; font-weight: 700; }
.tmvbh-old { opacity: .7; }
.tmvbh-actions { display: flex; gap: 8px; align-items: stretch; }
.tmvbh-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .4em;
	min-height: 42px; padding: .55em 1.15em; border-radius: calc(var(--tmvbh-radius) * .7);
	background: var(--tmvbh-accent); color: var(--tmvbh-primary) !important;
	font-weight: 800; font-size: .92rem; line-height: 1.1; white-space: nowrap;
	transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.tmvbh-btn:hover, .tmvbh-btn:focus-visible { transform: translateY(-1px); filter: brightness(1.06); }
.tmvbh-btn:focus-visible { outline: 3px solid var(--tmvbh-accent); outline-offset: 2px; }
.tmvbh-btn--wa { background: var(--tmvbh-wa); color: #fff !important; padding: .55em .7em; }
.tmvbh-btn--wa .tmvbh-ico { width: 1.35em; height: 1.35em; }
.tmvbh-btn--wide { padding: .55em 1.1em; }

/* ---------- rotación (carrusel / horizontal / cuenta) ---------- */
.tmvbh-track { position: relative; }
.tmvbh--rotate .tmvbh-track { display: grid; }
.tmvbh--rotate .tmvbh-item {
	grid-area: 1 / 1;
	opacity: 0; visibility: hidden;
	transition: opacity .7s ease, visibility 0s linear .7s;
}
.tmvbh--rotate .tmvbh-item.is-active { opacity: 1; visibility: visible; transition: opacity .7s ease, visibility 0s; z-index: 1; }
/* Rotación solo con CSS (funciona aunque el JS esté demorado o bloqueado por caché/optimizadores).
   Las @keyframes y los retrasos los genera PHP; cuando el JS arranca cambia .tmvbh--css por .tmvbh--js. */
.tmvbh--css .tmvbh-item { transition: none; animation: var(--tmvbh-kf) var(--tmvbh-cycle) linear infinite; }

/* ---------- botón minimizar (funciona sin JS: checkbox + label) ---------- */
.tmvbh-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tmvbh-min-cb { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.tmvbh-min {
	position: absolute; top: 10px; right: 10px; z-index: 6;
	width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
	background: rgba(11, 31, 58, .6); color: #fff; cursor: pointer; margin: 0;
	backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25); transition: background .15s, transform .15s;
}
.tmvbh-min svg { width: 18px; height: 18px; }
.tmvbh-min:hover { background: var(--tmvbh-primary); transform: scale(1.06); }
.tmvbh--claro.tmvbh--tarjeta .tmvbh-min, .tmvbh--claro.tmvbh--horizontal .tmvbh-min { background: rgba(11, 31, 58, .75); }
.tmvbh-minbar {
	display: none; align-items: center; gap: .55em; cursor: pointer; margin: 0;
	padding: .55em .9em; border-radius: 999px; max-width: 100%;
	background: var(--tmvbh-primary); color: #fff; font-weight: 700; font-size: .9rem; line-height: 1.2;
	box-shadow: 0 6px 18px -8px rgba(11, 31, 58, .55); border-left: 4px solid var(--tmvbh-accent);
}
.tmvbh-minbar > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmvbh-minbar .tmvbh-ico { color: var(--tmvbh-accent); width: 1.2em; height: 1.2em; }
.tmvbh-minbar-open { display: inline-flex; align-items: center; gap: .25em; margin-left: auto; padding-left: .6em; color: var(--tmvbh-accent); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.tmvbh-minbar-open .tmvbh-ico { width: 1em; height: 1em; }
.tmvbh-min-cb:checked ~ .tmvbh-track,
.tmvbh-min-cb:checked ~ .tmvbh-heading,
.tmvbh-min-cb:checked ~ .tmvbh-debug { display: none !important; }
.tmvbh-min-cb:checked ~ .tmvbh-minbar { display: inline-flex; }
.tmvbh-min-cb:focus-visible ~ .tmvbh-track .tmvbh-min,
.tmvbh-min-cb:focus-visible ~ .tmvbh-minbar { outline: 3px solid var(--tmvbh-accent); outline-offset: 2px; }

/* ---------- 1. CARRUSEL ---------- */
.tmvbh--carrusel .tmvbh-item {
	position: relative; overflow: hidden; border-radius: var(--tmvbh-radius);
	aspect-ratio: 4 / 5; height: var(--tmvbh-h, auto);
	background: var(--tmvbh-primary); color: #fff;
	display: flex; flex-direction: column; justify-content: flex-end;
	--tmvbh-muted: rgba(255, 255, 255, .82);
}
@container (min-width: 520px) { .tmvbh--carrusel .tmvbh-item { aspect-ratio: 16 / 8; } }
@container (min-width: 900px) { .tmvbh--carrusel .tmvbh-item { aspect-ratio: 21 / 8; } }
.tmvbh--carrusel .tmvbh-media { position: absolute; inset: 0; }
.tmvbh--carrusel .tmvbh-img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 7s ease-out; }
.tmvbh--carrusel .is-active .tmvbh-img { transform: scale(1.12); }
.tmvbh--carrusel .tmvbh-overlay {
	position: relative; z-index: 2; padding: 22% 18px 18px;
	background: linear-gradient(180deg, rgba(11, 31, 58, 0) 0%, color-mix(in srgb, var(--tmvbh-primary) 70%, transparent) 38%, color-mix(in srgb, var(--tmvbh-primary) 96%, transparent) 100%);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.tmvbh--carrusel .tmvbh-overlay { background: linear-gradient(180deg, rgba(11, 31, 58, 0), rgba(11, 31, 58, .75) 40%, rgba(11, 31, 58, .96)); }
}
.tmvbh--carrusel .tmvbh-title { margin-top: .25em !important; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.tmvbh--carrusel .tmvbh-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 14px; margin-top: 12px; }
.tmvbh--carrusel .tmvbh-row .tmvbh-actions { flex: 1 1 auto; justify-content: flex-end; }
@container (max-width: 340px) {
	.tmvbh--carrusel .tmvbh-row .tmvbh-actions { flex-basis: 100%; }
	.tmvbh--carrusel .tmvbh-row .tmvbh-btn:not(.tmvbh-btn--wa) { flex: 1; }
}
@container (min-width: 520px) {
	.tmvbh--carrusel .tmvbh-overlay { padding: 12% 28px 24px; }
	.tmvbh--carrusel .tmvbh-overlay > * { max-width: 760px; }
}

/* ---------- 2. TARJETA OFERTA ---------- */
.tmvbh--tarjeta .tmvbh-track { display: grid; gap: 16px; }
@container (min-width: 600px) { .tmvbh--tarjeta .tmvbh-track { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }
.tmvbh--tarjeta .tmvbh-item, .tmvbh--cuenta .tmvbh-item {
	display: flex; flex-direction: column; overflow: hidden;
	border-radius: var(--tmvbh-radius); background: var(--tmvbh-bg);
	border: 1px solid var(--tmvbh-line);
	box-shadow: 0 10px 30px -12px rgba(11, 31, 58, .35);
	transition: transform .25s ease, box-shadow .25s ease;
}
.tmvbh--tarjeta .tmvbh-item:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -14px rgba(11, 31, 58, .45); }
.tmvbh--tarjeta .tmvbh-media, .tmvbh--cuenta .tmvbh-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #dfe5ee; }
.tmvbh--cuenta .tmvbh-media { aspect-ratio: 16 / 9; }
.tmvbh--tarjeta .tmvbh-img, .tmvbh--cuenta .tmvbh-img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.tmvbh--tarjeta .tmvbh-item:hover .tmvbh-img { transform: scale(1.05); }
.tmvbh--tarjeta .tmvbh-body, .tmvbh--cuenta .tmvbh-body { display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 18px; flex: 1; }
.tmvbh--tarjeta .tmvbh-title { font-size: clamp(1.05rem, 5.4cqi, 1.3rem); }
.tmvbh--tarjeta .tmvbh-price, .tmvbh--cuenta .tmvbh-price { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--tmvbh-line); }
.tmvbh--tarjeta .tmvbh-actions, .tmvbh--cuenta .tmvbh-actions { margin-top: 10px; }
.tmvbh--tarjeta .tmvbh-actions .tmvbh-btn:not(.tmvbh-btn--wa), .tmvbh--cuenta .tmvbh-actions .tmvbh-btn:not(.tmvbh-btn--wa), .tmvbh-btn--wide { flex: 1; }
.tmvbh-img--none { background: linear-gradient(135deg, var(--tmvbh-primary), #1d3d6b); width: 100%; height: 100%; }

/* ---------- 3. BANNER HORIZONTAL ---------- */
.tmvbh--horizontal .tmvbh-item {
	position: relative; display: grid; align-items: center;
	grid-template-columns: 128px 1fr auto; gap: 18px;
	min-height: 90px; padding: 10px 48px 10px 10px;
	border-radius: var(--tmvbh-radius);
	background: linear-gradient(100deg, var(--tmvbh-primary) 0%, #17375f 100%);
	color: #fff; --tmvbh-muted: rgba(255, 255, 255, .8);
	border-left: 5px solid var(--tmvbh-accent);
	overflow: hidden;
}
.tmvbh--horizontal.tmvbh--claro .tmvbh-item { background: #fff; color: var(--tmvbh-primary); --tmvbh-muted: #4b5a70; border: 1px solid #e3e8ef; border-left: 5px solid var(--tmvbh-accent); }
.tmvbh--horizontal .tmvbh-min { top: 50%; right: 9px; transform: translateY(-50%); width: 26px; height: 26px; }
.tmvbh--horizontal.tmvbh--oscuro .tmvbh-min { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.tmvbh--horizontal .tmvbh-min:hover { transform: translateY(-50%) scale(1.06); }
.tmvbh--horizontal .tmvbh-thumb { position: relative; height: 70px; border-radius: calc(var(--tmvbh-radius) * .6); overflow: hidden; }
.tmvbh--horizontal .tmvbh-img { width: 100%; height: 100%; object-fit: cover; }
.tmvbh--horizontal .tmvbh-badge { position: static; display: inline-block; font-size: .64rem; box-shadow: none; }
.tmvbh--horizontal .tmvbh-line { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; min-height: 0; }
.tmvbh--horizontal .tmvbh-line:empty { display: none; }
.tmvbh--horizontal .tmvbh-title { font-size: clamp(1rem, 2.6cqi, 1.3rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmvbh--horizontal .tmvbh-info { min-width: 0; }
.tmvbh--horizontal .tmvbh-cta { display: flex; align-items: center; gap: 16px; }
@container (max-width: 560px) {
	.tmvbh--horizontal .tmvbh-item { grid-template-columns: 88px 1fr; gap: 10px 12px; padding: 10px 40px 10px 10px; }
	.tmvbh--horizontal .tmvbh-min { top: 8px; transform: none; }
	.tmvbh--horizontal .tmvbh-min:hover { transform: scale(1.06); }
	.tmvbh--horizontal .tmvbh-thumb { height: 64px; }
	.tmvbh--horizontal .tmvbh-cta { grid-column: 1 / -1; flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; padding-bottom: 10px; }
	.tmvbh--horizontal .tmvbh-cta .tmvbh-actions { flex: 1 1 auto; justify-content: flex-end; }
	.tmvbh--horizontal .tmvbh-line { flex-wrap: wrap; }
	.tmvbh--horizontal .tmvbh-title { white-space: normal; }
}

/* ---------- 4. CUENTA REGRESIVA ---------- */
.tmvbh--cuenta .tmvbh-item { background: var(--tmvbh-bg); }
.tmvbh-cd-label { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tmvbh-accent); }
.tmvbh--claro .tmvbh-cd-label { color: var(--tmvbh-primary); }
.tmvbh-countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 10px; }
.tmvbh-countdown span {
	display: flex; flex-direction: column; align-items: center; padding: 8px 2px 6px;
	border-radius: calc(var(--tmvbh-radius) * .55);
	background: var(--tmvbh-accent); color: var(--tmvbh-primary);
}
.tmvbh-countdown b { font-size: clamp(1.2rem, 8cqi, 1.9rem); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.tmvbh-countdown i { font-style: normal; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }
.tmvbh-countdown.is-urgent span { animation: tmvbh-pulse 1s ease-in-out infinite alternate; }
.tmvbh-countdown.is-over { display: block; text-align: center; font-weight: 800; padding: 10px; border-radius: 8px; background: var(--tmvbh-line); color: var(--tmvbh-fg); }
@keyframes tmvbh-pulse { to { filter: brightness(1.12); transform: scale(1.03); } }
@container (min-width: 620px) {
	.tmvbh--cuenta .tmvbh-item { display: grid; grid-template-columns: 1.1fr 1fr; }
	.tmvbh--cuenta .tmvbh-media { aspect-ratio: auto; min-height: 100%; }
	.tmvbh--cuenta .tmvbh-body { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.tmvbh *, .tmvbh *::before { transition: none !important; }
	.tmvbh *:not(.tmvbh-item) { animation: none !important; }
	.tmvbh--carrusel .tmvbh-img, .tmvbh--carrusel .is-active .tmvbh-img { transform: none; }
}