/*
 * Estilos que el sitio legado tenía en bloques <style> dentro de los parciales
 * (main/inc/laar/newLaar/*.php y main/app/home/*.php). Se copian tal cual;
 * lo que es nuevo (no existía en el legado) está marcado como "NUEVO".
 */

/* newLaar/empresas.php — punto y línea entre los logos (versión móvil) */
.black-dot-22 {
    width: 15px;
    height: 15px;
    background-color: #3c3c3b;
    border-radius: 50%;
    position: relative;
    margin: 0 auto;
}

.black-dot-22::after {
    content: '';
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 40px;
    background-color: #3c3c3b;
}

/* newLaar/header_pages.php — hero bajo de las páginas internas
   (en el legado se aplicaba a toda la página; aquí solo al encabezado interno) */
.header-interno .header-hero {
    height: 393px !important;
}

.header-interno .header-hero .header-content {
    padding-top: 10em !important;
}

/* NUEVO: en el legado el hero del inicio medía 1281 px fijos (demasiado alto en pantallas
   normales y con la punta de la V recortada en las anchas). Aquí el alto sigue la proporción
   de la imagen (--proporcion-heroe, la pone Heroe.vue) reducida por --escala-heroe; lo que
   sobra se recorta solo por arriba (zona que tapa el menú): recortar abajo achata la punta
   de la V. El texto queda al 31 % del alto (legado: 395/1281). */
@media (min-width: 992px) {
    #home.header-hero {
        --escala-heroe: 0.85;
        height: calc(100vw * var(--proporcion-heroe, 0.6443) * var(--escala-heroe));
        background-position: center bottom;
    }

    #home.header-hero .header-content {
        padding-top: max(130px, calc(100vw * var(--proporcion-heroe, 0.6443) * var(--escala-heroe) * 0.31));
    }
}

/* home/equipo.php */
.member {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* NUEVO: fachada de los videos de YouTube (proyectos sociales): misma caja
   de 315 px que el iframe original; el iframe se carga al hacer clic */
.fachada-video {
    position: relative;
    display: block;
    width: 100%;
    height: 315px;
    padding: 0;
    border: 0;
    background: #000 center / cover no-repeat;
    cursor: pointer;
}

.fachada-video::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 48px;
    transform: translate(-50%, -50%);
    border-radius: 12px;
    background: #f00 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 28px no-repeat;
}

/* NUEVO: migas de pan (no existían en el legado) */
.migas-legado .breadcrumb {
    margin: 0;
    padding: 1rem 0 0;
    background: transparent;
    font-size: 14px;
}

/* NUEVO: campo trampa anti-bots del formulario de contacto (fuera de la vista) */
.campo-trampa {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* NUEVO: los mensajes de validación de Bootstrap 4 necesitan display al lado del campo inválido */
#contact-form .is-invalid ~ .invalid-feedback {
    display: block;
}

/* NUEVO: el ancho de la página nunca desborda en horizontal (las filas de Bootstrap 4
   dentro de contenedores de Bootstrap 5 sobresalían 3 px; en iPhone permitía mover la página) */
html {
    overflow-x: hidden;
}

/* NUEVO: barra móvil. En el legado solo existía entre 330 y 680 px (en tablet no había
   menú); aquí se usa hasta 991 px. */
@media (max-width: 991px) {
    #navbarMovile {
        display: block !important;
    }

    .navgition.navgition-transparent {
        display: none !important;
    }
}

/* NUEVO: logo de la barra móvil. El PNG trae margen transparente arriba y abajo (las letras
   ocupan la mitad de su alto): a 130 px de ancho, "GRUPO LAAR" quedaba de 12 px. Con 34 px
   de alto las letras miden ~17 px y, como el margen es simétrico, queda centrado en la barra. */
/* 10 + 40 (botón) + 10 = barra de 60 px, igual abierta o cerrada */
#navbarMovile {
    padding-top: 10px;
    padding-bottom: 10px;
}

#navbarMovile .logo-movil {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    line-height: 0;
}

#navbarMovile .logo-movil img {
    width: auto;
    height: 34px;
}