/* ============================================================
   DESIGN SYSTEM — Daniel Briones · brionescreativo.com
   Versión 2.0 · Warm & Humano · 2026
   
   Dirección: Editorial warm, cercano pero profesional
   Tipografía: Fraunces (display) + DM Sans (UI)
   Acción: Terracota cálido — diferenciador, memorable, humano
   Dark mode: prefers-color-scheme automático
   Animaciones: Nivel medio — reveal + parallax suave
   Sombras: Muy sutiles, solo para profundidad
   Radios: 4–8px, moderno pero serio
   
   Estructura:
   01. Imports
   02. Primitivos (escala base)
   03. Tokens semánticos — Light
   04. Tokens semánticos — Dark
   05. Tipografía
   06. Espaciado
   07. Radios
   08. Sombras
   09. Bordes
   10. Transiciones y easing
   11. Animaciones
   12. Grid y layout
   13. Componentes — Botones
   14. Componentes — Cards
   15. Componentes — Navegación
   16. Componentes — Badges
   17. Componentes — Formularios
   18. Accesibilidad
   19. Utilidades
   ============================================================ */


/* ============================================================
   01. IMPORTS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,300;1,9..144,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&display=swap');

/*
  Fraunces — serif variable con eje óptico y eje "wonky"
  Personalidad: cálida, literaria, sofisticada sin ser fría
  Uso: display, headings grandes, citas editoriales
  
  DM Sans — sans-serif geométrica humanista
  Personalidad: limpia, amigable, técnicamente precisa
  Uso: body, UI, labels, captions, botones
  
  Por qué esta combinación:
  Serif expresivo + sans geométrico es la pareja que
  define la estética "warm editorial" de 2026. 
  Fraunces aporta carácter y humanidad.
  DM Sans aporta claridad y modernidad.
  Juntas crean tensión visual — exactamente lo que necesita
  un portafolio que quiere ser recordado.
*/


/* ============================================================
   02. PRIMITIVOS — Escala de color base
   (No usar directamente en componentes — solo en tokens)
   ============================================================ */

:root {
    /* --- Neutros cálidos (base de toda la paleta) --- */
    --primitive-stone-0: #ffffff;
    --primitive-stone-50: #faf9f7;
    --primitive-stone-100: #f5f3f0;
    --primitive-stone-150: #ede9e4;
    --primitive-stone-200: #e4dfd9;
    --primitive-stone-300: #cec7bf;
    --primitive-stone-400: #b0a89e;
    --primitive-stone-500: #8c837a;
    --primitive-stone-600: #6b6460;
    --primitive-stone-700: #4a4441;
    --primitive-stone-800: #2e2a28;
    --primitive-stone-900: #1a1714;
    --primitive-stone-950: #0e0c0a;

    /* --- Terracota — color de acción principal --- */
    /*
    Por qué terracota:
    - Cálido y humano — perfecto para estilo "warm & humano"
    - Diferenciador — el 95% de portafolios usa azul, verde o morado
    - Memorable — los reclutadores lo recuerdan
    - Versátil — funciona en light y dark mode
    - Profesional — no es juguetón, es intencional
  */
    --primitive-terra-50: #fdf4f0;
    --primitive-terra-100: #fae5dc;
    --primitive-terra-200: #f4c9b8;
    --primitive-terra-300: #eca98e;
    --primitive-terra-400: #e28060;
    --primitive-terra-500: #d4603a;
    /* ← acción principal light */
    --primitive-terra-600: #b84e2c;
    --primitive-terra-700: #963d20;
    --primitive-terra-800: #6e2d17;
    --primitive-terra-900: #4a1e0f;

    /* --- Terracota suave para dark mode --- */
    --primitive-terra-dark-300: #f0a882;
    --primitive-terra-dark-400: #e88a5e;
    /* ← acción principal dark */
    --primitive-terra-dark-500: #d4603a;

    /* --- Verde sage — acento secundario opcional --- */
    --primitive-sage-100: #edf2ed;
    --primitive-sage-200: #d4e3d4;
    --primitive-sage-500: #5a8a5a;
    --primitive-sage-600: #447044;

    /* --- Amarillo cálido — status warning --- */
    --primitive-amber-100: #fef8ec;
    --primitive-amber-500: #d4a017;

    /* --- Rojo cálido — status error --- */
    --primitive-red-100: #fdf0ee;
    --primitive-red-500: #c0392b;

    /* --- Verde éxito --- */
    --primitive-green-100: #edf7f0;
    --primitive-green-500: #2d7d3a;
}


/* ============================================================
   03. TOKENS SEMÁNTICOS — LIGHT MODE
   ============================================================ */

:root {
    /* ---- Fondos ---- */
    --color-bg-canvas: var(--primitive-stone-0);
    /* Fondo base del sitio */
    --color-bg-primary: var(--primitive-stone-0);
    /* Superficies principales */
    --color-bg-secondary: var(--primitive-stone-50);
    /* Fondos alternos, cards */
    --color-bg-tertiary: var(--primitive-stone-100);
    /* Fondos recesivos */
    --color-bg-quaternary: var(--primitive-stone-150);
    /* Fondos más profundos */
    --color-bg-inverse: var(--primitive-stone-900);
    /* Fondos invertidos */
    --color-bg-overlay: rgba(26, 23, 20, 0.6);
    /* Overlays modales */

    /* ---- Texto ---- */
    --color-text-primary: var(--primitive-stone-900);
    /* Títulos, texto principal */
    --color-text-secondary: var(--primitive-stone-600);
    /* Descripciones, subtítulos */
    --color-text-tertiary: var(--primitive-stone-500);
    /* Texto de apoyo */
    --color-text-muted: var(--primitive-stone-400);
    /* Placeholders, desactivado */
    --color-text-inverse: var(--primitive-stone-0);
    /* Texto sobre fondos oscuros */
    --color-text-accent: var(--primitive-terra-500);
    /* Texto con énfasis de marca */

    /* ---- Bordes ---- */
    --color-border-subtle: var(--primitive-stone-150);
    /* Separadores imperceptibles */
    --color-border-default: var(--primitive-stone-200);
    /* Bordes estándar */
    --color-border-strong: var(--primitive-stone-300);
    /* Bordes con presencia */
    --color-border-focus: var(--primitive-terra-500);
    /* Estado focus */

    /* ---- Acción — Terracota ---- */
    --color-action-primary: var(--primitive-terra-500);
    /* #d4603a */
    --color-action-primary-hover: var(--primitive-terra-600);
    /* Hover más oscuro */
    --color-action-primary-active: var(--primitive-terra-700);
    /* Active/pressed */
    --color-action-primary-subtle: var(--primitive-terra-100);
    /* Fondo sutil de acción */
    --color-action-primary-text: var(--primitive-stone-0);
    /* Texto sobre botón primario */

    /* ---- Acción secundaria ---- */
    --color-action-secondary: var(--primitive-stone-900);
    --color-action-secondary-hover: var(--primitive-stone-800);

    /* ---- Estados ---- */
    --color-success: var(--primitive-green-500);
    --color-success-bg: var(--primitive-green-100);
    --color-warning: var(--primitive-amber-500);
    --color-warning-bg: var(--primitive-amber-100);
    --color-error: var(--primitive-red-500);
    --color-error-bg: var(--primitive-red-100);

    /* ---- Superficies especiales ---- */
    --color-surface-raised: var(--primitive-stone-0);
    /* Cards elevadas */
    --color-surface-overlay: var(--primitive-stone-50);
    /* Tooltips, dropdowns */
    --color-surface-recessed: var(--primitive-stone-100);
    /* Inputs, áreas recesivas */
}


/* ============================================================
   04. TOKENS SEMÁNTICOS — DARK MODE
   ============================================================ */

@media (prefers-color-scheme: dark) {
    :root {
        /* ---- Fondos ---- */
        --color-bg-canvas: var(--primitive-stone-950);
        /* #0e0c0a */
        --color-bg-primary: var(--primitive-stone-950);
        --color-bg-secondary: var(--primitive-stone-900);
        /* #1a1714 */
        --color-bg-tertiary: var(--primitive-stone-800);
        /* #2e2a28 */
        --color-bg-quaternary: var(--primitive-stone-700);
        --color-bg-inverse: var(--primitive-stone-50);
        --color-bg-overlay: rgba(10, 8, 6, 0.75);

        /* ---- Texto ---- */
        --color-text-primary: var(--primitive-stone-50);
        /* #faf9f7 */
        --color-text-secondary: var(--primitive-stone-300);
        /* #cec7bf */
        --color-text-tertiary: var(--primitive-stone-400);
        /* #b0a89e */
        --color-text-muted: var(--primitive-stone-500);
        /* #8c837a */
        --color-text-inverse: var(--primitive-stone-900);
        --color-text-accent: var(--primitive-terra-dark-400);

        /* ---- Bordes ---- */
        --color-border-subtle: rgba(255, 255, 255, 0.06);
        --color-border-default: rgba(255, 255, 255, 0.10);
        --color-border-strong: rgba(255, 255, 255, 0.18);
        --color-border-focus: var(--primitive-terra-dark-400);

        /* ---- Acción — Terracota (más luminosa en dark) ---- */
        --color-action-primary: var(--primitive-terra-dark-400);
        /* #e88a5e */
        --color-action-primary-hover: var(--primitive-terra-dark-300);
        --color-action-primary-active: var(--primitive-terra-500);
        --color-action-primary-subtle: rgba(212, 96, 58, 0.15);
        --color-action-primary-text: var(--primitive-stone-950);

        /* ---- Acción secundaria ---- */
        --color-action-secondary: var(--primitive-stone-50);
        --color-action-secondary-hover: var(--primitive-stone-0);

        /* ---- Superficies ---- */
        --color-surface-raised: var(--primitive-stone-900);
        --color-surface-overlay: var(--primitive-stone-800);
        --color-surface-recessed: rgba(0, 0, 0, 0.3);
    }
}


/* ============================================================
   05. TIPOGRAFÍA
   ============================================================ */

:root {
    /* ---- Familias ---- */
    --font-display: 'DM Sans', system-ui, sans-serif e;
    /* Títulos expresivos */
    --font-body: 'DM Sans', system-ui, sans-serif;
    /* UI, body, labels */
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

    /* ---- Escala — Display (Fraunces) ---- */
    --text-display-2xl: clamp(3.5rem, 9vw, 6rem);
    /* Hero principal */
    --text-display-xl: clamp(2.75rem, 7vw, 4.5rem);
    /* Sección hero */
    --text-display-l: clamp(2.25rem, 5.5vw, 3.5rem);
    /* Títulos de página */
    --text-display-m: clamp(1.875rem, 4.5vw, 2.75rem);
    /* Subtítulos grandes */

    /* ---- Escala — Headings (DM Sans) ---- */
    --text-heading-xl: clamp(1.75rem, 4vw, 2.25rem);
    /* H1 de sección */
    --text-heading-l: clamp(1.5rem, 3.5vw, 1.875rem);
    /* H2 */
    --text-heading-m: clamp(1.25rem, 3vw, 1.5rem);
    /* H3 */
    --text-heading-s: clamp(1.1rem, 2.5vw, 1.25rem);
    /* H4 */
    --text-heading-xs: clamp(1rem, 2vw, 1.125rem);
    /* H5, H6 */

    /* ---- Escala — Body (DM Sans) ---- */
    --text-body-xl: clamp(1.125rem, 2.5vw, 1.25rem);
    /* Intro paragraphs */
    --text-body-l: clamp(1rem, 2vw, 1.125rem);
    /* Body grande */
    --text-body-m: clamp(0.9375rem, 1.8vw, 1rem);
    /* Body estándar */
    --text-body-s: clamp(0.875rem, 1.6vw, 0.9375rem);
    /* Body pequeño */
    --text-body-xs: 0.8125rem;
    /* Captions */

    /* ---- Escala — UI ---- */
    --text-label-l: 0.875rem;
    /* Labels grandes */
    --text-label-m: 0.8125rem;
    /* Labels estándar */
    --text-label-s: 0.75rem;
    /* Labels pequeños, badges */
    --text-code: 0.875rem;
    /* Código inline */

    /* ---- Pesos ---- */
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* ---- Line heights ---- */
    --leading-none: 1;
    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;
    --leading-loose: 1.8;

    /* ---- Letter spacing ---- */
    --tracking-tighter: -0.03em;
    --tracking-tight: -0.02em;
    --tracking-snug: -0.01em;
    --tracking-normal: 0;
    --tracking-wide: 0.04em;
    --tracking-wider: 0.08em;
    --tracking-widest: 0.12em;
}

/* Estilos base del documento */
html {
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-body-m);
    line-height: var(--leading-relaxed);
    color: var(--color-text-primary);
    background-color: var(--color-bg-canvas);
}

/* Clases tipográficas reutilizables */
.text-display-2xl {
    font-family: var(--font-display);
    font-size: var(--text-display-2xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    font-weight: var(--font-semibold);
}

.text-display-xl {
    font-family: var(--font-display);
    font-size: var(--text-display-xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    font-weight: var(--font-semibold);
}

.text-display-l {
    font-family: var(--font-display);
    font-size: var(--text-display-l);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    font-weight: var(--font-medium);
}

.text-display-m {
    font-family: var(--font-display);
    font-size: var(--text-display-m);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-snug);
    font-weight: var(--font-medium);
}

.text-heading-xl {
    font-family: var(--font-body);
    font-size: var(--text-heading-xl);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-snug);
    font-weight: var(--font-semibold);
}

.text-heading-l {
    font-family: var(--font-body);
    font-size: var(--text-heading-l);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-snug);
    font-weight: var(--font-semibold);
}

.text-heading-m {
    font-family: var(--font-body);
    font-size: var(--text-heading-m);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-snug);
    font-weight: var(--font-medium);
}

.text-heading-s {
    font-family: var(--font-body);
    font-size: var(--text-heading-s);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-snug);
    font-weight: var(--font-medium);
}

.text-heading-xs {
    font-family: var(--font-body);
    font-size: var(--text-heading-xs);
    line-height: var(--leading-normal);
    font-weight: var(--font-medium);
}

.text-body-xl {
    font-size: var(--text-body-xl);
    line-height: var(--leading-relaxed);
    font-weight: var(--font-regular);
}

.text-body-l {
    font-size: var(--text-body-l);
    line-height: var(--leading-relaxed);
    font-weight: var(--font-regular);
}

.text-body-m {
    font-size: var(--text-body-m);
    line-height: var(--leading-relaxed);
    font-weight: var(--font-regular);
}

.text-body-s {
    font-size: var(--text-body-s);
    line-height: var(--leading-normal);
    font-weight: var(--font-regular);
}

.text-body-xs {
    font-size: var(--text-body-xs);
    line-height: var(--leading-normal);
    font-weight: var(--font-regular);
}

.text-label-l {
    font-size: var(--text-label-l);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-normal);
}

.text-label-m {
    font-size: var(--text-label-m);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-normal);
}

.text-label-s {
    font-size: var(--text-label-s);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.text-caption {
    font-size: var(--text-label-s);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Texto con énfasis del display font en párrafo (efecto editorial) */
.text-highlight {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: var(--font-light);
    color: var(--color-text-accent);
}

/* Color shortcuts */
.color-text-primary {
    color: var(--color-text-primary);
}

.color-text-secondary {
    color: var(--color-text-secondary);
}

.color-text-muted {
    color: var(--color-text-muted);
}

.color-text-accent {
    color: var(--color-text-accent);
}

.color-text-inverse {
    color: var(--color-text-inverse);
}


/* ============================================================
   06. ESPACIADO
   ============================================================ */

:root {
    /* ---- Escala base (múltiplos de 4px) ---- */
    --space-0: 0px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 40px;
    --space-8: 48px;
    --space-9: 64px;
    --space-10: 80px;
    --space-11: 96px;
    --space-12: 120px;
    --space-13: 160px;
    --space-14: 200px;

    /* ---- Tokens semánticos de espaciado ---- */
    --space-section: var(--space-12);
    /* Separación entre secciones grandes */
    --space-section-sm: var(--space-10);
    /* Secciones compactas */
    --space-component: var(--space-8);
    /* Entre componentes */
    --space-element: var(--space-5);
    /* Entre elementos dentro de componente */
    --space-inline: var(--space-3);
    /* Entre elementos en línea */
    --space-inset: var(--space-6);
    /* Padding interior de cards */
    --space-inset-sm: var(--space-4);
    /* Padding interior compacto */
    --space-inset-lg: var(--space-9);
    /* Padding interior generoso */

    /* ---- Layout ---- */
    --container-width: 90%;
    --container-narrow: 780px;
    --container-wide: 1440px;
    --nav-container-width: 90%;
    --nav-height: 70px;
}

@media (min-width: 1024px) {
    :root {
        --container-width: 80%;
        --nav-container-width: 80%;
    }
}


/* ============================================================
   07. RADIOS DE BORDE
   ============================================================ */

:root {
    --radius-none: 0px;
    --radius-xs: 2px;
    /* Badges, tags pequeños */
    --radius-sm: 4px;
    /* Botones, inputs, chips */
    --radius-md: 6px;
    /* Cards pequeñas, tooltips */
    --radius-lg: 8px;
    /* Cards estándar */
    --radius-xl: 12px;
    /* Cards grandes, modales */
    --radius-2xl: 16px;
    /* Secciones, contenedores */
    --radius-full: 9999px;
    /* Pills, avatares */

    /* Semánticos */
    --radius-button: var(--radius-sm);
    --radius-card: var(--radius-lg);
    --radius-input: var(--radius-sm);
    --radius-badge: var(--radius-full);
    --radius-modal: var(--radius-xl);
    --radius-avatar: var(--radius-full);
}


/* ============================================================
   08. SOMBRAS — Muy sutiles, solo para profundidad
   ============================================================ */

:root {
    /* Sombras cálidas (tinte sepia, no negro puro) */
    --shadow-color: 24deg 10% 15%;
    /* HSL para sombras cálidas */

    --shadow-xs:
        0 1px 2px hsl(var(--shadow-color) / 0.04);

    --shadow-sm:
        0 1px 3px hsl(var(--shadow-color) / 0.05),
        0 1px 2px hsl(var(--shadow-color) / 0.03);

    --shadow-md:
        0 4px 8px hsl(var(--shadow-color) / 0.05),
        0 2px 4px hsl(var(--shadow-color) / 0.03);

    --shadow-lg:
        0 10px 20px hsl(var(--shadow-color) / 0.06),
        0 4px 8px hsl(var(--shadow-color) / 0.03);

    --shadow-xl:
        0 20px 40px hsl(var(--shadow-color) / 0.07),
        0 8px 16px hsl(var(--shadow-color) / 0.03);

    /* Sombra de elevación para hover */
    --shadow-hover:
        0 16px 32px hsl(var(--shadow-color) / 0.08),
        0 6px 12px hsl(var(--shadow-color) / 0.04);

    /* Sombra de foco (acción) */
    --shadow-focus:
        0 0 0 3px var(--color-action-primary-subtle);

    /* Sombra interna para inputs */
    --shadow-inset:
        inset 0 1px 3px hsl(var(--shadow-color) / 0.06);
}

@media (prefers-color-scheme: dark) {
    :root {
        --shadow-color: 24deg 10% 5%;
        --shadow-xs: 0 1px 2px hsl(var(--shadow-color) / 0.20);
        --shadow-sm: 0 1px 3px hsl(var(--shadow-color) / 0.25), 0 1px 2px hsl(var(--shadow-color) / 0.15);
        --shadow-md: 0 4px 8px hsl(var(--shadow-color) / 0.30), 0 2px 4px hsl(var(--shadow-color) / 0.20);
        --shadow-lg: 0 10px 20px hsl(var(--shadow-color) / 0.35), 0 4px 8px hsl(var(--shadow-color) / 0.20);
        --shadow-xl: 0 20px 40px hsl(var(--shadow-color) / 0.40), 0 8px 16px hsl(var(--shadow-color) / 0.25);
        --shadow-hover: 0 16px 32px hsl(var(--shadow-color) / 0.45), 0 6px 12px hsl(var(--shadow-color) / 0.30);
        --shadow-focus: 0 0 0 3px rgba(232, 138, 94, 0.25);
    }
}


/* ============================================================
   09. BORDES
   ============================================================ */

:root {
    --border-width-thin: 1px;
    --border-width-base: 1.5px;
    --border-width-thick: 2px;

    /* Shortcuts semánticos */
    --border-subtle: var(--border-width-thin) solid var(--color-border-subtle);
    --border-default: var(--border-width-thin) solid var(--color-border-default);
    --border-strong: var(--border-width-base) solid var(--color-border-strong);
    --border-focus: var(--border-width-thick) solid var(--color-border-focus);
    --border-accent: var(--border-width-thick) solid var(--color-action-primary);
}


/* ============================================================
   10. TRANSICIONES Y EASING
   ============================================================ */

:root {
    /* ---- Duraciones ---- */
    --duration-instant: 50ms;
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;
    --duration-slower: 600ms;
    --duration-slowest: 800ms;
    --duration-reveal: 900ms;
    /* Para animaciones de entrada */
    --duration-page: 500ms;
    /* Transiciones de página */

    /* ---- Curvas de easing ---- */
    /* Ease out — entra rápido, frena suave (la más usada para UI) */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    /* Ease in-out — suave en ambos extremos */
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    /* Spring — rebote natural, para elementos que "llegan" */
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Sharp — rápido, para microfeedback inmediato */
    --ease-sharp: cubic-bezier(0.76, 0, 0.24, 1);
    /* Reveal — para animaciones de scroll */
    --ease-reveal: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* ---- Transitions comunes ---- */
    --transition-color: color var(--duration-fast) var(--ease-out),
        background-color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out);
    --transition-transform: transform var(--duration-slow) var(--ease-out);
    --transition-shadow: box-shadow var(--duration-slow) var(--ease-out);
    --transition-all: all var(--duration-normal) var(--ease-out);
    --transition-button: transform var(--duration-slow) var(--ease-sharp),
        box-shadow var(--duration-slow) var(--ease-out),
        background-color var(--duration-fast) var(--ease-out);
}


/* ============================================================
   11. ANIMACIONES — Nivel medio
   ============================================================ */

/* ---- Keyframes ---- */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes floatOrbs {
    0% {
        transform: translate(0px, 0px) scale(1);
    }

    50% {
        transform: translate(50px, 30px) scale(1.08);
    }

    100% {
        transform: translate(-30px, 15px) scale(0.94);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

/* ---- Reveal — scroll-triggered ---- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity var(--duration-reveal) var(--ease-reveal),
        transform var(--duration-reveal) var(--ease-reveal);
    will-change: opacity, transform;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Variantes de reveal */
.reveal--left {
    transform: translateX(-24px);
    opacity: 0;
}

.reveal--left.active {
    transform: translateX(0);
    opacity: 1;
}

.reveal--scale {
    transform: scale(0.96);
    opacity: 0;
}

.reveal--scale.active {
    transform: scale(1);
    opacity: 1;
}

/* Delays escalonados para grupos */
.reveal-group>*:nth-child(1) {
    transition-delay: 0ms;
}

.reveal-group>*:nth-child(2) {
    transition-delay: 80ms;
}

.reveal-group>*:nth-child(3) {
    transition-delay: 160ms;
}

.reveal-group>*:nth-child(4) {
    transition-delay: 240ms;
}

.reveal-group>*:nth-child(5) {
    transition-delay: 320ms;
}

.reveal-group>*:nth-child(6) {
    transition-delay: 400ms;
}

/* ---- Transición de página ---- */
.page-transition {
    animation: fadeIn var(--duration-page) var(--ease-out) both;
}

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

    .reveal,
    .reveal--left,
    .reveal--scale {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .reveal-group>* {
        transition-delay: 0ms !important;
    }
}


/* ============================================================
   12. GRID Y LAYOUT
   ============================================================ */

/* ---- Reset base ---- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ---- Container ---- */
.container {
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: 0;
}

.container--narrow {
    max-width: var(--container-narrow);
    margin-inline: auto;
    padding-inline: 0;
}

.container--wide {
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: 0;
}

/* ---- Main wrapper ---- */
.site-main {
    width: 100%;
}

/* ---- Secciones ---- */
.section {
    padding-block: var(--space-section);
}

.section--sm {
    padding-block: var(--space-section-sm);
}

.section--lg {
    padding-block: var(--space-13);
}

/* ---- Breakout full-width (rompe el contenedor) ---- */
.breakout {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* ---- Grid system ---- */
.grid {
    display: grid;
    gap: var(--space-6);
}

.grid--1col {
    grid-template-columns: 1fr;
}

.grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

.grid--3col {
    grid-template-columns: repeat(3, 1fr);
}

.grid--4col {
    grid-template-columns: repeat(4, 1fr);
}

/* Grid asimétrico editorial (240px sidebar + contenido) */
.grid--editorial {
    grid-template-columns: 240px 1fr;
    gap: var(--space-9);
    align-items: start;
}

/* Grid asimétrico hero (60/40) */
.grid--hero {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-8);
    align-items: center;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .grid--4col {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid--editorial {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .grid--hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {

    .grid--2col,
    .grid--3col,
    .grid--4col {
        grid-template-columns: 1fr;
    }

    .container,
    .container--narrow,
    .container--wide {
        padding-inline: 0;
    }
}

@media (max-width: 480px) {
    .section {
        padding-block: var(--space-10);
    }

    .section--sm {
        padding-block: var(--space-8);
    }
}


/* ============================================================
   13. COMPONENTES — BOTONES
   ============================================================ */

.btn {
    /* Base */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--space-5);
    height: 44px;
    /* WCAG 2.2 tap target mínimo */
    min-width: 44px;

    font-family: var(--font-body);
    font-size: var(--text-label-l);
    font-weight: var(--font-semibold);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;

    border: var(--border-width-thin) solid transparent;
    border-radius: var(--radius-button);
    cursor: pointer;
    user-select: none;

    transition: var(--transition-button);
    position: relative;
    overflow: hidden;
}

/* ---- Variante primaria — Terracota ---- */
.btn--primary {
    background-color: var(--color-action-primary);
    color: var(--color-action-primary-text);
    border-color: var(--color-action-primary);
}

.btn--primary:hover {
    background-color: var(--color-action-primary-hover);
    border-color: var(--color-action-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn--primary:active {
    background-color: var(--color-action-primary-active);
    transform: translateY(0);
    box-shadow: var(--shadow-xs);
}

/* ---- Variante secundaria — Outline ---- */
.btn--secondary {
    background-color: transparent;
    color: var(--color-text-primary);
    border-color: var(--color-border-strong);
}

.btn--secondary:hover {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-text-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn--secondary:active {
    transform: translateY(0);
}

/* ---- Variante ghost ---- */
.btn--ghost {
    background-color: transparent;
    color: var(--color-text-secondary);
    border-color: transparent;
}

.btn--ghost:hover {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

/* ---- Modificadores de tamaño ---- */
.btn--sm {
    height: 36px;
    padding: 0 var(--space-4);
    font-size: var(--text-label-m);
}

.btn--lg {
    height: 52px;
    padding: 0 var(--space-7);
    font-size: var(--text-body-m);
}

/* ---- Efecto roll (texto que sube en hover) ---- */
.btn--roll {
    padding: 0;
    overflow: hidden;
}

.btn--roll span {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-5);
    height: 100%;
    transition: transform var(--duration-slow) var(--ease-sharp);
}

.btn--roll::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-5);
    transform: translateY(100%);
    transition: transform var(--duration-slow) var(--ease-sharp);
}

.btn--roll:hover span,
.btn--roll:hover::before {
    transform: translateY(-100%);
}

/* ---- Focus visible (accesibilidad) ---- */
.btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-color: var(--color-border-focus);
}

/* ---- Estado desactivado ---- */
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}


/* ============================================================
   14. COMPONENTES — CARDS
   ============================================================ */

.card {
    background-color: var(--color-surface-raised);
    border: var(--border-default);
    border-radius: var(--radius-card);
    padding: var(--space-inset);
    transition:
        transform var(--duration-slow) var(--ease-out),
        box-shadow var(--duration-slow) var(--ease-out),
        border-color var(--duration-normal) var(--ease-out);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-color: var(--color-border-strong);
}

/* Card con acento de acción en hover */
.card--accent:hover {
    border-color: var(--color-action-primary);
}

/* Card recesiva */
.card--recessed {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-border-subtle);
}

/* Card de proyecto */
.card--project {
    display: flex;
    flex-direction: column;
    gap: var(--space-element);
    padding: 0;
    overflow: hidden;
}

.card--project .card__media {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-bg-tertiary);
    background-size: cover;
    background-position: center;
    transition: transform var(--duration-slower) var(--ease-out);
    overflow: hidden;
}

.card--project:hover .card__media {
    transform: scale(1.02);
}

.card--project .card__content {
    padding: var(--space-inset);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}


/* ============================================================
   15. COMPONENTES — NAVEGACIÓN
   ============================================================ */

.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--nav-height);
    background-color: color-mix(in srgb, var(--color-bg-canvas) 90%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: var(--border-subtle);
    transition: transform var(--duration-slow) var(--ease-out);
}

.header--hidden {
    transform: translateY(-100%);
}

.header__container {
    max-width: var(--nav-container-width);
    height: 100%;
    margin-inline: auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header__logo {
    font-family: var(--font-display);
    font-size: var(--text-heading-m);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    text-decoration: none;
    letter-spacing: var(--tracking-snug);
}

/* Nav links */
.nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.nav__link {
    position: relative;
    font-size: var(--text-body-s);
    font-weight: var(--font-medium);
    color: var(--color-text-secondary);
    text-decoration: none;
    padding-block: var(--space-2);
    transition: color var(--duration-fast) var(--ease-out);
}

.nav__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--color-action-primary);
    transition: width var(--duration-normal) var(--ease-out);
}

.nav__link:hover {
    color: var(--color-text-primary);
}

.nav__link:hover::after,
.nav__link.active::after {
    width: 100%;
}

.nav__link.active {
    color: var(--color-text-primary);
    font-weight: var(--font-semibold);
}

.nav__link:focus-visible {
    outline: none;
    color: var(--color-text-primary);
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-xs);
}

/* Mobile nav */
@media (max-width: 1024px) {
    .nav {
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        background-color: var(--color-bg-canvas);
        border-bottom: var(--border-subtle);
        z-index: 10000;
        max-height: calc(100vh - var(--nav-height));
        overflow-y: auto;
        opacity: 0;
        transform: translateY(-100%);
        pointer-events: none;
        transition:
            opacity var(--duration-normal) var(--ease-out),
            transform var(--duration-normal) var(--ease-out);
    }

    .nav--open {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .nav__link {
        font-size: var(--text-body-l);
        font-weight: var(--font-medium);
        padding: var(--space-4) var(--space-5);
        border-bottom: var(--border-subtle);
        color: var(--color-text-primary);
        opacity: 0;
        transform: translateY(-8px);
        transition:
            opacity var(--duration-normal) var(--ease-out),
            transform var(--duration-normal) var(--ease-out),
            background-color var(--duration-fast) var(--ease-out),
            color var(--duration-fast) var(--ease-out);
    }

    .nav__link::after {
        display: none;
    }

    .nav--open .nav__link {
        opacity: 1;
        transform: translateY(0);
    }

    .nav__link:hover,
    .nav__link:focus-visible {
        background-color: var(--color-bg-secondary);
        color: var(--color-action-primary);
    }

    .nav__link.active {
        background-color: color-mix(in srgb, var(--color-action-primary) 8%, transparent);
        color: var(--color-action-primary);
        font-weight: var(--font-semibold);
        border-left: 3px solid var(--color-action-primary);
        padding-left: calc(var(--space-5) - 3px);
    }

    .nav--open .nav__link:nth-child(1) {
        transition-delay: 40ms;
    }

    .nav--open .nav__link:nth-child(2) {
        transition-delay: 80ms;
    }

    .nav--open .nav__link:nth-child(3) {
        transition-delay: 120ms;
    }

    .nav--open .nav__link:nth-child(4) {
        transition-delay: 160ms;
    }

    .nav--open .nav__link:nth-child(5) {
        transition-delay: 200ms;
    }
}

/* Nav overlay (mobile) */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0);
    z-index: 9999;
    pointer-events: none;
    transition: background-color var(--duration-normal) var(--ease-out);
}

@media (max-width: 1024px) {
    .nav-overlay {
        display: block;
    }

    .nav--open~.nav-overlay {
        background-color: rgba(0, 0, 0, 0.2);
        pointer-events: auto;
    }
}


/* ============================================================
   16. COMPONENTES — BADGES Y TAGS
   ============================================================ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px var(--space-3);
    border-radius: var(--radius-badge);
    font-size: var(--text-label-s);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.4;
}

.badge--default {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    border: var(--border-subtle);
}

.badge--accent {
    background-color: var(--color-action-primary-subtle);
    color: var(--color-action-primary);
    border: 1px solid color-mix(in srgb, var(--color-action-primary) 20%, transparent);
}

.badge--outline {
    background-color: transparent;
    color: var(--color-text-muted);
    border: var(--border-default);
}


/* ============================================================
   17. COMPONENTES — FORMULARIOS
   ============================================================ */

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-label {
    font-size: var(--text-label-m);
    font-weight: var(--font-medium);
    color: var(--color-text-primary);
    letter-spacing: var(--tracking-snug);
}

.form-input,
.form-textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-body-m);
    color: var(--color-text-primary);
    background-color: var(--color-surface-recessed);
    border: var(--border-default);
    border-radius: var(--radius-input);
    outline: none;
    transition:
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out),
        background-color var(--duration-fast) var(--ease-out);
    box-shadow: var(--shadow-inset);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--color-text-muted);
}

.form-input:hover,
.form-textarea:hover {
    border-color: var(--color-border-strong);
}

.form-input:focus,
.form-textarea:focus {
    border-color: var(--color-border-focus);
    background-color: var(--color-bg-primary);
    box-shadow: var(--shadow-focus);
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
    line-height: var(--leading-relaxed);
}


/* ============================================================
   18. ACCESIBILIDAD
   ============================================================ */

/* Skip link */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    background: var(--color-action-primary);
    color: var(--color-action-primary-text);
    padding: var(--space-2) var(--space-4);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    font-size: var(--text-label-m);
    font-weight: var(--font-semibold);
    z-index: 9999;
    text-decoration: none;
    transition: top var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
    top: 0;
}

/* Focus visible global */
:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
}

/* Ocultar outline por defecto de focus en mouse */
:focus:not(:focus-visible) {
    outline: none;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ============================================================
   19. UTILIDADES
   ============================================================ */

/* ---- Display ---- */
.d-flex {
    display: flex;
}

.d-grid {
    display: grid;
}

.d-block {
    display: block;
}

.d-none {
    display: none;
}

.d-inline-flex {
    display: inline-flex;
}

/* ---- Flex ---- */
.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.gap-1 {
    gap: var(--space-1);
}

.gap-2 {
    gap: var(--space-2);
}

.gap-3 {
    gap: var(--space-3);
}

.gap-4 {
    gap: var(--space-4);
}

.gap-5 {
    gap: var(--space-5);
}

.gap-6 {
    gap: var(--space-6);
}

/* ---- Texto ---- */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.no-underline {
    text-decoration: none;
}

/* ---- Tamaño ---- */
.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.w-auto {
    width: auto;
}

/* ---- Overflow ---- */
.overflow-hidden {
    overflow: hidden;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

/* ---- Posición ---- */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.sticky {
    position: sticky;
}

/* ---- Responsive hidden/visible ---- */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .hide-desktop {
        display: none !important;
    }
}

/* ---- Separador visual ---- */
.divider {
    width: 100%;
    height: 1px;
    background-color: var(--color-border-default);
    border: none;
    margin-block: var(--space-6);
}

/* ---- No scroll (para modales/menú abierto) ---- */
.no-scroll {
    overflow: hidden;
}