/* =========================================================
   WP Brasil Academy — lp.css
   Complementos visuais para as landing pages de nicho.
   Depende de style.css (precisa ser carregado DEPOIS dele).
   ========================================================= */

/* ---------- Hero de página interna (sem a arte do hero principal) ---------- */
.lp-hero{
  padding-top:150px;
  padding-bottom:var(--s-96);
  background:var(--wp-blue-mist);
}
.lp-hero .wrap{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:var(--s-64);
  align-items:center;
}
.lp-hero__title{
  font-family:var(--font-titulo);
  font-size:clamp(38px, 5.2vw, 68px);
  line-height:1.06;
  font-weight:500;
  letter-spacing:var(--tracking-tit);
  text-transform:uppercase;
  color:var(--wp-blue-ink);
  text-wrap:balance;
  margin:0;
}
.lp-hero__lede{
  margin-top:var(--s-24);
  color:var(--fog);
  font-size:18px;
  line-height:1.55;
  max-width:52ch;
}
.lp-hero .btn-row{
  justify-content:flex-start;
  margin-top:var(--s-32);
}
.lp-hero__media{
  margin:0;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--ash);
  aspect-ratio:4 / 5;
  background:var(--wp-blue-soft);
}
.lp-hero__media img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Hero com arte de fundo (imagem completa, sem corte) ----------
   O container acompanha a proporção da imagem; o texto fica sobreposto
   no espaço amarelo negativo. */
.lp-hero--art{
  position:relative;
  overflow:hidden;
  padding:0;
  background:var(--wp-yellow);
}
.lp-hero--art .lp-hero__art{ display:block; position:relative; margin:0; }
.lp-hero--art .lp-hero__art img{ display:block; width:100%; height:auto; }

.lp-hero--art .lp-hero__over{ position:absolute; inset:0; z-index:2; }
.lp-hero--art .lp-hero__over > .wrap{
  height:100%;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-end;
}
.lp-hero--art .lp-hero__head{ width:min(42%, 470px); text-align:right; }
.lp-hero--art .backlink{ margin-left:auto; }
.lp-hero--art .eyebrow{ flex-direction:row-reverse; }
.lp-hero--art .btn-row{ justify-content:flex-end; }
.lp-hero--art .lp-hero__title{ color:var(--wp-blue-ink); font-size:clamp(22px, 2.9vw, 44px); }
.lp-hero--art .lp-hero__lede{ color:var(--ink); font-size:15px; max-width:none; margin-left:auto; }
.lp-hero--art .eyebrow,
.lp-hero--art .backlink{ color:var(--wp-blue-ink); }
.lp-hero--art .eyebrow::before{ background:var(--wp-blue); }

/* Variante: arte com fundo azul → texto à esquerda, em branco */
.lp-hero--onblue{ background:var(--wp-blue); }
.lp-hero--onblue .lp-hero__over > .wrap{ align-items:flex-start; }
.lp-hero--onblue .lp-hero__head{ text-align:left; }
.lp-hero--onblue .backlink{ margin-left:0; }
.lp-hero--onblue .eyebrow{ flex-direction:row; }
.lp-hero--onblue .eyebrow::before{ background:var(--wp-yellow); }
.lp-hero--onblue .lp-hero__title{ color:var(--paper); }
.lp-hero--onblue .lp-hero__lede{ color:rgba(253,253,254,.86); margin-left:0; }
.lp-hero--onblue .eyebrow,
.lp-hero--onblue .backlink{ color:var(--paper); }
.lp-hero--onblue .btn-row{ justify-content:flex-start; }
.lp-hero--onblue .btn--primary{ background:var(--wp-yellow); color:var(--ink); }
.lp-hero--onblue .btn--primary:hover{ background:var(--paper); color:var(--wp-blue-ink); }
.lp-hero--onblue .btn--ghost{ color:var(--paper); border-color:rgba(255,255,255,.5); }
.lp-hero--onblue .btn--ghost:hover{ border-color:var(--paper); background:rgba(255,255,255,.12); }

@media (max-width:1100px){
  .lp-hero--art .lp-hero__head{ width:47%; }
  .lp-hero--art .lp-hero__title{ font-size:clamp(19px, 2.7vw, 34px); }
  .lp-hero--art .lp-hero__lede{ font-size:14px; }
}
@media (max-width:900px){
  .lp-hero--art .lp-hero__head{ width:52%; }
  .lp-hero--art .btn-row .btn{ padding:13px 16px; font-size:13px; }
}
@media (max-width:720px){
  /* mobile: só a imagem de fundo + os botões na base (sem textos) */
  .lp-hero--art{ min-height:0; }
  .lp-hero--art .lp-hero__art{ position:absolute; inset:0; }
  .lp-hero--art .lp-hero__art img{
    width:100%; height:100%; object-fit:cover; object-position:center 78%;
  }
  .lp-hero--art .lp-hero__over{ position:relative; z-index:2; }
  .lp-hero--art .lp-hero__over > .wrap{
    min-height:74vh;
    display:flex; flex-direction:column; justify-content:flex-end;
    align-items:center;
    padding:96px var(--s-24) 24px;
  }
  .lp-hero--art .lp-hero__head{
    width:100%; max-width:100%; min-width:0; align-self:stretch;
    display:flex; flex-direction:column;
  }
  .lp-hero--art .lp-hero__title{ text-wrap:normal; overflow-wrap:anywhere; }
  /* variante "bare": no mobile some com os textos, deixa só os botões */
  .lp-hero--bare .lp-hero__head > :not(.btn-row){ display:none !important; }
  .lp-hero--art .btn-row{
    padding-top:0;
    flex-wrap:nowrap; justify-content:center; width:100%;
  }
  .lp-hero--art .btn-row .btn{ flex:1 1 0; justify-content:center; padding:14px 10px; font-size:13px; }
  .lp-hero--art .btn-row .btn--ghost{ background:var(--paper); color:var(--wp-blue-ink); border-color:var(--paper); }

  /* variante "onblue" no mobile: a arte traz uma moldura azul embutida,
     então o conteúdo é recuado para caber dentro do card visível */
  .lp-hero--onblue .lp-hero__over > .wrap{
    justify-content:flex-start;
    padding-left:9%; padding-right:9%;
  }
  .lp-hero--onblue .lp-hero__head{ text-align:center; }
  .lp-hero--onblue .lp-hero__art img{ object-position:center; }
  .lp-hero--onblue .backlink{ align-self:center; }
  .lp-hero--onblue .eyebrow{ align-self:center; justify-content:center; }
  .lp-hero--onblue .lp-hero__title{ font-size:clamp(26px, 7vw, 36px); line-height:1.08; }
  .lp-hero--onblue .lp-hero__lede{
    align-self:center; margin:var(--s-16) auto 0; max-width:40ch;
    font-size:14px; line-height:1.55;
  }
  .lp-hero--onblue .btn-row{ margin-top:var(--s-24); justify-content:center; gap:var(--s-8); }
  .lp-hero--onblue .btn-row .btn{ flex:0 1 auto; padding:10px 14px; font-size:11px; }
  .lp-hero--onblue .btn-row .btn--ghost{ background:transparent; color:var(--paper); border-color:rgba(255,255,255,.5); }

  /* "bare" sempre com os botões na base, mesmo na variante onblue */
  .lp-hero--bare .lp-hero__over > .wrap{ justify-content:flex-end; }
  .lp-hero--bare .btn-row{ margin-top:0; }
  /* na arte onblue, sobe os botões para a base do card (moldura embutida) */
  .lp-hero--onblue.lp-hero--bare .lp-hero__over > .wrap{ padding-bottom:10%; }
}

/* ---------- Fundo azul claro ---------- */
.section--sky{ background:var(--wp-blue-soft); }

/* ---------- Fundo de malha (grid) reutilizável ---------- */
.section--grid{ position:relative; overflow:hidden; }
.section--grid::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background-image:
    repeating-linear-gradient(to right,  var(--ash) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(to bottom, var(--ash) 0 1px, transparent 1px 88px);
  background-position:center;
  opacity:.55;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%, #000 35%, transparent 100%);
  mask-image:radial-gradient(120% 90% at 50% 40%, #000 35%, transparent 100%);
  pointer-events:none;
}
.section--grid > .wrap{ position:relative; z-index:1; }

/* Malha sobre o azul-marinho: linhas claras e translúcidas */
.section--dark.section--grid::before,
.section--blue.section--grid::before{
  background-image:
    repeating-linear-gradient(to right,  rgba(255,255,255,.14) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.14) 0 1px, transparent 1px 88px);
  opacity:1;
}

/* ---------- Voltar para o site principal ---------- */
.backlink{
  display:flex; width:fit-content; align-items:center; gap:8px;
  font-size:14px; color:var(--fog);
  margin-bottom:var(--s-16);
  transition:color .3s var(--ease);
}
.backlink:hover{ color:var(--wp-blue-ink); }

/* ---------- Lista de checagem (para quem é / o que inclui) ---------- */
.checklist{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:var(--s-16) var(--s-48);
}
.checklist li{
  position:relative;
  padding-left:36px;
  color:var(--ink);
  font-size:16px; line-height:1.5;
}
.checklist li::before{
  content:"";
  position:absolute; left:0; top:1px;
  width:22px; height:22px; border-radius:50%;
  background-color:var(--wp-blue-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005aff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:13px; background-position:center; background-repeat:no-repeat;
}
.section--dark .checklist li{ color:rgba(253,253,254,.92); }

/* ---------- Faixa de citação / princípio ---------- */
.quote-band{
  background:var(--wp-blue-deep);
  color:var(--paper);
  border-radius:var(--r-lg);
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(24px, 4vw, 56px);
  align-items:center;
  padding:clamp(28px, 5vw, 56px);
}
.quote-band p{
  font-family:var(--font-titulo);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:var(--tracking-tit);
  font-size:clamp(24px, 3.4vw, 40px);
  line-height:1.14;
  max-width:26ch;
}
.quote-band span{
  display:block; margin-top:var(--s-24);
  font-family:var(--font);
  text-transform:none;
  letter-spacing:var(--tracking);
  font-size:15px;
  color:rgba(253,253,254,.6);
}
.quote-band__media{ margin:0; align-self:stretch; }
.quote-band__media img{
  width:100%; height:100%;
  min-height:260px;
  object-fit:cover;
  border-radius:var(--r-card);
}
@media (max-width:820px){
  .quote-band{ grid-template-columns:1fr; }
  .quote-band__media{ order:-1; }
  .quote-band__media img{ min-height:0; aspect-ratio:16 / 9; }
}

/* ---------- FAQ com <details> nativo (sem JS) ---------- */
.faq{ max-width:820px; margin:0 auto; border-top:1px solid var(--ash); }
.faq__item{ border-bottom:1px solid var(--ash); }
.faq__item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-24);
  padding:var(--s-24) 0;
  font-family:var(--font-titulo);
  text-transform:uppercase;
  letter-spacing:var(--tracking-tit);
  font-size:19px; line-height:1.2;
  color:var(--wp-blue-ink);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:"+"; flex:none;
  font-family:var(--font); font-size:22px; line-height:1;
  color:var(--wp-blue);
  transition:transform .3s var(--ease);
}
.faq__item[open] summary::after{ transform:rotate(45deg); }
.faq__item p{
  padding:0 0 var(--s-24);
  color:var(--fog); font-size:16px; line-height:1.65;
  max-width:64ch;
}

/* ---------- Cards de oferta (seção amarela) ---------- */
.section--amarelo .card{
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.section--amarelo .card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 44px -18px rgba(16,18,22,.45);
}
.card__icon{
  width:54px; height:54px; flex:none;
  display:grid; place-items:center;
  border-radius:16px;
  background:rgba(255,255,255,.12);
  transition:background-color .4s var(--ease), transform .4s var(--ease);
}
.card__icon svg{
  width:26px; height:26px;
  fill:none; stroke:var(--wp-yellow); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .4s var(--ease);
}
.section--amarelo .card:hover .card__icon{
  background:var(--wp-yellow);
  transform:translateY(-2px) rotate(-6deg);
}
.section--amarelo .card:hover .card__icon svg{ stroke:var(--wp-blue-ink); }

/* ---------- Cross-links entre nichos ---------- */
.lp-cross .card{ align-items:center; text-align:center; }
.lp-cross .card h3{ font-size:26px; }

/* ---------- Responsivo ---------- */
@media (max-width:1000px){
  .lp-hero .wrap{ grid-template-columns:1fr; gap:var(--s-32); }
  .lp-hero__media{ aspect-ratio:16 / 10; }
  .checklist{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .lp-hero{ padding-top:120px; padding-bottom:var(--s-64); }
  /* botões do hero lado a lado (mesmo padrão do site) em todas as LPs */
  .lp-hero .btn-row{ flex-wrap:nowrap; }
  .lp-hero .btn-row .btn{ flex:1 1 0; justify-content:center; padding:15px 12px; font-size:13.5px; }
}