html, body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.container, .container-fluid {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/*======================================*/
/* ========== NAVBAR GENERAL ========== */
/* =====================================*/
.navbar-custom {
    position: fixed; 
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: transparent; 
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* ===== CUANDO HACES SCROLL ===== */
.navbar-scrolled {
    background-color: #393838;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* ===== LOGO ===== */
.logo-navbar { 
    height: 90px; 
    width: auto; 
    transition: all 0.3s ease; 
}

/* ===== LINKS ===== */
.navbar-custom .nav-link {
    color: #f2f2f2 !important;
    font-weight: 500;
    margin-left: 1.2rem; 
    transition: color 0.3s ease;
    font-size: 1.45rem; 
}

.navbar-custom .nav-link:hover { color: #e0e0e0 !important; }

/*======================================================*/
/* ========== ESCALADO INTELIGENTE (RESPONSIVE) ======== */
/* =====================================================*/

/* 1. Para Laptops (menores a 1199px) - Subimos un poquito el logo y links */
@media (max-width: 1199px) {
    .logo-navbar { height: 85px !important; } 
    .navbar-custom .nav-link { font-size: 1.1rem !important; } 
}

/* 2. Para Tablets y Celulares (menores a 991px) */
@media (max-width: 991px) {
    .logo-navbar { height: 68px !important; } 
    
    .navbar-custom .nav-link { 
        font-size: 1.2rem !important; 
        padding: 0.8rem 0 !important; 
    }

    .navbar-toggler { background-color: #A3C73E !important; border: none; padding: 5px 10px; }
    .navbar-toggler-icon { filter: brightness(0) invert(1) !important; }
}

/*======================================*/
/* ========== NAVBAR GENERAL 2 ========== */
/* =====================================*/
.navbar-custom2 {
    position: relative; 
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: #393838; 
}

.logo-navbar2 { 
    height: 70px; 
    width: auto; 
    transition: all 0.3s ease;
}

.navbar-custom2 .nav-link {
    color: #f2f2f2 !important;
    font-weight: 500;
    margin-left: 15px;
    font-size: 1.25rem; 
    transition: all 0.3s ease;
}

/* --- ESCALADOS RESPONSIVOS PARA NAVBAR 2 --- */

@media (max-width: 1199px) {
    .logo-navbar2 { height: 60px !important; }
    .navbar-custom2 .nav-link { font-size: 1.1rem !important; }
}

@media (max-width: 991px) {
    .logo-navbar2 { height: 50px !important; }
    .navbar-custom2 .nav-link { 
        font-size: 1rem !important; 
        padding: 0.5rem 0 !important; 
    }
 
    .navbar-custom2 .navbar-toggler {
        background-color: #A3C73E !important; 
        border: none !important;
        padding: 5px 10px !important;
    }
    .navbar-custom2 .navbar-toggler-icon { 
        filter: brightness(0) invert(1) !important; 
    }
}


/*===========================================================================================================================================*/
/* ===================================== */
/* DROPDOWN BLOG */
/* ===================================== */

.dropdown-blog {
    width: 260px;
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #e6e6e6;
}

/* ITEMS */
.dropdown-blog .dropdown-item {
    padding: 15px 20px;
    font-size: 16px;
    border-bottom: 1px solid #d1d1d1;
    color: #333;
    transition: all 0.3s ease;
}

/* HOVER */
.dropdown-blog .dropdown-item:hover {
    background: #393838;
    color: #fff;
}

/* QUITAR ÚLTIMA LÍNEA */
.dropdown-blog li:last-child .dropdown-item {
    border-bottom: none;
}

/*========================================================*/
/* ========== HERO GENERAL (CARRUSEL DINÁMICO) ========== */
/* =======================================================*/

#heroCarousel, 
.carousel-inner, 
.carousel-item {
    height: 100% !important;
}

.hero-container {
    position: relative;
    width: 100%;
    /* Ajustado a 105vh para cubrir el "pelito" extra hacia abajo */
    height: 105vh !important; 
    overflow: hidden;
    background-color: #1a1a1a;
    margin-top: 0 !important; 
}

.hero-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important; 
    filter: brightness(0.6);
    display: block;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center; 
    z-index: 10;
    pointer-events: none;
    justify-content: flex-start !important; 
    padding-top: 50px !important; 
}

.hero-text {
    pointer-events: auto;
    margin-left: 8% !important; 
    color: #fff;
    text-align: left;
    max-width: 600px; 
    animation: subirEntrada 1s ease-out forwards;
}

/* --- TAMAÑOS DE FUENTE ESCALABLES (MÁS COMPACTOS) --- */
.hero-text h1 { 
    font-size: clamp(1.6rem, 4vw, 2.8rem); 
    font-weight: bold; 
    margin-bottom: 10px; 
}

.hero-text .subtitle { 
    font-size: clamp(0.9rem, 1.5vw, 1.4rem); 
    margin-bottom: 15px; 
    display: block; 
}

.hero-text .description p { 
    font-size: clamp(0.8rem, 1.2vw, 1.1rem); 
    line-height: 1.5; 
}

.btn-hero {
    display: inline-block;
    margin-top: 15px; 
    padding: 8px 20px;
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
    font-size: 0.9rem;
    font-weight: bold;
    transition: all 0.3s ease;
    border-radius: 50px !important; 
}

.btn-hero:hover {
    background-color: #fff;
    color: #000;
}

/* --- RESPONSIVE --- */

@media (max-width: 991px) {
    .hero-container { 
        height: 50vh !important;
        margin-top: 60px; 
    }
    
    .hero-overlay { 
        padding-top: 20px !important; 
        justify-content: center !important; 
    }
    
    .hero-text { 
        margin-left: 5% !important; 
        margin-right: 5% !important; 
        text-align: center !important; 
        max-width: 90% !important; 
    }
}
   

/*======================================================*/
/* ========== SOBRE NOSOTROS (AJUSTE FLUIDO) =========== */
/* =====================================================*/

#quienes-somos {
    scroll-margin-top: 100px; 
}

/* ===== TEXTO ===== */
.about-section h2 {
    font-size: clamp(2rem, 3vw, 2.8rem); 
    font-weight: 700;
}

.about-section p {
    font-size: clamp(1rem, 1.2vw, 1.25rem); 
    line-height: 1.7; 
    color: #333;
}

.about-section .col-lg-6 {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* ===== IMAGEN ===== */
.about-section img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* --- RESPONSIVE --- */
@media (max-width: 991px) {
    .about-section {
        text-align: center; 
        padding: 40px 0 !important;
    }
    .about-section .col-lg-6 {
        padding: 0 15px !important;
    }
    .about-section img {
        margin-top: 30px; 
    }
}

/*======================================================*/
/* ========== POR QUÉ ELEGIRNOS (COMPACTO) ============ */
/* =====================================================*/

.why-section {
    padding: 60px 0 !important;
}

/* TÍTULO Y SUBTÍTULO */
.why-section h2 { 
    font-size: 2.5rem !important;
    margin-bottom: 10px !important; 
}

.why-section .text-muted { 
    font-size: 1.25rem !important; 
    margin-bottom: 40px !important;
}

/* CARDS COMPACTAS */
.why-card {
    background: #ffffff;
    border-radius: 15px;
    padding: 30px !important; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    height: 100%;
}

/* ICONOS (Verde definido) */
.why-icon {
    font-size: 3.5rem !important; 
    color: #A3C73E !important;    
}

/* TÍTULO CARD */
.why-card h5 {
    font-size: 1.4rem !important; 
    margin-top: 15px;
    color: #333;
}

/* TEXTO CARD */
.why-card p {
    font-size: 1.05rem !important; 
    color: #555;
    margin-top: 12px;
    line-height: 1.6;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .why-section { padding: 40px 10px !important; }
    .why-card { padding: 25px !important; }
}

/*======================================================*/
/* ========== SERVICIOS INICIO (COMPACTO) ============ */
/* =====================================================*/

.services-section {
    padding: 60px 0 !important; 
}

/* TÍTULO Y SUBTÍTULO */
.services-section h2 { 
    font-size: 2.5rem !important; 
    margin-bottom: 10px !important; 
}

.services-section p { 
    font-size: 1.25rem !important; 
    margin-bottom: 40px !important;
}

/* CARD DE SERVICIOS */
.service-card {
    background: #ffffff;
    border-radius: 15px;
    padding: 30px !important; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    height: 100%;
}

.service-card:hover {
    transform: translateY(-8px); 
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* ICONOS */
.service-icon {
    font-size: 3.5rem !important; 
    color: #A3C73E !important;
    margin-bottom: 15px;
}

/* TÍTULO CARD */
.service-card h5 {
    font-size: 1.4rem !important; 
    margin-top: 10px;
    color: #333;
}

/* TEXTO CARD */
.service-card p {
    font-size: 1.05rem !important; 
    color: #555;
    margin-top: 12px;
    line-height: 1.6;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .services-section { padding: 40px 10px !important; }
    .service-card { margin-bottom: 20px; }
}


/*===========================================================================================================================================*/
/*======================================*/
/* ========== FOOTER GENERAL ========== */
/* =====================================*/

/* ===== FOOTER BASE ===== */
.footer-section {
    background: #393838;
    color: #ccc;
    padding: 120px 80px 50px; 
}

/* CONTENEDOR */
.footer-section .container-fluid {
    max-width: 1600px;
    margin: 0 auto;
}

/* TITULO PRINCIPAL */
.footer-title {
    color: #ffffff;
    font-size: 32px; 
    margin-bottom: 25px;
}

/* SUBTITULOS */
.footer-subtitle {
    color: #ffffff;
    font-size: 24px; 
    margin-bottom: 25px;
}

/* TEXTO */
.footer-section p {
    font-size: 18px; 
    line-height: 1.9;
    margin-bottom: 12px;
}

/* LINKS */
.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 14px;
}

.footer-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 18px; 
    transition: 0.3s;
}

/* Hover */
.footer-links a:hover {
    color: #ffffff;
    padding-left: 8px;
}

/* ICONOS GENERALES */
.footer-section i {
    margin-right: 12px;
    font-size: 22px; 
    color: #A3C73E;
}

/* ===== REDES SOCIALES ===== */
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;


    margin-right: 15px;

    color: #aaa;
    font-size: 24px; 

    transition: all 0.3s ease;
}

/* Hover redes */
.footer-social a:hover {
    background: #6c757d;
    color: #ffffff;
    transform: translateY(-5px);
}

/* FOOTER BOTTOM */
.footer-bottom {
    border-top: 1px solid #ffffff;
    margin-top: 60px;
    padding-top: 30px;
    font-size: 16px; 
    color: #777;
}

/*======================================================*/
/* ========== SOBRE NOSOTROS (ESTILO FLUIDO) =========== */
/* =====================================================*/

/* HERO PEQUEÑO AJUSTABLE */
.hero-small {
    position: relative;
    width: 100%;
    height: 50vh; 
    min-height: 250px;
    overflow: hidden;
}

.hero-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.7); 
}

/* Texto sobre la imagen */
.hero-content2 {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    width: 80%;
}

.hero-title {
    font-size: clamp(1.6rem, 4vw, 2.8rem);
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    margin: 0;
}

/* SECCIÓN SOBRE NOSOTROS */
.sobre-nosotros {
    padding: 60px 0;
    background-color: #fcfcfc;
}

.sobre-nosotros h2 {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    color: #333;
    margin-bottom: 20px;
}

.sobre-nosotros p {
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.7;
    color: #555;
    margin-bottom: 20px;
}


.sobre-nosotros .list-group-item {
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    color: #555;
    background-color: transparent;
}

/* --- CLASES DE ALINEACIÓN PAREJA --- */
.row-alineado {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.col-pareja {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Controla el espacio entre tarjetas */
}

/* Cards mejoradas y estirables */
.card {
    border: none;
    border-radius: 15px;
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #ffffff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    
    /* Hacemos que las tarjetas crezcan verticalmente */
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 0 !important; /* Anulamos márgenes manuales */
}

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

.card-title i {
    font-size: 1.3rem;
    color: #A3C73E; 
    margin-bottom: 10px;
    display: block;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .hero-small { height: 40vh; }
    .hero-title { text-align: center; }
    .hero-content2 { left: 5%; width: 90%; }
    .sobre-nosotros { padding: 40px 15px; }
}

/*======================================*/
/* ====== NUESTRO EQUIPO PREMIUM ====== */
/*======================================*/

.equipo-card {
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    transition: all 0.35s ease;
    position: relative;
    border: 1px solid rgba(0,0,0,0.05);
}

.equipo-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #A3C73E, #6c757d);
}

.equipo-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

/* Imagen */
.equipo-img {
    width: 200px;  
    height: 200px;
    object-fit: cover;
    border-radius: 16px;
    border: 4px solid #A3C73E;
    display: block; 
}

/* Nombre */
.equipo-nombre {
    font-weight: 700;
    font-size: 1.1rem;
}

/* Cargo tipo badge */
.equipo-cargo {
    display: inline-block;
    padding: 6px 14px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 50px;
    background: #A3C73E;
    color: #ffffff;
    margin-top: 8px;
}

/* Descripción */
.equipo-desc {
    font-size: 0.9rem;
    color: #6c757d;
    line-height: 1.6;
}

/* Línea separadora elegante */
.equipo-divider {
    width: 40px;
    height: 3px;
    background: #A3C73E;
    margin: 15px auto;
    border-radius: 5px;
}

/* Botón "Ver Más" */
.btn-ver-mas {
    display: inline-block !important;
    background: transparent !important;
    border: 2px solid #A3C73E !important;
    color: #A3C73E !important;
    padding: 8px 25px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    border-radius: 50px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    cursor: pointer !important;
    
    font-family: inherit !important; 
    
    appearance: none !important;
    -webkit-appearance: none !important;
}

.btn-ver-mas:hover {
    background: #A3C73E !important;
    color: #ffffff !important;
}

/* Responsive */
@media (max-width: 991px) {
    .hero-title {
        font-size: 40px;
    }
    .hero-content {
        left: 1rem;
        right: 1rem;
        text-align: center;
        transform: translateY(-50%);
    }
}


/*===========================================================================================================================================*/
/*======================================*/
/* ============ SERVICIOS ============= */
/* =====================================*/

/* HERO AJUSTADO AL MISMO TAMAÑO QUE "SOBRE NOSOTROS" */
.hero-small {
    position: relative;
    width: 100%;
    height: 50vh; /* Coincide con Sobre Nosotros */
    min-height: 250px;
    overflow: hidden;
}

.hero-small img {
    width: 100%;
    height: 100%; /* Cambiado de 550px a 100% para respetar el contenedor */
    object-fit: cover;
    display: block;
    filter: brightness(0.7);
}

/* Texto sobre la imagen */
.hero-content3 {
    position: absolute;
    top: 50%;
    left: 10%; /* Alineado igual que Sobre Nosotros */
    transform: translateY(-50%);
    width: 80%;
    max-width: 800px;
    text-align: left;
}

.hero-title {
    /* Mismo tamaño fluido que Sobre Nosotros */
    font-size: clamp(1.6rem, 4vw, 2.8rem);
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    margin: 0;
}

.service-block2 {
    margin-bottom: 100px;
}

/* Alternar */
.service-block2.reverse .row {
    flex-direction: row-reverse;
}

/* BOTÓN SERVICIOS */
.btn-services {
    display: inline-block;
    padding: 14px 35px;
    font-size: 1.1rem;
    font-weight: 500;
    color: #fff;
    background: #A3C73E;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* HOVER */
.btn-services:hover {
    background: #8eaf34; 
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(163, 199, 62, 0.4); /* Sombra con el color de la marca */
}

/* ICONO */
.btn-services i {
    margin-left: 8px;
}

/* ===================================== */
/* SEPARACIÓN ENTRE IMAGEN Y TEXTO */
/* ===================================== */

.service-block2 .col-lg-5 {
    padding-right: 50px;
}

.service-block2 .col-lg-7 {
    padding-left: 50px;
}

/* Cuando está invertido */
.service-block2.reverse .col-lg-5 {
    padding-left: 50px;
    padding-right: 0;
}

.service-block2.reverse .col-lg-7 {
    padding-right: 50px;
    padding-left: 0;
}

/* ===================================== */
/* IMAGEN */
/* ===================================== */

.service-img3 {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

/* ===================================== */
/* TEXTO */
/* ===================================== */

.service-block2 h3 {
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 700;
    margin-bottom: 20px;
    color: #333;
}

.service-block2 ul {
    padding-left: 0;
    margin-top: 15px;
}

.service-block2 ul li {
    list-style: none;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    margin-bottom: 12px;
    color: #555;
    padding-left: 30px;
    position: relative;
    line-height: 1.7;
    transition: all 0.3s ease;
}

.service-block2 ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    background: #A3C73E; 
    border-radius: 50%;
    transition: all 0.3s ease;
}

.service-block2 ul li:hover {
    color: #000;
    transform: translateX(5px);
}

.service-block2 ul li:hover::before {
    background: #000;
    transform: scale(1.3);
}

/* ===================================== */
/* RESPONSIVE */
/* ===================================== */

@media (max-width: 991px) {
    .hero-small { 
        height: 40vh; /* Comportamiento móvil igual que Sobre Nosotros */
    }

    .service-block2 .col-lg-5,
    .service-block2 .col-lg-7,
    .service-block2.reverse .col-lg-5,
    .service-block2.reverse .col-lg-7 {
        padding: 0 15px; /* Un poco de margen para que no toque los bordes del celular */
    }

    .service-img3 {
        margin-bottom: 30px;
    }
}

/* ===================================== */
/* RESPONSIVE */
/* ===================================== */

@media (max-width: 991px) {
    .service-block2 .col-lg-5,
    .service-block2 .col-lg-7,
    .service-block2.reverse .col-lg-5,
    .service-block2.reverse .col-lg-7 {
        padding: 0;
    }

    .service-img3 {
        margin-bottom: 25px;
    }
}

/*===========================================================================================================================================*/
/*======================================*/
/* =========== CONTACTANOS ============ */
/* =====================================*/

/* HERO AJUSTADO AL MISMO TAMAÑO QUE LAS OTRAS SECCIONES */
.hero-small1 {
    position: relative;
    width: 100%;
    height: 50vh; /* Coincide con Sobre Nosotros y Servicios */
    min-height: 250px;
    overflow: hidden;
}

.hero-small1 img {
    width: 100%;
    height: 100%; /* Cambiado para respetar el contenedor */
    object-fit: cover;
    display: block;
    filter: brightness(0.7);
}

/* Texto sobre la imagen */
.hero-content31 {
    position: absolute;
    top: 50%;
    left: 10%; /* Alineado igual que los demás */
    right: 8%; 
    transform: translateY(-50%);
    width: 80%;
    max-width: 800px;
    text-align: left;
}

.hero-title1 {
    font-size: clamp(1.6rem, 4vw, 2.8rem); /* Mismo tamaño fluido */
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    margin: 0;
}

.service-block21 {
    margin-bottom: 100px;
}

/* Alternar */
.service-block2.reverse1 .row {
    flex-direction: row-reverse;
}

/*======================================*/
/* ========= CONTACTO ========= */
/* =====================================*/

.contact-section {
    background: #f8f9fa;
    padding: 60px 0; /* Consistencia en el espaciado superior/inferior */
}

/* INFO */
.contact-info h4 {
    /* Mismo tamaño que los H2/H3 de otras secciones */
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 700;
    margin-bottom: 20px;
    color: #333;
}

.contact-info p {
    font-size: clamp(1rem, 1.2vw, 1.15rem); /* Párrafos consistentes */
    color: #555;
    margin-bottom: 25px;
    line-height: 1.7;
}

/* LISTA */
.contact-info ul {
    list-style: none;
    padding: 0;
}

.contact-info ul li {
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    margin-bottom: 15px;
    color: #333;
    display: flex; /* Alineación perfecta si el texto cae a dos líneas */
    align-items: center;
}

.contact-info i {
    font-size: 1.8rem;
    margin-right: 15px;
    color: #A3C73E;
}

/* FORMULARIO */
.contact-form {
    background: #fff;
    padding: 35px 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.04); /* Sombra suave idéntica a las cards de Sobre Nosotros */
}

/* INPUTS */
.contact-form .form-control {
    border-radius: 10px;
    padding: 12px 15px;
    font-size: 1rem;
    border: 1px solid #ddd;
    transition: all 0.3s ease;
}

/* FOCUS (Mejorado con verde corporativo) */
.contact-form .form-control:focus {
    border-color: #A3C73E;
    box-shadow: 0 0 0 0.2rem rgba(163, 199, 62, 0.25); /* Resplandor verde en lugar de azul/gris */
}

/* BOTÓN */
.btn-contact {
    width: 100%;
    background: #A3C73E;
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* HOVER (Elevación dinámica) */
.btn-contact:hover {
    background: #8eaf34;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(163, 199, 62, 0.4);
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .hero-small1 { 
        height: 40vh; /* Comportamiento móvil igual a las demás páginas */
    }

    .contact-info {
        text-align: center;
        margin-bottom: 40px;
    }
    
    .contact-info ul li {
        justify-content: center; /* Centramos los iconos y textos en móvil */
    }
}


/*===========================================================================================================================================*/
/*======================================*/
/* ========== BLOG GENERAL ============ */
/* =====================================*/
.blog-card {
    background: #f5f4f4;
    border-radius: 15px;
    overflow: hidden;
    /* Corregido el formato del box-shadow */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-8px);
    /* Corregido el formato del box-shadow */
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
}

/* IMAGEN */
.blog-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

/* CONTENIDO */
.blog-content {
    padding: 20px;
}

/* CATEGORÍA */
.blog-category {
    display: inline-block;
    font-size: 13px;
    background: #A3C73E;
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 10px;
}

/* TÍTULO */
.blog-content h5 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}

/* TEXTO */
.blog-content p {
    font-size: 15px;
    color: #666;
}

.blog-item {
    /* Esto hace que el cambio de visible a invisible sea fluido */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out !important;
}

#sinResultados {
    transition: opacity 0.5s ease-in-out;
    opacity: 0; /* Inicia oculto para transicionarlo suave */
}

/* SCROLL */
.filtro-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 10px 5px;
    scrollbar-width: none;
}

.filtro-scroll::-webkit-scrollbar {
    display: none;
}

.filtro-chip {
    border: none;
    background: #f1f1f1;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 14px;
    white-space: nowrap;
    transition: 0.3s;
    cursor: pointer;
}

.filtro-chip:hover {
    background: #ddd;
}

.filtro-chip.active {
    background: #A3C73E;
    color: #fff;
}

.btn-blog {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #000;
    text-decoration: none;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

/* Hover elegante */
.btn-blog:hover {
    color: #A3C73E;
    border-bottom: 2px solid #A3C73E;
}

/* Flecha */
.btn-blog i {
    font-size: 14px;
    transition: transform 0.3s ease;
}

/* Animación flecha */
.btn-blog:hover i {
    transform: translateX(4px);
}

/* =========================================
   BOTÓN FLOTANTE - CATÁLOGOS (BURBUJA)
   ========================================= */
.btn-catalogo-flotante {
    position: fixed;
    bottom: 30px;
    left: 30px;
    background-color: #8eaf34; 
    color: #ffffff;
    width: 60px; 
    height: 60px; 
    border-radius: 50%; 
    display: flex;
    align-items: center;
    justify-content: center; 
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 1050;
    transition: all 0.3s ease;
}

.btn-catalogo-flotante i {
    font-size: 1.6rem; 
}

.btn-catalogo-flotante:hover {
    background-color: #8eaf34;
    color: #ffffff;
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
    .btn-catalogo-flotante {
        bottom: 20px;
        left: 20px;
        width: 50px;
        height: 50px;
    }
    .btn-catalogo-flotante i {
        font-size: 1.3rem;
    }
}

/* ========================================= */
/* ===== ANIMACIÓN DE FILTRO (NUEVO) ======= */
/* ========================================= */

@keyframes popInFiltro {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(30px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.animar-filtro {
    animation: popInFiltro 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
    opacity: 0; /* Inicia oculto para que la animación lo revele */
}

/*===========================================================================================================================================*/
/*======================================*/
/* ========== DETALLE BLOG ============ */
/* =====================================*/

.blog-detalle {
    background: #f9f9f9;
}

/* TEXTO DEL ARTÍCULO */
.blog-text {
    /* Usamos clamp para que escale desde 1.1rem (móvil) hasta 1.2rem (desktop) */
    font-size: clamp(1.1rem, 2vw, 1.2rem); 
    line-height: 1.8;
    color: #444;
}

.blog-text p {
    margin-bottom: 1.5rem;
}

/* CATEGORÍA */
.blog-category {
    display: inline-block;
    background: #A3C73E; /* Color de la marca */
    color: #fff;
    padding: 8px 18px; /* Un poco más de área para que no se vea aplastado */
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 15px;
}

/* IMAGEN PRINCIPAL */
.blog-detalle img {
    max-height: 450px;
    object-fit: cover;
    width: 100%;
    border-radius: 12px; /* Bordes suaves para un look más moderno */
    transition: filter 0.3s ease, transform 0.3s ease;
}

.blog-detalle img:hover {
    filter: brightness(1.05);
}

/* TARJETA DE AUTOR */
.autor-card {
    border: none !important;
    background-color: #ffffff;
    padding: 25px; /* Más aire interno */
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.autor-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.1) !important;
}

.autor-img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/*======================================*/
/* ========== AUTOR DETALLE =========== */
/* =====================================*/
.autor-card {
    border-radius: 12px;
    background: #fff;
    transition: all 0.3s ease;
}

.autor-img {
    max-width: 180px;
    max-height: 180px;
    width: auto;
    height: auto;
    border-radius: 14px;
}

.autor-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.blog-text {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}


/* --- BLINDAJE MÓVIL (VERSIÓN FINAL) --- */
@media (max-width: 767px) {
    /* 1. Forzamos que nada se desborde */
    html, body {
        width: 100%;
        overflow-x: hidden; 
    }

    /* 2. Reseteamos contenedores comunes */
    .container, .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* 3. IMÁGENES: Excluimos Hero y Navbar */
    img:not(.hero-img):not(.navbar-brand img) {
        max-width: 100% !important;
        height: auto !important;
    }

    /* 4. NAV-BAR: Aseguramos visibilidad */
    .navbar-toggler {
        display: block !important; 
        z-index: 1000 !important;   
    }

    /* 5. CORRECCIÓN: Overlay sobre la imagen sin chocar */
    .hero-overlay {
        position: absolute !important; 
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important; 
        justify-content: center !important;
        padding-top: 60px !important; 
        background: rgba(0,0,0,0.3); 
    }

    .hero-container {
        height: 60vh !important; 
    }

    /* 6. FONDO GRIS SOLO EN MÓVIL */
    .navbar.menu-abierto {
        background-color: #333 !important; 
        transition: background-color 0.3s ease;
    }

    .navbar-collapse.show {
        background-color: #333 !important; 
        padding: 15px;
        border-radius: 0 0 10px 10px;
    }

    /* =================================================== */
    /* 7. AJUSTES DETALLE BLOG MÓVIL (Para lectura cómoda) */
    /* =================================================== */
    
    .blog-detalle h1, .blog-detalle h2 {
        font-size: 2rem !important; 
        line-height: 1.3;
    }
    
    .blog-text {
        font-size: 1.15rem !important; 
    }
    
    .blog-category {
        font-size: 1.05rem !important;
        padding: 10px 20px !important;
    }

    .autor-card, .autor-card.d-flex, .autor-card .d-flex {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 25px 15px !important;
        gap: 15px !important;
        display: flex !important;
    }

    .autor-img {
        width: 100px !important; 
        height: 100px !important;
        margin-bottom: 5px !important;
    }

    .autor-card div, .autor-card p, .autor-card h5, .autor-card span {
        width: 100% !important;
        max-width: 100% !important;
        word-wrap: break-word !important; 
        white-space: normal !important;
    }
}

.carousel-item {
    background-color: #1a1a1a !important; 
    height: 100% !important;
}