/* =============================================================================
   Hotel Plaza La Habana · Portal de reservas · capa de pulido visual

   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: #6f5421;          /* dorado oscuro legible sobre blanco (7:1) */
    --pz-gold-soft: rgba(204, 168, 82, .12);
    --pz-gold-line: rgba(204, 168, 82, .55);
    --pz-shadow-lift: 0 14px 30px -18px rgba(60, 44, 12, .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 "Cuba (+53)") 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, #d9bb6c 0%, #c9a348 100%) !important;
    color: #241a05 !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 10px 20px -14px rgba(111, 84, 33, .9);
}
.btn-primary:not(:disabled) .material-symbols-outlined,
.mobile-primary-action:not(:disabled) .material-symbols-outlined { color: #241a05 !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(111, 84, 33, .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(204, 168, 82, .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(60, 44, 12, .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(204, 168, 82, .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(204, 168, 82, .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, #e6cd85 0%, #cfab55 46%, #b18b36 100%) !important;
    color: #1f1603 !important;
    border: 1px solid rgba(111, 84, 33, .35) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(60, 44, 12, .14), 0 14px 26px -14px rgba(111, 84, 33, .8) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.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(31, 22, 3, .13);
    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(111, 84, 33, .3) !important;
    color: #3b2f14 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), inset 0 -2px 0 rgba(111, 84, 33, .06);
}
.btn-primary:disabled,
.mobile-primary-action:disabled {
    background: #f4f0e7 !important;
    color: #a0967f !important;
    border: 1px solid #e7dfcd !important;
    box-shadow: none !important;
    opacity: 1 !important;
}
.btn-primary:disabled .material-symbols-outlined,
.mobile-primary-action:disabled .material-symbols-outlined { background: rgba(160, 150, 127, .16); color: #a0967f !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(31, 22, 3, .2); }
    .btn-secondary:hover { border-color: var(--pz-gold-ink) !important; box-shadow: 0 8px 18px -14px rgba(60, 44, 12, .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(204, 168, 82, .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(111, 84, 33, .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(204, 168, 82, .4);
    border-radius: 12px;
    background: rgba(204, 168, 82, .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(204, 168, 82, .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(111, 84, 33, .45); border-radius: 50%; background: #fff; box-sizing: border-box; }
.deposit-option.selected { border: 2px solid var(--pz-gold-ink); background: rgba(204, 168, 82, .08); box-shadow: 0 10px 22px -18px rgba(60, 44, 12, .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(204, 168, 82, .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(204, 168, 82, .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(204, 168, 82, .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(111, 84, 33, .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(204, 168, 82, .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(204, 168, 82, .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(204, 168, 82, .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, #e7e2d6);
    border-radius: 14px;
    background: linear-gradient(180deg, #fbfaf7 0%, #f6f3ec 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, #6f5421); 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, #e7e2d6); }
.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, #efe4c8);
}
.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, #6f5421); }
.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(23, 32, 29, .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(23, 32, 29, .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(204, 168, 82, 0); }
    30% { box-shadow: 0 0 0 4px rgba(204, 168, 82, .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, #e7e2d6); }
.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(204, 168, 82, .13), rgba(255, 255, 255, .95));
    box-shadow: inset 0 0 0 1px rgba(197, 168, 128, .55), 0 10px 24px -18px rgba(60, 44, 12, .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, #6f5421); font-family: var(--font-family);
    font-size: var(--pz-fs-small); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(111, 84, 33, .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(204, 168, 82, .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(111, 84, 33, .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(111, 84, 33, .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(204, 168, 82, .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(111, 84, 33, .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(23, 32, 29, .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(23, 32, 29, .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(204, 168, 82, .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(204, 168, 82, .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(111, 84, 33, .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(204, 168, 82, .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(111, 84, 33, .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: #17201d; 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(111, 84, 33, .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(204, 168, 82, .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(204, 168, 82, .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(60, 44, 12, .5); border-color: rgba(111, 84, 33, .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(204, 168, 82, .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, #e6d8b5); background: #fff; text-decoration: none; }
.success-close:hover { color: var(--text-primary, #1c2530); border-color: var(--hotel-accent-gold, #c5a880); }
.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: #6b4f0e; background: #fff8e6; border: 1px solid #f0d99a; 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; }

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