/* =============================================================
   ShopIA Tools — base.css
   Reset, tipografías base, fondo grain + glow ambiental.
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { min-height: 100%; }

body {
  font-family: var(--body);
  background: var(--ink);
  color: var(--mist);
  line-height: 1.6;
  overflow-x: hidden;
}

/* Grain de fondo — firma visual */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px;
}

/* Glow ambiental azul */
body::after {
  content: '';
  position: fixed;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 600px;
  background: radial-gradient(ellipse, rgba(91,191,255,0.04) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

/* Tipografía base */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 900; letter-spacing: -1px; color: var(--mist); line-height: 1.1; }
h1 { font-size: clamp(32px, 5vw, 56px); letter-spacing: -2px; }
h2 { font-size: clamp(24px, 3.5vw, 40px); letter-spacing: -1.5px; }
h3 { font-size: clamp(18px, 2.4vw, 26px); }
h4 { font-size: 16px; }
em, .accent-em { color: var(--accent); font-style: italic; }

p { color: var(--mist2); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; }

/* Form base */
input[type=text], input[type=email], input[type=number], input[type=date],
input[type=time], input[type=datetime-local], textarea, select {
  width: 100%;
  padding: 10px 13px;
  background: var(--ink3);
  border: 1px solid var(--wall);
  border-radius: 8px;
  color: var(--mist);
  font-family: var(--body);
  font-size: 14px;
  outline: none;
  transition: border-color 0.18s;
  resize: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent-bd); }
select option { background: var(--ink3); color: var(--mist); }
::placeholder { color: var(--mist3); }

/* Scrollbar discreto */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--wall2); border-radius: 4px; }
::-webkit-scrollbar-track { background: var(--ink); }

/* Utilities */
.fade-in { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }