/* ============================================================
   MADE'S COMPONENTES — Design System
   B2B · Técnico · Institucional · Premium
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---------- TOKENS ---------- */
:root{
  /* Brand core */
  --blue:        #0F395B;   /* Azul principal */
  --gray:        #A6A5A6;   /* Cinza claro */
  --gray-dark:   #737373;   /* Cinza escuro */
  --white:       #FFFFFF;

  /* Derived — used sparingly, in-key with brand */
  --blue-ink:    #0B2C47;   /* deeper blue for large fills */
  --blue-700:    #1A5380;   /* hover / links */
  --blue-300:    #7CA0BC;   /* muted accent */
  --blue-tint:   #EAF0F5;   /* faint blue wash */

  --graphite:    #23292E;   /* grafite — texto forte / fundos apoio */
  --offwhite:    #F4F6F8;   /* off-white frio */
  --offwhite-2:  #ECEFF2;   /* off-white mais profundo */
  --line:        #DEE3E8;   /* hairlines */
  --line-soft:   #E9ECEF;

  /* Text roles */
  --text:        #2B3137;   /* corpo */
  --text-soft:   #5C636A;   /* secundário */
  --text-faint:  #8A9097;   /* terciário / captions */

  --whats:       #1F8A4C;   /* verde discreto p/ ícone wpp (uso mínimo) */

  /* Type */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Spacing scale (8pt) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* Radius — tight, technical */
  --r-sm: 4px;  --r-md: 8px;  --r-lg: 14px;  --r-xl: 20px;

  /* Shadows — soft, premium, low spread */
  --sh-1: 0 1px 2px rgba(15,57,91,.06), 0 1px 1px rgba(15,57,91,.04);
  --sh-2: 0 4px 18px rgba(15,57,91,.07), 0 2px 6px rgba(15,57,91,.04);
  --sh-3: 0 18px 48px rgba(15,57,91,.12), 0 6px 16px rgba(15,57,91,.06);

  --container: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- RESET / BASE ---------- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--white);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--blue); color:#fff; }

/* ---------- TYPE SCALE ---------- */
.display{
  font-family:var(--font-display);
  font-weight:700;
  color:var(--blue);
  line-height:1.04;
  letter-spacing:-.02em;
  font-size:clamp(40px, 6vw, 76px);
  text-wrap:balance;
}
h1,.h1{ font-family:var(--font-display); font-weight:700; color:var(--blue); line-height:1.08; letter-spacing:-.015em; font-size:clamp(34px,4.4vw,54px); margin:0; text-wrap:balance; }
h2,.h2{ font-family:var(--font-display); font-weight:700; color:var(--blue); line-height:1.12; letter-spacing:-.01em; font-size:clamp(28px,3.2vw,40px); margin:0; text-wrap:balance; }
h3,.h3{ font-family:var(--font-display); font-weight:600; color:var(--blue); line-height:1.2; letter-spacing:-.01em; font-size:22px; margin:0; }
h4,.h4{ font-family:var(--font-display); font-weight:600; color:var(--graphite); line-height:1.3; font-size:18px; margin:0; }
.lead{ font-size:clamp(18px,1.5vw,21px); line-height:1.55; color:var(--text-soft); font-weight:400; }
.body{ font-size:17px; color:var(--text); }
.small{ font-size:14px; }
p{ margin:0 0 1em; }
.muted{ color:var(--text-soft); }

/* Eyebrow — technical mono label, the system's signature accent */
.eyebrow{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:12.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--blue-700);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:22px; height:2px;
  background:var(--gray);
  display:inline-block;
}
.eyebrow--light{ color:var(--blue-300); }
.eyebrow--light::before{ background:var(--blue-300); }

/* ---------- LAYOUT ---------- */
.container{ width:100%; max-width:var(--container); margin:0 auto; padding-inline:32px; }
.section{ padding-block:clamp(64px,9vw,128px); }
.section--tight{ padding-block:clamp(48px,6vw,80px); }
.bg-offwhite{ background:var(--offwhite); }
.bg-offwhite-2{ background:var(--offwhite-2); }
.bg-blue{ background:var(--blue); color:#fff; }
.bg-graphite{ background:var(--graphite); color:#fff; }
.stack > * + *{ margin-top:var(--s5); }
.measure{ max-width:62ch; }
.measure-sm{ max-width:48ch; }

/* ---------- BUTTONS ---------- */
.btn{
  font-family:var(--font-body);
  font-weight:600;
  font-size:15.5px;
  letter-spacing:.01em;
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px;
  border-radius:var(--r-md);
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
  white-space:nowrap;
  line-height:1;
}
.btn svg{ width:18px; height:18px; }
.btn:active{ transform:translateY(1px); }

.btn--primary{ background:var(--blue); color:#fff; box-shadow:var(--sh-1); }
.btn--primary:hover{ background:var(--blue-ink); box-shadow:var(--sh-2); }

.btn--ghost{ background:transparent; color:var(--blue); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--blue); background:var(--blue-tint); }

.btn--solid-light{ background:#fff; color:var(--blue); }
.btn--solid-light:hover{ background:var(--offwhite-2); }

.btn--outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.btn--outline-light:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

/* WhatsApp — discreto, integrado à paleta; verde só no ícone */
.btn--whats{ background:var(--blue); color:#fff; }
.btn--whats:hover{ background:var(--blue-ink); }
.btn--whats .wa{ color:#fff; }
.btn--whats-light{ background:#fff; color:var(--blue); border-color:var(--line); }
.btn--whats-light:hover{ border-color:var(--blue); }

.btn--lg{ padding:17px 32px; font-size:16.5px; }
.btn--sm{ padding:10px 18px; font-size:14px; }

.link-arrow{
  font-family:var(--font-body); font-weight:600; color:var(--blue);
  display:inline-flex; align-items:center; gap:8px; font-size:15.5px;
}
.link-arrow svg{ width:16px; height:16px; transition:transform .2s var(--ease); }
.link-arrow:hover svg{ transform:translateX(4px); }

/* ---------- CARDS ---------- */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--s6);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card--hover:hover{ transform:translateY(-4px); box-shadow:var(--sh-3); border-color:transparent; }

/* Product card — image top, technical label, category */
.pcard{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.pcard:hover{ transform:translateY(-5px); box-shadow:var(--sh-3); border-color:transparent; }
.pcard__media{ position:relative; aspect-ratio:4/3; background:var(--offwhite-2); overflow:hidden; }
.pcard__media img, .pcard__media image-slot{ width:100%; height:100%; }
.pcard:hover .pcard__media img{ transform:scale(1.04); }
.pcard__media img{ transition:transform .5s var(--ease); object-fit:cover; }
.pcard__num{
  position:absolute; top:14px; left:14px; z-index:2;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
  color:var(--blue); background:rgba(255,255,255,.92);
  padding:5px 9px; border-radius:var(--r-sm);
}
.pcard__body{ padding:22px 24px 26px; display:flex; flex-direction:column; gap:8px; flex:1; }
.pcard__cat{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gray-dark); }
.pcard__title{ font-family:var(--font-display); font-weight:600; font-size:19px; color:var(--blue); line-height:1.25; }
.pcard__desc{ font-size:14.5px; color:var(--text-soft); line-height:1.5; }
.pcard__foot{ margin-top:auto; padding-top:16px; display:flex; align-items:center; justify-content:space-between; }
.pcard__tag{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--text-faint); }

/* Feature / differential card */
.fcard{ display:flex; flex-direction:column; gap:16px; }
.fcard__ico{
  width:52px; height:52px; border-radius:var(--r-md);
  display:grid; place-items:center;
  background:var(--blue-tint); color:var(--blue);
  border:1px solid var(--line);
}
.fcard__ico svg{ width:26px; height:26px; }

/* Chip / badge */
.chip{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em;
  color:var(--gray-dark);
  background:var(--white); border:1px solid var(--line);
  padding:7px 13px; border-radius:100px;
}
.chip--blue{ color:var(--blue); background:var(--blue-tint); border-color:transparent; }

/* ---------- GEOMETRIC MOTIFS (derived from the symbol) ---------- */
/* Corner triangle — the gray triangle from the mark */
.tri{
  position:absolute; width:0; height:0; pointer-events:none;
}
.tri--br{ bottom:0; right:0; border-style:solid; border-width:0 0 56px 56px; border-color:transparent transparent var(--gray) transparent; }
.tri--blue.tri--br{ border-color:transparent transparent var(--blue) transparent; }

/* Diagonal chevron field — faint repeating motif */
.chevron-field{
  background-image:
    repeating-linear-gradient(135deg, var(--line-soft) 0 1px, transparent 1px 26px);
}
.diag-field{
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 30px);
}

/* "Blade" — angled accent block echoing the mark's diagonal */
.blade{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 38px)); }
.blade-up{ clip-path:polygon(0 38px, 100% 0, 100% 100%, 0 100%); }

/* ---------- IMAGE PLACEHOLDERS (branded, swappable) ---------- */
/* Elegant material-swatch placeholder. Replace .ph with <img> when photos arrive. */
.ph{
  position:relative; overflow:hidden;
  background:
    linear-gradient(135deg, var(--offwhite) 0%, var(--blue-tint) 100%);
  display:grid; place-items:center;
}
.ph::before{ /* faint diagonal chevron texture echoing the mark */
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(135deg, rgba(15,57,91,.045) 0 1px, transparent 1px 22px);
  pointer-events:none;
}
.ph__mark{ /* symbol watermark */
  width:38%; max-width:120px; opacity:.13; filter:saturate(.6);
  position:relative; z-index:1;
}
.ph__label{
  position:absolute; left:16px; bottom:14px; z-index:2;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue); background:rgba(255,255,255,.82);
  padding:5px 9px; border-radius:var(--r-sm);
  display:inline-flex; align-items:center; gap:7px;
}
.ph__label::before{ content:""; width:6px; height:6px; background:var(--gray); }
.ph--dark{ background:linear-gradient(135deg, #163f60 0%, var(--blue-ink) 100%); }
.ph--dark::before{ background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 22px); }
.ph--dark .ph__mark{ opacity:.16; }
.ph--dark .ph__label{ color:#fff; background:rgba(255,255,255,.12); }

/* ---------- FORMS ---------- */
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:13px; font-weight:600; color:var(--graphite); letter-spacing:.01em; }
.input, .textarea, .select{
  font-family:var(--font-body); font-size:15px; color:var(--text);
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r-md);
  padding:13px 15px; transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.input:focus, .textarea:focus, .select:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-tint);
}
.textarea{ resize:vertical; min-height:120px; }

/* ---------- HEADER / NAV ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:78px; gap:24px; }
.nav__logo img{ height:34px; width:auto; }
.nav__links{ display:flex; align-items:center; gap:34px; }
.nav__links a{
  font-size:15px; font-weight:500; color:var(--graphite);
  position:relative; padding:6px 0; transition:color .15s var(--ease);
}
.nav__links a:hover{ color:var(--blue); }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--blue);
  transition:width .2s var(--ease);
}
.nav__links a:hover::after{ width:100%; }
.nav__cta{ display:flex; align-items:center; gap:14px; }
.nav__burger{ display:none; background:none; border:none; cursor:pointer; padding:8px; }
.nav__burger span{ display:block; width:24px; height:2px; background:var(--blue); margin:5px 0; transition:.2s var(--ease); }
.nav__mobile-cta{ display:none; }

/* ---------- FOOTER ---------- */
.footer{ background:var(--blue-ink); color:#fff; padding-block:72px 36px; position:relative; overflow:hidden; }
.footer a{ color:rgba(255,255,255,.78); transition:color .15s var(--ease); }
.footer a:hover{ color:#fff; }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:48px; position:relative; z-index:2; }
.footer__logo img{ height:42px; margin-bottom:20px; }
.footer__col h5{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-300); margin:0 0 18px; font-weight:500; }
.footer__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; font-size:14.5px; }
.footer__bottom{ margin-top:56px; padding-top:24px; border-top:1px solid rgba(255,255,255,.14); display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:13px; color:rgba(255,255,255,.6); position:relative; z-index:2; flex-wrap:wrap; }

/* ---------- UTIL ---------- */
.grid{ display:grid; gap:var(--s6); }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }
.flex{ display:flex; }
.items-center{ align-items:center; }
.gap-3{ gap:var(--s3); } .gap-4{ gap:var(--s4); } .gap-5{ gap:var(--s5); }
.wrap{ flex-wrap:wrap; }
.center{ text-align:center; }
.divider{ height:1px; background:var(--line); border:0; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .footer__grid{ grid-template-columns:1fr 1fr; gap:36px; }
  .cols-4{ grid-template-columns:repeat(2,1fr); }
  .cols-3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px){
  body{ font-size:16px; }
  .container{ padding-inline:22px; }
  .nav__links, .nav__cta{ display:none; }
  .nav__burger{ display:block; }
  .cols-2, .cols-3, .cols-4{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:28px; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   MENU MOBILE — estados JS (adicionados via script.js)
   ============================================================ */

/* Hambúrguer — estado aberto */
.nav__burger.is-open span:nth-child(1){ transform:rotate(45deg) translate(5px,5px); }
.nav__burger.is-open span:nth-child(2){ opacity:0; width:0; }
.nav__burger.is-open span:nth-child(3){ transform:rotate(-45deg) translate(5px,-5px); }

/* Overlay mobile — criado pelo JS como filho direto do <body>
   (evita o bug de backdrop-filter prender position:fixed no
    stacking context do header em WebKit/iOS Safari) */
.mobile-menu-overlay{
  display:none;
  position:fixed;
  top:78px; left:0; right:0; bottom:0;
  background:#fff;
  z-index:9999;
  flex-direction:column;
  padding:28px 24px 40px;
  overflow-y:auto;
  border-top:1px solid var(--line);
  box-shadow:0 8px 32px rgba(15,57,91,.08);
}
.mobile-menu-overlay.is-open{ display:flex; }

.mobile-menu-overlay > a{
  font-size:18px; font-weight:500;
  padding:16px 0;
  border-bottom:1px solid var(--line-soft);
  color:var(--graphite);
  text-decoration:none;
}
.mobile-menu-overlay > a:last-of-type{ border-bottom:0; }

.mobile-menu-overlay .nav__mobile-cta{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:auto;
  padding-top:28px;
}
.mobile-menu-overlay .nav__mobile-cta .btn{
  width:100%;
  justify-content:center;
  font-size:16px;
  padding-block:14px;
}

/* Link ativo no nav (adicionado pelo JS) */
.nav__link--active{ color:var(--blue) !important; font-weight:600 !important; }
.nav__link--active::after{ width:100% !important; }

/* ============================================================
   MICROANIMAÇÕES PREMIUM — v1.1 · Junho 2026
   Made's Componentes — Botões, cards e interações
   Easing: cubic-bezier(.22,1,.36,1) — encaixe técnico preciso
   ============================================================ */

/* ── Variáveis de timing ─────────────────────────────────────── */
:root{
  --ease-out:   cubic-bezier(.22,1,.36,1);
  --dur-fast:   180ms;
  --dur-base:   220ms;
}

/* ── Base: todos os botões — transition estendida ────────────── */
/* Substitui a transition existente; cobre gap p/ animação de ícone */
.btn{
  transition:
    transform    var(--dur-base) var(--ease-out),
    background   var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color        var(--dur-base) var(--ease-out),
    box-shadow   var(--dur-base) var(--ease-out),
    gap          var(--dur-base) var(--ease-out);
  will-change: transform;
}

/* SVG dentro de botões: preparado para deslizar */
.btn svg{
  transition: transform var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
}

/* Active state: compressão sutil — sensação física de clique */
.btn:active{
  transform: translateY(1px) scale(.98) !important;
  transition-duration: 80ms !important;
}

/* ── .btn--primary ───────────────────────────────────────────── */
/* Elevação 2px + sombra mais profunda + ícone deslizando 3px   */

.btn--primary:hover{
  transform: translateY(-2px);
  background: var(--blue-ink);
  box-shadow:
    0 6px 20px rgba(15,57,91,.18),
    0 2px 6px  rgba(15,57,91,.10);
}
.btn--primary:hover svg{
  transform: translateX(3px);
}
.btn--primary:active{
  background: var(--blue-ink);
  box-shadow: var(--sh-1);
}

/* ── .btn--ghost ─────────────────────────────────────────────── */
/* Preenchimento completo no hover: fundo azul + texto branco    */
/* Borda se ajusta para manter consistência com a paleta         */

.btn--ghost:hover{
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(15,57,91,.14);
}
.btn--ghost:hover svg{
  transform: translateX(2px);
}

/* ── .btn--solid-light ───────────────────────────────────────── */
/* Elevação + sombra suave; ícone desliza levemente              */

.btn--solid-light:hover{
  background: var(--offwhite-2);
  transform: translateY(-2px);
  box-shadow:
    0 6px 20px rgba(15,57,91,.12),
    0 2px 6px  rgba(15,57,91,.06);
}
.btn--solid-light:hover svg{
  transform: translateX(3px);
}
.btn--solid-light:active{
  box-shadow: none;
}

/* ── .btn--outline-light ─────────────────────────────────────── */
/* Borda ganha opacidade total; fundo claro discreto             */

.btn--outline-light:hover{
  border-color: #fff;
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,.14);
}
.btn--outline-light:hover svg{
  transform: translateX(3px);
}

/* ── .btn--whats e .btn--whats-light ────────────────────────── */

.btn--whats:hover{
  transform: translateY(-2px);
  box-shadow:
    0 6px 20px rgba(15,57,91,.18),
    0 2px 6px  rgba(15,57,91,.10);
}
.btn--whats-light:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(15,57,91,.10);
}

/* ── .link-arrow (setas internas dos cards) ──────────────────── */
/* Gap aumenta levemente: seta "respira" para a direita          */

.link-arrow{
  transition:
    color var(--dur-base) var(--ease-out),
    gap   var(--dur-base) var(--ease-out);
}
.link-arrow:hover{
  color: var(--blue-700);
  gap: 12px;
}
.link-arrow svg{
  transition: transform var(--dur-fast) var(--ease-out);
}
.link-arrow:hover svg{
  transform: translateX(4px);
}

/* ── Focus visível — navegação por teclado ───────────────────── */
/* Respeita :focus-visible para não poluir usuários de mouse     */

.btn:focus-visible{
  outline: 2.5px solid var(--blue);
  outline-offset: 3px;
}
.btn--outline-light:focus-visible,
.btn--solid-light:focus-visible{
  outline-color: #fff;
  outline-offset: 3px;
}
.btn--ghost:focus-visible{
  outline-color: var(--blue);
  outline-offset: 3px;
}
.link-arrow:focus-visible{
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.wa-float:focus-visible{
  outline: 2.5px solid rgba(255,255,255,.9);
  outline-offset: 3px;
}

/* ── Botão flutuante WhatsApp — pulso sutil ──────────────────── */
/* O .ring pulsa levemente a cada 4.5s, como um "estou aqui"    */
/* Pausa no hover para não colidir com o efeito de hover         */

.wa-float .ring{
  animation: wa-ring-pulse 4.5s var(--ease-out) 3.5s infinite;
}
.wa-float:hover .ring{
  animation-play-state: paused;
}

@keyframes wa-ring-pulse{
  0%,  84%{ transform:scale(1);    box-shadow:0 0 0 0   rgba(255,255,255,.35); }
  91%     { transform:scale(1.10); box-shadow:0 0 0 7px rgba(255,255,255,.0);  }
  100%    { transform:scale(1);    box-shadow:0 0 0 0   rgba(255,255,255,.0);  }
}

/* ── Cards de produto (.pcard) — linha azul no rodapé ───────── */
/* Linha de 2px cresce da esquerda para a direita ao hover       */

.pcard__foot{
  position: relative;
}
.pcard__foot::after{
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background: var(--blue);
  border-radius: 2px;
  transition: width var(--dur-base) var(--ease-out);
}
.pcard:hover .pcard__foot::after{
  width: 100%;
}

/* Transição de hover do card levemente mais suave */
.pcard{
  transition:
    transform    .28s var(--ease-out),
    box-shadow   .28s var(--ease-out),
    border-color .28s var(--ease-out);
}

/* ── Cards de categoria (.catcard) — seta do botão interno ───── */

.catcard .btn--primary svg{
  transition: transform var(--dur-fast) var(--ease-out);
}
.catcard:hover .btn--primary svg{
  transform: translateX(3px);
}

/* ── Feature cards (.fcard) — ícone com leve escala ─────────── */

.fcard__ico{
  transition:
    background   var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform    var(--dur-base) var(--ease-out);
}
.fcard:hover .fcard__ico{
  background: var(--blue);
  border-color: var(--blue);
  transform: scale(1.06);
}
.fcard:hover .fcard__ico svg{
  color: #fff;
  transition: color var(--dur-base) var(--ease-out);
}

/* ── Prefers-reduced-motion ──────────────────────────────────── */
/* Remove animações não essenciais para usuários com sensibilidade */

@media (prefers-reduced-motion: reduce){

  /* Transições dos botões: mantém apenas mudanças de cor (não posição) */
  .btn{
    transition:
      background   var(--dur-fast) linear,
      border-color var(--dur-fast) linear,
      color        var(--dur-fast) linear !important;
    will-change: auto;
  }

  /* Remove elevações e transforms dos botões */
  .btn:hover,
  .btn--primary:hover,
  .btn--ghost:hover,
  .btn--solid-light:hover,
  .btn--outline-light:hover,
  .btn--whats:hover,
  .btn--whats-light:hover{
    transform: none !important;
    box-shadow: none !important;
  }

  .btn:active{
    transform: none !important;
  }

  /* Remove slide dos SVGs */
  .btn svg,
  .link-arrow svg{
    transition: none !important;
  }
  .btn:hover svg,
  .link-arrow:hover svg{
    transform: none !important;
  }

  /* Link-arrow: mantém cor mas remove movimento */
  .link-arrow{
    transition: color var(--dur-fast) linear !important;
  }
  .link-arrow:hover{
    gap: 8px !important;
  }

  /* Remove pulso do WA flutuante */
  .wa-float .ring{
    animation: none !important;
  }

  /* Remove linha animada dos cards */
  .pcard__foot::after{
    display: none;
  }

  /* Remove hover de elevação dos cards */
  .pcard:hover,
  .catcard:hover,
  .fcard:hover .fcard__ico{
    transform: none !important;
    box-shadow: none !important;
  }
  .fcard:hover .fcard__ico{
    background: var(--blue-tint) !important;
    border-color: var(--line) !important;
  }
  .fcard:hover .fcard__ico svg{
    color: var(--blue) !important;
  }

}