:root{
  --primary:#D4145A;
  --secondary:#FBB03B;
  --accent:#009FB7;
  --dark:#1a1a1a;
  --light:#f8f9fa;
  --success:#2ecc71;
  --warning:#e74c3c;
  --text:#2c3e50;
  --text-light:#7f8c8d;
  --shadow:0 10px 40px rgba(0,0,0,.1);
  --shadow-lg:0 20px 60px rgba(212,20,90,.15);
  --r:12px;
}

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

/* FUNDO E TIPOGRAFIA */
body{
  font-family:'Poppins',system-ui,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);
  line-height:1.6;
  overflow-x:hidden;
}

/* Helpers */
.wrap{width:min(1200px,95%);margin:auto}
.section{padding:100px 0}
.cream{background:linear-gradient(135deg,#fff9e6 0%,#ffe4cc 100%)}

/* Topbar - Sticky Header */
.topbar{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.95);
  box-shadow:0 2px 20px rgba(255, 16, 16, 0.08);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  transition:all .3s ease;
}
.topbar.scrolled{background:rgba(255,255,255,.98);box-shadow:var(--shadow)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand img{transition:transform .3s ease;cursor:pointer}
.brand img:hover{transform:scale(1.05)}
.menu{display:flex;align-items:center;gap:32px}
.menu a{margin:0;text-decoration:none;color:var(--text);font-weight:600;position:relative;transition:color .3s ease}
.menu a::after{
  content:'';position:absolute;bottom:-4px;left:0;width:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--secondary));
  transition:width .3s ease;border-radius:2px;
}
.menu a:hover::after{width:100%}

/* Botões melhorados */
.btn{
  display:inline-block;border-radius:50px;padding:12px 28px;text-decoration:none;cursor:pointer;
  font-weight:600;transition:all .3s cubic-bezier(.4,.0,.2,1);
  border:none;position:relative;overflow:hidden;
  box-shadow:0 4px 15px rgba(0,0,0,.1);
}
.btn::before{
  content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,255,255,.3);
  border-radius:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s;
}
.btn:hover::before{width:300px;height:300px}

.btn-solid{
  background:linear-gradient(135deg,var(--primary) 0%,#c41245 100%);
  color:#fff;
}
.btn-solid:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 25px rgba(212,20,90,.3);
}

.btn-ghost{
  border:2.5px solid var(--primary);
  color:var(--primary);
  background:transparent;
}
.btn-ghost:hover{
  background:var(--primary);
  color:#fff;
  transform:translateY(-3px);
}

/* Hero Section */
.hero{
  position:relative;padding:120px 0 80px;
  background:linear-gradient(135deg,rgba(212,20,90,.1) 0%,rgba(251,176,59,.05) 100%);
  overflow:hidden;
}
.hero::before{
  content:'';position:absolute;top:-50%;right:-10%;width:600px;height:600px;
  background:radial-gradient(circle,rgba(251,176,59,.15) 0%,transparent 70%);
  border-radius:50%;animation:float 8s ease-in-out infinite;
}
.hero::after{
  content:'';position:absolute;bottom:-30%;left:-5%;width:500px;height:500px;
  background:radial-gradient(circle,rgba(0,159,183,.1) 0%,transparent 70%);
  border-radius:50%;animation:float 10s ease-in-out infinite reverse;
}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(30px)}}

.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center;position:relative;z-index:1}
.hero h1{
  font-size:clamp(42px,6vw,72px);font-weight:800;
  background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin:0 0 20px;line-height:1.2;
}
.hero p{
  font-size:1.1rem;color:var(--text-light);max-width:55ch;margin-bottom:30px;
}
.hero .cta{display:flex;gap:16px;margin-top:40px;flex-wrap:wrap}

/* Foto do hero */
.hero-photo{
  position:relative;border-radius:20px;overflow:hidden;
  box-shadow:var(--shadow-lg);animation:slideInRight .8s ease forwards;
}
.hero-photo::before{
  content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(212,20,90,.1),transparent);
  z-index:1;pointer-events:none;
}
.hero-photo img{
  width:100%;height:400px;object-fit:cover;display:block;
  transition:transform .6s ease;
}
.hero-photo:hover img{transform:scale(1.08)}

@keyframes slideInRight{
  from{opacity:0;transform:translateX(50px)}
  to{opacity:1;transform:translateX(0)}
}

.floaty{animation:floaty 5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}

.wave{display:block;width:100%;height:100px;margin-top:-1px;fill:#fff9e6}

/* Cards - Menu */
.cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px;
  margin-top:50px;
}
.card{
  background:#fff;border-radius:var(--r);overflow:hidden;
  box-shadow:0 5px 20px rgba(0,0,0,.08);
  transform:translateY(0);transition:all .4s cubic-bezier(.4,.0,.2,1);
  border:1px solid #f0f0f0;position:relative;
}
.card:hover{
  transform:translateY(-12px);
  box-shadow:var(--shadow-lg);
}
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--primary),var(--secondary));
  z-index:1;
}

.cover{
  position:relative;overflow:hidden;height:220px;
  background:linear-gradient(135deg,#e0e0e0 0%,#f5f5f5 100%);
}
.cover::before{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:linear-gradient(135deg,rgba(212,20,90,.05),rgba(251,176,59,.05));
  z-index:1;
}
.cover::after{
  content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.4) 45%,transparent 90%);
  transform:translateX(-120%);transition:transform .8s ease;z-index:2;
}
.card:hover .cover::after{transform:translateX(120%)}

.card img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease;
  position:relative;z-index:0;
}
.card:hover img{transform:scale(1.12) rotate(2deg)}

.card-b{padding:24px}
.card h3{
  margin:0 0 8px;color:var(--dark);font-size:1.15rem;
  font-weight:700;text-transform:capitalize;
}
.card p{
  color:var(--text-light);font-size:.95rem;margin-bottom:16px;
  min-height:48px;
}
.price{
  color:var(--primary);font-weight:800;font-size:1.2rem;
  background:linear-gradient(135deg,rgba(212,20,90,.05),rgba(251,176,59,.05));
  padding:8px 12px;border-radius:8px;display:inline-block;
  border-left:4px solid var(--primary);
}

/* Section Headers */
.sec-head{text-align:center;margin-bottom:60px}
.sec-head h2{
  font-size:clamp(36px,5vw,56px);margin-bottom:12px;
  color:var(--dark);font-weight:800;
  background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.sec-head .sub{
  color:var(--text-light);font-size:1.1rem;max-width:60ch;margin:0 auto;
}

/* Sobre */
.about{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center}
.about-img{
  width:100%;border-radius:20px;box-shadow:var(--shadow-lg);
  object-fit:cover;animation:slideInLeft .8s ease forwards;
}

@keyframes slideInLeft{
  from{opacity:0;transform:translateX(-50px)}
  to{opacity:1;transform:translateX(0)}
}

.about-text h2{
  font-size:clamp(28px,4vw,48px);color:var(--dark);margin-bottom:20px;
  font-weight:800;
}
.about-text p{color:var(--text-light);margin-bottom:24px;font-size:1.05rem}
.bullets{list-style:none;padding:0;margin:20px 0}
.bullets li{
  color:var(--text);padding:12px 0 12px 40px;position:relative;
  font-weight:500;transition:transform .3s ease;
}
.bullets li::before{
  content:'✓';position:absolute;left:0;color:var(--primary);font-weight:800;font-size:1.3rem;
}
.bullets li:hover{transform:translateX(8px)}

/* Contato */
.contact{
  display:flex;gap:20px;align-items:center;flex-wrap:wrap;
  margin:40px 0 30px;justify-content:center;
}
.contact .btn{font-size:1.05rem;padding:14px 32px}

.hint{
  color:var(--text-light);text-align:center;
  font-size:.95rem;font-style:italic;
}

/* Footer */
.footer{
  background:linear-gradient(135deg,var(--dark) 0%,#2c3e50 100%);
  color:#fff;padding:50px 0 20px;
  border-top:3px solid var(--primary);
}
.footer-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;
  align-items:start;margin-bottom:30px;
}
.f-brand img{width:100%;max-width:120px;border-radius:12px;margin-bottom:16px}
.f-brand p{color:#b0b8c1;margin:0;line-height:1.8}
.footer-grid p{color:#b0b8c1}
.footer-grid p strong{color:var(--secondary)}

/* Acessibilidade */
a,button{outline-offset:3px}
a:focus,button:focus{outline:3px solid var(--accent)}

/* Animações de entrada */
.reveal-up{
  opacity:0;transform:translateY(30px);
}
.reveal-up.is-visible{
  animation:revealUp .8s cubic-bezier(.4,.0,.2,1) forwards;
}
.delay-1.is-visible{animation-delay:.1s}
.delay-2.is-visible{animation-delay:.2s}
.delay-3.is-visible{animation-delay:.3s}
.delay-4.is-visible{animation-delay:.4s}
.delay-5.is-visible{animation-delay:.5s}
.delay-6 is-visible{animation-delay:.6s}
.delay-7 is-visible{animation-delay:.7s}
.delay-8 is-visible{animation-delay:.8s}
.delay-9 is-visible{animation-delay:.9s}

@keyframes revealUp{
  to{opacity:1;transform:translateY(0)}
}

.pop{
  opacity:0;transform:scale(.95) translateY(20px);
}
.pop.is-visible{
  animation:popIn .8s cubic-bezier(.34,1.56,.64,1) forwards;
}

@keyframes popIn{
  to{opacity:1;transform:scale(1) translateY(0)}
}

/* Pulse e Wobble melhorados */
.pulse{animation:pulseFx 2.4s ease-in-out 1s infinite}
@keyframes pulseFx{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.05)}
}

.wobble{animation:wobbleFx 3s ease-in-out infinite}
@keyframes wobbleFx{
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(-2deg)}
  75%{transform:rotate(2deg)}
}

.note{
  text-align:center;color:var(--text-light);margin-top:40px;
  font-size:.95rem;padding:20px;background:rgba(212,20,90,.05);
  border-radius:12px;border-left:4px solid var(--primary);
}

/* Responsivo */
@media (max-width: 1024px){
  .hero-grid{gap:40px}
  .about{gap:40px}
  .cards{gap:20px}
  .section{padding:80px 0}
}

@media (max-width: 768px){
  :root{--r:8px}
  
  .topbar .wrap{padding:8px 0}
  .menu{gap:16px;font-size:.95rem}
  .menu a{font-size:.9rem}
  
  .section{padding:60px 0}
  .hero{padding:80px 0 40px}
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero h1{font-size:clamp(32px,7vw,48px)}
  .hero p{font-size:1rem}
  .hero .cta{flex-direction:column;gap:12px}
  .hero-photo{height:300px}
  .hero-photo img{height:300px}
  
  .wrap{width:min(100%,95%)}
  .cards{grid-template-columns:repeat(2,1fr);gap:16px}
  .card{transform:none}
  .card:hover{transform:translateY(-8px)}
  .cover{height:180px}
  .card-b{padding:16px}
  .card h3{font-size:1rem}
  .card p{font-size:.9rem;min-height:40px}
  .price{font-size:1rem}
  
  .sec-head h2{font-size:clamp(28px,6vw,42px)}
  .sec-head .sub{font-size:1rem}
  
  .about{grid-template-columns:1fr;gap:30px}
  .about-text h2{font-size:clamp(24px,5vw,36px)}
  .about-text p{font-size:1rem}
  .bullets li{padding:10px 0 10px 32px;font-size:.95rem}
  .bullets li::before{font-size:1.1rem}
  
  .contact{gap:12px;margin:30px 0 20px}
  .contact .btn{font-size:1rem;padding:12px 24px;width:100%}
  .hint{font-size:.9rem}
  
  .btn{padding:10px 24px;font-size:.95rem}
  .btn-solid,.btn-ghost{width:100%}
  
  .footer-grid{grid-template-columns:1fr;gap:30px;margin-bottom:20px}
  .footer{padding:40px 0 16px}
  .f-brand img{max-width:100px}
}

@media (max-width: 480px){
  :root{--r:6px}
  
  .topbar{position:relative}
  .topbar .wrap{flex-direction:column;gap:12px;padding:8px 0}
  .brand img{height:70px}
  .menu{flex-direction:column;width:100%;gap:8px}
  .menu a{width:100%;text-align:center;font-size:.85rem;padding:8px}
  
  .section{padding:50px 0}
  .hero{padding:60px 0 30px}
  .hero-grid{gap:20px}
  .hero h1{font-size:clamp(28px,8vw,40px);margin-bottom:12px}
  .hero p{font-size:.95rem;margin-bottom:20px}
  .hero .cta{gap:10px}
  .hero-photo{height:250px;border-radius:12px}
  .hero-photo img{height:250px}
  
  .wrap{width:98%}
  .cards{grid-template-columns:1fr;gap:12px}
  .card{border-radius:8px}
  .cover{height:160px}
  .card-b{padding:12px}
  .card h3{font-size:.95rem;margin-bottom:6px}
  .card p{font-size:.85rem;min-height:35px}
  .price{font-size:.9rem;padding:6px 10px}
  
  .sec-head{margin-bottom:40px}
  .sec-head h2{font-size:clamp(24px,7vw,36px)}
  .sec-head .sub{font-size:.95rem}
  
  .about{gap:20px}
  .about-text h2{font-size:clamp(20px,6vw,28px);margin-bottom:12px}
  .about-text p{font-size:.9rem;margin-bottom:16px}
  .bullets{margin:12px 0}
  .bullets li{padding:8px 0 8px 28px;font-size:.9rem}
  .bullets li::before{font-size:1rem}
  
  .contact{gap:10px;margin:20px 0 16px;flex-direction:column}
  .contact .btn{width:100%;font-size:.9rem;padding:10px 20px}
  .hint{font-size:.85rem}
  
  .note{margin-top:30px;padding:16px;font-size:.9rem}
  
  .footer{padding:30px 0 12px}
  .footer-grid{gap:20px;margin-bottom:16px}
  .f-brand img{max-width:90px;margin-bottom:12px}
  .f-brand p{font-size:.9rem}
  .footer-grid p{font-size:.85rem}
  
  .wave{height:60px}
  .hero::before{width:400px;height:400px;top:-30%}
  .hero::after{width:350px;height:350px;bottom:-20%}
}

@media (max-width: 360px){
  .hero h1{font-size:clamp(22px,9vw,32px)}
  .cards{gap:10px}
  .card-b{padding:10px}
  .contact .btn{padding:8px 16px;font-size:.85rem}
}