
    @media (max-width: 767px) {
        :root {
            --bc-hero-pantalla: 100vh;
            --bc-hero-pantalla: calc(100svh - env(safe-area-inset-top, 0px));
            /* Hueco de la cabecera flotante. Ver la cabecera de este fichero. */
            --bc-hero-cabecera: 78px;
        }

        /* ── 1. La sección no suma espaciado ──────────────────────────────
           Salvo que el vendedor lo haya escrito EN la casilla de móvil. Lo que
           aquí sobra es el relleno de ESCRITORIO, que el móvil hereda cuando la
           casilla de móvil está vacía: en rentcarx eran 90px arriba y 30 abajo
           que, sumados al `100svh` de abajo, hacían imposible una pantalla. Un
           número escrito a mano en «Espaciado → Móvil» es otra cosa —es una
           orden— y antes se anulaba igual, así que ese control no hacía nada en
           el teléfono. `BaseBlock::bcMobilePaddingFlags()` marca el envoltorio
           con `bc-bw-pt-movil` / `bc-bw-pb-movil` cuando hay número, y aquí se
           le deja pasar. Con relleno propio el héroe pasa de una pantalla: es
           justo lo que pide quien lo escribe.

           Cada lado por su cuenta: quien sólo toca el de arriba no está
           pidiendo que vuelva el de abajo heredado del escritorio. */
        .bc-block-wrap:has(> .bc-form-search-all):not(.bc-bw-pt-movil) {
            padding-top: 0 !important;
        }
        .bc-block-wrap:has(> .bc-form-search-all):not(.bc-bw-pb-movil) {
            padding-bottom: 0 !important;
        }

        /* ── 2. El bloque, una pantalla exacta ──────────────────────────────
           Las tres cadenas son la misma regla escrita tres veces: «Normal V2» y
           «Normal V3» fijan `min-height: 0` y `padding: 0` con su propia clase
           delante (cinco clases más !important), y sin repetirla aquí con la
           suya esta regla no les llega. Ver [[rentcli-pdp-css-trampas]]. */
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all,
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.normal_v2,
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.normal_v3 {
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
            min-height: var(--bc-hero-pantalla) !important;
            padding: 0 !important;
        }

        /* ── 3. El héroe llena el bloque ─────────────────────────────────── */
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all > div:not(.effect) {
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
            flex: 1 1 auto !important;
            width: 100% !important;
            min-height: 0 !important;
        }
        /* El relleno sólo para los estilos que no traen envoltorio propio
           —«Normal», «Carrusel», «Carrusel V2» y «Vídeo»—. V2 y V3 tienen el
           suyo y sumarlos daba 140px de aire sobre el título. */
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all:not(.normal_v2):not(.normal_v3) > div:not(.effect) {
            padding: var(--bc-hero-cabecera) 0 18px !important;
        }

        /* ── «Normal V2» ────────────────────────────────────────────────────
           Ya medía una pantalla, pero con `100svh` escrito en dos sitios: en la
           app instalada esos dos altos no descontaban la franja del reloj y el
           héroe se pasaba. Aquí el alto lo lleva el bloque y estos dos sólo se
           estiran. */
        body.bc-skin .bc_wrap .page-template-content .normal_v2 .bc-herov2,
        body.bc-skin .bc_wrap .page-template-content .normal_v2 .bc-herov2-inner {
            flex: 1 1 auto !important;
            min-height: 0 !important;
        }
        body.bc-skin .bc_wrap .page-template-content .normal_v2 .bc-herov2 {
            display: flex !important;
            flex-direction: column !important;
        }

        /* ── «Normal V3» ────────────────────────────────────────────────────
           El collage es quien absorbe lo que sobre: la tercera fila de la
           rejilla pasa a `1fr` y las fotos dejan de tener alto escrito. Así el
           bloque da la pantalla exacta sin un socavón entre el buscador y el
           borde de abajo, y en una pantalla corta las fotos encogen hasta su
           mínimo en vez de empujar el buscador fuera. */
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.normal_v3 .bc-herov3 {
            display: flex !important;
            flex-direction: column !important;
            flex: 1 1 auto !important;
            padding: var(--bc-hero-cabecera) 0 22px !important;
        }
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.normal_v3 .bc-herov3-inner {
            flex: 1 1 auto !important;
            grid-template-rows: auto auto minmax(0, 1fr) !important;
        }
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.normal_v3 .bc-herov3-media {
            height: auto !important;
            min-height: clamp(140px, 34vw, 210px) !important;
            /* `align-self` y no sólo `1fr`: la rejilla del héroe claro lleva
               `align-items: start` —el texto y el collage se alinean por arriba
               en el escritorio—, y con eso las fotos se quedaban en su alto
               mínimo dentro de una fila más alta. Medido: 72px de hueco entre
               el collage y el borde de abajo. */
            align-self: stretch !important;
        }

        /* ── Pantalla corta: sin collage ───────────────────────────────────
           Medido en un 360x640: título 94 + bajada + buscador + la tira de
           ventajas + las fotos en su mínimo dan 758px. Ahí «una pantalla» y
           «todo lo del héroe» son incompatibles, y algo tiene que salir: lo
           que sale son las fotos, que son acompañamiento —el título, el
           buscador y las ventajas son el héroe—. Encogerlas en vez de
           esconderlas dejaba una tira de 20px de foto, que se lee como un
           fallo.

           El corte va en 700px de ALTO, no de ancho: es el alto lo que falta.
           Por encima —un 375x812 y de ahí para arriba— el collage se queda.

           La fila del collage pasa a cero y el reparto lo hace
           `align-content`: si no, el hueco que dejaban las fotos se quedaba
           entero debajo de la tira de ventajas en vez de repartirse. */
        @media (max-height: 699px) {
            body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.normal_v3 .bc-herov3-media {
                display: none !important;
            }
            body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.normal_v3 .bc-herov3-inner {
                grid-template-rows: auto auto 0 !important;
                align-content: center !important;
            }
        }
    }
