/* ===========================================================================
   AUSARTA DESIGN SYSTEM — tokens + base (fichero único, autocontenido)
   Cacheado desde el proyecto claude.ai/design "Ausarta Design System"
   (projectId 6eeeab68-1425-4dcc-8d05-1f69195c88ef) el 2026-07-16.
   Enlazar este fichero (o incrustarlo) hereda todos los tokens y estilos base.
   =========================================================================== */

/* ---- Webfonts: Inter como carrier web; Aptos/Segoe UI si están en el SO ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..800;1,14..32,400..600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Verde Ausarta (primary) ---- */
  --green-50:  #ECF8F1;
  --green-100: #D2EFDF;
  --green-200: #A6DFBF;
  --green-300: #74CC9D;
  --green-400: #4FC082;
  --green-500: #34B56A;   /* brand green */
  --green-600: #2A9C59;
  --green-700: #237E49;
  --green-800: #1F6540;
  --green-900: #1B5236;

  /* ---- Azul Tecnológico (secondary) ---- */
  --blue-50:  #EDF3FA;
  --blue-100: #D7E5F4;
  --blue-200: #B0CBE8;
  --blue-300: #82ABD8;
  --blue-400: #5C93CB;
  --blue-500: #3F7FBF;    /* tech blue */
  --blue-600: #356BA3;
  --blue-700: #2C5685;
  --blue-800: #26486D;
  --blue-900: #213D5B;

  /* ---- Grafito / Neutros (fríos, sesgados a grafito) ---- */
  --neutral-0:   #FFFFFF;   /* Blanco */
  --neutral-50:  #F5F7F9;
  --neutral-100: #E8EDF2;   /* Gris claro */
  --neutral-200: #D4DCE3;
  --neutral-300: #B3BFC9;
  --neutral-400: #8896A3;
  --neutral-500: #647281;
  --neutral-600: #4A5763;
  --neutral-700: #374350;
  --neutral-800: #2C3742;
  --neutral-900: #25303B;   /* Grafito */
  --neutral-950: #1A222B;

  /* ---- Estados semánticos ---- */
  --success-500: #2A9C59;
  --success-bg:  #ECF8F1;
  --info-500:    #3F7FBF;
  --info-bg:     #EDF3FA;
  --warning-500: #E0A21A;
  --warning-bg:  #FBF2DD;
  --danger-500:  #D64545;
  --danger-bg:   #FBECEC;

  /* ---- Alias semánticos — usar ESTOS en componentes, no las escalas ---- */
  --brand:            var(--green-500);
  --brand-hover:      var(--green-600);
  --brand-active:     var(--green-700);
  --brand-subtle:     var(--green-50);
  --brand-on:         #FFFFFF;            /* texto/icono sobre relleno brand */
  --accent:           var(--blue-500);    /* tech / cloud / IA */
  --accent-hover:     var(--blue-600);
  --accent-subtle:    var(--blue-50);

  --text-strong:      var(--neutral-900); /* titulares (Grafito) */
  --text-body:        var(--neutral-700);
  --text-muted:       var(--neutral-500);
  --text-subtle:      var(--neutral-400);
  --text-on-dark:     #FFFFFF;
  --text-on-dark-mut: rgba(255,255,255,0.72);
  --text-link:        var(--green-700);

  --surface-page:     var(--neutral-50);
  --surface-card:     var(--neutral-0);
  --surface-sunken:   var(--neutral-100);
  --surface-inverse:  var(--neutral-900); /* secciones grafito */
  --surface-inverse-2:var(--neutral-800);

  --border-subtle:    var(--neutral-200);
  --border-default:   var(--neutral-300);
  --border-strong:    var(--neutral-400);
  --focus-ring:       color-mix(in srgb, var(--green-500) 45%, transparent);

  /* Gradientes y familia gráfica (trazo de la "t" / nodos de red) */
  --grad-brand:   linear-gradient(120deg, var(--green-500) 0%, var(--green-700) 100%);
  --grad-tech:    linear-gradient(135deg, var(--neutral-900) 0%, var(--blue-800) 100%);
  --grad-glass:   linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0));

  /* ---- Tipografía ---- */
  --font-sans: "Aptos", "Segoe UI", "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", "Consolas", "Liberation Mono", monospace;

  /* Escala (tercera menor 1.20, rem sobre 16px) */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.375rem;  /* 22 */
  --text-xl:   1.75rem;   /* 28 */
  --text-2xl:  2.25rem;   /* 36 */
  --text-3xl:  2.875rem;  /* 46 */
  --text-4xl:  3.75rem;   /* 60 */

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:  1.12;
  --leading-snug:   1.28;
  --leading-normal: 1.5;
  --leading-relaxed:1.66;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.011em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;   /* eyebrows / overlines */

  /* Roles semánticos */
  --font-display: var(--weight-bold) var(--text-4xl)/var(--leading-tight) var(--font-sans);
  --font-h1:      var(--weight-bold) var(--text-3xl)/var(--leading-tight) var(--font-sans);
  --font-h2:      var(--weight-semibold) var(--text-2xl)/var(--leading-snug) var(--font-sans);
  --font-h3:      var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-sans);
  --font-h4:      var(--weight-semibold) var(--text-lg)/var(--leading-snug) var(--font-sans);
  --font-body:    var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-sans);
  --font-body-sm: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-sans);
  --font-eyebrow: var(--weight-semibold) var(--text-xs)/var(--leading-normal) var(--font-sans);

  /* ---- Espaciado (rejilla 4px, mucho blanco) ---- */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4  */
  --space-2:   0.5rem;   /* 8  */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.25rem;  /* 20 */
  --space-6:   1.5rem;   /* 24 */
  --space-8:   2rem;     /* 32 */
  --space-10:  2.5rem;   /* 40 */
  --space-12:  3rem;     /* 48 */
  --space-16:  4rem;     /* 64 */
  --space-20:  5rem;     /* 80 */
  --space-24:  6rem;     /* 96 */
  --space-32:  8rem;     /* 128 */

  --container-max: 1200px;
  --container-wide: 1360px;
  --gutter: var(--space-6);
  --section-y: var(--space-24);

  --control-h-sm: 32px;
  --control-h-md: 40px;
  --control-h-lg: 48px;

  /* ---- Radios ---- */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ---- Elevación — sombras tintadas de grafito (37,48,59) ---- */
  --shadow-xs: 0 1px 2px rgba(37,48,59,0.06);
  --shadow-sm: 0 1px 2px rgba(37,48,59,0.06), 0 2px 6px rgba(37,48,59,0.06);
  --shadow-md: 0 2px 4px rgba(37,48,59,0.05), 0 8px 20px rgba(37,48,59,0.08);
  --shadow-lg: 0 4px 8px rgba(37,48,59,0.06), 0 18px 40px rgba(37,48,59,0.12);
  --shadow-xl: 0 8px 16px rgba(37,48,59,0.08), 0 32px 64px rgba(37,48,59,0.16);
  --shadow-brand: 0 8px 22px rgba(52,181,106,0.28);   /* lift de CTA verde */
  --ring-focus: 0 0 0 3px var(--focus-ring);

  /* ---- Movimiento ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
}

/* ===========================================================================
   Base + familia gráfica de marca
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font: var(--font-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 { color: var(--text-strong); margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--text-link); text-decoration: none; }

/* Eyebrow / overline — recurso de marca recurrente */
.au-eyebrow {
  font: var(--font-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Sección "tech" grafito con textura sutil de nodos de conexión */
.au-surface-tech {
  background-color: var(--neutral-900);
  background-image:
    radial-gradient(circle at 18% 22%, rgba(63,127,191,0.20), transparent 38%),
    radial-gradient(circle at 82% 78%, rgba(52,181,106,0.16), transparent 42%);
  color: var(--text-on-dark);
}

/* Patrón de nodos/red — rejilla punteada fina que evoca conectividad */
.au-nodes {
  background-image: radial-gradient(rgba(52,181,106,0.18) 1.4px, transparent 1.6px);
  background-size: 26px 26px;
}
.au-nodes--cool {
  background-image: radial-gradient(rgba(63,127,191,0.16) 1.4px, transparent 1.6px);
  background-size: 26px 26px;
}

/* Líneas de conexión fluidas — diagonales finas que evocan el trazo de la "t" */
.au-trace {
  background-image:
    linear-gradient(115deg, transparent 0 49.6%, color-mix(in srgb, var(--green-500) 22%, transparent) 49.6% 50.2%, transparent 50.2%),
    linear-gradient(115deg, transparent 0 71.6%, color-mix(in srgb, var(--blue-500) 16%, transparent) 71.6% 72.0%, transparent 72%);
  background-size: 120px 120px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}