@charset "UTF-8";
 /* 1. BASE Y ESTILOS GENERALES */
 
       .cd-dropdown-wrapper {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    margin: 150px 0 15px 5%;
    z-index: 1000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
   

        /* 2. BOTÓN DISPARADOR */
        .cd-dropdown-trigger {
            display: block;
            background-color: #ed2412;
            color: #ffffff; 
			 font-size:1.5em;
            border-radius: 50px;
            height: 60px;
            width: 180px;
            line-height: 60px;
            padding: 0 30px;
            text-align: center;
            font-weight: 800;
            text-decoration: none;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            transition: transform 0.2s;
        }
        .cd-dropdown-trigger:active { transform: scale(0.95); }

        /* 3. MENÚ PRINCIPAL */
        .cd-dropdown {
            position: fixed;
            z-index: 10000;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background-color: #0063AC;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.4s, visibility 0s 0.4s;
        }

        .cd-dropdown.dropdown-is-active {
            visibility: visible;
            opacity: 1;
            transition: opacity 0.4s, visibility 0s 0s;
        }

        .cd-dropdown-header {
            padding: 50px 20px 20px;
            /*text-align: center;*/
            border-bottom: 1px solid rgba(255,255,255,0.2);
        }

        .cd-dropdown-header h1 { color: #fff; margin: 0; font-size: 1.8rem; }

        /* 4. LISTAS Y SUBMENÚS */
        .cd-dropdown-content, .cd-secondary-dropdown {
            list-style: none;
            padding: 0; margin: 0;
        }

        .cd-dropdown-content a {
            display: block;
            padding: 12px 25px;
            color: #ffffff;
            text-decoration: none;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            font-size: 1.2rem;
            transition: background 0.3s;
        }

        .cd-dropdown-content a:hover { background: rgba(255,255,255,0.05); }

        /* --- EFECTO DE DESVANECIMIENTO (FADE) PARA SUBMENÚ --- */
        .cd-secondary-dropdown {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background-color: #004a82; 
            z-index: 20;
            /* Estado oculto */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s ease, visibility 0.4s;
        }

        .cd-secondary-dropdown.is-active {
            /* Estado visible */
            opacity: 1;
            visibility: visible;
        }

        /* Indicador de submenú */
       .has-children > a::after {
    /* Usamos el círculo con flecha (Unicode \f138) */
    content: '\f138'; 
    font-family: 'FontAwesome';
    float: right;
    opacity: 0.9; /* Un poco más sólido para que se vea mejor */
    font-size: 1.5em; /* Ligeramente más grande */
    color: #fff; /* Un color llamativo (puedes cambiarlo por el de tu marca) */
    
    /* Animación suave */
    transition: all 0.3s ease;
}

/* Efecto al pasar el ratón (Hover) */
.has-children:hover > a::after {
    opacity: 1;
    color: #083f67; /* Cambia a verde al hacer hover */
    transform: translateX(5px); /* Se desplaza un poco a la derecha */
}

        /* Botón Volver */
        .go-back a {
            background-color: #00355d !important;
            font-weight: bold;
            color: #ffda44 !important; /* Color destacado para el botón volver */
        }

        /* Botón Cerrar */
        .cd-close {
            position: absolute;
            top: 20px; right: 20px;
            width: 44px; height: 44px;
            background: #333;
            border-radius: 50%;
            border: 2px solid #fff;
            cursor: pointer;
            z-index: 100;
        }
        .cd-close::before, .cd-close::after {
            content: ''; position: absolute; top: 20px; left: 10px;
            width: 24px; height: 3px; background: white;
        }
        .cd-close::before { transform: rotate(45deg); }
        .cd-close::after { transform: rotate(-45deg); }

        /* Desktop Adapt */
        @media only screen and (min-width: 1024px) {
            .cd-dropdown {
                position: absolute;
                top: 70px;
                width: 400px;
                height: 550px;
                border-radius: 20px;
                overflow: hidden;
                box-shadow: 0 20px 40px rgba(0,0,0,0.3);
            }
        }
		
		 
		 
		@media screen and (max-width: 50em) {
    .cd-dropdown-wrapper {
        display: block;         /* Cambiado de inline-block a block para ocupar todo el ancho */
        position: relative;
        top: 0;
        left: 0;
        margin: 15px 5%;        /* Margen de 5% a los lados para que no toque los bordes del cristal */
        width: 90%;             /* 90% de ancho + 5% de margen a cada lado = 100% total */
        z-index: 1000;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .cd-dropdown-trigger {
        display: block;
        width: 100%;            /* Ahora sí se expandirá al ancho de su contenedor */
        box-sizing: border-box; /* Fundamental para que el padding no "infle" el botón */
        background-color: #ed2412;
        color: #ffffff;
        border-radius: 50px;
        height: 60px;
        line-height: 60px;
        padding: 0 30px;
        text-align: center;
        font-weight: 800;
        text-decoration: none;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        transition: transform 0.2s;
    }
}