/* =========================================================
   CAPITAL BANNER WINDBANNER — style.css
   Palette extraída da logo: azul profundo a ciano (o "monumento"/fita
   do símbolo é um degradê de azul, do azul-marinho ao azul-céu vibrante)
   + o cinza-metálico da silhueta do monumento. Como a marca é
   essencialmente monocromática (uma família de azul + neutro metálico),
   o --gold do template-base foi substituído pelo próprio --sky (o tom
   mais vibrante da logo) para eyebrows/CTAs sobre fundo escuro, e o
   --steel (cinza-metálico) entra como segundo acento, no lugar do verde,
   nos cards/tingimento — o verde fica reservado só para o WhatsApp.
   Tipografia: Sora (display, geométrica — ecoa as linhas retas do
   monumento da logo e a arquitetura de Brasília) + Manrope (corpo).
   ========================================================= */

:root {
  /* Cores da marca (derivadas da logo) */
  --blue:        #0B72B9;   /* azul médio — wordmark "CAPITAL BANNER" */
  --blue-deep:   #072A4D;   /* azul profundo — títulos e textos escuros (não mais usado como fundo de seção; ver --charcoal) */
  --green:       #1E9E5A;   /* verde universal — reservado ao WhatsApp */
  --sky:         #00AEEF;   /* azul-céu vibrante da logo — acento/CTA sobre fundo escuro */
  --steel:       #93A4B3;   /* cinza-metálico do monumento — 2º acento */
  --charcoal:       #2B3036;   /* fundo escuro neutro — footer, CTA final, hero overlay, campanhas (no lugar do azul-marinho) */
  --charcoal-light: #474D54;   /* variação mais clara, usada em gradientes decorativos sobre --charcoal */
  --cream:       #F3F7FB;   /* fundo claro, tom frio (céu/concreto de Brasília) */
  --ink:         #0A1E2E;   /* texto principal */
  --ink-soft:    #4C6478;   /* texto secundário */
  --white:       #FFFFFF;

  /* Cantos assimétricos (dois vivos, dois arredondados) — variação de
     linguagem visual em relação ao raio uniforme do template-base */
  --radius-sm: 6px;
  --radius-md: 6px 22px 6px 22px;
  --radius-lg: 8px 40px 8px 40px;
  --shadow-sm: 0 4px 16px rgba(7,42,77,0.08);
  --shadow-md: 0 12px 32px rgba(7,42,77,0.16);

  --font-display: 'Sora', sans-serif;
  --font-body: 'Manrope', sans-serif;

  --container: 1180px;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.1; letter-spacing: -0.2px; margin: 0 0 .5em; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Proteção de conteúdo (client-side) ---------- */
body.no-copy {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
body.no-copy img { -webkit-user-drag: none; pointer-events: auto; }

/* ---------- Eyebrow / labels ---------- */
.eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 10px;
}
.eyebrow--light { color: var(--sky); }

.section-title { font-size: clamp(1.6rem, 3.2vw, 2.4rem); color: var(--blue-deep); }
.section-title--light { color: var(--white); }
.section-lede { color: var(--ink-soft); max-width: 60ch; margin: 0 0 32px; font-size: 1.05rem; }

/* ---------- Buttons ---------- */
/* Botão retangular, com leve raio de canto (--radius-sm) — sem a ponta
   em clip-path usada antes. Como não há mais clip-path, as variantes
   "outline" podem voltar a usar border normalmente. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.btn--primary { background: var(--blue); color: var(--white); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--blue-deep); }
.btn--outline { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn--outline:hover { background: var(--blue); color: var(--white); }
.btn--outline-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,.5); }
.btn--outline-light:hover { background: rgba(255,255,255,.12); }
.btn--gold { background: var(--sky); color: var(--blue-deep); box-shadow: var(--shadow-sm); }
.btn--gold:hover { background: #33c2ff; }
.btn--whatsapp { background: var(--green); color: var(--white); padding: 10px 18px; font-size: .9rem; }
.btn--whatsapp svg { width: 18px; height: 18px; fill: currentColor; }
.btn--sm { padding: 10px 18px; font-size: 0.85rem; }
.btn--block { width: 100%; justify-content: center; }
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--green); flex-shrink: 0;
  transition: transform .18s ease;
}
.btn-icon:hover { transform: scale(1.08); }
.btn-icon svg { width: 22px; height: 22px; fill: var(--white); }

/* ================= HEADER ================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(245,248,251,0.98);
  border-bottom: 1px solid rgba(10,42,77,0.08);
}
.header__row { display: flex; align-items: center; justify-content: space-between; padding: 4px 24px; gap: 16px; }
.brand { padding: 0; }
.brand img { height: 80px; width: auto; display: block; }

.main-nav { flex: 1; display: flex; justify-content: center; }
.nav-menu { display: flex; align-items: center; gap: 28px; }
.nav-menu a { font-weight: 600; font-size: 0.95rem; color: var(--ink); position: relative; }
.nav-menu a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px;
  background: var(--sky); transition: width .2s ease;
}
.nav-menu a:hover::after { width: 100%; }
.nav-cta { background: var(--blue); color: var(--white) !important; padding: 8px 18px; border-radius: var(--radius-sm); }
.nav-cta::after { display: none; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 8px; z-index: 101; }
.nav-toggle span { width: 26px; height: 3px; background: var(--blue-deep); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.header__whatsapp { flex-shrink: 0; }

/* ================= HERO ================= */
.hero {
  position: relative;
  background:
    linear-gradient(180deg, rgba(43,48,54,.85) 0%, rgba(20,22,25,.94) 100%),
    url('../assets/img/brasilia-df.webp') center 42% / cover no-repeat;
  padding: 60px 0 0;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 60% 40%;
  align-items: center;
  gap: 40px;
  padding-bottom: 40px;
}
.hero .eyebrow { color: var(--sky); }
.hero__title {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  color: var(--white);
  display: flex;
  flex-direction: column;
}
.hero__title--single { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.12; letter-spacing: -0.3px; }
.hero__title-line1 { color: var(--sky); font-size: calc(1em - 2px); }
.hero__title-line2 { color: var(--white); font-size: calc(1em + 4px); }
.hero__subtitle { font-family: var(--font-body); font-weight: 600; font-size: 1.2rem; color: #EDEFF1; margin: 18px 0 8px; }
.hero__lede { color: rgba(234,243,251,.9); font-size: 1.15rem; font-weight: 500; max-width: 50ch; margin: 26px 0 32px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__visual { display: flex; justify-content: center; }
.hero__visual img { max-height: 480px; width: auto; filter: drop-shadow(0 20px 40px rgba(10,42,77,.25)); }

/* Assinatura: as flags "balançam" como se estivessem ao vento */
@keyframes flagSway {
  0%   { transform: rotate(-2.5deg) translateY(0); }
  50%  { transform: rotate(2deg) translateY(-4px); }
  100% { transform: rotate(-2.5deg) translateY(0); }
}
.flag-sway {
  transform-origin: bottom center;
  animation: flagSway 5.5s ease-in-out infinite;
  will-change: transform;
}
.model-card:hover .flag-sway,
.model-card:focus-within .flag-sway { animation-duration: 1.8s; }

/* Divisor de seção — bandeirolas triangulares (bunting), no lugar da
   fita ondulada do template-base: motivo mais literal ao produto
   (windbanners/flâmulas) e às linhas retas do monumento da logo.
   overflow:hidden no elemento pai + sobreposição negativa evitam seams
   (ver armadilha de frestas em mobile). */
.wave-divider { display: block; width: 100%; height: 92px; margin: -1px 0 -3px; }
/* A trama de triângulos não cobre 100% da altura do SVG — sobra uma
   fatia sem pintura nenhuma (o "vão" acima dos picos mais altos). No
   hero isso não importa: o próprio fundo do .hero já aparece atrás,
   sem precisar de nada aqui. No rodapé, porém, esse vão ficava preto
   (cor padrão de fill do SVG) bem na linha de baixo do divisor — dava
   a impressão de uma linha reta "cortando" o divisor, com as ondas
   flutuando acima dela em vez de estarem exatamente na costura. Por
   isso o backing só recebe cor sólida (--charcoal) no contexto do
   rodapé, que tem `scaleY(-1)` e por isso esse vão cai embaixo. */
.wave-divider__backing { fill: transparent; }
.site-footer .wave-divider__backing { fill: var(--charcoal); }
.wave-divider__ribbon--green { fill: var(--steel); opacity: .55; }
.wave-divider__ribbon--gold  { fill: var(--sky); opacity: .85; }
.wave-divider__ribbon--sky   { fill: var(--cream); }
.site-footer .wave-divider { transform: scaleY(-1); }
.site-footer .wave-divider__ribbon--sky { fill: var(--charcoal); }

/* ================= SECTIONS GENERIC ================= */
.section { padding: 80px 0; }
.diferenciais { background: var(--cream); padding-top: 40px; }

.cards-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 24px; counter-reset: diferencial; }
.mini-card {
  background: var(--white); border-radius: var(--radius-md); padding: 28px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
}
.mini-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
/* Selo numerado (01, 02...) no lugar do ícone emoji — referência às
   placas/marcos numerados da arquitetura institucional de Brasília. */
.mini-card__icon {
  counter-increment: diferencial;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: var(--blue-deep); color: var(--sky);
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%);
}
.mini-card__icon::before { content: counter(diferencial, decimal-leading-zero); }
.mini-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--blue-deep); margin: 14px 0 6px; }
.mini-card p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }

.beneficios { background: var(--white); }
.beneficios__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 32px; }
.beneficio { border-left: 4px solid var(--green); padding-left: 18px; }
.beneficio:nth-child(2n) { border-left-color: var(--sky); }
.beneficio:nth-child(3n) { border-left-color: var(--steel); }
.beneficio h3 { font-family: var(--font-display); font-weight: 700; color: var(--blue-deep); font-size: 1.1rem; margin-bottom: 6px; }
.beneficio p { color: var(--ink-soft); margin: 0; }

/* ---------- Campanhas políticas ---------- */
.campanhas {
  background: radial-gradient(circle at 20% 20%, var(--charcoal-light) 0%, var(--charcoal) 60%);
  color: var(--white);
  position: relative;
}
.campanhas__grid { max-width: 760px; }
.campanhas__text { color: #CBD0D4; margin-bottom: 16px; }
.campanhas__text strong { color: var(--sky); }

/* ---------- Modelos ---------- */
.models-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.model-card {
  background: var(--white); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease;
  display: flex; flex-direction: column;
  position: relative;
}
.model-card:hover, .model-card:focus-visible { transform: translateY(-8px); box-shadow: var(--shadow-md); outline: none; }
.model-card__media { background: var(--white); padding: 22px; display: flex; align-items: flex-end; justify-content: center; height: 240px; }
.model-card__media img { height: 100%; width: auto; object-fit: contain; transition: filter .25s ease; }
/* Tingimento calibrado por mapa explícito slug → classe (não por índice
   par/ímpar) — algumas fotos de estoque não migram bem para todas as
   cores via hue-rotate (ver playbook, seção 2.5). "flag-tint-blue" usa
   hue-rotate para o azul da marca; "flag-tint-steel" usa grayscale puro
   (mais confiável — evita o artefato esverdeado que hue-rotate produzia
   no destaque/brilho central da foto do modelo Ball, ecoando o cinza-
   metálico do monumento na logo). */
.flag-tint-blue  { filter: hue-rotate(205deg) saturate(1.5) brightness(1.05); }
.flag-tint-steel { filter: grayscale(1) brightness(1.15) contrast(1.05); }
.model-card:hover .flag-tint-blue,
.model-card:focus-within .flag-tint-blue { filter: hue-rotate(205deg) saturate(1.7) brightness(1.1); }
.model-card:hover .flag-tint-steel,
.model-card:focus-within .flag-tint-steel { filter: grayscale(1) brightness(1.22) contrast(1.08); }
/* Canto dobrado triangular no lugar da tarja lisa no topo do card —
   truque de triângulo CSS via ::before, ecoando a ponta do monumento
   da logo e a ponta triangular dos próprios windbanners. */
.model-card::before {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 34px 34px 0;
  border-color: transparent var(--blue) transparent transparent;
  z-index: 1;
  transition: border-color .2s ease;
}
.model-card__body { padding: 22px 22px 24px; }
.model-card__body h3 { font-family: var(--font-display); font-weight: 700; color: var(--blue-deep); font-size: 1.15rem; margin-bottom: 10px; }
.model-card__sizes { display: flex; gap: 8px; margin-bottom: 18px; }
.chip { background: var(--cream); border: 1px solid #DCE7F2; color: var(--blue); font-size: .8rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.model-card__actions { display: flex; align-items: center; gap: 10px; }
.model-card__actions .btn--sm { flex: 1; justify-content: center; }

/* ---------- Galeria (carrossel) ---------- */
.gallery-carousel { position: relative; display: flex; align-items: center; gap: 12px; padding: 0 24px; max-width: var(--container); margin: 0 auto; }
.gallery-track {
  display: flex; gap: 20px; flex: 1; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; padding: 4px 0 12px;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-item {
  flex: 0 0 calc((100% - 3 * 20px) / 4);
  scroll-snap-align: start;
  position: relative; border: none; padding: 0; border-radius: var(--radius-md); overflow: hidden;
  background: var(--white); aspect-ratio: 4/3; box-shadow: var(--shadow-sm);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.gallery-item:hover img { transform: scale(1.07); }

.carousel-btn {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; border: none;
  background: var(--white); color: var(--blue); box-shadow: var(--shadow-sm);
  font-size: 1rem; display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.carousel-btn:hover { background: var(--blue); color: var(--white); transform: scale(1.06); }
.carousel-btn:disabled { opacity: .35; cursor: default; pointer-events: none; }

.lightbox {
  position: fixed; inset: 0; background: rgba(10,20,33,.92); z-index: 999;
  display: flex; align-items: center; justify-content: center; padding: 40px;
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: 720px; text-align: center; }
.lightbox img { max-height: 75vh; margin: 0 auto; border-radius: var(--radius-md); }
.lightbox figcaption { color: var(--white); margin-top: 14px; font-weight: 700; }
.lightbox__close {
  position: absolute; top: 20px; right: 28px; background: none; border: none;
  color: var(--white); font-size: 2.4rem; line-height: 1; z-index: 2;
}

/* ---------- Clientes marquee ---------- */
.clientes { background: var(--white); text-align: center; }
.clientes .container { margin-bottom: 20px; }
.marquee { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee__item { flex: 0 0 auto; width: 160px; padding: 0 26px; display: flex; align-items: center; justify-content: center; }
.marquee__item img { max-height: 60px; width: auto; filter: grayscale(1); opacity: .7; transition: filter .2s ease, opacity .2s ease; }
.marquee__item img:hover { filter: grayscale(0); opacity: 1; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Orçamento ---------- */
.orcamento { background: var(--cream); }
.orcamento__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: start; }
.form { background: var(--white); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 18px; }
.form__row { display: flex; flex-direction: column; gap: 6px; }
.form__row label { font-weight: 700; font-size: .9rem; color: var(--blue-deep); }
.form__row input, .form__row select, .form__row textarea {
  border: 1.5px solid #DCE7F2; border-radius: var(--radius-sm); padding: 12px 14px;
  font-family: var(--font-body); font-size: 0.95rem; background: var(--cream); color: var(--ink);
  transition: border-color .18s ease, background .18s ease;
}
.form__row input:focus, .form__row select:focus, .form__row textarea:focus {
  outline: none; border-color: var(--blue); background: var(--white);
}
.form__row input:invalid:not(:placeholder-shown) { border-color: #E0554B; }
#modelo.is-highlighted { border-color: var(--sky); box-shadow: 0 0 0 4px rgba(0,174,239,.3); }
.form__feedback { min-height: 1.4em; font-weight: 600; font-size: .9rem; }
.form__feedback.is-success { color: var(--green); }
.form__feedback.is-error { color: #C4342A; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ================= FOOTER ================= */
.site-footer { background: var(--charcoal); color: #C9D0D6; overflow: hidden; }
.cta-final { background: var(--charcoal); padding: 88px 0 96px; }
.cta-final__inner { text-align: center; }
.cta-final h2 { color: var(--white); font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-bottom: 36px; }
.cta-final .hero__cta { justify-content: center; }

.footer__grid { display: grid; grid-template-columns: 0.6fr 0.85fr 1fr 1fr; gap: 24px; padding: 50px 24px; align-items: start; }
.footer__col h3 { font-family: var(--font-display); color: var(--white); font-size: 1rem; font-weight: 700; margin-bottom: 10px; }
.footer__col p { margin: 0 0 6px; font-size: .92rem; }
.footer__col p svg { vertical-align: middle; margin-right: 6px; position: relative; top: -1px; }
.footer__col a:hover { color: var(--sky); }
/* E-mail é uma "palavra" só (sem espaços): sem quebra explícita ela
   ultrapassa a coluna e, como .site-footer tem overflow:hidden (para
   não vazar o divisor de seção), o texto fica cortado e invisível —
   ver armadilha no playbook. O e-mail deste cliente é relativamente
   longo, então a coluna de contato recebe mais espaço no grid abaixo. */
.footer__col a[href^="mailto:"] { word-break: break-word; overflow-wrap: break-word; }
.footer__logo { margin-bottom: 8px; }
.footer__social { display: flex; gap: 14px; margin-top: 10px; }
.footer__social a { font-size: .85rem; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.3); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 18px 0; text-align: center; font-size: .82rem; color: #8A9096; }

/* ---------- Floating WhatsApp ---------- */
.floating-whatsapp {
  position: fixed; right: 22px; bottom: 22px; z-index: 200;
  width: 58px; height: 58px; border-radius: 50%; background: var(--green);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(10,42,77,.35);
  animation: floatPulse 2.6s ease-in-out infinite;
}
.floating-whatsapp svg { width: 30px; height: 30px; fill: var(--white); }
@keyframes floatPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
  .brand img { height: 60px; }
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__cta { justify-content: center; }
  .hero__visual img { max-height: 320px; }
  .cards-row { grid-template-columns: repeat(2, 1fr); }
  .beneficios__grid { grid-template-columns: repeat(2, 1fr); }
  .models-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item { flex-basis: calc((100% - 20px) / 2); }
  .orcamento__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .brand img { height: 46px; }
  .hero__title--single { font-size: clamp(1.5rem, 6.5vw, 2.1rem); }
  .header__row { flex-wrap: wrap; }
  .main-nav { order: 3; position: fixed; inset: 72px 0 0 0; background: var(--cream); padding: 24px; transform: translateY(-120%); opacity: 0; visibility: hidden; transition: transform .25s ease, opacity .25s ease, visibility .25s; z-index: 90; }
  .main-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav-menu { flex-direction: column; align-items: flex-start; gap: 20px; }
  .nav-toggle { display: flex; order: 2; }
  .header__whatsapp { order: 1; }
  .header__whatsapp span { display: none; }
  .cards-row, .beneficios__grid, .models-grid { grid-template-columns: 1fr; }
  .gallery-item { flex-basis: 82%; }
  .gallery-carousel { padding: 0 12px; }
  .carousel-btn { width: 38px; height: 38px; }
  .footer__grid { grid-template-columns: 1fr; text-align: center; }
  .footer__col a[href^="mailto:"] { font-size: .85rem; }
  .footer__social { justify-content: center; }
  .footer__col { align-items: center; display: flex; flex-direction: column; }
}