/* css/style.css — Redesign profcamila */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  overflow-x:hidden;
  position:relative;
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(212,184,150,0.12) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(168,143,199,0.08) 0%, transparent 50%);
  pointer-events:none;
  z-index:1;
}

body::after{
  content:'';
  position:fixed;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.5 0 0 0 0 0.4 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events:none;
  z-index:2;
  mix-blend-mode:multiply;
  opacity:0.5;
}

h1,h2,h3{
  font-family:'Fraunces',serif;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-0.02em;
  line-height:1.1;
}

/* NAV */
nav{
  position:fixed;
  top:1.2rem;
  left:50%;
  transform:translateX(-50%);
  z-index:100;
  background:rgba(247,241,227,0.92);
  backdrop-filter:blur(12px);
  border:1px solid rgba(45,36,25,0.12);
  border-radius:999px;
  padding:0.5rem 0.6rem;
  box-shadow:0 8px 32px rgba(45,36,25,0.08);
}
nav ul{list-style:none;display:flex;gap:0.2rem;align-items:center}
nav a{
  text-decoration:none;
  color:var(--ink-soft);
  font-size:0.88rem;
  font-weight:500;
  padding:0.55rem 1.1rem;
  border-radius:999px;
  transition:all 0.25s ease;
  display:block;
}
nav a:hover{background:var(--ink);color:var(--paper)}
nav a.nav-cta{background:var(--primary);color:#fff}
nav a.nav-cta:hover{background:var(--primary-deep)}

/* HERO */
.hero{
  position:relative;
  min-height:100vh;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:4rem;
  padding:8rem 6vw 4rem;
  align-items:center;
  z-index:3;
}
.hero-text{position:relative}
.hero-eyebrow{
  font-family:'Caveat',cursive;
  font-size:1.5rem;
  color:var(--primary);
  margin-bottom:0.5rem;
  display:inline-block;
  transform:rotate(-1.5deg);
}
.hero h1{
  font-size:clamp(2.8rem,6vw,5rem);
  font-weight:500;
  margin-bottom:1.5rem;
}
.hero h1 .accent-word{
  font-style:italic;
  font-weight:400;
  color:var(--primary);
  position:relative;
  display:inline-block;
}
.hero h1 .accent-word::after{
  content:'';
  position:absolute;
  bottom:0.1em;
  left:-0.05em;
  right:-0.05em;
  height:0.35em;
  background:var(--postit1);
  z-index:-1;
  opacity:0.7;
  transform:skewX(-8deg);
}
.hero-lead{
  font-size:1.15rem;
  color:var(--ink-soft);
  max-width:480px;
  margin-bottom:2.5rem;
  line-height:1.7;
}
.hero-cta-row{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}

.btn{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  padding:1rem 1.8rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
  font-size:0.95rem;
  transition:all 0.3s ease;
  border:none;
  cursor:pointer;
  font-family:inherit;
}
.btn-primary{background:var(--ink);color:var(--paper);box-shadow:0 4px 20px rgba(45,36,25,0.25)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(45,36,25,0.35)}
.btn-ghost{color:var(--ink);background:transparent;border:1.5px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}

/* COLAGEM HERO */
.hero-collage{position:relative;height:600px}

.collage-photo{
  position:absolute;
  width:280px;
  height:340px;
  background:#fff;
  padding:14px 14px 50px;
  box-shadow:0 20px 50px rgba(45,36,25,0.18),0 8px 16px rgba(45,36,25,0.1);
  transform:rotate(3deg);
  top:40px;
  right:60px;
  transition:transform 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
.collage-photo:hover{transform:rotate(0deg) scale(1.03)}
.collage-photo .photo-inner{
  width:100%;
  height:100%;
  background:linear-gradient(135deg,var(--secondary),var(--accent));
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-family:'Caveat',cursive;
  font-size:2rem;
  text-align:center;
}
.collage-photo .caption{
  position:absolute;
  bottom:14px;
  left:0;
  right:0;
  text-align:center;
  font-family:'Caveat',cursive;
  color:var(--ink-soft);
  font-size:1.2rem;
}
.collage-tape{
  position:absolute;
  width:90px;
  height:24px;
  background:rgba(255,235,150,0.6);
  top:-12px;
  left:50%;
  transform:translateX(-50%) rotate(-2deg);
  border-left:1px dashed rgba(180,150,80,0.3);
  border-right:1px dashed rgba(180,150,80,0.3);
}

.postit{
  position:absolute;
  padding:1.5rem 1.3rem;
  font-family:'Caveat',cursive;
  font-size:1.3rem;
  font-weight:600;
  color:var(--ink);
  box-shadow:3px 8px 22px var(--postit-shadow);
  line-height:1.2;
  transition:transform 0.4s ease;
}
.postit::before{
  content:'';
  position:absolute;
  top:-8px;
  left:50%;
  transform:translateX(-50%) rotate(-3deg);
  width:50px;
  height:14px;
  background:rgba(255,230,140,0.5);
  border-radius:1px;
}
.postit:hover{transform:rotate(0deg) scale(1.05) !important}

.postit-1{background:var(--postit1);width:155px;height:155px;top:373px;left:-30px;transform:rotate(-6deg);display:flex;align-items:center;justify-content:center;text-align:center;z-index: 1;}
.postit-2{background:var(--postit2);width:140px;height:140px;top:372px;left:125px;transform:rotate(4deg);display:flex;align-items:center;justify-content:center;text-align:center}
.postit-3{background:var(--postit3);width:130px;height:130px;bottom:70px;right:-35px;transform:rotate(-3deg);display:flex;align-items:center;justify-content:center;text-align:center}
.postit-4{background:var(--postit4);width:120px;height:120px;top:180px;right:-33px;transform:rotate(6deg);display:flex;align-items:center;justify-content:center;text-align:center;font-size:1.15rem}

.scroll-hint{
  position:absolute;
  bottom:2rem;
  left:50%;
  transform:translateX(-50%);
  font-family:'Caveat',cursive;
  color:var(--ink-soft);
  font-size:1.1rem;
  animation:bounce 2s ease-in-out infinite;
}
@keyframes bounce{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(8px)}
}

/* SEÇÕES */
section{
  position:relative;
  z-index:3;
  padding:6rem 6vw;
  max-width:1400px;
  margin:0 auto;
}
.section-label{
  font-family:'Caveat',cursive;
  font-size:1.4rem;
  color:var(--primary);
  margin-bottom:0.5rem;
  display:inline-block;
  transform:rotate(-1deg);
}
.section-title{
  font-size:clamp(2.2rem,4vw,3.5rem);
  font-weight:500;
  margin-bottom:1.5rem;
  max-width:800px;
}
.section-title em{font-style:italic;color:var(--primary);font-weight:400}

/* SOBRE */
.sobre{display:grid;grid-template-columns:1fr 1.3fr;gap:5rem;align-items:center}
.sobre-foto{position:relative}
.sobre-foto-frame{
  width:100%;
  aspect-ratio:4/5;
  background:#fff;
  padding:18px 18px 60px;
  box-shadow:0 25px 60px rgba(45,36,25,0.2);
  transform:rotate(-2deg);
  position:relative;
}
.sobre-foto-frame .img-area{
  width:100%;
  height:100%;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-family:'Caveat',cursive;
  font-size:2rem;
}
.sobre-foto-frame .caption{
  position:absolute;
  bottom:18px;
  left:0;
  right:0;
  text-align:center;
  font-family:'Caveat',cursive;
  color:var(--ink-soft);
  font-size:1.3rem;
}
.sobre-foto::after{
  content:'✦';
  position:absolute;
  top:-30px;
  right:-20px;
  font-size:3rem;
  color:var(--primary);
  transform:rotate(15deg);
}
.sobre-texto p{font-size:1.15rem;color:var(--ink-soft);margin-bottom:1.5rem;line-height:1.75}
.sobre-credenciais{display:flex;flex-wrap:wrap;gap:0.6rem;margin-top:2rem}
.credencial{
  padding:0.5rem 1rem;
  background:rgba(107,78,158,0.08);
  border:1px solid rgba(107,78,158,0.2);
  border-radius:999px;
  font-size:0.85rem;
  color:var(--primary-deep);
  font-weight:500;
}

/* SERVIÇOS */
.servicos{background:var(--paper-dark);padding:7rem 6vw;max-width:none;margin:0;position:relative}
.servicos-inner{max-width:1400px;margin:0 auto}
.servicos-lead{color:var(--ink-soft);font-size:1.1rem;max-width:600px}
.servicos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:3rem}
.ficha{
  background:#fff;
  padding:2.5rem;
  border-radius:4px;
  position:relative;
  box-shadow:0 12px 32px rgba(45,36,25,0.1);
  transition:transform 0.4s ease,box-shadow 0.4s ease;
  border-top:6px solid var(--primary);
}
.ficha:nth-child(2){border-top-color:var(--accent)}
.ficha:nth-child(3){border-top-color:var(--secondary)}
.ficha:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(45,36,25,0.18)}
.ficha-numero{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-size:3rem;
  color:rgba(107,78,158,0.15);
  position:absolute;
  top:1rem;
  right:1.5rem;
  font-weight:300;
}
.ficha h3{font-size:1.5rem;margin-bottom:1.2rem;position:relative;z-index:2}
.ficha ul{list-style:none}
.ficha li{
  padding:0.5rem 0 0.5rem 1.8rem;
  position:relative;
  color:var(--ink-soft);
  font-size:0.98rem;
  line-height:1.5;
}
.ficha li::before{
  content:'';
  position:absolute;
  left:0;
  top:1.1rem;
  width:18px;
  height:2px;
  background:var(--primary);
}

/* COMO FUNCIONA */
.como-funciona{padding:7rem 6vw}
.como-funciona-header{text-align:center;max-width:700px;margin:0 auto}
.como-funciona-header .section-title{margin:0 auto 1rem}

.timeline{position:relative;max-width:900px;margin:4rem auto 0}
.timeline::before{
  content:'';
  position:absolute;
  left:40px;
  top:20px;
  bottom:20px;
  width:2px;
  background:repeating-linear-gradient(to bottom,var(--ink-soft) 0,var(--ink-soft) 6px,transparent 6px,transparent 14px);
  opacity:0.4;
}
.step{
  display:grid;
  grid-template-columns:80px 1fr;
  gap:2rem;
  margin-bottom:3rem;
  position:relative;
  align-items:start;
}
.step-num{
  width:80px;
  height:80px;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Fraunces',serif;
  font-size:1.8rem;
  font-weight:500;
  position:relative;
  z-index:2;
  box-shadow:0 6px 20px rgba(45,36,25,0.12);
}
.step:nth-child(1) .step-num{background:var(--postit1)}
.step:nth-child(2) .step-num{background:var(--postit2)}
.step:nth-child(3) .step-num{background:var(--postit3)}
.step:nth-child(4) .step-num{background:var(--postit4)}
.step-body h3{font-size:1.5rem;margin-bottom:0.5rem}
.step-body p{color:var(--ink-soft);font-size:1.05rem;line-height:1.7}

.local-atendimento{
  max-width:700px;
  margin:4rem auto 0;
  background:var(--primary);
  color:var(--paper);
  padding:2rem 2.5rem;
  border-radius:16px;
  display:flex;
  gap:1.5rem;
  align-items:center;
  box-shadow:0 12px 32px rgba(107,78,158,0.25);
}
.local-icon{font-size:2rem;flex-shrink:0}
.local-atendimento p{font-size:1.1rem;line-height:1.5;margin:0;color:#fff}

/* MATERIAIS */
.materiais{
  background:var(--ink);
  color:var(--paper);
  padding:8rem 6vw;
  max-width:none;
  margin:0;
  position:relative;
  overflow:hidden;
}
.materiais::before{
  content:'';
  position:absolute;
  top:-100px;
  right:-100px;
  width:400px;
  height:400px;
  background:var(--primary);
  border-radius:50%;
  opacity:0.3;
  filter:blur(80px);
}
.materiais-inner{max-width:900px;margin:0 auto;text-align:center;position:relative;z-index:2}
.materiais .section-label{color:var(--postit1)}
.materiais h2{color:var(--paper);font-size:clamp(2.4rem,5vw,4rem);margin-bottom:2rem}
.materiais h2 em{color:var(--postit1);font-style:italic}
.materiais p{font-size:1.25rem;line-height:1.8;color:rgba(247,241,227,0.85);max-width:700px;margin:0 auto}

/* CONTATO */
.contato{padding:8rem 6vw;background:var(--paper-dark);max-width:none;margin:0}
.contato-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.contato-texto h2{font-size:clamp(2.4rem,4vw,3.5rem);margin-bottom:1.5rem}
.contato-texto h2 em{font-style:italic;color:var(--primary)}
.contato-texto p{color:var(--ink-soft);font-size:1.15rem;margin-bottom:2rem;max-width:400px}

.contato-links{display:flex;flex-direction:column;gap:1rem}
.contato-link{
  display:flex;
  align-items:center;
  gap:1.2rem;
  padding:1.3rem 1.5rem;
  background:#fff;
  border-radius:16px;
  text-decoration:none;
  color:var(--ink);
  transition:all 0.3s ease;
  box-shadow:0 4px 16px rgba(45,36,25,0.06);
  border:1px solid rgba(45,36,25,0.06);
}
.contato-link:hover{transform:translateX(6px);box-shadow:0 10px 28px rgba(45,36,25,0.12)}
.contato-icon{
  width:48px;
  height:48px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  flex-shrink:0;
}
.contato-icon.wpp{background:#25D366;color:#fff}
.contato-icon.email{background:var(--primary);color:#fff}
.contato-icon.insta{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff}
.contato-icon.form{background:var(--ink);color:var(--paper)}
.contato-link-label{font-family:'Caveat',cursive;font-size:1.05rem;color:var(--ink-soft);line-height:1}
.contato-link-value{font-weight:600;font-size:1.05rem;margin-top:0.2rem}

/* WPP FLOAT */
.wpp-float{
  position:fixed;
  bottom:1.5rem;
  right:1.5rem;
  width:64px;
  height:64px;
  background:#ffffff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:2rem;
  text-decoration:none;
  box-shadow: 0 8px 28px rgba(37, 211, 102, 1.45);
  z-index:99;
  transition:transform 0.3s ease;
  overflow:hidden;
}
.wpp-float img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.wpp-float:hover{transform:scale(1.08)}

/* FOOTER */
footer{
  background:var(--ink);
  color:rgba(247,241,227,0.7);
  padding:3rem 6vw;
  text-align:center;
  font-size:0.9rem;
  position:relative;
  z-index:3;
}
footer .footer-name{
  font-family:'Fraunces',serif;
  font-style:italic;
  color:var(--paper);
  font-size:1.1rem;
  display:block;
  margin-bottom:0.5rem;
}

/* RESPONSIVO */
@media (max-width:900px){
  nav{top:0.8rem;width:calc(100% - 1.6rem)}
  nav ul{flex-wrap:wrap;justify-content:center}
  nav a{padding:0.4rem 0.8rem;font-size:0.8rem}
  .hero{grid-template-columns:1fr;padding:7rem 5vw 3rem;gap:3rem;min-height:auto}
  .hero-collage{height:480px;order:-1;transform:scale(0.85)}
  .sobre{grid-template-columns:1fr;gap:3rem}
  .sobre-foto-frame{max-width:340px;margin:0 auto}
  .contato-inner{grid-template-columns:1fr;gap:3rem}
  section{padding:4rem 5vw}
  .servicos,.como-funciona,.materiais,.contato{padding:5rem 5vw}
  .timeline::before{left:30px}
  .step{grid-template-columns:60px 1fr;gap:1.5rem}
  .step-num{width:60px;height:60px;font-size:1.4rem}
}

/* ENTRADA */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.hero-eyebrow,.hero h1,.hero-lead,.hero-cta-row{animation:fadeUp 0.8s ease backwards}
.hero h1{animation-delay:0.1s}
.hero-lead{animation-delay:0.2s}
.hero-cta-row{animation-delay:0.3s}
.postit-1{animation:fadeUp 0.8s ease 0.4s backwards}
.postit-2{animation:fadeUp 0.8s ease 0.5s backwards}
.postit-3{animation:fadeUp 0.8s ease 0.6s backwards}
.postit-4{animation:fadeUp 0.8s ease 0.7s backwards}
.collage-photo{animation:fadeUp 1s ease 0.3s backwards}