:root {
    
    /*tipografia de letra variables*/
    --step--2: clamp(0.7813rem, 0.7757rem + 0.0278vw, 0.8rem);
    --step--1: clamp(0.9375rem, 0.919rem + 0.0926vw, 1rem);
    --step-0: clamp(1.125rem, 1.088rem + 0.1852vw, 1.25rem);
    --step-1: clamp(1.35rem, 1.287rem + 0.3148vw, 1.5625rem);
    --step-2: clamp(1.62rem, 1.5213rem + 0.4935vw, 1.9531rem);
    --step-3: clamp(1.944rem, 1.7966rem + 0.7369vw, 2.4414rem);
    --step-4: clamp(2.3328rem, 2.1198rem + 1.0651vw, 3.0518rem);
    --step-5: clamp(2.7994rem, 2.4985rem + 1.5042vw, 3.8147rem);

    /*varibles color blocks*/
    --color--principal: #033682;
    --color--secondary: #f2f2f2;
    --color--sky-blue: #00a8e8;
    --color--menuOpen: #1f1f1f;
    --color-primary: #0a2540; 
    --color-surface: #c8c8c894;

    /*variables color letter*/
    --color--letter-white: #fff;
    --color--letter-black: #000;
    --color--letter-yellow: #f1b424;
    
    /*VARIABLES DE COLOR*/
    --letter--type: 'Montserrat', sans-serif;
    --letter--type-min :'Rubik', sans-serif;

    --color-primario: #0d1b2a;
    --color-secundario: #1b263b;
    --color-acento: #e63946;
    --color-blanco: #ffffff;
    --color-gris: #e0e0e0;

    --radius: 16px;
    --sombra: 0 10px 30px rgba(0,0,0,0.15);

    --espacio: clamp(1rem, 2vw, 2rem);

}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--letter--type-min);
}

.skip-link{ position: absolute; left: -9999px; text-decoration: none; font-size: var(--step--1); font-family: var(--letter--type-min); }

.skip-link:focus { left: 20px; top: 20px; background: black; color: white; padding: 10px; z-index: 1000; }

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--color--letter-yellow);
    outline-offset: 4px;
}


.button-info
{
    position: relative;
    margin-top: clamp(1rem,2vh,3rem);

    display: inline-block;
    padding: 0.7rem 1.8rem;

    font-family: var(--letter--type);
    font-weight: 600;
    font-size: var(--step--1);
    letter-spacing: 3px;
    text-transform: uppercase;
    

    color: var(--color--letter-white);
    background: var(--color--sky-blue);

    border: none;
    text-decoration: none;
    
    
    border-radius: 50px;

    box-shadow: 0 10px 20px rgba(3, 54, 130, 0.3);
}