@import url('https://fonts.googleapis.com/css2?family=PT+Serif&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');

:root {
    /* Familias de Fuentes */
    --font-family-serif: 'PT Serif', serif;
    --font-family-anton: 'Anton', sans-serif;
    --font-family-code: 'Source Code Pro', monospace;
    --font-family-quicksand: 'Quicksand', sans-serif;

    /* Tamaņos de Fuente Base */
    --fs-28: 28px;
    --fs-24: 24px;
    --fs-21: 21px;
    --fs-18: 18px;
    --fs-16: 16px;
    --fs-14: 14px;
    --fs-12: 12px;
}

/* --- Clases de Utilidad Globales --- */

/* Listas */
.list-st {
    list-style: url("../img/RedIcon.svg");
}
.list-st-cd {
    list-style: url("../img/icons/minus.svg");
}

/* Familias de Fuentes */
.font-serif { font-family: var(--font-family-serif); }
.font-anton { font-family: var(--font-family-anton); }
.font-code { font-family: var(--font-family-code); }
.font-quicksand { font-family: var(--font-family-quicksand); }

/* Tamaņos de Fuentes */
.text-28 { font-size: var(--fs-28); }
.text-24 { font-size: var(--fs-24); }
.text-21 { font-size: var(--fs-21); }
.text-18 { font-size: var(--fs-18); }
.text-16 { font-size: var(--fs-16); }
.text-14 { font-size: var(--fs-14); }
.text-12 { font-size: var(--fs-12); }


/* Logos y utilidades generales */
.md-logo { height: 80px; }
.lg-logo { height: 120px; }
.bt-font-size { font-size: var(--fs-16); }

/* Media Queries para estilos globales */
@media (max-width: 991.98px) {
    .text-21 { font-size: 20px; }
    .text-18 { font-size: 17px; }
}

@media (max-width: 767.98px) {
    .text-21 { font-size: 18px; }
    .text-18 { font-size: 16px; }
}

@media (max-width: 576px) {
    .md-logo { height: 55px; }
    .lg-logo { height: 80px; }
    .bt-font-size { font-size: 13px; }
}

/* Animaciones globales */
.fade-in {
    -webkit-animation: fade-in 2.0s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in 2.0s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }

.fade-in-bottom {
    -webkit-animation: fade-in-bottom 1.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
    animation: fade-in-bottom 1.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
}

@-webkit-keyframes fade-in-bottom {
    0% { -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; }
    100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}

@keyframes fade-in-bottom {
    0% { -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; }
    100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}