/* =========================================================
   DROGARIA SANTA RITA — Landing Page
   Arquitetura: BEM Lite + CSS Variables
   Abordagem: Mobile First
   =========================================================
   ÍNDICE
   01. Variáveis de tema (:root)
   02. Reset
   03. Utilitários de layout
   04. Botões (.btn + modificadores)
   05. Header / Nav
   06. Hero
   07. Marquee
   08. Features
   09. Comparison (Problema x Solução)
   10. Reviews
   11. Location
   12. FAQ
   13. Bottom CTA
   14. Footer
   15. Elementos flutuantes
   16. Acessibilidade
   ========================================================= */


/* =========================================================
   01. VARIÁVEIS DE TEMA
   ========================================================= */
:root{
  /* Fontes — a pilha de fallback evita salto feio enquanto a web font carrega */
  /* Montserrat: mesma família geométrica do lettering "SANTA RITA" da logo
     — contornos fechados, terminais retos. Alinha o título ao logotipo. */
  --font-display: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Paleta — identidade Drogaria Santa Rita */
  --color-primary: #E30613;        /* vermelho da marca */
  --color-primary-dark: #B00410;
  --color-primary-darker: #7d0209;
  --color-yellow: #FFC20E;         /* amarelo/dourado CTA (tagline) */
  --color-yellow-dark: #E0A800;
  --color-whatsapp: #25D366;
  --color-whatsapp-dark: #1da851;

  --color-dark: #1c1417;
  --color-text: #23201f;
  --color-muted: #6a6360;
  --color-line: #ece7e5;
  --color-bg: #ffffff;
  --color-bg-soft: #fbf6f5;
  --color-bg-red-soft: #fff2f2;
  --color-primary-soft-border: #ffd0d0;   /* bordas rosadas de destaque */

  /* Sistema */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 26px;
  --shadow-sm: 0 2px 10px rgba(0,0,0,.06);
  --shadow-md: 0 10px 30px rgba(0,0,0,.10);
  --shadow-red: 0 12px 30px rgba(227,6,19,.28);
  --container: 1180px;
  --header-h: 68px;
}


/* =========================================================
   02. RESET
   ========================================================= */
*,
*::before,
*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--font-body);
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.6;
  font-size:16px;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

h1,h2,h3{
  font-family:var(--font-display);
  line-height:1.12;
  font-weight:700;
}


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

.section{
  padding:64px 0;
  /* Âncoras (#faq, #localizacao…) param abaixo do header fixo,
     em vez de esconder o título da seção atrás dele. */
  scroll-margin-top:calc(var(--header-h) + 12px);
}
.section--soft{ background:var(--color-bg-soft); }

/* Adia render/layout das seções fora da viewport.
   contain-intrinsic-size evita salto na barra de rolagem. */
.section--defer{
  content-visibility:auto;
  contain-intrinsic-size:auto 700px;
}

.section__head{
  text-align:center;
  max-width:720px;
  margin:0 auto 40px;
}
.section__head h2{
  /* Menor que o H1 do hero em qualquer tela → hierarquia clara */
  font-size:clamp(1.45rem, 4.6vw, 2.3rem);
  margin:14px 0 12px;
}
.section__head p{
  color:var(--color-muted);
  font-size:1.02rem;
}

.badge{
  display:inline-block;
  font-family:var(--font-display);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--color-primary);
  background:var(--color-bg-red-soft);
  border:1px solid var(--color-primary-soft-border);
  padding:7px 16px;
  border-radius:999px;
}


/* =========================================================
   04. BOTÕES — base + modificadores
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-family:var(--font-display);
  font-weight:600;
  border:none;
  cursor:pointer;
  border-radius:999px;
  line-height:1;
  white-space:nowrap;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn svg{ width:1.15em; height:1.15em; flex:none; }

/* Modificadores de tamanho */
.btn--md{ padding:12px 22px; font-size:.95rem; }
.btn--lg{ padding:17px 32px; font-size:1.1rem; }

/* Modificadores de cor */
.btn--yellow{
  background:var(--color-yellow);
  color:#231c00;
  box-shadow:0 8px 22px rgba(255,194,14,.4);
}
.btn--yellow:hover{ background:var(--color-yellow-dark); }

.btn--whatsapp{
  background:var(--color-whatsapp);
  color:#fff;
  box-shadow:0 8px 22px rgba(37,211,102,.38);
}
.btn--whatsapp:hover{ background:var(--color-whatsapp-dark); }

.btn--outline{
  background:transparent;
  color:var(--color-primary);
  border:2px solid currentColor;
}

/* Modificador de largura */
.btn--block{ width:100%; }


/* =========================================================
   05. HEADER / NAV
   ========================================================= */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  background:transparent;
  transition:background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}

/* Estado ativado via JS ao rolar > 20px */
.nav.scrolled{
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:0 2px 18px rgba(0,0,0,.08);
}

.nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:var(--header-h);
}

/* A arte do hero já traz o logo impresso: a logo do header
   só aparece depois que a página rola, evitando duplicidade. */
.nav__logo{
  display:flex;
  align-items:center;
  /* A logo traz o próprio fundo vermelho: o raio + overflow transformam
     o recorte numa placa da marca sobre o header branco. */
  border-radius:8px;
  overflow:hidden;
  opacity:0;
  visibility:hidden;          /* fora do tab order enquanto invisível */
  transform:translateY(-6px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.nav.scrolled .nav__logo{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* Altura fixa + largura automática: a proporção 477x114 é preservada
   e o header não muda de altura em nenhuma tela. */
.nav__logo img{
  display:block;
  height:32px;
  width:auto;
}
@media(min-width:600px){
  .nav__logo img{ height:40px; }
}

.nav__cta{ display:none; }
@media(min-width:480px){
  .nav__cta{ display:inline-flex; }
}


/* =========================================================
   06. HERO
   ========================================================= */
.hero{
  position:relative;
  background:var(--color-primary);
  color:#fff;
}

/* A altura vem da própria imagem (width/height no <img>) → zero CLS */
.hero__media{ position:relative; }

.hero__art{ display:block; }

/* A arte NUNCA é cortada: largura total + altura automática preservam
   a proporção original do arquivo. Sem object-fit, sem crop.
   O aspect-ratio reserva a caixa certa mesmo antes do download —
   não depende do suporte a width/height no <source>, que falha em
   navegadores antigos e causaria salto de layout. */
.hero__art img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:343 / 743;        /* arte vertical (mobile) */
}
@media(min-width:600px){
  .hero__art img{ aspect-ratio:2560 / 900; }   /* arte horizontal */
}

/* Camada de texto sobre a área vazia da arte.
   top em % é relativo à ALTURA do .hero__media, então a posição
   acompanha a arte em qualquer largura de tela. */
.hero__inner{
  position:absolute;
  /* Faixa livre da arte mobile: logo termina em 10,2%, a farmacêutica e as
     cápsulas começam em 59,9%. O texto é ancorado nos dois extremos e o flex
     centraliza dentro — assim ele nunca invade o logo nem a farmacêutica,
     em nenhuma largura de tela. */
  top:11.5%;
  bottom:41.5%;         /* = 100% - 58,5%, uma margem antes das cápsulas */
  left:0; right:0;
  z-index:2;
  display:flex;
  align-items:center;
}

.hero__content{ max-width:560px; }

.hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--font-display);
  font-size:.8rem;
  font-weight:600;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:16px;
}

.hero__title{
  /* 800 = peso do lettering "SANTA RITA". Montserrat corre mais largo que a
     fonte anterior, então o teto do clamp desce para não estourar linhas. */
  font-weight:800;
  letter-spacing:-.015em;
  font-size:clamp(1.55rem, 6.6vw, 2.9rem);
  margin-bottom:12px;
  text-shadow:0 2px 12px rgba(0,0,0,.18);
}
.hero__title span{ color:var(--color-yellow); }

.hero__subtitle{
  font-size:1rem;
  color:#fff;                 /* sobre vermelho, opacidade derruba o contraste */
  margin-bottom:20px;
  max-width:460px;
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
}

.hero__status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.9rem;
  font-weight:700;
}
/* Estado calculado via JS a partir dos horários reais da loja */
.hero__status.is-closed .hero__dot{ background:#ffd08a; }
.hero__status.is-closed .hero__dot::after{ animation:none; opacity:0; }
/* Anel pulsante feito com transform+opacity (composto na GPU).
   Animar box-shadow forçaria repaint a cada frame — caro no celular. */
.hero__dot{
  position:relative;
  width:10px; height:10px;
  border-radius:50%;
  background:#3bff8f;
  flex:none;
}
.hero__dot::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:#3bff8f;
  animation:ping 2s cubic-bezier(0, 0, .2, 1) infinite;
}

/* Faixa jurídica logo abaixo da arte — nunca sobrepõe a farmacêutica */
/* Telas estreitas (≤359px): a arte mobile tem proporção 343x743, então a
   faixa livre entre o logo e a farmacêutica encolhe junto com a largura —
   a 320px sobram ~326px de altura útil. Sem esta redução o eyebrow sobe
   por cima do logo impresso. Nada é cortado: só o texto fica mais compacto. */
@media(max-width:359px){
  .hero__eyebrow{
    font-size:.72rem;
    padding:5px 11px;
    margin-bottom:10px;
  }
  .hero__title{
    font-size:clamp(1.32rem, 6.2vw, 2.9rem);
    margin-bottom:8px;
  }
  .hero__subtitle{
    font-size:.92rem;
    line-height:1.45;
    margin-bottom:14px;
  }
  .hero__actions{ gap:10px; }
  .btn--lg{ padding:12px 20px; font-size:.95rem; }
}

.hero__footer{
  background:linear-gradient(180deg, var(--color-primary), var(--color-primary-dark));
  padding:14px 0 16px;
}
.hero__legal{
  font-size:.72rem;
  color:#fff;                 /* opacidade cheia: sobre vermelho, qualquer
                                 transparência derruba o contraste abaixo de AA */
  text-align:center;
}

@keyframes ping{
  from{ transform:scale(1);   opacity:.7; }
  to  { transform:scale(2.6); opacity:0; }
}

/* Tablet e notebook (600–1279px): a arte horizontal tem proporção 2560x900,
   ou seja, altura = largura / 2,84. Abaixo de ~1100px ela fica com menos de
   388px de altura — que é o espaço que o bloco de texto ocupa. Sobrepor aqui
   faria o texto vazar para fora da imagem.
   Então: arte inteira em cima (sem corte) e o texto num bloco vermelho abaixo. */
@media(min-width:600px) and (max-width:1279px){
  .hero__inner{
    position:static;
    padding-top:30px;
    padding-bottom:10px;
  }
  .hero__content{ max-width:660px; }
  .hero__title{ font-size:clamp(1.75rem, 3.9vw, 2.4rem); }
  .hero__subtitle{ font-size:1.05rem; max-width:560px; }
}

/* Desktop largo (≥1280px): a arte passa de 445px de altura e comporta o
   texto sobreposto com folga. Farmacêutica à direita → texto à esquerda. */
@media(min-width:1280px){
  /* O texto ocupa a faixa ENTRE o logo impresso na arte (termina em
     ~16% da altura) e a linha jurídica no rodapé (~64px). Com top e
     bottom fixados, a caixa tem altura definida e o flex centraliza o
     conteúdo dentro dela — nada escorrega para cima do logo nem para
     cima do endereço, em nenhuma largura. */
  .hero__inner{
    top:16%;
    bottom:64px;
    display:flex;
    align-items:center;
  }
  .hero__content{ max-width:56%; }
  /* Título menor que o teto anterior (3.2rem): naquele tamanho ele
     quebrava em 3 linhas e o bloco não cabia mais na arte. */
  .hero__title{ font-size:clamp(2rem, 2.75vw, 2.5rem); }
  .hero__subtitle{ font-size:1.05rem; }

  /* A linha jurídica sai da faixa sólida e passa a flutuar sobre a
     própria arte, no canto inferior esquerdo — área de vermelho limpo,
     longe da farmacêutica. Como fica absoluta, não ocupa altura: o
     hero termina exatamente onde a imagem termina.
     Abaixo de 1280px a faixa continua vermelha e no fluxo, porque lá
     ela é o fundo do próprio bloco de texto do hero. */
  .hero__footer{
    position:absolute;
    left:0; right:0; bottom:0;
    z-index:2;
    background:none;
    padding:0 0 20px;
  }
  .hero__legal{
    color:#fff;
    text-align:left;
    /* a arte tem gradiente e traços atrás; a sombra garante leitura */
    text-shadow:0 1px 6px rgba(0,0,0,.5);
  }
}



/* =========================================================
   07. MARQUEE / TICKER
   ========================================================= */
.marquee{
  background:var(--color-dark);
  color:#fff;
  overflow:hidden;
  white-space:nowrap;
  padding:13px 0;
}

.marquee__track{
  /* flex + max-content: os grupos ficam lado a lado sem quebra e sem os
     espaços em branco que o inline-block herdava do HTML. */
  display:flex;
  width:max-content;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.02em;
  animation:marquee var(--marquee-time, 22s) linear infinite;
}
.marquee__group{ display:flex; flex:0 0 auto; }
.marquee__track span{ padding:0 8px; }
.marquee__sep{ color:var(--color-yellow); }

/* Fora da viewport a animação para — não gasta bateria à toa */
.marquee__track.is-paused{ animation-play-state:paused; }

/* --marquee-shift = largura de um grupo, medida pelo JS. O fallback de 50%
   vale para os dois grupos do HTML quando o JS não roda. */
@keyframes marquee{
  from{ transform:translateX(0); }
  to  { transform:translateX(calc(-1 * var(--marquee-shift, 50%))); }
}


/* =========================================================
   08. FEATURES
   ========================================================= */
.features__grid{
  display:grid;
  gap:20px;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}

.card{
  background:#fff;
  border:1px solid var(--color-line);
  border-radius:var(--radius);
  padding:26px;
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:var(--color-primary-soft-border);
}

.card__icon{
  width:52px; height:52px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--color-bg-red-soft);
  color:var(--color-primary);
  margin-bottom:16px;
}
.card__icon svg{ width:26px; height:26px; }

.card__header{
  font-family:var(--font-display);
  font-size:1.18rem;
  font-weight:600;
  margin-bottom:8px;
}
.card__text{
  color:var(--color-muted);
  font-size:.95rem;
}


/* =========================================================
   09. COMPARISON — Problema x Solução
   ========================================================= */
.comparison__grid{ display:grid; gap:24px; }
@media(min-width:820px){
  .comparison__grid{ grid-template-columns:1fr 1fr; align-items:stretch; }
}

.compare{ border-radius:var(--radius); padding:30px; }
.compare--problem{ background:#fff; border:1px solid var(--color-line); }
.compare--solution{
  background:var(--color-primary);
  color:#fff;
  box-shadow:var(--shadow-red);
}

.compare__title{
  font-size:1.4rem;
  margin-bottom:20px;
  display:flex;
  align-items:center;
  gap:10px;
}

.compare__list li{
  display:flex;
  gap:12px;
  margin-bottom:14px;
  align-items:flex-start;
}
.compare__list svg{ width:22px; height:22px; flex:none; margin-top:1px; }
.compare--problem .compare__list svg{ color:#c9c2c0; }

/* Passo a passo numerado.
   O <ol> continua sendo lista ordenada (semântica preservada), mas o
   marcador nativo sai: quem numera é o counter no ::before, senão o
   número apareceria duas vezes — "1. ①". */
.steps{
  counter-reset:step;
  list-style:none;
}
.steps li{
  position:relative;
  padding-left:48px;
  margin-bottom:18px;
}
.steps li::before{
  counter-increment:step;
  content:counter(step);
  position:absolute;
  left:0; top:-2px;
  width:34px; height:34px;
  border-radius:50%;
  background:var(--color-yellow);
  color:#231c00;
  font-family:var(--font-display);
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}
.steps li strong{
  display:block;
  font-family:var(--font-display);
  font-size:1.05rem;
}
.steps li span{
  font-size:.92rem;
  color:#fff;                 /* opacidade sobre vermelho reprova em contraste */
}

.compare--solution .btn{ margin-top:8px; }


/* =========================================================
   10. REVIEWS — prova social Google
   ========================================================= */
.reviews__box{
  max-width:560px;
  margin:0 auto;
  text-align:center;
  background:#fff;
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  padding:40px 30px;
  box-shadow:var(--shadow-sm);
}

.reviews__score{
  font-family:var(--font-display);
  font-size:5rem;
  font-weight:700;
  color:var(--color-primary);
  line-height:1;
}

/* A fileira cinza é a régua; a amarela vem por cima recortada em
   width:% = nota/5. Qualquer nota renderiza, inclusive fração de estrela.
   O inline-flex faz a caixa medir exatamente as 5 estrelas, então o
   recorte da fileira de cima bate com a de baixo. */
.reviews__stars{
  position:relative;
  display:inline-flex;
  margin:10px 0 8px;
}
.reviews__stars-row{
  display:flex;
  gap:4px;
}
.reviews__stars-row svg{
  width:30px;
  height:30px;
  flex:none;
  color:#e6ddd9;                 /* estrela vazia */
}
.reviews__stars-fill{
  position:absolute;
  top:0; left:0; bottom:0;
  overflow:hidden;
  width:94%;                     /* 4,7/5 — o JS sobrescreve */
  transition:width .4s ease;
}
/* max-content impede que a caixa recortada aperte as estrelas em vez
   de cortá-las */
.reviews__stars-fill .reviews__stars-row{ width:max-content; }
.reviews__stars-fill .reviews__stars-row svg{ color:var(--color-yellow); }

/* Enquanto a nota real não chega, nada pisca nem salta */
.reviews__score,
.reviews__meta{ transition:opacity .2s ease; }

.reviews__meta{ color:var(--color-muted); margin-bottom:22px; }

/* Dois botões lado a lado (avaliações + pedido) sem quebrar no mobile */
.reviews__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}

/* Logotipo textual do Google com as cores oficiais */
.reviews__gmark{ font-weight:700; font-family:var(--font-display); }
.reviews__gmark b:nth-child(1){ color:#4285F4; }
.reviews__gmark b:nth-child(2){ color:#EA4335; }
.reviews__gmark b:nth-child(3){ color:#FBBC05; }
.reviews__gmark b:nth-child(4){ color:#4285F4; }
.reviews__gmark b:nth-child(5){ color:#34A853; }
.reviews__gmark b:nth-child(6){ color:#EA4335; }


/* =========================================================
   11. LOCATION
   ========================================================= */
/* Seção sobre o vermelho da marca — os cartões brancos criam o contraste,
   sem precisar destacar um deles com cor diferente. */
.location{ background:var(--color-primary); }
.location .section__head h2{ color:#fff; }
.location .badge{
  color:#fff;
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.45);
}

.location__grid{ display:grid; gap:26px; }
@media(min-width:900px){
  .location__grid{ grid-template-columns:1fr 1fr; }
}

.info-card{
  display:flex;
  gap:16px;
  background:#fff;
  border:1px solid var(--color-line);
  border-radius:var(--radius);
  padding:20px;
  margin-bottom:16px;
  box-shadow:var(--shadow-sm);
}

.info-card__icon{
  width:46px; height:46px;
  flex:none;
  border-radius:12px;
  background:var(--color-primary);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.info-card__icon svg{ width:24px; height:24px; }

.info-card h3{
  font-family:var(--font-display);
  font-size:1.05rem;
  margin-bottom:4px;
}
.info-card p{ font-size:.94rem; color:var(--color-muted); }
.info-card p strong{ color:var(--color-text); }

/* Telefone clicável com área de toque adequada */
.info-card a[href^="tel:"]{
  display:inline-block;
  padding:10px 0;
  margin:-10px 0;
}

/* Mapa visível de imediato. O loading="lazy" no iframe adia o download
   até a seção se aproximar da viewport, então o carregamento inicial da
   página não paga os ~700 KB do embed do Google. */
.map-frame{
  border-radius:var(--radius);
  overflow:hidden;
  min-height:340px;
  height:100%;
  border:1px solid var(--color-line);
  box-shadow:var(--shadow-sm);
  background:var(--color-bg-soft);
}
.map-frame iframe{
  width:100%;
  height:100%;
  min-height:340px;
  border:0;
  display:block;
}


/* =========================================================
   12. FAQ — accordions nativos (<details>)
   ========================================================= */
.faq__list{ max-width:820px; margin:0 auto; }

.faq__item{
  background:#fff;
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  margin-bottom:12px;
  overflow:hidden;
  transition:box-shadow .2s;
}
.faq__item[open]{
  box-shadow:var(--shadow-sm);
  border-color:var(--color-primary-soft-border);
}

.faq__header{
  cursor:pointer;
  list-style:none;
  padding:18px 22px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.02rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
}
.faq__header::-webkit-details-marker{ display:none; }

.faq__header::after{
  content:"+";
  font-size:1.6rem;
  color:var(--color-primary);
  transition:transform .2s;
  line-height:1;
  flex:none;
}
.faq__item[open] .faq__header::after{ transform:rotate(45deg); }

.faq__body{
  padding:0 22px 20px;
  color:var(--color-muted);
  font-size:.96rem;
}

/* Convite pós-FAQ: captura quem chegou ao fim com dúvida */
.faq__cta{
  text-align:center;
  margin-top:40px;
  color:var(--color-muted);
}
.faq__cta a{
  display:inline-block;
  padding:12px 6px;
  color:var(--color-primary);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}


/* =========================================================
   13. BOTTOM CTA
   ========================================================= */
.cta-bottom{
  /* Fundo mais escuro que o vermelho da marca: branco puro sobre
     #E30613 rende 4.8:1; sobre este gradiente passa de 7:1. */
  background:var(--color-primary-dark);
  background:linear-gradient(180deg, var(--color-primary-dark), var(--color-primary-darker));
  color:#fff;
  text-align:center;
  padding:clamp(72px, 10vw, 110px) 0;
}
.cta-bottom h2{
  font-size:clamp(1.7rem, 5.6vw, 2.5rem);
  max-width:760px;
  margin:0 auto 22px;
}
.cta-bottom p{
  color:#fff;
  max-width:560px;
  margin:0 auto 44px;
  font-size:1.05rem;
  line-height:1.7;
}
/* p.… ganha do seletor .cta-bottom p acima (0,1,1 vs 0,1,1 + ordem),
   senão o margin:0 auto 44px zeraria este margin-top */
p.cta-bottom__note{
  margin:28px auto 0;
  font-size:.9rem;
  color:#fff;
}


/* =========================================================
   14. FOOTER
   ========================================================= */
.footer{
  background:var(--color-dark);
  color:rgba(255,255,255,.72);
  padding:50px 0 26px;
  font-size:.9rem;
}

.footer__grid{ display:grid; gap:28px; margin-bottom:32px; }
@media(min-width:760px){
  .footer__grid{ grid-template-columns:1.4fr 1fr; }
}

/* Mesma placa do header: a logo traz o vermelho da marca, que separa
   bem do fundo escuro do rodapé. */
.footer__logo{
  display:inline-block;
  border-radius:8px;
  overflow:hidden;
  margin-bottom:18px;
}
.footer__logo img{
  display:block;
  height:44px;
  width:auto;
}

/* <address> vem em itálico por padrão do navegador */
.footer__contact{
  font-style:normal;
}
.footer__contact p{ margin-bottom:6px; line-height:1.5; }
/* Área de toque ≥44px no telefone (21,6px de texto + 2×12 de padding).
   A margem negativa cancela o padding no fluxo, então as três linhas
   continuam com o mesmo espaçamento das do bloco ao lado. */
.footer__contact a{
  display:inline-block;
  padding:12px 0;
  margin:-12px 0;
}
.footer__contact a:hover{ color:var(--color-yellow); }

.footer__legal p{ margin-bottom:6px; line-height:1.5; }

.footer__disclaimer{
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:20px;
  font-size:.8rem;
  line-height:1.6;
  color:rgba(255,255,255,.55);
}
.footer__copy{ margin-top:14px; font-size:.82rem; }


/* =========================================================
   15. ELEMENTOS FLUTUANTES
   ========================================================= */
.whatsapp-float{
  position:fixed;
  right:18px; bottom:18px;
  z-index:900;
  width:60px; height:60px;
  border-radius:50%;
  background:var(--color-whatsapp);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 24px rgba(37,211,102,.5);
}
/* Mesmo anel via GPU — sem repaint por frame */
.whatsapp-float::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:var(--color-whatsapp);
  animation:ping 2.4s cubic-bezier(0, 0, .2, 1) infinite;
}
.whatsapp-float svg{
  position:relative;
  z-index:1;
  width:34px; height:34px;
}

@media(max-width:520px){
  .whatsapp-float{ bottom:14px; right:14px; }
}


/* =========================================================
   16. ACESSIBILIDADE
   ========================================================= */
/* Pular direto ao conteúdo (teclado/leitor de tela) */
.skip-link{
  position:absolute;
  top:-48px;
  left:12px;
  z-index:1100;
  background:var(--color-dark);
  color:#fff;
  font-family:var(--font-display);
  font-weight:600;
  padding:12px 20px;
  border-radius:0 0 10px 10px;
  transition:top .2s ease;
}
.skip-link:focus{ top:0; }

a:focus-visible,
button:focus-visible,
summary:focus-visible{
  outline:3px solid var(--color-yellow);
  outline-offset:2px;
  border-radius:6px;
}

@media(prefers-reduced-motion:reduce){
  *{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}