/*=========================================================
VARIABLES.CSS
RILION GRACIE SAN RAFAEL
=========================================================*/

:root{

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

    --primary:#F58220;
    --primary-light:#FF9D3A;
    --primary-dark:#C96512;

    --black:#050505;
    --black-soft:#0B0B0B;
    --black-card:#111111;

    --white:#FFFFFF;

    --gray-100:#F5F5F5;
    --gray-200:#DDDDDD;
    --gray-300:#B5B5B5;
    --gray-400:#888888;
    --gray-500:#666666;

    /*=========================
    TIPOGRAFÍAS
    =========================*/

    --font-title:"Bebas Neue", sans-serif;
    --font-text:"Montserrat", sans-serif;

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

    clamp(mínimo, ideal, máximo)

    El valor del medio crece con el
    ancho de pantalla, y los otros dos
    ponen el techo y el piso.

    Así no hace falta redefinir el
    tamaño en cada breakpoint.
    =========================*/

    --fs-h1:clamp(2.4rem,  8vw,   8rem);
    --fs-h2:clamp(2.1rem,  5vw,   5rem);
    --fs-h3:clamp(1.5rem,  2.5vw, 2.2rem);
    --fs-body:clamp(.95rem, 1vw,   1.15rem);
    --fs-small:clamp(.8rem, .9vw,  .95rem);

    /*=========================
    CONTENEDOR
    =========================*/

    --container:1280px;

    /* Aire a los costados en pantallas chicas */

    --container-padding:clamp(16px, 4vw, 40px);

    /*=========================
    HEADER

    Se usa para el scroll-margin de
    las secciones (que el header fijo
    no tape los títulos al usar los
    links del menú).
    =========================*/

    --header-height:78px;

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

    --section-padding:clamp(64px, 8vw, 120px);

    /* Separación entre columnas de las grillas */

    --gap-grid:clamp(18px, 2.5vw, 32px);

    --radius-sm:12px;
    --radius-md:20px;
    --radius-lg:28px;

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

    --shadow-sm:0 8px 20px rgba(0,0,0,.20);

    --shadow-md:0 18px 40px rgba(0,0,0,.30);

    --shadow-lg:0 28px 70px rgba(0,0,0,.45);

    --shadow-orange:
        0 0 30px rgba(245,130,32,.30);

    /*=========================
    TRANSICIONES
    =========================*/

    --transition:.35s ease;

}