/* === Fuentes personalizadas === */


@font-face {
  font-family: 'Greycliff CF';
  src: url('../fonts/greycliff/Greycliff_CF_Light.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Greycliff CF';
  src: url('../fonts/greycliff/Greycliff_CF_Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Greycliff CF';
  src: url('../fonts/greycliff/Greycliff_CF_Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Greycliff CF';
  src: url('../fonts/greycliff/Greycliff_CF_Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}



body {
    background-color: #124e5c;
    font-family: 'Greycliff CF', sans-serif;
}

.navbar {
    box-shadow: 0px 2px 6px rgba(0,0,0,0.2);
}

/* === Navbar personalizada === */

.custom-navbar {
    box-shadow: 0px 2px 6px rgba(0,0,0,0.2);
    font-family: 'Greycliff CF', sans-serif; /* Tipografía moderna */
    background-color: #124e5c; /* fondo personalizado */
}

.custom-navbar .navbar-brand,
.custom-navbar .nav-link {
    color: #b0dfe6; /* texto personalizado */
}

.custom-navbar .nav-link:hover {
    color: #f58a29; /* color al pasar el mouse */
}


/* === icono personalizado === */

.custom-icon-a {
        display: inline-block; /* Ensure it behaves like an inline-block element */
        width: 100px; /* Set desired width */
        height: 50px; /* Set desired height */
        background-image: url('../img/icons/bmz-11.svg'); /* Path to your icon */
        background-size: contain; /* Scale image to fit within the element */
        background-repeat: no-repeat; /* Prevent image repetition */
        background-position: center center; /* Center the image */
    }

/* === Footer personalizado === */

footer {
    font-size: 0.9rem;
}


.custom-footer {
  background-color: #5f0f40;       /* Fondo oscuro */
  color: #ffffff;                  /* Texto claro */
  font-family: 'Greycliff CF', sans-serif; /* Tipografía moderna */
  font-size: 0.95rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* Títulos de secciones */
.custom-footer h6 {
  color: #ffffff;
  font-weight: 600;
  font-size: 1.1rem;
}

/* Enlaces */
.custom-footer p,
.custom-footer a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.custom-footer a:hover {
  color: #ffffff;
}

/* Íconos sociales */
.custom-footer i.fab {
  font-size: 1.5rem;
  margin-right: 1rem;
  color: #ffffff;
}

/* Íconos de contacto */
.custom-footer i.fas {
  margin-right: 0.5rem;
}

/* Copyright */
.custom-footer .copyright {
  font-size: 0.85rem;
  padding: 1rem;
  color: #ffffff;
}

/* === Imagen Curva 1 === */

.custom-shape-divider-top-1756260373 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-top-1756260373 svg {
    position: relative;
    display: block;
    width: calc(145% + 1.3px);
    height: 59px;
}

.custom-shape-divider-top-1756260373 .shape-fill {
    fill: #124E5C;
}

/* === Marcas de agua BMZ === */

.marca-agua {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../img/icons/top-right-lines.png'); /* Ajusta la ruta si es necesario */
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  opacity: 1;
  z-index: 0;
}



/* === Animaciones simples === */

/* Efecto al hacer sobre <button> hover: cambia tamaño y color suavemente */
.btn-animado {
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.btn-animado:hover {
  transform: scale(1.1);
  background-color: #ff7b54 !important;
}

/* Animación para aparecer con un clic */
.fade-in {
  opacity: 0;
  transition: opacity 0.5s ease-in;
}

.fade-in.show {
  opacity: 1;
}


/* Transición suave para la tarjeta */
.card-animada {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto cuando pasa el mouse */
.card-animada:hover {
  transform: scale(1.05); /* Hace un zoom leve */
  box-shadow: 0 8px 16px rgb(255, 255, 255); /* Sombra para resaltar */
  cursor: pointer;
}

/* === Imagenes con tamaño fijo y recorte === */
.fixed-size {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.fixed-size img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}