/**
 * Página Experiencias.
 *
 * Paleta propia de la página, en variables locales: naranja y azul como acentos
 * dominantes, sin rojo vino en ningún estado. Los tonos medios (naranja, cielo,
 * amarillo) van como fondo con texto carbón, o oscurecidos cuando llevan texto blanco.
 *
 * Contrastes medidos:
 *   naranja  #F04F23 → texto blanco no llega (3.59); el botón usa #D3451E (4.53)
 *   azul     #163A5F → texto blanco 11.64
 *   cielo    #72CFEB → texto carbón 7.98
 *   amarillo #F0B841 → texto carbón 7.85
 */

.bonisa-exp-page {
	--x-naranja:      #f04f23;
	--x-naranja-btn:  #d3451e;   /* relleno con texto blanco, AA */
	--x-naranja-hover:#b93a17;
	--x-cielo:        #72cfeb;
	--x-cielo-claro:  #eaf7fc;
	--x-azul:         var(--bonisa-blue);
	--x-azul-hover:   #0f2a46;
	--x-amarillo:     #f0b841;
	--x-carbon:       #2b2b2b;
	--x-neutro:       #f7f5f0;
	--x-gris:         #4a4a4a;
	--x-linea:        #e3ded4;

	color: var(--x-carbon);
}

/* El header es sticky: sin esto, saltar a un ancla deja el título tapado. */
.bexp [id] { scroll-margin-top: calc(var(--bonisa-tope, 0px) + 96px); }

/*
 * Ojo con la especificidad: `.bexp h1` vale más que `.bexp-hero__titulo`, así que si se
 * declara el color acá el titular del hero sale en carbón sobre el azul y queda
 * ilegible. Se excluye explícitamente lo que va sobre fondo oscuro.
 */
.bexp h1:not(.bexp-hero__titulo),
.bexp h2:not(.bexp-cta h2),
.bexp h3 { color: var(--x-carbon); }

/*
 * El encabezado ya no necesita excepciones: la paleta naranja y azul pasó al tema
 * global, así que estas reglas dejaron de existir en vez de duplicarse por página.
 */
.bonisa-exp-page .bf { --bf-acento: var(--x-cielo); }

/* ───────────────────────────────────────────────────────── Botones ── */

.bexp .bonisa-btn { border-radius: 999px; font-weight: 700; }

.bexp-btn--naranja { background: var(--x-naranja-btn); color: #fff; }
.bexp-btn--naranja:hover,
.bexp-btn--naranja:focus { background: var(--x-naranja-hover); color: #fff; }

.bexp-btn--azul { background: var(--x-azul); color: #fff; }
.bexp-btn--azul:hover,
.bexp-btn--azul:focus { background: var(--x-azul-hover); color: #fff; }

.bexp-btn--linea { background: transparent; color: #fff; border: 2px solid #fff; }
.bexp-btn--linea:hover,
.bexp-btn--linea:focus { background: #fff; color: var(--x-azul); }

/* ──────────────────────────────────────────────────────────── Hero ── */

.bexp-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: min(76vh, 700px);
	padding-block: clamp(48px, 8vw, 96px);
	overflow: hidden;
	isolation: isolate;
	background: var(--x-azul);
	color: #fff;
}

.bexp-hero__media { position: absolute; inset: 0; z-index: -2; }
.bexp-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Velo azul profundo: mantiene legible el texto sobre cualquier fotografía. */
.bexp-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient( 100deg,
		color-mix( in srgb, var(--x-azul) 92%, transparent ) 30%,
		color-mix( in srgb, var(--x-azul) 62%, transparent ) 100% );
}

/* Formas de marca mientras no exista la fotografía: no es un cartel técnico. */
.bexp-hero__forma { position: absolute; display: block; border-radius: 999px; }
.bexp-hero__forma--naranja  { width: 46vw; aspect-ratio: 1; right: -8%;  top: -22%;   background: var(--x-naranja); opacity: .85; }
.bexp-hero__forma--cielo    { width: 32vw; aspect-ratio: 1; right: 14%;  bottom: -26%; background: var(--x-cielo);   opacity: .55; }
.bexp-hero__forma--amarillo { width: 18vw; aspect-ratio: 1; right: 40%;  top: 18%;     background: var(--x-amarillo);opacity: .5; }

/*
 * El contenido usaba 62ch y en escritorio quedaba una columna estrecha con las
 * formas decorativas ocupando media pantalla. Ahora aprovecha hasta 980 px.
 */
.bexp-hero__inner { position: relative; max-width: min(980px, 100%); }

.bexp-hero__eyebrow {
	margin: 0 0 16px;
	color: var(--x-cielo);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.bexp-hero__titulo {
	margin: 0;
	color: #fff;
	font-size: clamp(2.1rem, 5.2vw, 3.7rem);
	line-height: 1.06;
	text-wrap: balance;
}

.bexp-hero__texto {
	margin: 20px 0 0;
	max-width: 54ch;
	color: rgba(255,255,255,.9);
	font-size: clamp(1rem, 1.7vw, 1.16rem);
}

.bexp-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.bexp-hero__linea {
	margin: 28px 0 0;
	padding-top: 20px;
	border-top: 1px solid rgba(255,255,255,.25);
	color: var(--x-cielo);
	font-size: .88rem;
	font-weight: 600;
	letter-spacing: .02em;
}

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

.bexp-sec { padding-block: clamp(52px, 7vw, 96px); }
.bexp-sec--neutro { background: var(--x-neutro); }
.bexp-sec--cielo  { background: var(--x-cielo-claro); }

.bexp-head { max-width: 64ch; margin-bottom: clamp(28px, 4vw, 46px); }
.bexp-head h2 { margin: 0 0 12px; font-size: clamp(1.6rem, 3.4vw, 2.5rem); }
.bexp-head p { margin: 0; color: #555; font-size: 1.04rem; }

/* ──────────────────────────────────────── Dos tipos de experiencia ── */

.bexp-tipos {
	display: grid;
	gap: clamp(20px, 3vw, 32px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.bexp-tipo {
	display: flex;
	flex-direction: column;
	border-radius: 18px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--x-linea);
}

.bexp-tipo__media { aspect-ratio: 16 / 10; background: var(--x-cielo-claro); }
.bexp-tipo__media img { width: 100%; height: 100%; object-fit: cover; }

.bexp-tipo--cielo   .bexp-tipo__media { background: var(--x-cielo); }
.bexp-tipo--naranja .bexp-tipo__media { background: color-mix(in srgb, var(--x-naranja) 55%, #fff); }

.bexp-tipo__cuerpo { padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; gap: 12px; }
.bexp-tipo__cuerpo h3 { margin: 0; font-size: 1.32rem; }
.bexp-tipo__cuerpo p { margin: 0; color: #555; }
.bexp-tipo__cuerpo .bonisa-btn { align-self: flex-start; margin-top: 6px; }

.bexp-etiqueta {
	align-self: flex-start;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--x-cielo);
	color: var(--x-carbon);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* ────────────────────────────────────────────────── Video y galería ── */

.bexp-video {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 18px;
	overflow: hidden;
	background: var(--x-azul);
	display: block;
}

.bexp-video__marco {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(120deg, var(--x-azul), color-mix(in srgb, var(--x-cielo) 45%, var(--x-azul)));
}

.bexp-video__marco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.bexp-video__play {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(58px, 8vw, 82px);
	aspect-ratio: 1;
	border-radius: 999px;
	background: var(--x-naranja-btn);
	color: #fff;
}

.bexp-video__play svg { width: 46%; height: 46%; }


.bexp-galeria {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.bexp-galeria li { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; }
.bexp-galeria img { width: 100%; height: 100%; object-fit: cover; }

/* ─────────────────────────────────────────── Tarjetas del servicio ── */

.bexp-cards {
	display: grid;
	gap: clamp(16px, 2.5vw, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.bexp-card {
	padding: clamp(22px, 3vw, 30px);
	border-radius: 16px;
	background: #fff;
	border: 1px solid var(--x-linea);
	border-top: 5px solid var(--x-cielo);
}

.bexp-card h3 { margin: 0 0 10px; font-size: 1.14rem; }
.bexp-card p { margin: 0; color: #555; font-size: .96rem; }

.bexp-card--naranja  { border-top-color: var(--x-naranja); }
.bexp-card--cielo    { border-top-color: var(--x-cielo); }
.bexp-card--amarillo { border-top-color: var(--x-amarillo); }
.bexp-card--azul     { border-top-color: var(--x-azul); }

.bexp-minimo {
	margin: clamp(28px, 4vw, 44px) 0 0;
	padding: 22px 28px;
	border-radius: 16px;
	background: var(--x-naranja);
	color: var(--x-carbon);
	font-family: var(--bonisa-font-display);
	font-weight: 800;
	font-size: clamp(1.05rem, 2.1vw, 1.42rem);
	text-align: center;
}

.bexp-aux { margin: 12px 0 0; text-align: center; color: #555; font-size: .92rem; }

/* ──────────────────────────────────────────────────── Cómo funciona ── */





/* ─────────────────────────────────────────────────────── Estimador ── */

.bexp-dos {
	display: grid;
	gap: clamp(24px, 4vw, 52px);
	align-items: start;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.bexp-dos h2 { margin: 0 0 12px; font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.bexp-dos > div > p { color: #555; }

.bexp-est {
	display: grid;
	gap: 18px;
	padding: clamp(24px, 3vw, 34px);
	border-radius: 18px;
	background: var(--x-cielo-claro);
	border: 1px solid color-mix(in srgb, var(--x-cielo) 45%, transparent);
}

.bexp-est__campo label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
	font-size: .92rem;
}

.bexp-est select,
.bexp-est input[type="number"] {
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid var(--x-linea);
	border-radius: 10px;
	background: #fff;
	font-size: 1rem;
	font-family: inherit;
	color: var(--x-carbon);
}

.bexp-stepper { display: flex; gap: 8px; align-items: stretch; }

.bexp-stepper button {
	flex: 0 0 48px;
	min-height: 48px;
	border: 1px solid var(--x-linea);
	border-radius: 10px;
	background: #fff;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	color: var(--x-azul);
}

.bexp-stepper input { text-align: center; }

.bexp-est__resultado {
	padding: 18px 20px;
	border-radius: 14px;
	background: #fff;
	border: 1px solid var(--x-linea);
}

.bexp-est__etiqueta {
	margin: 0 0 6px;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #666;
}

.bexp-est__cifra {
	margin: 0;
	font-family: var(--bonisa-font-display);
	font-weight: 800;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	line-height: 1;
	color: var(--x-azul);
}

.bexp-est__unidad { font-size: .92rem; font-weight: 600; color: #555; }
.bexp-est__nota { margin: 10px 0 0; font-size: .84rem; color: #666; }

/* ──────────────────────────────────────────────────────  Calendario ── */

.bexp-cal {
	max-width: 560px;
	padding: clamp(20px, 3vw, 30px);
	border-radius: 18px;
	background: #fff;
	border: 1px solid var(--x-linea);
}

.bexp-cal__barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.bexp-cal__mes { margin: 0; font-size: 1.1rem; text-transform: capitalize; }

.bexp-cal__nav {
	width: 44px;
	height: 44px;
	border: 1px solid var(--x-linea);
	border-radius: 10px;
	background: #fff;
	font-size: 1.2rem;
	cursor: pointer;
	color: var(--x-azul);
}

.bexp-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }

.bexp-cal__dia {
	text-align: center;
	font-size: .72rem;
	font-weight: 700;
	color: #888;
	padding-bottom: 4px;
}

.bexp-cal__fecha {
	/*
	 * `min-width: 0` es imprescindible. Un elemento de rejilla tiene min-width:auto, y
	 * con `aspect-ratio` el ancho lo marcaba la altura mínima: las celdas salían de
	 * 49 px, no cabían siete en la fila y la página entera scrolleaba de lado en móvil.
	 */
	min-width: 0;
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	border-radius: 10px;
	font-size: .92rem;
	font-weight: 600;
	cursor: pointer;
	color: var(--x-carbon);
	background: #f1efea;
}

/* Estados. El "no disponible" es gris oscuro con texto blanco: nada de rojo. */
.bexp-cal__fecha--libre    { background: var(--x-cielo); }
.bexp-cal__fecha--limitada { background: var(--x-amarillo); }
.bexp-cal__fecha--ocupada  { background: var(--x-gris); color: #fff; cursor: not-allowed; }
/* Fecha pasada: deshabilitada, pero legible. Estaba en 2.02:1; ahora 3.87:1. */
.bexp-cal__fecha--pasada   { background: #f4f2ee; color: #7e7970; cursor: not-allowed; }

.bexp-cal__fecha.is-elegida {
	outline: 3px solid var(--x-azul);
	outline-offset: 1px;
}

.bexp-cal__leyenda {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	font-size: .84rem;
}

.bexp-cal__leyenda li { display: flex; align-items: center; gap: 8px; }

.bexp-chip { width: 16px; height: 16px; border-radius: 5px; display: inline-block; }
.bexp-chip--libre    { background: var(--x-cielo); }
.bexp-chip--limitada { background: var(--x-amarillo); }
.bexp-chip--ocupada  { background: var(--x-gris); }

.bexp-cal__aviso { margin: 14px 0 0; font-size: .84rem; color: #666; }

/* ─────────────────────────────────────────────────────── Formulario ── */

.bexp-formwrap { max-width: 880px; }

.bexp-form {
	padding: clamp(24px, 4vw, 40px);
	border-radius: 18px;
	background: #fff;
	border: 1px solid var(--x-linea);
}

.bexp-paso { margin: 0 0 28px; padding: 0; border: 0; }

.bexp-paso legend {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
	padding: 0;
	font-family: var(--bonisa-font-display);
	font-weight: 800;
	font-size: 1.15rem;
}

.bexp-paso__n {
	display: grid;
	place-items: center;
	width: 30px;
	aspect-ratio: 1;
	border-radius: 999px;
	background: var(--x-azul);
	color: #fff;
	font-size: .9rem;
}

.bexp-checks { margin: 0; padding: 0; border: 0; }
.bexp-checks legend { margin-bottom: 10px; padding: 0; }
.bexp-checks .bonisa-check { margin-bottom: 10px; }

.bexp-resumen {
	margin: 8px 0 24px;
	padding: clamp(20px, 3vw, 26px);
	border-radius: 14px;
	background: var(--x-cielo-claro);
}

.bexp-resumen h3 { margin: 0 0 14px; font-size: 1.05rem; }
.bexp-resumen dl { margin: 0; display: grid; gap: 8px; }
.bexp-resumen dl > div { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.bexp-resumen dt { margin: 0; color: #555; font-size: .9rem; min-width: 12ch; }
.bexp-resumen dd { margin: 0; font-weight: 600; font-size: .94rem; }

.bexp-resumen__estado {
	margin: 16px 0 0;
	padding: 8px 16px;
	display: inline-block;
	border-radius: 999px;
	background: var(--x-amarillo);
	color: var(--x-carbon);
	font-size: .82rem;
	font-weight: 700;
}

.bexp-form__enviar { width: 100%; }

/* ───────────────────────────────────────────────── Preguntas frecuentes ── */







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

.bexp-cta {
	background: var(--x-azul);
	color: #fff;
	padding-block: clamp(56px, 8vw, 100px);
}

/*
 * Centrado real: el bloque tenía ancho máximo pero seguía alineado a la izquierda
 * del contenedor, así que el título quedaba a un lado y los botones a otro.
 */
.bexp-cta__inner {
	max-width: 60ch;
	margin-inline: auto;
	text-align: center;
}

.bexp-cta h2 { margin: 0 0 14px; color: #fff; font-size: clamp(1.7rem, 3.8vw, 2.6rem); }
.bexp-cta p { margin: 0 auto 28px; color: rgba(255,255,255,.88); }
.bexp-cta__acciones { justify-content: center; }

/* ──────────────────────────────── WhatsApp: que no tape los controles ── */

/*
 * El botón flotante del plugin se superponía a los campos y a la leyenda del
 * calendario en móvil. Se reduce, se sube sobre el área segura y se le deja aire
 * al final del formulario.
 */
/*
 * El tamaño y la zona segura del botón de WhatsApp pasaron a la hoja global: valen
 * para todo el sitio, no solo para esta página. Acá queda el carril libre para el
 * texto del calendario, que sí es propio de esta vista.
 */
@media (max-width: 782px) {

	/* Y se le deja el carril libre al texto que queda debajo, para que envuelva
	   antes de llegar al botón en vez de quedar oculto detrás. */
	.bexp-cal__aviso,
	.bexp-cal__leyenda { padding-right: 76px; }

	.bexp-formwrap { padding-bottom: 96px; }
	.bexp-cal { padding-bottom: 24px; }
}

@media (max-width: 900px) {
	.bexp-hero { min-height: 0; }
	.bexp-hero__forma--naranja  { width: 70vw; right: -22%; top: -14%; }
	.bexp-hero__forma--cielo    { width: 50vw; right: -10%; bottom: -30%; }
	.bexp-hero__forma--amarillo { display: none; }
}


/* ── Calendario en pantallas angostas ─────────────────────────────────── */

/*
 * Se recorta el relleno de la tarjeta y la separación entre celdas para que las siete
 * columnas conserven un objetivo táctil cercano a 40 px sin desbordar los 375 px.
 */
@media (max-width: 430px) {
	.bexp-cal { padding: 14px 14px 60px; }
	.bexp-cal__grid { gap: 4px; }
	.bexp-cal__leyenda { font-size: .78rem; gap: 6px 12px; }
}

/* ══════════════════════════════ Planificador: piezas nuevas ══════════════ */

.bexp-sub {
	margin: 34px 0 14px;
	font-size: clamp(1.05rem, 1.9vw, 1.28rem);
}

.bexp-cards--dos { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* El video ya no tiene sección propia: va pegado a las dos tarjetas. */
.bexp-media { margin-top: clamp(28px, 4vw, 48px); }

/*
 * Aviso de lo que va incluido sí o sí. Antes esto eran casillas que el cliente
 * podía desmarcar, y se podía enviar una solicitud sin transporte.
 */
.bexp-obligatorio {
	margin: 0 0 22px;
	padding: 14px 18px;
	border-left: 4px solid var(--x-naranja);
	border-radius: 0 10px 10px 0;
	background: #fff;
	font-weight: 600;
	color: var(--x-carbon);
}

/* ── Selector de producto ─────────────────────────────────────────────── */

.bexp-prod {
	margin: 26px 0;
	padding: 20px;
	border-radius: 14px;
	background: #fff;
}

.bexp-prod__linea {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 14px 18px;
	align-items: start;
	padding: 16px 0;
	border-top: 1px solid var(--x-linea);
}

.bexp-prod__linea:first-child { border-top: 0; padding-top: 4px; }

.bexp-prod__campo { grid-column: 1; min-width: 0; }

.bexp-prod__opciones {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 6px;
}

/*
 * Opción tipo pastilla. El radio real sigue ahí para el teclado y los lectores
 * de pantalla; solo se saca de la vista, nunca con display:none.
 */
.bexp-opcion {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 8px 16px;
	border: 2px solid var(--x-linea);
	border-radius: 999px;
	background: #fff;
	font-size: .92rem;
	font-weight: 600;
	color: var(--x-carbon);
	cursor: pointer;
}

.bexp-opcion input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

.bexp-opcion:hover { border-color: var(--x-cielo); }

.bexp-opcion:has(input:checked) {
	border-color: var(--x-azul);
	background: var(--x-azul);
	color: #fff;
}

.bexp-opcion:has(input:focus-visible) {
	outline: 3px solid var(--x-naranja);
	outline-offset: 2px;
}

.bexp-prod__quitar {
	grid-column: 2;
	align-self: center;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--x-linea);
	border-radius: 999px;
	background: #fff;
	font: inherit;
	font-size: .85rem;
	font-weight: 600;
	color: var(--x-gris);
	cursor: pointer;
}

.bexp-prod__quitar:hover { border-color: var(--x-naranja); color: var(--x-naranja-btn); }

.bexp-prod__mas { margin-top: 14px; }

/* ── Resultado del calculador ─────────────────────────────────────────── */

.bexp-est__fisicas {
	margin: 6px 0 0;
	font-size: .95rem;
	font-weight: 600;
	color: var(--x-azul);
}

/*
 * Evento masivo: por encima del tope no se muestra ninguna cifra. Recortar la
 * cantidad en silencio daría una recomendación falsa.
 */
.bexp-masivo {
	margin-top: 18px;
	padding: 20px;
	border-radius: 14px;
	background: var(--x-azul);
	color: #fff;
}

.bexp-masivo p { margin: 0 0 14px; }
.bexp-masivo[hidden] { display: none; }

/* ── Cierre ───────────────────────────────────────────────────────────── */

.bexp-cta__acciones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 8px;
}

/* Sobre el azul del cierre, el botón de línea necesita borde y texto claros. */
.bexp-cta .bexp-btn--linea {
	border-color: rgba(255, 255, 255, .7);
	color: #fff;
}

.bexp-cta .bexp-btn--linea:hover {
	background: rgba(255, 255, 255, .14);
	color: #fff;
}

@media (max-width: 600px) {
	.bexp-prod__linea { grid-template-columns: minmax(0, 1fr); }
	.bexp-prod__quitar { grid-column: 1; justify-self: start; }
}

/*
 * `[hidden]` tiene que ganar.
 *
 * El atributo solo trae `display:none` de la hoja del navegador, que pierde contra
 * cualquier regla de layout con algo de especificidad. Ya pasó antes con las tarjetas
 * del portafolio: el elemento seguía a la vista aunque el JS lo diera por oculto.
 */
.bexp [hidden],
.bexp-prod [hidden] { display: none !important; }

/* El texto de apoyo del selector va alineado con su etiqueta, no centrado. */
.bexp-prod .bexp-aux { margin: 0 0 14px; text-align: left; }

/*
 * «Agregar otro producto» va sobre la tarjeta blanca del selector, así que no puede
 * usar el botón de línea del hero: ese es blanco sobre blanco aquí y desaparecía.
 */
.bexp-prod__mas {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	margin-top: 16px;
	padding: 10px 20px;
	border: 2px solid var(--x-azul);
	border-radius: 999px;
	background: transparent;
	font: inherit;
	font-size: .93rem;
	font-weight: 700;
	color: var(--x-azul);
	cursor: pointer;
}

.bexp-prod__mas::before { content: "+"; font-size: 1.15rem; line-height: 1; }

.bexp-prod__mas:hover { background: var(--x-azul); color: #fff; }

.bexp-prod__mas:focus-visible {
	outline: 3px solid var(--x-naranja);
	outline-offset: 2px;
}


/* ══════════════════════════════════ Hero compacto y bloque combinado ═════ */

/*
 * La página recibe tráfico de pauta: cuanto antes se vea la primera decisión,
 * mejor. El hero baja de altura y el contenido gana ancho.
 */
.bexp-hero--compacto { padding-block: clamp(52px, 7vw, 84px); min-height: 0; }

.bexp-hero--compacto .bexp-hero__titulo { max-width: 16ch; }
.bexp-hero--compacto .bexp-hero__texto  { max-width: 62ch; }

/*
 * Las dos rutas de la página, con el mismo peso visual.
 *
 * Antes eran dos bloques de texto y, más abajo, la impulsación volvía a salir con una
 * fotografía que eventos privados no tenía: se leía como si una opción fuera la real
 * y la otra un añadido. Con la misma proporción de imagen, el mismo cuerpo y el CTA
 * anclado abajo, las dos pesan igual y el ojo elige por contenido, no por tamaño.
 */
.bexp-tipos--dos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(16px, 2.4vw, 26px);
	align-items: stretch;
}

.bexp-tipos--dos .bexp-tipo {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

/* Las dos fotografías son verticales; 4:3 las iguala sin deformarlas. */
.bexp-tipos--dos .bexp-tipo__media {
	display: block;
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.bexp-tipos--dos .bexp-tipo__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 38%;
}

.bexp-tipos--dos .bexp-tipo__cuerpo {
	flex: 1 1 auto;
	padding: clamp(22px, 3vw, 32px);
}

.bexp-tipos--dos h2 { margin: 0 0 10px; font-size: clamp(1.15rem, 2.3vw, 1.5rem); }

/* Condición o matiz de ESA tarjeta, en gris y a menor tamaño que el copy. */
.bexp-tipo__nota {
	margin: 0;
	font-size: .88rem;
	line-height: 1.5;
	color: #666;
}

/*
 * El CTA se ancla abajo, para que en las dos tarjetas quede a la misma altura.
 *
 * Con `.bexp-tipo__cta` a secas no bastaba: la regla general de la sección
 * —`.bexp-tipo__cuerpo .bonisa-btn`— tiene más peso y le imponía `margin-top: 6px`,
 * así que el botón se quedaba pegado al texto y los dos acababan desalineados.
 */
.bexp-tipos--dos .bexp-tipo__cta { margin-top: auto; align-self: flex-start; }

/*
 * Acción secundaria sobre tarjeta blanca.
 *
 * Llevaba `bonisa-btn--claro`, que es la variante pensada para fondos oscuros: texto
 * blanco, fondo transparente y borde transparente. Sobre la tarjeta blanca el botón
 * existía, ocupaba sus 48 px y era literalmente invisible. Va con contorno azul, que
 * contrasta 15:1 y se lee como la acción de menor peso frente al naranja del evento.
 */
.bexp-tipo__cta--linea {
	background: transparent;
	border: 2px solid var(--x-azul, #0c223a);
	color: var(--x-azul, #0c223a);
}

.bexp-tipo__cta--linea:hover,
.bexp-tipo__cta--linea:focus-visible {
	background: var(--x-azul, #0c223a);
	color: #fff;
}

/*
 * Las condiciones en una sola línea. Antes ocupaban una sección con tarjetas y
 * además se repetían justo antes del formulario.
 */
.bexp-condiciones {
	margin: clamp(20px, 3vw, 30px) 0 0;
	padding: 14px 20px;
	border-radius: 12px;
	background: #fff;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	color: var(--x-carbon);
}

.bexp-aux--centro { text-align: center; margin-top: 10px; }

/* ══════════════════════════════════ Primera decisión: el carrito ═════════ */

.bexp-carrito {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 18px;
}

/*
 * Opción grande y clicable. El radio real sigue en el DOM para teclado y lectores
 * de pantalla: se saca de la vista, nunca con display:none.
 */
.bexp-carrito__op {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px;
	border: 2px solid var(--x-linea);
	border-radius: 16px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.bexp-carrito__op input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

.bexp-carrito__titulo {
	font-family: var(--bonisa-font-display, inherit);
	font-weight: 800;
	font-size: 1.05rem;
	line-height: 1.2;
	color: var(--x-carbon);
}

.bexp-carrito__texto { font-size: .9rem; line-height: 1.45; color: var(--x-gris); }

.bexp-carrito__op:hover { border-color: var(--x-cielo); }

.bexp-carrito__op:has(input:checked) {
	border-color: var(--x-azul);
	box-shadow: inset 0 0 0 1px var(--x-azul);
	background: var(--x-cielo-claro);
}

.bexp-carrito__op:has(input:focus-visible) {
	outline: 3px solid var(--x-naranja);
	outline-offset: 3px;
}

/* Un filo de color por opción, para distinguirlas de un vistazo. */
.bexp-carrito__op--naranja  { border-top: 5px solid var(--x-naranja); }
.bexp-carrito__op--cielo    { border-top: 5px solid var(--x-cielo); }
.bexp-carrito__op--amarillo { border-top: 5px solid var(--x-amarillo); }

/* Los pasos ocultos no ocupan sitio. */
.bexp-paso[hidden],
.bexp-resumen[hidden],
.bexp-form__enviar[hidden] { display: none !important; }

/*
 * Móvil. Apiladas, las dos tarjetas se separaban solo 16 px y la fotografía de la
 * segunda empezaba justo debajo del botón de la primera: se leían como una tira
 * continua de fotos, no como dos opciones. Todo lo de aquí abajo vive en la media
 * query; el escritorio de dos columnas, ya aprobado, no cambia.
 */
@media (max-width: 780px) {
	.bexp-tipos--dos { grid-template-columns: minmax(0, 1fr); }
	.bexp-carrito    { grid-template-columns: minmax(0, 1fr); }

	/*
	 * Aire entre tarjetas. El de arriba y el de abajo lo pone el relleno de la
	 * sección; sumar aquí otro margen los apilaba y dejaba 64 px entre el hero y la
	 * primera foto.
	 */
	.bexp-tipos--dos {
		gap: 36px;
		margin-block: 0 4px;
	}

	.bexp-tipos--dos .bexp-tipo {
		/* Sombra muy corta: separa la tarjeta del fondo sin dibujar un adorno. */
		box-shadow: 0 1px 10px rgba(12, 34, 58, .06);
	}

	/* Las dos fotografías, exactamente al mismo alto: ninguna domina a la otra. */
	.bexp-tipos--dos .bexp-tipo__media {
		aspect-ratio: auto;
		height: 220px;
	}

	.bexp-tipos--dos .bexp-tipo__cuerpo {
		gap: 10px;
		padding: 22px;
	}

	.bexp-tipos--dos h2 { margin: 0 0 2px; }
	.bexp-tipos--dos .bexp-tipo__cuerpo p { line-height: 1.55; }

	.bexp-tipos--dos .bexp-tipo__cta {
		align-self: stretch;
		justify-content: center;
		width: 100%;
		min-height: 48px;
		margin-top: 20px;
	}

	/*
	 * Aire entre el hero y la primera tarjeta, y entre la última y el planificador.
	 * La sección ya trae su relleno; aquí solo se ajusta para que la primera foto no
	 * arranque pegada al botón del hero.
	 */
	.bexp-sec--neutro { padding-block: 36px 44px; }
	.bexp-hero { padding-bottom: 8px; }
}

/*
 * Franja editorial del servicio: una imagen ancha y baja. Se le fija la proporción
 * para que no empuje el planificador hacia abajo al cargar.
 */
.bexp-editorial {
	margin: clamp(24px, 3vw, 40px) 0 0;
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 21 / 9;
	max-height: 300px;
	background: var(--x-neutro);
}

.bexp-editorial img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 55%;
}

@media (max-width: 700px) {
	.bexp-editorial { aspect-ratio: 16 / 9; }
}

/* ══════════════════════ Hero fotográfico de Experiencias ═══════════════ */

/*
 * Copy a la izquierda, carrito a la derecha. Fuera los círculos de color: no decían
 * nada de lo que BONISA hace en un evento, y esta fotografía sí.
 */
.bexp-hero--foto {
	background: var(--x-azul);
	padding: 0;
}

.bexp-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	min-height: clamp(480px, 60vh, 620px);
	padding-block: clamp(36px, 5vw, 64px);
}

.bexp-hero--foto .bexp-hero__inner { position: relative; padding: 0; }

.bexp-hero__foto {
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	/* La foto es vertical: se le da una proporción propia en vez de aplastarla. */
	aspect-ratio: 4 / 3;
	max-height: 520px;
	background: rgba(255, 255, 255, .06);
}

.bexp-hero__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--bexp-hero-focal, center 32%);
}

@media (max-width: 900px) {
	.bexp-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}
	.bexp-hero__foto { aspect-ratio: 3 / 2; max-height: 360px; }
}

/* ── Impulsación en punto de venta ────────────────────────────────────── */

.bexp-pdv {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: clamp(18px, 3vw, 32px);
	align-items: center;
	margin-top: clamp(26px, 3vw, 40px);
	padding: clamp(18px, 2.4vw, 26px);
	border-radius: 16px;
	background: #fff;
}

.bexp-pdv__foto {
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	max-height: 300px;
	background: var(--x-neutro);
}

.bexp-pdv__foto img { width: 100%; height: 100%; object-fit: cover; }

.bexp-pdv__texto {
	margin: 0;
	font-size: clamp(1rem, 1.7vw, 1.14rem);
	line-height: 1.5;
	color: var(--x-carbon);
}

.bexp-pdv__texto strong { color: var(--x-azul); }

@media (max-width: 700px) {
	.bexp-pdv { grid-template-columns: minmax(0, 1fr); }
	.bexp-pdv__foto { aspect-ratio: 4 / 3; max-height: 220px; }
}


/* ═══════════════════ Recorte del relleno lateral de una foto ════════════ */

/*
 * Algunos archivos de la Biblioteca son retratos guardados dentro de un lienzo
 * cuadrado, con dos franjas blancas a los lados. Puestos a sangre, esas franjas se
 * leen como márgenes rotos.
 *
 * La imagen se agranda un 152 % del ancho del contenedor y se centra con un margen
 * negativo: las franjas quedan fuera del recorte y solo se ve la fotografía. Ni se
 * deforma, ni hay que recortar y volver a subir el archivo, y el porcentaje es
 * editable si otra foto trae otro relleno.
 */
.bonisa-recorte-lateral {
	position: relative;
	overflow: hidden;
}

.bonisa-recorte-lateral > img {
	width: calc(100% + 2 * var(--bonisa-recorte, 26%));
	max-width: none;
	height: 100%;
	margin-inline-start: calc(-1 * var(--bonisa-recorte, 26%));
	object-fit: cover;
	object-position: var(--bexp-hero-focal, center center);
}

/* ═══════════════════════════ Hero de Experiencias ═══════════════════════ */

@media (max-width: 780px) {
	/*
	 * Hero corto. Sin el párrafo que llevaba, lo único que queda por encima del
	 * pliegue es el titular y el botón; la fotografía no necesita media pantalla
	 * para acompañarlos.
	 */
	.bexp-hero__foto {
		aspect-ratio: 4 / 3;
		max-height: 230px;
	}

	.bexp-hero__inner { gap: 14px; }
}