/* =====================================================================
   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);

  /* 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; }
.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; }

/* --- 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. */
.m-plazos { display: none; gap: 6px; margin-left: auto; flex-wrap: nowrap; }
.m-opcion:has(> input[name="pasarela"]:checked) .m-plazos { display: flex; }
.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;
}
/* El logotipo de marca: alto fijo y ancho el que le toque, para no
   deformarlo. Respetar sus proporciones es parte de sus normas de uso. */
.m-forma-logo {
  flex: 0 0 auto; height: 24px; width: auto; display: block;
}
/* IGUALARLOS ES A OJO, NO A NÚMERO. Cada marca trae su propio aire
   dentro de la imagen y su propia proporción, así que ponerles a todas
   la misma altura las deja desiguales: Bizum se veía diminuto a 24 px y
   Scalapay, que es una marca larga, se iba de ancho. Estas alturas
   salen de mirarlas juntas en pantalla. 06/10/2026. */
.m-forma-logo.bizum    { height: 30px; }
.m-forma-logo.scalapay { height: 19px; }
.m-forma-logo.paypal   { height: 21px; }
.m-forma-logo.cartera  { height: 22px; }
/* «Tarjeta» son cuatro: Visa, Mastercard, Apple Pay y Google Pay. En el
   móvil se envuelven en dos líneas en vez de empujar al nombre. */
.m-forma-tarjetas {
  flex: 0 0 auto; display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap; max-width: 55%;
}

/* 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; }
.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: baseline; 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. */
.m-banda-oferta {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 6px 14px;
  margin: 0 auto 20px; max-width: 720px;
  padding: 11px 16px;
  border: 1px solid var(--m-oferta-linea);
  border-radius: 10px;
  background: var(--m-oferta-fondo);
  text-align: center; font-size: var(--m-nota);
}
.m-banda-oferta strong { color: var(--m-oferta-fuerte); }
.m-banda-oferta .m-hasta { color: var(--m-urgente); font-weight: 700; }

/* 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; }