/* =========================================================
   FUENTES
   ========================================================= */

/* Inter regular para textos generales de interfaz. */
@font-face {
    font-family: 'Inter';
    src: url('../recursos/fuentes/Inter/Inter_18pt-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Inter medium para textos con énfasis moderado. */
@font-face {
    font-family: 'Inter';
    src: url('../recursos/fuentes/Inter/Inter_18pt-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Inter semibold para controles y textos destacados. */
@font-face {
    font-family: 'Inter';
    src: url('../recursos/fuentes/Inter/Inter_18pt-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Montserrat medium para títulos secundarios. */
@font-face {
    font-family: 'Montserrat';
    src: url('../recursos/fuentes/Montserrat/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Montserrat semibold para títulos y navegación. */
@font-face {
    font-family: 'Montserrat';
    src: url('../recursos/fuentes/Montserrat/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Montserrat bold para títulos principales. */
@font-face {
    font-family: 'Montserrat';
    src: url('../recursos/fuentes/Montserrat/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


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

:root {
    /* Tipografías principales de la aplicación. */
    --fuente-interfaz:
            'Inter',
            Arial,
            sans-serif;

    --fuente-titulos:
            'Montserrat',
            Arial,
            sans-serif;


    /* =====================================================
       IDENTIDAD CONSUMA
       ===================================================== */

    --color-marca-50: #fffbea;
    --color-marca-100: #fff3bd;
    --color-marca-200: #ffe77a;
    --color-marca-300: #ffd83d;
    --color-marca-400: #f8c817;
    --color-marca-500: #eeb900;
    --color-marca-600: #c79600;
    --color-marca-700: #987100;
    --color-marca-800: #684d00;
    --color-marca-900: #3d2d00;

    --color-marca:
            var(--color-marca-400);

    --color-marca-fuerte:
            var(--color-marca-500);

    --color-marca-suave:
            var(--color-marca-50);

    --color-texto-sobre-marca:
            #171717;


    /* =====================================================
       NEUTROS
       ===================================================== */

    --color-blanco: #ffffff;
    --color-negro: #111111;

    --color-gris-50: #fafafa;
    --color-gris-100: #f4f4f5;
    --color-gris-200: #e4e4e7;
    --color-gris-300: #d4d4d8;
    --color-gris-400: #a1a1aa;
    --color-gris-500: #71717a;
    --color-gris-600: #52525b;
    --color-gris-700: #3f3f46;
    --color-gris-800: #27272a;
    --color-gris-900: #18181b;


    /* =====================================================
       SUPERFICIES
       ===================================================== */

    --color-fondo:
            #f7f7f5;

    --color-superficie:
            var(--color-blanco);

    --color-superficie-secundaria:
            #f2f2ef;

    --color-superficie-oscura:
            var(--color-negro);

    --color-superficie-marca:
            var(--color-marca-suave);


    /* =====================================================
       TEXTOS
       ===================================================== */

    --color-texto:
            #171717;

    --color-texto-secundario:
            #656565;

    --color-texto-suave:
            #8a8a8a;

    --color-texto-invertido:
            var(--color-blanco);


    /* =====================================================
       BORDES
       ===================================================== */

    --color-borde:
            #deded9;

    --color-borde-fuerte:
            #b8b8b1;

    --color-borde-marca:
            var(--color-marca-400);


    /* =====================================================
       INTERACCIÓN
       ===================================================== */

    --color-accion:
            var(--color-marca-400);

    --color-accion-hover:
            var(--color-marca-500);

    --color-accion-activa:
            var(--color-marca-600);

    --color-foco:
            rgba(248, 200, 23, 0.35);


    /* =====================================================
       ESTADOS
       ===================================================== */

    --color-exito: #218739;
    --color-exito-suave: #eaf6ed;

    --color-advertencia: #b97800;
    --color-advertencia-suave: #fff5dc;

    --color-error: #c93434;
    --color-error-suave: #fdecec;

    --color-informacion: #2868b2;
    --color-informacion-suave: #eaf2fb;


    /* =====================================================
       SOMBRAS
       ===================================================== */

    --sombra-suave:
            0 4px 14px rgba(17, 17, 17, 0.06);

    --sombra-media:
            0 10px 30px rgba(17, 17, 17, 0.10);

    --sombra-fuerte:
            0 18px 45px rgba(17, 17, 17, 0.16);


    /* =====================================================
       RADIOS
       ===================================================== */

    --radio-pequeno: 6px;
    --radio-medio: 10px;
    --radio-grande: 16px;
    --radio-extra-grande: 24px;
    --radio-circular: 999px;


    /* =====================================================
       ESPACIADOS
       ===================================================== */

    --espacio-1: 0.25rem;
    --espacio-2: 0.5rem;
    --espacio-3: 0.75rem;
    --espacio-4: 1rem;
    --espacio-5: 1.25rem;
    --espacio-6: 1.5rem;
    --espacio-7: 2rem;
    --espacio-8: 2.5rem;
    --espacio-9: 3rem;
    --espacio-10: 4rem;


    /* =====================================================
       ANCHOS DE REFERENCIA
       ===================================================== */

    --ancho-contenido:
            1440px;

    --ancho-contenido-reducido:
            1120px;
}


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

/* Incluye padding y bordes dentro de la geometría real del elemento. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Configura la raíz sin imponer un ancho mínimo artificial al viewport. */
html {
    width: 100%;
    min-width: 0;
    min-height: 100%;
    margin: 0;
    padding: 0;
    background: var(--color-fondo);
    color: var(--color-texto);
    font-family: var(--fuente-interfaz);
    scroll-behavior: smooth;
}

/* Controla la página completa sin limitar la geometría propia de sus elementos. */
body {
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-fondo);
    color: var(--color-texto);
    font-family: var(--fuente-interfaz);
    font-size: 16px;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/*
    Entrega todo el ancho disponible a las páginas.
    Los elementos son responsables de definir su propio ancho,
    max-width, márgenes y responsive.
*/
main {
    width: 100%;
    min-width: 0;
    flex: 1 0 auto;
    margin: 0;
    padding: 0;
}


/* =========================================================
   TIPOGRAFÍA
   ========================================================= */

/* Los títulos utilizan la tipografía principal de Consuma. */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: var(--color-texto);
    font-family: var(--fuente-titulos);
    font-weight: 700;
    line-height: 1.2;
}

/* Los párrafos no agregan márgenes automáticos. */
p {
    margin: 0;
}

/* Los enlaces heredan el color del contexto donde se utilizan. */
a {
    color: inherit;
}


/* =========================================================
   CONTROLES
   ========================================================= */

/* Mantiene la tipografía global en todos los controles. */
button,
input,
textarea,
select {
    margin: 0;
    font: inherit;
}

/* Los botones conservan comportamiento interactivo estándar. */
button {
    cursor: pointer;
}

/* Identifica controles que no pueden utilizarse. */
button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Mantiene un foco visible coherente en toda la aplicación. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--color-foco);
    outline-offset: 2px;
}


/* =========================================================
   RECURSOS VISUALES
   ========================================================= */

/* Evita que imágenes y SVG excedan naturalmente a su contenedor. */
img,
svg {
    display: block;
    max-width: 100%;
}


/* =========================================================
   ESTRUCTURA FLEXIBLE
   ========================================================= */

/*
    Permite que las estructuras principales y los contenedores
    utilizados por Flex/Grid puedan reducirse sin forzar
    scroll horizontal en el documento.
*/
body,
main,
header,
footer,
section,
article,
aside,
nav,
div {
    min-width: 0;
}