/* style.css - V.Delivery Onepage
   Paleta: Vermelho + Laranja + Branco + Cinza (15%)
*/

/* ================= VARIÁVEIS ================= */
:root{
  --red:#E30613;
  --orange:#FF7A18;

  --dark:#1F2937;
  --text:#374151;
  --muted:#6B7280;

  --bg:#F5F6F8;
  --paper:#FFFFFF;

  --border:rgba(31,41,55,.10);
  --shadow:0 12px 32px rgba(0,0,0,.08);

  --radius:18px;
  --radius-sm:14px;
  --max:1120px;
  --topbar-h:72px;
}

/* ================= RESET ================= */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.container{
  width:min(var(--max), calc(100% - 32px));
  margin:0 auto;
}

.muted{ color:var(--muted); }
.no-scroll{ overflow:hidden; }

/* ================= BOTÕES ================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid transparent;
  font-weight:800;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:active{ transform:translateY(1px); }

.btn--primary{
  background:linear-gradient(135deg, var(--red), var(--orange));
  color:#fff;
  box-shadow:0 12px 28px rgba(227,6,19,.18);
}
.btn--primary:hover{ filter:brightness(1.03); }

.btn--ghost{
  background:#fff;
  border-color:var(--border);
}

/* ================= WHATSAPP ================= */
.wa-float{
  position:fixed;
  right:16px;
  bottom:16px;
  width:58px;
  height:58px;
  border-radius:50%;
  background:#25D366;
  box-shadow:0 12px 38px rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
}
.wa-float img{
  width:32px;
  height:32px;
  filter:brightness(0) invert(1);
}

/* ================= TOPO ================= */
.topbar{
  position:sticky;
  top:0;
  z-index:100;
  background:#1F2937;
  box-shadow:0 10px 30px rgba(0,0,0,.14);
}
.topbar__inner{
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand__logo{ height:44px; }

/* ===== MENU DESKTOP ===== */
.nav{
  display:flex;
  align-items:center;
  gap:18px;
}
.nav__link{
  font-weight:800;
  color:#E5E7EB;
  opacity:.92;
  padding:10px 10px;
  border-radius:12px;
}
.nav__link:hover{
  opacity:1;
  background:rgba(255,255,255,.10);
}
.nav__cta{
  background:linear-gradient(135deg, var(--red), var(--orange));
  color:#fff !important;
  padding:10px 14px;
  border-radius:14px;
}

/* ===== MENU MOBILE ===== */
.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  padding:10px;
}
.nav-toggle span{
  display:block;
  height:2px;
  background:#111;
  margin:6px 0;
}
.nav-mobile{
  display:none;
  background:#1F2937;
}
.nav-mobile.is-open{ display:block; }
.nav-mobile__link{
  display:block;
  padding:14px 16px;
  font-weight:800;
  color:#E5E7EB;
}

/* ================= HERO / SLIDER ================= */
.hero{ padding:28px 0; }

.slider{
  background:#fff;
  border-radius:22px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.slider__track{
  position:relative;
  height:clamp(220px, 34vw, 420px);
}
.slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .4s ease;
}
.slide.is-active{ opacity:1; }
.slide img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* CONTROLES + DOTS (bolinhas) */
.slider__controls{
  background:#111827;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.slider__btn{
  width:42px;
  height:42px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(255,255,255,.10);
  cursor:pointer;
  font-size:22px;
  font-weight:900;
  line-height:0;
}
.slider__dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background:#fff;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.dot.is-active{
  background:var(--orange);
  border-color:transparent;
  transform:scale(1.15);
}

/* ================= DESTAQUES (3 cards) ================= */
.features{
  margin-top:20px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.feature-card{
  background:#fff;
  border-radius:18px;
  padding:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
}
.feature-card__icon{
  width:44px;
  height:44px;
  border-radius:14px;
  background:var(--orange);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
}
.feature-card h3{ margin:0 0 6px; color:var(--dark); }
.feature-card p{ margin:0; color:var(--muted); }

/* ================= SEÇÕES ================= */
.section{ padding:54px 0; }

.section__head{ margin-bottom:18px; }
.section__head h2{
  color:var(--orange);
  margin:0 0 6px;
}
.section__head p{ margin:0; color:var(--muted); }

/* ================= FERRAMENTAS (3x2) ================= */
.grid{
  display:grid;
  gap:14px;
}
.grid--3{
  grid-template-columns: repeat(3, 1fr);
}
.tool-card{
  background:#fff;
  border-radius:18px;
  padding:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
}
.tool-card__icon{
  width:44px;
  height:44px;
  border-radius:14px;
  background:var(--orange);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
}
.tool-card h3{ margin:0 0 6px; color:var(--dark); }
.tool-card p{ margin:0; color:var(--muted); }

.prints{
  margin-top:14px;
  padding:14px 16px;
  background:rgba(255,255,255,.70);
  border:1px dashed rgba(31,41,55,.22);
  border-radius:18px;
}

/* ================= PLANOS ================= */
.section--alt{ background:#EDEDED; }

.plans{ display:flex; justify-content:center; }

.plan{
  background:#fff;
  border-radius:22px;
  padding:20px;
  max-width:760px;
  width:100%;
  box-shadow:0 16px 55px rgba(0,0,0,.10);
  position:relative;
}
.plan__badge{
  position:absolute;
  top:14px;
  right:14px;
  background:linear-gradient(135deg,var(--red),var(--orange));
  color:#fff;
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
}
.plan__price{ display:flex; align-items:flex-end; gap:6px; }
.plan__currency{ font-weight:900; color:var(--dark); }
.plan__value{
  font-size:2.6rem;
  font-weight:900;
  background:linear-gradient(135deg,var(--red),var(--orange));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.plan__period{ color:var(--muted); font-weight:900; padding-bottom:6px; }
.plan__note{
  margin:10px 0 12px;
  background:rgba(255,122,24,.10);
  border:1px solid rgba(255,122,24,.22);
  padding:10px 12px;
  border-radius:16px;
}
.plan__list{ margin:0 0 14px; padding-left:18px; color:var(--muted); }
.plan__actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ================= CONTATO ================= */
.contact{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:14px;
  align-items:start;
}

.form{
  background:#fff;
  padding:16px;
  border-radius:18px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
}

.form__row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:12px;
}

label{ font-weight:900; color:var(--dark); }

input,textarea{
  width:100%;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(31,41,55,.18);
  outline:none;
}
textarea{ resize:vertical; min-height:120px; }

.form__hint{ margin:10px 0 0; color:var(--muted); }

.contact-card{
  background:#fff;
  padding:16px;
  border-radius:18px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
}
.social{ margin-top:14px; }
.social__link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(31,41,55,.12);
  background:rgba(255,255,255,.75);
}
.social__link:hover{ background:#fff; border-color:rgba(227,6,19,.22); }
.social__link img{ width:26px; height:26px; }
.social__link span{ font-weight:900; color:var(--dark); }

/* ================= FOOTER ================= */
.footer{
  background:#0b1020;
  padding:22px 0;
  text-align:center;
}
.footer__inner{ display:flex; justify-content:center; }
.footer__img{ max-height:72px; }

/* ================= RESPONSIVO ================= */
@media(max-width:980px){
  .nav{ display:none; }
  .nav-toggle{ display:block; }

  .features{ grid-template-columns:1fr; }
  .grid--3{ grid-template-columns:1fr; }

  .contact{ grid-template-columns:1fr; }
  .form__row{ grid-template-columns:1fr; }
}