/* ==========================================================================
   1. TOKENS DE MARCA Y PALETA (Fuente única de verdad)
   ========================================================================== */
:root {
    /* 🎨 Colores de marca */
    --brand-blue: #0044CC;
    --brand-green: #007A4F;
    --brand-orange: #CC4A00;
    --brand-accent: #17A2B8;
    --brand-dark: #0B0B14;
    --brand-light: #FFFFFF;

    /* 🌈 Tokens funcionales (base) */
    --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;

    /* 🖌️ Bordes */
    --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;

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

    /* 📐 Tipografías (nombres de fuente; las @import van en el CSS principal) */
    --font-body: 'Roboto', sans-serif;
    --font-headings: 'Exo', sans-serif;
    --font-logo: 'Black Ops One', cursive;

    /* ===== Variantes por modo (opcionalmente utilizables desde el theme) ===== */
    /* Light */
    --text-primary-light: #111;
    --color-primary-light: #0055FF;
    --color-secondary-light: #00C0A3;
    --color-accent-light: #FF8800;

    /* Dark */
    --bg-surface-darker: #121212;
    /* alternativo a --bg-surface-dark */
    --text-primary-dark: #f4f4f4;
    --color-primary-dark: #3399FF;
    --color-secondary-dark: #00C0A3;
    --color-accent-dark: #FFA500;
    --text-on-primary-dark: #000;

    /* ===== Sombras / Elevación ===== */
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 0 12px rgba(0, 0, 0, 0.30);
    /* Alias para compatibilidad con estilos existentes */
    --shadow: var(--shadow-sm);

    /* ===== Glass / Transparencia ===== */
    --glass-bg-light: rgba(255, 255, 255, 0.92);
    --glass-border-light: rgba(0, 0, 0, 0.08);
    --glass-bg-dark: rgba(0, 0, 0, 0.35);
    --glass-border-dark: rgba(255, 255, 255, 0.12);
    --glass-bg-hc: rgba(0, 0, 0, 1.00);
    --glass-border-hc: rgba(255, 255, 0, 1.00);

    /* ===== Gradientes de botón por modo ===== */
    --btn-gradient-light: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    --btn-gradient-dark: linear-gradient(90deg, var(--color-primary-dark, var(--color-primary)), var(--color-secondary-dark, var(--color-secondary)));
    --btn-gradient-hc: linear-gradient(90deg, var(--text-hc), var(--text-hc));
    --btn-gradient-hover-light: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    --btn-gradient-hover-dark: linear-gradient(90deg, var(--color-primary-dark, var(--color-primary)), var(--color-secondary-dark, var(--color-secondary)));
    --btn-gradient-hover-hc: linear-gradient(90deg, var(--text-hc), var(--text-hc));

    /* ===== VisionOS: opacidades y superficies ===== */
    --v-opacity-weak: 0.05;
    --v-opacity-mid: 0.10;
    --v-opacity-strong: 0.20;

    /* Superficies (tarjetas/navlinks) */
    --v-surface-light: rgba(255, 255, 255, var(--v-opacity-mid));
    /* sobre fondos claros */
    --v-surface-hover-light: rgba(255, 255, 255, var(--v-opacity-strong));
    --v-surface-dark: rgba(255, 255, 255, var(--v-opacity-mid));
    /* blanco sutil sobre fondo oscuro */
    --v-surface-hover-dark: rgba(255, 255, 255, var(--v-opacity-strong));
    --v-surface-hc: rgba(255, 255, 0, var(--v-opacity-mid));
    /* amarillo tenue alto contraste */
    --v-surface-hover-hc: rgba(255, 255, 0, var(--v-opacity-strong));

    /* Footer VisionOS (overlay) */
    --v-footer-bg-light: rgba(255, 255, 255, 0.85);
    --v-footer-bg-dark: rgba(18, 18, 18, 0.90);
    --v-footer-bg-hc: rgba(0, 0, 0, 1.00);

    /* ===== VisionOS: gradiente de héroe por modo =====
     Usa color-mix para derivar transparencias sin hardcodear alphas. */
    --v-hero-gradient-light:
        linear-gradient(to right,
            color-mix(in oklab, var(--color-primary) 70%, transparent),
            color-mix(in oklab, var(--color-secondary) 70%, transparent));

    --v-hero-gradient-dark:
        linear-gradient(to right,
            color-mix(in oklab, var(--color-primary-dark, var(--color-primary)) 70%, transparent),
            color-mix(in oklab, var(--color-secondary-dark, var(--color-secondary)) 70%, transparent));

    --v-hero-gradient-hc:
        linear-gradient(to right, var(--text-hc), var(--text-hc));
}

/* ==========================================================================
   2. RESET MODERNO (solo fuentes aquí)
   ========================================================================== */
html {
    font-family: var(--font-body);
}

body {
    font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-headings);
}

/* ==========================================================================
   3. TIPOGRAFÍA LOGO (solo fuentes aquí)
   ========================================================================== */

.font-logo {
    font-family: var(--font-logo);
}
/* ==========================================================================
   🎯 Site – Tags globales + CV Content Types + Page Chips
   ========================================================================== */

/* 🌍 Variables globales (modo claro por defecto) */
:root {
    /* Tags ya existentes (Atlas) */
    --tag-standard:     #6B5B95;
    --tag-practice:     #009688;
    --tag-control:      #F25C54;
    --tag-capability:   #4C6EF5;
    --tag-objective:    #2D6A4F;
    --tag-role:         #FF9900;
    --tag-methodology:  #3F3D56;
    --tag-tool:         #795548;
    --tag-sector:       #5D9CEC;
    --tag-status:       #9E9E9E;
    --tag-theme:        #D6336C;
    --tag-type:         #20C997;
    --tag-asset:        #343A40;

    --tag-function:     #003f5c;
    --tag-category:     #2f4b7c;
    --tag-subcategory:  #665191;
    --tag-domain:       #a05195;
    --tag-thread:       #d45087;
    --tag-controltype:  #f95d6a;

    /* Tags específicos de CV / Resume */
    --tag-person:           #009688; /* teal */
    --tag-contactdetail:    #6B5B95; /* morado */
    --tag-sociallink:       #20C997; /* verde agua */
    --tag-experience:       #4C6EF5; /* azul */
    --tag-education:        #FF9900; /* naranja */
    --tag-certification:    #F25C54; /* rojo coral */
    --tag-skill:            #5D9CEC; /* azul claro */
    --tag-language:         #2D6A4F; /* verde oscuro */
    --tag-project:          #795548; /* marrón */
    --tag-cta:              #D6336C; /* rosa */
    --tag-contactcard:      #9E9E9E; /* gris */
    --tag-mediagallery:     #3F3D56; /* gris violeta */
    --tag-digitalcompetence:#17A2B8; /* cian */
    --tag-competency:       #a05195; /* púrpura */
    --tag-drivinglicense:   #20C997; /* verde agua */
    --tag-reference:        #f95d6a; /* coral fuerte */
    --tag-annex:            #343A40; /* gris oscuro */
    --tag-objective-cv:     #FFB74D; /* ámbar */
    --tag-achievement:      #81D4FA; /* celeste */

    /* Tags específicos para Pages (claro) */
    --tag-page-index:       #4C6EF5; /* azul */
    --tag-page-resume:      #009688; /* teal */
    --tag-page-search:      #FF9900; /* naranja */
    --tag-page-bestpractices:#F25C54; /* coral */
}

/* ==========================================================================
   🧱 Estilo base para Tags
   ========================================================================== */
.tag {
    display: inline-block;
    padding: .25rem .6rem;
    border-radius: .3rem;
    font-size: .75rem;
    font-weight: 600;
    color: #fff;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .3s ease;
}

/* 🔖 Clases Atlas (ya existentes) */
.tag.standard     { background-color: var(--tag-standard); }
.tag.practice     { background-color: var(--tag-practice); }
.tag.control      { background-color: var(--tag-control); }
.tag.capability   { background-color: var(--tag-capability); }
.tag.objective    { background-color: var(--tag-objective); }
.tag.role         { background-color: var(--tag-role); }
.tag.methodology  { background-color: var(--tag-methodology); }
.tag.tool         { background-color: var(--tag-tool); }
.tag.sector       { background-color: var(--tag-sector); }
.tag.status       { background-color: var(--tag-status); }
.tag.theme        { background-color: var(--tag-theme); }
.tag.type         { background-color: var(--tag-type); }
.tag.asset        { background-color: var(--tag-asset); }

.tag.function     { background-color: var(--tag-function); }
.tag.category     { background-color: var(--tag-category); }
.tag.subcategory  { background-color: var(--tag-subcategory); }
.tag.domain       { background-color: var(--tag-domain); }
.tag.thread       { background-color: var(--tag-thread); }
.tag.controltype  { background-color: var(--tag-controltype); }

/* 🔖 Clases CV */
.tag.person            { background-color: var(--tag-person); }
.tag.contactdetail     { background-color: var(--tag-contactdetail); }
.tag.sociallink        { background-color: var(--tag-sociallink); }
.tag.experience        { background-color: var(--tag-experience); }
.tag.education         { background-color: var(--tag-education); }
.tag.certification     { background-color: var(--tag-certification); }
.tag.skill             { background-color: var(--tag-skill); }
.tag.language          { background-color: var(--tag-language); }
.tag.project           { background-color: var(--tag-project); }
.tag.cta               { background-color: var(--tag-cta); }
.tag.contactcard       { background-color: var(--tag-contactcard); }
.tag.mediagallery      { background-color: var(--tag-mediagallery); }
.tag.digitalcompetence { background-color: var(--tag-digitalcompetence); }
.tag.competency        { background-color: var(--tag-competency); }
.tag.drivinglicense    { background-color: var(--tag-drivinglicense); }
.tag.reference         { background-color: var(--tag-reference); }
.tag.annex             { background-color: var(--tag-annex); }
.tag.objective-cv      { background-color: var(--tag-objective-cv); }
.tag.achievement       { background-color: var(--tag-achievement); }

/* 🔖 Clases Pages */
.tag.page[data-page="index"]         { background-color: var(--tag-page-index); }
.tag.page[data-page="resume"]        { background-color: var(--tag-page-resume); }
.tag.page[data-page="search"]        { background-color: var(--tag-page-search); }
.tag.page[data-page="bestpractices"] { background-color: var(--tag-page-bestpractices); }

/* ==========================================================================
   🌙 Dark Mode
   ========================================================================== */
:root[data-theme="dark"] {
    /* Reuso de paleta aclarada para CV */
    --tag-person:           #4DB6AC;
    --tag-contactdetail:    #B39DDB;
    --tag-sociallink:       #80CBC4;
    --tag-experience:       #90CAF9;
    --tag-education:        #FFCC80;
    --tag-certification:    #EF9A9A;
    --tag-skill:            #81D4FA;
    --tag-language:         #A5D6A7;
    --tag-project:          #D7CCC8;
    --tag-cta:              #F48FB1;
    --tag-contactcard:      #E0E0E0;
    --tag-mediagallery:     #B0BEC5;
    --tag-digitalcompetence:#7BB6DC;
    --tag-competency:       #CE93D8;
    --tag-drivinglicense:   #80CBC4;
    --tag-reference:        #EF9A9A;
    --tag-annex:            #ECEFF1;
    --tag-objective-cv:     #FFD180;
    --tag-achievement:      #B3E5FC;

    /* Pages en Dark */
    --tag-page-index:       #90CAF9;
    --tag-page-resume:      #4DB6AC;
    --tag-page-search:      #FFCC80;
    --tag-page-bestpractices:#EF9A9A;
}

/* ==========================================================================
   🧏 High Contrast Mode
   ========================================================================== */
:root[data-theme="hc"] {
    --tag-person:           #00FFFF;
    --tag-contactdetail:    #FFFF00;
    --tag-sociallink:       #00FF7F;
    --tag-experience:       #00FF00;
    --tag-education:        #FFA500;
    --tag-certification:    #FF0000;
    --tag-skill:            #0000FF;
    --tag-language:         #00FFFF;
    --tag-project:          #FFFFFF;
    --tag-cta:              #FF1493;
    --tag-contactcard:      #CCCCCC;
    --tag-mediagallery:     #FF00FF;
    --tag-digitalcompetence:#00FFFF;
    --tag-competency:       #FF00FF;
    --tag-drivinglicense:   #00FF7F;
    --tag-reference:        #FF0000;
    --tag-annex:            #FFFFFF;
    --tag-objective-cv:     #FFFF00;
    --tag-achievement:      #00FFFF;

    /* Pages en High Contrast */
    --tag-page-index:       #00FFFF; /* cyan */
    --tag-page-resume:      #00FF00; /* verde fosfo */
    --tag-page-search:      #FFFF00; /* amarillo */
    --tag-page-bestpractices:#FF00FF; /* magenta */
}
/* ==========================================================================
   0. FUENTES (globales, compartidas por ahora)
   ========================================================================== */
@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;
    background-color: var(--bg-color);
    color: var(--text-color);
}

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

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

/* ==========================================================================
   2. VARIABLES DE MARCA Y TOKENS
   ========================================================================== */
:root {
    /* Tipografías */
    --fs-h1: clamp(2rem, 4vw + 1rem, 3.5rem);
    --fs-h2: clamp(1.5rem, 2.5vw + 1rem, 2.5rem);
    /* ↑ Subido el tope para mejor legibilidad en desktop */
    --fs-body: clamp(1rem, 0.6vw + 0.9rem, 1.6rem);

    /* 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: Light, Dark, HC
   ==========================================================================
*/
/* LIGHT */
: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);

    /* Glass */
    --glass-bg: var(--glass-bg-light);
    --glass-border: var(--glass-border-light);

    /* Gradientes por modo */
    --btn-gradient: var(--btn-gradient-light);
    --btn-gradient-hover: var(--btn-gradient-hover-light);

    /* VisionOS surfaces */
    --v-surface: var(--v-surface-light);
    --v-surface-hover: var(--v-surface-hover-light);
    --v-footer-bg: var(--v-footer-bg-light);
    --v-hero-gradient: var(--v-hero-gradient-light);
}

/* DARK */
: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);

    --glass-bg: var(--glass-bg-dark);
    --glass-border: var(--glass-border-dark);

    --btn-gradient: var(--btn-gradient-dark);
    --btn-gradient-hover: var(--btn-gradient-hover-dark);

    --v-surface: var(--v-surface-dark);
    --v-surface-hover: var(--v-surface-hover-dark);
    --v-footer-bg: var(--v-footer-bg-dark);
    --v-hero-gradient: var(--v-hero-gradient-dark);
}

/* HIGH CONTRAST */
: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);

    --border-thickness: 2px;
    --text-strong: var(--text-hc);
    --bg-card: var(--bg-surface-hc);
    --icon-filter: brightness(3.5) saturate(3);

    /* En HC, botones sólidos y máximo contraste */
    --text-on-primary: var(--bg-surface-hc);
    --btn-gradient: var(--btn-gradient-hc);
    --btn-gradient-hover: var(--btn-gradient-hover-hc);

    --glass-bg: var(--glass-bg-hc);
    --glass-border: var(--glass-border-hc);

    --v-surface: var(--v-surface-hc);
    --v-surface-hover: var(--v-surface-hover-hc);
    --v-footer-bg: var(--v-footer-bg-hc);
    --v-hero-gradient: var(--v-hero-gradient-hc);
}



/* ==========================================================================
   4. TIPOGRAFÍA LOGO
   ========================================================================== */


/* ==========================================================================
   5. COMPONENTES BASE: Botones, Inputs, Labels
   ========================================================================== */

/* 5.1 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;
    text-align: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.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;
}

/* 5.2 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);
}


/* 5.3 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;
}

.language-selector {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.select-default {
    padding: .5rem .75rem;
    font-size: .9rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-accent);
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color .3s ease, color .3s ease;
}

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

.language-selector i {
    font-size: 1.25rem;
    color: var(--text-label);
}

html[data-theme="dark"] .language-selector i {
    color: var(--text-inverse);
}

.select-default:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.select-default:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

select:hover {
    background-color: var(--color-primary);
    color: var(--text-on-primary);
    cursor: pointer;
}

/* ==========================================================================
   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: var(--text-on-primary);
}

.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: var(--text-on-primary);
}

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

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

/* Contenedor hero y vídeo a pantalla completa */
#hero {
    position: relative;
    min-height: 65svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

#hero-video {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    max-width: none;
    z-index: 0;
}

/* Panel de cristal (estilo Apple, gris translúcido) */
.hero-glass {
    position: relative;
    z-index: 2;
    max-width: 48rem;
    margin-inline: auto;
    padding: var(--space-lg);
    background-color: var(--glass-bg);
    /* << */
    -webkit-backdrop-filter: blur(22px) saturate(1.1);
    backdrop-filter: blur(22px) saturate(1.1);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--glass-border);
    /* << */
}

.hero-glass h1 {
    font-size: var(--fs-h1);
    line-height: 1.15;
    margin: 0;
    color: var(--text-color);
}

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

.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;
    }
}

/* ==========================================================================
   17. LABELS FLOTANTES ACCESIBLES
   ========================================================================== */
.label-accessible {
    position: absolute;
    left: .75rem;
    top: .625rem;
    color: var(--text-label);
    font-size: .875rem;
    pointer-events: none;
    transition: all 0.2s ease;
}

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

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

/* ==========================================================================
   18. BOTONES ACCESIBLES
   ========================================================================== */

.btn-brand,
.btn-primary,
.btn-accessible {
    display: inline-block;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius);
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-on-primary);
    background: var(--btn-gradient);
    min-height: 44px;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
    text-align: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

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

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

.input-brand,
.input-primary {
    width: 100%;
    border: 1px solid var(--input-border);
    border-radius: var(--radius);
    padding: 1.25rem 0.75rem 0.5rem;
    background: var(--input-bg);
    color: var(--text-color);
    font-size: 1rem;
    line-height: 1.5;
    transition: all 0.3s ease;
}

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

.label-brand,
.label-primary,
.label-accessible {
    position: absolute;
    left: 0.75rem;
    top: 0.625rem;
    color: var(--text-label);
    font-size: 0.875rem;
    pointer-events: none;
    transition: all 0.2s ease;
}

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

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

/* ==========================================================================
   19. CONTENIDO RICO (.prose)
   ========================================================================== */

.prose {
    max-width: 75ch;
    line-height: 1.7;
    font-size: 1rem;
    color: var(--text-color);
}

.prose h1,
.prose h2,
.prose h3 {
    font-family: var(--font-headings);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
    font-weight: 600;
}

.prose h1 {
    font-size: var(--fs-h1);
}

.prose h2 {
    font-size: var(--fs-h2);
}

.prose h3 {
    font-size: 1.5rem;
}

.prose p {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-md);
}

.prose ul,
.prose ol {
    padding-left: var(--space-md);
    margin-top: var(--space-sm);
    margin-bottom: var(--space-md);
}

.prose li {
    margin-bottom: .5rem;
}

.prose a {
    color: var(--color-primary);
    text-decoration: underline;
}

.prose strong {
    font-weight: 600;
}

.prose img,
.prose video {
    max-width: 100%;
    border-radius: var(--radius);
    margin: var(--space-md) 0;
    display: block;
}

/* ==========================================================================
   20. ANIMACIONES Y REDUCED MOTION
   ========================================================================== */

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

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   21. FOCUS-VISIBLE Y ACCESIBILIDAD AVANZADA
   ========================================================================== */

:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
    outline: none;
}

/* ==========================================================================
   22. VISIONOS / SPATIAL NAVIGATION
   ========================================================================== */

/* Contexto: Estas reglas se activan cuando se detecta un entorno espacial como VisionOS.
   Puedes combinarlas con clases condicionales como html[data-platform="visionos"]
   para adaptar interfaces a espacios inmersivos, incluyendo mayor escala, spacing,
   y uso de transparencias o efectos como blur. */

/* VisionOS / Spatial */
html[data-platform="visionos"] body {
    font-size: 1.1rem;
    line-height: 1.75;
    letter-spacing: 0.02em;
}

html[data-platform="visionos"] .container {
    max-width: 1400px;
    padding: 0 var(--space-lg);
}

html[data-platform="visionos"] .card {
    background: var(--v-surface);
    backdrop-filter: blur(18px);
    border-radius: 1.5rem;
    padding: var(--space-lg);
    box-shadow: var(--shadow-lg);
}

html[data-platform="visionos"] .btn-brand,
html[data-platform="visionos"] .btn-primary {
    transform: scale(1.1);
    border-radius: 1rem;
    font-size: 1.1rem;
}

html[data-platform="visionos"] .hero {
    padding: var(--space-xl) var(--space-xl);
    border-radius: 2rem;
    background: var(--v-hero-gradient);
    backdrop-filter: blur(12px);
}

html[data-platform="visionos"] .nav-link {
    font-size: 1.1rem;
    padding: 0.75rem 1.25rem;
    border-radius: 1rem;
    background: var(--v-surface);
    transition: background .3s ease;
}

html[data-platform="visionos"] .nav-link:hover {
    background: var(--v-surface-hover);
}

html[data-platform="visionos"] .footer {
    font-size: 1rem;
    line-height: 1.6;
    padding: var(--space-xl);
    background: var(--v-footer-bg);
}

html[data-platform="visionos"] .tag {
    font-size: 1rem;
    padding: .4rem .8rem;
    border-radius: 1rem;
}


/* ==========================================================================
   23. Theme 
   ========================================================================== */

.btn-theme-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius);
    border: 1px solid var(--color-accent);
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
    min-height: 44px;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
}

.btn-theme-icon i,
.btn-theme-icon svg {
    font-size: 1.25rem;
    display: inline-block;
    vertical-align: middle;
}

.btn-theme-icon:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.btn-theme-icon:hover {
    background-color: var(--color-primary);
    color: var(--text-on-primary);
}

[data-env="visionos"] .btn-theme-icon {
    font-size: 1.1rem;
    transform: scale(1.05);
    border-radius: 1rem;
}

/* Fallback para navegadores sin soporte de [data-platform="visionos"]:
   Puedes definir condiciones desde el backend o JS para agregar esta clase
dinámicamente en entorno VisionPro. */