/**
 * @file PaginaPrincipal.css
 * @path publico/assets/css/PaginaPrincipal.css
 * @description Hoja de estilos global para la página de aterrizaje (Landing Page).
 * Define la paleta de colores corporativa, tipografías customizadas y la estructura
 * responsiva de los bloques de presentación y formularios de contacto.
 * @package OCuLaD3\Publico\CSS
 * @version 3.0.0
 */

/* ═════════════════════════════════════════════════════════════════════
   1. RESETS Y TIPOGRAFÍA BASE
═════════════════════════════════════════════════════════════════════ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'Baloo';
    src: url('../font/baloo/Baloo-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../font/montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html, body {
    width: 100%;
    height: 100%;
    font-family: 'Arial', sans-serif;
    background: linear-gradient(90deg, rgba(88,93,205,1) 0%, rgba(141,50,228,1) 50%);
    color: white;
}

body {
    line-height: 1.6;
    font-size: 16px;
}

/* ═════════════════════════════════════════════════════════════════════
   2. NAVEGACIÓN Y ESTRUCTURA PRINCIPAL
═════════════════════════════════════════════════════════════════════ */
.nav-link {
    color: white !important;
    font-family: 'Baloo', sans-serif !important;
    font-size: 24px !important;
}

.navbar-nav .nav-item {
    margin-right: 70px;
}

.contenedor-principal {
    padding: 40px !important;
    position: relative;
}

/* ═════════════════════════════════════════════════════════════════════
   3. SECCIÓN HERO (SLIDER PRINCIPAL)
═════════════════════════════════════════════════════════════════════ */
.sec1-contenedor-interno {
    background: #261f54;
    color: white;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    position: relative;
}

.sec1-contenedor-interno-fondo {
    background: url('../../img/PaginaPrincipal/slider-1/fondo 1.png') !important;
    background-size: 88% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.botones {
    font-family: 'Baloo' !important;
    font-size: 24px !important;
    background: #4554e5 !important;
    color: white !important;
}

.sec1-contenedor-interno-contenedor-slider {
    position: relative;
    min-height: 600px;
}

#carouselPrincipal {
    position: relative;
    width: 100%;
    min-height: 550px;
}

/* ── Controles e Indicadores del Slider ── */
.sec1-contenedor-interno-contenedor-slider-indicadores {
    width: 20px !important;
    height: 20px !important;
    background: transparent !important;
    border: 1px solid white !important;
}

.carousel-indicators {
    position: absolute !important;
    bottom: 40px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 15 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.carousel-indicators [data-bs-target] {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.6) !important;
    border: 2px solid white !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    opacity: 1 !important;
}

.carousel-indicators [data-bs-target]:hover {
    background-color: rgba(255, 255, 255, 0.8) !important;
    transform: scale(1.1) !important;
}

.carousel-indicators .active {
    background-color: #16b790 !important;
    border-color: #16b790 !important;
    transform: scale(1.2) !important;
}

/* ── Flechas de navegación del Slider ── */
.carousel-control-prev,
.carousel-control-next {
    width: 52px !important;
    height: 52px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    bottom: auto !important;
    background: rgba(22, 31, 84, 0.82) !important;
    border: 2.5px solid rgba(255, 255, 255, 0.75) !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    transition: background 0.22s, border-color 0.22s, transform 0.18s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 20 !important;
    box-shadow: 0 4px 18px rgba(0,0,0,0.35) !important;
}

.carousel-control-prev {
    left: 16px !important;
}

.carousel-control-next {
    right: 16px !important;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background: rgba(22, 183, 144, 0.85) !important;
    border-color: #16b790 !important;
    transform: translateY(-50%) scale(1.08) !important;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 26px !important;
    height: 26px !important;
    filter: brightness(0) invert(1) !important;
    background-size: 100% 100% !important;
}

/* ── Tipografía interna del Slider ── */
.slider-text {
    padding-top: 30%;
}

.slider-subtitle {
    color: #00ffff;
    font-family: Montserrat, sans-serif;
}

.slider-title {
    font-size: 128px;
    font-family: 'Baloo', sans-serif !important;
}

.btn-leer-mas {
    background: transparent;
    color: white;
    border: 1px solid white;
    width: 25%;
    text-align: left;
}

.slider-image-container {
    display: flex;
    justify-content: end;
}

.slider-img {
    width: 60%;
}

/* ── Elementos Decorativos (Separadores) ── */
.separador-banner1,
.separador-banner2 {
    position: absolute;
    background-color: white;
    transform: translateX(-50%);
    border-radius: 10px;
    height: 10px;
}

.separador-banner1 {
    top: 80%;
    left: 14%;
    width: 27%;
}

.separador-banner2 {
    top: 90%;
    left: 68%;
    width: 60%;
}
 /* ═══════════════════════════════════════════════════════════
       HERO CAROUSEL + BANNER
    ═══════════════════════════════════════════════════════════ */
        .sec1-contenedor-interno-contenedor-slider {
            position: relative;
            width: 100%;
        }

        #carouselPrincipal {
            position: relative;
            width: 100%;
        }

        /* El slide ocupa exactamente el tamaño de la imagen 16:9 */
        .carousel-inner,
        .carousel-item {
            width: 100%;
        }

        /* Imagen banner dentro del slide */
        .banner-slide-img {
            width: 100%;
            height: auto;
            display: block;
            /* Sin aspect-ratio forzado ni object-fit: cover.
               La imagen se muestra a su tamaño natural (1280×400)
               escalada al ancho del contenedor, sin recorte ni zoom. */
        }

        /* Indicadores centrados, sobre el borde inferior de la imagen */
        .carousel-indicators {
            position: absolute !important;
            bottom: 18px !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            z-index: 15 !important;
            display: flex !important;
            justify-content: center !important;
            gap: 10px !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        .carousel-indicators [data-bs-target] {
            width: 16px !important;
            height: 16px !important;
            border-radius: 50% !important;
            background-color: rgba(255, 255, 255, 0.55) !important;
            border: 2px solid white !important;
            margin: 0 !important;
            padding: 0 !important;
            cursor: pointer !important;
            transition: all 0.3s ease !important;
            opacity: 1 !important;
        }

        .carousel-indicators [data-bs-target]:hover {
            background-color: rgba(255, 255, 255, 0.85) !important;
            transform: scale(1.1) !important;
        }

        .carousel-indicators .active {
            background-color: #16b790 !important;
            border-color: #16b790 !important;
            transform: scale(1.2) !important;
        }

        /* ═══════════════════════════════════════════════════════════
       OBJETIVO Y BENEFICIOS
    ═══════════════════════════════════════════════════════════ */
        #objetivo-beneficios {
            background: #1e1a4a !important;
            margin: 0 !important;
            padding: 54px 40px !important;
            border-top: 1px solid rgba(255, 255, 255, .06);
        }

        .obj-col-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
        }

        .obj-col-header i {
            color: #00eaff;
            font-size: 1.1rem;
            flex-shrink: 0;
        }

        .obj-col-title {
            font-size: .82rem;
            font-weight: 700;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: #00eaff;
            margin: 0;
        }

        .obj-divider {
            height: 1px;
            background: rgba(255, 255, 255, .1);
            margin-bottom: 22px;
        }

        .obj-body-text {
            color: rgba(255, 255, 255, .78);
            font-size: .95rem;
            line-height: 1.78;
            margin: 0;
        }

        .obj-body-text strong {
            color: white;
            font-weight: 700;
        }

        .beneficios-ol {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .beneficios-ol li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 9px 0;
            border-bottom: 1px solid rgba(255, 255, 255, .06);
            color: rgba(255, 255, 255, .85);
            font-size: .94rem;
            line-height: 1.55;
        }

        .beneficios-ol li:last-child {
            border-bottom: none;
        }

        .beneficios-ol li i {
            color: #16b790;
            font-size: .95rem;
            margin-top: 3px;
            flex-shrink: 0;
        }

        @media (max-width: 991px) {
            #objetivo-beneficios {
                padding: 40px 20px !important;
            }
        }

        @media (max-width: 480px) {
            #objetivo-beneficios {
                padding: 28px 12px !important;
            }
        }

        /* ═══════════════════════════════════════════════════════════
       LAYOUT CONTAINERS
    ═══════════════════════════════════════════════════════════ */
        .contenedor-principal {
            padding: 0 40px 0 40px !important;
            background: transparent;
        }

        .sec1-contenedor-interno {
            background: #261f54 !important;
            color: white;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            border-bottom-left-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
            padding-bottom: 40px;
        }

        #que-es {
            background: #261f54 !important;
            margin: 0 !important;
            padding: 20px 40px !important;
        }

        .row:has(.section-3-1) {
            background: #261f54 !important;
            margin: 0 !important;
            padding: 40px 40px !important;
        }

        .row:has(.testimonios),
        .row:has(.contacto-consultoria) {
            margin: 0 !important;
            padding: 0 !important;
        }

        .testimonios {
            background: #261f54 !important;
            margin: 0 !important;
            padding: 60px 40px !important;
            width: 100%;
        }

        .contacto-consultoria {
            background: #261f54 !important;
            margin: 0 !important;
            padding: 60px 40px 80px 40px !important;
            width: 100%;
        }

        .testimonial-card,
        .stats-card {
            background: linear-gradient(180deg, #8b58e64d, #3a2eeb61) !important;
        }

        .section-3-1 {
            background: transparent !important;
        }

        /* ═══════════════════════════════════════════════════════════
       QUÉ ES — left-column areas list
    ═══════════════════════════════════════════════════════════ */
        .que-es-areas-list {
            list-style: none;
            padding: 12px 0 16px;
            margin: 0;
        }

        .que-es-areas-list li {
            color: rgba(255, 255, 255, 0.92);
            font-size: 1rem;
            padding: 7px 0;
            font-weight: 500;
        }

        /* ═══════════════════════════════════════════════════════════
       QUÉ ES — EXTENDED SECTIONS
    ═══════════════════════════════════════════════════════════ */
        #que-es-extended {
            background: #261f54 !important;
            margin: 0 !important;
            padding: 0 40px 60px 40px !important;
        }

        .que-es-ext-block {
            padding: 32px 20px 16px;
        }

        .que-es-ext-header {
            font-size: 1.05rem;
            font-weight: 700;
            color: #00eaff;
            letter-spacing: .04em;
            text-transform: uppercase;
            margin-bottom: 18px;
            padding-bottom: 10px;
            border-bottom: 2px solid rgba(0, 234, 255, .22);
        }

        /* Process step cards */
        .proceso-step-card {
            background: linear-gradient(135deg, rgba(58, 46, 235, .35), rgba(139, 88, 230, .22));
            border: 1px solid rgba(0, 234, 255, .16);
            border-radius: 16px;
            padding: 22px 18px;
            height: 100%;
        }

        .proceso-step-card h5 {
            color: #00eaff;
            font-size: .95rem;
            font-weight: 700;
            margin: 10px 0 7px;
        }

        .proceso-step-card p {
            color: rgba(255, 255, 255, .78);
            font-size: .89rem;
            line-height: 1.65;
            margin: 0;
        }

        .paso-numero {
            width: 38px;
            height: 38px;
            background: linear-gradient(135deg, #16b790, #4554e5);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            font-weight: 900;
            color: white;
            flex-shrink: 0;
        }

        .proceso-nota {
            background: rgba(22, 183, 144, .07);
            border-left: 3px solid #16b790;
            padding: 14px 18px;
            border-radius: 8px;
            font-size: .9rem;
            color: rgba(255, 255, 255, .8);
            line-height: 1.65;
            margin-bottom: 0;
        }

        /* Metro lines */
        .metro-lineas-list {
            list-style: none;
            padding: 0;
            margin: 12px 0 0;
        }

        .metro-lineas-list li {
            color: rgba(255, 255, 255, .88);
            padding: 7px 0;
            font-size: .94rem;
        }

        .metro-lineas-list i {
            color: #16b790;
        }

        /* Cert mini cards */
        .cert-mini-card {
            background: rgba(255, 255, 255, .05);
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: 11px;
            padding: 11px 13px;
            display: flex;
            align-items: center;
            gap: 10px;
            color: rgba(255, 255, 255, .85);
            font-size: .84rem;
            line-height: 1.45;
        }

        .cert-mini-card.cert-final {
            background: rgba(22, 183, 144, .09);
            border-color: rgba(22, 183, 144, .28);
        }

        /* Analiticas list */
        .analiticas-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .analiticas-list li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px 0;
            border-bottom: 1px solid rgba(255, 255, 255, .06);
        }

        .analiticas-list li:last-child {
            border-bottom: none;
        }

        .analiticas-list li>i {
            margin-top: 3px;
            flex-shrink: 0;
        }

        .analiticas-list li>div {
            display: flex;
            flex-direction: column;
        }

        .analiticas-list li strong {
            color: white;
            font-size: .91rem;
        }

        .analiticas-list li small {
            color: rgba(255, 255, 255, .56);
            font-size: .79rem;
            margin-top: 2px;
        }

        /* DigCompEdu card */
        .digcompedu-card {
            background: linear-gradient(135deg, rgba(69, 84, 229, .2), rgba(22, 183, 144, .09));
            border: 1px solid rgba(0, 234, 255, .2);
            border-radius: 20px;
            padding: 30px 26px;
        }

        .digcompedu-icon {
            width: 68px;
            height: 68px;
            background: linear-gradient(135deg, #4554e5, #16b790);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.7rem;
            color: white;
            margin: 0 auto;
        }

        .digcompedu-btn {
            display: inline-block;
            background: linear-gradient(135deg, #4554e5, #16b790);
            color: white !important;
            border: none;
            border-radius: 10px;
            padding: 11px 18px;
            font-size: .87rem;
            font-weight: 600;
            text-decoration: none;
            transition: transform .2s, box-shadow .2s;
            white-space: nowrap;
        }

        .digcompedu-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(69, 84, 229, .38);
        }

        /* Beneficios list */
        .beneficios-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .beneficios-list li {
            color: rgba(255, 255, 255, .88);
            padding: 9px 0;
            font-size: .94rem;
            border-bottom: 1px solid rgba(255, 255, 255, .06);
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }

        .beneficios-list li:last-child {
            border-bottom: none;
        }

        .beneficios-list li i {
            margin-top: 3px;
            flex-shrink: 0;
        }

/* ═══════════════════════════════════════════════════════════
       TESTIMONIOS — CARRUSEL VANILLA
    ═══════════════════════════════════════════════════════════ */
    .testimonial-carousel-wrapper { max-width:820px; margin:0 auto; position:relative; padding:0 58px; }
    .testimonial-carousel-card {
        background:linear-gradient(160deg,rgba(139,88,230,.2),rgba(58,46,235,.28));
        border:1px solid rgba(255,255,255,.1); border-radius:24px;
        padding:44px 52px 36px; text-align:center; width:100%;
    }
    .testimonial-quote-icon { font-size:1.7rem; color:#16b790; opacity:.5; margin-bottom:14px; }
    .testimonial-cita { font-size:1.18rem; font-style:italic; font-weight:700; color:#00eaff; line-height:1.5; margin-bottom:14px; }
    .testimonial-texto { font-size:.94rem; color:rgba(255,255,255,.78); line-height:1.7; margin-bottom:22px; }
    .testimonial-autor-row { display:flex; align-items:center; gap:10px; justify-content:center; }
    .testimonial-autor-avatar { font-size:1.6rem; color:rgba(255,255,255,.28); }
    .testimonial-autor-foto {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
        object-position: center top;
        border: 2px solid rgba(22,183,144,.6);
        flex-shrink: 0;
        display: block;
        background-color: rgba(255,255,255,.08);
        box-shadow: 0 0 0 3px rgba(22,183,144,.18);
    }
    .testimonial-autor-name { font-size:.96rem; font-weight:700; color:white; margin:0; }
    .testimonial-arrow {
        position:absolute; top:50%; transform:translateY(-50%);
        width:40px; height:40px; background:rgba(69,84,229,.5);
        border:1px solid rgba(255,255,255,.14); border-radius:50%;
        display:flex; align-items:center; justify-content:center;
        color:white; cursor:pointer; transition:background .2s; z-index:5;
        font-size:.85rem;
    }
    .testimonial-arrow:hover { background:rgba(69,84,229,.85); }
    .testimonial-arrow-prev { left:0; }
    .testimonial-arrow-next { right:0; }
    .testimonial-dots { display:flex; justify-content:center; gap:8px; margin-top:22px; }
    .testimonial-dot {
        width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.28);
        border:none; padding:0; cursor:pointer; transition:all .3s;
    }
    .testimonial-dot.active { background:#16b790; transform:scale(1.35); }


        /* ═══════════════════════════════════════════════════════════
       CONTACTO
    ═══════════════════════════════════════════════════════════ */
        .contacto-email-alt {
            color: rgba(255, 255, 255, .6);
            font-size: .9rem;
            margin-top: 13px;
            margin-bottom: 0;
        }

        .contacto-email-link {
            color: #00eaff;
            text-decoration: none;
            font-weight: 600;
            transition: color .2s;
        }

        .contacto-email-link:hover {
            color: #16b790;
            text-decoration: underline;
        }

        /* ═══════════════════════════════════════════════════════════
       FOOTER
    ═══════════════════════════════════════════════════════════ */
        .site-footer {
            background: #1a1440;
            color: rgba(255, 255, 255, .8);
            margin: 0 40px;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
            overflow: hidden;
        }

        .footer-inner {
            padding: 34px 0 0;
        }

        .footer-logo {
            max-height: 90px;
            width: auto;
        }

        .footer-logo:hover {
            opacity: 1;
        }

        .footer-credits-label {
            font-size: 1.3rem;
            text-transform: uppercase;
            letter-spacing: .1em;
            color: #16b790;
            margin: 0 0 4px;
            font-weight: 700;
        }

        .footer-credits-text {
            font-size: 1.4rem;
            color: rgba(255, 255, 255, .5);
            margin: 0;
            line-height: 1.55;
        }

        .footer-divider {
            height: 1px;
            background: rgba(255, 255, 255, .08);
            margin: 22px 0 0;
        }

        .footer-bottom {
            background: rgba(0, 0, 0, .18);
            padding: 15px 40px;
        }

        .footer-copyright {
            font-size: 1rem;
            color: rgba(255, 255, 255, .4);
            margin: 0;
            line-height: 1.6;
        }

        .footer-copyright small {
            font-size: 1rem;
            color: rgba(255, 255, 255, .26);
        }

        .footer-legal-link {
            font-size: 1rem;
            color: rgba(255, 255, 255, .44);
            text-decoration: none;
            transition: color .2s;
        }

        .footer-legal-link:hover {
            color: #16b790;
        }

        .footer-legal-sep {
            color: rgba(255, 255, 255, .18);
            margin: 0 8px;
            font-size: .79rem;
        }

        /* ═══════════════════════════════════════════════════════════
       RESPONSIVE
    ═══════════════════════════════════════════════════════════ */
        @media (max-width:991px) {
            .contenedor-principal {
                padding: 20px 20px 0 20px !important;
            }

            #que-es {
                padding: 40px 20px !important;
            }

            #que-es-extended {
                padding: 0 20px 40px 20px !important;
            }

            .que-es-ext-block {
                padding: 24px 8px 12px;
            }

            .site-footer {
                margin: 0 20px;
            }

            .footer-bottom {
                padding: 14px 20px;
            }

            .testimonial-carousel-wrapper {
                padding: 0 46px;
            }

            .testimonial-carousel-card {
                padding: 32px 24px 28px;
            }

            .digcompedu-card {
                padding: 24px 16px;
            }
        }

        @media (max-width:767px) {
            .testimonial-carousel-wrapper {
                padding: 0 38px;
            }

            .testimonial-arrow {
                width: 32px;
                height: 32px;
                font-size: .78rem;
            }

            .site-footer {
                margin: 0 12px;
                border-radius: 12px;
            }

            .footer-bottom {
                padding: 12px 14px;
            }

            .testimonial-cita {
                font-size: 1.05rem;
            }
        }

        @media (max-width:480px) {
            .contenedor-principal {
                padding: 10px 10px 0 10px !important;
            }

            #que-es {
                padding: 28px 12px !important;
            }

            #que-es-extended {
                padding: 0 12px 28px 12px !important;
            }

            .testimonial-carousel-card {
                padding: 26px 14px 22px;
            }
        }

/* ═════════════════════════════════════════════════════════════════════
   4. SECCIÓN "¿QUÉ ES?"
═════════════════════════════════════════════════════════════════════ */
.titulo {
    font-family: 'Arial', sans-serif;
    font-size: 96px;
    font-weight: bold;
    letter-spacing: -5px;
}

.outline {
    color: transparent;
    -webkit-text-stroke: 2px #00eaff;
}

.filled {
    color: #00eaff;
    text-shadow: -1px -1px 0 #00eaff, 1px -1px 0 #00eaff, -1px 1px 0 #00eaff, 1px 1px 0 #00eaff;
}

.img-que-es {
    width: 100%;
}

.card {
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, #3a2eeb, #8b58e6);
    padding: 20px;
    border-radius: 20px;
    width: 90%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.icon {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    margin-right: 15px;
}

.text-content {
    color: white;
}

.text-content h2 {
    margin: 0;
    font-size: 20px;
    font-weight: bold;
}

.text-content p {
    margin: 5px 0 0;
    font-size: 14px;
    color: #d0d0e1;
}

/* ═════════════════════════════════════════════════════════════════════
   5. SECCIÓN DE ESTADÍSTICAS E IMPACTO
═════════════════════════════════════════════════════════════════════ */
.container.section-3-1 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    padding: 5px;
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    font-family: 'Baloo', sans-serif;
}

.stats-card {
    background: linear-gradient(180deg, #8b58e64d, #3a2eeb61);
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 5px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stats-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.stats-card .number {
    font-size: 3rem;
    font-weight: bold;
    margin: 0;
    color: white;
}

.stats-card .title {
    font-size: 1.2rem;
    margin-top: 10px;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Arial', sans-serif;
}
/*TOUR*/
.shepherd-element{
    background:transparent !important;
}
/* ═════════════════════════════════════════════════════════════════════
   6. TESTIMONIOS Y REVIEWS
═════════════════════════════════════════════════════════════════════ */
.testimonial-card {
    background: linear-gradient(180deg, #8b58e64d, #3a2eeb61);
    border: none;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.testimonial-card .card-text {
    font-style: italic;
    color: white;
    font-size: 1rem;
}

.testimonial-card .card-title {
    margin-top: 15px;
    font-weight: bold;
    color: white;
    text-align: right;
}

/* ═════════════════════════════════════════════════════════════════════
   7. FORMULARIO DE CONTACTO / CONSULTORÍA
═════════════════════════════════════════════════════════════════════ */
.contacto-consultoria h2 {
    font-weight: bold;
    color: white;
}

.contacto-consultoria .form-control {
    border: 2px solid #ccc;
    border-radius: 8px;
    background: transparent;
    transition: border-color 0.3s, box-shadow 0.3s;
    color: white;
}

.contacto-consultoria .form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.25);
    outline: none;
}

.contacto-consultoria label {
    color: white;
    font-weight: 500;
}

.contacto-consultoria .btn-primary {
    border-radius: 8px;
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
}

.contacto-consultoria .btn-primary:hover {
    transform: translateY(-3px);
}

/* ═════════════════════════════════════════════════════════════════════
   8. MEDIA QUERIES (RESPONSIVE DESIGN)
═════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .separador-banner1,
    .separador-banner2 {
        width: 90%;
        height: 3px;
    }
}

@media (max-width: 480px) {
    .separador-banner1,
    .separador-banner2 {
        width: 95%;
        height: 2px;
    }
}