/*
Theme Name: IdeaLab Child
Theme URI: https://www.idealabpartners.com/
Description: Tema hijo de Hello Elementor para IDEALAB Partners — dark tech premium, tokens, efectos 3D y catálogo de servicios. Construido sobre la auditoría del sitio original.
Author: IDEALAB Partners
Template: hello-elementor
Version: 1.0.0
Text Domain: idealab-child
*/

/* =========================================================
   1. TOKENS (ver DESIGN-SYSTEM.md)
   ========================================================= */
:root{
  /* color */
  --ix-bg:#0a0a0a; --ix-bg-2:#121214;
  --ix-surface:rgba(255,255,255,.045); --ix-surface-2:rgba(255,255,255,.07);
  --ix-border:rgba(255,255,255,.09); --ix-border-strong:rgba(255,255,255,.16);
  --ix-text:#ffffff; --ix-text-2:#b6bac6; --ix-text-3:#7e8696;
  --ix-green:#2cff05; --ix-green-2:#1a9f03; --ix-green-mint:#0affad;
  --ix-on-green:#06140a; --ix-danger:#fc5185;
  /* type */
  --ix-font-display:"Inter",system-ui,sans-serif;
  --ix-font-body:"Montserrat",system-ui,sans-serif;
  --ix-font-mono:"JetBrains Mono",ui-monospace,monospace;
  /* spacing */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;
  /* radius / layers */
  --r-sm:10px; --r:16px; --r-lg:24px; --r-pill:999px;
  --z-nav:1000; --z-modal:1100; --z-toast:1200;
  /* effects */
  --ix-glow:0 0 24px rgba(44,255,5,.30);
  --ix-glow-strong:0 0 48px rgba(44,255,5,.55);
  --ix-grad:linear-gradient(135deg,var(--ix-green),var(--ix-green-mint));
  --ix-shadow:0 18px 50px -20px rgba(0,0,0,.7);
  --ix-container:1200px; --ix-gutter:clamp(16px,5vw,48px);
  --ix-ease:cubic-bezier(.22,.61,.36,1);
}

/* =========================================================
   2. BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ix-bg); color:var(--ix-text);
  font-family:var(--ix-font-body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{font-family:var(--ix-font-display); font-weight:700; line-height:1.08; margin:0 0 .5em; letter-spacing:-.01em}
h1{font-size:clamp(2.5rem,1.8rem + 3.2vw,4rem); font-weight:800}
h2{font-size:clamp(2rem,1.5rem + 2.4vw,3.25rem)}
h3{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.25rem); font-weight:600}
p{margin:0 0 1rem; color:var(--ix-text-2)}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}
::selection{background:var(--ix-green); color:var(--ix-on-green)}
:focus-visible{outline:2px solid var(--ix-green); outline-offset:3px; border-radius:4px}

/* =========================================================
   3. LAYOUT UTILITIES
   ========================================================= */
.ix-container{max-width:var(--ix-container); margin-inline:auto; padding-inline:var(--ix-gutter); width:100%}
.ix-container--wide{max-width:1320px}
.ix-section{padding-block:clamp(56px,8vw,120px)}
.ix-section--alt{background:var(--ix-bg-2)}
.ix-stack>*+*{margin-top:var(--sp-4)}
.ix-eyebrow{font-family:var(--ix-font-mono); font-size:.8125rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ix-green)}
.ix-grad-text{background:var(--ix-grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.ix-lead{font-size:clamp(1.05rem,1rem + .4vw,1.25rem); color:var(--ix-text-2); max-width:60ch}

/* =========================================================
   4. GLASS + CARDS
   ========================================================= */
.ix-glass{
  background:var(--ix-surface); border:1px solid var(--ix-border);
  border-radius:var(--r); backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}
.ix-card{
  background:var(--ix-surface); border:1px solid var(--ix-border);
  border-radius:var(--r-lg); padding:var(--sp-5);
  transition:transform .25s var(--ix-ease), border-color .25s var(--ix-ease), box-shadow .25s var(--ix-ease);
}
.ix-card:hover{border-color:rgba(44,255,5,.45); box-shadow:var(--ix-glow)}

/* =========================================================
   5. BUTTONS
   ========================================================= */
.ix-btn{
  --_pad:14px 26px;
  display:inline-flex; align-items:center; gap:.55em; justify-content:center;
  font-family:var(--ix-font-display); font-weight:600; font-size:1rem; line-height:1;
  padding:var(--_pad); border-radius:var(--r-pill); cursor:pointer; border:1px solid transparent;
  min-height:48px; transition:transform .2s var(--ix-ease), box-shadow .2s var(--ix-ease), background .2s, color .2s;
}
.ix-btn:active{transform:translateY(1px) scale(.99)}
.ix-btn--primary{background:var(--ix-green); color:var(--ix-on-green); box-shadow:var(--ix-glow)}
.ix-btn--primary:hover{box-shadow:var(--ix-glow-strong); transform:translateY(-2px)}
.ix-btn--ghost{background:transparent; color:var(--ix-text); border-color:var(--ix-border-strong)}
.ix-btn--ghost:hover{border-color:var(--ix-green); color:var(--ix-green)}

/* =========================================================
   6. RESPONSIVE
   ========================================================= */
@media (max-width:1024px){ :root{--ix-container:960px} }
@media (max-width:768px){
  body{font-size:15px}
  .ix-section{padding-block:clamp(40px,10vw,72px)}
}

/* reduced motion: handled per-effect in effects.css */