/* -------------------------------------------------------------
 * VS Bloques · estilos de la parte pública
 * Tokens tomados del diseño actual de Viajeros Singles.
 * ---------------------------------------------------------- */

:root {
	--vs-oro: #e4b326;
	--vs-oro-hover: #f2c542;
	--vs-oscuro: #1b1b1b;
	--vs-panel: #262626;
	--vs-linea: rgba(255, 255, 255, .1);
	--vs-texto: #e9e9e9;
	--vs-apagado: rgba(233, 233, 233, .62);
	--vs-radio-tarjeta: 28px;
	--vs-radio-campo: 16px;
	--vs-radio-pill: 999px;
	--vs-fuente: 'Poppins', system-ui, -apple-system, sans-serif;
}

[class*="vs-"] {
	box-sizing: border-box;
}

/* ── Piezas comunes ──────────────────────────────────────── */

.vsb-contenedor {
	max-width: 1200px;
	margin: 0 auto;
	padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 40px);
}

.vsb-kicker {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	color: var(--vs-oro);
	font-family: var(--vs-fuente);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.vsb-kicker::before {
	content: "";
	display: inline-block;
	width: 34px;
	height: 2px;
	background: var(--vs-oro);
}

.vsb-seccion__titulo {
	margin: 0 0 14px;
	font-family: var(--vs-fuente);
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 700;
	line-height: 1.15;
}

.vsb-seccion__intro {
	max-width: 720px;
	margin: 0 0 36px;
	font-family: var(--vs-fuente);
	font-size: 16px;
	line-height: 1.6;
	opacity: .85;
}

.vsb-grid {
	display: grid;
	gap: clamp(18px, 2.5vw, 30px);
}

.vsb-grid--1 { grid-template-columns: 1fr; }
.vsb-grid--2 { grid-template-columns: repeat(2, 1fr); }
.vsb-grid--3 { grid-template-columns: repeat(3, 1fr); }
.vsb-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) {
	.vsb-grid--3,
	.vsb-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.vsb-grid { grid-template-columns: 1fr !important; }
}

.vsb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 28px;
	border: 0;
	border-radius: var(--vs-radio-campo);
	background: var(--vs-oro);
	color: var(--vs-oscuro);
	font-family: var(--vs-fuente);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background .2s ease, transform .1s ease;
}

.vsb-btn:hover,
.vsb-btn:focus {
	background: var(--vs-oro-hover);
	color: var(--vs-oscuro);
}

.vsb-btn:active { transform: scale(.98); }

.vsb-btn:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.vsb-btn--pill { border-radius: var(--vs-radio-pill); }
.vsb-btn--bloque { width: 100%; }

.vsb-lista {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--vs-fuente);
}

.vsb-lista li {
	position: relative;
	margin-bottom: 12px;
	padding-left: 30px;
	font-size: 15.5px;
	line-height: 1.5;
}

.vsb-lista--check li::before {
	content: "";
	position: absolute;
	top: .35em;
	left: 0;
	width: 16px;
	height: 9px;
	border-left: 3px solid var(--vs-oro);
	border-bottom: 3px solid var(--vs-oro);
	transform: rotate(-45deg);
}

/* ── Portada ─────────────────────────────────────────────── */

.vsb-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--vs-oscuro);
	background-position: center;
	background-size: cover;
	color: #fff;
	text-align: center;
}

.vsb-hero--compacta { min-height: 42vh; }
.vsb-hero--media    { min-height: 62vh; }
.vsb-hero--completa { min-height: 88vh; }

.vsb-hero__capa {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(27, 27, 27, .5), rgba(27, 27, 27, .95));
}

.vsb-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 900px;
	padding: clamp(50px, 8vw, 110px) clamp(20px, 5vw, 40px);
}

.vsb-hero__titulo {
	margin: 0 0 18px;
	color: #fff;
	font-family: var(--vs-fuente);
	font-size: clamp(32px, 6vw, 62px);
	font-weight: 700;
	line-height: 1.05;
	text-transform: uppercase;
}

.vsb-hero__texto {
	margin: 0 auto 28px;
	max-width: 620px;
	font-family: var(--vs-fuente);
	font-size: 17px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .9);
}

.vsb-hero .vsb-kicker { justify-content: center; }

/* ── Aviso ───────────────────────────────────────────────── */

.vsb-aviso {
	max-width: 1140px;
	margin: 24px auto;
	padding: 18px 26px;
	border-radius: var(--vs-radio-campo);
	font-family: var(--vs-fuente);
	font-size: 15.5px;
	line-height: 1.6;
}

.vsb-aviso p { margin: 0; }

.vsb-aviso--aviso {
	border: 2px solid var(--vs-oro);
	background: rgba(228, 179, 38, .1);
}

.vsb-aviso--neutro {
	background: var(--vs-panel);
	color: var(--vs-texto);
}

.vsb-aviso a {
	color: var(--vs-oro);
	font-weight: 600;
}

/* ── Ventajas ────────────────────────────────────────────── */

.vsb-ventajas { background: var(--vs-oscuro); color: var(--vs-texto); }

.vsb-ventaja {
	padding: 30px 26px;
	border: 1px solid var(--vs-linea);
	border-radius: var(--vs-radio-tarjeta);
	background: var(--vs-panel);
	text-align: center;
}

.vsb-ventaja__media { margin-bottom: 16px; }

.vsb-ventaja__icono {
	width: 68px;
	height: 68px;
	object-fit: contain;
}

.vsb-ventaja__titulo {
	margin: 0 0 10px;
	color: #fff;
	font-family: var(--vs-fuente);
	font-size: 20px;
	font-weight: 700;
}

.vsb-ventaja__texto {
	margin: 0;
	font-family: var(--vs-fuente);
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--vs-apagado);
}

/* ── Tipos de viaje ──────────────────────────────────────── */

.vsb-tipo {
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: var(--vs-radio-tarjeta);
	background: #fff;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .06);
}

.vsb-tipo__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.vsb-tipo__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vsb-tipo__titulo {
	margin: 26px 26px 16px;
	font-family: var(--vs-fuente);
	font-size: 22px;
	font-weight: 700;
}

.vsb-tipo .vsb-lista { margin: 0 26px 30px; }

/* ── Tarjetas de viaje ───────────────────────────────────── */

.vsb-viaje {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--vs-radio-tarjeta);
	background: #fff;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .08);
	transition: transform .2s ease, box-shadow .2s ease;
}

.vsb-viaje:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
}

.vsb-viaje__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #eee;
}

.vsb-viaje__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vsb-viaje__etiqueta {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 7px 14px;
	border-radius: var(--vs-radio-pill);
	background: var(--vs-oro);
	color: var(--vs-oscuro);
	font-family: var(--vs-fuente);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.vsb-viaje__cuerpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
}

.vsb-viaje__destino {
	margin: 0;
	font-family: var(--vs-fuente);
	font-size: 21px;
	font-weight: 700;
}

.vsb-viaje__subtitulo {
	margin: 0;
	font-family: var(--vs-fuente);
	font-size: 14.5px;
	color: rgba(0, 0, 0, .6);
}

.vsb-viaje__datos {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 8px 0 16px;
	padding-top: 14px;
	border-top: 1px solid rgba(0, 0, 0, .08);
	font-family: var(--vs-fuente);
}

.vsb-viaje__dias {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, .55);
}

.vsb-viaje__precio {
	font-size: 24px;
	font-weight: 700;
	color: var(--vs-oscuro);
}

.vsb-viaje .vsb-btn { margin-top: auto; }

/* ── Opiniones ───────────────────────────────────────────── */

.vsb-opinion {
	display: flex;
	flex-direction: column;
	padding: 28px;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: var(--vs-radio-tarjeta);
	background: #fff;
}

.vsb-opinion__estrellas {
	margin-bottom: 12px;
	color: var(--vs-oro);
	font-size: 19px;
	letter-spacing: 2px;
}

.vsb-opinion__texto {
	flex: 1;
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	font-family: var(--vs-fuente);
	font-size: 16px;
	font-style: normal;
	line-height: 1.65;
}

.vsb-opinion__pie {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid rgba(0, 0, 0, .08);
}

.vsb-opinion__avatar {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	object-fit: cover;
}

.vsb-opinion__nombre {
	display: block;
	font-family: var(--vs-fuente);
	font-size: 15px;
	font-weight: 700;
}

.vsb-opinion__fecha {
	display: block;
	font-family: var(--vs-fuente);
	font-size: 13px;
	color: rgba(0, 0, 0, .55);
}

/* ── CTA ─────────────────────────────────────────────────── */

.vsb-cta {
	position: relative;
	background-color: var(--vs-panel);
	background-position: center;
	background-size: cover;
	color: #fff;
	text-align: center;
}

.vsb-cta__capa {
	position: absolute;
	inset: 0;
	background: var(--vs-oscuro);
}

.vsb-cta__inner {
	position: relative;
	z-index: 1;
	max-width: 760px;
	margin: 0 auto;
	padding: clamp(50px, 7vw, 90px) clamp(20px, 5vw, 40px);
}

.vsb-cta__titulo {
	margin: 0 0 16px;
	color: #fff;
	font-family: var(--vs-fuente);
	font-size: clamp(26px, 4vw, 42px);
	font-weight: 700;
	line-height: 1.15;
}

.vsb-cta__texto {
	margin: 0 0 28px;
	font-family: var(--vs-fuente);
	font-size: 16.5px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .88);
}

/* ── Accesibilidad ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.vsb-viaje,
	.vsb-btn {
		transition: none;
	}
}

/* -------------------------------------------------------------
 * Buscador de viajes
 * ---------------------------------------------------------- */

.vsb-buscador {
	max-width: 1140px;
	margin: 0 auto;
	padding: clamp(22px, 3vw, 32px);
	border: 2px solid var(--vs-oro);
	border-radius: var(--vs-radio-tarjeta);
	background: rgba(27, 27, 27, .88);
	color: #fff;
	font-family: var(--vs-fuente);
}

.vsb-buscador__intro {
	max-width: 560px;
	margin: 0 auto 22px;
	color: rgba(255, 255, 255, .9);
	font-size: 15px;
	line-height: 1.5;
	text-align: center;
}

.vsb-buscador__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 14px;
	align-items: end;
}

.vsb-buscador__campo label {
	display: block;
	margin-bottom: 8px;
	color: var(--vs-oro);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.vsb-buscador__campo select {
	width: 100%;
	height: 52px;
	padding: 0 42px 0 16px;
	border: 1.5px solid rgba(255, 255, 255, .2);
	border-radius: var(--vs-radio-campo);
	background: rgba(255, 255, 255, .05);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E4B326' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	color: #fff;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 500;
	appearance: none;
	cursor: pointer;
	transition: border-color .2s ease;
}

.vsb-buscador__campo select:focus {
	border-color: var(--vs-oro);
	outline: none;
}

.vsb-buscador__campo option {
	background: #fff;
	color: #111;
}

.vsb-buscador__btn {
	height: 52px;
	padding: 0 30px;
	border: 0;
	border-radius: 15px;
	background: var(--vs-oro);
	color: var(--vs-oscuro);
	font-family: inherit;
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background .2s ease, transform .1s ease;
}

.vsb-buscador__btn:hover { background: var(--vs-oro-hover); }
.vsb-buscador__btn:active { transform: scale(.98); }

@media (max-width: 900px) {
	.vsb-buscador__grid { grid-template-columns: 1fr; }
	.vsb-buscador__btn { width: 100%; }
}

/* -------------------------------------------------------------
 * Fichas de viaje
 * ---------------------------------------------------------- */

.vsb-ficha {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 20px;
	background: var(--vs-oscuro);
	box-shadow: 0 10px 40px rgba(0, 0, 0, .12);
	font-family: var(--vs-fuente);
	transition: transform .35s cubic-bezier(.25, .46, .45, .94), box-shadow .35s ease;
}

.vsb-ficha:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 56px rgba(0, 0, 0, .18);
}

.vsb-ficha__enlace {
	display: block;
	flex: 0 0 auto;
	color: inherit;
	text-decoration: none;
}

.vsb-ficha__media {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1.05;
	overflow: hidden;
}

.vsb-ficha__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .55s ease;
}

.vsb-ficha:hover .vsb-ficha__img { transform: scale(1.06); }

.vsb-ficha__badges {
	position: absolute;
	top: 16px;
	right: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.vsb-badge {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	min-width: 140px;
	padding: 7px 18px 7px 14px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.vsb-badge--oro {
	border-radius: 12px 0 0 0;
	background: var(--vs-oro);
	color: var(--vs-oscuro);
}

.vsb-badge--oscuro {
	border-radius: 12px 0 0 0;
	background: rgba(26, 26, 26, .92);
	color: var(--vs-oro);
}

.vsb-badge--claro {
	border-radius: 12px 0 0 0;
	background: #f0f0f0;
	color: #1a1a1a;
}

.vsb-badge--ocupado {
	border-radius: 0 0 0 12px;
	background: rgba(26, 26, 26, .92);
	color: #fff;
}

.vsb-badge__barra {
	display: block;
	width: 100%;
	height: 5px;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(255, 255, 255, .2);
}

.vsb-badge__relleno {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--vs-oro);
}

.vsb-ficha__precio {
	position: absolute;
	bottom: 14px;
	left: 16px;
	z-index: 1;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}

.vsb-ficha__precio-label {
	display: block;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .85;
}

.vsb-ficha__precio-valor {
	display: block;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.05;
}

.vsb-ficha__precio-valor span {
	margin-left: 2px;
	font-size: 18px;
}

.vsb-ficha__titulo {
	margin: 0;
	padding: 12px 18px;
	background: var(--vs-oro);
	color: var(--vs-oscuro);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.vsb-ficha__titulo a {
	color: inherit;
	text-decoration: none;
}

.vsb-ficha__pie {
	display: flex;
	flex: 1 1 auto;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 18px 18px;
	background: var(--vs-oscuro);
}

.vsb-ficha__detalles {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.vsb-ficha__detalle {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-size: .68rem;
	line-height: 1.3;
	letter-spacing: .3px;
	text-transform: uppercase;
}

.vsb-ficha__ico {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	color: var(--vs-oro);
}

.vsb-ficha__acciones {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 9px;
	align-items: stretch;
}

.vsb-ficha__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px 16px;
	border: none;
	border-radius: 999px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .7px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background .3s ease, color .3s ease, transform .12s ease;
}

.vsb-ficha__btn--claro {
	background: #fff;
	color: var(--vs-oscuro);
}

.vsb-ficha__btn--claro:hover {
	background: var(--vs-oro);
	color: var(--vs-oscuro);
}

.vsb-ficha__btn--wa {
	background: #25d366;
	color: #fff;
}

.vsb-ficha__btn--wa:hover {
	background: #1ebe57;
	color: #fff;
	transform: translateY(-1px);
}

.vsb-ficha__btn--wa .vsb-ficha__ico { color: currentColor; }

@media (max-width: 480px) {
	.vsb-ficha__pie { flex-direction: column; }
	.vsb-ficha__acciones { width: 100%; }
}

/* -------------------------------------------------------------
 * Contacto («Hablamos»)
 * ---------------------------------------------------------- */

.vsb-hablamos {
	padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 60px);
	background: var(--vs-panel);
	color: var(--vs-texto);
	font-family: var(--vs-fuente);
}

.vsb-hablamos__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(30px, 5vw, 70px);
	align-items: start;
	max-width: 1200px;
	margin: 0 auto;
}

.vsb-hablamos__titulo {
	margin: 0 0 18px;
	color: #fff;
	font-size: clamp(30px, 4vw, 46px);
	font-weight: 800;
	line-height: 1.1;
}

.vsb-hablamos__intro {
	max-width: 520px;
	margin: 0 0 32px;
	color: var(--vs-apagado);
	font-size: 16px;
	line-height: 1.6;
}

.vsb-contacto {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.vsb-contacto__item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 22px;
	border: 1px solid var(--vs-linea);
	border-radius: 14px;
	color: inherit;
	text-decoration: none;
	transition: border-color .25s ease, background .25s ease, transform .15s ease;
}

.vsb-contacto__item:hover {
	border-color: var(--vs-oro);
	background: rgba(228, 179, 38, .06);
	transform: translateY(-2px);
}

.vsb-contacto__ico {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	color: var(--vs-oro);
}

.vsb-contacto__ico svg {
	display: block;
	width: 100%;
	height: 100%;
}

.vsb-contacto__txt {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.vsb-contacto__main {
	color: #fff;
	font-size: 17px;
	font-weight: 700;
}

.vsb-contacto__sub {
	color: var(--vs-apagado);
	font-size: 13.5px;
	line-height: 1.4;
}

.vsb-form-panel {
	padding: clamp(26px, 3vw, 40px);
	border: 1px solid var(--vs-linea);
	border-radius: 20px;
	background: var(--vs-oscuro);
}

.vsb-form-panel__titulo {
	margin: 0 0 10px;
	color: #fff;
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: 800;
}

.vsb-form-panel__texto {
	margin: 0 0 26px;
	color: var(--vs-apagado);
	font-size: 15px;
	line-height: 1.55;
}

/* Formularios de terceros dentro del panel */

.vsb-form-panel .nf-form-cont,
.vsb-form-panel .wpforms-container { margin: 0 !important; }

.vsb-form-panel label,
.vsb-form-panel .wpforms-field-label,
.vsb-form-panel .nf-field-label label {
	color: var(--vs-oro) !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	letter-spacing: .13em !important;
	text-transform: uppercase !important;
}

.vsb-form-panel input[type="text"],
.vsb-form-panel input[type="email"],
.vsb-form-panel input[type="tel"],
.vsb-form-panel select,
.vsb-form-panel textarea {
	width: 100% !important;
	padding: 14px 16px !important;
	border: 1.5px solid rgba(255, 255, 255, .16) !important;
	border-radius: 12px !important;
	background: rgba(255, 255, 255, .05) !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: 15px !important;
}

.vsb-form-panel input::placeholder,
.vsb-form-panel textarea::placeholder { color: rgba(255, 255, 255, .4) !important; }

.vsb-form-panel input:focus,
.vsb-form-panel select:focus,
.vsb-form-panel textarea:focus {
	border-color: var(--vs-oro) !important;
	background: rgba(255, 255, 255, .08) !important;
	outline: none !important;
}

.vsb-form-panel a {
	color: var(--vs-oro);
	text-decoration: underline;
}

.vsb-form-panel input[type="button"],
.vsb-form-panel input[type="submit"],
.vsb-form-panel button[type="submit"],
.vsb-form-panel .wpforms-submit {
	width: 100% !important;
	padding: 16px 24px !important;
	border: none !important;
	border-radius: 12px !important;
	background: var(--vs-oro) !important;
	color: var(--vs-oscuro) !important;
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	cursor: pointer;
	transition: background .2s ease;
}

.vsb-form-panel input[type="submit"]:hover,
.vsb-form-panel .wpforms-submit:hover { background: var(--vs-oro-hover) !important; }

@media (max-width: 860px) {
	.vsb-hablamos__grid { grid-template-columns: 1fr; }
}

/* Contenedores auxiliares */

.vsb-buscador__form { margin: 0; }
.vsb-badge__texto { display: block; }
.vsb-fichas { background: #faf8f4; }
.vsb-hablamos__col { min-width: 0; }

/* -------------------------------------------------------------
 * Página «Quiénes somos»
 * ---------------------------------------------------------- */

:root {
	--vs-radio-s: 14px;
	--vs-radio-m: 32px;
	--vs-radio-l: 96px;
}

/* ── Cabecera ────────────────────────────────────────────── */

.vsb-cabecera {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(12px, 1.4vw, 18px);
	max-width: 1240px;
	margin-inline: auto;
	padding: clamp(22px, 2.4vw, 32px) clamp(20px, 3.5vw, 44px) clamp(24px, 2.6vw, 34px);
	border-radius: 0 var(--vs-radio-m) 0 var(--vs-radio-m);
	background: #fff;
	color: var(--vs-oscuro);
	font-family: var(--vs-fuente);
	text-align: center;
}

.vsb-cabecera__titulo {
	margin: 0;
	font-size: clamp(30px, 4.6vw, 60px);
	font-weight: 900;
	font-style: italic;
	line-height: 1.05;
	letter-spacing: -.02em;
	text-transform: uppercase;
}

.vsb-cabecera__subtitulo {
	margin: 0;
	color: var(--vs-oro);
	font-size: clamp(16px, 2vw, 24px);
	font-weight: 700;
}

/* ── Eyebrow compartido ──────────────────────────────────── */

.vsb-eyebrow {
	display: inline-block;
	margin: 0 0 26px;
	padding: 7px 18px;
	border-radius: 10px 0 10px 0;
	background: var(--vs-oro);
	color: var(--vs-oscuro);
	font-family: var(--vs-fuente);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* ── Filosofía ───────────────────────────────────────────── */

.vsb-filosofia {
	font-family: var(--vs-fuente);
}

.vsb-filosofia__cabecera {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: end;
}

.vsb-filosofia__titulo {
	margin: 0;
	color: var(--vs-oscuro);
	font-size: clamp(34px, 5vw, 62px);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -.02em;
	text-transform: uppercase;
}

.vsb-filosofia__titulo span {
	display: block;
	color: var(--vs-oro);
}

.vsb-filosofia__entradilla {
	margin: 0;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.55;
}

.vsb-filosofia__tarjetas {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	margin-top: 60px;
}

.vsb-tarjeta {
	padding: 38px 34px 42px;
	border-top: 6px solid var(--vs-oro);
	border-radius: var(--vs-radio-m) var(--vs-radio-m) var(--vs-radio-m) 4px;
	background: rgba(255, 255, 255, .8);
}

.vsb-tarjeta__titulo {
	margin: 0 0 14px;
	color: var(--vs-oscuro);
	font-size: 21px;
	font-weight: 700;
	text-transform: uppercase;
}

.vsb-tarjeta__texto {
	margin: 0;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.6;
}

.vsb-filosofia__cierre {
	margin-top: 26px;
	padding: 40px 44px;
	border-radius: var(--vs-radio-m) 4px var(--vs-radio-m) var(--vs-radio-m);
	background: var(--vs-oro);
}

.vsb-filosofia__cierre p {
	margin: 0;
	font-size: clamp(20px, 3vw, 34px);
	font-weight: 900;
	font-style: italic;
	line-height: 1.15;
	text-transform: uppercase;
}

@media (max-width: 860px) {
	.vsb-filosofia__cabecera { grid-template-columns: 1fr; gap: 24px; }
	.vsb-filosofia__tarjetas { grid-template-columns: 1fr; }
}

/* ── Equipo ──────────────────────────────────────────────── */

.vsb-equipo {
	border-radius: var(--vs-radio-l) 0 var(--vs-radio-l) 0;
	background: var(--vs-oscuro);
	color: #fff;
	font-family: var(--vs-fuente);
}

.vsb-equipo__titulo {
	margin: 0;
	color: #fff;
	font-size: clamp(32px, 4.6vw, 58px);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -.02em;
	text-transform: uppercase;
}

.vsb-equipo__entradilla {
	max-width: 56ch;
	margin: 14px 0 34px;
	color: #e2e2e2;
	font-weight: 300;
	line-height: 1.6;
}

.vsb-equipo__grid {
	display: grid;
	gap: 22px;
}

.vsb-persona { margin: 0; }

.vsb-persona__foto {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50px 18px 50px 18px;
	object-fit: cover;
	transition: transform .35s ease, border-radius .35s ease;
}

.vsb-persona:hover .vsb-persona__foto,
.vsb-persona:focus-within .vsb-persona__foto {
	transform: translateY(-6px);
	border-radius: 18px 110px 18px 110px;
}

.vsb-persona figcaption { margin-top: 18px; }

.vsb-persona__nombre {
	display: block;
	font-size: 19px;
	font-weight: 700;
}

.vsb-persona__rol {
	display: block;
	margin-top: 4px;
	color: var(--vs-oro);
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* ── Texto a dos columnas ────────────────────────────────── */

.vsb-doscol { font-family: var(--vs-fuente); }

.vsb-doscol__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: start;
}

.vsb-doscol__titulo {
	margin: 0;
	color: var(--vs-oscuro);
	font-size: clamp(36px, 5.4vw, 74px);
	font-weight: 900;
	font-style: italic;
	line-height: 1.02;
	letter-spacing: -.02em;
	text-transform: uppercase;
}

.vsb-doscol__titulo em {
	display: block;
	color: var(--vs-oro);
	font-style: italic;
}

.vsb-doscol__destacado {
	margin: 32px 0 0;
	padding-left: 24px;
	border-left: 6px solid var(--vs-oro);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
}

.vsb-doscol__der p {
	margin: 0 0 18px;
	font-weight: 300;
	line-height: 1.65;
}

@media (max-width: 860px) {
	.vsb-doscol__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ── Razones ─────────────────────────────────────────────── */

.vsb-razones {
	border-radius: var(--vs-radio-l) var(--vs-radio-l) 4px var(--vs-radio-l);
	background: var(--vs-oro);
	color: var(--vs-oscuro);
	font-family: var(--vs-fuente);
}

.vsb-razones__titulo {
	max-width: 16ch;
	margin: 0;
	font-size: clamp(32px, 4.6vw, 58px);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -.02em;
	text-transform: uppercase;
}

.vsb-razones__entradilla {
	max-width: 50ch;
	margin: 20px 0 56px;
	line-height: 1.6;
}

.vsb-razones__lista {
	display: grid;
	gap: 14px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: vsbrazon;
}

.vsb-razones__lista--1 { grid-template-columns: 1fr; }
.vsb-razones__lista--2 { grid-template-columns: repeat(2, 1fr); }
.vsb-razones__lista--3 { grid-template-columns: repeat(3, 1fr); }

.vsb-razones__lista li {
	position: relative;
	counter-increment: vsbrazon;
	padding: 20px 24px 20px 74px;
	border-radius: var(--vs-radio-s) var(--vs-radio-s) var(--vs-radio-s) 2px;
	background: #fff;
	font-size: 16px;
	line-height: 1.55;
}

.vsb-razones__lista li::before {
	content: counter(vsbrazon, decimal-leading-zero);
	position: absolute;
	top: 19px;
	left: 24px;
	color: var(--vs-oro);
	font-size: 20px;
	font-weight: 900;
	font-style: italic;
}

@media (max-width: 860px) {
	.vsb-razones__lista { grid-template-columns: 1fr !important; }
}

/* ── Datos y enlaces ─────────────────────────────────────── */

.vsb-datos { font-family: var(--vs-fuente); }

.vsb-datos__grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 56px;
	align-items: start;
}

.vsb-datos__titulo {
	margin: 0 0 22px;
	color: var(--vs-oscuro);
	font-size: 26px;
	font-weight: 700;
	text-transform: uppercase;
}

.vsb-datos__col p {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
}

.vsb-datos__enlaces {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vsb-datos__enlaces a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 24px;
	border-radius: var(--vs-radio-s) var(--vs-radio-s) var(--vs-radio-s) 2px;
	background: var(--vs-oscuro);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	transition: background .25s ease, transform .15s ease;
}

.vsb-datos__enlaces a:hover {
	background: var(--vs-oro);
	color: var(--vs-oscuro);
	transform: translateX(4px);
}

.vsb-datos__flecha { font-size: 20px; }

@media (max-width: 860px) {
	.vsb-datos__grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
	.vsb-persona__foto,
	.vsb-datos__enlaces a { transition: none; }
}

.vsb-doscol__izq { min-width: 0; }

.vsb-grid--5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 980px) {
	.vsb-grid--5 { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------------------------------------------------
 * Secciones de landing (viajar solo en grupo / viajes singles)
 * ---------------------------------------------------------- */

.vsb-sec {
	padding: clamp(56px, 7vw, 92px) clamp(18px, 4vw, 32px);
	font-family: var(--vs-fuente);
}

.vsb-sec--blanco { background: #fff; color: var(--vs-oscuro); }
.vsb-sec--crema  { background: #fbf7ef; color: var(--vs-oscuro); }
.vsb-sec--arena  { background: #f3ede1; color: var(--vs-oscuro); }
.vsb-sec--oscuro { background: var(--vs-oscuro); color: var(--vs-texto); }

.vsb-sec--oscuro .vsb-sec__titulo,
.vsb-sec--oscuro .vsb-paso__titulo,
.vsb-sec--oscuro .vsb-segmento__titulo { color: #fff; }

.vsb-sec__head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }

.vsb-sec__titulo {
	margin: 0 0 12px;
	font-size: clamp(28px, 4vw, 46px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
}

.vsb-sec__lead {
	max-width: var(--vsb-ancho-texto, 68ch);
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	opacity: .82;
}

.vsb-sec__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

.vsb-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Variantes de botón usadas en las landings */

.vsb-btn--oscuro {
	background: var(--vs-oscuro);
	color: #fff;
}

.vsb-btn--oscuro:hover {
	background: #000;
	color: #fff;
}

.vsb-btn--contorno {
	border: 2px solid currentColor;
	background: transparent;
	color: inherit;
}

.vsb-btn--contorno:hover {
	background: var(--vs-oro);
	border-color: var(--vs-oro);
	color: var(--vs-oscuro);
}

.vsb-btn--wa {
	background: #25d366;
	color: #fff;
}

.vsb-btn--wa:hover { background: #1ebe57; color: #fff; }

/* ── Hero: ventajas y doble botón ────────────────────────── */

.vsb-hero__puntos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 26px;
	max-width: 780px;
	margin: 0 auto 28px;
	text-align: left;
}

.vsb-hero__puntos li {
	margin-bottom: 0;
	color: rgba(255, 255, 255, .92);
	font-size: 15px;
}

.vsb-hero__puntos li::before {
	content: "";
	position: absolute;
	top: .35em;
	left: 0;
	width: 14px;
	height: 8px;
	border-left: 3px solid var(--vs-oro);
	border-bottom: 3px solid var(--vs-oro);
	transform: rotate(-45deg);
}

.vsb-hero__titulo em {
	color: var(--vs-oro);
	font-style: italic;
}

.vsb-hero__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.vsb-hero__botones .vsb-btn--contorno { color: #fff; }

/* ── Tablero de salidas ──────────────────────────────────── */

.vsb-tablero {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 16px;
}

.vsb-salida {
	display: flex;
	gap: 18px;
	padding: 20px;
	border: 1px solid rgba(0, 0, 0, .09);
	border-radius: var(--vs-radio-campo) var(--vs-radio-campo) var(--vs-radio-campo) 2px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}

a.vsb-salida:hover {
	border-color: var(--vs-oro);
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, .09);
}

.vsb-salida__fecha {
	flex: 0 0 66px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px 0;
	border-radius: 12px 12px 12px 2px;
	background: var(--vs-oscuro);
	color: #fff;
	text-align: center;
	line-height: 1.1;
}

.vsb-salida__fecha b { font-size: 24px; font-weight: 800; }

.vsb-salida__fecha span {
	color: var(--vs-oro);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.vsb-salida__fecha em {
	font-size: 11px;
	font-style: normal;
	opacity: .7;
}

.vsb-salida__cuerpo { flex: 1; min-width: 0; }

.vsb-salida__titulo {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.vsb-salida__meta {
	margin: 0 0 12px;
	font-size: 14px;
	opacity: .7;
}

.vsb-salida__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.vsb-salida__precio { margin: 0; line-height: 1.15; }

.vsb-salida__precio span {
	display: block;
	font-size: 11.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .6;
}

.vsb-salida__precio b { font-size: 21px; font-weight: 800; }

.vsb-salida .vsb-badge {
	min-width: 0;
	padding: 6px 13px;
	border-radius: var(--vs-radio-pill);
	font-size: 11.5px;
}

.vsb-plazas {
	display: inline-block;
	margin-top: 12px;
	padding: 5px 12px;
	border-radius: var(--vs-radio-pill);
	background: rgba(0, 0, 0, .06);
	font-size: 12px;
	font-weight: 600;
}

.vsb-plazas--ok { background: rgba(126, 196, 162, .25); color: #1c5c3f; }
.vsb-plazas--ultimas { background: rgba(207, 84, 61, .14); color: #a33a24; }

/* ── Pasos ───────────────────────────────────────────────── */

.vsb-pasos__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: vsbpaso;
}

.vsb-paso {
	position: relative;
	counter-increment: vsbpaso;
	padding: 30px 26px 28px;
	border-top: 5px solid var(--vs-oro);
	border-radius: var(--vs-radio-tarjeta) var(--vs-radio-tarjeta) var(--vs-radio-tarjeta) 4px;
	background: #fff;
}

.vsb-paso::before {
	content: counter(vsbpaso, decimal-leading-zero);
	display: block;
	margin-bottom: 10px;
	color: var(--vs-oro);
	font-size: 19px;
	font-weight: 900;
	font-style: italic;
}

.vsb-paso__titulo {
	margin: 0 0 10px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.vsb-paso__texto {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.6;
	opacity: .8;
}

/* ── Segmentos ───────────────────────────────────────────── */

.vsb-segmento {
	display: flex;
	flex-direction: column;
	padding: 28px 26px;
	border: 1px solid rgba(0, 0, 0, .09);
	border-radius: var(--vs-radio-tarjeta) var(--vs-radio-tarjeta) var(--vs-radio-tarjeta) 4px;
	background: #fff;
}

.vsb-sec--oscuro .vsb-segmento {
	border-color: var(--vs-linea);
	background: var(--vs-panel);
}

.vsb-segmento__titulo {
	margin: 0 0 10px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

.vsb-segmento__texto {
	flex: 1;
	margin: 0 0 16px;
	font-size: 15.5px;
	line-height: 1.6;
	opacity: .82;
}

.vsb-segmento__enlace {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #8a6b0f;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.vsb-sec--oscuro .vsb-segmento__enlace { color: var(--vs-oro); }

.vsb-segmento__enlace:hover { text-decoration: underline; }

/* ── Texto corrido ───────────────────────────────────────── */

.vsb-prosa {
	max-width: var(--vsb-ancho-texto, 74ch);
	font-size: 17px;
	line-height: 1.7;
}

.vsb-prosa p { margin: 0 0 1.1em; }

.vsb-prosa__cierre {
	padding-left: 22px;
	border-left: 5px solid var(--vs-oro);
	font-weight: 600;
}

.vsb-prosa .vsb-btn { margin-top: 10px; }

/* ── FAQs ────────────────────────────────────────────────── */

.vsb-faqs__lista { display: grid; gap: 10px; }

.vsb-faq {
	padding: 16px 22px;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: var(--vs-radio-campo) var(--vs-radio-campo) var(--vs-radio-campo) 2px;
	background: #fff;
}

.vsb-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-size: 16.5px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.vsb-faq summary::-webkit-details-marker { display: none; }

.vsb-faq summary::after {
	content: "+";
	flex: 0 0 auto;
	color: var(--vs-oro);
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
}

.vsb-faq[open] summary::after { content: "–"; }

.vsb-faq__cuerpo p {
	margin: 12px 0 0;
	font-size: 15.5px;
	line-height: 1.65;
	opacity: .82;
}

.vsb-faqs__nota { margin: 24px 0 0; font-size: 15.5px; }

/* ── Rejilla de enlaces ──────────────────────────────────── */

.vsb-enlaces__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.vsb-enlace {
	padding: 12px 20px;
	border: 1.5px solid rgba(0, 0, 0, .12);
	border-radius: var(--vs-radio-pill);
	background: #fff;
	color: inherit;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.vsb-enlace:hover {
	border-color: var(--vs-oro);
	background: var(--vs-oro);
	color: var(--vs-oscuro);
}

/* ── Tabla comparativa ───────────────────────────────────── */

.vsb-tabla {
	width: 100%;
	margin: 0 0 24px;
	border-collapse: collapse;
	font-size: 15.5px;
}

.vsb-tabla th,
.vsb-tabla td {
	padding: 15px 18px;
	border-bottom: 1px solid rgba(0, 0, 0, .1);
	text-align: left;
	vertical-align: top;
}

.vsb-tabla thead th {
	border-bottom: 2px solid var(--vs-oro);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.vsb-tabla tbody th {
	width: 22%;
	font-weight: 700;
}

/* En móvil la tabla se convierte en acordeón: cada concepto es una barra
   pulsable y dentro se comparan las dos opciones. */
@media (max-width: 640px) {

	.vsb-tabla,
	.vsb-tabla tbody,
	.vsb-tabla th,
	.vsb-tabla td,
	.vsb-tabla tr { display: block; }

	.vsb-tabla thead { display: none; }

	.vsb-tabla tbody tr {
		margin-bottom: 10px;
		overflow: hidden;
		border: 1px solid rgba(0, 0, 0, .1);
		border-radius: var(--vs-radio-campo);
		background: #fff;
	}

	/* La barra pulsable es la propia celda de cabecera */
	.vsb-tabla[data-vsb-tabla] tbody th {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		width: auto;
		padding: 15px 18px;
		border-bottom: 0;
		background: var(--vs-oscuro);
		color: #fff;
		font-weight: 700;
		cursor: pointer;
	}

	.vsb-tabla[data-vsb-tabla] tbody th:focus-visible {
		outline: 3px solid var(--vs-oro);
		outline-offset: -3px;
	}

	.vsb-tabla[data-vsb-tabla] tbody th::after {
		content: "";
		flex: none;
		width: 10px;
		height: 10px;
		border-right: 2.5px solid var(--vs-oro);
		border-bottom: 2.5px solid var(--vs-oro);
		transform: translateY(-3px) rotate(45deg);
		transition: transform .25s ease;
	}

	.vsb-tabla[data-vsb-tabla] tr.esta-abierta th::after {
		transform: translateY(2px) rotate(-135deg);
	}

	/* Celdas: ocultas si la fila está plegada */
	.vsb-tabla td {
		padding: 14px 18px;
		border-bottom: 1px solid rgba(0, 0, 0, .07);
	}

	.vsb-tabla tr td:last-child { border-bottom: 0; }

	.vsb-tabla[data-vsb-tabla] tr.esta-cerrada td { display: none; }

	/* Cada celda dice a qué columna pertenece */
	.vsb-tabla td::before {
		content: attr(data-etiqueta);
		display: block;
		margin-bottom: 4px;
		color: #8a6b0f;
		font-size: 11.5px;
		font-weight: 700;
		letter-spacing: .11em;
		text-transform: uppercase;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vsb-tabla[data-vsb-tabla] tbody th::after { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
	.vsb-salida,
	.vsb-enlace { transition: none; }
}

/* Contenedores de sección (el estilo va en los hijos) */

.vsb-salidas,
.vsb-segmentos,
.vsb-texto,
.vsb-comparativa { display: block; }

/* -------------------------------------------------------------
 * Página de contacto
 * ---------------------------------------------------------- */

.vsb-datos-contacto {
	display: grid;
	gap: 22px;
	max-width: 1180px;
	margin: 0 auto;
	padding: clamp(30px, 4vw, 48px) clamp(18px, 3vw, 28px);
	font-family: var(--vs-fuente);
}

.vsb-dato {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 15px;
	border-radius: 32px 14px 32px 14px;
	background: #f6f6f6;
	color: var(--vs-oscuro);
	text-decoration: none;
	transition: background .25s ease, transform .25s ease;
}

a.vsb-dato:hover,
a.vsb-dato:focus-visible {
	background: var(--vs-oro);
	transform: translateY(-3px);
}

.vsb-dato__disco {
	display: grid;
	place-items: center;
	flex: none;
	width: 45px;
	height: 45px;
	border: 4px solid var(--vs-oro);
	border-right-color: transparent;
	border-radius: 50%;
	background: var(--vs-oscuro);
	color: var(--vs-oro);
	font-size: 20px;
	font-weight: 900;
	font-style: italic;
}

a.vsb-dato:hover .vsb-dato__disco,
a.vsb-dato:focus-visible .vsb-dato__disco {
	border-color: var(--vs-oscuro);
	border-right-color: transparent;
}

.vsb-dato__txt { min-width: 0; }

.vsb-dato__etiqueta {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .6;
}

.vsb-dato__valor {
	display: block;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.01em;
	word-break: break-word;
}

/* ── Panel de formulario en columna ──────────────────────── */

.vsb-form-panel--col {
	border: 0;
	border-radius: 32px 14px 32px 32px;
	background: var(--vs-oscuro);
	color: #fff;
	font-family: var(--vs-fuente);
}

.vsb-form-panel--col .vsb-form-panel__titulo {
	margin: 0 0 18px;
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 700;
	letter-spacing: -.02em;
	text-transform: uppercase;
}

@media (min-width: 901px) {
	.vsb-form-panel--fijo {
		position: sticky;
		top: 32px;
	}
}

/* ── Secciones legales ───────────────────────────────────── */

.vsb-legal__titulo {
	margin: 0 0 22px;
	padding-bottom: 14px;
	border-bottom: 4px solid var(--vs-oro);
	border-radius: 0 0 0 2px;
	font-family: var(--vs-fuente);
	font-size: clamp(22px, 2.6vw, 32px);
	font-weight: 700;
	letter-spacing: -.02em;
	text-transform: uppercase;
}

.vsb-texto--legal .vsb-sec__titulo {
	padding-bottom: 14px;
	border-bottom: 4px solid var(--vs-oro);
	font-size: clamp(22px, 2.6vw, 32px);
	text-transform: uppercase;
}

.vsb-texto--legal .vsb-prosa p { font-weight: 300; }

/* ── Mapa ────────────────────────────────────────────────── */

.vsb-mapa {
	margin-bottom: 56px;
	font-family: var(--vs-fuente);
}

.vsb-mapa__marco {
	overflow: hidden;
	border-radius: 32px 14px 32px 32px;
	line-height: 0;
}

.vsb-mapa__marco iframe {
	display: block;
	width: 100%;
	height: var(--vsb-mapa-alto, 340px);
	border: 0;
}

/* ── Ficha de datos ──────────────────────────────────────── */

.vsb-ficha-datos {
	margin-bottom: 56px;
	font-family: var(--vs-fuente);
}

.vsb-ficha-datos__caja {
	padding: 34px 36px;
	border-radius: 32px 14px 32px 32px;
	background: var(--vs-oscuro);
	color: #fff;
}

.vsb-ficha-datos dl {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 2px 24px;
	margin: 0;
}

.vsb-ficha-datos dt {
	padding: 12px 0;
	border-top: 1px solid rgba(255, 255, 255, .14);
	color: var(--vs-oro);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.vsb-ficha-datos dd {
	margin: 0;
	padding: 12px 0;
	border-top: 1px solid rgba(255, 255, 255, .14);
	font-weight: 300;
}

.vsb-ficha-datos dt:first-of-type,
.vsb-ficha-datos dd:first-of-type { border-top: 0; }

.vsb-ficha-datos a {
	color: var(--vs-oro);
	font-weight: 600;
	text-decoration: none;
}

.vsb-ficha-datos a:hover { text-decoration: underline; }

@media (max-width: 900px) {
	.vsb-ficha-datos dl { grid-template-columns: 1fr; gap: 0; }
	.vsb-ficha-datos dt { padding-bottom: 0; }
	.vsb-ficha-datos dd { border-top: 0; padding-top: 2px; }
}

@media (prefers-reduced-motion: reduce) {
	.vsb-dato { transition: none; }
}

/* Columnas de la página de contacto */

.vsb-contacto-cols {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 clamp(18px, 3vw, 28px) clamp(40px, 5vw, 70px);
	gap: clamp(28px, 4vw, 56px);
	align-items: flex-start;
}

/* -------------------------------------------------------------
 * Portada · variante «moderno» (alineada a la izquierda)
 * ---------------------------------------------------------- */

.vsb-hero--moderno {
	justify-content: flex-start;
	text-align: left;
}

.vsb-hero--moderno .vsb-hero__capa {
	background: linear-gradient(100deg, rgba(17, 17, 17, .92) 0%, rgba(17, 17, 17, .78) 42%, rgba(17, 17, 17, .35) 100%);
}

.vsb-hero--moderno .vsb-hero__inner {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 56px);
}

.vsb-hero--moderno .vsb-kicker {
	justify-content: flex-start;
	margin-bottom: 18px;
	font-size: 13px;
	letter-spacing: .2em;
}

.vsb-hero--moderno .vsb-hero__titulo {
	/* El ancho lo puede fijar el bloque; si no, 15 caracteres. */
	max-width: var(--vsb-hero-ancho, 15ch);
	margin: 0 0 22px;
	font-size: clamp(32px, 4.6vw, 60px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.02em;
	text-transform: none;
}

.vsb-hero--moderno .vsb-hero__titulo em {
	color: var(--vs-oro);
	font-style: normal;
}

.vsb-hero--moderno .vsb-hero__texto {
	max-width: var(--vsb-ancho-texto, 62ch);
	margin: 0 0 26px;
	font-size: clamp(16px, 1.5vw, 18.5px);
	line-height: 1.6;
	color: rgba(255, 255, 255, .88);
}

.vsb-hero--moderno .vsb-hero__texto a {
	color: var(--vs-oro);
	text-decoration: none;
}

.vsb-hero--moderno .vsb-hero__texto a:hover { text-decoration: underline; }

/* Ventajas en píldoras */

.vsb-hero--moderno .vsb-hero__puntos {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	max-width: 780px;
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}

.vsb-hero--moderno .vsb-hero__puntos li {
	position: relative;
	margin: 0;
	padding: 11px 20px 11px 42px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--vs-radio-pill);
	background: rgba(20, 20, 20, .62);
	color: #fff;
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.3;
	backdrop-filter: blur(3px);
}

.vsb-hero--moderno .vsb-hero__puntos li::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 20px;
	width: 12px;
	height: 7px;
	border-left: 2.5px solid var(--vs-oro);
	border-bottom: 2.5px solid var(--vs-oro);
	transform: translateY(-70%) rotate(-45deg);
}

/* Botones */

.vsb-hero--moderno .vsb-hero__botones { justify-content: flex-start; }

.vsb-hero--moderno .vsb-btn {
	padding: 15px 30px;
	font-size: 15.5px;
}

.vsb-hero--moderno .vsb-btn--contorno {
	border: 1.5px solid rgba(255, 255, 255, .85);
	background: rgba(24, 24, 24, .72);
	color: #fff;
}

.vsb-hero--moderno .vsb-btn--contorno:hover {
	background: #fff;
	border-color: #fff;
	color: var(--vs-oscuro);
}

@media (max-width: 700px) {
	.vsb-hero--moderno .vsb-hero__titulo { max-width: none; }
	.vsb-hero--moderno .vsb-hero__puntos li { width: 100%; }
	.vsb-hero--moderno .vsb-hero__botones .vsb-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.vsb-hero--moderno .vsb-hero__puntos li { backdrop-filter: none; }
}

/* -------------------------------------------------------------
 * Carrusel de tarjetas
 * ---------------------------------------------------------- */

.vsb-carrusel-caja { position: relative; }

.vsb-carrusel {
	display: flex;
	gap: clamp(18px, 2.4vw, 28px);
	overflow-x: auto;
	padding-bottom: 6px;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 0;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

.vsb-carrusel::-webkit-scrollbar { display: none; }

.vsb-carrusel:focus-visible {
	outline: 3px solid var(--vs-oro);
	outline-offset: 6px;
	border-radius: 8px;
}

.vsb-carrusel > * {
	flex: 0 0 calc(
		(100% - (var(--vsb-visibles, 3) - 1) * clamp(18px, 2.4vw, 28px)) / var(--vsb-visibles, 3)
	);
	scroll-snap-align: start;
}

/* Flechas */

.vsb-carrusel__flecha {
	position: absolute;
	top: calc(50% - 34px);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0 0 4px;
	border: 0;
	border-radius: 50%;
	background: var(--vs-oro);
	color: var(--vs-oscuro);
	font-family: var(--vs-fuente);
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
	transition: background .2s ease, transform .15s ease;
}

.vsb-carrusel__flecha:hover { background: var(--vs-oro-hover); }
.vsb-carrusel__flecha:active { transform: scale(.94); }

.vsb-carrusel__flecha:focus-visible {
	outline: 3px solid var(--vs-oscuro);
	outline-offset: 2px;
}

.vsb-carrusel__flecha--izq { left: -14px; }
.vsb-carrusel__flecha--der { right: -14px; }

/* Puntos */

.vsb-carrusel__puntos {
	display: flex;
	justify-content: center;
	gap: 9px;
	margin-top: 24px;
}

.vsb-carrusel__punto {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(27, 27, 27, .22);
	cursor: pointer;
	transition: width .25s ease, background .25s ease;
}

.vsb-carrusel__punto.is-activo {
	width: 28px;
	border-radius: 999px;
	background: var(--vs-oro);
}

.vsb-sec--oscuro .vsb-carrusel__punto { background: rgba(255, 255, 255, .28); }
.vsb-sec--oscuro .vsb-carrusel__punto.is-activo { background: var(--vs-oro); }

/* Menos tarjetas a la vista según el ancho */

@media (max-width: 1100px) {
	.vsb-carrusel > * {
		flex-basis: calc((100% - clamp(18px, 2.4vw, 28px)) / 2);
	}
	.vsb-carrusel__flecha--izq { left: 4px; }
	.vsb-carrusel__flecha--der { right: 4px; }
}

/* En móvil no hay carrusel: las tarjetas se apilan, como en la rejilla.
   Desplazar en horizontal compite con el scroll de la página y esconde
   contenido que en vertical se ve de un vistazo. */
@media (max-width: 700px) {
	.vsb-carrusel {
		display: grid;
		grid-template-columns: 1fr;
		overflow: visible;
		padding-bottom: 0;
		scroll-snap-type: none;
	}

	.vsb-carrusel > * {
		flex: none;
		width: auto;
		scroll-snap-align: none;
	}

	.vsb-carrusel__flecha,
	.vsb-carrusel__puntos { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.vsb-carrusel { scroll-behavior: auto; }
	.vsb-carrusel__punto { transition: none; }
}

/* Entradilla bajo el título de sección */

.vsb-seccion__lead {
	max-width: var(--vsb-ancho-texto, 62ch);
	margin: -4px 0 32px;
	font-family: var(--vs-fuente);
	font-size: clamp(15.5px, 1.4vw, 17.5px);
	line-height: 1.65;
	opacity: .82;
}

.vsb-ventajas .vsb-seccion__lead,
.vsb-sec--oscuro .vsb-seccion__lead { color: var(--vs-apagado); opacity: 1; }

/* -------------------------------------------------------------
 * Tarjetas de categoría
 * ---------------------------------------------------------- */

.vsb-categorias { display: block; }

.vsb-categorias .vsb-sec__head {
	max-width: 720px;
	margin-bottom: clamp(30px, 4vw, 46px);
}

.vsb-categorias .vsb-kicker {
	margin-bottom: 14px;
	font-size: 12.5px;
	letter-spacing: .19em;
}

.vsb-categorias .vsb-sec__titulo {
	font-size: clamp(28px, 3.4vw, 42px);
	font-weight: 800;
	letter-spacing: -.025em;
}

.vsb-categorias .vsb-sec__lead {
	color: #5c6470;
	font-size: clamp(16px, 1.4vw, 18px);
	line-height: 1.65;
	opacity: 1;
}

.vsb-cat {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/* Alto mínimo, no fijo: con aspect-ratio y overflow oculto, una
	   descripción larga empujaba el título fuera de la tarjeta. */
	min-height: 340px;
	min-width: 0;
	overflow: hidden;
	border-radius: 20px;
	background: var(--vs-oscuro);
	color: #fff;
	font-family: var(--vs-fuente);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .1);
	transition: transform .3s ease, box-shadow .3s ease;
}

/* El panel no pinta nada: deja que la foto, el título y el texto se
   coloquen directamente dentro de la tarjeta. */
.vsb-cat__panel { display: contents; }

.vsb-cat:hover {
	transform: translateY(-5px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
}

.vsb-cat__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.vsb-cat__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}

.vsb-cat:hover .vsb-cat__img { transform: scale(1.06); }

.vsb-cat__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 15, 15, 0) 30%, rgba(15, 15, 15, .55) 58%, rgba(10, 10, 10, .94) 100%);
}

.vsb-cat__disco {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--vs-oro);
	color: var(--vs-oscuro);
}

/* Sobre la esquina de la foto */
.vsb-cat__panel > .vsb-cat__disco {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 3;
}

/* Sin foto acompaña al texto, sin posicionar */
.vsb-cat__disco--suelto {
	position: static;
	margin-bottom: 14px;
}

.vsb-cat__disco svg { width: 19px; height: 19px; }

/* Escritorio: el título va sobre la foto, encima de la descripción. */

.vsb-cat__titulo {
	position: relative;
	z-index: 2;
	margin: 0;
	padding: 0 22px 8px;
	font-size: clamp(20px, 1.9vw, 24px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
}

.vsb-cat__cuerpo {
	position: relative;
	z-index: 2;
	padding: 0 22px 26px;
}

.vsb-cat--sin-foto {
	aspect-ratio: auto;
	min-height: 230px;
}

.vsb-cat--sin-foto .vsb-cat__titulo { padding-top: 26px; }

.vsb-cat__texto {
	margin: 0;
	color: rgba(255, 255, 255, .9);
	font-size: 14.5px;
	line-height: 1.52;
}

.vsb-cat__enlace {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	color: var(--vs-oro);
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none;
}

/* El enlace cubre toda la tarjeta, así se puede pulsar en cualquier punto. */
.vsb-cat__enlace::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.vsb-cat__enlace:hover { text-decoration: underline; }

/* El recuadro dorado solo para quien navega con teclado: al tocar con el
   dedo no aparece, porque :focus-visible no se activa por puntero. */
.vsb-cat__boton:focus-visible,
.vsb-cat__enlace:focus-visible {
	outline: 3px solid var(--vs-oro);
	outline-offset: 2px;
}

/* En escritorio el botón no se oculta (se llevaría el título con él):
   solo se le quita el aspecto de botón y deja de responder al clic. */
.vsb-cat__boton {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: default;
	pointer-events: none;
}

.vsb-cat__chevron,
.vsb-cat__disco--barra { display: none; }

/* -------------------------------------------------------------
 * Acordeón (solo móvil)
 * ---------------------------------------------------------- */

@media (max-width: 700px) {

	.vsb-cat--plegable {
		display: block;
		aspect-ratio: auto;
		min-height: 0;
		border-radius: 16px;
		box-shadow: none;
		transform: none !important;
	}

	/* Las tarjetas sin foto reservan alto y empujan el contenido abajo.
	   Dentro del acordeón eso dejaba un hueco blanco con la barra caída
	   al fondo: aquí manda el plegado. */
	.vsb-cat--plegable.vsb-cat--sin-foto {
		display: block;
		min-height: 0;
		justify-content: flex-start;
	}

	/* La barra pulsable: es el mismo h3, no una copia. */
	.vsb-cat--plegable .vsb-cat__titulo {
		position: static;
		padding: 0;
		transform: none;
		pointer-events: auto;
		font-size: 17px;
	}

	/* El tema colorea button:hover y button:focus con su color de acento,
	   y al pulsar la barra el botón se queda enfocado: de ahí el naranja
	   en la ficha abierta. Se fija el fondo en todos los estados. */
	.vsb-cat--plegable .vsb-cat__boton,
	.vsb-cat--plegable .vsb-cat__boton:hover,
	.vsb-cat--plegable .vsb-cat__boton:focus,
	.vsb-cat--plegable .vsb-cat__boton:active,
	.vsb-cat--plegable.esta-abierta .vsb-cat__boton {
		background: var(--vs-oscuro) !important;
		color: #fff !important;
		box-shadow: none;
	}

	.vsb-cat--plegable .vsb-cat__boton {
		display: flex;
		align-items: center;
		gap: 14px;
		width: 100%;
		margin: 0;
		padding: 16px 18px;
		border: 0;
		border-radius: 16px 16px 0 0;
		background: var(--vs-oscuro);
		color: #fff;
		font: inherit;
		text-align: left;
		cursor: pointer;
		box-sizing: border-box;
	}

	/* Cerrada, la barra es toda la tarjeta: también se redondea abajo. */
	.vsb-cat--plegable.esta-cerrada .vsb-cat__boton {
		border-radius: 16px;
	}

	.vsb-cat--plegable .vsb-cat__boton { pointer-events: auto; }

	.vsb-cat--plegable .vsb-cat__disco--barra {
		display: grid;
		position: static;
		flex: none;
		width: 34px;
		height: 34px;
	}

	.vsb-cat--plegable .vsb-cat__disco--barra svg { width: 17px; height: 17px; }

	.vsb-cat--plegable .vsb-cat__rotulo { flex: 1; min-width: 0; }

	.vsb-cat--plegable .vsb-cat__chevron {
		display: block;
		flex: none;
		width: 11px;
		height: 11px;
		border-right: 2.5px solid var(--vs-oro);
		border-bottom: 2.5px solid var(--vs-oro);
		transform: translateY(-3px) rotate(45deg);
		transition: transform .25s ease;
	}

	.vsb-cat--plegable.esta-abierta .vsb-cat__chevron {
		transform: translateY(2px) rotate(-135deg);
	}

	/* Panel plegado */
	.vsb-cat--plegable.esta-cerrada .vsb-cat__panel { display: none; }

	/* Abierto: foto arriba, texto debajo. Nada superpuesto. */
	.vsb-cat--plegable .vsb-cat__panel { display: block; }

	.vsb-cat--plegable .vsb-cat__media {
		position: relative;
		inset: auto;
		aspect-ratio: 16 / 10;
	}
	.vsb-cat--plegable .vsb-cat__velo { display: none; }

	.vsb-cat--plegable .vsb-cat__cuerpo {
		position: static;
		padding: 18px;
		background: #fff;
		color: var(--vs-oscuro);
	}

	.vsb-cat--plegable .vsb-cat__texto { color: #4a5361; }

	/* El disco ya está en la barra. */
	.vsb-cat--plegable .vsb-cat__disco:not(.vsb-cat__disco--barra) { display: none; }

	/* Sin foto no hay marco que mostrar. */
	.vsb-cat--sin-foto .vsb-cat__media { display: none; }

	/* El enlace cubre el panel entero (foto y texto), pero no la barra:
	   esa tiene que seguir abriendo y cerrando la ficha. */
	.vsb-cat--plegable .vsb-cat__panel { position: relative; }

	.vsb-cat--plegable .vsb-cat__enlace::after {
		display: block;
		position: absolute;
		inset: 0;
		z-index: 1;
	}

	.vsb-cat--plegable .vsb-cat__media,
	.vsb-cat--plegable .vsb-cat__cuerpo { cursor: pointer; }

	/* En el panel abierto el enlace es la única salida hacia la categoría:
	   se pinta como botón para que se vea a la primera. */
	.vsb-cat--plegable .vsb-cat__enlace {
		position: relative;
		z-index: 2;
		display: inline-flex;
		margin-top: 16px;
		padding: 12px 22px;
		border-radius: var(--vs-radio-pill);
		background: var(--vs-oro);
		color: var(--vs-oscuro);
		font-size: 15px;
		font-weight: 700;
	}

	.vsb-cat--plegable .vsb-cat__enlace:hover {
		background: var(--vs-oro-hover);
		color: var(--vs-oscuro);
		text-decoration: none;
	}
}

.vsb-cat__subtitulo {
	margin: 0 0 6px;
	color: var(--vs-oro);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

@media (max-width: 700px) {
	.vsb-cat--plegable .vsb-cat__subtitulo { color: #8a6b0f; }
}

/* -------------------------------------------------------------
 * Encabezado de sección
 * ---------------------------------------------------------- */

.vsb-encabezado {
	padding: clamp(40px, 5vw, 68px) clamp(18px, 4vw, 32px) clamp(24px, 3vw, 36px);
	font-family: var(--vs-fuente);
}

.vsb-encabezado__inner {
	max-width: 1180px;
	margin: 0 auto;
}

.vsb-encabezado--centro { text-align: center; }

.vsb-encabezado--centro .vsb-kicker,
.vsb-encabezado--centro .vsb-eyebrow { justify-content: center; }

.vsb-encabezado--centro .vsb-encabezado__lead { margin-inline: auto; }

.vsb-encabezado__titulo {
	margin: 0;
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.025em;
}

.vsb-encabezado__titulo em {
	color: var(--vs-oro);
	font-style: normal;
}

.vsb-encabezado--discreto .vsb-encabezado__titulo { font-size: clamp(22px, 2.4vw, 30px); }
.vsb-encabezado--medio .vsb-encabezado__titulo { font-size: clamp(28px, 3.6vw, 42px); }
.vsb-encabezado--grande .vsb-encabezado__titulo { font-size: clamp(32px, 5vw, 58px); }

.vsb-encabezado__lead {
	max-width: var(--vsb-ancho-texto, 62ch);
	margin: 14px 0 0;
	font-size: clamp(15.5px, 1.4vw, 18px);
	line-height: 1.65;
	color: #5c6470;
}

.vsb-encabezado.vsb-sec--oscuro .vsb-encabezado__titulo { color: #fff; }
.vsb-encabezado.vsb-sec--oscuro .vsb-encabezado__lead { color: var(--vs-apagado); }

/* -------------------------------------------------------------
 * Tipografía de los títulos
 *
 * El tema declara font-family sobre h1…h4. Una declaración directa
 * sobre el elemento gana siempre a la heredada del contenedor, así
 * que la fuente hay que fijarla en el propio título.
 * ---------------------------------------------------------- */

.vsb-encabezado--fuente-poppins .vsb-encabezado__titulo,
.vsb-encabezado__lead,
.vsb-sec__titulo,
.vsb-sec__lead,
.vsb-seccion__titulo,
.vsb-seccion__lead,
.vsb-hero__titulo,
.vsb-hero__texto,
.vsb-cabecera__titulo,
.vsb-cabecera__subtitulo,
.vsb-cat__titulo,
.vsb-cat__texto,
.vsb-ficha__titulo,
.vsb-viaje__destino,
.vsb-salida__titulo,
.vsb-paso__titulo,
.vsb-segmento__titulo,
.vsb-ventaja__titulo,
.vsb-tipo__titulo,
.vsb-tarjeta__titulo,
.vsb-persona__nombre,
.vsb-equipo__titulo,
.vsb-filosofia__titulo,
.vsb-doscol__titulo,
.vsb-razones__titulo,
.vsb-datos__titulo,
.vsb-legal__titulo,
.vsb-hablamos__titulo,
.vsb-form-panel__titulo,
.vsb-cta__titulo,
.vsb-opinion__nombre,
.vsb-faq summary,
.vsb-kicker,
.vsb-eyebrow {
	font-family: var(--vs-fuente);
}

/* El titular del encabezado usa por defecto la tipografía de títulos del
   tema; con la opción «Poppins» se fuerza la del resto de los bloques. */
.vsb-encabezado--fuente-poppins .vsb-encabezado__titulo {
	font-family: var(--vs-fuente);
	font-weight: 800;
	letter-spacing: -.025em;
}

.vsb-encabezado--fuente-tema .vsb-encabezado__titulo {
	font-weight: 700;
	letter-spacing: -.01em;
}

/* Icono opcional de las tarjetas con enlace */

.vsb-segmento__icono {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: 16px;
	border-radius: 14px 14px 14px 3px;
	background: rgba(228, 179, 38, .16);
	color: #8a6b0f;
}

.vsb-segmento__icono svg {
	width: 23px;
	height: 23px;
}

.vsb-sec--oscuro .vsb-segmento__icono {
	background: rgba(228, 179, 38, .18);
	color: var(--vs-oro);
}

/* -------------------------------------------------------------
 * Opciones compartidas de la cabecera de sección
 * ---------------------------------------------------------- */

.vsb-sec__head--centro { text-align: center; }

.vsb-sec__head--centro .vsb-kicker,
.vsb-sec__head--centro .vsb-eyebrow { justify-content: center; }

.vsb-sec__head--centro .vsb-sec__lead { margin-inline: auto; }

.vsb-sec__head--discreto .vsb-sec__titulo { font-size: clamp(22px, 2.4vw, 30px); }
.vsb-sec__head--medio .vsb-sec__titulo { font-size: clamp(28px, 3.6vw, 42px); }
.vsb-sec__head--grande .vsb-sec__titulo { font-size: clamp(32px, 5vw, 58px); }

.vsb-sec__head--fuente-poppins .vsb-sec__titulo { font-family: var(--vs-fuente); }
.vsb-sec__head--fuente-tema .vsb-sec__titulo { font-family: inherit; }

.vsb-sec__titulo em {
	color: var(--vs-oro);
	font-style: normal;
}

/* Las secciones que antes tenían su propio título comparten ahora estilo */

.vsb-ventajas .vsb-sec__titulo,
.vsb-equipo .vsb-sec__titulo,
.vsb-razones .vsb-sec__titulo,
.vsb-sec--oscuro .vsb-sec__titulo { color: #fff; }

.vsb-razones .vsb-sec__titulo { color: var(--vs-oscuro); }

.vsb-ventajas .vsb-sec__lead,
.vsb-equipo .vsb-sec__lead,
.vsb-sec--oscuro .vsb-sec__lead { color: var(--vs-apagado); opacity: 1; }

/* -------------------------------------------------------------
 * Portada · ajustes de cabecera
 * ---------------------------------------------------------- */

.vsb-hero--al-izquierda {
	justify-content: flex-start;
	text-align: left;
}

.vsb-hero--al-izquierda .vsb-kicker,
.vsb-hero--al-izquierda .vsb-eyebrow,
.vsb-hero--al-izquierda .vsb-hero__botones,
.vsb-hero--al-izquierda .vsb-hero__puntos { justify-content: flex-start; }

.vsb-hero--al-centro {
	justify-content: center;
	text-align: center;
}

.vsb-hero--al-centro .vsb-kicker,
.vsb-hero--al-centro .vsb-eyebrow,
.vsb-hero--al-centro .vsb-hero__botones,
.vsb-hero--al-centro .vsb-hero__puntos { justify-content: center; }

.vsb-hero--al-centro .vsb-hero__titulo,
.vsb-hero--al-centro .vsb-hero__texto { margin-inline: auto; }

.vsb-hero--t-discreto .vsb-hero__titulo { font-size: clamp(24px, 3vw, 36px); }
.vsb-hero--t-medio .vsb-hero__titulo { font-size: clamp(30px, 4.4vw, 52px); }
.vsb-hero--t-grande .vsb-hero__titulo { font-size: clamp(36px, 6vw, 70px); }

.vsb-hero--fuente-poppins .vsb-hero__titulo { font-family: var(--vs-fuente); }
.vsb-hero--fuente-tema .vsb-hero__titulo {
	font-family: inherit;
	text-transform: none;
}

/* La píldora del antetítulo, legible sobre foto */
.vsb-hero .vsb-eyebrow {
	display: inline-block;
	margin-bottom: 18px;
}

/* Ancho del titular de la portada, también en el estilo clásico */

.vsb-hero__titulo { max-width: var(--vsb-hero-ancho, none); }

.vsb-hero--al-centro .vsb-hero__titulo,
.vsb-hero--clasico .vsb-hero__titulo { margin-inline: auto; }

/* -------------------------------------------------------------
 * Contacto y formulario · opciones
 * ---------------------------------------------------------- */

.vsb-hablamos--texto .vsb-hablamos__grid { grid-template-columns: 1.35fr 1fr; }
.vsb-hablamos--formulario .vsb-hablamos__grid { grid-template-columns: 1fr 1.35fr; }

.vsb-hablamos--invertido .vsb-hablamos__col { order: 2; }
.vsb-hablamos--invertido .vsb-form-panel { order: 1; }

/* La cabecera compartida hereda el aspecto que tenía la sección */

.vsb-hablamos .vsb-sec__head { margin-bottom: 26px; }

.vsb-hablamos .vsb-sec__titulo {
	margin: 0 0 12px;
	font-weight: 800;
	line-height: 1.1;
}

.vsb-hablamos .vsb-sec__lead {
	max-width: 520px;
	margin: 0 0 30px;
	color: var(--vs-apagado);
	font-size: 16px;
	line-height: 1.6;
	opacity: 1;
}

/* Fondos claros: el texto se adapta */

.vsb-hablamos.vsb-sec--blanco,
.vsb-hablamos.vsb-sec--crema,
.vsb-hablamos.vsb-sec--arena { color: var(--vs-oscuro); }

.vsb-hablamos.vsb-sec--blanco .vsb-sec__titulo,
.vsb-hablamos.vsb-sec--crema .vsb-sec__titulo,
.vsb-hablamos.vsb-sec--arena .vsb-sec__titulo { color: var(--vs-oscuro); }

.vsb-hablamos.vsb-sec--blanco .vsb-sec__lead,
.vsb-hablamos.vsb-sec--crema .vsb-sec__lead,
.vsb-hablamos.vsb-sec--arena .vsb-sec__lead { color: #5c6470; }

.vsb-hablamos.vsb-sec--blanco .vsb-contacto__item,
.vsb-hablamos.vsb-sec--crema .vsb-contacto__item,
.vsb-hablamos.vsb-sec--arena .vsb-contacto__item {
	border-color: rgba(0, 0, 0, .12);
	background: #fff;
}

.vsb-hablamos.vsb-sec--blanco .vsb-contacto__main,
.vsb-hablamos.vsb-sec--crema .vsb-contacto__main,
.vsb-hablamos.vsb-sec--arena .vsb-contacto__main { color: var(--vs-oscuro); }

.vsb-hablamos.vsb-sec--blanco .vsb-contacto__sub,
.vsb-hablamos.vsb-sec--crema .vsb-contacto__sub,
.vsb-hablamos.vsb-sec--arena .vsb-contacto__sub { color: #5c6470; }

/* Sin panel de formulario, el texto ocupa todo el ancho */

.vsb-hablamos__grid:not(:has(.vsb-form-panel)) { grid-template-columns: 1fr; }

@media (max-width: 860px) {
	.vsb-hablamos--texto .vsb-hablamos__grid,
	.vsb-hablamos--formulario .vsb-hablamos__grid { grid-template-columns: 1fr; }

	.vsb-hablamos--invertido .vsb-hablamos__col,
	.vsb-hablamos--invertido .vsb-form-panel { order: 0; }
}

/* Ancho de los textos, configurable desde cada bloque */

.vsb-sec__head { max-width: var(--vsb-ancho-texto, 760px); }

.vsb-hablamos .vsb-sec__lead { max-width: var(--vsb-ancho-texto, 520px); }

.vsb-cta__texto { max-width: var(--vsb-ancho-texto, 62ch); margin-inline: auto; }

/* Iconos subidos por el cliente (SVG o PNG) */

.vsb-icono-svg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.vsb-segmento__icono .vsb-icono-svg {
	width: 23px;
	height: 23px;
}

.vsb-cat__disco .vsb-icono-svg {
	width: 19px;
	height: 19px;
}

.vsb-cat__disco--barra .vsb-icono-svg {
	width: 17px;
	height: 17px;
}

/* -------------------------------------------------------------
 * Ancho de los textos · contenido de las secciones
 *
 * La variable la publica el bloque en su raíz, así que aquí basta
 * con leerla en cada contenedor de texto corrido.
 * ---------------------------------------------------------- */

.vsb-prosa,
.vsb-faqs__lista,
.vsb-faqs__nota,
.vsb-texto .vsb-lista,
.vsb-prosa__cierre,
.vsb-razones__lista--1,
.vsb-enlaces__grid,
.vsb-tabla,
.vsb-hablamos__intro,
.vsb-cta__texto {
	max-width: var(--vsb-ancho-texto, none);
}

/* Los que ya tenían un tope propio lo conservan como respaldo */

.vsb-prosa { max-width: var(--vsb-ancho-texto, 74ch); }
.vsb-faqs__lista { max-width: var(--vsb-ancho-texto, 900px); }
.vsb-tabla { max-width: var(--vsb-ancho-texto, 100%); }
.vsb-enlaces__grid { max-width: var(--vsb-ancho-texto, 1180px); }

/* En las rejillas de tarjetas el ancho no se toca: lo manda el número
   de columnas, no la medida de lectura. */
.vsb-grid { max-width: none; }

/* -------------------------------------------------------------
 * Fondo gris y panel translúcido
 * ---------------------------------------------------------- */

.vsb-sec--gris {
	background: #3c3c3c;
	color: var(--vs-texto);
}

.vsb-sec--gris .vsb-sec__titulo,
.vsb-hablamos.vsb-sec--gris .vsb-sec__titulo { color: #fff; }

.vsb-sec--gris .vsb-sec__lead,
.vsb-hablamos.vsb-sec--gris .vsb-sec__lead { color: var(--vs-apagado); opacity: 1; }

.vsb-sec--gris .vsb-contacto__item {
	border-color: rgba(255, 255, 255, .16);
	background: rgba(255, 255, 255, .04);
}

.vsb-sec--gris .vsb-contacto__main { color: #fff; }

.vsb-form-panel--translucido {
	border: 1px solid rgba(255, 255, 255, .12);
	background: rgba(18, 18, 18, .55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.vsb-form-panel--translucido input[type="text"],
.vsb-form-panel--translucido input[type="email"],
.vsb-form-panel--translucido input[type="tel"],
.vsb-form-panel--translucido select,
.vsb-form-panel--translucido textarea {
	background: rgba(255, 255, 255, .07) !important;
	border-color: rgba(255, 255, 255, .18) !important;
}

/* Sin soporte de desenfoque, se compensa con algo más de opacidad */
@supports not (backdrop-filter: blur(8px)) {
	.vsb-form-panel--translucido { background: rgba(18, 18, 18, .82); }
}

/* Fragmento destacado en dorado dentro de cualquier texto */

.vsb-oro {
	color: var(--vs-oro);
	font-weight: inherit;
}

/* El texto del enlace de categoría no se recorta ni se hereda oculto */

.vsb-cat__enlace-txt {
	display: inline;
	overflow: visible;
	color: inherit;
	font: inherit;
	text-indent: 0;
	clip: auto;
	white-space: normal;
}

.vsb-cat__flecha { flex: none; }

@media (max-width: 700px) {
	.vsb-cat--plegable .vsb-cat__enlace {
		max-width: 100%;
		white-space: normal;
		text-align: center;
	}

	.vsb-cat--plegable .vsb-cat__enlace-txt { color: var(--vs-oscuro); }
}

/* Combinaciones de color del antetítulo en píldora */

.vsb-eyebrow--oro {
	background: var(--vs-oro);
	color: var(--vs-oscuro);
}

.vsb-eyebrow--oscuro {
	background: var(--vs-oscuro);
	color: var(--vs-oro);
}

/* -------------------------------------------------------------
 * Ventajas con imagen de fondo
 * ---------------------------------------------------------- */

.vsb-ventajas--con-foto {
	position: relative;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.vsb-ventajas--fijo { background-attachment: fixed; }

.vsb-ventajas__capa {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.vsb-ventajas--velo-oscuro .vsb-ventajas__capa { background: #111; }
.vsb-ventajas--velo-oro .vsb-ventajas__capa { background: var(--vs-oro); }
.vsb-ventajas--velo-claro .vsb-ventajas__capa { background: #fff; }

.vsb-ventajas--velo-degradado .vsb-ventajas__capa {
	background: linear-gradient(180deg, rgba(15, 15, 15, .15) 0%, rgba(12, 12, 12, .96) 100%);
}

.vsb-ventajas--con-foto .vsb-contenedor {
	position: relative;
	z-index: 1;
}

/* Sobre velo claro o dorado el texto tiene que oscurecerse */

.vsb-ventajas--velo-claro .vsb-sec__titulo,
.vsb-ventajas--velo-oro .vsb-sec__titulo,
.vsb-ventajas--velo-claro .vsb-ventaja__titulo,
.vsb-ventajas--velo-oro .vsb-ventaja__titulo { color: var(--vs-oscuro); }

.vsb-ventajas--velo-claro .vsb-sec__lead,
.vsb-ventajas--velo-oro .vsb-sec__lead,
.vsb-ventajas--velo-claro .vsb-ventaja__texto,
.vsb-ventajas--velo-oro .vsb-ventaja__texto { color: rgba(0, 0, 0, .72); }

.vsb-ventajas--velo-claro .vsb-ventaja,
.vsb-ventajas--velo-oro .vsb-ventaja {
	border-color: rgba(0, 0, 0, .1);
	background: rgba(255, 255, 255, .88);
}

/* Sobre foto, las tarjetas se despegan del fondo */

.vsb-ventajas--con-foto .vsb-ventaja {
	background: rgba(30, 30, 30, .72);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.vsb-ventajas--velo-claro .vsb-ventaja,
.vsb-ventajas--velo-oro .vsb-ventaja { backdrop-filter: none; }

@media (prefers-reduced-motion: reduce) {
	.vsb-ventajas--fijo { background-attachment: scroll; }
}
