/* CORPORATE Rise · tokens.css
   Variables globales de marca. Solo custom properties.
   No incluye componentes ni estilos por página.
   Namespacing --cr- para no colisionar con Blocksy (--theme-*) ni plugins.
   Color oficial web (OT-015): verde #00A86B, petroleo #003B46. */

:root {
  /* ---- Color ---- */
  --cr-petroleo: #003B46;
  --cr-petroleo-deep: #002A33;
  --cr-petroleo-600: #0A4A55;
  --cr-verde: #00A86B;
  --cr-verde-hover: #00C47C;
  --cr-offwhite: #F5F7F6;
  --cr-blanco: #FFFFFF;
  --cr-texto-2: #5A6B6E;
  --cr-texto-cuerpo: #3C4A4D;
  --cr-teal-muted: #7FA6AC;
  --cr-teal-soft: #9FC4C9;

  /* ---- Hairlines ---- */
  --cr-hair-dark: rgba(255, 255, 255, .12);
  --cr-hair-light: rgba(0, 59, 70, .12);

  /* ---- Glass y tintes (derivados de los colores oficiales) ---- */
  /* v2 (2026-07-10): 88% estilo Apple; a .72 el header se veia demasiado transparente. */
  --cr-glass-light: rgba(245, 247, 246, .88);
  /* Cristal oscuro: menú móvil off-canvas (petróleo profundo translúcido).
     v5 (staging 2026-07-10): tinte ÚNICO del menú, aplicado igual a la CAJA
     (.ct-panel-inner) y al VELO; todo lo de dentro va transparente. Al ser una sola
     capa uniforme, .55 da cristal real con el texto blanco/verde legible.
     Afinado: subir a .62-.66 si cuesta leer; bajar a .48 si se ve muy denso. */
  --cr-glass-dark: rgba(0, 42, 51, .55);
  --cr-blur: 14px;
  --cr-tint-verde: rgba(0, 168, 107, .05);
  --cr-tint-petroleo: rgba(0, 59, 70, .035);
  /* Superficie de tarjeta clara con velo petroleo (~8% sobre blanco): separa la
     tarjeta del fondo off-white sin leerse como "tarjeta azul". Validado staging
     2026-07-10 (El terreno, Para direccion). */
  --cr-card-tint: #E9F0EF;

  /* ---- Tipografia ---- */
  --cr-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cr-font-sign: "Caveat", cursive;
  --cr-fw-regular: 400;
  --cr-fw-medium: 500;
  --cr-fw-bold: 700;
  --cr-fw-x: 800;
  --cr-fw-black: 900;
  --cr-fs-h1: clamp(2rem, 5vw, 3.2rem);
  --cr-fs-h2: clamp(1.4rem, 3vw, 2rem);
  --cr-fs-h3: clamp(1.05rem, 2vw, 1.25rem);
  --cr-fs-eyebrow: .7rem;
  --cr-fs-body: 1rem;
  --cr-fs-small: .8rem;
  --cr-lh-body: 1.7;
  --cr-lh-tight: 1.2;
  --cr-track-eyebrow: .2em;
  --cr-track-h: .005em;

  /* ---- Radios ---- */
  --cr-r-sm: 8px;
  --cr-r-md: 12px;
  --cr-r-lg: 16px;
  --cr-r-pill: 100px;

  /* ---- Espaciado ---- */
  --cr-space-2: 12px;
  --cr-space-3: 16px;
  --cr-space-4: 24px;
  --cr-space-5: 32px;
  --cr-space-6: 48px;
  --cr-space-7: 64px;
  --cr-sec-y: clamp(48px, 8vw, 96px);
  --cr-maxw: 1120px;
  /* Ritmo editorial: aire entre titulo (h1/h2) y su parrafo de apoyo (lead).
     Movil ~24px, escritorio ~36px. Validado en staging 2026-07-10. */
  --cr-gap-lead: clamp(24px, 3vw, 36px);
  /* Aire entre eyebrow y titulo (antes lo fijaba cada pagina con space-3). */
  --cr-gap-title: clamp(14px, 1.6vw, 20px);

  /* ---- Sombras (minimas, lujo silencioso) ---- */
  --cr-shadow-none: none;
  --cr-shadow-soft: 0 10px 30px rgba(0, 42, 51, .10);

  /* ---- z-index ---- */
  --cr-z-nav: 1000;
  --cr-z-overlay: 1100;
  --cr-z-cursor: 2;

  /* ---- Motion ---- */
  --cr-ease: cubic-bezier(.22, 1, .36, 1);
  --cr-dur-fast: 180ms;
  --cr-dur: 320ms;
  --cr-dur-slow: 760ms;          /* entrada editorial: se disfruta mas (era 600ms) */
  --cr-card-hover-scale: 1.015;
  --cr-stagger-step: 120ms;       /* cascada mas legible (era 90ms) */
}

/* ---- Breakpoints (referencia; se usan en @media, no como variables) ----
   movil  < 640px
   tablet 641 - 1024px
   desktop > 1024px
   puntos: 640, 768, 1024, 1280 */

/* ---- Reduced motion: neutraliza duraciones y escala de hover ---- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --cr-dur-fast: 0ms;
    --cr-dur: 0ms;
    --cr-dur-slow: 0ms;
    --cr-card-hover-scale: 1;
    --cr-stagger-step: 0ms;
  }
}