/* ==========================================================================
   Motor de reservas
   --------------------------------------------------------------------------
   Va aparte de estilos.css porque es la parte viva de la página: el resto
   es texto y fotos que casi no cambian, y esto es un formulario de cuatro
   pasos que sí se va a tocar. Separarlo hace que buscar algo aquí no
   obligue a pasar por 600 líneas de portada y secciones.

   Usa las mismas variables de color de estilos.css, así que la paleta
   sigue saliendo del logo y no hay dos verdades sobre qué azul es el azul.
   ========================================================================== */

.motor {
  max-width: var(--ancho); margin: 0 auto;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 24px;
  box-shadow: var(--sombra-alta);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}

.motor-formulario { padding: 38px 40px; }
.motor-resumen {
  background: #0C3F6E; color: #EAF4FA;
  padding: 38px 34px;
  display: flex; flex-direction: column; gap: 22px;
}

/* ---------- Los cuatro pasos, arriba del formulario ------------------- */

.pasos {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 30px; flex-wrap: wrap;
}
.paso {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--tinta-suave);
}
.paso-num {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--linea-suave); color: var(--tinta-suave);
  font-size: 13px; flex-shrink: 0;
}
.paso.activo { color: var(--agua-honda); }
.paso.activo .paso-num { background: var(--agua-honda); color: #fff; }
.paso.hecho .paso-num { background: var(--verde); color: #fff; }
.paso-raya { flex: 1 1 14px; height: 1px; background: var(--linea); min-width: 12px; }

/* ---------- Campos ---------------------------------------------------- */

.campos { display: grid; gap: 14px; }
.campos-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.campos-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > label {
  font-size: 13px; font-weight: 700; color: var(--tinta-media);
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  padding: 13px 14px;
  font-family: inherit; font-size: 16px; color: var(--tinta);
  background: #fff;
}
.campo textarea { resize: vertical; min-height: 74px; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--agua-media);
  box-shadow: 0 0 0 3px rgba(49, 168, 207, .18);
}
/* Un campo que el motor rechazó se marca en rojo y explica por qué
   debajo, en vez de un aviso genérico arriba que obliga a adivinar. */
.campo.malo input, .campo.malo select { border-color: #C0392B; }
.campo-error { font-size: 13px; color: #C0392B; }

.motor h3 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 28px; margin: 0 0 6px;
}
.motor-guia { color: var(--tinta-suave); font-size: 15px; margin: 0 0 22px; }

.motor-botones {
  display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap;
}

/* ---------- Lista de habitaciones disponibles ------------------------- */

.opciones { display: flex; flex-direction: column; gap: 12px; }

.opcion {
  display: flex; gap: 0; align-items: stretch; text-align: left;
  width: 100%;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio);
  background: #fff;
  padding: 0; overflow: hidden;
  cursor: pointer; font-family: inherit;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.opcion:hover { border-color: var(--agua-media); box-shadow: var(--sombra-media); }
.opcion.elegida { border-color: var(--agua-honda); box-shadow: 0 0 0 3px rgba(8, 94, 168, .12); }

.opcion img { width: 148px; height: auto; min-height: 116px; object-fit: cover; flex-shrink: 0; }
.opcion-sinfoto { width: 148px; flex-shrink: 0; background: var(--agua-nube); }

.opcion-cuerpo {
  flex-grow: 1; padding: 14px 16px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.opcion-datos { flex-grow: 1; min-width: 150px; }
.opcion-datos b { display: block; font-size: 17px; font-weight: 700; }
.opcion-datos span { display: block; font-size: 14px; color: var(--tinta-suave); }

/* Se escribe con las dos clases a propósito: la regla `.opcion-datos span`
   de arriba pone display:block en todo lo que cuelgue de ahí, y pesa más
   que un `.opcion-quedan` suelto. Sin esto la etiqueta se estiraba de lado
   a lado y parecía una barra, no una pastilla. */
.opcion-datos .opcion-quedan {
  display: inline-block; margin-top: 5px;
  font-size: 12px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
}
.quedan-varias { background: #E6F6EC; color: #14703C; }
.quedan-pocas  { background: #FFF1E3; color: #B45309; }

.opcion-precio { text-align: right; }
.opcion-precio b { display: block; font-size: 20px; font-weight: 700; }
.opcion-precio span { font-size: 12px; color: var(--tinta-suave); }

/* ---------- Formas de pago ------------------------------------------- */

.pagos { display: flex; flex-direction: column; gap: 12px; }

.pago {
  display: flex; gap: 14px; align-items: flex-start; text-align: left;
  width: 100%;
  border: 1.5px solid var(--linea); border-radius: var(--radio);
  background: #fff; padding: 18px 20px;
  cursor: pointer; font-family: inherit;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.pago:hover { border-color: var(--agua-media); }
.pago.elegida { border-color: var(--agua-honda); box-shadow: 0 0 0 3px rgba(8, 94, 168, .12); }
.pago svg { flex-shrink: 0; margin-top: 2px; }
.pago b { display: block; font-size: 16px; }
.pago span { display: block; font-size: 14px; color: var(--tinta-suave); }

/* Los datos de la transferencia aparecen solo si escogió transferir. */
.datos-pago {
  margin-top: 14px;
  background: var(--agua-nube);
  border: 1px dashed var(--agua-media);
  border-radius: var(--radio-chico);
  padding: 18px 20px;
}
.datos-pago .fila {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  padding: 7px 0; font-size: 15px;
  border-bottom: 1px solid rgba(8, 94, 168, .1);
}
.datos-pago .fila:last-of-type { border-bottom: 0; }
.datos-pago .fila > span { color: var(--tinta-suave); }
.datos-pago .fila > div { font-weight: 700; text-align: right; }

.copiar {
  border: 1px solid var(--agua-media); background: #fff; color: var(--agua-honda);
  border-radius: 999px; padding: 3px 12px; font: inherit; font-size: 13px;
  font-weight: 700; cursor: pointer; margin-left: 8px;
}
.copiar:hover { background: var(--agua-clara); }

/* ---------- Cargar el comprobante ------------------------------------- */

.comprobante { margin-top: 16px; }

/* El input de archivo se esconde, pero sin display:none ni visibility:
   así escondido el teclado todavía lo alcanza, y el foco se ve porque la
   etiqueta de al lado lo dibuja. Con display:none dejaría de ser
   alcanzable y quien navega con teclado no podría cargar nada. */
.comprobante-input {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; overflow: hidden; white-space: nowrap;
}

.comprobante-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%;
  border: 1.5px dashed var(--agua-media);
  border-radius: var(--radio-chico);
  background: #fff; color: var(--agua-honda);
  padding: 15px 20px;
  font-weight: 700; font-size: 16px; cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.comprobante-boton:hover { background: var(--agua-clara); border-color: var(--agua-honda); }
.comprobante-input:focus-visible + .comprobante-boton {
  outline: 3px solid var(--sol-fuerte); outline-offset: 2px;
}

.comprobante-nota {
  font-size: 13px; color: var(--tinta-suave);
  line-height: 1.5; margin-top: 10px;
}

/* Ya cargado */
.comprobante-puesto {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px; padding: 14px 16px;
  background: #E6F6EC; border: 1px solid #C2E5CF;
  border-radius: var(--radio-chico);
}
.comprobante-puesto svg { flex-shrink: 0; }
.comprobante-datos { flex-grow: 1; min-width: 0; }
.comprobante-datos b {
  display: block; font-size: 15px; color: #14703C;
  /* Un nombre de archivo largo no puede empujar el botón de quitar. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.comprobante-datos span { font-size: 13px; color: #2F7A52; }

.comprobante-quitar {
  flex-shrink: 0;
  border: 1px solid #C2E5CF; background: #fff; color: #14703C;
  border-radius: 999px; padding: 5px 14px;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.comprobante-quitar:hover { background: #D8F0E2; }

/* ---------- Resumen de la derecha ------------------------------------- */

.motor-resumen .rotulo { color: var(--agua-clara); }
.resumen-lineas { display: flex; flex-direction: column; gap: 12px; }
.resumen-linea {
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  border-bottom: 1px solid rgba(234, 244, 250, .16);
  padding-bottom: 12px; font-size: 15px;
}
.resumen-linea > span { color: rgba(234, 244, 250, .72); }
.resumen-linea > b { font-weight: 700; white-space: nowrap; }

.resumen-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: auto; padding-top: 8px; gap: 12px;
}
.resumen-total span { font-size: 15px; color: rgba(234, 244, 250, .72); }
.resumen-total b {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 38px; font-weight: 400; color: var(--sol);
}
.resumen-nota { font-size: 13px; color: rgba(234, 244, 250, .55); line-height: 1.5; }
.resumen-vacio { color: rgba(234, 244, 250, .6); font-size: 15px; }

/* ---------- Avisos ---------------------------------------------------- */

.aviso-motor {
  padding: 14px 16px; border-radius: var(--radio-chico);
  font-size: 15px; margin-top: 18px;
  display: flex; gap: 10px; align-items: flex-start;
}
.aviso-malo   { background: #FCEDEB; color: #A8321F; border: 1px solid #F0C8C1; }
.aviso-bueno  { background: #E6F6EC; color: #14703C; border: 1px solid #C2E5CF; }
.aviso-neutro { background: var(--agua-nube); color: var(--tinta-media); border: 1px solid #C9E4F2; }

.cargando { padding: 40px 0; text-align: center; color: var(--tinta-suave); }

/* ---------- Pantalla final ------------------------------------------- */

.listo { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 10px 0; }
.listo-marca {
  width: 62px; height: 62px; border-radius: 50%;
  background: #E6F6EC; display: flex; align-items: center; justify-content: center;
}
.listo h3 { font-size: 36px; }
.codigo {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 34px; letter-spacing: .06em;
  background: var(--agua-nube); border: 1px dashed var(--agua-media);
  border-radius: var(--radio-chico); padding: 12px 26px;
}

/* ---------- Consultar una reserva ya hecha ---------------------------- */

.consultar-abrir {
  background: none; border: 0; padding: 0; margin-top: 18px;
  font: inherit; font-size: 15px; font-weight: 700;
  color: var(--agua-honda); cursor: pointer; text-decoration: underline;
}
.consultar-caja {
  max-width: var(--ancho); margin: 18px auto 0;
  background: #fff; border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 22px 24px;
}

/* ---------- Pantallas pequeñas ---------------------------------------- */

@media (max-width: 900px) {
  .motor { grid-template-columns: 1fr; }
  /* En el celular el resumen va arriba: es lo que la persona necesita
     mirar mientras cambia fechas y habitación, no algo para el final. */
  .motor-resumen { order: 1; }
  .resumen-total { margin-top: 0; }
}

@media (max-width: 760px) {
  .motor-formulario { padding: 26px 20px; }
  .motor-resumen { padding: 26px 20px; }
  .campos-2, .campos-3 { grid-template-columns: 1fr; }

  /* La foto pasa a franja de arriba: a 148 píxeles de ancho no se
     distingue la habitación, y el nombre y el precio se aplastan. */
  .opcion { flex-direction: column; }
  .opcion img, .opcion-sinfoto { width: 100%; height: 160px; min-height: 0; }

  /* El precio cae debajo del nombre y ocupa la fila entera. Alineado a la
     derecha quedaba el número en un borde y su explicación en el otro. */
  .opcion-precio { text-align: left; width: 100%; }
  .opcion-precio b { margin-top: 6px; }

  .pasos { gap: 4px; }
  .paso > span:not(.paso-num) { display: inline; }
  .motor-botones .btn { flex: 1 1 100%; }
  .codigo { font-size: 28px; }
}

/* Presentación del motor integrada con la página. */
.motor-total-movil { display:none; }
@media(max-width:760px){
  .en-reserva .motor-total-movil { position:fixed;bottom:0;left:0;right:0;z-index:95;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 24px max(12px,env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--linea);box-shadow:0 -4px 20px #18334310;font-size:11px; }
  .motor-total-movil b { display:block;color:var(--agua-honda);font-size:20px; }
  .motor-total-movil .btn { font-size:13px; }
  #motor-reservas:has(.motor-total-movil) { padding-bottom:84px; }
  .visor-abierto .motor-total-movil { display:none; }
}
.motor.sin-seleccion { grid-template-columns: 1fr; }
.motor.sin-seleccion .motor-formulario { max-width: 780px; width:100%; margin:auto; }
.motor { border-radius:14px; grid-template-columns:minmax(0,1.8fr) minmax(0,1fr); }
.motor h3,.codigo,.resumen-total b { font-family:var(--serif); }
.motor-resumen { background:var(--agua-nube);color:var(--tinta);padding:30px 26px;gap:18px; }
.motor-resumen .rotulo { color:var(--agua-media); }
.resumen-linea { border-color:var(--linea);flex-wrap:wrap;gap:6px; }
.resumen-linea>span,.resumen-total span,.resumen-nota,.resumen-vacio { color:var(--tinta-suave); }
.resumen-linea>b { white-space:normal; }
.resumen-total b { color:var(--agua-honda);font-size:32px; }
.resumen-total { margin-top:0; }
.motor-resumen { align-self:start; }
.motor h3 { font-size:30px; }
.motor-formulario { min-width:0; }
.paso.hecho .paso-num { background:var(--agua-media); }
.fechas-elegidas { display:flex;flex-direction:column;gap:6px;padding:20px;background:var(--crema);border-radius:8px; }
.fechas-elegidas b { color:var(--agua-honda); }
.fechas-elegidas span { font-size:14px; }
.politicas-reserva { padding:16px 18px;background:var(--crema);border-left:3px solid var(--sol);font-size:13px;margin:20px 0; }
.politicas-reserva p { margin:8px 0; }
.politicas-reserva a { display:inline-flex;align-items:center;min-height:44px; }
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible { outline:3px solid var(--agua-honda);outline-offset:2px; }
.campo { min-width:0; }
.campo-error { color:var(--tinta);font-weight:700; }
.campo.malo input,.campo.malo select { border-color:var(--tinta);border-width:2px; }
.opcion picture { flex:0 0 130px;align-self:stretch; }
.opcion picture img { width:130px;height:100%;min-height:120px;object-fit:cover; }
.opcion-datos { min-width:0; }
.opcion-cuerpo { min-width:0; }
.opcion-datos b { color:var(--agua-honda); }
.quedan-varias,.quedan-pocas { background:var(--agua-nube);color:var(--agua-honda); }
.aviso-bueno,.aviso-malo,.comprobante-puesto,.listo-marca { background:var(--agua-nube);color:var(--tinta);border-color:var(--linea); }
.aviso-malo { border-left:3px solid var(--tinta); }
.comprobante-datos b,.comprobante-datos span,.comprobante-quitar { color:var(--agua-honda); }
.comprobante-quitar,.copiar { min-height:44px; }
.listo svg,.comprobante-puesto svg { stroke:var(--agua-media); }
.consultar-caja { text-align:left; }
.consultar-caja .campos { align-items:end; }
@media(max-width:900px) {
  .motor { grid-template-columns:1fr; }
  .motor-resumen { order:1; }
  .resumen-lineas { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
}
@media(max-width:760px) {
  .motor-formulario,.motor-resumen { padding:22px 16px; }
  .motor h3 { font-size:27px; }
  .pasos { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-bottom:24px; }
  .paso { flex-direction:column;gap:6px;font-size:10px; }
  .paso-raya { display:none; }
  .opcion { flex-direction:row;flex-wrap:wrap; }
  .opcion picture { flex-basis:100%;height:130px; }
  .opcion picture img { width:100%;height:130px;min-height:0; }
  .opcion-cuerpo { padding:14px;gap:8px; }
  .opcion-datos b { font-size:16px; }
  .opcion-datos span { font-size:12px; }
  .opcion-precio span { font-size:11px; }
  .campos-3 { grid-template-columns:1fr; }
  .campos-3 .campo { grid-column:auto!important; }
  .resumen-lineas { grid-template-columns:1fr; }
  .resumen-total b { font-size:28px; }
  .datos-pago { padding:16px; }
  .datos-pago .fila { flex-wrap:wrap; }
  .datos-pago .fila>div { text-align:left;overflow-wrap:anywhere; }
  .pago { padding:16px 12px;gap:10px; }
  .pago b { font-size:14px; }
  .pago span { font-size:12px; }
  .consultar-caja { padding:18px 14px; }
}

/* ==========================================================================
   Termales El Ocho
   --------------------------------------------------------------------------
   Todo lo de arriba es el motor tal como nació en Arco Iris. Esta capa lo
   viste con la identidad de El Ocho: la paleta de su logo (azul #063289 e
   índigo #252D71, con el dorado de detalle), Pacifico en los títulos (la letra del logo),
   Alegreya Sans para leer y esquinas rectas como en el resto de su sitio.

   Va al final a propósito: aquí nada se borra de lo de arriba, solo se
   pisa. Si algún día se actualiza el motor copiando el de Arco Iris, esta
   capa sigue funcionando encima.

   Las variables con nombre de agua (agua-honda, sol...) son las que usa el
   motor por dentro; aquí se les da el color de El Ocho.
   ========================================================================== */

.pagina-reserva {
  --ancho: 1180px;
  --agua-honda: var(--azul);
  --agua-media: var(--azul);
  --agua-clara: #3d5fb0;
  --agua-nube: var(--suave);
  --crema: #f7f4ee;
  --sol: var(--azul);
  --sol-fuerte: var(--indigo);
  --verde: #14703c;
  --linea-suave: #e7ebf3;
  --tinta-media: var(--texto);
  --tinta-suave: var(--texto);
  --radio: 2px;
  --radio-chico: 2px;
  --sombra-media: 0 10px 30px rgba(27, 33, 56, 0.08);
  --sombra-alta: 0 24px 60px rgba(27, 33, 56, 0.1);
  background: var(--blanco);
  font-family: var(--sans);
  color: var(--tinta);
}

/* ---------- La página ---------------------------------------------------- */

.pagina-reserva .cabecera { position: sticky; }
.reserva-acciones { display: flex; align-items: center; gap: 22px; }
.reserva-acciones > a:not(.boton) {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--indigo); text-decoration: none;
}

.reserva-top {
  max-width: var(--ancho); margin: 0 auto;
  padding: 64px 32px 26px;
}
.reserva-top h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(34px, 5vw, 58px); line-height: 1.05;
  margin: 8px 0 14px; color: var(--indigo);
}
.reserva-top p:not(.antetitulo) { max-width: 620px; color: var(--texto); font-size: 17px; margin: 0 0 10px; }
.reserva-nota { font-size: 15px !important; }
.reserva-nota a { color: var(--azul); }

.reserva-cuerpo { max-width: var(--ancho); margin: 0 auto; padding: 0 32px 80px; }

/* ---------- El buscador de fechas --------------------------------------- */

.buscador-zona { max-width: var(--ancho); margin: 0 auto 34px; padding: 0 32px; }
.buscador {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: end; gap: 18px;
  padding: 22px 24px;
  border-top: 2px solid var(--azul);
  border-bottom: 1px solid var(--linea);
  background: var(--blanco);
}
.buscador-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.buscador-campo label {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto);
}
.buscador-campo input, .buscador-campo select {
  font: inherit; font-size: 16px; color: var(--tinta);
  border: 0; border-bottom: 1px solid var(--linea);
  padding: 8px 0; background: transparent; border-radius: 0; min-width: 0;
}
.buscador-campo input:focus, .buscador-campo select:focus { outline: none; border-bottom-color: var(--azul); }

/* ---------- Los botones que usa el motor, con la forma de .boton -------- */

.pagina-reserva .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 49px; padding: 14px 26px;
  font: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--azul); border-radius: 0;
  cursor: pointer; transition: background 0.2s, color 0.2s;
}
.pagina-reserva .btn-sol, .pagina-reserva .btn-agua { background: var(--azul); color: #fff; }
.pagina-reserva .btn-sol:hover, .pagina-reserva .btn-agua:hover { background: var(--indigo); border-color: var(--indigo); }
.pagina-reserva .btn-suave, .pagina-reserva .btn-borde { background: #fff; color: var(--azul); }
.pagina-reserva .btn-suave:hover, .pagina-reserva .btn-borde:hover { background: var(--suave); }
.pagina-reserva .btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---------- El motor, con el aire de El Ocho ---------------------------- */

.pagina-reserva .motor { border-radius: 0; box-shadow: none; border-color: var(--linea); }
.pagina-reserva .motor-resumen { background: var(--indigo); color: #eef1fa; }
/* La capa de arriba pinta las etiquetas con --tinta-suave y el total con
   --agua-honda, pensadas para un resumen claro. Sobre el índigo quedaban
   gris oscuro y azul: casi invisibles. Aquí van claras y el total en oro. */
.pagina-reserva .resumen-linea { border-color: rgba(238, 241, 250, 0.18); }
.pagina-reserva .resumen-linea > span,
.pagina-reserva .resumen-total span,
.pagina-reserva .resumen-nota,
.pagina-reserva .resumen-vacio { color: rgba(238, 241, 250, 0.8); }
.pagina-reserva .resumen-total b { color: var(--oro); }

/* Mientras se recalcula con fechas o personas nuevas, la lista y el total
   se apagan: así se nota que el precio que se ve todavía no es el nuevo. */
.motor.actualizando .opciones,
.motor.actualizando .motor-resumen,
.motor.actualizando .motor-formulario > :not(.pasos) {
  opacity: 0.45; pointer-events: none; transition: opacity 0.15s;
}

/* Fotos de las habitaciones: cuadradas y del mismo tamaño en todas las
   tarjetas (el usuario pidió que no quedaran unas verticales y otras
   horizontales). object-fit recorta sin deformar. */
.pagina-reserva .opcion-fotos { position: relative; flex: 0 0 200px; align-self: center; }
.pagina-reserva .opcion picture { display: block; flex: none; height: auto; }
.pagina-reserva .opcion picture img {
  display: block; width: 100%; height: auto; min-height: 0;
  aspect-ratio: 1 / 1; object-fit: cover;
}

/* Flechas para pasar las fotos de la habitación, sobre la foto. Blancas
   con sombra para que se lean sobre cualquier foto, clara u oscura. */
.foto-flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, 0.92); color: var(--indigo);
  font: inherit; font-size: 24px; line-height: 1; padding: 0 0 3px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(27, 33, 56, 0.25); cursor: pointer;
}
.foto-flecha:hover { background: #fff; }
.foto-flecha:focus-visible { outline: 3px solid var(--oro); outline-offset: 1px; }
.foto-anterior { left: 6px; }
.foto-siguiente { right: 6px; }
.foto-contador {
  position: absolute; right: 6px; bottom: 6px;
  background: rgba(27, 33, 56, 0.7); color: #fff;
  font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
}

/* Los datos de la tarjeta son un botón (para escoger con el teclado): se le
   quita la cara de botón para que se vea como antes. */
.pagina-reserva .opcion { cursor: pointer; }
.pagina-reserva button.opcion-cuerpo {
  border: 0; background: none; color: inherit; font: inherit;
  text-align: left; cursor: pointer; align-self: stretch;
}
.pagina-reserva button.opcion-cuerpo:focus-visible { outline: 3px solid var(--azul); outline-offset: -3px; }

@media (max-width: 760px) {
  /* En el celular la foto va al lado del nombre, cuadrada y más chica:
     a lo ancho de la pantalla un cuadrado ocuparía media pantalla. */
  .pagina-reserva .opcion { flex-wrap: nowrap; align-items: center; }
  .pagina-reserva .opcion-fotos { flex: 0 0 112px; align-self: flex-start; }
  .pagina-reserva .opcion picture img { height: auto; }
  .foto-flecha { width: 30px; height: 30px; font-size: 21px; }
  .foto-anterior { left: 3px; }
  .foto-siguiente { right: 3px; }
}
.pagina-reserva .motor h3,
.pagina-reserva .listo h3 { font-family: var(--serif); font-weight: 400; color: var(--indigo); }
.pagina-reserva .motor-resumen .rotulo,
.pagina-reserva .rotulo {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oro);
}
.pagina-reserva .codigo { font-family: var(--serif); color: var(--azul); }
.pagina-reserva .aviso-neutro { border-color: var(--linea); }
.pagina-reserva .fila { display: flex; justify-content: space-between; gap: 12px; }
.datos-pago-titulo { font-weight: 700; margin-bottom: 8px; }

.consulta-existente { margin-top: 34px; border-top: 1px solid var(--linea); padding-top: 18px; }
.consulta-existente summary {
  cursor: pointer; font-size: 15px; color: var(--indigo);
  display: flex; justify-content: space-between; list-style: none;
}

.pagina-reserva .pie { margin-top: 0; }

@media (max-width: 860px) {
  .buscador { grid-template-columns: 1fr 1fr; }
  .buscador .btn { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .reserva-top { padding: 40px 18px 18px; }
  .buscador-zona, .reserva-cuerpo { padding-inline: 18px; }
  .reserva-acciones > a:not(.boton) { display: none; }
  .pagina-reserva .cabecera { padding-inline: 16px; }
}

/* El triángulo propio del navegador sobraba: el "+" ya dice que se abre. */
.consulta-existente summary::-webkit-details-marker { display: none; }
.consulta-existente summary::marker { content: ""; }
/* Esta caja trae su propio «+»; se apaga el que estilos.css pone a todo summary. */
.consulta-existente summary::after { content: none; }