/* ============ SEÇÕES 2 e 3 — A DOR / CONHEÇA A ANDY ============
   Par dramatúrgico: 2 = mundo âmbar (o antes, sem a Andy), 3 = mundo azul
   (o contraponto). Mesma rima cromática do vídeo do hero (âmbar→azul).
   Linguagem: cena cinematográfica + tipografia editorial — SEM simulação
   de UI (o funil e o bento já carregam essa linguagem). */

:where(#secao-2, #secao-2 *, #secao-3, #secao-3 *){box-sizing:border-box}

/* Ritmo: altura definida pelo conteúdo + padding fixo (o min-height:100vh
   centrado criava ~500px de vazio entre as seções — costura 2026-07-10). */
.da-section{
  padding:120px 32px;
  font-family:var(--font-sans);
}
.da-wrap{
  max-width:var(--container);
  margin:0 auto;
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:56px;
  align-items:center;
}
/* seção 3 espelhada (zigue-zague): imagem esquerda, texto direita */
.da-andy .da-wrap{grid-template-columns:7fr 5fr}

.da-eyebrow{
  font-family:var(--font-mono);
  font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.16em;
  margin:0 0 18px;
}
.da-section h2{
  font-weight:800;
  font-size:clamp(30px, 3.6vw, 46px);
  line-height:1.12; letter-spacing:-.02em;
  color:var(--ink); margin:0;
}
.da-corpo{font-size:16px; line-height:1.65; color:var(--sub); max-width:46ch; margin:22px 0 0}
.da-img{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); position:relative}
.da-img img{display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}

/* ---------- seção 2: mundo âmbar ---------- */
/* o âmbar NÃO volta ao neutro: termina na borda inferior, onde a seção 3
   abre azul-frio — a virada âmbar→azul acontece exatamente na fronteira */
.da-dor{background:linear-gradient(180deg, var(--bg) 0%, #fff7e8 60%, #fbf0dd 100%)}
.da-dor .da-eyebrow{color:var(--warning)}
.da-dor h2 .num{font-family:var(--font-mono); color:var(--warning)}
.da-linha2{margin:18px 0 0; font-size:clamp(20px, 2vw, 26px); font-weight:700; color:var(--sub)}
.da-linha2 b{color:var(--ink)}
.da-ponte{margin:34px 0 0; font-size:18px; font-weight:800; color:var(--ink)}
.da-ponte::after{content:""; display:block; width:64px; height:3px; background:var(--warning); margin-top:10px; border-radius:2px}
/* véu âmbar sutil sobre a foto do caos */
.da-dor .da-img::after{content:""; position:absolute; inset:0; background:rgba(176,122,0,.07); pointer-events:none}

/* ---------- seção 3: mundo azul ---------- */
.da-andy{
  background:linear-gradient(180deg, #edf4fc 0%, var(--bg) 45%);
}
.da-andy .da-eyebrow{color:var(--primary-600)}
.da-modos{margin-top:30px; display:flex; flex-direction:column; gap:12px}
.da-modo{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--neutral-0); border:1px solid var(--neutral-200);
  border-radius:var(--radius-md); padding:16px 18px;
  box-shadow:var(--shadow-sm);
}
.da-pill{
  flex:0 0 auto; font-family:var(--font-mono);
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  padding:5px 10px; border-radius:var(--radius-pill); margin-top:2px;
}
.da-auto .da-pill{background:var(--primary-50); color:var(--primary-600)}
.da-copi .da-pill{background:#f1eafe; color:#8b5cf6}
.da-modo > span:last-child{font-size:14.5px; line-height:1.5; color:var(--sub)}
.da-modo b{color:var(--neutral-900)}
.da-hint{
  margin-top:32px; display:inline-block;
  font-size:13px; font-weight:600; color:var(--neutral-600);
  background:var(--neutral-0); border:1px solid var(--neutral-200);
  border-radius:var(--radius-pill); padding:9px 18px;
}

/* ---------- reveal (uma vez, via js/dor-andy.js) ---------- */
@media (prefers-reduced-motion:no-preference){
  .da-reveal{
    opacity:0; transform:translateY(14px);
    transition:opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  }
  .da-reveal.da-in{opacity:1; transform:translateY(0)}
}

/* ---------- responsivo ---------- */
@media (max-width:900px){
  .da-wrap, .da-andy .da-wrap{grid-template-columns:1fr; gap:32px}
  .da-section{padding:72px 24px}
  /* na coluna única, texto sempre antes da imagem */
  .da-andy .da-img{order:2}
}