/**
 * OmniaBook — formulario de reserva (front).
 *
 * Se hereda del tema todo lo que se pueda: tipografía, color de acento y
 * radios salen de variables que el tema puede redefinir. Un formulario que
 * impone su propia tipografía siempre parece pegado con cinta adhesiva sobre
 * el sitio del cliente.
 *
 * Todas las variables tienen valor de reserva, así que funciona sobre
 * cualquier tema sin configurar nada.
 */

/* Los tokens se declaran para TODOS los componentes del plugin, no solo para
   el formulario: la ficha del recurso usa las mismas variables y sin esto se
   quedaba sin colores, con el navegador descartando cada regla. */
.ob-f,
.ob-cards,
.ob-single,
.obl-search {
	--ob-f-accent:     var(--wp--preset--color--primary, #E1502A);
	--ob-f-accent-ink: #fff;

	/* Tonos derivados del color principal, para los estados de los botones.
	   Se calculan solos con color-mix: así basta con configurar UN color y
	   todo el formulario queda coherente, sin pedirle al usuario que elija
	   media docena de matices. Los navegadores sin color-mix se quedan con
	   los valores de reserva declarados justo encima de cada uso. */
	--ob-f-accent-soft: color-mix(in srgb, var(--ob-f-accent) 12%, #fff);
	--ob-f-accent-mid:  color-mix(in srgb, var(--ob-f-accent) 22%, #fff);
	--ob-f-accent-dark: color-mix(in srgb, var(--ob-f-accent) 82%, #000);
	--ob-f-ink:        var(--wp--preset--color--foreground, #1d2327);
	--ob-f-muted:      #6b7280;
	--ob-f-line:       #d8d8d8;
	--ob-f-surface:    #f7f7f6;
	--ob-f-radius:     8px;
	--ob-f-gap:        18px;

	color: var(--ob-f-ink);
	font-family: inherit;
}

.ob-f *,
.ob-f *::before,
.ob-f *::after {
	box-sizing: border-box;
}

.ob-f__title {
	font-size: 1.5em;
	margin: 0 0 var(--ob-f-gap);
}

.ob-f__form[hidden] {
	display: none;
}

.ob-f__row {
	margin: 0 0 var(--ob-f-gap);
}

.ob-f__row--narrow {
	max-width: 160px;
}

.ob-f__grid {
	display: grid;
	gap: 0 var(--ob-f-gap);
	grid-template-columns: 1fr 1fr;
}

.ob-f__label {
	display: block;
	font-size: .95em;
	font-weight: 600;
	margin: 0 0 6px;
}

.ob-f__req {
	color: var(--ob-f-accent);
}

/* Los campos se listan también por tipo, no solo por clase.
   Un tema que escriba input[type="text"] tiene especificidad (0,1,1) y gana a
   una clase suelta (0,1,0): sin esto, el tema impone su borde, su radio y su
   relleno, y el formulario deja de parecer parte del mismo producto. */
.ob-f .ob-f__control,
.ob-f input[type="text"],
.ob-f input[type="email"],
.ob-f input[type="tel"],
.ob-f input[type="url"],
.ob-f input[type="number"],
.ob-f input[type="date"],
.ob-f input[type="time"],
.ob-f input[type="datetime-local"],
.ob-f select.ob-f__control,
.ob-f textarea.ob-f__control,
.ob-f select,
.ob-f textarea {
	background: #fff;
	border: 1px solid var(--ob-f-line);
	border-radius: var(--ob-f-radius);
	box-shadow: none;
	color: var(--ob-f-ink);
	font: inherit;
	line-height: 1.4;
	max-width: 100%;
	padding: 10px 12px;
	width: 100%;
}

.ob-f .ob-f__control:focus,
.ob-f input[type="text"]:focus,
.ob-f input[type="email"]:focus,
.ob-f input[type="tel"]:focus,
.ob-f input[type="url"]:focus,
.ob-f input[type="number"]:focus,
.ob-f input[type="date"]:focus,
.ob-f input[type="time"]:focus,
.ob-f input[type="datetime-local"]:focus,
.ob-f select.ob-f__control:focus,
.ob-f textarea.ob-f__control:focus,
.ob-f select:focus,
.ob-f textarea:focus {
	background: #fff;
	border-color: var(--ob-f-accent);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);
	color: var(--ob-f-ink);
	outline: none;
}

/* Las casillas y los radios no deben heredar el ancho ni el relleno de los
   campos de texto: con width 100% se convierten en barras enormes. */
.ob-f input[type="checkbox"],
.ob-f input[type="radio"] {
	padding: 0;
	width: auto;
}

.ob-f__hint {
	color: var(--ob-f-muted);
	font-size: .85em;
	margin: 8px 0 0;
}

/* ------------------------------------------------------------ Calendario */

.ob-f__calendar {
	background: #fff;
	border: 1px solid var(--ob-f-line);
	border-radius: var(--ob-f-radius);
	/* Ocupa todo el ancho del formulario: las celdas tienen altura fija, así
	   que crecer a lo ancho no descuadra el mes. */
	max-width: 100%;
	padding: 14px;
}

.ob-f__cal-head {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin: 0 0 20px;
}

.ob-f__month {
	font-weight: 600;
	text-transform: capitalize;
}

.ob-f__nav {
	background: none;
	border: 1px solid var(--ob-f-line);
	border-radius: var(--ob-f-radius);
	color: inherit;
	cursor: pointer;
	font: inherit;
	line-height: 1;
	padding: 6px 12px;
}

.ob-f .ob-f__nav:hover,
.ob-f .ob-f__nav:focus,
.ob-f .ob-f__nav:focus-visible {
	background: #f6f2f0;
	background: var(--ob-f-accent-soft);
	border-color: var(--ob-f-accent);
	color: var(--ob-f-ink);
}

.ob-f__weekdays,
.ob-f__days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.ob-f__weekdays {
	color: var(--ob-f-muted);
	font-size: .78em;
	margin: 0 0 6px;
	text-align: center;
	text-transform: uppercase;
}

.ob-f__days[aria-busy="true"] {
	opacity: .45;
	pointer-events: none;
}

.ob-f__day {
	align-items: center;
	color: var(--ob-f-ink);
	/* Altura fija en lugar de proporción cuadrada: ocupando todo el ancho,
	   una celda cuadrada mediría casi ochenta píxeles de alto. */
	display: flex;
	height: 60px;
	justify-content: center;
	background: none;
	border: 1px solid transparent;
	border-radius: var(--ob-f-radius);
	cursor: pointer;
	font: inherit;
	font-size: .9em;
	padding: 0;
	transition: background .12s ease;
}

.ob-f .ob-f__day:not(.ob-f__day--start):hover:not(:disabled),
.ob-f .ob-f__day:not(.ob-f__day--start):focus:not(:disabled),
.ob-f .ob-f__day:not(.ob-f__day--start):focus-visible:not(:disabled) {
	background: #f6f2f0;
	background: var(--ob-f-accent-soft);
	color: var(--ob-f-ink);
}

/* El día elegido mantiene su color aunque el cursor pase por encima. */
.ob-f .ob-f__day.ob-f__day--start,
.ob-f .ob-f__day.ob-f__day--start:hover,
.ob-f .ob-f__day.ob-f__day--start:focus,
.ob-f .ob-f__day.ob-f__day--start:active,
.ob-f .ob-f__day.ob-f__day--start:focus-visible,
.ob-f .ob-f__day.ob-f__day--end,
.ob-f .ob-f__day.ob-f__day--end:hover,
.ob-f .ob-f__day.ob-f__day--end:focus,
.ob-f .ob-f__day.ob-f__day--end:active,
.ob-f .ob-f__day.ob-f__day--end:focus-visible {
	background: var(--ob-f-accent);
	color: var(--ob-f-accent-ink);
}

.ob-f__day--empty {
	cursor: default;
}

.ob-f__day--off {
	color: #c4c4c4;
	cursor: not-allowed;
	text-decoration: line-through;
}

.ob-f__day--start {
	background: var(--ob-f-accent);
	color: var(--ob-f-accent-ink);
	font-weight: 700;
}

.ob-f__day--in {
	background: var(--ob-f-surface);
	border-color: var(--ob-f-accent);
}

/* ---------------------------------------------------------------- Huecos */

.ob-f__slots {
	display: grid;
	gap: 8px;
	/* auto-fit, no auto-fill: la última fila reparte el espacio sobrante
	   entre sus botones en lugar de dejar columnas vacías a la derecha. */
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}

.ob-f__slot {
	min-height: 46px;
	background: #fff;
	border: 1px solid var(--ob-f-line);
	border-radius: var(--ob-f-radius);
	/* Color explícito, no heredado: algunos temas pintan el texto de los
	   botones en blanco al enfocarlos y la hora se volvía ilegible. */
	color: var(--ob-f-ink);
	cursor: pointer;
	font: inherit;
	padding: 10px 6px;
}

/* Se declaran fondo Y color de texto, no solo el borde: si el plugin no los
   fija, el tema aplica los suyos y el botón se vuelve negro al pasar por
   encima, que es justo lo que no queremos. */
.ob-f .ob-f__slot:not(.ob-f__slot--on):hover:not(:disabled),
.ob-f .ob-f__slot:not(.ob-f__slot--on):focus:not(:disabled),
.ob-f .ob-f__slot:not(.ob-f__slot--on):focus-visible:not(:disabled) {
	background: #f6f2f0;
	background: var(--ob-f-accent-soft);
	border-color: var(--ob-f-accent);
	color: var(--ob-f-ink);
}

.ob-f .ob-f__slot:not(.ob-f__slot--on):active:not(:disabled) {
	background: var(--ob-f-accent-mid);
	color: var(--ob-f-ink);
}

.ob-f__slot--off {
	color: #c4c4c4;
	cursor: not-allowed;
	text-decoration: line-through;
}

.ob-f .ob-f__slot.ob-f__slot--on,
.ob-f .ob-f__slot.ob-f__slot--on:hover,
.ob-f .ob-f__slot.ob-f__slot--on:focus,
.ob-f .ob-f__slot.ob-f__slot--on:active,
.ob-f .ob-f__slot.ob-f__slot--on:focus-visible {
	background: var(--ob-f-accent);
	border-color: var(--ob-f-accent);
	color: var(--ob-f-accent-ink);
	font-weight: 600;
}

/* Red de seguridad: pase lo que pase en :hover, :focus o :active, el texto
   de los controles nunca queda del color del fondo. Los temas suelen definir
   button:focus con su propio color y eso hacía desaparecer la hora. */
.ob-f .ob-f__slot:not(.ob-f__slot--on):hover,
.ob-f .ob-f__slot:not(.ob-f__slot--on):focus,
.ob-f .ob-f__slot:not(.ob-f__slot--on):active,
.ob-f .ob-f__day:not(.ob-f__day--start):hover,
.ob-f .ob-f__day:not(.ob-f__day--start):focus,
.ob-f .ob-f__day:not(.ob-f__day--start):active {
	color: var(--ob-f-ink);
}

/* Anillo de foco para quien navega con teclado. Va aparte del color de
   fondo: el color indica el estado, el anillo indica dónde está el cursor. */
.ob-f button:focus-visible,
.ob-f .ob-f__control:focus-visible {
	outline: 2px solid var(--ob-f-accent);
	outline-offset: 2px;
}

/* -------------------------------------------------------------- Resumen */

.ob-f__summary {
	background: var(--ob-f-surface);
	border-left: 3px solid var(--ob-f-accent);
	border-radius: 0 var(--ob-f-radius) var(--ob-f-radius) 0;
	font-weight: 600;
	margin: 0 0 var(--ob-f-gap);
	padding: 12px 14px;
}

/* ---------------------------------------------------- Consentimiento */

.ob-f__consent {
	align-items: flex-start;
	display: flex;
	font-size: .9em;
	gap: 10px;
	margin: 0 0 var(--ob-f-gap);
}

.ob-f__consent input {
	flex: 0 0 auto;
	margin-top: 3px;
}

/* Trampa antispam: fuera de la vista pero presente en el DOM. */
.ob-f__hp {
	height: 0;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 0;
}

/* ---------------------------------------------------------- Respuesta */

.ob-f__feedback {
	border-radius: var(--ob-f-radius);
	margin: 0 0 var(--ob-f-gap);
	padding: 12px 14px;
}

.ob-f__feedback--error {
	background: #fdeaea;
	color: #8a1f1f;
}

.ob-f__feedback--ok {
	background: #e6f4e9;
	color: #1f6d34;
}

.ob-f__submit {
	background: var(--ob-f-accent);
	border: 0;
	border-radius: var(--ob-f-radius);
	color: var(--ob-f-accent-ink);
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	padding: 13px 26px;
	width: 100%;
}

.ob-f .ob-f__submit:hover,
.ob-f .ob-f__submit:focus,
.ob-f .ob-f__submit:focus-visible {
	background: var(--ob-f-accent-dark);
	color: var(--ob-f-accent-ink);
}

.ob-f__submit:disabled {
	cursor: wait;
	opacity: .6;
}

.ob-f-empty {
	color: #6b7280;
}

/* ------------------------------------------------------------- Móvil */

@media (max-width: 540px) {

	.ob-f__grid {
		grid-template-columns: 1fr;
	}

	.ob-f__slots {
		grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
	}
}

/* Respeta a quien pide menos movimiento en el sistema. */
@media (prefers-reduced-motion: reduce) {

	.ob-f__day {
		transition: none;
	}
}

/* ============================================================ PASOS
   Los paneles se ocultan con una clase, nunca con [hidden]: sin
   JavaScript se ven los tres seguidos y el formulario sigue funcionando.
   ================================================================= */

.ob-f__steps {
	counter-reset: none;
	display: flex;
	gap: 6px;
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}

.ob-f__step {
	align-items: center;
	color: var(--ob-f-muted);
	display: flex;
	flex: 1 1 0;
	font-size: .85em;
	gap: 8px;
	min-width: 0;
	padding: 0 0 10px;
	position: relative;
}

.ob-f__step::after {
	background: var(--ob-f-line);
	bottom: 0;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	right: 0;
}

.ob-f__step--on::after,
.ob-f__step--done::after {
	background: var(--ob-f-accent);
}

.ob-f__step-num {
	align-items: center;
	background: var(--ob-f-surface);
	border-radius: 50%;
	display: flex;
	flex: 0 0 auto;
	font-size: .85em;
	font-weight: 700;
	height: 24px;
	justify-content: center;
	width: 24px;
}

.ob-f__step--on .ob-f__step-num,
.ob-f__step--done .ob-f__step-num {
	background: var(--ob-f-accent);
	color: var(--ob-f-accent-ink);
}

.ob-f__step--on {
	color: var(--ob-f-ink);
	font-weight: 600;
}

.ob-f__step-txt {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Con JavaScript activo, solo se ve el panel en curso. */
.js .ob-f__panel {
	display: none;
}

.js .ob-f__panel--on {
	display: block;
}

/* --------------------------------------------------------- Resumen */

.ob-f__review {
	background: var(--ob-f-surface);
	border-radius: var(--ob-f-radius);
	margin: 0 0 var(--ob-f-gap);
	padding: 4px 16px;
}

.ob-f__review-row {
	border-bottom: 1px solid rgba(0, 0, 0, .07);
	display: flex;
	gap: 16px;
	justify-content: space-between;
	padding: 11px 0;
}

.ob-f__review-row:last-child {
	border-bottom: 0;
}

.ob-f__review-row span {
	color: var(--ob-f-muted);
	flex: 0 0 auto;
}

.ob-f__review-row strong {
	text-align: right;
	word-break: break-word;
}

/* -------------------------------------------------------- Acciones */

.ob-f__actions {
	display: flex;
	gap: 10px;
}

.ob-f__actions .ob-f__submit {
	flex: 1 1 auto;
}

.ob-f__back {
	background: none;
	border: 1px solid var(--ob-f-line);
	border-radius: var(--ob-f-radius);
	color: inherit;
	cursor: pointer;
	flex: 0 0 auto;
	font: inherit;
	padding: 13px 22px;
}

.ob-f .ob-f__back:hover,
.ob-f .ob-f__back:focus,
.ob-f .ob-f__back:focus-visible {
	background: #f6f2f0;
	background: var(--ob-f-accent-soft);
	border-color: var(--ob-f-accent);
	color: var(--ob-f-ink);
}

@media (max-width: 540px) {

	.ob-f__step-txt {
		display: none;
	}

	.ob-f__step {
		justify-content: center;
	}
}

/* ------------------------------------------------------ Confirmación */

.ob-f__done {
	background: #e6f4e9;
	border-radius: var(--ob-f-radius);
	padding: 22px;
}

.ob-f__done-msg {
	font-size: 1.05em;
	font-weight: 600;
	margin: 0 0 16px;
}

.ob-f__done .ob-f__review {
	background: rgba(255, 255, 255, .7);
	margin: 0;
}

/* ===================================================== FICHA DEL RECURSO
   Contenido que se añade solo a la página que WordPress genera por recurso.
   ==================================================================== */

.ob-single {
	margin: 0;
}

.ob-single__subtitle {
	color: var(--ob-f-ink);
	font-size: 1.25em;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 14px;
}

.ob-single__excerpt {
	color: var(--ob-f-muted);
	margin: 0 0 28px;
	max-width: 62ch;
}

.ob-single__excerpt p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------- Datos
   Tarjetas independientes en lugar de celdas de una tabla: así un valor
   largo crece hacia abajo sin estrechar a los demás. */

.ob-single__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}

.ob-single__facts li {
	background: var(--ob-f-surface);
	border-radius: var(--ob-f-radius);
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	min-width: 130px;
	padding: 12px 18px;
}

.ob-single__facts span {
	color: var(--ob-f-muted);
	font-size: .78em;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.ob-single__facts strong {
	font-size: 1.1em;
	line-height: 1.3;
	white-space: nowrap;
}

/* ------------------------------------------------------------ Horario
   Fuera de la rejilla de datos: un horario partido en mañana y tarde no
   cabe en una celda estrecha sin romperse en varios renglones. */

.ob-single__schedule {
	border: 1px solid var(--ob-f-line);
	border-radius: var(--ob-f-radius);
	margin: 0 0 28px;
	padding: 18px 22px;
}

.ob-single__schedule ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ob-single__schedule li {
	align-items: baseline;
	border-bottom: 1px solid var(--ob-f-line);
	display: flex;
	gap: 20px;
	justify-content: space-between;
	margin: 0;
	padding: 9px 0;
}

.ob-single__schedule li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.ob-single__schedule li:first-child {
	padding-top: 0;
}

.ob-single__schedule span {
	color: var(--ob-f-muted);
	flex: 0 0 auto;
}

.ob-single__schedule strong {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* ----------------------------------------------------------- Galería
   Proporción fija: con imágenes de tamaños dispares, dejarlas a su aire
   produce una cuadrícula desalineada. */

.ob-single__gallery {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	margin: 0 0 32px;
}

.ob-single__img {
	aspect-ratio: 4 / 3;
	border-radius: var(--ob-f-radius);
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* --------------------------------------------------------- Reservar */

.ob-single__booking {
	background: var(--ob-f-surface);
	border-radius: calc(var(--ob-f-radius) * 1.5);
	margin: 32px 0 0;
	padding: 28px;
}

.ob-single__booking .ob-f {
	margin: 0;
}

/* Sobre el fondo gris del bloque, los controles necesitan fondo propio. */
.ob-single__booking .ob-f__calendar,
.ob-single__booking .ob-f__control,
.ob-single__booking .ob-f__slot {
	background: #fff;
}

.ob-single__heading {
	font-size: 1.5em;
	margin: 0 0 20px;
}

.ob-single__heading--sm {
	font-size: 1.05em;
	margin: 0 0 6px;
}

@media (max-width: 540px) {

	.ob-single__facts li {
		flex: 1 1 100%;
	}

	.ob-single__booking {
		border-radius: var(--ob-f-radius);
		margin-left: -12px;
		margin-right: -12px;
		padding: 20px 16px;
	}

	.ob-single__schedule li {
		flex-direction: column;
		gap: 2px;
	}

	.ob-single__schedule strong {
		text-align: left;
	}
}

/* Fila destacada del resumen: la usa el addon de alojamiento para el total. */
.ob-f__review-row--total {
	border-top: 2px solid var(--ob-f-line);
	font-size: 1.1em;
}

.ob-f__review-row--total strong {
	font-size: 1.05em;
}

/* ==================================================== TARJETAS DE RECURSOS
   Listado de lo que se puede reservar. Hereda las variables del formulario,
   así que el color de marca configurado también las tiñe.
   ==================================================================== */

.ob-cards {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, 1fr);
}

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

.ob-card-item {
	background: #fff;
	border: 1px solid var(--ob-f-line);
	border-radius: var(--ob-f-radius);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.ob-card-item__media {
	display: block;
	line-height: 0;
}

.ob-card-item__media img,
.ob-card-item__placeholder {
	aspect-ratio: 4 / 3;
	display: block;
	object-fit: cover;
	width: 100%;
}

.ob-card-item__placeholder {
	background: var(--ob-f-surface);
}

.ob-card-item__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	padding: 18px;
}

.ob-card-item__title {
	font-size: 1.1em;
	line-height: 1.3;
	margin: 0;
}

.ob-card-item__title a {
	color: var(--ob-f-ink);
	text-decoration: none;
}

.ob-card-item__title a:hover {
	color: var(--ob-f-accent);
}

.ob-card-item__facts {
	color: var(--ob-f-muted);
	font-size: .85em;
	margin: 0;
}

.ob-card-item__text {
	color: var(--ob-f-muted);
	font-size: .93em;
	margin: 0;
}

.ob-card-item__foot {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	/* Empuja el pie abajo: con textos de distinta longitud, los botones
	   quedan alineados entre tarjetas en lugar de a distintas alturas. */
	margin-top: auto;
	padding-top: 8px;
}

.ob-card-item__price {
	font-size: 1.05em;
	font-weight: 700;
}

.ob-card-item__button {
	background: var(--ob-f-accent);
	border-radius: var(--ob-f-radius);
	color: var(--ob-f-accent-ink);
	font-size: .92em;
	font-weight: 600;
	padding: 9px 16px;
	text-decoration: none;
}

.ob-card-item__button:hover,
.ob-card-item__button:focus {
	color: var(--ob-f-accent-ink);
	filter: brightness(.93);
}

@media (max-width: 900px) {

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

@media (max-width: 560px) {

	.ob-cards,
	.ob-cards--2,
	.ob-cards--3,
	.ob-cards--4 {
		grid-template-columns: 1fr;
	}
}

/* ============================================== PASO 1 EN DOS COLUMNAS
   La columna lateral solo aparece cuando un addon la rellena: sin ella el
   formulario sigue siendo de una sola columna, como antes.
   ==================================================================== */

.ob-f__split {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
}

.ob-f__split--aside {
	grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
}

.ob-f__main {
	min-width: 0;
}

.ob-f__aside {
	align-self: start;
	background: var(--ob-f-surface);
	border-radius: var(--ob-f-radius);
	padding: 20px;
	/* Se queda a la vista al hacer scroll por el calendario: el resumen del
	   precio pierde su función si hay que subir a buscarlo. */
	position: sticky;
	top: 24px;
}

.ob-f__aside-title {
	font-size: 1.05em;
	font-weight: 700;
	margin: 0 0 14px;
}

.ob-f__aside-empty {
	color: var(--ob-f-muted);
	font-size: .92em;
	margin: 0;
}

@media (max-width: 860px) {

	.ob-f__split--aside {
		grid-template-columns: 1fr;
	}

	.ob-f__aside {
		position: static;
	}
}