/* Sistema de diseño "Conversa con tus datos" — tokens y componentes, concatenados.
   Origen: design system Openagora (tokens/ + components/). Rutas relativas a este archivo. */

/* ===== tokens/fonts.css ===== */
/* Openagora — familias definitivas (FASE2 §2.1). Inter Tight = display, Inter = cuerpo/UI.
   Ambas AUTOHOSPEDADAS, sin CDN, con rutas relativas a este archivo.

   Un solo archivo variable por familia cubre todos los pesos del sistema (el navegador interpola),
   así que el handoff entrega dos binarios y no diez estáticos. Sin itálicas: el sistema no las usa,
   por lo que las variables italic quedan fuera.
     · Inter Tight — eje wght 100–900. Pesos usados: 500 y 600.
     · Inter — ejes opsz 14–32 y wght 100–900. Pesos usados: 400, 500 y 600. `font-optical-sizing:auto`
       (por defecto) ajusta opsz al tamaño real del texto, que es justamente para lo que sirve el eje.

   Formato TTF porque es el que entrega la descarga de Google Fonts. Convertir a woff2 (≈40 % menos
   de peso) es un paso de build: sólo cambia el `src`, nada más del sistema. Licencias en
   assets/fonts/Inter-OFL.txt y assets/fonts/InterTight-OFL.txt. */
@font-face{
  font-family:"Inter Tight";
  src:url("../fonts/InterTight-VariableFont_wght.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/Inter-VariableFont_opsz-wght.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --font-display:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-body:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-weight-display:500;
  --font-weight-display-strong:600;
  --font-weight-body:400;
  --font-weight-body-medium:500;
  --font-weight-ui:600;
}

/* ===== tokens/colors.css ===== */
/* FASE2 §1 — paleta. El #FF4400 no se modifica; se gobierna por reglas de tamaño. */
:root{
  /* Marca */
  --brand-primary:#FF4400;
  --brand-primary-hover:#E63D00;
  --brand-primary-active:#CC3700;
  --brand-ink:#1A1A1A;
  --brand-bone:#F7F5F2;

  /* Atmósfera (degradado de conexión) */
  --atmo-blue:#2E62FF;
  --atmo-cyan:#38E5CE;
  --atmo-violet:#8E7BFF;
  --atmo-indigo-deep:#141B3D;

  /* Fondos y superficies */
  --bg-light:#F7F5F2;
  --bg-white:#FFFFFF;
  --bg-dark:#161616;
  --surface-elevated-dark:#222222;

  /* Texto */
  --text-primary:#1A1A1A;
  --text-secondary:#4A4A4A;
  --text-muted:#6E6E6E;
  --text-inverse:#F7F5F2;
  --text-inverse-secondary:rgba(247,245,242,0.72);
  --text-accent:#FF4400;

  /* Foco */
  --focus-ring-primary:rgba(255,68,0,0.4);
  --focus-ring-ink:rgba(26,26,26,0.3);
  --focus-ring-inverse:rgba(247,245,242,0.35);
}

/* ===== tokens/typography.css ===== */
/* FASE2 §2.2 — escala. clamp() interpola entre el valor mobile y el desktop de la tabla. */
:root{
  --type-display-size:clamp(40px,5.4vw,72px); /* @kind font */
  --type-display-lh:1.02; /* @kind other */
  --type-display-ls:-0.025em; /* @kind other */

  --type-h1-size:clamp(34px,4.2vw,56px); /* @kind font */
  --type-h1-lh:1.08; /* @kind other */
  --type-h1-ls:-0.02em; /* @kind other */

  --type-h2-size:clamp(28px,3vw,40px); /* @kind font */
  --type-h2-lh:1.12; /* @kind other */
  --type-h2-ls:-0.015em; /* @kind other */

  --type-h3-size:clamp(20px,1.8vw,24px); /* @kind font */
  --type-h3-lh:1.3; /* @kind other */
  --type-h3-ls:-0.005em; /* @kind other */

  --type-body-lg-size:clamp(18px,1.5vw,20px); /* @kind font */
  --type-body-lg-lh:1.55; /* @kind other */

  --type-body-size:clamp(16px,1.25vw,17px); /* @kind font */
  --type-body-lh:1.6; /* @kind other */

  --type-caption-size:13px; /* @kind font */
  --type-caption-lh:1.4; /* @kind other */
  --type-caption-ls:0.01em; /* @kind other */

  --type-eyebrow-size:clamp(12px,1vw,13px); /* @kind font */
  --type-eyebrow-lh:1.2; /* @kind other */
  --type-eyebrow-ls:0.08em; /* @kind other */

  --type-number-size:clamp(40px,4.2vw,56px); /* @kind font */
  --type-number-lh:1; /* @kind other */
  --type-number-ls:-0.02em; /* @kind other */

  /* Medida de lectura: máx. 65 caracteres (FASE2 §2.2) */
  --measure-body:65ch; /* @kind spacing */
  --measure-lead:52ch; /* @kind spacing */
}

/* ===== tokens/spacing.css ===== */
/* Ritmo vertical de 8px; el aire es el contenedor del sistema. */
:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;
  --space-11:160px;

  /* Bloque editorial (FASE2 §3.2) */
  --block-padding-top:24px;
  --block-gap:48px;

  /* Layout */
  --container-max:1200px;
  --container-narrow:760px;
  --gutter:clamp(24px,5vw,80px); /* @kind spacing */
  --section-py:clamp(72px,10vw,160px); /* @kind spacing */
  --section-py-tight:clamp(40px,5vw,72px); /* @kind spacing */
}

/* ===== tokens/borders.css ===== */
/* La línea de 1px reemplaza a la caja (FASE2 §3.2). */
:root{
  --border-hairline:rgba(26,26,26,0.15);
  --border-hairline-inverse:rgba(247,245,242,0.16);
  --border-strong:#1A1A1A;
  --border-width-hairline:1px;
  --border-width-stat:2px;

  --radius-none:0px;
  --radius-container:8px;   /* máximo del sistema, mínimo funcional */
  --radius-pill:999px;

  --icon-stroke:1.75px; /* @kind other */
  --icon-size-ui:20px;
  --icon-size-default:24px;
  --icon-size-block:28px;
}

/* ===== tokens/elevation.css ===== */
/* Una sola sombra en todo el sistema, para superficies que flotan de verdad. */
:root{
  --shadow-float:0 1px 2px rgba(20,20,20,0.06),0 12px 32px rgba(20,20,20,0.10);
  --shadow-none:none;
}

/* ===== tokens/motion.css ===== */
/* Los únicos efectos permitidos son animación y motion. Transición base 180ms ease-out. */
:root{
  --duration-fast:120ms; /* @kind other */
  --duration-base:180ms; /* @kind other */
  --duration-slow:320ms; /* @kind other */
  --duration-reveal:700ms; /* @kind other */
  --ease-out:cubic-bezier(0.22,0.61,0.36,1); /* @kind other */
  --ease-in-out:cubic-bezier(0.4,0,0.2,1); /* @kind other */
  --transition-base:180ms cubic-bezier(0.22,0.61,0.36,1); /* @kind other */
  --arrow-shift:4px; /* @kind spacing */
  --press-scale:0.98; /* @kind other */
}
@media (prefers-reduced-motion:reduce){
  :root{
    --duration-fast:0ms; /* @kind other */
    --duration-base:0ms; /* @kind other */
    --duration-slow:0ms; /* @kind other */
    --duration-reveal:0ms; /* @kind other */
    --arrow-shift:0px; /* @kind spacing */
    --press-scale:1; /* @kind other */
  }
}

/* ===== tokens/atmosphere.css ===== */
/* FASE2 §1.2 + aplicaciones reales entregadas por el cliente.
   La atmósfera NO es un fondo a sangre: es una NUBE ORGÁNICA (blob) de cian → azul → azul profundo /
   violeta, con grano visible, apoyada en un borde o esquina sobre fondo plano (hueso o casi negro).
   Cambia de forma y posición; nunca se interpone en la comunicación — sólo aporta ambiente. */
:root{
  /* Cuatro siluetas. La nube se compone en DOS capas independientes, y de ahí viene la
     sensación de nube en vez de spray:
       1. COLOR — un lavado diagonal continuo turquesa → azul → marino → lavanda que cubre
          toda la caja con opacidad plena. La transición de tono la hace el lavado, no los
          círculos, así que no hay circunferencias marcadas al interior. Los acentos radiales
          sólo modulan luminosidad, con rampas larguísimas y sobre un fondo ya opaco.
       2. FORMA — máscara de lóbulos (--atmo-shape-N) con caída suavizada en diez tramos.
          Al ir la caída en la máscara y no en el color, el borde muere sin aureola.
     Nunca subir la alfa de un lóbulo cerca de su radio exterior: eso es lo que dibuja el
     halo de spray. La rampa debe perder densidad desde el 18 % en adelante. */
  /* 1 · cúmulo: masa compacta, lóbulos apilados. */
  --atmo-blob-1:linear-gradient(112deg,#4BEAD8 0%,#3BDFE3 12%,#2CCFEC 24%,#25AFF0 38%,#1E6FEE 54%,#1A55D2 66%,#143FB4 78%,#3F52BC 88%,#7C8AD0 95%,#9AA3D6 100%),radial-gradient(96% 84% at 24% 68%,rgba(75,234,216,0.80) 0%,rgba(75,234,216,0.58) 22%,rgba(75,234,216,0.34) 42%,rgba(75,234,216,0.16) 60%,rgba(75,234,216,0.05) 78%,rgba(75,234,216,0) 100%),radial-gradient(88% 76% at 72% 30%,rgba(20,63,180,0.72) 0%,rgba(20,63,180,0.50) 24%,rgba(20,63,180,0.28) 44%,rgba(20,63,180,0.12) 64%,rgba(20,63,180,0.03) 82%,rgba(20,63,180,0) 100%) /* @kind other */;
  /* 2 · estela: lóbulos alargados en diagonal, cola fina. */
  --atmo-blob-2:linear-gradient(128deg,#4BEAD8 0%,#3BDFE3 12%,#2CCFEC 24%,#25AFF0 38%,#1E6FEE 54%,#1A55D2 66%,#143FB4 78%,#3F52BC 88%,#7C8AD0 95%,#9AA3D6 100%),radial-gradient(70% 120% at 12% 78%,rgba(75,234,216,0.82) 0%,rgba(75,234,216,0.58) 24%,rgba(75,234,216,0.32) 46%,rgba(75,234,216,0.13) 66%,rgba(75,234,216,0.04) 84%,rgba(75,234,216,0) 100%),radial-gradient(64% 108% at 82% 24%,rgba(20,63,180,0.70) 0%,rgba(20,63,180,0.46) 26%,rgba(20,63,180,0.24) 48%,rgba(20,63,180,0.10) 68%,rgba(20,63,180,0.02) 86%,rgba(20,63,180,0) 100%) /* @kind other */;
  /* 3 · vórtice: núcleo denso arriba, columna que se hunde. */
  --atmo-blob-3:linear-gradient(172deg,#4BEAD8 0%,#3BDFE3 12%,#2CCFEC 24%,#25AFF0 38%,#1E6FEE 54%,#1A55D2 66%,#143FB4 78%,#3F52BC 88%,#7C8AD0 95%,#9AA3D6 100%),radial-gradient(120% 70% at 54% 12%,rgba(75,234,216,0.80) 0%,rgba(75,234,216,0.56) 24%,rgba(75,234,216,0.32) 44%,rgba(75,234,216,0.13) 64%,rgba(75,234,216,0.04) 82%,rgba(75,234,216,0) 100%),radial-gradient(108% 66% at 46% 86%,rgba(63,82,188,0.66) 0%,rgba(63,82,188,0.44) 26%,rgba(63,82,188,0.22) 48%,rgba(63,82,188,0.09) 68%,rgba(63,82,188,0.02) 86%,rgba(63,82,188,0) 100%) /* @kind other */;
  /* 4 · deshilachada: lóbulos sueltos de distinto tamaño, borde irregular. */
  --atmo-blob-4:linear-gradient(96deg,#4BEAD8 0%,#3BDFE3 12%,#2CCFEC 24%,#25AFF0 38%,#1E6FEE 54%,#1A55D2 66%,#143FB4 78%,#3F52BC 88%,#7C8AD0 95%,#9AA3D6 100%),radial-gradient(92% 96% at 18% 52%,rgba(75,234,216,0.78) 0%,rgba(75,234,216,0.55) 22%,rgba(75,234,216,0.31) 42%,rgba(75,234,216,0.13) 62%,rgba(75,234,216,0.04) 80%,rgba(75,234,216,0) 100%),radial-gradient(84% 88% at 80% 44%,rgba(30,111,238,0.68) 0%,rgba(30,111,238,0.46) 24%,rgba(30,111,238,0.24) 46%,rgba(30,111,238,0.10) 66%,rgba(30,111,238,0.02) 84%,rgba(30,111,238,0) 100%) /* @kind other */;
  --atmo-blob:var(--atmo-blob-1) /* @kind other */;

  /* Siluetas: la forma y TODA la caída de la nube viven aquí. */
  --atmo-shape-1:radial-gradient(34% 38% at 34% 58%,#000 0%,rgba(0,0,0,0.95) 16%,rgba(0,0,0,0.84) 30%,rgba(0,0,0,0.66) 43%,rgba(0,0,0,0.46) 55%,rgba(0,0,0,0.28) 67%,rgba(0,0,0,0.15) 78%,rgba(0,0,0,0.06) 88%,rgba(0,0,0,0) 100%),
    radial-gradient(30% 34% at 50% 44%,#000 0%,rgba(0,0,0,0.95) 16%,rgba(0,0,0,0.84) 30%,rgba(0,0,0,0.66) 43%,rgba(0,0,0,0.46) 55%,rgba(0,0,0,0.28) 67%,rgba(0,0,0,0.15) 78%,rgba(0,0,0,0.06) 88%,rgba(0,0,0,0) 100%),
    radial-gradient(28% 30% at 63% 55%,#000 0%,rgba(0,0,0,0.95) 16%,rgba(0,0,0,0.84) 30%,rgba(0,0,0,0.66) 43%,rgba(0,0,0,0.46) 55%,rgba(0,0,0,0.28) 67%,rgba(0,0,0,0.15) 78%,rgba(0,0,0,0.06) 88%,rgba(0,0,0,0) 100%),
    radial-gradient(24% 26% at 46% 70%,#000 0%,rgba(0,0,0,0.95) 16%,rgba(0,0,0,0.84) 30%,rgba(0,0,0,0.66) 43%,rgba(0,0,0,0.46) 55%,rgba(0,0,0,0.28) 67%,rgba(0,0,0,0.15) 78%,rgba(0,0,0,0.06) 88%,rgba(0,0,0,0) 100%) /* @kind other */;
  --atmo-shape-2:radial-gradient(26% 44% at 26% 68%,#000 0%,rgba(0,0,0,0.95) 16%,rgba(0,0,0,0.84) 30%,rgba(0,0,0,0.66) 43%,rgba(0,0,0,0.46) 55%,rgba(0,0,0,0.28) 67%,rgba(0,0,0,0.15) 78%,rgba(0,0,0,0.06) 88%,rgba(0,0,0,0) 100%),
    radial-gradient(24% 38% at 40% 55%,#000 0%,rgba(0,0,0,0.95) 16%,rgba(0,0,0,0.84) 30%,rgba(0,0,0,0.66) 43%,rgba(0,0,0,0.46) 55%,rgba(0,0,0,0.28) 67%,rgba(0,0,0,0.15) 78%,rgba(0,0,0,0.06) 88%,rgba(0,0,0,0) 100%),
    radial-gradient(22% 34% at 55% 44%,#000 0%,rgba(0,0,0,0.95) 16%,rgba(0,0,0,0.84) 30%,rgba(0,0,0,0.66) 43%,rgba(0,0,0,0.46) 55%,rgba(0,0,0,0.28) 67%,rgba(0,0,0,0.15) 78%,rgba(0,0,0,0.06) 88%,rgba(0,0,0,0) 100%),
    radial-gradient(18% 28% at 70% 33%,#000 0%,rgba(0,0,0,0.95) 16%,rgba(0,0,0,0.84) 30%,rgba(0,0,0,0.66) 43%,rgba(0,0,0,0.46) 55%,rgba(0,0,0,0.28) 67%,rgba(0,0,0,0.15) 78%,rgba(0,0,0,0.06) 88%,rgba(0,0,0,0) 100%) /* @kind other */;
  --atmo-shape-3:radial-gradient(42% 24% at 52% 26%,#000 0%,rgba(0,0,0,0.95) 16%,rgba(0,0,0,0.84) 30%,rgba(0,0,0,0.66) 43%,rgba(0,0,0,0.46) 55%,rgba(0,0,0,0.28) 67%,rgba(0,0,0,0.15) 78%,rgba(0,0,0,0.06) 88%,rgba(0,0,0,0) 100%),
    radial-gradient(36% 22% at 45% 44%,#000 0%,rgba(0,0,0,0.95) 16%,rgba(0,0,0,0.84) 30%,rgba(0,0,0,0.66) 43%,rgba(0,0,0,0.46) 55%,rgba(0,0,0,0.28) 67%,rgba(0,0,0,0.15) 78%,rgba(0,0,0,0.06) 88%,rgba(0,0,0,0) 100%),
    radial-gradient(32% 22% at 53% 60%,#000 0%,rgba(0,0,0,0.95) 16%,rgba(0,0,0,0.84) 30%,rgba(0,0,0,0.66) 43%,rgba(0,0,0,0.46) 55%,rgba(0,0,0,0.28) 67%,rgba(0,0,0,0.15) 78%,rgba(0,0,0,0.06) 88%,rgba(0,0,0,0) 100%),
    radial-gradient(26% 18% at 47% 76%,#000 0%,rgba(0,0,0,0.95) 16%,rgba(0,0,0,0.84) 30%,rgba(0,0,0,0.66) 43%,rgba(0,0,0,0.46) 55%,rgba(0,0,0,0.28) 67%,rgba(0,0,0,0.15) 78%,rgba(0,0,0,0.06) 88%,rgba(0,0,0,0) 100%) /* @kind other */;
  --atmo-shape-4:radial-gradient(30% 38% at 26% 50%,#000 0%,rgba(0,0,0,0.95) 16%,rgba(0,0,0,0.84) 30%,rgba(0,0,0,0.66) 43%,rgba(0,0,0,0.46) 55%,rgba(0,0,0,0.28) 67%,rgba(0,0,0,0.15) 78%,rgba(0,0,0,0.06) 88%,rgba(0,0,0,0) 100%),
    radial-gradient(26% 32% at 40% 68%,#000 0%,rgba(0,0,0,0.95) 16%,rgba(0,0,0,0.84) 30%,rgba(0,0,0,0.66) 43%,rgba(0,0,0,0.46) 55%,rgba(0,0,0,0.28) 67%,rgba(0,0,0,0.15) 78%,rgba(0,0,0,0.06) 88%,rgba(0,0,0,0) 100%),
    radial-gradient(32% 40% at 50% 44%,#000 0%,rgba(0,0,0,0.95) 16%,rgba(0,0,0,0.84) 30%,rgba(0,0,0,0.66) 43%,rgba(0,0,0,0.46) 55%,rgba(0,0,0,0.28) 67%,rgba(0,0,0,0.15) 78%,rgba(0,0,0,0.06) 88%,rgba(0,0,0,0) 100%),
    radial-gradient(28% 34% at 64% 58%,#000 0%,rgba(0,0,0,0.95) 16%,rgba(0,0,0,0.84) 30%,rgba(0,0,0,0.66) 43%,rgba(0,0,0,0.46) 55%,rgba(0,0,0,0.28) 67%,rgba(0,0,0,0.15) 78%,rgba(0,0,0,0.06) 88%,rgba(0,0,0,0) 100%),
    radial-gradient(22% 28% at 76% 44%,#000 0%,rgba(0,0,0,0.95) 16%,rgba(0,0,0,0.84) 30%,rgba(0,0,0,0.66) 43%,rgba(0,0,0,0.46) 55%,rgba(0,0,0,0.28) 67%,rgba(0,0,0,0.15) 78%,rgba(0,0,0,0.06) 88%,rgba(0,0,0,0) 100%) /* @kind other */;
  --atmo-shape:var(--atmo-shape-1) /* @kind other */;

  --atmo-opacity-low:0.08; /* @kind other */
  --atmo-opacity-mid:0.14; /* @kind other */
  --atmo-opacity-high:0.20; /* @kind other */
  --atmo-opacity-full:1; /* @kind other */
  --grain-opacity:0.06; /* @kind other */
  /* Desvanecido perimetral: la nube debe morir ANTES del borde de su caja, si no el navegador
     la recorta en seco (se ve la diagonal de la caja rotada). Se compone con la silueta. */
  --atmo-feather:radial-gradient(closest-side ellipse at 50% 50%,#000 34%,rgba(0,0,0,0.86) 56%,rgba(0,0,0,0.52) 74%,rgba(0,0,0,0.20) 88%,rgba(0,0,0,0) 100%) /* @kind other */;
  --grain-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='2.2' intercept='-0.4'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E") /* @kind other */;
}

/* Blob de atmósfera. Se posiciona con top/right/bottom/left desde el uso; siempre en zona sin texto.
   El grano va enmascarado con la misma silueta, para que no se vea el tile fuera de la nube. */
.oa-blob,.oa-blob::after{-webkit-mask-composite:source-in,source-over,source-over,source-over,source-over,source-over;mask-composite:intersect,add,add,add,add,add}
.oa-blob{position:absolute;z-index:-1;pointer-events:none;background-image:var(--atmo-blob);background-repeat:no-repeat;background-size:100% 100%;opacity:var(--atmo-opacity-full);-webkit-mask-image:var(--atmo-feather),var(--atmo-shape);mask-image:var(--atmo-feather),var(--atmo-shape);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.oa-blob::after{content:"";position:absolute;inset:0;background-image:var(--grain-svg);background-size:170px 170px;mix-blend-mode:overlay;opacity:0.9;-webkit-mask-image:var(--atmo-feather),var(--atmo-shape);mask-image:var(--atmo-feather),var(--atmo-shape);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.oa-blob--hint{opacity:var(--atmo-opacity-mid)}
.oa-blob--hint-low{opacity:var(--atmo-opacity-low)}
.oa-blob--hint-high{opacity:var(--atmo-opacity-high)}
.oa-blob--s1{background-image:var(--atmo-blob-1)}
.oa-blob--s1,.oa-blob--s1::after{-webkit-mask-image:var(--atmo-feather),var(--atmo-shape-1);mask-image:var(--atmo-feather),var(--atmo-shape-1)}
.oa-blob--s2{background-image:var(--atmo-blob-2)}
.oa-blob--s2,.oa-blob--s2::after{-webkit-mask-image:var(--atmo-feather),var(--atmo-shape-2);mask-image:var(--atmo-feather),var(--atmo-shape-2)}
.oa-blob--s3{background-image:var(--atmo-blob-3)}
.oa-blob--s3,.oa-blob--s3::after{-webkit-mask-image:var(--atmo-feather),var(--atmo-shape-3);mask-image:var(--atmo-feather),var(--atmo-shape-3)}
.oa-blob--s4{background-image:var(--atmo-blob-4)}
.oa-blob--s4,.oa-blob--s4::after{-webkit-mask-image:var(--atmo-feather),var(--atmo-shape-4);mask-image:var(--atmo-feather),var(--atmo-shape-4)}
/* Grano de sección: capa fina y global sobre fondos planos. */
.oa-grain{position:absolute;inset:0;z-index:1;background-image:var(--grain-svg);background-size:240px 240px;opacity:var(--grain-opacity);pointer-events:none;mix-blend-mode:overlay}

/* ===== tokens/levels.css ===== */
/* PRIMITIVO DE BLOQUE — estructura del sistema, no convención de página.
   El nivel se declara con data-level en el contenedor:
     data-level="1"  sección mayor (<section>). Único nivel que lleva id.
     data-level="2"  bloque interno (ítem editorial, caso de uso, bloque de seguridad).
     data-level="3"  anidación mayor dentro de un bloque de nivel 2.
   El id de nivel 1 se deriva de la FUNCIÓN de la sección, nunca del titular: slug ASCII
   en minúsculas con guiones (hero, costo-status-quo, como-funciona, casos-de-uso,
   seguridad, agendar, contacto). Los id son contrato: publicados no cambian, un id
   retirado no se reutiliza, nunca duplicados en la misma página.

   Este archivo es el soporte del primitivo: ritmo por nivel y offset de ancla. No pinta
   nada por sí mismo; no impone fondo, borde ni radio. Lo visual sigue siendo del
   componente (.oa-section, .oa-block). */
:root{
  /* Offset del ancla: la nav sticky no debe tapar el titular al saltar a un id. */
  --anchor-offset:clamp(72px,8vw,96px); /* @kind spacing */
  /* Aire entre hijos de un mismo nivel, cuando el nivel se apila (data-stack). */
  --level-1-gap:var(--space-9); /* @kind spacing */
  --level-2-gap:var(--space-7); /* @kind spacing */
  --level-3-gap:var(--space-5); /* @kind spacing */
}
[data-level="1"]{--level-gap:var(--level-1-gap);scroll-margin-top:var(--anchor-offset)}
[data-level="2"]{--level-gap:var(--level-2-gap)}
[data-level="3"]{--level-gap:var(--level-3-gap)}
/* Apilado opcional: sólo cuando el contenedor lo pide. Un grid (casos de uso, bloques
   editoriales) ya resuelve su propio gap y no debe recibir márgenes. */
[data-level][data-stack]{display:flex;flex-direction:column;gap:var(--level-gap)}

/* ===== tokens/base.css ===== */
/* Reset mínimo + defaults de tipografía y links. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg-light);color:var(--text-primary);font-family:var(--font-body);font-size:var(--type-body-size);line-height:var(--type-body-lh);font-weight:var(--font-weight-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--font-weight-display);margin:0;text-wrap:pretty}
p{margin:0;text-wrap:pretty}
a{color:var(--text-primary);text-decoration:none;border-bottom:0;transition:color var(--transition-base),border-color var(--transition-base)}
a:hover{color:var(--brand-primary)}
:where(.oa-on-dark) a,a.oa-link-inverse{color:var(--text-inverse)}
:where(.oa-on-dark) a:hover,a.oa-link-inverse:hover{color:var(--brand-primary)}
:focus-visible{outline:2px solid var(--focus-ring-primary);outline-offset:2px}
em,i{font-style:normal}

/* ===== components/core/core.css ===== */
/* Botón píldora, eyebrow, divisor, icono. Geometría y estados según FASE2 §3.1 y §3.3. */
.oa-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-body);font-weight:600;font-size:16px;line-height:1;border-radius:var(--radius-pill);border:1px solid transparent;padding:16px 32px;cursor:pointer;text-decoration:none;transition:background-color var(--transition-base),color var(--transition-base),border-color var(--transition-base),transform var(--duration-fast) var(--ease-out);white-space:nowrap}
.oa-btn:hover{border-bottom-color:transparent}
.oa-btn--sm{padding:12px 24px;font-size:15px}
.oa-btn__arrow{display:inline-block;transition:transform var(--transition-base)}
.oa-btn:hover .oa-btn__arrow{transform:translateX(var(--arrow-shift))}
.oa-btn--down:hover .oa-btn__arrow{transform:translateY(var(--arrow-shift))}
.oa-btn:active{transform:scale(var(--press-scale))}
.oa-btn[disabled],.oa-btn--disabled{opacity:0.38;pointer-events:none}

.oa-btn--primary{background:var(--brand-primary);color:#fff;border-color:var(--brand-primary)}
.oa-btn--primary:hover{background:var(--brand-primary-hover);border-color:var(--brand-primary-hover);color:#fff}
.oa-btn--primary:active{background:var(--brand-primary-active);border-color:var(--brand-primary-active)}
.oa-btn--primary:focus-visible{outline:2px solid var(--focus-ring-primary);outline-offset:2px}

.oa-btn--secondary{background:transparent;color:var(--brand-ink);border-color:var(--border-strong)}
.oa-btn--secondary:hover{background:var(--brand-ink);color:var(--brand-bone)}
.oa-btn--secondary:active{background:#000;color:var(--brand-bone)}
.oa-btn--secondary:focus-visible{outline:2px solid var(--focus-ring-ink);outline-offset:2px}

.oa-btn--ghost{background:transparent;color:var(--text-inverse);border-color:rgba(247,245,242,0.24)}
.oa-btn--ghost:hover{border-color:var(--brand-bone);color:var(--text-inverse)}
.oa-btn--ghost:active{background:rgba(247,245,242,0.08)}
.oa-btn--ghost:focus-visible{outline:2px solid var(--focus-ring-inverse);outline-offset:2px}

.oa-eyebrow{display:block;font-family:var(--font-body);font-weight:600;font-size:var(--type-eyebrow-size);line-height:var(--type-eyebrow-lh);letter-spacing:var(--type-eyebrow-ls);text-transform:uppercase;color:var(--brand-primary)}

.oa-divider{border:0;border-top:1px solid var(--border-hairline);margin:0;width:100%}
.oa-divider--inverse{border-top-color:var(--border-hairline-inverse)}

.oa-icon{display:inline-block;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;flex:none}

/* ===== components/editorial/editorial.css ===== */
/* Bloques editoriales: sin fondo, sin radio, sin sombra. Estructura por hairline y aire. */
.oa-block{border-top:1px solid var(--border-hairline);padding-top:var(--block-padding-top)}
.oa-block--inverse{border-top-color:var(--border-hairline-inverse)}
.oa-block__mark{display:block;margin-bottom:16px;font-family:var(--font-display);font-weight:500;font-size:var(--type-number-size);line-height:var(--type-number-lh);letter-spacing:var(--type-number-ls);font-variant-numeric:tabular-nums;color:var(--brand-primary)}
.oa-block__mark--icon{margin-bottom:20px;line-height:1}
.oa-block__title{font-family:var(--font-display);font-weight:600;font-size:var(--type-h3-size);line-height:var(--type-h3-lh);letter-spacing:var(--type-h3-ls);color:var(--text-primary);margin:0 0 10px}
.oa-block--inverse .oa-block__title{color:var(--text-inverse)}
.oa-block__body{font-size:var(--type-body-size);line-height:var(--type-body-lh);color:var(--text-secondary);max-width:var(--measure-body)}
.oa-block--inverse .oa-block__body{color:var(--text-inverse-secondary)}

/* Métrica sin caja: cifra + border-left 2px. */
.oa-stat{border-left:var(--border-width-stat) solid var(--brand-primary);padding-left:20px}
.oa-stat__value{display:block;font-family:var(--font-display);font-weight:500;font-size:var(--type-number-size);line-height:var(--type-number-lh);letter-spacing:var(--type-number-ls);font-variant-numeric:tabular-nums;color:var(--brand-primary)}
.oa-stat__label{display:block;margin-top:10px;font-size:var(--type-caption-size);line-height:var(--type-caption-lh);letter-spacing:var(--type-caption-ls);font-weight:500;color:var(--text-secondary);max-width:34ch}
.oa-stat--inverse .oa-stat__label{color:var(--text-inverse-secondary)}

/* Badge de confianza: píldora hairline sin relleno. */
.oa-badge{display:inline-flex;align-items:center;gap:8px;height:32px;padding:6px 16px;border:1px solid var(--border-hairline);border-radius:var(--radius-pill);font-size:var(--type-caption-size);line-height:1;letter-spacing:var(--type-caption-ls);font-weight:500;color:var(--text-secondary);white-space:nowrap}
.oa-badge--inverse{border-color:var(--border-hairline-inverse);color:var(--text-inverse-secondary)}
.oa-trust-strip{display:flex;flex-wrap:wrap;align-items:center;gap:12px}

/* Contenedor agrupador: sólo cuando hay agrupación real. */
.oa-outline{border:1px solid var(--border-hairline);border-radius:var(--radius-container);padding:var(--space-5)}
.oa-outline--inverse{border-color:var(--border-hairline-inverse)}
.oa-outline--flush{padding:0}

/* ===== components/layout/layout.css ===== */
/* Secciones, atmósfera, nav y footer. */
.oa-section{position:relative;isolation:isolate;overflow:clip;padding-top:var(--section-py);padding-bottom:var(--section-py)}
.oa-section--tight{padding-top:var(--section-py-tight);padding-bottom:var(--section-py-tight)}
.oa-section--light{background:var(--bg-light);color:var(--text-primary)}
.oa-section--white{background:var(--bg-white);color:var(--text-primary)}
.oa-section--dark{background:var(--bg-dark);color:var(--text-inverse)}
.oa-section--indigo{background:var(--atmo-indigo-deep);color:var(--text-inverse)}
.oa-section__inner{position:relative;z-index:2;max-width:var(--container-max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.oa-section__grain{position:absolute;inset:0;z-index:1;background-image:var(--grain-svg);background-size:240px 240px;opacity:var(--grain-opacity);pointer-events:none;mix-blend-mode:overlay}
.oa-nav--transparent-ink{background:transparent;color:var(--text-primary)}

.oa-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);padding:18px var(--gutter);transition:background-color var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base);border-bottom:1px solid transparent}
.oa-nav--transparent{background:transparent;color:var(--text-inverse)}
.oa-nav--solid{background:rgba(247,245,242,0.92);backdrop-filter:blur(12px);color:var(--text-primary);border-bottom-color:var(--border-hairline);box-shadow:var(--shadow-float)}
.oa-nav__links{display:flex;align-items:center;gap:var(--space-6)}
.oa-nav__link{font-size:15px;font-weight:500;color:inherit;opacity:0.82;border-bottom:1px solid transparent;transition:opacity var(--transition-base),border-color var(--transition-base)}
.oa-nav__link:hover{opacity:1;color:inherit;border-bottom-color:currentColor}

.oa-logo{display:inline-flex;align-items:center;gap:10px;color:inherit;border-bottom:0;text-decoration:none}
.oa-logo__mark{display:block;flex:none}
.oa-logo__name{font-family:var(--font-display);font-weight:400;letter-spacing:-0.015em;line-height:1}
.oa-logo__descriptor{font-family:var(--font-body);font-weight:400;font-size:var(--type-caption-size);letter-spacing:0.01em;opacity:0.72}

.oa-footer{border-top:1px solid var(--border-hairline);padding:var(--space-7) var(--gutter);display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:flex-start;justify-content:space-between;font-size:var(--type-caption-size);color:var(--text-secondary)}
.oa-footer--inverse{border-top-color:var(--border-hairline-inverse);color:var(--text-inverse-secondary)}
.oa-footer__meta{display:flex;flex-direction:column;gap:6px;align-items:flex-start}

/* ===== components/booking/booking.css ===== */
/* Agendamiento: marco hairline + salida de respaldo. Sin fondo de color ni sombra. */
.oa-scheduler{display:flex;flex-direction:column;gap:20px}
.oa-scheduler__frame{position:relative;border:1px solid var(--border-hairline);border-radius:var(--radius-container);overflow:hidden;background:var(--bg-light);height:clamp(560px,84vh,820px)}
.oa-scheduler--inverse .oa-scheduler__frame{border-color:var(--border-hairline-inverse)}
.oa-scheduler__iframe{display:block;width:100%;height:100%;border:0}
.oa-scheduler__fallback{font-size:var(--type-caption-size);line-height:var(--type-caption-lh);letter-spacing:var(--type-caption-ls);color:var(--text-secondary)}
.oa-scheduler--inverse .oa-scheduler__fallback{color:var(--text-inverse-secondary)}
/* Agendador no disponible: el marco se retira y el respaldo pasa a ser la vía principal. */
.oa-scheduler[data-state="unavailable"] .oa-scheduler__frame{display:none}
.oa-scheduler[data-state="unavailable"] .oa-scheduler__fallback{font-size:var(--type-body-size);line-height:var(--type-body-lh);letter-spacing:normal;color:var(--text-primary);border-top:1px solid var(--border-hairline);padding-top:var(--block-padding-top)}
.oa-scheduler--inverse[data-state="unavailable"] .oa-scheduler__fallback{color:var(--text-inverse);border-top-color:var(--border-hairline-inverse)}