/* =====================================================================
   Motor de reservas de Cork Valley

   Sigue la estructura del motor de Mews —misma barra de cinco pasos,
   misma tira de fechas, mismas tarjetas— con tipografía y espacios
   propios. Sin librerías: una hoja de estilos y se acabó.
   ===================================================================== */

:root {
  --m-tinta: #1b1f1d;
  /* Medido el 06/10/2026: el gris de antes (#6b7671) daba 4,71:1 sobre
     blanco —justo— y 4,43:1 sobre --m-fondo, o sea que NO llegaba a AA
     en la tira de resumen. Este da 5,85 y 5,50. Miguel: «apenas se
     ven» (msg136). */
  --m-tinta-suave: #5d6764;
  --m-linea: #e3e7e5;
  --m-fondo: #f7f8f7;
  --m-blanco: #ffffff;
  --m-acento: #2f5d3f;
  --m-acento-claro: #e8f0ea;
  --m-aviso: #a8442a;
  /* El rojo de «Última disponible». Aparte de --m-aviso a proposito:
     aquel es el color de «algo va mal» y este el de «date prisa», y
     mezclarlos haria que un error pareciera una oferta. 05/10/2026. */
  --m-urgente: #c2410c;
  --m-urgente-suave: #fdf1e9;
  /* El verde de las ofertas. Es el de marca de la web (#2D5C46)
     oscurecido hasta que pasa AA sobre su propio fondo: medido, 5,3:1.
     El pálido de antes no se veía. 06/10/2026 (msg137). */
  --m-oferta-fuerte: #26553f;
  --m-oferta-linea: rgba(38, 85, 63, .30);
  --m-oferta-fondo: rgba(38, 85, 63, .07);
  --m-oferta-oro: #f2b33d;

  /* LAS MEDIDAS DEL TEXTO. Miguel, 05/10/2026 (msg136), con una captura
     de Tarifas en su iPhone: «en la version movil por lo menos los
     textos un poco mas grandes, apenas se ven».

     No se tocan los tamaños uno a uno: se declaran aqui y en el movil
     suben los tres a la vez. Asi no queda ningun texto por debajo de
     14 px sin que nadie se acuerde. */
  --m-cuerpo: 14px;   /* parrafos, botones, tablas */
  --m-nota: 13px;     /* texto secundario */
  --m-menor: 12px;    /* etiquetas y pies */
}

/* El movil de verdad: 390 px es un iPhone normal. */
@media (max-width: 720px) {
  :root { --m-cuerpo: 16px; --m-nota: 15px; --m-menor: 14px; }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  color: var(--m-tinta);
  background: var(--m-blanco);
  font-size: 15px;
  line-height: 1.5;
}
/* 16 px de cuerpo en el movil, que es lo que pidio Miguel (msg136). Los
   campos ya estaban a 16 por lo de Safari; esto es el texto. */
@media (max-width: 720px) {
  body { font-size: 16px; }
}

/* --- Cabecero: la foto y el logo -------------------------------------
   Miguel, 05/10/2026: «anade el logo de Cork Valley y alguna foto en
   modo cabecero».

   El logo de la marca es verde claro (#EBF6D0) y esta hecho para fondo
   OSCURO. Por eso el logo y la foto no son dos piezas pegadas sino una
   sola: el logo va ENCIMA de la foto, con un velo oscuro de por medio.
   Sobre la barra blanca que habia antes no se veria.

   Lo que habia era un cuadrado verde con las letras «CV», que no es el
   logo de nadie. */
.m-cabecero {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  /* Fondo oscuro debajo de la foto: si tarda o falla, el logo claro se
     sigue leyendo en vez de desaparecer sobre blanco. */
  background: #16181a;
  color: #fff;
}
.m-cabecero.alto  { min-height: clamp(230px, 40vw, 360px); }
/* En los pasos de en medio es una banda: la reserva ya esta empezada y
   una foto grande solo empuja el precio y el boton fuera del movil. */
.m-cabecero.banda { min-height: clamp(96px, 16vw, 150px); }

.m-cabecero-foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
/* LAS DOS FOTOS, ALTERNANDO (Miguel, 05/10/2026, msg143: «que cambien
   cada 5 segundos»). Van superpuestas y lo único que cambia es la
   opacidad: así no hay salto de altura ni se mueven el logo y el lema,
   que están en otra capa. */
.m-cabecero-foto { transition: opacity .9s ease-in-out; }
.m-cabecero-foto.segunda { opacity: 0; }
.m-cabecero.b .m-cabecero-foto { opacity: 0; }
.m-cabecero.b .m-cabecero-foto.segunda { opacity: 1; }
/* Quien pide menos movimiento se queda con la primera, y la segunda ni
   siquiera se baja. */
@media (prefers-reduced-motion: reduce) {
  .m-cabecero-foto { transition: none; }
  .m-cabecero-foto.segunda { display: none; }
}
/* El velo. Mas oscuro abajo, que es donde van el logo y el reclamo, y
   arriba, que es donde va el selector de idioma. */
.m-cabecero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
              rgba(10,12,13,.55) 0%, rgba(10,12,13,.16) 36%,
              rgba(10,12,13,.60) 76%, rgba(10,12,13,.80) 100%);
}

.m-cabecero-dentro {
  position: relative; z-index: 1;
  padding: 0 24px 22px; text-align: center;
}
.m-cabecero.banda .m-cabecero-dentro { padding-bottom: 14px; }

.m-marca { display: inline-block; text-decoration: none; }
/* width y height van tambien en el HTML: sin ellos la pagina da un
   salto cuando acaba de cargar el logo. */
.m-marca img { display: block; height: auto; width: clamp(132px, 22vw, 196px); }
.m-cabecero.banda .m-marca img { width: clamp(104px, 16vw, 140px); }

.m-reclamo {
  margin: 12px auto 0; max-width: 32em;
  font-size: clamp(14px, 2.4vw, 17px); line-height: 1.35;
  color: rgba(255,255,255,.93);
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
}

/* --- Barra de pasos ------------------------------------------------ */
.m-pasos {
  display: flex; gap: 8px;
  padding: 16px 24px 20px;
  border-bottom: 1px solid var(--m-linea);
  overflow-x: auto;
}
.m-paso {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 0; min-width: 120px;
  color: var(--m-tinta-suave); font-size: var(--m-nota);
}
.m-paso::after {
  content: ""; flex: 1; height: 1px; background: var(--m-linea);
}
.m-paso:last-child::after { display: none; }
.m-bolita {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--m-fondo); border: 1px solid var(--m-linea);
  font-size: var(--m-menor); flex: 0 0 auto;
}
.m-paso.activo { color: var(--m-tinta); font-weight: 600; }
.m-paso.activo .m-bolita { background: var(--m-tinta); color: #fff; border-color: var(--m-tinta); }
.m-paso.hecho .m-bolita { background: var(--m-acento); color: #fff; border-color: var(--m-acento); }

/* --- Estructura ---------------------------------------------------- */
.m-contenedor { max-width: 1000px; margin: 0 auto; padding: 28px 24px 60px; }
.m-titulo { font-size: 24px; font-weight: 600; text-align: center; margin: 0 0 22px; }
.m-seccion { font-size: 15px; font-weight: 600; margin: 0 0 12px; }

.m-tarjeta {
  background: var(--m-blanco);
  border: 1px solid var(--m-linea);
  border-radius: 10px;
  padding: 20px;
}

.m-dos { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 860px) { .m-dos { grid-template-columns: 1fr; } }

/* --- Tira de resumen ----------------------------------------------- */
.m-tira {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  background: var(--m-fondo);
  border: 1px solid var(--m-linea);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
}
.m-tira strong { display: block; font-weight: 600; }
.m-tira-etiqueta { display: block; font-size: var(--m-menor); color: var(--m-tinta-suave); }
.m-editar {
  margin-left: auto;
  padding: 7px 16px; border: 1px solid var(--m-linea); border-radius: 999px;
  background: var(--m-blanco); color: var(--m-tinta);
  text-decoration: none; font-size: var(--m-nota);
}

/* --- Buscador ------------------------------------------------------ */
.m-buscador { max-width: 720px; margin: 0 auto; }
.m-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
/* UN CAMPO POR LINEA EN EL MOVIL. A 390 px caben dos columnas de 150,
   asi que el correo se quedaba en 150 px y se veia cortado, y la
   tarjeta se salia por la derecha. Visto en la captura de Miguel del
   05/10/2026. */
@media (max-width: 720px) {
  .m-campos { grid-template-columns: 1fr; }
}
/* El campo del telefono ocupa la fila entera: el prefijo y el numero
   juntos no caben en media columna. */
.m-ancho-campo { grid-column: 1 / -1; }
.m-telefono { display: flex; gap: 8px; }
.m-telefono select { flex: 0 1 11.5em; min-width: 0; }
.m-telefono input { flex: 1 1 auto; min-width: 0; }
/* 16 px en los campos del movil: por debajo de eso Safari hace zoom
   solo al tocarlos y descoloca la pantalla. */
@media (max-width: 720px) {
  input, select, textarea { font-size: 16px; }
}
/* LAS OPCIONES NO SON ETIQUETAS DE CAMPO. Esta regla ponía
   `display: block` a TODA etiqueta dentro de una tarjeta, y como
   `.m-tarjeta label` (0,1,1) gana a `.m-opcion` (0,1,0), las opciones de
   «¿Cómo quieres pagar?» dejaban de ser una fila: el circulito se iba a
   su propia línea encima del logotipo.

   Es lo que Cowork reportó TRES VECES y yo di por corregido otras
   tantas tocando el flex de `.m-opcion`, que nunca llegaba a aplicarse.
   Se vio pidiéndole al navegador qué reglas le ponían `display` al
   elemento: salían dos, y ganaba esta. 06/10/2026. */
.m-campos label:not(.m-opcion), .m-tarjeta label:not(.m-opcion) {
  display: block; font-size: var(--m-menor); color: var(--m-tinta-suave); margin-bottom: 5px;
}
input, select, textarea {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--m-linea); border-radius: 7px;
  font: inherit; color: inherit; background: var(--m-blanco);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--m-acento-claro); border-color: var(--m-acento); }
/* EL RADIO NO ES UNA CAJA DE TEXTO. La regla de arriba le metía 9 px de
   relleno y un borde a los `input` de todo el motor, radios incluidos,
   y por eso el circulito de «Importe a pagar» se montaba encima de «No
   queda nada pendiente a la llegada». Visto en la captura de Miguel del
   05/10/2026 (msg139). */
input[type="radio"], input[type="checkbox"] {
  width: auto; padding: 0; border: 0; background: none;
  accent-color: var(--m-acento);
}
textarea { resize: vertical; }

/* --- Fichas de categoría ------------------------------------------- */
.m-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.m-ficha {
  border: 1px solid var(--m-linea); border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column; background: var(--m-blanco);
}
.m-ficha.ancha { flex-direction: row; margin-bottom: 20px; }
@media (max-width: 700px) { .m-ficha.ancha { flex-direction: column; } }
.m-foto {
  /* Relativo para que la etiqueta de «Última disponible» se pueda
     colocar encima. 05/10/2026. */
  position: relative;
  height: 170px;
  /* El color va aparte del degradado a propósito: cuando la foto se
     pone por style y el archivo falta, queda un color liso en vez de
     un hueco blanco. */
  background-color: #cbd8cf;
  background-image: linear-gradient(135deg, #dfe7e1, #cbd8cf);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.m-foto.grande { flex: 0 0 42%; height: auto; min-height: 280px; }

/* Tira de fotos de la ficha. Sin JavaScript: son imágenes y ya está. */
.m-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
  margin: 0 0 22px;
}
.m-galeria img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  background: #cbd8cf;
}
@media (max-width: 700px) {
  .m-galeria { grid-template-columns: repeat(2, 1fr); }
  .m-galeria img { height: 110px; }
}
.m-ficha-cuerpo { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.m-ficha-cuerpo h2 { font-size: 17px; margin: 0; font-weight: 600; }
.m-dato { margin: 0; font-size: var(--m-nota); color: var(--m-tinta-suave); }
.m-descripcion { margin: 0; font-size: var(--m-nota); color: var(--m-tinta-suave); }

/* --- «Última disponible» ---------------------------------------------
   Miguel, 05/10/2026: «tiene que ser mucho mas llamativo y atractivo,
   que llame mas la atencion». Antes era una linea de texto de 13px
   perdida entre el maximo de personas y el precio.

   Va en DOS sitios a proposito: una etiqueta encima de la foto, que es
   donde mira el ojo, y la misma frase junto al precio, que es donde se
   decide. Y se mantiene en Tarifas y en Resumen.

   NO SE INVENTA ESCASEZ: sale solo cuando queda una casa libre de
   verdad para esas fechas, que es el mismo numero que decide si la
   reserva se puede hacer o no. */
.m-etiqueta-ultima {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px 6px 11px; border-radius: 999px;
  background: var(--m-urgente); color: #fff;
  font-size: var(--m-menor); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
  pointer-events: none;
}
.m-etiqueta-ultima::before {
  content: ""; flex: 0 0 auto;
  width: 7px; height: 7px; border-radius: 50%; background: #fff;
  animation: m-latido 1.7s ease-in-out infinite;
}
@keyframes m-latido { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
/* Quien pide menos movimiento en su sistema no lo pide por capricho. */
@media (prefers-reduced-motion: reduce) {
  .m-etiqueta-ultima::before { animation: none; }
}

.m-ultima {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  margin: 8px 0 0; padding: 8px 12px;
  border-left: 3px solid var(--m-urgente); border-radius: 0 7px 7px 0;
  background: var(--m-urgente-suave); color: var(--m-urgente);
  font-size: var(--m-cuerpo);
}
.m-ultima strong { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.m-ultima span { color: var(--m-tinta); opacity: .8; }

/* Dos o tres libres no es urgente: se dice, y ya. */
.m-quedan { margin: 4px 0 0; font-size: var(--m-nota); font-weight: 600; color: var(--m-tinta-suave); }

/* EL PRECIO, PEGADO AL TEXTO. Aqui ponia `margin-top: auto`, que lo
   empujaba al fondo de la tarjeta; y como las tarjetas se estiran a la
   altura de la mas alta, en la de Cabana quedaba un hueco de unos 300 px
   entre «Mas» y «Desde» (captura de Miguel, msg165.5). Sin `auto` el
   precio va justo debajo del texto: las tarjetas siguen igual de altas,
   pero el hueco se queda abajo, donde no molesta. 07/10/2026. */
.m-precio { padding-top: 10px; }
.m-desde { display: block; font-size: var(--m-menor); color: var(--m-tinta-suave); }
.m-precio strong { font-size: 22px; font-weight: 600; }
.m-porn { display: block; font-size: var(--m-menor); color: var(--m-tinta-suave); }

/* --- Extras y tarifas ---------------------------------------------- */
.m-extra, .m-tarifa {
  border: 1px solid var(--m-linea); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 12px;
}
.m-extra { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.m-extra-precio { text-align: right; white-space: nowrap; }
.m-extra-precio strong { display: block; font-size: 17px; }
.m-extra-precio span { display: block; font-size: var(--m-menor); color: var(--m-tinta-suave); }
.m-total-extra { margin-top: 3px; }
.m-condicion { margin: 6px 0 0; font-size: var(--m-menor); color: var(--m-tinta-suave); }
.m-tarifa-pie {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 14px; margin-top: 12px; flex-wrap: wrap;
}
.m-elegir { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Tablas y totales ---------------------------------------------- */
.m-tabla { width: 100%; border-collapse: collapse; font-size: var(--m-cuerpo); }
.m-tabla th {
  text-align: left; font-size: var(--m-menor); font-weight: 600; color: var(--m-tinta-suave);
  border-bottom: 1px solid var(--m-linea); padding: 0 0 7px;
}
.m-tabla td { padding: 7px 0; border-bottom: 1px solid var(--m-linea); }
.m-tabla td.n, .m-tabla th.n { text-align: right; font-variant-numeric: tabular-nums; }

.m-linea {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--m-linea);
}
.m-linea:last-of-type { border-bottom: 0; }
.m-linea.total { font-weight: 600; font-size: 17px; padding-top: 12px; border-bottom: 0; }

/* --- Botones ------------------------------------------------------- */
.m-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
/* TEXTO CENTRADO EN TODOS LOS BOTONES DEL MOTOR (M2, Miguel 16/10/2026): los que se estiran a todo el ancho
   (fichas, acciones en el móvil) dejaban el texto pegado a la izquierda. */
.m-boton, .m-pagar, .m-fechas-boton, button.m-boton { text-align: center; justify-content: center; }
.m-boton {
  display: inline-block; padding: 10px 20px;
  border: 1px solid var(--m-linea); border-radius: 999px;
  background: var(--m-blanco); color: var(--m-tinta);
  font: inherit; font-size: var(--m-cuerpo); text-decoration: none; cursor: pointer;
}
.m-boton:hover { border-color: var(--m-tinta-suave); }
.m-boton.principal { background: var(--m-tinta); color: #fff; border-color: var(--m-tinta); }
.m-boton.principal:hover { background: #000; }

/* --- Avisos -------------------------------------------------------- */
.m-nota { margin: 12px 0 0; font-size: var(--m-menor); color: var(--m-tinta-suave); }
.m-nota.destacada {
  background: var(--m-acento-claro); color: var(--m-tinta);
  padding: 12px 14px; border-radius: 8px; font-size: var(--m-nota);
}
.m-aviso, .m-error {
  padding: 11px 15px; border-radius: 8px; margin-bottom: 18px; font-size: var(--m-cuerpo);
}
.m-aviso { background: var(--m-acento-claro); }
.m-error { background: #fdecea; color: var(--m-aviso); }

.m-vacio { text-align: center; padding: 40px 20px; }
.m-vacio h2 { font-size: 18px; margin: 0 0 8px; }
.m-vacio .m-boton { margin-top: 14px; }

.m-sin { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--m-linea); }
.m-sin h2 { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.m-sin ul { margin: 0; padding-left: 18px; color: var(--m-tinta-suave); font-size: var(--m-cuerpo); }
.m-sin li { margin-bottom: 4px; }
.m-motivo { font-size: var(--m-menor); }

/* --- Confirmación -------------------------------------------------- */
.m-hecho { text-align: center; margin-bottom: 26px; }
.m-tic {
  width: 52px; height: 52px; margin: 0 auto 14px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--m-acento); color: #fff; font-size: 24px;
}
.m-localizador {
  font-size: 20px; font-weight: 600; letter-spacing: .06em; margin: 0 0 8px;
}

.m-pie {
  border-top: 1px solid var(--m-linea);
  padding: 18px 24px; text-align: center;
  font-size: var(--m-menor); color: var(--m-tinta-suave);
}

/* Descripción plegable de la ficha de categoría, como en Mews.
   Sin JavaScript: <details> nativo. */
.m-plegable { margin: 2px 0 4px; }
.m-plegable > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--m-nota); color: var(--m-tinta-suave);
}
.m-plegable > summary::-webkit-details-marker { display: none; }
.m-plegable > summary::before {
  content: "⌄"; font-size: var(--m-cuerpo); line-height: 1;
  transition: transform .15s ease;
}
.m-plegable[open] > summary::before { transform: rotate(180deg); }
.m-plegable > summary:hover { color: var(--m-tinta); }
.m-plegable .m-cerrar { display: none; }
.m-plegable[open] .m-abrir { display: none; }
.m-plegable[open] .m-cerrar { display: inline; }
.m-plegable .m-descripcion { margin-top: 8px; white-space: pre-line; }

/* Textos justificados en el motor de reservas. 23/09/2026.
   Solo la prosa de varias lineas: los titulos, los precios, los
   importes de tabla y los mensajes centrados mantienen su alineacion.
   hyphens:auto va con el justificado; sin el, el espanol justificado
   abre huecos enormes entre palabras en las columnas estrechas. */
.m-descripcion,
.m-aviso,
.m-condicion,
.m-nota,
.m-motivo,
.m-ficha-cuerpo p {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
/* En el movil, NI justificado NI guiones. Miguel, 05/10/2026: en su
   captura el justificado partia palabras («pe-rros», «des-preocupate»)
   porque en una columna de 350 px no caben. A la izquierda y entero. */
@media (max-width: 720px) {
  .m-descripcion,
  .m-aviso,
  .m-condicion,
  .m-nota,
  .m-motivo,
  .m-ficha-cuerpo p {
    text-align: left;
    -webkit-hyphens: manual;
    hyphens: manual;
  }
}

/* ---------------------------------------------------------------------
   El paso de pago
   --------------------------------------------------------------------- */
/* Cada opcion es una caja grande y pulsable entera, no un circulito de
   12 px: esto se rellena desde el movil. 25/09/2026. */
.m-opcion {
  display: flex; align-items: flex-start; gap: 10px;
  /* NUNCA EN DOS LINEAS. Cowork lo vio el 05/10/2026 a 591 px (msg150):
     el circulito quedaba en una linea suelta encima del icono y del
     nombre. El radio va a la izquierda y el contenido a su lado, como
     en «Todo ahora», pase lo que pase con los anchos. */
  flex-wrap: nowrap;
  padding: 12px; margin-bottom: 8px;
  border: 1px solid var(--m-linea); border-radius: var(--m-radio, 8px);
  cursor: pointer;
}
.m-opcion:hover { border-color: var(--m-tinta-suave); }
.m-opcion input { margin-top: 3px; flex: none; width: 18px; height: 18px; }
.m-opcion span { flex: 1; }
/* 12,5 px era el ultimo texto que quedaba por debajo del minimo
   acordado en msg136. Cowork lo cazo en la pagina de pago. 06/10/2026. */
.m-opcion small { display: block; color: var(--m-tinta-suave); font-size: var(--m-nota); }
/* OJO AL `>`: sin el, el cuadro de Scalapay salia marcado SIEMPRE,
   porque lleva dentro los radios de los plazos y uno viene marcado de
   serie (Cowork lo midio: mismo fondo con Bizum elegido). El `>` hace
   que solo cuente el radio de la forma de pago, que es hijo directo.
   07/10/2026 (msg166.1). */
.m-opcion:has(> input:checked) { border-color: var(--m-acento); background: var(--m-acento-claro); }
.m-recargo { font-style: normal; color: var(--m-aviso); font-size: var(--m-nota); }
.m-total { margin: 10px 0 0; font-size: 16px; }
/* FILAS DE IMPORTE EN UNA LÍNEA (Cowork, 13/10/2026; Miguel «hazlo» el 14/10): concepto a la izquierda, importe a la derecha que
   nunca se parte («+100,00 €» siempre junto) y la nota en gris debajo, en su línea. Antes iban en `.m-dato` (flex de tres hijos) y en
   el iPhone salían tres columnas partidas. */
.m-fila-importe { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 4px 0 0; }
.m-fila-importe[hidden] { display: none; }
.m-fila-importe .m-concepto { flex: 1 1 auto; min-width: 0; }
.m-fila-importe .m-importe { flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.m-fila-nota { margin: 2px 0 0; color: var(--m-tinta-suave); font-size: .9em; }

/* --- La pantalla de pago, rehecha (msg139, 05/10/2026) ---------------
   Miguel, con la captura de /reservar/pago en su iPhone: «todo más
   destacado, y el botón de pagar mucho más vistoso, es el más
   importante, textos un poco más grandes».

   Tenía razón en lo que señalaba: el botón «Pagar» era blanco con borde
   y pegado a la izquierda —el elemento MENOS visible de la pantalla—
   mientras «Continuar» y «Mostrar tarifas» eran negros y anchos. */

/* La forma de pago: icono, nombre en tinta y a tamaño legible. */
.m-opcion strong { font-size: var(--m-cuerpo); }
/* LA FILA DE LA FORMA DE PAGO: radio, logotipo y nombre, hermanos del
   mismo flex. Sin envoltorio: antes el logotipo y el nombre iban
   dentro de un `span` y el circulito se despegaba a una línea suya.
   06/10/2026 (msg160 B). */
.m-opcion-forma { align-items: center; }
.m-opcion-forma > input { align-self: center; margin-top: 0; }
.m-forma-texto { flex: 1; min-width: 0; }
/* En cuántos plazos, dentro de la opción de Scalapay. Solo se ve cuando
   esa opción está marcada: preguntar por los plazos de una forma de
   pago que no has elegido es ruido. 06/10/2026. */
/* LOS PLAZOS, A LA DERECHA Y SIN CRECER EL CUADRO. Miguel, 06/10/2026
   (msg166.2): «lo de 3 y 4 pagos deberia estar a la derecha, que no se
   amplie el cuadro de scalapay al seleccionarlo». Antes caian debajo
   del titulo y el cuadro pasaba de una linea a tres.
   `margin-left: auto` los empuja a la derecha dentro de la fila. */
/* 13/10/2026: los plazos van debajo de la fila de Scalapay y los ensena el JavaScript (atributo hidden), no `:has`. */
.m-plazos { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 10px 34px; }
.m-plazos[hidden] { display: none; }
.m-plazo {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 11px; border: 1px solid var(--m-linea); border-radius: 8px;
  background: var(--m-blanco); font-size: var(--m-nota); cursor: pointer;
}
.m-plazo:has(input:checked) { border-color: var(--m-acento); box-shadow: inset 0 0 0 1px var(--m-acento); }
.m-plazo small { display: block; color: var(--m-tinta-suave); }
.m-forma-icono {
  flex: 0 0 auto; width: 34px; height: 22px;
  display: block;
}
/* LOS LOGOTIPOS, TODOS IGUALES Y EN UNA FILA (Cowork, 13/10/2026; Miguel «hazlo»). Antes cada marca tenía su altura «a ojo»
   (Bizum 30, Scalapay 19, PayPal 21, carteras 22) y Tarjeta envolvía en dos líneas en el móvil. Ahora: una caja por opción, sin
   saltos, y 20 px para todos. Si una marca parece pequeña por el aire de su imagen, se corrige su viewBox, no esta altura. */
.m-forma-logos {
  display: flex; align-items: center; gap: 10px;
  flex: 0 0 auto; flex-wrap: nowrap;
}
.m-forma-logo {
  height: 20px; width: auto; max-width: 56px;
  object-fit: contain; display: block;
}
/* A 420 px o menos, Tarjeta enseña solo Visa y Mastercard: Apple Pay y Google Pay ya están escritos en su descripción. */
@media (max-width: 420px) {
  .m-forma-logos .applepay, .m-forma-logos .gpay { display: none; }
}
/* En 2 pagos Redsys va solo con tarjeta («C»): las carteras no salen allí, así que tampoco aquí. 13/10/2026. */
.m-en-mitad .m-forma-logos .applepay, .m-en-mitad .m-forma-logos .gpay,
.m-en-mitad .m-con-carteras, form:not(.m-en-mitad) .m-sin-carteras { display: none; }

/* Lo que solo tiene que oir un lector de pantalla: el nombre de la
   forma de pago cuando ya lo dice el logotipo. No es `display:none`,
   que lo esconderia tambien de quien lo necesita. */
.m-solo-lectura {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.m-opcion:has(input:checked) {
  border-color: var(--m-acento); background: var(--m-acento-claro);
  box-shadow: inset 0 0 0 1px var(--m-acento);
}

/* El total de ahora, que es la cifra que importa. */
.m-pagar-total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--m-linea);
}
.m-pagar-total span { font-weight: 600; }
.m-pagar-total strong { font-size: 1.8rem; font-weight: 700; line-height: 1.1; }

/* EL BOTÓN. Ancho, sólido y con el importe dentro: lo que se pulsa
   tiene que decir lo que se paga. */
.m-pagar {
  display: block; width: 100%;
  padding: 16px 20px; border: 0; border-radius: 10px;
  background: var(--m-tinta-boton, #15171a); color: #fff;
  font: inherit; font-size: 1.15rem; font-weight: 700;
  cursor: pointer; text-align: center;
}
.m-pagar:hover { background: #000; }
.m-pagar:focus-visible { outline: 3px solid var(--m-acento); outline-offset: 2px; }

/* Las señales de confianza, pegadas al botón y no en una esquina. */
.m-confianza {
  margin: 10px 0 0; text-align: center;
  font-size: var(--m-nota); color: var(--m-tinta-suave);
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.m-confianza svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* EN EL MÓVIL, EL BOTÓN NO SE PIERDE. Miguel llegó a la pantalla y el
   botón quedaba debajo de la barra de Safari. Barra fija abajo, con la
   zona segura de iOS respetada (`env(safe-area-inset-bottom)`): sin
   eso, en un iPhone con barra inferior el botón queda medio tapado.
   El hueco de abajo evita que la barra tape el último bloque. */
@media (max-width: 720px) {
  .m-barra-pago {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--m-blanco);
    border-top: 1px solid var(--m-linea);
    box-shadow: 0 -4px 18px rgba(0,0,0,.08);
  }
  .m-barra-pago .m-confianza { margin-top: 7px; }
  .m-hueco-barra { height: 128px; }
}
@media (min-width: 721px) {
  .m-barra-pago { margin-top: 18px; }
  .m-hueco-barra { display: none; }
}

/* EL BOTÓN DE SEGUIR, SIEMPRE A LA VISTA EN EL MÓVIL. Cowork lo midió
   el 06/10/2026 (msg160 A7): en el paso 1 el «Siguiente» quedaba en
   y=1134 con una ventana de 920, o sea fuera de la pantalla y debajo de
   la barra de Safari. Un motor de reservas en el que no se ve el botón
   de continuar no vende.

   Misma barra fija que la de pagar, con la zona segura de iOS. */
@media (max-width: 720px) {
  /* El «Siguiente» del paso 1. */
  .m-boton.m-ancho {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    width: auto; border-radius: 0;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    font-size: 1.05rem; font-weight: 700;
    box-shadow: 0 -4px 18px rgba(0,0,0,.12);
  }
  .m-buscador { padding-bottom: 96px; }

  /* Y EL DE LOS DEMÁS PASOS. Cowork, 06/10/2026: la barra fija estaba
     solo en el paso 1 y en la página de pago; en Tarifas, Resumen y
     Datos el botón seguía quedando fuera de pantalla. Son los que
     llevan `.m-acciones` con un botón principal dentro.

     La barra lleva el fondo del papel y el botón ocupa el ancho; el
     «Volver», que es secundario, se queda en el flujo de la página. */
  .m-acciones {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    margin: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--m-blanco);
    border-top: 1px solid var(--m-linea);
    box-shadow: 0 -4px 18px rgba(0,0,0,.08);
    gap: 8px;
  }
  .m-acciones .m-boton.principal {
    flex: 1; text-align: center;
    padding: 15px 18px; border-radius: 10px;
    font-size: 1.05rem; font-weight: 700;
  }
  .m-acciones .m-boton:not(.principal) { flex: 0 0 auto; }
  /* Hueco al final del contenido para que la barra no tape nada. */
  .m-contenedor { padding-bottom: 110px; }
}

/* =====================================================================
   Paso 1 con la cara del motor de Mews (msg81, 29/09/2026)
   ===================================================================== */
/* Los bloques van separados por una linea fina, como en la captura de
   Mews: Fechas | Adultos | Perros | codigo | boton. */
.m-bloque { padding: 16px 0; border-bottom: 1px solid var(--m-linea); }
.m-bloque:first-child { padding-top: 0; }
.m-bloque.m-centro { text-align: center; border-bottom: 0; }

/* --- Campo de fechas ----------------------------------------------- */
.m-fechas { position: relative; }
/* Mientras el guion no ha arrancado se ven los dos input nativos y el
   boton no: asi la pantalla sirve igual sin JavaScript. */
.m-fechas .m-fechas-boton { display: none; }
.m-fechas.vivo .m-fechas-boton { display: flex; }
.m-fechas.vivo .m-nativo { display: none; }
.m-nativo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.m-fechas-boton {
  width: 100%; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 16px; border: 1px solid var(--m-linea); border-radius: 10px;
  background: var(--m-fondo); color: var(--m-tinta);
  font: inherit; font-size: 17px; cursor: pointer;
}
.m-fechas-boton:hover { border-color: var(--m-tinta-suave); }
.m-icono {
  width: 20px; height: 20px; flex: 0 0 20px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --- Calendario ----------------------------------------------------- */
/* EL CALENDARIO, COMO EL DE MEWS (Miguel, msg165.3): modal CENTRADO con
   el fondo oscurecido, no un desplegable pegado al campo. Era lo
   segundo: en el movil quedaba a medio salir por abajo y habia que
   desplazarse para ver la ultima semana. 07/10/2026. */
.m-cal-fondo {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(16, 20, 18, .55);
}
.m-cal {
  position: fixed; z-index: 61;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: calc(100% - 32px); max-width: 360px;
  max-height: calc(100vh - 48px); overflow: auto;
  background: var(--m-blanco);
  border: 1px solid var(--m-linea); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  padding: 14px 16px 16px;
}
.m-cal-cabeza {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; padding-bottom: 10px;
  border-bottom: 1px solid var(--m-linea);
}
/* EL ROTULO QUE DICE QUE TOCA: «Llegada» y luego «Salida». Es la pista
   de que el calendario sigue abierto esperando el segundo clic, que es
   justo lo que el huesped no sabia. */
.m-cal-titulo { font-size: 1.05rem; }
.m-cal-cerrar {
  background: none; border: 0; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--m-tinta-suave);
  /* 44 px de area real para el dedo, aunque la X sea pequena. */
  padding: 4px 10px; margin: -4px -10px -4px 0;
}
/* Con el modal abierto la pagina de detras no se mueve. */
body.m-sin-scroll { overflow: hidden; }
.m-cal-barra {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.m-cal-mes { font-weight: 600; text-transform: capitalize; }
.m-cal-atras, .m-cal-alante {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--m-linea); background: var(--m-blanco);
  font-size: 20px; line-height: 1; color: var(--m-tinta);
}
.m-cal-atras[disabled] { opacity: .3; cursor: default; }
.m-cal-dias {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.m-cal-cabecera {
  text-align: center; font-size: var(--m-menor); color: var(--m-tinta-suave);
  padding-bottom: 6px;
}
.m-cal-dia {
  aspect-ratio: 1; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: var(--m-cuerpo); color: var(--m-tinta); border-radius: 8px;
}
.m-cal-dia:hover:not([disabled]) { background: var(--m-acento-claro); }
.m-cal-dia[disabled] { color: #c7cdc9; cursor: default; }
/* Hoy siempre se distingue: Miguel pidio que se vea siempre. */
.m-cal-dia.hoy { font-weight: 700; box-shadow: inset 0 0 0 1px var(--m-tinta-suave); }
.m-cal-dia.dentro { background: var(--m-acento-claro); border-radius: 0; }
.m-cal-dia.extremo { background: var(--m-tinta); color: #fff; font-weight: 600; }
.m-cal-dia.extremo.entrada { border-radius: 8px 0 0 8px; }
.m-cal-dia.extremo.salida { border-radius: 0 8px 8px 0; }
/* VISTA PREVIA DE LA SALIDA (Cowork, 14/10/2026): mientras se elige la salida. */
.m-cal-dia.previa-dentro { background: var(--m-acento-claro); border-radius: 0; }
.m-cal-dia.previa-salida,
.m-cal-dia.previa-salida:hover { background: var(--m-tinta); color: #fff; font-weight: 600; border-radius: 0 8px 8px 0; }
.m-cal-dia.extremo.entrada.solo { border-radius: 8px; }
.m-cal-dias:has(.previa-salida) .m-cal-dia.extremo.entrada.solo { border-radius: 8px 0 0 8px; }
.m-cal-pie {
  margin: 10px 0 0; text-align: center; font-size: var(--m-nota);
  color: var(--m-tinta-suave);
}

/* --- Contadores − n + ------------------------------------------------ */
.m-contador { display: flex; align-items: center; }
.m-contador input {
  text-align: center; border: 0; font-size: 17px;
  -moz-appearance: textfield;
}
.m-contador input::-webkit-outer-spin-button,
.m-contador input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.m-contador .m-menos, .m-contador .m-mas { display: none; }
.m-contador.vivo {
  border: 1px solid var(--m-linea); border-radius: 10px;
  background: var(--m-blanco);
}
.m-contador.vivo .m-menos, .m-contador.vivo .m-mas {
  display: block; width: 52px; height: 48px; flex: 0 0 52px;
  border: 0; background: transparent; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--m-tinta);
}
.m-contador.vivo .m-menos[disabled], .m-contador.vivo .m-mas[disabled] {
  color: #c7cdc9; cursor: default;
}
.m-reparto { margin: 8px 0 0; font-size: var(--m-nota); color: var(--m-tinta-suave); }
.m-reparto:empty { display: none; }
.m-apunte { margin: 8px 0 0; font-size: var(--m-nota); color: var(--m-tinta-suave); }

/* --- Código promocional ---------------------------------------------- */
.m-enlace-codigo {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--m-tinta); text-decoration: none; font-size: 15px;
}
.m-enlace-codigo:hover { text-decoration: underline; }
.m-mas-cuadro {
  display: inline-grid; place-items: center; width: 20px; height: 20px;
  border: 1px solid var(--m-tinta); border-radius: 4px; font-size: var(--m-cuerpo);
  line-height: 1;
}
#m-codigo-caja { text-align: left; max-width: 320px; margin: 0 auto; }

/* --- Botón Siguiente, a todo el ancho y negro (Mews) ----------------- */
.m-boton.m-ancho {
  display: block; width: 100%; margin-top: 18px;
  padding: 15px 18px; border: 0; border-radius: 10px;
  background: #16191a; color: #fff;
  font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
  text-align: center;
}
.m-boton.m-ancho:hover { background: #000; }

/* =====================================================================
   Paso 2 (msg81, puntos 9, 10 y 11)
   ===================================================================== */
/* 11. Las dos lineas de la tira, al mismo cuerpo y sin negrita, como en
   Mews: antes la de arriba era pequeña y gris y la de abajo grande y en
   negrita, y parecian dos cosas distintas. */
.m-tira strong { font-weight: 400; font-size: 15px; }
.m-tira-etiqueta { font-size: 15px; color: var(--m-tinta-suave); }

/* 9. Las categorias sin disponibilidad, con su foto y atenuadas, en vez
   de una lista de texto: se sigue viendo lo que hay en la finca. */
.m-sin-rejilla { margin-top: 26px; }
.m-ficha.apagada { opacity: .55; filter: grayscale(.85); }
.m-ficha.apagada .m-motivo {
  display: block; margin: 0 0 8px; font-size: var(--m-nota); color: var(--m-aviso);
}
.m-ficha.apagada .m-foto { position: relative; }

/* 10. El icono del maximo de personas, con dos personas. */
.m-dato { display: flex; align-items: center; gap: 7px; }
.m-dato .m-icono { width: 17px; height: 17px; flex: 0 0 17px; }

/* --- Carrusel de fotos (punto 8) -------------------------------------- */
.m-carrusel { position: relative; }
.m-carrusel-tira {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.m-carrusel-tira::-webkit-scrollbar { display: none; }
.m-carrusel-tira img {
  flex: 0 0 100%; width: 100%; height: 190px; object-fit: cover;
  scroll-snap-align: start; display: block; background: #cbd8cf;
}
.m-puntos {
  position: absolute; left: 0; right: 0; bottom: 8px;
  display: flex; justify-content: center; gap: 6px; pointer-events: none;
}
.m-punto {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.55); box-shadow: 0 0 2px rgba(0,0,0,.4);
}
.m-punto.aqui { background: #fff; width: 7px; height: 7px; }
.m-flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.85); color: #16191a; font-size: 18px;
  line-height: 1; display: none;
}
.m-carrusel.vivo .m-flecha { display: block; }
.m-flecha.izq { left: 8px; }
.m-flecha.der { right: 8px; }

/* El cambio de idioma (29/09/2026). Antes «ES · ES» era texto fijo;
   ahora es un selector y tiene que parecerlo. Desde el 05/10/2026 va
   ENCIMA de la foto del cabecero, asi que sus colores son los de un
   fondo oscuro, no los de papel. */
.m-idioma {
  position: absolute; top: 12px; right: 16px; z-index: 2;
  display: flex; gap: 10px; align-items: center; font-size: var(--m-nota);
  color: rgba(255,255,255,.80);
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.m-idioma a { color: rgba(255,255,255,.80); text-decoration: none; }
.m-idioma a:hover { color: #fff; text-decoration: underline; }
.m-idioma .m-aqui { color: #fff; font-weight: 600; }
.m-idioma .m-aqui + a::before, .m-idioma a + .m-aqui::before {
  content: "·"; margin-right: 10px; color: rgba(255,255,255,.45);
}

/* La línea del descuento en el resumen (msg81 punto 5). Va en verde y con
   el signo menos delante: tiene que leerse como lo que es, dinero que se
   quita, y no confundirse con un cargo más. */
.m-linea.m-descuento { color: var(--m-acento); }
.m-linea.m-descuento strong { letter-spacing: .04em; }
.m-aviso.bien {
  background: var(--m-acento-claro); border-color: var(--m-acento);
  color: var(--m-acento);
}

/* El aviso del reparto en alojamientos (msg81 punto 3). Va antes del
   precio y destacado: es la explicación de por qué el total es el doble. */
.m-reparto-ficha {
  margin: 8px 0; padding: 7px 10px; font-size: var(--m-nota);
  background: var(--m-acento-claro); border-radius: 7px;
  color: var(--m-tinta);
}

/* La casilla de condiciones y privacidad (msg84, punto 26). Va pegada al
   botón, no perdida arriba: es lo último que se lee antes de reservar. */
.m-condiciones { margin: 14px 0 0; font-size: var(--m-cuerpo); line-height: 1.45; }
.m-condiciones input { width: auto; margin-right: 8px; }
.m-condiciones a { color: var(--m-acento); }

/* El ahorro se ve, no se deduce. Miguel, 04 y 05/10/2026 (msg126 y
   msg133: «cámbialo ya»). El precio de tarifa va tachado al lado del de
   verdad, y la oferta tiene su propio bloque en vez de ser una línea de
   resta que el huésped tiene que hacer de cabeza. */
.m-tachado {
  opacity: .55;
  margin-right: .5rem;
  text-decoration-thickness: 1px;
}
/* Miguel, 05/10/2026 (msg137): «esto de la oferta más destacado, pero
   tiene que ser muy visible desde el primer paso de la reserva». El
   recuadro verde pálido de antes le parecía poco. Ahora el bloque lleva
   el color de marca en la banda de la izquierda, el ahorro en grande y
   la fecha límite como lo que es: una fecha límite. */
.m-oferta {
  margin: 12px 0;
  padding: 13px 15px;
  border: 1px solid var(--m-oferta-linea);
  border-left: 4px solid var(--m-oferta-fuerte);
  border-radius: 0 10px 10px 0;
  background: var(--m-oferta-fondo);
}
.m-oferta-nombre {
  font-weight: 700; color: var(--m-oferta-fuerte);
  text-transform: uppercase; letter-spacing: .04em;
  font-size: var(--m-nota);
}
.m-oferta-ahorro {
  margin-top: 4px;
  display: flex; align-items: center; /* CENTRADO CON EL PORCENTAJE (Miguel 14/10) */ gap: 8px; flex-wrap: wrap;
}
/* El ahorro es la cifra que convence: va en grande y en tinta, no en
   gris. El porcentaje al lado, y SIEMPRE calculado, nunca escrito a
   mano: Cowork ya avisó de que un «-35 %» inventado no vale. */
.m-oferta-ahorro strong { font-size: 1.45rem; font-weight: 700; line-height: 1.1; }
.m-oferta-pct {
  background: var(--m-oferta-fuerte); color: #fff;
  padding: 2px 8px; border-radius: 999px;
  font-size: var(--m-menor); font-weight: 700;
}
/* Hasta cuándo vale. Se lee como urgencia, que es lo que es, pero sin
   gritar: si todo grita no destaca nada. */
.m-oferta-letra {
  margin: 7px 0 0;
  font-size: var(--m-nota);
  color: var(--m-urgente); font-weight: 600;
}

/* --- La oferta en los pasos 1, 2 y 3 ---------------------------------
   msg134 punto 3 y msg137: hasta hoy el huésped no se enteraba de que
   había oferta hasta el RESUMEN, con la reserva casi hecha. El precio
   ya la llevaba aplicada; lo que faltaba era decirlo. */

/* Paso 1: la banda de arriba, antes de elegir nada. El texto lo arma
   `motor.py` con las ofertas que de verdad están vigentes; aquí no hay
   ningún porcentaje escrito. */
/* --- Banda de oferta del paso 1, en forma de cupón -------------------
   Miguel, 13/10/2026: «haz un banner que sea vistoso y llamativo e
   invite a reservar». Mismo texto y mismos datos que la banda de antes
   (porcentaje y fecha salen de la oferta), otra forma: cuerpo verde de
   marca con la cifra grande y un resguardo ámbar con la fecha tope.
   Sin librerías y sin imágenes. */
.m-banda-oferta {
  position: relative; overflow: hidden;
  display: flex; align-items: stretch;
  margin: 0 auto 22px; max-width: 720px;
  padding: 0; border: 0; border-radius: 14px;
  background: radial-gradient(130% 150% at 0% 0%,
              #35724f 0%, var(--m-oferta-fuerte) 52%, #1c4230 100%);
  color: #fff; text-align: left; font-size: var(--m-cuerpo);
  box-shadow: 0 12px 28px rgba(28, 66, 48, .30);
}
.m-oferta-cuerpo {
  flex: 1 1 auto; min-width: 0; margin: 0;
  display: grid; grid-template-columns: auto auto;
  justify-content: space-between; align-items: center;
  column-gap: 22px;
  padding: 18px 30px 20px 28px;
}
.m-oferta-arriba {
  grid-row: 1 / span 2; max-width: 8.2em; text-wrap: balance;
  font-size: 27px; font-weight: 700; line-height: 1.16;
  letter-spacing: -.005em;
}
.m-oferta-cifra {
  align-self: end;
  font-size: 68px; font-weight: 800; line-height: 1;
  letter-spacing: -.03em; color: var(--m-oferta-oro);
  white-space: nowrap;
}
.m-oferta-cifra small {
  font-size: 19px; font-weight: 600; letter-spacing: 0;
  color: #fff; margin-right: 4px;
}
.m-oferta-abajo {
  align-self: start; margin-top: 3px;
  font-size: 17px; color: rgba(255, 255, 255, .9);
}

/* El resguardo: la fecha tope. La línea de puntos y los dos mordiscos
   son los de un cupón que se arranca. */
.m-banda-oferta .m-hasta {
  position: relative; flex: 0 0 196px; margin: 0;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px;
  padding: 16px 18px; text-align: center;
  background: var(--m-oferta-oro); color: var(--m-tinta);
  border-left: 2px dashed rgba(27, 31, 29, .38);
  font-size: 15px; font-weight: 600;
}
.m-banda-oferta .m-hasta strong {
  color: var(--m-tinta);
  font-size: 34px; font-weight: 800; line-height: 1.05;
  letter-spacing: -.02em;
}
.m-banda-oferta .m-hasta::before,
.m-banda-oferta .m-hasta::after {
  content: ""; position: absolute; left: -11px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--m-blanco);
}
.m-banda-oferta .m-hasta::before { top: -10px; }
.m-banda-oferta .m-hasta::after { bottom: -10px; }

/* El brillo que cruza la banda. Uno cada siete segundos: que se vea,
   no que moleste. */
.m-banda-oferta::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0;
  width: 34%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%,
              rgba(255,255,255,.26) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-220%) skewX(-18deg);
  animation: m-oferta-brillo 7s ease-in-out 1s infinite;
}
@keyframes m-oferta-brillo {
  0% { transform: translateX(-220%) skewX(-18deg); }
  22%, 100% { transform: translateX(420%) skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
  .m-banda-oferta::after { animation: none; display: none; }
}

/* En el móvil el resguardo pasa abajo, a todo lo ancho. */
@media (max-width: 600px) {
  .m-banda-oferta { flex-direction: column; }
  .m-oferta-cuerpo {
    display: flex; flex-direction: column; align-items: flex-start;
    justify-content: center; padding: 18px 20px 16px;
  }
  .m-oferta-arriba { max-width: none; font-size: 20px; }
  .m-oferta-cifra { align-self: auto; margin: 4px 0 2px; font-size: 54px; }
  .m-oferta-abajo { align-self: auto; margin-top: 0; }
  .m-banda-oferta .m-hasta {
    flex: 0 0 auto; flex-direction: row; align-items: baseline; gap: 8px;
    padding: 12px 20px;
    border-left: 0; border-top: 2px dashed rgba(27, 31, 29, .38);
    font-size: 16px;
  }
  .m-banda-oferta .m-hasta strong { font-size: 26px; }
  .m-banda-oferta .m-hasta::before,
  .m-banda-oferta .m-hasta::after { top: -11px; bottom: auto; }
  .m-banda-oferta .m-hasta::before { left: -10px; }
  .m-banda-oferta .m-hasta::after { left: auto; right: -10px; }
}

/* Paso 2: la etiqueta encima de la foto de la categoría. Va abajo a la
   izquierda para no pelearse con «Última disponible», que va arriba. */
.m-etiqueta-oferta {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  max-width: calc(100% - 20px);
  padding: 6px 12px; border-radius: 999px;
  background: var(--m-oferta-fuerte); color: #fff;
  font-size: var(--m-menor); font-weight: 700;
  letter-spacing: .03em;
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
  pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Paso 3: la línea de la oferta dentro de cada tarjeta de tarifa. Es
   el mismo bloque que el del resumen, más apretado. */
.m-oferta.compacta { margin: 8px 0 0; padding: 9px 12px; }
.m-oferta.compacta .m-oferta-ahorro strong { font-size: 1.15rem; }

/* El ahorro bajo el «desde» de la ficha de categoría. No es un gris
   más: es la razón por la que ese precio es ese. */
/* El desglose de los dos pagos (msg135). Va dentro de la tarjeta de la
   tarifa y del resumen, con las dos cifras en columna: lo que se mira
   es cuánto sale HOY. */
.m-dos-pagos {
  margin: 8px 0 0; padding: 10px 12px;
  border: 1px solid var(--m-linea); border-radius: 8px;
  background: var(--m-fondo);
}
.m-dos-pagos-linea {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: var(--m-cuerpo);
}
.m-dos-pagos-linea + .m-dos-pagos-linea { margin-top: 3px; }
.m-dos-pagos-linea strong { font-variant-numeric: tabular-nums; }
.m-dos-pagos-letra {
  margin: 7px 0 0; font-size: var(--m-nota); color: var(--m-tinta-suave);
}

.m-ahorro-ficha { color: var(--m-oferta-fuerte); font-weight: 600; }
.m-ahorro-ficha strong { font-weight: 700; }

/* =====================================================================
   LA PANTALLA DE «RESERVA HECHA», REHECHA (propuesta B, 07/10/2026).
   Miguel: «hay que mejorarlo». Mismas piezas que la pagina de pago
   —`.m-tarjeta`, `.m-seccion`, `.m-linea`— y solo lo que esa pantalla
   necesita de nuevo. Nada de esto toca a las demas pantallas: todas las
   clases son suyas.
   ===================================================================== */

.m-hecho-dicho {
  max-width: 34em; margin: 10px auto 0;
  font-size: var(--m-cuerpo); line-height: 1.55;
}

/* La foto, a sangre dentro de la tarjeta: el borde redondeado lo pone la
   tarjeta y la imagen se recorta con `overflow`. Asi no hay que repetir
   el radio en dos sitios y no se descuadran si cambia. */
.m-estancia { overflow: hidden; padding: 0; }
.m-estancia-foto {
  display: block; width: 100%; height: auto;
  /* ALTURA FIJA Y `cover`. Las 50 fotos del catalogo no tienen la misma
     proporcion, y sin esto cada casa daba una tarjeta de distinto alto. */
  aspect-ratio: 16 / 9; object-fit: cover;
  background: var(--m-fondo);
}
.m-estancia-cuerpo { padding: 18px; }

.m-estancia-casa {
  margin: 0 0 2px; font-weight: 700; font-size: 1.05rem;
}
.m-estancia-fechas {
  margin: 0 0 6px; font-size: var(--m-cuerpo); line-height: 1.5;
  /* Con `flex` y `wrap` las dos fechas no se parten por la mitad en un
     movil estrecho: se va entera la segunda a la linea de abajo. */
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
}
.m-estancia-fechas .m-flecha { color: var(--m-tinta-suave); }

.m-extras {
  margin: 12px 0 0; padding-left: 18px;
  font-size: var(--m-nota); color: var(--m-tinta-suave);
}
.m-extras li { margin-bottom: 2px; }

.m-horarios { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--m-linea); }

/* Lo ya cobrado, en el verde de la marca: es la linea que el huesped
   busca para quedarse tranquilo. */
.m-cobrado { color: var(--m-acento); font-weight: 700; }

.m-pasos-despues {
  margin: 0; padding-left: 18px;
  font-size: var(--m-cuerpo); line-height: 1.55;
}
.m-pasos-despues li { margin-bottom: 8px; }
.m-pasos-despues li:last-child { margin-bottom: 0; }

@media (min-width: 721px) {
  .m-estancia-cuerpo { padding: 22px 24px; }
}

/* =====================================================================
   LA AUTORIZACION DEL SEGUNDO COBRO (msg176, 07/10/2026).
   Encima del boton de pagar. Se ve como un aviso que hay que leer, no
   como una letra pequena: es lo que se presenta al banco si el huesped
   devuelve el recibo, y un texto que nadie lee no sirve de prueba.
   ===================================================================== */
.m-autorizo {
  margin: 14px 0 0; padding: 12px 14px;
  border: 1px solid var(--m-linea); border-radius: 10px;
  background: var(--m-fondo);
}
.m-autorizo-casilla {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0; cursor: pointer;
  font-size: var(--m-cuerpo); line-height: 1.5;
}
.m-autorizo-casilla input { margin-top: 3px; flex: 0 0 auto; width: 18px; height: 18px; }
/* Cuando el navegador marca el campo obligatorio sin rellenar. Solo
   tras intentar enviar (`:user-invalid`), no al cargar la pagina: un
   aviso en rojo antes de que el huesped haya hecho nada asusta. */
.m-autorizo:has(input:user-invalid) {
  border-color: var(--m-aviso);
  box-shadow: inset 0 0 0 1px var(--m-aviso);
}
.m-condiciones { margin-top: 10px; font-size: var(--m-nota); }
.m-condiciones summary {
  cursor: pointer; color: var(--m-acento); font-weight: 600;
  /* 44 px de alto real para el dedo, que es lo que pide una lista de
     condiciones en un movil. */
  padding: 6px 0;
}
.m-condiciones ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.5; }
.m-condiciones li { margin-bottom: 6px; }

/* --- Tarifas: que se distingan «1 pago» y «2 pagos» -------------------
   Miguel, 13/10/2026: «diferencia un poco más los cuadros de pago en 1
   plazo y pago en 2 plazos» y «destaca un poco más Reserva en 2 pagos y
   Reserva en 1 pago». Cada tarjeta lleva su nombre en una cabecera de
   color: verde de marca la de un pago, ámbar la de dos (los mismos dos
   colores del cupón de Fechas). La de dos pagos se reconoce por su
   desglose (.m-dos-pagos), así no hay que tocar la plantilla. */
.m-tarifa { border-color: var(--m-oferta-linea); overflow: hidden; }
.m-tarifa > strong:first-child {
  display: block; margin: -14px -16px 12px; padding: 11px 16px 12px;
  background: var(--m-oferta-fuerte); color: #fff;
  font-size: 18px; font-weight: 700; line-height: 1.25;
  letter-spacing: .005em;
}
.m-tarifa:has(.m-dos-pagos) { border-color: rgba(190, 132, 20, .55); }
.m-tarifa:has(.m-dos-pagos) > strong:first-child {
  background: var(--m-oferta-oro); color: var(--m-tinta);
}
.m-tarifa:has(.m-dos-pagos) .m-dos-pagos {
  border-color: rgba(190, 132, 20, .45); background: #fdf7e8;
}
@media (max-width: 720px) {
  .m-tarifa > strong:first-child { font-size: 20px; }
}

/* --- Tarifas: qué precio es cuál --------------------------------------
   Miguel, 13/10/2026: «esto tiene que estar más claro, cuál es el
   precio por noche, cuál es el precio sin oferta y cuál es el precio
   con oferta». Antes eran cuatro cifras seguidas, dos de ellas tachadas,
   y había que adivinar cuál era cuál. Ahora es una tabla pequeña: filas
   «por noche» y «total», columnas «sin oferta» y «con oferta». Solo
   cuando hay oferta; sin oferta se queda la línea de siempre. */
.m-precio:has(.m-precios) { flex: 1 1 100%; padding-top: 12px; }
.m-precios {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: var(--m-cuerpo); font-variant-numeric: tabular-nums;
}
.m-precios th, .m-precios td {
  padding: 8px 12px; text-align: right; white-space: nowrap;
  font-weight: 400;
}
.m-precios th[scope="row"] { padding-left: 0; text-align: left; font-weight: 600; }
.m-precios thead th {
  padding-top: 7px; padding-bottom: 6px;
  font-size: var(--m-menor); font-weight: 600; color: var(--m-tinta-suave);
}
.m-precios tbody th, .m-precios tbody td { border-top: 1px solid var(--m-linea); }
/* La columna «con oferta» es la que se paga: va en el verde de las
   ofertas, de arriba abajo. */
.m-precios .m-precios-oferta { background: var(--m-oferta-fondo); }
.m-precios thead .m-precios-oferta {
  border-radius: 9px 9px 0 0; color: var(--m-oferta-fuerte); font-weight: 700;
}
.m-precios tbody tr:last-child .m-precios-oferta { border-radius: 0 0 9px 9px; }
.m-precios strong { font-size: 17px; font-weight: 700; }
.m-precios .m-precios-noche strong { font-size: 22px; color: var(--m-oferta-fuerte); }
.m-precios .m-tachado { margin-right: 0; opacity: .7; }

/* --- Dos pagos: manda lo que se paga hoy ------------------------------
   Miguel, 13/10/2026: «aquí vamos a destacar más lo que pagas hoy que
   el precio total de la reserva». Donde el total y el desglose van
   juntos (Resumen y Detalles), el total baja un escalón y «Hoy pagas»
   sube. La tarjeta de Tarifas no cambia: allí no hay total encima. */
.m-linea.total:has(+ .m-dos-pagos) { font-size: var(--m-cuerpo); font-weight: 400; }
.m-linea.total + .m-dos-pagos {
  margin-top: 10px; padding: 14px 16px;
  border-color: var(--m-oferta-linea); background: var(--m-oferta-fondo);
}
.m-linea.total + .m-dos-pagos .m-dos-pagos-linea:first-child {
  align-items: baseline; font-size: 19px; font-weight: 700;
}
.m-linea.total + .m-dos-pagos .m-dos-pagos-linea:first-child strong {
  font-size: 26px; line-height: 1.1; color: var(--m-oferta-fuerte);
}
.m-linea.total + .m-dos-pagos .m-dos-pagos-linea + .m-dos-pagos-linea {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--m-oferta-linea);
  color: var(--m-tinta-suave);
}
.m-linea.total + .m-dos-pagos .m-dos-pagos-linea + .m-dos-pagos-linea strong { font-weight: 600; }

/* --- Ventana emergente (política de privacidad) -----------------------
   Miguel, 13/10/2026: al pinchar «política de privacidad» en Detalles
   «debe salir una ventana emergente» en vez de sacar al huésped del
   motor a mitad de reserva. La pinta motor-ventana.js. */
.m-ventana {
  width: min(720px, calc(100vw - 24px));
  max-height: min(86vh, 860px);
  padding: 0; border: 0; border-radius: 14px;
  background: var(--m-blanco); color: var(--m-tinta);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  overflow: hidden;
}
.m-ventana[open] { display: flex; flex-direction: column; }
.m-ventana::backdrop { background: rgba(10, 12, 13, .58); }
.m-ventana-cabeza {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 20px;
  border-bottom: 1px solid var(--m-linea);
}
.m-ventana-titulo { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.25; }
.m-ventana-cerrar {
  flex: 0 0 44px; width: 44px; height: 44px;
  background: none; border: 0; border-radius: 50%; cursor: pointer;
  font-size: 28px; line-height: 1; color: var(--m-tinta-suave);
}
.m-ventana-cerrar:hover { background: var(--m-fondo); color: var(--m-tinta); }
.m-ventana-cuerpo {
  padding: 16px 20px 22px; overflow-y: auto; overscroll-behavior: contain;
  font-size: var(--m-cuerpo); line-height: 1.6;
}
.m-ventana-cuerpo h1, .m-ventana-cuerpo h2 { margin: 22px 0 8px; font-size: 17px; line-height: 1.3; }
.m-ventana-cuerpo h3, .m-ventana-cuerpo h4 { margin: 16px 0 6px; font-size: var(--m-cuerpo); }
.m-ventana-cuerpo > :first-child { margin-top: 0; }
.m-ventana-cuerpo p { margin: 0 0 10px; }
.m-ventana-cuerpo ul, .m-ventana-cuerpo ol { margin: 0 0 10px; padding-left: 20px; }
.m-ventana-cuerpo li { margin-bottom: 4px; }
.m-ventana-cuerpo a { color: var(--m-acento); overflow-wrap: anywhere; }
.m-ventana-cuerpo table { width: 100%; border-collapse: collapse; margin: 0 0 12px; }
.m-ventana-cuerpo th, .m-ventana-cuerpo td {
  padding: 6px 8px; border: 1px solid var(--m-linea); text-align: left; vertical-align: top;
}
.m-ventana-pie {
  padding: 12px 20px; border-top: 1px solid var(--m-linea); text-align: right;
}

/* UNA SOLA COLUMNA EN TARIFAS (Cowork, 14/10/2026). Miguel: «quitamos la columna de la izquierda
   de los perros y la integramos en la columna de la reserva». Como ya se ve
   en el movil: perros arriba, tarifas debajo, en una columna. */
.m-dos.m-una { grid-template-columns: 1fr; max-width: 720px; margin-left: auto; margin-right: auto; }

/* PASOS CLICABLES (Cowork, 14/10/2026). */
a.m-paso { color: inherit; text-decoration: none; cursor: pointer; }
a.m-paso:hover .m-paso-nombre { text-decoration: underline; }
/* BOTONES A LA MISMA ALTURA (Cowork, 14/10/2026, Miguel): «Mostrar tarifas»
   abajo del todo en todas las fichas de categoria. */
.m-ficha-cuerpo { flex: 1 1 auto; }
.m-ficha-cuerpo > .m-boton.principal { margin-top: auto; }

/* PERROS EN LA TARJETA (Cowork, 14/10/2026): «Continuar» debajo del selector de perros. */
.m-continuar { display: block; width: 100%; text-align: center; margin-top: 10px; }

/* HASTA UN CENTRADO CON EL PORCENTAJE (Miguel 14/10) */
.m-oferta-cifra { display: inline-flex; align-items: center; gap: 10px; }
.m-oferta-cifra small { margin-right: 0; }

/* CATEGORIA MAS GRANDE (Miguel 14/10) */
.m-seccion.m-cat-elegida { font-size: 26px; line-height: 1.2; font-weight: 700; margin: 4px 0 14px; }

/* SIN Y CON OFERTA MAS GRANDES (Miguel 14/10) */
.m-precios thead th { font-size: 15px; }

/* OFERTA APLICADA DESTACADA (Miguel 14/10) */
.m-oferta-letra.m-oferta-fuerte { font-size: 17px; font-weight: 800; }
.m-oferta.compacta .m-oferta-letra.m-oferta-fuerte { font-size: 16px; }

/* TARIFAS EN DOS COLUMNAS (Cowork, Miguel 14/10): en ordenador, «Reserva en 1 pago»
   y «Reserva en 2 pagos» van lado a lado; en movil siguen una debajo de otra.
   Si solo hay una tarifa, no cambia nada. */
@media (min-width: 900px) {
  section:has(> .m-tarifa + .m-tarifa) {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; align-items: stretch;
  }
  section:has(> .m-tarifa + .m-tarifa) > :not(.m-tarifa) { grid-column: 1 / -1; }
}

/* CALENDARIO EN MOVIL (Cowork, Miguel 14/10): en el movil la llegada y la salida
   tienen que verse en negro, igual que en ordenador. En pantallas tactiles el
   :hover se queda pegado al ultimo dia tocado y le ponia el verde claro encima
   del negro. El sombreado al pasar el raton queda solo para raton, y los extremos
   ganan siempre. */
.m-cal-dia.extremo:hover:not([disabled]) { background: var(--m-tinta); color: #fff; }
@media (hover: none) {
  .m-cal-dia:hover:not([disabled]):not(.extremo):not(.dentro) { background: transparent; }
}

/* BOTON SIGUIENTE EN MOVIL (Cowork, Miguel 14/10): «mas vistoso y un poco mas arriba».
   Flota separado del borde, en el verde de la marca, mas grande y con sombra. */
@media (max-width: 720px) {
  .m-boton.m-ancho {
    left: 16px; right: 16px; width: auto; bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    border-radius: 14px; padding: 18px 20px;
    font-size: 1.2rem; font-weight: 800; letter-spacing: .01em;
    background: var(--m-acento); color: #fff;
    box-shadow: 0 10px 26px rgba(47, 93, 63, .45), 0 2px 6px rgba(0, 0, 0, .18);
  }
  .m-buscador { padding-bottom: 140px; }
}

/* PERROS EN UNA LINEA EN MOVIL (Cowork, Miguel 14/10): «Sin perro», «Con 1 perro»
   y «Con 2 perros» en la misma fila, a partes iguales. */
@media (max-width: 600px) {
  .m-elegir { gap: 6px; }
  .m-elegir .m-perro-opcion {
    flex: 1 1 0; min-width: 0; padding: 11px 4px; font-size: .88rem;
    text-align: center; white-space: nowrap;
  }
}

/* BOTON PRINCIPAL DE LA BARRA DE ABAJO EN MOVIL (Cowork, Miguel 14/10): «Continuar»
   (y «Reservar y pagar») igual de vistoso que «Siguiente» del paso de fechas, y la
   barra un poco mas arriba. */
@media (max-width: 720px) {
  .m-acciones { padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); align-items: center; }
  .m-acciones .m-boton.principal {
    border-radius: 14px; padding: 18px 20px;
    font-size: 1.2rem; font-weight: 800; letter-spacing: .01em;
    background: var(--m-acento); border-color: var(--m-acento); color: #fff;
    box-shadow: 0 10px 26px rgba(47, 93, 63, .45), 0 2px 6px rgba(0, 0, 0, .18);
  }
}

/* COMBINAR CATEGORIAS (Cowork, Miguel 14/10/2026) */
.m-combinar-aviso { margin: 0 0 16px; padding: 14px 16px; border-radius: 12px; background: var(--m-acento-claro); display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; }
.m-combinar-aviso .m-boton { white-space: nowrap; }
.m-combinar-enlace { display: block; margin: 0 0 10px; font-size: .92rem; color: var(--m-acento); font-weight: 600; text-decoration: underline; }
.m-comb-intro { margin: 0 0 10px; }
.m-comb-progreso { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; }
.m-comb-progreso strong { font-size: 1.6rem; color: var(--m-acento); }
.m-comb-lista { list-style: none; margin: 0; padding: 0; }
.m-comb-lista li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(0, 0, 0, .08); }
.m-comb-lista img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.m-comb-texto { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.m-comb-quitar { font-size: .9rem; color: #a33; text-decoration: underline; }
.m-comb-foto { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.m-tarifa .m-linea > span:last-child { white-space: nowrap; }

/* DETALLE ABAJO EN MOVIL (Miguel 14/10): en el resumen, en movil, el Total primero y el desglose de noches y la disponibilidad debajo */
@media (max-width: 860px) { .m-dos > .m-res-detalle { order: 2; } }

/* TOTAL SIEMPRE A LA VISTA + FORMAS DE PAGO (Miguel 15/10) */
.m-tira.m-tira-fija { position: sticky; top: 0; z-index: 30; box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.m-tira-total { margin-left: auto; text-align: right; }
.m-tira-total strong { font-size: 18px; font-weight: 700; }
.m-tira-hoy { display: block; font-size: 13px; color: var(--m-tinta-suave); }
.m-tira-total + .m-editar { margin-left: 0; }
@media (max-width: 860px) {
  .m-tira.m-tira-fija { gap: 6px 16px; padding: 10px 14px; }
  .m-tira.m-tira-fija .m-tira-etiqueta { font-size: 12px; }
  .m-tira.m-tira-fija strong { font-size: 14px; }
  .m-tira-total strong { font-size: 16px; }
}
.m-pago-seguro { margin: 14px 0 6px; }
.m-pago-seguro p { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 13px; color: var(--m-tinta-suave); }
.m-pago-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.m-pago-logos .m-forma-tarjetas { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.m-pago-logos img, .m-pago-logos .m-forma-logo { height: 24px !important; width: auto !important; max-width: 90px; }
.m-pago-logos img, .m-pago-logos .m-forma-logo { height: 20px !important; }

/* TIRA FIJA COMPACTA EN MOVIL (Miguel 15/10): fechas + total en dos lineas */
@media (max-width: 860px) {
  .m-tira.m-tira-fija { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 8px 12px; align-items: center; }
  .m-tira.m-tira-fija > div:first-child .m-tira-etiqueta { display: none; }
  .m-tira.m-tira-fija > div:first-child strong { font-size: 13px; white-space: nowrap; }
  .m-tira.m-tira-fija > div:nth-child(2) { display: none; }
  .m-tira.m-tira-fija .m-tira-total { grid-column: 2; grid-row: 1 / span 2; }
  .m-tira.m-tira-fija .m-tira-total .m-tira-etiqueta { display: none; }
  .m-tira.m-tira-fija .m-tira-hoy { font-size: 12px; }
  .m-tira.m-tira-fija .m-editar { grid-column: 1; grid-row: 2; justify-self: start; padding: 2px 12px; font-size: 13px; }
}

/* TARIFAS EN DOS COLUMNAS: precios y «Continuar» a la misma altura (Cowork, Miguel 15/10). */
@media (min-width: 900px) {
  section:has(> .m-tarifa + .m-tarifa) > .m-tarifa { display: flex; flex-direction: column; }
  section:has(> .m-tarifa + .m-tarifa) > .m-tarifa > .m-tarifa-pie,
  section:has(> .m-tarifa + .m-tarifa) > .m-tarifa > .m-elegir:last-child { margin-top: auto; }
}


/* BANDA DE OFERTA: «hasta un» y «en tu estancia» en dos lineas a la altura
   del 40 % (Miguel, 15/10/2026: «las dos lineas de texto deben estar dentro
   de la misma altura del 40»). */
.m-oferta-cifra { display: flex; align-items: stretch; }
.m-oferta-lado { display: flex; flex-direction: column; justify-content: space-between; margin-right: 8px; padding: 9px 0 7px; letter-spacing: 0; }
.m-oferta-lado small { margin-right: 0; font-size: 17px; line-height: 1.1; }
.m-oferta-lado .m-oferta-abajo { margin-top: 0; font-size: 17px; line-height: 1.1; font-weight: 500; letter-spacing: 0; color: rgba(255, 255, 255, .9); }
@media (min-width: 601px) {
  .m-banda-oferta .m-oferta-cuerpo { column-gap: 16px; padding-left: 26px; padding-right: 22px; }
  .m-oferta-cifra { grid-row: 1 / span 2; align-self: center; }
}
@media (max-width: 600px) {
  .m-oferta-cifra { margin: 6px 0 0; }
  .m-oferta-lado { padding: 7px 0 5px; }
  .m-oferta-lado small, .m-oferta-lado .m-oferta-abajo { font-size: 16px; }
}
/* PERROS POR ALOJAMIENTO (M4, 16/10/2026) */
.m-comb-perros { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: var(--m-nota); color: var(--m-tinta-suave); }
.m-comb-perros select { width: auto; min-width: 4em; padding: 4px 8px; }
.m-comb-texto { display: flex; flex-direction: column; }
/* «Lo que vas a reservar»: el importe y el € nunca se separan (M10). */
.m-linea > span:last-child, .m-importe { white-space: nowrap; }
/* Oferta en una línea (M11) */
.m-oferta-linea { margin: 10px 0 4px; padding: 8px 12px; border-radius: 8px; background: var(--m-acento-claro); font-weight: 600; font-size: var(--m-cuerpo); }
/* «Tus datos» (M6): en escritorio Nombre + Apellido/s en una fila; correo y teléfono, a todo el ancho. */
.m-campos.m-campos-titular { grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .m-campos.m-campos-titular { grid-template-columns: 1fr; } }
.m-pago-casas { list-style: none; padding: 0; margin: 0 0 4px; display: block; }
.m-pago-casas li { margin: 2px 0; }

/* FRANJA DE CONDICIONES (Miguel 17/10) */
.m-franja { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 0; margin: 0 0 18px; padding: 8px 14px; border-radius: 8px; background: rgba(0,0,0,.04); font-size: 13px; color: var(--m-tinta-suave); text-align: center; }
.m-franja > * { white-space: nowrap; }
.m-franja > * + *::before { content: "·"; margin: 0 10px; color: var(--m-tinta-suave); }
.m-franja a { color: inherit; text-decoration: underline; }
@media (max-width: 860px) { .m-franja { font-size: 12px; padding: 6px 10px; margin-bottom: 12px; } .m-franja > * + *::before { margin: 0 6px; } }
.m-franja a::before { display: inline-block; text-decoration: none; }

/* EL «SIGUIENTE» DEL PASO 1, EN SU SITIO (Miguel, 30/10/2026): «en la versión
   móvil del motor de reservas, el botón no tiene sentido que sea flotante y
   menos que aparezca desde el principio, ya que oculta información
   importante». Deja de flotar: va fijo en el formulario, debajo del texto de
   «Solo adultos…», con el mismo verde y tamaño. Solo el paso 1 (`.m-buscador`):
   los botones de pago que comparten `.m-ancho` no cambian. */
@media (max-width: 720px) {
  .m-buscador .m-boton.m-ancho {
    position: static; left: auto; right: auto; bottom: auto;
    width: 100%; margin-top: 18px;
    padding: 18px 20px; border-radius: 14px;
    box-shadow: 0 6px 16px rgba(47, 93, 63, .25);
  }
  .m-buscador { padding-bottom: 20px; }
}

/* LOS DEMÁS PASOS, TAMBIÉN EN SU SITIO (Miguel, 31/10/2026, «Sí» a cambiarlo en
   Tarifas, Resumen, Datos y Pagar): las barras de botones dejan de flotar en el
   móvil y van al final del contenido, como el «Siguiente» del paso 1. */
@media (max-width: 720px) {
  .m-acciones {
    position: static; left: auto; right: auto; bottom: auto;
    margin: 18px 0 0; padding: 0;
    background: transparent; border-top: 0; box-shadow: none;
  }
  .m-contenedor { padding-bottom: 24px; }
  .m-barra-pago {
    position: static; left: auto; right: auto; bottom: auto;
    margin-top: 18px; padding: 0;
    background: transparent; border-top: 0; box-shadow: none;
  }
  .m-hueco-barra { display: none; }
}

/* FECHA Y HORA EN EL IPHONE (encargo 32.1, Miguel 02/11/2026). Safari de iOS da a los campos de fecha y hora un
   ancho minimo propio y centra el texto: «Hora prevista de llegada» salia mas ancha que los demas campos y se
   salia de la pantalla. Solo en Safari de iOS (-webkit-touch-callout solo existe ahi): en el ordenador y en
   Android no cambia nada, y los campos estrechos a proposito conservan su ancho. */
@supports (-webkit-touch-callout: none) {
  input[type=date], input[type=time], input[type=datetime-local] {
    -webkit-appearance: none; appearance: none;
    display: block; max-width: 100%; min-width: 0; box-sizing: border-box;
    min-height: calc(1.5em + 2px + 2 * 9px);   /* el line-height 1.5 que heredan los demas campos del motor */
    text-align: left;
  }
  input[type=date]::-webkit-date-and-time-value,
  input[type=time]::-webkit-date-and-time-value,
  input[type=datetime-local]::-webkit-date-and-time-value { text-align: left; margin: 0; }
}