@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');
/* =============================================================================
   OCEAN 2.0 — Design System "Abyssal Pulse"
   Fuente de verdad: Stitch (Joselinne) · proyecto "Ocean Tech Landing Page".
   Re-skin global del Portal IA: re-mapea los tokens existentes a la paleta y
   tipografía Ocean 2.0. NO toca el markup — solo cascada por variables.
   Felipe 2026-06-21. Reversible: quitar el <link> a este archivo.
   ============================================================================= */
:root{
  /* Superficies abisales (negro, no navy) — "definidas por luz, no por líneas" */
  --bg:        #0e0e0e !important;   /* surface base */
  --bg-2:      #000000 !important;   /* surface-container-lowest (fondos profundos) */
  --surface:   #1a1919 !important;   /* surface-container */
  --surface-2: #201f1f !important;   /* surface-container-high (interactivo activo) */

  /* Acento cian luminoso (bioluminiscencia) — usar con moderación */
  --ocean:        #3adffa !important;  /* primary */
  --ocean-bright: #5fe7ff !important;  /* glow / hover */
  --ocean-deep:   #00cbe6 !important;  /* primary-container (fin del gradiente CTA) */

  /* Texto: nunca blanco puro en cuerpo largo (vibra sobre el fondo) */
  --text:    #ffffff !important;       /* títulos */
  --muted:   #adaaaa !important;       /* on-surface-variant (cuerpo/secundario) */
  --muted-2: #8f8c8c !important;       /* outline / texto secundario pequeño — AA (≈5.2:1 sobre #0e0e0e) */

  /* Bordes "fantasma": se sienten, no se ven (no-line rule) */
  --border:        rgba(73,72,71,0.20) !important;   /* outline-variant 20% */
  --border-strong: rgba(58,223,250,0.35) !important; /* foco cian */

  /* Glow oceánico (el objeto emite su propia luz) */
  --glow: 0 20px 40px rgba(0,0,0,.6), 0 0 15px rgba(58,223,250,.18) !important;

  /* Estados (alineados a Abyssal) */
  --red:   #ff716c !important;
  --amber: #f4b740 !important;
  --green: #28c76f !important;

  /* Tipografía editorial-tech */
  --display: 'Space Grotesk', system-ui, sans-serif !important;  /* headlines */
  --body:    'Inter', system-ui, sans-serif !important;          /* cuerpo/labels */
}

/* Tema claro: lo dejamos coherente pero el default Ocean 2.0 es OSCURO (abisal). */
:root[data-theme="light"]{
  --bg:#f6f9ff !important; --bg-2:#ffffff !important;
  --surface:#ffffff !important; --surface-2:#eef2f7 !important;
  --text:#0e1a24 !important; --muted:#54616e !important; --muted-2:#8a98a6 !important;
  --border:rgba(14,69,83,0.12) !important;
}

/* Tipografía aplicada a nivel documento (refuerza el var swap) */
body{ font-family: var(--body) !important; }
h1,h2,h3,.display,[class*="title"]{ font-family: var(--display) !important; letter-spacing:-0.01em; }

/* ---- Utilidades de firma Ocean 2.0 (opt-in, additivas) ---- */
.ocean-glass{
  background: rgba(255,255,255,.05) !important;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border:1px solid var(--border) !important; border-radius:1.5rem;
}
.ocean-cta{
  background: linear-gradient(135deg, var(--ocean), var(--ocean-deep)) !important;
  color:#00363e !important; font-weight:700; border:none !important;
  box-shadow: 0 0 15px rgba(58,223,250,.40);
  transition: box-shadow .18s ease, transform .18s ease;
}
.ocean-cta:hover{ box-shadow: 0 0 26px rgba(58,223,250,.65); transform: translateY(-1px); }