/* Tema Suhai (Brandbook Comercial 2025) sobre o CSS compilado do modelo (lp1style.css).
   Verde Essencial #B0F867 | Verde Seguro #1D2D0F | Cinza Simples #EEEDE8 */

/* Tipografia da marca: ES Build (Extraset, licenciada). Coloque os arquivos em /fonts.
   Enquanto isso, a Outfit (geométrica, parecida) entra como reserva. */
@font-face{font-family:ESBuild;src:url("../fonts/ESBuild-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:ESBuild;src:url("../fonts/ESBuild-Medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:ESBuild;src:url("../fonts/ESBuild-Semibold.woff") format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:ESBuild;src:url("../fonts/ESBuild-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}

:root{
  --background:50 15% 92%;            /* Cinza Simples */
  --foreground:92 50% 12%;            /* Verde Seguro */
  --card:50 20% 95%;
  --card-foreground:92 50% 12%;
  --popover:50 20% 95%;
  --popover-foreground:92 50% 12%;
  --primary:90 91% 69%;               /* Verde Essencial */
  --primary-foreground:92 50% 12%;
  --secondary:92 50% 12%;
  --secondary-foreground:90 91% 69%;
  --muted:50 15% 88%;
  --muted-foreground:92 20% 32%;
  --accent:90 91% 69%;
  --accent-foreground:92 50% 12%;
  --border:50 12% 82%;
  --input:50 12% 82%;
  --ring:90 91% 69%;
  --suhai-lime:90 91% 69%;
  --suhai-dark:92 50% 12%;
  --suhai-beige:50 15% 92%;
  --suhai-cream:50 20% 95%;
  --suhai-olive:92 50% 12%;
}

html,body,button,input,textarea,select,h1,h2,h3,h4,h5,h6{font-family:'ESBuild','Outfit',Arial,Helvetica,sans-serif!important}
html{scroll-behavior:smooth}

/* logos lado a lado (Suhai + Best Life) */
.lp-logo-bl{height:2.75rem;width:auto;object-fit:contain}
.lp-logo-divider{display:inline-block;width:1px;height:2rem;background:hsl(var(--primary)/.35)}

/* honeypot */
.lp-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* FAQ (acordeão do modelo) */
.lp-faq-answer{max-height:0;opacity:0;overflow:hidden;padding-top:0;padding-bottom:0;transition:max-height .28s ease,opacity .2s ease,padding .2s ease}
.lp-faq-item.is-open .lp-faq-answer{opacity:1;padding-bottom:1.25rem}
.lp-faq-item.is-open .lucide-chevron-down{transform:rotate(180deg)}

/* mensagens do formulário */
.lp-msg{font-size:.8125rem;color:#ffb4a8;margin:0 0 .75rem}
.lp-msg:empty{display:none}
#form input.lp-invalid,#form select.lp-invalid{border-color:#ff7a66;box-shadow:0 0 0 2px rgba(255,122,102,.35)}
#form select{appearance:auto}
.lp-done h2{margin-bottom:.75rem}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* utilitários usados pelo modelo que não vieram no CSS compilado */
.text-5xl{font-size:3rem;line-height:1}
.text-white\/70{color:rgb(255 255 255/.7)}
.text-white\/80{color:rgb(255 255 255/.8)}
.hover\:text-white:hover{color:#fff}
.group:hover .group-hover\:text-white\/90{color:rgb(255 255 255/.9)}
.bg-white\/20{background-color:rgb(255 255 255/.2)}
.leading-snug{line-height:1.375}
.flex-shrink-0{flex-shrink:0}
.mt-0\.5{margin-top:.125rem}
.mb-3{margin-bottom:.75rem}
.mb-5{margin-bottom:1.25rem}
.uppercase{text-transform:uppercase}
.accent-primary{accent-color:hsl(var(--primary))}

/* Hero: a foto tem a modelo à direita, onde fica o formulário. No desktop, a foto nítida é deslocada
   para a modelo ficar entre o texto e o formulário; a versão "cover" fica atrás preenchendo as bordas.
   A altura útil do hero é ~626px, então a foto vai a ~1558px de largura e a modelo fica a ~1215px do seu início. */
@media (min-width:1024px){
  .lp-hero-bg{overflow:hidden}
  .lp-hero-bg>img{filter:blur(22px);transform:scale(1.12)}
  .lp-hero-bg::after{
    content:"";position:absolute;left:0;right:0;top:4.3rem;bottom:0;
    background:url("hero.jpg") no-repeat;
    background-size:auto 100%;
    background-position:calc(54vw - 1215px) 0;
    -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(54vw + 60px),transparent calc(54vw + 340px));
            mask-image:linear-gradient(to right,#000 0,#000 calc(54vw + 60px),transparent calc(54vw + 340px));
  }
  .lp-hero-bg~div h1{text-shadow:0 2px 18px rgba(0,0,0,.4)}
}

@media (max-width:639px){
  section h1 span:first-child{font-size:2.25rem!important}
  section h1 span:last-child{font-size:1.75rem!important}
}