/*
 * styles_wizard_n.css — Replicación estilo Railway para el flujo wizard (pasos 2-4).
 * Paleta armonizada con partials/caja_reservacion.blade.php.
 */
/* ===== Fuentes self-host (prototipo): Marcellus (serif) + Mulish (sans) ===== */
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;
  src:url('/caja_bookingn/fonts/marcellus-400.woff2') format('woff2');}
@font-face{font-family:'Mulish';font-style:normal;font-weight:300;font-display:swap;
  src:url('/caja_bookingn/fonts/mulish-300.woff2') format('woff2');}
@font-face{font-family:'Mulish';font-style:normal;font-weight:400;font-display:swap;
  src:url('/caja_bookingn/fonts/mulish-400.woff2') format('woff2');}
@font-face{font-family:'Mulish';font-style:normal;font-weight:500;font-display:swap;
  src:url('/caja_bookingn/fonts/mulish-500.woff2') format('woff2');}
@font-face{font-family:'Mulish';font-style:normal;font-weight:600;font-display:swap;
  src:url('/caja_bookingn/fonts/mulish-600.woff2') format('woff2');}
@font-face{font-family:'Mulish';font-style:normal;font-weight:700;font-display:swap;
  src:url('/caja_bookingn/fonts/mulish-700.woff2') format('woff2');}
@font-face{font-family:'Mulish';font-style:normal;font-weight:800;font-display:swap;
  src:url('/caja_bookingn/fonts/mulish-800.woff2') format('woff2');}

#wizard_root {
  /* Paleta prototipo (valores nuevos; nombres --rsv-* conservados por compatibilidad) */
  --rsv-gold:#A98B5D; --rsv-gold-dark:#8A6E43;
  --rsv-navy:#1F3848; --rsv-cream:#FFFFFF; --rsv-tan:#DDC9AE; --rsv-camel:#CFA87B;
  --rsv-ink:#23201C; --rsv-muted:#8B8275; --rsv-text-muted:#8B8275;
  --rsv-line:#E6DFD4; --rsv-line-light:#EFEAE1;
  /* Tokens nuevos del prototipo */
  --navy:#1F3848; --navy-2:#2C5364; --gold:#A98B5D; --gold-deep:#8A6E43;
  --ink:#23201C; --muted:#8B8275; --line:#E6DFD4; --green:#3F7A5B;
  --bg:#FFFFFF; --card:#FFFFFF; --sel-bg:#FBF9F5;
  --serif:'Marcellus', Georgia, serif;
  --sans:'Mulish', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --wz-radius:12px;
  font-family:var(--sans);
  color:var(--ink);
  max-width:1240px; margin:0 auto; padding:0 24px 48px;
  box-sizing:border-box;
}
#wizard_root *{ box-sizing:border-box; }
/* overflow-x:hidden en ancestros rompe position:sticky; 'clip' evita scroll horizontal SIN romperlo. */
html, body{ overflow-x:clip; }

/* Tokens TAMBIÉN a nivel body: el chrome (topbar/brandbar/searchbar) vive FUERA de #wizard_root y no
   hereda sus variables; sin esto var(--navy)/var(--line) quedan indefinidas → topbar sin fondo navy y
   caja de búsqueda sin borde (bugs de fidelidad #2 y #4 del prototipo). */
.wz-body{
  --navy:#1F3848; --navy-2:#2C5364; --gold:#A98B5D; --gold-deep:#8A6E43; --ink:#23201C; --muted:#8B8275;
  --line:#E6DFD4; --green:#3F7A5B; --bg:#FFFFFF; --sel-bg:#FBF9F5;
  --rsv-navy:#1F3848; --rsv-gold:#A98B5D; --rsv-gold-dark:#8A6E43; --rsv-line:#E6DFD4; --rsv-cream:#FFFFFF;
  --serif:'Marcellus', Georgia, serif;
  --sans:'Mulish', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* ===== Chrome ===== */
.wz-topbar{ background:var(--navy); color:#fff; font-family:var(--sans); font-size:13px; letter-spacing: 0.01em; }
.wz-topbar__in{ max-width:1240px; margin:0 auto; padding:9px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-weight: 600; }
.wz-topbar a{ color:#fff !important; text-decoration:none; display:inline-flex; align-items:center; gap:7px; }
.wz-topbar a:hover,.wz-topbar a:focus,.wz-topbar a:active{ color:#fff !important; text-decoration:none; opacity:.85; }
.wz-topbar svg{ flex:none; display:block; }
.wz-topbar__int { gap: 24px; }
.wz-topbar__left{ display:flex; align-items:center; gap:8px; }
.wz-topbar__right{ display:flex; align-items:center; gap:16px; }
/* Selector de idioma/región (popover fiel al prototipo). */
.wz-lang{ position:relative; display:inline-flex; }
.wz-lang-btn{ display:inline-flex; align-items:center; gap:7px; background:none; border:0; color:#fff; font-family:inherit; font-size:13px; font-weight:600; letter-spacing:.01em; cursor:pointer; padding:0; }
.wz-lang-btn:hover{ opacity:.85; }
.wz-lang-caret{ transition:transform .2s ease; }
.wz-lang-btn[aria-expanded="true"] .wz-lang-caret{ transform:rotate(180deg); }
.wz-lang-pop{ position:absolute; top:calc(100% + 12px); right:0; z-index:80; background:#fff; border-radius:12px; box-shadow:0 18px 44px -14px rgba(0,0,0,.4); padding:18px; width:250px; animation:rvdrop .2s ease; text-align:left; }
.wz-lang-pop__lbl{ font-size:13px; font-weight:700; color:var(--ink); margin-bottom:7px; }
.wz-lang-pop__sel{ width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:9px; font-size:14px; color:var(--ink); background:#fff; cursor:pointer; margin-bottom:15px; font-family:var(--sans); }
.wz-lang-pop__sel--last{ margin-bottom:0; }
@keyframes rvdrop{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:translateY(0); } }
/* "Mis reservas": botón del topbar + modal (input/resultados) + tarjetas. */
.wz-topbar__mr{ display:inline-flex; align-items:center; gap:7px; background:none; border:0; color:#fff; font-family:inherit; font-size:13px; font-weight:600; letter-spacing:.01em; cursor:pointer; padding:0; }
.wz-topbar__mr:hover{ opacity:.85; }
.wz-mr{ position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center; padding:20px; }
.wz-mr[hidden]{ display:none; }
.wz-mr__backdrop{ position:absolute; inset:0; background:rgba(31,32,28,.55); }
.wz-mr__dialog{ position:relative; width:100%; max-width:560px; max-height:90vh; overflow-y:auto; background:#FBF7F0; border-radius:18px; box-shadow:0 40px 90px -28px rgba(0,0,0,.5); padding:34px 38px; color:var(--ink); animation:rvdrop .26s ease; }
.wz-mr__x{ position:absolute; top:18px; right:20px; font-size:20px; color:var(--muted); cursor:pointer; line-height:1; }
.wz-mr__x:hover{ color:var(--ink); }
.wz-mr__eyebrow{ font-size:11.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-deep); font-weight:700; }
.wz-mr__title{ font-family:var(--serif); font-size:28px; color:var(--navy-2); margin:10px 0 4px; font-weight:400; }
.wz-mr__lead{ font-size:13.5px; color:var(--muted); margin-bottom:22px; }
.wz-mr__label{ display:block; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ink); margin-bottom:7px; }
.wz-mr__input{ width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:11px; font-size:14px; margin-bottom:16px; background:#fff; box-sizing:border-box; font-family:var(--sans); color:var(--ink); }
.wz-mr__input:focus{ outline:none; border-color:var(--navy-2); }
.wz-mr__err{ font-size:13px; color:#B03A3A; background:#F6E7E7; border:1px solid rgba(176,58,58,.25); border-radius:9px; padding:9px 12px; margin:2px 0 10px; }
.wz-mr__submit{ display:block; text-align:center; width:100%; padding:15px; background:var(--navy-2); color:#fff; border:0; border-radius:11px; font-size:14px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; box-sizing:border-box; font-family:var(--sans); }
.wz-mr__submit:hover{ background:var(--navy); }
.wz-mr__submit:disabled{ opacity:.6; cursor:default; }
.wz-mr__hello{ font-size:13.5px; color:var(--muted); margin-bottom:20px; }
.wz-mr__hello strong{ color:var(--ink); }
.wz-mr__pager{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin:4px 0 14px; }
.wz-mr__page{ min-width:32px; text-align:center; padding:6px 9px; border:1px solid var(--line); border-radius:8px; font-size:13px; font-weight:700; color:var(--ink); background:#fff; cursor:pointer; }
.wz-mr__page.is-active{ background:var(--navy-2); border-color:var(--navy-2); color:#fff; }
.wz-mr__actions{ text-align:center; margin:2px 0 14px; }
.wz-mr__other{ font-size:12.5px; color:var(--gold-deep); font-weight:700; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.wz-mr__close-btn{ display:block; width:100%; padding:14px; background:var(--navy-2); color:#fff; border:0; border-radius:11px; font-size:13.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; box-sizing:border-box; font-family:var(--sans); }
.wz-mr__close-btn:hover{ background:var(--navy); }
.wz-mr-empty{ text-align:center; color:var(--muted); font-size:13.5px; padding:24px 0; }
.wz-mr__loader{ display:flex; align-items:center; justify-content:center; padding:44px 0; }
.wz-mr__spinner{ width:34px; height:34px; border:3px solid var(--line); border-top-color:var(--navy-2); border-radius:50%; animation:wz-spin .7s linear infinite; }
@keyframes wz-spin{ to{ transform:rotate(360deg); } }
/* Loader de página completa (cambio de idioma → recarga). */
.wz-fullloader{ position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.92); }
.wz-fullloader .wz-mr__spinner{ width:52px; height:52px; border-width:4px; }
/* Tarjeta de reserva (fiel al prototipo) */
.wz-mr-card{ border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; margin-bottom:16px; }
.wz-mr-card__top{ display:flex; gap:14px; padding:16px; border-bottom:1px solid var(--line); }
.wz-mr-card__img{ width:96px; height:96px; flex:0 0 auto; border-radius:12px; background:linear-gradient(135deg,#2C5364,#8A6E43); background-size:cover; background-position:center; }
.wz-mr-card__body{ flex:1 1 0; min-width:0; }
.wz-mr-badge{ display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:3px 10px; border-radius:999px; }
.wz-mr-badge.mr-badge--ok{ color:#1F8A5B; background:#E7F1EA; }
.wz-mr-badge.mr-badge--done{ color:var(--gold-deep); background:#F3EDE3; }
.wz-mr-badge.mr-badge--cancel{ color:#B03A3A; background:#F6E7E7; }
.wz-mr-badge.mr-badge--pend, .wz-mr-badge.mr-badge--part{ color:#9A7B2E; background:#F5EFE0; }
.wz-mr-card__hotel{ font-family:var(--serif); font-size:19px; color:var(--navy-2); line-height:1.15; margin-top:6px; }
.wz-mr-card__sub{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.wz-mr-card__code{ font-size:12px; color:var(--gold-deep); font-weight:700; margin-top:5px; }
.wz-mr-card__holder{ font-size:12px; color:var(--muted); margin-top:2px; }
.wz-mr-card__holder span{ color:var(--ink); font-weight:600; }
.wz-mr-card__meta{ display:flex; flex-wrap:wrap; gap:14px 26px; padding:14px 16px; background:#FBF9F5; }
.wz-mr-card__mlbl{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.wz-mr-card__mval{ font-size:13.5px; color:var(--ink); font-weight:600; margin-top:2px; }
.wz-mr-card__total{ margin-left:auto; text-align:right; }
.wz-mr-card__tval{ font-family:var(--serif); font-size:18px; color:var(--ink); margin-top:1px; }
.wz-mr-card__foot{ display:flex; flex-wrap:wrap; gap:10px; padding:14px 16px; border-top:1px solid var(--line); }
.wz-mr-card__btn{ flex:1 1 auto; text-align:center; min-width:150px; padding:10px 16px; border-radius:10px; font-size:12.5px; font-weight:700; cursor:pointer; box-sizing:border-box; }
.wz-mr-card__btn--ver{ border:1.5px solid var(--navy-2); color:var(--navy-2); }
.wz-mr-card__btn--ver:hover{ background:var(--navy-2); color:#fff; }
.wz-mr-card__btn--mod{ border:1.5px solid var(--line); color:var(--ink); opacity:.5; cursor:not-allowed; }
.wz-brandbar{ background:#fff; border-bottom:2px solid var(--line); position:sticky; top:0; z-index:40; }
.wz-brandbar__in{ max-width:1240px; margin:0 auto; padding: 16px 24px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.wz-nav__volver:hover{ background:var(--gold); color:#fff !important; }
.wz-brand{ font-family:var(--serif); font-size:26px; color:var(--navy); letter-spacing:.5px; text-decoration:none; display:inline-flex; align-items:center; }
/* <picture> del logo: display:contents lo saca del layout y deja al <img> como hijo directo del
   flex de .wz-brand, así envolver o no envolver da EXACTAMENTE el mismo render. */
.wz-pic{ display:contents; }
.wz-brand__logo{ height:50px; width:auto; max-width:220px; display:block; object-fit:contain; }
/* align-items:center y no el `stretch` por omisión: "Volver al sitio" es un botón con borde y
   padding, así que es MÁS ALTO que los enlaces simples. Estirados, cada uno alineaba su texto a una
   altura distinta y el botón se veía descuadrado respecto al resto — en la barra normal y en la
   compacta. Centrados, los seis quedan a la misma altura en los dos estados. */
.wz-nav{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:22px; font-family:var(--sans); font-size:16px; letter-spacing: 0.03em;font-weight: 600;}
.wz-nav a{ color:var(--ink); text-decoration:none; }
.wz-nav a:hover{ color:var(--gold); }

/* Pill "Volver al sitio": antes iba con estilos inline en reservar_wizard.blade.php; ahora que el
   chrome vive en partials/wz_topbar.blade.php los estilos viven aquí. margin-right:auto lo empuja
   contra el borde izquierdo del nav y manda el resto de los enlaces a la derecha. */
.wz-nav__volver{ margin-right:auto; display:inline-flex; align-items:center; gap:6px; border:1.5px solid var(--gold); color:var(--gold-deep) !important; padding:6px 14px; border-radius:999px; text-decoration:none; font-size:12.5px; font-weight:700; cursor:pointer; }

/* Isotipo (logo sin letras): solo se muestra en móvil con la barra pegada. Sin isotipo cargado no
   se pinta el <img> y queda el logo completo, que la regla .is-stuck de abajo reduce a 34px. */
.wz-brand__icono{ display:none; height:34px; width:auto; max-width:60px; object-fit:contain; }

/* Barra de marca pegada: fila compacta con el logo a la izquierda y el menú a la derecha.
   La clase .is-stuck la pone el observador del centinela en partials/wz_topbar.blade.php.
   Solo se animan padding y alto: flex-direction no es animable. */
.wz-brandbar__in{ transition:padding .18s ease; }
.wz-brand__logo{ transition:height .18s ease; }
.wz-brandbar.is-stuck .wz-brandbar__in{ flex-direction:row; align-items:center; justify-content:space-between; gap:24px; padding:8px 24px; }
.wz-brandbar.is-stuck .wz-brand__logo{ height:34px; }
.wz-brandbar.is-stuck .wz-nav{ flex:1; justify-content:flex-start; gap:18px; font-size:15px; }
/* En estado pegado el pill NO empuja: el bloque de enlaces arranca justo después de él y el
   espacio sobrante queda a la derecha. Fuera del estado pegado conserva su margin-right:auto. */
.wz-brandbar.is-stuck .wz-nav__volver{ margin-right:0; }

/* Pegada y con el nav a la vista: rejilla de TRES columnas 1fr auto 1fr. El logo se queda en la
   primera (contra el borde izquierdo, igual que antes) y los enlaces caen en la de en medio, que
   las dos columnas 1fr iguales dejan centrada respecto a la BARRA COMPLETA, no respecto al hueco
   que sobra a la derecha del logo. La tercera columna queda vacia a proposito: es el contrapeso.
   No se centra con position:absolute porque asi los enlaces podrian montarse encima del logo al
   angostar; aqui la columna de la izquierda nunca baja del ancho del logo, de modo que el bloque
   se corre a la derecha y, cuando ya no cabe, el nav envuelve y el script de wz_topbar.blade.php
   colapsa a hamburguesa como siempre.
   Lleva :not(.wz-nav-colapsada) porque colapsada el nav es display:none y la rejilla dejaria la
   hamburguesa en la columna de en medio en vez de contra el borde derecho. */
.wz-brandbar.is-stuck:not(.wz-nav-colapsada) .wz-brandbar__in{ display:grid; grid-template-columns:1fr auto 1fr; }
.wz-brandbar.is-stuck:not(.wz-nav-colapsada) .wz-nav{ justify-content:center; }
/* Sin esto el enlace de la marca (item de rejilla) se estiraria a TODA la columna 1fr y dejaria
   una zona clicable enorme a la izquierda del centro. */
.wz-brandbar.is-stuck:not(.wz-nav-colapsada) .wz-brand{ justify-self:start; }

/* ===== Menú de hamburguesa (sólo móvil; se enciende en el @media de abajo) =====
   En escritorio el botón y el panel no existen visualmente y el .wz-nav de siempre manda. */
.wz-nav-toggle{ display:none; width:42px; height:42px; padding:0; border:none; background:none; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.wz-nav-toggle__barra{ display:block; width:24px; height:2px; background:var(--navy); border-radius:2px; }
/* Panel a pantalla completa. Nace con [hidden]; la clase .is-open es la que lo muestra, así el
   atributo sigue sirviendo de estado accesible cuando el JS no ha corrido. */
.wz-navmenu{ position:fixed; inset:0; z-index:200; background:#fff; overflow-y:auto;
  display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; }
.wz-navmenu[hidden]{ display:none; }
.wz-navmenu__cerrar{ position:absolute; top:14px; right:16px; width:44px; height:44px; border:none; background:none;
  font-size:34px; line-height:1; color:var(--navy); cursor:pointer; }
/* Logo arriba y centrado. Va en FLUJO (no absolute) para que nunca se encime con los enlaces por
   más corta que sea la pantalla; los enlaces se quedan con el resto del alto y siguen centrados.
   El padding lateral de 72px es lo que lo aparta de la X (que ocupa 44px + 16px del borde): así el
   logo queda centrado respecto a la pantalla sin llegar a tocarla. */
.wz-navmenu__marca{ flex:none; display:flex; align-items:center; justify-content:center;
  padding:22px 72px 0; font-family:var(--serif); font-size:22px; color:var(--navy);
  letter-spacing:.5px; text-decoration:none; text-align:center; }
.wz-navmenu__marca img{ display:block; height:46px; width:auto; max-width:100%; object-fit:contain; }
/* Los enlaces: en columna, centrados, uno debajo de otro. Con flex:1 se quedan el alto sobrante y
   el justify-content:center los centra ahí, debajo del logo. El aire de arriba baja de 72px a 34px
   porque ya no tiene que librar la X: eso ahora lo hace la marca. */
.wz-navmenu__nav{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:26px; padding:34px 24px 72px; width:100%; text-align:center; }
.wz-navmenu__nav a{ font-family:var(--sans); font-size:21px; font-weight:600; letter-spacing:.03em;
  color:var(--ink); text-decoration:none; }
.wz-navmenu__nav a:hover{ color:var(--gold); }
/* "Volver al sitio" conserva su forma de pill para que se distinga del resto. */
.wz-navmenu__volver{ margin-top:6px; border:1.5px solid var(--gold); color:var(--gold-deep) !important;
  padding:10px 26px; border-radius:999px; font-size:15px !important; font-weight:700 !important; }
.wz-navmenu__volver:hover{ background:var(--gold); color:#fff !important; }
/* Bloquea el scroll del fondo mientras el menú está abierto. */
body.wz-menu-abierto{ overflow:hidden; }

.wz-searchbar{ background:#fff; box-sizing:border-box; border:1.5px solid var(--gold); border-radius:14px; box-shadow:0 1px 3px rgba(31,56,72,.06); margin:18px auto; width:min(1192px, 100% - 48px);
  --wz-seg-div: linear-gradient(to bottom, transparent 12px, var(--gold) 12px, var(--gold) calc(100% - 12px), transparent calc(100% - 12px)) left center / 1px 100% no-repeat; }
/* ===== Caja de reserva en el wizard: look del prototipo .dc.html (barra blanca, campos con
   divisores, etiquetas MAYÚSCULAS, botón navy). Overrides SCOPED a .wz-searchbar sobre el partial
   compartido partials/caja_reservacion (NO se toca su markup ni su <style> propio). ===== */
.wz-searchbar #caja_reservacion{ margin:0; max-width:none; padding:0px 0px; }
/* El prototipo no da padding a la caja: cada sección lleva el suyo (14px 20px) y así los
   divisores abarcan la altura completa. Filas a stretch y SIN gap entre secciones. */
.wz-searchbar .rsv-engine{ background:transparent; border:none; box-shadow:none; padding:0; }
.wz-searchbar .rsv-row{ align-items:stretch; }
.wz-searchbar .rsv-fields{ align-items:stretch; gap:0; }
.wz-searchbar .rsv-title{ display:none; }
.wz-searchbar .rsv-lbl{ text-transform:uppercase; font-size:10.5px; letter-spacing:0.09em; color:#8B8275; font-weight:700; }
/* Iconos de los segmentos en navy (como el prototipo, que usa --teal = #1F3848), no gris muted. */
.wz-searchbar .rsv-ico{ color:var(--navy); }
.wz-searchbar .rsv-ico svg{ width:16px; height:16px; } /* 20px en la caja base; el prototipo usa 16 */
/* Caret ▾ en hotel, fechas y habitaciones — triángulo dibujado con CSS (independiente del font;
   el Mulish self-host está subseteado y NO trae el glifo ▾, por eso el carácter se veía como coma). */
.wz-searchbar .rsv-caret{ margin-left:auto; flex:none; align-self:center; width:0; height:0; font-size:0 !important; color:transparent !important;
  border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid var(--muted); }
.wz-searchbar .rsv-field{ border:none; background:transparent; padding:0; min-height:22px; }
/* Con #caja_reservacion: el <style> del partial fija 15px con un selector de ID que si no gana. */
.wz-searchbar #caja_reservacion .rsv-val,
.wz-searchbar #caja_reservacion .rsv-bare,
.wz-searchbar #caja_reservacion .rsv-select select{ font-size:14.5px; padding:0; }
/* Sección = padding 14/20 + gap 6 (prototipo). 14 + (14 etiqueta + 6 + 22 campo) + 14 = 70px de alto. */
.wz-searchbar .rsv-seg{ padding:14px 20px; gap:6px; }
/* ===== Popover de habitaciones y huéspedes con el look del prototipo (SOLO wizard) =====
   El partial es compartido con caja_sola y las vistas legacy, así que todo va scopeado a
   .wz-searchbar: fuera de aquí el popover sigue siendo el de tarjetas con "+ Habitación".
   Se CONSERVA el selector de edades de cada menor, que el prototipo no muestra pero el motor sí
   necesita para calcular. */
.wz-searchbar .rsv-pop{ width:308px; padding:19px; border-radius:13px; border:1px solid var(--line);
  box-shadow:0 18px 50px -16px rgba(31,56,72,.4); }
.wz-searchbar .rsv-pop::before{ display:none; }
.wz-searchbar .rsv-rooms-header, .wz-searchbar .rsv-add-bottom{ display:none; } /* los reemplaza el stepper */
.wz-searchbar .rsv-habs{ display:flex; align-items:center; justify-content:space-between;
  padding-bottom:13px; border-bottom:1px solid var(--line); }
.wz-searchbar .rsv-habs__lbl{ display:block; font-size:16px; font-weight:700; color:var(--ink); }
.wz-searchbar .rsv-habs__max{ display:block; font-size:12px; color:var(--muted); }
.wz-searchbar .rsv-rooms{ gap:0; }
/* Cada habitación deja de ser tarjeta: pasa a bloque con título y filas, como el prototipo. */
.wz-searchbar .rsv-card{ border:none; border-radius:0; box-shadow:none; background:transparent;
  padding:13px 0; border-bottom:1px solid var(--line); }
.wz-searchbar .rsv-card-head{ background:transparent; padding:0 0 9px; }
.wz-searchbar .rsv-card-num{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.wz-searchbar .rsv-card-sum{ display:none; } /* el resumen por habitación lo dan las propias filas */
.wz-searchbar .rsv-card-body{ padding:0; border-top:none; }
.wz-searchbar .rsv-guests{ display:block; }
.wz-searchbar .rsv-ctrl{ flex-direction:row; align-items:center; justify-content:space-between; gap:12px; padding:5px 0; }
.wz-searchbar .rsv-ctrl .rsv-form-label{ font-size:14px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--ink); }
.wz-searchbar .rsv-rango{ display:block; font-size:12px; font-weight:400; color:var(--muted); }
/* Steppers dorados de 30px (prototipo). */
.wz-searchbar .rsv-stepper{ gap:13px; flex:none; }
.wz-searchbar .rsv-cbtn{ width:30px; height:30px; font-size:18px; border:1.5px solid var(--gold); color:var(--gold-deep); background:none; }
.wz-searchbar .rsv-cbtn:hover:not(:disabled){ background:var(--gold); color:#fff; }
.wz-searchbar .rsv-count{ min-width:16px; font-size:15px; font-weight:700; color:var(--ink); }
/* Edades de los menores: se conservan, con el mismo aire de las filas. */
.wz-searchbar .rsv-ages{ margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); }
.wz-searchbar .rsv-pop-actions{ margin-top:14px; padding-top:4px; }
.wz-searchbar .rsv-listo{ background:var(--navy); color:#fff; border-radius:9px; padding:11px 30px; font-size:13px;
  font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.wz-searchbar .rsv-listo:hover{ background:var(--navy-2); }
/* Fuera del wizard la fila del stepper y las sub-etiquetas no existen. */
.rsv-habs{ display:none; }
.rsv-rango{ display:none; }

/* ===== Dropdown CUSTOM de hotel (solo wizard): reemplaza el <select> nativo, fiel al prototipo ===== */
.wz-searchbar .rsv-hotel-native{ display:none; }
/* position:static a propósito: así el popover se ancla a la SECCIÓN (que ya es relative) y no al
   disparador, que vive dentro del padding. El prototipo lo abre 10px bajo el borde de la caja y
   alineado con el divisor, no metido 20px. */
.wz-searchbar .rsv-hotel-dd{ display:block; position:static; }
.wz-searchbar .rsv-hotel-trigger{ display:flex; align-items:center; gap:8px; min-height:22px; cursor:pointer; color:var(--navy); }
.wz-searchbar .rsv-hotel-trigger .rsv-ico{ color:var(--navy); }
.wz-searchbar .rsv-hotel-label{ font-size:14.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wz-searchbar .rsv-hotel-trigger .rsv-caret{ margin-left:auto; font-size:10px; color:var(--muted); flex:none; }
.wz-searchbar .rsv-hotel-pop{ display:none; position:absolute; top:calc(100% + 10px); left:0; z-index:60; background:#fff; border:1px solid var(--line); border-radius:13px; box-shadow:0 18px 50px -16px rgba(31,56,72,.4); padding:8px; width:282px; }
.wz-searchbar .rsv-hotel-dd.open .rsv-hotel-pop{ display:block; }
.wz-searchbar .rsv-hotel-opt{ display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:10px; cursor:pointer; font-size:14px; color:var(--ink); }
.wz-searchbar .rsv-hotel-opt:hover{ background:#F4F0E9; } /* solo hover cambia el fondo; el seleccionado se marca con palomita */
.wz-searchbar .rsv-hotel-opt-ico{ width:34px; height:34px; border-radius:8px; background:#F2EEE7; color:var(--navy); display:flex; align-items:center; justify-content:center; flex:none; }
.wz-searchbar .rsv-hotel-opt-txt{ flex:1; min-width:0; }
.wz-searchbar .rsv-hotel-opt-name{ font-size:14px; font-weight:700; color:var(--ink); }
.wz-searchbar .rsv-hotel-opt-city{ font-size:11.5px; color:var(--muted); }
.wz-searchbar .rsv-hotel-opt-check{ margin-left:6px; color:var(--navy); display:flex; align-items:center; flex:none; }
/* ===== Promoción como POPOVER con espejo (solo wizard), fiel a nueva.royalvillashotels.com =====
   La celda deja de mostrar un input: muestra el código escrito (o la palabra "Código" cuando está vacío)
   y al pulsarla se abre un popover con el campo real. Todo depende de .is-promo-dd, que el JS pone en la
   sección al terminar de montar; sin ese JS la caja se queda con el campo inline de siempre. */
.wz-searchbar #rsvPromoSeg.is-promo-dd .rsv-promo-native{ display:none; }
/* position:static por el mismo motivo que el dropdown de hotel: así el popover se ancla a la SECCIÓN
   (que ya es relative) y no al disparador, que vive dentro del padding de 20px. */
.wz-searchbar #rsvPromoSeg.is-promo-dd .rsv-promo-dd{ display:block; position:static; }
.wz-searchbar .rsv-promo-trigger{ display:flex; align-items:center; gap:8px; min-height:22px; cursor:pointer; }
.wz-searchbar .rsv-promo-trigger .rsv-ico{ color:var(--navy); flex:none; }
/* El espejo NO se trunca en JS: se recorta aquí con ellipsis, así el huésped ve "VERANO2…" pero el valor
   que viaja al backend sigue completo. min-width:0 es lo que permite que un flex item encoja por debajo
   de su contenido; sin eso el texto largo ensancharía la celda y desbordaría la caja. */
.wz-searchbar .rsv-promo-espejo{ min-width:0; font-size:14.5px; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Alineado a la DERECHA de la sección (left:auto), como la referencia: promoción es el último campo
   antes del botón, y abrirlo hacia la izquierda lo sacaría de la caja. */
.wz-searchbar .rsv-promo-pop{ display:none; position:absolute; top:calc(100% + 10px); right:0; left:auto; z-index:60;
  background:#fff; border:1px solid var(--line); border-radius:13px; box-shadow:0 18px 50px -16px rgba(31,56,72,.4);
  padding:14px; width:240px; }
.wz-searchbar .rsv-promo-dd.open .rsv-promo-pop{ display:block; }
.wz-searchbar #rsvPromoLbl{ display:block; margin-bottom:7px; font-size:10.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
/* Con #caja_reservacion + .rsv-promo-pop le gana a la regla de .rsv-bare de más arriba (que aplana el
   input a font-size 14.5 y padding 0 para los campos de la barra): aquí sí queremos una caja de texto. */
.wz-searchbar #caja_reservacion .rsv-promo-pop .rsv-bare{ width:100%; font-size:13.5px; padding:10px 12px;
  border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); }
.wz-searchbar #caja_reservacion .rsv-promo-pop .rsv-bare:focus{ outline:none; border-color:var(--gold); }
/* Con la barra en varias filas el popover flotante queda descolgado: pasa a bloque, igual que hace el
   <style> del partial con .rsv-pop en este mismo breakpoint. */
@media (max-width:1100px){
  .wz-searchbar .rsv-promo-pop{ position:static; width:auto; margin-top:8px; box-shadow:none; }
}

/* Divider = linear-gradient gold con 12px transparentes arriba/abajo (misma regla que el prototipo), en fechas/habitaciones/promoción — NO en hotel (nth-child 2 = hotel). */
.wz-searchbar .rsv-fields > .rsv-seg:not(:nth-child(2)){ background: var(--wz-seg-div); }
.wz-searchbar .rsv-buscar{ background:#1F3848 !important; border-color:#1F3848 !important; color:#fff !important;
  border-radius:9px !important; text-transform:none !important; flex-basis:auto; gap:9px; padding:0 30px; height:47px; min-height:47px; line-height:1; position:relative; align-self:center;
  /* El prototipo envuelve el botón en una sección con padding 12px 14px: 14px de aire a cada lado.
     El de la izquierda ya lo da el gap de .rsv-row; éste es el de la derecha. */
  margin-right:14px; }
/* Divider en el gap, antes del botón Buscar — como entre los demás segmentos. El botón mide 47px
   y la caja 71px: con top/bottom 0 la línea queda con 12px libres arriba y abajo, o sea centrada. */
.wz-searchbar .rsv-buscar::before{ content:""; position:absolute; left:-14px; top:0; bottom:0; width:1px; background:var(--gold); }
.wz-searchbar .rsv-buscar svg{ width:17px; height:17px; flex:none; }
.wz-searchbar .rsv-buscar:hover{ background:#2C5364 !important; border-color:#2C5364 !important; }
@media (max-width:1100px){ .wz-searchbar .rsv-fields > .rsv-seg:not(:nth-child(2)){ background:none; padding-left:20px; } .wz-searchbar .rsv-buscar::before{ display:none; }
  /* A partir de aquí la caja base parte en dos renglones (.rsv-row a flex-wrap y .rsv-fields al 100%)
     y el botón se queda SOLO en el suyo: ahí tiene que cubrirlo completo.
     El margin-right:14px de arriba es el aire que lo separa del divisor cuando va en LÍNEA con los
     campos; en su propio renglón no separa nada de nada y sólo dejaba 14px muertos a la derecha
     (medido: botón 821px contra 835px de caja), que es lo que se veía raro.
     Como es el último elemento de la tarjeta, al ir a lo ancho hace de pie de la misma: sus esquinas
     de abajo siguen el radio del borde (14px menos 1.5px de borde = 12.5px por dentro) y las de
     arriba quedan rectas. El !important es para ganarle al border-radius:9px !important de arriba. */
  .wz-searchbar .rsv-buscar{ margin-right:0; width:100%; align-self:stretch; border-radius:0 0 12.5px 12.5px !important; }
}
/* Orden del prototipo: primero HOTEL, luego FECHAS (el partial compartido pinta fechas 1º → sólo reordenamos por CSS aquí). */
.wz-searchbar .rsv-fields > .rsv-seg:nth-child(1){ order:2; } /* Fechas → 2º */
.wz-searchbar .rsv-fields > .rsv-seg:nth-child(2){ order:1; } /* Hotel  → 1º */
.wz-searchbar .rsv-fields > .rsv-seg:nth-child(3){ order:3; } /* Habitaciones */
.wz-searchbar .rsv-fields > .rsv-seg:nth-child(4){ order:4; } /* Promoción */
/* Anchos EXACTOS del prototipo (flex-basis + min-width medidos en el .dc.html a 1192px:
   Hotel 244 · Fechas 299 · Habitaciones 264 · Promoción 219 · Buscar 165). */
.wz-searchbar .rsv-seg--dates{ flex:1 1 230px; min-width:215px; }                    /* Fechas */
.wz-searchbar .rsv-fields > .rsv-seg:nth-child(2){ flex:1 1 175px; min-width:165px; } /* Hotel */
.wz-searchbar #guestsSeg{ flex:1 1 195px; min-width:180px; }                          /* Habitaciones y huéspedes */
.wz-searchbar .rsv-fields > .rsv-seg:nth-child(4){ flex:1 1 150px; min-width:140px; } /* Promoción */
/* Resumen de huéspedes: ENVUELVE a un segundo renglón en vez de salirse (2026-08-06).
   Antes esta regla sólo quitaba el recorte con "…" (overflow:visible; text-overflow:clip) pero el
   white-space:nowrap de la caja base seguía vigente, así que al agregar niños el texto
   ("1 Habitación · 4 Adultos · 1 Niño" = 227px contra una sección de 264px con icono y caret) se salía
   de su sección y se encimaba con el divisor y con Promoción. Con white-space:normal el texto baja de
   línea y la caja crece un poco, que es el comportamiento pedido.
   min-width:0 es lo que permite que un flex item encoja por debajo de su contenido; sin él, el <span>
   conserva el ancho de la frase completa aunque se le permita envolver. */
.wz-searchbar #guestsSeg .rsv-val{ overflow:visible; text-overflow:clip; white-space:normal; min-width:0; line-height:1.25; }
.wz-searchbar #guestsSeg .rsv-field{ min-width:0; }
/* Popover de habitaciones y huéspedes: mismo despegue que el resto (8px en la caja base → 10px). */
.wz-searchbar #guestsSeg .rsv-pop{ top:calc(100% + 10px); }
/* Buscar sin fechas (tras "Reiniciar"): se marca la sección hasta que se elija un rango. */
.wz-searchbar .rsv-seg.is-missing .rsv-field{ box-shadow:inset 0 0 0 1.5px #B00020; border-radius:8px; }

/* ===== CALENDARIO (daterangepicker) con el look del prototipo =====
   El popup se monta en <body>, FUERA de .wz-searchbar, así que no se puede scopear por ancestro:
   el JS del partial le agrega la clase .wz-drp sólo cuando la página es el wizard. Sin ella, la hoja
   del CDN sigue intacta para caja_sola y las ~14 vistas legacy que la cargan. */
.daterangepicker.wz-drp{ box-sizing:border-box; font-family:var(--sans); font-size:14px; line-height:1.2; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 50px -16px rgba(31,56,72,.4);
  padding:16px 20px; margin-top:10px; width:min(86vw, 620px); max-width:calc(100vw - 24px); }
.daterangepicker.wz-drp:before, .daterangepicker.wz-drp:after{ display:none; } /* sin flecha de bocadillo */
.daterangepicker.wz-drp .drp-calendar{ max-width:none; padding:0; }
.daterangepicker.wz-drp .drp-calendar.left{ padding:0; }
.daterangepicker.wz-drp .drp-calendar.right{ padding:0; }
.daterangepicker.wz-drp .calendar-table{ border:none; background:transparent; padding:0; }
.daterangepicker.wz-drp .drp-calendar.left .calendar-table{ padding-right:0; }
/* Por omisión los meses van APILADOS (vertical). El prototipo pasa a una columna cuando el popup ya
   no puede dar 250px a cada mes: min(86vw,620) − 40 de padding < 250+28+250 → por debajo de ~660px de
   viewport. La hoja del CDN los pone lado a lado desde 564px, de ahí el rango en el que se veían
   apretados y no apilados. */
.daterangepicker.wz-drp .drp-calendar{ float:none; width:auto; margin-right:0; }
.daterangepicker.wz-drp .drp-calendar.left{ margin-bottom:14px; }
/* Dos meses lado a lado con 28px de separación (el prototipo usa gap:28px). Se calculan sobre el
   ancho útil, no fijos: con 276px+28px+276px la caja de 620 se queda 2px corta y el 2º mes cae abajo. */
@media (min-width:661px){
  .daterangepicker.wz-drp .drp-calendar{ box-sizing:border-box; float:left; width:calc(50% - 14px); }
  .daterangepicker.wz-drp .drp-calendar.left{ margin-right:28px; margin-bottom:0; }
}
/* Celdas: círculo de 38px, 13.5px (prototipo). */
.daterangepicker.wz-drp .calendar-table td{ min-width:38px; width:38px; height:38px; line-height:38px;
  font-size:13.5px; font-weight:500; color:var(--ink); border:none; border-radius:50%; }
.daterangepicker.wz-drp .calendar-table th{ min-width:38px; width:38px; height:auto; line-height:1; padding:4px 0;
  font-size:11.5px; font-weight:700; color:var(--muted); border:none; border-radius:50%; }
.daterangepicker.wz-drp th.month{ width:auto; font-size:15px; font-weight:600; color:var(--ink); padding-bottom:8px; }
/* Flechas ‹ › : círculo de 34px con hover claro; el chevron de la librería recoloreado a ink. */
.daterangepicker.wz-drp th.prev, .daterangepicker.wz-drp th.next{ width:34px; min-width:34px; height:34px; }
/* Fila de navegación de alto fijo: si un mes no trae flecha (p.ej. el izquierdo en el mes mínimo),
   su título quedaría más arriba que el del otro mes. */
.daterangepicker.wz-drp .calendar-table thead tr:first-child th{ height:34px; }
.daterangepicker.wz-drp th.prev.available:hover, .daterangepicker.wz-drp th.next.available:hover{ background:#F2EEE7; }
.daterangepicker.wz-drp .calendar-table .prev span, .daterangepicker.wz-drp .calendar-table .next span{
  border-color:var(--ink); border-width:0 2px 2px 0; padding:3.5px; }
.daterangepicker.wz-drp td.available:hover{ background:#F2EEE7; color:var(--ink); }
/* Estados del rango: extremos = círculo dorado; intermedios = cuadro beige. */
.daterangepicker.wz-drp td.active, .daterangepicker.wz-drp td.active:hover{ background:var(--gold); color:#fff; font-weight:700; }
.daterangepicker.wz-drp td.start-date, .daterangepicker.wz-drp td.end-date,
.daterangepicker.wz-drp td.start-date.end-date{ border-radius:50%; }
/* :not(.active) — la fecha final lleva a la vez "end-date" e "in-range"; sin esto el cuadrado del
   rango le ganaría al círculo por venir después con la misma especificidad. */
.daterangepicker.wz-drp td.in-range:not(.active){ background:#F1E4D3; color:var(--ink); border-radius:0; }
/* Fuera del mínimo (pasados): tachados. La librería les pone "off disabled". */
.daterangepicker.wz-drp td.disabled{ background:transparent; color:#C4BDB0; text-decoration:line-through; cursor:default; }
/* Relleno del mes contiguo ("off ends"): celda en blanco, como el prototipo. */
.daterangepicker.wz-drp td.off.ends{ background:transparent; color:transparent; text-decoration:none; pointer-events:none; }
/* Tras "Reiniciar" no hay selección: se apaga el resaltado hasta el primer clic. */
.daterangepicker.wz-drp.wz-drp--limpio td.active, .daterangepicker.wz-drp.wz-drp--limpio td.in-range{
  background:transparent; color:var(--ink); font-weight:500; }
/* Pie: REINICIAR (borde dorado) a la izquierda, LISTO (navy) a la derecha. */
.daterangepicker.wz-drp.show-calendar .drp-buttons{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  clear:both; margin-top:14px; padding:14px 0 0; border-top:1px solid var(--line); text-align:left; line-height:1; }
.daterangepicker.wz-drp .drp-selected{ display:none; }
.daterangepicker.wz-drp .drp-buttons .btn{ margin:0; font-family:var(--sans); font-size:13px; font-weight:700;
  letter-spacing:.06em;  border-radius:9px !important; cursor:pointer; }
.daterangepicker.wz-drp .drp-buttons .cancelBtn{ background:transparent !important; border:1.5px solid var(--gold) !important;
  color:var(--gold-deep) !important; padding:11px 26px !important; }
.daterangepicker.wz-drp .drp-buttons .applyBtn{ background:var(--navy) !important; border:none !important;
  color:#fff !important; padding:11px 30px !important; }
.daterangepicker.wz-drp .drp-buttons .applyBtn:hover{ background:var(--navy-2) !important; }
.daterangepicker.wz-drp .drp-buttons .cancelBtn:hover{ background:#F7F3EC !important; }

/* ===== FOOTER navy de 5 columnas (fiel al prototipo Motor de Reservas) ===== */
.wz-footer{ background:#1A2E38; color:rgba(255,255,255,.82); font-family:var(--sans); margin-top:56px; }
.wz-footer__in{ max-width:1240px; margin:0 auto; padding:60px 24px 40px; }
.wz-footer a{ color:rgba(255,255,255,.78); text-decoration:none; }
.wz-footer a:hover{ color:#fff; }
.wz-footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1.3fr; gap:40px; }
.wz-footer__col{ min-width:0; }
.wz-footer__logo{ height:64px; width:auto; display:block; margin-bottom:18px; }
.wz-footer__tagline{ font-size:13.5px; line-height:1.7; margin:0 0 22px; color:rgba(255,255,255,.7); }
.wz-footer__social-label{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:14px; }
.wz-footer__social{ display:flex; gap:12px; }
.wz-footer__social a{ width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; color:#fff; transition:background .15s,border-color .15s; }
.wz-footer__social a:hover{ background:var(--gold); border-color:var(--gold); }
.wz-footer__title{ font-family:var(--sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:700; margin:0 0 16px; }
.wz-footer__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; font-size:14px; }
.wz-footer__list--plain{ color:rgba(255,255,255,.78); }
/* Contacto es una columna como las otras tres: el <h4> y su <ul class="wz-footer__list">, y el
   hueco entre los dos lo pone el margen del título (16px) y nada más.
   ⛔ Antes esta columna era un flex propio con gap:14px, y eso metía DOS diferencias medidas en el
   navegador: (a) el gap del flex se SUMABA al margen del título -> 30px en vez de 16px, y (b) el
   line-height:1.55 de la columna también engordaba el <h4> 3.6px. Su primer renglón acababa 17.6px
   más abajo que el de las columnas vecinas. El tamaño y el interlineado se bajaron a la lista (la
   dirección son dos renglones y necesita el 1.55; el <h4> no). */
.wz-footer__contact{ color:rgba(255,255,255,.72); }
.wz-footer__list--contacto{ font-size:13.5px; line-height:1.55; }
.wz-footer__contact-item{ display:flex; gap:11px; align-items:flex-start; }
.wz-footer__contact-item svg{ flex:none; margin-top:2px; }
.wz-footer__contact-item a{ color:rgba(255,255,255,.72); }
.wz-footer__contact-item a.is-strong{ color:#fff; font-weight:600; }
.wz-footer__legalbar{ border-top:1px solid rgba(255,255,255,.12); }
.wz-footer__legal{ max-width:1240px; margin:0 auto; padding:20px 24px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:12.5px; color:rgba(255,255,255,.55); }
.wz-footer__legal-links{ display:flex; gap:18px; flex-wrap:wrap; }
.wz-footer__legal a{ color:rgba(255,255,255,.55); }
.wz-footer__legal a:hover{ color:#fff; }
/* Barra legal: en el ancho completo va el copyright a la izquierda y los enlaces a la derecha
   (space-between). Pero al angostarse deja de caber en un renglón y se parte en dos — MEDIDO: a 793px
   en español y a 672px en inglés (el texto inglés es más corto) — y entonces space-between deja cada
   renglón pegado a la izquierda con TODO el hueco a la derecha: eso es lo que se veía descentrado.
   De 800px para abajo (redondeo apenas por encima del corte español, con margen por si la fuente
   carga distinto) se centra: si todavía cabe en un renglón queda centrada como bloque, y si se parte,
   cada renglón queda centrado. No se fuerza la columna aquí a propósito — en inglés a 750px todavía
   cabe en una línea y partirla sería empeorarla. La columna sigue entrando en el @media de 560. */
@media (max-width:800px){
  .wz-footer__legal{ justify-content:center; text-align:center; column-gap:28px; }
  .wz-footer__legal-links{ justify-content:center; }
}
@media (max-width:900px){ .wz-footer__grid{ grid-template-columns:1fr 1fr; gap:32px 40px; }
  /* En cuanto el footer baja a DOS columnas, la marca deja de compartir renglón con "Hoteles":
     ocupa el ancho completo ella sola y se centra. Va aquí y no en el @media de móvil porque en
     esta franja (561–900) caen los teléfonos en horizontal, donde el problema es el mismo. */
  .wz-footer__brand{ grid-column:1 / -1; text-align:center; }
  .wz-footer__logo{ margin-left:auto; margin-right:auto; }
  .wz-footer__social{ justify-content:center; }
}
/* Móvil: se conservan DOS columnas (antes se apilaba todo a una sola, que dejaba cada sección
   pegada a la izquierda con medio ancho de hueco a la derecha).
   El bloque de la marca es el único que NO se reparte: ocupa el renglón completo él solo y va
   centrado. Las 4 secciones de enlaces mantienen su texto alineado a la izquierda (leer una lista
   centrada cuesta más), pero su BLOQUE se centra dentro de la columna con width:fit-content +
   márgenes automáticos: así el aire sobrante queda repartido a los dos lados en vez de todo del
   derecho. max-width:100% es el que evita que una dirección larga desborde la celda. */
@media (max-width:560px){
  .wz-footer__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:30px 22px; }
  .wz-footer__col{ width:fit-content; max-width:100%; margin-left:auto; margin-right:auto; }
  /* El correo es UNA palabra de ~35 caracteres: a media pantalla no cabe, y como no tiene por dónde
     partirse ensanchaba la columna por encima de la celda y sacaba scroll horizontal a toda la
     página. Con "anywhere" (no "break-word") el navegador la cuenta rota YA al calcular el ancho
     mínimo, que es lo que permite que el max-width:100% de arriba mande. Sólo en contacto: las
     listas de enlaces no tienen palabras tan largas y no hace falta arriesgarse a partirlas. */
  .wz-footer__contact-item{ overflow-wrap:anywhere; }
  /* La marca a renglón completo y centrada ya viene del @media de 900px, que también cubre este rango. */
  .wz-footer__legal{ flex-direction:column; align-items:center; text-align:center; }
  .wz-footer__legal-links{ justify-content:center; }
}

/* ===== Stepper: 5 círculos + líneas ===== */
.wz-stepper{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; background:var(--bg); padding:8px 0; margin-bottom:30px; }
.wz-stepper__list{ list-style:none; display:flex; align-items:center; justify-content:center; gap:0; margin:0; padding:0; flex-wrap:wrap; row-gap:10px; flex:1 1 auto; }
.wz-step{ display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-size:13.5px; font-weight:700; color:var(--muted); white-space:nowrap; }
.wz-step:not(:last-child)::after{ content:""; width:34px; height:2px; background:var(--line); margin:0 14px; }
.wz-step__num{ width:30px; height:30px; border-radius:50%; background:#fff; border:1.5px solid var(--line); color:var(--muted); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }
.wz-step.is-active{ color:var(--ink); }
.wz-step.is-active .wz-step__num{ background:var(--navy); border-color:var(--navy); color:#fff; }
.wz-step.is-done{ color:var(--gold-deep); }
.wz-step.is-done .wz-step__num{ background:var(--gold); border-color:var(--gold); color:#fff; }
.wz-step.is-clickable{ cursor:pointer; }
.wz-step.is-clickable:hover{ opacity:.75; }
.wz-stepper__count{ order:-1; flex-shrink:0; margin:0; padding:7px 15px; background:#FBF6EE; border:1px solid var(--gold); border-radius:999px; color:var(--navy); font-size:12px; font-weight:700; letter-spacing:.4px; white-space:nowrap; }

/* ===================== LAYOUT ===================== */
.wz-main{ min-width:0; }
.wz-panel__title{ font-size:32px; font-weight:400; color:var(--rsv-navy); margin:0 0 18px; }
.wz-caja-slot{ margin-bottom:24px; }

/* ===================== FILTROS (barra horizontal, estilo Railway) ===================== */
/* Barra de filtros como card del prototipo: radio 14, padding 13/18, gap 16, sombra suave. */
/* Meta del modal de detalle (prototipo): m² · personas · camas · vista en una sola línea. */
.wz-modal__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:8px; color:var(--muted); font-size:13px; }
.wz-modal__meta .wz-room-card__meta, .wz-modal__meta .wz-room-card__vista{ margin:0; font-size:13px; color:var(--muted); }
.wz-modal__meta .wz-room-card__vista::before{ content:"·"; opacity:.5; margin-right:14px; }
.wz-filterbar{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:13px 18px; margin-bottom:24px; box-shadow:0 1px 2px rgba(35,32,28,.04); font-family:var(--sans); }
/* Contador + línea separadora, como el prototipo: el contador NO empuja (ese margin-right:auto era
   lo que abría el hueco hasta "Ordenar"); el que se va a la derecha es el toggle de impuestos. */
.wz-filterbar__count{ display:flex; align-items:center; gap:16px; font-family:var(--serif); font-size:18px; color:var(--navy); margin:0; }
.wz-filterbar__count::after{ content:""; width:1px; height:26px; background:var(--line); flex:none; }
.wz-tax-toggle{ margin-left:auto; }
.wz-filterbar__group{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.wz-filterbar__group label{ text-transform:uppercase; letter-spacing:.5px; font-size:11px; font-weight:700; margin:0; }
/* Checkbox "Incluir impuestos y cargos" (barra de filtros) — SOLO visual: el JS (applyTaxDisplay) recalcula
   el número mostrado (÷1.19) y cambia la leyenda .wz-tax-note; NO altera lo que se envía en los forms. */
.wz-tax-toggle{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); cursor:pointer; user-select:none; }
.wz-tax-toggle input{ width:16px; height:16px; accent-color:var(--navy); cursor:pointer; margin:0; }
.wz-filterbar select, .wz-filterbar .wz-price-inp{ border:1px solid var(--line); border-radius:9px; padding:8px 12px; font:inherit; font-size:13px; color:var(--ink); background:var(--sel-bg); }
.wz-cap-btns{ display:flex; flex-wrap:wrap; gap:6px; }
.wz-cap-btn{ font:inherit; font-size:12.5px; font-weight:700; padding:6px 11px; border-radius:999px;
  border:1.5px solid var(--rsv-line); background:#fff; color:var(--rsv-muted); cursor:pointer; transition:all .15s; }
.wz-cap-btn:hover{ border-color:var(--rsv-camel); }
.wz-cap-btn.is-on{ background:var(--rsv-navy); border-color:var(--rsv-navy); color:#fff; }
.wz-price-range{ display:flex; align-items:center; gap:8px; }
.wz-filterbar .wz-price-inp{ width:92px; min-width:0; }
.wz-price-inp:focus{ outline:none; border-color:var(--rsv-gold); }
.wz-price-sep{ color:var(--rsv-text-muted); }
.wz-sort:focus{ outline:none; border-color:var(--rsv-gold); }

/* ===================== CARDS DE HABITACIÓN (horizontal, estilo Railway) ===================== */
.wz-rooms-list{ display:flex; flex-direction:column; gap:18px; }
.wz-room-card{ display:flex; flex-wrap:wrap; gap:20px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; align-items:stretch; overflow:hidden; box-shadow:0 1px 2px rgba(35,32,28,.04); }
.wz-room-card__media{ position:relative; width:318px; height:232px; border-radius:12px; overflow:hidden; flex-shrink:0; background:var(--navy); }
.wz-room-card__media img{ width:100%; height:100%; object-fit:cover; }
.wz-room-card__cap{ position:absolute; left:8px; top:8px; background:rgba(31,56,72,.82); color:#fff; font-size:11px; font-weight:600; padding:3px 8px; border-radius:6px; display:flex; align-items:center; gap:5px; }
.wz-room-card__body{ flex:1; min-width:0; }
.wz-room-card__title{ font-family:var(--serif); font-size:32px; color:var(--ink); margin:0 0 8px; }
.wz-room-card__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 0; font-size:17px; color:var(--muted); margin-bottom:6px; }
.wz-room-card__meta span{ display:inline-flex; align-items:center; gap:5px; }
.wz-room-card__sep{ font-style:normal; color:var(--muted); margin:0 10px; }
.wz-room-card__sep::before{ content:'\00B7'; }
.wz-room-card__meta .wz-room-card__sep:last-child{ display:none; }
/* Vista en su PROPIA línea (fiel al prototipo, no inline con el resto del meta) */
.wz-room-card__vista{ display:flex; align-items:center; gap:5px; font-size:17px; color:var(--muted); margin-bottom:10px; }
.wz-room-card__vista svg{ flex:none; }
.wz-room-card__desc{ font-size:13px; color:var(--rsv-muted); margin:0 0 8px; line-height:1.45; }
.wz-room-card__more{ font:inherit; font-size:18px; font-weight:700; color:var(--navy); background:none; border:none; padding:0; cursor:pointer; text-decoration:underline; }
/* Badge de escasez bajo "Ver detalles del cuarto". Valores tomados del prototipo.
   Va como display:flex + width:fit-content (NO inline-flex): .wz-room-card__body es un bloque,
   no un contenedor flex, así que un inline-flex se quedaría en la misma línea que el botón
   y el align-self:flex-start del prototipo no tendría efecto. */
.wz-room-card__urgent{ display:none; width:fit-content; margin-top:4px; align-items:center; gap:7px; font-size:15px; font-weight:700; color:#B23A2E; background:#FBEDEA; border:1px solid #F3D2CC; padding:6px 14px; border-radius:999px; }
/* Lo revela el JS con .is-on cuando la disponibilidad confirma que la habitación se puede reservar. */
.wz-room-card__urgent.is-on{ display:flex; }
.wz-room-card__urgent-dot{ width:9px; height:9px; border-radius:50%; background:#B23A2E; flex:none; }
.wz-room-card__aside{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; text-align:right; flex-shrink:0; min-width:190px; }
.wz-room-card__aside p{ margin:0; }
.wz-room-card__from{ font-size:17px; color:var(--muted); }
.wz-room-card__from s{ color:var(--muted); }
.wz-room-card__price{ font-family:var(--serif); font-size:40px; color:var(--ink); line-height:1.05; }
.wz-room-card__price small{ font-family:var(--sans); font-size:17px; font-weight:600; color:var(--muted); }
.wz-room-card__pernight{ font-size:16px; color:var(--muted); }
/* Total de la estancia bajo "por noche" (prototipo): importe en navy, etiqueta en muted.
   El margen va con el selector compuesto porque `.wz-room-card__aside p{ margin:0 }` (arriba)
   tiene más especificidad que una sola clase y si no, ganaría. */
.wz-room-card__total{ font-size:17px; color:var(--navy); font-weight:700; }
.wz-room-card__aside .wz-room-card__total{ margin-top:4px; }
.wz-room-card__total-lbl{ font-weight:600; color:var(--muted); font-size:14px; }
.wz-room-card__taxes{ font-size:15px; color:var(--muted); margin-top:2px; }
.wz-ver-tarifas{ margin-top:12px; font:inherit; font-size:17px; font-weight:700; color:var(--navy); background:#fff; border:1.5px solid var(--navy); border-radius:999px; padding:13px 28px; cursor:pointer; }
.wz-ver-tarifas.is-open{ background:var(--navy); color:#fff; }
@media(max-width:760px){ .wz-room-card{ flex-direction:column; align-items:stretch; } .wz-room-card__media{ width:100%; height:180px; } .wz-room-card__aside{ text-align:left; } }

/* ===== Habitación SIN disponibilidad (prototipo): velo + sello y, en vez del precio, el motivo
   con una recomendación. La clase .is-unavail la pone syncDisponibilidad() cuando el PMS responde;
   sin JS nada de esto se muestra y la tarjeta se ve como siempre. ===== */
.wz-room-card__veil{ display:none; }
.wz-room-card.is-unavail .wz-room-card__veil{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(22,41,52,.5); }
.wz-room-card__stamp{ background:#B23A2E; color:#fff; font-size:13px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; padding:9px 20px; border-radius:8px; }
.wz-room-card__unavail{ display:none; }
.wz-room-card.is-unavail .wz-room-card__unavail{ display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:10px; height:100%; }
.wz-room-card.is-unavail .wz-room-card__from,
.wz-room-card.is-unavail .wz-room-card__price,
.wz-room-card.is-unavail .wz-room-card__pernight,
.wz-room-card.is-unavail .wz-room-card__total,
.wz-room-card.is-unavail .wz-room-card__taxes,
.wz-room-card.is-unavail .wz-room-card__urgent{ display:none !important; }
.wz-room-card__unavail-pill{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:700; color:#B23A2E;
  background:#FBEDEA; border:1px solid #F3D2CC; padding:6px 14px; border-radius:999px; }
.wz-room-card__unavail-rec{ font-size:14px; color:#5A564D; line-height:1.5; max-width:240px; margin:0; }
.wz-room-card__unavail-cta{ background:var(--gold); color:#fff; border:none; padding:12px 24px; border-radius:999px;
  font-size:15px; font-weight:700; cursor:pointer; transition:background .2s; }
.wz-room-card__unavail-cta:hover{ background:var(--gold-deep); }
/* Reacomodo ("puede reservar más de una habitación de este tipo"). Nace VACÍO: el JS le mete el
   mensaje y el botón sólo si el servidor encontró un acomodo, así que sin :empty se vería una caja
   hueca en todas las habitaciones que no alcanzan por capacidad.

   Se viste como la tarjeta de habitación (.wz-room-card: fondo blanco, mismo borde, mismo radio y
   la misma sombra de 1px) y va a DOS POR FILA.

   ⛔ El contenedor va FLEX, no inline-block. Con inline-block habría que matar el espacio entre
   cajas (el salto de línea del blade) poniendo font-size:0 en el contenedor, y ESE cero lo
   heredaría todo texto de los paneles de tarifas que no fije su propio tamaño — estas cajas viven
   en .wz-rates-wrap intercaladas con esos paneles. Flex no crea ítems con los nodos de espacio en
   blanco, así que el problema no existe y la tipografía de los paneles no se toca. Los paneles
   siguen ocupando la fila entera con width:100%. */
.wz-rates-wrap, .wz-reacomodo-zone{ display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start; }
.wz-rates-wrap > .wz-rates{ width:100%; }
/* La zona propia, encima del listado de habitaciones. El encabezado y el botón ocupan la fila
   entera; las cajas viven dentro de su propio contenedor, que es lo que se abre y se cierra.
   ⛔ El botón va FUERA de ese contenedor: dentro desaparecería con el primer clic. */
.wz-reacomodo-zone{ margin:0 0 18px; }
.wz-reacomodo-zone > .wz-panel__title{ width:100%; margin:0; }
.wz-reacomodo-zone__btn{ width:auto; margin-top:0; }
.wz-reacomodo-zone__cajas{ width:100%; display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start; }
.wz-reacomodo-zone__cajas[hidden]{ display:none; }
.wz-reacomodo{ box-sizing:border-box; width:calc(50% - 7px); margin:0; padding:18px;
  border:1px solid var(--line); background:#fff; border-radius:16px; box-shadow:0 1px 2px rgba(35,32,28,.04); }
.wz-reacomodo:empty{ display:none; }
/* Escondida cuando hay habitaciones reservables y ésta no tiene panel donde alojarse. */
.wz-reacomodo[hidden]{ display:none; }
/* Dentro del panel de su habitación va sola: fila completa y separada de las tarifas de abajo. */
.wz-rates .wz-reacomodo{ width:100%; margin-bottom:14px; }
@media(max-width:760px){ .wz-reacomodo{ width:100%; } }
/* Encabezado: nombre de la habitación · en cuántas se reparte el grupo. */
.wz-reacomodo__tit{ margin:0 0 6px; font-family:var(--serif); font-size:15px; color:var(--navy); }
.wz-reacomodo__msg{ margin:0 0 10px; font-size:13px; line-height:1.55; color:var(--ink); }
/* Hereda .wz-reservar (el botón de la tarjeta de tarifa), que trae el fondo dorado y el radio.
   Lo que sigue es lo que un <a> necesita y un <button> no:

   1) ANCHO. .wz-reservar trae width:100%, que aquí se veía desproporcionado: este botón vive en un
      aviso, no al pie de una columna. Se reduce a un tercio de la caja, con un mínimo para que la
      leyenda no se parta en dos renglones, y con border-box para que el padding no lo desborde.
   2) HOVER. ⛔ El color de la letra NO se hereda al pasar el ratón: la página trae DOS reglas
      globales de enlace —bootstrap (a:hover{color:#0056b3}) y una en línea (a:hover{color:#0d3540})—
      y las dos tienen especificidad 0,1,1, que le gana al 0,1,0 de .wz-reservar{color:#fff}. Sin
      esto, la letra blanca se volvía azul/marino sobre el dorado. Se fija con 0,2,0, que las supera,
      y se cubren también :focus y :visited, que sufren lo mismo. */
.wz-reacomodo__btn{ display:inline-block; box-sizing:border-box; text-decoration:none; text-align:center; }
/* ⛔ El ancho va con DOS clases (0,2,0) a propósito: .wz-reservar{width:100%} tiene la misma
   especificidad que .wz-reacomodo__btn y vive MÁS ABAJO en este archivo, así que ganaba por orden y
   el botón seguía saliendo a todo lo ancho. El mínimo evita que "Más información" se parta en dos
   renglones cuando la caja es angosta. */
/* Centrado respecto de su caja: display:block + márgenes automáticos. Con inline-block habría que
   centrar el texto del contenedor, y eso arrastraría también al mensaje. */
.wz-reacomodo .wz-reacomodo__btn{ display:block; width:33%; min-width:170px; margin-left:auto; margin-right:auto; }
.wz-reacomodo__btn, .wz-reacomodo__btn:hover, .wz-reacomodo__btn:focus, .wz-reacomodo__btn:visited{
  color:#fff; text-decoration:none; }

/* Aviso de la habitación de rescate: sólo sale cuando no quedó ninguna otra reservable y el hotel
   pidió el modo "contacto". Alineado a la derecha como el resto del bloque, y a la izquierda en
   móvil, donde la columna se apila. El [hidden] gana porque el bloque de arriba lo pone en flex. */
.wz-room-card__rescate{ margin:0; max-width:320px; text-align:right; font-size:13px; line-height:1.5; color:var(--ink); }
.wz-room-card__rescate[hidden]{ display:none; }
@media(max-width:760px){ .wz-room-card.is-unavail .wz-room-card__unavail{ align-items:flex-start; }
  .wz-room-card__rescate{ text-align:left; } }

/* ===== Cuadro "ninguna habitación disponible" (prototipo) ===== */
.wz-sindispo{ display:flex; gap:15px; align-items:flex-start; background:#fff; border:1px solid #EAD9B0; border-radius:16px;
  padding:26px; margin-bottom:24px; box-shadow:0 1px 2px rgba(35,32,28,.04); }
.wz-sindispo[hidden]{ display:none; }
.wz-sindispo__ico{ width:42px; height:42px; border-radius:50%; background:#FBF1D9; color:var(--gold-deep);
  display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.wz-sindispo__body{ flex:1 1 0; min-width:0; }
.wz-sindispo__title{ font-family:var(--serif); font-size:23px; font-weight:400; color:var(--navy); margin:0; line-height:1.2; }
.wz-sindispo__text{ font-size:14.5px; color:#5A564D; line-height:1.55; margin:6px 0 0; }
.wz-sindispo__opts{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.wz-sindispo__opts[hidden]{ display:none; }
.wz-sindispo__slot{ min-width:190px; }
/* Hueco mientras responde su sondeo: cada botón aparece en cuanto llega el suyo. */
.wz-sindispo__slot.is-loading{ height:80px; border-radius:12px; background:linear-gradient(90deg,#e3dcd0 25%,#f6f2ea 50%,#e3dcd0 75%);
  background-size:200% 100%; animation:wzShimmer 1.4s ease-in-out infinite; }
.wz-sindispo__opt{ display:flex; flex-direction:column; gap:3px; width:100%; background:#FBF9F5; border:1.5px solid var(--navy);
  border-radius:12px; padding:14px 20px; cursor:pointer; text-align:left; color:var(--navy); font:inherit; }
.wz-sindispo__opt.is-rec{ background:#F1E4D3; }
.wz-sindispo__opt:hover{ border-color:var(--navy-2); }
.wz-sindispo__opt-lbl{ font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; opacity:.85; }
.wz-sindispo__opt-fecha{ font-size:16px; font-weight:700; }
.wz-sindispo__opt-det{ font-size:12.5px; opacity:.75; }
@media(max-width:600px){ .wz-sindispo{ padding:20px; } .wz-sindispo__slot, .wz-sindispo__opt{ min-width:0; width:100%; } }

/* ===================== TARIFAS ===================== */
.wz-rates__head, .wz-extras__head{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.wz-rates__title, .wz-extras__title{ font-size:20px; font-weight:700; color:var(--rsv-navy); margin:0; }
.wz-rates__list{ display:flex; flex-direction:column; gap:14px; }
.wz-rate-card{ background:#fff; border:1px solid var(--rsv-line-light); border-radius:var(--wz-radius);
  padding:18px 20px; display:grid; grid-template-columns:1fr auto auto; gap:18px; align-items:center;
  box-shadow:0 2px 8px rgba(31,56,72,.05); }
.wz-rate-card__name{ font-size:17px; font-weight:700; color:var(--rsv-navy); margin:0 0 8px; }
.wz-rate-card__benefits{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0px; }
.wz-rate-card__benefits li{ font-weight: 700; font-size:11px; color:var(--rsv-muted); display:flex; align-items:center; gap:7px; }
.wz-rate-card__benefits svg{ color:var(--green); flex-shrink:0; }
/* Badges del tipo de tarifa (Tarifa Flexible / Sin Reembolso). */
/* Enlace "Ver detalles" del plan extra (movido al header de columna, debajo de la descripción). */
.wz-plan-col__details{ align-self:flex-start; text-align:left; background:none; border:0; padding:0; margin:-6px 0 12px; min-height:18px; line-height:18px; font-size:12.5px; color:var(--gold-deep); text-decoration:underline; text-underline-offset:2px; cursor:pointer; font-family:inherit; }
.wz-plan-col__details:hover{ color:var(--gold); }
.wz-plan-col__details-spacer{ display:block; margin:-6px 0 12px; min-height:18px; }
/* Detalle por noche: oculto por el momento (a petición). */
.wz-rate-card__nights-toggle, .wz-rate-card__nights{ display:none !important; }
.wz-rate-card__pricing{ text-align:right; display:flex; flex-direction:column; gap:2px; line-height:1.3; }
.wz-rate-card__line{ font-size:12.5px; color:var(--rsv-text-muted); }
.wz-rate-card__line s{ color:var(--rsv-text-muted); }
/* La insignia baja 5px para pegarse al importe que lleva debajo, y esos mismos 5px se le devuelven
   arriba: MEDIDO, el hueco hacia el precio pasa de 8px a 3px, el de arriba de 0px a 5px y el alto
   del bloque no se mueve, así que nada de lo de abajo se recorre. */
.wz-rate-card__save{ font-size:12.5px; color:var(--rsv-muted); font-weight:600; margin-top:5px; margin-bottom:-5px; }
/* El tachado del precio de lista lleva la línea ROJA, como el prototipo (el texto sigue gris). */
.wz-rate-card__save s{ text-decoration:line-through; text-decoration-color:#c0392b; -webkit-text-decoration-color:#c0392b; text-decoration-thickness:1.5px; }
.wz-rate-card__save b{ color:#1a8c3c; }
.wz-rate-card__old{ font-size:13px; color:var(--rsv-text-muted); text-decoration:line-through; }
.wz-rate-card__total{ font-size:14px; font-weight:800; color:var(--rsv-gold); }
.wz-rate-card__pn{ font-size:12px; color:var(--rsv-muted); font-weight:600; }
.wz-rate-card__tax{ font-size:10px; color:var(--rsv-text-muted); }
.wz-rate-card__unavail{ font-size:12px; color:#8a6d3b; background:#fcf3e3; border:1px solid #f0e0b8;
  border-radius:10px; padding:10px 12px; line-height:1.5; max-width:300px; text-align:left; }
.wz-rate-card__unavail strong{ display:block; color:#7a5b1e; margin-bottom:2px; }
.wz-rate-card__unavail-reasons{ display:block; margin-top:5px; color:#9a7b3a; font-size:11.5px; }
.wz-rate-card__nights-toggle{ background:none; border:none; padding:6px 0 0; cursor:pointer; font:inherit;
  font-size:12px; font-weight:700; color:var(--rsv-gold); text-align:left; }
.wz-rate-card__nights-toggle:hover{ color:var(--rsv-gold-dark); }
.wz-rate-card__nights{ margin-top:8px; border-top:1px dashed var(--rsv-line); padding-top:8px;
  display:flex; flex-direction:column; gap:5px; }
.wz-night{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; font-size:11.5px; }
.wz-night__lbl{ color:var(--rsv-muted); }
.wz-night__price{ color:var(--rsv-navy); font-weight:600; margin-left:auto; }
.wz-night__price s{ color:var(--rsv-text-muted); font-weight:400; }
.wz-night__promo{ flex-basis:100%; color:var(--rsv-gold); font-size:11px; }
/* otras fechas (alternativas cuando no hay disponibilidad) */
.wz-otras-fechas{ margin-top:10px; }
.wz-otras-fechas--top{ margin-top:0; margin-bottom:16px; }
.wz-otras-fechas--top:empty{ display:none; }
.wz-otras-fechas__msg{ font-size:12px; color:#8a6d3b; margin:0 0 8px; }
.wz-otras-fechas__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.wz-otras-fechas__card{ background:#fff; border:1.5px solid var(--rsv-tan); border-radius:10px; padding:12px;
  text-align:center; display:flex; flex-direction:column; gap:4px; align-items:center; }
.wz-otras-fechas__date{ font-size:13px; font-weight:700; color:var(--rsv-navy); }
.wz-otras-fechas__from{ font-size:11px; color:var(--rsv-text-muted); }
.wz-otras-fechas__amount{ font-size:16px; font-weight:800; color:var(--rsv-gold); }
.wz-otras-fechas__btn{ width:100%; margin-top:4px; padding:8px 12px; font-size:13px; }
.wz-rates__continue, .wz-extras__continue{ margin-top:22px; display:flex; justify-content:flex-end; }

/* ===================== MODO SIN TARIFA (tarifas dentro de Habitación, una por fila) ===================== */
.wz-rates--row{ background:#fff; border:1px solid var(--rsv-line-light); border-radius:var(--wz-radius);
  padding:18px 20px; box-shadow:0 2px 10px rgba(31,56,72,.06); }
.wz-rates--row + .wz-rates--row{ margin-top:20px; }
.wz-rates--row .wz-rates__head{ align-items:flex-start; }
.wz-rates__thumb{ width:96px; height:70px; object-fit:cover; border-radius:10px; flex-shrink:0; }
.wz-rates__headinfo{ min-width:0; }
.wz-rates__desc{ font-size:12.5px; color:var(--rsv-muted); margin:3px 0 0; line-height:1.4; }

/* ===================== EXTRAS ===================== */
.wz-extras__list{ display:flex; flex-direction:column; gap:12px; }
.wz-extra-row{ background:#fff; border:1px solid var(--rsv-line-light); border-radius:12px; overflow:hidden; }
.wz-extra-row__toggle{ width:100%; background:none; border:none; cursor:pointer; padding:16px 18px;
  display:flex; align-items:center; gap:14px; text-align:left; transition:background .15s; }
.wz-extra-row__toggle:hover{ background:var(--rsv-cream); }
.wz-extra-row__check{ width:24px; height:24px; border-radius:7px; border:2px solid var(--rsv-tan);
  flex-shrink:0; position:relative; transition:all .15s; }
.wz-extra-row__toggle.is-on .wz-extra-row__check{ background:var(--rsv-gold); border-color:var(--rsv-gold); }
.wz-extra-row__toggle.is-on .wz-extra-row__check::after{ content:""; position:absolute; left:7px; top:3px;
  width:6px; height:11px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); }
.wz-extra-row__name{ font-size:15px; font-weight:600; color:var(--rsv-navy); flex:1; }
.wz-extra-row__price{ font-size:15px; font-weight:700; color:var(--rsv-gold); }

/* ===================== BOTONES ===================== */
.wz-btn{ font:inherit; font-size:14px; font-weight:700; border-radius:999px; cursor:pointer;
  padding:11px 22px; border:1.6px solid transparent; transition:all .15s; line-height:1; display:inline-flex;
  align-items:center; justify-content:center; gap:6px; }
.wz-btn--primary{ background:var(--rsv-gold); color:#fff; border-color:var(--rsv-gold); }
.wz-btn--primary:hover:not(:disabled){ background:var(--rsv-gold-dark); border-color:var(--rsv-gold-dark); }
.wz-btn--ghost{ background:#fff; color:var(--rsv-navy); border-color:var(--rsv-line); padding:9px 16px; }
.wz-btn--ghost:hover{ background:var(--rsv-cream); }
.wz-btn--disabled, .wz-btn:disabled{ opacity:.45; cursor:not-allowed; }
/* loader: spinner en el botón mientras somete (oculta el texto) */
.wz-btn.is-loading{ color:transparent !important; pointer-events:none; position:relative; opacity:1; }
.wz-btn.is-loading::after{ content:""; position:absolute; top:50%; left:50%; width:16px; height:16px;
  margin:-8px 0 0 -8px; border:2px solid rgba(255,255,255,.55); border-top-color:#fff; border-radius:50%;
  animation:wz-spin .6s linear infinite; }
@keyframes wz-spin{ to{ transform:rotate(360deg); } }
/* loader del botón de búsqueda de la caja: el .img-load existe pero el CSS de la caja lo ocultaba siempre */
.rsv-buscar img.img-load:not(.ocultar){ display:inline-block !important; height:18px; vertical-align:middle; }

/* ===================== RESUMEN STICKY ===================== */
.wz-summary{ position:sticky; top:78px; }
.wz-summary__card{ background:var(--rsv-cream); border:1px solid var(--rsv-tan); border-radius:var(--wz-radius);
  padding:20px; box-shadow:0 4px 14px rgba(31,56,72,.10); }
.wz-summary__title{ font-size:16px; font-weight:800; color:var(--rsv-navy); margin:0 0 14px; }
.wz-summary__dl{ margin:0 0 14px; }
.wz-summary__row{ display:flex; justify-content:space-between; gap:10px; padding:6px 0;
  border-bottom:1px dashed var(--rsv-line); font-size:13px; }
.wz-summary__row dt{ color:var(--rsv-muted); font-weight:600; margin:0; }
.wz-summary__row dd{ color:var(--rsv-navy); font-weight:700; margin:0; text-align:right; }
.wz-summary__breakdown{ border-top:1px solid var(--rsv-tan); padding-top:12px; }
.wz-summary__line{ display:flex; justify-content:space-between; font-size:13px; color:var(--rsv-muted); padding:4px 0; }
.wz-summary__line--total{ font-size:17px; font-weight:800; color:var(--rsv-gold); border-top:1px solid var(--rsv-tan);
  margin-top:6px; padding-top:10px; }
.wz-summary__tax{ font-size:10px; color:var(--rsv-text-muted); margin:6px 0 0; }

/* ===================== MODAL DE HABITACIÓN (galería + descripción + amenidades) ===================== */
.wz-modal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; }
.wz-modal[hidden]{ display:none; }
.wz-modal__backdrop{ position:absolute; inset:0; background:rgba(31,56,72,.55); }
.wz-modal__dialog{ position:relative; background:#fff; border-radius:16px; max-width:760px; width:100%;
  max-height:90vh; overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,.3); z-index:1; }
/* En el teléfono, 90vh NO es el 90% de lo que se ve: los navegadores móviles miden vh contra el
   viewport GRANDE (el de la barra de direcciones escondida). Con la barra a la vista el diálogo sale
   más alto que la pantalla, y al estar centrado se le come el aire de arriba hasta quedar pegado al
   tope. svh mide contra el viewport CHICO (barra visible), que es el único que siempre se ve entero.
   Se deja el 90vh de arriba como respaldo para navegadores que no conocen svh. */
.wz-modal__dialog{ max-height:90svh; }
.wz-modal__close{ position:absolute; top:12px; right:14px; z-index:2; width:34px; height:34px; border-radius:50%;
  border:none; background:rgba(255,255,255,.92); color:var(--rsv-navy); font-size:22px; line-height:1; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.15); }
.wz-modal__close:hover{ background:#fff; }
/* La X del modal de HABITACIÓN va de contorno, igual que las flechas de la galería (.wz-modal__nav):
   mismo círculo de 34px, borde blanco, glifo blanco y las dos sombras que lo hacen legible sobre
   cualquier foto; al pasar el mouse se rellena, como ellas. Sólo aquí: el disco blanco de arriba lo
   siguen usando el modal legal y el de cotización, cuya X va sobre fondo blanco (un aro blanco sobre
   blanco no se vería). display:flex es para centrar el glifo &times;, que por sí solo monta alto. */
#wz_room_modal .wz-modal__close{ background:transparent; border:1.5px solid rgba(255,255,255,.85); color:#fff;
  display:flex; align-items:center; justify-content:center; padding:0 0 2px;
  text-shadow:0 1px 3px rgba(0,0,0,.55); box-shadow:0 1px 4px rgba(0,0,0,.25);
  transition:background .15s, color .15s, border-color .15s; }
#wz_room_modal .wz-modal__close:hover{ background:rgba(255,255,255,.95); color:var(--rsv-navy); border-color:#fff; text-shadow:none; }
/* Cuarto SIN fotos: el JS pone esta clase porque la galería colapsa a 0 de alto y la X deja de estar
   sobre una foto para quedar sobre el cuerpo BLANCO. Ahí el contorno blanco sería invisible, así que
   el mismo círculo se dibuja en navy. */
#wz_room_modal.wz-modal--sin-galeria .wz-modal__close{ border-color:rgba(31,56,72,.45); color:var(--rsv-navy);
  text-shadow:none; box-shadow:none; }
#wz_room_modal.wz-modal--sin-galeria .wz-modal__close:hover{ background:var(--rsv-navy); border-color:var(--rsv-navy); color:#fff; }
.wz-modal__gallery{ background:var(--rsv-cream); }
/* Carrusel del modal (2026-08-06): el visor envuelve la foto grande y ancla las flechas y el contador.
   La foto sigue siendo un solo <img> al que se le cambia el src — no un carril de slides — porque las
   fotos vienen del PMS y pueden ser muchas: así sólo se descarga la que se está viendo. El cambio se
   suaviza con una transición de opacidad en vez de un desplazamiento. */
.wz-modal__viewer{ position:relative; }
.wz-modal__main{ width:100%; height:360px; object-fit:cover; display:block; transition:opacity .18s ease; }
.wz-modal__main.is-cambiando{ opacity:.35; }
/* Flechas de contorno, no discos blancos: tapan mucho menos foto. Para que se lean igual sobre una
   imagen clara van con borde blanco y una sombra suave alrededor del glifo; al pasar el mouse sí se
   rellenan, que es cuando conviene que resalten. */
.wz-modal__nav{ position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px;
  border-radius:50%; border:1.5px solid rgba(255,255,255,.85); background:transparent; color:#fff;
  font-size:22px; line-height:1; cursor:pointer; padding:0 0 3px;
  display:flex; align-items:center; justify-content:center;
  text-shadow:0 1px 3px rgba(0,0,0,.55); box-shadow:0 1px 4px rgba(0,0,0,.25);
  transition:background .15s, color .15s, border-color .15s; }
.wz-modal__nav:hover{ background:rgba(255,255,255,.95); color:var(--rsv-navy); border-color:#fff; text-shadow:none; }
.wz-modal__nav--prev{ left:12px; }
.wz-modal__nav--next{ right:12px; }
.wz-modal__nav[hidden]{ display:none; }
.wz-modal__count{ position:absolute; right:12px; bottom:12px; background:rgba(31,56,72,.78); color:#fff;
  font-size:12px; font-weight:700; letter-spacing:.4px; padding:4px 10px; border-radius:999px; }
.wz-modal__count[hidden]{ display:none; }
.wz-modal__thumbs{ display:flex; gap:8px; padding:10px; overflow-x:auto; }
.wz-modal__thumb{ width:78px; height:56px; object-fit:cover; border-radius:8px; cursor:pointer; flex-shrink:0;
  border:2px solid transparent; opacity:.75; transition:all .15s; }
.wz-modal__thumb:hover{ opacity:1; }
.wz-modal__thumb.is-on{ border-color:var(--rsv-gold); opacity:1; }
.wz-modal__body{ padding:22px 26px 28px; }
.wz-modal__title{ font-size:23px; font-weight:800; color:var(--rsv-navy); margin:0 0 10px; }
.wz-modal__desc{ font-size:14px; color:var(--rsv-muted); line-height:1.6; margin:0 0 18px; }
/* Bloque de TARIFA por defecto dentro del modal (misma tarifa del filtrado) + botón "Ver tarifas". */
.wz-modal__rate{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:15px 0 0; padding:14px 16px; background:var(--sel-bg); border:1px solid var(--line); border-radius:12px; }
.wz-modal__rate-price{ display:flex; flex-direction:column; line-height:1.15; }
.wz-modal__rate-price .wz-room-card__price{ font-size:30px; }
.wz-modal__rate .wz-btn{ flex-shrink:0; }
.wz-modal__amen-title{ font-size:13px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  color:var(--rsv-navy); margin:0 0 10px; }
.wz-modal__amen{ font-size:13.5px; color:var(--rsv-ink); line-height:1.7; }
.wz-modal__amen ul{ margin:0; padding-left:18px; }
.wz-modal__amen-list{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:1fr 1fr; gap:7px 18px; }
.wz-modal__amen-list li{ position:relative; padding-left:20px; font-size:13.5px; color:var(--rsv-ink); line-height:1.4; }
.wz-modal__amen-list li::before{ content:"\2713"; position:absolute; left:0; top:0; color:var(--green); font-weight:700; }
.wz-rates__more{ align-self:flex-start; background:none; border:none; padding:0; cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:700; color:var(--rsv-gold); margin:2px 0; }
.wz-rates__more:hover{ color:var(--rsv-gold-dark); text-decoration:underline; }
.wz-room-card__more:hover{ color:var(--gold-deep); }
/* Móvil: separación garantizada arriba y abajo. El padding del contenedor es el aire que se quiere
   ver; el max-height del diálogo se calcula CONTRA ESE MISMO NÚMERO (2 × 22px) para que nunca se lo
   coma. Al seguir centrado, cuando el cuarto trae poco contenido el aire crece solo. */
@media (max-width:680px){ .wz-modal__main{ height:240px; }
  .wz-modal{ padding:22px 14px; }
  .wz-modal__dialog{ max-height:calc(100vh - 44px); max-height:calc(100svh - 44px); }
  /* La meta del modal (tamaño · personas · cama · vista) deja de ser un renglón con puntos: en el
     teléfono cada dato va en SU renglón, alineado a la izquierda. Son dos cajas anidadas — los tres
     primeros viven dentro de .wz-room-card__meta y la vista es hermana — así que las dos pasan a
     columna para que los cuatro queden parejos. */
  .wz-modal__meta{ flex-direction:column; align-items:flex-start; gap:8px; }
  .wz-modal__meta .wz-room-card__meta{ flex-direction:column; align-items:flex-start;
    /* !important porque la tarjeta trae gap:15px EN LÍNEA (wizard_rooms.blade.php), y un estilo
       inline le gana a la hoja: sin esto los tres primeros quedarían más separados que la vista. */
    gap:8px !important; }
  /* Los separadores "·" son para una fila; en columna saldrían como renglones sueltos con un punto. */
  .wz-modal__meta .wz-room-card__sep{ display:none; }
  .wz-modal__meta .wz-room-card__vista::before{ content:none; }
  /* El salto que pidió el usuario: el bloque completo se despega de la descripción. Va en el
     contenedor y no en la vista porque la vista puede no existir (cuarto sin tipo de vista) y
     entonces el último renglón sería el de la cama. */
  .wz-modal__meta{ margin-bottom:14px; }
}
/* Las dos columnas de amenidades caben de sobra en el modal (760px), pero en teléfono dejarían
   ~125px de texto por celda: ahí se vuelve una sola columna. */
@media (max-width:560px){ .wz-modal__amen-list{ grid-template-columns:1fr; } }
/* Modal "Ver detalles" del plan (extra-plan): compacto + header navy. */
.wz-plan-modal{ max-width:440px !important; }
.wz-plan-modal .wz-plan-modal__head{ margin:0; padding:20px 52px 20px 24px; background:var(--rsv-navy); color:#fff;
  font-family:var(--serif); font-weight:400; font-size:21px; letter-spacing:.2px; border-radius:16px 16px 0 0; }
.wz-plan-modal .wz-plan-modal__body{ padding:20px 24px 24px; font-size:14px; color:var(--rsv-ink); line-height:1.7; }
#wz_plan_modal .wz-modal__close{ background:rgba(255,255,255,.16); color:#fff; box-shadow:none; }
#wz_plan_modal .wz-modal__close:hover{ background:rgba(255,255,255,.3); }
/* ===== MODAL LEGAL (Aviso / Términos / Accesibilidad) — fiel al prototipo ===== */
.wz-legal-modal__dialog{ position:relative; background:#fff; max-width:640px; width:100%; max-height:82vh; overflow-y:auto; border-radius:14px; padding:36px 40px; box-shadow:0 24px 70px rgba(0,0,0,.32); }
.wz-legal-modal__head{ font-family:var(--serif); font-size:27px; color:var(--navy); font-weight:400; margin:0 0 20px; padding-right:36px; }
.wz-legal-modal__body p{ font-size:14.5px; line-height:1.8; color:#5a564d; margin:0 0 14px; }
.wz-legal-modal__body p:last-child{ margin-bottom:0; }
#wz_legal_modal .wz-modal__close{ background:none; box-shadow:none; color:var(--muted); }
#wz_legal_modal .wz-modal__close:hover{ background:#f2eee7; color:var(--navy); }
/* Botón-link legal del footer (mismo look que los otros enlaces de la barra legal) */
.wz-legal-link{ font:inherit; background:none; border:none; padding:0; margin:0; color:rgba(255,255,255,.55); cursor:pointer; }
.wz-legal-link:hover{ color:#fff; }

/* ===================== COTIZACIÓN (modal enviar cotización) ===================== */
.wz-rates__cotizar{ margin-left:auto; flex-shrink:0; white-space:nowrap; }
.wz-cot-modal__dialog{ max-width:440px; }
.wz-cot__hint{ font-size:13px; color:var(--rsv-muted); line-height:1.5; margin:0 0 16px;
  background:var(--rsv-cream); border-radius:8px; padding:10px 12px; }
.wz-cot__field{ margin-bottom:14px; }
.wz-cot__field label{ display:block; font-size:12.5px; font-weight:700; color:var(--rsv-navy); margin:0 0 5px; }
.wz-cot__field input, .wz-cot__field textarea{ width:100%; box-sizing:border-box; border:1px solid #d7dde2;
  border-radius:8px; padding:10px 12px; font:inherit; font-size:14px; color:var(--rsv-ink); background:#fff; }
.wz-cot__field input:focus, .wz-cot__field textarea:focus{ outline:none; border-color:var(--rsv-gold);
  box-shadow:0 0 0 3px rgba(193,154,89,.18); }
.wz-cot__field textarea{ resize:vertical; min-height:88px; }
.wz-cot__msg{ font-size:13px; font-weight:600; margin:0 0 14px; padding:9px 12px; border-radius:8px; }
.wz-cot__msg[hidden]{ display:none; }
.wz-cot__msg.is-error{ background:#fde8e8; color:#9b1c1c; }
.wz-cot__msg.is-ok{ background:#e6f5ea; color:#1e6b34; }
.wz-cot__msg.is-info{ background:var(--rsv-cream); color:var(--rsv-navy); }
.wz-cot__actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:6px; }
@media (max-width:680px){ .wz-rates__head{ flex-wrap:wrap; } .wz-rates__cotizar{ margin-left:auto; width:auto; font-size:13px; padding:8px 14px; } }

/* ===================== RESPONSIVE ===================== */
@media (max-width:900px){
  .wz-summary{ position:static; order:-1; margin-bottom:18px; }
  .wz-summary__card{ position:relative; }
}
@media (max-width:640px){
  .wz-filterbar{ gap:12px 16px; padding:12px 14px; }
  .wz-filterbar__count{ margin-right:0; width:100%; }
  .wz-filterbar__count::after{ display:none; }
  .wz-tax-toggle{ margin-left:0; }
}
@media (max-width:680px){
  .wz-step__label{ display:none; }
  .wz-step:not(:last-child)::after{ width:22px; margin:0 8px; }
  .wz-rate-card{ grid-template-columns:1fr; text-align:left; gap:12px; }
  .wz-rate-card__pricing{ text-align:left; }
  .wz-rates__continue, .wz-extras__continue{ justify-content:stretch; }
  .wz-rates__continue .wz-btn, .wz-extras__continue .wz-btn{ width:100%; }
}
/* Muy angosto: los círculos envuelven en rejilla centrada SIN líneas conectoras colgantes. */
@media (max-width:420px){
  .wz-stepper__list{ gap:9px 11px; }
  .wz-step:not(:last-child)::after{ display:none; }
}

/* ===================== TARIFAS: ACORDEÓN INLINE + COLUMNAS DE PLAN (Plan B) ===================== */
/* Nota: se reutilizan las subclases ya existentes .wz-rate-card__name/__benefits/__pricing/__action
   (arriba, sección TARIFAS) como contenido de cada .wz-rate-opt; aquí sólo se agrega el envoltorio
   de acordeón (.wz-rates__panel), las columnas por plan (.wz-plans/.wz-plan-col) y los acentos
   nuevos (badge verde, pill de ahorro, botón "Reservar"). Colocado DESPUÉS de .wz-btn/.wz-btn--primary
   a propósito, para que .wz-reservar gane la cascada sobre esas reglas base. */
.wz-rates{ overflow:hidden; }
/* Panel de tarifas DENTRO de la tarjeta (prototipo): fila propia a todo lo ancho, separada por una
   línea y sangrada hasta los bordes con márgenes negativos que cancelan el padding de la tarjeta. */
.wz-room-card > .wz-rates{ flex:0 0 auto; width:calc(100% + 36px); margin:0 -18px -18px; padding:20px 22px;
  border-top:1px solid var(--line); background:#FBF9F5; }
.wz-rates[hidden]{ display:none; }
.wz-rates__panel{ background:transparent; border:none; border-radius:0; padding:0; margin:0; }
.wz-royalty-toggle{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px dashed var(--line); border-radius:10px; margin-bottom:16px; font-family:var(--sans); font-size:13.5px; color:var(--ink); }
.wz-royalty-toggle__sw{ width:38px; height:22px; border-radius:999px; background:var(--line); position:relative; flex-shrink:0; }
.wz-plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:900px){ .wz-plans{ grid-template-columns:1fr; } }
/* Grupo/columna de plan: tarjeta con borde y fondo blanco para que el agrupamiento se vea. */
.wz-plan-col{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 14px; display:flex; flex-direction:column; }
.wz-plan-col__name{ font-family:var(--serif); font-size:18px; color:var(--navy); margin:0 0 4px; }
.wz-plan-col__desc{ font-size:12.5px; color:var(--muted); margin:0 0 12px; }
.wz-rate-opt{ border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:12px; }
.wz-rate-opt.is-sel{ border-color:var(--navy); background:var(--sel-bg); }
/* Radio del prototipo: SOLO las tarifas seleccionables (reservables) llevan data-wz-action. */
.wz-rate-opt[data-wz-action]{ position:relative; padding-left:44px; cursor:pointer; }
.wz-rate-opt[data-wz-action]::before{ content:""; position:absolute; left:16px; top:16px; width:18px; height:18px; border-radius:50%; border:2px solid var(--line); background:#fff; box-sizing:border-box; transition:border-color .15s ease; }
.wz-rate-opt[data-wz-action].is-sel::before{ border-color:var(--navy); }
.wz-rate-opt[data-wz-action].is-sel::after{ content:""; position:absolute; left:21px; top:21px; width:8px; height:8px; border-radius:50%; background:var(--navy); }
.wz-rate-opt[data-wz-action]:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }
.wz-rate-opt__price{ font-family:var(--serif); font-size:22px; color:var(--ink); margin:6px 0; }
.wz-rate-opt__price small{ font-family:var(--sans); font-size:12px; color:var(--muted); }
/* Columna de plan angosta (1/3 de .wz-plans): la tarjeta pierde las 3 columnas (1fr auto auto)
   y apila info -> precio -> botón a ancho completo, para no apretar/desbordar. */
.wz-plan-col .wz-rate-card{ grid-template-columns:1fr; gap:8px; }
.wz-plan-col .wz-rate-card__pricing, .wz-plan-col .wz-rate-card__action{ text-align:left; }
.wz-badge--green{ display:inline-block; background:var(--green); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.3px; padding:3px 8px; border-radius:999px; margin-left:6px; vertical-align:middle; }
/* Rectángulo con las esquinas apenas redondeadas (2026-09-07): antes era una píldora de 999px. */
.wz-save{ display:inline-block; background:var(--green); color:#fff; font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:4px; }
/* La pill de ahorro va SIEMPRE con letra blanca (gana en especificidad a `.wz-rate-card__save b{color:#1a8c3c}`). */
.wz-rate-card__save b.wz-save{ color:#fff; }
.wz-reservar{ width:100%; margin-top:8px; font:inherit; font-weight:700; font-size:15px; color:#fff; background:var(--gold); border:none; border-radius:999px; padding:12px; cursor:pointer; }
.wz-reservar:hover:not(:disabled){ background:var(--gold-deep); }
/* Modo agrupado: selección por tarjeta (radio) + botón "Reservar" AL PIE DE CADA COLUMNA (prototipo).
   El botón muestra el total POR NOCHE (grande) y debajo el TOTAL de la reserva (chico). Se oculta el botón por-tarjeta. */
.wz-rate-opt .wz-reservar{ display:none; }
/* Pie del plan (2026-09-07): el botón es UNA línea centrada que dice sólo "Reservar", sin ninguna
   cifra, y debajo la leyenda de que todavía no se cobra nada. Las cantidades y la leyenda de
   impuestos se mudaron a la tarjeta de cada tarifa. */
.wz-col-cta{ width:100%; margin-top:auto; flex-direction:row; justify-content:center; align-items:baseline;
  gap:7px; padding:12px 16px; line-height:1.2; }
.wz-col-cta__label{ font-size:15px; font-weight:700; letter-spacing:.3px; }
/* La leyenda va FUERA del botón, DEBAJO (dentro de la columna, sobre fondo blanco). */
.wz-col-cta__note{ display:block; text-align:center; margin-top:6px; font-size:11.5px; font-weight:600; color:var(--muted); }
/* Aviso de "falta elegir tarifa": bajo el botón y encima de la leyenda. */
.wz-col-error{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:8px;
  color:#B23A2E; font-size:12px; font-weight:700; }
.wz-col-error[hidden]{ display:none; }
.wz-col-error > span{ font-size:13px; }
/* Precio por noche de la tarjeta de tarifa: serif 20px como el prototipo. */
#wizard_root .wz-rate-opt__price{ font-family:var(--serif); font-weight:400; font-size:20px; color:var(--ink); line-height:1; }
#wizard_root .wz-rate-opt__price small{ font-family:var(--sans); font-size:10.5px; color:var(--muted); margin-left:5px; }
/* Total de la estancia DENTRO de la tarjeta, debajo del precio por noche y en letra chica
   ("$4,900 total · 2 noches"), como el prototipo. El blade sólo lo pinta con más de una noche. */
.wz-rate-opt__total{ margin:-4px 0 0; font-family:var(--sans); font-size:12px; font-weight:700; color:var(--navy); line-height:1.25; }
.wz-rate-opt__total small{ font-family:var(--sans); font-size:10px; font-weight:600; color:var(--muted); margin-left:4px; }
#wizard_root .wz-rate-opt__total{ margin:-4px 0 0; font-family:var(--sans); font-size:12px; font-weight:700; color:var(--navy); line-height:1.25; }
#wizard_root .wz-rate-opt__total small{ font-family:var(--sans); font-size:10px; font-weight:600; color:var(--muted); margin-left:4px; }
/* El renglón del total va con UNA sola cifra: ni tachado a su izquierda ni ahorro en dinero a su
   derecha. El tachado vive arriba, junto a la insignia del porcentaje (.wz-rate-card__save s).
   Sigue como flex por la leyenda "total · N noches" que lo acompaña. */
.wz-rate-opt__total{ display:flex; flex-wrap:wrap; align-items:baseline; }
#wizard_root .wz-rate-opt__total{ display:flex; flex-wrap:wrap; align-items:baseline; }

/* Tipografía prototipo: serif en títulos y precios */
#wizard_root .wz-panel__title,
#wizard_root .wz-rates__title,
#wizard_root .wz-rate-card__name,
#wizard_root .wz-room-card__title,
#wizard_root .wz-rate-card__total,
#wizard_root .wz-modal__title{ font-family:var(--serif); font-weight:400; }

/* ===== AJAX disponibilidad (Approach A): estados del render diferido ===== */
.wz-dispo-pending{ display:none; align-items:center; gap:8px; padding:10px 12px; color:var(--muted); font-family:var(--sans); font-size:14px; }
.wz-dispo-spin{ width:14px; height:14px; border:2px solid var(--line); border-top-color:var(--navy); border-radius:50%; display:inline-block; animation:wzDispoSpin .8s linear infinite; }
@keyframes wzDispoSpin{ to{ transform:rotate(360deg); } }
/* Mientras carga la disponibilidad: ocultar CTAs reales, mostrar el placeholder. */
[data-dispo="pending"] .wz-col-cta,
[data-dispo="pending"] .wz-col-cta__note,
[data-dispo="pending"] .wz-reservar{ display:none !important; }
[data-dispo="pending"] .wz-dispo-pending{ display:flex; }
/* Fallo tras reintentos: CTAs ocultos, mensaje + reintentar (inyectado por JS). */
.wz-dispo-error{ display:none; }
[data-dispo="error"] .wz-col-cta,
[data-dispo="error"] .wz-col-cta__note,
[data-dispo="error"] .wz-reservar{ display:none !important; }
[data-dispo="error"] .wz-dispo-pending{ display:none; }
[data-dispo="error"] .wz-dispo-error{ display:flex; align-items:center; gap:10px; padding:10px 12px; color:#b23; font-size:14px; }
.wz-dispo-retry{ background:var(--navy); color:#fff; border:0; border-radius:8px; padding:6px 12px; cursor:pointer; font-size:13px; }

/* ===== Skeleton (tarjeta de tarifa completa) mientras carga la disponibilidad ===== */
.wz-col-skeleton{ display:none; flex-direction:column; gap:10px; padding:14px 4px; }
/* Bajo pending: oculta TODO el contenido real de la columna y muestra sólo el skeleton. */
[data-dispo="pending"] .wz-plan-col > *:not(.wz-col-skeleton){ display:none !important; }
[data-dispo="pending"] .wz-col-skeleton{ display:flex; }
.wz-sk{ display:block; border-radius:8px; background:linear-gradient(90deg,#e3dcd0 25%,#f6f2ea 50%,#e3dcd0 75%); background-size:200% 100%; animation:wzShimmer 1.4s ease-in-out infinite; }
.wz-sk--title{ height:20px; width:65%; }
.wz-sk--line{ height:14px; width:90%; }
.wz-sk--price{ height:26px; width:50%; margin-top:4px; }
.wz-sk--btn{ height:44px; width:100%; border-radius:10px; margin-top:8px; }
@keyframes wzShimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
/* "Ver tarifas" (paso 1): DESHABILITADO + spinner + "Cargando…" mientras carga la disponibilidad
   (no expandible; el guard vive en el JS). font-size:0 colapsa el texto "Ver tarifas ▾"; el
   spinner (::before) y "Cargando…"/"Loading…" (::after, i18n por :lang) lo reemplazan. */
[data-dispo="pending"] .wz-ver-tarifas{ position:relative; font-size:0 !important; color:var(--muted) !important; border-color:var(--line) !important; background:#faf8f4 !important; box-shadow:none !important; pointer-events:none; cursor:default; }
[data-dispo="pending"] .wz-ver-tarifas::before{ content:''; display:inline-block; vertical-align:middle; width:14px; height:14px; margin-right:8px; border:2px solid var(--line); border-top-color:var(--navy); border-radius:50%; animation:wzDispoSpin .8s linear infinite; }
[data-dispo="pending"] .wz-ver-tarifas::after{ content:'Cargando\2026'; display:inline-block; vertical-align:middle; font-family:var(--sans); font-size:14px; font-weight:700; color:var(--muted); }
:lang(en) [data-dispo="pending"] .wz-ver-tarifas::after{ content:'Loading\2026'; }
@media (prefers-reduced-motion: reduce){ .wz-sk, [data-dispo="pending"] .wz-ver-tarifas::before{ animation:none; } }

/* ===== Móvil: topbar en dos columnas + isotipo en la barra pegada ===== */
@media (max-width:600px){
  /* Topbar navy como el prototipo (.dc.html, reglas [data-m="utilbar*"]): NO es una rejilla de dos
     columnas. Cada grupo ocupa el ancho completo, se centra y envuelve solo si no cabe, así que con
     dos elementos quedan juntos y centrados, y con uno queda centrado de verdad en la barra. */
  .wz-topbar__in{ flex-wrap:wrap; justify-content:center; text-align:center; gap:6px 10px; font-size:11px; }
  .wz-topbar__left{ justify-content:center; width:100%; gap:14px; flex-wrap:wrap; }
  .wz-topbar__right{ justify-content:center; width:100%; flex-wrap:wrap; gap:14px; }

  /* Con los grupos centrados, anclar el popover a .wz-lang lo sacaría de la pantalla. Se ancla a la
     fila completa (.wz-topbar__right pasa a ser el ancestro posicionado) para que siempre quepa. */
  .wz-lang{ position:static; }
  .wz-topbar__right{ position:relative; }
  .wz-lang-pop{ right:auto; left:0; top:calc(100% + 10px); width:min(250px, 100%); }

  /* Barra pegada en móvil: el isotipo sustituye al logo completo. */
  .wz-brandbar.is-stuck .wz-brand--con-icono .wz-brand__logo{ display:none; }
  .wz-brandbar.is-stuck .wz-brand--con-icono .wz-brand__icono{ display:block; }
}

/* ===== Menú de hamburguesa: NO tiene breakpoint fijo =====
   El objetivo es colapsar en cuanto el nav se parte en dos renglones, y ese punto NO es un ancho
   concreto: depende del idioma (los textos en inglés miden distinto), de si la pantalla lleva el pill
   "Volver al sitio" (sólo el listado) y de la fuente cargada. Por eso lo decide el script de
   partials/wz_topbar.blade.php midiendo el nav de verdad, y aquí sólo se reacciona a su clase.
   Sin JS no se colapsa nunca y queda el nav de siempre envolviendo: degradación segura. */
.wz-brandbar.wz-nav-colapsada .wz-nav{ display:none; }
.wz-brandbar.wz-nav-colapsada .wz-nav-toggle{ display:flex; }
/* La barra pasa a fila: logo a la izquierda, hamburguesa a la derecha. Antes era una columna centrada
   (logo arriba, enlaces abajo), que sin los enlaces dejaría la hamburguesa debajo del logo. */
.wz-brandbar.wz-nav-colapsada .wz-brandbar__in{ flex-direction:row; align-items:center; justify-content:space-between; gap:12px; }

/* ===================== Selección por habitación (Fase A: con candado) =====================
   Indicador "Configurando habitación N de M" arriba del listado. Sólo existe con 2+ habitaciones:
   el partial wizard_multihab no pinta nada con una sola, así que estas reglas quedan inertes.

   Diseño: la TARJETA CLARA con acento dorado del prototipo (mrLayoutDefs "Opción 3 · Tarjetas
   claras", Motor de Reservas Royal Villas.dc.html:546-563). Los valores son los del prototipo, no
   aproximaciones. (Su --teal es nuestro --navy: los dos #1F3848.) */
.wz-mh{
  background:#FBF9F5; border:1px solid var(--gold); border-radius:16px;
  padding:18px 20px; margin-bottom:22px;
  box-shadow:0 2px 12px -7px rgba(169,141,87,.4);
}
.wz-mh__head{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-bottom:13px; }
.wz-mh__pill{
  font-size:10.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  background:var(--gold); color:#fff; padding:5px 12px; border-radius:999px;
}
.wz-mh__pos{ font-family:var(--serif); font-size:19px; color:var(--navy); }
.wz-mh__chips{ display:flex; gap:10px; flex-wrap:wrap; }
/* Cuatro estados del prototipo (roomConfigChips, líneas 4000-4003 y 4015):
     pendiente : #FBF9F5  texto --muted  borde --line
     activa    : #fff     texto --teal   borde --gold
     lista     : #F2FAF5  texto --teal   borde --green
     bloqueada : #F4F1EC  texto --muted  borde --line, opacidad .6 */
.wz-mh__chip{
  appearance:none; text-align:left; font:inherit;
  background:#FBF9F5; color:var(--muted); border:1.5px solid var(--line);
  border-radius:12px; padding:9px 15px; min-width:128px; cursor:default; opacity:1;
  box-shadow:0 1px 4px -2px rgba(35,32,28,.1);
  transition:transform .12s ease, opacity .12s ease, background .12s ease, border-color .12s ease;
}
.wz-mh__chip.is-bloqueada{ background:#F4F1EC; color:var(--muted); border-color:var(--line); opacity:.6; }
.wz-mh__chip.is-lista{ background:#F2FAF5; color:var(--navy); border-color:var(--green); cursor:pointer; opacity:1; }
.wz-mh__chip.is-activa{ background:#fff; color:var(--navy); border-color:var(--gold); opacity:1; }
.wz-mh__chip.is-lista:hover{ transform:translateY(-1px); }
.wz-mh__chip-lbl{
  display:block; font-size:10px; text-transform:uppercase; letter-spacing:.08em; font-weight:800; opacity:.85;
}
/* Palomita en las confirmadas, candado en las que aún no tocan turno (igual que rc.check). */
.wz-mh__chip-check, .wz-mh__chip-lock{ display:none; margin-right:5px; }
.wz-mh__chip.is-lista .wz-mh__chip-check{ display:inline; }
.wz-mh__chip.is-bloqueada .wz-mh__chip-lock{ display:inline; }
.wz-mh__chip-room{ display:block; font-size:14px; font-weight:600; margin-top:2px; }
.wz-mh__chip-ocup{ display:block; font-size:11.5px; opacity:.8; margin-top:1px; }
/* Candado de la Fase A: las fichas no son pasos, son un resumen de las N habitaciones. No se
   pulsan, no se atenúan y no dejan el renglón vacío donde iría el nombre de la habitación. */
.wz-mh--informativo .wz-mh__chip{ cursor:default; opacity:1; }
.wz-mh--informativo .wz-mh__chip[disabled]{ pointer-events:none; }
.wz-mh--informativo .wz-mh__chip-room:empty{ display:none; }
.wz-mh__ayuda{ font-size:12.5px; color:var(--muted); margin:12px 0 0; line-height:1.5; }

/* Candado: de la 2ª habitación en adelante sólo se ve la habitación elegida, y dentro de ella sólo
   la tarifa elegida queda activa. No se ocultan las demás tarifas (el huésped debe seguir viendo
   qué eligió), se apagan. */
.wz-room-card.wz-oculta-candado{ display:none; }
.wz-rate-opt--bloqueada{ opacity:.42; pointer-events:none; filter:grayscale(.35); }

@media (max-width:700px){
  .wz-mh{ padding:15px 16px; border-radius:14px; }
  .wz-mh__pos{ font-size:17px; }
  .wz-mh__chips{ gap:8px; }
  .wz-mh__chip{ min-width:0; flex:1 1 45%; padding:8px 12px; }
}