/* =========================
   FONT FACE
========================= */

@font-face {
    font-family: 'Herkules';
    /* El formato debe coincidir con la extensión del archivo */
    src: url('../fonts/Herkules.otf') format('opentype'), 
         url('../fonts/Herkules.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Excelente elección para rendimiento */
}
/* ===================================
   TYPOGRAPHY SYSTEM
=================================== */

:root {

    --font-brand: 'Herkules', serif;
    --font-primary: 'DM Sans', sans-serif;

    /* Titulos - H1 */
    --type-h1: normal 700 6rem / normal var(--font-brand);

    /* Titulos - H2 */
    --type-h2: normal 600 4rem / normal var(--font-brand);

    /* Titulos - H3 */
    --type-h3: normal 500 2.5rem / normal var(--font-brand);

    /* Titulos - H4 */
    --type-h4: normal 400 1.875rem / normal var(--font-brand);

    /* subtitulos */
    --type-subtitle: normal 400 2rem / normal var(--font-primary);

    /* subtitulos - bold */
    --type-subtitle-bold: normal 700 2rem / normal var(--font-primary);

    /* menu */
    --type-menu: normal 400 1rem / normal var(--font-primary);

    /* menu - bold */
    --type-menu-bold: normal 700 1rem / normal var(--font-primary);

    /* body */
    --type-body: normal 400 1.5rem / normal var(--font-primary);

    /* body - bold */
    --type-body-bold: normal 700 1.5rem / normal var(--font-primary);

    /* body - small 1 */
    --type-body-small-1: normal 400 1.25rem / normal var(--font-primary);

    /* body - small 1 - bold */
    --type-body-small-1-bold: normal 700 1.25rem / normal var(--font-primary);

    /* body - small 2 */
    --type-body-small-2: normal 400 1.0625rem / normal var(--font-primary);

    /* body - small 2 - bold */
    --type-body-small-2-bold: normal 700 1.0625rem / normal var(--font-primary);

    /* buttom */
    --type-buttom: normal 400 1.25rem / normal var(--font-primary);

    /* buttom - bold */
    --type-buttom-bold: normal 700 1.25rem / normal var(--font-primary);

}

/* ===================================
   COLOR SYSTEM
=================================== */

:root {

    /* Brand Base */
    --color-amarillo: #F5ED09;
    --color-rojo-claro: #F63B0C;
    --color-rojo-oscuro: #a31630;
    --color-Azul-claro: #B3D8E1;
    --color-Azul-oscuro: #2D6DE2;
    --color-gris-oscuro: #333333;

     /* Texto */
    --text-primary: #333333;
    --text-secondary: #5A5A5A;
    --text-light: white;

    /* PALETA COMPLETA (degradados incluidos) */
    /* Azul petróleo */
    --color-azul-marino-verdoso: #006E7F;
    --color-azul-oceano: #3C8D9E;
    --color-azul-cielo-apagado: #76B8C4;
    --color-azul-pastel: #A5D2D9;
    /* Amarillo */
    --color-amarillo-calido: #FBCB2E;
    --color-amarillo-suave: #FDD85C;
    --color-amarillo-pastel: #FEEA84;
    --color-amarillo-crema: #FFF3B3;
    /* Naranja */
    --color-naranja-intenso: #EE5007;
    --color-naranja-vivo: #F97B22;
    --color-naranja-melon: #FFA45B;
    --color-naranja-durazno: #FFC18C;
    /* Rojo ladrillo */
    --color-rojo-vino: #B22727;
    --color-rojo-terracota: #C94B4B;
    --color-rojo-rosado: #D97070;
    --color-rosa-calido: #EAA0A0;

    /* Fondo y títulos: tonos medios y oscuros */
    --Fondo-o-titulo-1: #006E7F;
    --fondo-o-titulo-2: #B22727;
    --bg-title-all: white;

    /* Detalles, iconos, resaltados: tonos claros */
    --Detalles---iconos---resaltados-1: #FDD85C;
    --Detalles---iconos---resaltados-2: #FFA45B;

    /* Fondo de texto o tarjetas: tonos muy claros */
    --Fondo-de-texto-o-tarjetas-1: #FFF3B3;
    --Fondo-de-texto-o-tarjetas-2: #A5D2D9;
    --Fondo-de-texto-o-tarjetas-3: #FFC18C;
}