html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
}


h1, h2, h3, h4, h5, h6 {
    font-family: montserrat, helvetica, arial, sans-serif;
    font-weight: 500;
    line-height: 1.2;
}

h1 {
    font-size: 42px;
    display: block;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}


/* Capa de fondo pegada al viewport, no intercepta clics */
#bg-stack {
    position: fixed; /* fuera del flujo */
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
    pointer-events: none; /* los clics pasan al contenido */
    overflow: hidden; /* recorta exceso */
}

    /* Imagen de base: cubre todo */
    #bg-stack .bg-base {
        position: absolute;
        inset: 0;
        width: 100%;
        /*height: 100%;*/
        object-fit: cover; /* ocupa todo sin deformarse */
    }

    /* Imagen superior: encima de la base */
    #bg-stack .bg-overlay {
        position: absolute;
        inset: 0;
        width: 100%;
        /*height: 100%;*/
        object-fit: cover; /* o 'contain' si no quieres estirarla */
        /* Si prefieres centrar sin estirar:
     width:auto; height:auto; top:50%; left:50%; transform:translate(-50%,-50%);
  */
    }

/* En la Home: fondo a pantalla completa */
#bg-stack.home {
    height: 100vh; /* 100% del alto de la pantalla inicial */
}

/* En otras páginas: altura limitada */
#bg-stack.limited {
    height: 300px;
}

#bg-stack.limited .bg-base,
#bg-stack.limited .bg-overlay {
    height: 100%; /* respeta los 300px del contenedor */
}

/* Asegura que tu contenido queda por encima del fondo */
.site-header {
    position: relative;
    z-index: 99; /* > 0 para quedar encima del fondo */
}
.site-main {
    position: relative;
    z-index: 2;
}

    /* Si quieres que el texto no “empiece” encima del fondo, añade padding-top a .site-main
   equivalente a la altura visible del fondo (ej. 60vh):
.site-main{ padding-top: 60vh; }
*/


/* Titulo*/
.site-header .navbar-brand {
    color: #fff !important;
    font-weight: 600;
    font-size: 3.2rem; /* tamaño similar a la imagen */
    letter-spacing: .3px;
}

.site-header .nav-link {
    color: #fff !important;
    font-weight: 600;
}

    .site-header .nav-link:hover {
        opacity: .85;
    }

.site-header .header-icons .nav-link {
    opacity: .9;
}

    .site-header .header-icons .nav-link:hover {
        opacity: 1;
        transform: translateY(-1px);
    }


.accent {
    background-color: rgb(154, 174, 4);
    color: white; /* para que el texto se vea bien */
    padding: 0.5rem 1rem; /* espacio interno */
    text-decoration: none; /* quita el subrayado */
    display: inline-block; /* para que el padding se aplique correctamente */
}

    .accent:hover {
        background-color: rgb(134, 154, 4); /* color más oscuro al pasar el mouse */
    }

.site-footer {
    background: #333; /* fondo oscuro como la imagen */
    /*border-top: 1px solid #2a2a2a;*/
    color: #fff;
}

    .site-footer .footer-link {
        color: #fff; /* texto claro */
        text-decoration: none;
    }

        .site-footer .footer-link:hover {
            text-decoration: underline;
        }


.btn{
    padding: 10px 50px;
    margin-right:10px;
}

.btn-primary {
    background-color: rgb(154, 174, 4);
}

    .btn-primary:hover {
        background-color: #6c757d;
    }