/* ============================================================
   SMARTEC · theme.css
   CSS base compartido por todas las páginas del proyecto.
   Incluye: variables, tipografía, mesh-bg, glass, sombras,
   botones, inputs, animaciones, scrollbar, focus ring.
   NO incluye: estilos específicos de cada página.
============================================================ */

/* ============================================================
   1. VARIABLES GLOBALES
============================================================ */
:root{
  --bg:#F5F5F7;
  --bg-dark:#1D1D1F;
  --text:#1D1D1F;
  --text-dim:#6E6E73;
  --blue:#0071E3;
  --blue-light:#4A7A9A;
  --purple:#0A2A4A;
  --pink:#0A2A4A;
  --orange:#FF9F0A;
  --green:#30D158;
  --glass:rgba(255,255,255,0.72);
  --glass-border:rgba(255,255,255,0.6);
  /* Compatibilidad con código legacy */
  --sd:#0A2A4A;
  --sl:#4A7A9A;
}

/* ============================================================
   2. BASE / TIPOGRAFÍA
============================================================ */
*{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.font-display{
  font-family:'Inter Tight','Inter',sans-serif;
  letter-spacing:-0.03em;
  font-weight:700;
}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

/* ============================================================
   3. MESH GRADIENT DE FONDO
============================================================ */
.mesh-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(at 20% 20%, rgba(90,200,250,0.15) 0%, transparent 50%),
    radial-gradient(at 80% 10%, rgba(10,42,74,0.12) 0%, transparent 50%),
    radial-gradient(at 70% 80%, rgba(255,55,95,0.08) 0%, transparent 50%),
    radial-gradient(at 10% 90%, rgba(255,159,10,0.08) 0%, transparent 50%),
    #F5F5F7;
}

/* ============================================================
   4. SCROLLBAR (estilo Apple)
============================================================ */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,0.15);
  border-radius:5px;
  border:2px solid transparent;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{
  background:rgba(0,0,0,0.25);
  background-clip:content-box;
  border:2px solid transparent;
}
.scrollbar-thin::-webkit-scrollbar{width:6px;height:6px}
.scrollbar-thin::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,0.15);
  border-radius:3px;
  border:none;
  background-clip:border-box;
}

/* ============================================================
   5. GLASS SURFACES
============================================================ */
.glass{
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(255,255,255,0.6);
}
.glass-soft{
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(255,255,255,0.5);
}
.glass-strong{
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(40px) saturate(180%);
  -webkit-backdrop-filter:blur(40px) saturate(180%);
  border:1px solid rgba(255,255,255,0.7);
}

/* ============================================================
   6. SOMBRAS APPLE (multicapa)
============================================================ */
.shadow-apple{
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 4px 12px rgba(0,0,0,0.04),
    0 12px 32px rgba(0,0,0,0.06);
}
.shadow-apple-lg{
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 8px 24px rgba(0,0,0,0.06),
    0 24px 64px rgba(0,0,0,0.08);
}
.shadow-apple-xl{
  box-shadow:
    0 2px 4px rgba(0,0,0,0.04),
    0 12px 32px rgba(0,0,0,0.08),
    0 32px 80px rgba(0,0,0,0.12);
}

/* ============================================================
   7. BOTONES APPLE
============================================================ */
.btn-apple{
  background:var(--blue);
  color:white;
  font-weight:500;
  letter-spacing:-0.01em;
  transition:all .3s cubic-bezier(.2,.8,.2,1);
  box-shadow:
    0 1px 2px rgba(0,113,227,0.2),
    0 4px 12px rgba(0,113,227,0.3);
}
.btn-apple:hover{
  background:#0077ED;
  transform:scale(1.02);
  box-shadow:
    0 1px 2px rgba(0,113,227,0.3),
    0 8px 24px rgba(0,113,227,0.4);
}
.btn-apple:active{transform:scale(0.98)}
.btn-apple:disabled{opacity:0.5;cursor:not-allowed;transform:none}

.btn-glass{
  background:rgba(255,255,255,0.7);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,0.7);
  color:var(--text);
  font-weight:500;
  transition:all .3s cubic-bezier(.2,.8,.2,1);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 4px 12px rgba(0,0,0,0.04);
}
.btn-glass:hover{
  background:rgba(255,255,255,0.9);
  transform:scale(1.02);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.06),
    0 8px 24px rgba(0,0,0,0.08);
}
.btn-glass:active{transform:scale(0.98)}

/* ============================================================
   8. INPUTS APPLE
============================================================ */
input,select,textarea{
  background:rgba(255,255,255,0.8);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(0,0,0,0.08);
  color:var(--text);
  transition:all .3s cubic-bezier(.2,.8,.2,1);
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(0,113,227,0.15);
  background:white;
}
input::placeholder,textarea::placeholder{color:var(--text-dim)}
select option{background:white;color:var(--text)}

/* ============================================================
   9. LOGO MARK (texto con gradiente)
============================================================ */
.logo-mark{
  background:linear-gradient(135deg, #0071E3, #0A2A4A);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-weight:800;
  letter-spacing:-0.04em;
}

/* ============================================================
   10. ANIMACIONES
============================================================ */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes float-slow{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-20px) rotate(2deg)}
}
@keyframes float-medium{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-15px)}
}
@keyframes pulse-soft{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.8;transform:scale(1.05)}
}
.fade-up{animation:fadeUp .8s cubic-bezier(.2,.8,.2,1) backwards}
.float-slow{animation:float-slow 8s ease-in-out infinite}
.float-medium{animation:float-medium 6s ease-in-out infinite}
.pulse-soft{animation:pulse-soft 3s ease-in-out infinite}

/* ============================================================
   11. FOCUS RING ACCESIBLE
============================================================ */
*:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
  border-radius:8px;
}

/* ============================================================
   12. FALLBACK SI NO SOPORTA backdrop-filter
============================================================ */
@supports not (backdrop-filter: blur(20px)){
  .glass,.glass-soft,.glass-strong{
    background:rgba(255,255,255,0.95);
  }
}

/* ============================================================
   13. CLASES LEGACY (compatibilidad con JS existente)
   Se mantienen para no romper código que las use.
============================================================ */
.bg-sd{background:#0A2A4A}
.bg-sl{background:#4A7A9A}
.text-sd{color:#0A2A4A}
.text-sl{color:#4A7A9A}
.border-sl{border-color:#4A7A9A}

/* ============================================================
   14. ORBS DECORATIVOS (mesh flotante)
============================================================ */
.hero-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  pointer-events:none;
  opacity:0.7;
}

/* ============================================================
   15. MOBILE FIXES (reducir blur para no saturar GPU)
============================================================ */
@media (max-width: 768px) {
  .glass, .glass-soft, .glass-strong {
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
  }
  .float-slow, .float-medium, .pulse-soft {
    animation: none !important;
  }
  .hero-orb{
    filter: blur(40px) !important;
    opacity: 0.4 !important;
  }
  .mesh-bg{
    background:
      radial-gradient(at 20% 20%, rgba(90,200,250,0.10) 0%, transparent 50%),
      radial-gradient(at 80% 10%, rgba(10,42,74,0.08) 0%, transparent 50%),
      #F5F5F7;
  }
}