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

:root{
  --bg:hsl(40,20%,98%);
  --fg:hsl(222,47%,11%);
  --fg75:hsla(222,47%,11%,0.75);
  --fg45:hsla(222,47%,11%,0.45);
  --fg35:hsla(222,47%,11%,0.35);
  --border:hsl(214,32%,91%);
  --slate900:#0f172a;
  --slate500:#64748b;
  --slate600:#475569;
  --slate400:#94a3b8;
  --slate300:#cbd5e1;
}
.dark{
  --bg:hsl(222,47%,11%);
  --fg:hsl(40,20%,98%);
  --fg75:hsla(40,20%,98%,0.75);
  --fg45:hsla(40,20%,98%,0.45);
  --fg35:hsla(40,20%,98%,0.35);
  --border:hsl(217,33%,17.5%);
  --slate900:#f8fafc;
  --slate500:#94a3b8;
  --slate600:#cbd5e1;
  --slate400:#64748b;
  --slate300:#334155;
}

html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background .3s,color .3s;
  line-height:1.6;
}

/* HEADER / TOGGLE */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:1rem 1.5rem;
  display:flex;justify-content:flex-end;
  pointer-events:none;
}
#theme-toggle{
  pointer-events:auto;
  width:40px;height:40px;
  border-radius:50%;border:1px solid var(--border);
  background:var(--bg);color:var(--fg);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
#theme-toggle:hover{opacity:.8}
#icon-moon{display:none}
.dark #icon-sun{display:none}
.dark #icon-moon{display:block}

/* HERO */
.hero{
  position:relative;width:100%;min-height:90vh;
  display:flex;align-items:center;overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;display:flex;justify-content:flex-end;
}
.hero-photo-wrap{
  position:relative;width:100%;height:100%;
}
.hero-photo{
  width:100%;height:100%;object-fit:cover;object-position:top;
}
.hero-gradient-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to right,var(--bg) 0%,var(--bg) 15%,hsla(40,20%,98%,0.7) 38%,hsla(40,20%,98%,0.15) 60%,transparent 80%);
}
.dark .hero-gradient-overlay{
  background:linear-gradient(to right,var(--bg) 0%,var(--bg) 15%,hsla(222,47%,11%,0.7) 38%,hsla(222,47%,11%,0.15) 60%,transparent 80%);
}
.hero-gradient-overlay-bottom{
  position:absolute;inset:0;display:none;
  background:linear-gradient(to top,var(--bg) 0%,var(--bg) 15%,hsla(40,20%,98%,0.6) 40%,transparent 70%);
}
.dark .hero-gradient-overlay-bottom{
  background:linear-gradient(to top,var(--bg) 0%,var(--bg) 15%,hsla(222,47%,11%,0.6) 40%,transparent 70%);
}
.hero-solid-left{
  position:absolute;inset:0;width:33%;background:var(--bg);display:none;
}
.hero-content{
  position:relative;z-index:10;width:100%;max-width:72rem;
  margin:0 auto;padding:8rem 1.5rem 8rem 1.5rem;
}
.hero-content h1{
  font-size:clamp(2.25rem,5vw,3.75rem);font-weight:700;
  letter-spacing:-0.02em;color:var(--fg);
  margin-bottom:1.5rem;line-height:1.1;
}
.hero-content h2{
  font-size:clamp(1.15rem,2.5vw,1.5rem);font-weight:600;
  color:var(--slate900);margin-bottom:1.5rem;line-height:1.4;
  max-width:36rem;
}
.hero-content p{
  font-size:1.125rem;color:var(--fg75);line-height:1.7;max-width:36rem;
}

@media(min-width:768px){
  .hero-photo-wrap{width:75%}
  .hero-solid-left{display:block}
  .hero-gradient-overlay-bottom{display:none!important}
  .hero-content{padding:10rem 3rem}
}
@media(max-width:767px){
  .hero-gradient-overlay-bottom{display:block}
  .hero-gradient-overlay{
    background:linear-gradient(to right,var(--bg) 0%,hsla(40,20%,98%,0.5) 50%,transparent 100%);
  }
  .dark .hero-gradient-overlay{
    background:linear-gradient(to right,var(--bg) 0%,hsla(222,47%,11%,0.5) 50%,transparent 100%);
  }
}

/* SOCIAL PROOF */
.social-proof{
  width:100%;background:#f0f4ff;padding:4rem 1.5rem 1rem;text-align:center;
}
.social-proof p{
  color:var(--slate400);font-size:0.875rem;letter-spacing:0.05em;
}

/* SECTIONS */
.section-nicho{
  width:100%;padding:4rem 1.5rem;
}
.section-inner{
  max-width:64rem;margin:0 auto;
}
.section-gap{
  width:100%;height:2rem;background:#fff;
}
.dark .section-gap{background:var(--bg)}

/* NICHO HEADER */
.nicho-header{
  margin-bottom:2.5rem;padding-top:3rem;
}
.nicho-logo{
  height:4rem;width:auto;object-fit:contain;margin-bottom:2rem;display:block;margin-left:auto;margin-right:auto;
}
@media(min-width:768px){
  .nicho-logo{height:5rem}
}
.nicho-logo-lg{
  height:5rem;
}
@media(min-width:768px){
  .nicho-logo-lg{height:7rem}
}
.nicho-accent{
  width:3rem;height:0.25rem;border-radius:9999px;margin-bottom:1.25rem;
}
.nicho-titulo{
  font-size:clamp(1.5rem,4vw,2.25rem);font-weight:800;
  color:var(--slate900);line-height:1.2;letter-spacing:-0.02em;text-align:center;
}
.nicho-subtitulo{
  color:var(--slate500);font-size:clamp(0.95rem,2vw,1.125rem);
  line-height:1.7;margin-top:0.5rem;max-width:40rem;text-align:center;margin-left:auto;margin-right:auto;
}
.nicho-accent{
  margin-left:auto;margin-right:auto;
}

/* FRASE */
.frase{
  padding:4rem 1rem;text-align:center;
}
.frase-titulo{
  font-size:clamp(1.75rem,4vw,3rem);font-weight:900;
  color:var(--slate900);line-height:1.2;max-width:48rem;margin:0 auto;
}
.frase-sub{
  margin-top:1rem;color:var(--slate500);
  font-size:clamp(0.95rem,2vw,1.125rem);max-width:32rem;margin-left:auto;margin-right:auto;
}

/* CARD */
.card{
  position:relative;overflow:hidden;border-radius:2rem;
  display:flex;flex-direction:column;
  transition:transform .5s;
}
.card:hover{transform:translateY(-4px)}
.card-text{
  display:flex;flex-direction:column;justify-content:center;
  flex:1;padding:1.75rem;
}
.card-text h3{
  font-size:clamp(1.125rem,2.5vw,1.5rem);font-weight:700;
  line-height:1.3;margin-bottom:0.75rem;color:var(--slate900);
}
.card-text p{
  color:var(--slate600);font-size:0.875rem;line-height:1.7;margin-bottom:1.75rem;
}
.card-logo{
  height:3rem;object-fit:contain;object-position:left;margin-bottom:1.25rem;
}
.card-logo-lg{height:6rem}
.card-badge{
  display:inline-block;font-size:0.75rem;font-weight:700;
  text-transform:uppercase;letter-spacing:0.25em;
  padding:0.25rem 0.75rem;border-radius:9999px;
  margin-bottom:1.25rem;width:fit-content;color:#fff;
}
.card-btn{
  display:inline-flex;align-items:center;gap:0.5rem;
  padding:0.75rem 1.5rem;border-radius:9999px;
  color:#fff;font-weight:700;font-size:0.875rem;
  text-decoration:none;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  transition:all .3s;
}
.card-btn:hover{
  box-shadow:0 8px 20px rgba(0,0,0,0.2);transform:translateY(-2px);
}
.card-btn svg{transition:transform .3s}
.card-btn:hover svg{transform:translateX(4px)}
.card-img{
  flex-shrink:0;overflow:hidden;
}
.card-img img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.card-img-portrait{
  width:9rem;
}

@media(min-width:640px){
  .card{flex-direction:row}
  .card-text{padding:2.5rem}
  .card-img{width:45%;align-self:stretch}
  .card-img-portrait{width:12rem}
  .card-img-left .card-img{order:-1}
}

/* Card com imagem à esquerda */
.card-img-left{flex-direction:column}
@media(min-width:640px){
  .card-img-left{flex-direction:row-reverse}
  .card-img-left .card-img{order:0}
  .card-img-left .card-text{order:1}
}

/* CTA WHATSAPP */
.cta-section{
  width:100%;max-width:56rem;margin:0 auto;padding:6rem 1.5rem;text-align:center;
}
.cta-content h2{
  font-size:clamp(1.375rem,3vw,2.25rem);font-weight:700;
  color:var(--fg);margin-bottom:2.5rem;max-width:42rem;
  margin-left:auto;margin-right:auto;line-height:1.3;
}
.whatsapp-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1.125rem;padding:0 2rem;height:4rem;border-radius:9999px;
  box-shadow:0 8px 20px rgba(0,0,0,0.15);
  transition:all .3s;
  background:#25D366;color:#fff;font-weight:600;
  text-decoration:none;gap:0.75rem;
}
.whatsapp-btn:hover{
  background:#20bd5a;box-shadow:0 12px 28px rgba(0,0,0,0.2);transform:translateY(-4px);
}

/* FOOTER */
footer{
  width:100%;border-top:1px solid var(--border);margin-top:auto;
}
.footer-inner{
  max-width:56rem;margin:0 auto;padding:3rem 1.5rem;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.footer-seo{
  color:var(--fg45);margin-bottom:2rem;font-size:0.875rem;
  line-height:1.7;max-width:48rem;
}
.footer-seo p{margin-bottom:0.75rem}
.footer-copy{
  font-size:0.875rem;font-weight:500;color:var(--fg35);
}

/* FADE-UP ANIMATION */
.fade-up{
  opacity:0;transform:translateY(24px);
  transition:opacity .6s ease-out,transform .6s ease-out;
}
.fade-up.visible{
  opacity:1;transform:translateY(0);
}

@keyframes gradient-shift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.animate-gradient-shift{
  animation:gradient-shift 4s ease infinite;
}