/* Intrinseca Book */
@font-face {
  font-family: 'Intrinseca';
  src: url('../fonts/Intrinseca-Book.eot'); /* Solo IE8- */
  src: url('../fonts/Intrinseca-Book.eot?#iefix') format('embedded-opentype'), /* IE8- */
       url('../fonts/Intrinseca-Book.woff') format('woff'), /* Modern browsers */
       url('../fonts/Intrinseca-Book.ttf') format('truetype'); /* Fallback */
  font-weight: 400; /* normal */
  font-style: normal;
  font-display: swap;
}

/* Intrinseca SemiBold */
@font-face {
  font-family: 'Intrinseca';
  src: url('../fonts/Intrinseca-SemiBold.eot');
  src: url('../fonts/Intrinseca-SemiBold.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Intrinseca-SemiBold.woff') format('woff'),
       url('../fonts/Intrinseca-SemiBold.ttf') format('truetype');
  font-weight: 600; /* semibold */
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'Intrinseca', sans-serif;
      text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale!important;
}

h1, h2, h3 {
  font-family: 'Intrinseca', sans-serif;
  font-weight: 600; /* Usará SemiBold automáticamente */
}
.fntl{font-weight: 500; /* Usará SemiBold automáticamente */}

p {
  font-weight: 400; /* Usará Book */
}


/* --- Header / Navbar --- */
.navbar {
    padding: 1.5rem 2rem;
    transition: background-color 0.4s ease-in-out;
    background-color: transparent;
    z-index: 10; /* Asegura que el menú esté siempre encima de todo */
}

/* This class will be added with JS on scroll */
.navbar-scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.navbar-scrolled .nav-link,
.navbar-scrolled .social-icon a {
    color: #333 !important;
}

.navbar-scrolled .btn-contact {
    color: #fff !important;
    background-color: #333 !important;
    border-color: #333 !important;
}

/* Overriding Bootstrap's .navbar-brand default styles */
.navbar-brand {
    position: relative; /* Crea el contexto para posicionar el logo */
    width: 200px; /* Reserva espacio para el logo para que el menú no se mueva */
    height: 50px; /* Le da una altura estable a la barra de navegación */
    padding: 0;
    color: #fff !important;
}

/* Overriding Bootstrap's .navbar-brand default styles */
.black .navbar-brand {
    position: relative; /* Crea el contexto para posicionar el logo */
    width: 200px; /* Reserva espacio para el logo para que el menú no se mueva */
    height: 50px; /* Le da una altura estable a la barra de navegación */
    padding: 0;
    color: #000000 !important;
}
/* Custom class for the logo image */
.logo-header {
    position: absolute; /* Saca al logo del flujo normal de la página */
    top: 50%; /* Lo posiciona a la mitad del contenedor .navbar-brand */
    left: 0;
    transform: translateY(-50%); /* Lo centra verticalmente a la perfección */
    height: 74px; /* <-- AHORA SÍ: AJUSTA ESTA ALTURA SIN MIEDO */
    width: auto;
}

/* Overriding Bootstrap's .nav-link default styles */
.navbar-nav .nav-link {
    color: #fff;
    font-weight: 500;
    margin: 0 1rem;
    transition: all 0.3s ease-in-out;
    border:2px solid transparent;border-radius: 30px;
}

.black .navbar-nav .nav-link {
    color: #000;}

.navbar-expand-lg .navbar-nav .nav-link {padding: 5px 20px;}

.navbar-nav .nav-link:hover{border:2px solid white;border-radius: 30px;
background-color: #fff;color:#000;padding: 5px 20px;}

.black .navbar-nav .nav-link:hover{border:2px solid rgb(0, 0, 0);border-radius: 30px;
background-color: #000000;color:#ffffff;padding: 5px 20px;}

.navbar-nav .nav-link:focus{border:2px solid white;border-radius: 30px;
background-color: #fff;color:#000;padding: 5px 20px;}
.navbar-expand-lg .navbar-nav .dropdown-menu {left: 17px;}

/* Overriding Bootstrap's .dropdown-menu default styles */
.dropdown-menu {
    background-color: #fff;
    border: none;
    border:2px solid white;border-radius: 3px;
}

/* Overriding Bootstrap's .dropdown-item default styles */
.dropdown-item {
    color: #333;
    font-weight: 500;
    
}
.dropdown-item:hover {
    background-color: #f0f0f0;
}

.dropdown-toggle::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: 0em;
    content: "+";
    border-top: none;
    border-bottom: none;
    border-left: none;}

/* Custom class for the contact button */
.btn-contact {
    border: 2px solid #fff;
    color: #fff !important;
    border-radius: 50px;
    padding: 0.5rem 1.5rem;
    font-weight: 500;
    transition: all 0.3s;
}

.btn-contact:hover {
    background-color: #fff;
    color: #000 !important;
}

.black.btn-contact {
    background: #000;
    border: 2px solid #000;
    color: #fff !important;
}

.black.btn-contact:hover {
    background-color: #fff;
    color: #000000 !important;
}
/* Custom class for social media icon */
.social-icon a {
    color: #fff !important;
    font-size: 1.5rem;
    margin-left: 1.5rem;
}

.black.social-icon a {
    color: #000 !important;
}

/* --- Hero Carousel --- */
#heroCarousel {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* Corregido para que los controles se puedan clickear */
}

/* Overriding Bootstrap's default carousel dimensions */
.carousel-inner, .carousel-item {
    height: 100%;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.9);
}

/* Carousel Zoom Animation */
.carousel-item.active img.animate {
    animation: zoomInOut 12s infinite alternate;
}

@keyframes zoomInOut {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

/* Overriding Bootstrap's .carousel-indicators */
.carousel-indicators {
    position: absolute;
    left: auto;
    right: 0;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    margin: 0;
    padding-right: 3rem; /* Spacing from the edge */
    flex-direction: column; /* Vertical alignment */
    justify-content: center;
}

.carousel-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 0; /* Square shape */
    border: 2px solid #fff;
    background-color: transparent;
    opacity: 1;
    margin: 8px 0; /* Vertical spacing */
}

.carousel-indicators .active {
    background-color: rgba(255, 255, 255, 0.8);
}

/* --- Carousel Caption Styling & Animation --- */
/* Overriding Bootstrap's .carousel-caption */
.carousel-caption {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: left;
    padding: 0;
    /* This allows the child to be positioned relative to the whole slide */
}

/* Custom class for static captions */
.caption-bottom-left {
    position: absolute;
    bottom: 5rem;
    left: 5rem;
    font-size: 1.8rem;
    font-weight: 500;
    color: #fff;
}

/* Custom class for the animated caption container */
.caption-animate-container {
    position: absolute;
    /* Set initial state to match the animation 'from' state to prevent flicker */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* The animation now controls the position and size */
    animation: moveAndShrink 3s ease-in-out forwards;
}

.caption-animate-container h1 {
    font-weight: 400;
    color: #fff;
    white-space: nowrap;
    font-size: inherit; /* Make sure it inherits the parent's animated font-size */
}


@keyframes moveAndShrink {
    0% {
        /* Start state: Large and centered */
        opacity: 1;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 3.6rem; /* Double the final size */
    }
    30% { /* Ajustado para que la pausa dure 1.2 segundos en una animación de 3s */
        /* Hold state (1.2s into a 3s animation = 40%) */
        opacity: 1;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 3.6rem;
    }
    100% {
        /* Final state: Smaller and in the bottom-left */
        opacity: 1;
        top: calc(100vh - 7.5rem); 
        left: 5rem;
        transform: translate(0, 0); /* Reset centering transform */
        font-size: 1.8rem; /* Final size */
    }
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .navbar {
         background-color:transparent;
    }
     .nav-link, .social-icon a {
        color: #333 !important;
    }
    .btn-contact {
        color: #fff !important;
        background-color: #333 !important;
        border-color: #333 !important;
    }
    .caption-animate-container h1, .caption-bottom-left {
        /* Base font-size for mobile captions */
        font-size: 1.5rem;
    }
    
    /* Redefine animation keyframes for mobile devices */
    @keyframes moveAndShrink {
        0% {
            opacity: 1;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 3.0rem; /* Double the final size for mobile */
        }
        40% {
             opacity: 1;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 3.0rem;
        }
        100% {
            opacity: 1;
            top: calc(100vh - 5.5rem); /* Adjusted for mobile bottom position */
            left: 2rem;
            transform: translate(0, 0);
            font-size: 1.5rem; /* Final size for mobile */
        }
    }
    .caption-bottom-left {
        left: 2rem;
        bottom: 3rem;
    }
    .carousel-indicators {
        padding-left: auto;
        padding-right: 2rem;
    }
    .full-screen-image-section .image-section-caption {
        font-size: 1.5rem;
        left: 2rem;
        bottom: 3rem;
    }
}


/* --- Page Content Layout --- */
.page-content {
    margin-top: 100vh; /* Pushes content below the full-height hero carousel */
    position: relative; /* Establishes a stacking context */
    z-index: 2; /* Ensures content is above the hero carousel */
    background: #fff; /* A solid background to prevent transparency issues */
}


.icn-casa{
    width: 220px;
    height: auto;
    margin-right: 20px;
    display: block;
}

.fnt-sp{letter-spacing: 10px;}

.m-creamos{
       margin: 0px 0px 120px;
}

.btn_proyectos{
    background: #fff;
    color: #000;
    border-radius: 50px;
    padding: 10px 30px;
    font-weight: 500;
    border: 2px solid #000;
    transition: all 0.3s;
    text-decoration: none;
    font-size: 1.3rem;
}  
.btn_proyectos:hover{
    background: #000;
    color: #fff;
    border: 2px solid #000;
}

/* --- Sección Imagen Full Screen (Sonreir) --- */
.full-screen-image-section {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden; /* Oculta el excedente de la imagen al hacer zoom */
    background-color: #333; /* Fallback por si la imagen no carga */
}

.full-screen-image-section .bg-image-zoom {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    filter: brightness(0.9);
    /* Reutilizamos la misma animación del carrusel */
    /*animation: zoomInOut 12s infinite alternate;*/
}

.full-screen-image-section .image-section-caption {
    position: absolute;
    bottom: 1rem;
    left: 3rem; /* Ajustado para que esté dentro del contenedor de Bootstrap */
    padding: 0;
    font-size: 1.8rem;
    font-weight: 400; /* Usando SemiBold */
    color: #fff;
    z-index: 2;
    line-height: 1.5;
}


.counter-number{
    font-size: 6rem;
    font-weight: 500;
    color: #000;
}

.isotipo{
    height: 198px;
    width: auto;
}


/*Servicios*/
/* Sección de Servicios con fondo blanco */
.services-section {
    background-color: #ffffff;
}

.section-title {
    font-family: 'Oswald', sans-serif; /* Reemplaza con tu fuente fntl real */
    font-size: 2.2rem;
    line-height: 1.3;
    color: #333;
    font-weight: 500;
}

/* Estilo principal de la tarjeta */
.service-card {
    border: 1px solid #e0e0e0; /* Borde gris sutil para toda la tarjeta */
    border-radius: 12px; /* Bordes más redondeados como en la imagen */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Sombra muy suave */
    overflow: hidden; /* Muy importante para que los bordes redondeados funcionen */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Estilo para el ENCABEZADO NEGRO */
.service-card .card-header {
    background-color: #212529; /* Fondo negro */
    color: #ffffff; /* Texto blanco */
    border-bottom: none; /* Quitamos la línea que Bootstrap pone por defecto */
    padding: 1.5rem;
}

/* Estilo para el CUERPO BLANCO */
.service-card .card-body {
    background-color: #ffffff; /* Fondo blanco */
    padding: 1.5rem;
}

/* Icono dentro del encabezado */
.service-card .card-icon {
    width: 40px;
    height: 40px;
    filter: brightness(0) invert(1); /* Truco para hacer cualquier ícono negro en blanco */
}

/* Título dentro del encabezado */
.service-card .card-title {
    font-size: 1.25rem;
    font-weight: 600;
}

/* Texto dentro del cuerpo */
.service-card .card-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #333;
}


/*FOOTER*/
footer{
    padding: 2rem 0;
    background-color: #1a1a1a;
    color: #fff;
    text-align: center;
}

.btn_mail{
    color: #fff;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}
.btn_mail:hover{
    color: #fffdf6;
}

.btn_wht{
    border:#f0f0f0 1px solid;
    display: inline-block;
    margin-top: 15px;
    color: #fff;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
    border-radius: 30px;
    background-color: #ffffff00;
    padding: 10px 20px;
    font-weight: 500;
    vertical-align: middle;
    display: inline-flex;           /* alinea ícono y texto en una fila */
  align-items: center;  
  cursor: pointer !important;
}

.btn_wht{font-size: 1.2em;}
.btn_wht i{font-size: 1.3em;  align-items: center; margin-right: 8px; }

.btn_wht:hover{
    color: #000;
    background-color: #f0f0f0;
    text-decoration: none;
    cursor: pointer !important;
}

.big_btn.btn_wht{
    border:#000000 1px solid;
    display: inline-block;
    margin-top: 15px;
    color: #ffffff;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
    border-radius: 30px;
    background-color: #000000;
    padding: 10px 20px;
    font-weight: 500;
    vertical-align: middle;
    display: inline-flex;           /* alinea ícono y texto en una fila */
  align-items: center;  
  cursor: pointer !important;
}

.big_btn.btn_wht{font-size: 1.4em;}
.big_btn.btn_wht i{font-size: 1.5em;  align-items: center; margin-right: 8px; }

.big_btn.btn_wht:hover{
    color: #030303;
    background-color: #ffffff;
    text-decoration: none;
    cursor: pointer !important;
}

footer img{
    height: auto;
    width: 210px;
}


/* GRID PROYECTOS */
/* --- ESTILOS PARA EL GRID DE PROYECTOS --- */

.project-item {
  position: relative; /* Clave 1: El contenedor debe ser relativo */
  overflow: hidden;   /* Oculta lo que se salga del contenedor */
  cursor: pointer;
  border-radius: 0px; /* Opcional: para bordes redondeados */
}

.project-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Asegura que la imagen cubra todo el espacio */
  display: block;
  transition: transform 0.4s ease; /* Transición suave para el zoom */
}

.project-overlay {
  /* Clave 2: El overlay debe ser absoluto para superponerse */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* Clave 3: Inicia transparente y oculto */
  background-color: rgba(255, 255, 255, 0); 
  opacity: 0;

  /* Centra el contenido (título y botón) */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  /* Transición suave para el efecto de aparición */
  transition: background-color 0.4s ease, opacity 0.4s ease;
}

/* Clave 4: El efecto al pasar el cursor (hover) */
.project-item:hover .project-overlay {
  background-color: rgba(255, 255, 255, 0.95); /* Fondo blanco casi sólido */
  opacity: 1; /* Lo hace visible */
}

/* Efecto de zoom suave en la imagen al hacer hover */
.project-item:hover img {
  transform: scale(1.05);
}

.project-title {
  color: #222;
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}

/* Estilo del botón actualizado para que coincida con tu imagen */
.project-button {
  background-color: transparent;
  color: #333;
  border: 1px solid #333; /* Borde sólido */
  padding: 10px 25px;
  text-decoration: none;
  border-radius: 50px; /* Bordes completamente redondeados */
  font-weight: 500;
  transition: all 0.3s ease;
}

.project-button:hover {
  background-color: #333;
  color: #fff;
}

/* --- Estilos FINALES con animación fluida para menú móvil --- */
/* --- ESTILOS MÓVILES COMPLETOS Y FINALES PARA ULACIA --- */

@media (max-width: 991.98px) {

  /* ======================================== */
  /* 1. CONTENEDOR DEL MENÚ DESPLEGADO        */
  /* ======================================== */
  .navbar-collapse.collapse.show,
  .navbar-collapse.collapsing {
    height: 100vh !important;
    width: 100vw;
    position: absolute;
    left: 0;
    top: 100px; /* Ajusta según la altura de tu header */
    background-color: white;
    padding: 20px 30px;
    transition: none !important;
  }

  /* Animación de entrada para los elementos */
  .navbar-collapse .navbar-nav,
  .navbar-collapse .d-flex {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.35s ease-out 0.1s, transform 0.35s ease-out 0.1s;
  }
  .navbar-collapse.collapse.show .navbar-nav,
  .navbar-collapse.collapse.show .d-flex {
    opacity: 1;
    transform: translateY(0);
  }

  /* ======================================== */
  /* 2. LINKS DE NAVEGACIÓN (¡LA PARTE QUE FALTABA!) */
  /* ======================================== */
  .navbar-dark .navbar-nav .nav-link {
    color: #333 !important;
    /* Aquí está el espaciado que se había perdido */
    padding: 15px 10px;
    margin-bottom: 5px;
    border-radius: 8px;
    transition: background-color 0.3s, color 0.3s;
  }
  
  /* Efecto Hover para los links */
  .navbar-nav .nav-item a.nav-link:hover {
    background-color: #000;
    color: #fff !important;
  }

  /* Estilos del dropdown de Proyectos */
  .dropdown-menu {
    background-color: #f8f9fa;
    border: none;
    padding-left: 15px;
  }
  .dropdown-item {
    color: #444;
    padding: 10px 15px;
  }


  /* ======================================== */
  /* 3. BOTÓN DE CONTACTO Y REDES SOCIALES    */
  /* ======================================== */
  .navbar-collapse .d-flex {
    flex-direction: column;
    align-items: stretch;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
  }
  .navbar-collapse .btn-contact {
    width: 100%;
    margin-bottom: 20px;
    text-align: center;
    background-color: #212529;
    color: white;
    border: 2px solid #212529;
    padding: 12px;
    border-radius: 30px;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  }
  .navbar-collapse .btn-contact:hover {
    background-color: #fff;
    color: #000;
    border-color: #000;
  }
  .navbar-collapse .social-icon a {
    text-align: left;
    display: block;
    font-size: 24px;
    color: #333;
  }


  /* ======================================== */
  /* 4. ANIMACIÓN DEL ÍCONO HAMBURGUESA A "X" */
  /* ======================================== */
  .navbar-toggler {
    border: none;
    background: transparent !important;
    box-shadow: none !important;
    position: relative;
    width: 30px;
    height: 22px;
  }
  .navbar-toggler .navbar-toggler-icon {
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -1.5px;
    width: 100%;
    height: 3px;
    background-color: transparent;
  }
  .navbar-toggler .navbar-toggler-icon,
  .navbar-toggler .navbar-toggler-icon::before,
  .navbar-toggler .navbar-toggler-icon::after {
    display: block;
    width: 100%;
    height: 3px;
    border-radius: 3px;
    transition: transform 0.3s ease, background-color 0.2s ease;
  }
  .navbar-toggler .navbar-toggler-icon::before,
  .navbar-toggler .navbar-toggler-icon::after {
    content: '';
    position: absolute;
  }

  /* Colores del ícono */
  .navbar-toggler .navbar-toggler-icon,
  .navbar-toggler .navbar-toggler-icon::before,
  .navbar-toggler .navbar-toggler-icon::after {
    background-color: #000; /* Negro por defecto */
  }
  .pagina-home .navbar-toggler .navbar-toggler-icon,
  .pagina-home .navbar-toggler .navbar-toggler-icon::before,
  .pagina-home .navbar-toggler .navbar-toggler-icon::after {
    background-color: #fff; /* Blanco en el home */
  }

  /* Lógica de la animación */
  .navbar-toggler[aria-expanded="false"] .navbar-toggler-icon {
    background-color: #000; /* Negro por defecto */
  }
  .pagina-home .navbar-toggler[aria-expanded="false"] .navbar-toggler-icon {
    background-color: #fff; /* Blanco en el home */
  }
  .navbar-toggler[aria-expanded="false"] .navbar-toggler-icon::before {
    transform: translateY(-9px);
  }
  .navbar-toggler[aria-expanded="false"] .navbar-toggler-icon::after {
    transform: translateY(9px);
  }
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-color: transparent;
  }
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
    transform: translateY(0) rotate(45deg);
  }
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    transform: translateY(0) rotate(-45deg);
  }
}



        .hero-overlay {
            position: relative;
            display: block;
            width: 100%;
            background: black;
            padding: 4rem 0;
        }
        .project-stats .stat-item {
            border-left: 1px solid #777;
            padding-left: 15px;
        }
        .project-stats .stat-item:first-child {
            border-left: none;
        }
        .stat-title {
            font-size: 0.8rem;
            text-transform: uppercase;
            color: #ffffffff;
        }
        .stat-value {
            font-size: 1rem;
            font-weight: bold;
        }
        .section-title {
            text-transform: uppercase;
            letter-spacing: 0.2em;
            font-weight: bold;
            color: #ffffffff;
        }

        .featurette-text {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100%;
        }
        .materials-list p {
            margin-bottom: 0.5rem;
        }
        .materials-list b {
            font-size: 0.9rem;
        }

        /* opción preferida: aplica color blanco a todo el bloque .hero-overlay */
.hero-overlay {
  color: #ffffff;             /* texto principal blanco */
}

/* ajustes finos */
.hero-overlay h1 {
  color: #ffffff;             /* el encabezado en blanco */
}
.hero-overlay .lead {
  color: rgba(255,255,255,0.9); /* párrafo descriptivo algo más suave si quieres */
}

.bg-gray {
    background-color: #5c5c5c !important;
}


@media (max-width: 767.98px) {
.rightbg {
    background-position: right center !important;
  }
}