:root{
    /* colors */
    --negro: #111111;
    --blanco: #fafafa;
    --azul_logo: #01096d;
    --rojo_logo: #a90c0c; 
    /* Paleta Tech Moderna */
    --primary: #EF4444;
    --secondary: #8B5CF6;
    --accent: #EF4444;
    --dark-900: #0F172A;
    --dark-800: #1E293B;
    --dark-700: #334155;
    --light-100: #F8FAFC;
    --light-200: #F1F5F9;
    --light-300: #E2E8F0;
    --success: #22C55E;

    /* Spacing Mobile First (base) */
    --spacing-xs: 0.5rem;   /* 8px */
    --spacing-sm: 1rem;     /* 16px */
    --spacing-md: 1.5rem;   /* 24px */
    --spacing-lg: 2rem;     /* 32px */
    --spacing-xl: 3rem;     /* 48px */
    --spacing-xxl: 4rem;    /* 64px */

    /* Container Max Widths */
    --container-mobile: 100%;
    --container-tablet: 768px;
    --container-desktop: 1024px;
    --container-wide: 1200px;
    --container-full: 1400px;

    --header-height: 65px;


    /* Breakpoints */
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    --breakpoint-wide: 1280px;
    --breakpoint-xl: 1536px;

    --font-h1: 2rem;
    --font-h2: 1.6rem;
    --font-h3: 1.35rem;
    --font-h4: 1.15rem;

    --font-body: 0.95rem;
    --font-body-sm: 0.9rem;
    --font-caption: 0.75rem;
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    user-select: none;
}

html{scroll-behavior: smooth;}

a{
    text-decoration: none;
    color: inherit;
}

img{
    width: 100%;
    height: auto;
    display: block;
}

ul {list-style: none;}

body{
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

main {
    position: relative;
    z-index: 1;
    background: transparent;
}

[v-cloak]{display: none !important;}

/* default class */
/* Margin Bottom */
.mb-05{margin-bottom: 0.5rem;}
.mb-1{margin-bottom: 1rem;}
.mb-1-5{margin-bottom: 1.5rem;}
.mb-2{margin-bottom: 2rem;}
.mb-2-5{margin-bottom: 2.5rem;}
.mb-3{margin-bottom: 3rem;}
.mb-3-5{margin-bottom: 3.5rem;}

/* Margin Top */
.mt-05{margin-top: 0.5rem;}
.mt-1{margin-top: 1rem;}
.mt-1-5{margin-top: 1.5rem;}
.mt-2{margin-top: 2rem;}
.mt-2-5{margin-top: 2.5rem;}
.mt-3{margin-top: 3rem;}
.mt-3-5{margin-top: 3.5rem;}

.sm-mb-05{margin-bottom: 0.5rem !important;}
.sm-mb-1{margin-bottom: 1rem !important;}
.sm-mb-1-5{margin-bottom: 1.5rem !important;}
.sm-mb-2{margin-bottom: 2rem !important;}
.sm-mb-2-5{margin-bottom: 2.5rem !important;}
.sm-mb-3{margin-bottom: 3rem !important;}
.sm-mb-3-5{margin-bottom: 3.5rem !important;}
.sm-mb-4{margin-bottom: 4rem !important;}
.sm-mb-4-5{margin-bottom: 4.5rem !important;}
.sm-mb-5{margin-bottom: 5rem !important;}
.sm-mb-5-5{margin-bottom: 5.5rem !important;}
.sm-mb-6{margin-bottom: 6rem !important;}
.sm-mb-6-5{margin-bottom: 6.5rem !important;}
.sm-mb-7{margin-bottom: 7rem !important;}
.sm-mb-7-5{margin-bottom: 7.5rem !important;}
.sm-mb-8{margin-bottom: 8rem !important;}
.sm-mb-8-5{margin-bottom: 8.5rem !important;}
.sm-mb-9{margin-bottom: 9rem !important;}
.sm-mb-9-5{margin-bottom: 9.5rem !important;}
.sm-mb-10{margin-bottom: 10rem !important;}

.sm-mt-05{margin-top: 0.5rem !important;}
.sm-mt-1{margin-top: 1rem !important;}
.sm-mt-1-5{margin-top: 1.5rem !important;}
.sm-mt-2{margin-top: 2rem !important;}
.sm-mt-2-5{margin-top: 2.5rem !important;}
.sm-mt-3{margin-top: 3rem !important;}
.sm-mt-3-5{margin-top: 3.5rem !important;}
.sm-mt-4{margin-top: 4rem !important;}
.sm-mt-4-5{margin-top: 4.5rem !important;}
.sm-mt-5{margin-top: 5rem !important;}
.sm-mt-5-5{margin-top: 5.5rem !important;}
.sm-mt-6{margin-top: 6rem !important;}
.sm-mt-6-5{margin-top: 6.5rem !important;}
.sm-mt-7{margin-top: 7rem !important;}
.sm-mt-7-5{margin-top: 7.5rem !important;}
.sm-mt-8{margin-top: 8rem !important;}
.sm-mt-8-5{margin-top: 8.5rem !important;}
.sm-mt-9{margin-top: 9rem !important;}
.sm-mt-9-5{margin-top: 9.5rem !important;}
.sm-mt-10{margin-top: 10rem !important;}



/* ---- MD: TABLET (768px+) ---- */
@media (min-width: 768px) {
    /* Margin Bottom */
    .md-mb-05{margin-bottom: 0.5rem !important;}
    .md-mb-1{margin-bottom: 1rem !important;}
    .md-mb-1-5{margin-bottom: 1.5rem !important;}
    .md-mb-2{margin-bottom: 2rem !important;}
    .md-mb-2-5{margin-bottom: 2.5rem !important;}
    .md-mb-3{margin-bottom: 3rem !important;}
    .md-mb-3-5{margin-bottom: 3.5rem !important;}
    .md-mb-4{margin-bottom: 4rem !important;}
    .md-mb-4-5{margin-bottom: 4.5rem !important;}
    .md-mb-5{margin-bottom: 5rem !important;}
    .md-mb-5-5{margin-bottom: 5.5rem !important;}
    .md-mb-6{margin-bottom: 6rem !important;}
    .md-mb-6-5{margin-bottom: 6.5rem !important;}
    .md-mb-7{margin-bottom: 7rem !important;}
    .md-mb-7-5{margin-bottom: 7.5rem !important;}
    .md-mb-8{margin-bottom: 8rem !important;}
    .md-mb-8-5{margin-bottom: 8.5rem !important;}
    .md-mb-9{margin-bottom: 9rem !important;}
    .md-mb-9-5{margin-bottom: 9.5rem !important;}
    .md-mb-10{margin-bottom: 10rem !important;}

    .md-mt-05{margin-top: 0.5rem !important;}
    .md-mt-1{margin-top: 1rem !important;}
    .md-mt-1-5{margin-top: 1.5rem !important;}
    .md-mt-2{margin-top: 2rem !important;}
    .md-mt-2-5{margin-top: 2.5rem !important;}
    .md-mt-3{margin-top: 3rem !important;}
    .md-mt-3-5{margin-top: 3.5rem !important;}
    .md-mt-4{margin-top: 4rem !important;}
    .md-mt-4-5{margin-top: 4.5rem !important;}
    .md-mt-5{margin-top: 5rem !important;}
    .md-mt-5-5{margin-top: 5.5rem !important;}
    .md-mt-6{margin-top: 6rem !important;}
    .md-mt-6-5{margin-top: 6.5rem !important;}
    .md-mt-7{margin-top: 7rem !important;}
    .md-mt-7-5{margin-top: 7.5rem !important;}
    .md-mt-8{margin-top: 8rem !important;}
    .md-mt-8-5{margin-top: 8.5rem !important;}
    .md-mt-9{margin-top: 9rem !important;}
    .md-mt-9-5{margin-top: 9.5rem !important;}
    .md-mt-10{margin-top: 10rem !important;}
}


/* ---- LG: DESKTOP (1024px+) ---- */
@media (min-width: 1024px) {
    /* Margin Bottom */
    .lg-mb-05{margin-bottom: 0.5rem !important;}
    .lg-mb-1{margin-bottom: 1rem !important;}
    .lg-mb-1-5{margin-bottom: 1.5rem !important;}
    .lg-mb-2{margin-bottom: 2rem !important;}
    .lg-mb-2-5{margin-bottom: 2.5rem !important;}
    .lg-mb-3{margin-bottom: 3rem !important;}
    .lg-mb-3-5{margin-bottom: 3.5rem !important;}
    .lg-mb-4{margin-bottom: 4rem !important;}
    .lg-mb-4-5{margin-bottom: 4.5rem !important;}
    .lg-mb-5{margin-bottom: 5rem !important;}
    .lg-mb-5-5{margin-bottom: 5.5rem !important;}
    .lg-mb-6{margin-bottom: 6rem !important;}
    .lg-mb-6-5{margin-bottom: 6.5rem !important;}
    .lg-mb-7{margin-bottom: 7rem !important;}
    .lg-mb-7-5{margin-bottom: 7.5rem !important;}
    .lg-mb-8{margin-bottom: 8rem !important;}
    .lg-mb-8-5{margin-bottom: 8.5rem !important;}
    .lg-mb-9{margin-bottom: 9rem !important;}
    .lg-mb-9-5{margin-bottom: 9.5rem !important;}
    .lg-mb-10{margin-bottom: 10rem !important;}

    .lg-mt-05{margin-top: 0.5rem !important;}
    .lg-mt-1{margin-top: 1rem !important;}
    .lg-mt-1-5{margin-top: 1.5rem !important;}
    .lg-mt-2{margin-top: 2rem !important;}
    .lg-mt-2-5{margin-top: 2.5rem !important;}
    .lg-mt-3{margin-top: 3rem !important;}
    .lg-mt-3-5{margin-top: 3.5rem !important;}
    .lg-mt-4{margin-top: 4rem !important;}
    .lg-mt-4-5{margin-top: 4.5rem !important;}
    .lg-mt-5{margin-top: 5rem !important;}
    .lg-mt-5-5{margin-top: 5.5rem !important;}
    .lg-mt-6{margin-top: 6rem !important;}
    .lg-mt-6-5{margin-top: 6.5rem !important;}
    .lg-mt-7{margin-top: 7rem !important;}
    .lg-mt-7-5{margin-top: 7.5rem !important;}
    .lg-mt-8{margin-top: 8rem !important;}
    .lg-mt-8-5{margin-top: 8.5rem !important;}
    .lg-mt-9{margin-top: 9rem !important;}
    .lg-mt-9-5{margin-top: 9.5rem !important;}
    .lg-mt-10{margin-top: 10rem !important;}
}

/* ---- XL: WIDE SCREEN (1280px+) ---- */
@media (min-width: 1280px) {
    /* Margin Bottom */
    .xl-mb-05{margin-bottom: 0.5rem !important;}
    .xl-mb-1{margin-bottom: 1rem !important;}
    .xl-mb-1-5{margin-bottom: 1.5rem !important;}
    .xl-mb-2{margin-bottom: 2rem !important;}
    .xl-mb-2-5{margin-bottom: 2.5rem !important;}
    .xl-mb-3{margin-bottom: 3rem !important;}
    .xl-mb-3-5{margin-bottom: 3.5rem !important;}
    .xl-mb-4{margin-bottom: 4rem !important;}
    .xl-mb-4-5{margin-bottom: 4.5rem !important;}
    .xl-mb-5{margin-bottom: 5rem !important;}
    .xl-mb-5-5{margin-bottom: 5.5rem !important;}
    .xl-mb-6{margin-bottom: 6rem !important;}
    .xl-mb-6-5{margin-bottom: 6.5rem !important;}
    .xl-mb-7{margin-bottom: 7rem !important;}
    .xl-mb-7-5{margin-bottom: 7.5rem !important;}
    .xl-mb-8{margin-bottom: 8rem !important;}
    .xl-mb-8-5{margin-bottom: 8.5rem !important;}
    .xl-mb-9{margin-bottom: 9rem !important;}
    .xl-mb-9-5{margin-bottom: 9.5rem !important;}
    .xl-mb-10{margin-bottom: 10rem !important;}
    

    .xl-mt-05{margin-top: 0.5rem !important;}
    .xl-mt-1{margin-top: 1rem !important;}
    .xl-mt-1-5{margin-top: 1.5rem !important;}
    .xl-mt-2{margin-top: 2rem !important;}
    .xl-mt-2-5{margin-top: 2.5rem !important;}
    .xl-mt-3{margin-top: 3rem !important;}
    .xl-mt-3-5{margin-top: 3.5rem !important;}
    .xl-mt-4{margin-top: 4rem !important;}
    .xl1-mt-4-5{margin-top: 4.5rem !important;}
    .xl-mt-5{margin-top: 5rem !important;}
    .xl-mt-5-5{margin-top: 5.5rem !important;}
    .xl-mt-6{margin-top: 6rem !important;}
    .xl-mt-6-5{margin-top: 6.5rem !important;}
    .xl-mt-7{margin-top: 7rem !important;}
    .xl-mt-7-5{margin-top: 7.5rem !important;}
    .xl-mt-8{margin-top: 8rem !important;}
    .xl-mt-8-5{margin-top: 8.5rem !important;}
    .xl-mt-9{margin-top: 9rem !important;}
    .xl-mt-9-5{margin-top: 9.5rem !important;}
    .xl-mt-10{margin-top: 10rem !important;}
}

/* Hacer que el fade sea más pronunciado */
[data-aos] {
    opacity: 0 !important; /* Empieza totalmente invisible */
    transition-property: transform, opacity;
}

[data-aos].aos-animate {
    opacity: 1 !important; /* Termina totalmente visible */
}

/* Ajustar específicamente para fade-down */
[data-aos="fade-down"] {
    opacity: 0;
    transform: translate3d(0, -50px, 0);
}

[data-aos="fade-down"].aos-animate {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Ajustar para fade-up */
[data-aos="fade-up"] {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
}

[data-aos="fade-up"].aos-animate {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Para fade-right */
[data-aos="fade-right"] {
    opacity: 0;
    transform: translate3d(-50px, 0, 0);
}

[data-aos="fade-right"].aos-animate {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Para zoom-in */
[data-aos="zoom-in"] {
    opacity: 0;
    transform: scale(0.8);
}

[data-aos="zoom-in"].aos-animate {
    opacity: 1;
    transform: scale(1);
}