/* ===========================
   home.css (COMPLETE)
   - Hero sem textos (apenas imagens)
   - Formulário preservado à direita (desktop) / empilha no mobile
   - Mantém dark/light tokens e resto do layout
   =========================== */

/* ROOT tokens */
:root{
  --max-width:1200px;
  --card-radius:14px;

  --page-bg-light:#F8F8FF;
  --surface-light:#ffffff;
  --text-light:#071227;
  --muted-light:rgba(7,18,39,0.64);
  --border-light:rgba(7,18,39,0.06);

  --accent:#1656d6;
  --accent-2:#0f3ea6;

  --page-dark-a:#020617;
  --page-dark-b:#0A1A3A;

  --marquee-duration:22s;
  --hero-interval:10s;
  --shadow-soft:0 10px 30px rgba(6,12,40,0.08);

  --form-blur: 10px;
  --form-bg-light: rgba(255,255,255,0.72);
  --form-bg-dark: rgba(0,0,0,0.48);
  --form-border-light: rgba(15,23,42,0.06);
  --form-border-dark: rgba(255, 255, 255, 0.521);

  --card-text: var(--text-light);
  --muted: var(--muted-light);
  --surface: var(--surface-light);
  --card-shadow: var(--shadow-soft);
  --border: var(--border-light);
  --header-bg: rgba(255,255,255,0.95);
}

/* Light */
:root:not(.dark){
  --page-bg:var(--page-bg-light);
  --surface:var(--surface-light);
  --text:var(--text-light);
  --muted:var(--muted-light);
  --border:var(--border-light);
  --card-shadow:var(--shadow-soft);
  --header-bg:#1D4ED8;

  --form-bg: var(--form-bg-light);
  --form-border: var(--form-border-light);
  --form-title-color: var(--accent);
  --placeholder-color: #4b4b4b;
  --focus-overlay: rgba(21,101,236,0.12);
  --btn-hover: rgba(13,71,161,0.12);

  --card-text: var(--text-light);
  --muted: rgba(7,18,39,0.64);
}

/* Dark */
:root.dark{
  --page-bg: linear-gradient(180deg,var(--page-dark-a),var(--page-dark-b));
  --surface: rgba(255,255,255,0.03);
  --text: #e6eef7;
  --muted: rgba(230,235,255,0.78);
  --border: rgba(255,255,255,0.04);
  --card-shadow: 0 6px 18px rgba(2,8,23,0.08);
  --header-bg: var(--page-dark-a);

  --form-bg: rgba(0,0,0,0.48);
  --form-border: rgba(255,255,255,0.06);
  --form-title-color: #ffffff;
  --placeholder-color: rgba(255,255,255,0.72);
  --focus-overlay: rgba(255,255,255,0.06);
  --btn-hover: rgba(0,0,0,0.06);

  --card-text: #e6eef7;
  --muted: rgba(230,235,255,0.72);
}

/* global */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial;
  background:var(--page-bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

/* container */
.container{ max-width:var(--max-width); margin:0 auto; padding:0 20px; }

/* header */
.site-header{ position:fixed; left:0; right:0; top:0; z-index:120; transition:opacity .28s ease, transform .28s ease, background .28s ease, box-shadow .28s ease; padding:10px 0; background:transparent; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; max-width:var(--max-width); margin:0 auto; padding:0 20px; }
.logo{ font-weight:800; color:var(--accent-2); text-decoration:none; font-size:1.05rem; }

/* hide while hero visible */
.site-header.hide-header{ opacity:0; transform:translateY(-8px); pointer-events:none; }

/* sticky */
.site-header.sticky{ background:var(--header-bg); box-shadow:0 8px 30px rgba(3,6,20,0.08); backdrop-filter: blur(6px); }

/* header controls */
.header-actions{ display:flex; gap:8px; align-items:center; }
.btn{ border-radius:999px; padding:9px 14px; display:inline-flex; gap:8px; align-items:center; font-weight:700; text-decoration:none; cursor:pointer; }
.btn-primary{ background: #F8F8FF; color:var(--header-bg); border:0; box-shadow:var(--card-shadow); }

/* theme toggle */
.theme-toggle{ background:transparent; border:1px solid var(--border); padding:8px; border-radius:10px; color:inherit; display:inline-flex; gap:8px; align-items:center; }

/* ===========================
   HERO (IMAGES ONLY + FORM)
   - hero-left hidden (no texts)
   - hero-right keeps the form (desktop right / mobile stacked)
   =========================== */

.hero{
  position:relative;
  height: 100vh;
  min-height:520px;
  display:flex;
  align-items:center;
  /* background fallback while image loads */
  background:#000;
}

/* background layers (crossfade) */
.hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity .9s ease, transform 12s ease;
  z-index:0;
  will-change:opacity,transform;
}
.hero-bg.visible{
  opacity:1;
}

/* overlay if you want a subtle gradient (keeps readability if form overlays) */
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background: linear-gradient(120deg, rgba(0,0,0,0.18), rgba(0,0,0,0.02));
}

/* hero-inner: container holding layout (we keep structure but hide left text) */
.hero-inner{
  position:relative;
  z-index:2;
  display:flex;
  gap:28px;
  align-items:center;
  width:100%;
  padding:36px 20px;
  max-width:var(--max-width);
  margin: 0 10vw 0 auto;

}

/* HIDE textual column (user requested no texts in hero) */
.hero-left{
  display:none !important;
}

/* form column: preserved and visible */
.hero-right{
  z-index:6;
  width:420px;
  max-width:95%;
  margin-left: auto; /* push to right */
}

/* quick form card */
.card.quick-form{
  background: var(--form-bg);
  backdrop-filter: blur(var(--form-blur));
  -webkit-backdrop-filter: blur(var(--form-blur));
  color: var(--card-text);
  border-radius:14px;
  padding:18px;
  border:1px solid var(--form-border);
  box-shadow:var(--card-shadow);

}
.card.quick-form .form-title{ margin:0 0 8px; font-weight:800; color: var(--form-title-color); }

/* inputs */
.card.quick-form input{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid rgba(0,0,0,0.06);
  margin:8px 0; background:transparent; color:var(--card-text); outline:none; font-size:0.95rem;
  transition: box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.card.quick-form input::placeholder{ color: var(--placeholder-color); opacity:1; }
.card.quick-form input:focus{
  box-shadow: 0 8px 34px var(--focus-overlay);
  border-color: var(--accent-2);
}

/* button */
.btn.full{ width:100%; text-align:center; display:inline-flex; justify-content:center; align-items:center; padding:12px 14px; font-weight:800; }
.btn.full:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(13,71,161,0.12); transition:all .18s ease; }

/* Hero controls (prev/next) and dots */
.hero-controls{
  position:absolute;
  bottom:18px;
  right:18px;
  display:flex;
  gap:8px;
  z-index:7;
}
.hero-btn{
  background:rgba(0,0,0,0.45);
  border:0;
  padding:10px;
  border-radius:10px;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.hero-dots{
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:7;
}
.hero-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,0.45);
  border:0;
  cursor:pointer;
}
.hero-dot.active{ background:#fff;}

/* ===========================
   BENEFITS / MARQUEE
   (kept as in original)
   =========================== */

.benefits-section{ padding:48px 0 60px 0; background:transparent; }
.benefits-section .section-title{ text-align:center; margin:0 auto 36px auto; font-size:2.0rem; max-width:920px; }

.benefits-marquee{ width:100%; overflow:hidden; padding:10px 0; position:relative; }
.benefits-track-wrapper{ overflow:hidden; padding:80px; margin-top: -80px; }
.benefits-track{
  display:flex; gap:22px; align-items:center; padding-left:2vw; will-change:transform;
  animation:marquee-linear var(--marquee-duration) linear infinite;
}
@keyframes marquee-linear{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }

.benefit-card.square{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--card-shadow);
  min-width:340px;
  min-height:340px;
  max-width:380px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:26px;
  transition:transform .18s ease, box-shadow .18s ease;
  color:var(--card-text);
}
.benefit-card.square .benefit-inner{ text-align:center; display:flex; flex-direction:column; gap:16px; align-items:center; justify-content:center; }
.benefit-card .benefit-icon svg{ color:var(--accent-2); width:64px; height:64px; }
.benefit-title{ font-weight:800; font-size:1.1rem; color:var(--card-text); }
.benefit-sub{ font-size:0.99rem; color:var(--muted); max-width:280px; }
.benefit-card.square:hover{ transform:translateY(-12px); box-shadow:0 32px 80px rgba(6,12,40,0.14); }

.benefits-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:30; width:48px; height:48px;
  border-radius:999px; background:#fff; display:none; align-items:center; justify-content:center;
  box-shadow:0 12px 36px rgba(6,12,40,0.12); border:none; cursor:pointer;
}
.benefits-arrow.left{ left:12px; }
.benefits-arrow.right{ right:12px; }

/* ===========================
   WHO / FEEDBACKS / CTA / FOOTER
   (preserve original styles)
   =========================== */

.section-who{ padding:56px 0; background:transparent; }
.who-card{ background:var(--surface); border-radius:12px; padding:18px; border:1px solid var(--border); box-shadow:var(--card-shadow); color:var(--card-text); }

.lead-section{ padding:64px 0; background:transparent; }
.feedbacks-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:18px; }
.feedback-card{ display:flex; gap:12px; align-items:flex-start; background:var(--surface); color:var(--card-text); padding:18px; border-radius:12px; border:1px solid var(--border); box-shadow:var(--card-shadow); min-height:130px; }
.feedback-img img{ width:64px; height:64px; border-radius:50%; object-fit:cover; }

.cta-section{ padding:34px 0; background:transparent; }
.cta-card{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:22px; border-radius:12px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--card-shadow); color:var(--card-text); }

/* FOOTER */
.site-footer{ background:#0b0b0b; color:#eee; padding:20px 0 12px 0; margin-top:32px; }
.site-footer .footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.site-footer .footer-brand{ font-weight:800; color:#fff; }
.site-footer .footer-contacts a{ color:#ddd; text-decoration:none; }
.site-footer .footer-dev{ font-size:11px; color:#999; margin-top:8px; }

/* WHATSAPP */
#wa-button{ position:fixed; right:22px; bottom:22px; z-index:9999; display:inline-flex; align-items:center; gap:8px; background:#25D366; color:#fff; padding:12px 16px; border-radius:999px; font-weight:700; text-decoration:none; box-shadow:0 12px 36px rgba(37,211,102,0.22); }

/* reveal */
.reveal{ opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* responsive tweaks */
@media (max-width:1024px){
  .hero-right{ width:360px; }
  .feedbacks-grid{ grid-template-columns:repeat(2,1fr); }
  .benefit-card.square{ min-width:300px; min-height:300px; max-width:320px; }
}
@media (max-width:768px){
  /* stack: hero images still visible; form moves below the hero images */
  .hero{ height:calc(100vh - 64px); min-height:420px; }
  .hero-inner{ flex-direction:column; align-items:center; text-align:center; padding:20px; }
  .hero-right{ width:92%; margin-top:14px; order:2; }
  .hero-bg{ background-position:center top; }
  .benefit-card.square{ min-width:75%; max-width:86%; min-height:auto; height:200px; padding:18px; }
  .feedbacks-grid{ grid-template-columns:1fr; }
  .benefits-track{ animation:none; justify-content:center; }
  .benefits-arrow{ display:flex; }
  .cta-btn { width: 300px; justify-content: center; }
  .hero-controls { display:none; } /* desktop prev/next hidden on small screens */
  .hero-dots { bottom: 12px; }
}

/* small polish */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; white-space:nowrap; }

/* ensure form contrasts in dark and light */
.card.quick-form { color: var(--card-text); border-color: var(--form-border); background: var(--form-bg); }


.header-cta:hover {
  transform: translateY(-5px);
  transition-duration: 0.5s ;
  box-shadow: var(--shadow-soft);
}

/* === Instagram feed styles (inserir no fim de home.css) === */
#instagram-feed, .feedbacks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Responsive fallback */
@media (max-width:1024px) { #instagram-feed, .feedbacks-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px)  { #instagram-feed, .feedbacks-grid { grid-template-columns: 1fr; } }

/* Post card */
.instagram-post { display:flex; flex-direction:column; gap:8px; padding:0; border-radius:12px; overflow:hidden; background:var(--surface); border:1px solid var(--border); box-shadow:var(--card-shadow); }
.insta-img-wrap { width:100%; flex:0 0 auto; }
.insta-img { width:100%; height:180px; object-fit:cover; display:block; }

/* caption */
.instagram-caption { padding:10px; color:var(--muted); font-size:0.95rem; line-height:1.2; min-height:44px; }

/* skeleton */
.insta-skeleton { background:linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01)); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--card-shadow); border:1px solid var(--border); }
.insta-skeleton .s-img { width:100%; height:140px; background:linear-gradient(90deg,#eee,#f4f6f9,#eee); border-radius:8px; }
.insta-skeleton .s-txt { height:14px; width:80%; background:linear-gradient(90deg,#eee,#f4f6f9,#eee); border-radius:6px; }

/* small polish: hover */
.instagram-post:hover { transform: translateY(-6px); transition: transform .18s ease; box-shadow: 0 22px 56px rgba(6,12,40,0.08); }