/* Sección "Detrás de cada edificio, Brom." y logos del footer.
   Copiado de los estilos de BROM (main.css, media-query.css, fonts.css),
   limitado a .to-brom-section y .s46-footer-logos para no afectar el resto de Sonora 46.
================================================== */
@font-face {
    font-family: 'Brom PT Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/brom/PTSerif-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Brom Syne';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/brom/Syne-Regular.woff2') format('woff2');
}

.to-brom-section {
    --brom-black: #0C0C01;
    --brom-white: #FAFDFA;
    --brom-head: 'Brom PT Serif', serif;
    --brom-body: 'Brom Syne', sans-serif;
    /* mismo fondo que #inovacion_prestigio de Sonora 46 (no el negro de BROM) */
    background-color: #0A120F;
    color: var(--brom-white);
}
/* Swiper le da z-index: 1 al slider y quedaba encima del menú sticky de Sonora (#header, z-index: 1) */
.to-brom-section .brom-slider { z-index: 0; }
.to-brom-section h2,
.to-brom-section p { margin-bottom: 0; }
.to-brom-section a { text-decoration: none; color: inherit; }

/* Contenedor */
.to-brom-section .to-brom-row,
.to-brom-section .to-brom-photos { --bs-gutter-x: 16px; }

/* Espaciados */
.to-brom-section .pt-80 { padding-top: 80px; }
.to-brom-section .pb-80 { padding-bottom: 80px; }
.to-brom-section .mt-8 { margin-top: 8px; }
.to-brom-section .mt-24 { margin-top: 24px; }

/* Tipografía */
.to-brom-section .head-2 {
    font-family: var(--brom-head);
    font-weight: 400;
    font-size: 28px;
    line-height: normal;
    letter-spacing: 0;
}
.to-brom-section .text-xl {
    font-family: var(--brom-body);
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    letter-spacing: 0;
}

/* Botón */
.to-brom-section .btn-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 43px;
    padding: 0 18px;
    border: 1px solid var(--brom-white);
    border-radius: 0;
    background-color: transparent;
    color: var(--brom-white);
    font-family: var(--brom-body);
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0;
    transition: color 0s linear .1s, background-color .2s linear, border-color .2s linear;
}

/* Texto, logo y fotos */
.to-brom-section .to-brom-text { display: flex; flex-direction: column; }
.to-brom-section .brom-logo { display: block; }
.to-brom-section .brom-logo img { display: block; width: 232px; height: 70px; }
.to-brom-section .tr-brom-footer { margin-top: 85px; }
.to-brom-section .brom-media,
.to-brom-section .brom-media img { display: block; width: 100%; }
.to-brom-section .brom-media img { height: 223px; object-fit: cover; }

@media (hover: hover) {
    .to-brom-section .btn-main:hover {
        background-color: var(--brom-white);
        border-color: var(--brom-white);
        color: var(--brom-black);
    }
}
@media (min-width: 1200px) {
    .to-brom-section .container {
        margin-right: auto;
        margin-left: auto;
        padding-left: 0;
        padding-right: 0;
    }
    .to-brom-section .container.container-wide { max-width: 1160px; }
}
@media (min-width: 1300px) {
    .to-brom-section .container.container-wide {
        max-width: 1160px;
        width: calc(100% - 140px);
        margin-right: auto;
        margin-left: auto;
    }
}
@media (min-width: 992px) {
    .to-brom-section .container-wide .row { --bs-gutter-x: 16px; }
    .to-brom-section .to-brom-photos { margin-left: 0; margin-right: 0; column-gap: 16px; row-gap: 20px; }
    .to-brom-section .to-brom-photos > * { flex: 0 0 calc(50% - 8px); width: auto; max-width: none; padding: 0; }
}
@media (max-width: 991px) {
    .to-brom-section .pt-40m { padding-top: 40px; }
    .to-brom-section .pb-64m { padding-bottom: 64px; }
    .to-brom-section .pb-52m { padding-bottom: 52px; }
    .to-brom-section .tr-brom-footer { margin-top: 40px; }
    .to-brom-section .brom-logo { align-self: center; margin: 0 auto; }
    .to-brom-section .brom-logo img { width: 198px; height: 60px; }
    .to-brom-section .brom-media img { height: 300px; }
    .to-brom-section .to-brom-photos { --bs-gutter-x: 0; flex-wrap: nowrap; }
    .to-brom-section .to-brom-photos > * { flex: 0 0 285px; width: 285px; }
}
@media (max-width: 768px) {
    .to-brom-section .custom-container {
        padding-left: 16px;
        padding-right: 16px;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .to-brom-section .head-3m { font-size: 24px; }
    .to-brom-section .text-mm { font-size: 14px; }
    .to-brom-section .btn-main { height: 30px; padding: 0 16px; font-size: 12px; }
}

/* Barra superior "Un proyecto desarrollado por BROM" (igual que .torres-topbar de BROM).
   Queda fija arriba; el menú de Sonora (#header) y las tarjetas fijas de
   "Espacios" / "Seguridad" (mainlast.css) bajan lo que mide la barra.
================================================== */
:root { --s46-barra: 28px; }
@media (max-width: 991px) {
    :root { --s46-barra: 30px; }
}
.s46-topbar {
    position: sticky;
    top: 0;
    z-index: 2;
    height: var(--s46-barra);
    background-color: #0C0C01;
    color: #FAFDFA;
}
/* mismos márgenes que .navbar / .movil-menu de Sonora, para alinear el texto con el logo de Sonora 46 */
.s46-topbar > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 100px;
}
@media only screen and (max-width: 767px) {
    .s46-topbar > .container { padding: 0 16px; }
}
.s46-topbar p { margin: 0; }
.s46-topbar a { color: inherit; text-decoration: none; }
.s46-topbar .text-m {
    font-family: 'Brom Syne', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    letter-spacing: 0;
}
.s46-topbar .text-underline { text-decoration: underline; text-underline-position: from-font; }
.s46-topbar .torres-brand { display: inline-flex; align-items: center; gap: 4px; }
.s46-topbar .torres-brand svg { display: block; width: 36px; height: 11px; }
.s46-topbar .torres-brand svg path { fill: currentColor; }
#header { top: var(--s46-barra); }
#titulo_contenedores_left > div,
#titulo_contenedores_right > div { top: calc(80px + var(--s46-barra)); }
.contenedor { top: calc(80px + var(--s46-barra)); }
.contenedor_dos { top: calc(160px + var(--s46-barra)); }
.contenedor_tres { top: calc(240px + var(--s46-barra)); }
#contenedores_right .contenedor_dos { top: calc(180px + var(--s46-barra)); }
@media (max-width: 991px) {
    .s46-topbar .torres-brand svg { width: 26px; height: 8px; }
}
@media (max-width: 768px) {
    .s46-topbar .text-xsm { font-size: 10px; }
}

/* Las fotos llevan width/height reales para que la carga diferida reserve su
   espacio (si no, los links a secciones calculaban mal el destino). :where()
   no suma especificidad: cualquier alto que ya fije mainlast.css sigue mandando.
================================================== */
:where(img[width][height]) { height: auto; }

/* Tablet (768–1023 px): el menú de escritorio (884 px fijos) no cabía con los
   márgenes de 100 px y daba scroll horizontal. Solo en este rango se compactan
   márgenes y espacios; escritorio (≥1024) y móvil (<768) no cambian.
================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    .navbar { padding-left: 40px; padding-right: 40px; }
    .s46-topbar > .container { padding: 0 40px; }
    .desktop-menu a { margin-right: 14px; }
    .desktop-menu li:last-child { margin-right: 0 !important; }
    .navbar .language { margin-right: 20px; }
    .black_button { width: 150px; }
    /* "LET'S TALK TODAY" es más largo que "HABLEMOS" */
    html[lang="en"] .black_button { width: 180px; }
}
/* Tablet angosta: "Tecnología y seguridad de primer nivel." / "ADVANCED TECHNOLOGY…"
   rebasaba la pantalla. Los dos títulos de Espacios y Seguridad bajan de 40/48
   a 34/41 px solo aquí (misma proporción), para que sigan parejos */
@media (min-width: 768px) and (max-width: 869px) {
    #titulo_contenedores_left h3,
    #titulo_contenedores_right h3 { font-size: 34px; line-height: 41px; }
}

/* Año automático del copyright: mainlast.css pone en negritas todo span de
   .underfooter (el de "Remedia"); el año conserva el peso del texto que lo rodea */
footer .underfooter .js-anio { font-weight: inherit; }

/* 404: la línea en inglés es texto con un link, no un botón (#gracias a de
   mainlast.css le pone padding de botón a todos los links de esa sección)
================================================== */
#gracias .s46-404-en { margin-top: 24px; }
#gracias .s46-404-en a { padding: 0; }

/* Mensajes de error del formulario (main3.js)
================================================== */
.form-error {
    margin: 6px 0 0;
    font-family: "Outfit", sans-serif;
    font-size: 12px;
    line-height: 1.4;
    color: #BF361E;
}
.form-error-envio { margin-top: 8px; }
#forma .form-control[aria-invalid="true"] { border-bottom-color: #BF361E; }
#boton_submit:disabled { opacity: .6; cursor: progress; }
@media only screen and (max-width: 767px) {
    /* va debajo del aviso de privacidad, que en móvil se lleva el margen inferior */
    .form-error-envio { text-align: center; margin: -28px 0 36px; }
}

/* Aviso de privacidad debajo del botón del formulario
================================================== */
.form-privacy {
    margin: 16px 0 0;
    font-family: "Outfit", sans-serif;
    font-size: 12px;
    line-height: 1.4;
    color: #0A120F;
    opacity: .75;
    text-align: left;
}
.form-privacy a { text-decoration: underline; text-underline-position: from-font; }
@media only screen and (max-width: 767px) {
    /* el botón trae margin-bottom: 36px en móvil: la línea queda a 16px del botón y conserva ese espacio debajo */
    .form-privacy { text-align: center; margin: -20px 0 36px; }
}

/* Footer: logo de BROM + sello LEED (reemplaza underfooter_logos.png)
================================================== */
.s46-footer-logos { display: flex; align-items: center; justify-content: flex-end; gap: 24px; }
.s46-footer-logos .s46-footer-brom { display: block; color: #0C0C01; }
.s46-footer-logos .s46-footer-brom svg { display: block; width: 85px; height: 26px; }
.s46-footer-logos .s46-footer-brom svg path { fill: currentColor; }
footer .s46-footer-logos img.s46-leed { width: 48px; height: 48px; }
@media (max-width: 767px) {
    .s46-footer-logos-movil { flex-direction: column; align-items: flex-end; gap: 16px; }
    .s46-footer-logos-movil .s46-footer-brom svg { width: 66px; height: 20px; }
    footer .s46-footer-logos-movil img.s46-leed { width: 40px; height: 40px; }
}