body {
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
    padding-top: 80px;
}

/* Colores corporativos */
:root {
    --cobre: #b87333;
    --azul: #0a2239;
    --gris: #f5f5f5;
}

/* Encabezado*/
.navbar {
    background-color: var(--azul) !important;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    min-height: 80px;
    transition: transform 0.3s ease-out;
}
.navbar-nav .nav-link {
    padding: 0.5rem 1rem;
}


/* Aumenta el tamaño del logo sin alterar la barra */
.navbar-brand img {
    height: 70px;
    /* Ajusta el tamaño del logo */
    width: auto;
    /* Mantiene proporciones */
    object-fit: contain;
    margin-top: -5px;
    /* Centra visualmente */
}
@media (min-width: 1300px) {

    .nav-links-centered {
        position: absolute;
        /* Saca los links del flujo normal */
        left: 50%;
        /* Los mueve al 50% de la izquierda del .container */
        transform: translateX(-50%);
        /* Los corre hacia atrás la mitad de su propio ancho */
    }
}

/* Elementos */
.text-cobre {
    color: var(--cobre);
}
.text-justify {
    text-align: justify;
}
/*
 * Utilidad para espaciado extra
 */
.py-6 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* Botones*/
.btn-outline-blanco {
    border: 2px solid white;
    color: white;
}

.btn-outline-blanco:hover {
    background-color: var(--cobre);
    color: white;
}

.btn-cobre {
    background-color: var(--cobre);
    color: white;
    border: none;
}
.btn-cobre:hover {
    background-color: #9c5d29;
    color: white;
}

.btn-outline-cobre {
    border: 2px solid var(--cobre);
    color: var(--cobre);
}
.btn-outline-cobre:hover {
    background-color: var(--cobre);
    color: white;
}

.border-cobre {
    border: 1.5px solid var(--cobre) !important;
}

/* Tarjetas */
.service-card:hover {
    transform: translateY(-5px);
    transition: 0.3s;
}
/*
 * Estilos para Tarjetas de Servicio (con Modals)
 */

/* Damos una altura mínima fija al párrafo  */
.card-text-small {
    font-size: 0.9rem;
    color: #444;
    line-height: 1.5;
    min-height: 80px;
    text-align: center;
}

/* "ver más..." inline */
.btn-ver-mas-inline {
    font-size: 0.85rem;
    font-weight: 600;
    color: #989898;
    text-decoration: none;
    transition: color 0.2s;
    cursor: pointer;
    display: inline;
    padding-left: 4px;
}

.btn-ver-mas-inline:hover {
    color: var(--cobre);
    text-decoration: underline;
}

/* Estilos para el contenido del modal */
.modal-body .list-unstyled span,
.modal-body .list-unstyled i {
    font-size: 0.95rem;
    line-height: 1.6;
}
/*
 * =========================================
 * Estilos para la imagen de Connect
 * =========================================
 */

.connect-img {
    max-height: 550px;
    /* Misma altura máxima que la otra imagen */
    border-radius: 12px;
}

/* Sombra de silueta (drop-shadow) SÓLO en escritorio */
@media (min-width: 992px) {
    .connect-img {
        margin-top: -2rem;
        margin-bottom: -5rem;
        filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
    }
}

/*
 * Estilos para la sección Connect PYME (basado en la referencia de imagen)
 */
#connectpyme {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(83, 34, 0, 0.6)),
        url('../img/background/desierto.webp');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Efecto Parallax opcional, como antes */
    /*background-attachment: fixed;*/

}
/*
 * =========================================
 * Estilos para la imagen de Connect PYME
 * =========================================
 */

.connect-pyme-img {
    max-height: 550px;
}

@media (min-width: 992px) {
    .connect-pyme-img {
        margin-bottom: -6rem;

        /* ¡AQUÍ ESTÁ LA MAGIA! */
        /* Esta sombra sigue la silueta del PNG */
        filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
    }
}
/*
 * =========================================
 * Estilos Rediseño Sección Nosotros
 * =========================================
 */


/* 1. Fondo de la sección (Cobre/Marrón) */
.nosotros-section {
    /* Capa 1: La textura de ruido. 
          Es una imagen PNG semi-transparente que se repite.
        */
        background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(83, 34, 0, 0.6)),
        url('../img/background/arena.webp');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    color: #f0f0f0;
    /* Texto principal claro */
}

/* 2.1 Estilo de la imagen de la fundadora */
.nosotros-img-container {
    display: inline-block;
    width: 280px;
    height: 280px;
    border-radius: 50%;

    /* Usamos el beige de la referencia para que "salte" del fondo */
    background-color: #f0e6d8;

    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
    /* Sombra más fuerte */
}

/* 2.2 La foto de la fundadora */
.nosotros-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* 3. Títulos y texto principal */
.nosotros-section .lead {
    font-size: 1.15rem;
    /* Un poco más grande para legibilidad */
}

/* 4. Línea divisoria dorada */
.border-bottom-dorado {
    border-bottom: 1px solid var(--cobre);
}

/* 5. Tarjetas (Misión, Visión, Valores) */
.nosotros-card {
    /* Aquí está el "azul": usamos tu color --azul 
      con transparencia para el fondo.
    */
    background-color: rgba(18, 10, 0, 0.437);
    /* var(--azul) con 40% opacidad */
    border-radius: 8px;
    text-align: center;
    border-top: 3px solid var(--cobre);
    /* Borde superior dorado */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

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

/* 6. Iconos Dorados */
.nosotros-icon {
    font-size: 3rem;
    /* Tamaño grande */
    color: var(--cobre);
    /* Usamos la variable dorada */
}

/* 7. Texto dentro de las tarjetas */
.nosotros-card h4 {
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nosotros-card p {
    font-size: 0.95rem;
    color: #e0e0e0;
    /* Un blanco un poco más suave */
    line-height: 1.6;
    margin-bottom: 0.5rem;
}
/*
 * =========================================
 * Estilos Rediseño Sección Casos de Éxito
 * =========================================
 */

.casos-section {
    color: #ffffff;
}

.caso-card {
    background-color: var(--azul);
    /* Fondo azul oscuro de la tarjeta */
    border-radius: 12px;
    overflow: hidden;
    /* Para que la imagen se ajuste al radio */
    display: flex;
    flex-direction: column;
    border: 1px solid #2a3b4d;
    /* Borde sutil */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.caso-card-img-wrapper {
    position: relative;
    height: 220px;
    /* Altura fija para la imagen */
}

.caso-card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Asegura que la imagen cubra el espacio */
    opacity: 0.9;
}

/* El ícono dorado que cuelga */
.caso-card-icon {
    position: absolute;
    bottom: -22px;
    /* Mitad adentro, mitad afuera */
    left: 50%;
    transform: translateX(-50%);

    background-color: var(--cobre);
    /* Tu color cobre */
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    border: 3px solid #1a2634;
    /* Borde del color de la tarjeta */
}

.caso-card-body {
    padding: 35px 25px 25px 25px;
    /* Más padding arriba por el ícono */
    flex-grow: 1;
    /* Para que el cuerpo llene el espacio (h-100) */
}

.caso-card-title {
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 1.2rem;
}

.caso-card-body p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

/* El texto en negrita (Resultado, Éxito, etc.) */
.caso-card-body p strong {
    color: var(--cobre);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* La cita testimonial */
.caso-card-quote {
    font-style: italic;
    color: #d5d5d5;
    border-left: 3px solid var(--cobre);
    padding-left: 12px;
    margin-top: 15px;
    font-size: 0.85rem !important;
}

/*
 * Banner de KPIs
 */
.kpi-banner {
    /* 1. Fondo "dorado" (usamos tu color cobre) */
    background-color: var(--cobre);

    /* 2. Borde sutil más oscuro para darle profundidad */
    border: 2px solid #9c5d29;

    /* 3. Texto e íconos en BLANCO para contraste */
    color: #ffffff;

    padding: 1rem 1.5rem;
    border-radius: 8px;
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 600;
    /* Texto más grueso para que resalte */

    /* 4. Sombra para que "flote" como un premio */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.kpi-banner span {
    display: inline-block;
}

/* 5. Aseguramos que los íconos sean blancos */
.kpi-banner i {
    color: #ffffff;
    opacity: 0.9;
    /* Un toque sutil */
    position: relative;
    top: -1px;
    /* Alineación vertical fina */
}

/* 6. Divisores blancos semi-transparentes */
.kpi-divider {
    margin: 0 1rem;
    opacity: 0.6;
    color: #ffffff;
    /* Aseguramos que sea blanco */
}

/*
 * Responsividad del Banner (esto sigue igual, es correcto)
 */
@media (max-width: 767px) {
    .kpi-banner {
        font-size: 1rem;
    }

    .kpi-divider {
        margin: 0 0.5rem;
    }

    .kpi-divider.d-none.d-md-inline-block {
        display: none !important;
    }

    .kpi-banner span.d-block.d-md-inline-block {
        display: block !important;
        margin-top: 0.5rem;
    }
}
/*
 * Botones Flotantes (WhatsApp y Subir)
 */

/* Estilo base para ambos botones */
.btn-flotante-whatsapp,
.btn-flotante-subir {
    position: fixed;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    text-decoration: none;
    transition: opacity 0.3s ease-out, transform 0.2s ease-out;
    z-index: 1000;
}

/* Botón WhatsApp (Verde) */
.btn-flotante-whatsapp {
    bottom: 85px;
    background-color: #25D366;
    color: white;
}

.btn-flotante-whatsapp:hover {
    transform: scale(1.1);
    color: white;
}

/* Botón Subir (Color Cobre) */
.btn-flotante-subir {
    bottom: 20px;
    background-color: var(--cobre);
    color: white;
    display: none;
}

.btn-flotante-subir:hover {
    background-color: #9c5d29;
    color: white;
    transform: scale(1.1);
}

/* pie de pagina */
footer {
    background-color: var(--azul);
}