@font-face {
    font-family: 'Montserrat';
    src: url('../content/Montserrat-Variable.ttf') format('truetype');
}
@font-face {
    font-family: 'Montserrat-bold';
    src: url('../content/Montserrat-Bold.ttf') format('truetype');
    font-weight: bold;
}
@font-face {
    font-family: 'Montserrat-thin';
    src: url('../content/Montserrat-Thin.ttf') format('truetype');
}

body {
    font-family: 'Montserrat' !important;
    line-height: normal !important;
    margin: 0;   
    p {
        margin-bottom: 0;
    }


    .alert-container {
        width: 100%;
        display: flex;
        justify-content: center;

        .wip-alert {
            position: absolute;
            background-color: rgb(240, 210, 130);
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 0 16px;
            border-radius: 4px;
            height: 40px;
            top: 80px;
            max-width: 90vw;
            .alert-icon {
                max-width: 20px;
                max-height: 20px;
                img {
                    height: 100%;
                    width: 100%;
                    object-fit: contain;
                }
            }
        }
    }

    /* Barra de navegación version MOVIL */
    .navbar {
        padding-top: 20px;
        justify-content: space-between;
        --mdb-navbar-box-shadow: none;
        border-bottom: solid 1px rgb(214, 214, 214);
        background-color: white;

        h1 {
            margin-bottom: 0;
            line-height: normal;
            text-transform: uppercase;
            font-size: 18px;
            font-weight: 750;
            color: black;
            letter-spacing: .1em;
            padding: 0 7vw;
            margin-bottom: 10px;
        }
        button {
            border: none;
            padding: 0 7vw;
            margin-bottom: 10px;

            .animated-icon2 {
                width: 30px;
                height: 20px;
                position: relative;
                margin: 0px;
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
                -webkit-transition: .5s ease-in-out;
                -moz-transition: .5s ease-in-out;
                -o-transition: .5s ease-in-out;
                transition: .5s ease-in-out;
                cursor: pointer;
            }
              
            .animated-icon2 span {
                display: block;
                position: absolute;
                height: 3px;
                width: 100%;
                border-radius: 9px;
                opacity: 1;
                left: 0;
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
                -webkit-transition: .25s ease-in-out;
                -moz-transition: .25s ease-in-out;
                -o-transition: .25s ease-in-out;
                transition: .25s ease-in-out;
            }

            .animated-icon2 span {
                background: #020202;
              }

            .animated-icon2 span:nth-child(1) {
                top: 0px;
            }

            .animated-icon2 span:nth-child(2), .animated-icon2 span:nth-child(3) {
                top: 10px;
            }

            .animated-icon2 span:nth-child(4) {
                top: 20px;
            }

            .animated-icon2.open span:nth-child(1) {
                top: 11px;
                width: 0%;
                left: 50%;
            }

            .animated-icon2.open span:nth-child(2) {
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                transform: rotate(45deg);
            }

            .animated-icon2.open span:nth-child(3) {
                -webkit-transform: rotate(-45deg);
                -moz-transform: rotate(-45deg);
                -o-transform: rotate(-45deg);
                transform: rotate(-45deg);
            }

            .animated-icon2.open span:nth-child(4) {
                top: 11px;
                width: 0%;
                left: 50%;
            }
        }
        .navbar-collapse {
            padding: 0 7vw;
            margin-top: 8px;
            border-top: solid 1px rgb(214, 214, 214);
            .nav-elements {
                margin-top: 20px;
                margin-bottom: 12px;
            }
            .nav-button {
                padding: 10px 0;
    
                p {
                    text-transform: uppercase;
                    font-size: 11px;
                    letter-spacing: .2em;
                    font-weight: 500;
                }
            }
        }
        
    }
    

    /* Barra de navegación version DESKTOP */
    .header-desktop {
        img {
            height: 35vh;
            width: 100%;
            object-fit: cover;
            object-position: center bottom;
        }
        .nav {
            display: flex;
            width: 100%;
            height: 60px;
            justify-content: center;
            position: relative;
            
            border-bottom: solid 1px rgb(214, 214, 214);
            
            .nav-bar {
                max-width: 100vw;
                overflow: hidden;
                align-items: center;

                display: flex;
                
                p {
                    font-size: 26px;
                }

                .nav-elements {
                    display: flex;
                    align-self: center;
                    height: 100%;
    
                    .nav-button {
                        width: 100px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        
                        &:hover {
                            cursor: pointer;
                            border-bottom: solid 1px black;
                        }
                        p {
                            text-transform: uppercase;
                            text-align: center;
                            font-size: 11px;
                            letter-spacing: .2em;
                            font-weight: 500;
                        }
                    }
                }
            }
            .nav-social {
                display: flex;
                gap: 15px;
                align-items: center;
                position: absolute;
                left: 85vw;
                top: 20px;

                .social-button {
                    max-width: 20px;
                    max-height: 20px;
                    overflow: hidden;
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                        &:hover {
                            opacity: 0.5;
                            transition: all 0.2s ease; 
                            cursor: pointer;
                        }
                    }
                }
            }
        }
        
    }


    main {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    @media screen and (min-width: 992px) {
            .block-1 {
                margin-top: 100px;
                display: flex;
                justify-content: space-evenly;

                .block-1-content {
                    width: 30%;
                    padding: 25px;
                    .block-1-blank {
                        height: 50px;
                    }
                    img {
                        max-width: 100%;
                        height: auto;
                        transition: all 0.3s ease;
                        &:hover {
                            transform: scale(1.12);
                            cursor: pointer;
                        }
                    }
                    &.left {
                        padding-top: 0;

                        .block-1-blank{
                            height: 75px;
                        }
                        h2 {
                            color: #545454;
                            font-size: 18px;
                            text-transform: uppercase;
                            margin-bottom: 50px;
                        }
                    }
                }
            }
    }
    @media screen and (max-width: 992px) {
            .block-1 {
                margin-top: 80px;
                display: flex;
                flex-direction: column;

                .block-1-content {
                    width: 53%;
                    padding: 25px;
                    img {
                        max-width: 100%;
                        height: auto;
                        transition: all 0.3s ease;
                        &:hover {
                            transform: scale(1.12);
                            cursor: pointer;
                        }
                    }
                    &.left {
                        padding-top: 0;
                        h2 {
                            display: none;
                        }
                    }
                    &.mid {
                        margin-left: 47%;
                        margin-top: -150px;
                    }
                    &.right {
                        margin-top: -150px;
                    }
                }
            }
    }


}



/* ====== CONTROLES DE CARRUSEL ACCESIBLES (Bootstrap 4 + Font Awesome) ====== */

/* Tamaño/área clicable de los botones de navegación */
.carousel-contrast .carousel-control-prev,
.carousel-contrast .carousel-control-next {
  width: 4.5rem;           /* área más grande sin invadir demasiado */
  padding: .5rem;
}

/* Sustituimos los iconos por Font Awesome y quitamos el background-image */
.carousel-fa .carousel-control-prev-icon,
.carousel-fa .carousel-control-next-icon {
  background-image: none !important;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  position: relative;
  /* Fondo + borde + sombra para legibilidad universal */
  background-color: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
  /* Contraste adaptativo: sobre fondos muy claros/oscuro ayuda */
  mix-blend-mode: difference;
}

/* Glifo de Font Awesome dentro del icono */
.carousel-fa .carousel-control-prev-icon::before,
.carousel-fa .carousel-control-next-icon::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.25rem;
  line-height: 1;
  color: #fff;
  /* Refuerzo sutil de borde luminoso */
  text-shadow: 0 0 2px rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.35);
  content: ""; /* se setea abajo */
}
.carousel-fa .carousel-control-prev-icon::before { content: "\f104"; } /* ← */
.carousel-fa .carousel-control-next-icon::before { content: "\f105"; } /* → */

/* Hover/focus: mejora aún más el contraste y marca el foco */
.carousel-fa .carousel-control-prev:focus .carousel-control-prev-icon,
.carousel-fa .carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-fa .carousel-control-next:focus .carousel-control-next-icon,
.carousel-fa .carousel-control-next:hover .carousel-control-next-icon {
  background-color: rgba(0,0,0,.6);
  border-color: rgba(255,255,255,.85);
  box-shadow: 0 0 0 3px rgba(255,255,255,.4), 0 4px 14px rgba(0,0,0,.5);
  outline: none;
}

/* Indicadores: grandes, con halo y adaptativos */
.carousel-contrast .carousel-indicators {
  mix-blend-mode: difference;
  margin-bottom: .85rem;
}
.carousel-contrast .carousel-indicators li {
  width: 12px; height: 12px;
  background-color: #fff;
  opacity: 1;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.5);
  box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 2px 6px rgba(0,0,0,.3);
}
.carousel-contrast .carousel-indicators .active {
  transform: scale(1.25);
  border-color: rgba(0,0,0,.85);
}

/* Banda inferior sutil para reforzar legibilidad de los indicadores */
.carousel-contrast .carousel-inner::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 90px;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.26), rgba(0,0,0,0));
}

/* Accesibilidad: foco visible también en teclado en los enlaces control */
.carousel-contrast .carousel-control-prev:focus,
.carousel-contrast .carousel-control-next:focus {
  outline: none;
}
.carousel-contrast .carousel-control-prev:focus .carousel-control-prev-icon,
.carousel-contrast .carousel-control-next:focus .carousel-control-next-icon {
  box-shadow: 0 0 0 3px rgba(255,255,255,.45), 0 4px 14px rgba(0,0,0,.5);
}

/* ====== TILE DE GALERÍA (por si no lo tenías) ====== */
.gallery-tile { position: relative; display: block; border-radius: .5rem; overflow: hidden; }
.gallery-tile img { transition: transform .3s ease; }
.gallery-tile:hover img { transform: scale(1.02); }
.gallery-overlay {
  position: absolute; inset: 0; display: flex; gap: .5rem;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.35); color: #fff; font-weight: 600;
  opacity: 0; transition: opacity .25s ease; text-transform: uppercase; letter-spacing: .5px;
}
.gallery-tile:hover .gallery-overlay { opacity: 1; }
.gallery-overlay i { font-size: 1.25rem; }


/* ====== SUAVIZADO DE TAMAÑOS EN CARRUSEL (FIX Bootstrap 4) ====== */
/* Contenedor alto fijo adaptable: evita saltos de layout */
/* Fondo translúcido con blur elegante */
.carousel-smooth .carousel-inner {
  position: relative;
  height: min(75vh, 90vw);
  background: rgba(255, 255, 255, 0.35); /* leve oscurecido para contraste */
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%); /* Safari */
  border-radius: 12px; /* opcional, suaviza bordes dentro del modal */
  overflow: hidden;
}

/* Le damos un ligero sombreado para separar del fondo */
.carousel-smooth .modal-content {
  background: transparent;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
}


/* Deja que Bootstrap controle display:none por defecto */
.carousel-smooth .carousel-item {
  height: 100%;
}

/* Solo centramos cuando el slide es visible o está en transición */
.carousel-smooth .carousel-item.active,
.carousel-smooth .carousel-item-next,
.carousel-smooth .carousel-item-prev {
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-smooth .carousel-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 320ms ease;
  will-change: transform;
}

.carousel-smooth .carousel-img.grow-start { transform: scale(0.94); }
.carousel-smooth .carousel-img.shrink-start { transform: scale(1.06); }

/* Un pelín de suavizado al terminar */
.carousel-smooth .carousel-item.active .carousel-img {
  transition: transform 280ms ease;
}

/* Aseguramos que los controles queden por encima del degradado */
.carousel-contrast .carousel-control-prev,
.carousel-contrast .carousel-control-next {
  z-index: 2;
}
.carousel-contrast .carousel-inner::after {
  z-index: 1;
}

/* ===== Vidrio translúcido en el MODAL ===== */
.modal-content {
  background: rgba(15,15,15,.30);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: none;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0,0,0,.4);
}

/* Un poco de aire alrededor del carrusel dentro del modal */
.modal-content .modal-body {
  padding: 12px;
}

/* ===== Carrusel “auto-height” con transición suave ===== */
.carousel-smooth .carousel-inner {
  /* Altura automática y animable */
  height: auto;
  transition: height 320ms ease;
  position: relative;
}

/* Centramos SOLO cuando el slide es visible o en transición (respeta BS4) */
.carousel-smooth .carousel-item { height: auto; }
.carousel-smooth .carousel-item.active,
.carousel-smooth .carousel-item-next,
.carousel-smooth .carousel-item-prev {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* La imagen ocupa como máximo el viewport; sin deformar */
.carousel-smooth .carousel-img {
  max-width: 100%;
  max-height: calc(75vh - 80px); /* margen para indicadores/controles */
  object-fit: contain;
  transition: transform 300ms ease;
  will-change: transform;
}

/* Escala inteligente (se añaden/quitán por JS) */
.carousel-smooth .carousel-img.grow-start   { transform: scale(0.94); }
.carousel-smooth .carousel-img.shrink-start { transform: scale(1.06); }

/* Indicadores y controles por encima de la imagen */
.carousel-contrast .carousel-control-prev,
.carousel-contrast .carousel-control-next { z-index: 3; }
.carousel-contrast .carousel-indicators { z-index: 3; }

/* Mantén tus estilos de accesibilidad previos (flechas FA, contrastes, etc.) */

.gallery-badge {
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 1.6rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  z-index: 2;
  pointer-events: none; /* para que no moleste al click en la imagen */
}

/* Si quieres que al pasar el ratón se refuerce un poco */
.gallery-tile:hover .gallery-badge {
  background: rgba(0, 0, 0, 0.8);
}


/* ====== PRÓXIMOS PROYECTOS ====== */
.upcoming-projects {
  border-top: 1px solid rgb(214, 214, 214);
}

.project-card {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.06);
}

.project-media {
  width: 100%;
  height: 190px;
  overflow: hidden;
  background: rgba(0,0,0,0.04);
}

.project-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.project-card:hover .project-media img {
  transform: scale(1.03);
}

.project-body {
  padding: 16px 16px 18px 16px;
}

.project-body p {
  font-size: 16px; /* similar a lead pero más contenido */
  color: #333;
}

/* Ajuste de altura en móvil */
@media (max-width: 767.98px) {
  .project-media { height: 210px; }
}