/* ==========================================================================
   Soy Master Pro · tokens de diseño (10-nov-2026)
   ÚNICO lugar donde viven color, tipografía, espaciado y radios.
   Paleta del logo vigente (assets/img/logo-soymasterpro.png, 4-may-2026):
   negro, cian (acento principal, muestreado entre #00A6C5 y #00DEF2),
   morado neón (secundario) y plateado/blanco para el texto.
   Regla: aquí no va el magenta ni nada de la marca Ideofragma.
   Contraste sobre --c-bg: texto ~17:1, muted ~9:1, cian ~10:1; texto de
   botón sobre cian ~10:1 (AA). El morado puro da ~4:1 sobre negro: solo en
   bordes, brillos y fondos con texto blanco (4,9:1).
   ========================================================================== */

:root {
  /* --- Color --------------------------------------------------------- */
  --c-bg:            #07080C;   /* fondo principal (negro del logo) */
  --c-bg-alt:        #0E1016;   /* secciones alternas */
  --c-surface:       #151821;   /* tarjetas */
  --c-line:          #262B38;   /* bordes y divisores */
  --c-text:          #EEF1F5;   /* texto principal (plateado claro) */
  --c-text-muted:    #A9B0BD;   /* texto secundario (plateado) */
  --c-accent:        #1EC8E0;   /* acento principal: cian de la P */
  --c-accent-hover:  #5ADCEE;
  --c-on-accent:     #04141A;   /* texto sobre el cian (AA) */
  --c-accent-2:      #9B30FF;   /* acento secundario: morado neón del arco (decorativo) */
  --c-accent-2-text: #C08BFF;   /* morado para texto (AA sobre --c-bg) */
  --c-on-accent-2:   #FFFFFF;   /* texto sobre el morado (4,9:1, AA) */
  --c-ok:            #6FD3A0;   /* visto de "es para ti" */
  --c-no:            #F08A7C;   /* equis de "no es para ti" */
  --c-ph-bg:         #FFE45C;   /* marcador .ph (dato pendiente, visible a propósito) */
  --c-ph-text:       #1A1A1A;
  --c-focus:         #FFFFFF;   /* anillo de foco visible */
  --glow:            0 0 22px rgba(30, 200, 224, 0.35), 0 0 44px rgba(155, 48, 255, 0.2);
  --grad-ring:       linear-gradient(120deg, #9B30FF 0%, #1EC8E0 100%); /* arco del logo */
  /* Efectos (10-nov): brillos, metal y profundidad, siempre con la paleta del logo */
  --glow-cyan:       rgba(30, 200, 224, 0.35);
  --glow-violet:     rgba(155, 48, 255, 0.35);
  --grad-metal:      linear-gradient(160deg, #FFFFFF 0%, #C9D0DA 38%, #7D8796 62%, #E9EDF2 100%);
  --grad-arc:        conic-gradient(from 210deg, transparent 0deg, #9B30FF 60deg, #1EC8E0 150deg, transparent 230deg);
  --shadow-deep:     0 24px 60px rgba(0, 0, 0, 0.55);
  --persp:           900px;   /* perspectiva de las piezas 3D */
  --tilt-max:        7;       /* grados máximos del tilt (lo lee efectos.js) */

  /* --- Tipografía ---------------------------------------------------- */
  --f-display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fs-xs:   0.8125rem;                              /* 13 */
  --fs-sm:   0.9375rem;                              /* 15 */
  --fs-base: 1.0625rem;                              /* 17 */
  --fs-lg:   1.25rem;                                /* 20 */
  --fs-h3:   clamp(1.2rem, 1rem + 0.8vw, 1.5rem);
  --fs-h2:   clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  --fs-h1:   clamp(2.25rem, 1.4rem + 4.2vw, 4.25rem);

  --lh-tight: 1.1;
  --lh-body:  1.6;
  --fw-body:  400;
  --fw-bold:  700;
  --fw-display: 800;
  --tracking-label: 0.14em;

  /* --- Espaciado (escala de 4) -------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;

  --gutter: 1rem;              /* margen lateral en móvil (16 px) */
  --maxw: 72rem;               /* ancho máximo de contenido */
  --maxw-text: 42rem;          /* ancho máximo de párrafos */

  /* --- Forma --------------------------------------------------------- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-pill: 999px;

  --tap: 44px;                 /* alto mínimo de botones y áreas táctiles */
  --dur: 180ms;
}

@media (min-width: 768px) {
  :root { --gutter: 2rem; }
}