/* ============================================
   RESET & BASE STYLES - ELISAY CODE
   Estilos base y normalización del navegador
   ============================================ */

/* ========== CSS Reset ========== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ========== HTML Base ========== */
html {
    font-size: 62.5%; /* 1rem = 10px */
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* ========== Body Base ========== */
body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--text-color);
    background: var(--bg-color);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========== Patrón de Fondo Hexagonal ========== */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(30deg, transparent 40%, rgba(0, 217, 255, 0.03) 40%, rgba(0, 217, 255, 0.03) 60%, transparent 60%),
        linear-gradient(90deg, transparent 40%, rgba(123, 44, 191, 0.03) 40%, rgba(123, 44, 191, 0.03) 60%, transparent 60%);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: var(--z-back);
    opacity: 0.5;
}

/* ========== Secciones Base ========== */
section {
    min-height: 100vh;
    padding: 10rem 9% 5rem;
    position: relative;
}

/* ========== Títulos de Sección ========== */
.section-title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    text-align: center;
    margin-bottom: 1rem;
    line-height: var(--line-height-tight);
}

.section-title span {
    color: var(--main-color);
}

.section-subtitle {
    font-size: var(--font-size-lg);
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 5rem;
}

/* ========== Links ========== */
a {
    text-decoration: none;
    color: inherit;
}

/* ========== Listas ========== */
ul {
    list-style: none;
}

/* ========== Imágenes ========== */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ========== Botones Base ========== */
button {
    border: none;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

/* ========== Inputs y Textareas Base ========== */
input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
}

/* ========== Selección de Texto ========== */
::selection {
    background: var(--main-color);
    color: var(--bg-color);
}

::-moz-selection {
    background: var(--main-color);
    color: var(--bg-color);
}

/* ========== Scrollbar Personalizada ========== */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--second-bg-color);
}

::-webkit-scrollbar-thumb {
    background: var(--main-color);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #00a8cc;
}

/* ========== Focus Visible ========== */
:focus-visible {
    outline: 2px solid var(--main-color);
    outline-offset: 2px;
}

/* ========== Prefers Reduced Motion ========== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}