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

    GENOTIPE
    ESTILOS GENERALES Y DE ESTRUCTURA DE LA WEB

========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Vollkorn:ital,wght@0,400..900;1,400..900&display=swap');

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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html,
body {
    width: 100%;
    min-height: 100%;
    /*UNIDAD DE MEDIDA REM*/
    font-size: 12px;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;

    scroll-behavior: smooth;
}

::selection {

    background: var(--amarillo);
    color: var(--magenta);

}

:root {

/* ----------------------------------------------------------------------
    TIPOGRAFÍAS
---------------------------------------------------------------------- */

--font-sans: "Work Sans", sans-serif;
--font-serif: "Vollkorn", serif;


        /* ----------------------------------------------------------------------
        TIPOGRAFÍAS TAMAÑOS
        ---------------------------------------------------------------------- */
        --size-9: 0.6rem;
        --size-10: 0.75rem;
        --size-11: 0.875rem;
        --size-12: 1rem;
        --size-14: 1.1667rem;
        --size-15: 1.25rem;
        --size-20: 1.6667rem;
        --size-25: 2.0833rem;
        --size-30: 2.5rem;
        --size-35: 2.9167rem;
        --size-40: 3.3333rem;
        --size-45: 3.75rem;
        --size-50: 4.1667rem;
        --size-55: 4.5833rem;
        --size-60: 5rem;
    
        --size-90: 7.5rem;
        --size-110: 9.1667rem;
        --size-150: 12.5rem;
        /* ----------------------------------------------------------------------
        TIPOGRAFIAS PESOS - ESTILOS
        ---------------------------------------------------------------------- */
            /* ----------------------------------------------------------------------
            WORK SANS · PESOS
            ---------------------------------------------------------------------- */

            --sans-thin: 100;
            --sans-extralight: 200;
            --sans-light: 300;
            --sans-regular: 400;
            --sans-medium: 500;
            --sans-semibold: 600;
            --sans-bold: 700;
            --sans-extrabold: 800;
            --sans-black: 900;

             /* ----------------------------------------------------------------------
            VOLLKORN · PESOS
            ---------------------------------------------------------------------- */

            --serif-regular: 400;
            --serif-medium: 500;
            --serif-semibold: 600;
            --serif-bold: 700;
            --serif-extrabold: 800;
            --serif-black: 900;

        /* ----------------------------------------------------------------------
        TIPOGRAFÍAS INTERLINEADOS
        ---------------------------------------------------------------------- */

        --interlineado-sin: 0.65;
        --interlineado-muypegado: 0.8;
        --interlineado-pegado: 0.9;
        --interlineado-normal: 1;
        --interlineado-separado: 1.15;
        --interlineado-muyseparado: 1.3;
        --interlineado-separadisimo: 1.6;

        /* ----------------------------------------------------------------------
        TIPOGRAFIAS INTERLETRADO
        ---------------------------------------------------------------------- */

        --interletrado-muypegado: -0.06em;
        --interletrado-pegado: -0.03em;
        --interletrado-normal: 0;
        --interletrado-separado: 0.04em;
        --interletrado-muyseparado: 0.08em;

/* ----------------------------------------------------------------------
    COLOR
---------------------------------------------------------------------- */
--magenta: #dc0078;
--amarillo: #ffed00;
--blanco: white;

/* ----------------------------------------------------------------------
    ESPACIOS MÁRGENES VERTICAL
---------------------------------------------------------------------- */
--espacio-xxs: 5px;
--espacio-xs: 10px;
--espacio-s: 15px;
--espacio-m: 25px;
--espacio-l: 50px;
--espacio-xl: 100px;
--espacio-xxl: 150px;

/* ----------------------------------------------------------------------
    TAMAÑO DEL CONTENIDO WEB Y MÁRGENES LATERALES
---------------------------------------------------------------------- */
--page-width: 90%;
--page-margin: 5%;

/* ----------------------------------------------------------------------
   TRANSICIONES
---------------------------------------------------------------------- */
--duracion-transicion: 0.75s;
--curva-transicion: ease-out;

/* ----------------------------------------------------------------------
    TAMAÑO ALTURA DEL MENÚ
---------------------------------------------------------------------- */
--menu-height: 100px;




}

/*Oculta elementos y no ocupan espacio pero siguen funcionando a nivel funcional*/
.visualmente-oculto {

    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

}