/* ============================================================================
   AZLOOM · FOUNDATION
   Tokens + reset + estilos base para la reconstrucción 2026.

   Fuente operativa: brand/AZLOOM_AI_Brand_Context_v1.0.md
   Identidad: quiet · precise · human · architectural · intelligent · timeless.
   NO usar: morado/neón, glow, gradientes decorativos, sombras marcadas,
   partículas, parallax, motion que "performa".
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1 · TOKENS
   --------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* -- Color base (paleta fija — AI Brand Context §06) -- */
  --color-ink:      #111113;   /* texto principal, logo, contraste */
  --color-white:    #FFFFFF;   /* superficies secundarias, cards, formularios */
  --color-ivory:    #FAF9F6;   /* canvas / fondo principal del sitio */
  --color-stone:    #E5E3DE;   /* estructura, bordes, divisores */
  --color-silver:   #BFC2C7;   /* acento (plano, nunca metálico) */
  --color-graphite: #2B2B2E;   /* secciones oscuras, footer */

  /* -- Superficies (semántico) -- */
  --surface-canvas: var(--color-ivory);
  --surface-raised: var(--color-white);
  --surface-sunken: var(--color-stone);
  --surface-dark:   var(--color-graphite);

  /* -- Texto -- */
  --text-primary:   var(--color-ink);
  --text-secondary: color-mix(in srgb, var(--color-ink) 68%, var(--color-ivory));
  --text-tertiary:  color-mix(in srgb, var(--color-ink) 55%, var(--color-ivory));
  --text-on-dark:            var(--color-ivory);
  --text-on-dark-secondary:  color-mix(in srgb, var(--color-ivory) 62%, var(--color-graphite));

  /* -- Bordes / líneas -- */
  --border-color:   var(--color-stone);
  --border-color-on-dark: color-mix(in srgb, var(--color-ivory) 16%, var(--color-graphite));
  --border-width:   1px;
  --border:         var(--border-width) solid var(--border-color);

  /* -- Acento -- */
  --accent:         var(--color-silver);

  /* -- Colores funcionales de sistema (NO son colores de marca — AI BC §06) -- */
  --color-success:  #3F7D5B;
  --color-warning:  #9B7327;
  --color-error:    #A3453B;

  /* -- Tipografía -- */
  /* Acumin Pro = tipografía primaria (Adobe Fonts, kit gxb7wcy). Cascadia Code
     es self-hostable (libre, Microsoft). */
  --font-sans: "acumin-pro", -apple-system,
               BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Code", "Cascadia Mono", ui-monospace, "SF Mono",
               "Consolas", "Liberation Mono", monospace;

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

  /* Escala fluida (AI Brand Context §07 — px de referencia:
     H1 72–96 · H2 48–64 · H3 32–40 · body 18–20 · small 15–16 · nav 15–17 · label 12–14).
     "Sizes are flexible. Hierarchy is consistent." */
  --text-display: clamp(2rem, 1.15rem + 3.9vw, 5.75rem);     /* ~32 → 92 */
  --text-h1:      clamp(1.875rem, 1.35rem + 2.5vw, 4.25rem); /* ~30 → 68 */
  --text-h2:      clamp(1.625rem, 1.35rem + 1.5vw, 3.25rem); /* ~26 → 52 */
  --text-h3:      clamp(1.375rem, 1.25rem + 0.7vw, 2.125rem);/* ~22 → 34 */
  --text-body-lg: 1.25rem;    /* 20 */
  --text-body:    1.125rem;   /* 18 */
  --text-small:   0.9375rem;  /* 15 */
  --text-nav:     1rem;       /* 16 */
  --text-label:   0.8125rem;  /* 13 */

  --leading-tight:   1.12;
  --leading-heading: 1.18;
  --leading-snug:    1.4;
  --leading-body:    1.65;
  --leading-relaxed: 1.75;

  --tracking-tight:  -0.014em;
  --tracking-normal: 0;
  --tracking-label:  0.12em;

  --measure: 66ch;   /* ancho de línea cómodo para prosa */

  /* -- Espaciado (base 4px, ritmo arquitectónico) -- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  /* Padding vertical de sección (fluido) */
  --section-gap: clamp(4rem, 2.4rem + 6.5vw, 9rem);

  /* -- Layout -- */
  --container-wide: 1320px;
  --container:      1200px;
  --container-text: 720px;
  --gutter: clamp(1.25rem, 0.6rem + 2.8vw, 4rem);

  /* -- Radios (AI BC §09 cards 16–24 · §11 botones 10–12) -- */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* -- Sombras (mínimas o ninguna — AI BC §09) -- */
  --shadow-none:   none;
  --shadow-subtle: 0 1px 2px rgba(17, 17, 19, 0.04),
                   0 4px 12px rgba(17, 17, 19, 0.04);
  --shadow-raised: 0 2px 6px rgba(17, 17, 19, 0.05),
                   0 14px 34px rgba(17, 17, 19, 0.06);

  /* -- Motion (AI BC §16 — explicar, guiar, revelar; nunca "performar") -- */
  --ease-standard: cubic-bezier(0.20, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.30, 1);
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;

  /* -- Foco (anillo Ink, sin glow — AI BC §13) -- */
  --focus-ring:   2px solid var(--color-ink);
  --focus-offset: 2px;

  /* -- z-index -- */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 300;
  --z-modal:   400;
}

/* ---------------------------------------------------------------------------
   2 · RESET
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

body {
  background: var(--surface-canvas);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video, canvas, picture { display: block; max-width: 100%; height: auto; }
svg { fill: currentColor; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

ul[role="list"], ol[role="list"] { list-style: none; }

hr {
  border: none;
  border-top: var(--border);
  margin-block: var(--space-xl);
}

::selection { background: var(--color-silver); color: var(--color-ink); }

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ---------------------------------------------------------------------------
   3 · ELEMENTOS BASE
   --------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: var(--text-h1); line-height: var(--leading-tight); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-body-lg); }

p { text-wrap: pretty; }
p + p { margin-top: var(--space-sm); }

a { color: inherit; text-decoration: none; }

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

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

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: "ss01";
}

/* ---------------------------------------------------------------------------
   4 · UTILIDADES DE LAYOUT
   --------------------------------------------------------------------------- */
.container,
.container-wide,
.container-text {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container      { max-width: var(--container); }
.container-wide { max-width: var(--container-wide); }
.container-text { max-width: var(--container-text); }

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

/* Prosa (blog, textos largos) */
.prose { max-width: var(--measure); }
.prose p,
.prose li { line-height: var(--leading-relaxed); color: var(--text-secondary); }
.prose h2 { margin-top: var(--space-xl); margin-bottom: var(--space-sm); }
.prose h3 { margin-top: var(--space-lg); margin-bottom: var(--space-xs); }
.prose a  { text-decoration: underline; text-underline-offset: 0.2em;
            text-decoration-thickness: 1px;
            text-decoration-color: var(--color-silver); }
.prose a:hover { text-decoration-color: currentColor; }

/* Etiqueta (label) — mayúsculas espaciadas, técnica */
.label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Sección sobre superficie oscura (Graphite) — invierte los tokens de texto */
.surface-dark {
  background: var(--surface-dark);
  color: var(--text-on-dark);
  --text-primary:   var(--text-on-dark);
  --text-secondary: var(--text-on-dark-secondary);
  --text-tertiary:  var(--text-on-dark-secondary);
  --border-color:   var(--border-color-on-dark);
  --accent:         var(--color-silver);
}

/* Superficie White sobre el canvas Ivory (bloques destacados / cards contenedoras) */
.surface-raised {
  background: var(--surface-raised);
  border: var(--border);
  border-radius: var(--radius-lg);
}

.divider { border-top: var(--border); }

/* Accesibilidad: salto al contenido */
.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: var(--space-sm);
  z-index: var(--z-modal);
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-ink);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  transform: translateY(-150%);
  transition: transform var(--duration-base) var(--ease-standard);
}
.skip-link:focus { transform: translateY(0); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------------
   5 · REVEAL (motion sobrio — AI BC §16)
   Aparición al entrar en viewport. Se activa con JS añadiendo .is-visible;
   sin JS o con reduced-motion, el contenido se ve siempre.
   --------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 640ms var(--ease-out),
              transform 640ms var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Reveal tipográfico por línea (titulares, ver azloom.js: splitIntoLines).
   padding-bottom dentro de la máscara evita recortar descendentes (g, y, p, q). */
.sl-line { display: block; overflow: hidden; padding-bottom: 0.22em; margin-bottom: -0.22em; }
.sl-line__inner {
  display: inline-block;
  will-change: transform;
  transform: translateY(112%);
  opacity: 0;
  transition: transform 640ms cubic-bezier(0.19, 1, 0.22, 1),
              opacity 500ms ease-out;
}
.is-split-visible .sl-line__inner { transform: translateY(0); opacity: 1; }

/* ---------------------------------------------------------------------------
   5b · CURSOR AZLOOM (punto luminoso — solo desktop con mouse, ver azloom.js)
   --------------------------------------------------------------------------- */
.cursor-orb {
  position: fixed;
  top: 0;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 0 7px 1px color-mix(in srgb, var(--color-silver) 65%, transparent);
  pointer-events: none;
  z-index: var(--z-modal);
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transition: width 260ms var(--ease-out), height 260ms var(--ease-out),
              background 260ms var(--ease-out), opacity 260ms var(--ease-standard);
  will-change: transform;
}
.cursor-orb--visible { opacity: 1; }
.cursor-orb--active {
  width: 20px;
  height: 20px;
  background: var(--color-silver);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--color-silver) 55%, transparent);
}
.cursor-orb--down { width: 7px; height: 7px; }
html.has-custom-cursor,
html.has-custom-cursor a,
html.has-custom-cursor button,
html.has-custom-cursor .btn,
html.has-custom-cursor [role="button"] {
  cursor: none;
}
html.has-custom-cursor input,
html.has-custom-cursor textarea,
html.has-custom-cursor select {
  cursor: auto;
}

/* ---------------------------------------------------------------------------
   6 · REDUCED MOTION
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .cursor-orb { display: none !important; }
  html.has-custom-cursor,
  html.has-custom-cursor a,
  html.has-custom-cursor button { cursor: auto; }
}

/* ---------------------------------------------------------------------------
   7 · SCROLLBAR (discreta, estructural — sin violeta)
   --------------------------------------------------------------------------- */
@supports (scrollbar-width: thin) {
  * { scrollbar-width: thin; scrollbar-color: var(--color-stone) transparent; }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-stone);
  border-radius: var(--radius-pill);
  border: 3px solid var(--surface-canvas);
}