/* =========================================================
   NECORA Landing — 00-foundation.css
   EXTRAÍDO DESDE landing.css v30.5
   Scope:
   - tokens globales
   - base/reset
   - background canvas
   - a11y/focus
   - helpers globales seguros
   ========================================================= */

/* =========================================================
   @root-tokens
   0) ROOT / THEME TOKENS — NECORA PRO (SYNC READY)
   ========================================================= */
:root{

  /* =========================
     TEXT
     ========================= */
  --nl-text:        rgba(12,18,28,.92);
  --nl-muted:       rgba(12,18,28,.62);
  --nl-text-soft:   rgba(12,18,28,.45);
  --nl-text-weak:   rgba(12,18,28,.38);
  --nl-text-invert: #ffffff;

  /* =========================
     BACKGROUNDS / CANVAS
     ========================= */
  --nl-canvas:      #F3F4F6;
  --nl-surface:     #ffffff;
  --nl-surface-2:   #f8fafc;

  /* Dark contrast (NO global, solo secciones) */
  --nl-dark:        #0B0F14;
  --nl-dark-soft:   #121821;
  --nl-dark-border: rgba(255,255,255,.08);

  /* =========================
     BRAND (AT&T / NECORA)
     ========================= */
  --nl-brand:       #00A1DF;
  --nl-brand2:      #0087C6;
  --nl-brand-soft:  rgba(0,161,223,.14);

  /* =========================
     BORDERS
     ========================= */
  --nl-bd:          rgba(20,30,45,.10);
  --nl-bd2:         rgba(20,30,45,.08);

  /* =========================
     SHADOWS (depth real)
     ========================= */
  --nl-shadow-sm:   0 12px 34px rgba(10,20,35,.10);
  --nl-shadow:      0 28px 90px rgba(10,20,35,.16);
  --nl-shadow-lg:   0 40px 120px rgba(10,20,35,.22);

  /* =========================
     UI GEOMETRY
     ========================= */
  --nl-radius:      18px;
  --nl-radius-lg:   26px;
  --nl-appRadius:   34px;

  --nl-pad:         clamp(14px, 4vw, 22px);
  --nl-pad-lg:      clamp(22px, 6vw, 38px);

  /* =========================
     LAYOUT HELPERS
     ========================= */
  --nl-frameLift:     48px;
  --nl-footerRevealH: clamp(240px, 28vh, 340px);

  /* Safe areas (defaults) */
  --nl-safe-top: env(safe-area-inset-top, 0px);
  --nl-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* =========================
     GLASS / PANELS (SYNC)
     ========================= */
  --nl-focus-ring:   0 0 0 4px rgba(0,161,223,.18);
  --nl-focus-border: rgba(0,161,223,.45);

  --nl-glass-70: rgba(255,255,255,.70);
  --nl-glass-72: rgba(255,255,255,.72);
  --nl-glass-82: rgba(255,255,255,.82);
  --nl-glass-86: rgba(255,255,255,.86);
  --nl-glass-88: rgba(255,255,255,.88);
  --nl-glass-90: rgba(255,255,255,.90);
  --nl-glass-92: rgba(255,255,255,.92);
  --nl-glass-95: rgba(255,255,255,.95);

  /* panel base (usado por cards) */
  --nl-panel-bg: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.64));
  --nl-panel-inset: inset 0 1px 0 rgba(255,255,255,.65);

  /* main frame card (desktop) */
  --nl-mainCard-bg: rgba(255,255,255,.92);
  --nl-mainCard-border: rgba(20,30,45,.10);
  --nl-mainCard-shadow:
      0 60px 140px rgba(10,20,35,.18),
      0 18px 46px rgba(10,20,35,.12),
      inset 0 1px 0 rgba(255,255,255,.65);

  /* main frame card (footer reveal) */
  --nl-mainCard-shadow-reveal:
      0 46px 120px rgba(10,20,35,.14),
      0 14px 38px rgba(10,20,35,.10),
      inset 0 1px 0 rgba(255,255,255,.65);

  /* tooltip / pop */
  --nl-pop-bg: rgba(255,255,255,.86);
  --nl-pop-shadow: 0 18px 50px rgba(10,20,35,.14);

  /* subtle inks */
  --nl-ink-05: rgba(0,0,0,.05);
  --nl-ink-06: rgba(0,0,0,.06);
  --nl-ink-10: rgba(0,0,0,.10);
  --nl-ink-14: rgba(12,18,28,.14);
  --nl-ink-18: rgba(12,18,28,.18);
  --nl-ink-22: rgba(12,18,28,.22);
  --nl-ink-44: rgba(12,18,28,.44);
  --nl-ink-52: rgba(12,18,28,.52);
  --nl-ink-68: rgba(12,18,28,.68);
  --nl-ink-70: rgba(12,18,28,.70);
  --nl-ink-72: rgba(12,18,28,.72);
  --nl-ink-78: rgba(12,18,28,.78);
  --nl-ink-82: rgba(12,18,28,.82);
  --nl-ink-86: rgba(12,18,28,.86);
  --nl-ink-92: rgba(12,18,28,.92);
  --nl-ink-94: rgba(12,18,28,.94);

  /* =========================
     SEMANTIC TOKENS
     ========================= */
  --nl-page-bg: var(--nl-canvas);

  --nl-surface-bg: var(--nl-surface);
  --nl-surface2-bg: var(--nl-surface-2);

  --nl-glass-bg: var(--nl-glass-86);
  --nl-glass-bg-strong: var(--nl-glass-92);
  --nl-glass-bg-soft: var(--nl-glass-72);

  --nl-card-bg: var(--nl-panel-bg);
  --nl-card-border: var(--nl-bd2);
  --nl-card-shadow: var(--nl-shadow);

  --nl-text-strong: var(--nl-text);
  --nl-text-body: var(--nl-muted);
  --nl-text-kicker: var(--nl-ink-52);

  --nl-input-bg: var(--nl-glass-86);
  --nl-input-bg-focus: var(--nl-glass-95);
  --nl-input-border: var(--nl-bd2);

  --nl-nav-bg: var(--nl-glass-88);
  --nl-popover-bg: var(--nl-pop-bg);
  --nl-popover-shadow: var(--nl-pop-shadow);

  /* =========================
     PERFORMANCE (Blur control)
     ========================= */
  --nl-blur-strong: 18px;
  --nl-blur-med:    14px;
  --nl-blur-soft:   10px;

  /* =========================
     BENEFITS MINI
     ========================= */
  --nl-mobileLift: 56px;

  --nl-bf-border:  rgba(12,18,28,.06);
  --nl-bf-border2: rgba(12,18,28,.05);

  --nl-bf-card: linear-gradient(180deg, rgba(255,255,255,.99), rgba(255,255,255,.965));
  --nl-bf-shadow: 0 14px 36px rgba(10,20,35,.09);

  --nl-bf-rail-h: 5px;
  --nl-bf-rail-w: min(980px, calc(100% - (var(--nl-pad) * 2)));
}

/* =========================================================
   @base-reset
   1) BASE / RESET / NO OVERFLOW X
   ========================================================= */
html, body{
  width:100%;
  max-width:100%;
  overflow-x: clip;
  margin:0 !important;
  padding:0 !important;
}
@supports not (overflow: clip){
  html, body{ overflow-x:hidden; }
}

*,
*::before,
*::after{ box-sizing:border-box; }

img, video, canvas, svg{ max-width:100%; height:auto; }

/* A11Y: focus visible real (sin romper mouse/touch) */
:where(a, button, input, select, textarea):focus{
  outline: none;
}
:where(a, button, input, select, textarea):focus-visible{
  outline:none;
  box-shadow: var(--nl-focus-ring);
  border-color: var(--nl-focus-border);
}

/* PERF PATCH — Backdrop filter control */
@media (max-width: 859px){
  :root{
    --nl-blur-strong: 12px;
    --nl-blur-med:    10px;
    --nl-blur-soft:   8px;
  }
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .nl-appNav{ backdrop-filter: blur(var(--nl-blur-strong)); -webkit-backdrop-filter: blur(var(--nl-blur-strong)); }
  .nl-island{  backdrop-filter: blur(var(--nl-blur-strong)); -webkit-backdrop-filter: blur(var(--nl-blur-strong)); }
  .nl-rail__icon{ backdrop-filter: blur(var(--nl-blur-med)); -webkit-backdrop-filter: blur(var(--nl-blur-med)); }

  .nl-heroMin__trust li,
  .nl-heroMin__cta .nl-btn--ghost,
  .nl-planPill,
  .nl-price,
  .nl-planChip,
  .nl-railGuide__item::after{
    backdrop-filter: blur(var(--nl-blur-med));
    -webkit-backdrop-filter: blur(var(--nl-blur-med));
  }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .nl-appNav,
  .nl-island,
  .nl-rail__icon,
  .nl-railGuide__item::after{
    background-color: rgba(255,255,255,.92);
  }
  .nl-heroMin__trust li,
  .nl-heroMin__cta .nl-btn--ghost,
  .nl-planPill,
  .nl-price,
  .nl-planChip{
    background-color: rgba(12,18,28,.28);
  }
}

/* Fondo canvas */
body{
  background:
    radial-gradient(1200px 720px at 20% -10%, rgba(0,161,223,.14), transparent 60%),
    radial-gradient(900px 600px at 80% 10%, var(--nl-ink-05), transparent 65%),
    var(--nl-page-bg);
  color: var(--nl-text);
}

.nl-h2{ letter-spacing:-0.02em; color: var(--nl-text); }
.nl-sub{ line-height:1.55; color: var(--nl-muted); }

/* safety */
.nl-container,
.nl-heroFrame__content,
.nl-featureGrid,
.nl-featureGrid__cards,
.nl-switchGrid,
.nl-switchPanel,
.nl-switchActions{
  min-width:0;
}

/* =========================================================
   @background-canvas
   1.5) BACKGROUND GENERAL (outer canvas)
   Azul suave, nada molesto
   ========================================================= */

/* Local token owner: OUTER CANVAS */
:root{
  /* Ajusta aquí si quieres más/menos azul */
  --nl-pageBg: #ffffff;
  --nl-pageBg2:#005056;
}

/* Fondo global */
html, body{
  background: radial-gradient(1200px 700px at 50% -10%, var(--nl-pageBg2), var(--nl-pageBg)) !important;
}

/* (Opcional) si tu wrapper principal ya tiene fondo, lo hacemos transparente */
#necora-landing.nl{
  background: transparent !important;
}