/* =========================================================================
   ETIQUETAS GUABIRUBA — Folha de estilos (versão final)
   Paleta e tipografia derivadas do logo (árvore + anel verde→lime).

   Sumário:
     1. Tokens            5. Hero            9. Diferenciais
     2. Base / reset      6. Sobre          10. Contato
     3. Utilitários       7. Produtos       11. Rodapé + WhatsApp
     4. Cabeçalho         8. Galeria        12. Responsivo + a11y
   ========================================================================= */

/* ============================ 1. TOKENS ============================ */
:root {
  --forest: #00231d;
  --pine:   #013b33;
  --green:  #04603d;
  --lime:   #93c215;
  --lime-2: #b6d94a;

  --cream:  #f4f7ef;
  --paper:  #ffffff;
  --ink:    #12241d;
  --muted:  #566860;
  --line:   #e4ebe0;

  --grad-brand: linear-gradient(120deg, var(--pine) 0%, var(--green) 45%, var(--lime) 100%);
  --grad-lime:  linear-gradient(120deg, var(--lime) 0%, var(--lime-2) 100%);

  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --container: 1200px;
  --header-h: 88px;
  --radius: 18px;
  --radius-lg: 26px;
  --shadow-sm: 0 4px 18px rgba(16, 40, 32, .07);
  --shadow-md: 0 18px 50px rgba(12, 38, 30, .12);
  --shadow-lime: 0 12px 30px rgba(107, 156, 12, .3);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ============================ 2. BASE / RESET ============================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.12; margin: 0; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1rem; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--lime); color: #12311a; font-weight: 700;
  padding: 10px 18px; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

/* ============================ 3. UTILITÁRIOS ============================ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }

.eyebrow {
  font-family: var(--font-body); font-weight: 700; font-size: .78rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--green);
  margin: 0 0 14px; display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--lime); display: inline-block; }
.eyebrow--light { color: var(--lime-2); }

.tx-lime { color: var(--lime); }

.section { padding: clamp(64px, 9vw, 118px) 0; position: relative; }
.section--light { background: var(--paper); }
.section--cream { background: var(--cream); }
.section--dark  { background: var(--forest); color: #eaf3ea; }

.section__head { max-width: 640px; margin-bottom: 54px; }
.section__head--light { color: #eaf3ea; }
.section__title { font-size: clamp(1.8rem, 3.6vw, 2.9rem); font-weight: 700; }
.section--dark .section__title { color: #fff; }
.section__sub { color: var(--muted); font-size: 1.06rem; margin-top: 14px; }
.section__sub--light { color: #b7cdbe; }

/* Botões */
.btn {
  --pad-y: .85em; --pad-x: 1.5em;
  display: inline-flex; align-items: center; gap: .65em;
  font-family: var(--font-display); font-weight: 600; font-size: .98rem;
  padding: var(--pad-y) var(--pad-x); border-radius: 999px;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn--lg { --pad-y: 1.05em; --pad-x: 1.9em; font-size: 1.05rem; }
.btn--sm { --pad-y: .6em; --pad-x: 1.15em; font-size: .9rem; }

.btn--primary { background: var(--grad-lime); color: #14311a; box-shadow: var(--shadow-lime); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(107,156,12,.4); }

.btn--ghost { background: transparent; color: #eaf3ea; border-color: rgba(255,255,255,.35); }
.btn--ghost:hover { border-color: var(--lime-2); color: #fff; transform: translateY(-2px); }

/* Texto em duas linhas dentro do botão (rótulo + número) */
.btn__stack { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.btn__stack .js-wa-number { font-family: var(--font-body); font-weight: 500; font-size: .78em; opacity: .8; }

/* Ícone do WhatsApp via máscara (herda a cor do texto do botão) */
.btn__icon {
  width: 1.2em; height: 1.2em; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3C9.4 3 4 8.4 4 15c0 2.1.6 4.1 1.6 5.9L4 29l8.3-1.6c1.7.9 3.6 1.4 5.7 1.4 6.6 0 12-5.4 12-12S22.6 3 16 3zm0 21.8c-1.8 0-3.5-.5-5-1.4l-.4-.2-4.9 1 1-4.8-.2-.4A9.8 9.8 0 0 1 6.2 15C6.2 9.6 10.6 5.2 16 5.2S25.8 9.6 25.8 15 21.4 24.8 16 24.8zm5.6-7.3c-.3-.2-1.8-.9-2.1-1s-.5-.2-.7.2-.8 1-.9 1.2-.3.2-.6.1a8 8 0 0 1-2.4-1.5 9 9 0 0 1-1.6-2c-.2-.3 0-.5.1-.7l.5-.6c.1-.2.1-.3.2-.5s0-.4 0-.5l-.9-2.2c-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.2.2 2.2 3.4 5.4 4.7.7.3 1.3.5 1.8.6.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2-1.4.3-.7.3-1.3.2-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3C9.4 3 4 8.4 4 15c0 2.1.6 4.1 1.6 5.9L4 29l8.3-1.6c1.7.9 3.6 1.4 5.7 1.4 6.6 0 12-5.4 12-12S22.6 3 16 3zm0 21.8c-1.8 0-3.5-.5-5-1.4l-.4-.2-4.9 1 1-4.8-.2-.4A9.8 9.8 0 0 1 6.2 15C6.2 9.6 10.6 5.2 16 5.2S25.8 9.6 25.8 15 21.4 24.8 16 24.8zm5.6-7.3c-.3-.2-1.8-.9-2.1-1s-.5-.2-.7.2-.8 1-.9 1.2-.3.2-.6.1a8 8 0 0 1-2.4-1.5 9 9 0 0 1-1.6-2c-.2-.3 0-.5.1-.7l.5-.6c.1-.2.1-.3.2-.5s0-.4 0-.5l-.9-2.2c-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.2.2 2.2 3.4 5.4 4.7.7.3 1.3.5 1.8.6.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2-1.4.3-.7.3-1.3.2-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; color: var(--green); margin-top: 8px; }
.link-arrow span { transition: transform .3s var(--ease); }
.link-arrow:hover span { transform: translateX(4px); }

/* Revelação ao rolar (discreta) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ============================ 4. CABEÇALHO ============================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; padding: 18px 0;
  transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.is-scrolled { background: rgba(255,255,255,.92); backdrop-filter: blur(12px); padding: 10px 0; box-shadow: 0 6px 24px rgba(12,38,30,.08); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark { width: 46px; height: 46px; border-radius: 50%; }
.brand__name { font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; letter-spacing: .04em; color: #fff; line-height: 1; display: flex; flex-direction: column; }
.brand__name strong { font-weight: 800; letter-spacing: .01em; }
.is-scrolled .brand__name { color: var(--ink); }

.nav { display: flex; align-items: center; gap: 30px; }
.nav__link { font-weight: 500; font-size: .96rem; color: rgba(255,255,255,.9); position: relative; transition: color .25s var(--ease); }
.nav__link::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--lime); transition: width .3s var(--ease); }
.nav__link:hover::after, .nav__link.is-active::after { width: 100%; }
.nav__link.is-active { color: #fff; }
.is-scrolled .nav__link { color: var(--muted); }
.is-scrolled .nav__link:hover, .is-scrolled .nav__link.is-active { color: var(--green); }

.menu-toggle { display: none; width: 46px; height: 46px; border: 0; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; gap: 6px; padding: 0; z-index: 110; }
.menu-toggle span { width: 26px; height: 2.5px; background: #fff; margin-inline: auto; border-radius: 2px; transition: transform .35s var(--ease), opacity .25s var(--ease), background .3s; }
.is-scrolled .menu-toggle span { background: var(--ink); }

.nav-backdrop {
  position: fixed; inset: 0; z-index: 98; background: rgba(0,18,14,.55); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s var(--ease);
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; }

/* ============================ 5. HERO ============================ */
.hero {
  position: relative;
  background:
    radial-gradient(900px 500px at 78% 8%, rgba(147,194,21,.16), transparent 60%),
    radial-gradient(700px 600px at 12% 90%, rgba(4,96,61,.4), transparent 60%),
    linear-gradient(160deg, var(--forest) 0%, var(--pine) 100%);
  color: #eef6ee; padding: clamp(130px, 18vh, 190px) 0 70px; overflow: hidden;
}
.hero__inner { display: grid; grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center; }
.hero__title { font-size: clamp(2rem, 5vw, 3.7rem); font-weight: 800; letter-spacing: -0.02em; margin: 6px 0 20px; max-width: 15ch; overflow-wrap: break-word; hyphens: auto; }
.hero__text { color: #c3d6c6; font-size: 1.12rem; max-width: 46ch; margin-bottom: 32px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__visual { display: flex; justify-content: center; position: relative; }
.ring-stage { position: relative; width: min(430px, 82vw); aspect-ratio: 1; display: grid; place-items: center; }
.ring-stage__logo { width: 68%; height: 68%; object-fit: contain; border-radius: 50%; background: #fff; padding: 10px; box-shadow: 0 30px 70px rgba(0,0,0,.35); position: relative; z-index: 2; }
.ring {
  position: absolute; border-radius: 50%; inset: 0;
  background: conic-gradient(from 0deg, var(--lime), var(--green), var(--pine), var(--lime));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: spin 22s linear infinite; opacity: .8;
}
.ring--2 { inset: 7%; opacity: .4; animation-duration: 30s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

.float-card { position: absolute; right: -3%; bottom: -5%; z-index: 3; width: 152px; margin: 0; background: #fff; border-radius: 16px; padding: 10px 10px 8px; box-shadow: var(--shadow-md); animation: floaty 7s ease-in-out infinite; }
.float-card img { border-radius: 10px; height: 108px; width: 100%; object-fit: cover; }
.float-card figcaption { font-size: .74rem; color: var(--muted); text-align: center; margin-top: 7px; font-weight: 600; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.hero__leaves { position: absolute; inset: 0; pointer-events: none; }
.leaf {
  position: absolute; width: 20px; height: 20px; opacity: .12; background: var(--lime);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19c0-8 6-14 14-14 0 8-6 14-14 14zm0 0C8 12 12 9 18 7'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19c0-8 6-14 14-14 0 8-6 14-14 14zm0 0C8 12 12 9 18 7'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: drift linear infinite;
}
@keyframes drift {
  0% { transform: translateY(-10vh) translateX(0) rotate(0deg); opacity: 0; }
  12% { opacity: .14; } 88% { opacity: .14; }
  100% { transform: translateY(110vh) translateX(30px) rotate(180deg); opacity: 0; }
}

.trust { display: flex; flex-wrap: wrap; gap: 14px 34px; margin-top: 56px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.12); }
.trust__item { display: flex; align-items: center; gap: 10px; font-size: .95rem; color: #cadfcd; font-weight: 500; }
.trust__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); flex: none; box-shadow: 0 0 0 4px rgba(147,194,21,.2); }

/* ============================ 6. SOBRE ============================ */
.about { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: center; }
.about__media { position: relative; }
.about__logo { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border: 1px solid var(--line); background: #fff; width: 100%; height: auto; }
.about__badge { position: absolute; right: -14px; bottom: -22px; background: var(--grad-brand); color: #fff; border-radius: 20px; padding: 18px 22px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-md); }
.about__badge-num { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; line-height: 1; }
.about__badge-label { font-size: .82rem; line-height: 1.2; font-weight: 600; opacity: .95; }
.about__lead { font-size: 1.18rem; color: var(--ink); font-weight: 500; }
.about__content p { color: var(--muted); }
.about__content p.about__lead { color: var(--ink); }

/* ============================ 7. PRODUTOS ============================ */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 26px; position: relative; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.card::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--grad-lime); transition: width .4s var(--ease); }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.card:hover::after { width: 100%; }
.card__icon { width: 62px; height: 62px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 20px; color: var(--green); background: linear-gradient(145deg, #eef6e3, #e0efd2); }
.card__icon svg { width: 32px; height: 32px; }
.card__title { font-size: 1.22rem; margin-bottom: 10px; }
.card__text { color: var(--muted); font-size: .96rem; margin: 0; }

/* ============================ 8. GALERIA ============================ */
.gallery { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 200px; gap: 18px; }
.gallery__item { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); grid-column: span 2; border: 1px solid rgba(255,255,255,.06); background: #001d18; }
.gallery__item--tall { grid-row: span 2; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gallery__item:hover img { transform: scale(1.035); }
.gallery__cap {
  position: absolute; inset: auto 0 0 0; padding: 26px 18px 16px;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: #fff;
  background: linear-gradient(to top, rgba(0,20,16,.9), transparent);
}

/* ============================ 9. DIFERENCIAIS ============================ */
.feats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.feat { padding: 28px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.feat:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.feat__icon { width: 52px; height: 52px; border-radius: 14px; margin-bottom: 18px; display: grid; place-items: center; color: #fff; background: var(--grad-brand); }
.feat__icon svg { width: 26px; height: 26px; }
.feat__title { font-size: 1.05rem; margin-bottom: 8px; }
.feat__text { color: var(--muted); font-size: .9rem; margin: 0; }

/* ============================ 10. CONTATO ============================ */
.contact { overflow: hidden; }
.contact__card {
  display: grid; grid-template-columns: 1.4fr .8fr; border-radius: var(--radius-lg); overflow: hidden;
  background: radial-gradient(600px 400px at 90% 0%, rgba(147,194,21,.14), transparent 60%), linear-gradient(150deg, var(--pine), #002a22);
  border: 1px solid rgba(255,255,255,.08); box-shadow: var(--shadow-md);
}
.contact__text { padding: clamp(34px, 5vw, 64px); }
.contact__title { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-bottom: 14px; }
.contact__lead { color: #b7cdbe; max-width: 44ch; margin-bottom: 30px; }

.contact__wa { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
.contact__wa .btn { flex: 1 1 220px; justify-content: center; }

.contact__list { display: flex; flex-wrap: wrap; gap: 12px 30px; }
.contact__list li { display: flex; align-items: center; gap: 10px; color: #cfe1d1; font-size: .96rem; }
.contact__list a { transition: color .25s var(--ease); word-break: break-word; }
.contact__list a:hover { color: var(--lime-2); }
.contact__list-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.06); color: var(--lime-2); flex: none; }
.contact__list-ic svg { width: 19px; height: 19px; }

.contact__aside { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 40px 30px; text-align: center; background: rgba(0,0,0,.18); border-left: 1px solid rgba(255,255,255,.07); }
.contact__logo { width: 120px; height: 120px; border-radius: 50%; background: #fff; padding: 8px; box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.contact__aside-tag { color: #cfe1d1; font-size: .96rem; margin: 0; line-height: 1.5; }

/* ============================ 11. RODAPÉ + WHATSAPP ============================ */
.footer { background: #001914; color: #b7cdbe; padding: 54px 0 26px; }
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.footer__brand { display: flex; align-items: center; gap: 14px; }
.footer__mark { width: 54px; height: 54px; border-radius: 50%; background: #fff; padding: 4px; }
.footer__name { font-family: var(--font-display); font-weight: 700; color: #fff; margin: 0; }
.footer__tag { font-size: .86rem; margin: 2px 0 0; color: #90a99a; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.footer__nav a { font-size: .95rem; color: #b7cdbe; transition: color .25s var(--ease); }
.footer__nav a:hover { color: var(--lime-2); }
.footer__bottom { margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); font-size: .84rem; color: #7f978a; }
.footer__bottom p { margin: 0; }

.wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 12px 30px rgba(37,211,102,.4); transition: transform .3s var(--ease); }
.wa-float svg { width: 34px; height: 34px; }
.wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #25d366; z-index: -1; animation: pulse 2.8s ease-out infinite; }
.wa-float:hover { transform: scale(1.06); }
@keyframes pulse { 0% { transform: scale(1); opacity: .45; } 70%,100% { transform: scale(1.7); opacity: 0; } }

/* ============================ 12. RESPONSIVO ============================ */

/* Notebooks menores / tablets grandes */
@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .hero__title, .hero__text { max-width: none; }
  .hero__actions { justify-content: center; }
  .hero__content .eyebrow { justify-content: center; }
  .hero__visual { order: -1; }
  .trust { justify-content: center; }

  .about { grid-template-columns: 1fr; gap: 56px; }
  .about__media { max-width: 440px; margin-inline: auto; }

  .cards { grid-template-columns: repeat(2, 1fr); }
  .feats { grid-template-columns: repeat(2, 1fr); }

  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .gallery__item { grid-column: span 1; }
  .gallery__item--tall { grid-row: span 2; }

  .contact__card { grid-template-columns: 1fr; }
  .contact__aside { border-left: 0; border-top: 1px solid rgba(255,255,255,.07); }
}

/* Menu em gaveta (tablets / celulares) */
@media (max-width: 880px) {
  .menu-toggle { display: flex; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(82vw, 330px); z-index: 105;
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 26px; padding: 40px;
    background: var(--forest); transform: translateX(100%); transition: transform .4s var(--ease);
    box-shadow: -20px 0 60px rgba(0,0,0,.4);
  }
  .nav.is-open { transform: none; }
  .nav__link { color: #eaf3ea; font-size: 1.15rem; }
  .nav__link::after { display: none; }
  .nav .btn { margin-top: 8px; }
  .menu-toggle.is-active span { background: #fff; }
  .menu-toggle.is-active span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
  .menu-toggle.is-active span:nth-child(2) { opacity: 0; }
  .menu-toggle.is-active span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }
}

/* Celulares */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .cards, .feats { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .gallery__item--tall { grid-row: span 1; }
  .contact__wa .btn { flex: 1 1 100%; }
  .float-card { width: 132px; right: 2%; bottom: -6%; }
  .float-card img { height: 92px; }
  .about__badge { right: 10px; padding: 14px 16px; }
  .about__badge-num { font-size: 1.7rem; }
  .wa-float { width: 54px; height: 54px; right: 16px; bottom: 16px; }
}

/* Celulares pequenos */
@media (max-width: 380px) {
  .container { padding-inline: 18px; }
  .btn--lg { --pad-x: 1.4em; font-size: 1rem; }
}

/* Telas grandes: limita a largura e centraliza com respiro */
@media (min-width: 1500px) {
  :root { --container: 1280px; }
}

/* ============================ ACESSIBILIDADE ============================ */
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}