/* ==========================================================================
   IA SEM LIMITES · Base
   Reset, tipografia, layout, seções, fundos e prose.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--isl-nav-h) + 16px);
}
html:not(.lenis) { scroll-behavior: smooth; }

body {
  min-height: 100dvh;
  background: var(--isl-bg);
  color: var(--isl-text);
  font-family: var(--isl-font-body);
  font-size: var(--isl-fs-base);
  line-height: var(--isl-lh-normal);
  letter-spacing: var(--isl-ls-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';
  overflow-x: clip;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }
::selection { background: rgba(49, 92, 245, 0.22); color: inherit; }

:focus-visible {
  outline: 2px solid var(--isl-ring);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Lenis (scroll suave) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* --------------------------------------------------------------------------
   TIPOGRAFIA
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .isl-h1, .isl-h2, .isl-h3, .isl-h4 {
  font-family: var(--isl-font-display);
  font-weight: var(--isl-fw-semibold);
  color: var(--isl-text);
  text-wrap: balance;
}
h1, .isl-h1 { font-size: var(--isl-fs-h1); line-height: var(--isl-lh-tight); letter-spacing: var(--isl-ls-display); }
h2, .isl-h2 { font-size: var(--isl-fs-h2); line-height: 1.08; letter-spacing: var(--isl-ls-display); }
h3, .isl-h3 { font-size: var(--isl-fs-h3); line-height: var(--isl-lh-snug); letter-spacing: var(--isl-ls-tight); }
h4, .isl-h4 { font-size: var(--isl-fs-h4); line-height: var(--isl-lh-snug); letter-spacing: var(--isl-ls-tight); }

.isl-hero-title {
  font-family: var(--isl-font-display);
  font-size: var(--isl-fs-hero);
  font-weight: var(--isl-fw-bold);
  line-height: var(--isl-lh-none);
  letter-spacing: var(--isl-ls-hero);
  text-wrap: balance;
}
.isl-display {
  font-family: var(--isl-font-display);
  font-size: var(--isl-fs-display);
  font-weight: var(--isl-fw-semibold);
  line-height: var(--isl-lh-tight);
  letter-spacing: var(--isl-ls-display);
  text-wrap: balance;
}

/* Subtítulo Apple: grande, médio, cinza */
.isl-lead {
  font-size: var(--isl-fs-lead);
  line-height: 1.45;
  font-weight: var(--isl-fw-medium);
  color: var(--isl-text-muted);
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.isl-lead strong { color: var(--isl-text); font-weight: var(--isl-fw-semibold); }

p { text-wrap: pretty; }
.isl-muted { color: var(--isl-text-muted); }
.isl-faint { color: var(--isl-text-faint); }
.isl-small { font-size: var(--isl-fs-sm); }
.isl-xs { font-size: var(--isl-fs-xs); }

/* Rótulo mono em caixa alta. Abre seção e card. */
.isl-kicker {
  display: inline-block;
  font-family: var(--isl-font-mono);
  font-size: var(--isl-fs-2xs);
  font-weight: var(--isl-fw-medium);
  letter-spacing: var(--isl-ls-caps);
  text-transform: uppercase;
  color: var(--isl-accent-text);
}

/* ASSINATURAS TIPOGRÁFICAS -------------------------------------------------- */

/* 1. Gradiente Infinito no texto. Uma vez por título. */
.isl-grad-text {
  background: var(--isl-grad-infinity);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: 0.06em; /* não corta descendente */
}
/* 2. Palavra emocional em serifa itálica. Uma por título. */
.isl-serif {
  font-family: var(--isl-font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}
/* 3. Título em degradê vertical de tinta (tom Apple) */
.isl-title-fade {
  background: var(--isl-grad-title);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* 4. Parte apagada do título */
.isl-dim { color: var(--isl-text-faint); }

/* Número: sempre tabular */
.isl-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

code, kbd, .isl-code {
  font-family: var(--isl-font-mono);
  font-size: 0.875em;
  padding: 0.12em 0.4em;
  border-radius: var(--isl-radius-xs);
  background: var(--isl-surface-3);
  color: var(--isl-text);
}
kbd { border: 1px solid var(--isl-border-strong); border-bottom-width: 2px; }

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */
.isl-container {
  width: min(var(--isl-container), 100% - var(--isl-gutter) * 2);
  margin-inline: auto;
}
.isl-container--wide   { width: min(var(--isl-container-wide), 100% - var(--isl-gutter) * 2); }
.isl-container--narrow { width: min(var(--isl-container-narrow), 100% - var(--isl-gutter) * 2); }

.isl-section { padding-block: var(--isl-section-y); position: relative; }
.isl-section--tight { padding-block: calc(var(--isl-section-y) * 0.6); }
.isl-section--alt { background: var(--isl-bg-alt); }
.isl-dark, .isl-dark.isl-section { background: var(--isl-bg); color: var(--isl-text); }

/* Cabeçalho de seção centralizado (padrão Apple) */
.isl-head { display: grid; gap: var(--isl-space-5); max-width: 860px; }
.isl-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.isl-head + * { margin-top: clamp(3rem, 2rem + 4vw, 5.5rem); }

/* Cabeçalho dividido: título à esquerda, texto à direita */
.isl-head-split {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: clamp(1.5rem, 1rem + 5vw, 6rem);
  align-items: end;
}

.isl-stack   { display: flex; flex-direction: column; gap: var(--_gap, var(--isl-space-4)); }
.isl-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--_gap, var(--isl-space-3)); }
.isl-center  { display: grid; place-items: center; text-align: center; }

.isl-grid   { display: grid; gap: var(--_gap, var(--isl-space-4)); }
.isl-grid-2 { display: grid; gap: var(--_gap, var(--isl-space-4)); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.isl-grid-3 { display: grid; gap: var(--_gap, var(--isl-space-4)); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.isl-grid-4 { display: grid; gap: var(--_gap, var(--isl-space-4)); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.isl-grid-auto { display: grid; gap: var(--_gap, var(--isl-space-4)); grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }

.isl-divider { height: 1px; background: var(--isl-border); border: 0; }

.isl-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;
}
.isl-skip {
  position: fixed; top: 12px; left: 12px; z-index: 1000;
  padding: 10px 16px; border-radius: var(--isl-radius-pill);
  background: var(--isl-text); color: var(--isl-bg);
  transform: translateY(-200%); transition: transform var(--isl-dur-2) var(--isl-ease-out);
}
.isl-skip:focus { transform: none; }

/* --------------------------------------------------------------------------
   FUNDOS DE AMBIENTE
   -------------------------------------------------------------------------- */
.isl-bg-aurora { position: relative; isolation: isolate; }
.isl-bg-aurora::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--isl-grad-aurora);
}
/* Pontilhado que some para a direita (assinatura do site atual) */
.isl-bg-dots { position: relative; isolation: isolate; }
.isl-bg-dots::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.12;
  -webkit-mask-image: linear-gradient(to right, #000, transparent 60%);
  mask-image: linear-gradient(to right, #000, transparent 60%);
}
.isl-bg-grid { position: relative; isolation: isolate; }
.isl-bg-grid::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--isl-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--isl-border) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 80%);
}
/* Grão: tira o aspecto "digital chapado" dos gradientes grandes */
.isl-bg-noise { position: relative; isolation: isolate; }
.isl-bg-noise::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Orb de luz desfocada, posicionar com top/left inline */
.isl-orb {
  position: absolute; width: 520px; height: 520px; border-radius: 50%;
  pointer-events: none; z-index: -1; filter: blur(80px); opacity: 0.35;
  background: radial-gradient(circle, var(--isl-blue-500), transparent 65%);
}
.isl-orb--violet { background: radial-gradient(circle, var(--isl-violet-500), transparent 65%); }
.isl-orb--cyan   { background: radial-gradient(circle, var(--isl-cyan-400), transparent 65%); opacity: 0.2; }

/* --------------------------------------------------------------------------
   PROSE (blog, termos, página de obrigado)
   -------------------------------------------------------------------------- */
.isl-prose { max-width: var(--isl-prose); font-size: var(--isl-fs-lg); line-height: var(--isl-lh-relaxed); color: var(--isl-text-muted); }
.isl-prose > * + * { margin-top: 1.25em; }
.isl-prose h2 { font-size: var(--isl-fs-h3); margin-top: 2.2em; color: var(--isl-text); }
.isl-prose h3 { font-size: var(--isl-fs-h4); margin-top: 1.8em; color: var(--isl-text); }
.isl-prose strong { color: var(--isl-text); font-weight: var(--isl-fw-semibold); }
.isl-prose a { color: var(--isl-accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.isl-prose ul, .isl-prose ol { padding-left: 1.2em; }
.isl-prose li + li { margin-top: 0.5em; }
.isl-prose blockquote {
  padding-left: 1.2em; border-left: 2px solid var(--isl-accent);
  font-family: var(--isl-font-serif); font-style: italic; font-size: 1.3em; line-height: 1.4; color: var(--isl-text);
}

/* --------------------------------------------------------------------------
   RESPONSIVO
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .isl-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .isl-grid-2, .isl-grid-3, .isl-grid-4 { grid-template-columns: minmax(0, 1fr); }
  .isl-head-split { grid-template-columns: 1fr; align-items: start; }
  .isl-head--center { text-align: left; justify-items: start; }
  .isl-head--center.isl-head--keep { text-align: center; justify-items: center; }
}