/*
 * Mejoras sobre el diseno heredado (deisa-cl, 2026-10). Aparte de main.css,
 * que sale compilado de public/js/sass y aqui no se compila.
 */

/* El titulo principal de cada pagina era un <p>; ahora es un <h1> con las
   mismas clases, para que los lectores de pantalla y Google sepan cual es.
   Esto deja el h1 como el p que era: anula lo que Bootstrap le pone al h1
   (tamano, peso, interlineado, color y margen). Con :where() pesa como una
   etiqueta: le gana a la regla h1 de Bootstrap, que va antes, y pierde contra
   las clases del sitio (size50, fw-900, mb0...), que siguen mandando */
h1:where(.h1-como-p) {
    margin-bottom: 1rem;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

/* El carrusel 3D de la ficha (bee3D) pone de fondo sus propias flechas,
   /img/angle-*.svg, que no existen: un 404 en cada ficha. El sitio usa
   encima sus flechas redondas, asi que ese fondo nunca se vio */
.bee3D--nav__prev,
.bee3D--nav__next {
    background-image: none;
}

/* El zoom del celular estaba bloqueado (user-scalable=no). Habilitado, el
   iPhone acerca la pagina al tocar un campo con letra menor de 16 px: en el
   celular, los campos van a 16 px. #buscador select: main.css lo fija en
   13 px con !important y un id */
@media (max-width: 767.98px) {
    input:not([type=checkbox]):not([type=radio]),
    select,
    textarea,
    #buscador select {
        font-size: 16px !important;
    }
}

/* El encabezado (una .row fuera de su contenedor) y el menu del celular
   desbordan unos 12 px a la derecha. Con el zoom bloqueado no se notaba;
   habilitado, Android alejaba la pagina para que cupiera. clip corta sin
   crear un contenedor de scroll (no rompe lo fijo ni lo pegajoso) */
html,
body {
    overflow-x: clip;
}

/* El mapa del catalogo ocupa la columna derecha a ras, desde el borde del
   encabezado fijo (100 px) hasta el final de la pantalla, sin esquinas
   redondeadas (Chris, 2026-10-01). Las tarjetas se desplazan dentro de su
   columna, de 100vh. Antes medía 600 px y quedaba en 210: 100 de margen mas
   110 del top que la pagina le daba para un sticky que no funcionaba (Google
   Maps le pone position: relative en linea, y ese top lo corria hacia abajo).
   Solo el del catalogo: la portada y la ficha tienen otro #map */
#contenedorBuscadorProyectosProyecto ~ #map {
    top: 0;
    margin-top: 100px;
    height: calc(100vh - 100px);
    min-height: 500px;
    border-radius: 0;
}
