/*===================================
            TIPOGRAFIAS
====================================*/


@font-face {
    font-family: 'Ethnocentric';
    src: url('recursos/tipografia/ethnocentric/Ethnocentric-Regular.otf') format('truetype');
}


@font-face {
    font-family: 'Rockstart';
    src: url('recursos/tipografia/rockstar_4/Rockstar-ExtraBold.otf')format('truetype');
}


@font-face {
    font-family: 'Nulshock';
    src: url('recursos/tipografia/nulshock/NulshockBd.otf') format('truetype');
}

@font-face {
    font-family: 'Swiss';
    src: url('recursos/tipografia/swiss-721/Swiss721BT-Roman.otf') format('truetype');
}

@font-face {
    font-family: 'Swiss-Light';
    src: url('recursos/tipografia/swiss-721/Swiss721BT-Light.otf') format('truetype');
}


@font-face {
    font-family: 'Swiss-Negirta';
    src: url('recursos/tipografia/swiss-721/Swiss721BT-Heavy.otf') format('truetype');
}

/*===================================
            ESTILO DE LETRAS
====================================*/


.tachado {
    text-decoration: line-through;
}

.subrayado {
    text-decoration: underline;
    text-decoration-color: var(--blanco-100);
    text-decoration-thickness: 8px;
}


.light {
    font-weight: 300;
}

.medium {
    font-weight: 500;
}

.super-negrita {
    font-weight: 900;
}

.media-negrita {
    font-weight: 700;
}

.negrita {
    font-weight: 600;
}

.negrita-swiss {
    font-family: 'Swiss-Negirta';
}

.light-swiss {
    font-family: 'Swiss-Light';
}

.nulshock {
    font-family: 'Nulshock';
}

.ethnocentric {
    font-family: 'Ethnocentric';
}

.rockstart {
    font-family: 'Rockstart';
}









/*===================================
            COLORES
====================================*/

.color-primario {
    color: var(--azul);
}

.color-primario-2 {
    color: var(--azul-claro);
}

.color-secundario {
    color: var(--verde);
}

.color-blanco {
    color: var(--blanco-50);
}

.color-gris {
    color: var(--negro-400);
}


.color-error {
    color: var(--error);
}

:root {
    --azul: #0f47a5;
    --azul-claro: #1484EC;
    --azul-ultramar: #1C3E7B;
    --amarillo: #F9BD1B;
    --verde: #3A8D25;
    --verde-claro: #B3C861;

    --fondo: #FDFDFD;
    /* === Negros === */
    --negro-50: #dddddd;
    --negro-100: #bbbbbb;
    --negro-200: #9a9a9a;
    --negro-300: #787878;
    --negro-400: #565656;
    --negro-500: #343434;
    --negro-600: #2a2a2a;
    --negro-700: #1f1f1f;
    --negro-800: #151515;
    --negro-900: #0c0c0c;

    /* === Blancos === */
    --blanco-50: #ffffff;
    --blanco-100: #f4f4f4;
    --blanco-200: #e9e9e9;
    --blanco-300: #dedede;
    --blanco-400: #d3d3d3;
    --blanco-500: #c8c8c8;
    --blanco-600: #afafaf;
    --blanco-700: #969696;
    --blanco-800: #7d7d7d;
    --blanco-900: #646464;

    /* === Éxito === */
    --exito: #a2d250;

    /* === Advertencia === */
    --advertencia: #f6f369;

    /* === Error === */
    --error: #911D1D;

}


/*===================================
            ETIQUETAS
====================================*/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Swiss';
    font-weight: 500;
    color: var(--negro-700);
}

html {
    height: 100%;
}

body {
    height: 100%;
    background-color: var(--fondo-50);
}

section {
    margin: clamp(2rem, 10vw, 4rem) 0;
    padding: 5rem clamp(5px, 10vw, 50px);
    border-radius: 1.25rem;
}

button {
    all: unset;
}

a {
    text-decoration: none;
}

b {
    font-weight: bold;
}

/* ===================================
           MEDIA ETIQUETAS
====================================*/


/* Moviles pequeños */
@media (max-width: 767px) {
    section {
        padding: 5rem clamp(2px, 2vw, 16px);
    }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1024px) {
    section {
        padding: 5rem clamp(5px, 5vw, 32px);
    }
}

/* Desktops */
@media (min-width: 1281px) {}



/*===================================
            CLASES
====================================*/

/*===================================
            ELEMENTOS
====================================*/

.overflow-capa {
    width: 100%;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #1c1c1c8b;
    z-index: 90;
}

.cont {
    padding-left: clamp(.2rem, 2vw, 5rem);
    padding-right: clamp(.2rem, 2vw, 5rem);
}

.espacio-vertical {
    margin: clamp(1rem, 3vw, 2.6rem) 0;
}

.btn {
    width: auto;
    max-width: 13rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-wrap: nowrap;

    padding: 8px 15px;
    border-radius: 20px;
    gap: clamp(0.5rem, 1vw, 0.75rem);

    transition: background-color 0.3s ease-out, transform 0.3s ease-out;
    cursor: pointer;
    background-color: var(--blanco-50);
    color: var(--azul);
}

.btn.primario {
    background-color: var(--azul);
    color: var(--blanco-50);
}

.btn.secundario {
    background-color: var(--verde);
    color: var(--blanco-50);
}



.texto-centrado {
    text-align: center;
}


.shadow {
    box-shadow: 0 4px 15px rgba(50, 50, 50, 0.329);
}

.borde-redondeado {
    border-radius: 20px;
}




/*===================================
        CLASES DE UTILIDAD
====================================*/


.oculto {
    display: none ;
    opacity: 0;
    pointer-events: none;
}

.mostrar-flex {
    display: flex ;
    opacity: 1;
    pointer-events: all;
}

.mostrar-block {
    display: block;
    opacity: 1;
    pointer-events: all;
}


.texto-truncado {
    max-width: 100%;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doble-linea {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: wrap;
}


/*===================================
        LETRAS Y ICONOS TAMAÑOS
====================================*/
.grande,
.icon-grande {
    font-size: clamp(3rem, 8vw, 4.5rem);
    /* 48px - 64px */
}

h1,
.icon-h1 {
    font-size: clamp(1.6rem, 7vw, 3rem);
    /* 40px - 48px */
}

h2,
.icon-h2 {
    font-size: clamp(1.4rem, 5vw, 2.5rem);
    /* 32px - 40px */
}

h3,
.icon-h3 {
    font-size: clamp(1.2rem, 3vw, 2rem);
    /* 28px - 32px */
}

h4,
.icon-h4 {
    font-size: clamp(1.2rem, 3.5vw, 1.75rem);
    /* 24px - 28px */
}

h5,
.icon-h5 {
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    /* 20px - 24px */
}

h6,
.icon-h6 {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    /* 18px - 20px */
}

p,
li,
span,
.icon-p {
    font-size: clamp(0.8rem, 2vw, 1.125rem);
    /* 16px - 18px */
}

.pequenio,
.icon-pequenio {
    font-size: clamp(0.75rem, 1.5vw, 0.875rem);
    /* 12px - 14px */
}

.muy-pequenio,
.icon-muy-pequenio {
    font-size: clamp(0.625rem, 1vw, 0.75rem);
    /* 10px - 12px */
}

span,
.icon-span {
    font-size: clamp(0.8rem, 2vw, 1.125rem);
    /* 16px - 18px */
}