/* ==========================================================================
   1. VARIABLES GLOBALES Y RESET (CIMIENTOS)
   Aquí defines los colores maestros y el comportamiento básico de la página.
   ========================================================================== */
:root {
    --color-bg: #FF981E;       /* Tu Naranja Principal */
    --color-primary: #2A2826;  /* Gris Oscuro (Texto) */
    --color-white: #FFFFFF;
    --color-blue: #0d6efd;     /* Azul Botones */
    --color-green: #25d366;    /* WhatsApp */
    --font-main: 'Montserrat', sans-serif;
    --font-logo: 'Pacifico', cursive;
}

/* Configuración del cuerpo para evitar scroll horizontal y errores de ancho */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: clip; 
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    background-color: var(--color-bg);
    color: var(--color-primary);
    position: relative;
}

/* --- UTILIDADES (CLASES RÁPIDAS) --- */
.fw-black { font-weight: 900; }
.fw-bold { font-weight: 700; }
.text-primary-color { color: var(--color-bg) !important; }
.text-orange { color: var(--color-bg); }
.text-white { color: #fff !important; }
.leading-relaxed { line-height: 1.8; }
img { max-width: 100%; height: auto; }


/* ==========================================================================
   2. NAVBAR (ESTILO SOFT POP + TU ANIMACIÓN FAVORITA)
   ========================================================================== */

.navbar-custom {
    position: fixed !important;
    top: 0;
    width: 100%;
    z-index: 1050; 
    
    /* Estado Inicial: Transparente */
    background-color: transparent;
    padding: 20px 0;
    
    /* TU ANIMACIÓN (La lenta y elástica de 0.8s) */
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), 
                background-color 0.8s ease, 
                padding 0.8s ease;
}

/* --- ESTADO SCROLLED (VIDRIO BLANCO) --- */
.navbar-custom.scrolled {
    background-color: rgba(255, 255, 255, 0.85); /* Blanco Vidrio */
    backdrop-filter: blur(12px); /* Efecto Blur */
    -webkit-backdrop-filter: blur(12px);
    
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    padding: 10px 0;
}

/* --- ESTADO OCULTO (BAJANDO) --- */
.navbar-hidden {
    transform: translateY(-100%);
    /* Opcional: Si quieres que cambie de color al irse, o dejarlo transparente */
    background-color: rgba(255, 255, 255, 0); 
}

/* --- LOGO Y TEXTOS --- */
.navbar-brand {
    font-size: 1.8rem;
    color: #121212 !important;
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); /* Animación sincronizada */
}

.navbar-brand span { color: #FF981E !important; }

/* Enlaces de Escritorio */
@media (min-width: 992px) {
    .nav-link {
        color: #121212 !important;
        font-weight: 700;
        padding: 10px 20px !important;
        border-radius: 50px;
        transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); /* Animación sincronizada */
    }

    /* Hover: Píldora Naranja */
    .nav-link:hover, .nav-link.active {
        background-color: #FF981E;
        color: #fff !important;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(255, 152, 30, 0.3);
        /* Al hacer hover, desactivamos la transición lenta para que responda rápido */
        transition: all 0.3s ease; 
    }

    /* --- AQUÍ ESTÁ EL EFECTO QUE TE GUSTABA ("WARP") --- */
    /* Cuando la barra se oculta, el texto se estira y se separa */
    
    .navbar-hidden .navbar-brand,
    .navbar-hidden .nav-link,
    .navbar-hidden .logo span {
        color: #FF981E !important; /* Se vuelve naranja al irse */
        letter-spacing: 15px !important; /* SE ESTIRA */
        transform: scale(1.1) skewX(10deg); /* Se deforma un poco */
        opacity: 0;
        filter: blur(5px); /* Se desenfoca estilo Soft Pop */
    }
}

/* Menú Móvil Abierto */
.navbar-custom.menu-open {
    background-color: #fff !important;
    transform: none !important; 
}

/* ==========================================================================
   3. MENÚ MÓVIL (SIDEBAR LATERAL)
   Todo lo referente al menú que sale en celulares.
   ========================================================================== */
@media (max-width: 991px) {
    /* El contenedor del menú (cortina negra) */
    .navbar-collapse {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 320px;
        height: 100dvh !important; 
        background-color: #1a1a1a !important; /* Fondo Negro */
        display: flex !important;
        flex-direction: column;
        justify-content: flex-start !important;
        padding: 40px 0 25px 0 !important;
        transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1) !important;
        box-shadow: -10px 0 50px rgba(0,0,0,0.5);
        overflow-y: auto; 
        overscroll-behavior: contain;
        z-index: 1100;
    }

    .navbar-collapse.show { right: 0; }

    /* Fondo oscuro detrás del menú */
    .navbar-collapse.show::before {
        content: ''; position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh;
        background: rgba(0,0,0,0.6); z-index: -1; transform: translateX(-100%); touch-action: none;
    }

    /* Header del menú móvil (Logo y cerrar) */
    .mobile-menu-header {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding: 0 25px 15px 25px;
        margin-bottom: 10px;
        width: 100%;
        flex-shrink: 0;
    }
    .mobile-menu-header .logo { color: #ffffff !important; font-size: 1.3rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
    .btn-close-custom { background: transparent; border: 2px solid rgba(255,255,255,0.2); color: #fff; width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; }

    /* Enlaces del menú */
    .navbar-nav { width: 100%; gap: 0 !important; margin-top: 0; }
    .nav-item { width: 100%; }

    .mobile-link {
        font-size: 1rem !important;
        color: rgba(255,255,255,0.7) !important;
        width: 100%;
        display: block;
        padding: 18px 25px;
        border-radius: 0 !important;
        transition: all 0.3s ease;
        font-weight: 600;
        border-bottom: 1px solid rgba(255,255,255,0.03);
        border-left: 0 solid transparent;
        margin: 0 !important;
    }

    .mobile-link:hover, .mobile-link.active {
        color: #fff !important;
        background-color: var(--color-bg);
        padding-left: 35px;
        border-left: 5px solid #fff;
    }

    /* Botón CTA dentro del menú móvil */
    .nav-item:last-child { padding: 30px 25px; }
    .btn-cta {
        width: 100%;
        background-color: var(--color-bg);
        color: var(--color-primary);
        padding: 12px 0;
        font-size: 0.9rem;
        text-transform: uppercase;
        font-weight: 700;
        box-shadow: 0 4px 15px rgba(255, 152, 30, 0.3);
        border-radius: 8px;
    }

    /* Icono hamburguesa */
    .navbar-toggler { border: none; color: #1a1a1a; }
    .navbar-hidden .navbar-toggler { color: #ff981e; }
    
    /* Arreglo para cuando el menú está abierto */
    .navbar-custom.menu-open .navbar-collapse {
        position: fixed !important; top: 0 !important; height: 100dvh !important;
    }
}


/* ==========================================================================
   4. HERO SECTION (LA PORTADA)
   Configuración de la imagen del detective, textos y fondo.
   ========================================================================== */
.hero-section { min-height: 100vh; padding-top: 120px; padding-bottom: 60px; position: relative; overflow: hidden; }
.main-title { line-height: 0.9; letter-spacing: -3px; color: var(--color-primary); }
.subtitle { font-weight: 800; letter-spacing: 3px; font-size: 1.1rem; }

/* Efecto hover en el texto principal */
.hero-text-interactive {
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: transform;
    display: inline-block;
    touch-action: none;
}
.hero-text-interactive:hover .main-title {
    text-shadow: 0 10px 20px rgba(255, 152, 30, 0.2);
}

/* Imagen del detective y fondo */
.circle-bg {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 90%; max-width: 500px; aspect-ratio: 1/1;
    background-color: rgba(255, 255, 255, 0.2); border-radius: 50%; z-index: 1;
}
.detective-img {
    width: 500px !important;
    max-width: unset !important; max-height: unset !important;
    position: relative; left: 50%; transform: translateX(-50%);
    display: block; z-index: 10; bottom: -60px;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.3)); 
}

/* Ajustes Hero para celular */
@media (max-width: 768px) {
    .detective-img {
        width: 400px !important;
        bottom: -1px !important;
        left: 50%; transform: translateX(-50%);
    }
    .hero-section { padding-top: 100px; padding-bottom: 40px; text-align: center; }
    .circle-bg { width: 280px; height: 280px; }
    .main-title { font-size: 13vw; margin-bottom: 15px; }
    .subtitle { font-size: 0.9rem; }
    .lead { font-size: 1rem; padding: 0 15px; }
    .hero-section .d-flex { flex-direction: column; align-items: center; gap: 15px !important; width: 100%; }
    .hero-section .btn { width: 80%; max-width: 300px; padding: 12px 0; }
}



/* ==========================================================================
   6. SECCIÓN DE SERVICIOS (ESTILO "MODERNO VIBRANTE")
   ========================================================================== */

/* Fondo limpio pero con textura sutil */
#servicios.bg-light {
    background-color: #F9F7F1 !important; /* Mismo crema que el Hero */
    /* Un patrón de puntos muy suave y transparente para dar textura sin ensuciar */
    background-image: radial-gradient(#FF981E 0.5px, transparent 0.5px);
    background-size: 20px 20px;
    opacity: 1;
}

/* Título de la sección: Grande y Limpio */
#servicios .section-title {
    color: #121212 !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: -1px;
    /* Subrayado decorativo naranja */
    text-decoration: underline;
    text-decoration-color: #FF981E;
    text-decoration-thickness: 5px;
    text-underline-offset: 8px;
    text-shadow: none; /* Quitamos la sombra dura */
}

/* --- CARRUSEL (Funcionalidad intacta) --- */
.carousel-container {
    position: relative; width: 100%; padding: 50px 0; 
    overflow: hidden; touch-action: pan-y; background: transparent; min-height: 400px;
}

.services-track {
    display: flex; flex-wrap: nowrap; gap: 25px; /* Un poco más de espacio */
    opacity: 0; transition: opacity 0.5s ease;
    width: max-content; transform: translateX(0); will-change: transform;
    cursor: grab; padding: 0 20px; 
}
.services-track.ready { opacity: 1; }
.services-track.active { cursor: grabbing; }

/* Tarjetas Individuales */
.service-card-item {
    width: 290px; min-width: 290px; flex-shrink: 0; 
    position: relative; user-select: none; transition: transform 0.3s ease;
}

/* Efecto Hover: La tarjeta flota suavemente */
.service-card-item:hover { 
    transform: translateY(-10px); 
    z-index: 5; 
}

/* --- DISEÑO DE LA TARJETA (LIMPIO Y PREMIUM) --- */
.service-card-inner {
    background: #FFFFFF; 
    border-radius: 24px; /* Bordes más redondeados y amigables */
    padding: 35px 25px;
    height: 100%; min-height: 340px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    
    /* Borde sutil gris claro (elegante) */
    border: 1px solid rgba(0,0,0,0.05);
    
    /* Sombra suave y difusa (Moderna) */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

/* Hover: Borde naranja brillante y sombra de color */
.service-card-item:hover .service-card-inner {
    border-color: #FF981E;
    box-shadow: 0 20px 40px rgba(255, 152, 30, 0.25); /* Resplandor naranja */
}

/* Decoración superior (Barra de color) */
.card-pattern { 
    position: absolute; top: 0; left: 0; width: 100%; height: 6px; 
    background: linear-gradient(90deg, #FF981E, #FFD166); /* Degradado marca */
    opacity: 1;
}

/* Iconos */
.icon-box {
    width: 70px; height: 70px; 
    background-color: #FFF5E6; /* Fondo naranja muy pálido */
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center; 
    
    color: #FF981E; /* Icono color naranja fuerte */
    font-size: 2.2rem;
    
    margin-bottom: 25px; pointer-events: none;
    transition: all 0.3s ease;
}

/* Al pasar el mouse, el icono se llena de color */
.service-card-item:hover .icon-box {
    background-color: #FF981E;
    color: #FFFFFF;
    transform: scale(1.1) rotate(-5deg);
}

/* Títulos */
.service-card-item h3 { 
    font-size: 1.25rem; 
    font-weight: 800; 
    margin-bottom: 10px; 
    pointer-events: none;
    color: #2A2826;
    letter-spacing: -0.5px;
}

/* Texto descriptivo pequeño (si lo hubiera visible) */
.service-card-item p.small {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Botón expandir (+) */
.expand-icon { 
    margin-top: auto; padding-top: 20px; 
    color: #ddd; 
    transition: all 0.3s;
}
.service-card-item:hover .expand-icon { 
    color: #FF981E;
    transform: scale(1.3);
}

/* Flechas Carrusel (Desktop) */
.carousel-btn { 
    display: none !important; /* Mantenemos ocultas según tu preferencia anterior */
}


/* --- MODAL (POP-UP) --- */
.service-modal-backdrop {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* Fondo blanco translúcido */
    backdrop-filter: blur(8px); /* Desenfoque estilo Apple/Moderno */
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
    padding: 20px; 
}
.service-modal-backdrop.active { opacity: 1; pointer-events: all; }

.service-modal-content {
    background: #FFFFFF;
    width: 100%; max-width: 500px;
    border-radius: 30px; position: relative; overflow: hidden;
    transform: translateY(30px) scale(0.98);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Efecto rebote */
    padding: 50px 40px; 
    box-shadow: 0 25px 80px rgba(0,0,0,0.15); /* Sombra suave gigante */
    text-align: center;
    border: 1px solid #f0f0f0;
}
.service-modal-backdrop.active .service-modal-content { transform: translateY(0) scale(1); }

.modal-header-pattern {
    display: none;
}

/* Botón cerrar modal (X) */
.close-modal-btn {
    position: absolute; top: 20px; right: 20px;
    background: #f8f9fa; border: none; 
    width: 45px; height: 45px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; 
    color: #333; transition: all 0.2s;
    font-size: 1.2rem;
}
.close-modal-btn:hover { background: #FF981E; color: #fff; transform: rotate(90deg); }

.modal-icon-wrapper {
    width: 90px; height: 90px; margin: 0 auto 25px auto;
    background: linear-gradient(135deg, #FF981E, #FFD166); /* Degradado */
    color: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; 
    box-shadow: 0 10px 20px rgba(255, 152, 30, 0.3);
}
.modal-icon-wrapper span { font-size: 45px; }

#modalTitle { 
    color: #121212; font-weight: 900; letter-spacing: -1px; margin-bottom: 15px;
}
#modalDesc { 
    font-size: 1.05rem; line-height: 1.7; margin-bottom: 30px; color: #555;
}

/* Botón Cotizar del Modal */
.service-modal-content .btn {
    background-color: #121212 !important;
    color: #fff !important;
    padding: 15px 35px;
    border-radius: 50px;
    font-weight: 700;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    border: none;
}
.service-modal-content .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    background-color: #FF981E !important; /* Cambio a naranja en hover */
}

/* ==========================================================================
   7. SECCIÓN PORTAFOLIO (ESTILO SOFT POP)
   ========================================================================== */

/* Fondo Crema con textura de puntos (Igual que Servicios) */
#portafolio {
    background-color: #F9F7F1 !important; 
    background-image: radial-gradient(#FF981E 0.5px, transparent 0.5px);
    background-size: 20px 20px;
    opacity: 1;
}

/* Título de la sección */
#portafolio .section-title {
    color: #121212 !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: -1px;
    /* El subrayado naranja característico */
    text-decoration: underline;
    text-decoration-color: #FF981E;
    text-decoration-thickness: 5px;
    text-underline-offset: 8px;
    text-shadow: none;
}

/* --- FILTROS (BOTONES TIPO PÍLDORA) --- */
.portfolio-filter-wrapper {
    display: flex; 
    justify-content: center; 
    flex-wrap: wrap; 
    gap: 15px; /* Más aire entre botones */
}

.filter-btn {
    background-color: #FFFFFF;
    color: #666; /* Texto gris suave */
    border: 1px solid rgba(0,0,0,0.05); /* Borde sutil */
    border-radius: 50px; /* Forma de píldora total */
    padding: 12px 35px;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* Sombra suave */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Hover y Activo: Naranja vibrante y levitación */
.filter-btn:hover, 
.filter-btn.active {
    background-color: #FF981E;
    color: #FFFFFF;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255, 152, 30, 0.3); /* Resplandor naranja */
    border-color: transparent;
}

/* --- TARJETAS DE PROYECTOS --- */
.portfolio-item { 
    height: 350px; /* Un poco más altas para elegancia */
    cursor: pointer; 
    border-radius: 24px; /* Curvas Soft Pop */
    overflow: hidden; 
    position: relative;
    /* Sombra inicial muy limpia */
    box-shadow: 0 10px 20px rgba(0,0,0,0.03); 
    border: 1px solid rgba(0,0,0,0.02);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Efecto Levitación al pasar el mouse */
.portfolio-item:hover {
    transform: translateY(-10px) scale(1.02); /* Sube y crece un poquito */
    /* Sombra de color difusa */
    box-shadow: 0 25px 50px rgba(255, 152, 30, 0.2); 
    z-index: 2;
}

/* La imagen de fondo */
.portfolio-item img { 
    height: 100%; 
    width: 100%;
    object-fit: cover; 
    transition: transform 0.6s ease;
}

/* Zoom suave de la imagen al hacer hover */
.portfolio-item:hover img { 
    transform: scale(1.15); 
}

/* --- OVERLAY (CAPA DE INFORMACIÓN) --- */
.portfolio-overlay {
    position: absolute; 
    top: 0; left: 0; width: 100%; height: 100%;
    
    /* Degradado Moderno (Naranja a transparente) */
    background: linear-gradient(to top, rgba(255, 152, 30, 0.95) 0%, rgba(255, 152, 30, 0.8) 60%, rgba(255, 152, 30, 0.2) 100%);
    
    /* Efecto vidrio esmerilado (Muy moderno) */
    backdrop-filter: blur(3px); 
    
    opacity: 0; 
    transform: translateY(20px); /* Entra desde abajo */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Centrado flex */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
}

/* Aparición suave al hover */
.portfolio-item:hover .portfolio-overlay { 
    opacity: 1; 
    transform: translateY(0); 
}

/* Tipografía dentro del Overlay */
.portfolio-overlay h4 {
    font-weight: 900;
    font-size: 1.5rem;
    text-transform: uppercase;
    margin-bottom: 5px;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Badges (Etiquetas) Blancas limpias */
.badge.bg-orange {
    background-color: #FFFFFF !important; 
    color: #FF981E !important; 
    padding: 8px 18px;
    border-radius: 50px; /* Píldora */
    font-weight: 800;
    font-size: 0.75rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

/* Botón "Ver Caso" (Cascada) */
.portfolio-overlay .btn {
    background-color: #121212;
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    
    /* Animación de entrada retrasada (Cascada) */
    transform: translateY(20px); 
    opacity: 0;
    transition: all 0.3s 0.1s; /* 0.1s de delay */
}

.portfolio-overlay .btn:hover {
    background-color: #fff;
    color: #121212;
    transform: translateY(-2px) !important; /* Pequeño salto */
}

.portfolio-item:hover .portfolio-overlay .btn {
    transform: translateY(0);
    opacity: 1;
}

/* Ajuste Filtros Móvil (Scroll Horizontal) - Mantenemos tu lógica funcional */
@media (max-width: 768px) {
    .portfolio-filter-wrapper {
        justify-content: flex-start; 
        flex-wrap: nowrap; 
        overflow-x: auto;
        padding-bottom: 15px; 
        -webkit-overflow-scrolling: touch; 
        scrollbar-width: none;
        /* Ajuste de márgenes para que toque los bordes en móvil */
        margin-left: -12px; margin-right: -12px; padding-left: 20px; padding-right: 20px;
    }
    .portfolio-filter-wrapper::-webkit-scrollbar { display: none; }
    .portfolio-filter-wrapper .filter-btn { flex-shrink: 0; white-space: nowrap; }
}


/* ==========================================================================
   8. SECCIÓN CONTACTO (ESTILO SOFT POP)
   ========================================================================== */

/* Fondo Crema con textura (Consistencia Total) */
#contacto {
    background-color: #F9F7F1 !important; 
    background-image: radial-gradient(#FF981E 0.5px, transparent 0.5px);
    background-size: 20px 20px;
}

/* Título de la sección */
#contacto .section-title {
    color: #121212 !important;
    font-weight: 900 !important;
    letter-spacing: -1px;
    text-decoration: underline;
    text-decoration-color: #FF981E;
    text-decoration-thickness: 5px;
    text-underline-offset: 8px;
}

/* --- CAJA DE INFORMACIÓN (IZQUIERDA) --- */
.contact-info-box {
    background: #FFFFFF;
    border-radius: 30px; /* Curvas suaves */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Sombra difusa */
    border: 1px solid rgba(0,0,0,0.02);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 100%;
}

/* Efecto Levitación */
.contact-info-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(255, 152, 30, 0.15); /* Resplandor */
}

/* Iconos de Contacto (Gradiente) */
.icon-contact {
    width: 60px; height: 60px; /* Un poco más grandes */
    /* Fondo con degradado suave */
    background: linear-gradient(135deg, #FF981E, #FFD166);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; /* Icono blanco para contraste */
    font-size: 1.5rem;
    box-shadow: 0 5px 15px rgba(255, 152, 30, 0.3);
    transition: transform 0.3s ease;
}

/* Hover en el ítem de contacto */
.d-flex:hover .icon-contact {
    transform: scale(1.1) rotate(10deg);
}

/* Redes Sociales Pequeñas */
.social-mini a {
    width: 45px; height: 45px; 
    border-radius: 50%; 
    background-color: #f0f2f5; /* Gris muy suave */
    display: flex; align-items: center; justify-content: center; 
    color: #666; 
    text-decoration: none; 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.social-mini a:hover {
    background-color: #FF981E;
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(255, 152, 30, 0.4);
}

/* --- FORMULARIO (DERECHA) --- */
.contact-form {
    background: #FFFFFF;
    border-radius: 30px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08); /* Sombra más fuerte para destacar */
    border: 1px solid rgba(0,0,0,0.02);
}

/* Inputs y Selects (Estilo "Campo Suave") */
.contact-form .form-control, 
.contact-form .form-select {
    border: 2px solid transparent; /* Sin borde visible inicial */
    background-color: #f4f6f8; /* Fondo gris azulado muy tenue */
    border-radius: 15px; /* Bordes amigables */
    padding: 12px 20px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #333;
    transition: all 0.3s ease;
}

/* Etiquetas flotantes */
.form-floating > label {
    padding-left: 20px;
    color: #888;
}

/* Estado Focus (Cuando escribes) */
.contact-form .form-control:focus, 
.contact-form .form-select:focus {
    background-color: #fff;
    border-color: #FF981E; /* Borde naranja */
    box-shadow: 0 0 0 4px rgba(255, 152, 30, 0.15); /* Anillo de luz */
    outline: none;
}

/* Botón Enviar (Píldora Naranja) */
.btn-submit {
    background-color: #121212; /* Negro para elegancia y contraste */
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: 50px; /* Píldora completa */
    font-weight: 800;
    letter-spacing: 1px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Hover Botón */
.btn-submit:hover {
    background-color: #FF981E; /* Cambio a naranja */
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(255, 152, 30, 0.3); /* Resplandor */
}

/* Decoración (Círculo flotante) */
.form-decoration {
    position: absolute; 
    top: -30px; right: -30px; 
    width: 120px; height: 120px;
    background: linear-gradient(135deg, rgba(255,152,30,0.1), rgba(255,209,102,0.2));
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

/* ==========================================================================
   9. MÉTRICAS (STATS) - ESTILO SOFT POP
   ========================================================================== */

.stats-section { 
    position: relative; 
    /* Cambiamos el fondo oscuro por el crema con textura de puntos */
    background-color: #F9F7F1 !important; 
    background-image: radial-gradient(#FF981E 0.5px, transparent 0.5px);
    background-size: 20px 20px;
    overflow: hidden; 
    padding: 80px 0;
}

/* Ocultamos la imagen de fondo vieja y el overlay oscuro */
.stats-bg-image, .stats-overlay { display: none; }

/* Nueva tarjeta contenedora para cada estadística */
.stat-item {
    background: #FFFFFF;
    border-radius: 24px; /* Bordes Soft Pop */
    padding: 35px 20px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05); /* Sombra suave */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid rgba(0,0,0,0.03);
}

/* Efecto Levitación */
.stat-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(255, 152, 30, 0.15); /* Resplandor naranja */
}

/* Círculo del Icono */
.stat-icon-circle {
    width: 80px; height: 80px; 
    /* Fondo naranja muy pálido en lugar de transparente */
    background-color: #FFF5E6; 
    border: none; /* Quitamos el borde */
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center; 
    transition: all 0.3s ease;
    margin: 0 auto 20px auto;
}

.stat-icon-circle span { 
    font-size: 40px; 
    color: #FF981E; /* Icono naranja */
}

/* Hover del Icono */
.stat-item:hover .stat-icon-circle { 
    background-color: #FF981E; 
    transform: scale(1.1) rotate(10deg); 
}

.stat-item:hover .stat-icon-circle span { 
    color: #fff; 
}

/* --- CORRECCIÓN DE COLORES DE TEXTO (Override a Bootstrap) --- */
/* Como tu HTML tiene 'text-white', usamos !important para forzar el oscuro */

.stat-item h3 {
    font-weight: 900;
    font-size: 3rem;
    margin-bottom: 10px;
    /* Degradado en el número */
    background: linear-gradient(45deg, #FF981E, #FFD166);
    
    /* Propiedad estándar primero (para el futuro) */
    background-clip: text; 
    
    /* Propiedad Webkit (para que funcione hoy en Chrome/Safari) */
    -webkit-background-clip: text;
    
    /* Hace el texto transparente para ver el fondo */
    -webkit-text-fill-color: transparent;
    color: transparent; /* Fallback de seguridad */
}

.stat-item p.fw-bold {
    color: #121212 !important; /* Texto negro */
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
}

.stat-item p.small {
    color: #777 !important; /* Texto gris */
    font-weight: 500;
}


/* ==========================================================================
   FOOTER (ESTILO SOFT POP - "TARJETA FLOTANTE")
   ========================================================================== */

.footer-monkey { 
    background-color: #121212; /* Negro profundo, elegante */
    color: #b0b0b0; /* Texto gris suave para no cansar la vista */
    padding-top: 90px; 
    padding-bottom: 40px; 
    font-size: 0.95rem; 
    
    /* ADIÓS LÍNEA NARANJA FEA */
    border-top: none; 
    
    /* EL TOQUE SOFT POP: Bordes redondos arriba */
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    
    /* Sombra superior para separarlo del contenido crema */
    box-shadow: 0 -10px 40px rgba(0,0,0,0.05);
    
    position: relative;
    z-index: 10;
    margin-top: 50px; /* Un poco de aire antes del footer */
}

/* Logo en el Footer */
.footer-logo { 
    font-family: var(--font-logo); /* Pacifico */
    font-size: 3rem; 
    color: #fff; 
    text-decoration: none; 
    display: inline-block;
    margin-bottom: 10px;
    
    /* Sutil resplandor */
    text-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
}

.footer-slogan {
    color: #777;
    font-weight: 500;
    letter-spacing: 1px;
}

/* Títulos de columnas (Legales, Redes, Contacto) */
.footer-title {
    color: #fff;
    font-weight: 800;
    margin-bottom: 25px;
    font-size: 1.2rem;
}

/* Enlaces (Links) */
.footer-links a, 
.footer-contact li { 
    color: #999; 
    text-decoration: none; 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
    display: block;
    margin-bottom: 12px;
    font-weight: 500;
}

/* Hover en enlaces: Desplazamiento y cambio a blanco */
.footer-links a:hover { 
    color: #FF981E; /* Naranja */
    transform: translateX(8px); 
    text-shadow: 0 0 10px rgba(255, 152, 30, 0.4);
}

/* Botón Libro de Reclamaciones (Estilo Píldora Outline) */
.reclamaciones-btn { 
    border: 1px solid rgba(255,255,255,0.2); 
    background: transparent;
    padding: 12px 25px; 
    border-radius: 50px; 
    display: inline-flex; 
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    transition: all 0.3s ease;
}

/* Hover Reclamaciones: Se llena de blanco/naranja */
.reclamaciones-btn:hover { 
    background: #FF981E; 
    border-color: #FF981E; 
    color: #121212; 
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(255, 152, 30, 0.3);
}

/* Iconos Sociales (Burbujas Oscuras) */
.social-icons a { 
    width: 45px; height: 45px;
    background-color: #1a1a1a; /* Un poco más claro que el fondo */
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; 
    font-size: 1.2rem; 
    margin: 0 8px; 
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* Rebote */
    border: 1px solid rgba(255,255,255,0.05);
}

/* Hover Social: Explosión de color */
.social-icons a:hover { 
    background-color: #FF981E;
    color: #121212;
    border-color: #FF981E;
    transform: translateY(-5px) scale(1.15); 
    box-shadow: 0 5px 15px rgba(255, 152, 30, 0.4);
}

/* Créditos del Desarrollador */
.dev-link-contact { 
    color: #FF981E !important; 
    text-decoration: none !important; 
    font-weight: 700; 
    transition: all 0.3s ease; 
    display: inline-block; 
    position: relative;
}

.dev-link-contact::after {
    content: '';
    position: absolute;
    width: 0%; height: 2px;
    bottom: -2px; left: 0;
    background-color: #FF981E;
    transition: width 0.3s;
}

.dev-link-contact:hover::after {
    width: 100%;
}

.footer-contact .border-top { 
    border-color: rgba(255, 255, 255, 0.05) !important; 
}
/* ==========================================================================
   BOTONES FLOTANTES (ESTILO SOFT POP)
   ========================================================================== */
.floating-container {
    position: fixed; bottom: 30px; right: 30px; z-index: 1000;
    display: flex; flex-direction: row; align-items: center; gap: 15px;
    /* Transición suave para cuando aparecen/desaparecen */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease !important;
}

/* Estilo Base de los Botones */
.btn-float {
    display: flex; align-items: center; justify-content: center; 
    color: #fff; text-decoration: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* Efecto rebote (pop) */
}

/* 1. Botón "Agendar Cita" (Píldora) */
.btn-blue {
    background-color: #121212; /* Negro elegante */
    padding: 12px 28px; 
    border-radius: 50px;
    font-weight: 800; 
    font-size: 0.95rem; 
    white-space: nowrap; 
    overflow: hidden;
    max-width: 200px; opacity: 1; margin-right: 0;
    
    /* Sombra suave inicial */
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.1);
}

/* Hover Agendar: Se vuelve Naranja y Brilla */
.btn-blue:hover {
    background-color: #FF981E; /* Naranja Marca */
    border-color: #FF981E;
    transform: translateY(-5px); /* Flota */
    box-shadow: 0 15px 30px rgba(255, 152, 30, 0.4); /* Resplandor Naranja */
    color: #fff;
}

/* Clase para ocultar el texto (lógica JS) */
.btn-blue.hide-btn { max-width: 0; padding: 12px 0; opacity: 0; pointer-events: none; }


/* 2. Botón WhatsApp (Círculo) */
.btn-green { 
    /* Gradiente para que se vea más moderno que el verde plano */
    background: linear-gradient(135deg, #25d366, #128c7e); 
    width: 65px; height: 65px; 
    border-radius: 50%; 
    font-size: 2.2rem; 
    
    /* Sombra verde difusa (Glow) */
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3);
}

/* Hover WhatsApp: Rebote y más brillo */
.btn-green:hover {
    transform: translateY(-5px) rotate(10deg) scale(1.05); /* Se mueve y gira un poco */
    box-shadow: 0 15px 35px rgba(37, 211, 102, 0.5); /* Super Glow */
    color: #fff;
}

/* Estado oculto global */
.floating-container.btn-hidden { 
    transform: translateY(150px) !important; 
    opacity: 0 !important; 
    pointer-events: none !important; 
}

/* --- AJUSTES MÓVIL --- */
@media (max-width: 991px) {
    .floating-container {
        display: flex !important; position: fixed !important; 
        z-index: 2147483647 !important;
        bottom: 90px !important; right: 20px !important;
        transform: translateZ(0); opacity: 1 !important; pointer-events: auto !important;
    }
    
    /* Ajuste de posición y tamaño */
    .floating-container { bottom: 20px !important; right: 20px !important; gap: 10px; }
    
    .btn-green { 
        width: 60px !important; height: 60px !important; font-size: 2rem !important; 
        box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4); /* Sombra fuerte en móvil */
    }
    
    .btn-blue { 
        padding: 12px 20px; font-size: 0.85rem; height: 50px; 
    }
}

/* ==========================================================================
   10. ANIMACIONES GENERALES (SOFT POP & SMOOTH SCROLL)
   ========================================================================== */

/* Base de la animación */
.animate-on-scroll {
    opacity: 0;
    /* Curva "Soft": Empieza con energía y frena muy suavemente */
    transition: opacity 1.0s ease, 
                transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: opacity, transform;
}

/* --- TIPOS DE ENTRADA --- */

/* Fade Up: Entra desde más abajo para mayor dramatismo elegante */
.fade-up { 
    transform: translate3d(0, 60px, 0); 
}

/* Zoom In: Ahora también sube un poco mientras crece (Efecto Globo) */
.zoom-in { 
    transform: scale(0.92) translateY(30px); 
}

/* Deslizamientos laterales más suaves */
.slide-right { transform: translate3d(-60px, 0, 0); }
.slide-left { transform: translate3d(60px, 0, 0); }

/* ESTADO ACTIVO (Cuando ya se ve) */
.animate-on-scroll.active { 
    opacity: 1; 
    transform: translate3d(0, 0, 0) scale(1); 
}

/* --- MARQUEE (TEXTO INFINITO) --- */
.marquee-wrapper { 
    overflow: hidden; 
    white-space: nowrap; 
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); /* Desvanecido en bordes */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-content { 
    display: inline-block; 
    animation: marquee 40s linear infinite; /* Un poco más lento para que sea legible */
    font-weight: 800; 
    font-size: 1.2rem; 
    opacity: 0.8; 
}

@keyframes marquee { 
    0% { transform: translateX(0); } 
    100% { transform: translateX(-50%); } 
}

/* --- REVEAL PRO (PARA TEXTOS EN BLOQUE) --- */
.reveal-pro {
    opacity: 0; 
    transform: translateY(30px);
    /* Curva "Expo Out": Movimiento muy premium */
    transition: all 1.4s cubic-bezier(0.19, 1, 0.22, 1) !important;
    will-change: transform, opacity;
}

.reveal-pro.active { 
    opacity: 1; 
    transform: translateY(0); 
}

/* Ajuste específico para el Footer */
.footer-monkey .reveal-pro { 
    opacity: 0; 
    transform: translateY(40px); 
    transition-duration: 1.5s !important; /* Más lento en el footer */
}
.footer-monkey .reveal-pro.active { 
    opacity: 1; 
    transform: translateY(0); 
}

/* --- DECORACIÓN DE FONDO (EL "PE" GIGANTE) --- */
.bg-decoration {
    position: absolute; 
    top: 50%; left: 50%; 
    transform: translate(-50%, -50%);
    font-size: 25vw; 
    font-weight: 900; 
    
    /* CAMBIO SOFT POP: Borde suave en lugar de relleno sólido */
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.05);
    
    z-index: 1; 
    pointer-events: none;
    user-select: none;
}

/* --- UTILIDADES VISUALES --- */
.section-padding { padding: 100px 0; }

/* Focus Accesible pero Bonito (Anillo de luz Naranja) */
.btn-cta:focus-visible,
.btn:focus-visible { 
    outline: none !important; 
    box-shadow: 0 0 0 4px rgba(255, 152, 30, 0.3) !important; 
    border-color: #FF981E !important;
}

/* Animación de Flotación Suave (Para elementos decorativos) */
@keyframes float { 
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(-15px); } 
}
/* ==========================================================================
   6. SECCIÓN NOSOTROS (ESTILO SOFT POP / LIGHT)
   ========================================================================== */

/* 1. Forzamos el fondo Crema y Texto Oscuro (Override a bg-dark) */
#nosotros {
    background-color: #F9F7F1 !important; 
    background-image: radial-gradient(#FF981E 0.5px, transparent 0.5px);
    background-size: 20px 20px;
    color: #121212 !important; /* Texto base oscuro */
}

/* 2. Forzamos que los títulos blancos sean negros ahora */
#nosotros .text-white {
    color: #121212 !important;
}

#nosotros .text-white-50 {
    color: #555 !important; /* Gris medio para descripciones */
    font-weight: 500;
}

/* 3. El título principal "SOMOS AGENCIA PE" */
#nosotros .section-title {
    font-weight: 900 !important;
    letter-spacing: -1px;
    text-transform: uppercase;
}

#nosotros .text-primary-color {
    color: #FF981E !important;
    text-decoration: underline;
    text-decoration-color: #FFD166;
    text-decoration-thickness: 4px;
}

/* --- TARJETAS MISIÓN / VISIÓN (WHITE CARDS) --- */
.mv-card {
    background: #FFFFFF;
    border-radius: 30px; /* Bordes muy suaves */
    padding: 40px 30px;
    
    /* Borde sutil y sombra difusa */
    border: 1px solid rgba(0,0,0,0.03);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    height: 100%;
}

/* Efecto Hover: Levitación y Resplandor Naranja */
.mv-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(255, 152, 30, 0.15); /* Glow Naranja */
    border-color: rgba(255, 152, 30, 0.2);
}

/* Iconos (Circulos con Gradiente) */
.icon-mv {
    width: 70px; height: 70px;
    /* Gradiente vibrante */
    background: linear-gradient(135deg, #FF981E, #FFD166);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; /* Icono blanco */
    font-size: 2rem;
    margin-bottom: 25px;
    
    /* Sombra de color para dar profundidad */
    box-shadow: 0 8px 20px rgba(255, 152, 30, 0.3);
    transition: transform 0.3s ease;
}

/* El icono gira un poco al pasar el mouse sobre la tarjeta */
.mv-card:hover .icon-mv {
    transform: scale(1.1) rotate(10deg);
}

/* Títulos de las tarjetas (Misión/Visión) */
.mv-card h3 {
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 15px;
    color: #121212 !important; /* Aseguramos contraste */
}

/* --- DECORACIÓN DE FONDO (PE GIGANTE) --- */
/* Lo hacemos sutil y outline para que no moleste */
#nosotros .bg-decoration {
    color: transparent;
    -webkit-text-stroke: 2px rgba(18, 18, 18, 0.05); /* Borde gris muy clarito */
    z-index: 0;
}
/* ==========================================================================
   ESTILOS PARA EL HERO SOBRE FONDO POP ART
   ========================================================================== */

/* Asegúrate de que la sección contenedora tenga la imagen de fondo */
/* Asumo que tu sección tiene una clase o ID como este */
.hero-section {
    /* Reemplaza 'ruta/a/tu/imagen_fondo.png' con la ruta real de la ilustración */
    background-image: url('ruta/a/tu/imagen_fondo.png');
    background-size: cover;
    background-position: center;
    /* Un pequeño overlay oscuro puede ayudar a que el texto resalte más si es necesario */
    /* background-color: rgba(0, 0, 0, 0.2); background-blend-mode: overlay; */
    padding: 100px 0; /* Ajusta el padding según necesites */
}

/* --- Estilos para el Texto --- */

.hero-text-interactive {
    /* Alineación y estilos generales para el bloque de texto */
    color: #ffffff; /* Texto blanco para máximo contraste */
    text-shadow: 3px 3px 0px #000000, /* Sombra negra dura tipo cómic */
                 5px 5px 10px rgba(0,0,0,0.3); /* Sombra suave para profundidad */
}

/* Subtítulo "HACEMOS DESPEGAR TU" */
.subtitle {
    font-weight: 700;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #FFD700; /* Amarillo dorado de la paleta */
    margin-bottom: 0;
    /* Un contorno sutil para definirlo mejor */
    -webkit-text-stroke: 1px #000; 
}

/* Título Principal "NEGOCIO" */
.main-title {
    font-family: 'Impact', 'Arial Black', sans-serif; /* Fuente muy gruesa y llamativa */
    font-size: 5rem; /* Tamaño grande */
    line-height: 1;
    color: #ffffff;
    text-transform: uppercase;
    /* Efecto de texto pop art más pronunciado */
    text-shadow: 
        4px 4px 0px #FF4500, /* Sombra naranja fuerte */
        8px 8px 0px #000000; /* Sombra negra exterior */
    transform: rotate(-2deg); /* Un ligero giro para dinamismo */
    display: inline-block;
}

/* Texto descriptivo */
.lead {
    font-weight: 600;
    font-size: 1.25rem;
    color: #f0f0f0; /* Blanco ligeramente apagado */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8); /* Sombra para legibilidad */
    background-color: rgba(0, 0, 0, 0.3); /* Fondo semitransparente opcional para mejorar lectura */
    padding: 10px 15px;
    border-radius: 10px;
    display: inline-block; /* Para que el fondo se ajuste al texto */
}

/* --- Estilos para la Imagen del CEO --- */

/* El círculo detrás de la cabeza */
.circle-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px; /* Ajusta el tamaño según tu imagen */
    height: 400px;
    /* Degradado radial con colores de la ilustración */
    background: radial-gradient(circle, #FFD700 30%, #FF8C00 100%);
    border-radius: 50%;
    z-index: 1;
    /* Sombra y borde tipo cómic */
    border: 5px solid #000000;
    box-shadow: 10px 10px 0px rgba(0,0,0,0.5);
}

/* La imagen del CEO */
.detective-img {
    position: relative;
    z-index: 2;
    /* Efecto para integrar la foto: contorno y sombra */
    filter: drop-shadow(5px 5px 0px #000000) drop-shadow(10px 10px 15px rgba(0,0,0,0.5));
    /* Opcional: un ligero efecto de semitono o posterización para un look más artístico */
    /* filter: contrast(1.2) saturate(1.1) drop-shadow(...) */
    max-width: 100%; /* Asegura que no se salga del contenedor */
    height: auto;
}

/* --- Ajustes de Responsividad --- */
@media (max-width: 991px) {
    .hero-text-interactive {
        text-align: center !important; /* Centrar texto en móviles */
        margin-bottom: 40px;
    }
    .main-title {
        font-size: 4rem; /* Título más pequeño en móviles */
    }
    .circle-bg {
        width: 300px;
        height: 300px;
    }
}