/* =============================================================================
   The Hotel Caracas · Portal de reservas · capa de pulido visual (adaptada del portal de Plaza)

   Se carga DESPUÉS de reservas.css / reservas-responsive.css / reservas-mobile.css
   y solo toca presentación: escala tipográfica, tamaños de botón, iconos y
   movimiento. No cambia el flujo ni oculta controles, así que el asistente
   sigue funcionando igual si este archivo no llegara a cargar.

   Movimiento: solo se animan `transform` y `opacity` (los compone la GPU, sin
   recalcular layout), con duraciones cortas. Todo se apaga con
   prefers-reduced-motion.
   ============================================================================= */

:root {
    --pz-ease: cubic-bezier(.22, .8, .24, 1);
    --pz-ease-out: cubic-bezier(.16, 1, .3, 1);
    --pz-gold-ink: #141d31;          /* azul real oscuro legible sobre blanco (8:1) */
    --pz-gold-soft: rgba(31, 44, 71, .12);
    --pz-gold-line: rgba(31, 44, 71, .55);
    --pz-shadow-lift: 0 14px 30px -18px rgba(23, 32, 51, .45);
}

/* ---------------------------------------------------------------------------
   1 · Escala tipográfica
   La regla original `.btn span { font-size: 1.05rem }` iba dirigida a los
   iconos, pero agrandaba a ~17px CUALQUIER texto dentro de un botón. Lo mismo
   pasaba con la dirección del hotel y los títulos de bloque. El texto vuelve a
   heredar el tamaño de su contenedor; los iconos conservan el suyo.
   --------------------------------------------------------------------------- */
.btn span:not(.material-symbols-outlined),
.input-label span:not(.material-symbols-outlined),
.wizard-title span:not(.material-symbols-outlined),
.confirm-block-title span:not(.material-symbols-outlined),
.location-address span:not(.material-symbols-outlined),
.summary-title span:not(.material-symbols-outlined),
.summary-item-label span:not(.material-symbols-outlined),
.room-spec-item span:not(.material-symbols-outlined),
.room-amenity-badge span:not(.material-symbols-outlined),
.back-to-home span:not(.material-symbols-outlined),
.mobile-primary-action span:not(.material-symbols-outlined),
.mobile-view-details-btn span:not(.material-symbols-outlined) {
    font-size: inherit !important;
    color: inherit !important;
}
.input-label .material-symbols-outlined { font-size: .95rem !important; }
.btn .material-symbols-outlined { font-size: 1.05rem !important; }

.confirm-block-title {
    font-size: .74rem !important;
    letter-spacing: .1em !important;
    color: var(--text-primary);
}
.confirm-block-title .material-symbols-outlined { font-size: 1.05rem !important; color: var(--pz-gold-ink); }

.location-address {
    align-items: flex-start !important;
    gap: .4rem;
    font-size: .76rem !important;
    line-height: 1.45;
    white-space: normal !important;
    overflow-wrap: anywhere;
    color: var(--text-secondary);
}
.location-address .material-symbols-outlined { flex: 0 0 auto; font-size: 1rem !important; color: var(--pz-gold-ink); }
.location-address span:not(.material-symbols-outlined) { flex: 1 1 auto !important; min-width: 0; white-space: normal !important; }

/* Campos: el texto escrito se queda en 16px en pantallas táctiles (por debajo
   de eso iOS hace zoom al enfocar), pero el placeholder no dispara ese zoom y
   era lo que más "gritaba" junto a etiquetas de 9px. */
.input-field::placeholder,
.textarea-field::placeholder { font-size: .8rem; color: #9aa6b8; opacity: 1; }
.input-label { letter-spacing: .07em; }

/* El texto de los campos (y sobre todo el selector "Venezuela (+58)") iba a 16px junto
   a etiquetas de 10px. Esos 16px solo hacen falta en iPhone/iPad, donde un campo
   más pequeño provoca zoom al enfocarlo; `-webkit-touch-callout` solo existe en
   iOS, así que sirve para distinguirlo. En el resto, 14px. */
body input.input-field:not(#_),
body select.input-field:not(#_),
body textarea.input-field:not(#_),
body input[type="text"]:not(#_),
body input[type="email"]:not(#_),
body input[type="tel"]:not(#_),
body input[type="number"]:not(#_),
#c-phone-country,
#c-phone { font-size: max(13px, .875rem) !important; }
@supports (-webkit-touch-callout: none) {
    body input.input-field:not(#_),
    body select.input-field:not(#_),
    body textarea.input-field:not(#_),
    body input[type="text"]:not(#_),
    body input[type="email"]:not(#_),
    body input[type="tel"]:not(#_),
    body input[type="number"]:not(#_),
    #c-phone-country,
    #c-phone { font-size: 16px !important; }
}
#c-phone-country { font-weight: 500; color: var(--text-primary); }

#btn-toggle-guests {
    min-height: 44px;
    padding: .6rem .9rem !important;
    font-size: .68rem !important;
    letter-spacing: .08em !important;
    line-height: 1.3;
    border-radius: 10px !important;
}
#btn-toggle-guests .material-symbols-outlined { font-size: 1.1rem !important; color: var(--pz-gold-ink); }

.checkbox-label { font-size: .8rem !important; line-height: 1.4; }
[data-i18n="s4.shuttleDesc"] { font-size: .8rem !important; line-height: 1.55 !important; }

/* ---------------------------------------------------------------------------
   2 · Iconos: mismo peso visual y un "chip" dorado en los títulos de paso
   --------------------------------------------------------------------------- */
.wizard-title { gap: .55rem !important; color: var(--text-primary) !important; }
.wizard-title > .material-symbols-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 9px;
    background: var(--pz-gold-soft);
    color: var(--pz-gold-ink) !important;
    font-size: 1.12rem !important;
    flex: 0 0 auto;
}
.input-label .material-symbols-outlined,
.room-spec-item .material-symbols-outlined { color: var(--pz-gold-ink); }

/* ---------------------------------------------------------------------------
   3 · Botones: jerarquía clara, contraste AA y respuesta al toque
   El blanco sobre mostaza daba 2.2:1; el texto oscuro llega a 8:1.
   --------------------------------------------------------------------------- */
.btn,
.mobile-primary-action,
.mobile-view-details-btn,
.mobile-back-action,
.counter-btn,
.calendar-nav-btn,
.stay-plan-card,
.payment-option-card,
.lang-switch {
    -webkit-tap-highlight-color: transparent;
    transition: transform .16s var(--pz-ease), box-shadow .22s var(--pz-ease),
                background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease !important;
}
.btn { border-radius: 10px !important; }

.btn-primary:not(:disabled),
.mobile-primary-action:not(:disabled) {
    background: linear-gradient(180deg, #34466b 0%, #1f2c47 100%) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 10px 20px -14px rgba(20, 29, 49, .9);
}
.btn-primary:not(:disabled) .material-symbols-outlined,
.mobile-primary-action:not(:disabled) .material-symbols-outlined { color: #fff !important; }

.btn-secondary { border-color: var(--pz-gold-line) !important; color: var(--text-primary) !important; }

.btn:active:not(:disabled),
.mobile-primary-action:active:not(:disabled),
.mobile-view-details-btn:active,
.mobile-back-action:active,
.counter-btn:active:not(:disabled),
.calendar-nav-btn:active,
.stay-plan-card:active,
.payment-option-card:active { transform: scale(.97); }

.btn:focus-visible,
.mobile-primary-action:focus-visible,
.stay-plan-card:focus-visible,
.room-card:focus-visible,
.payment-option-card:focus-visible,
.cal-day:focus-visible {
    outline: 2px solid var(--pz-gold-ink) !important;
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 16px 26px -16px rgba(20, 29, 49, .95);
        filter: saturate(1.06);
    }
    .btn-secondary:hover { background: var(--pz-gold-soft) !important; }
}

/* ---------------------------------------------------------------------------
   4 · Tarjetas (habitación, plan, pago): foco en la elegida, sin "all .5s"
   --------------------------------------------------------------------------- */
.room-card {
    transition: transform .22s var(--pz-ease), box-shadow .25s var(--pz-ease), border-color .2s ease, background-color .2s ease !important;
    border-radius: 12px !important;
    overflow: hidden;
}
.room-card .room-card-img { transition: transform .6s var(--pz-ease-out) !important; }
.room-card.selected {
    border-color: var(--pz-gold-ink) !important;
    box-shadow: 0 0 0 1px var(--pz-gold-ink), var(--pz-shadow-lift) !important;
}
@media (hover: hover) and (pointer: fine) {
    .room-card:hover { transform: translateY(-2px); box-shadow: var(--pz-shadow-lift); }
    .room-card:hover .room-card-img { transform: scale(1.045); }
    .payment-option-card:hover { transform: translateY(-1px); border-color: var(--pz-gold-line) !important; }
}
.room-card:active { transform: scale(.992); }

.stay-plan-card { border-radius: 12px !important; }
/* `--border-color` no está definida en el portal, así que el borde original de la
   tarjeta de plan era inválido y la opción no elegida quedaba sin contorno. */
.stay-plan-card:not(.selected) { border: 1px solid var(--pz-gold-line) !important; background: #fff; }
.stay-plan-picker--top { border-bottom-color: rgba(31, 44, 71, .28) !important; border-bottom-style: solid; border-bottom-width: 1px; }
.payment-option-card { border-radius: 12px !important; }
.payment-option-card.selected { box-shadow: 0 0 0 1px var(--pz-gold-ink), 0 10px 22px -18px rgba(23, 32, 51, .6) !important; }

/* Marca de selección con un pequeño "pop" */
@keyframes pzPop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
.room-card.selected .room-select-badge,
.stay-plan-picker--top .stay-plan-card.selected::after { animation: pzPop .32s var(--pz-ease-out) both; }

/* ---------------------------------------------------------------------------
   5 · Calendario
   --------------------------------------------------------------------------- */
.cal-day {
    border-radius: 10px;
    transition: transform .14s var(--pz-ease), background-color .18s ease, color .18s ease, box-shadow .2s ease !important;
    -webkit-tap-highlight-color: transparent;
}
.cal-day:not(.disabled):not(.empty):active { transform: scale(.9); }
.cal-day.selected-start,
.cal-day.selected-end,
.cal-day.selected { animation: pzPop .28s var(--pz-ease-out) both; font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
    .cal-day:not(.disabled):not(.empty):hover { background-color: var(--pz-gold-soft); }
}

/* ---------------------------------------------------------------------------
   6 · Transición entre pasos (dirección según avance/retroceso, vía
       data-step-dir que pone reservas-polish.js; sin JS queda el avance)
   --------------------------------------------------------------------------- */
@keyframes pzStepFwd  { from { opacity: 0; transform: translate3d(22px, 0, 0); } }
@keyframes pzStepBack { from { opacity: 0; transform: translate3d(-22px, 0, 0); } }
@keyframes pzRise     { from { opacity: 0; transform: translate3d(0, 10px, 0); } }

.wizard-card.active { animation: pzStepFwd .36s var(--pz-ease-out) backwards !important; }
html[data-step-dir="back"] .wizard-card.active { animation-name: pzStepBack !important; }

/* Entrada escalonada del contenido: solo `from`, así cada elemento termina en
   SU estilo (no se pisa la opacidad de habitaciones agotadas, etc.). */
.wizard-card.active .wizard-body > * { animation: pzRise .42s var(--pz-ease-out) backwards; }
.wizard-card.active .wizard-body > *:nth-child(1) { animation-delay: .04s; }
.wizard-card.active .wizard-body > *:nth-child(2) { animation-delay: .08s; }
.wizard-card.active .wizard-body > *:nth-child(3) { animation-delay: .12s; }
.wizard-card.active .wizard-body > *:nth-child(4) { animation-delay: .16s; }
.wizard-card.active .wizard-body > *:nth-child(n+5) { animation-delay: .2s; }
.wizard-card.active .rooms-grid > .room-card { animation: pzRise .4s var(--pz-ease-out) backwards; }
.wizard-card.active .rooms-grid > .room-card:nth-child(1) { animation-delay: .1s; }
.wizard-card.active .rooms-grid > .room-card:nth-child(2) { animation-delay: .14s; }
.wizard-card.active .rooms-grid > .room-card:nth-child(3) { animation-delay: .18s; }
.wizard-card.active .rooms-grid > .room-card:nth-child(4) { animation-delay: .22s; }
.wizard-card.active .rooms-grid > .room-card:nth-child(n+5) { animation-delay: .26s; }

/* Progreso del asistente: la barra avanza con suavidad */
.step-tracker-progress { transition: width .5s var(--pz-ease-out), transform .5s var(--pz-ease-out) !important; }
.tracker-step .step-number { transition: background-color .25s ease, color .25s ease, transform .25s var(--pz-ease), box-shadow .25s ease !important; }
.tracker-step.active .step-number { transform: scale(1.06); }

/* Total: pequeño "latido" cuando cambia (clase puesta por reservas-polish.js) */
@keyframes pzBump { 0% { transform: scale(1); } 35% { transform: scale(1.08); } 100% { transform: scale(1); } }
.pz-bump { display: inline-block; animation: pzBump .34s var(--pz-ease-out); transform-origin: left center; }

/* Mención de traslados: entra con suavidad y el avión "aterriza" una vez */
@keyframes pzLand { from { opacity: 0; transform: translate3d(-8px, -6px, 0) rotate(-8deg); } }
.included-transfer svg { animation: pzLand .7s var(--pz-ease-out) .25s backwards; }
.included-transfer { border-radius: 12px !important; }

/* ---------------------------------------------------------------------------
   7 · Móvil (≤ 899px): escala compacta y barra inferior más cuidada
   --------------------------------------------------------------------------- */
@media (max-width: 899px) {
    .wizard-title { font-size: .98rem !important; letter-spacing: .01em !important; }
    .wizard-title > .material-symbols-outlined { width: 1.7rem; height: 1.7rem; font-size: 1rem !important; border-radius: 8px; }
    .wizard-subtitle { font-size: .72rem !important; line-height: 1.45 !important; }

    .input-label { font-size: .64rem !important; }
    .input-field,
    select.input-field { min-height: 42px; border-radius: 10px !important; }
    .textarea-field { min-height: 64px; }

    /* Las fechas elegidas son un <div>, no un campo: pueden ir más pequeñas sin
       provocar el zoom de iOS, y así caben en una línea. */
    #check-in-display, #check-out-display { font-size: .8rem !important; min-height: 40px; white-space: nowrap; }

    /* Paso 4: el teléfono quedaba en media fila con el país encima del número y
       descompensaba el documento. Ahora va a lo ancho, con país y número en línea,
       y el documento ocupa su propia fila. */
    #wizard-step-4 .phone-input-group,
    #wizard-step-4 .phone-input-group + .input-group { grid-column: 1 / -1 !important; }
    #wizard-step-4 .phone-input-group > div { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) !important; gap: .5rem !important; }

    .guest-title { font-size: .88rem !important; }
    .guest-desc { font-size: .7rem !important; }
    .counter-btn { border-radius: 12px !important; }

    .sum-row-lbl, .sum-row-val { font-size: .74rem !important; line-height: 1.4; }

    /* Barra inferior: el total manda, "Detalles" es secundario y el botón
       principal ocupa el espacio que sobra. */
    .mobile-summary-toggle {
        border-top: 1px solid rgba(31, 44, 71, .35) !important;
        box-shadow: 0 -12px 26px -20px rgba(15, 23, 42, .45) !important;
        backdrop-filter: saturate(160%) blur(10px);
        -webkit-backdrop-filter: saturate(160%) blur(10px);
        background: rgba(255, 255, 255, .94) !important;
        animation: pzBarIn .45s var(--pz-ease-out) .15s backwards;
    }
    /* La etiqueta real va a font-size:0 y el texto visible es su ::before. */
    .mobile-summary-label::before { font-size: .56rem !important; letter-spacing: .12em !important; color: var(--text-muted) !important; }
    .mobile-summary-cost { font-size: .98rem !important; font-weight: 700 !important; color: var(--pz-gold-ink) !important; }
    .mobile-view-details-btn {
        font-size: .58rem !important;
        letter-spacing: .08em !important;
        border-radius: 10px !important;
        border-color: rgba(31, 44, 71, .45) !important;
        color: var(--text-secondary) !important;
    }
    .mobile-view-details-btn .material-symbols-outlined { font-size: 1rem !important; }
    .mobile-primary-action { border-radius: 12px !important; font-size: .64rem !important; letter-spacing: .07em !important; }
    .mobile-primary-action .material-symbols-outlined { font-size: 1.05rem !important; }
    .mobile-primary-action:disabled { opacity: .55; }
    .mobile-back-action { border-radius: 10px !important; }
}
@keyframes pzBarIn { from { opacity: 0; transform: translate3d(0, 100%, 0); } }

/* Escritorio con poca altura: en el paso 3 mandan las habitaciones; la mención de
   traslados ya se ve en los pasos 1, 4 y 5 y en el resumen lateral. */
@media (min-width: 900px) and (max-height: 860px) {
    #wizard-step-3 .included-transfer { display: none; }
}

/* ---------------------------------------------------------------------------
   9 · Botones con acabado profesional
   Relieve sutil (luz arriba, sombra abajo), flecha en un "chip" que se desplaza
   y un destello que recorre el botón principal cuando se habilita o al pasar
   el cursor. El estado deshabilitado se distingue sin parecer roto.
   --------------------------------------------------------------------------- */
.wizard-footer .btn {
    min-height: 46px;
    padding: 0 1.1rem 0 1.3rem !important;
    border-radius: 14px !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
}
.wizard-footer .btn-secondary { padding: 0 1.3rem 0 1.05rem !important; }

.btn-primary:not(:disabled),
.mobile-primary-action:not(:disabled) {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, #34466b 0%, #1f2c47 46%, #141d31 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(20, 29, 49, .35) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(23, 32, 51, .14), 0 14px 26px -14px rgba(20, 29, 49, .8) !important;
    text-shadow: 0 1px 0 rgba(23, 32, 51, .25);
}
.btn-primary:not(:disabled)::before,
.mobile-primary-action:not(:disabled)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, .6) 50%, transparent 68%);
    transform: translate3d(-130%, 0, 0);
    animation: pzSheen 1.1s var(--pz-ease-out) .15s 1 both;   /* una vez, al habilitarse */
    pointer-events: none;
}
@keyframes pzSheen { from { transform: translate3d(-130%, 0, 0); } to { transform: translate3d(130%, 0, 0); } }

.btn-primary .material-symbols-outlined,
.mobile-primary-action .material-symbols-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    margin-left: .15rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    transition: transform .25s var(--pz-ease), background-color .2s ease;
}
.btn-secondary .material-symbols-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    margin-right: .15rem;
    border-radius: 50%;
    background: var(--pz-gold-soft);
    color: var(--pz-gold-ink) !important;
    transition: transform .25s var(--pz-ease);
}
.btn-secondary {
    background: #fff !important;
    border: 1px solid rgba(20, 29, 49, .3) !important;
    color: #0f172a !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), inset 0 -2px 0 rgba(20, 29, 49, .06);
}
.btn-primary:disabled,
.mobile-primary-action:disabled {
    background: #eef1f6 !important;
    color: #8a94a6 !important;
    border: 1px solid #dde3ec !important;
    box-shadow: none !important;
    opacity: 1 !important;
}
.btn-primary:disabled .material-symbols-outlined,
.mobile-primary-action:disabled .material-symbols-outlined { background: rgba(138, 148, 166, .16); color: #8a94a6 !important; }

@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover:not(:disabled)::before { animation: pzSheenHover .9s var(--pz-ease-out) 1 both; }
    .btn-primary:hover:not(:disabled) .material-symbols-outlined { transform: translateX(3px); background: rgba(255, 255, 255, .26); }
    .btn-secondary:hover { border-color: var(--pz-gold-ink) !important; box-shadow: 0 8px 18px -14px rgba(23, 32, 51, .7); }
    .btn-secondary:hover .material-symbols-outlined { transform: translateX(-3px); }
}
/* Nombre distinto para que el destello se repita en cada hover */
@keyframes pzSheenHover { from { transform: translate3d(-130%, 0, 0); } to { transform: translate3d(130%, 0, 0); } }
@media (max-width: 899px) {
    .mobile-primary-action .material-symbols-outlined { width: 1.4rem; height: 1.4rem; font-size: .95rem !important; }
}

/* ---------------------------------------------------------------------------
   10 · Plan colapsable + aviso de "hay más habitaciones"
   Al elegir plan (o habitación) el selector se pliega a una sola línea con
   "Cambiar", para que la lista de habitaciones suba. La píldora flotante avisa
   a quien no hace scroll de que la lista continúa. (Lógica: reservas-polish.js)
   --------------------------------------------------------------------------- */
.pz-plan-summary { display: none; }
.stay-plan-picker.is-collapsed > :not(.pz-plan-summary) { display: none !important; }
.stay-plan-picker.is-collapsed { margin-bottom: .7rem !important; padding-bottom: .7rem !important; }
.stay-plan-picker.is-collapsed .pz-plan-summary {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--pz-gold-line);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(31, 44, 71, .1), rgba(255, 255, 255, .9));
    color: var(--text-primary);
    font-family: var(--font-family);
    text-align: left;
    cursor: pointer;
    animation: pzRise .3s var(--pz-ease-out) backwards;
    -webkit-tap-highlight-color: transparent;
}
.pz-plan-summary__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 9px; background: var(--pz-gold-soft); color: var(--pz-gold-ink); }
.pz-plan-summary__icon svg { width: 1.1rem; height: 1.1rem; }
.pz-plan-summary__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.pz-plan-summary__label { font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pz-gold-ink); }
.pz-plan-summary__name { font-size: .84rem; font-weight: 600; line-height: 1.25; }
.pz-plan-summary__name small { font-weight: 500; color: var(--text-secondary); font-size: .74rem; }
.pz-plan-summary__change { flex: 0 0 auto; padding: .4rem .7rem; border: 1px solid rgba(20, 29, 49, .3); border-radius: 999px; background: #fff; color: var(--pz-gold-ink); font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.stay-plan-picker.is-collapsed ~ .included-transfer { display: none !important; }

/* Va ENCIMA de la lista, como una línea de contexto: flotando sobre las tarjetas
   se cruzaba con el nombre de una habitación. */
.pz-more-rooms {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 .5rem;
    transition: opacity .25s ease;
}
.pz-more-rooms.is-idle, .pz-more-rooms.is-fit { display: none; }
.pz-more-rooms.is-end { opacity: .45; }
.pz-more-rooms button {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .1rem;
    border: 0;
    background: transparent;
    color: var(--pz-gold-ink);
    font: 600 .68rem/1.2 var(--font-family);
    letter-spacing: .02em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.pz-more-rooms button:hover span { text-decoration: underline; }
.pz-more-rooms svg { width: .95rem; height: .95rem; animation: pzNudge 1.6s ease-in-out infinite; }
@keyframes pzNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }


/* ---------------------------------------------------------------------------
   11 · Invitados en la habitación (paso 4) y pago del 50 % (paso 5)
   --------------------------------------------------------------------------- */
.visitors-note {
    margin-top: .55rem;
    padding: .7rem .85rem;
    border: 1px solid rgba(31, 44, 71, .4);
    border-radius: 12px;
    background: rgba(31, 44, 71, .07);
    color: var(--text-secondary);
    font-size: .76rem;
    line-height: 1.5;
}
.visitors-note strong { display: block; margin-bottom: .3rem; color: var(--text-primary); font-size: .8rem; font-family: var(--font-family); }
.visitors-note ul { margin: 0; padding-left: 1.05rem; }
.visitors-note li { margin: .15rem 0; }
.visitors-note li::marker { color: var(--pz-gold-ink); }

.deposit-choice { margin: .9rem 0 1rem; padding: .85rem; border: 1px solid var(--pz-gold-line); border-radius: 14px; background: linear-gradient(135deg, rgba(31, 44, 71, .09), rgba(255, 255, 255, .9)); }
.deposit-choice .confirm-block-title { margin-bottom: .25rem; }
.deposit-choice__lead { margin: 0 0 .7rem; color: var(--text-secondary); font-size: .76rem; line-height: 1.45; }
.deposit-choice__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.deposit-option {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .75rem .8rem;
    text-align: left;
    border: 1px solid var(--pz-gold-line);
    border-radius: 12px;
    background: #fff;
    color: var(--text-primary);
    font-family: var(--font-family);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .16s var(--pz-ease), box-shadow .22s var(--pz-ease), border-color .2s ease, background-color .2s ease;
}
.deposit-option strong { font-size: .8rem; padding-right: 1.2rem; line-height: 1.25; }
.deposit-option__amount { font-size: 1.15rem; font-weight: 700; color: var(--pz-gold-ink); }
.deposit-option small { font-size: .7rem; line-height: 1.35; color: var(--text-secondary); }
.deposit-option::after { content: ""; position: absolute; top: .6rem; right: .6rem; width: .95rem; height: .95rem; border: 1.5px solid rgba(20, 29, 49, .45); border-radius: 50%; background: #fff; box-sizing: border-box; }
.deposit-option.selected { border: 2px solid var(--pz-gold-ink); background: rgba(31, 44, 71, .08); box-shadow: 0 10px 22px -18px rgba(23, 32, 51, .7); }
.deposit-option.selected::after { border-color: var(--pz-gold-ink); background: radial-gradient(circle, var(--pz-gold-ink) 0 42%, #fff 46%); animation: pzPop .32s var(--pz-ease-out) both; }
.deposit-option:active { transform: scale(.98); }
.sum-row-due .sum-row-lbl, .sum-row-due .sum-row-val { font-weight: 700 !important; color: var(--pz-gold-ink) !important; }
@media (max-width: 420px) { .deposit-choice__grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   12 · Moneda, nota de conversión y política de cancelación
   --------------------------------------------------------------------------- */
.currency-switch {
    appearance: none;
    -webkit-appearance: none;
    height: 30px;
    padding: 0 1.35rem 0 .6rem;
    border: 1px solid rgba(31, 44, 71, .55);
    border-radius: 999px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f5421' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .4rem center / .7rem;
    color: var(--pz-gold-ink);
    font: 700 .64rem/1 var(--font-family) !important;
    letter-spacing: .06em;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.currency-switch:hover, .currency-switch:focus-visible { border-color: var(--pz-gold-ink); outline: none; box-shadow: 0 0 0 3px rgba(31, 44, 71, .2); }
/* Es un control de cabecera, no un campo del formulario: no necesita los 16px de iOS */
@supports (-webkit-touch-callout: none) { .currency-switch { font-size: .64rem !important; } }
@media (max-width: 480px) { .currency-switch { height: 28px; padding-left: .5rem; font-size: .6rem !important; } }

.payment-fx-note {
    margin: .55rem 0 0;
    padding: .55rem .7rem;
    border-left: 3px solid var(--hotel-accent-gold);
    border-radius: 0 10px 10px 0;
    background: rgba(31, 44, 71, .1);
    color: var(--text-primary);
    font-size: .74rem;
    line-height: 1.5;
}
.payment-fx-note[hidden] { display: none; }
/* La explicación del método iba a 16px junto a textos de 12px */
#payment-info-title { font-size: .84rem !important; line-height: 1.35; }
#payment-info-desc { font-size: .78rem !important; line-height: 1.5 !important; }

.refund-policy {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin: .9rem 0 0;
    padding: .7rem .85rem;
    border: 1px solid rgba(16, 122, 87, .28);
    border-radius: 12px;
    background: rgba(16, 122, 87, .06);
}
.refund-policy svg { flex: 0 0 auto; width: 1.35rem; height: 1.35rem; margin-top: .1rem; color: #0f7a57; }
.refund-policy p { margin: 0; color: var(--text-secondary); font-size: .76rem; line-height: 1.5; }
.refund-policy strong { display: block; color: #0b5c42; font-size: .8rem; font-family: var(--font-family); }

/* ---------------------------------------------------------------------------
   14 · Escala fluida según la pantalla
   El portal está medido en rem. En un portátil con el sistema al 125-150 % la
   ventana equivale a ~1280x600 px y todo se veía enorme (cabían 3 habitaciones);
   en un monitor grande sobraban márgenes. La base tipográfica ahora depende del
   ancho Y del alto de la ventana, así el mismo diseño encaja en cualquier
   pantalla sin saltos.
   --------------------------------------------------------------------------- */
@media (min-width: 900px) {
    /* La escala la fija la dimensión que más limita: un monitor ancho pero bajo
       (1870×855) ya no sale con letra de monitor grande. Equivale al zoom al 90 %,
       80 % o 70 % que el huésped tenía que poner a mano. */
    html { font-size: clamp(12.5px, min(0.85vw + 1px, 1.5vh + 2px), 17px); }
}
@media (min-width: 1500px) and (min-height: 850px) {
    /* Monitores grandes: se aprovecha el ancho en vez de dejar dos franjas vacías */
    .booking-portal, main.booking-portal, .portal-container { max-width: min(1480px, 92vw) !important; }
    .step-tracker { max-width: min(1480px, 92vw) !important; }
}

/* Campos: mismo tamaño para lo escrito y para el texto de ejemplo, y el país con
   el mismo peso que el resto (antes convivían 14px, 12.8px y un seminegrita). */
.input-field::placeholder,
.textarea-field::placeholder { font-size: .84rem !important; }
#c-phone-country { font-weight: 400 !important; }
@media (max-width: 899px) {
    /* El nombre del país necesita más sitio que el número ("Estados Unidos (+1)") */
    #wizard-step-4 .phone-input-group > div { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) !important; }
    #c-phone-country { padding-right: 1.4rem !important; text-overflow: ellipsis; }

    /* Barra inferior: el total nunca debe chocar con "Detalles" */
    .mobile-summary-toggle { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, auto) !important; align-items: center !important; column-gap: .35rem !important; }
    .mobile-summary-info { min-width: 0 !important; overflow: hidden; }
    .mobile-summary-cost { font-size: .92rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
    .mobile-primary-action { min-width: 0 !important; max-width: 44vw; padding: 0 .55rem !important; white-space: normal !important; line-height: 1.15 !important; text-align: center; }
    .mobile-primary-action span:not(.material-symbols-outlined) { overflow-wrap: anywhere; }
}
@media (max-width: 400px) {
    /* En teléfonos estrechos el botón mide lo mismo, pero el rótulo "Mi reserva"
       va debajo del icono: una flecha sola no le dice nada a un huésped mayor. */
    .mobile-view-details-btn { width: 64px; padding: 0 .2rem !important; flex-direction: column; justify-content: center; gap: 0 !important; line-height: 1 !important; }
    .mobile-view-details-btn .material-symbols-outlined { font-size: .95rem !important; order: -1; }
    .mobile-view-details-btn .mobile-details-label { font-size: .5rem !important; letter-spacing: .03em !important; white-space: nowrap; text-transform: none; }
}

/* Contador de habitaciones dentro de la tarjeta elegida */
.room-qty {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .45rem;
    padding: .2rem .3rem .2rem .55rem;
    border: 1px solid var(--pz-gold-line);
    border-radius: 999px;
    background: #fff;
    animation: pzRise .28s var(--pz-ease-out) backwards;
}
.room-qty[hidden] { display: none; }
/* La caja de precio es una rejilla: el contador ocupa su propia fila completa
   (en la primera columna la ensanchaba y empujaba fuera "precio final/noche"). */
.room-qty { grid-column: 1 / -1; justify-self: start; width: max-content; max-width: 100%; }
.room-price-desc { min-width: 0; }
.room-qty__label { font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pz-gold-ink); }
.room-qty__value { min-width: 1.1rem; text-align: center; font-size: .86rem; font-weight: 700; color: var(--text-primary); }
.room-qty__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(20, 29, 49, .3);
    border-radius: 50%;
    background: var(--pz-gold-soft);
    color: var(--pz-gold-ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .14s var(--pz-ease), background-color .2s ease, opacity .2s ease;
}
.room-qty__btn:active:not(:disabled) { transform: scale(.9); }
.room-qty__btn:disabled { opacity: .35; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) { .room-qty__btn:hover:not(:disabled) { background: rgba(31, 44, 71, .28); } }

/* ---------------------------------------------------------------------------
   13 · Capas y ventanas en móvil: misma escala que el resto del portal
   (los títulos iban a 21-27px y los totales a 18-21px en una pantalla de 375px)
   --------------------------------------------------------------------------- */
@media (max-width: 899px) {
    .custom-modal-title { font-size: 1.05rem !important; line-height: 1.3 !important; letter-spacing: 0 !important; }
    .custom-modal-text, .custom-modal p { font-size: .8rem !important; line-height: 1.5 !important; }
    .custom-modal .btn, .custom-modal-cancel, .custom-modal button { font-size: .68rem !important; letter-spacing: .08em !important; min-height: 44px; }
    .custom-modal { border-radius: 18px !important; }

    .success-title { font-size: 1.3rem !important; line-height: 1.2 !important; }
    .success-overlay-title { font-size: .84rem !important; }
    .success-badge-code { font-size: 1.15rem !important; letter-spacing: .08em !important; }
    #success-overlay p, #success-overlay li { font-size: .8rem !important; line-height: 1.5 !important; }
    #success-overlay .btn { font-size: .68rem !important; }

    .mobile-summary-title { font-size: 1rem !important; }
    .summary-total-label { font-size: .9rem !important; }
    .summary-total-price { font-size: 1.15rem !important; }
    .summary-item-label, .summary-item-value { font-size: .76rem !important; }
    .summary-price-row-custom, .summary-price-row-custom span { font-size: .76rem !important; }

    .loading-status-text { font-size: .9rem !important; }
    .reservation-boot-title { font-size: 1.25rem !important; }
    .reservation-boot-action { font-size: .8rem !important; }
    #recommended-combo-price { font-size: .9rem !important; }
    .lightbox-caption { font-size: .8rem !important; }
}

/* Anchos intermedios (móvil apaisado / tablet, 520–899px): las celdas del
   calendario eran cuadradas, así que a 730px medían 82px de alto, el calendario
   pasaba de 400px y la barra inferior tapaba la última semana. Altura fija y la
   barra pasa a ser un "dock" centrado, más bajo y sin ocupar todo el ancho. */
@media (min-width: 520px) and (max-width: 899px) {
    .cal-day { aspect-ratio: auto !important; height: 46px !important; min-height: 0 !important; }
    .mobile-summary-toggle {
        left: 0 !important;
        right: 0 !important;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        width: min(560px, calc(100% - 24px)) !important;
        margin-inline: auto !important;
        min-height: 54px !important;
        padding: .4rem .6rem !important;
        border: 1px solid rgba(31, 44, 71, .4) !important;
        border-radius: 16px !important;
        box-shadow: 0 18px 38px -22px rgba(15, 23, 42, .55) !important;
    }
}
/* Teléfonos: barra algo más baja para que robe menos pantalla */
@media (max-width: 519px) {
    .mobile-summary-toggle { min-height: 56px !important; padding-top: .35rem !important; padding-bottom: calc(.35rem + env(safe-area-inset-bottom, 0px)) !important; }
    .mobile-primary-action, .mobile-view-details-btn, .mobile-back-action { min-height: 42px !important; }
}

/* Hoja "Detalle de tu estancia": salida con nombre propio en vez de una X */
.mobile-summary-close--text {
    display: inline-flex !important;
    align-items: center;
    gap: .3rem;
    width: auto !important;
    height: auto !important;
    min-height: 36px;
    padding: .45rem .8rem !important;
    border: 1px solid var(--pz-gold-line) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--pz-gold-ink) !important;
    font: 700 .62rem/1 var(--font-family) !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}
.mobile-summary-close--text span:not(.material-symbols-outlined) { font-size: inherit !important; color: inherit !important; }
.mobile-summary-close--text .material-symbols-outlined { font-size: .95rem !important; color: inherit !important; }
.mobile-summary-continue {
    display: flex !important;
    width: 100%;
    min-height: 46px;
    margin-top: .9rem;
    font-size: .68rem !important;
    letter-spacing: .08em !important;
}
.mobile-summary-overlay.active .mobile-summary-modal { animation: pzSheetIn .38s var(--pz-ease-out) backwards; }
@keyframes pzSheetIn { from { opacity: 0; transform: translate3d(0, 28px, 0); } }

/* Código promocional: que no parezca obligatorio ni grite */
.promo-optional { margin: .45rem 0 0; color: var(--text-secondary); font-size: .72rem; line-height: 1.45; }
.promo-code-container { border-color: var(--pz-gold-line) !important; border-radius: 12px !important; }
#promo-code-input, #promo-code-input-mob { border-radius: 9px !important; border-color: rgba(31, 44, 71, .45) !important; }
#promo-code-input::placeholder, #promo-code-input-mob::placeholder { text-transform: none; letter-spacing: 0; font-size: .78rem; }
#btn-apply-promo, #btn-apply-promo-mob { border-radius: 9px !important; border: 1px solid var(--pz-gold-line) !important; color: var(--pz-gold-ink) !important; background: #fff !important; font-weight: 700; }

/* Pantallas muy estrechas: la etiqueta del plan con suplemento cabe en una línea */
@media (max-width: 380px) {
    .stay-plan-picker--top .stay-plan-card__price--add { font-size: .66rem !important; }
}

/* ---------------------------------------------------------------------------
   8 · Accesibilidad: sin movimiento para quien lo pide
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .wizard-card.active,
    .wizard-card.active .wizard-body > *,
    .wizard-card.active .rooms-grid > .room-card,
    .mobile-summary-toggle,
    .included-transfer svg,
    .pz-bump,
    .btn-primary:not(:disabled)::before, .mobile-primary-action:not(:disabled)::before,
    .pz-more-rooms svg, .stay-plan-picker.is-collapsed .pz-plan-summary,
    .mobile-summary-overlay.active .mobile-summary-modal,
    .cal-day.selected-start, .cal-day.selected-end, .cal-day.selected,
    .room-card.selected .room-select-badge,
    .stay-plan-picker--top .stay-plan-card.selected::after { animation: none !important; }
    .btn, .room-card, .room-card .room-card-img, .cal-day, .stay-plan-card, .payment-option-card,
    .mobile-primary-action, .step-tracker-progress { transition: none !important; }
}

/* ---------------------------------------------------------------------------
   15 · Buscador del vuelo de llegada (paso 4)
   --------------------------------------------------------------------------- */
.flight-finder { position: relative; grid-column: 1 / -1; margin-bottom: .2rem; }
.flight-finder__field { position: relative; }
.flight-finder__field svg { position: absolute; left: .7rem; top: 50%; width: 1rem; height: 1rem; transform: translateY(-50%); color: var(--pz-gold-ink); pointer-events: none; }
.flight-finder__field input { width: 100%; padding-left: 2.2rem !important; }
.flight-finder__field input::-webkit-search-cancel-button { cursor: pointer; }
.flight-finder__hint { margin: .35rem 0 0; color: var(--text-muted); font-size: .68rem; line-height: 1.4; }
.flight-finder__results {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: calc(100% - 1.45rem);
    max-height: 17rem;
    margin: 0;
    padding: .3rem;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--pz-gold-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 36px -18px rgba(15, 23, 42, .45);
    animation: pzRise .2s var(--pz-ease-out) backwards;
}
.flight-finder__results[hidden] { display: none; }
.flight-finder__results li { display: grid; gap: .1rem; padding: .5rem .6rem; border-radius: 9px; cursor: pointer; outline: none; }
.flight-finder__results li:hover, .flight-finder__results li:focus-visible { background: var(--pz-gold-soft); }
.flight-finder__results strong { font-size: .8rem; color: var(--text-primary); font-family: var(--font-family); }
.flight-finder__route { font-size: .74rem; color: var(--text-secondary); }
.flight-finder__results small { font-size: .68rem; color: var(--text-muted); }
.flight-finder__empty { cursor: default !important; color: var(--text-secondary); font-size: .76rem; }
.flight-finder__empty:hover { background: transparent !important; }
.flight-finder__other { margin-top: .2rem; border-top: 1px solid var(--line, #e5e7eb); border-radius: 0 0 9px 9px !important; color: var(--pz-gold-ink); font-size: .76rem; font-weight: 700; }

/* ---------------------------------------------------------------------------
   16 · Escala tipográfica única en móvil y tablet
   Cada bloque traía su propio clamp() y en un mismo paso convivían 8.3, 9.3,
   9.8, 10.2, 10.6, 11.2, 11.5, 11.8, 12.4, 12.8, 13.4, 13.8, 14.7 y 15.7 px.
   Aquí se reducen a cinco tamaños y nada baja de 11px (ilegible en un teléfono).
   `:not(#_)` solo sube la especificidad para ganar a los !important heredados.
   --------------------------------------------------------------------------- */
/* Los <button> y campos no heredan la familia: el precio del plan salía en Arial 800. */
body button, body select, body input, body textarea { font-family: var(--font-family); }
.stay-plan-card__price { font-weight: 700 !important; letter-spacing: .03em !important; }

/* Escritorio: la raíz es fluida (sección 14), así que cada escalón lleva un suelo
   en px: en un portátil bajo la raíz ronda 12.6px y .62rem se quedaba en 7.8px. */
:root {
    --pz-fs-micro: max(10.5px, .72rem);
    --pz-fs-small: max(11.5px, .8rem);
    --pz-fs-body: max(12.5px, .86rem);
    --pz-fs-strong: max(13.5px, .94rem);
    --pz-fs-title: max(16px, 1.22rem);
}
@media (max-width: 899px) {
    :root {
        --pz-fs-micro: 11px;
        --pz-fs-small: 12px;
        --pz-fs-body: 13px;
        --pz-fs-strong: 14px;
        --pz-fs-title: 16px;
    }
}
    /* micro: etiquetas en versalitas y datos secundarios */
    .tracker-mobile-current:not(#_),
    .calendar-weekdays > div:not(#_),
    .input-label:not(#_),
    .lang-switch__opt:not(#_),
    .room-price-desc:not(#_),
    .room-spec-item:not(#_),
    .stay-plan-card__price:not(#_),
    .payment-unavailable-note:not(#_),
    .payment-option-card .payment-option-text small:not(#_),
    .mobile-primary-action:not(#_),
    .mobile-primary-action #mobile-primary-label,
    .room-qty__label:not(#_),
    .step-label:not(#_),
    .step-number:not(#_),
    .included-note:not(#_),
    .included-tag:not(#_),
    .back-to-home-text:not(#_),
    .summary-item-label:not(#_),
    .room-amenity-badge:not(#_),
    .stay-plan-picker__eyebrow:not(#_),
    .stay-plan-picker__note:not(#_),
    .stay-plan-card__content small:not(#_),
    label[for="promo-code-input"]:not(#_) { font-size: var(--pz-fs-micro) !important; }

    /* small: subtítulos y textos de apoyo */
    .wizard-subtitle:not(#_),
    .guest-desc:not(#_),
    .tracker-mobile-label:not(#_),
    .flight-finder__hint:not(#_),
    .flight-finder__results small:not(#_),
    #c-phone-preview,
    .sum-row-lbl:not(#_),
    .sum-row-val:not(#_),
    .payment-option-card .payment-option-text strong:not(#_),
    #plan-compare-link,
    .included-transfer span:not(.material-symbols-outlined):not(#_),
    .promo-optional:not(#_),
    .payment-fx-note:not(#_),
    #btn-toggle-guests,
    .pz-more-rooms button:not(#_),
    .summary-item-value:not(#_),
    .summary-price-row-custom:not(#_),
    .summary-price-row-custom .usd-price:not(#_) { font-size: var(--pz-fs-small) !important; }

    /* body: párrafos */
    .cal-day:not(#_),
    .visitors-note li:not(#_),
    .visitors-note p:not(#_),
    .refund-policy p:not(#_),
    .refund-policy span:not(#_),
    .checkbox-label:not(#_),
    [data-i18n="s4.shuttleDesc"]:not(#_),
    #payment-info-desc,
    .deposit-choice small:not(#_),
    .included-transfer strong:not(#_),
    .visitors-note strong:not(#_),
    .refund-policy strong:not(#_) { font-size: var(--pz-fs-body) !important; }

    /* strong: nombres y títulos de tarjeta */
    .room-title:not(#_),
    .guest-title:not(#_),
    #payment-info-title,
    .stay-plan-card__content strong:not(#_),
    .flight-finder__results strong:not(#_) { font-size: var(--pz-fs-strong) !important; }

    /* title: título del paso, del plan y del mes; importes */
    .wizard-title:not(#_),
    #stay-plan-title,
    #cal-month-title,
    .room-price:not(#_),
    #mob-sum-total { font-size: var(--pz-fs-title) !important; }

    .room-price-desc:not(#_) { letter-spacing: 0 !important; }
    .pz-more-rooms button { white-space: nowrap; }

@media (max-width: 899px) {

    /* La lista de vuelos no debe quedar bajo la barra inferior fija. */
    .flight-finder__results { max-height: 42vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------------------------------------------------------------------------
   17 · Paso 5: primero cómo pagar, después el resumen
   El mapa de Google solo añadía scroll (y en móvil salía en negro): fuera del paso.
   --------------------------------------------------------------------------- */
.confirm-layout .location-map { display: none !important; }
.confirm-layout #payment-selection-block { order: 0; }
/* Mientras falte contenido por ver, la flecha del botón apunta hacia abajo. */
.mobile-primary-action.is-peek .material-symbols-outlined,
.mobile-primary-action.is-peek svg { transform: rotate(90deg); transition: transform .25s ease; }

/* ---------------------------------------------------------------------------
   18 · Reservación discreta
   Bloque opcional del paso 4: alias, código privado y canal de contacto.
   --------------------------------------------------------------------------- */
.discreet-block {
    margin-top: .35rem;
    padding: .85rem .95rem;
    border: 1px solid var(--card-border, #e2e8f0);
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}
.discreet-toggle { display: flex; align-items: flex-start; gap: .65rem; cursor: pointer; }
.discreet-toggle input { width: 18px; height: 18px; margin-top: .15rem; accent-color: var(--pz-gold-ink, #141d31); flex: 0 0 auto; }
.discreet-toggle__text { display: block; min-width: 0; }
.discreet-toggle__text strong { display: block; color: var(--text-primary); font-size: var(--pz-fs-strong); }
.discreet-toggle__text small { display: block; margin-top: .2rem; color: var(--text-secondary); font-size: var(--pz-fs-small); line-height: 1.5; }
.discreet-panel { margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed var(--card-border, #e2e8f0); }
.discreet-panel[hidden] { display: none; }
.discreet-panel__fields { display: grid; gap: .7rem; }
@media (min-width: 620px) { .discreet-panel__fields { grid-template-columns: 1fr 1fr; } }
.discreet-code {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .6rem;
    margin-top: .7rem; padding: .6rem .75rem;
    border-radius: 10px; background: #fff; border: 1px solid var(--pz-gold-soft, rgba(31, 44, 71, .18));
}
.discreet-code__label { color: var(--text-secondary); font-size: var(--pz-fs-micro); letter-spacing: .08em; text-transform: uppercase; }
.discreet-code__value { font-size: var(--pz-fs-title); font-weight: 800; letter-spacing: .12em; color: var(--pz-gold-ink, #141d31); }
.discreet-code__hint { flex: 1 1 100%; color: var(--text-secondary); font-size: var(--pz-fs-micro); line-height: 1.5; }
.discreet-rules { margin: .6rem 0 0; padding-left: 1.05rem; display: grid; gap: .25rem; }
.discreet-rules li { color: var(--text-secondary); font-size: var(--pz-fs-small); line-height: 1.5; }

/* ---------------------------------------------------------------------------
   19 · Portátiles y pantallas de poco alto (escritorio)
   Un portátil con el escalado de Windows al 150 % deja unos 590 px de alto.
   Ahí el portal se salía de la pantalla: había que hacer scroll de página para
   ver el botón "Siguiente" y el total, que es justo lo que el huésped busca.
   En un monitor grande el mismo portal cabe entero y nada se desplaza.
   La diferencia venía de una excepción en reservas-responsive.css que, por
   debajo de 720 px de alto, devolvía la página al scroll normal.
   Aquí se recupera el esquema de altura fija y lo que no entra se desplaza
   dentro de su propia caja: el asistente y el resumen lateral.
   --------------------------------------------------------------------------- */
@media (min-width: 900px) and (max-height: 880px) {
    /* Menos aire en todo el eje vertical, sin tocar los tamaños de letra. */
    .booking-portal, main.booking-portal { padding-top: .35rem !important; padding-bottom: .45rem !important; gap: .4rem !important; }
    .step-tracker { padding: .5rem .9rem !important; }
    .wizard-card { padding: .9rem 1.1rem !important; }
    .wizard-header { margin-bottom: .35rem !important; }
    .wizard-title { margin-bottom: .1rem !important; }
    .wizard-footer { padding-top: .5rem !important; margin-top: .4rem !important; }
    .calendar-month-title { margin: .15rem 0 .45rem !important; }
    .cal-day { height: 30px !important; }
    .included-transfer { padding: .5rem .7rem !important; margin-bottom: .4rem !important; }
    .summary-sidebar { padding: .9rem 1rem !important; }
    .summary-list { gap: .28rem !important; }
    .sidebar-map { min-height: 92px !important; }
    .room-card { padding: .5rem !important; }
}

/* Formato FLOW: lo activa assets/reservas-layout.js con html[data-layout="flow"]. */
@media (min-width: 900px) {
    /* También en un monitor puesto en vertical: con el esquema de altura fija las
       tarjetas se estiraban hasta abajo y quedaba media pantalla vacía. */
    /* Formato para pantallas de poco alto (portátiles, monitores pequeños).
       El esquema de altura fija dejaba una ventanita de scroll de pocos cientos de
       píxeles dentro del asistente: incómodo. Aquí la página se desplaza entera,
       con la rueda desde cualquier sitio, y lo importante se queda pegado:
       el pie con Atrás/Siguiente al borde inferior y el resumen con el total. */
    /* Solo <html> desplaza. Si <body> también lleva overflow, se convierte en su
       propio contenedor de scroll y los elementos pegajosos dejan de funcionar. */html[data-layout="flow"] { height: auto !important; min-height: 100% !important; overflow-x: hidden !important; overflow-y: auto !important; }html[data-layout="flow"] body { height: auto !important; min-height: 0 !important; overflow: visible !important; display: block !important; }html[data-layout="flow"] .booking-portal,
    html[data-layout="flow"] main.booking-portal { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; grid-template-rows: auto auto !important; align-items: stretch; }html[data-layout="flow"] .wizard-column { display: flex !important; flex-direction: column !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; }
    html[data-layout="flow"] .wizard-card.active { height: auto !important; min-height: 0 !important; max-height: none !important; flex: 1 1 auto !important; overflow: visible !important; display: flex !important; flex-direction: column !important; }
    html[data-layout="flow"] .wizard-card:not(.active) { display: none !important; }html[data-layout="flow"] .wizard-card,
    html[data-layout="flow"] .wizard-card.active { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; }html[data-layout="flow"] .wizard-body,
    html[data-layout="flow"] #wizard-step-3 .wizard-body,
    html[data-layout="flow"] #wizard-step-4 .wizard-body,
    html[data-layout="flow"] #wizard-step-5 .wizard-body { overflow: visible !important; overscroll-behavior: auto !important; max-height: none !important; height: auto !important; flex: 1 1 auto !important; }html[data-layout="flow"] main.booking-portal { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) !important; }html[data-layout="flow"] .wizard-column,
    html[data-layout="flow"] .wizard-card,
    html[data-layout="flow"] .summary-sidebar { min-width: 0; }html[data-layout="flow"] #wizard-step-3 .rooms-grid,
    html[data-layout="flow"] .rooms-grid { overflow: visible !important; max-height: none !important; height: auto !important; flex: none !important; }html[data-layout="flow"] .wizard-footer {
        position: sticky; bottom: 0; z-index: 5;
        margin: .6rem -1.1rem -.9rem !important; padding: .6rem 1.1rem .8rem !important;
        background: var(--card-bg, #fff);
        border-top: 1px solid var(--pz-gold-line);
        border-radius: 0 0 14px 14px;
        box-shadow: 0 -12px 18px -14px rgba(15, 23, 42, .35);
    }html[data-layout="flow"] .summary-sidebar { position: sticky; top: .6rem; align-self: stretch; max-height: calc(100vh - 8.75rem); overflow-y: auto !important; min-height: 0 !important; }html[data-layout="flow"] .summary-total {
        position: sticky; bottom: calc(-.9rem - 1px); z-index: 2;
        margin-top: auto;
        padding-top: .5rem; padding-bottom: .5rem;
        background: var(--card-bg, #fff);
        box-shadow: 0 -10px 12px -10px rgba(15, 23, 42, .18);
    }
    /* El mapa es decorativo: fuera, para que el total no quede lejos. */html[data-layout="flow"] .sidebar-map { display: block; flex: 1 1 auto; min-height: 0; max-height: 240px; }html[data-layout="flow"] .summary-total { margin-top: auto; }html[data-layout="flow"] .cal-day { height: 28px !important; }html[data-layout="flow"] .wizard-card { padding: .75rem 1.1rem .9rem !important; }
}

/* ---------------------------------------------------------------------------
   20 · Método de pago sin preselección
   Mientras el huésped no elige, el botón de confirmar se ve apagado y un toque
   sobre él resalta el bloque de métodos.
   --------------------------------------------------------------------------- */
#btn-confirm-whatsapp.is-locked { opacity: .55; filter: saturate(.4); box-shadow: none !important; }
#payment-selection-block.is-missing .payment-method-selector { animation: pzPayNudge .9s ease; border-radius: 14px; }
@keyframes pzPayNudge {
    0%, 100% { box-shadow: 0 0 0 0 rgba(31, 44, 71, 0); }
    30% { box-shadow: 0 0 0 4px rgba(31, 44, 71, .55); }
}
#payment-info-block[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
   21 · Paso 2: mascotas e invitados
   No ocupan plaza en la habitación; se separan de adultos y niños con una línea.
   --------------------------------------------------------------------------- */
.guest-row--extra { border-top: 1px dashed var(--card-border, #e2e8f0); }
.guest-row:not(.guest-row--extra) + .guest-row--extra { margin-top: .35rem; padding-top: .8rem; border-top-style: solid; }
.visitors-block[hidden], .checkbox-label[hidden], #c-visitors[hidden], label[for="c-visitors"][hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
   22 · Paso 4: el realce sigue al dato que falta
   El teléfono tenía un fondo propio y atraía la primera mirada. Ahora ningún
   campo lo lleva fijo: lo lleva el primero que falta (lógica: guideField en
   reservas.html) y se va moviendo conforme el huésped completa el formulario.
   --------------------------------------------------------------------------- */
#panel-basic-details .phone-input-group {
    padding: 0 !important;
    border-color: transparent !important;
    background: transparent !important;
}
#panel-basic-details .input-group { position: relative; border-radius: 12px; transition: background .28s ease, box-shadow .28s ease, padding .28s ease; }
#panel-basic-details .input-group.is-guide {
    padding: .7rem .8rem .55rem !important;
    margin-left: -.8rem; margin-right: -.8rem;
    background: linear-gradient(135deg, rgba(31, 44, 71, .13), rgba(255, 255, 255, .95));
    box-shadow: inset 0 0 0 1px rgba(31, 44, 71, .55), 0 10px 24px -18px rgba(23, 32, 51, .5);
    animation: pzGuideIn .32s var(--pz-ease-out) both;
}
#panel-basic-details .input-group.is-guide .input-label { color: var(--pz-gold-ink); }
#panel-basic-details .input-group.is-guide .input-label[data-guide]::after {
    content: attr(data-guide);
    margin-left: .55rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: var(--pz-gold-ink);
    color: #fff;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    vertical-align: middle;
}
@keyframes pzGuideIn { from { opacity: .4; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (max-width: 899px) {
    #panel-basic-details .input-group.is-guide { margin-left: -.45rem; margin-right: -.45rem; padding: .55rem .45rem .45rem !important; }
}
@media (prefers-reduced-motion: reduce) { #panel-basic-details .input-group.is-guide { animation: none; } }

/* ---------------------------------------------------------------------------
   23 · Plan de estancia compacto
   El selector ocupaba casi media pantalla del móvil y empujaba las habitaciones.
   Ahora es una fila: título a la izquierda y dos opciones tipo píldora.
   --------------------------------------------------------------------------- */
.stay-plan-picker--top { margin-top: .4rem !important; padding-top: .55rem !important; padding-bottom: .55rem !important; margin-bottom: .55rem !important; border-top: 0 !important; }
.stay-plan-picker--top:not(.is-collapsed) { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.stay-plan-picker--top .stay-plan-picker__head { flex: 0 0 auto; display: flex; align-items: center; gap: .6rem; margin: 0 !important; }
.stay-plan-picker--top .stay-plan-picker__eyebrow { display: none !important; }
.stay-plan-picker--top h3 { margin: 0 !important; font-size: var(--pz-fs-strong) !important; font-family: var(--font-family); font-weight: 700; }
.stay-plan-picker--top #plan-compare-link { font-size: var(--pz-fs-micro) !important; }
/* Las píldoras miden lo que mide su texto; si no caben junto al título, bajan de línea. */
.stay-plan-picker--top .stay-plan-grid { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: .45rem; }
.stay-plan-picker--top .stay-plan-card {
    display: flex !important; align-items: center; gap: .5rem;
    min-height: 0 !important; padding: .5rem .7rem !important;
    border-radius: 999px !important;
}
.stay-plan-picker--top .stay-plan-card__icon { font-size: 1.1rem !important; width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }
.stay-plan-picker--top .stay-plan-card__content { flex: 1 1 auto; min-width: 0; gap: .05rem !important; }
.stay-plan-picker--top .stay-plan-card { flex: 0 1 auto; }
.stay-plan-picker--top .stay-plan-card__content strong { font-size: var(--pz-fs-small) !important; line-height: 1.2; white-space: nowrap; }
.stay-plan-picker--top .stay-plan-card__content small { display: none !important; }
.stay-plan-picker--top .stay-plan-card__price { grid-column: auto; display: block; flex: 0 1 auto; margin: 0 0 0 auto; text-align: right; font-size: var(--pz-fs-micro) !important; line-height: 1.25; letter-spacing: .02em; text-transform: none; white-space: normal; }
/* El círculo de radio del diseño original se superponía al precio en la píldora:
   la elección se ve por el borde y el fondo, así que sobra. */
.stay-plan-picker--top .stay-plan-card::after { content: none !important; }
.stay-plan-picker--top .stay-plan-card.selected { box-shadow: 0 0 0 1px var(--pz-gold-ink) !important; }
.stay-plan-picker--top .stay-plan-picker__note { display: none !important; }
.stay-plan-picker--top .stay-plan-card:hover { transform: none !important; }
@media (max-width: 480px) {
    /* En un teléfono las dos píldoras no caben lado a lado sin recortar el nombre:
       van una debajo de otra, a todo el ancho, con el precio a la derecha. */
    .stay-plan-picker--top .stay-plan-grid { flex-direction: column; gap: .4rem; }
    .stay-plan-picker--top .stay-plan-card { flex: 1 1 auto; width: 100%; }
    .stay-plan-picker--top .stay-plan-card { padding: .5rem .75rem !important; border-radius: 14px !important; }
    .stay-plan-picker--top .stay-plan-card__content { flex: 1 1 55%; min-width: 0; }
    .stay-plan-picker--top .stay-plan-card__content strong { white-space: normal; }
    .stay-plan-picker--top .stay-plan-card__price { margin-left: auto; text-align: right; white-space: normal; flex: 0 1 auto; max-width: 50%; }
}

/* Registro discreto plegado: solo una pregunta hasta que el huésped la pulsa. */
.discreet-block:not(.is-open) { padding: .15rem 0 !important; border-color: transparent !important; background: transparent !important; }
.discreet-ask {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .45rem .2rem; border: 0; background: none;
    color: var(--pz-gold-ink, #141d31); font-family: var(--font-family);
    font-size: var(--pz-fs-small); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(20, 29, 49, .35); text-underline-offset: 3px;
    cursor: pointer;
}
.discreet-ask:hover { text-decoration-color: currentColor; }
.discreet-ask svg { width: 1rem; height: 1rem; flex: 0 0 auto; }
.discreet-ask[hidden], .discreet-body[hidden] { display: none !important; }

/* Registro discreto: etiquetas con la píldora de guía en la misma línea, campos
   alineados por su base y sin el desplazamiento lateral del realce. */
#panel-basic-details .discreet-block.is-guide { margin-left: 0 !important; margin-right: 0 !important; padding: .85rem .95rem !important; }
.discreet-panel__fields { align-items: end; }
.discreet-panel__fields .input-label { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin-bottom: .35rem; line-height: 1.3; }
#panel-basic-details .input-group.is-guide .discreet-panel__fields .input-label[data-guide]::after { margin-left: 0; }
.discreet-panel__fields .input-field { width: 100%; min-width: 0; }

/* ---------------------------------------------------------------------------
   24 · Datos del cliente plegados (política de poco scroll)
   --------------------------------------------------------------------------- */
#panel-basic-details.is-collapsed > .input-group:not(.discreet-block) { display: none !important; }
.basic-summary[hidden] { display: none !important; }
.basic-summary {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: .75rem;
    margin-bottom: .6rem; padding: .7rem .85rem;
    border: 1px solid var(--pz-gold-line); border-radius: 12px;
    background: linear-gradient(135deg, rgba(31, 44, 71, .08), #fff);
    animation: pzRise .3s var(--pz-ease-out) backwards;
}
.basic-summary__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.basic-summary__label { font-size: var(--pz-fs-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pz-gold-ink); }
.basic-summary__name { font-size: var(--pz-fs-strong); color: var(--text-primary); font-family: var(--font-family); }
.basic-summary__lines { font-size: var(--pz-fs-small); color: var(--text-secondary); line-height: 1.45; overflow-wrap: anywhere; }
.basic-summary__edit {
    flex: 0 0 auto; padding: .45rem .8rem;
    border: 1px solid rgba(20, 29, 49, .35); border-radius: 999px; background: #fff;
    color: var(--pz-gold-ink); font-family: var(--font-family); font-size: var(--pz-fs-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    cursor: pointer;
}
.basic-summary__edit:hover { background: var(--pz-gold-soft); }

/* ---------------------------------------------------------------------------
   25 · Portal de grupos y empresas (reservascorporativas.html)
   --------------------------------------------------------------------------- */
.corp-switch { display: inline-flex; align-items: center; align-self: center; color: var(--pz-gold-ink); font-size: var(--pz-fs-small); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(20, 29, 49, .35); text-underline-offset: 3px; }
.corp-switch:hover { text-decoration-color: currentColor; }
@media (max-width: 899px) { .corp-switch { display: block; margin: .2rem 0 .6rem; text-align: center; } }
.corp-block { margin-bottom: .3rem; padding: .85rem .95rem; border: 1px solid var(--pz-gold-line); border-radius: 14px; background: linear-gradient(135deg, rgba(31, 44, 71, .09), #fff); }
.corp-block__grid { display: grid; gap: .7rem; }
.corp-block__grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.corp-block .input-group { margin: 0 !important; }
#panel-basic-details .corp-block .input-group.is-guide { margin: 0 !important; padding: .45rem .55rem .35rem !important; }
.corp-block .input-label { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; line-height: 1.3; }
#panel-basic-details .corp-block .input-group.is-guide .input-label[data-guide]::after { margin-left: 0; }
.corp-block .input-field { width: 100%; min-width: 0; }
.corp-pay-note { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .6rem; padding: .6rem .8rem; border-radius: 10px; background: var(--pz-gold-soft); color: var(--text-primary); font-size: var(--pz-fs-small); line-height: 1.5; }
.corp-pay-note .material-symbols-outlined { font-size: 1.05rem !important; color: var(--pz-gold-ink); flex: 0 0 auto; }
.extra-stays { margin-bottom: .6rem; }
.extra-stays__hint { margin: .2rem 0 .6rem; color: var(--text-secondary); font-size: var(--pz-fs-small); line-height: 1.5; }
.extra-stays__list { display: grid; gap: .55rem; }
.extra-stay {
    position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .6rem;
    padding: .7rem 2.4rem .7rem .8rem; border: 1px solid var(--pz-gold-line); border-radius: 12px; background: #fff;
    animation: pzRise .28s var(--pz-ease-out) backwards;
}
@media (min-width: 640px) { .extra-stay { grid-template-columns: 1.1fr 1.1fr .8fr .9fr; } .extra-stay .extra-stay__note { grid-column: 1 / -1; } }
.extra-stay label { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.extra-stay label span { font-size: var(--pz-fs-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.extra-stay .input-field { width: 100%; min-width: 0; padding: .45rem .5rem !important; font-size: max(13px, .85rem) !important; }
.extra-stay.is-invalid { border-color: #c0392b; box-shadow: 0 0 0 1px rgba(192, 57, 43, .35); }
.extra-stay__remove { position: absolute; top: .45rem; right: .45rem; width: 1.7rem; height: 1.7rem; border: 0; border-radius: 50%; background: var(--pz-gold-soft); color: var(--pz-gold-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.extra-stay__remove .material-symbols-outlined { font-size: 1rem !important; }
.extra-stays__add { display: inline-flex; align-items: center; gap: .35rem; margin-top: .6rem; padding: .5rem .85rem; border: 1px dashed rgba(20, 29, 49, .45); border-radius: 999px; background: #fff; color: var(--pz-gold-ink); font-family: var(--font-family); font-size: var(--pz-fs-small); font-weight: 700; cursor: pointer; }
.extra-stays__add:hover { background: var(--pz-gold-soft); }
.extra-stays__add .material-symbols-outlined { font-size: 1.05rem !important; }

/* ---------------------------------------------------------------------------
   26 · Escritorio angosto (900–1199 px): el resumen se pliega como en el móvil
   Con dos columnas el asistente quedaba en ~600 px y los formularios apretados.
   Aquí la columna "Tu reservación" desaparece y en su lugar hay una barra
   inferior con el total y el botón "Mi reserva", que abre la misma hoja del
   móvil. Los botones Atrás/Siguiente siguen en el pie del asistente.
   --------------------------------------------------------------------------- */
/* Formato NARROW: lo activa assets/reservas-layout.js con html[data-layout="narrow"]. */
@media (min-width: 900px) {html[data-layout="narrow"] main.booking-portal,
    html[data-layout="narrow"] .booking-portal { grid-template-columns: minmax(0, 1fr) !important; padding-bottom: calc(var(--booking-mobile-bar-h, 62px) + .8rem) !important; }html[data-layout="narrow"] .step-tracker { grid-column: 1 !important; }html[data-layout="narrow"] .wizard-column { grid-column: 1 !important; }html[data-layout="narrow"] .summary-sidebar { display: none !important; }html[data-layout="narrow"] .mobile-summary-toggle {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center;
        gap: .6rem;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
        min-height: var(--booking-mobile-bar-h, 62px);
        margin: 0 !important; padding: .45rem clamp(1rem, 4vw, 2.5rem) !important;
        border-radius: 0 !important; border-width: 1px 0 0 !important;
        background: rgba(255, 255, 255, .96) !important; backdrop-filter: blur(12px);
        box-shadow: 0 -12px 24px -16px rgba(15, 23, 42, .35);
        cursor: default;
    }html[data-layout="narrow"] .mobile-summary-toggle .mobile-back-action,
    html[data-layout="narrow"] .mobile-summary-toggle .mobile-primary-action { display: none !important; }html[data-layout="narrow"] .mobile-summary-info { display: flex !important; flex-direction: row !important; align-items: baseline; gap: .6rem; }html[data-layout="narrow"] .mobile-view-details-btn { display: inline-flex !important; width: auto; padding: .55rem 1rem !important; flex-direction: row; gap: .4rem !important; }html[data-layout="narrow"] .mobile-view-details-btn .mobile-details-label { position: static; width: auto; height: auto; clip: auto; font-size: var(--pz-fs-micro) !important; }html[data-layout="narrow"] .mobile-summary-overlay.active { display: flex !important; }
    /* El pie del asistente se pega justo encima de la barra. */html[data-layout="narrow"] .wizard-footer { position: sticky; bottom: calc(var(--booking-mobile-bar-h, 62px) - 1px); z-index: 5; margin: .6rem -1.1rem -.9rem !important; padding: .6rem 1.1rem .8rem !important; background: var(--card-bg, #fff); border-top: 1px solid var(--pz-gold-line); border-radius: 0 0 14px 14px; box-shadow: 0 -12px 18px -14px rgba(15, 23, 42, .35); }
    /* En este ancho la página desplaza entera, haya el alto que haya. */html[data-layout="narrow"] { height: auto !important; min-height: 100% !important; overflow-x: hidden !important; overflow-y: auto !important; }html[data-layout="narrow"] body { height: auto !important; min-height: 0 !important; overflow: visible !important; display: block !important; }html[data-layout="narrow"] .booking-portal,
    html[data-layout="narrow"] main.booking-portal { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; grid-template-rows: auto auto !important; }html[data-layout="narrow"] .wizard-column,
    html[data-layout="narrow"] .wizard-card,
    html[data-layout="narrow"] .wizard-card.active { height: auto !important; min-height: 0 !important; max-height: none !important; flex: none !important; overflow: visible !important; }html[data-layout="narrow"] .wizard-card,
    html[data-layout="narrow"] .wizard-card.active { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; }html[data-layout="narrow"] .wizard-body,
    html[data-layout="narrow"] #wizard-step-3 .wizard-body,
    html[data-layout="narrow"] #wizard-step-4 .wizard-body,
    html[data-layout="narrow"] #wizard-step-5 .wizard-body { overflow: visible !important; overscroll-behavior: auto !important; max-height: none !important; height: auto !important; flex: none !important; }html[data-layout="narrow"] #wizard-step-3 .rooms-grid,
    html[data-layout="narrow"] .rooms-grid { overflow: visible !important; max-height: none !important; height: auto !important; flex: none !important; }
}

/* La línea de progreso del rastreador se salía 23 px por la derecha en el paso 5. */
.step-tracker { overflow: hidden; }
.tracker-progress { max-width: 100% !important; }

/* ---------------------------------------------------------------------------
   27 · Paso 5: intención (formalizar / cotización / solo probar)
   --------------------------------------------------------------------------- */
.intent-block { margin-bottom: .8rem; }
.intent-grid { display: grid; gap: .55rem; }
.intent-grid[hidden] { display: none !important; }
@media (min-width: 760px) { .intent-grid { grid-template-columns: 1.25fr 1fr 1fr; } }
.intent-card {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .8rem .9rem; text-align: left;
    border: 1px solid var(--pz-gold-line); border-radius: 14px; background: #fff;
    color: var(--text-primary); font-family: var(--font-family); cursor: pointer;
    transition: transform .16s var(--pz-ease), box-shadow .22s var(--pz-ease), border-color .2s ease;
}
.intent-card:hover { border-color: var(--pz-gold-ink); box-shadow: var(--pz-shadow-lift); transform: translateY(-1px); }
.intent-card--book { border-color: var(--pz-gold-ink); background: linear-gradient(135deg, rgba(31, 44, 71, .14), #fff); }
.intent-card__icon { flex: 0 0 auto; font-size: 1.25rem !important; color: var(--pz-gold-ink); }
.intent-card__text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.intent-card__text strong { font-size: var(--pz-fs-strong); line-height: 1.25; }
.intent-card__text small { font-size: var(--pz-fs-small); color: var(--text-secondary); line-height: 1.45; }
.intent-chosen { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; border: 1px solid var(--pz-gold-line); border-radius: 12px; background: linear-gradient(135deg, rgba(31, 44, 71, .1), rgba(255, 255, 255, .9)); }
.intent-chosen[hidden] { display: none !important; }
.intent-chosen__icon { font-size: 1.1rem !important; color: var(--pz-gold-ink); }
.intent-chosen__text { flex: 1 1 auto; font-size: var(--pz-fs-small); font-weight: 600; }
.intent-chosen__change { padding: .4rem .7rem; border: 1px solid rgba(20, 29, 49, .3); border-radius: 999px; background: #fff; color: var(--pz-gold-ink); font-family: var(--font-family); font-size: var(--pz-fs-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.intent-result { display: flex; gap: .7rem; align-items: flex-start; padding: .9rem 1rem; border: 1px solid var(--pz-gold-line); border-radius: 14px; background: #fff; animation: pzRise .3s var(--pz-ease-out) backwards; }
.intent-result[hidden] { display: none !important; }
.intent-result > .material-symbols-outlined { font-size: 1.5rem !important; color: var(--pz-gold-ink); }
.intent-result strong { display: block; font-size: var(--pz-fs-strong); }
.intent-result p { margin: .3rem 0 0; font-size: var(--pz-fs-small); color: var(--text-secondary); line-height: 1.5; }
.intent-result__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.intent-result__actions .btn { padding: .55rem .9rem !important; font-size: var(--pz-fs-micro) !important; }
.intent-result__count { display: block; margin-top: .5rem; font-size: var(--pz-fs-micro); color: var(--text-muted); }
/* Mientras no decida formalizar, nada de pagos a la vista. */
.confirm-layout.is-intent-pending #payment-selection-block,
.confirm-layout.is-intent-pending #payment-info-block,
.confirm-layout.is-intent-pending #deposit-choice,
.confirm-layout.is-intent-pending .corp-pay-note { display: none !important; }
#intent-block.is-missing .intent-grid { animation: pzPayNudge .9s ease; border-radius: 14px; }

/* Iconos en SVG (el subconjunto de Material Symbols no trae estos glifos). */
.pz-svg { width: 1.15em; height: 1.15em; flex: 0 0 auto; vertical-align: -.2em; }
.confirm-block-title .pz-svg { color: var(--pz-gold-ink); }
.intent-card__icon, .intent-chosen__icon, .intent-result__icon { display: inline-flex; flex: 0 0 auto; color: var(--pz-gold-ink); }
.intent-card__icon .pz-svg { width: 1.35rem; height: 1.35rem; }
.intent-chosen__icon .pz-svg { width: 1.1rem; height: 1.1rem; }
.intent-result__icon .pz-svg { width: 1.6rem; height: 1.6rem; }
.extra-stays__add .pz-svg, .extra-stay__remove .pz-svg { width: 1rem; height: 1rem; }
.corp-pay-note .pz-svg { width: 1.1rem; height: 1.1rem; color: var(--pz-gold-ink); margin-top: .1rem; }

/* ---------------------------------------------------------------------------
   28 · Paso 5 sereno: menos texto a la vista, bloques que se pliegan
   --------------------------------------------------------------------------- */
/* Intención: solo el título; la explicación llega como aviso al elegir. */
.intent-card__text small { display: none !important; }
.intent-card { align-items: center; padding: .7rem .85rem; }
@media (min-width: 760px) { .intent-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Método de pago plegado */
.pay-chosen { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; border: 1px solid var(--pz-gold-line); border-radius: 12px; background: linear-gradient(135deg, rgba(31, 44, 71, .1), rgba(255, 255, 255, .9)); animation: pzRise .3s var(--pz-ease-out) backwards; }
.pay-chosen[hidden] { display: none !important; }
.pay-chosen__icon { display: inline-flex; color: var(--pz-gold-ink); }
.pay-chosen__icon .pz-svg { width: 1.1rem; height: 1.1rem; }
.pay-chosen__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.pay-chosen__label { font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pz-gold-ink); }
.pay-chosen__text strong { font-size: var(--pz-fs-small); font-weight: 600; line-height: 1.25; }
.pay-chosen__text small { font-size: var(--pz-fs-micro); color: var(--text-secondary); line-height: 1.4; }
.pay-chosen__text small:empty { display: none; }
.pay-chosen__change { flex: 0 0 auto; padding: .4rem .7rem; border: 1px solid rgba(20, 29, 49, .3); border-radius: 999px; background: #fff; color: var(--pz-gold-ink); font-family: var(--font-family); font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
#payment-selection-block.is-collapsed .payment-method-selector,
#payment-selection-block.is-collapsed .payment-unavailable { display: none !important; }
#payment-selection-block.is-collapsed ~ #payment-info-block,
#payment-selection-block.is-collapsed ~ .whatsapp-info-block { display: none !important; }
#payment-selection-block.is-collapsed .confirm-block-title { display: none !important; }

/* Cancelación gratuita: una línea discreta en vez de una caja verde */
.refund-policy { display: flex !important; align-items: flex-start; gap: .5rem; padding: .55rem 0 !important; margin: .2rem 0 !important; border: 0 !important; border-top: 1px solid var(--pz-gold-line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.refund-policy svg { width: 1rem; height: 1rem; flex: 0 0 auto; color: #0b5c42; margin-top: .1rem; }
.refund-policy p { margin: 0; font-size: var(--pz-fs-small) !important; line-height: 1.45; color: var(--text-secondary); }
.refund-policy strong { display: inline !important; margin-right: .3rem; font-size: var(--pz-fs-small) !important; color: #0b5c42; }

/* Aviso flotante */
.pz-toast {
    position: fixed; left: 50%; bottom: calc(var(--booking-mobile-bar-h, 62px) + 14px); z-index: 900;
    max-width: min(92vw, 520px); padding: .7rem 1rem;
    border-radius: 12px; background: #0f172a; color: #fff;
    font-family: var(--font-family); font-size: var(--pz-fs-small); line-height: 1.45;
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5);
    opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
.pz-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
html[data-layout="fixed"] .pz-toast, html[data-layout="flow"] .pz-toast { bottom: 22px; }

/* ---------------------------------------------------------------------------
   29 · Paso 5: corregir datos / vuelo en un overlay
   --------------------------------------------------------------------------- */
.summary-edit-links { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: -.2rem 0 .5rem; }
.summary-edit-link { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .2rem; border: 0; background: none; color: var(--pz-gold-ink); font-family: var(--font-family); font-size: var(--pz-fs-small); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(20, 29, 49, .35); text-underline-offset: 3px; cursor: pointer; }
.summary-edit-link:hover { text-decoration-color: currentColor; }
.summary-edit-link .pz-svg { width: 1rem; height: 1rem; }
.edit-modal { max-width: 640px !important; width: min(96vw, 640px); padding: 1.4rem 1.4rem 1.2rem !important; text-align: left !important; max-height: 92vh; overflow-y: auto; }
.edit-modal .custom-modal-title { font-family: var(--font-family); font-size: var(--pz-fs-title) !important; color: var(--text-primary) !important; margin-bottom: .2rem !important; }
.edit-modal .custom-modal-text { font-size: var(--pz-fs-small) !important; color: var(--text-secondary) !important; margin-bottom: .9rem !important; }
.edit-modal__grid { display: grid; gap: .7rem .9rem; }
@media (min-width: 620px) { .edit-modal__grid { grid-template-columns: 1fr 1fr; } .edit-modal__field--wide { grid-column: 1 / -1; } }
.edit-modal__field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.edit-modal__field > span:first-child { font-size: var(--pz-fs-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pz-gold-ink); }
.edit-modal__field .input-field { width: 100%; min-width: 0; }
.edit-modal__phone { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: .45rem; }
.edit-modal__error { margin-top: .7rem; padding: .55rem .75rem; border-radius: 10px; background: #fdecec; color: #8a1c1c; font-size: var(--pz-fs-small); line-height: 1.45; }
.edit-modal__error[hidden] { display: none !important; }
.edit-modal__actions { position: sticky; bottom: -1.2rem; display: flex; justify-content: flex-end; gap: .6rem; margin: 1rem -1.4rem -1.2rem; padding: .75rem 1.4rem 1rem; background: #fff; border-top: 1px solid var(--pz-gold-line); }
@media (max-width: 480px) { .edit-modal { padding: 1.1rem 1rem 1rem !important; } .edit-modal__actions { margin: .8rem -1rem -1rem; padding: .6rem 1rem .8rem; } .edit-modal__actions .btn { flex: 1 1 auto; justify-content: center; } }
.edit-modal__actions .btn { padding: .6rem 1rem !important; font-size: var(--pz-fs-micro) !important; }

/* Formato flow: el contenido del asistente no se estira para rellenar la tarjeta
   (el calendario crecía y empujaba la nota de traslados fuera de la vista). */
html[data-layout="flow"] .calendar-wrapper, html[data-layout="flow"] #calendar-wrapper,
html[data-layout="flow"] .calendar-container, html[data-layout="flow"] .calendar-days,
html[data-layout="flow"] .rooms-grid, html[data-layout="flow"] #rooms-grid,
html[data-layout="flow"] .guests-container, html[data-layout="flow"] .confirm-layout { flex: 0 0 auto !important; min-height: 0 !important; }
html[data-layout="flow"] .wizard-body { justify-content: flex-start !important; }
html[data-layout="flow"] .sidebar-map { max-height: 160px; }

/* ---------------------------------------------------------------------------
   30 · Uso por horas (reservaseventos.html)
   --------------------------------------------------------------------------- */
.corp-switch-group { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; align-self: center; }
.dayuse-times { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem .9rem; margin: .2rem 0 .7rem; }
.dayuse-times__field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.dayuse-times__field .input-field { width: 100%; }
.dayuse-times__hint { grid-column: 1 / -1; margin: 0; font-size: var(--pz-fs-small); color: var(--text-secondary); }
body[data-dayuse] .guests-container .guest-row:not(:first-child),
body[data-dayuse] .stay-plan-picker,
body[data-dayuse] .pz-plan-summary,
body[data-dayuse] #flight-finder,
body[data-dayuse] .flight-finder,
body[data-dayuse] #extra-options-container .form-grid > .input-group:first-child,
body[data-dayuse] .visitors-block,
body[data-dayuse] #c-arrival-info, body[data-dayuse] label[for="c-arrival-info"],
body[data-dayuse] #c-departure-info, body[data-dayuse] label[for="c-departure-info"],
body[data-dayuse] #c-pet, body[data-dayuse] #c-pet + span,
body[data-dayuse] #edit-flight-open,
body[data-dayuse] #confirm-shuttle-row,
body[data-dayuse] .discreet-block { display: none !important; }
body[data-dayuse] label:has(> #c-pet) { display: none !important; }
body[data-dayuse] label.edit-modal__field:has(> #e-arrival), body[data-dayuse] label.edit-modal__field:has(> #e-departure) { display: none !important; }

/* ---------------------------------------------------------------------------
   31 · Extras (SIM/eSIM y guía-traductor)
   --------------------------------------------------------------------------- */
.extras-block { margin: .2rem 0 .6rem; padding: .85rem .95rem; border: 1px solid var(--pz-gold-line); border-radius: 14px; background: linear-gradient(135deg, rgba(31, 44, 71, .07), #fff); }
.extras-block__hint { margin: .2rem 0 .6rem; font-size: var(--pz-fs-small); color: var(--text-secondary); line-height: 1.45; }
.extra-item { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .6rem 0; border-top: 1px dashed var(--pz-gold-line); }
.extra-item:first-of-type { border-top: 0; }
.extra-item.is-on { background: linear-gradient(90deg, rgba(31, 44, 71, .08), transparent); margin: 0 -.5rem; padding-left: .5rem; padding-right: .5rem; border-radius: 10px; }
.extra-item__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.extra-item__text strong { font-size: var(--pz-fs-strong); line-height: 1.25; }
.extra-item__text small { font-size: var(--pz-fs-small); color: var(--text-secondary); line-height: 1.4; }
.extra-item__type { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .35rem; font-size: var(--pz-fs-small); }
.extra-item__type[hidden] { display: none !important; }
.extra-item__type label { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.extra-item__type input { accent-color: var(--pz-gold-ink); }
.extra-item__side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.extra-item__price { font-size: var(--pz-fs-micro); font-weight: 700; letter-spacing: .04em; color: var(--pz-gold-ink); white-space: nowrap; }
.extra-item__counter { display: flex; align-items: center; gap: .35rem; }
.extra-item__counter .counter-btn { width: 30px !important; height: 30px !important; min-height: 0 !important; padding: 0 !important; font-size: 1rem !important; }
.extra-item__counter .counter-value { min-width: 1.4rem; text-align: center; font-size: var(--pz-fs-strong); font-weight: 700; }
@media (max-width: 480px) { .extra-item { flex-wrap: wrap; } .extra-item__side { flex-direction: row; align-items: center; gap: .6rem; width: 100%; justify-content: space-between; } }

/* ---------------------------------------------------------------------------
   32 · Paso 4B en acordeón (lógica: reservas-polish.js, 1e)
   --------------------------------------------------------------------------- */
#extra-options-container > .form-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: .45rem !important; }
.acc-item { border: 1px solid var(--pz-gold-line); border-radius: 14px; background: #fff; overflow: hidden; }
.acc-item[hidden] { display: none !important; }
.acc-item.is-open { box-shadow: 0 10px 24px -18px rgba(23, 32, 51, .5); border-color: rgba(20, 29, 49, .45); }
.acc-head { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .7rem .85rem; border: 0; background: none; text-align: left; font-family: var(--font-family); color: var(--text-primary); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.acc-head:hover { background: rgba(31, 44, 71, .06); }
.acc-head__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.acc-head__title { font-size: var(--pz-fs-strong); font-weight: 600; line-height: 1.25; }
.acc-head__summary { font-size: var(--pz-fs-small); color: var(--text-secondary); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-head svg { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; color: var(--pz-gold-ink); transition: transform .22s var(--pz-ease); }
.acc-item.is-open .acc-head svg { transform: rotate(180deg); }
.acc-body { padding: 0 .85rem .85rem; display: grid; gap: .6rem; }
.acc-body[hidden] { display: none !important; }
.acc-body > .input-group, .acc-body > .full-width { margin: 0 !important; }
.acc-body > .input-group.full-width[style*="background"] { margin: 0 !important; }
.acc-body .extras-block, .acc-body .extra-stays { margin: 0 !important; border: 0 !important; padding: 0 !important; background: transparent !important; }
.acc-body .extras-block > .input-label, .acc-body .extra-stays > .input-label { display: none !important; }
.pz-more-rooms.is-single svg { display: none; }
.acc-item.has-error { border-color: #c0392b; }
.acc-item.has-error .acc-head__summary { color: #8a1c1c; font-weight: 600; }
/* Uso por horas: sin traslado ni vuelos, se ocultan las secciones enteras. */
body[data-dayuse] .acc-item[data-acc="transfer"], body[data-dayuse] .acc-item[data-acc="flight"] { display: none !important; }
/* Uso por horas: en el resumen no hay plan, desayuno ni traslado. */
body[data-dayuse] .summary-item:has(#sum-plan), body[data-dayuse] .summary-item:has(#mob-plan),
body[data-dayuse] .summary-price-row-custom:has([data-i18n="summary.breakfast"]),
body[data-dayuse] .summary-price-row-custom:has([data-i18n="summary.transferRow"]),
body[data-dayuse] .sum-row:has(#confirm-stay-plan) { display: none !important; }
/* La rueda del ratón sobre el asistente debe mover la página: el cuerpo era un
   contenedor de scroll sin nada que desplazar y se quedaba con el evento. */
html[data-layout="flow"] .wizard-card, html[data-layout="flow"] .wizard-body, html[data-layout="flow"] .room-card,
html[data-layout="narrow"] .wizard-card, html[data-layout="narrow"] .wizard-body, html[data-layout="narrow"] .room-card { overscroll-behavior: auto !important; }
/* El mapa encoge con la columna pero el iframe conservaba su alto y se veía
   recortado (botones de zoom partidos, atribución encima del total). En
   pantallas bajas el mapa se retira: el total y el resumen van primero. */
html[data-layout="flow"] .sidebar-map iframe, html[data-layout="narrow"] .sidebar-map iframe { height: 100% !important; min-height: 0 !important; display: block; }
@media (max-height: 740px) { html[data-layout="flow"] .sidebar-map { display: none !important; } }
/* 33) Aviso final: la portada como salida principal; chat y WhatsApp, opcionales.
   Sugerencia de Gmail bajo el correo (aviso, no error). */
.success-overlay-card { position: relative; }
.success-close { position: absolute; top: .55rem; right: .55rem; width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-secondary, #5b6672); border: 1px solid var(--pz-gold-line, #bcc5d8); background: #fff; text-decoration: none; }
.success-close:hover { color: var(--text-primary, #1c2530); border-color: var(--hotel-accent-gold, #1f2c47); }
.success-close svg { width: .95rem; height: .95rem; }
.success-mail-hint { margin: -.5rem 0 0; font-size: var(--pz-fs-small, .8rem); color: var(--text-secondary, #5b6672); line-height: 1.45; }
.success-optional-label { margin: -.2rem 0 0; font-size: var(--pz-fs-micro, .76rem); color: var(--text-secondary, #5b6672); line-height: 1.4; }
.success-optional-row { display: flex; gap: .5rem; width: 100%; margin-top: -.6rem; }
.success-optional-row .btn { flex: 1 1 0; font-size: .74rem !important; padding: .55rem .5rem !important; min-height: 0 !important; letter-spacing: .04em !important; }
@media (max-width: 480px) { .success-optional-row { flex-direction: column; } }
.pz-mail-hint { margin: .4rem 0 0; font-size: var(--pz-fs-small, .8rem); color: #141d31; background: #f1f3f8; border: 1px solid #bcc5d8; border-radius: 8px; padding: .45rem .65rem; line-height: 1.4; }
.pz-mail-hint[hidden] { display: none !important; }
/* 34) Misma altura en todos los pasos (flujo): la tarjeta activa y el resumen
   llenan como mínimo hasta el borde inferior de la ventana; si un paso necesita
   más (habitaciones), crece y la página desplaza como hasta ahora. */
html[data-layout="flow"] .wizard-card.active { min-height: var(--pz-card-min, calc(100vh - 8.5rem)) !important; }
html[data-layout="flow"] .summary-sidebar { max-height: var(--pz-card-min, calc(100vh - 8.5rem)) !important; }


/* =============================================================================
   The Hotel Caracas · ajustes propios sobre la capa común con Plaza
   ============================================================================= */
/* El paso 4 de The Hotel Caracas es una cuadrícula de dos columnas (nombre | apellido).
   El realce de Plaza usaba márgenes negativos y relleno extra: invadía la
   columna vecina y desalineaba la fila. Aquí es un halo que no ocupa sitio. */
#panel-basic-details .input-group.is-guide,
#panel-basic-details .input-group.is-guide:not(#_) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    background: transparent;
    border-radius: 10px;
    box-shadow: none !important;
    outline: 1.5px solid rgba(31, 44, 71, .4);
    outline-offset: 5px;
}
/* La búsqueda por cédula conserva su recuadro; el halo va por fuera. */
#panel-basic-details #cedula-search-container.is-guide,
#panel-basic-details #cedula-search-container.is-guide:not(#_) {
    padding: 1rem !important;
    outline: none;
    border-style: solid !important;
    border-color: rgba(31, 44, 71, .45) !important;
}
#panel-basic-details .input-group.is-guide .input-label[data-guide]::after { white-space: nowrap; }

/* Conmutador de idioma (ES / EN) junto a "Ir al inicio". */
.lang-switch {
    display: inline-flex;
    align-items: center;
    padding: 2px;
    background: #fff;
    border: 1px solid rgba(31, 44, 71, .25);
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    line-height: 1;
}
.lang-switch__opt {
    padding: .3rem .55rem;
    border-radius: 999px;
    color: var(--text-secondary, #64748b);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .06em;
    transition: background-color .2s ease, color .2s ease;
}
.lang-switch__opt.is-active { background: var(--hotel-primary, #1f2c47); color: #fff; }
.lang-switch:hover { border-color: var(--hotel-accent-gold, #1f2c47); }
.lang-switch:focus-visible { outline: 2px solid var(--hotel-primary, #1f2c47); outline-offset: 2px; }

/* "Ir al inicio" se lee también en móvil (antes solo quedaba la flecha). */
@media (max-width: 899px) {
    .header-actions { gap: .45rem; }
    .back-to-home::after {
        content: attr(data-short) !important;
        font-size: .64rem !important;
        font-weight: 700;
        letter-spacing: .06em;
        white-space: nowrap;
    }
    .lang-switch__opt { padding: .26rem .45rem; font-size: .6rem; }
}
@media (max-width: 360px) {
    .back-to-home::after { content: none !important; }
}

/* Enlaces a los portales de grupos y por horas: en escritorio van en el pie del
   paso 1; en móvil ese pie se oculta, así que se muestran dentro del paso. */
.corp-switch-group--mobile { display: none !important; }
@media (max-width: 899px) {
    .corp-switch-group--mobile { display: flex !important; flex-direction: column; align-items: center; gap: .1rem; margin-top: .8rem; }
    .corp-switch-group--mobile .corp-switch { margin: .15rem 0; font-size: .74rem; }
}

/* Tarjetas de habitación limpias: las comodidades se ven en "Qué incluye". */
#wizard-step-3 .room-card .room-amenities-list,
#wizard-step-3 .room-card.selected .room-amenities-list { display: none !important; }
.room-includes-btn {
    display: inline-flex; align-items: center; gap: .1rem;
    margin-top: .35rem; padding: 0; border: 0; background: none; cursor: pointer;
    color: var(--pz-gold-ink, #141d31); font: inherit; font-size: .74rem; font-weight: 700;
    text-decoration: underline; text-decoration-color: rgba(20, 29, 49, .3); text-underline-offset: 3px;
}
.room-includes-btn .material-symbols-outlined { font-size: 1rem !important; }
.room-includes-btn:hover { text-decoration-color: currentColor; }
.room-card.unavailable .room-includes-btn { opacity: .75; }
.room-includes-modal { z-index: 2150; }
.room-includes-modal .room-includes {
    position: relative; width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
    padding: 0 !important; overflow: auto; text-align: left; border-radius: 16px;
}
.room-includes__close {
    position: absolute; top: .6rem; right: .6rem; z-index: 1; width: 2.1rem; height: 2.1rem;
    display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .92); color: #0f172a; cursor: pointer; box-shadow: 0 2px 8px rgba(15, 23, 42, .18);
}
.room-includes__img { display: block; width: 100%; height: 190px; object-fit: cover; }
.room-includes__body { padding: 1rem 1.15rem 1.15rem; }
.room-includes__title { margin: 0 0 .35rem !important; text-align: left !important; }
.room-includes__specs { display: flex; flex-wrap: wrap; gap: .3rem .9rem; color: var(--text-secondary); font-size: .8rem; }
.room-includes__specs .room-spec-item { display: inline-flex; align-items: center; gap: .25rem; }
.room-includes__label { margin: .9rem 0 .45rem; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pz-gold-ink, #141d31); }
.room-includes__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem .75rem; }
.room-includes__list li { display: flex; align-items: center; gap: .45rem; font-size: .84rem; color: var(--text-primary); }
.room-includes__list .material-symbols-outlined { font-size: 1.1rem !important; color: var(--pz-gold-ink, #141d31); }
.room-includes__note { margin: .9rem 0 0; font-size: .74rem; line-height: 1.45; color: var(--text-secondary); }
.room-includes__actions { display: flex; gap: .6rem; margin-top: 1rem; }
.room-includes__actions .btn { flex: 1 1 0; justify-content: center; min-height: 44px; }
@media (max-width: 380px) { .room-includes__list { grid-template-columns: minmax(0, 1fr); } .room-includes__img { height: 160px; } }

/* Campos: The Hotel Caracas usaba solo una línea inferior y, con las esquinas
   redondeadas, esa línea se curvaba y se veía descuadrada; al enfocar, el
   navegador añadía además su contorno grueso. Ahora todos los campos tienen
   un borde fino completo del mismo radio y un foco suave. */
.input-field,
.input-field:not(#_) {
    border: 1px solid rgba(31, 44, 71, .16) !important;
    border-radius: 10px !important;
    background-color: #f7f9fd;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.input-field:hover:not(:disabled):not(:focus):not(#_) { border-color: rgba(31, 44, 71, .32) !important; }
.input-field:focus,
.input-field:focus-visible,
.input-field:focus:not(#_) {
    outline: none !important;
    border-color: #1f2c47 !important;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(31, 44, 71, .12) !important;
}
.input-field.invalid,
.input-field.invalid:not(#_) { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, .1) !important; }
.input-field:disabled:not(#_) { background-color: #f1f4f9; border-color: rgba(31, 44, 71, .08) !important; }
/* Dentro del recuadro de la cédula, los campos van en blanco para distinguirse del fondo. */
#cedula-search-container .input-field { background-color: #fff; }
#room-includes-pick[hidden] { display: none !important; }

/* Línea de tiempo del paso 5: puntos iguales (26 px) con icono legible.
   Antes medían 18 px con iconos de 10 px: el de "Registro" parecía un círculo
   relleno sin icono. */
.reservation-timeline .timeline-dot,
.reservation-timeline .timeline-dot:not(#_) {
    width: 26px; height: 26px; margin-bottom: .4rem;
    border: 1.5px solid #cbd5e1; background: #fff; box-shadow: 0 0 0 3px #fff;
}
.reservation-timeline .timeline-dot span,
.reservation-timeline .timeline-dot span:not(#_) {
    font-size: 15px !important; line-height: 1; color: #94a3b8;
    font-variation-settings: 'FILL' 0, 'wght' 500;
}
.reservation-timeline .timeline-step.completed .timeline-dot:not(#_) {
    background: #1f2c47; border-color: #1f2c47; box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(31, 44, 71, .14);
}
.reservation-timeline .timeline-step.completed .timeline-dot span:not(#_) { color: #fff; font-variation-settings: 'FILL' 0, 'wght' 600; }
.reservation-timeline .timeline-step.active .timeline-dot:not(#_) {
    background: #fff; border-color: #1f2c47; box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(31, 44, 71, .14);
}
.reservation-timeline .timeline-step.active .timeline-dot span:not(#_) { color: #1f2c47; }
.reservation-timeline .timeline-label { font-size: .64rem; letter-spacing: .06em; }
.reservation-timeline .timeline-date { font-size: .62rem; }
/* La línea que une los puntos pasa por su centro: 8 px de relleno + 13 px de radio − 1 px. */
.reservation-timeline:not(#_) { padding-top: 8px !important; }
.reservation-timeline .timeline-line-wrapper:not(#_) { top: 20px; }

/* Código promocional: el campo se encoge para que "Aplicar" nunca se salga. */
#promo-code-input, #promo-code-input-mob { min-width: 0 !important; width: 100%; }
.promo-code-container > div { min-width: 0; }

/* Pantallas muy estrechas (iPhone SE, 320 px): el total manda. Se muestra
   completo; el botón principal se compacta y "Mi reserva" queda como icono. */
@media (max-width: 350px) {
    #mobile-summary-toggle:not(#_) { gap: .3rem !important; padding-left: .4rem !important; padding-right: .4rem !important; }
    #mobile-summary-toggle .mobile-summary-info { flex: 1 1 auto; min-width: 0; }
    #mobile-summary-toggle .mobile-summary-cost:not(#_) { font-size: .95rem !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; }
    #mobile-summary-toggle .mobile-view-details-btn:not(#_) { flex: 0 0 38px; width: 38px !important; min-width: 38px !important; padding: 0 !important; }
    #mobile-summary-toggle .mobile-details-label { display: none !important; }
    #mobile-summary-toggle .mobile-back-action:not(#_) { flex: 0 0 34px; width: 34px !important; min-width: 34px !important; }
    #mobile-summary-toggle .mobile-primary-action:not(#_) { flex: 0 1 auto; max-width: 42vw; padding: 0 .5rem !important; font-size: .58rem !important; letter-spacing: .04em !important; }
    #mobile-summary-toggle .mobile-primary-action .material-symbols-outlined { display: none !important; }
}

/* =============================================================================
   Letra escalonada en pantallas pequeñas: cuanto más estrecha, algo más pequeña,
   para que no se vea amontonado. Los campos se quedan en 16 px (con menos, el
   iPhone hace zoom al tocarlos). El resumen gana interlineado y aire.
   ============================================================================= */
@media (max-width: 400px) {
    :root:not(#_) {
        --pz-fs-micro: 10.5px;
        --pz-fs-small: 11.5px;
        --pz-fs-body: 12.5px;
        --pz-fs-strong: 13.5px;
        --pz-fs-title: 15px;
    }
    html { font-size: 15px; }
    .wizard-title:not(#_) { font-size: 1.02rem !important; }
    .wizard-subtitle:not(#_) { font-size: .78rem !important; line-height: 1.45 !important; }
    .whatsapp-summary-details .sum-row:not(#_) { font-size: .74rem !important; line-height: 1.45 !important; padding: .2rem 0 !important; gap: .9rem; align-items: flex-start; }
    .whatsapp-summary-details .sum-row-lbl { color: var(--text-secondary); flex: 0 0 auto; }
    .whatsapp-summary-details .sum-row-val { text-align: right; overflow-wrap: anywhere; }
    .confirm-block-title:not(#_) { font-size: .72rem !important; letter-spacing: .08em; }
    input.input-field:not(#_), select.input-field:not(#_), textarea.input-field:not(#_) { font-size: 16px !important; }
}
@media (max-width: 360px) {
    :root:not(#_) {
        --pz-fs-micro: 10px;
        --pz-fs-small: 11px;
        --pz-fs-body: 12px;
        --pz-fs-strong: 13px;
        --pz-fs-title: 14.5px;
    }
    html { font-size: 14.5px; }
    .whatsapp-summary-details .sum-row:not(#_) { font-size: .72rem !important; }
}
@media (max-width: 330px) {
    :root:not(#_) {
        --pz-fs-micro: 10px;
        --pz-fs-small: 10.5px;
        --pz-fs-body: 11.5px;
        --pz-fs-strong: 12.5px;
        --pz-fs-title: 14px;
    }
    html { font-size: 14px; }
}

/* Con un overlay abierto, el botón flotante de WhatsApp no se pone encima. */
body.vip-overlay-open .whatsapp-float { display: none !important; }
/* Móvil: al final de cada paso queda aire para subir lo último por encima de la
   burbuja del chat (que flota sobre la barra inferior). */
@media (max-width: 899px) {
    .wizard-card .wizard-body::after { content: ""; display: block; height: 64px; flex: 0 0 64px; }
}

/* =============================================================================
   Paso 3 en escritorio: tarjetas de habitación con foto de verdad.
   Las reglas "anti-scroll" para pantallas bajas aplastaban cada tarjeta a ~50 px
   y la foto a una tira de 130×37. Ahora cada habitación tiene su tarjeta con foto
   de 180×120; si no caben todas, la lista se desplaza (como en Plaza).
   ============================================================================= */
@media (min-width: 900px) {
    #wizard-step-3 .room-card:not(#_) {
        display: flex !important;
        align-items: stretch !important;
        min-height: 124px !important;
        height: auto !important;
        padding: 0 !important;
        gap: 0 !important;
        overflow: hidden !important;
    }
    #wizard-step-3 .room-card .room-img-container:not(#_) {
        flex: 0 0 188px !important;
        width: 188px !important;
        min-width: 188px !important;
        height: auto !important;
        min-height: 124px !important;
        max-height: none !important;
        align-self: stretch !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }
    #wizard-step-3 .room-card .room-card-img:not(#_) {
        width: 100% !important;
        height: 100% !important;
        min-height: 124px !important;
        object-fit: cover !important;
        object-position: center 55% !important;
    }
    #wizard-step-3 .room-card .room-details:not(#_) { flex: 1 1 auto; min-width: 0; padding: .85rem 1.1rem !important; display: flex; align-items: center; }
    #wizard-step-3 .room-card .room-header:not(#_) { width: 100%; align-items: center; gap: 1rem; }
    #wizard-step-3 .room-card .room-title:not(#_) { font-size: 1rem !important; margin-bottom: .3rem !important; }
    #wizard-step-3 .room-card .room-specs:not(#_) { gap: .25rem .9rem !important; }
    #wizard-step-3 .rooms-grid:not(#_) { gap: .75rem !important; }
}
@media (min-width: 1400px) {
    #wizard-step-3 .room-card .room-img-container:not(#_) { flex-basis: 210px !important; width: 210px !important; min-width: 210px !important; }
    #wizard-step-3 .room-card:not(#_), #wizard-step-3 .room-card .room-img-container:not(#_), #wizard-step-3 .room-card .room-card-img:not(#_) { min-height: 136px !important; }
}
/* Móvil: foto de la habitación un poco más grande (antes 88 px, se veía apretada). */
@media (max-width: 899px) and (min-width: 360px) {
    #wizard-step-3 .room-card:not(#_) { grid-template-columns: 108px minmax(0, 1fr) !important; min-height: 108px !important; }
    #wizard-step-3 .room-card .room-card-img:not(#_) { object-fit: cover !important; object-position: center 55% !important; }
}

/* =============================================================================
   Versión especial para pantallas muy angostas (≤ 340 px: iPhone SE, Galaxy Z
   Fold plegado a 280 px). The Hotel Caracas fijaba un ancho mínimo de 320 px y por debajo
   la página se desbordaba. Aquí todo pasa a una sola columna y se compacta.
   ============================================================================= */
@media (max-width: 340px) {
    html:not(#_), body:not(#_), html.reservation-booting body:not(#_) { min-width: 0 !important; }
    body { overflow-x: hidden; }
    /* Cabecera: logo, moneda, idioma y volver, sin el interruptor de sonido. */
    .hotel-header:not(#_) { padding-left: 8px !important; padding-right: 8px !important; gap: 6px !important; }
    .hotel-header .header-logo-img { height: 26px !important; width: auto; }
    .hotel-header .mx-sonido { display: none !important; }
    .header-actions:not(#_) { gap: 4px !important; }
    .currency-switch:not(#_) { padding: .2rem .35rem !important; font-size: .6rem !important; max-width: 64px; }
    .lang-switch__opt:not(#_) { padding: .22rem .38rem !important; font-size: .56rem !important; }
    /* Márgenes laterales más finos. */
    .booking-portal:not(#_) { padding-left: 6px !important; padding-right: 6px !important; }
    .wizard-card .wizard-header:not(#_), .wizard-card .wizard-body:not(#_) { padding-left: .65rem !important; padding-right: .65rem !important; }
    /* Fechas: una debajo de la otra. */
    .date-selection-grid:not(#_) { grid-template-columns: minmax(0, 1fr) !important; gap: .45rem !important; }
    .calendar-days .cal-day:not(#_), .calendar-weekdays > div:not(#_) { font-size: .72rem !important; }
    /* Huéspedes: contadores compactos. */
    .guest-row:not(#_) { padding: .55rem .6rem !important; gap: .4rem; }
    .guest-row .counter-btn:not(#_) { width: 34px !important; height: 34px !important; }
    .guest-row .counter-value:not(#_) { min-width: 1.4rem !important; }
    /* Habitaciones: foto arriba a todo el ancho. */
    #wizard-step-3 .room-card:not(#_) { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; min-height: 0 !important; }
    #wizard-step-3 .room-card .room-img-container:not(#_) { width: 100% !important; min-width: 0 !important; height: 128px !important; flex: 0 0 128px !important; }
    #wizard-step-3 .room-card .room-card-img:not(#_) { width: 100% !important; height: 100% !important; object-fit: cover !important; }
    #wizard-step-3 .room-card .room-details:not(#_) { padding: .6rem .7rem !important; }
    #wizard-step-3 .room-card .room-header:not(#_) { flex-direction: column !important; align-items: stretch !important; gap: .45rem !important; }
    #wizard-step-3 .room-card .room-price-info:not(#_) { align-items: flex-start !important; text-align: left !important; }
    /* Formulario: una columna. */
    #panel-basic-details:not(#_), #extra-options-container .form-grid:not(#_), .form-grid:not(#_) { grid-template-columns: minmax(0, 1fr) !important; }
    .phone-input-row:not(#_) { grid-template-columns: minmax(0, 1fr) !important; }
    .booking-config-options:not(#_) { flex-direction: column !important; }
    .corp-block__grid:not(#_), .dayuse-times:not(#_) { grid-template-columns: minmax(0, 1fr) !important; }
    /* Resumen: cada dato con su etiqueta encima, alineado a la izquierda. */
    .whatsapp-summary-details .sum-row:not(#_) { flex-direction: column !important; align-items: flex-start !important; gap: .05rem !important; padding: .3rem 0 !important; }
    .whatsapp-summary-details .sum-row-lbl:not(#_) { font-size: .62rem !important; text-transform: uppercase; letter-spacing: .06em; }
    .whatsapp-summary-details .sum-row-val:not(#_) { text-align: left !important; max-width: 100% !important; }
    /* Intención y método de pago: el botón "Cambiar" baja si no cabe. */
    .intent-chosen:not(#_), .pay-chosen:not(#_) { flex-wrap: wrap !important; }
    /* Overlays a todo el ancho útil. */
    .custom-modal-content:not(#_) { width: calc(100vw - 16px) !important; max-width: none !important; padding-left: .8rem !important; padding-right: .8rem !important; }
    .edit-modal__grid:not(#_), .room-includes__list:not(#_) { grid-template-columns: minmax(0, 1fr) !important; }
    .room-includes__actions:not(#_), .custom-modal-actions:not(#_) { flex-direction: column !important; }
    /* Línea de tiempo: textos más pequeños. */
    .reservation-timeline .timeline-label:not(#_) { font-size: .54rem !important; letter-spacing: .02em; }
    .reservation-timeline .timeline-date:not(#_) { font-size: .54rem !important; }
}
@media (max-width: 340px) {
    #cal-month-title:not(#_) { font-size: .9rem !important; letter-spacing: .04em; white-space: nowrap; }
    div.input-field:not(#_) { font-size: .82rem !important; }
}

/* =============================================================================
   Escala fluida en pantallas pequeñas (≤ 420 px): la base y los cinco tamaños
   del portal se calculan en proporción al ancho, con un mínimo legible, para que
   nada se vea sobredimensionado en un teléfono pequeño. Reemplaza los escalones
   fijos de arriba. Los campos van a 14–15 px; el zoom automático de iOS al tocar
   un campo se evita con maximum-scale=1 en la etiqueta viewport (el usuario
   puede seguir ampliando con dos dedos).
   ============================================================================= */
@media (max-width: 420px) {
    html:not(#_) { font-size: clamp(13px, 3.8vw, 16px) !important; }
    :root:not(#_) {
        --pz-fs-micro: clamp(9.5px, 2.7vw, 11px);
        --pz-fs-small: clamp(10.5px, 2.95vw, 12px);
        --pz-fs-body: clamp(11.5px, 3.25vw, 13px);
        --pz-fs-strong: clamp(12.5px, 3.5vw, 14px);
        --pz-fs-title: clamp(14px, 3.9vw, 16px);
    }
    input.input-field:not(#_), select.input-field:not(#_), textarea.input-field:not(#_) { font-size: clamp(14px, 3.8vw, 15px) !important; }
    .wizard-title:not(#_) { font-size: clamp(.95rem, 4.3vw, 1.05rem) !important; }
    .whatsapp-summary-details .sum-row:not(#_) { font-size: clamp(.68rem, 3.1vw, .76rem) !important; }
}

/* =============================================================================
   Orden y aire (revisión con capturas reales)
   ============================================================================= */
/* Paso 5: separación uniforme entre bloques; nada "montado" sobre lo siguiente. */
#wizard-step-5 .confirm-layout:not(#_) { display: flex !important; flex-direction: column !important; gap: 1.15rem !important; }
#wizard-step-5 .confirm-layout > *:not(#_) { margin-top: 0 !important; margin-bottom: 0 !important; }
#wizard-step-5 .confirm-block-title:not(#_) { margin: 0 0 .6rem !important; }
#wizard-step-5 .intent-block .confirm-block-title:not(#_) { margin-bottom: .55rem !important; }
#wizard-step-5 .whatsapp-summary-box:not(#_) { padding: .35rem .95rem !important; }
#wizard-step-5 .whatsapp-summary-details .sum-row:not(#_) {
    padding: .5rem 0 !important; line-height: 1.45 !important; gap: 1.2rem; align-items: flex-start;
    border-bottom: 1px solid rgba(31, 44, 71, .07);
}
#wizard-step-5 .whatsapp-summary-details .sum-row:last-child:not(#_) { border-bottom: 0; }
#wizard-step-5 .whatsapp-summary-details .sum-row-lbl:not(#_) { color: var(--text-secondary); flex: 0 0 auto; }
#wizard-step-5 .whatsapp-summary-details .sum-row-val:not(#_) { text-align: right; }
#wizard-step-5 .summary-edit-links:not(#_) { margin-top: -.3rem !important; }

/* Paso 4: anchos coherentes. Nombre y apellido en pareja; lo demás a todo el ancho. */
#panel-basic-details > .input-group.mobile-identity-field:not(#_),
#panel-basic-details > .input-group:has(#c-document):not(#_) { grid-column: 1 / -1 !important; }
/* El realce de "Falta este dato" tiene sitio a los lados y no se corta. */
#panel-basic-details:not(#_) { padding-left: 7px !important; padding-right: 7px !important; }

/* Nombre y apellido oficiales de la cédula: dato fijo, con aviso discreto. */
.input-field.is-official:not(#_) { background-color: #eef2fa !important; border-color: rgba(31, 44, 71, .22) !important; color: #0f172a !important; cursor: default; }
.input-field.is-official:focus:not(#_) { box-shadow: none !important; border-color: rgba(31, 44, 71, .35) !important; }
.official-name-hint { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: .4rem; margin: -.2rem 0 .1rem; padding: .5rem .7rem; border-radius: 10px; background: #f1f3f8; color: #141d31; font-size: .76rem; line-height: 1.4; }
.official-name-hint[hidden] { display: none !important; }
.official-name-hint .material-symbols-outlined { font-size: 1rem !important; }

/* Escritorio: los botones flotantes (WhatsApp y chat) no pisan el contenido. */
@media (min-width: 900px) and (max-width: 1760px) {
    .booking-portal:not(#_) { padding-left: 84px !important; padding-right: 84px !important; }
    .hotel-header:not(#_) { padding-right: 84px !important; }
}

/* =============================================================================
   Paso 1 en móvil: los accesos a «Portal de grupos» y «Uso por horas» van ARRIBA del
   calendario, como dos botones. Debajo quedaban fuera de la pantalla y nadie los veía.
   ============================================================================= */
@media (max-width: 899px) {
    #wizard-step-1 .wizard-body > .corp-switch-group--mobile {
        order: -1; display: grid !important; grid-template-columns: 1fr 1fr; gap: .45rem;
        align-items: stretch; margin: 0 0 .65rem;
    }
    #wizard-step-1 .corp-switch-group--mobile .corp-switch {
        display: flex; align-items: center; align-self: stretch; justify-content: center; margin: 0; padding: .5rem .55rem;
        min-height: 44px; font-size: .72rem; line-height: 1.25; text-align: center; text-decoration: none;
        border: 1px solid var(--card-border-active, rgba(0, 0, 0, .22)); border-radius: 10px;
        background: var(--card-bg, #fff); box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    }
    #wizard-step-1 .corp-switch-group--mobile .corp-switch:only-child { grid-column: 1 / -1; }
}

/* pasos-visibles:inicio */
/* La franja de pasos no se encoge: con overflow:hidden una fila de rejilla puede
   quedarse en cero y los rótulos salían cortados al 100 % de zoom. */
@media (min-width: 900px) {
  html body main.booking-portal > .step-tracker { min-height: max-content !important; }
  html body main.booking-portal > .summary-sidebar { min-height: 0; }
}
/* pasos-visibles:fin */