/* ===================================================================
   Guardião Box Palhoça — estilos
   Paleta: laranja + azul, alinhada à nova marca Guardião Box
   =================================================================== */

:root{
  --orange:        #F97316;
  --orange-dark:   #D46213;
  --orange-soft:   #FEF0E6;
  --orange-tint:   #FFF8F2;
  --blue:          #1D4ED8;
  --blue-dark:     #0B2A4A;
  --ink:           #1D2433;
  --ink-soft:      #4A5468;
  --line:          #E7E3DD;
  --bg:            #FFFFFF;
  --bg-alt:        #FBF9F6;
  --white:         #FFFFFF;
  --radius:        16px;
  --radius-sm:     10px;
  --shadow:        0 10px 30px rgba(20,30,50,.08);
  --shadow-lg:     0 24px 60px rgba(20,30,50,.14);
  --wrap:          1160px;
  --font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --display:       'Poppins', var(--font);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
section[id]{ scroll-margin-top:88px; }
img{ max-width:100%; display:block; height:auto; }
.wa-ico{ flex-shrink:0; vertical-align:middle; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--display); line-height:1.2; margin:0 0 .5em; color:var(--ink); }
h1{ font-size:clamp(2rem, 4.6vw, 3.25rem); font-weight:800; }
h2{ font-size:clamp(1.6rem, 3.2vw, 2.4rem); font-weight:700; }
h3{ font-size:1.18rem; font-weight:600; }
p{ margin:0 0 1rem; }
ul,ol{ margin:0; padding:0; list-style:none; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px; }
.wrap--narrow{ max-width:820px; }

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--display); font-weight:600; font-size:.98rem;
  padding:.85rem 1.5rem; border-radius:999px; border:2px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-align:center;
}
.btn:hover{ transform:translateY(-2px); }
.btn--primary{ background:var(--orange); color:#fff; box-shadow:0 8px 20px rgba(244,121,32,.35); }
.btn--primary:hover{ background:var(--orange-dark); }
.btn--ghost{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.65); backdrop-filter:blur(2px); }
.btn--ghost:hover{ background:rgba(255,255,255,.22); }
.btn--dark{ background:var(--blue); color:#fff; }
.btn--dark:hover{ background:var(--blue-dark); }
.btn--white{ background:#fff; color:var(--orange-dark); }
.btn--white:hover{ background:var(--orange-soft); }
.btn--lg{ padding:1rem 1.9rem; font-size:1.05rem; }
.btn--sm{ padding:.55rem 1.05rem; font-size:.88rem; }
.btn--block{ display:flex; width:100%; }

/* ---------- Tags ---------- */
.tag{
  display:inline-block; font-family:var(--display); font-weight:600;
  font-size:.76rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--orange-dark); background:var(--orange-soft);
  padding:.35rem .8rem; border-radius:999px; margin-bottom:1rem;
}
.tag--light{ color:#fff; background:rgba(255,255,255,.18); }

/* ---------- Top bar ---------- */
.topbar{ background:var(--blue-dark); color:#dfe6f5; font-size:.86rem; }
.topbar__inner{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.5rem 20px; flex-wrap:wrap; }
.topbar__phone{ font-weight:700; color:#fff; display:inline-flex; align-items:center; gap:.35rem; }
.topbar__phone:hover{ color:var(--orange); }

/* ---------- Header ---------- */
.header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:.7rem 20px; }
.brand{ display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.brand__logo{ height:70px; width:auto; }
.nav{ display:flex; align-items:center; gap:1rem; }
.nav a{ font-family:var(--display); font-weight:500; font-size:.9rem; color:var(--ink-soft); white-space:nowrap; }
.nav a:hover{ color:var(--orange-dark); }
.nav .nav__cta{ color:#fff; }
.nav__hide-md{ display:none; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; cursor:pointer; }
.nav-toggle span{ width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.2s; }

/* ---------- Hero ---------- */
.hero{ position:relative; color:#fff; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.hero__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(11,42,74,.92) 0%, rgba(29,78,216,.82) 42%, rgba(212,98,19,.72) 100%); }
.hero__mark{ position:absolute; right:-40px; bottom:-40px; width:280px; height:280px; opacity:.16; pointer-events:none; }
.hero__inner{ position:relative; padding:clamp(3.5rem, 8vw, 6.5rem) 20px; }
.hero__content{ max-width:660px; }
.hero h1{ color:#fff; }
.hero h1 .hl{ color:#FFD9B8; }
.hero__lead{ font-size:1.12rem; color:#eef2fb; margin-bottom:1.8rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:1.6rem; }
.hero__badges{ display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; font-weight:600; font-size:.95rem; color:#fff; }
.hero__badges li{ white-space:nowrap; }

/* ---------- Destaques ---------- */
.highlights{ background:var(--blue); }
.highlights__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.12); }
.highlight{ background:var(--blue); color:#eaf0fb; padding:2rem 1.4rem; text-align:center; }
.highlight__icon{
  width:52px; height:52px; margin:0 auto .9rem; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:800; font-size:1.05rem;
  background:var(--orange); color:#fff;
}
.highlight h3{ color:#fff; margin-bottom:.35rem; }
.highlight p{ margin:0; font-size:.92rem; color:#c9d5ee; }

/* ---------- Seções ---------- */
.section{ padding:clamp(3rem, 7vw, 5.5rem) 0; }
.section--tint{ background:var(--orange-tint); }
.section--dark{ background:var(--blue-dark); color:#e9eefb; }
.section--dark h2{ color:#fff; }
.section__head{ max-width:720px; margin:0 auto 2.6rem; text-align:center; }
.section__head p{ color:var(--ink-soft); font-size:1.05rem; margin:0; }
.section--dark .section__head p{ color:#c9d5ee; }
.section__cta{ text-align:center; margin-top:2.6rem; }

/* ---------- About ---------- */
.about__inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.about__media{ position:relative; }
.about__media img:first-child{ border-radius:var(--radius); box-shadow:var(--shadow-lg); }
.about__badge{
  position:absolute; left:-18px; bottom:-18px; width:76px; height:76px;
  filter:drop-shadow(0 10px 20px rgba(20,30,50,.25));
}
.ticklist{ margin:1.2rem 0; display:grid; gap:.6rem; }
.ticklist li{ position:relative; padding-left:1.8rem; color:var(--ink-soft); }
.ticklist li::before{ content:"✓"; position:absolute; left:0; top:0; font-weight:800; color:var(--orange); }

/* ---------- Cards ---------- */
.cards{ display:grid; gap:1.4rem; }
.cards--3{ grid-template-columns:repeat(3,1fr); }
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem; box-shadow:var(--shadow);
}
.card h3{ margin-bottom:.4rem; }
.card p{ margin:0; color:var(--ink-soft); font-size:.96rem; }
.card--pad{ padding:1.6rem; }

/* ---------- Tamanhos ---------- */
.sizes .size{ display:flex; flex-direction:column; position:relative; }
.size__code{
  font-family:var(--display); font-weight:700; font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--orange-dark); margin-bottom:.4rem;
}
.size__head{ display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; }
.size__head h3{ margin:0; font-size:1.35rem; }
.size__vol{ font-family:var(--display); font-weight:700; color:var(--ink-soft); font-size:.9rem; white-space:nowrap; }
.size__dims{
  font-size:.84rem; color:var(--ink-soft); margin:.4rem 0 .9rem; font-weight:500;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:.5rem 0;
}
.size__dims span{ font-weight:700; color:var(--ink); }
.size__fits{ flex:1; margin-bottom:1.2rem !important; font-size:.93rem; }
.size--featured{ border-color:var(--orange); box-shadow:0 18px 44px rgba(244,121,32,.22); padding-top:2.4rem; }
.size__flag{
  position:absolute; top:-13px; left:1.6rem; background:var(--orange); color:#fff;
  font-family:var(--display); font-weight:600; font-size:.74rem; letter-spacing:.05em;
  text-transform:uppercase; padding:.25rem .7rem; border-radius:999px;
}
.size-help{
  margin-top:2rem; background:#fff; border:1px dashed var(--orange);
  border-radius:var(--radius); padding:1.6rem; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
}
.size-help p{ margin:0; }

/* ---------- O que guardar ---------- */
.store__inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.store__media img{ border-radius:var(--radius); box-shadow:var(--shadow-lg); }
.chips{ display:flex; flex-wrap:wrap; gap:.55rem; margin:1.1rem 0 1.4rem; }
.chips li{
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:.45rem .95rem; font-size:.9rem; font-weight:500; color:var(--ink);
}
.store__note{ font-size:.92rem; color:var(--ink-soft); background:var(--orange-soft); border-radius:var(--radius-sm); padding:1rem 1.2rem; }

/* ---------- Steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; counter-reset:s; }
.step{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow); }
.step__num{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px; margin-bottom:1rem;
  background:var(--orange-soft); color:var(--orange-dark);
  font-family:var(--display); font-weight:800; font-size:1.2rem;
}
.step h3{ margin-bottom:.3rem; }
.step p{ margin:0; color:var(--ink-soft); font-size:.95rem; }

/* ---------- Para empresas ---------- */
.biz__inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.biz__media img{ border-radius:var(--radius); box-shadow:var(--shadow-lg); }
.biz__list{ display:grid; gap:.8rem; margin:1.3rem 0 1.8rem; }
.biz__list li{ position:relative; padding-left:1.7rem; color:#d7e0f4; }
.biz__list li::before{ content:"▸"; position:absolute; left:0; color:var(--orange); font-weight:800; }
.biz__list strong{ color:#fff; }

/* ---------- Segurança ---------- */
.feat{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.feat__media img{ border-radius:var(--radius); box-shadow:var(--shadow-lg); }
.feat__list{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.feat__list li{ font-size:.95rem; color:var(--ink-soft); }
.feat__list span{ display:block; font-family:var(--display); font-weight:600; color:var(--ink); margin-bottom:.15rem; }

/* ---------- Localização ---------- */
.loc__inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.loc__addr{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:1.1rem 1.3rem; font-size:.96rem; margin:1.2rem 0 1.4rem; }
.loc__addr-line{ margin:0 0 .7rem; }
.loc__wa{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--display); font-weight:700; color:#128C3E;
  background:#E7F8EE; border-radius:999px; padding:.5rem .9rem;
}
.loc__wa:hover{ background:#d7f2e2; }
.loc__mapbox{
  background:var(--blue); color:#eef2fb; border-radius:var(--radius);
  padding:2.4rem 1.8rem; box-shadow:var(--shadow-lg); text-align:center;
}
.loc__mapbox strong{ font-family:var(--display); font-size:1.1rem; display:block; margin-bottom:.6rem; color:#fff; }
.loc__mapbox p{ margin:0; color:#c9d5ee; }

/* ---------- FAQ ---------- */
.faq{ display:grid; gap:.8rem; }
.faq details{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:0 1.3rem; box-shadow:var(--shadow);
}
.faq summary{
  cursor:pointer; list-style:none; padding:1.1rem 2rem 1.1rem 0; position:relative;
  font-family:var(--display); font-weight:600; color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%);
  font-size:1.4rem; color:var(--orange); font-weight:400; line-height:1;
}
.faq details[open] summary::after{ content:"–"; }
.faq details p{ margin:0 0 1.2rem; color:var(--ink-soft); font-size:.97rem; }

/* ---------- CTA band ---------- */
.ctaband{ background:linear-gradient(100deg, var(--orange) 0%, var(--orange-dark) 100%); color:#fff; }
.ctaband__inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:2.8rem 20px; flex-wrap:wrap; }
.ctaband__lead{ display:flex; align-items:center; gap:1.1rem; }
.ctaband__icon{ flex-shrink:0; filter:drop-shadow(0 6px 14px rgba(0,0,0,.2)); }
.ctaband h2{ color:#fff; margin-bottom:.2rem; }
.ctaband p{ margin:0; color:#ffe9d8; }

/* ---------- Depoimentos ---------- */
.review{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow); margin:0; }
.review__stars{ color:var(--orange); letter-spacing:.15em; margin-bottom:.7rem; }
.review blockquote{ margin:0 0 1rem; font-size:.98rem; color:var(--ink); }
.review figcaption{ font-family:var(--display); font-weight:600; font-size:.9rem; color:var(--ink-soft); }

/* ---------- Footer ---------- */
.footer{ background:var(--blue-dark); color:#c4d0ea; font-size:.94rem; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; padding:3.2rem 20px; }
.footer__brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--display); font-weight:800; font-size:1.2rem; color:#fff; letter-spacing:.04em; margin-bottom:.6rem; }
.footer__brand-icon{ flex-shrink:0; }
.footer__brand span{ color:var(--orange); }
.footer__col h4{ color:#fff; font-size:1rem; margin-bottom:.8rem; }
.footer__col ul{ display:grid; gap:.5rem; }
.footer__col a{ display:inline-flex; align-items:center; gap:.4rem; }
.footer__col a:hover{ color:var(--orange); }
.footer__bar{ border-top:1px solid rgba(255,255,255,.12); }
.footer__barinner{ display:flex; justify-content:space-between; gap:1rem; padding:1.1rem 20px; font-size:.82rem; color:#8fa1c6; flex-wrap:wrap; }

/* ---------- Botão WhatsApp flutuante ---------- */
.wa-float{
  position:fixed; right:20px; bottom:22px; z-index:60;
  display:flex; align-items:center; gap:.6rem;
  background:#25D366; color:#fff; font-family:var(--display); font-weight:600;
  padding:.85rem 1.15rem; border-radius:999px;
  box-shadow:0 12px 30px rgba(37,211,102,.45);
  transition:transform .15s ease, box-shadow .15s ease;
}
.wa-float:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 16px 38px rgba(37,211,102,.55); }
.wa-float svg{ flex-shrink:0; }
.wa-float::before{
  content:""; position:absolute; inset:0; border-radius:999px;
  box-shadow:0 0 0 0 rgba(37,211,102,.5); animation:wa-pulse 2.4s infinite;
}
@keyframes wa-pulse{
  0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5); }
  70%{ box-shadow:0 0 0 18px rgba(37,211,102,0); }
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}

/* ===================================================================
   Responsivo
   =================================================================== */
/* Menu vira "hambúrguer" em telas médias para não colidir com a marca */
@media (max-width:1024px){
  .nav-toggle{ display:flex; }
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--line);
    padding:.5rem 20px 1rem; box-shadow:var(--shadow);
    display:none;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:.8rem 0; border-bottom:1px solid var(--line); font-size:1rem; }
  .nav .nav__cta{ margin-top:.8rem; border-bottom:0; }
  .nav__hide-md{ display:block; }
}

@media (max-width:980px){
  .highlights__grid{ grid-template-columns:repeat(2,1fr); }
  .cards--3{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .about__inner,.store__inner,.biz__inner,.feat,.loc__inner{ grid-template-columns:1fr; }
  .store__inner .store__media{ order:-1; }
  .feat__list{ grid-template-columns:1fr 1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:760px){
  .topbar{ font-size:.8rem; }
  .topbar__inner{ justify-content:center; text-align:center; gap:.3rem; }
  .cards--3{ grid-template-columns:1fr; }
  .sizes.cards--3{ grid-template-columns:repeat(2,1fr); gap:1rem; }
  .size{ padding:1.25rem; }
  .steps{ grid-template-columns:1fr; }
  .feat__list{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; gap:1.6rem; padding:2.4rem 20px; }
  .ctaband__inner{ flex-direction:column; text-align:center; }
  .ctaband .btn{ width:100%; }
  .wa-float__txt{ display:none; }
  .wa-float{ right:16px; bottom:16px; padding:1rem; }
  .section__cta .btn,.size-help .btn{ width:100%; }
  .hero__actions .btn{ width:100%; }
}

@media (max-width:560px){
  .sizes.cards--3{ grid-template-columns:1fr; }
}

@media (max-width:420px){
  .highlights__grid{ grid-template-columns:1fr; }
  .hero__badges{ gap:.4rem 1rem; font-size:.88rem; }
  h1{ font-size:1.85rem; }
  .brand__logo{ height:54px; }
}

/* Acessibilidade: respeitar preferência de menos movimento */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto; }
}