/* =============================================================================
   Rody Calçados — Folha de estilos
   Tema CLARO/clean · mobile-first · acessível · sem frameworks
   =============================================================================

   >>> CORES <<<
   Ajuste a identidade visual alterando APENAS as variáveis em :root abaixo.
   ----------------------------------------------------------------------------- */
:root {
  /* Cores principais (edite aqui) */
  --cor-fundo:        #ffffff;   /* fundo geral (branco)                 */
  --cor-superficie:   #f5f6f8;   /* seções alternadas, faixas claras     */
  --cor-superficie-2: #eef1f4;   /* hover / superfícies sutis            */
  --cor-borda:        #e2e5ea;   /* bordas suaves                        */
  --cor-escuro:       #161c25;   /* faixas escuras (rodapé)              */
  --cor-destaque:     #E11D2A;   /* vermelho da marca (CTA, detalhes)    */
  --cor-destaque-2:   #c1121f;   /* vermelho escuro (hover)              */
  --cor-whatsapp:     #25D366;   /* verde do WhatsApp                    */

  /* Texto */
  --cor-texto:        #1a1f26;   /* texto principal (quase preto)        */
  --cor-texto-suave:  #5b6573;   /* texto secundário (cinza)             */
  --cor-sobre-cor:    #ffffff;   /* texto sobre fundo vermelho/escuro    */

  /* Tipografia, espaçamentos e formas */
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --raio:        14px;
  --raio-sm:     9px;
  --sombra:      0 12px 30px rgba(22, 28, 37, .10);
  --sombra-sm:   0 4px 14px rgba(22, 28, 37, .07);
  --container:   1140px;
  --cabecalho-h: 68px;
  --transicao:   .2s ease;
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ----------------------------- Reset enxuto ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cabecalho-h) + 12px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--fonte);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3 { line-height: 1.15; font-weight: 800; letter-spacing: -.01em; }
ul { list-style: none; padding: 0; }

/* ----------------------------- Acessibilidade ---------------------------- */
:focus-visible {
  outline: 3px solid var(--cor-destaque);
  outline-offset: 2px;
  border-radius: 4px;
}
.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  background: var(--cor-destaque);
  color: var(--cor-sobre-cor);
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 700;
  z-index: 1100;
  transition: top var(--transicao);
}
.skip-link:focus { top: 12px; }

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

/* ----------------------------- Layout base ------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; }
section { padding: 64px 0; }
.section-head { max-width: 720px; margin-bottom: 36px; }
.section-head.center { margin-inline: auto; text-align: center; }
.eyebrow {
  display: inline-block;
  color: var(--cor-destaque);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.section-head h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
.section-head p { color: var(--cor-texto-suave); margin-top: 12px; font-size: 1.05rem; }

/* ----------------------------- Botões ------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  transition: transform var(--transicao), background var(--transicao), border-color var(--transicao), color var(--transicao), box-shadow var(--transicao);
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 20px; height: 20px; flex: none; }

.btn-destaque { background: transparent; color: var(--cor-destaque); border-color: var(--cor-destaque); }
.btn-destaque:hover { background: var(--cor-destaque); color: #fff; }
.btn-whatsapp { background: var(--cor-whatsapp); color: #07331b; box-shadow: 0 6px 16px rgba(37, 211, 102, .25); }
.btn-whatsapp:hover { background: #20c45c; }
.btn-contorno { background: var(--cor-fundo); color: var(--cor-texto); border-color: var(--cor-borda); }
.btn-contorno:hover { border-color: var(--cor-destaque); color: var(--cor-destaque); }
.btn-grande { padding: 16px 30px; font-size: 1.05rem; }

/* ============================ CABEÇALHO ================================== */
.cabecalho {
  position: sticky; top: 0; z-index: 1000;
  height: var(--cabecalho-h);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cor-borda);
}
.cabecalho .container {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.logo { display: flex; align-items: center; color: var(--cor-texto); }
.logo svg, .logo img { height: 40px; width: auto; }

.nav { display: none; }
.nav ul { display: flex; align-items: center; gap: 6px; }
.nav a {
  display: inline-block; padding: 9px 14px;
  border-radius: 8px; color: var(--cor-texto-suave);
  font-weight: 600; font-size: .95rem;
  transition: color var(--transicao), background var(--transicao);
}
.nav a:hover { color: var(--cor-texto); background: var(--cor-superficie); }

.cabecalho-acoes { display: flex; align-items: center; gap: 10px; }
.cabecalho-acoes .btn { padding: 10px 16px; font-size: .9rem; }
.cabecalho-acoes .btn-rotulo-curto { display: none; }

.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: 10px; color: var(--cor-texto);
}
.menu-toggle svg { width: 24px; height: 24px; }
.menu-toggle .icone-fechar { display: none; }
.menu-toggle[aria-expanded="true"] .icone-abrir { display: none; }
.menu-toggle[aria-expanded="true"] .icone-fechar { display: block; }

.nav-mobile {
  position: fixed; inset: var(--cabecalho-h) 0 auto 0;
  background: var(--cor-fundo);
  border-bottom: 1px solid var(--cor-borda);
  box-shadow: var(--sombra);
  transform: translateY(-110%);
  /* visibility garante que o menu fechado NUNCA vaze sobre o cabeçalho,
     independentemente da sua altura (corrige nav vazando no topo). */
  visibility: hidden;
  transition: transform .25s ease, visibility 0s linear .25s;
  z-index: 999;
}
.nav-mobile.aberto {
  transform: translateY(0);
  visibility: visible;
  transition: transform .25s ease, visibility 0s;
}
.nav-mobile ul { padding: 12px; display: grid; gap: 4px; }
.nav-mobile a {
  display: block; padding: 14px 16px; border-radius: 10px;
  color: var(--cor-texto); font-weight: 600;
}
.nav-mobile a:hover { background: var(--cor-superficie); }

/* ============================== HERO ==================================== */
.hero {
  background: var(--cor-fundo);
  border-bottom: 1px solid var(--cor-borda);
  overflow: hidden;
  padding-block: 0;                  /* evita padding duplo com section base; o .container controla */
}
.hero .container { padding-block: 40px 52px; }
.hero-grid { display: grid; gap: 36px; align-items: center; }
.hero .tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cor-destaque);
  border: 1px solid var(--cor-destaque);
  color: #fff;
  padding: 8px 15px; border-radius: 999px;
  font-weight: 700; font-size: .82rem; letter-spacing: .03em;
  margin-bottom: 22px;
  box-shadow: 0 6px 16px rgba(225, 29, 42, .28);
}
.hero h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.hero h1 .realce { color: var(--cor-destaque); }
.hero p { margin-top: 18px; font-size: clamp(1.05rem, 2.4vw, 1.2rem); color: var(--cor-texto-suave); max-width: 560px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-selos { display: flex; flex-wrap: wrap; gap: 14px 24px; margin-top: 30px; }
.hero-selo { display: flex; align-items: center; gap: 9px; color: var(--cor-texto-suave); font-weight: 600; font-size: .92rem; }
.hero-selo svg { width: 20px; height: 20px; color: var(--cor-destaque); flex: none; }

/* Palco grafite: dá chão e contraste ao produto (mesma linguagem da faixa de credibilidade). */
.hero-img {
  position: relative;
  isolation: isolate;
  padding: clamp(18px, 3.4vw, 40px);
  border-radius: 26px;
  background: linear-gradient(158deg, #1c2431 0%, #12161f 55%, #0d1017 100%);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 30px 60px -26px rgba(13, 16, 23, .6);
  overflow: hidden;
}
.hero-img::before {                 /* textura industrial sutil */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: repeating-linear-gradient(45deg,
    rgba(255, 255, 255, .045) 0 2px, transparent 2px 10px);
  opacity: .7;
}
.hero-img::after {                  /* luz de topo, como um palco */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 75% at 50% -5%, rgba(255, 255, 255, .07), transparent 62%);
}
.hero-img img {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: contain;              /* botina inteira, sem cortar sola/biqueira */
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .42);
  border: 0;
}
/* Mobile/tablet (coluna única): o produto lidera, para o impacto vir já na abertura. */
@media (max-width: 899px) {
  .hero-img { order: -1; }
}
/* Selo CA / NR-6 sobreposto à foto */
.hero-selo-ca {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 86px; height: 86px; border-radius: 50%;
  background: var(--cor-destaque); color: #fff;
  display: grid; place-content: center; text-align: center;
  line-height: 1.05; box-shadow: 0 8px 20px rgba(225, 29, 42, .35);
  font-weight: 700; font-size: .72rem; letter-spacing: .1em;
}
.hero-selo-ca strong { display: block; font-size: 1.6rem; font-weight: 800; letter-spacing: 0; }

/* ============================== SOBRE =================================== */
/* Intro em coluna única: as provas/números vivem na faixa de Credibilidade. */
.sobre-grid { display: grid; gap: 20px; max-width: 720px; margin-inline: auto; }
.sobre-texto p { color: var(--cor-texto-suave); margin-top: 14px; font-size: 1.05rem; }
.sobre-texto strong { color: var(--cor-texto); }

/* ========================= CREDIBILIDADE (faixa escura) ================= */
.cred {
  position: relative;
  isolation: isolate;                 /* contexto de empilhamento próprio */
  overflow: hidden;
  padding-block: clamp(64px, 9vw, 104px);
  background: linear-gradient(158deg, #1c2431 0%, #12161f 55%, #0d1017 100%);
  color: #fff;
}
/* Textura industrial sutil (fica no fundo, atrás da foto e do scrim). */
.cred::after {
  content: "";
  position: absolute; inset: 0; z-index: -3;
  background-image: repeating-linear-gradient(45deg,
    rgba(255,255,255,.035) 0 2px, transparent 2px 9px);
  opacity: .6;
}
.cred-foto {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.cred.sem-foto .cred-foto { display: none; }
/* Scrim: garante contraste do texto (mais escuro à esquerda, onde fica o conteúdo). */
.cred-scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    rgba(9,12,17,.94) 0%, rgba(9,12,17,.86) 42%, rgba(9,12,17,.58) 100%);
}

.cred-inner { position: relative; max-width: 680px; }

.cred-kicker {
  display: flex; align-items: center; gap: 12px;
  font-weight: 600; font-size: 1rem;
  color: rgba(255,255,255,.9);
  margin-bottom: 18px;
}
.cred-rule { width: 34px; height: 3px; border-radius: 999px; background: var(--cor-destaque); flex: none; }

.cred h2 {
  font-size: clamp(1.75rem, 4.4vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: #fff;
}
.cred-lead {
  margin-top: 16px;
  font-size: clamp(1.05rem, 2.2vw, 1.18rem);
  line-height: 1.7;
  letter-spacing: .01em;
  color: rgba(255,255,255,.85);
  max-width: 60ch;
  text-wrap: pretty;
}

/* Provas: lista de credenciais dividida (não é grade de cards).
   Ícone + título numa linha centralizada; descrição alinhada sob o título. */
.cred-provas {
  margin-top: 32px;
  display: grid;
  border-top: 1px solid rgba(255,255,255,.12);
}
.cred-prova {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 2px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.cred-prova-head { display: flex; align-items: center; gap: 14px; }
.cred-ic {
  flex: none; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(225,29,42,.16);
  color: var(--cor-destaque);
}
.cred-ic svg { width: 24px; height: 24px; }
.cred-prova strong { font-size: 1.12rem; font-weight: 800; line-height: 1.2; color: #fff; }
.cred-prova-desc {
  padding-left: 60px;                 /* 46 do ícone + 14 do gap: alinha sob o título */
  font-size: .98rem; line-height: 1.55; color: rgba(255,255,255,.8);
}

.cred-setores { margin-top: 30px; }
.cred-setores-rotulo {
  display: block; margin-bottom: 12px;
  font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.cred-setores ul { display: flex; flex-wrap: wrap; gap: 9px; }
.cred-setores li {
  padding: 8px 15px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  font-size: .92rem; font-weight: 600; color: rgba(255,255,255,.92);
  transition: border-color var(--transicao), background var(--transicao);
}
.cred-setores li:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.1); }

.cred-ctas { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.cred-link {
  font-weight: 700; color: #fff;
  border-bottom: 2px solid rgba(255,255,255,.3);
  padding-bottom: 2px;
  transition: color var(--transicao), border-color var(--transicao);
}
.cred-link:hover { color: var(--cor-destaque); border-color: var(--cor-destaque); }
.cred-link span { display: inline-block; transition: transform var(--transicao); }
.cred-link:hover span { transform: translateX(4px); }

/* Enquadramento mais legível do scrim em telas pequenas. */
@media (max-width: 640px) {
  .cred-scrim {
    background: linear-gradient(180deg, rgba(9,12,17,.85) 0%, rgba(9,12,17,.92) 100%);
  }
}

/* Entrada ao rolar (progressive enhancement). Estado base já é visível;
   a animação só existe quando o JS adiciona .is-in ao entrar na viewport. */
@media (prefers-reduced-motion: no-preference) {
  .cred.is-in .cred-kicker,
  .cred.is-in h2,
  .cred.is-in .cred-lead,
  .cred.is-in .cred-setores,
  .cred.is-in .cred-ctas { animation: credRise .7s var(--ease-out-quint) both; }
  .cred.is-in .cred-lead    { animation-delay: .08s; }
  .cred.is-in .cred-setores { animation-delay: .28s; }
  .cred.is-in .cred-ctas    { animation-delay: .36s; }
  .cred.is-in .cred-prova {
    animation: credRise .55s var(--ease-out-quint) both;
    animation-delay: calc(.14s + var(--i) * .09s);
  }
  .cred.is-in .cred-foto { animation: credZoom 1.3s var(--ease-out-quint) both; }
}
@keyframes credRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes credZoom { from { transform: scale(1.07); } to { transform: scale(1); } }

/* ========================== DIFERENCIAIS ================================ */
.alt { background: var(--cor-superficie); }
.cards-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
.diferencial {
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 26px;
  box-shadow: var(--sombra-sm);
  transition: transform var(--transicao), border-color var(--transicao), box-shadow var(--transicao);
}
.diferencial:hover { transform: translateY(-4px); border-color: var(--cor-destaque); box-shadow: var(--sombra); }
.diferencial .icone {
  width: 52px; height: 52px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 16px;
  background: rgba(225, 29, 42, .09); color: var(--cor-destaque);
}
.diferencial .icone svg { width: 28px; height: 28px; }
.diferencial h3 { font-size: 1.15rem; }
.diferencial p { color: var(--cor-texto-suave); margin-top: 8px; font-size: .98rem; }

/* ============================ CATÁLOGO ================================= */
.catalogo-controles {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
  margin-bottom: 26px;
}
.filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.filtro-btn {
  padding: 9px 18px; border-radius: 999px;
  background: var(--cor-fundo); border: 1px solid var(--cor-borda);
  color: var(--cor-texto-suave); font-weight: 600; font-size: .92rem;
  transition: all var(--transicao);
}
.filtro-btn:hover { color: var(--cor-texto); border-color: var(--cor-texto-suave); }
.filtro-btn[aria-pressed="true"] {
  background: var(--cor-destaque); color: var(--cor-sobre-cor); border-color: var(--cor-destaque);
}
.busca-wrap { position: relative; display: flex; align-items: center; }
.busca-wrap svg {
  position: absolute; left: 14px; width: 18px; height: 18px;
  color: var(--cor-texto-suave); pointer-events: none;
}
.busca-input {
  padding: 11px 16px 11px 42px;
  background: var(--cor-fundo); border: 1px solid var(--cor-borda);
  border-radius: 999px; color: var(--cor-texto);
  min-width: 230px; font-size: .95rem;
}
.busca-input::placeholder { color: var(--cor-texto-suave); }

.produtos-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
.produto-card {
  display: flex; flex-direction: column;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
  transition: transform var(--transicao), border-color var(--transicao), box-shadow var(--transicao);
}
.produto-card:hover { transform: translateY(-5px); border-color: var(--cor-destaque); box-shadow: var(--sombra); }
/* Foto do produto em FUNDO BRANCO (estilo catálogo) */
.produto-card .foto { position: relative; aspect-ratio: 4 / 3; background: #ffffff; }
.produto-card .foto img { width: 100%; height: 100%; object-fit: cover; }
.produto-card .badge-ca {
  position: absolute; top: 12px; left: 12px;
  background: var(--cor-destaque); color: var(--cor-sobre-cor);
  font-weight: 700; font-size: .76rem; padding: 5px 11px; border-radius: 999px;
  box-shadow: var(--sombra-sm);
}
.produto-card .corpo { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; border-top: 1px solid var(--cor-borda); }
.produto-card .categoria {
  color: var(--cor-destaque); font-weight: 700; font-size: .78rem;
  letter-spacing: .08em; text-transform: uppercase;
}
.produto-card h3 { font-size: 1.12rem; }
.produto-card .resumo { color: var(--cor-texto-suave); font-size: .92rem; flex: 1; }
.produto-card .acoes { display: flex; gap: 10px; margin-top: 6px; }
.produto-card .acoes .btn { flex: 1; justify-content: center; padding: 10px 14px; font-size: .9rem; }

.sem-resultados {
  display: none;
  text-align: center; color: var(--cor-texto-suave);
  padding: 50px 20px; border: 1px dashed var(--cor-borda); border-radius: var(--raio);
}
.sem-resultados.visivel { display: block; }

/* ============================ MODAL DETALHE ============================= */
.modal {
  position: fixed; inset: 0; z-index: 1200;
  display: none;
  padding: 16px;
  align-items: center; justify-content: center;
}
.modal.aberto { display: flex; }
.modal-overlay {
  position: absolute; inset: 0;
  background: rgba(22, 28, 37, .55);
  backdrop-filter: blur(3px);
}
.modal-caixa {
  position: relative;
  width: 100%; max-width: 880px;
  max-height: 92vh; overflow-y: auto;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: 0 24px 60px rgba(22, 28, 37, .35);
}
.modal-fechar {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--cor-fundo); border: 1px solid var(--cor-borda);
  color: var(--cor-texto); display: grid; place-items: center;
  box-shadow: var(--sombra-sm);
}
.modal-fechar:hover { background: var(--cor-destaque); color: var(--cor-sobre-cor); border-color: var(--cor-destaque); }
.modal-fechar svg { width: 22px; height: 22px; }

.modal-grid { display: grid; grid-template-columns: 1fr; }
.modal-foto { aspect-ratio: 4 / 3; background: #ffffff; }
.modal-foto img { width: 100%; height: 100%; object-fit: cover; }
.modal-conteudo { padding: 24px; }
.modal-conteudo .categoria {
  color: var(--cor-destaque); font-weight: 700; font-size: .8rem;
  letter-spacing: .08em; text-transform: uppercase;
}
.modal-conteudo h3 { font-size: 1.5rem; margin: 6px 0 4px; }
.modal-ca {
  display: inline-block; margin: 8px 0 16px;
  background: rgba(225, 29, 42, .08); color: var(--cor-destaque);
  border: 1px solid rgba(225, 29, 42, .25);
  font-weight: 700; font-size: .85rem; padding: 5px 12px; border-radius: 999px;
}
.modal-conteudo .descricao { color: var(--cor-texto-suave); }
.ficha { margin: 20px 0; border-top: 1px solid var(--cor-borda); }
.ficha div {
  display: grid; grid-template-columns: 140px 1fr; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--cor-borda);
  font-size: .95rem;
}
.ficha dt { color: var(--cor-texto-suave); font-weight: 600; }
.ficha dd { color: var(--cor-texto); }
.modal-obs {
  background: rgba(225, 29, 42, .06); border: 1px solid rgba(225, 29, 42, .2);
  border-radius: var(--raio-sm); padding: 12px 14px; margin-bottom: 18px;
  font-size: .92rem; color: var(--cor-destaque-2);
}
.modal-cta .btn { width: 100%; justify-content: center; }

/* ============================ CONTATO ================================== */
.contato-grid { display: grid; gap: 28px; }
.contato-info { display: grid; gap: 14px; align-content: start; }
.contato-item { display: flex; gap: 14px; align-items: flex-start; }
.contato-item .ic {
  width: 44px; height: 44px; flex: none; border-radius: 11px;
  background: rgba(225, 29, 42, .09); color: var(--cor-destaque);
  display: grid; place-items: center;
}
.contato-item .ic svg { width: 22px; height: 22px; }
.contato-item h3 { font-size: 1rem; }
.contato-item p, .contato-item a { color: var(--cor-texto-suave); font-size: .98rem; }
.contato-item a:hover { color: var(--cor-destaque); }
.todo {
  display: inline-block; background: #fdecec; color: var(--cor-destaque-2);
  border: 1px dashed var(--cor-destaque); border-radius: 6px;
  padding: 1px 8px; font-size: .82rem; font-weight: 700;
}
.mapa {
  border: 1px solid var(--cor-borda); border-radius: var(--raio);
  overflow: hidden; min-height: 300px; background: var(--cor-superficie);
  box-shadow: var(--sombra-sm);
}
.mapa iframe { width: 100%; height: 100%; min-height: 300px; border: 0; display: block; }

/* ============================ RODAPÉ (escuro) ========================= */
.rodape { background: var(--cor-escuro); color: #c7cdd6; padding: 48px 0 24px; }
.rodape-grid { display: grid; gap: 30px; grid-template-columns: 1fr; }
.rodape .logo { color: #ffffff; }
.rodape .logo svg, .rodape .logo img { height: 38px; }
.rodape p { color: #9aa4b0; font-size: .92rem; margin-top: 12px; }
.rodape h4 { font-size: .95rem; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .06em; color: #ffffff; }
.rodape ul { display: grid; gap: 8px; }
.rodape ul li { color: #9aa4b0; font-size: .92rem; }
.rodape ul a { color: #9aa4b0; font-size: .92rem; }
.rodape ul a:hover { color: #ffffff; }
.redes { display: flex; gap: 10px; margin-top: 14px; }
.redes a {
  width: 42px; height: 42px; border-radius: 11px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12);
  display: grid; place-items: center; color: #ffffff;
  transition: all var(--transicao);
}
.redes a:hover { background: var(--cor-destaque); border-color: var(--cor-destaque); transform: translateY(-2px); }
.redes a svg { width: 22px; height: 22px; }
.rodape-base {
  margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between;
  color: #9aa4b0; font-size: .85rem;
}
.rodape-base .aviso strong { color: var(--cor-destaque); }

/* ===================== BOTÃO FLUTUANTE WHATSAPP ===================== */
.whats-flutuante {
  position: fixed; right: 18px; bottom: 18px; z-index: 1050;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--cor-whatsapp); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(22, 28, 37, .3);
  transition: transform var(--transicao);
}
.whats-flutuante:hover { transform: scale(1.08); }
.whats-flutuante svg { width: 32px; height: 32px; }

/* ============================ BREAKPOINTS ============================= */
@media (min-width: 560px) {
  .produtos-grid { grid-template-columns: repeat(2, 1fr); }
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .cabecalho-acoes .btn-rotulo-curto { display: inline; }
}

@media (min-width: 768px) {
  section { padding: 80px 0; }
  .hero .container { padding-block: 64px 84px; }
  .contato-grid { grid-template-columns: 1fr 1fr; }
  .modal-grid { grid-template-columns: 1fr 1fr; }
  .modal-foto { aspect-ratio: auto; min-height: 100%; }
  .rodape-grid { grid-template-columns: 1.6fr 1fr 1fr; }
}

@media (min-width: 900px) {
  .nav { display: block; }
  .menu-toggle { display: none; }
  .nav-mobile { display: none; } /* menu mobile não existe no desktop */
  .hero-grid { grid-template-columns: 1.05fr .95fr; }
  .produtos-grid { grid-template-columns: repeat(3, 1fr); }
  .cards-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .cards-grid.cinco { grid-template-columns: repeat(5, 1fr); }
}