/* =========================================================
   ale. — página Infoprodutor
   Carrega DEPOIS de styles.css e só traz o que é desta página.
   Tokens, reset, nav, botões e rodapé continuam no styles.css.
   ========================================================= */

:root{
  --ink-dark:#1C1C1C;      /* fundo escuro da página */
  --ink-dark-2:#2E2E2E;    /* halo atrás do mockup   */
}

/* =========================================================
   HERO
   ========================================================= */
.ihero{
  margin-top:var(--nav-h);
  padding:clamp(48px,7vw,110px) clamp(20px,4vw,64px) 0;
  /* o brilho sai de trás do mockup, não do centro geométrico */
  background:radial-gradient(62% 58% at 50% 64%,var(--ink-dark-2) 0%,var(--ink-dark) 100%);
  display:grid;
  justify-items:center;
  gap:clamp(28px,4vw,58px);
  overflow:hidden;
}

.ihero__title{
  max-width:22ch;
  text-align:center;
  font-size:clamp(1.9rem,3.8vw,4.1rem);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.025em;
  text-wrap:balance;

  /* fallback: sem background-clip o texto fica claro e legível */
  color:#E8E8E8;
}

/* o degradê escurece o começo da frase e acende o fim */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .ihero__title{
    background-image:linear-gradient(100deg,
      #3A3A3A 0%,
      #6E6E6E 26%,
      #B4B4B4 50%,
      #F4F4F4 76%,
      #C4C4C4 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
}

/* o arquivo tem ~18% de margem transparente de cada lado, então a
   largura aqui é maior do que os aparelhos aparentam ocupar */
.ihero__devices{margin:0;width:min(52vw,900px)}
.ihero__devices img{width:100%;height:auto}

/* sem text-wrap:balance de propósito: na referência a última linha é
   curta, e o balance igualaria as três */
.ihero__lead{
  max-width:64ch;
  text-align:center;
  font-size:clamp(1rem,1.2vw,1.3rem);
  font-weight:400;
  line-height:1.5;
  color:#F1F1F1;
}
.ihero__lead strong{font-weight:700;color:var(--white)}

.ihero__scroll{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  margin-bottom:clamp(20px,3vw,44px);
  color:#BDBDBD;
  transition:color .25s var(--ease);
  animation:scrollHint 2.4s ease-in-out infinite;
}
.ihero__scroll svg{width:22px;height:auto}
.ihero__scroll:hover{color:var(--white)}
.ihero__scroll:focus-visible{outline:3px solid var(--white);outline-offset:3px;border-radius:8px}

@keyframes scrollHint{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(6px)}
}

/* =========================================================
   2. PÁGINA DE VENDA
   ========================================================= */
.isell{
  background:var(--white);
  padding:clamp(40px,5vw,76px) clamp(20px,4vw,64px);
}

/* entre duas faixas brancas seguidas, uma linha fina no lugar do vão.
   a linha fica no __inner para acompanhar a largura do conteúdo, não
   sangrar de ponta a ponta */
.isell + .isell{padding-top:0}
.isell + .isell .isell__inner{
  border-top:1px solid #E4E2E1;
  padding-top:clamp(40px,5vw,76px);
}

.isell__inner{
  max-width:1240px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:1fr 1.3fr;
  align-items:center;
  gap:clamp(28px,4vw,64px);
}

.isell__title{
  font-size:clamp(1.5rem,2.6vw,2.5rem);
  font-weight:400;
  line-height:1.24;
  letter-spacing:-.015em;
  color:var(--ink);
  max-width:19ch;
}
.isell__accent{display:block;font-weight:700;color:#4CAF50}
.isell__accent--blue{color:#2196F3}

.isell__copy{display:grid;gap:clamp(12px,1.4vw,20px);align-content:center}
.isell__body{
  font-size:clamp(1rem,1.3vw,1.35rem);
  line-height:1.45;
  color:var(--ink);
  max-width:32ch;
}

/* espelhado: mockup à esquerda, texto à direita */
.isell--flip .isell__inner{grid-template-columns:1.3fr 1fr}

/* --- troca de imagens no mesmo lugar --- */
.shots{
  position:relative;
  /* as três artes têm a mesma proporção, então a caixa não pula na troca */
  aspect-ratio:4/3;
  width:100%;
}
.shot{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  transition:opacity .7s var(--ease);
}
.shot[data-active]{opacity:1}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:860px){
  .ihero{padding-top:clamp(36px,7vw,72px)}
  .ihero__devices{width:min(112%,620px)}

  .isell__inner,
  .isell--flip .isell__inner{grid-template-columns:1fr;gap:clamp(24px,5vw,40px)}
  .isell__title,.isell__body{max-width:none}
  /* nas duas sessões o texto vem primeiro e o mockup embaixo.
     o '>' é essencial: sem ele o order pegaria o título DENTRO do
     .isell__copy, jogando-o para depois do parágrafo */
  .isell__inner > .isell__copy{order:1}
  .isell__inner > .shots{order:2}

  /* --- no mobile todo texto de sessão fica centralizado ---
     estas classes são do styles.css, mas as regras só valem aqui
     porque o infoprodutor.css só é carregado nesta página */
  .isell__copy{text-align:center;justify-items:center}

  .band__copy{justify-items:center;text-align:center}

  .stats__head{align-items:center;text-align:center}
  .stats__title{text-align:center}

  .foot__top{align-items:center;text-align:center}
  .foot__social{align-items:center;text-align:center}
}

@media (max-width:560px){
  .ihero__title{max-width:16ch}
}