/**
 * ============================================================
 * NOAH FRAMEWORK — CSS BASE
 * ============================================================
 * Agencia Noah — noah.uy
 * Versión: 1.0.0
 * Fecha: 2026-03-27
 *
 * ARQUITECTURA:
 * ─────────────────────────────────────────────────────────────
 * 1. CONFIGURACIÓN Y TOKENS PRIMITIVOS
 *    1.1 Colores primitivos (OKLCH)
 *    1.2 Tipografía primitiva
 *    1.3 Espaciado primitivo
 *
 * 2. TOKENS SEMÁNTICOS
 *    2.1 Colores semánticos
 *    2.2 Tipografía semántica
 *    2.3 Espaciado semántico
 *    2.4 Bordes y radios
 *    2.5 Sombras
 *    2.6 Transiciones
 *    2.7 Z-index
 *
 * 3. RESET BASE
 *
 * 4. ELEMENTOS HTML BASE
 *    4.1 Estructura
 *    4.2 Tipografía
 *    4.3 Links
 *    4.4 Imágenes y media
 *
 * 5. CLASES UTILITARIAS
 *    5.1 Layout (container, section)
 *    5.2 Grid
 *    5.3 Flexbox
 *    5.4 Tipografía
 *    5.5 Colores
 *    5.6 Espaciado
 *    5.7 Botones
 *    5.8 Cards
 *    5.9 Efectos visuales
 *    5.10 Accesibilidad
 *    5.11 Utilidades de posición y display
 *
 * 6. COMPONENTES BASE
 *    6.1 Navbar
 *    6.2 Hero
 *    6.3 Features / Cards
 *    6.4 Testimonials
 *    6.5 Stats
 *    6.6 CTA
 *    6.7 Footer
 *
 * 7. RESPONSIVE (mobile-first helpers)
 *
 * ─────────────────────────────────────────────────────────────
 * NOTAS DE USO:
 * - HEX input → conversión OKLCH interna automática vía panel
 * - Variables editables desde Noah Panel en WP Admin
 * - Compatible con Bricks Builder (Variable UI nativa en fase 2)
 * - WCAG AA compliant (contraste mínimo 4.5:1)
 * - Sin dependencias externas — CSS nativo puro
 * ============================================================
 */


/* ── LAYER ORDER DECLARATION ─────────────────────────────────
   Prioridad (menor → mayor): tokens → reset → base → components → utilities
   Estilos sin @layer (otros plugins de WP/Bricks) ganan automáticamente.
   Baseline 2022 — soporte 95%+ browsers.
   ─────────────────────────────────────────────────────────── */
@layer noah.tokens, noah.reset, noah.base, noah.components, noah.utilities;


/* ============================================================
   @layer noah.tokens — Tokens primitivos y semánticos
   ============================================================ */
@layer noah.tokens {


/* ============================================================
   1. CONFIGURACIÓN Y TOKENS PRIMITIVOS
   ============================================================ */

/**
 * 1.1 COLORES PRIMITIVOS — Sistema OKLCH
 * ─────────────────────────────────────────────────────────────
 * OKLCH = Lightness, Chroma, Hue
 * Ventaja sobre HEX/HSL: variantes perceptualmente uniformes,
 * mejor contraste WCAG automático, gama de color más amplia.
 *
 * CÓMO MODIFICAR DESDE EL PANEL:
 * El usuario ingresa un HEX → el panel convierte a OKLCH →
 * genera las 8 variantes automáticamente.
 *
 * ESCALA DE VARIANTES POR COLOR:
 * ultra-light → light → base → hover → semi-dark → dark → ultra-dark
 *
 * NOMENCLATURA OKLCH:
 * oklch( L%   C      H   )
 *        0-1  0-0.4  0-360
 */

:root {

  /* ── PRIMARIO ─────────────────────────────────────── */
  /* Valor base editable desde Noah Panel (HEX → OKLCH auto) */
  --noah-primary:            oklch(35% 0.18 250);   /* #1a1a2e equivalent */
  --noah-primary-hover:      oklch(42% 0.18 250);
  --noah-primary-ultra-light:oklch(95% 0.04 250);
  --noah-primary-light:      oklch(78% 0.12 250);
  --noah-primary-semi-light: oklch(60% 0.16 250);
  --noah-primary-semi-dark:  oklch(28% 0.18 250);
  --noah-primary-dark:       oklch(20% 0.16 250);
  --noah-primary-ultra-dark: oklch(12% 0.12 250);

  /* ── ACENTO / CTA ─────────────────────────────────── */
  --noah-accent:             oklch(55% 0.22 18);    /* #e94560 equivalent */
  --noah-accent-hover:       oklch(62% 0.22 18);
  --noah-accent-ultra-light: oklch(95% 0.05 18);
  --noah-accent-light:       oklch(75% 0.18 18);
  --noah-accent-semi-light:  oklch(65% 0.20 18);
  --noah-accent-semi-dark:   oklch(48% 0.22 18);
  --noah-accent-dark:        oklch(40% 0.20 18);
  --noah-accent-ultra-dark:  oklch(25% 0.15 18);

  /* ── NEUTROS ──────────────────────────────────────── */
  --noah-white:              oklch(100% 0 0);
  --noah-black:              oklch(5%   0 0);

  /* Escala de grises (9 pasos) */
  --noah-gray-50:            oklch(98% 0 0);
  --noah-gray-100:           oklch(95% 0 0);
  --noah-gray-200:           oklch(90% 0 0);
  --noah-gray-300:           oklch(82% 0 0);
  --noah-gray-400:           oklch(70% 0 0);
  --noah-gray-500:           oklch(58% 0 0);
  --noah-gray-600:           oklch(46% 0 0);
  --noah-gray-700:           oklch(34% 0 0);
  --noah-gray-800:           oklch(22% 0 0);
  --noah-gray-900:           oklch(12% 0 0);

  /* ── ESTADOS / FEEDBACK ───────────────────────────── */
  --noah-success:            oklch(60% 0.18 145);   /* verde */
  --noah-success-light:      oklch(92% 0.06 145);
  --noah-success-dark:       oklch(40% 0.16 145);

  --noah-warning:            oklch(72% 0.18 75);    /* amarillo */
  --noah-warning-light:      oklch(95% 0.06 75);
  --noah-warning-dark:       oklch(50% 0.16 75);

  --noah-danger:             oklch(58% 0.22 25);    /* rojo */
  --noah-danger-light:       oklch(93% 0.06 25);
  --noah-danger-dark:        oklch(40% 0.18 25);

  --noah-info:               oklch(58% 0.20 250);   /* azul */
  --noah-info-light:         oklch(93% 0.06 250);
  --noah-info-dark:          oklch(38% 0.18 250);


  /* ─────────────────────────────────────────────────────────
     1.2 TIPOGRAFÍA PRIMITIVA
     ─────────────────────────────────────────────────────────
     ESCALA TIPOGRÁFICA FLUIDA con clamp()
     Fórmula: clamp(min-size, preferred-size, max-size)
     El valor preferido usa vw para escalar suavemente entre
     el viewport mínimo (320px) y máximo (1440px).

     Nomenclatura: xs → sm → base → lg → xl → 2xl → 3xl → 4xl → 5xl
     Equivalencias aproximadas:
       xs   = 12-14px
       sm   = 14-16px
       base = 16-18px
       lg   = 18-20px
       xl   = 20-24px
       2xl  = 24-30px
       3xl  = 30-36px
       4xl  = 36-48px
       5xl  = 48-72px
  */

  /* Tamaños de texto fluidos */
  --noah-text-xs:    clamp(0.75rem,  0.70rem + 0.22vw,  0.875rem);   /* 12-14px */
  --noah-text-sm:    clamp(0.875rem, 0.82rem + 0.27vw,  1rem);        /* 14-16px */
  --noah-text-base:  clamp(1rem,     0.94rem + 0.27vw,  1.125rem);    /* 16-18px */
  --noah-text-lg:    clamp(1.125rem, 1.04rem + 0.38vw,  1.25rem);     /* 18-20px */
  --noah-text-xl:    clamp(1.25rem,  1.13rem + 0.55vw,  1.5rem);      /* 20-24px */
  --noah-text-2xl:   clamp(1.5rem,   1.32rem + 0.82vw,  1.875rem);    /* 24-30px */
  --noah-text-3xl:   clamp(1.875rem, 1.57rem + 1.37vw,  2.25rem);     /* 30-36px */
  --noah-text-4xl:   clamp(2.25rem,  1.75rem + 2.20vw,  3rem);        /* 36-48px */
  --noah-text-5xl:   clamp(3rem,     2.18rem + 3.57vw,  4.5rem);      /* 48-72px */

  /* Familias tipográficas (editables desde Noah Panel) */
  --noah-font-heading: 'Inter', system-ui, -apple-system, sans-serif;
  --noah-font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --noah-font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Pesos */
  --noah-weight-thin:      100;
  --noah-weight-light:     300;
  --noah-weight-regular:   400;
  --noah-weight-medium:    500;
  --noah-weight-semibold:  600;
  --noah-weight-bold:      700;
  --noah-weight-extrabold: 800;
  --noah-weight-black:     900;

  /* Interlineado (line-height) */
  --noah-leading-none:     1;
  --noah-leading-tight:    1.2;
  --noah-leading-snug:     1.375;
  --noah-leading-normal:   1.5;
  --noah-leading-relaxed:  1.625;
  --noah-leading-loose:    2;

  /* Espaciado entre letras (letter-spacing) */
  --noah-tracking-tighter: -0.05em;
  --noah-tracking-tight:   -0.025em;
  --noah-tracking-normal:   0em;
  --noah-tracking-wide:     0.025em;
  --noah-tracking-wider:    0.05em;
  --noah-tracking-widest:   0.15em;


  /* ─────────────────────────────────────────────────────────
     1.3 ESPACIADO PRIMITIVO — Escala matemática
     ─────────────────────────────────────────────────────────
     BASE: 1rem (16px)
     ESCALA: múltiplos de 0.25rem para valores pequeños,
             luego escala con factores 1.5x
     SECCIONES: escala fluida independiente para padding
                vertical de secciones completas
  */

  /* Escala base de espaciado (rem fijo) */
  --noah-space-px:   1px;
  --noah-space-0-5:  0.125rem;   /* 2px  */
  --noah-space-1:    0.25rem;    /* 4px  */
  --noah-space-1-5:  0.375rem;   /* 6px  */
  --noah-space-2:    0.5rem;     /* 8px  */
  --noah-space-2-5:  0.625rem;   /* 10px */
  --noah-space-3:    0.75rem;    /* 12px */
  --noah-space-3-5:  0.875rem;   /* 14px */
  --noah-space-4:    1rem;       /* 16px */
  --noah-space-5:    1.25rem;    /* 20px */
  --noah-space-6:    1.5rem;     /* 24px */
  --noah-space-7:    1.75rem;    /* 28px */
  --noah-space-8:    2rem;       /* 32px */
  --noah-space-9:    2.25rem;    /* 36px */
  --noah-space-10:   2.5rem;     /* 40px */
  --noah-space-12:   3rem;       /* 48px */
  --noah-space-14:   3.5rem;     /* 56px */
  --noah-space-16:   4rem;       /* 64px */
  --noah-space-20:   5rem;       /* 80px */
  --noah-space-24:   6rem;       /* 96px */
  --noah-space-28:   7rem;       /* 112px */
  --noah-space-32:   8rem;       /* 128px */
  --noah-space-36:   9rem;       /* 144px */
  --noah-space-40:   10rem;      /* 160px */
  --noah-space-48:   12rem;      /* 192px */
  --noah-space-56:   14rem;      /* 224px */
  --noah-space-64:   16rem;      /* 256px */

  /* Escala semántica con alias fluidos (clamp) */
  --noah-space-3xs:  clamp(0.25rem,  0.21rem + 0.18vw,  0.375rem);
  --noah-space-2xs:  clamp(0.375rem, 0.32rem + 0.27vw,  0.5rem);
  --noah-space-xs:   clamp(0.5rem,   0.43rem + 0.33vw,  0.75rem);
  --noah-space-sm:   clamp(0.75rem,  0.64rem + 0.49vw,  1rem);
  --noah-space-md:   clamp(1rem,     0.86rem + 0.66vw,  1.5rem);
  --noah-space-lg:   clamp(1.5rem,   1.29rem + 0.99vw,  2.25rem);
  --noah-space-xl:   clamp(2rem,     1.71rem + 1.32vw,  3rem);
  --noah-space-2xl:  clamp(3rem,     2.57rem + 1.98vw,  4.5rem);
  --noah-space-3xl:  clamp(4rem,     3.43rem + 2.64vw,  6rem);

  /* Espaciado de secciones (padding-block) */
  --noah-section-py-xs:  clamp(2rem,  3vw,  3rem);
  --noah-section-py-sm:  clamp(3rem,  5vw,  5rem);
  --noah-section-py-md:  clamp(4rem,  7vw,  7rem);    /* default */
  --noah-section-py-lg:  clamp(5rem,  9vw,  10rem);
  --noah-section-py-xl:  clamp(7rem, 12vw,  14rem);

  /* Gutter / padding horizontal de contenedores */
  --noah-gutter:     clamp(1rem, 5vw, 2rem);

}


/* ============================================================
   2. TOKENS SEMÁNTICOS
   ============================================================ */

:root {

  /* ─────────────────────────────────────────────────────────
     2.1 COLORES SEMÁNTICOS
     ─────────────────────────────────────────────────────────
     Mapean primitivos a roles de UI.
     Solo estos tokens se usan en componentes.
     Cambiar el mapping aquí afecta TODO el sistema.
  */

  /* Fondos */
  --noah-color-bg:           var(--noah-white);
  --noah-color-bg-alt:       var(--noah-gray-50);
  --noah-color-bg-elevated:  var(--noah-white);
  --noah-color-bg-sunken:    var(--noah-gray-100);
  --noah-color-bg-overlay:   rgba(10, 10, 10, 0.6);
  --noah-color-bg-inverse:   var(--noah-primary);

  /* Textos */
  --noah-color-text:         var(--noah-gray-800);
  --noah-color-text-muted:   var(--noah-gray-500);
  --noah-color-text-subtle:  var(--noah-gray-400);
  --noah-color-text-inverse: var(--noah-white);
  --noah-color-text-heading: var(--noah-gray-900);
  --noah-color-text-link:    var(--noah-accent);
  --noah-color-text-link-hover: var(--noah-accent-dark);

  /* Bordes */
  --noah-color-border:       var(--noah-gray-200);
  --noah-color-border-strong:var(--noah-gray-300);
  --noah-color-border-focus: var(--noah-accent);

  /* Brand */
  --noah-color-brand:        var(--noah-primary);
  --noah-color-brand-hover:  var(--noah-primary-hover);
  --noah-color-cta:          var(--noah-accent);
  --noah-color-cta-hover:    var(--noah-accent-hover);


  /* ─────────────────────────────────────────────────────────
     2.2 TIPOGRAFÍA SEMÁNTICA
     Aliases para roles específicos de UI
  */

  --noah-font-size-body:     var(--noah-text-base);
  --noah-font-size-small:    var(--noah-text-sm);
  --noah-font-size-caption:  var(--noah-text-xs);
  --noah-font-size-lead:     var(--noah-text-lg);
  --noah-font-size-eyebrow:  var(--noah-text-xs);
  --noah-font-size-label:    var(--noah-text-sm);

  --noah-font-size-h1:       var(--noah-text-5xl);
  --noah-font-size-h2:       var(--noah-text-4xl);
  --noah-font-size-h3:       var(--noah-text-3xl);
  --noah-font-size-h4:       var(--noah-text-2xl);
  --noah-font-size-h5:       var(--noah-text-xl);
  --noah-font-size-h6:       var(--noah-text-lg);

  --noah-line-height-heading: var(--noah-leading-tight);
  --noah-line-height-body:    var(--noah-leading-normal);
  --noah-line-height-lead:    var(--noah-leading-relaxed);

  --noah-letter-spacing-heading: var(--noah-tracking-tight);
  --noah-letter-spacing-eyebrow: var(--noah-tracking-widest);
  --noah-letter-spacing-body:    var(--noah-tracking-normal);


  /* ─────────────────────────────────────────────────────────
     2.3 ESPACIADO SEMÁNTICO
     Aliases para contextos específicos
  */

  /* Contenedores */
  --noah-container-max:       1280px;   /* Editable desde Noah Panel */
  --noah-container-wide:      1440px;
  --noah-container-narrow:    720px;
  --noah-container-prose:     65ch;

  /* Sección default */
  --noah-section-py:          var(--noah-section-py-md);
  --noah-section-px:          var(--noah-gutter);

  /* Componentes */
  --noah-card-padding:        var(--noah-space-8);
  --noah-card-padding-sm:     var(--noah-space-5);
  --noah-card-padding-lg:     var(--noah-space-12);

  --noah-btn-px:              var(--noah-space-6);
  --noah-btn-py:              var(--noah-space-3);
  --noah-btn-px-sm:           var(--noah-space-4);
  --noah-btn-py-sm:           var(--noah-space-2);
  --noah-btn-px-lg:           var(--noah-space-8);
  --noah-btn-py-lg:           var(--noah-space-4);

  --noah-input-px:            var(--noah-space-4);
  --noah-input-py:            var(--noah-space-3);

  --noah-gap-cards:           var(--noah-space-6);
  --noah-gap-sections:        var(--noah-space-md);


  /* ─────────────────────────────────────────────────────────
     2.4 BORDES Y RADIOS
  */

  --noah-border-width:        1px;
  --noah-border-width-2:      2px;
  --noah-border-width-4:      4px;
  --noah-border-style:        solid;
  --noah-border:              var(--noah-border-width) var(--noah-border-style) var(--noah-color-border);

  /* Radios fluidos */
  --noah-radius-none:         0;
  --noah-radius-xs:           clamp(0.125rem, 0.12rem + 0.05vw, 0.25rem);    /* 2-4px */
  --noah-radius-sm:           clamp(0.25rem,  0.22rem + 0.11vw, 0.375rem);   /* 4-6px */
  --noah-radius-md:           clamp(0.375rem, 0.33rem + 0.22vw, 0.5rem);     /* 6-8px */
  --noah-radius-lg:           clamp(0.5rem,   0.43rem + 0.33vw, 0.75rem);    /* 8-12px */
  --noah-radius-xl:           clamp(0.75rem,  0.65rem + 0.55vw, 1rem);       /* 12-16px */
  --noah-radius-2xl:          clamp(1rem,     0.86rem + 0.66vw, 1.5rem);     /* 16-24px */
  --noah-radius-3xl:          clamp(1.5rem,   1.29rem + 0.99vw, 2rem);       /* 24-32px */
  --noah-radius-full:         9999px;

  /* Aliases semánticos (editables desde Noah Panel) */
  --noah-radius-card:         var(--noah-radius-xl);
  --noah-radius-btn:          var(--noah-radius-md);
  --noah-radius-input:        var(--noah-radius-md);
  --noah-radius-badge:        var(--noah-radius-full);
  --noah-radius-avatar:       var(--noah-radius-full);


  /* ─────────────────────────────────────────────────────────
     2.5 SOMBRAS
     Usan oklch para coherencia con el sistema de color.
     El color de sombra es el primary ultra-dark con opacidad.
  */

  --noah-shadow-color:        oklch(12% 0.12 250 / 0.12);
  --noah-shadow-color-md:     oklch(12% 0.12 250 / 0.16);
  --noah-shadow-color-lg:     oklch(12% 0.12 250 / 0.20);

  --noah-shadow-xs:           0 1px 2px var(--noah-shadow-color);
  --noah-shadow-sm:           0 1px 3px var(--noah-shadow-color),
                              0 1px 2px oklch(12% 0.12 250 / 0.08);
  --noah-shadow-md:           0 4px 6px var(--noah-shadow-color-md),
                              0 2px 4px oklch(12% 0.12 250 / 0.08);
  --noah-shadow-lg:           0 10px 15px var(--noah-shadow-color-lg),
                              0 4px 6px var(--noah-shadow-color);
  --noah-shadow-xl:           0 20px 25px var(--noah-shadow-color-lg),
                              0 10px 10px var(--noah-shadow-color);
  --noah-shadow-2xl:          0 25px 50px oklch(12% 0.12 250 / 0.25);
  --noah-shadow-inner:        inset 0 2px 4px oklch(12% 0.12 250 / 0.08);
  --noah-shadow-none:         none;

  /* Alias semánticos */
  --noah-shadow-card:         var(--noah-shadow-md);
  --noah-shadow-card-hover:   var(--noah-shadow-lg);
  --noah-shadow-btn:          var(--noah-shadow-sm);
  --noah-shadow-dropdown:     var(--noah-shadow-xl);
  --noah-shadow-modal:        var(--noah-shadow-2xl);


  /* ─────────────────────────────────────────────────────────
     2.6 TRANSICIONES
  */

  --noah-duration-instant:    75ms;
  --noah-duration-fast:       150ms;
  --noah-duration-normal:     250ms;
  --noah-duration-slow:       350ms;
  --noah-duration-slower:     500ms;
  --noah-duration-slowest:    700ms;

  --noah-ease-linear:         linear;
  --noah-ease-in:             cubic-bezier(0.4, 0, 1, 1);
  --noah-ease-out:            cubic-bezier(0, 0, 0.2, 1);
  --noah-ease-in-out:         cubic-bezier(0.4, 0, 0.2, 1);
  --noah-ease-bounce:         cubic-bezier(0.34, 1.56, 0.64, 1);
  --noah-ease-smooth:         cubic-bezier(0.6, 0.4, 0, 1);   /* La firma de Core */

  /* Alias de transición completa para uso rápido */
  --noah-transition-fast:     all var(--noah-duration-fast) var(--noah-ease-out);
  --noah-transition-normal:   all var(--noah-duration-normal) var(--noah-ease-out);
  --noah-transition-slow:     all var(--noah-duration-slow) var(--noah-ease-out);
  --noah-transition-bounce:   all var(--noah-duration-slow) var(--noah-ease-bounce);
  --noah-transition-smooth:   all var(--noah-duration-normal) var(--noah-ease-smooth);


  /* ─────────────────────────────────────────────────────────
     2.7 Z-INDEX
     Escala predecible para evitar guerra de z-index
  */

  --noah-z-below:     -1;
  --noah-z-base:       0;
  --noah-z-raised:     10;
  --noah-z-dropdown:   100;
  --noah-z-sticky:     200;
  --noah-z-overlay:    300;
  --noah-z-modal:      400;
  --noah-z-popover:    500;
  --noah-z-tooltip:    600;
  --noah-z-toast:      700;
  --noah-z-top:        9999;

}

} /* end @layer noah.tokens */


/* ============================================================
   @layer noah.reset — Reset moderno
   ============================================================ */
@layer noah.reset {


/* ============================================================
   3. RESET BASE
   ============================================================
   Reset moderno y minimalista. Preserva comportamientos
   útiles del browser, elimina inconsistencias.
*/

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Mejora el rendering de fuentes en todos los OS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* Escala base — permite usar rem de forma intuitiva */
  font-size: 100%;   /* = 16px en la mayoría de browsers */

  /* Scroll suave nativo */
  scroll-behavior: smooth;

  /* Tabs accesibles */
  hanging-punctuation: first last;
}

body {
  font-family: var(--noah-font-body);
  font-size: var(--noah-font-size-body);
  line-height: var(--noah-line-height-body);
  color: var(--noah-color-text);
  background-color: var(--noah-color-bg);

  /* Mejora de texto en móvil */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /* Wrapping inteligente de texto */
  text-wrap: pretty;
}

/* Imágenes y media: responsivos por defecto */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Herencia tipográfica en formularios */
input,
button,
textarea,
select {
  font: inherit;
}

/* Evita overflow en textos largos */
p,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Headings: wrapping de título elegante */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/* Listas sin estilos por defecto cuando tienen role */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Reduce motion para usuarios que lo prefieren */
@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;
  }
}

} /* end @layer noah.reset */


/* ============================================================
   @layer noah.base — Elementos HTML base
   ============================================================ */
@layer noah.base {


/* ============================================================
   4. ELEMENTOS HTML BASE
   ============================================================ */

/* 4.1 ESTRUCTURA ─────────────────────────────────────────── */

main {
  display: block;   /* Compatibilidad IE11 */
  min-height: 50vh;
}

/* 4.2 TIPOGRAFÍA ─────────────────────────────────────────── */

h1 {
  font-family:    var(--noah-font-heading);
  font-size:      var(--noah-font-size-h1);
  font-weight:    var(--noah-weight-bold);
  line-height:    var(--noah-line-height-heading);
  letter-spacing: var(--noah-letter-spacing-heading);
  color:          var(--noah-color-text-heading);
}

h2 {
  font-family:    var(--noah-font-heading);
  font-size:      var(--noah-font-size-h2);
  font-weight:    var(--noah-weight-bold);
  line-height:    var(--noah-line-height-heading);
  letter-spacing: var(--noah-letter-spacing-heading);
  color:          var(--noah-color-text-heading);
}

h3 {
  font-family:    var(--noah-font-heading);
  font-size:      var(--noah-font-size-h3);
  font-weight:    var(--noah-weight-semibold);
  line-height:    var(--noah-leading-snug);
  color:          var(--noah-color-text-heading);
}

h4 {
  font-family:    var(--noah-font-heading);
  font-size:      var(--noah-font-size-h4);
  font-weight:    var(--noah-weight-semibold);
  line-height:    var(--noah-leading-snug);
  color:          var(--noah-color-text-heading);
}

h5 {
  font-family:    var(--noah-font-heading);
  font-size:      var(--noah-font-size-h5);
  font-weight:    var(--noah-weight-medium);
  line-height:    var(--noah-leading-normal);
  color:          var(--noah-color-text-heading);
}

h6 {
  font-family:    var(--noah-font-heading);
  font-size:      var(--noah-font-size-h6);
  font-weight:    var(--noah-weight-medium);
  line-height:    var(--noah-leading-normal);
  color:          var(--noah-color-text-muted);
}

p {
  font-size:   var(--noah-font-size-body);
  line-height: var(--noah-line-height-body);
  color:       var(--noah-color-text);
  max-width:   var(--noah-container-prose);
}

p + p {
  margin-top: var(--noah-space-4);
}

strong, b {
  font-weight: var(--noah-weight-semibold);
}

em, i {
  font-style: italic;
}

small {
  font-size: var(--noah-font-size-small);
}

/* 4.3 LINKS ──────────────────────────────────────────────── */

a {
  color:           var(--noah-color-text-link);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: var(--noah-transition-fast);
}

a:hover {
  color:           var(--noah-color-text-link-hover);
  text-decoration-color: currentColor;
}

a:focus-visible {
  outline:        2px solid var(--noah-color-border-focus);
  outline-offset: 3px;
  border-radius:  var(--noah-radius-xs);
}

/* 4.4 IMÁGENES Y MEDIA ───────────────────────────────────── */

img {
  /* Evita hueco fantasma bajo la imagen */
  vertical-align: middle;
  /* Asegura aspecto ratio correcto */
  height: auto;
}

figure {
  margin: 0;
}

figcaption {
  font-size:  var(--noah-font-size-small);
  color:      var(--noah-color-text-muted);
  margin-top: var(--noah-space-2);
}

/* Tablas */
table {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--noah-font-size-body);
}

th {
  font-weight: var(--noah-weight-semibold);
  text-align:  left;
  padding:     var(--noah-space-3) var(--noah-space-4);
  border-bottom: 2px solid var(--noah-color-border-strong);
  color:       var(--noah-color-text-heading);
}

td {
  padding:       var(--noah-space-3) var(--noah-space-4);
  border-bottom: 1px solid var(--noah-color-border);
  vertical-align: top;
}

/* Listas */
ul, ol {
  padding-left: var(--noah-space-6);
}

li {
  line-height: var(--noah-leading-relaxed);
}

li + li {
  margin-top: var(--noah-space-1);
}

/* Separador */
hr {
  border:       none;
  border-top:   1px solid var(--noah-color-border);
  margin-block: var(--noah-space-8);
}

/* Código */
code {
  font-family:      var(--noah-font-mono);
  font-size:        0.875em;
  background-color: var(--noah-gray-100);
  color:            var(--noah-primary);
  padding:          0.1em 0.4em;
  border-radius:    var(--noah-radius-xs);
}

pre {
  font-family:      var(--noah-font-mono);
  font-size:        var(--noah-text-sm);
  background-color: var(--noah-gray-900);
  color:            var(--noah-gray-100);
  padding:          var(--noah-space-6);
  border-radius:    var(--noah-radius-lg);
  overflow-x:       auto;
}

pre code {
  background: none;
  padding:    0;
  color:      inherit;
}

/* Blockquote */
blockquote {
  border-left: 4px solid var(--noah-color-cta);
  padding:     var(--noah-space-4) var(--noah-space-6);
  font-style:  italic;
  color:       var(--noah-color-text-muted);
}

/* Selección de texto */
::selection {
  background-color: var(--noah-accent-ultra-light);
  color:            var(--noah-primary-dark);
}

} /* end @layer noah.base */


/* ============================================================
   @layer noah.utilities — Clases utilitarias
   ============================================================ */
@layer noah.utilities {


/* ============================================================
   5. CLASES UTILITARIAS
   ============================================================ */

/* 5.1 LAYOUT ─────────────────────────────────────────────── */

/**
 * .noah-container
 * Contenedor centrado con padding horizontal y ancho máximo.
 * Usar para envolver el contenido de cada sección.
 */
.noah-container {
  width:          100%;
  max-width:      var(--noah-container-max);
  margin-inline:  auto;
  padding-inline: var(--noah-section-px);
}

.noah-container--wide {
  max-width: var(--noah-container-wide);
}

.noah-container--narrow {
  max-width: var(--noah-container-narrow);
}

.noah-container--prose {
  max-width: var(--noah-container-prose);
}

/**
 * .noah-section
 * Sección de página con padding vertical estándar.
 * Combinar con .noah-container para estructura completa.
 */
.noah-section {
  padding-block: var(--noah-section-py);
}

.noah-section--xs { padding-block: var(--noah-section-py-xs); }
.noah-section--sm { padding-block: var(--noah-section-py-sm); }
.noah-section--lg { padding-block: var(--noah-section-py-lg); }
.noah-section--xl { padding-block: var(--noah-section-py-xl); }

/* Variantes de fondo */
.noah-section--alt     { background-color: var(--noah-color-bg-alt); }
.noah-section--light   { background-color: var(--noah-color-bg); }
.noah-section--dark    { background-color: var(--noah-color-bg-inverse); color: var(--noah-color-text-inverse); }
.noah-section--accent  { background-color: var(--noah-color-cta); color: var(--noah-white); }


/* 5.2 GRID ───────────────────────────────────────────────── */

/**
 * Grillas automáticas responsivas.
 * Las columnas se adaptan automáticamente según el espacio disponible.
 * Sin media queries necesarias — CSS Grid hace el trabajo.
 */
.noah-grid {
  display: grid;
  gap:     var(--noah-gap-cards);
}

/* Grid auto-responsive — se adapta al contenido */
.noah-grid--auto-sm {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.noah-grid--auto-md {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.noah-grid--auto-lg {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

/* Grids de columnas fijas (responsivos en mobile) */
.noah-grid--2 { grid-template-columns: repeat(2, 1fr); }
.noah-grid--3 { grid-template-columns: repeat(3, 1fr); }
.noah-grid--4 { grid-template-columns: repeat(4, 1fr); }
.noah-grid--5 { grid-template-columns: repeat(5, 1fr); }
.noah-grid--6 { grid-template-columns: repeat(6, 1fr); }

/* Asimétricos */
.noah-grid--1-2 { grid-template-columns: 1fr 2fr; }
.noah-grid--2-1 { grid-template-columns: 2fr 1fr; }
.noah-grid--1-3 { grid-template-columns: 1fr 3fr; }
.noah-grid--3-1 { grid-template-columns: 3fr 1fr; }

/* Gap variants */
.noah-grid--gap-xs { gap: var(--noah-space-xs); }
.noah-grid--gap-sm { gap: var(--noah-space-sm); }
.noah-grid--gap-lg { gap: var(--noah-space-lg); }
.noah-grid--gap-xl { gap: var(--noah-space-xl); }


/* 5.3 FLEXBOX ────────────────────────────────────────────── */

.noah-flex          { display: flex; gap: var(--noah-space-4); }
.noah-inline-flex   { display: inline-flex; gap: var(--noah-space-4); }
.noah-flex--col     { flex-direction: column; }
.noah-flex--wrap    { flex-wrap: wrap; }
.noah-flex--center  { align-items: center; justify-content: center; }
.noah-flex--between { justify-content: space-between; }
.noah-flex--around  { justify-content: space-around; }
.noah-flex--end     { justify-content: flex-end; }
.noah-flex--align-start   { align-items: flex-start; }
.noah-flex--align-end     { align-items: flex-end; }
.noah-flex--align-center  { align-items: center; }
.noah-flex--align-stretch { align-items: stretch; }

/* Helpers de crecimiento */
.noah-flex-1    { flex: 1; }
.noah-flex-auto { flex: 1 1 auto; }
.noah-flex-none { flex: none; }


/* 5.4 TIPOGRAFÍA ─────────────────────────────────────────── */

/* Tamaños */
.noah-text-xs    { font-size: var(--noah-text-xs); }
.noah-text-sm    { font-size: var(--noah-text-sm); }
.noah-text-base  { font-size: var(--noah-text-base); }
.noah-text-lg    { font-size: var(--noah-text-lg); }
.noah-text-xl    { font-size: var(--noah-text-xl); }
.noah-text-2xl   { font-size: var(--noah-text-2xl); }
.noah-text-3xl   { font-size: var(--noah-text-3xl); }
.noah-text-4xl   { font-size: var(--noah-text-4xl); }
.noah-text-5xl   { font-size: var(--noah-text-5xl); }

/* Pesos */
.noah-font-thin      { font-weight: var(--noah-weight-thin); }
.noah-font-light     { font-weight: var(--noah-weight-light); }
.noah-font-regular   { font-weight: var(--noah-weight-regular); }
.noah-font-medium    { font-weight: var(--noah-weight-medium); }
.noah-font-semibold  { font-weight: var(--noah-weight-semibold); }
.noah-font-bold      { font-weight: var(--noah-weight-bold); }
.noah-font-extrabold { font-weight: var(--noah-weight-extrabold); }
.noah-font-black     { font-weight: var(--noah-weight-black); }

/* Familias */
.noah-font-heading { font-family: var(--noah-font-heading); }
.noah-font-body    { font-family: var(--noah-font-body); }
.noah-font-mono    { font-family: var(--noah-font-mono); }

/* Alineación */
.noah-text-left    { text-align: left; }
.noah-text-center  { text-align: center; }
.noah-text-right   { text-align: right; }
.noah-text-justify { text-align: justify; }

/* Colores de texto */
.noah-text-primary  { color: var(--noah-color-brand); }
.noah-text-accent   { color: var(--noah-color-cta); }
.noah-text-muted    { color: var(--noah-color-text-muted); }
.noah-text-subtle   { color: var(--noah-color-text-subtle); }
.noah-text-inverse  { color: var(--noah-color-text-inverse); }
.noah-text-heading  { color: var(--noah-color-text-heading); }

/* Line heights */
.noah-leading-none    { line-height: var(--noah-leading-none); }
.noah-leading-tight   { line-height: var(--noah-leading-tight); }
.noah-leading-snug    { line-height: var(--noah-leading-snug); }
.noah-leading-normal  { line-height: var(--noah-leading-normal); }
.noah-leading-relaxed { line-height: var(--noah-leading-relaxed); }
.noah-leading-loose   { line-height: var(--noah-leading-loose); }

/* Letter spacing */
.noah-tracking-tight   { letter-spacing: var(--noah-tracking-tight); }
.noah-tracking-normal  { letter-spacing: var(--noah-tracking-normal); }
.noah-tracking-wide    { letter-spacing: var(--noah-tracking-wide); }
.noah-tracking-wider   { letter-spacing: var(--noah-tracking-wider); }
.noah-tracking-widest  { letter-spacing: var(--noah-tracking-widest); }

/* Transforms */
.noah-uppercase  { text-transform: uppercase; }
.noah-lowercase  { text-transform: lowercase; }
.noah-capitalize { text-transform: capitalize; }
.noah-italic     { font-style: italic; }
.noah-no-wrap    { white-space: nowrap; }
.noah-truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Componentes tipográficos especiales */
.noah-eyebrow {
  font-size:      var(--noah-font-size-eyebrow);
  font-weight:    var(--noah-weight-semibold);
  letter-spacing: var(--noah-letter-spacing-eyebrow);
  text-transform: uppercase;
  color:          var(--noah-color-cta);
}

.noah-lead {
  font-size:   var(--noah-font-size-lead);
  line-height: var(--noah-line-height-lead);
  color:       var(--noah-color-text-muted);
}

.noah-label {
  font-size:      var(--noah-font-size-label);
  font-weight:    var(--noah-weight-medium);
  letter-spacing: var(--noah-tracking-wide);
}

.noah-caption {
  font-size:  var(--noah-font-size-caption);
  color:      var(--noah-color-text-subtle);
  line-height: var(--noah-leading-relaxed);
}


/* 5.5 COLORES DE FONDO ───────────────────────────────────── */

.noah-bg-primary       { background-color: var(--noah-color-brand); }
.noah-bg-primary-light { background-color: var(--noah-primary-ultra-light); }
.noah-bg-accent        { background-color: var(--noah-color-cta); }
.noah-bg-accent-light  { background-color: var(--noah-accent-ultra-light); }
.noah-bg-white         { background-color: var(--noah-white); }
.noah-bg-alt           { background-color: var(--noah-color-bg-alt); }
.noah-bg-dark          { background-color: var(--noah-color-bg-inverse); }
.noah-bg-gray-50       { background-color: var(--noah-gray-50); }
.noah-bg-gray-100      { background-color: var(--noah-gray-100); }

/* Fondos con transparencia */
.noah-bg-overlay       { background-color: var(--noah-color-bg-overlay); }
.noah-bg-blur          { background-color: oklch(100% 0 0 / 0.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.noah-bg-blur-dark     { background-color: oklch(12% 0 0 / 0.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

/* Backdrop blur puro (sin background — para glassmorphism con bg propio) */
.noah-backdrop-xs  { backdrop-filter: blur(4px);   -webkit-backdrop-filter: blur(4px);   }
.noah-backdrop-sm  { backdrop-filter: blur(8px);   -webkit-backdrop-filter: blur(8px);   }
.noah-backdrop-md  { backdrop-filter: blur(20px);  -webkit-backdrop-filter: blur(20px);  }
.noah-backdrop-lg  { backdrop-filter: blur(40px);  -webkit-backdrop-filter: blur(40px);  }
.noah-backdrop-xl  { backdrop-filter: blur(80px);  -webkit-backdrop-filter: blur(80px);  }


/* 5.6 ESPACIADO (Margin y Padding helpers) ──────────────── */

/* Margen superior semántico */
.noah-mt-0  { margin-top: 0; }
.noah-mt-sm { margin-top: var(--noah-space-sm); }
.noah-mt-md { margin-top: var(--noah-space-md); }
.noah-mt-lg { margin-top: var(--noah-space-lg); }
.noah-mt-xl { margin-top: var(--noah-space-xl); }

/* Margen inferior semántico */
.noah-mb-0  { margin-bottom: 0; }
.noah-mb-sm { margin-bottom: var(--noah-space-sm); }
.noah-mb-md { margin-bottom: var(--noah-space-md); }
.noah-mb-lg { margin-bottom: var(--noah-space-lg); }
.noah-mb-xl { margin-bottom: var(--noah-space-xl); }

/* Centrado automático */
.noah-mx-auto { margin-inline: auto; }


/* 5.7 BOTONES ────────────────────────────────────────────── */

/**
 * Sistema de botones Noah.
 * Todos los botones heredan de .noah-btn.
 * Variantes: --primary, --secondary, --outline, --ghost, --danger
 * Tamaños: --sm, (default), --lg
 */
.noah-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--noah-space-2);
  padding:         var(--noah-btn-py) var(--noah-btn-px);
  border-radius:   var(--noah-radius-btn);
  font-family:     var(--noah-font-body);
  font-size:       var(--noah-text-base);
  font-weight:     var(--noah-weight-semibold);
  line-height:     1;
  text-decoration: none;
  white-space:     nowrap;
  cursor:          pointer;
  border:          2px solid transparent;
  transition:      var(--noah-transition-normal);
  position:        relative;
  overflow:        hidden;
  user-select:     none;
  -webkit-user-select: none;
}

.noah-btn:focus-visible {
  outline:        2px solid var(--noah-color-border-focus);
  outline-offset: 3px;
}

.noah-btn:disabled,
.noah-btn[aria-disabled="true"] {
  opacity:        0.5;
  cursor:         not-allowed;
  pointer-events: none;
}

/* Primario */
.noah-btn--primary {
  background-color: var(--noah-color-cta);
  color:            var(--noah-white);
  border-color:     var(--noah-color-cta);
  box-shadow:       var(--noah-shadow-btn);
}

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

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

/* Secundario */
.noah-btn--secondary {
  background-color: var(--noah-color-brand);
  color:            var(--noah-white);
  border-color:     var(--noah-color-brand);
}

.noah-btn--secondary:hover {
  background-color: var(--noah-color-brand-hover);
  border-color:     var(--noah-color-brand-hover);
  transform:        translateY(-2px);
}

/* Outline */
.noah-btn--outline {
  background-color: transparent;
  color:            var(--noah-color-brand);
  border-color:     var(--noah-color-brand);
}

.noah-btn--outline:hover {
  background-color: var(--noah-color-brand);
  color:            var(--noah-white);
  transform:        translateY(-2px);
}

/* Outline acento */
.noah-btn--outline-accent {
  background-color: transparent;
  color:            var(--noah-color-cta);
  border-color:     var(--noah-color-cta);
}

.noah-btn--outline-accent:hover {
  background-color: var(--noah-color-cta);
  color:            var(--noah-white);
  transform:        translateY(-2px);
}

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

.noah-btn--ghost:hover {
  background-color: var(--noah-color-bg-alt);
  color:            var(--noah-color-text-heading);
}

/* Danger */
.noah-btn--danger {
  background-color: var(--noah-danger);
  color:            var(--noah-white);
  border-color:     var(--noah-danger);
}

.noah-btn--danger:hover {
  background-color: var(--noah-danger-dark);
  border-color:     var(--noah-danger-dark);
  transform:        translateY(-2px);
}

/* Link (parece link, se comporta como botón) */
.noah-btn--link {
  background:  transparent;
  border-color: transparent;
  color:        var(--noah-color-text-link);
  padding-inline: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Tamaños */
.noah-btn--sm {
  font-size: var(--noah-text-sm);
  padding:   var(--noah-btn-py-sm) var(--noah-btn-px-sm);
}

.noah-btn--lg {
  font-size: var(--noah-text-lg);
  padding:   var(--noah-btn-py-lg) var(--noah-btn-px-lg);
}

/* Full width */
.noah-btn--full {
  width:           100%;
  justify-content: center;
}

/* Icono solo */
.noah-btn--icon {
  padding:       var(--noah-space-3);
  aspect-ratio:  1;
  border-radius: var(--noah-radius-full);
}


/* 5.8 CARDS ──────────────────────────────────────────────── */

.noah-card {
  background-color: var(--noah-color-bg-elevated);
  border-radius:    var(--noah-radius-card);
  box-shadow:       var(--noah-shadow-card);
  padding:          var(--noah-card-padding);
  transition:       var(--noah-transition-normal);
  position:         relative;
  overflow:         hidden;
}

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

.noah-card--bordered {
  box-shadow: none;
  border:     1px solid var(--noah-color-border);
}

.noah-card--flat {
  box-shadow:       none;
  background-color: var(--noah-color-bg-alt);
}

.noah-card--elevated {
  box-shadow: var(--noah-shadow-lg);
  border:     none;
}

.noah-card--sm { padding: var(--noah-card-padding-sm); }
.noah-card--lg { padding: var(--noah-card-padding-lg); }

/* Card con imagen superior */
.noah-card__image {
  margin:        calc(-1 * var(--noah-card-padding));
  margin-bottom: var(--noah-card-padding);
  border-radius: var(--noah-radius-card) var(--noah-radius-card) 0 0;
  overflow:      hidden;
}

.noah-card__image img {
  width:            100%;
  aspect-ratio:     16 / 9;
  object-fit:       cover;
  transition:       transform var(--noah-duration-slow) var(--noah-ease-out);
}

.noah-card--hover:hover .noah-card__image img {
  transform: scale(1.04);
}

.noah-card__body {
  display:        flex;
  flex-direction: column;
  gap:            var(--noah-space-3);
}

.noah-card__title {
  font-size:   var(--noah-text-xl);
  font-weight: var(--noah-weight-semibold);
  color:       var(--noah-color-text-heading);
  line-height: var(--noah-leading-snug);
}

.noah-card__description {
  font-size:  var(--noah-font-size-body);
  color:      var(--noah-color-text-muted);
  line-height: var(--noah-leading-relaxed);
}

.noah-card__footer {
  margin-top:  auto;
  padding-top: var(--noah-space-4);
  border-top:  1px solid var(--noah-color-border);
}


/* 5.9 EFECTOS VISUALES ───────────────────────────────────── */

/* Sombras */
.noah-shadow-xs  { box-shadow: var(--noah-shadow-xs); }
.noah-shadow-sm  { box-shadow: var(--noah-shadow-sm); }
.noah-shadow-md  { box-shadow: var(--noah-shadow-md); }
.noah-shadow-lg  { box-shadow: var(--noah-shadow-lg); }
.noah-shadow-xl  { box-shadow: var(--noah-shadow-xl); }
.noah-shadow-2xl { box-shadow: var(--noah-shadow-2xl); }
.noah-shadow-none { box-shadow: none; }

/* Border radius */
.noah-rounded-none { border-radius: var(--noah-radius-none); }
.noah-rounded-sm   { border-radius: var(--noah-radius-sm); }
.noah-rounded-md   { border-radius: var(--noah-radius-md); }
.noah-rounded-lg   { border-radius: var(--noah-radius-lg); }
.noah-rounded-xl   { border-radius: var(--noah-radius-xl); }
.noah-rounded-2xl  { border-radius: var(--noah-radius-2xl); }
.noah-rounded-3xl  { border-radius: var(--noah-radius-3xl); }
.noah-rounded-full { border-radius: var(--noah-radius-full); }

/* Bordes */
.noah-border       { border: var(--noah-border); }
.noah-border-top   { border-top: var(--noah-border); }
.noah-border-bottom { border-bottom: var(--noah-border); }
.noah-border-none  { border: none; }

/* Transiciones */
.noah-transition       { transition: var(--noah-transition-normal); }
.noah-transition-fast  { transition: var(--noah-transition-fast); }
.noah-transition-slow  { transition: var(--noah-transition-slow); }
.noah-transition-bounce { transition: var(--noah-transition-bounce); }
.noah-transition-none  { transition: none; }

/* Blur */
.noah-blur-sm  { backdrop-filter: blur(4px);  -webkit-backdrop-filter: blur(4px); }
.noah-blur-md  { backdrop-filter: blur(8px);  -webkit-backdrop-filter: blur(8px); }
.noah-blur-lg  { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.noah-blur-xl  { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }

/* Overflow */
.noah-overflow-hidden  { overflow: hidden; }
.noah-overflow-auto    { overflow: auto; }
.noah-overflow-x-auto  { overflow-x: auto; }
.noah-overflow-y-auto  { overflow-y: auto; }

/* Gradientes de texto */
.noah-gradient-text {
  background: linear-gradient(135deg, var(--noah-primary), var(--noah-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Aspect ratios */
.noah-aspect-square  { aspect-ratio: 1; }
.noah-aspect-video   { aspect-ratio: 16 / 9; }
.noah-aspect-portrait { aspect-ratio: 3 / 4; }
.noah-aspect-wide    { aspect-ratio: 21 / 9; }


/* 5.10 ACCESIBILIDAD ─────────────────────────────────────── */

/**
 * Oculta visualmente pero mantiene accesible para screen readers.
 * WCAG 1.1.1, 2.1.1
 */
.noah-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;
}

/* Skip to content link — primer elemento del <body> */
.noah-skip-link {
  position:         absolute;
  top:              -100%;
  left:             var(--noah-space-4);
  z-index:          var(--noah-z-top);
  padding:          var(--noah-space-2) var(--noah-space-4);
  background-color: var(--noah-color-cta);
  color:            var(--noah-white);
  font-weight:      var(--noah-weight-semibold);
  border-radius:    var(--noah-radius-md);
  text-decoration:  none;
  transition:       top var(--noah-duration-fast) var(--noah-ease-out);
}

.noah-skip-link:focus {
  top: var(--noah-space-4);
}

/* Focus visible mejorado */
.noah-focus-ring:focus-visible {
  outline:        2px solid var(--noah-color-border-focus);
  outline-offset: 3px;
}

/* Ocultar decorativos para accesibilidad */
[aria-hidden="true"] {
  pointer-events: none;
}


/* 5.11 UTILIDADES DE POSICIÓN Y DISPLAY ─────────────────── */

/* Display */
.noah-block        { display: block; }
.noah-inline-block { display: inline-block; }
.noah-inline       { display: inline; }
.noah-hidden       { display: none; }
.noah-invisible    { visibility: hidden; }
.noah-visible      { visibility: visible; }

/* Posición */
.noah-relative { position: relative; }
.noah-absolute { position: absolute; }
.noah-fixed    { position: fixed; }
.noah-sticky   { position: sticky; }

/* Inset helpers */
.noah-inset-0    { inset: 0; }
.noah-top-0      { top: 0; }
.noah-bottom-0   { bottom: 0; }
.noah-left-0     { left: 0; }
.noah-right-0    { right: 0; }

/* Z-index */
.noah-z-below    { z-index: var(--noah-z-below); }
.noah-z-base     { z-index: var(--noah-z-base); }
.noah-z-raised   { z-index: var(--noah-z-raised); }
.noah-z-dropdown { z-index: var(--noah-z-dropdown); }
.noah-z-sticky   { z-index: var(--noah-z-sticky); }
.noah-z-overlay  { z-index: var(--noah-z-overlay); }
.noah-z-modal    { z-index: var(--noah-z-modal); }
.noah-z-top      { z-index: var(--noah-z-top); }

/* Width / Height */
.noah-w-full  { width: 100%; }
.noah-w-auto  { width: auto; }
.noah-h-full  { height: 100%; }
.noah-h-auto  { height: auto; }
.noah-h-screen { height: 100vh; min-height: 100svh; }

/* Object fit */
.noah-object-cover   { object-fit: cover; object-position: center; }
.noah-object-contain { object-fit: contain; }

/* Cursor */
.noah-pointer    { cursor: pointer; }
.noah-no-select  { user-select: none; -webkit-user-select: none; }

/* Pointer events */
.noah-no-pointer { pointer-events: none; }

/* Misc */
.noah-list-none  { list-style: none; padding: 0; }


/* 5.12 ESPACIADO ADICIONAL ──────────────────────────────── */

/* Gap standalone (flex y grid) */
.noah-gap-xs { gap: var(--noah-space-xs); }
.noah-gap-sm { gap: var(--noah-space-sm); }
.noah-gap-md { gap: var(--noah-space-md); }
.noah-gap-lg { gap: var(--noah-space-lg); }
.noah-gap-xl { gap: var(--noah-space-xl); }

/* Padding semántico */
.noah-p-sm { padding: var(--noah-space-sm); }
.noah-p-md { padding: var(--noah-space-md); }
.noah-p-lg { padding: var(--noah-space-lg); }
.noah-p-xl { padding: var(--noah-space-xl); }

/* Margin auto */
.noah-mt-auto { margin-top: auto; }
.noah-ml-auto { margin-left: auto; }
.noah-mr-auto { margin-right: auto; }


/* 5.13 TIPOGRAFÍA SEMÁNTICA ─────────────────────────────── */

/**
 * Clases semánticas para heading y body.
 * Usadas en los templates JSON — el AI asigna estas clases,
 * Bricks aplica el tag HTML correcto (h1, h2, p, etc.).
 */
.noah-heading {
  font-weight:    var(--noah-weight-bold);
  line-height:    var(--noah-leading-tight);
  color:          var(--noah-color-text-heading);
  letter-spacing: var(--noah-tracking-tight);
}

.noah-heading--xl { font-size: clamp(var(--noah-text-3xl), 5vw,   var(--noah-text-5xl)); }
.noah-heading--lg { font-size: clamp(var(--noah-text-2xl), 3.5vw, var(--noah-text-4xl)); }
.noah-heading--md { font-size: var(--noah-text-2xl); }
.noah-heading--sm { font-size: var(--noah-text-xl); }

.noah-body {
  font-size:   var(--noah-text-base);
  line-height: var(--noah-leading-relaxed);
}

.noah-body--lg { font-size: var(--noah-text-lg); line-height: var(--noah-leading-relaxed); }
.noah-body--sm { font-size: var(--noah-text-sm); line-height: var(--noah-leading-relaxed); }


/* 5.14 COMPONENTES UI ───────────────────────────────────── */

/* Badge / Chip */
.noah-badge {
  display:       inline-flex;
  align-items:   center;
  padding:       0.3em 0.85em;
  border-radius: var(--noah-radius-full);
  font-size:     var(--noah-text-sm);
  font-weight:   var(--noah-weight-medium);
  line-height:   1.2;
  white-space:   nowrap;
}

.noah-badge--primary {
  background-color: color-mix(in oklch, var(--noah-color-brand) 12%, transparent);
  color:            var(--noah-color-brand);
}

.noah-badge--accent {
  background-color: color-mix(in oklch, var(--noah-color-cta) 12%, transparent);
  color:            var(--noah-color-cta);
}

.noah-badge--muted {
  background-color: var(--noah-color-bg-alt);
  color:            var(--noah-color-text-muted);
}

/* Avatar */
.noah-avatar {
  display:       block;
  border-radius: var(--noah-radius-full);
  object-fit:    cover;
  width:         40px;
  height:        40px;
  flex-shrink:   0;
}

.noah-avatar--sm { width: 32px; height: 32px; }
.noah-avatar--lg { width: 56px; height: 56px; }
.noah-avatar--xl { width: 80px; height: 80px; }

/* Divider */
.noah-divider {
  width:            100%;
  height:           1px;
  background-color: var(--noah-color-border);
  border:           none;
}

/* Icon box (contenedor cuadrado con fondo de color) */
.noah-icon-box {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  width:            44px;
  height:           44px;
  border-radius:    var(--noah-radius-md);
  background-color: color-mix(in oklch, var(--noah-color-brand) 10%, transparent);
  color:            var(--noah-color-brand);
  flex-shrink:      0;
}

.noah-icon-box--sm { width: 32px; height: 32px; }
.noah-icon-box--lg { width: 56px; height: 56px; font-size: 1.5rem; }

/* Icon standalone */
.noah-icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
}

.noah-icon--sm      { font-size: 1rem; }
.noah-icon--lg      { font-size: 2rem; }
.noah-icon--primary { color: var(--noah-color-brand); }
.noah-icon--accent  { color: var(--noah-color-cta); }
.noah-icon--muted   { color: var(--noah-color-text-muted); }

/* Image utilities */
.noah-img {
  display:   block;
  max-width: 100%;
  height:    auto;
}

.noah-img--rounded { border-radius: var(--noah-radius-lg); }
.noah-img--circle  { border-radius: var(--noah-radius-full); }
.noah-img--cover   { object-fit: cover; width: 100%; height: 100%; }

/* Named aspect ratios */
.noah-aspect-ratio--1-1  { aspect-ratio: 1; }
.noah-aspect-ratio--4-3  { aspect-ratio: 4 / 3; }
.noah-aspect-ratio--3-2  { aspect-ratio: 3 / 2; }
.noah-aspect-ratio--16-9 { aspect-ratio: 16 / 9; }
.noah-aspect-ratio--21-9 { aspect-ratio: 21 / 9; }

/* Links semánticos */
.noah-link {
  color:                 var(--noah-color-brand);
  text-decoration:       underline;
  text-decoration-color: transparent;
  transition:            text-decoration-color var(--noah-duration-fast) var(--noah-ease-out);
}

.noah-link:hover               { text-decoration-color: var(--noah-color-brand); }
.noah-link--muted              { color: var(--noah-color-text-muted); }
.noah-link--muted:hover        { color: var(--noah-color-brand); }

/* Step component (para secciones de proceso numerado) */
.noah-step__number {
  font-size:   var(--noah-text-4xl);
  font-weight: var(--noah-weight-bold);
  line-height: 1;
  color:       color-mix(in oklch, var(--noah-color-brand) 25%, transparent);
}

.noah-step__title {
  font-size:   var(--noah-text-lg);
  font-weight: var(--noah-weight-semibold);
  color:       var(--noah-color-text-heading);
}

.noah-step__desc {
  font-size: var(--noah-text-sm);
  color:     var(--noah-color-text-muted);
}


} /* end @layer noah.utilities */


/* ============================================================
   @layer noah.components — Componentes base (secciones canónicas)
   ============================================================ */
@layer noah.components {


/* ============================================================
   6. COMPONENTES BASE — Las 7 Secciones Canónicas
   ============================================================ */

/* 6.1 NAVBAR ─────────────────────────────────────────────── */

/**
 * Navbar estándar de Noah.
 * Estructura HTML esperada:
 *
 * <header class="noah-navbar" role="banner">
 *   <div class="noah-container">
 *     <div class="noah-navbar__inner">
 *       <div class="noah-navbar__brand">
 *         <a href="/" class="noah-navbar__logo">
 *           <img src="logo.svg" alt="Nombre del sitio" width="140">
 *         </a>
 *       </div>
 *       <nav class="noah-navbar__nav" role="navigation" aria-label="Menú principal">
 *         <ul class="noah-navbar__menu">
 *           <li><a href="#" class="noah-navbar__link">Inicio</a></li>
 *           <li><a href="#" class="noah-navbar__link">Servicios</a></li>
 *           <li><a href="#" class="noah-navbar__link">Contacto</a></li>
 *         </ul>
 *       </nav>
 *       <div class="noah-navbar__actions">
 *         <a href="#contacto" class="noah-btn noah-btn--primary">Contactar</a>
 *       </div>
 *       <button class="noah-navbar__toggle" aria-label="Abrir menú" aria-expanded="false">
 *         <!-- ícono hamburguesa -->
 *       </button>
 *     </div>
 *   </div>
 * </header>
 */

.noah-navbar {
  position:         sticky;
  top:              0;
  z-index:          var(--noah-z-sticky);
  background-color: var(--noah-color-bg);
  border-bottom:    1px solid var(--noah-color-border);
  transition:       background-color var(--noah-duration-normal) var(--noah-ease-out),
                    box-shadow var(--noah-duration-normal) var(--noah-ease-out);
}

.noah-navbar--scrolled {
  background-color: oklch(100% 0 0 / 0.95);
  backdrop-filter:  blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:       var(--noah-shadow-md);
  border-bottom-color: transparent;
}

.noah-navbar--transparent {
  background-color: transparent;
  border-bottom-color: transparent;
}

.noah-navbar__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--noah-space-8);
  height:          clamp(60px, 8vw, 80px);
}

.noah-navbar__brand {
  flex-shrink: 0;
}

.noah-navbar__logo img {
  height: clamp(28px, 4vw, 36px);
  width:  auto;
}

.noah-navbar__nav {
  display: flex;
  flex: 1;
  justify-content: center;
}

.noah-navbar__menu {
  display:   flex;
  align-items: center;
  gap:       var(--noah-space-1);
  list-style: none;
  padding:   0;
  margin:    0;
}

.noah-navbar__link {
  display:        block;
  padding:        var(--noah-space-2) var(--noah-space-3);
  font-size:      var(--noah-text-sm);
  font-weight:    var(--noah-weight-medium);
  color:          var(--noah-color-text);
  text-decoration: none;
  border-radius:  var(--noah-radius-md);
  transition:     var(--noah-transition-fast);
  white-space:    nowrap;
}

.noah-navbar__link:hover,
.noah-navbar__link--active {
  background-color: var(--noah-color-bg-alt);
  color:            var(--noah-color-text-heading);
}

.noah-navbar__actions {
  display:     flex;
  align-items: center;
  gap:         var(--noah-space-3);
  flex-shrink: 0;
}

.noah-navbar__toggle {
  display:          none;
  align-items:      center;
  justify-content:  center;
  width:            44px;
  height:           44px;
  background:       none;
  border:           none;
  cursor:           pointer;
  border-radius:    var(--noah-radius-md);
  color:            var(--noah-color-text);
  transition:       var(--noah-transition-fast);
}

.noah-navbar__toggle:hover {
  background-color: var(--noah-color-bg-alt);
}


/* 6.2 HERO ───────────────────────────────────────────────── */

/**
 * Sección hero. La única que puede tener h1.
 *
 * Variantes:
 * .noah-hero--centered    → todo centrado
 * .noah-hero--split       → texto izquierda, imagen derecha
 * .noah-hero--fullscreen  → 100vh
 *
 * Estructura HTML:
 * <section class="noah-hero noah-section">
 *   <div class="noah-container">
 *     <div class="noah-hero__content">
 *       <span class="noah-eyebrow">Eyebrow texto</span>
 *       <h1>Título principal</h1>
 *       <p class="noah-lead">Descripción destacada</p>
 *       <div class="noah-hero__actions">
 *         <a href="#" class="noah-btn noah-btn--primary noah-btn--lg">CTA Principal</a>
 *         <a href="#" class="noah-btn noah-btn--outline noah-btn--lg">Secundario</a>
 *       </div>
 *     </div>
 *   </div>
 * </section>
 */

.noah-hero {
  position: relative;
  overflow: hidden;
}

.noah-hero__content {
  display:        flex;
  flex-direction: column;
  gap:            var(--noah-space-6);
  max-width:      680px;
}

.noah-hero--centered .noah-hero__content {
  align-items: center;
  text-align:  center;
  max-width:   780px;
  margin:      0 auto;
}

.noah-hero--centered p {
  max-width: 60ch;
}

.noah-hero__actions {
  display:     flex;
  align-items: center;
  gap:         var(--noah-space-4);
  flex-wrap:   wrap;
}

.noah-hero--centered .noah-hero__actions {
  justify-content: center;
}

.noah-hero__media {
  border-radius: var(--noah-radius-2xl);
  overflow:      hidden;
  box-shadow:    var(--noah-shadow-2xl);
}

.noah-hero__media img {
  width:       100%;
  object-fit:  cover;
  display:     block;
}

/* Hero fullscreen */
.noah-hero--fullscreen {
  min-height: 100vh;
  min-height: 100svh;
  display:    flex;
  align-items: center;
}


/* 6.3 FEATURES / CARDS ───────────────────────────────────── */

/**
 * Sección de features/servicios.
 *
 * <section class="noah-features noah-section noah-section--alt">
 *   <div class="noah-container">
 *     <div class="noah-section-header">
 *       <span class="noah-eyebrow">Qué hacemos</span>
 *       <h2>Nuestros servicios</h2>
 *       <p class="noah-lead">Descripción breve de la sección</p>
 *     </div>
 *     <div class="noah-grid noah-grid--auto-md">
 *       <article class="noah-feature-card noah-card">
 *         <div class="noah-feature-card__icon" aria-hidden="true">
 *           <i class="fa-solid fa-code"></i>
 *         </div>
 *         <h3>Título del feature</h3>
 *         <p>Descripción del feature.</p>
 *       </article>
 *     </div>
 *   </div>
 * </section>
 */

/* Header compartido para secciones */
.noah-section-header {
  display:        flex;
  flex-direction: column;
  gap:            var(--noah-space-4);
  margin-bottom:  var(--noah-space-2xl);
}

.noah-section-header--centered {
  align-items: center;
  text-align:  center;
}

.noah-section-header p {
  max-width: 55ch;
  color:     var(--noah-color-text-muted);
}

.noah-section-header--centered p {
  margin: 0 auto;
}

/* Feature card */
.noah-feature-card {
  display:        flex;
  flex-direction: column;
  gap:            var(--noah-space-4);
}

.noah-feature-card__icon {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  width:            clamp(44px, 6vw, 56px);
  height:           clamp(44px, 6vw, 56px);
  background-color: var(--noah-accent-ultra-light);
  color:            var(--noah-color-cta);
  border-radius:    var(--noah-radius-lg);
  font-size:        var(--noah-text-xl);
  flex-shrink:      0;
  transition:       var(--noah-transition-normal);
}

.noah-feature-card:hover .noah-feature-card__icon {
  background-color: var(--noah-color-cta);
  color:            var(--noah-white);
  transform:        scale(1.08);
}

.noah-feature-card h3 {
  font-size:   var(--noah-text-xl);
  font-weight: var(--noah-weight-semibold);
  color:       var(--noah-color-text-heading);
  line-height: var(--noah-leading-snug);
}

.noah-feature-card p {
  color:       var(--noah-color-text-muted);
  line-height: var(--noah-leading-relaxed);
  max-width:   none;
}


/* 6.4 TESTIMONIALS ───────────────────────────────────────── */

/**
 * Sección de testimonios.
 * Usa figure + blockquote + figcaption — semántica HTML5 correcta.
 *
 * <section class="noah-testimonials noah-section">
 *   <div class="noah-container">
 *     <div class="noah-section-header noah-section-header--centered">
 *       <h2>Lo que dicen nuestros clientes</h2>
 *     </div>
 *     <div class="noah-grid noah-grid--auto-md">
 *       <figure class="noah-testimonial noah-card">
 *         <blockquote class="noah-testimonial__quote">
 *           <p>"Texto del testimonio aquí."</p>
 *         </blockquote>
 *         <figcaption class="noah-testimonial__author">
 *           <img src="avatar.jpg" alt="Nombre — Cargo" width="48" height="48">
 *           <div>
 *             <strong>Nombre Apellido</strong>
 *             <span>Cargo — Empresa</span>
 *           </div>
 *         </figcaption>
 *       </figure>
 *     </div>
 *   </div>
 * </section>
 */

.noah-testimonial {
  display:        flex;
  flex-direction: column;
  gap:            var(--noah-space-6);
}

.noah-testimonial__quote {
  border:     none;
  padding:    0;
  font-style: normal;
  flex:       1;
}

.noah-testimonial__quote p {
  font-size:   var(--noah-text-base);
  color:       var(--noah-color-text);
  line-height: var(--noah-leading-relaxed);
  max-width:   none;

  /* Comillas tipográficas */
  &::before { content: '\201C'; }
  &::after  { content: '\201D'; }
}

.noah-testimonial__stars {
  display:  flex;
  gap:      var(--noah-space-1);
  color:    oklch(72% 0.18 75);   /* warning — amarillo */
  font-size: var(--noah-text-sm);
  margin-bottom: var(--noah-space-2);
}

.noah-testimonial__author {
  display:     flex;
  align-items: center;
  gap:         var(--noah-space-3);
  padding-top: var(--noah-space-4);
  border-top:  1px solid var(--noah-color-border);
}

.noah-testimonial__author img {
  width:         48px;
  height:        48px;
  border-radius: var(--noah-radius-full);
  object-fit:    cover;
  flex-shrink:   0;
}

.noah-testimonial__author strong {
  display:     block;
  font-size:   var(--noah-text-sm);
  font-weight: var(--noah-weight-semibold);
  color:       var(--noah-color-text-heading);
  line-height: var(--noah-leading-tight);
}

.noah-testimonial__author span {
  display:   block;
  font-size: var(--noah-text-xs);
  color:     var(--noah-color-text-muted);
  margin-top: var(--noah-space-0-5);
}


/* 6.5 STATS ──────────────────────────────────────────────── */

/**
 * Sección de estadísticas/números.
 * Background oscuro por defecto para contraste máximo.
 *
 * <section class="noah-stats noah-section">
 *   <div class="noah-container">
 *     <div class="noah-grid noah-grid--4">
 *       <div class="noah-stat">
 *         <p class="noah-stat__number">+200</p>
 *         <p class="noah-stat__label">Proyectos completados</p>
 *       </div>
 *     </div>
 *   </div>
 * </section>
 */

.noah-stats {
  background-color: var(--noah-color-bg-inverse);
}

.noah-stat {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  gap:            var(--noah-space-2);
  padding:        var(--noah-space-6) var(--noah-space-4);
}

.noah-stat__number {
  font-family:    var(--noah-font-heading);
  font-size:      var(--noah-text-5xl);
  font-weight:    var(--noah-weight-black);
  line-height:    var(--noah-leading-none);
  color:          var(--noah-white);
  letter-spacing: var(--noah-tracking-tight);
  max-width:      none;
}

.noah-stat__label {
  font-size:  var(--noah-text-base);
  color:      oklch(100% 0 0 / 0.65);
  max-width:  none;
  line-height: var(--noah-leading-normal);
}

/* Separadores entre stats */
.noah-stats .noah-grid--4 .noah-stat:not(:last-child) {
  border-right: 1px solid oklch(100% 0 0 / 0.12);
}


/* 6.6 CTA FINAL ──────────────────────────────────────────── */

/**
 * Sección CTA al final de página o entre secciones.
 *
 * <section class="noah-cta noah-section">
 *   <div class="noah-container noah-container--narrow">
 *     <div class="noah-cta__content">
 *       <h2>¿Listo para empezar?</h2>
 *       <p class="noah-lead">Descripción breve del CTA.</p>
 *       <a href="#contacto" class="noah-btn noah-btn--primary noah-btn--lg">Contactar</a>
 *     </div>
 *   </div>
 * </section>
 */

.noah-cta {
  background-color: var(--noah-color-brand);
  position:         relative;
  overflow:         hidden;
}

/* Fondo decorativo */
.noah-cta::before {
  content:          '';
  position:         absolute;
  inset:            0;
  background:       radial-gradient(
                      ellipse 80% 60% at 50% 0%,
                      oklch(100% 0 0 / 0.06) 0%,
                      transparent 70%
                    );
  pointer-events:   none;
}

.noah-cta--accent {
  background-color: var(--noah-color-cta);
}

.noah-cta__content {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  gap:            var(--noah-space-6);
  position:       relative;   /* sobre el ::before */
}

.noah-cta h2 {
  color:       var(--noah-white);
  font-size:   var(--noah-font-size-h2);
}

.noah-cta p {
  color:     oklch(100% 0 0 / 0.8);
  max-width: 55ch;
  margin:    0 auto;
}

.noah-cta .noah-btn--primary {
  background-color: var(--noah-white);
  color:            var(--noah-color-brand);
  border-color:     var(--noah-white);
}

.noah-cta .noah-btn--primary:hover {
  background-color: var(--noah-gray-100);
  border-color:     var(--noah-gray-100);
}


/* 6.7 FOOTER ─────────────────────────────────────────────── */

/**
 * Footer estándar con columnas.
 *
 * <footer class="noah-footer" role="contentinfo">
 *   <div class="noah-container">
 *     <div class="noah-footer__main">
 *       <div class="noah-footer__brand">
 *         <img src="logo.svg" alt="Nombre" width="120">
 *         <p>Descripción breve de la empresa.</p>
 *         <div class="noah-footer__social">
 *           <a href="#" aria-label="Instagram">
 *             <i class="fa-brands fa-instagram" aria-hidden="true"></i>
 *           </a>
 *         </div>
 *       </div>
 *       <nav class="noah-footer__nav" aria-label="Servicios">
 *         <h3>Servicios</h3>
 *         <ul><li><a href="#">Link</a></li></ul>
 *       </nav>
 *       <address class="noah-footer__contact">
 *         <h3>Contacto</h3>
 *         <p>email@ejemplo.com</p>
 *       </address>
 *     </div>
 *     <div class="noah-footer__bottom">
 *       <p>© 2026 Empresa. Todos los derechos reservados.</p>
 *       <nav aria-label="Legal">
 *         <a href="#">Privacidad</a>
 *         <a href="#">Términos</a>
 *       </nav>
 *     </div>
 *   </div>
 * </footer>
 */

.noah-footer {
  background-color: var(--noah-gray-900);
  color:            var(--noah-gray-300);
  padding-top:      var(--noah-section-py-lg);
  padding-bottom:   var(--noah-space-8);
}

.noah-footer__main {
  display:               grid;
  grid-template-columns: 2fr repeat(auto-fit, minmax(140px, 1fr));
  gap:                   var(--noah-space-2xl);
  padding-bottom:        var(--noah-space-2xl);
  border-bottom:         1px solid oklch(100% 0 0 / 0.10);
  margin-bottom:         var(--noah-space-8);
}

.noah-footer__brand {
  display:        flex;
  flex-direction: column;
  gap:            var(--noah-space-4);
}

.noah-footer__brand img {
  /* Filtro para hacer logos blancos si son oscuros */
  filter: brightness(0) invert(1);
  height: 28px;
  width:  auto;
}

.noah-footer__brand p {
  font-size:  var(--noah-text-sm);
  color:      var(--noah-gray-500);
  max-width:  30ch;
  line-height: var(--noah-leading-relaxed);
}

.noah-footer__social {
  display: flex;
  gap:     var(--noah-space-3);
}

.noah-footer__social a {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            36px;
  height:           36px;
  border-radius:    var(--noah-radius-md);
  background-color: oklch(100% 0 0 / 0.08);
  color:            var(--noah-gray-400);
  text-decoration:  none;
  font-size:        var(--noah-text-base);
  transition:       var(--noah-transition-fast);
}

.noah-footer__social a:hover {
  background-color: var(--noah-color-cta);
  color:            var(--noah-white);
  transform:        translateY(-2px);
}

.noah-footer__nav {
  display:        flex;
  flex-direction: column;
  gap:            var(--noah-space-4);
}

.noah-footer__nav h3 {
  font-size:      var(--noah-text-sm);
  font-weight:    var(--noah-weight-semibold);
  color:          var(--noah-white);
  letter-spacing: var(--noah-tracking-wide);
  text-transform: uppercase;
}

.noah-footer__nav ul {
  list-style: none;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        var(--noah-space-2);
}

.noah-footer__nav a {
  font-size:      var(--noah-text-sm);
  color:          var(--noah-gray-500);
  text-decoration: none;
  transition:     var(--noah-transition-fast);
}

.noah-footer__nav a:hover {
  color: var(--noah-white);
}

.noah-footer__contact {
  font-style:     normal;
  display:        flex;
  flex-direction: column;
  gap:            var(--noah-space-4);
}

.noah-footer__contact h3 {
  font-size:      var(--noah-text-sm);
  font-weight:    var(--noah-weight-semibold);
  color:          var(--noah-white);
  letter-spacing: var(--noah-tracking-wide);
  text-transform: uppercase;
}

.noah-footer__contact p,
.noah-footer__contact a {
  font-size:      var(--noah-text-sm);
  color:          var(--noah-gray-500);
  text-decoration: none;
  line-height:    var(--noah-leading-relaxed);
  max-width:      none;
  transition:     var(--noah-transition-fast);
}

.noah-footer__contact a:hover {
  color: var(--noah-white);
}

.noah-footer__bottom {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             var(--noah-space-4);
}

.noah-footer__bottom p {
  font-size:  var(--noah-text-xs);
  color:      var(--noah-gray-600);
  max-width:  none;
}

.noah-footer__bottom nav {
  display: flex;
  gap:     var(--noah-space-4);
}

.noah-footer__bottom nav a {
  font-size:      var(--noah-text-xs);
  color:          var(--noah-gray-600);
  text-decoration: none;
  transition:     var(--noah-transition-fast);
}

.noah-footer__bottom nav a:hover {
  color: var(--noah-gray-400);
}

} /* end @layer noah.components */


/* ============================================================
   @layer noah.utilities (continuación) — Helpers responsive
   ============================================================ */
@layer noah.utilities {


/* ============================================================
   7. RESPONSIVE — Breakpoints y adaptaciones mobile
   ============================================================

   Mobile-first: estilos base = mobile.
   Breakpoints usando las variables de referencia:
   - mobile:  < 480px   (base)
   - tablet:  ≥ 480px
   - laptop:  ≥ 768px
   - desktop: ≥ 1024px
   - wide:    ≥ 1280px
*/

/* TABLET (480px+) */
@media (min-width: 480px) {
  .noah-grid--2,
  .noah-grid--3,
  .noah-grid--4,
  .noah-grid--5,
  .noah-grid--6 {
    grid-template-columns: repeat(2, 1fr);
  }

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

/* LAPTOP (768px+) */
@media (min-width: 768px) {
  /* Navbar: mostrar menú, ocultar toggle */
  .noah-navbar__nav,
  .noah-navbar__actions {
    display: flex;
  }

  .noah-navbar__toggle {
    display: none;
  }

  /* Grid: columnas reales */
  .noah-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .noah-grid--4 { grid-template-columns: repeat(2, 1fr); }

  .noah-grid--1-2 { grid-template-columns: 1fr 2fr; }
  .noah-grid--2-1 { grid-template-columns: 2fr 1fr; }
  .noah-grid--1-3 { grid-template-columns: 1fr 3fr; }
  .noah-grid--3-1 { grid-template-columns: 3fr 1fr; }

  /* Hero split */
  .noah-hero--split .noah-hero__inner {
    display:         grid;
    grid-template-columns: 1fr 1fr;
    align-items:     center;
    gap:             var(--noah-space-2xl);
  }

  /* Stats sin border en mobile */
  .noah-stats .noah-grid--4 .noah-stat:not(:last-child) {
    border-right: 1px solid oklch(100% 0 0 / 0.12);
    border-bottom: none;
  }

  /* Footer */
  .noah-footer__main {
    grid-template-columns: 2fr repeat(3, 1fr);
  }
}

/* DESKTOP (1024px+) */
@media (min-width: 1024px) {
  .noah-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .noah-grid--5 { grid-template-columns: repeat(5, 1fr); }
  .noah-grid--6 { grid-template-columns: repeat(6, 1fr); }
}

/* MOBILE — override para grids fijos */
@media (max-width: 479px) {
  .noah-grid--2,
  .noah-grid--3,
  .noah-grid--4,
  .noah-grid--5,
  .noah-grid--6,
  .noah-grid--1-2,
  .noah-grid--2-1,
  .noah-grid--1-3,
  .noah-grid--3-1 {
    grid-template-columns: 1fr;
  }

  /* Navbar en mobile */
  .noah-navbar__nav,
  .noah-navbar__actions {
    display: none;
  }

  .noah-navbar__toggle {
    display: flex;
  }

  /* Stats en mobile: 2 columnas */
  .noah-stats .noah-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .noah-stats .noah-grid--4 .noah-stat:not(:last-child) {
    border-right:  none;
    border-bottom: 1px solid oklch(100% 0 0 / 0.12);
  }

  /* Footer: columna única */
  .noah-footer__main {
    grid-template-columns: 1fr;
  }

  /* Botones hero: stack vertical */
  .noah-hero__actions {
    flex-direction: column;
  }

  .noah-hero__actions .noah-btn {
    width:           100%;
    justify-content: center;
  }
}

} /* end @layer noah.utilities */


/* ============================================================
   FIN DE NOAH FRAMEWORK CSS
   ============================================================
   Para modificaciones, usar el Noah Panel en WP Admin.
   Variables editables en la sección 1 y 2 de este archivo.
   Documentación completa: Notion → Noah Design System
   ============================================================ */