/* =====================================================================
   GRUPO BRUNNER · CAPA DE DISEÑO (UI LAYER)
   Se carga al final: refina tipografía, ritmo, componentes y efectos
   manteniendo la identidad verde corporativa.
   ---------------------------------------------------------------------
   1.  Tokens
   2.  Base y tipografía
   3.  Utilidades y layout
   4.  Botones
   5.  Barra superior y navegación
   6.  Hero
   7.  Encabezados de sección
   8.  Tarjetas e imágenes
   9.  Misión / Visión (panel dividido)
   10. Línea de tiempo
   11. Acordeón de servicios
   12. Procesos
   13. Equipo e indicadores
   14. Clientes (carrusel)
   15. Formulario de contacto
   16. Footer
   17. Acciones flotantes y progreso
   18. Accesibilidad y animaciones
   ===================================================================== */

/* ====================== 1. TOKENS ================================== */
:root {
    /* Identidad (verdes originales conservados) */
    --bn-green: #009900;
    --bn-green-600: #04842b;
    --bn-green-700: #0b7a3b;
    --bn-green-800: #06521f;
    --bn-green-900: #04300f;
    --bn-green-400: #1aa84b;
    --bn-green-300: #4cc472;
    --bn-green-050: #eef8f0;

    /* Degradados de marca */
    --bn-grad: linear-gradient(135deg, var(--bn-green-600) 0%, var(--bn-green) 55%, var(--bn-green-400) 100%);
    --bn-grad-soft: linear-gradient(135deg, rgba(4, 132, 43, .10), rgba(26, 168, 75, .04));

    /* Neutrales */
    --bn-ink: #101a13;
    --bn-ink-soft: #2b3a30;
    --bn-muted: #68796e;
    --bn-line: #e4ece6;
    --bn-surface: #ffffff;
    --bn-surface-2: #f5f9f6;
    --bn-dark: #0f1a14;
    --bn-dark-2: #16261c;

    /* Elevación */
    --bn-shadow-xs: 0 1px 2px rgba(16, 26, 19, .06);
    --bn-shadow-sm: 0 4px 16px rgba(16, 26, 19, .07);
    --bn-shadow-md: 0 14px 38px rgba(16, 26, 19, .10);
    --bn-shadow-lg: 0 26px 60px rgba(16, 26, 19, .16);
    --bn-shadow-green: 0 14px 34px rgba(4, 132, 43, .28);

    /* Formas */
    --bn-r-xs: 8px;
    --bn-r-sm: 12px;
    --bn-r: 18px;
    --bn-r-lg: 26px;

    /* Movimiento */
    --bn-ease: cubic-bezier(.22, .61, .36, 1);
    --bn-t-fast: .22s var(--bn-ease);
    --bn-t: .38s var(--bn-ease);
    --bn-t-slow: .7s var(--bn-ease);

    /* Ritmo vertical de secciones */
    --bn-section-y: clamp(3.5rem, 6vw, 7rem);

    /* Compatibilidad con clases existentes */
    --color-brunner: var(--bn-green);
    --color-brunner-hover: var(--bn-green-800);
    --primary: var(--bn-green-600);
}

/* ====================== 2. BASE Y TIPOGRAFÍA ======================= */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: clamp(.95rem, .45vw + .85rem, 1.0625rem);
    line-height: 1.75;
    font-weight: 400;
    color: var(--bn-ink-soft);
    background: var(--bn-surface);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Nunito', 'Heebo', system-ui, sans-serif;
    color: var(--bn-ink);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.01em;
    text-wrap: balance;
}

h1, .h1 { font-size: clamp(2rem, 3.2vw + 1rem, 3.25rem); }
h2, .h2 { font-size: clamp(1.65rem, 2.1vw + .9rem, 2.5rem); }
h3, .h3 { font-size: clamp(1.4rem, 1.2vw + .9rem, 1.9rem); }
h4, .h4 { font-size: clamp(1.2rem, .8vw + .9rem, 1.45rem); }
h5, .h5 { font-size: 1.15rem; }

p { text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { text-decoration: none; transition: color var(--bn-t-fast); }

::selection {
    background: var(--bn-green-600);
    color: #fff;
}

img { max-width: 100%; }

/* Scrollbar discreta de marca */
@media (pointer: fine) {
    * { scrollbar-width: thin; scrollbar-color: var(--bn-green-400) var(--bn-surface-2); }
    *::-webkit-scrollbar { width: 10px; height: 10px; }
    *::-webkit-scrollbar-track { background: var(--bn-surface-2); }
    *::-webkit-scrollbar-thumb {
        background: var(--bn-green-400);
        border: 3px solid var(--bn-surface-2);
        border-radius: 10px;
    }
    *::-webkit-scrollbar-thumb:hover { background: var(--bn-green-600); }
}

/* ====================== 3. UTILIDADES Y LAYOUT ===================== */
.bn-section { padding-block: var(--bn-section-y); }
.bn-section--tight { padding-block: calc(var(--bn-section-y) * .62); }
.bn-section--alt { background: var(--bn-surface-2); }

/* El patrón del template usaba py-5 + mt-5/mt-4: lo normalizamos */
.container-xxl.py-5,
.container-xxl.mt-4.py-5 { padding-block: var(--bn-section-y) !important; }
.container-xxl.mt-5,
.container-xxl.mt-4 { margin-top: 0 !important; }

.text-brunner { color: var(--bn-green-600) !important; }
.text-black { color: var(--bn-ink) !important; }
.bg-brunner { background: var(--bn-green-600) !important; }
.bg-brunner-soft { background: var(--bn-green-050) !important; }
.text-font { font-weight: 700; }

/* Texto justificado del original: evitamos "ríos" en pantallas chicas */
.text-justify {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}
@media (max-width: 575.98px) {
    .text-justify { text-align: left; hyphens: none; }
}

.textPa {
    font-size: clamp(1rem, .4vw + .92rem, 1.075rem);
    line-height: 1.85;
    color: var(--bn-ink-soft);
}

.negrita {
    color: var(--bn-ink-soft) !important;
    font-weight: 400;
    line-height: 1.85;
}
.negrita + .negrita { margin-top: 1rem; }

.borderRadius10 { border-radius: var(--bn-r) !important; }
.borderRadiusCard { border-radius: var(--bn-r) !important; }
.borderBrunner { border: 2px solid rgba(4, 132, 43, .22) !important; }

/* Franja decorativa fina de marca */
.bn-rule {
    height: 4px;
    width: 72px;
    border-radius: 99px;
    background: var(--bn-grad);
}

/* ====================== 4. BOTONES ================================= */
.btn {
    --bn-btn-y: .72rem;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    letter-spacing: .02em;
    border-radius: 99px;
    padding: var(--bn-btn-y) 1.6rem;
    transition: transform var(--bn-t-fast), box-shadow var(--bn-t-fast),
                background-color var(--bn-t-fast), color var(--bn-t-fast),
                border-color var(--bn-t-fast), filter var(--bn-t-fast);
}

.btn:focus,
.btn:focus-visible { box-shadow: 0 0 0 .22rem rgba(4, 132, 43, .3); }

.btn-primary,
.btn-brunner,
.btn.btn-primary.btn-brunner {
    background: var(--bn-grad);
    border: 0;
    color: #fff !important;
    box-shadow: var(--bn-shadow-green);
}

.btn-primary:hover,
.btn-brunner:hover,
.btn-primary:focus-visible,
.btn-brunner:focus-visible {
    background: var(--bn-grad);
    filter: saturate(1.1) brightness(.94);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(4, 132, 43, .34);
}

.btn-primary:active,
.btn-brunner:active { transform: translateY(0); }

/* Botón secundario sobre fondos oscuros / imágenes */
.btn-ghost-light {
    background: rgba(255, 255, 255, .1);
    border: 1.5px solid rgba(255, 255, 255, .55);
    color: #fff !important;
    backdrop-filter: blur(6px);
}
.btn-ghost-light:hover {
    background: #fff;
    border-color: #fff;
    color: var(--bn-green-800) !important;
    transform: translateY(-2px);
}

.btn-outline-light:hover {
    background: #fff;
    color: var(--bn-green-800) !important;
    border-color: #fff;
}

/* Botones heredados del template (azul/verde planos) → identidad de marca */
.bg-blue,
.bg-green {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-radius: 99px !important;
    margin-top: 1rem;
    padding: .6rem 1.35rem;
    font-weight: 700;
}
.bg-blue {
    background: var(--bn-grad);
    color: #fff !important;
    box-shadow: var(--bn-shadow-green);
    margin-right: .6rem;
}
.bg-blue:hover {
    color: #fff !important;
    transform: translateY(-2px);
    filter: brightness(.95);
}
.bg-green {
    background: rgba(255, 255, 255, .12);
    border: 1.5px solid rgba(255, 255, 255, .6);
    color: #fff !important;
    backdrop-filter: blur(6px);
}
.bg-green:hover {
    background: #fff;
    color: var(--bn-green-800) !important;
    transform: translateY(-2px);
}

/* Enlace con flecha animada */
.bn-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: var(--bn-green-600);
    font-family: 'Nunito', sans-serif;
}
.bn-link i { transition: transform var(--bn-t-fast); }
.bn-link:hover { color: var(--bn-green-800); }
.bn-link:hover i { transform: translateX(5px); }

/* ====================== 5. BARRA SUPERIOR Y NAVEGACIÓN ============= */
.bn-topbar {
    background: linear-gradient(90deg, var(--bn-green-800), var(--bn-green-600) 55%, var(--bn-green-400));
    color: #fff;
    font-size: .9rem;
}
.bn-topbar a {
    color: rgba(255, 255, 255, .92);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
.bn-topbar a:hover { color: #fff; }
.bn-topbar .bn-topbar-sep {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, .35);
}
.bn-topbar-social {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .45);
    transition: background var(--bn-t-fast), transform var(--bn-t-fast);
}
.bn-topbar-social:hover {
    background: #fff;
    color: var(--bn-green-700) !important;
    transform: translateY(-2px);
}

/* --- Navbar --- */
.navbar.navbar-light {
    background: rgba(255, 255, 255, .92) !important;
    backdrop-filter: blur(14px) saturate(1.3);
    border-bottom: 1px solid var(--bn-line);
    transition: box-shadow var(--bn-t), padding var(--bn-t), background var(--bn-t);
}

.navbar.sticky-top.navbar-light {
    box-shadow: 0 10px 30px rgba(16, 26, 19, .10) !important;
    border-bottom-color: transparent;
}

.navbar-light .navbar-brand img {
    max-height: 58px;
    width: auto;
}
.sticky-top.navbar-light .navbar-brand img { max-height: 46px; }

.navbar-light .navbar-nav .nav-link {
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--bn-ink) !important;
    margin-right: 1.5rem;
    transition: color var(--bn-t-fast);
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active { color: var(--bn-green-600) !important; }

@media (min-width: 992px) {
    .navbar-light .navbar-nav .nav-link::before {
        height: 3px;
        bottom: 0;
        border-radius: 99px;
        background: var(--bn-grad);
        transition: width var(--bn-t), left var(--bn-t);
    }
    .navbar-light .navbar-nav .nav-link:hover::before,
    .navbar-light .navbar-nav .nav-link.active::before { width: calc(100% - 2px); }
}

.navbar-toggler {
    border: 1.5px solid var(--bn-line);
    border-radius: var(--bn-r-xs);
    padding: .5rem .7rem;
    color: var(--bn-green-700);
}
.navbar-toggler:focus { box-shadow: 0 0 0 .22rem rgba(4, 132, 43, .25); }

@media (max-width: 991.98px) {
    .navbar-light .navbar-collapse {
        margin-top: 1rem;
        border-top: 1px solid var(--bn-line);
        padding-top: .5rem;
        padding-bottom: 1rem;
    }
    .navbar-light .navbar-nav .nav-link { margin-right: 0; }
    .navbar .btn-brunner { margin-top: .75rem; width: 100%; }
}

/* Accesos a Correo e Intranet dentro del menú (celular y tablet) */
.bn-nav-accesos {
    display: flex;
    gap: .6rem;
    margin-top: .85rem;
    padding-top: .9rem;
    border-top: 1px solid var(--bn-line);
}
.bn-nav-accesos a {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .72rem .8rem;
    border-radius: 99px;
    border: 1.5px solid rgba(4, 132, 43, .3);
    background: var(--bn-green-050);
    color: var(--bn-green-700);
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: .92rem;
    transition: background var(--bn-t-fast), color var(--bn-t-fast),
                border-color var(--bn-t-fast), transform var(--bn-t-fast);
}
.bn-nav-accesos a:hover,
.bn-nav-accesos a:focus-visible {
    background: var(--bn-grad);
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
}

/* ====================== 6. HERO ==================================== */
.hero-header {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: clamp(540px, 84vh, 820px);
    padding-block: clamp(2.5rem, 7vh, 5rem) !important;
    margin-bottom: 0 !important;
    background: linear-gradient(105deg, rgba(4, 36, 15, .92) 0%, rgba(5, 44, 19, .74) 45%, rgba(4, 110, 36, .58) 100%),
                url(../img/fondobrunerCar.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.hero-header > * { width: 100%; }

/* Zoom lento de fondo: profundidad sin distraer */
.hero-header::before {
    content: "";
    position: absolute;
    inset: -2%;
    z-index: -1;
    background: inherit;
    background-size: cover;
    animation: bnKenBurns 24s var(--bn-ease) infinite alternate;
}

/* Velo inferior para fundir el hero con la página */
.hero-header::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 160px;
    background: linear-gradient(to top, var(--bn-surface), transparent);
    pointer-events: none;
}

.bn-hero-inner { position: relative; z-index: 2; }

.bn-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem 1.1rem;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.bn-hero-eyebrow i { color: var(--bn-green-300); }

.bn-hero-title {
    color: #fff;
    font-size: clamp(2.3rem, 5.4vw, 4.6rem);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -.02em;
    text-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}
.bn-hero-title span {
    background: linear-gradient(100deg, #ffffff 15%, #5fe08c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Respaldo para navegadores sin background-clip en texto */
    -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .bn-hero-title span { color: #5fe08c; -webkit-text-fill-color: currentColor; }
}

.bn-hero-sub {
    color: rgba(255, 255, 255, .92);
    font-size: clamp(1.05rem, 1.2vw + .8rem, 1.5rem);
    font-weight: 300;
    max-width: 60ch;
    margin-inline: auto;
}

/* Indicadores rápidos bajo el hero */
.bn-hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, .22);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--bn-r);
    overflow: hidden;
    backdrop-filter: blur(10px);
}
.bn-hero-stat {
    background: rgba(10, 35, 18, .35);
    padding: 1.25rem 1rem;
    text-align: center;
    color: #fff;
}
.bn-hero-stat strong {
    display: block;
    font-family: 'Nunito', sans-serif;
    font-size: clamp(1.6rem, 2vw, 2.25rem);
    font-weight: 900;
    line-height: 1.1;
}
.bn-hero-stat span {
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
}

/* Señal de scroll */
.bn-scroll-cue {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    color: rgba(255, 255, 255, .75);
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.bn-scroll-cue i { animation: bnBob 1.8s var(--bn-ease) infinite; }
.bn-scroll-cue:hover { color: #fff; }

/* --- Encabezado de página interior (más compacto que el hero) --- */
.bn-page-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: clamp(280px, 38vh, 420px);
    padding-block: clamp(2.5rem, 6vh, 4.5rem);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
.bn-page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, rgba(4, 36, 15, .92) 0%, rgba(5, 44, 19, .8) 50%, rgba(4, 110, 36, .62) 100%);
}
.bn-page-hero h1 {
    color: #fff;
    font-size: clamp(2rem, 3.4vw + 1rem, 3.25rem);
    font-weight: 900;
    letter-spacing: -.015em;
    margin-bottom: .75rem;
}
.bn-page-hero p {
    color: rgba(255, 255, 255, .88);
    font-size: clamp(1rem, .6vw + .9rem, 1.2rem);
    max-width: 62ch;
    margin-bottom: 0;
}

.bn-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.1rem;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}
.bn-breadcrumb a { color: rgba(255, 255, 255, .7); }
.bn-breadcrumb a:hover { color: #fff; }
.bn-breadcrumb span[aria-current] { color: var(--bn-green-300); }

/* ====================== 7. ENCABEZADOS DE SECCIÓN ================== */
.textSubti {
    display: flex;          /* ocupa su propia línea, encima del título */
    width: fit-content;
    align-items: center;
    gap: .6rem;
    font-family: 'Nunito', sans-serif;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--bn-green-600);
    margin-bottom: .85rem;
    background: transparent !important;
}
.textSubti::before {
    content: "";
    width: 28px;
    height: 3px;
    border-radius: 99px;
    background: var(--bn-grad);
    flex: none;
}

/* Variante sobre fondos oscuros */
.textSubti--light { color: #fff !important; }
.textSubti--light::before { background: #fff; }

.textTitle {
    font-size: clamp(1.75rem, 2.4vw + .9rem, 2.85rem);
    font-weight: 900;
    letter-spacing: -.015em;
    line-height: 1.1;
    text-transform: none;
}

.title-line { padding-bottom: 1.75rem; }
.title-line::after {
    width: 84px;
    height: 5px;
    border-radius: 99px;
    background: var(--bn-grad);
}

/* Encabezado heredado (.section-title): mismo lenguaje que .textSubti */
.section-title {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: .6rem;
    margin-bottom: .85rem;
    padding: 0 !important;
    font-family: 'Nunito', sans-serif;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--bn-green-600) !important;
    background: transparent !important;
}
.section-title::before {
    position: static;
    content: "";
    width: 28px;
    height: 3px;
    border-radius: 99px;
    background: var(--bn-grad);
    z-index: auto;
    flex: none;
}
.section-title::after { display: none; }
.section-title.text-center { margin-inline: auto; }

/* Bloque de encabezado alineado: título + descripción */
.bn-head {
    display: grid;
    grid-template-columns: minmax(260px, .9fr) minmax(0, 1.3fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: start;
    margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.bn-head > :last-child:not(:only-child) { padding-top: .35rem; }
@media (max-width: 991.98px) {
    .bn-head { grid-template-columns: 1fr; }
    .bn-head > :last-child:not(:only-child) { padding-top: 0; }
}

/* ====================== 8. TARJETAS E IMÁGENES ===================== */
.bn-card {
    background: var(--bn-surface);
    border: 1px solid var(--bn-line);
    border-radius: var(--bn-r);
    box-shadow: var(--bn-shadow-sm);
    transition: transform var(--bn-t), box-shadow var(--bn-t), border-color var(--bn-t);
    height: 100%;
}
.bn-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--bn-shadow-md);
    border-color: rgba(4, 132, 43, .3);
}

/* Tarjetas de imagen (Nuestra Empresa) */
.cardImgNosotros {
    position: relative;
    min-height: clamp(320px, 42vw, 460px);
    border-radius: var(--bn-r);
    overflow: hidden;
    box-shadow: var(--bn-shadow-sm);
    transition: transform var(--bn-t), box-shadow var(--bn-t);
}
.cardImgNosotros::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 45, 20, .92) 0%, rgba(6, 45, 20, .35) 45%, rgba(6, 45, 20, 0) 75%);
    transition: opacity var(--bn-t);
}
.cardImgNosotros::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-radius: inherit;
    transition: border-color var(--bn-t);
    pointer-events: none;
}
.cardImgNosotros:hover {
    transform: translateY(-6px);
    box-shadow: var(--bn-shadow-lg);
}
.cardImgNosotros:hover::after { border-color: rgba(76, 196, 114, .7); }

.cardImgNosotros > * { position: relative; z-index: 1; }

.textImagenEmp {
    font-size: clamp(1rem, 1vw + .75rem, 1.2rem);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: .02em;
    text-align: left;
    padding-inline: .25rem;
}
.textImagenEmp::after {
    left: .25rem;
    bottom: -8px;
    transform: none;
    height: 4px;
    background: var(--bn-green-300);
}
.textImagenEmp:hover { color: #fff; }
.textImagenEmp:hover::after { width: 48px; }

/* Servicios/procesos del template */
.service-item {
    background: var(--bn-surface);
    border: 1px solid var(--bn-line);
    border-radius: var(--bn-r) !important;
    box-shadow: var(--bn-shadow-xs);
    overflow: hidden;
    position: relative;
    height: 100%;
    transition: transform var(--bn-t), box-shadow var(--bn-t), border-color var(--bn-t);
}
.service-item::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--bn-grad);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--bn-t);
}
.service-item:hover {
    transform: translateY(-8px);
    box-shadow: var(--bn-shadow-md);
    border-color: rgba(4, 132, 43, .28);
}
.service-item:hover::before { transform: scaleX(1); }
.service-item:hover * { color: inherit !important; }
.service-item h5 {
    font-size: 1.1rem;
    color: var(--bn-ink) !important;
    margin-bottom: .5rem;
}
.service-item p {
    color: var(--bn-muted) !important;
    font-size: .95rem;
    margin-bottom: 0;
}
.service-item img {
    transition: transform var(--bn-t);
    filter: drop-shadow(0 6px 14px rgba(4, 132, 43, .22));
}
.service-item:hover img { transform: translateY(-4px) scale(1.06); }

/* Galería / destinos */
.destination a {
    border-radius: var(--bn-r);
    overflow: hidden;
    display: block;
    box-shadow: var(--bn-shadow-sm);
}
.destination img { border-radius: var(--bn-r); }

/* ====================== 9. MISIÓN / VISIÓN ========================= */
/* Neutraliza los hacks de superposición del original */
.indexAtras { z-index: auto !important; }
.anchoMision { width: 100% !important; }
.marginTopVi { margin-top: 0 !important; }

.bn-split {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
}
@media (max-width: 767.98px) {
    .bn-split { grid-template-columns: 1fr; }
}

.bn-split-panel {
    position: relative;
    isolation: isolate;
    padding: clamp(2.5rem, 5vw, 5.5rem) clamp(1.5rem, 4vw, 4.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
    overflow: hidden;
}
.bn-split-panel > * { position: relative; z-index: 1; }

.bn-split-panel--dark { background: linear-gradient(145deg, var(--bn-dark), var(--bn-dark-2)); }

.bn-split-panel--green::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(145deg, rgba(4, 132, 43, .93), rgba(6, 82, 31, .88)),
                url(../img/proyecto2.jpg) center / cover no-repeat;
}

/* Marca de agua decorativa */
.bn-split-panel .bn-watermark {
    position: absolute;
    right: -2%;
    bottom: -12%;
    z-index: 0;
    font-size: clamp(7rem, 16vw, 15rem);
    line-height: 1;
    color: rgba(255, 255, 255, .05);
    pointer-events: none;
}

.bn-split-panel h2 {
    color: #fff;
    font-size: clamp(1.75rem, 2.4vw + .9rem, 2.75rem);
    font-weight: 900;
    letter-spacing: -.01em;
    margin-bottom: 0;
}
.bn-split-panel p {
    color: rgba(255, 255, 255, .88);
    font-size: clamp(1rem, .5vw + .9rem, 1.1rem);
    line-height: 1.85;
    margin-bottom: 0;
}
.bn-split-panel .bn-rule { background: #fff; opacity: .85; }

/* Compatibilidad: estilos antiguos de misión/visión en otras vistas */
.containerTextoMision,
.containerTextoVision {
    padding: clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 4vw, 4.5rem) !important;
}
.containerTextoMision p,
.containerTextoVision p { padding: 0 !important; margin-top: 1.25rem !important; }

.bg-mision-brunner { background: linear-gradient(145deg, var(--bn-dark), var(--bn-dark-2)) !important; }
.bg-vision-brunner { background: var(--bn-grad) !important; }
.paddingAbout { padding: clamp(2.25rem, 4vw, 3.75rem) clamp(1.5rem, 3.5vw, 3rem) !important; }

/* ====================== 10. LÍNEA DE TIEMPO ======================== */
.timeline-wrapper { gap: clamp(.5rem, 2vw, 1.25rem); }

.timeline-btn {
    width: 46px;
    height: 46px;
    flex: none;
    align-items: center;
    background: var(--bn-surface);
    color: var(--bn-green-700);
    border: 1.5px solid var(--bn-line) !important;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
    box-shadow: var(--bn-shadow-xs);
    transition: background var(--bn-t-fast), color var(--bn-t-fast),
                transform var(--bn-t-fast), box-shadow var(--bn-t-fast);
}
.timeline-btn:hover:not(:disabled) {
    background: var(--bn-grad);
    color: #fff;
    border-color: transparent !important;
    transform: scale(1.06);
    box-shadow: var(--bn-shadow-green);
}
.timeline-btn:disabled { opacity: .35; cursor: not-allowed; }

.timeline-track::before {
    top: 38px;
    height: 3px;
    border-radius: 99px;
    background: linear-gradient(90deg, rgba(26, 168, 75, 0), var(--bn-green-400) 10%, var(--bn-green-400) 90%, rgba(26, 168, 75, 0));
    opacity: .9;
}

.timeline-nav { gap: clamp(1.5rem, 3vw, 2.5rem); }

.timeline-dot {
    color: var(--bn-muted) !important;
    font-family: 'Nunito', sans-serif;
    transition: color var(--bn-t-fast);
}
.timeline-dot .year {
    font-size: 1.05rem;
    font-weight: 700;
    transform: translateY(-14px);
    transition: transform var(--bn-t-fast), color var(--bn-t-fast);
}
.timeline-dot::after {
    top: 34px;
    width: 13px;
    height: 13px;
    border: 2px solid var(--bn-green-400);
    background: #fff;
    box-shadow: 0 0 0 0 rgba(4, 132, 43, .35);
    transition: background var(--bn-t-fast), box-shadow var(--bn-t-fast), transform var(--bn-t-fast);
}
.timeline-dot:hover { color: var(--bn-green-700) !important; }
.timeline-dot:hover::after { transform: translateX(-50%) scale(1.2); }

.timeline-dot.active,
.timeline-dot.text-success {
    color: var(--bn-green-700) !important;
}
.timeline-dot.active .year,
.timeline-dot.text-success .year { transform: translateY(-16px) scale(1.12); }
.timeline-dot.active::after,
.timeline-dot.text-success::after {
    background: var(--bn-green-600);
    box-shadow: 0 0 0 6px rgba(4, 132, 43, .16);
}

/* Panel de contenido del año */
.bn-timeline-panel {
    background: var(--bn-surface);
    border: 1px solid var(--bn-line);
    border-radius: var(--bn-r-lg);
    box-shadow: var(--bn-shadow-sm);
    overflow: hidden;
}
.bn-timeline-panel img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
    border-radius: 0;
}
.bn-timeline-body { padding: clamp(1.5rem, 3vw, 2.75rem); }
.bn-timeline-year {
    display: inline-block;
    align-self: start;
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: .85rem;
    letter-spacing: .14em;
    color: var(--bn-green-600);
    background: var(--bn-green-050);
    border-radius: 99px;
    padding: .3rem .9rem;
    margin-bottom: .9rem;
}

/* ====================== 11. ACORDEÓN DE SERVICIOS ================== */
.accordion-horizontal { margin: 0 auto; }

.accordion-horizontal ul li { transition: width var(--bn-t-slow); }

/* Velo degradado sobre la imagen (debajo del contenido) */
.accordion-horizontal ul li .accordion-tile {
    position: relative;
    background: transparent !important;
}
.accordion-horizontal ul li .accordion-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(to top, rgba(6, 45, 20, .9), rgba(6, 45, 20, .25) 55%, rgba(6, 45, 20, .12));
    transition: background var(--bn-t);
    pointer-events: none;
}
.accordion-horizontal ul li:hover .accordion-tile::before,
.accordion-horizontal ul li:focus .accordion-tile::before,
.accordion-horizontal ul li:focus-within .accordion-tile::before {
    background: linear-gradient(100deg, rgba(4, 48, 15, .92) 0%, rgba(4, 48, 15, .6) 55%, rgba(4, 132, 43, .35) 100%);
}

.accordion-horizontal ul li .overlay-info { z-index: 3; }
.accordion-horizontal span.tile-toogle { z-index: 4; }

.accordion-tile-introtext { max-width: 62ch; }
.accordion-tile-introtext h1,
.accordion-horizontal .separaciontitulo {
    font-size: clamp(1.35rem, 1.8vw + .8rem, 2.3rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.01em;
    margin-bottom: 1rem;
    text-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
.accordion-tile .overlay-info p {
    font-size: clamp(.95rem, .5vw + .85rem, 1.05rem);
    font-weight: 400;
    line-height: 1.75;
    color: rgba(255, 255, 255, .9);
    margin-bottom: .5rem;
}

.accordion-horizontal span.tile-toogle {
    background: rgba(255, 255, 255, .95);
    color: var(--bn-green-700);
    padding: 26px;
    box-shadow: var(--bn-shadow-md);
    transition: background var(--bn-t-fast), transform var(--bn-t-fast);
}

/* ====================== 12. PROCESOS =============================== */
.bn-process {
    position: relative;
    height: 100%;
    background: var(--bn-surface);
    border: 1px solid var(--bn-line);
    border-radius: var(--bn-r);
    padding: 1.75rem 1.5rem;
    box-shadow: var(--bn-shadow-xs);
    overflow: hidden;
    transition: transform var(--bn-t), box-shadow var(--bn-t), border-color var(--bn-t);
}
.bn-process:hover {
    transform: translateY(-8px);
    box-shadow: var(--bn-shadow-md);
    border-color: rgba(4, 132, 43, .28);
}
.bn-process-step {
    position: absolute;
    top: .75rem;
    right: 1.1rem;
    font-family: 'Nunito', sans-serif;
    font-size: 2.75rem;
    font-weight: 900;
    line-height: 1;
    color: rgba(4, 132, 43, .08);
    transition: color var(--bn-t);
}
.bn-process:hover .bn-process-step { color: rgba(4, 132, 43, .16); }
.bn-process-icon {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: var(--bn-green-050);
    margin-bottom: 1.1rem;
    transition: transform var(--bn-t), background var(--bn-t);
}
.bn-process:hover .bn-process-icon {
    transform: translateY(-3px) rotate(-4deg);
    background: rgba(4, 132, 43, .14);
}
.bn-process-icon img { width: 38px; height: 38px; object-fit: contain; }
.bn-process h5 { font-size: 1.05rem; margin-bottom: .4rem; }
.bn-process p { font-size: .93rem; color: var(--bn-muted); margin-bottom: 0; }

/* ====================== 13. EQUIPO E INDICADORES =================== */
.team-item {
    position: relative;
    border: 1px solid var(--bn-line);
    border-radius: var(--bn-r);
    box-shadow: var(--bn-shadow-sm);
    overflow: hidden;
    background: var(--bn-surface);
    height: 100%;
    transition: transform var(--bn-t), box-shadow var(--bn-t);
}
.team-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--bn-shadow-md);
}
.team-item > .overflow-hidden { position: relative; }
.team-item img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
}
.team-item h5 { margin-bottom: .15rem; }
.team-item small {
    color: var(--bn-green-600);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .76rem;
}

/* Indicadores (colaboradores / ingenieros / hora hombre) */
.cardEquipo {
    border: 0 !important;
    background: transparent;
    margin-bottom: 0;
    height: 100%;
}
.cardEquipo .card-body {
    margin: 0 !important;
    padding: clamp(1.75rem, 3vw, 2.75rem) 1.5rem !important;
    border: 1.5px solid rgba(4, 132, 43, .25) !important;
    border-radius: var(--bn-r-lg);
    background: linear-gradient(160deg, #fff, var(--bn-green-050));
    box-shadow: var(--bn-shadow-xs);
    transition: transform var(--bn-t), box-shadow var(--bn-t), border-color var(--bn-t);
}
.cardEquipo:hover .card-body {
    transform: translateY(-6px);
    box-shadow: var(--bn-shadow-md);
    border-color: rgba(4, 132, 43, .5) !important;
}
.cardEquipo i {
    font-size: clamp(2rem, 3vw, 2.75rem);
    color: var(--bn-green-600);
}
.cardEquipo h5 {
    font-size: clamp(2rem, 3.5vw, 3rem) !important;
    font-weight: 900;
    color: var(--bn-ink);
    margin: 1rem 0 .25rem !important;
    line-height: 1;
}
.cardEquipo h6 {
    font-size: .82rem !important;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bn-muted);
    margin-bottom: 0;
}
.circleArrow { display: none !important; }

/* ====================== 14. CLIENTES (CARRUSEL) ==================== */
.testimonial-carousel .owl-stage { display: flex; align-items: center; }

.testimonial-item_ {
    display: grid;
    place-items: center;
    height: 150px;
    padding: 1.25rem;
    background: var(--bn-surface);
    border: 1px solid var(--bn-line);
    border-radius: var(--bn-r);
    transition: transform var(--bn-t), box-shadow var(--bn-t), border-color var(--bn-t);
}
.testimonial-item_ img {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    max-height: 92px;
    object-fit: contain;
    filter: grayscale(1) opacity(.65);
    transition: filter var(--bn-t), transform var(--bn-t);
}
.testimonial-item_:hover {
    transform: translateY(-4px);
    box-shadow: var(--bn-shadow-sm);
    border-color: rgba(4, 132, 43, .3);
}
.testimonial-item_:hover img { filter: none; transform: scale(1.04); }

/* Testimonios con texto (otras vistas) */
.testimonial-item {
    border: 1px solid var(--bn-line) !important;
    border-radius: var(--bn-r);
    box-shadow: var(--bn-shadow-xs);
}

.testimonial-carousel .owl-dot {
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--bn-green-400);
    border-radius: 99px;
    transition: width var(--bn-t-fast), background var(--bn-t-fast);
}
.testimonial-carousel .owl-dot.active {
    width: 28px;
    background: var(--bn-green-600);
    border-color: var(--bn-green-600);
}

/* ====================== 15. FORMULARIO DE CONTACTO ================= */
.booking {
    position: relative;
    isolation: isolate;
    border-radius: var(--bn-r-lg) !important;
    overflow: hidden;
    background: linear-gradient(120deg, rgba(4, 48, 15, .94) 0%, rgba(6, 82, 31, .86) 50%, rgba(4, 132, 43, .72) 100%),
                url(../img/proyecto3.jpg) center / cover no-repeat;
    box-shadow: var(--bn-shadow-lg);
    padding: clamp(1.75rem, 4vw, 3.5rem) !important;
}
.booking h1, .booking h2 { color: #fff; }
.booking p { color: rgba(255, 255, 255, .88); }
.booking .bn-form-card {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--bn-r);
    padding: clamp(1.25rem, 2.5vw, 2rem);
    backdrop-filter: blur(10px);
}

.booking .form-control {
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: var(--bn-r-sm);
    color: #fff !important;
    padding: 1rem .95rem;
    transition: border-color var(--bn-t-fast), background var(--bn-t-fast), box-shadow var(--bn-t-fast);
}
.booking .form-control::placeholder { color: rgba(255, 255, 255, .55); }
/* Con etiqueta flotante el placeholder debe ser invisible:
   si no, se ve el texto duplicado detrás de la etiqueta. */
.booking .form-floating > .form-control::placeholder,
.booking .form-floating > .form-control:focus::placeholder { color: transparent !important; }
.booking .form-control:focus {
    background: rgba(255, 255, 255, .14) !important;
    border-color: var(--bn-green-300);
    box-shadow: 0 0 0 .22rem rgba(76, 196, 114, .25);
    color: #fff !important;
}
.booking .form-floating > label { color: rgba(255, 255, 255, .72) !important; }
.booking .form-floating > .form-control:focus ~ label,
.booking .form-floating > .form-control:not(:placeholder-shown) ~ label { color: rgba(255, 255, 255, .9) !important; }
.booking .form-floating > .form-control:focus ~ label::after,
.booking .form-floating > .form-control:not(:placeholder-shown) ~ label::after { background: transparent !important; }

.booking .bn-contact-list { display: grid; gap: .9rem; }
.booking .bn-contact-list a,
.booking .bn-contact-list span {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: #fff;
    font-weight: 500;
}
.booking .bn-contact-list i {
    width: 38px;
    height: 38px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    font-size: .9rem;
}
.booking .bn-contact-list a:hover { color: var(--bn-green-300); }

/* ====================== 16. FOOTER ================================= */
.footer {
    background: linear-gradient(170deg, var(--bn-dark) 0%, #0a140e 100%) !important;
    margin-top: 0 !important;
    padding-top: var(--bn-section-y) !important;
    position: relative;
}
.footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--bn-grad);
}
.footer h4, .footer h5 {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff !important;
    margin-bottom: 1.25rem;
    position: relative;
    padding-bottom: .75rem;
}
.footer h4::after, .footer h5::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 3px;
    border-radius: 99px;
    background: var(--bn-grad);
}
.footer p, .footer li, .footer address {
    color: rgba(255, 255, 255, .72);
    font-size: .95rem;
}
.footer .btn.btn-link {
    color: rgba(255, 255, 255, .72);
    padding: .22rem 0;
    font-size: .95rem;
    border-radius: 0;
    text-transform: none;   /* evita el "Capitalizado De Cada Palabra" */
    transition: color var(--bn-t-fast), transform var(--bn-t-fast);
}
.footer .btn.btn-link::before {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: .6rem;
    color: var(--bn-green-400);
}
.footer .btn.btn-link:hover {
    color: #fff;
    letter-spacing: normal;
    transform: translateX(4px);
}
.footer .btn.btn-social {
    width: 38px;
    height: 38px;
    border-color: rgba(255, 255, 255, .25);
    color: #fff;
}
.footer .btn.btn-social:hover {
    background: var(--bn-grad);
    border-color: transparent;
    color: #fff;
    transform: translateY(-3px);
}
/* El logotipo lleva texto oscuro: se apoya sobre una pastilla blanca */
.footer .bn-footer-logo {
    max-height: 70px;
    width: auto;
    margin-bottom: 1.25rem;
    background: #fff;
    padding: .55rem .9rem;
    border-radius: var(--bn-r-sm);
    box-shadow: var(--bn-shadow-sm);
}

.bn-sede {
    padding-left: 1.1rem;
    border-left: 2px solid rgba(76, 196, 114, .45);
    margin-bottom: 1rem;
}
.bn-sede strong {
    display: block;
    color: #fff;
    font-size: .82rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.bn-sede span { display: block; font-size: .9rem; color: rgba(255, 255, 255, .68); }

.bn-copyright {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-block: 1.5rem;
    color: rgba(255, 255, 255, .6);
    font-size: .9rem;
}
.bn-copyright a { color: rgba(255, 255, 255, .85); }
.bn-copyright a:hover { color: var(--bn-green-300); }

/* ====================== 16b. COMPONENTES DE PÁGINAS INTERIORES ==== */
/* Tarjeta de servicio con imagen */
.bn-servicio {
    position: relative;
    height: 100%;
    background: var(--bn-surface);
    border: 1px solid var(--bn-line);
    border-radius: var(--bn-r);
    overflow: hidden;
    box-shadow: var(--bn-shadow-sm);
    transition: transform var(--bn-t), box-shadow var(--bn-t), border-color var(--bn-t);
    display: flex;
    flex-direction: column;
}
.bn-servicio:hover {
    transform: translateY(-8px);
    box-shadow: var(--bn-shadow-md);
    border-color: rgba(4, 132, 43, .3);
}
.bn-servicio-img {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.bn-servicio-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--bn-t-slow);
}
.bn-servicio:hover .bn-servicio-img img { transform: scale(1.07); }
.bn-servicio-badge {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .9rem;
    border-radius: 99px;
    background: rgba(255, 255, 255, .94);
    color: var(--bn-green-700);
    font-family: 'Nunito', sans-serif;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.bn-servicio-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    flex: 1;
}
.bn-servicio-body h3 { font-size: 1.2rem; margin-bottom: 0; }
.bn-servicio-body p { color: var(--bn-muted); font-size: .95rem; margin-bottom: 0; }
.bn-servicio-body ul {
    list-style: none;
    padding: 0;
    margin: .25rem 0 0;
    display: grid;
    gap: .4rem;
}
.bn-servicio-body li {
    position: relative;
    padding-left: 1.5rem;
    font-size: .92rem;
    color: var(--bn-ink-soft);
}
.bn-servicio-body li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: .05rem;
    font-size: .72rem;
    color: var(--bn-green-600);
}
.bn-servicio-body .bn-link { margin-top: auto; padding-top: .5rem; }

/* Galería de proyectos */
.bn-proyecto {
    position: relative;
    display: block;
    border-radius: var(--bn-r);
    overflow: hidden;
    box-shadow: var(--bn-shadow-sm);
    height: 100%;
    min-height: 260px;
    transition: transform var(--bn-t), box-shadow var(--bn-t);
}
.bn-proyecto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--bn-t-slow);
}
.bn-proyecto::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 45, 20, .9) 0%, rgba(6, 45, 20, .25) 50%, transparent 80%);
    transition: opacity var(--bn-t);
}
.bn-proyecto:hover { transform: translateY(-6px); box-shadow: var(--bn-shadow-lg); }
.bn-proyecto:hover img { transform: scale(1.06); }
.bn-proyecto-info {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 1.5rem;
    color: #fff;
}
.bn-proyecto-info small {
    display: inline-block;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: .72rem;
    color: var(--bn-green-300);
    margin-bottom: .3rem;
}
.bn-proyecto-info h3 {
    color: #fff;
    font-size: 1.15rem;
    margin-bottom: 0;
}

/* Tarjetas de sede y de vacante */
.bn-sede-card {
    height: 100%;
    background: var(--bn-surface);
    border: 1px solid var(--bn-line);
    border-top: 4px solid var(--bn-green-600);
    border-radius: var(--bn-r);
    padding: 1.75rem 1.5rem;
    box-shadow: var(--bn-shadow-xs);
    transition: transform var(--bn-t), box-shadow var(--bn-t);
}
.bn-sede-card:hover { transform: translateY(-6px); box-shadow: var(--bn-shadow-md); }
.bn-sede-card h3 { font-size: 1.1rem; margin-bottom: .9rem; }
.bn-sede-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.bn-sede-card li {
    display: flex;
    gap: .75rem;
    font-size: .93rem;
    color: var(--bn-muted);
}
.bn-sede-card li i {
    color: var(--bn-green-600);
    width: 18px;
    flex: none;
    margin-top: .3rem;
}
.bn-sede-card a { color: var(--bn-ink-soft); }
.bn-sede-card a:hover { color: var(--bn-green-600); }

.bn-valor {
    height: 100%;
    text-align: center;
    padding: 2rem 1.25rem;
    background: var(--bn-surface);
    border: 1px solid var(--bn-line);
    border-radius: var(--bn-r);
    box-shadow: var(--bn-shadow-xs);
    transition: transform var(--bn-t), box-shadow var(--bn-t), border-color var(--bn-t);
}
.bn-valor:hover {
    transform: translateY(-6px);
    box-shadow: var(--bn-shadow-md);
    border-color: rgba(4, 132, 43, .28);
}
.bn-valor i {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--bn-green-050);
    color: var(--bn-green-600);
    font-size: 1.5rem;
}
.bn-valor h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.bn-valor p { font-size: .92rem; color: var(--bn-muted); margin-bottom: 0; }

/* Mapa incrustado */
.bn-map {
    border: 0;
    width: 100%;
    height: 100%;
    min-height: 340px;
    border-radius: var(--bn-r);
    box-shadow: var(--bn-shadow-sm);
    display: block;
}

/* Rejilla de logotipos de clientes */
.bn-logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1.25rem;
}
.bn-logo-tile {
    display: grid;
    place-items: center;
    height: 150px;
    padding: 1.25rem;
    background: var(--bn-surface);
    border: 1px solid var(--bn-line);
    border-radius: var(--bn-r);
    transition: transform var(--bn-t), box-shadow var(--bn-t), border-color var(--bn-t);
}
.bn-logo-tile img {
    max-width: 100%;
    max-height: 92px;
    object-fit: contain;
    filter: grayscale(1) opacity(.65);
    transition: filter var(--bn-t), transform var(--bn-t);
}
.bn-logo-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--bn-shadow-sm);
    border-color: rgba(4, 132, 43, .3);
}
.bn-logo-tile:hover img { filter: none; transform: scale(1.04); }

/* Formulario sobre fondo claro */
.bn-form-light {
    background: var(--bn-surface);
    border: 1px solid var(--bn-line);
    border-radius: var(--bn-r-lg);
    box-shadow: var(--bn-shadow-sm);
    padding: clamp(1.5rem, 3vw, 2.5rem);
}
.bn-form-light .form-control,
.bn-form-light .form-select {
    border-radius: var(--bn-r-sm);
    border: 1px solid var(--bn-line);
    padding: 1rem .95rem;
    transition: border-color var(--bn-t-fast), box-shadow var(--bn-t-fast);
}
.bn-form-light .form-control:focus,
.bn-form-light .form-select:focus {
    border-color: var(--bn-green-400);
    box-shadow: 0 0 0 .22rem rgba(4, 132, 43, .16);
}
.bn-form-light .form-floating > label { color: var(--bn-muted); }
.bn-form-light .form-floating > .form-control::placeholder { color: transparent; }

/* Aviso de resultado del formulario */
.bn-aviso {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: var(--bn-r-sm);
    border: 1px solid transparent;
    font-weight: 500;
    line-height: 1.6;
}
.bn-aviso i { font-size: 1.15rem; margin-top: .15rem; flex: none; }
.bn-aviso--ok {
    background: var(--bn-green-050);
    border-color: rgba(4, 132, 43, .35);
    color: var(--bn-green-800);
}
.bn-aviso--error {
    background: #fdf1f1;
    border-color: rgba(190, 40, 40, .3);
    color: #8c2020;
}
/* Sobre fondos oscuros (formulario del inicio) */
.booking .bn-aviso {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}
.booking .bn-aviso--error { background: rgba(190, 40, 40, .28); border-color: rgba(255, 180, 180, .5); }

/* Banda de llamada a la acción */
.bn-cta {
    position: relative;
    isolation: isolate;
    border-radius: var(--bn-r-lg);
    overflow: hidden;
    padding: clamp(2rem, 4vw, 3.5rem);
    background: var(--bn-grad);
    box-shadow: var(--bn-shadow-green);
    color: #fff;
}
.bn-cta h2 { color: #fff; margin-bottom: .75rem; }
.bn-cta p { color: rgba(255, 255, 255, .9); margin-bottom: 0; }

/* ====================== 17. ACCIONES FLOTANTES ==================== */
.bn-progress {
    position: fixed;
    inset: 0 auto auto 0;
    height: 3px;
    width: 0;
    background: var(--bn-grad);
    z-index: 1050;
    transition: width .1s linear;
}

.bn-fab-stack {
    position: fixed;
    right: clamp(1rem, 2vw, 1.75rem);
    bottom: clamp(1rem, 2vw, 1.75rem);
    z-index: 1040;
    display: grid;
    gap: .65rem;
    justify-items: center;
}

.bn-fab {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    font-size: 1.3rem;
    box-shadow: var(--bn-shadow-md);
    cursor: pointer;
    transition: transform var(--bn-t-fast), box-shadow var(--bn-t-fast), opacity var(--bn-t), visibility var(--bn-t);
}
.bn-fab:hover { transform: translateY(-3px) scale(1.05); color: #fff; }
.bn-fab--wa { background: #25d366; }
.bn-fab--wa::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(37, 211, 102, .55);
    animation: bnPulse 2.6s infinite;
}
.bn-fab--wa { position: relative; }
.bn-fab--top {
    background: var(--bn-grad);
    opacity: 0;
    visibility: hidden;
}
.bn-fab--top.is-visible { opacity: 1; visibility: visible; }

/* El back-to-top heredado del template queda reemplazado por .bn-fab-stack */
a.back-to-top { display: none !important; }

/* Spinner de carga: se autodesactiva aunque el JavaScript falle */
#spinner {
    background: var(--bn-surface) !important;
    animation: bnSpinnerOff 0s linear 4s forwards;
}
#spinner .spinner-border {
    color: var(--bn-green-600) !important;
    border-width: .22em;
}
@keyframes bnSpinnerOff {
    to { opacity: 0; visibility: hidden; }
}

/* ====================== 18. ACCESIBILIDAD Y ANIMACIONES =========== */
.bn-skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 2000;
    background: var(--bn-green-700);
    color: #fff;
    padding: .7rem 1.2rem;
    border-radius: 0 0 var(--bn-r-xs) var(--bn-r-xs);
    font-weight: 700;
    transition: top var(--bn-t-fast);
}
.bn-skip-link:focus { top: 0; color: #fff; }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 3px solid var(--bn-green-400);
    outline-offset: 3px;
    border-radius: var(--bn-r-xs);
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

@keyframes bnKenBurns {
    from { transform: scale(1) translate3d(0, 0, 0); }
    to   { transform: scale(1.1) translate3d(-1%, -1%, 0); }
}

@keyframes bnBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}

@keyframes bnPulse {
    0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); }
    70%  { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Respeta la preferencia de menos movimiento del sistema */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .wow,
    .animated {
        visibility: visible !important;
        opacity: 1 !important;
        animation: none !important;
    }
}

/* Impresión limpia */
@media print {
    .bn-topbar, .navbar, .bn-fab-stack, .bn-progress, #spinner, .booking form { display: none !important; }
    body { color: #000; }
    .footer { background: #fff !important; color: #000 !important; }
}