/* MaluzYoga — styles.css */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;600;700&display=swap');
:root{
  --bg:#fffefb;
  --ink:#232323;
  --muted:#000;
  --brand:#4f81ac;
  --brand-2:#f7b75b;
  --card:#ffffff;
  --line:#ece9e2;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family: Montserrat;
  line-height:1.6;
}
/*h1,h2,h3,h4{ font-family: "Cormorant Garamond"; line-height:1.2; margin:0 0 .4em}*/
h1,h2,h3,h4{ font-family: "Montserrat"; font-weight: 500; text-transform: none;}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand); text-decoration:none}
.container{ width:min(1100px, 92vw); margin:0 auto }

/* Header */
.header{ position:sticky; top:0; z-index:50; backdrop-filter: blur(8px);
  background:rgba(255,255,255,.86); border-bottom:0px solid var(--line) }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0 }
.brand{ display:flex; align-items:center; gap:10px; font-weight:600 }
.brandmark{ filter: drop-shadow(0 2px 4px rgba(0,0,0,.15)); }
.menu{ display:flex; gap:22px; align-items:center }
.menu a{ font-size:14px; font-weight: 600; text-transform: uppercase;}
.btn{ display:inline-block; padding:10px 16px; border-radius:20px; border:1px solid var(--brand); color:#fff; background:var(--brand); font-weight:600; font-size: 14px; }
.btn.outline{ background:transparent; color:var(--brand) }
.hamb{ display:none; background:transparent; border:1px solid var(--line); padding:6px 10px; border-radius:10px; font-size:18px }

/* Hero */
.hero{ position:relative; padding: clamp(20px, 20vh, 20px) 0 60px; }
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(1200px 600px at 80% -20%, #4f81ac 0, transparent 60%),
    radial-gradient(900px 500px at -10% 50%, #f7b75b 0, transparent 55%),
    linear-gradient(180deg, #ffffff, #fffaf4 60%);
}
.hero-grid{ display:grid; grid-template-columns: .5fr .7fr; gap:10px; align-items:center;}
.overline{ letter-spacing:.16em; text-transform:uppercase; color: #f7b75b; font-size:16px; font-weight:900 }
.display{ font-size: clamp(55px, 6vw, 55px); line-height: 60px; margin: 8px 0 12px;}
.lead{ color: var(--muted); font-size: clamp(14px, 2.2vw, 14px) }
.hero-cta{ display:flex; gap:14px; align-items:center; margin-top:22px; flex-wrap:wrap }
/*.hero-card{ background:var(--card); border:1px solid var(--line); border-radius:20px; padding:18px; box-shadow: 0 10px 30px rgba(0,0,0,.05); margin-top:18px }*/
.hero-card{background-color:#f7b75b; border:1px solid var(--line); border-radius:20px; padding-left: 30px; padding-right: 30px; padding-top: 20px; padding-bottom: 20px; box-shadow: 0 10px 30px rgba(0,0,0,.05);}
/*.hero-card{background-image: url(../img/fdo-card.png); border:1px solid var(--line); border-radius:20px; padding:18px; box-shadow: 0 10px 30px rgba(0,0,0,.05); margin-top:18px }*/
.hero-img{ border-radius:20px; overflow:hidden; box-shadow: 0 18px 40px rgba(0,0,0,.08) }

/* Sections */
section{ padding:72px 0 }
.section-title{ font-size: clamp(28px, 4.5vw, 40px) }
.section-sub{ color: var(--muted); margin-bottom: 28px }
.grid-2{ display:grid; grid-template-columns: 8fr 4fr; gap:32px }
.grid-2x{ display:grid; grid-template-columns: 6fr 6fr; gap:10px }
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:22px }
.card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow: 0 10px 24px rgba(0,0,0,.04) }
.pill{ display:inline-block; padding:6px 10px; border-radius:999px; background:#f7b75b; color:#000; font-size:.9rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em }

/* Testimonials */
.testimonial{ display:flex; gap:14px; align-items:flex-start }
.avatar{ width:25px; height:25px; border-radius:50%; object-fit:cover }
.quote{font-size: 14px; line-height: 17px; font-style: italic }

/* Gallery */
.gallery{ display:grid; grid-template-columns: repeat(12, 1fr); gap:10px }
.g1{ grid-column: span 6 }
.g2{ grid-column: span 6 }
.g3{ grid-column: span 4 }
.g4{ grid-column: span 4 }
.g5{ grid-column: span 4 }
.g6{ grid-column: span 4 }
.g7{ grid-column: span 4 }
.g8{ grid-column: span 4 }
.gallery img{ border-radius:12px }

/* FAQ */
details{ border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:#fff; color: #000000;}
details+details{ margin-top:10px }
summary{ cursor:pointer; font-weight:900; color: #f7b75b; }

/* Footer */
footer{ border-top:1px solid var(--line); padding:28px 0; color:var(--muted);}
.footer-wrap{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; text-align: center;}

/* Reveal on scroll */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease }
.reveal.in{ opacity:1; transform: translateY(0) }

/* Inputs */
.input, .textarea{ width:100%; padding:10px; border:1px solid var(--line); border-radius:10px; font: inherit }

/* Responsive */
@media (max-width: 920px){
  .hero-grid, .grid-2{ grid-template-columns: 1fr }
  .grid-3{ grid-template-columns: 1fr 1fr }
  .menu{ display:none; position:absolute; right:4vw; top:64px; background:#ffffff; border:1px solid var(--line); border-radius:12px; padding:10px; box-shadow:0 10px 30px rgba(0,0,0,.08) }
  .menu.open{ display:flex; flex-direction:column }
  .hamb{ display:inline-block }
}
@media (max-width: 560px){
  .grid-3{ grid-template-columns: 1fr }
  .gallery{ grid-template-columns: repeat(6, 1fr) }
  .g1{ grid-column: span 6 }
  .g2{ grid-column: span 6 }
  .g3{ grid-column: span 3 }
  .g4{ grid-column: span 3 }
  .g5{ grid-column: span 6 }
}



/* === Micro animações suaves === */
.card { transition: transform .28s ease, box-shadow .28s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.08); }
.btn { transition: transform .18s ease, box-shadow .18s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.10); }

@media (prefers-reduced-motion: reduce) {
  .card, .btn, .t-track { transition: none !important; }
}

/* Testimonials Carousel (fix seta + camadas) */
.t-carousel { position: relative; overflow: hidden; }
.t-track    { display: flex; gap: 10px; will-change: transform; transition: transform .5s ease; }
.t-slide    { min-width: 100%; }
@media (min-width: 1000px){ .t-slide { min-width: 50%; } } /* 2 por vez no desktop */

.t-arrow {
  position: absolute; top: 90%; transform: translateY(-90%);
  border: 1px solid var(--line); background:#fff; width:44px; height:44px; border-radius:999px;
  display:grid; place-items:center; cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,.08);
  z-index: 5; /* <- garante ficar acima dos cards */
}
.t-prev { left: 8px; }
.t-next { right: 8px; }
.t-arrow svg { width:12px; height:12px; }

/* opcional: se quiser as setas “fora” do conteúdo, descomente: */
/* .t-carousel { padding: 0 28px; } */

/* Hero: flutuar suave só na imagem */
@keyframes heroFloat {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(0, -20px, 0); } /* amplitude do “flutuar” */
  100% { transform: translate3d(0, 0, 0); }
}

.hero .float-img {
  animation: heroFloat 12s ease-in-out infinite; /* velocidade suave e constante */
  will-change: transform;
  backface-visibility: hidden;  /* evita jitter em alguns browsers */
  transform: translateZ(0);     /* empurra pra GPU, mais liso */
}

/* respeita usuários com redução de movimento */
@media (prefers-reduced-motion: reduce) {
  .hero .float-img { animation: none !important; }
}

/* Remover o cartão da área da imagem da hero */
.hero-img{
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
}

/* Sombra suave no recorte real da PNG (não retangular) */
.hero-img img{
  display: block;
  border-radius: 0;
  filter: drop-shadow(0 24px 44px rgba(0,0,0,.16));
}

/* Flutuar suave e constante só na imagem (mantém do passo anterior) */
@keyframes heroFloat {
  0% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-8px,0); }
  100% { transform: translate3d(0,0,0); }
}
.hero .float-img{
  animation: heroFloat 12s ease-in-out infinite;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}
@media (prefers-reduced-motion: reduce){
  .hero .float-img{ animation: none !important; }
}