/*==============================================================
    RADIO TAXI ALMINUTO
    Programa de Compliance
    Colección Conociendo ALMINUTO

    Archivo:
    compliance.css

    Versión:
    1.0

==============================================================*/



/*==============================================================
    VARIABLES
==============================================================*/



:root {

    /* Colores corporativos */
    
    --color-corporativo: #00744E;
    
    --color-secundario: #005D3F;

    --color-texto: #2B2B2B;

    --color-texto-claro: #666666;

    --color-fondo: #F7F7F7;

    --color-blanco: #FFFFFF;

    --color-borde: #E4E4E4;

    --color-sombra: rgba(0,0,0,.08);



    /* Tipografía */

    --fuente: "Noto Sans", sans-serif;



    /* Medidas */

    --ancho-maximo: 1400px;

    --ancho-documento: 1100px;



    /* Espaciados */

    --espacio-xs: .5rem;

    --espacio-s: 1rem;

    --espacio-m: 2rem;

    --espacio-l: 4rem;

    --espacio-xl: 6rem;



    /* Bordes */

    --radio: 12px;



    /* Sombras */

    --sombra-1:

        0 4px 16px rgba(0,0,0,.08);

}







/*==============================================================
    RESET
==============================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:var(--fuente);

    color:var(--color-texto);

    background:var(--color-fondo);

    line-height:1.6;

    font-size:16px;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}

img{

    display:block;

    max-width:100%;

    height:auto;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

button{

    font:inherit;

    cursor:pointer;

}




/*==============================================================
    CONTENEDORES
==============================================================*/

.contenedor{

    width:min(95%, var(--ancho-maximo));

    margin:auto;

}

.contenedorDocumento{

    width:min(100%, var(--ancho-documento));

    margin:auto;

}




/*==============================================================
    SELECCIÓN DE TEXTO
==============================================================*/

::selection{

    background:var(--color-corporativo);

    color:white;

}



/*==============================================================
    SCROLLBAR
==============================================================*/

::-webkit-scrollbar{

    width:20px;

}

::-webkit-scrollbar-track{

    background:#ECECEC;

}

::-webkit-scrollbar-thumb{

    background:var(--color-corporativo);

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--color-secundario);

}













/*==============================================================
    HEADER
==============================================================*/

.header{

    position:sticky;

    top:0;

    left:0;

    z-index:1000;

    background:var(--color-blanco);

    border-bottom:4px solid var(--color-corporativo);

    box-shadow:0 3px 15px rgba(0,0,0,.05);

}

.header .contenedor{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:2rem;

    min-height:90px;

}










/*==============================================================
    LOGO
==============================================================*/

.logo{

    flex-shrink:0;

}

.logo img{

    height:58px;

    width:auto;

    transition:.25s;

}

.logo img:hover{

    transform:scale(1.02);

}









/*==============================================================
    TÍTULO
==============================================================*/

.titulo{

    flex:1;

}

.titulo h1{

    font-size:1.8rem;

    font-weight:700;

    color:var(--color-corporativo);

    margin-bottom:.2rem;

}

.titulo span{

    display:block;

    color:var(--color-texto-claro);

    font-size:.95rem;

    font-weight:400;

}




.documento h2{

    color: var(--color-corporativo);

    font-size: 2rem;

    font-weight:700;

    margin:2.5rem 0 1rem;

    line-height:1.25;

}

.documento p{

    margin-bottom:1rem;

    text-align:justify;

}












/*==============================================================
    NAVEGACIÓN
==============================================================*/

.header nav{

    flex-shrink:0;

}

.btnInicio{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    padding:.7rem 1.2rem;

    border-radius:50px;

    color:var(--color-corporativo);

    font-weight:600;

    transition:.25s;

}







.btnInicio:hover{

    background:#EDF7F3;

    color:var(--color-secundario);

}






.branding{

    display:flex;

    align-items:center;

    gap:1.2rem;

}







/*==============================================================
    HERO
==============================================================*/

.hero{

    padding:5rem 0 4rem;

    background:linear-gradient(
        180deg,
        #F8FBFA 0%,
        #F2F6F4 100%
    );

    border-bottom:1px solid var(--color-borde);

}



.heroContenido{

    max-width:900px;

}




.coleccion{

    display:inline-block;

    padding:.45rem 1rem;

    margin-bottom:1.5rem;

    border-radius:50px;

    background:#EAF5F1;

    color:var(--color-corporativo);

    font-size:.9rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}






.hero h2{

    font-size:3rem;

    font-weight:700;

    color:var(--color-corporativo);

    line-height:1.15;

    margin-bottom:1.5rem;

}







.descripcion{

    max-width:850px;

    font-size:1.15rem;

    color:var(--color-texto);

    line-height:1.8;

    margin-bottom:3rem;

}





/*==============================================================
    INDICADORES
==============================================================*/

.datos{

    display:flex;

    flex-wrap:wrap;

    gap:1.5rem;

}





.dato{

    flex:1;

    min-width:170px;

    background:white;

    border-radius:16px;

    padding:1.6rem;

    text-align:center;

    border:1px solid var(--color-borde);

    box-shadow:var(--sombra-1);

    transition:.25s;

}






.dato:hover{

    transform:translateY(-4px);

}






.numero{

    display:block;

    font-size:2.1rem;

    font-weight:700;

    color:var(--color-corporativo);

    margin-bottom:.5rem;

}









.texto{

    display:block;

    font-size:.95rem;

    color:var(--color-texto-claro);

    line-height:1.4;

}






/*==============================================================
    BARRA DE LECTURA
==============================================================*/

.barraLectura{

    position:sticky;

    top:94px;

    z-index:999;

    width:100%;

    height:5px;

    background:#E7E7E7;

}







#progresoLectura{

    width:0;

    height:100%;

    background:var(--color-corporativo);

    transition:width .15s linear;

}







/*==============================================================
    DOCUMENTO
==============================================================*/

.documento{

    padding:5rem 0;

}






.contenedorDocumento{

    display:flex;

    flex-direction:column;

    gap:4rem;

}






/*==============================================================
    LÁMINAS
==============================================================*/

.lamina{

    scroll-margin-top:130px;

}








/*==============================================================
    HOJA
==============================================================*/

.hoja{

    background:var(--color-blanco);

    border-radius:18px;

    overflow:hidden;
    
    padding:40px;
    
    border:1px solid var(--color-borde);

    box-shadow:

        0 10px 35px rgba(0,0,0,.08);

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}






.hoja:hover{

    transform:translateY(-6px);

    box-shadow:

        0 20px 45px rgba(0,0,0,.12);

}









.hoja figure{

    display:block;

}






.hoja img{

    width:100%;

    height:auto;

    display:block;

}


/*==============================================================
    HOJA ACTIVA
==============================================================*/

.hoja.activa{

    transform:translateY(-8px);

    box-shadow:
        0 24px 48px rgba(0,0,0,.16);

    border-color:var(--color-corporativo);

}



/*==============================================================
    ANIMACIÓN
==============================================================*/

.lamina{

    animation:aparecer .7s ease;

}







@keyframes aparecer{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}





.hero + .barraLectura + .indice + .documento{

    margin-top:2rem;

}







/*==============================================================
    ÍNDICE
==============================================================*/

.indice{

    position:fixed;

    top:120px;

    right:35px;

    width:280px;

    max-height:calc(100vh - 150px);

    overflow-y:auto;

    overflow-x:hidden;

    background:var(--color-blanco);

    border:1px solid var(--color-borde);

    border-radius:16px;

    box-shadow:var(--sombra-1);

    padding:1.5rem;

    z-index:900;

}





.indice h3{

    margin-bottom:1.25rem;

    color:var(--color-corporativo);

    font-size:1.1rem;

    font-weight:700;

}





#menuIndice{

    display:flex;

    flex-direction:column;

    gap:.4rem;

}








#menuIndice a{

    display:block;

    padding:.55rem .8rem;

    border-radius:8px;

    color:var(--color-texto);

    font-size:.92rem;

    transition:all .25s ease;

}





#menuIndice a:hover{

    background:#EDF7F3;

    color:var(--color-corporativo);

    padding-left:1rem;

}




#menuIndice a.activo{

    background:#EDF7F3;

    color:var(--color-corporativo);

    font-weight:700;

    border-left:4px solid var(--color-corporativo);

    padding-left:1rem;

}






/*==============================================================
    BOTÓN VOLVER ARRIBA
==============================================================*/

#btnArriba{

    position:fixed;

    right:30px;

    bottom:30px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:var(--color-corporativo);

    color:white;

    font-size:1.4rem;

    box-shadow:0 8px 18px rgba(0,0,0,.18);

    cursor:pointer;

    transition:.25s;

    z-index:999;

}








#btnArriba:hover{

    transform:translateY(-4px);

    background:var(--color-secundario);

}

#btnArriba{

    opacity:0;

    visibility:hidden;

}

#btnArriba.visible{

    opacity:1;

    visibility:visible;

}




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

footer{

    margin-top:5rem;

    padding:3rem 0;

    background:#404040;

    color:white;

    text-align:center;

}







footer img{

    height:60px;

    margin:0 auto 1.5rem;

}





footer p{

    margin-bottom:.6rem;

    opacity:.9;

}







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


/*--------------------------------------------------------------
    Notebook
--------------------------------------------------------------*/

@media (max-width:1400px){

    .indice{

        display:none;

    }

}







/*--------------------------------------------------------------
    Tablet
--------------------------------------------------------------*/

@media (max-width:992px){

    .header .contenedor{

        flex-direction:column;

        justify-content:center;

        gap:1rem;

        padding:1.5rem 0;

    }

    .branding{

        width:100%;

        justify-content:center;

    }

    .header nav{

        width:100%;

        text-align:center;

    }

    .hero{

        padding:4rem 0;

    }

    .hero h2{

        font-size:2.3rem;

    }

    .descripcion{

        font-size:1.05rem;

    }

    .datos{

        justify-content:center;

    }

    .dato{

        min-width:220px;

    }

}






/*--------------------------------------------------------------
    Celulares
--------------------------------------------------------------*/

@media (max-width:768px){

    body{

        font-size:15px;

    }

    .hero{

        padding:3rem 0;

    }

    .hero h2{

        font-size:2rem;

    }

    .descripcion{

        font-size:1rem;

    }

    .titulo{

        text-align:center;

    }

    .logo img{

        height:48px;

    }

    .dato{

        width:100%;

    }

    .contenedorDocumento{

        gap:2rem;

    }

    .hoja{

        border-radius:12px;

    }

    #btnArriba{

        width:48px;

        height:48px;

        font-size:1.2rem;

        right:18px;

        bottom:18px;

    }

}










/*--------------------------------------------------------------
    Celulares pequeños
--------------------------------------------------------------*/

@media (max-width:480px){

    .hero h2{

        font-size:1.7rem;

    }

    .coleccion{

        font-size:.8rem;

    }

    .descripcion{

        text-align:left;

    }

    .dato{

        padding:1.2rem;

    }

}








/*==============================================================
    IMPRESIÓN
==============================================================*/

@media print{

    .header,

    .indice,

    .barraLectura,

    #btnArriba,

    .solicitud,

    footer{

        display:none;

    }

    body{

        background:white;

    }

    .documento{

        padding:0;

    }

    .hoja{

        box-shadow:none;

        border:none;

        border-radius:0;

        margin:0;

    }

}






/*==========================================================
BOTONES
==========================================================*/

.botonSolicitud
{
    display: inline-block;

    padding: 14px 28px;

    background: var(--color-corporativo);

    color: #ffffff;

    border: 2px solid var(--color-corporativo);

    border-radius: 10px;

    font-weight: 600;

    text-decoration: none;

    transition: .25s;

    cursor: pointer;
}


.botonSolicitud:hover
{
    background: var(--color-secundario);

    border-color: var(--color-secundario);

    color: #ffffff;
}


.botonSecundario
{
    background: #ffffff;

    color: var(--color-corporativo);

    border: 2px solid var(--color-corporativo);
}


.botonSecundario:hover
{
    background: var(--color-corporativo);

    color: #ffffff;

    border-color: var(--color-corporativo);
}













.btnPrincipal{

    display:inline-block;

    background:var(--color-corporativo);

    color:#fff;

    text-decoration:none;

    padding:14px 30px;

    border-radius:10px;

    font-weight:600;

    font-size:1rem;

    transition:.25s ease;

    box-shadow:0 4px 12px rgba(0,0,0,.15);

}

.btnPrincipal:hover{

    background: var(--color-secundario);

    border-color: var(--color-secundario);

    color: #ffffff;

    transform:translateY(-2px);

    box-shadow:0 8px 18px rgba(0,0,0,.20);

}



















/*==========================================================
CONTENEDOR DE BOTONES
==========================================================*/

.solicitudFinal
{
    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    margin-top:40px;

    flex-wrap:wrap;
}