/* =========================================================
   BASE.CSS
   CORPORACIÓN APOLO
   CONFIGURACIÓN GENERAL + PALETA
========================================================= */


/* =========================================================
   VARIABLES PRINCIPALES
========================================================= */

:root {

    /* -----------------------------------------------------
       IDENTIDAD CORPORACIÓN APOLO
    ----------------------------------------------------- */

    --morado: #7209B7;
    --morado-hover: #5F0798;
    --morado-suave: #F1DFFF;

    --amarillo: #FFB703;
    --amarillo-hover: #E6A400;


    /* -----------------------------------------------------
       FONDOS
    ----------------------------------------------------- */

    --fondo: #FFFFFF;
    --fondo-secundario: #F5F5F5;
    --superficie: #FFFFFF;


    /* -----------------------------------------------------
       TEXTOS
    ----------------------------------------------------- */

    --texto: #283545;
    --texto-secundario: #697586;


    /* -----------------------------------------------------
       OSCUROS
    ----------------------------------------------------- */

    --negro: #111111;


    /* -----------------------------------------------------
       BORDES
    ----------------------------------------------------- */

    --borde: #D9DFE5;


    /* -----------------------------------------------------
       RADIOS
    ----------------------------------------------------- */

    --radio: 18px;
    --radio-grande: 24px;


    /* -----------------------------------------------------
       SOMBRAS
    ----------------------------------------------------- */

    --sombra:
        0 12px 30px rgba(0, 0, 0, 0.08);


    /* -----------------------------------------------------
       TRANSICIONES
    ----------------------------------------------------- */

    --transicion: 0.25s ease;


    /* -----------------------------------------------------
       TIPOGRAFÍA
    ----------------------------------------------------- */

    --fuente-principal: 'Nunito', sans-serif;
}


/* =========================================================
   MODO OSCURO
========================================================= */

body.modo-oscuro {

    /* Fondos */

    --fondo: #111111;
    --fondo-secundario: #181818;
    --superficie: #1D1D1D;


    /* Textos */

    --texto: #FFFFFF;
    --texto-secundario: #A9A9A9;


    /* Bordes */

    --borde: #333333;


    /* Morado suave */

    --morado-suave: rgba(114, 9, 183, 0.22);


    /* Negro */

    --negro: #111111;
}


/* =========================================================
   RESET GENERAL
========================================================= */

*,
*::before,
*::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;
}


/* =========================================================
   HTML
========================================================= */

html {

    width: 100%;

    min-height: 100%;

    overflow-x: hidden;

    scroll-behavior: smooth;
}


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

body {

    width: 100%;

    min-height: 100vh;

    margin: 0;

    padding: 0;

    overflow-x: hidden;

    background-color: var(--fondo);

    color: var(--texto);

    font-family: var(--fuente-principal);

    font-size: 16px;

    line-height: 1.5;

    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}


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

img {

    display: block;

    max-width: 100%;

    height: auto;
}


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

button,
input,
textarea,
select {

    font-family: inherit;
}


button {

    cursor: pointer;
}


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

a {

    color: inherit;
}


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

::selection {

    background-color: var(--morado);

    color: #FFFFFF;
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {

    width: 10px;
}


::-webkit-scrollbar-track {

    background-color: var(--fondo-secundario);
}


::-webkit-scrollbar-thumb {

    background-color: var(--morado);

    border-radius: 10px;
}


::-webkit-scrollbar-thumb:hover {

    background-color: var(--morado-hover);
}


/* =========================================================
   SCROLLBAR — MODO OSCURO
========================================================= */

body.modo-oscuro::-webkit-scrollbar-track {

    background-color: #181818;
}


body.modo-oscuro::-webkit-scrollbar-thumb {

    background-color: var(--morado);
}


body.modo-oscuro::-webkit-scrollbar-thumb:hover {

    background-color: var(--morado-hover);
}


/* =========================================================
   FOCUS / ACCESIBILIDAD
========================================================= */

:focus-visible {

    outline: 3px solid var(--amarillo);

    outline-offset: 3px;
}


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

.oculto {

    display: none !important;
}


.texto-centrado {

    text-align: center;
}


/* =========================================================
   TRANSICIONES DEL TEMA
========================================================= */

body,
.header,
.slider-relevantes,
.slide-relevante,
.slide-contenido,
.seccion-relevantes,
.seccion-emprendimiento,
.seccion-contacto,
.emprendimiento-contenedor,
.emprendimiento-opcion,
.cuadro-contacto,
.cuadro-redes,
.red-social {

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}


/* =========================================================
   REDUCCIÓN DE MOVIMIENTO
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {

        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;
    }
}