@charset "UTF-8";
/* CSS Document */

/* =========================
   TIPOGRAFÍAS
========================= */

/* Zapf Humanist 601 BT */
@font-face {
  font-family: "ZapfHumanist";
  src: url("../fonts/zapf-humanist-601-bt.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* Avenir LT Pro - Light */
@font-face {
  font-family: "Avenir";
  src: url("../fonts/AvenirLTProLight.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}

/* Avenir LT Pro - Regular */
@font-face {
  font-family: "Avenir";
  src: url("../fonts/AvenirLTProRoman.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

/* Avenir LT Pro - Medium */
@font-face {
  font-family: "Avenir";
  src: url("../fonts/AvenirLTProMedium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
}

/* Avenir LT Pro - Bold */
@font-face {
  font-family: "Avenir";
  src: url("../fonts/AvenirLTProBlack.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}

/* =========================
   ESTILOS GLOBALES
========================= */
:root {
  --guinda-principal: #9B2242;
  --guinda-secundario: #651D32;
  --gris-cool: #474C55;
  --gris: #727372;
  --gris-claro: #B8B6AF;
  --negro: #130D0E;
  --blanco: #e3e3e3;

  --fuente-principal: "ZapfHumanist", sans-serif;
  --fuente-secundaria: "Avenir", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: var(--gris-cool);
  font-family: var(--fuente-secundaria);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fuente-principal);
  color: var(--guinda-principal);
}


/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;600&display=swap');
body {
    color: #4d4d4d;
    font-family: 'Montserrat', sans-serif;
} */

/*Links*/

a {
    text-decoration: none;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    outline: none;
    border: 0px;
}

/*Navbar*/

.nav-link {
    color: var(--gris) !important;
    font-weight: 600;
    border-bottom: 5px transparent solid;
}

.nav-link:hover {
    color: var(--gris-claro) !important;
    border-bottom: 5px var(--gris-claro) solid;
    line-height: auto;
}

.nav-link:active {
    color: var(--gris-claro);
}

a.nav-link > span, a.nav-link > i  {
    color: var(--blanco);
}
i.bi  {
    color: var(--blanco);
}

.navbar-social a {
    color: var(--gris-cool);
}

.navbar-social a:hover {
    color: var(--gris-cool);
}

.actived {
    color: var(--gris-cool) !important;
    border-bottom: 5px var(--gris-cool) solid;
    line-height: auto;
}

.navbar-toggler {
    outline: none !important;
    border: none !important;
}

.nav-top a {
    color: var(--gris-claro) !important;
    border-bottom: none;
}

.nav-top a:hover {
    color: var(--gris-claro) !important;
    border-bottom: none;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: var(--gris-claro) !important;
    background-color: var(--guinda-principal);
    border-bottom: 5px var(--gris-claro) solid;
}

/*Borders*/

.border-primary {
    border-color: #ccc !important;
}

.vr {
    width: 3px;
}

/*Carousel*/

.carousel-caption {
    bottom: 2rem;
    padding-bottom: 0rem;
}

.carousel-indicators [data-bs-target] {
    background-color: #000;
}

/*Backgrounds*/

.bg-orange {
    background-color: #ff583d !important;
}

.bg-primary {
    background-color: #111f44 !important;
}

.bg-secondary {
    background-color: #0c1735 !important;
}

.bg-light {
    background-color: #f2f2f2 !important;
}

.bg-dark {
    background-color: #000 !important;
}

.bg-success {
    background-color: var(--guinda-principal) !important;
}

.bg-verde {
    /* background-image: url("../img/bg-verde.jpg") !important; */
    background-color: var(--gris-claro);
    background-position: center center !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    background-repeat: no-repeat;
}

/*Accordion*/

.accordion-button:not(.collapsed) {
    color: #000;
    font-weight: bold;
    background-color: #ECECEC;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
}

/*Text*/

.text-primary {
    color: #111f44 !important;
}

.text-gray {
    color: #ccc !important;
}

.text-orange {
    color: #ff583d !important;
}

.text-yellow {
    color: var(--gris-claro)f00 !important;
}

.fs-6 {
    font-size: 4.5em !important;
}

/*Btns*/

.btn-primary {
    background-color: #111f44;
    border: 0px;
    border-radius: 4px;
}

.btn-orange {
    background-color: #ff583d;
    border: 0px;
    border-radius: 4px;
}

/*Cards*/

.card-img-overlay {
    pointer-events: none;
}

.card-footer {
    background-color: var(--gris-claro);
    border-top: 0px solid rgba(0, 0, 0, .125);
    border-radius: 0px !important;
    border: 0px !important;
}

/*Border*/

.w-10 {
    width: 10% !important;
}

.vr {
    width: 2px;
    min-height: .5em;
    opacity: .15;
}

/*Swiper*/

.swiper {
    width: auto;
    height: 450px;
}

/*Footer*/

.footer a:hover {
    color: var(--gris-claro) !important;
}

.footer .active {
    color: var(--gris-claro) !important;
}

.redes-footer a {
    color: var(--gris-claro);
}

.grid-imagenes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	grid-gap: 1rem; 
	justify-content: center;
	align-items: center; 
	margin: auto; 
	padding: 1rem 0;
 	
}



.grid-imagenes img { transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

.grid-imagenes img:hover {
	transform: scale(1.05);
}

/*Media-Responsive*/

/*sm` applies to x-small devices (portrait phones, less than 576px)*/

@media (max-width: 576px) {
    .navbar-brand img {
        width: 280px;
    }
}

@media (width: 1366px) {
    .navbar-brand img {
        width: 400px;
    }
}
