/* ═══════════════════════════════════════════════════════════════════════════
   Cabecera iOS de la ficha de servicio — tours, botes, autos y espacios.

   La referencia es la tarjeta de contacto del iPhone: la foto llena la
   pantalla, el nombre va encima, debajo la fila de botones redondos y, más
   abajo, las tarjetas. De la mitad para abajo la foto se difumina —un
   backdrop-filter con máscara, no una imagen aparte— y al final se funde con
   el fondo de la página, que sigue como siempre.

   El marcado lo pone Layout::parts.pdp.ios-hero y la galería que va detrás es
   la de siempre (Layout::parts.service-gallery) con el estilo `ios`, así que
   el visor a pantalla completa sigue siendo el mismo de las otras siete
   composiciones.

   Los tonos salen de las variables --cf-* que define pdp-modern.css, que a su
   vez las toma de los colores del tema del vendedor.
   ═══════════════════════════════════════════════════════════════════════════ */

.bc-ioshero {
    /* Dónde deja de verse la foto nítida y dónde el desenfoque ya es total.
       Van en altura de pantalla, no en porcentaje del héroe: el héroe crece con
       el formulario de reserva y, medido en porcentaje, el corte se movía según
       cuántas filas de personas tuviera el servicio. */
    --ioshero-sharp: 37svh;
    --ioshero-blur: 63svh;

    position: relative;
    /* Sin transform ni filter acá: crearían un bloque contenedor y el modal de
       consulta del formulario de reserva, que es position:fixed, quedaría
       encerrado dentro del héroe. */
    isolation: isolate;
    overflow: hidden;
    min-height: 100svh;
    margin-bottom: 8px;
    background: linear-gradient(160deg, #1f2937 0%, #0f172a 100%);
}

/* Navegadores sin svh: vh es lo más cercano. */
@supports not (height: 1svh) {
    .bc-ioshero {
        min-height: 100vh;
        --ioshero-sharp: 37vh;
        --ioshero-blur: 63vh;
    }
}

/* ── La foto destacada, a sangre y por detrás de todo ────────────────────── */
.bc-ioshero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #0f172a;
}

.bc-ioshero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── El desenfoque de la mitad para abajo ────────────────────────────────── */
.bc-ioshero-glass {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    -webkit-backdrop-filter: blur(30px) saturate(150%);
    backdrop-filter: blur(30px) saturate(150%);
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%,
        transparent var(--ioshero-sharp),
        #000 var(--ioshero-blur),
        #000 100%);
    mask-image: linear-gradient(to bottom,
        transparent 0%,
        transparent var(--ioshero-sharp),
        #000 var(--ioshero-blur),
        #000 100%);
}

/* Sin backdrop-filter no hay desenfoque posible; queda el degradado, que es
   lo que sostiene el texto. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .bc-ioshero-glass { background: linear-gradient(to bottom, transparent 30%, rgba(15, 23, 42, .55) 70%); }
}

.bc-ioshero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* El tramo del medio va oscuro a propósito: ahí caen el nombre y los botones
       de contacto, que son blancos, y sobre una foto clara quedaban ilegibles.
       Abajo se afloja: esa franja la ocupa la tarjeta del formulario, que lleva
       el fondo del tema y no necesita nada detrás — con el velo al máximo
       quedaba una banda negra de más. Arriba se mantiene suave para no ensuciar
       la imagen. */
    background:
        linear-gradient(to bottom,
            rgba(6, 12, 24, .46) 0%,
            rgba(6, 12, 24, .12) 16%,
            rgba(6, 12, 24, .44) 42%,
            rgba(6, 12, 24, .62) 62%,
            rgba(6, 12, 24, .34) 100%);
}

/* El cierre: la foto se apaga contra el fondo de la página. */
.bc-ioshero-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 160px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--cf-bg, #fff));
}



/* ── El contenido de encima ──────────────────────────────────────────────── */
.bc-ioshero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    max-width: 560px;
    margin: 0 auto;
    padding: 14px 16px 56px;
    text-align: center;
    /* El fondo tiene que seguir recibiendo el toque que abre el visor: solo lo
       que es botón vuelve a escuchar. */
    pointer-events: none;
}

@supports not (min-height: 100svh) {
    .bc-ioshero-inner { min-height: 100vh; }
}

.bc-ioshero-inner a,
.bc-ioshero-inner button,
.bc-ioshero-inner .bc-ioshero-card { pointer-events: auto; }

/* ── Fila de arriba: volver, compartir y guardar ─────────────────────────── */
.bc-ioshero-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.bc-ioshero-nav-right {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* 40 y no 38: la piel del tema le pone min-height:40px !important a todo
   <button> de la ficha en móvil, y a 38 los círculos salían ovalados. */
.bc-ioshero-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(20, 24, 33, .34);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    color: #fff;
    cursor: pointer;
    transition: background .2s, transform .2s;
}

.bc-ioshero-chip:hover,
.bc-ioshero-chip:focus-visible { background: rgba(20, 24, 33, .55); color: #fff; }
.bc-ioshero-chip:active { transform: scale(.94); }

/* Guardado: el corazón se llena, igual que en el resto de la ficha. */
.bc-ioshero-chip.service-wishlist.active svg,
.bc-ioshero-chip.service-wishlist.wishlist-active svg { fill: #ff375f; stroke: #ff375f; }

/* ── Píldora, nombre y datos ─────────────────────────────────────────────── */
.bc-ioshero-copy {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

.bc-ioshero-pill {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 5px 13px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cf-primary, #6366f1) 82%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.3;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.bc-ioshero-title {
    margin: 0;
    color: #fff;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.02em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
    text-wrap: balance;
}

.bc-ioshero-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 12px;
    color: rgba(255, 255, 255, .88);
    font-size: 13px;
    font-weight: 500;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
}

/* Los !important de acá y de los botones redondos son contra el color de enlace
   de la piel del tema, que pinta con el acento del vendedor todo <a> que no sea
   un botón, con un selector de siete clases. Sobre la foto, el texto va blanco
   sí o sí. */
.bc-ioshero-sub-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: inherit !important;
}

a.bc-ioshero-sub-item:hover,
a.bc-ioshero-sub-item:focus { color: #fff !important; text-decoration: underline; }
.bc-ioshero-sub .star { color: #ffcc00; }
.bc-ioshero-sub .sep { opacity: .6; }

/* ── Puntos de la galería ────────────────────────────────────────────────── */
/* Fuera: debajo del subtítulo se leían como una línea de puntos suelta, no como
   un indicador. Se pasa de foto deslizando, y tocando la foto se abre el visor
   a pantalla completa con todas. */
.bc-ioshero-dots { display: none !important; }

/* Los puntos solo se usan en el carrusel de móvil de la ficha. */
.bc-svcg-dots { display: none; }

.bc-ioshero-dots-oculto {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 2px;
}

.bc-ioshero-dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .42);
    cursor: pointer;
    transition: background .25s, width .25s;
}

.bc-ioshero-dot.is-active {
    width: 18px;
    border-radius: 999px;
    background: #fff;
}

/* Los puntos son <button>, y en móvil la piel del tema estira todo <button> de
   la ficha a min-height:40px !important con un selector de cuatro clases. Para
   ganarle hay que igualar su forma; sin esto los puntos salían como barritas de
   40px de alto. */
body.bc-skin .bc_wrap .nc-ListingExperiencesDetailPage .bc-ioshero .bc-ioshero-dot {
    display: inline-block !important;
    min-height: 0 !important;
    height: 6px !important;
}

body.bc-skin .bc_wrap .nc-ListingExperiencesDetailPage .bc-ioshero .bc-ioshero-dot.is-active {
    height: 6px !important;
}

/* ── Los cuatro botones redondos ─────────────────────────────────────────── */
.bc-ioshero-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 16px 0 12px;
}

.bc-ioshero-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: #fff !important;
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
}

.bc-ioshero-action:hover,
.bc-ioshero-action:focus { color: #fff !important; text-decoration: none; }

.bc-ioshero-action .ico i { color: inherit; }

.bc-ioshero-action .ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    /* Cristal oscuro y no claro: el icono va en blanco y sobre una foto clara
       un fondo translúcido blanco lo hacía desaparecer. */
    border: 1px solid rgba(255, 255, 255, .30);
    background: rgba(16, 21, 32, .42);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
    font-size: 19px;
    line-height: 1;
    transition: background .2s, transform .2s;
}

.bc-ioshero-action:hover .ico { background: rgba(255, 255, 255, .28); }
.bc-ioshero-action:active .ico { transform: scale(.93); }

.bc-ioshero-action .txt {
    text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
    line-height: 1.2;
}

/* El canal que el vendedor no cargó se ve, pero apagado: así el visitante sabe
   que existe y que ese negocio no lo ofrece. */
.bc-ioshero-action.is-off {
    opacity: .38;
    cursor: default;
    pointer-events: none;
}


/* ── De la ficha para abajo, todo sigue igual ────────────────────────────── */
.bc-ioshero + .bc-detail-main,
.bc-ioshero ~ .container .bc-detail-main { margin-top: 8px; }

/* El nombre, la etiqueta y el rating ya no se repiten abajo: los quita
   Layout::parts.pdp.header con $heroAbove, no una regla de esta hoja, para que
   la página no sirva dos h1. */


/* ═══════════════════════════════════════════════════════════════════════════
   Y ahora, quién se ve dónde. Todo por ancho de pantalla y nada más: las dos
   cabeceras van siempre en el HTML, así que al estirar o encoger la ventana el
   cambio es inmediato, sin recargar y sin preguntarle nada al navegador.

   El formulario de reserva, en cambio, existe UNA sola vez —es una app Vue
   montada sobre un id único y dos copias no arrancan—. Por eso no se duplica:
   vive en la barra lateral, su sitio de escritorio, y en móvil sube hasta
   debajo de la foto con `order`, que reordena sin mover nada del HTML.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Computadora: la ficha de siempre ────────────────────────────────────── */
@media (min-width: 768px) {
    .bc-ioshero,
    .bc-svcg-movil { display: none !important; }

    /* El desplegable de extras es cosa del teléfono: en la columna lateral los
       precios extra y los cargos se leen enteros, sin plegar. El interruptor se
       inyecta igual —el JS no mira el ancho, para que estirar la ventana no deje
       la ficha a medias— y acá se esconde. La forma larga es contra el
       `display: inline-flex !important` que la piel del tema le pone a todo
       <button> de la ficha. */
    body.bc-skin .bc_wrap .nc-ListingExperiencesDetailPage .bc-pdp-extras-toggle,
    .bc-pdp-extras-toggle { display: none !important; }
}

/* ── Teléfono: la cabecera iOS ───────────────────────────────────────────── */
@media (max-width: 767px) {
    /* La galería del tema y el título de la columna ya se leen arriba, en el
       héroe. Siguen en el HTML —de ahí sale el h1 de la página— pero no se
       dibujan dos veces. */
    /* La galería de arriba es la de escritorio; en teléfono el carrusel es el
       que va debajo del formulario. */
    .nc-ListingExperiencesDetailPage > .bc-svcg { display: none !important; }

    /* Ancho de pantalla exacto: con márgenes negativos «a ojo» quedaba
       asomando un pedazo de la foto siguiente. Así entra una foto entera por
       pantalla y la siguiente se trae deslizando. */
    .bc-svcg-movil {
        width: 100vw;
        margin: 0 0 22px calc(50% - 50vw);
    }

    .bc-svcg-movil .bc-svcg { margin-bottom: 0; }

    /* Tarjetas redondeadas con el radio del tema, y la siguiente asomando:
       entra una foto y un tercio de la que viene, que es lo que le dice al
       visitante que hay más y se pasan deslizando.

       Llevan una clase de más y `!important` porque el bloque de teléfono de
       service-gallery.css cuadra las esquinas y pega las fotas sin separación,
       y esa hoja se enlaza después que ésta. */
    .bc-svcg-movil .bc-svcg .bc-svcg-track {
        gap: 10px !important;
        padding: 0 16px !important;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 16px;
    }

    .bc-svcg-movil .bc-svcg .bc-svcg-item {
        flex: 0 0 76% !important;
        width: 76% !important;
        border-radius: var(--bc-radius, 12px) !important;
        overflow: hidden;
        scroll-snap-align: start;
    }

    /* Ni «ver todas las fotos» ni flechas: se pasa deslizando o con los puntos,
       y tocando la foto se abre el visor a pantalla completa con todas. Van con
       la forma larga porque la piel del tema fuerza `display: inline-flex
       !important` a todo <button> de la ficha. */
    body.bc-skin .bc_wrap .nc-ListingExperiencesDetailPage .bc-svcg-movil .bc-svcg-all,
    body.bc-skin .bc_wrap .nc-ListingExperiencesDetailPage .bc-svcg-movil .bc-svcg-arrow,
    .bc-svcg-movil .bc-svcg-all,
    .bc-svcg-movil .bc-svcg-arrow { display: none !important; }

    /* Sin realce sobre la foto que se toca. El componente de galería oscurece
       la foto y la agranda un poco al pasar el ratón por encima; en un teléfono
       no hay ratón, así que ese estado se queda pegado en la última que tocaste
       y se ve como una sombra encima. */
    .bc-svcg-movil .bc-svcg .bc-svcg-item::after { content: none !important; }
    .bc-svcg-movil .bc-svcg .bc-svcg-item,
    .bc-svcg-movil .bc-svcg .bc-svcg-item:hover { box-shadow: none !important; }
    .bc-svcg-movil .bc-svcg .bc-svcg-item:hover img,
    .bc-svcg-movil .bc-svcg .bc-svcg-item img { transform: none !important; }

    /* ── Los puntos del carrusel ───────────────────────────────────────────── */
    .bc-svcg-movil .bc-svcg-dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-top: 14px;
        padding: 0 16px;
    }

    /* El punto activo se estira en una cápsula en vez de cambiar de tamaño:
       así la fila no se mueve al pasar de foto. La forma larga del selector es,
       otra vez, contra el min-height de 40px que la piel le pone a los
       <button> de la ficha. */
    body.bc-skin .bc_wrap .nc-ListingExperiencesDetailPage .bc-svcg-movil .bc-svcg-dot,
    .bc-svcg-movil .bc-svcg-dot {
        display: inline-block !important;
        width: 7px;
        height: 7px !important;
        min-height: 0 !important;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: color-mix(in srgb, var(--cf-text, #374151) 22%, transparent);
        cursor: pointer;
        transition: width .25s ease, background .25s ease;
    }

    body.bc-skin .bc_wrap .nc-ListingExperiencesDetailPage .bc-svcg-movil .bc-svcg-dot.is-active,
    .bc-svcg-movil .bc-svcg-dot.is-active {
        width: 22px;
        background: var(--cf-primary, #6366f1);
    }

    .bc-detail-content .bc-badge-row,
    .bc-detail-content > .listingSection__wrap > .bc-title,
    .bc-detail-content .bc-clasico-head > .bc-title { display: none !important; }

    /* La dirección y el rating no van bajo el nombre —ahí quedaban como una
       línea suelta encima de los botones— sino debajo del formulario, que es
       donde ya estaban en la ficha clásica. Así que en el héroe se quitan y en
       la columna de contenido se dejan ver: como el formulario sube con
       `order`, `.bc-meta` cae justo después de él. */
    .bc-ioshero-sub { display: none; }

    .bc-detail-content .bc-meta {
        margin: 0 0 4px;
        font-size: 14px;
    }

    /* La foto se desplaza con la página, como todo lo demás. Para que llegue por
       detrás del formulario, el héroe reserva abajo la franja donde éste va a
       caer y el bloque de contenido sube justo esa misma cantidad. Los dos
       valores se acompañan: si se toca uno, hay que mover el otro. */
    .bc-ioshero {
        margin-bottom: 0;
        min-height: 91svh;
    }

    .bc-ioshero-inner {
        min-height: 91svh;
        padding-bottom: 33svh;
    }

    /* El desvanecido final, más corto: antes se comía media foto. */
    .bc-ioshero-fade { height: 120px; }

    /* El motor de reservas sube al primer lugar de la ficha y se apoya sobre la
       parte difuminada de la foto. */
    .bc-detail-main {
        display: flex !important;
        flex-direction: column !important;
        margin-top: -31svh !important;
    }

    /* ── La barra fija de abajo, solo cuando hace falta ──────────────────────
       Mientras el formulario está a la vista, la barra sobra: repite el precio
       y ofrece un «Reservar» que lleva a lo que ya se está viendo. Sale cuando
       el formulario se va de pantalla y se esconde al volver arriba.

       Quién avisa es un observador de intersección, tres líneas en
       Layout::parts.pdp.scripts, que solo pone y quita una clase en el <body>.
       Se intentó con líneas de tiempo de scroll, que hubiera sido CSS puro,
       pero el tema declara `overflow` en `html` y en `body` y eso rompe el
       anclaje de la línea de tiempo: se quedaba congelada. */
    .nc-ListingExperiencesDetailPage .bc-mobile-footer {
        transform: translateY(115%);
        opacity: 0;
        pointer-events: none;
        transition: transform .3s ease, opacity .3s ease;
    }

    body.bc-pdp-reservar-fuera .nc-ListingExperiencesDetailPage .bc-mobile-footer {
        transform: none;
        opacity: 1;
        pointer-events: auto;
    }

    /* Y de aquí para abajo, la ficha de siempre: este bloque lleva el fondo de
       la página, opaco, y es el que deja de mostrar la foto. Se extiende a
       sangre con los -50vw del box-shadow para que no asome nada por los lados
       del .container. */
    .bc-detail-content {
        position: relative;
        background: var(--cf-bg, #fff);
        box-shadow: -50vw 0 0 var(--cf-bg, #fff), 50vw 0 0 var(--cf-bg, #fff);
        padding: 4px 0 40px;
        margin-top: 0;
    }

    /* ── La barra lateral tiene DOS estados en el teléfono ───────────────────────
       Suelta —lo normal— es un bloque más de la página, subido con `order` hasta
       debajo de la foto, y se desplaza con ella. Con `.show` vuelve a ser el panel
       que sube desde abajo, que es el que ya está dibujado en pdp-modern.css y el
       que abre el botón de la barra fija cuando el formulario quedó atrás.

       De ahí el `:not(.show)` de todo este bloque: sin él, estas reglas —que
       llevan `!important` para ganarle a la hoja en línea de la ficha de autos—
       aplastaban el panel y dejaban el formulario clavado en mitad de la página.
       El resultado era el velo de Bootstrap sin nada debajo.

       El `.nc-ListingExperiencesDetailPage` de delante también es a propósito: la
       ficha de autos repite en su <style> en línea el mismo
       `position: fixed !important`, y al ir después que esta hoja ganaba el
       empate. Con la clase de más, no hay empate que valga. */
    .nc-ListingExperiencesDetailPage .bc-detail-sidebar:not(.show) {
        order: -1;
        position: relative !important;
        inset: auto !important;
        z-index: auto !important;
        display: block !important;
        overflow: visible !important;
        margin-bottom: 0;
        padding-bottom: 30px;
    }

    .nc-ListingExperiencesDetailPage .bc-detail-sidebar:not(.show) .bc-sidebar-backdrop { display: none !important; }

    /* La ✕ de cerrar solo hace falta con el panel abierto. Es un <button> y la
       piel del tema fuerza `display: inline-flex !important` a todos los de la
       ficha con un selector de cuatro clases: para esconderla hay que igualarle
       la forma y sumar una más. */
    body.bc-skin .bc_wrap .nc-ListingExperiencesDetailPage .bc-detail-sidebar:not(.show) .bc-sidebar-close,
    .nc-ListingExperiencesDetailPage .bc-detail-sidebar:not(.show) .bc-sidebar-close { display: none !important; }

    .nc-ListingExperiencesDetailPage .bc-detail-sidebar:not(.show) .bc-sidebar-panel {
        display: block !important;
        position: static !important;
        transform: none !important;
    }
    .nc-ListingExperiencesDetailPage .bc-detail-sidebar:not(.show) .bc-sidebar-sticky {
        position: static !important;
        top: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* ── Y con el panel abierto, dos retoques al prediseño ──────────────────── */
    /* Reservaba 100px muertos abajo para no tapar la barra fija; pero al abrir el
       panel la barra se esconde (body.bc-modal-open), así que eran 100px de nada
       debajo del botón de reservar. */
    .nc-ListingExperiencesDetailPage .bc-detail-sidebar.show .bc-sidebar-sticky {
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* El desplegable de extras es para el formulario reducido del héroe, donde no
       cabe todo. En el panel cabe: los extras salen abiertos y el interruptor
       sobra. La forma larga es contra el `display: inline-flex !important` que la
       piel del tema le pone a todo <button> de la ficha. */
    body.bc-skin .bc_wrap .nc-ListingExperiencesDetailPage .bc-detail-sidebar.show .bc-pdp-extras-toggle,
    .nc-ListingExperiencesDetailPage .bc-detail-sidebar.show .bc-pdp-extras-toggle { display: none !important; }

    /* ── Lo que el panel abre por encima de sí mismo ─────────────────────────────
       El calendario no vive dentro del formulario: daterangepicker lo cuelga del
       <body> con z-index 10050, que le alcanzaba de sobra cuando el formulario era
       un bloque de la página. El panel se apoya en la escalera del prediseño
       —99999 el fondo, 100000 el velo, 100001 la hoja—, así que el calendario
       aparecía DEBAJO: se abría, y no se veía. El mismo agujero tienen los modales
       de Bootstrap, que es lo que abre la pestaña de «Consultar» de los servicios
       que aceptan las dos cosas.

       Se sube lo de fuera en vez de bajar el panel: la escalera del panel también
       la escribe la hoja en línea de la ficha de autos, y tocarla ahí obliga a
       tocarla en dos sitios. `body.bc-modal-open` solo existe mientras el panel
       está abierto, así que esto no puede afectar a nada más.

       El `html` de delante no sobra. `style.css` del tema trae
       `body.bc-skin .daterangepicker { z-index: 10050 !important }`, que empata en
       especificidad con `body.bc-modal-open .daterangepicker` —dos clases y un
       elemento cada uno— y se enlaza DESPUÉS que esta hoja, así que ganaba el
       empate y el calendario se quedaba debajo igual. Con el `html` son dos
       elementos y ya no hay empate. */
    html body.bc-modal-open .daterangepicker { z-index: 100030 !important; }
    html body.bc-modal-open .modal { z-index: 100020 !important; }
    html body.bc-modal-open .modal-backdrop { z-index: 100010 !important; }

    .bc-detail-sidebar:not(.show) .listingSectionSidebar__wrap {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* app.css lo esconde por debajo de 991px, de cuando el formulario solo
       vivía en la barra lateral de escritorio. */
    .bc-detail-sidebar:not(.show) .bc_single_book_wrap { display: block !important; }

    /* ── La cabecera del sitio, mientras hay foto detrás ─────────────────────────
       Sobre el héroe, la barra blanca flotante se lee como una tarjeta pegada
       arriba y le corta la foto en seco. Acá pasa a ser cristal oscuro, sin borde
       ni sombra —nada que la recorte— y más baja que en el resto del sitio.

       El interruptor no es nuevo: `bc-header-solid` es la clase que ya pone
       Layout::parts.hero-header-script cuando se baja del hero, la misma que usan
       la portada y los listados del minisitio. Acá solo se dice quién entra, con
       el mismo `:has()` que usa minisite-cards.css para lo mismo. En cuanto se
       pasa la foto, vuelve la barra de siempre.

       El `!important` es obligado: la hoja del minisitio escribe el fondo, el
       borde y la sombra de .bc_header con !important. */
    /* El `body` reserva 64px para la barra flotante y la ficha añade otros 8: con
       eso, el héroe empezaba por debajo y la barra quedaba como una tarjeta sobre
       una franja de color, no sobre la foto. Acá la foto arranca en el borde de
       arriba y la barra flota encima. */
    body:has(.bc-ioshero) { padding-top: 0 !important; }
    body:has(.bc-ioshero) .nc-ListingExperiencesDetailPage { padding-top: 0 !important; }

    /* Y la barra deja de ser una pastilla centrada: va de borde a borde, pegada
       arriba y sin esquinas. Nada la recorta contra la foto. */
    body:has(.bc-ioshero) .bc_header {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        transform: none !important;
        border-radius: 0 !important;
        padding-top: env(safe-area-inset-top, 0px) !important;
    }

    body:has(.bc-ioshero) .bc_header:not(.bc-header-solid) {
        background: rgba(12, 17, 28, .26) !important;
        -webkit-backdrop-filter: saturate(140%) blur(18px) !important;
        backdrop-filter: saturate(140%) blur(18px) !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* Los botones del héroe bajan lo que ocupa la barra, o quedarían debajo. */
    body:has(.bc-ioshero) .bc-ioshero-inner {
        padding-top: calc(58px + env(safe-area-inset-top, 0px));
    }

    /* Más compacta que en el resto del sitio, con foto o sin ella: si el alto
       cambiara al volverse sólida, la barra pegaría un salto al desplazarse. */
    body:has(.bc-ioshero) .bc_header .content,
    body:has(.bc-ioshero) .bc_header .content .header-left { min-height: 44px !important; }
    body:has(.bc-ioshero) .bc_header .container { padding: 0 14px !important; }

    /* El logo y los iconos, en blanco mientras la barra es cristal. */
    body:has(.bc-ioshero) .bc_header:not(.bc-header-solid) .content .header-left .bc-logo,
    body:has(.bc-ioshero) .bc_header:not(.bc-header-solid) .content .header-left .bc-logo-text,
    body:has(.bc-ioshero) .bc_header:not(.bc-header-solid) .content .header-left .bc-menu > .main-menu > li > a,
    body:has(.bc-ioshero) .bc_header:not(.bc-header-solid) .content .header-right .topbar-items li > a,
    body:has(.bc-ioshero) .bc_header:not(.bc-header-solid) .content .header-right .bc-header-selectors li a,
    body:has(.bc-ioshero) .bc_header:not(.bc-header-solid) .content .header-right .bc-more-menu {
        color: #fff !important;
        opacity: 1 !important;
        text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
    }

    /* La hamburguesa no lleva pastilla: la barra entera ya es cristal, y un
       recuadro claro encima solo agrega otro borde. El relleno aparece al tocarla,
       como confirmación. */
    body:has(.bc-ioshero) .bc_header .content .header-right .bc-more-menu {
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
        border: 0 !important;
    }

    body:has(.bc-ioshero) .bc_header:not(.bc-header-solid) .content .header-right .bc-more-menu:active {
        background: rgba(255, 255, 255, .18) !important;
    }

    /* ── El motor de reservas, en versión mínima ─────────────────────────────────
       Sin tarjeta y sin fondo: el formulario se apoya directo sobre la foto
       difuminada, en blanco, y queda reducido a tres renglones —fechas, personas y
       el botón—, más el total en cuanto hay fecha. El precio de cabecera, la cinta
       de descuento y las leyendas de confianza se esconden acá: siguen en el HTML
       y en la ficha de escritorio, y el precio se lee igual en la barra fija de
       abajo. Los precios extra, los descuentos y los cargos no se esconden: van
       plegados, más abajo en esta misma hoja. */
    .bc-detail-sidebar:not(.show) {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        text-align: left;
    }

    .bc-detail-sidebar:not(.show) .form-head,
    .bc-detail-sidebar:not(.show) .nav-enquiry,
    .bc-detail-sidebar:not(.show) .tour-sale-box,
    .bc-detail-sidebar:not(.show) .bc_booking_trust,
    .bc-detail-sidebar:not(.show) .price-subcopy,
    .bc-detail-sidebar:not(.show) .bc-no-charge { display: none !important; }

    /* Los colores salen del tema del vendedor, no de valores fijos: --cf-text y
       la rampa --cf-neutral-* son las mismas que usa el resto de la ficha, así
       que si el vendedor cambia su color de texto o de fondo, esto lo sigue. */
    .bc-detail-sidebar:not(.show),
    .bc-detail-sidebar:not(.show) .form-content,
    .bc-detail-sidebar:not(.show) .form-content .render,
    .bc-detail-sidebar:not(.show) .form-content .check-in-render,
    .bc-detail-sidebar:not(.show) .form-content .input-number-group input {
        color: var(--cf-neutral-900, #111827) !important;
        text-shadow: none !important;
    }

    .bc-detail-sidebar:not(.show) .form-content .arrow {
        color: var(--cf-neutral-500, #6b7280) !important;
    }

    /* Los signos de sumar y restar, en el color de marca — igual que en la
       ficha de escritorio. */
    .bc-detail-sidebar:not(.show) .form-content .input-number-group i {
        color: var(--cf-primary, #6366f1) !important;
    }

    .bc-detail-sidebar:not(.show) .form-content label {
        color: var(--cf-neutral-600, #4b5563) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: .04em;
        text-transform: uppercase;
        margin: 0 0 2px !important;
    }

    .bc-detail-sidebar:not(.show) .form-content .check-in-render,
    .bc-detail-sidebar:not(.show) .form-content .render {
        font-size: 15px !important;
        font-weight: 600 !important;
    }

    /* El campo del número de personas es un <input>: sin fondo blanco ni marco. */
    .bc-detail-sidebar:not(.show) .form-content .input-number-group input {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        width: 42px;
        text-align: center;
        font-size: 16px !important;
        font-weight: 700 !important;
    }

    .bc-detail-sidebar:not(.show) .form-content .input-number-group i { font-size: 22px; opacity: .9; }

    /* app.css esconde .bc_single_book_wrap por debajo de 991px: venía de cuando el
       formulario vivía solo en la barra lateral y en móvil se abría como panel. Acá
       el formulario ES la ficha, así que en el héroe se muestra siempre. */
    .bc-detail-sidebar:not(.show) .bc_single_book_wrap {
        display: block !important;
    }

    /* El formulario de reserva entra tal cual del módulo; acá solo se le quita el
       marco propio, que dentro de la tarjeta sería un borde sobre otro. */
    .bc-detail-sidebar:not(.show) .bc_single_book_wrap,
    .bc-detail-sidebar:not(.show) .bc_single_book,
    .bc-detail-sidebar:not(.show) .listingSectionSidebar__wrap {
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }

    .bc-detail-sidebar:not(.show) .bc_single_book_wrap > .bc_single_book { padding: 0; }

    /* El formulario del módulo trae una barra de color de 5px arriba y una línea
       gris encima del botón: dentro de la tarjeta blanca quedaban bien, sobre la
       foto son dos rayas sueltas. Van con !important porque las escriben las hojas
       de cada módulo, que se enlazan después de ésta. */
    .bc-detail-sidebar:not(.show) .bc_single_book,
    .bc-detail-sidebar:not(.show) .bc_single_book_wrap,
    .bc-detail-sidebar:not(.show) .form-book,
    .bc-detail-sidebar:not(.show) .submit-group {
        border: 0 !important;
        background: transparent !important;
    }

    /* Fechas y personas van juntos en una tarjeta de cristal, igual que los
       bloques de la tarjeta de contacto del iPhone: fondo translúcido, la foto
       difuminada asomando por detrás, esquinas redondeadas y una línea fina entre
       renglones. `.form-content` es exactamente lo que envuelve esos dos campos. */
    .bc-detail-sidebar:not(.show) .form-content {
        background: color-mix(in srgb, var(--cf-bg, #fff) 94%, transparent) !important;
        -webkit-backdrop-filter: blur(26px) saturate(150%);
        backdrop-filter: blur(26px) saturate(150%);
        border: 1px solid color-mix(in srgb, var(--cf-text, #374151) 12%, transparent) !important;
        border-radius: var(--bc-radius, 18px);
        box-shadow: 0 18px 44px rgba(6, 12, 24, .22);
        padding: 0 14px !important;
        overflow: hidden;
    }

    /* Sin backdrop-filter, opaco del todo: la foto no puede asomar por debajo
       del texto. */
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .bc-detail-sidebar:not(.show) .form-content { background: var(--cf-bg, #fff) !important; }
    }

    /* El input del calendario va oculto detrás del renglón de fechas, pero traía
       marco y fondo claro y asomaba como una rendija. */
    .bc-detail-sidebar:not(.show) .form-date-field > input {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* Fechas y personas: sin caja, con una línea fina ENTRE renglones. Va como
       border-top del siguiente y no como border-bottom del anterior: los bloques
       que escondimos siguen en el HTML, y con border-bottom el último renglón
       visible se quedaba con una raya colgando debajo. */
    .bc-detail-sidebar:not(.show) .form-content .form-group {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    .bc-detail-sidebar:not(.show) .form-content .form-group + .form-group {
        border-top: 1px solid color-mix(in srgb, var(--cf-text, #374151) 12%, transparent) !important;
    }

    .bc-detail-sidebar:not(.show) .form-content .date-wrapper,
    .bc-detail-sidebar:not(.show) .form-content .guest-wrapper {
        padding: 10px 0 !important;
        background: transparent !important;
        border: 0 !important;
    }

    /* El total aparece recién al elegir fecha y personas (el formulario lo
       trae con v-if), y es lo que el cliente necesita ver antes de reservar.
       Va en su propia tira de cristal, entre el bloque de campos y el botón. */
    .bc-detail-sidebar:not(.show) .form-section-total {
        display: block !important;
        list-style: none;
        margin: 10px 0 0 !important;
        padding: 11px 14px !important;
        border: 1px solid color-mix(in srgb, var(--cf-text, #374151) 12%, transparent);
        border-radius: var(--bc-radius, 14px);
        background: color-mix(in srgb, var(--cf-bg, #fff) 94%, transparent);
        -webkit-backdrop-filter: blur(26px) saturate(150%);
        backdrop-filter: blur(26px) saturate(150%);
    }

    .bc-detail-sidebar:not(.show) .form-section-total li {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        color: var(--cf-neutral-900, #111827) !important;
        text-shadow: none;
    }

    .bc-detail-sidebar:not(.show) .form-section-total li + li {
        margin-top: 5px;
        padding-top: 5px;
        border-top: 1px solid color-mix(in srgb, var(--cf-text, #374151) 12%, transparent);
        opacity: .8;
    }

    .bc-detail-sidebar:not(.show) .form-section-total label {
        margin: 0 !important;
        color: var(--cf-neutral-700, #374151) !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }

    .bc-detail-sidebar:not(.show) .form-section-total .price {
        color: var(--cf-neutral-900, #111827) !important;
        font-size: 17px !important;
        font-weight: 700 !important;
    }

    .bc-detail-sidebar:not(.show) .form-section-total li + li .price { font-size: 15px !important; }

    .bc-detail-sidebar:not(.show) .submit-group { padding-top: 12px; }

    .bc-detail-sidebar:not(.show) .submit-group .btn {
        width: 100%;
        padding: 12px 18px;
        border-radius: 14px;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: .01em;
        box-shadow: 0 12px 30px rgba(6, 12, 24, .35);
    }

    /* ── Extras, descuentos y cargos: plegados, no escondidos ────────────────────
       Son casillas que cambian el precio. Escondidas del todo, el cliente veía un
       total que no podía explicar y no tenía forma de añadir el seguro, la silla
       de bebé ni el traslado: para eso había que abrir la ficha en una computadora.
       Vuelven, pero cerradas, así que el motor de reservas del teléfono sigue
       siendo tres renglones y quien los quiera los abre.

       El interruptor lo inyecta Layout::parts.pdp.scripts como último hijo de
       `.form-content`, y solo cuando hay algún grupo que enseñar. Va al final
       porque `.form-content` la dibuja Vue y meterle un nodo en medio le rompe el
       emparejado de la lista; el sitio en pantalla se lo da `order`, no el HTML. */
    .bc-detail-sidebar:not(.show) .form-content {
        display: flex;
        flex-direction: column;
    }

    .bc-detail-sidebar:not(.show) .form-content > * { order: 1; }
    .bc-detail-sidebar:not(.show) .form-content > .bc-pdp-extras-toggle { order: 2; }
    .bc-detail-sidebar:not(.show) .form-content > .form-section-group { order: 3; }

    .bc-detail-sidebar:not(.show) .form-content > .form-section-group { display: none !important; }

    body.bc-pdp-extras-abierto .bc-detail-sidebar:not(.show) .form-content > .form-section-group {
        display: block !important;
        padding: 2px 0 10px !important;
    }

    /* La forma larga es contra la piel del tema, que le pone
       `display: inline-flex !important` y `min-height: 40px !important` a todo
       <button> de la ficha con cuatro clases. Acá se le suma una más. */
    body.bc-skin .bc_wrap .nc-ListingExperiencesDetailPage .bc-detail-sidebar:not(.show) .bc-pdp-extras-toggle,
    .bc-detail-sidebar:not(.show) .bc-pdp-extras-toggle {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        min-height: 44px !important;
        margin: 0;
        padding: 11px 0 !important;
        border: 0;
        border-top: 1px solid color-mix(in srgb, var(--cf-text, #374151) 12%, transparent);
        border-radius: 0;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--cf-neutral-700, #374151) !important;
        font-size: 13px;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
    }

    .bc-detail-sidebar:not(.show) .bc-pdp-extras-toggle i {
        font-size: 12px;
        opacity: .65;
        transition: transform .2s ease;
    }

    body.bc-pdp-extras-abierto .bc-detail-sidebar:not(.show) .bc-pdp-extras-toggle i {
        transform: rotate(180deg);
    }

    /* Las filas de dentro: el bloque de más arriba pone las etiquetas del
       formulario en versalitas de 11px, que es lo que quieren «FECHAS» y
       «PERSONAS» pero no el nombre de un extra, que es una frase. */
    .bc-detail-sidebar:not(.show) .form-section-title {
        margin: 6px 0 2px !important;
        color: var(--cf-neutral-600, #4b5563) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .bc-detail-sidebar:not(.show) .extra-price-wrap {
        gap: 12px;
        padding: 5px 0;
    }

    .bc-detail-sidebar:not(.show) .extra-price-wrap label {
        margin: 0 !important;
        color: var(--cf-neutral-900, #111827) !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    .bc-detail-sidebar:not(.show) .extra-price-wrap input[type="checkbox"] {
        margin-right: 8px;
        accent-color: var(--cf-primary, #6366f1);
    }

    .bc-detail-sidebar:not(.show) .extra-price-wrap .render,
    .bc-detail-sidebar:not(.show) .extra-price-wrap .unit {
        color: var(--cf-neutral-600, #4b5563) !important;
        font-size: 13px !important;
        font-weight: 500 !important;
    }

    /* ── La barra fija de reservar ───────────────────────────────────────────────
       Era una tarjeta blanca de esquinas rectas pegada al borde: sobre una página
       con el fondo del vendedor se leía como un trozo de otra web, y en un teléfono
       con barra de gestos el botón quedaba debajo del indicador. Ahora es el mismo
       cristal que el resto de la ficha, con las esquinas de arriba redondeadas y
       la holgura del aparato. */
    .nc-ListingExperiencesDetailPage .bc-mobile-footer {
        padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid color-mix(in srgb, var(--cf-text, #374151) 10%, transparent);
        border-radius: 18px 18px 0 0;
        background: color-mix(in srgb, var(--cf-bg, #fff) 93%, transparent);
        -webkit-backdrop-filter: blur(22px) saturate(150%);
        backdrop-filter: blur(22px) saturate(150%);
        box-shadow: 0 -10px 30px rgba(6, 12, 24, .13);
    }

    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .nc-ListingExperiencesDetailPage .bc-mobile-footer {
            background: var(--cf-bg, #fff);
        }
    }

    /* La ficha reservaba 100px abajo para que la barra no tapara nada. Pero la
       barra flota sobre el final del DOCUMENTO, no sobre el final de la ficha, y
       después de la ficha viene el pie del minisitio: esos 100px no protegían de
       nada y se leían como un hueco entre el carrusel de «también te puede gustar»
       y el pie. La holgura se va al último bloque de la página, que es donde la
       barra sí tapa. */
    body:has(.bc-ioshero) .nc-ListingExperiencesDetailPage {
        padding-bottom: 28px;
    }

    body:has(.bc-ioshero) .bc-bottombar {
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    }

}

/* ── Crédito de Leaflet en el mapa de la ficha ────────────────────────────
   Leaflet inyecta su badge («Leaflet | © OpenStreetMap contributors») en la
   esquina del mapa. Se oculta en las cuatro fichas.

   Vive acá y no en pdp-modern.css porque autos no carga esa hoja —tiene la
   suya en línea— pero sí carga esta, que es la única que llega a las cuatro.

   Ojo: los datos de OSM son ODbL y piden atribución visible en algún lado del
   sitio. Al sacarla del mapa hay que dejarla en el pie o en la página legal. */
.bc-map-wrap .leaflet-control-attribution,
.bc-map-wrap .leaflet-control-attribution a {
    display: none !important;
}