/* =====================================================================
   CHEF ANGIE — PERSONAL CHEF  |  Folha de estilos principal
   ---------------------------------------------------------------------
   Organização deste arquivo:
     01. Variáveis da marca (cores, fontes, medidas)
     02. Base / reset
     03. Utilitários (container, eyebrow, botões, ícones)
     04. Cabeçalho e navegação
     05. Hero (primeira dobra)
     06. Faixa de benefícios
     07. Seções genéricas (espaçamentos e títulos)
     08. Sobre
     09. Serviço (galeria, inclusos, área de atendimento)
     10. Como funciona
     11. Depoimentos (balões de WhatsApp)
     12. Valores (planos + escassez)
     13. Menu (abas)
     14. Carrossel de pratos
     15. CTA do menu
     16. Banner de frase
     17. Dúvidas (FAQ)
     18. Contato
     19. Rodapé
     20. Botão flutuante de WhatsApp
     21. Animações de entrada
     22. Responsivo (tablet e celular)
   ===================================================================== */


/* =====================================================================
   01. VARIÁVEIS DA MARCA
   Altere aqui para mudar cores/fontes no site inteiro.
   Paleta oficial: Vermelho #A9170B · Creme #FFFCE8 · Bege #F6EDC6 · Marrom-escuro #3A0F0A
   ===================================================================== */
:root {
  /* Cores */
  --red: #A9170B;                         /* vermelho da marca (botões, destaques) */
  --red-deep: #8A1208;                    /* vermelho mais escuro (hover dos botões) */
  --cream: #FFFCE8;                       /* fundo principal */
  --beige: #F6EDC6;                       /* fundo alternado de seções */
  --brown: #3A0F0A;                       /* texto principal e seções escuras */
  --brown-70: rgba(58, 15, 10, .72);      /* texto secundário */
  --line: rgba(169, 23, 11, .22);         /* linhas e bordas sutis */
  --wa-bubble: #FFFFFF;                   /* fundo do balão de depoimento */

  /* Tipografia */
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;   /* títulos */
  --sans: "Lato", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* textos */

  /* Medidas */
  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 18px 40px -18px rgba(58, 15, 10, .35);
  --container: 1180px;
  --header-h: 84px;                       /* altura do cabeçalho (usada no scroll das âncoras) */
}


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

/* Rolagem suave para os links âncora + compensação do cabeçalho fixo */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--brown);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; margin: 0 0 .5em; color: var(--brown); }
/* Trecho em itálico vermelho dos títulos (assinatura visual inspirada no logo) */
h1 em, h2 em, h3 em, .big-quote em { font-style: italic; color: var(--red); font-weight: 500; }
p { margin: 0 0 1em; }
ul { padding: 0; margin: 0; list-style: none; }
figure { margin: 0; }


/* =====================================================================
   03. UTILITÁRIOS
   ===================================================================== */

/* Container centralizado com respiro lateral de 16px no celular */
.container { width: min(100% - 32px, var(--container)); margin-inline: auto; }

/* Link "pular para o conteúdo" (acessibilidade — só aparece com foco do teclado) */
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--red); color: var(--cream); padding: 8px 14px; border-radius: 6px; z-index: 100; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }

/* Eyebrow: rótulo pequeno acima dos títulos, no estilo "— CHEF —" do logo */
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--sans); font-weight: 700;
  font-size: .78rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--red); margin-bottom: 1.1rem;
}
.eyebrow .rule { width: 42px; height: 2px; background: currentColor; flex: none; }
.eyebrow.center { justify-content: center; }
.eyebrow.light { color: var(--beige); }

/* Botões — base */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--sans); font-weight: 700; font-size: .95rem; letter-spacing: .04em;
  padding: .95em 1.7em; border-radius: 999px; text-decoration: none;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); }
/* Botão principal (vermelho) */
.btn-primary { background: var(--red); color: var(--cream); box-shadow: 0 10px 24px -12px rgba(169, 23, 11, .8); }
.btn-primary:hover { background: var(--red-deep); }
/* Botão contornado */
.btn-ghost { border-color: var(--red); color: var(--red); background: transparent; }
.btn-ghost:hover { background: var(--red); color: var(--cream); }
/* Botão claro (usado sobre fundo vermelho) */
.btn-light { background: var(--cream); color: var(--red); }
.btn-light:hover { background: var(--beige); }
/* Tamanhos */
.btn-sm { padding: .7em 1.3em; font-size: .85rem; }
.btn-lg { padding: 1.1em 2.2em; font-size: 1.05rem; }
.btn-block { width: 100%; }

/* Ícones SVG */
.i { width: 1.15em; height: 1.15em; flex: none; }
.i-lg { width: 34px; height: 34px; flex: none; }

/* Bolinha pulsante usada nos avisos de escassez */
.scarcity-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--red); flex: none;
  box-shadow: 0 0 0 0 rgba(169, 23, 11, .6); animation: dot 1.8s ease-out infinite;
}
.scarcity-dot.light { background: var(--beige); box-shadow: 0 0 0 0 rgba(246, 237, 198, .7); }
@keyframes dot { 0% { box-shadow: 0 0 0 0 rgba(169, 23, 11, .55); } 100% { box-shadow: 0 0 0 9px rgba(169, 23, 11, 0); } }


/* =====================================================================
   04. CABEÇALHO E NAVEGAÇÃO
   ===================================================================== */

/* Cabeçalho fixo com fundo translúcido (efeito vidro) */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 252, 232, .9);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease;
}
/* Classe adicionada pelo JS quando a página é rolada */
.site-header.scrolled { border-color: var(--line); box-shadow: 0 6px 24px -18px rgba(58, 15, 10, .5); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 24px; }
.brand img { width: 118px; height: auto; }

/* Menu de links */
.main-nav { display: flex; align-items: center; gap: 26px; }
.main-nav ul { display: flex; gap: 26px; }
.main-nav ul a {
  text-decoration: none; font-size: .9rem; font-weight: 700; letter-spacing: .06em; color: var(--brown);
  position: relative; padding: 6px 0;
}
/* Sublinhado animado no hover e no link da seção ativa */
.main-nav ul a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.main-nav ul a:hover::after, .main-nav ul a.active::after { transform: scaleX(1); }

/* Ícone do Instagram no cabeçalho (texto do @ só aparece no menu mobile) */
.nav-insta { display: inline-flex; align-items: center; gap: 8px; color: var(--red); text-decoration: none; font-weight: 700; font-size: .9rem; }
.nav-insta .i { width: 22px; height: 22px; }
.nav-insta-label { display: none; }

/* Botão hambúrguer (oculto no desktop) */
.menu-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 10px; cursor: pointer; }
.menu-toggle span { display: block; height: 2px; background: var(--brown); margin: 5px 0; transition: transform .25s ease, opacity .25s ease; }


/* =====================================================================
   05. HERO (PRIMEIRA DOBRA)
   ===================================================================== */
.hero { padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 8vw, 110px); position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); letter-spacing: -.01em; }
.hero h1 em { display: block; }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--brown-70); max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 40px; }

/* Estilos do botão de ancoragem: seta que "convida" a descer até o menu */
.hero-actions .js-anchor .i { transition: transform .25s ease; }
.hero-actions .js-anchor:hover .i { transform: translateY(3px); }

/* Linha de provas rápidas (formação, pessoas, limpeza) */
.hero-proof { display: flex; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 22px; }
.hero-proof li { flex: 1 1 140px; padding-right: 18px; }
.hero-proof li + li { border-left: 1px solid var(--line); padding-left: 18px; }
.hero-proof strong { display: block; font-family: var(--serif); font-size: 1.15rem; color: var(--red); }
.hero-proof span { font-size: .85rem; color: var(--brown-70); }

/* Foto em formato de arco com moldura deslocada */
.hero-media { position: relative; }
.hero-photo { border-radius: 220px 220px var(--radius) var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 5; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::before {
  content: ""; position: absolute; inset: 22px -22px -22px 22px; z-index: -1;
  border: 2px solid var(--red); border-radius: 220px 220px var(--radius) var(--radius);
}
/* Selo vermelho sobre a foto */
.hero-badge {
  position: absolute; left: -28px; bottom: 40px; max-width: 250px;
  background: var(--red); color: var(--cream); padding: 18px 22px; border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.badge-kicker { display: block; font-family: var(--serif); font-style: italic; font-size: 1.3rem; margin-bottom: 4px; }
.badge-text { font-size: .88rem; line-height: 1.5; color: var(--beige); }


/* =====================================================================
   06. FAIXA DE BENEFÍCIOS
   ===================================================================== */
.benefits { background: var(--red); color: var(--cream); padding: 56px 0; }
.benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.benefit { padding-right: 12px; }
.benefit .i-lg { color: var(--beige); margin-bottom: 14px; }
.benefit h3 { color: var(--cream); font-size: 1.3rem; margin-bottom: .35em; }
.benefit p { color: var(--beige); font-size: .95rem; margin: 0; opacity: .92; }


/* =====================================================================
   07. SEÇÕES GENÉRICAS
   ===================================================================== */
.section { padding: clamp(72px, 10vw, 128px) 0; }
.section-head { margin-bottom: clamp(40px, 5vw, 64px); }
.section-head.center { text-align: center; max-width: 760px; margin-inline: auto; }
.section-head h2 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); }
.section-sub { color: var(--brown-70); font-size: 1.08rem; }


/* =====================================================================
   08. SOBRE
   ===================================================================== */
.about-grid { display: grid; grid-template-columns: .85fr 1fr; gap: clamp(36px, 7vw, 96px); align-items: center; }
.about-photo { position: relative; background: var(--beige); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.about-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 20%; }
/* Etiqueta com o nome sobre a foto */
.about-photo figcaption {
  position: absolute; left: 18px; bottom: 18px; background: var(--cream); color: var(--red);
  font-family: var(--serif); font-style: italic; font-size: 1.15rem; padding: 6px 16px; border-radius: 999px;
}
.about-copy h2 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
/* Citação de assinatura */
.about-copy blockquote {
  margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--red);
  font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 2.1vw, 1.6rem); line-height: 1.4; color: var(--red);
}
/* Lista de credenciais com traço vermelho */
.credentials { display: grid; gap: 10px; }
.credentials li { display: flex; gap: 12px; align-items: baseline; font-weight: 700; font-size: .95rem; }
.credentials li::before { content: ""; width: 18px; height: 2px; background: var(--red); flex: none; transform: translateY(-4px); }


/* =====================================================================
   09. SERVIÇO
   ===================================================================== */
.service { background: var(--beige); }

/* Galeria em mosaico: 1 foto grande + 4 menores */
.gallery {
  display: grid; gap: 14px;
  grid-template-columns: 1.6fr 1fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 280px));
  grid-template-areas: "a b c" "a d e";
}
.gallery figure { border-radius: var(--radius-sm); overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.gallery figure:hover img { transform: scale(1.05); }
.g-a { grid-area: a; } .g-b { grid-area: b; } .g-c { grid-area: c; } .g-d { grid-area: d; } .g-e { grid-area: e; }

/* Bloco "Incluso em todos os planos" */
.included {
  margin-top: clamp(40px, 5vw, 64px); background: var(--cream); border-radius: var(--radius);
  padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: 1fr 1.3fr; gap: 32px; align-items: center;
  border: 1px solid var(--line);
}
.included-title h3 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0; }
.included-title .eyebrow { margin-bottom: .8rem; }
.checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-weight: 700; line-height: 1.45; }
.checklist .i { color: var(--red); width: 24px; height: 24px; margin-top: 1px; }

/* Área de atendimento — "chips" com os bairros do Rio */
.area { margin-top: 36px; text-align: center; }
.area-title { display: inline-flex; align-items: center; gap: 10px; font-size: 1.35rem; margin-bottom: 18px; }
.area-title .i { color: var(--red); width: 24px; height: 24px; }
.area-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.area-list li {
  background: var(--cream); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 16px; font-size: .9rem; font-weight: 700; color: var(--brown);
}
.area-note { margin-top: 16px; font-size: .92rem; color: var(--brown-70); }


/* =====================================================================
   10. COMO FUNCIONA
   ===================================================================== */
.how { background: var(--brown); color: var(--cream); position: relative; overflow: hidden; }
.how h2, .how h3 { color: var(--cream); }
.how h2 em { color: var(--beige); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; list-style: none; padding: 0; margin: 0; }
.step { border-top: 1px solid rgba(246, 237, 198, .3); padding-top: 22px; }
/* Número do passo em contorno (outline) */
.step-n { font-family: var(--serif); font-style: italic; font-size: 2.6rem; line-height: 1; display: block; margin-bottom: 14px; -webkit-text-stroke: 1px var(--beige); color: transparent; }
.step h3 { font-size: 1.35rem; }
.step p { color: rgba(246, 237, 198, .85); font-size: .97rem; margin: 0; }

/* Cards de "o cliente escolhe" (6 / 5 / 3 / 1 / 1) */
.choices { margin-top: clamp(56px, 7vw, 88px); text-align: center; }
.choices-title { font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--beige); font-style: italic; font-weight: 500; margin-bottom: 28px; }
.choices-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.choices-grid li { background: var(--red); border-radius: var(--radius-sm); padding: 24px 12px; }
.choices-grid li:nth-child(n+4) { background: transparent; border: 1.5px solid var(--beige); }
.choices-grid strong { display: block; font-family: var(--serif); font-size: 2.8rem; line-height: 1; color: var(--cream); margin-bottom: 8px; }
.choices-grid span { font-size: .9rem; font-weight: 700; color: var(--beige); }


/* =====================================================================
   11. DEPOIMENTOS (layout em balões de WhatsApp)
   ===================================================================== */
.testimonials { background: var(--cream); }
.testimonial-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: start; }

/* Card do depoimento — fundo bege que lembra a tela de conversa */
.testimonial {
  position: relative; background: var(--beige); border-radius: var(--radius); padding: 22px 20px 20px;
  border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; height: 100%;
}
/* Leve desalinhamento vertical para um visual mais orgânico (desktop) */
.testimonial:nth-child(even) { margin-top: 28px; }

/* Cabeçalho do card: avatar + nome + bairro */
.t-head { display: flex; align-items: center; gap: 12px; }
.t-head strong { display: block; font-size: .98rem; line-height: 1.2; }
.t-head small { display: block; font-size: .8rem; color: var(--brown-70); }
/* Avatar placeholder (iniciais). Pode ser trocado por <img class="avatar"> */
.avatar {
  width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--red); color: var(--cream); font-family: var(--serif); font-weight: 600; font-size: 1rem;
  border: 2px solid var(--cream); object-fit: cover;
}
.testimonial:nth-child(2) .avatar { background: var(--brown); }
.testimonial:nth-child(3) .avatar { background: #C2553F; }
.testimonial:nth-child(4) .avatar { background: #7A2A1C; }

/* Balão de mensagem (com "rabinho" no canto superior esquerdo) */
.bubble {
  position: relative; background: var(--wa-bubble); border-radius: 4px 16px 16px 16px;
  padding: 14px 16px 26px; box-shadow: 0 6px 16px -10px rgba(58, 15, 10, .35);
}
.bubble::before {
  content: ""; position: absolute; left: -8px; top: 0; width: 0; height: 0;
  border-top: 10px solid var(--wa-bubble); border-left: 10px solid transparent;
}
.bubble p { margin: 0; font-size: .95rem; line-height: 1.55; }
/* Horário + "visto" azul no canto do balão */
.bubble-meta { position: absolute; right: 12px; bottom: 6px; font-size: .7rem; color: var(--brown-70); display: inline-flex; align-items: center; gap: 4px; }
.bubble-meta svg { width: 16px; height: 11px; color: #34B7F1; }
/* Linha de impacto (resultado na rotina) */
.t-impact { margin: 0; font-family: var(--serif); font-style: italic; color: var(--red); font-size: 1.02rem; line-height: 1.35; }

/* [NOVO v6] Variação com 2 depoimentos reais: duas colunas centralizadas,
   sem o desalinhamento vertical usado no layout de 4 cards */
.testimonial-grid--duo { grid-template-columns: repeat(2, minmax(0, 500px)); justify-content: center; align-items: stretch; gap: 32px; }
.testimonial-grid--duo .testimonial:nth-child(even) { margin-top: 0; }
.testimonial-grid--duo .testimonial { padding: 26px 26px 24px; }
.testimonial-grid--duo .bubble { flex: 1; }
.testimonial-grid--duo .bubble p { font-size: 1.02rem; line-height: 1.6; }
.testimonial-grid--duo .avatar { width: 54px; height: 54px; }
/* Foto de perfil real (img) no lugar das iniciais */
img.avatar { display: block; background: var(--beige); }

/* Selo de depoimento ilustrativo — some ao remover a classe .is-placeholder */
.testimonial.is-placeholder::after {
  content: "Depoimento ilustrativo"; position: absolute; top: -10px; right: 14px;
  font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  background: var(--cream); color: var(--brown-70); border: 1px dashed var(--brown-70);
  padding: 2px 8px; border-radius: 999px;
}


/* =====================================================================
   12. VALORES
   ===================================================================== */

/* Faixa de escassez — [ALTERADO v3] agora fica ABAIXO dos cards de planos,
   por isso a margem passou a ser no topo (respiro entre cards e alerta) */
.scarcity {
  display: flex; align-items: center; justify-content: center; gap: 14px; width: fit-content; max-width: 760px; margin: 44px auto 0;
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--red);
  border-radius: var(--radius-sm); padding: 14px 20px;
}
.scarcity p { margin: 0; font-size: 1rem; }

.plans { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 22px; align-items: center; }
.plan {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 36px 30px; text-align: center; transition: transform .25s ease, box-shadow .25s ease;
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.plan h3 { font-size: 1.5rem; margin-bottom: .25em; }
.plan-desc { color: var(--brown-70); font-size: .93rem; min-height: 3em; }
.price { font-family: var(--serif); font-weight: 700; font-size: 3.4rem; line-height: 1; color: var(--red); margin: 10px 0 6px; }
.price .cur { font-size: 1.1rem; vertical-align: top; margin-right: 4px; position: relative; top: .5em; font-family: var(--sans); }
.price .cents { font-size: 1.4rem; }
.per { font-size: .85rem; color: var(--brown-70); margin-bottom: 22px; }
.plan ul { text-align: left; display: grid; gap: 10px; margin: 0 0 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.plan li { display: flex; gap: 10px; font-size: .95rem; }
.plan li::before { content: "✓"; color: var(--red); font-weight: 700; }

/* Plano em destaque (Pacote mensal) */
.plan-featured { background: var(--red); color: var(--cream); border: 0; padding: 48px 34px; box-shadow: 0 30px 60px -28px rgba(169, 23, 11, .9); }
.plan-featured h3, .plan-featured .price { color: var(--cream); }
.plan-featured .plan-desc, .plan-featured .per { color: var(--beige); }
.plan-featured ul { border-color: rgba(246, 237, 198, .35); }
.plan-featured li::before { color: var(--beige); }
.plan-tag {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  background: var(--brown); color: var(--beige); font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  padding: 7px 16px; border-radius: 999px; white-space: nowrap;
}
.pricing-note { text-align: center; margin-top: 22px; color: var(--brown-70); font-size: .95rem; }


/* =====================================================================
   13. MENU (ABAS)
   ===================================================================== */
.menu { background: var(--beige); }
.menu-card { background: var(--cream); border-radius: var(--radius); padding: clamp(20px, 4vw, 48px); border: 1px solid var(--line); }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; border-bottom: 1px solid var(--line); padding-bottom: 22px; margin-bottom: 30px; }
.tabs button {
  font: 700 .9rem var(--sans); letter-spacing: .04em; color: var(--brown); background: transparent;
  border: 1.5px solid var(--line); padding: .7em 1.2em; border-radius: 999px; cursor: pointer; transition: all .2s ease;
}
.tabs button:hover { border-color: var(--red); color: var(--red); }
.tabs button[aria-selected="true"] { background: var(--red); border-color: var(--red); color: var(--cream); }
.tabs .count { font-weight: 400; opacity: .75; margin-left: 2px; }
/* Lista de pratos em colunas automáticas */
.dish-list { columns: 3 220px; column-gap: 40px; }
.dish-list li { break-inside: avoid; padding: 9px 0 9px 22px; position: relative; border-bottom: 1px dashed var(--line); font-size: 1rem; }
.dish-list li::before { content: ""; position: absolute; left: 2px; top: 1.15em; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.tab-panel { animation: fade .35s ease; }

/* [NOVO v3] Dica "Arraste para ver mais" — escondida no desktop, aparece só no celular */
.dish-hint { display: none; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }


/* =====================================================================
   14. CARROSSEL DE PRATOS
   Implementado com scroll-snap nativo (leve e funciona com toque/arrasto).
   ===================================================================== */
.carousel { margin-top: clamp(48px, 6vw, 72px); }
.carousel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.carousel-head h3 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); margin: 0; }
.carousel-nav { display: flex; gap: 10px; flex: none; }
/* Setas redondas */
.car-btn {
  width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--red); background: transparent; color: var(--red);
  display: grid; place-items: center; cursor: pointer; transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.car-btn:hover { background: var(--red); color: var(--cream); }
.car-btn:disabled { opacity: .35; cursor: default; background: transparent; color: var(--red); }

/* Trilho horizontal: cada slide "encaixa" ao rolar */
.carousel-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 18px) / 4); gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-bottom: 6px; scrollbar-width: none; overscroll-behavior-x: contain;
}
.carousel-track::-webkit-scrollbar { display: none; }

/* Slide: foto vertical com legenda sobre degradê */
.slide {
  position: relative; scroll-snap-align: start; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4 / 5; background: var(--brown); box-shadow: var(--shadow);
}
.slide img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.slide:hover img { transform: scale(1.06); }
.slide figcaption {
  position: absolute; inset: auto 0 0 0; padding: 40px 18px 16px;
  background: linear-gradient(transparent, rgba(58, 15, 10, .85));
  color: var(--cream); font-family: var(--serif); font-style: italic; font-size: 1.15rem;
}

/* [NOVO v4] Slide cuja foto não foi encontrada (assets/img/pratos/):
   esconde o ícone de imagem quebrada e mantém o nome do prato visível */
.slide.is-missing img { visibility: hidden; }

/* Indicadores (bolinhas) */
.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.carousel-dots span { width: 8px; height: 8px; border-radius: 999px; background: var(--line); transition: width .3s ease, background-color .3s ease; }
.carousel-dots span.on { width: 26px; background: var(--red); }
.carousel-credit { text-align: center; font-size: .75rem; color: var(--brown-70); margin: 10px 0 0; }


/* =====================================================================
   15. CTA DO MENU ("Quero meu Cardápio")
   ===================================================================== */
.menu-cta {
  margin-top: clamp(40px, 5vw, 56px); background: var(--red); color: var(--cream); border-radius: var(--radius);
  padding: clamp(28px, 4vw, 44px) clamp(24px, 5vw, 56px);
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: center;
  box-shadow: 0 30px 60px -30px rgba(169, 23, 11, .9);
}
.menu-cta h3 { color: var(--cream); font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: .3em; }
.menu-cta h3 em { color: var(--beige); }
.menu-cta p { margin: 0; color: var(--beige); }
.menu-cta-action { display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* No fundo vermelho, o botão principal fica creme para ter contraste */
.menu-cta .btn-primary { background: var(--cream); color: var(--red); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .5); }
.menu-cta .btn-primary:hover { background: var(--beige); }
.cta-scarcity { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--beige); }
.menu-cta .scarcity-dot { background: var(--beige); }


/* =====================================================================
   16. BANNER DE FRASE (foto com sobreposição escura)
   ===================================================================== */
.quote-banner {
  position: relative; padding: clamp(90px, 12vw, 150px) 0; text-align: center; color: var(--cream);
  background:
    linear-gradient(rgba(58, 15, 10, .72), rgba(120, 16, 8, .78)),
    url("../img/marmitas-2-857.webp") center / cover no-repeat;
}
.big-quote { font-family: var(--serif); font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.2; max-width: 900px; margin: 0 auto; }
.big-quote em { color: var(--beige); }


/* =====================================================================
   17. DÚVIDAS (FAQ)
   ===================================================================== */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
/* Título fica "grudado" enquanto a lista de perguntas rola (desktop) */
.faq .section-head { position: sticky; top: calc(var(--header-h) + 24px); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-family: var(--serif); font-size: 1.25rem; font-weight: 600;
}
.accordion summary::-webkit-details-marker { display: none; }
/* Seta do acordeão (gira ao abrir) */
.accordion summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 14px; margin-top: -10px;
  border-right: 2px solid var(--red); border-bottom: 2px solid var(--red); transform: rotate(45deg); transition: transform .25s ease;
}
.accordion details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.accordion details p { color: var(--brown-70); padding-right: 30px; margin-bottom: 22px; }


/* =====================================================================
   18. CONTATO
   ===================================================================== */
.contact { background: var(--red); color: var(--cream); padding: clamp(72px, 10vw, 120px) 0; overflow: hidden; }
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.contact-logo { width: 200px; margin-bottom: 30px; }
.contact h2 { color: var(--cream); font-size: clamp(2.3rem, 4.6vw, 3.6rem); }
.contact h2 em { color: var(--beige); }
.contact-copy > p { color: var(--beige); font-size: 1.1rem; max-width: 30em; }
/* Aviso de escassez próximo aos botões */
.contact-copy > .contact-scarcity { display: flex; align-items: center; gap: 10px; font-size: .95rem; font-weight: 700; color: var(--cream); margin: 0; }
.contact-links { display: grid; gap: 14px; margin-top: 22px; max-width: 460px; }
/* Cartões de contato clicáveis */
.contact-card {
  display: flex; align-items: center; gap: 16px; background: var(--cream); color: var(--red); text-decoration: none;
  padding: 16px 22px; border-radius: 16px; transition: transform .2s ease, background-color .2s ease;
}
.contact-card:hover { transform: translateX(6px); background: var(--beige); }
.contact-card span { flex: 1; font-weight: 700; font-size: 1.15rem; line-height: 1.3; }
.contact-card small { display: block; font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--brown-70); }
/* Foto da Chef em arco */
.contact-photo {
  border-radius: 220px 220px var(--radius) var(--radius); overflow: hidden; aspect-ratio: 4 / 5;
  border: 6px solid rgba(255, 252, 232, .15); background: var(--cream); max-width: 440px; justify-self: center; width: 100%;
}
.contact-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }


/* =====================================================================
   19. RODAPÉ
   ===================================================================== */
.site-footer { background: var(--cream); padding: 44px 0 100px; text-align: center; border-top: 1px solid var(--line); }
.footer-inner img { width: 120px; margin: 0 auto 16px; }
.site-footer p { font-size: .9rem; color: var(--brown-70); margin-bottom: .4em; }
.footer-social { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; }
.footer-social a { display: inline-flex; align-items: center; gap: 6px; color: var(--red); font-weight: 700; text-decoration: none; }
.footer-social a:hover { text-decoration: underline; }
.site-footer .copy { font-size: .8rem; }


/* =====================================================================
   20. BOTÃO FLUTUANTE DE WHATSAPP
   ===================================================================== */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 60px; height: 60px; border-radius: 50%;
  background: var(--red); color: var(--cream); display: grid; place-items: center;
  box-shadow: 0 14px 30px -10px rgba(58, 15, 10, .6); transition: transform .2s ease;
  border: 2px solid var(--cream);
}
.wa-float svg { width: 30px; height: 30px; }
.wa-float:hover { transform: scale(1.08); }
/* Anel pulsante para chamar atenção */
.wa-float::before {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--red);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.55); opacity: 0; } }


/* =====================================================================
   21. ANIMAÇÕES DE ENTRADA
   O JS adiciona a classe .js no <html> e .visible quando o elemento entra na tela.
   ===================================================================== */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.js .reveal.visible { opacity: 1; transform: none; }

/* Respeita quem prefere menos movimento (acessibilidade) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carousel-track { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}


/* =====================================================================
   22. RESPONSIVO
   ===================================================================== */

/* ---- Notebooks / telas médias ---- */
@media (max-width: 1180px) {
  .main-nav ul { gap: 18px; }
  .main-nav { gap: 18px; }
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial:nth-child(even) { margin-top: 0; }
}
@media (max-width: 1080px) {
  .steps { grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }
  .carousel-track { grid-auto-columns: calc((100% - 2 * 18px) / 3); }
}

/* ---- Tablets: menu vira hambúrguer e grades viram 1 coluna ---- */
@media (max-width: 960px) {
  :root { --header-h: 72px; }
  .brand img { width: 100px; }
  .menu-toggle { display: block; }
  /* Painel do menu mobile (desliza de cima) */
  .main-nav {
    position: fixed; inset: var(--header-h) 0 auto 0; background: var(--cream);
    flex-direction: column; align-items: stretch; gap: 0; padding: 12px 24px 28px;
    border-bottom: 1px solid var(--line); box-shadow: 0 20px 30px -20px rgba(58, 15, 10, .4);
    transform: translateY(-120%); visibility: hidden; transition: transform .35s ease, visibility .35s;
  }
  .main-nav.open { transform: none; visibility: visible; }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav ul a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .main-nav ul a::after { display: none; }
  .nav-insta { padding: 16px 0 0; }
  .nav-insta-label { display: inline; }
  .nav-cta { margin-top: 18px; }
  /* Ícone hambúrguer vira "X" quando aberto */
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .hero-grid, .about-grid, .contact-grid, .faq-grid { grid-template-columns: 1fr; }
  .hero-media { max-width: 520px; margin: 0 auto; width: 100%; }
  .hero-badge { left: 0; }
  .about-photo { max-width: 460px; margin: 0 auto; width: 100%; }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .included { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  /* [ALTERADO v3] Removido "order: -1" do plano em destaque: no celular os cards seguem
     a ordem do HTML (Semanal → Mensal → Quinzenal), igual ao desktop. */
  .plans { gap: 34px; }
  .choices-grid { grid-template-columns: repeat(3, 1fr); }
  .faq .section-head { position: static; }
  .contact-photo { display: none; }
  .menu-cta { grid-template-columns: 1fr; text-align: center; }
  .carousel-track { grid-auto-columns: calc((100% - 18px) / 2.3); }
}

/* ---- [NOVO v3] Menu em carrossel horizontal no celular (< 768px) ----
   Evita o "scroll infinito" da lista de pratos: os itens são distribuídos em
   colunas de 6 pratos que deslizam para o lado (swipe), com encaixe (scroll-snap).
   Cada coluna ocupa ~86% da largura, deixando a próxima "espiando" à direita
   para indicar que há mais conteúdo. */
@media (max-width: 767px) {
  .dish-list {
    columns: auto;                          /* desliga as colunas do desktop */
    display: grid;
    grid-template-rows: repeat(6, auto);    /* 6 pratos por coluna */
    grid-auto-flow: column;                 /* preenche coluna a coluna, para a direita */
    grid-auto-columns: 86%;
    column-gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -4px; padding: 0 4px 4px;
  }
  .dish-list::-webkit-scrollbar { display: none; }
  /* O primeiro prato de cada coluna é o ponto de encaixe do swipe */
  .dish-list li:nth-child(6n + 1) { scroll-snap-align: start; }
  .dish-list li { font-size: .95rem; padding: 10px 0 10px 20px; }

  /* Dica de arraste com contador de páginas (atualizado pelo JS) */
  .dish-hint {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: -12px 0 14px; font-size: .78rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--red);
  }
  .dish-hint span:first-child { flex: 1; }
  .dish-hint-count { color: var(--brown-70); letter-spacing: .04em; }
  .dish-hint .i { animation: nudge 1.6s ease-in-out infinite; }
  @keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
}

/* ---- Celulares ---- */
@media (max-width: 600px) {
  body { font-size: 1rem; }
  .hero-media::before { inset: 14px -10px -14px 10px; }
  .hero-badge { position: relative; left: auto; bottom: auto; margin: -40px 16px 0; max-width: none; }
  .hero-proof li { flex-basis: 100%; padding: 10px 0 !important; border-left: 0 !important; border-bottom: 1px solid var(--line); }
  .hero-actions .btn { flex: 1 1 100%; }
  .benefits-grid { grid-template-columns: 1fr; gap: 26px; }
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 300px 180px 180px; grid-template-areas: "a a" "b c" "d e"; gap: 10px; }
  .checklist { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .choices-grid { grid-template-columns: repeat(2, 1fr); }
  .choices-grid li:last-child { grid-column: span 2; }
  .testimonial-grid { grid-template-columns: 1fr; gap: 26px; }
  .testimonial-grid--duo { grid-template-columns: 1fr; }  /* [NOVO v6] */
  .scarcity { margin-top: 32px; }
  /* Abas roláveis na horizontal */
  .tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin-inline: -4px; padding: 0 4px 18px; scrollbar-width: none; }
  .tabs button { flex: none; }
  /* Carrossel: 1,2 slide visível para indicar que dá para arrastar */
  .carousel-head { align-items: center; }
  .carousel-nav { display: none; }
  .carousel-track { grid-auto-columns: 82%; gap: 12px; }
  .menu-cta .btn-lg { width: 100%; }
  .eyebrow { letter-spacing: .24em; font-size: .72rem; }
  .eyebrow .rule { width: 26px; }
  .wa-float { width: 54px; height: 54px; right: 16px; bottom: 16px; }
}