/* ==========================================================================
   0. FUENTES
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Exo:wght@400;600&family=Roboto:wght@300;400;500;700&display=swap');

/* ==========================================================================
   1. RESET MODERNO
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
}

body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Exo', sans-serif;
    margin: 0;
}

p {
    margin: 0;
}

/* ==========================================================================
   2. VARIABLES DE MARCA Y TOKENS
   ========================================================================== */
:root {
    /* 🎨 Colores de marca */
    --brand-blue: #0044CC;
    --brand-green: #007A4F;
    --brand-orange: #CC4A00;
    --brand-accent: #17A2B8;
    --brand-dark: #0B0B14;
    --brand-light: #FFFFFF;

    /* 🌈 Tokens funcionales */
    --color-primary: var(--brand-blue);
    --color-secondary: var(--brand-green);
    --color-tertiary: var(--brand-orange);
    --color-accent: var(--brand-accent);

    --color-warning: #FFC107;
    --color-success: #28A745;
    --color-error: #DC3545;

    /* 🖌️ Tokens de borde */
    --border-color-light: #d1d5db;
    --border-color-dark: #4B5563;
    --border-default: var(--border-color-light);

    /* 🎨 Superficies */
    --bg-surface: var(--brand-light);
    --bg-surface-dark: var(--brand-dark);
    --bg-surface-hc: #000000;

    /* 🖋️ Texto */
    --text-primary: #1C1C1E;
    --text-inverse: #FFFFFF;
    --text-hc: #FFFF00;
    --text-on-primary: #FFFFFF;

    /* 🏷️ Labels */
    --text-label: #6b7280;
    --text-label-muted: #9ca3af;

    /* 🔀 Gradientes */
    --color-primary-dark: #002B80;
    --color-secondary-dark: #00663D;
    --btn-gradient: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    --btn-gradient-hover: linear-gradient(90deg, var(--color-primary-dark), var(--color-secondary-dark));

    /* 📐 Tipografías */
    --fs-h1: clamp(2rem, 4vw + 1rem, 3.5rem);
    --fs-h2: clamp(1.5rem, 2.5vw + 1rem, 2.5rem);
    --fs-body: clamp(1rem, 0.8vw + 0.8rem, 1.2rem);

    /* 🧩 Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;

    /* 🧭 Radius & Shadow */
    --radius: 0.5rem;
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

    /* ✨ Focus */
    --focus-ring: var(--color-accent);
}

/* ==========================================================================
   3. TEMAS
   ========================================================================== */
:root[data-theme="light"] {
    --bg-color: var(--bg-surface);
    --text-color: var(--text-primary);
    --input-bg: var(--brand-light);
    --input-border: var(--border-color-light);
    --border-default: var(--border-color-light);
}

:root[data-theme="dark"] {
    --bg-color: var(--bg-surface-dark);
    --text-color: var(--text-inverse);
    --input-bg: var(--brand-dark);
    --input-border: var(--border-color-dark);
    --border-default: var(--border-color-dark);
}

:root[data-theme="hc"] {
    --bg-color: var(--bg-surface-hc);
    --text-color: var(--text-hc);
    --input-bg: var(--bg-surface-hc);
    --input-border: var(--text-hc);
    --border-default: var(--text-hc);
}

/* ==========================================================================
   4. TIPOGRAFÍA LOGO
   ========================================================================== */
.font-logo {
    font-family: 'Black Ops One', cursive;
}

/* ==========================================================================
   5. BOTONES
   ========================================================================== */
.btn-brand,
.btn-primary {
    display: inline-block;
    padding: .75rem 1.25rem;
    border-radius: var(--radius);
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-on-primary) !important;
    background: var(--btn-gradient);
    min-height: 44px;
    box-shadow: var(--shadow);
    transition: all .3s ease;
}

.btn-brand:hover,
.btn-primary:hover {
    background: var(--btn-gradient-hover);
}

.btn-brand:focus-visible,
.btn-primary:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* ==========================================================================
   6. INPUTS
   ========================================================================== */
.input-brand,
.input-primary {
    width: 100%;
    border: 1px solid var(--input-border);
    border-radius: var(--radius);
    padding: 1.25rem .75rem .5rem;
    background: var(--input-bg);
    color: var(--text-color);
    font-size: 1rem;
    line-height: 1.5;
    transition: all .3s ease;
}

.input-brand:focus,
.input-primary:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary);
}

/* ==========================================================================
   7. LABELS FLOTANTES
   ========================================================================== */
.label-brand,
.label-primary {
    position: absolute;
    left: .75rem;
    top: .625rem;
    color: var(--text-label);
    font-size: .875rem;
    pointer-events: none;
    transition: all .2s ease;
}

.peer-placeholder-shown~.label-brand,
.peer-placeholder-shown~.label-primary {
    top: .875rem;
    color: var(--text-label-muted);
    font-size: 1rem;
}

.peer:focus~.label-brand,
.peer:focus~.label-primary {
    top: .25rem;
    font-size: .75rem;
    color: var(--color-primary);
}

/* ==========================================================================
   8. SELECTOR DE IDIOMA
   ========================================================================== */
select {
    padding: .3rem .5rem;
    border-radius: .3rem;
    border: 1px solid var(--color-accent);
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: .9rem;
    transition: background-color .3s ease, color .3s ease;
}

select:focus {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* ==========================================================================
   9. CABECERA
   ========================================================================== */
.header-bar {
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-default);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo {
    font-size: 1.8rem;
    color: var(--text-color);
}

.theme-toggle {
    width: 40px;
    height: 24px;
    border: none;
    border-radius: .3rem;
    background: var(--btn-gradient);
    cursor: pointer;
}

/* ==========================================================================
   10. NAVIGATION LINKS
   ========================================================================== */
.nav-list {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
}

.nav-link {
    color: var(--text-color);
    font-weight: 500;
    text-decoration: none;
    transition: color .3s ease;
}

.nav-link:hover,
.nav-link:focus {
    color: var(--color-secondary);
}

/* ==========================================================================
   11. GRID Y CONTAINERS
   ========================================================================== */
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
    max-width: 1280px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-md);
}

/* ==========================================================================
   12. COMPONENTES BASE
   ========================================================================== */
.card {
    background: var(--bg-color);
    border-radius: var(--radius);
    padding: var(--space-md);
    box-shadow: var(--shadow);
    transition: transform .3s ease;
}

.card:hover {
    transform: translateY(-3px);
}

.tag {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: .3rem;
    font-size: .8rem;
    font-weight: 600;
    color: #fff;
}

.tag.context { background: var(--color-primary); }
.tag.innovation { background: var(--color-secondary); }
.tag.security { background: var(--color-tertiary); }

/* ==========================================================================
   13. HERO Y SECCIONES
   ========================================================================== */
.hero {
    padding: var(--space-xl) var(--space-md);
    text-align: center;
    background: var(--btn-gradient);
    color: #fff;
}

.hero h1 {
    font-size: var(--fs-h1);
    line-height: 1.2;
}

.hero p {
    font-size: var(--fs-body);
    margin-top: var(--space-sm);
}

.services {
    padding: var(--space-lg) 0;
}

.services h2 {
    text-align: center;
    font-size: var(--fs-h2);
    margin-bottom: var(--space-md);
}

/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.footer {
    padding: var(--space-lg);
    background: var(--brand-dark);
    color: var(--text-inverse);
    text-align: center;
    font-size: .875rem;
}

/* ==========================================================================
   15. RESPONSIVE MENÚS
   ========================================================================== */
@media (max-width: 768px) {
    .menu-desktop {
        display: none;
    }

    .menu-mobile {
        display: block;
        background: none;
        border: none;
        font-size: 1.8rem;
        color: var(--color-primary);
    }
}

@media (min-width: 769px) {
    #mobileMenu {
        display: none !important;
    }
}