/* =========================================================
   BETY'S ELEC
   ESTILOS GLOBALES
========================================================= */


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

:root {

    /* Colores principales */

    --negro: #050505;

    --negro-2: #0a0a0a;

    --negro-3: #111111;

    --negro-4: #171717;


    /* Dorados */

    --dorado: #f2b927;

    --dorado-claro: #ffd45a;

    --dorado-oscuro: #9c6d08;


    /* Texto */

    --blanco: #ffffff;

    --texto: #eeeeee;

    --texto-secundario: #a8a8a8;


    /* Bordes */

    --borde-dorado: rgba(242, 185, 39, 0.35);

    --borde-suave: rgba(255, 255, 255, 0.08);


    /* Sombras */

    --sombra-dorada:
        0 0 25px rgba(242, 185, 39, 0.15);

    --sombra-negra:
        0 15px 40px rgba(0, 0, 0, 0.5);


    /* Radios */

    --radio: 12px;

    --radio-grande: 18px;


    /* Contenedor */

    --ancho-maximo: 1280px;

}


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

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


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

html {

    scroll-behavior: smooth;

}


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

body {

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(242, 185, 39, 0.04),
            transparent 35%
        ),
        var(--negro);

    color: var(--blanco);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    min-height: 100vh;

    overflow-x: hidden;

}


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

a {

    color: inherit;

    text-decoration: none;

}


/* =========================================================
   BOTONES
========================================================= */

button {

    font-family: inherit;

    border: none;

    cursor: pointer;

}


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

img {

    max-width: 100%;

    display: block;

}


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

ul,
ol {

    list-style: none;

}


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

.container {

    width: min(
        calc(100% - 40px),
        var(--ancho-maximo)
    );

    margin: 0 auto;

}


/* =========================================================
   SECCIONES
========================================================= */

section {

    width: 100%;

}


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

.text-gold {

    color: var(--dorado);

}


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

::selection {

    background: var(--dorado);

    color: var(--negro);

}


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

::-webkit-scrollbar {

    width: 8px;

}

::-webkit-scrollbar-track {

    background: var(--negro);

}

::-webkit-scrollbar-thumb {

    background: var(--dorado-oscuro);

    border-radius: 20px;

}

::-webkit-scrollbar-thumb:hover {

    background: var(--dorado);

}