/* ==========================================================
   IURIS THEME
   MAIN.CSS
   Design System v1.0
   ========================================================== */


/* ==========================================================
   DESIGN SYSTEM
   ========================================================== */

:root {

    /* ======================================================
       IDENTIDAD CORPORATIVA
       ====================================================== */

    --iuris-primary: #203A5A;
    --iuris-primary-hover: #1A314A;

    --iuris-secondary: #C8A96A;
    --iuris-secondary-hover: #B89553;
    --iuris-primary-dark:#162A40;

    /* ======================================================
       TEXTO
       ====================================================== */

    --iuris-dark: #24364B;
    --iuris-text: #24364B;
    --iuris-text-light: #5F6B7A;
    

    /* ======================================================
       FONDOS
       ====================================================== */

    --iuris-white: #FFFFFF;
    --iuris-light: #F8F9FA;
    --iuris-light-2: #F2F5F8;
    --iuris-light-3: #ECEFF3;

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

    --iuris-border: #E6EBF1;
    --iuris-border-dark: #D5DEE8;

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

    --iuris-success: #2E7D32;
    --iuris-warning: #D97706;
    --iuris-error: #C62828;

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

    --font-base: "Manrope", sans-serif;

    --font-size-xs: .875rem;
    --font-size-sm: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.5rem;
    --font-size-xl: 2.25rem;
    --font-size-xxl: 3rem;

    --line-height: 1.6;
    --line-height-heading: 1.2;

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

    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 40px;
    --space-xl: 80px;

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

    --container-width: 1240px;

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

    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

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

    --shadow-sm: 0 4px 12px rgba(0,0,0,.06);
    --shadow: 0 10px 35px rgba(0,0,0,.08);
    --shadow-lg: 0 20px 50px rgba(0,0,0,.12);
    --shadow-md:0 8px 24px rgba(0,0,0,.08);

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

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

--transition-fast: .2s ease;
--transition: .3s ease;
--transition-slow: .5s ease;

/* ======================================================
   Z-INDEX
   ====================================================== */

--z-header:100;
--z-dropdown:200;
--z-modal:900;
--z-overlay:950;
--z-popup:999;

}


/* ==========================================================
   RESET BÁSICO
   ========================================================== */

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

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    padding:0;
}


/* ==========================================================
   BODY
   ========================================================== */

body{

    font-family:var(--font-base);
    font-size:var(--font-size-sm);
    line-height:var(--line-height);

    color:var(--iuris-text);

    background:var(--iuris-white);

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;

}


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

h1,
h2,
h3,
h4,
h5,
h6{

    margin:0 0 var(--space-md);

    color:var(--iuris-text);

    line-height:var(--line-height-heading);

    font-weight:700;

}

p{

    margin:0 0 var(--space-md);

    color:var(--iuris-text-light);

}

strong{

    font-weight:700;

}

small{

    font-size:var(--font-size-xs);

}


/* ==========================================================
   ENLACES
   ========================================================== */

a{

    color:var(--iuris-primary);

    text-decoration:none;

    transition:color var(--transition);

}

a:hover{

    color:var(--iuris-primary-hover);

}


/* ==========================================================
   IMÁGENES
   ========================================================== */

img{

    max-width:100%;

    height:auto;

    display:block;

}


/* ==========================================================
   LISTAS
   ========================================================== */

ul,
ol{

    margin:0 0 var(--space-md);

    padding-left:22px;

}


/* ==========================================================
   FORMULARIOS
   ========================================================== */

input,
textarea,
select,
button{

    font-family:inherit;

}


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

.container{

    width:100%;

    max-width:var(--container-width);

    margin:0 auto;

    padding-left:20px;

    padding-right:20px;

}


/* ==========================================================
   UTILIDADES
   ========================================================== */

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.d-none{

    display:none;

}

.w-100{

    width:100%;

}


/* ==========================================================
   SELECCIÓN DE TEXTO
   ========================================================== */

::selection{

    background:var(--iuris-secondary);

    color:var(--iuris-white);

}


/* ==========================================================
   FOCUS ACCESIBLE
   ========================================================== */

:focus-visible{

    outline:2px solid var(--iuris-secondary);

    outline-offset:3px;

}