/* =============================================================================
   Hotel Gran Cacique Maiquetía · tema del portal de reservas (capa final)

   Dirección: la de hotelgrancacique.com, no la de una plantilla.
   - Hoja editorial: un solo plano blanco sobre fondo cálido; filetes de 1 px en lugar
     de cajas dentro de cajas; nada de sombras ni píldoras.
   - Campos subrayados, como la barra de reserva de la portada del hotel.
   - Títulos en Source Code Pro, mayúsculas y aire; texto en Work Sans.
   - Sin iconos decorativos delante de títulos, etiquetas y avisos: el texto basta.
   - Color con intención: espresso para la estructura, bronce solo para lo activo.
   Las esquinas ya llegan rectas desde el generador (p41_assets.py, square()).
   ============================================================================= */
:root {
    --gc-espresso: #1a0908;
    --gc-brown: #442c1f;
    --gc-bronze: #9a5026;
    --gc-bronze-dark: #7c3f1e;
    --gc-mid: #8b6a55;
    --gc-gray: #666666;
    --gc-soft: #9c8e84;
    --gc-line: #e3dcd5;
    --gc-line-strong: #cfc4ba;
    --gc-paper: #ffffff;
    --gc-ground: #f4efe9;
    --gc-tint: #f7f1eb;

    --font-family: 'Work Sans', -apple-system, 'Segoe UI', sans-serif;
    --font-serif: 'Source Code Pro', ui-monospace, 'Courier New', monospace;
    --hotel-primary: #442c1f;
    --hotel-primary-hover: #1a0908;
    --hotel-primary-rgb: 68, 44, 31;
    --hotel-accent-gold: #9a5026;
    --text-primary: #2b1a12;
    --text-dark: #2b1a12;
    --text-secondary: #666666;
    --text-muted: #9c8e84;
    --bg-primary: #ffffff;
    --bg-secondary: #f4efe9;
    --card-bg: #ffffff;
    --card-border: #e3dcd5;
    --card-border-active: #9a5026;
    --pz-gold-ink: #7c3f1e;
    --pz-gold-soft: rgba(154, 80, 38, .07);
    --pz-gold-line: #9a5026;
    --pz-shadow-lift: none;
}

/* ---------------------------------------------------------------- base */
html, html body { background: var(--gc-ground) !important; }
html body { font-family: var(--font-family) !important; color: var(--text-primary) !important; -webkit-font-smoothing: antialiased; }
html body .material-symbols-outlined { font-family: 'Material Symbols Outlined' !important; text-transform: none !important; letter-spacing: normal !important; }
html body *, html body *::before, html body *::after { box-shadow: none !important; text-shadow: none !important; }
html body ::selection { background: rgba(154, 80, 38, .22); }

/* ---------------------------------------------------------------- cabecera */
html body .hotel-header {
    background: var(--gc-espresso) !important;
    border-bottom: 2px solid var(--gc-bronze) !important;
    min-height: 60px;
}
html body .hotel-header .header-logo-img { display: block; width: auto !important; height: 36px !important; max-width: 160px !important; object-fit: contain !important; }
html body .hotel-header .header-actions { gap: 18px !important; }
html body .hotel-header .back-to-home,
html body .hotel-header .back-to-home-text {
    color: rgba(255, 255, 255, .86) !important; background: none !important; border: 0 !important;
    font: 500 11px/1 var(--font-family) !important; text-transform: uppercase; letter-spacing: .16em;
}
html body .hotel-header .back-to-home:hover,
html body .hotel-header .back-to-home:hover .back-to-home-text { color: #ffffff !important; }
html body .hotel-header .back-to-home .material-symbols-outlined { color: inherit !important; font-size: 16px !important; }
html body .hotel-header .currency-switch {
    background: transparent !important; color: rgba(255, 255, 255, .86) !important;
    border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, .35) !important; border-radius: 0 !important;
    font: 500 11px var(--font-family) !important; letter-spacing: .12em; padding: 4px 18px 4px 0 !important;
}
html body .hotel-header .currency-switch option { color: var(--gc-brown); background: #fff; }
html body .hotel-header .lang-switch { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; gap: 0 !important; }
html body .hotel-header .lang-switch__opt {
    background: transparent !important; color: rgba(255, 255, 255, .5) !important; border-radius: 0 !important;
    font: 600 11px var(--font-serif) !important; letter-spacing: .1em; padding: 4px 6px !important;
}
html body .hotel-header .lang-switch__opt + .lang-switch__opt { border-left: 1px solid rgba(255, 255, 255, .3) !important; }
html[lang="es"] body .hotel-header .lang-switch__opt[data-lang="es"],
html[lang="en"] body .hotel-header .lang-switch__opt[data-lang="en"],
html body .hotel-header .lang-switch__opt.is-active,
html body .hotel-header .lang-switch__opt[aria-pressed="true"] { color: #ffffff !important; }
html body .hotel-header button:not(.lang-switch) { background: transparent !important; border: 0 !important; color: rgba(255, 255, 255, .86) !important; }
html body .hotel-header button:not(.lang-switch) .material-symbols-outlined { color: inherit !important; }

/* ---------------------------------------------------------------- pasos: una línea de texto, no una caja */
html body .step-tracker {
    background: transparent !important; border: 0 !important; border-radius: 0 !important;
    border-bottom: 1px solid var(--gc-line-strong) !important; padding-bottom: 0 !important;
}
html body .step-tracker-line { background: transparent !important; }
html body .step-tracker-progress { background: var(--gc-bronze) !important; height: 2px !important; bottom: -1px !important; top: auto !important; }
html body .tracker-step .step-label,
html body .tracker-step .step-number {
    font-family: var(--font-serif) !important; font-size: 11px !important; font-weight: 500 !important;
    letter-spacing: .14em !important; text-transform: uppercase; color: var(--gc-soft) !important;
}
html body .tracker-step.completed .step-label,
html body .tracker-step.completed .step-number { color: var(--gc-brown) !important; }
html body .tracker-step.active .step-label,
html body .tracker-step.active .step-number { color: var(--gc-espresso) !important; font-weight: 600 !important; }
html body .tracker-mobile-current,
html body .tracker-mobile-label { font-family: var(--font-serif) !important; letter-spacing: .12em !important; text-transform: uppercase; font-size: 11px !important; color: var(--gc-brown) !important; }

/* ---------------------------------------------------------------- la hoja */
html body .wizard-card,
html body .summary-sidebar {
    background: var(--gc-paper) !important;
    border: 1px solid var(--gc-line) !important;
    border-radius: 0 !important;
}
html body .wizard-header { border-bottom: 0 !important; padding-bottom: 6px !important; }
html body .wizard-title,
html body .summary-title {
    font-family: var(--font-serif) !important; font-weight: 400 !important; text-transform: uppercase !important;
    letter-spacing: .16em !important; color: var(--gc-espresso) !important; font-size: clamp(15px, 1.15rem, 19px) !important;
}
html body .wizard-title .material-symbols-outlined,
html body .summary-title .material-symbols-outlined,
html body .confirm-block-title .material-symbols-outlined,
html body .input-label .material-symbols-outlined,
html body .included-transfer > svg,
html body .included-transfer > .material-symbols-outlined { display: none !important; }
html body .wizard-header::after {
    content: ""; display: block; width: 28px; height: 2px; margin-top: 10px; background: var(--gc-bronze);
}
html body .wizard-subtitle { font: 400 13.5px/1.55 var(--font-family) !important; color: var(--gc-gray) !important; }

/* Etiquetas: pequeñas, espaciadas, sin icono. */
html body .input-label,
html body .confirm-block-title,
html body .sum-row-lbl,
html body .qty-label,
html body .basic-summary__label,
html body .extras-block .input-label,
html body .summary-item-label {
    font: 600 10.5px/1.4 var(--font-family) !important; text-transform: uppercase !important;
    letter-spacing: .16em !important; color: var(--gc-mid) !important;
}
html body .confirm-block-title { color: var(--gc-espresso) !important; font-family: var(--font-serif) !important; font-weight: 500 !important; letter-spacing: .14em !important; }

/* ---------------------------------------------------------------- campos subrayados (como la barra de la portada) */
html body .input-field,
html body select.input-field,
html body textarea.input-field,
html body .phone-input-row,
html body #check-in-display,
html body #check-out-display {
    background: transparent !important;
    border: 0 !important; border-bottom: 1px solid var(--gc-line-strong) !important; border-radius: 0 !important;
    padding-left: 0 !important; padding-right: 0 !important;
    font: 400 14.5px var(--font-family) !important; color: var(--text-primary) !important;
}
html body textarea.input-field { border: 1px solid var(--gc-line-strong) !important; padding: 10px 12px !important; }

/* Los campos ya no son subrayados: reservas-polish.css les puso un borde fino por los cuatro
   lados para que el foco no descuadrara la línea. Lo que no le devolvió fue el hueco de los
   lados, que el subrayado no necesitaba y una caja sí: el texto y el «Ej. Juan» quedaban
   pegados al borde, como si el campo estuviera mal cortado. Las fechas del paso 1 siguen
   subrayadas de verdad, así que esas no llevan hueco y no entran aquí. */
html body .input-field:not(#_) { padding-left: 12px !important; padding-right: 12px !important; }
html body .phone-input-row .input-field:not(#_) { padding-left: 10px !important; padding-right: 10px !important; }
/* El desplegable deja sitio a la flecha; el «:not(#_)» es para que gane a la regla de
   arriba, que si no le comería ese hueco y la flecha se montaría sobre el texto. */
html body select.input-field:not(#_) { padding-right: 26px !important; }
html body .phone-input-row .input-field { border-bottom: 0 !important; }
html body #check-in-display,
html body #check-out-display { text-align: left !important; font-weight: 500 !important; min-height: 40px; }
html body .input-field:focus,
html body .phone-input-row:focus-within { border-bottom-color: var(--gc-bronze) !important; outline: none !important; }
html body .input-field::placeholder { color: #b3a79d !important; }
html body .input-group { background: transparent !important; border: 0 !important; }

/* ---------------------------------------------------------------- calendario */
html body .calendar-wrapper { background: transparent !important; border: 0 !important; border-top: 1px solid var(--gc-line) !important; border-bottom: 1px solid var(--gc-line) !important; border-radius: 0 !important; }
html body .calendar-month-title,
html body #cal-month-title { font: 500 13px var(--font-serif) !important; letter-spacing: .2em !important; text-transform: uppercase; color: var(--gc-espresso) !important; }
html body .calendar-nav-btn { background: transparent !important; border: 0 !important; color: var(--gc-brown) !important; }
html body .calendar-nav-btn:hover { color: var(--gc-bronze) !important; }
html body .calendar-weekdays,
html body .calendar-weekdays * { font: 500 10px var(--font-serif) !important; letter-spacing: .14em !important; color: var(--gc-soft) !important; text-transform: uppercase; }
html body .cal-day { border-radius: 0 !important; font: 400 14px var(--font-family) !important; color: var(--text-primary) !important; background: transparent !important; border: 0 !important; }
html body .cal-day.disabled { color: #cdc3ba !important; text-decoration: none !important; }
html body .cal-day:not(.disabled):not(.empty):not(.selected-start):not(.selected-end):hover { background: var(--gc-tint) !important; }
html body .cal-day.in-range { background: #f1e6dc !important; color: var(--gc-brown) !important; }
html body .cal-day.selected-start,
html body .cal-day.selected-end { background: var(--gc-brown) !important; color: #ffffff !important; font-weight: 600 !important; }

/* ---------------------------------------------------------------- avisos: texto, no cajas tintadas */
html body .included-transfer,
html body .visitors-note,
html body .check-schedule-note,
html body .refund-policy,
html body .whatsapp-info-block,
html body .pz-mail-hint {
    background: transparent !important; border: 0 !important; border-top: 1px solid var(--gc-line) !important;
    border-radius: 0 !important; padding: 12px 0 0 !important;
}
html body .included-transfer p { margin: 0 !important; font: 400 13px/1.6 var(--font-family) !important; color: var(--gc-gray) !important; }
html body .included-transfer strong {
    display: block; margin-bottom: 3px; font: 500 10.5px var(--font-serif) !important;
    letter-spacing: .16em; text-transform: uppercase; color: var(--gc-bronze) !important;
}
html body .capacity-indicator {
    background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important;
    font: 500 12px var(--font-family) !important; color: var(--gc-mid) !important; justify-content: flex-start !important;
}
html body .capacity-indicator .material-symbols-outlined { display: none !important; }
html body .included-tag { background: transparent !important; color: var(--gc-bronze) !important; border: 0 !important; font: 500 10.5px var(--font-serif) !important; letter-spacing: .12em; text-transform: uppercase; padding: 0 !important; }

/* ---------------------------------------------------------------- botones */
html body .btn {
    border-radius: 0 !important; font: 600 11.5px var(--font-family) !important;
    text-transform: uppercase !important; letter-spacing: .18em !important; min-height: 46px;
}
html body .btn .material-symbols-outlined { background: none !important; width: auto !important; height: auto !important; font-size: 17px !important; }
html body .btn-primary:not(:disabled),
html body .mobile-primary-action:not(:disabled),
html body #btn-confirm-whatsapp:not(:disabled) {
    background: var(--gc-brown) !important; background-image: none !important;
    border: 1px solid var(--gc-brown) !important; color: #ffffff !important;
}
html body .btn-primary:not(:disabled):hover,
html body .mobile-primary-action:not(:disabled):hover,
html body #btn-confirm-whatsapp:not(:disabled):hover { background: var(--gc-espresso) !important; border-color: var(--gc-espresso) !important; }
html body .btn-primary:not(:disabled) .material-symbols-outlined,
html body .mobile-primary-action:not(:disabled) .material-symbols-outlined,
html body #btn-confirm-whatsapp .material-symbols-outlined { color: #ffffff !important; }
html body .btn-primary:disabled,
html body .mobile-primary-action:disabled {
    background: transparent !important; background-image: none !important;
    border: 1px solid var(--gc-line-strong) !important; color: #b3a79d !important;
}
html body .btn-primary:disabled .material-symbols-outlined,
html body .mobile-primary-action:disabled .material-symbols-outlined { color: #b3a79d !important; }
html body .btn-secondary,
html body .btn-outline,
html body .mobile-back-action,
html body .mobile-view-details-btn {
    background: transparent !important; border: 1px solid var(--gc-line-strong) !important; color: var(--gc-brown) !important;
}
html body .btn-secondary:hover,
html body .btn-outline:hover { border-color: var(--gc-brown) !important; }
html body .counter-btn,
html body .qty-btn { border-radius: 0 !important; background: transparent !important; border: 1px solid var(--gc-line-strong) !important; color: var(--gc-brown) !important; }
html body .counter-btn:not(:disabled):hover,
html body .qty-btn:hover { border-color: var(--gc-brown) !important; }
html body .counter-value { font: 500 18px var(--font-serif) !important; color: var(--gc-espresso) !important; }

/* Enlaces: bronce subrayado fino. */
html body a:not(.btn):not(.back-to-home):not(.header-brand),
html body .summary-edit-link,
html body .room-includes-btn,
html body .corp-switch,
html body .intent-chosen__change,
html body .pay-chosen__change,
html body .basic-summary__edit {
    color: var(--gc-bronze-dark) !important; text-decoration: underline !important;
    text-decoration-thickness: 1px !important; text-underline-offset: 3px !important; text-decoration-color: rgba(154, 80, 38, .45) !important;
    background: transparent !important; border: 0 !important;
}
html body #wizard-step-1 .corp-switch-group--mobile .corp-switch {
    text-decoration: none !important; border: 1px solid var(--gc-line-strong) !important; color: var(--gc-brown) !important;
    font: 500 11px/1.35 var(--font-family) !important; letter-spacing: .04em;
}

/* ---------------------------------------------------------------- habitaciones: la foto manda */
html body .room-card {
    background: var(--gc-paper) !important; border: 1px solid var(--gc-line) !important; border-radius: 0 !important;
    overflow: hidden;
}
html body .room-card:hover { border-color: var(--gc-line-strong) !important; }
html body .room-card.selected { border-color: var(--gc-brown) !important; outline: 1px solid var(--gc-brown); outline-offset: -2px; }
html body .room-card.unavailable { opacity: .55; }
html body .room-img-container,
html body .room-card img { border-radius: 0 !important; }
html body .room-title { font: 500 13.5px var(--font-serif) !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--gc-espresso) !important; }
html body .room-spec-item { font: 400 12px var(--font-family) !important; color: var(--gc-gray) !important; }
html body .room-spec-item .material-symbols-outlined { color: var(--gc-soft) !important; font-size: 14px !important; }
html body .room-price { font: 500 20px var(--font-family) !important; color: var(--gc-espresso) !important; letter-spacing: -.01em !important; }
html body .room-price-desc { font: 400 11px var(--font-family) !important; color: var(--gc-soft) !important; letter-spacing: .04em; }
html body .room-select-badge { border-radius: 0 !important; border: 1px solid var(--gc-line-strong) !important; background: #fff !important; }
html body .room-card.selected .room-select-badge { background: var(--gc-brown) !important; border-color: var(--gc-brown) !important; }
html body .room-qty-selector { border: 0 !important; border-top: 1px solid var(--gc-line) !important; background: transparent !important; border-radius: 0 !important; }
html body .pz-more-rooms { font: 500 11px var(--font-family) !important; letter-spacing: .08em; color: var(--gc-mid) !important; }
html body .king-qty-badge { background: transparent !important; color: var(--gc-bronze) !important; border: 1px solid var(--gc-bronze) !important; border-radius: 0 !important; font: 500 10px var(--font-serif) !important; }

/* ---------------------------------------------------------------- acordeón y opciones: listas con filete, no tarjetas */
html body .acc-item { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--gc-line) !important; border-radius: 0 !important; }
html body .acc-item:first-child { border-top: 1px solid var(--gc-line) !important; }
html body .acc-head { background: transparent !important; padding-left: 0 !important; padding-right: 0 !important; }
html body .acc-head__title { font: 500 12.5px var(--font-serif) !important; letter-spacing: .1em !important; text-transform: uppercase; color: var(--gc-espresso) !important; }
html body .acc-head__summary { font: 400 12px var(--font-family) !important; color: var(--gc-soft) !important; }
html body .extra-item { border: 0 !important; border-bottom: 1px solid var(--gc-line) !important; background: transparent !important; border-radius: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
html body .extra-item__price { font: 500 13px var(--font-family) !important; color: var(--gc-brown) !important; }
html body .intent-card,
html body .payment-option-card,
html body .deposit-option,
html body .intent-chosen,
html body .pay-chosen,
html body .basic-summary,
html body .discreet-panel,
html body .shuttle-pay-box,
html body .promo-code-container {
    background: var(--gc-paper) !important; border: 1px solid var(--gc-line) !important; border-radius: 0 !important;
}
html body .intent-card:hover,
html body .payment-option-card:hover { border-color: var(--gc-line-strong) !important; }
html body .intent-card.is-active,
html body .payment-option-card.selected,
html body .deposit-option.selected { border-color: var(--gc-brown) !important; outline: 1px solid var(--gc-brown); outline-offset: -2px; }
html body .intent-card__icon,
html body .intent-chosen__icon,
html body .pay-chosen__icon { background: transparent !important; color: var(--gc-bronze) !important; border: 0 !important; }
html body .payment-option-chip { border-radius: 0 !important; }

/* ---------------------------------------------------------------- resumen: un folio */
html body .summary-sidebar .summary-title { border-bottom: 1px solid var(--gc-line) !important; padding-bottom: 12px !important; }
html body .summary-item,
html body .sum-row,
html body .summary-price-row-custom { border-bottom: 1px solid #f0ebe6 !important; }
html body .summary-item-value,
html body .sum-row-val { font: 500 13px var(--font-family) !important; color: var(--text-primary) !important; }
html body .summary-total,
html body .sum-row-total { border-top: 1px solid var(--gc-brown) !important; border-bottom: 0 !important; background: transparent !important; }
html body .summary-total-label { font: 500 11px var(--font-serif) !important; letter-spacing: .16em !important; text-transform: uppercase; color: var(--gc-espresso) !important; }
html body .summary-total-price,
html body #sum-total { font: 500 26px var(--font-family) !important; color: var(--gc-espresso) !important; letter-spacing: -.01em !important; }
html body .bs-price,
html body .bs-total-price,
html body .bcv-rate-note { color: var(--gc-soft) !important; }
html body .sidebar-map,
html body .location-map { border: 0 !important; border-radius: 0 !important; }
html body .sidebar-map iframe,
html body .location-map iframe { filter: grayscale(.85) sepia(.18) contrast(.95); border-radius: 0 !important; }

/* ---------------------------------------------------------------- barra móvil y hoja de resumen */
html body .mobile-summary-bar,
html body [class*="mobile-summary-bar"],
html body .mobile-summary-modal { background: var(--gc-paper) !important; border-top: 1px solid var(--gc-line-strong) !important; border-radius: 0 !important; }
html body .mobile-summary-label,
html body .mobile-details-label { font: 500 9.5px var(--font-serif) !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--gc-mid) !important; }
html body #mob-total-price,
html body .mobile-summary-cost { font: 600 20px var(--font-family) !important; color: var(--gc-espresso) !important; }

/* ---------------------------------------------------------------- ventanas y pantalla final */
html body .custom-modal-content,
html body .success-overlay-card,
html body .flight-modal-card,
html body .room-includes { border-radius: 0 !important; border: 1px solid var(--gc-line) !important; }
html body .custom-modal-title,
html body .success-overlay-title,
html body .room-includes__title { font-family: var(--font-serif) !important; font-weight: 400 !important; text-transform: uppercase !important; letter-spacing: .14em !important; color: var(--gc-espresso) !important; }
html body #success-overlay .success-logo-img { background: transparent !important; border-radius: 0 !important; height: 34px !important; width: auto !important; min-width: 0 !important; max-width: 150px !important; object-fit: contain; }
html body .success-check-circle,
html body .success-icon-wrapper { background: transparent !important; color: var(--gc-bronze) !important; border: 1px solid var(--gc-bronze) !important; }
html body .reservation-boot-card { border-radius: 0 !important; border: 1px solid var(--gc-line) !important; }
html body .reservation-boot-title { font-family: var(--font-serif) !important; text-transform: uppercase; letter-spacing: .14em; font-weight: 400 !important; }

/* Casillas y radios en el color del hotel. */
html body input[type="checkbox"],
html body input[type="radio"] { accent-color: var(--gc-brown) !important; }

/* Fechas y pie: la capa común usa selectores por paso; se igualan con los ID. */
html body #wizard-step-1 #check-in-display,
html body #wizard-step-1 #check-out-display {
    border: 0 !important; border-bottom: 1px solid var(--gc-line-strong) !important; background-color: transparent !important;
    border-radius: 0 !important; padding: 8px 0 !important; justify-content: flex-start !important;
}
html body .wizard-card .wizard-footer {
    border-top: 1px solid var(--gc-line) !important; margin-left: 0 !important; margin-right: 0 !important; background: var(--gc-paper) !important;
}

/* =============================================================================
   Movimiento · premium sin peso
   Solo CSS (transform / opacity / clip-path, que no fuerzan recálculo de maquetación),
   una curva única y duraciones cortas. Cada paso entra como una página que se asienta;
   el detalle está en lo que el huésped toca: fechas, habitaciones, botones y total.
   Con «reducir movimiento» activado en el sistema, todo queda estático.
   ============================================================================= */
:root {
    --gc-ease: cubic-bezier(.22, .8, .24, 1);
    --gc-ease-soft: cubic-bezier(.4, 0, .2, 1);
}

@keyframes gcSheetIn { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes gcFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gcRise { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
@keyframes gcRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes gcTrack { from { letter-spacing: .34em; opacity: 0; } to { letter-spacing: .16em; opacity: 1; } }
@keyframes gcDayPick { 0% { transform: scale(.82); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes gcTotal { 0% { color: #9a5026; transform: translate3d(0, 3px, 0); opacity: .4; } 100% { transform: none; opacity: 1; } }
@keyframes gcDraw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes gcRing { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes gcSheen { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(300%) skewX(-18deg); } }

@media (prefers-reduced-motion: no-preference) {
    /* Cabecera y pasos al abrir el portal. */
    html body .hotel-header .header-brand { animation: gcFade .7s var(--gc-ease) both; }
    html body .hotel-header .header-actions { animation: gcFade .7s .12s var(--gc-ease) both; }
    html body .step-tracker { animation: gcFade .6s .1s var(--gc-ease) both; }
    html body .step-tracker-progress { transition: width .7s var(--gc-ease) !important; }
    html body .tracker-step .step-label,
    html body .tracker-step .step-number { transition: color .4s var(--gc-ease-soft) !important; }

    /* Cada paso entra como una hoja que se asienta; su título se abre y el filete bronce se traza. */
    html body .wizard-card.active { animation: gcSheetIn .55s var(--gc-ease) both; }
    html body .wizard-card.active .wizard-title { animation: gcTrack .8s .08s var(--gc-ease) both; }
    html body .wizard-card.active .wizard-header::after { transform-origin: left center; animation: gcRule .7s .25s var(--gc-ease) both; }
    html body .wizard-card.active .wizard-subtitle { animation: gcFade .6s .2s var(--gc-ease) both; }
    html body .summary-sidebar { animation: gcSheetIn .65s .12s var(--gc-ease) both; }

    /* Habitaciones: aparecen en cascada y la foto respira al pasar el cursor. */
    html body .wizard-card.active .room-card { animation: gcRise .55s var(--gc-ease) both; }
    html body .wizard-card.active .room-card:nth-child(2) { animation-delay: .05s; }
    html body .wizard-card.active .room-card:nth-child(3) { animation-delay: .1s; }
    html body .wizard-card.active .room-card:nth-child(4) { animation-delay: .15s; }
    html body .wizard-card.active .room-card:nth-child(5) { animation-delay: .2s; }
    html body .wizard-card.active .room-card:nth-child(6) { animation-delay: .25s; }
    html body .wizard-card.active .room-card:nth-child(n+7) { animation-delay: .3s; }
    html body .room-img-container { overflow: hidden !important; }
    html body .room-card img { transition: transform 1.1s var(--gc-ease), filter .6s var(--gc-ease-soft) !important; filter: saturate(.92); }
    html body .room-card:hover img { transform: scale(1.045); filter: saturate(1); }
    html body .room-card { transition: border-color .35s var(--gc-ease-soft), opacity .35s var(--gc-ease-soft) !important; }

    /* Opciones del paso 4 y del paso 5 en cascada. */
    html body .wizard-card.active .acc-item,
    html body .wizard-card.active .intent-card,
    html body .wizard-card.active .payment-option-card { animation: gcRise .5s var(--gc-ease) both; }
    html body .wizard-card.active .acc-item:nth-child(2),
    html body .wizard-card.active .intent-card:nth-child(2),
    html body .wizard-card.active .payment-option-card:nth-child(2) { animation-delay: .05s; }
    html body .wizard-card.active .acc-item:nth-child(3),
    html body .wizard-card.active .intent-card:nth-child(3),
    html body .wizard-card.active .payment-option-card:nth-child(3) { animation-delay: .1s; }
    html body .wizard-card.active .acc-item:nth-child(n+4),
    html body .wizard-card.active .payment-option-card:nth-child(n+4) { animation-delay: .15s; }

    /* Calendario: el día elegido se asienta; el tramo intermedio se tiñe con suavidad. */
    html body .cal-day { transition: background-color .3s var(--gc-ease-soft), color .3s var(--gc-ease-soft) !important; }
    html body .cal-day.selected-start,
    html body .cal-day.selected-end { animation: gcDayPick .42s var(--gc-ease) both; }

    /* Campos: el subrayado bronce se traza de izquierda a derecha al enfocar. */
    html body .input-field:not(textarea):not(select),
    html body #wizard-step-1 #check-in-display,
    html body #wizard-step-1 #check-out-display {
        background-image: linear-gradient(#9a5026, #9a5026) !important;
        background-repeat: no-repeat !important; background-position: 0 100% !important;
        background-size: 0 1px !important; transition: background-size .5s var(--gc-ease), border-color .3s !important;
    }
    html body .input-field:not(textarea):not(select):focus,
    html body #wizard-step-1 #check-in-display:hover,
    html body #wizard-step-1 #check-out-display:hover { background-size: 100% 1px !important; }

    /* Botón principal: un destello tenue lo recorre al pasar el cursor; la flecha avanza. */
    html body .btn-primary:not(:disabled),
    html body #btn-confirm-whatsapp:not(:disabled) { position: relative; overflow: hidden; transition: background-color .35s var(--gc-ease-soft), border-color .35s !important; }
    html body .btn-primary:not(:disabled)::after,
    html body #btn-confirm-whatsapp:not(:disabled)::after {
        content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 35%; pointer-events: none;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .16), rgba(255, 255, 255, 0));
        transform: translateX(-120%) skewX(-18deg);
    }
    html body .btn-primary:not(:disabled):hover::after,
    html body #btn-confirm-whatsapp:not(:disabled):hover::after { animation: gcSheen .9s var(--gc-ease-soft); }
    html body .btn .material-symbols-outlined { transition: transform .35s var(--gc-ease) !important; }
    html body .btn-primary:not(:disabled):hover .material-symbols-outlined { transform: translateX(4px); }
    html body .btn-secondary:hover .material-symbols-outlined { transform: translateX(-3px); }
    html body .btn:not(:disabled):active { transform: translateY(1px); }

    /* Enlaces: el subrayado se oscurece al pasar el cursor. */
    html body a:not(.btn):not(.back-to-home):not(.header-brand),
    html body .corp-switch { transition: text-decoration-color .3s var(--gc-ease-soft), color .3s !important; }
    html body a:not(.btn):not(.back-to-home):not(.header-brand):hover,
    html body .corp-switch:hover { text-decoration-color: currentColor !important; }

    /* Total: cada cambio se asienta desde el bronce (reutiliza la señal pz-bump de la capa común). */
    html body .pz-bump { animation: gcTotal .55s var(--gc-ease) !important; }

    /* Ventanas y pantalla final. */
    html body .custom-modal-overlay.active .custom-modal-content,
    html body .room-includes-modal.active .room-includes { animation: gcSheetIn .45s var(--gc-ease) both; }
    html body .loading-overlay.active .success-overlay-card { animation: gcSheetIn .6s var(--gc-ease) both; }
    html body .loading-overlay.active .success-check-circle { animation: gcRing .6s .15s var(--gc-ease) both; }
    html body .loading-overlay.active .success-check-circle svg,
    html body .loading-overlay.active .success-check-circle .material-symbols-outlined { animation: gcDraw .55s .45s var(--gc-ease) both; }
    html body .reservation-boot-progress-bar { background: linear-gradient(90deg, #442c1f, #9a5026) !important; }
}

/* Foco de teclado siempre visible (las sombras se anulan en esta capa). */
html body :focus-visible { outline: 2px solid #9a5026 !important; outline-offset: 2px !important; }

/* Botones: sin la sombra de la capa común (más específica que la regla general). */
html body .btn-primary:not(:disabled),
html body .mobile-primary-action:not(:disabled),
html body #btn-confirm-whatsapp:not(:disabled),
html body .btn-secondary,
html body .intent-card,
html body .payment-option-card,
html body .room-card { box-shadow: none !important; }

/* Casilla de selección de la habitación: arriba a la derecha, con el precio apartado de ella. */
html body .room-card .room-select-badge { top: 12px !important; right: 12px !important; width: 18px !important; height: 18px !important; }
html body .room-card .room-price-info { padding-right: 34px !important; }
@media (max-width: 899px) { html body .room-card .room-price-info { padding-right: 0 !important; } }
@media (max-width: 899px) { html body .room-card .room-title { padding-right: 0 !important; margin-right: 30px !important; } }

/* =============================================================================
   Sistema tipográfico (sustituye a las reglas de letra anteriores de esta capa)

   Reglas:
   1. Source Code Pro solo como letra de exhibición, nunca por debajo de 15 px:
      títulos de paso, nombres de habitación, mes del calendario y total.
   2. Todo lo funcional (etiquetas, campos, pasos, precios, avisos, botones) en
      Work Sans; mínimo absoluto 12 px, cuerpo 14-15 px.
   3. Contraste de texto mínimo 4,5:1 sobre blanco y sobre el fondo cálido.
   4. Mayúsculas solo en etiquetas cortas y con espaciado moderado (.04-.08 em).
   5. Cifras tabulares en precios y fechas para que no bailen al cambiar.
   ============================================================================= */
:root {
    --gc-ink: #2b1a12;        /* texto principal · 15:1 */
    --gc-ink-2: #5c4a3f;      /* texto secundario · 8:1 */
    --gc-ink-3: #6f6056;      /* apoyo / etiquetas · 5,9:1 */
    --gc-ink-off: #a2958c;    /* solo para lo deshabilitado */
    --text-secondary: #5c4a3f;
    --text-muted: #6f6056;
}
html body { font-size: 15px; line-height: 1.5; font-feature-settings: "kern" 1; }
html body .room-price,
html body .sum-row-val,
html body .summary-item-value,
html body #sum-total,
html body #mob-total-price,
html body .cal-day,
html body .extra-item__price,
html body .counter-value,
html body .usd-price,
html body .bs-price { font-variant-numeric: tabular-nums lining-nums; }

/* --- Exhibición (Source Code Pro, ≥ 15 px) */
html body .wizard-title,
html body .summary-title,
html body .custom-modal-title,
html body .success-overlay-title,
html body .room-includes__title {
    font: 500 19px/1.25 var(--font-serif) !important; letter-spacing: .08em !important;
    text-transform: uppercase !important; color: var(--gc-ink) !important;
}
html body .summary-title { font-size: 15px !important; }
html body .room-title { font: 600 15px/1.3 var(--font-serif) !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: var(--gc-ink) !important; }
html body .calendar-month-title,
html body #cal-month-title { font: 600 15px var(--font-serif) !important; letter-spacing: .1em !important; color: var(--gc-ink) !important; }
html body .summary-total-price,
html body #sum-total { font: 600 26px var(--font-family) !important; letter-spacing: -.01em !important; color: var(--gc-ink) !important; }

/* --- Texto funcional (Work Sans) */
html body .wizard-subtitle { font: 400 14.5px/1.55 var(--font-family) !important; color: var(--gc-ink-2) !important; }
html body .input-label,
html body .confirm-block-title,
html body .sum-row-lbl,
html body .qty-label,
html body .basic-summary__label,
html body .extras-block .input-label,
html body .summary-item-label,
html body .summary-total-label {
    font: 600 12px/1.4 var(--font-family) !important; letter-spacing: .06em !important;
    text-transform: uppercase !important; color: var(--gc-ink-3) !important;
}
html body .confirm-block-title { font-size: 12.5px !important; color: var(--gc-ink) !important; }
html body .input-field,
html body select.input-field,
html body textarea.input-field,
html body #wizard-step-1 #check-in-display,
html body #wizard-step-1 #check-out-display { font: 400 15px/1.4 var(--font-family) !important; color: var(--gc-ink) !important; }
html body .input-field::placeholder { color: #8f8177 !important; }
html body .radio-label,
html body .checkbox-label { font: 500 14px/1.4 var(--font-family) !important; color: var(--gc-ink) !important; }
html body .error-msg { font: 500 12.5px var(--font-family) !important; }

/* Pasos */
html body .tracker-step .step-label,
html body .tracker-step .step-number {
    font: 600 12px var(--font-family) !important; letter-spacing: .06em !important;
    text-transform: uppercase !important; color: #857469 !important;
}
html body .tracker-step.completed .step-label,
html body .tracker-step.completed .step-number { color: var(--gc-ink-2) !important; }
html body .tracker-step.active .step-label,
html body .tracker-step.active .step-number { color: var(--gc-ink) !important; }
html body .tracker-mobile-current,
html body .tracker-mobile-label { font: 600 12px var(--font-family) !important; letter-spacing: .06em !important; color: var(--gc-ink-2) !important; }

/* Calendario */
html body .calendar-weekdays,
html body .calendar-weekdays * { font: 600 11.5px var(--font-family) !important; letter-spacing: .06em !important; color: var(--gc-ink-3) !important; }
html body .cal-day { font: 500 15px var(--font-family) !important; color: var(--gc-ink) !important; }
html body .cal-day.disabled { color: #c9beb5 !important; font-weight: 400 !important; }

/* Habitaciones */
html body .room-spec-item { font: 400 13px var(--font-family) !important; color: var(--gc-ink-2) !important; }
html body .room-spec-item .material-symbols-outlined { color: var(--gc-ink-3) !important; }
html body .room-price { font: 600 21px var(--font-family) !important; color: var(--gc-ink) !important; }
html body .room-price-desc { font: 400 12px var(--font-family) !important; color: var(--gc-ink-3) !important; letter-spacing: 0 !important; }
html body .pz-more-rooms { font: 500 12.5px var(--font-family) !important; letter-spacing: .02em !important; color: var(--gc-ink-2) !important; }
html body .capacity-indicator { font: 500 13px var(--font-family) !important; color: var(--gc-ink-2) !important; }

/* Avisos */
html body .included-transfer p { font: 400 14px/1.6 var(--font-family) !important; color: var(--gc-ink-2) !important; }
html body .included-transfer strong,
html body .refund-policy strong {
    font: 600 12px var(--font-family) !important; letter-spacing: .06em !important;
    text-transform: uppercase; color: var(--gc-bronze-dark) !important;
}
html body .included-tag { font: 600 11.5px var(--font-family) !important; letter-spacing: .04em !important; color: var(--gc-bronze-dark) !important; }
html body .bcv-rate-note,
html body .bs-price,
html body .bs-total-price { font-size: 12px !important; color: var(--gc-ink-3) !important; }

/* Acordeón y extras */
html body .acc-head__title { font: 600 14px var(--font-family) !important; letter-spacing: .01em !important; text-transform: none !important; color: var(--gc-ink) !important; }
html body .acc-head__summary { font: 400 13px var(--font-family) !important; color: var(--gc-ink-3) !important; }
html body .extra-item__text strong { font: 600 14px var(--font-family) !important; color: var(--gc-ink) !important; }
html body .extra-item__text small { font: 400 13px/1.45 var(--font-family) !important; color: var(--gc-ink-2) !important; }
html body .extra-item__price { font: 600 13.5px var(--font-family) !important; color: var(--gc-ink) !important; }

/* Botones y enlaces */
html body .btn { font: 600 12.5px var(--font-family) !important; letter-spacing: .08em !important; }
html body a:not(.btn):not(.back-to-home):not(.header-brand),
html body .corp-switch,
html body .summary-edit-link,
html body .room-includes-btn { font-weight: 500 !important; color: var(--gc-bronze-dark) !important; }
html body #wizard-step-1 .corp-switch-group--mobile .corp-switch { font: 500 12.5px/1.35 var(--font-family) !important; letter-spacing: 0 !important; }

/* Cabecera */
html body .hotel-header .back-to-home,
html body .hotel-header .back-to-home-text { font: 600 12px/1 var(--font-family) !important; letter-spacing: .08em !important; }
html body .hotel-header .currency-switch { font: 600 12px var(--font-family) !important; letter-spacing: .04em !important; }
html body .hotel-header .lang-switch__opt { font: 600 12px var(--font-family) !important; letter-spacing: .04em !important; color: rgba(255, 255, 255, .6) !important; }

/* Resumen */
html body .summary-item-value,
html body .sum-row-val { font: 500 14px var(--font-family) !important; color: var(--gc-ink) !important; }

/* Barra móvil: la capa común muestra «TOTAL» en lugar del rótulo largo en pantallas estrechas. */
html body .mobile-details-label { font: 600 11px var(--font-family) !important; letter-spacing: .04em !important; color: var(--gc-ink-3) !important; }
html body #mob-total-price,
html body .mobile-summary-cost { font: 700 19px var(--font-family) !important; color: var(--gc-ink) !important; }
html body .mobile-summary-label { font: 600 11px var(--font-family) !important; letter-spacing: .04em !important; color: var(--gc-ink-3) !important; text-transform: uppercase; }
@media (max-width: 430px) {
    html body .mobile-summary-label { font-size: 0 !important; }
    html body .mobile-summary-label::before { font: 600 11px var(--font-family) !important; letter-spacing: .06em !important; color: var(--gc-ink-3) !important; }
}

/* Cabecera en móvil: el logotipo con aire respecto a ES | EN. */
@media (max-width: 899px) {
    html body .hotel-header { padding-left: 16px !important; padding-right: 12px !important; gap: 14px !important; }
    html body .hotel-header .header-logo-img { height: 28px !important; max-width: 104px !important; }
    html body .hotel-header .header-actions { gap: 12px !important; }
}

/* =============================================================================
   Paso 4 en orden: primero para quién es, luego la nacionalidad y después los datos.
   Los campos que el portal mantiene bloqueados (aún no se ha elegido la nacionalidad,
   o se espera la búsqueda por cédula) no se muestran: aparecen cuando se pueden usar.
   ============================================================================= */
html body #panel-basic-details > .input-group:has(> .input-field:disabled),
html body #panel-basic-details > .input-group:has(> .phone-input-group .input-field:disabled),
html body #panel-basic-details > .input-group:has(> .phone-input-row .input-field:disabled),
html body #panel-basic-details > .input-group:has(select.input-field:disabled):not(#booking-config-wrapper),
html body #panel-basic-details > .input-group:has(.input-field:disabled):not(#booking-config-wrapper):not(:has(.input-field:not(:disabled))) { display: none !important; }
@media (prefers-reduced-motion: no-preference) {
    html body #panel-basic-details > .input-group { animation: gcRise .45s var(--gc-ease, ease) both; }
}

/* Cabecera: el enlace del logotipo toma el ancho del logotipo (antes medía 67 px y el logo se salía sobre la moneda). */
html body .hotel-header .header-brand { width: auto !important; min-width: 0 !important; flex: 0 0 auto !important; display: flex !important; align-items: center; }
html body .hotel-header .header-actions { min-width: 0 !important; margin-left: auto !important; }
@media (max-width: 899px) {
    html body .hotel-header .back-to-home-text { display: none !important; }
    html body .hotel-header .back-to-home { padding: 6px 2px !important; }
}
@media (max-width: 360px) {
    html body .hotel-header .header-logo-img { max-width: 88px !important; height: 24px !important; }
}

/* Barra inferior móvil: opaca (la foto de las habitaciones no debe transparentarse). */
html body #mobile-summary-toggle.mobile-summary-toggle {
    background: #ffffff !important; border-top: 1px solid var(--gc-line-strong) !important; border-radius: 0 !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
/* «Ir al inicio» en móvil: solo la flecha (la capa común repite el texto en ::after). */
@media (max-width: 899px) {
    html body .hotel-header .back-to-home::after,
    html body .hotel-header .back-to-home::before { content: none !important; display: none !important; }
}

/* Resumen lateral: etiquetas sin icono, como en el resto del portal. */
html body .summary-item-label .material-symbols-outlined, html body .refund-policy > svg { display: none !important; }

/* =============================================================================
   Acompañamiento (reservas-guide.js): acompañante junto al botón y «hay más abajo».
   ============================================================================= */
/* La línea: a la izquierda la pista «más abajo» (si hace falta), a la derecha qué falta o qué está listo.
   En escritorio es la fila de arriba de los botones del paso; en móvil, una franja sobre la barra inferior. */
html body .gc-guide,
html body .gc-guide-m {
    display: flex; align-items: center; gap: 14px; min-width: 0;
    font: 500 13px/1.4 var(--font-family) !important; color: var(--gc-ink-2, #5c4a3f) !important;
}
html body .gc-guide.is-empty { display: none !important; }
html body .wizard-card .wizard-footer:has(.gc-guide:not(.is-empty)) { flex-wrap: wrap !important; row-gap: 12px !important; }
html body .wizard-footer .gc-guide {
    order: -1; flex: 1 1 100% !important; max-width: none !important; margin: 0 !important;
    padding-bottom: 12px; border-bottom: 1px solid var(--gc-line, #e3dcd5);
}
html body .wizard-card .wizard-footer > .corp-switch-group { flex: 1 1 0 !important; min-width: 0 !important; }
html body .wizard-card .wizard-footer > .btn, html body .wizard-card .wizard-footer > #btn-confirm-whatsapp { flex: 0 0 auto !important; margin-left: auto; }

/* Mensaje: siempre pegado a la derecha, junto al botón de avanzar. */
html body .gc-msg { margin-left: auto; display: flex; align-items: baseline; gap: 9px; min-width: 0; text-align: right; }
html body .gc-guide__text { flex: 0 1 auto; min-width: 0; }
/* Marca de estado: raya bronce = falta algo; visto bronce = listo (nada que se lea como una letra). */
html body .gc-guide__dot {
    flex: 0 0 auto; width: 12px; height: 2px; border-radius: 0; border: 0; align-self: center;
    background: var(--gc-bronze, #9a5026);
}
html body .is-ok .gc-guide__dot {
    width: 5px; height: 10px; background: transparent; margin: 0 3px 0 2px;
    border-right: 2px solid var(--gc-bronze, #9a5026); border-bottom: 2px solid var(--gc-bronze, #9a5026);
    transform: translateY(-2px) rotate(45deg);
}
html body .is-ok .gc-guide__text { color: var(--gc-ink, #2b1a12); }

/* Pista «más abajo»: enlace sobrio, del mismo sistema que «Qué incluye». */
html body .gc-cue {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; margin: 0 !important;
    padding: 4px 0 !important; min-height: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; cursor: pointer; white-space: nowrap;
    font: 600 11.5px var(--font-family) !important; letter-spacing: .1em; text-transform: uppercase;
    color: var(--gc-bronze, #9a5026) !important;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
}
html body .gc-cue[hidden] { display: none !important; }
html body .gc-cue:hover { color: var(--gc-brown, #442c1f) !important; }
html body .gc-cue:focus-visible { outline: 2px solid var(--gc-bronze, #9a5026); outline-offset: 3px; }
html body .gc-cue__chev {
    width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}

/* Franja móvil: encima de la barra inferior, del mismo ancho que ella. */
html body .gc-guide-m {
    position: fixed; left: 0; right: 0; z-index: 998; margin: 0 !important; gap: 10px;
    padding: 8px 16px !important; background: #ffffff; border-top: 1px solid var(--gc-line, #e3dcd5);
    font-size: 12.5px !important; line-height: 1.35 !important;
    opacity: 0; transform: translateY(6px); pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
}
html body .gc-guide-m.is-on { opacity: 1; transform: none; pointer-events: auto; }
/* En móvil el mensaje va primero (a la izquierda) y la pista a la derecha, cerca del pulgar. */
html body .gc-guide-m .gc-msg { order: 0; margin-left: 0; margin-right: auto; text-align: left; flex: 1 1 auto; }
html body .gc-guide-m .gc-cue { order: 1; padding: 6px 0 6px 10px !important; border-left: 1px solid var(--gc-line, #e3dcd5) !important; text-decoration: none; letter-spacing: .06em; font-size: 11px !important; }
@media (min-width: 900px) { html body .gc-guide-m { display: none !important; } }

/* Degradado sobre el borde útil: sugiere que el contenido sigue, sin tapar nada que se pueda tocar. */
html body .gc-fade {
    position: fixed; z-index: 997; height: 56px; pointer-events: none; opacity: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .9));
    transition: opacity .35s ease;
}
html body .gc-fade.is-on { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
    @keyframes gcNudge { 0%, 100% { transform: translateY(-2px) rotate(45deg); } 50% { transform: translateY(1px) rotate(45deg); } }
    html body .gc-cue:not([hidden]) .gc-cue__chev { animation: gcNudge 1.6s ease-in-out 2; }
    html body .gc-cue:hover .gc-cue__chev { animation: gcNudge 1s ease-in-out infinite; }
    @keyframes gcSwap { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
    html body .gc-guide.is-swap .gc-guide__text,
    html body .gc-guide-m.is-swap .gc-guide__text { animation: gcSwap .35s ease both; }
    @keyframes gcTick { 0% { opacity: 0; transform: translateY(-2px) rotate(45deg) scale(.3); } 100% { opacity: 1; transform: translateY(-2px) rotate(45deg) scale(1); } }
    html body .is-ok.is-swap .gc-guide__dot { animation: gcTick .4s ease both; }
}
/* Con la pista propia, el aviso fijo del paso 3 sobra. */
html body .pz-more-rooms { display: none !important; }
/* Paso 3 sin nada elegido: «Capacidad seleccionada: 0 / N» no aporta; la línea ya dice qué hacer. */
html body.gc-no-room #room-capacity-indicator { display: none !important; }

/* Botón de avanzar aún no disponible: se ve como botón (en espera), no como un hueco. */
html body .btn-primary:disabled,
html body .mobile-primary-action:disabled {
    background: #f1ece6 !important; border-color: #e2d8ce !important; color: #87776b !important; cursor: not-allowed;
}
html body .btn-primary:disabled .material-symbols-outlined,
html body .mobile-primary-action:disabled .material-symbols-outlined { color: #87776b !important; }
@media (max-width: 899px) { html body .wizard-footer .gc-guide { display: none !important; } }

/* =============================================================================
   Pantallas bajas (móvil en horizontal, ventanas achatadas): la altura es lo escaso.
   Cabecera y pasos compactos; el acompañante y la etiqueta «desliza» se retiran
   (el botón de la barra ya dice qué falta) y queda solo el degradado como pista.
   ============================================================================= */
@media (max-height: 500px) and (orientation: landscape) {
    html body .hotel-header { min-height: 44px !important; padding-top: 4px !important; padding-bottom: 4px !important; }
    html body .hotel-header .header-logo-img { height: 24px !important; }
    html body .step-tracker { padding-top: 4px !important; padding-bottom: 4px !important; min-height: 0 !important; margin-top: 4px !important; margin-bottom: 6px !important; }
    html body .tracker-mobile-status { padding-top: 2px !important; padding-bottom: 4px !important; }
    html body .wizard-header { padding-top: 12px !important; }
    html body .wizard-header::after { margin-top: 6px !important; }
    html body .gc-guide-m { display: none !important; }
    html body .gc-fade { height: 40px !important; }
}
@media (max-height: 500px) and (orientation: landscape) {
    html body #mobile-summary-toggle.mobile-summary-toggle { left: 0 !important; right: 0 !important; width: auto !important; max-width: none !important; margin: 0 !important; transform: none !important; bottom: 0 !important; border-left: 0 !important; border-right: 0 !important; padding-left: max(16px, env(safe-area-inset-left)) !important; padding-right: max(16px, env(safe-area-inset-right)) !important; }
}

/* Cabecera: logotipo a la izquierda y todos los controles juntos a la derecha (el botón de sonido incluido). */
html body .hotel-header { justify-content: flex-start !important; }
html body .hotel-header .header-actions { margin-left: auto !important; }
html body .hotel-header > .mx-sonido, html body .hotel-header > button:last-child { margin-left: 10px !important; }
/* Barra de pasos: cuando queda fija al desplazarse, con el fondo de la página (no transparente). */
html body .step-tracker { background: var(--gc-ground) !important; }
@media (max-width: 899px) {
    html body .booking-portal { padding-top: 0 !important; }
    html body .step-tracker { padding-top: 12px !important; }
}

/* Avisos flotantes (pz-toast): arriba, justo bajo la cabecera y los pasos, en todos los tamaños.
   Abajo chocaban con el botón de confirmar, la franja del acompañante, la barra y la burbuja del chat. */
html body .pz-toast { top: calc(var(--gc-top-ui, 96px) + 12px) !important; bottom: auto !important; z-index: 1001 !important; transform: translate(-50%, -8px) !important; width: max-content !important; max-width: min(560px, calc(100vw - 32px)) !important; }
html body .pz-toast.is-on { transform: translate(-50%, 0) !important; }
@media (max-width: 899px) {
    html body .pz-toast { left: 16px !important; right: 16px !important; width: auto !important; max-width: none !important; transform: translateY(-8px) !important; }
    html body .pz-toast.is-on { transform: none !important; }
}

/* Módulos comunes (vistas de habitaciones, accesos, cotización): esquinas rectas como el resto del portal. */
:root { --ux-radius: 2px; --ux-radius-sm: 2px; --ux-pill: 2px; }

/* ---------------------------------------------------------------- el final del paso se alcanza
   Igual que en reservas-ux.css (que esta casa no carga): el portal desplaza por dentro y abajo
   hay dos cosas fijas, la barra inferior y la franja del acompañante. El hueco reservado contaba
   solo la barra, y en pantallas cortas el «Resumen de tu solicitud» del paso 5 quedaba debajo sin
   forma de bajar hasta él. reservas-guide.js mide las dos y lo deja en --gc-bottom-ui. */
@media (max-width: 899px) {
    html body .booking-portal {
        padding-bottom: calc(var(--gc-bottom-ui, 78px) + 28px + env(safe-area-inset-bottom)) !important;
        scroll-padding-bottom: calc(var(--gc-bottom-ui, 78px) + 28px) !important;
    }
}