/* ═══════════════════════════════════════════════════════════════
   Supermercado Santa Rita — Design System
   Cores da marca: Vermelho #D42027 · Dourado #F9A825
   ═══════════════════════════════════════════════════════════════ */

/* ─── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --red:        #D42027;
  --red-dark:   #b01b21;
  --red-light:  #fdf0f0;
  --gold:       #F9A825;
  --gold-dark:  #c67e00;
  --gold-light: #fffbee;
  --dark:       #111111;
  --gray-700:   #444444;
  --gray-500:   #777777;
  --gray-300:   #c0c0c0;
  --gray-100:   #f5f5f5;
  --white:      #ffffff;
  --font:       'Inter', Arial, sans-serif;
  --radius:     8px;
  --radius-lg:  16px;
  --shadow:     0 2px 12px rgba(0,0,0,.08);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.12);
  --transition: 0.2s ease;
  --header-h:   72px;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--dark);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--red); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--red-dark); }
address { font-style: normal; }
ul { list-style: none; }

/* ─── Container ─────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ─── Seções ────────────────────────────────────────────────────── */
.section { padding: 80px 0; }
.section-sm { padding: 56px 0; }
.section-white  { background: var(--white); }
.section-gray   { background: var(--gray-100); }
.section-red    { background: var(--red); color: var(--white); }
.section-dark   { background: var(--dark); color: var(--white); }

.section-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
}
.section-red .section-label,
.section-dark .section-label { color: var(--gold); }

.section-title {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--dark);
  margin-bottom: 16px;
}
.section-red  .section-title,
.section-dark .section-title { color: var(--white); }

.section-subtitle {
  font-size: 17px;
  color: var(--gray-700);
  max-width: 580px;
  margin-bottom: 48px;
}
.section-red  .section-subtitle,
.section-dark .section-subtitle { color: rgba(255,255,255,.8); }

.section-center { text-align: center; }
.section-center .section-subtitle { margin-left: auto; margin-right: auto; }

/* ─── Botões ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}

.btn-primary {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}
.btn-primary:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
  color: var(--white);
}

.btn-gold {
  background: var(--gold);
  color: var(--dark);
  border-color: var(--gold);
}
.btn-gold:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  color: var(--white);
}

.btn-outline {
  background: transparent;
  color: var(--red);
  border-color: var(--red);
}
.btn-outline:hover {
  background: var(--red);
  color: var(--white);
}

.btn-outline-white {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}
.btn-outline-white:hover {
  background: var(--white);
  color: var(--red);
}

.btn-whatsapp {
  background: #25D366;
  color: var(--white);
  border-color: #25D366;
}
.btn-whatsapp:hover {
  background: #1ebe5d;
  border-color: #1ebe5d;
  color: var(--white);
}

.btn-lg { font-size: 17px; padding: 18px 36px; }
.btn-sm { font-size: 13px; padding: 10px 20px; }

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* ─── Header ────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--white);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: box-shadow var(--transition);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: var(--header-h);
}

.header-logo img { height: 48px; width: auto; }

.nav-desktop {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.nav-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-700);
  padding: 8px 12px;
  border-radius: 6px;
  transition: all var(--transition);
  text-decoration: none;
}
.nav-link:hover,
.nav-link.active {
  color: var(--red);
  background: var(--red-light);
}

.header-wa {
  margin-left: 8px;
  font-size: 13px;
  padding: 10px 18px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--dark);
  border-radius: 2px;
  transition: all var(--transition);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  display: none;
  flex-direction: column;
  background: var(--white);
  border-top: 1px solid var(--gray-100);
  padding: 8px 0 16px;
}
.nav-mobile.open { display: flex; }

.nav-mobile-link {
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-700);
  padding: 14px 24px;
  border-bottom: 1px solid var(--gray-100);
  transition: all var(--transition);
}
.nav-mobile-link:hover,
.nav-mobile-link.active { color: var(--red); background: var(--red-light); }

.nav-mobile-wa {
  color: #25D366;
  border-bottom: none;
  margin-top: 8px;
}
.nav-mobile-wa:hover { color: #1ebe5d; background: #f0fef4; }

/* Espaço para header fixo */
.page-body { padding-top: var(--header-h); }

/* ─── Hero ──────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 130px 0 0;
  background: linear-gradient(160deg, #1a0002 0%, #6b0007 50%, #C41c22 100%);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('/assets/img/hero-bg-web.jpg'); /* fallback */
  /* hero-bg.jpg eram 3,2 MB — um PNG salvo com extensao .jpg. Versao web:
     195 KB em JPEG, 124 KB em WebP pra quem suporta. */
  background-image: -webkit-image-set(url('/assets/img/hero-bg-web.webp') type('image/webp'),
                                      url('/assets/img/hero-bg-web.jpg') type('image/jpeg'));
  background-image: image-set(url('/assets/img/hero-bg-web.webp') type('image/webp'),
                              url('/assets/img/hero-bg-web.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center;
  opacity: 0.1;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 20%, rgba(10,0,0,.55) 55%, rgba(10,0,0,.85) 100%);
  z-index: 0;
}

.hero > .container {
  position: relative;
  z-index: 1;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.hero-content {
  padding-bottom: 64px;
}

.hero-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  margin-bottom: 64px;
}

.hero-card-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.hero-card-item + .hero-card-item {
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 20px;
  padding-top: 20px;
}

.hero-card-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: rgba(249,168,37,.18);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}

.hero-card-item strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
}

.hero-card-item p {
  font-size: 13px;
  color: rgba(255,255,255,.62);
  line-height: 1.5;
  margin: 0;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(249,168,37,.15);
  border: 1px solid rgba(249,168,37,.35);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 100px;
  margin-bottom: 28px;
}

.hero-name {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,.55);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.hero h1 {
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.18;
  margin-bottom: 20px;
}

.hero h1 span { color: var(--gold); }

.hero-sub {
  font-size: 17px;
  color: rgba(255,255,255,.78);
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 560px;
}

/* Barra de informações */
.hero-infobar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0;
  background: rgba(0,0,0,.35);
  border-top: 1px solid rgba(255,255,255,.12);
  margin: 0 calc(-1 * var(--container-px, 24px));
  padding: 0 var(--container-px, 24px);
}

.hero-infobar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 0;
  font-size: 14px;
  color: rgba(255,255,255,.85);
  flex-shrink: 0;
}

.hero-infobar-item svg { color: var(--gold); flex-shrink: 0; }
.hero-infobar-item strong { color: var(--white); }
.hero-infobar-wa { text-decoration: none; }
.hero-infobar-wa svg { color: #25d366; }
.hero-infobar-wa:hover { opacity: .85; }

.hero-infobar-sep {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,.2);
  flex-shrink: 0;
}

/* ─── Stats Section ─────────────────────────────────────────────── */
.section-stats {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.stat-item {
  padding: 36px 24px;
  border-right: 1px solid var(--gray-200);
  text-align: center;
}

.stat-item:last-child { border-right: none; }

.stat-item strong {
  display: block;
  font-size: 42px;
  font-weight: 800;
  color: var(--red);
  line-height: 1;
  margin-bottom: 8px;
}

.stat-item span {
  font-size: 14px;
  color: var(--gray-500);
  font-weight: 500;
}

/* ─── Seção Licitações ──────────────────────────────────────────── */
.licitacoes-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.licitacoes-col-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.licitacoes-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  line-height: 1.4;
}

.licitacoes-item svg {
  flex-shrink: 0;
  color: var(--gold);
}

/* ─── Seção Nossa História ──────────────────────────────────────── */
.historia-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.historia-text p {
  font-size: 16px;
  color: var(--gray-700);
  line-height: 1.75;
  margin-bottom: 16px;
}

.historia-highlights {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.historia-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.historia-item:hover {
  border-color: var(--red-light);
  box-shadow: var(--shadow-sm);
}

.historia-item-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: var(--red-light);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
}

.historia-item strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 4px;
}

.historia-item span {
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.5;
}

@media (max-width: 1024px) {
  .licitacoes-layout { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
  .historia-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .licitacoes-col-items { grid-template-columns: 1fr; }
}

/* ─── Quem Somos: História ───────────────────────────────────────── */
.historia-qs-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.historia-qs-text p {
  color: var(--gray-700);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 16px;
}

.historia-qs-text {
  border-left: 3px solid var(--red);
  padding-left: 28px;
}

.historia-qs-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.historia-qs-stat {
  background: var(--dark);
  border: none;
  border-top: 3px solid var(--red);
  border-radius: var(--radius-lg);
  padding: 44px 24px 32px;
  text-align: center;
  box-shadow: var(--shadow-md);
}

.historia-qs-stat strong {
  display: block;
  font-size: 44px;
  font-weight: 800;
  color: var(--red);
  line-height: 1;
  margin-bottom: 8px;
}

.historia-qs-stat span {
  font-size: 13px;
  color: rgba(255,255,255,.6);
  font-weight: 500;
  line-height: 1.4;
}

/* ─── Quem Somos: Estrutura ──────────────────────────────────────── */
.estrutura-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.estrutura-card {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  transition: all var(--transition);
}

.estrutura-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--red-light);
  transform: translateY(-3px);
}

.estrutura-icon {
  width: 48px;
  height: 48px;
  background: var(--red-light);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  margin-bottom: 16px;
}

.estrutura-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 8px;
}

.estrutura-card p {
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.6;
}

/* ─── Equipe ─────────────────────────────────────────────────────── */
.equipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
  max-width: 860px;
  margin: 0 auto;
}

.equipe-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: var(--shadow);
  transition: all var(--transition);
}

.equipe-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.equipe-foto {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 20px;
  border: 4px solid var(--red-light);
  flex-shrink: 0;
}

.equipe-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.equipe-avatar {
  width: 100%;
  height: 100%;
  background: var(--red);
  color: var(--white);
  font-size: 32px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: .05em;
}

.equipe-info h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 4px;
}

.equipe-cargo {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 16px;
}

.equipe-info p {
  font-size: 15px;
  color: var(--gray-600);
  line-height: 1.7;
}

/* ─── Cards de Diferenciais ─────────────────────────────────────── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.feature-card {
  background: var(--white);
  border: 1px solid #eee;
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}


.feature-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  border-color: transparent;
}

.feature-icon {
  width: 52px;
  height: 52px;
  background: var(--red-light);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  margin-bottom: 20px;
}

.feature-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--dark);
}

.feature-card p {
  font-size: 14px;
  color: var(--gray-500);
  line-height: 1.6;
}

/* ─── Grid de Produtos/Varejo ───────────────────────────────────── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.product-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: all var(--transition);
}

.product-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}


.product-card-img {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--gray-100);
  overflow: hidden;
}
.product-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card-body {
  padding: 24px 20px;
}

.product-card-body h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.product-card-body p {
  font-size: 14px;
  color: var(--gray-500);
  line-height: 1.6;
}

/* ─── Grid de Clientes ──────────────────────────────────────────── */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  align-items: center;
}

.client-logo {
  background: var(--white);
  border: 1px solid #eee;
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 80px;
  transition: all var(--transition);
}

.client-logo:hover {
  border-color: var(--red);
  box-shadow: var(--shadow);
}

.client-logo img {
  max-height: 48px;
  width: auto;
  filter: grayscale(100%);
  opacity: .6;
  transition: all var(--transition);
}

.client-logo:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* Quando não há logo: exibe nome */
.client-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  text-align: center;
  line-height: 1.4;
}

/* ─── Bloco de Destaque (CTA Banner) ────────────────────────────── */
.cta-banner {
  background: var(--red);
  border-radius: var(--radius-lg);
  padding: 56px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  overflow: hidden;
  position: relative;
}

.cta-banner::before {
  content: '';
  position: absolute;
  right: -60px; top: -60px;
  width: 300px; height: 300px;
  background: rgba(249,168,37,.12);
  border-radius: 50%;
}

.cta-banner-text h2 {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  color: var(--white);
  margin-bottom: 8px;
}

.cta-banner-text p {
  color: rgba(255,255,255,.8);
  font-size: 15px;
}

/* ─── Bloco Info (dois lados) ───────────────────────────────────── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.two-col-reverse { direction: rtl; }
.two-col-reverse > * { direction: ltr; }

.two-col-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.two-col-img img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

/* ─── Lista com checkmarks ──────────────────────────────────────── */
.check-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--gray-700);
}

.check-list li::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--red);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 2px;
}

/* ─── Horários (tabela visual) ──────────────────────────────────── */
.hours-card {
  background: var(--white);
  border: 2px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 32px;
}

.hours-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--dark);
  display: flex;
  align-items: center;
  gap: 10px;
}

.hours-card h3 svg { color: var(--gold); }

.hours-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-100);
}

.hours-row:last-child { border-bottom: none; }

.hours-row .day { font-weight: 600; color: var(--dark); }
.hours-row .time {
  font-weight: 700;
  color: var(--red);
  font-size: 15px;
}

/* ─── Formulário ────────────────────────────────────────────────── */
.form-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-lg);
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 6px;
}

.form-control {
  width: 100%;
  font-family: var(--font);
  font-size: 15px;
  color: var(--dark);
  background: var(--gray-100);
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: 12px 16px;
  transition: all var(--transition);
  outline: none;
}

.form-control:focus {
  background: var(--white);
  border-color: var(--red);
}

.form-control::placeholder { color: var(--gray-300); }

textarea.form-control { resize: vertical; min-height: 140px; }

select.form-control { cursor: pointer; appearance: none; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-alert {
  display: none;
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
}
.form-alert.success { display: block; background: #f0fef4; color: #16a34a; border: 1px solid #bbf7d0; }
.form-alert.error   { display: block; background: #fff0f0; color: var(--red); border: 1px solid #fecaca; }

/* ─── Documentos / Download Cards ──────────────────────────────── */
.docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.doc-card {
  background: var(--white);
  border: 1px solid #eee;
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all var(--transition);
  text-decoration: none;
  color: var(--dark);
}

.doc-card:hover {
  border-color: var(--red);
  box-shadow: var(--shadow);
  color: var(--dark);
  transform: translateY(-2px);
}

.doc-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  background: var(--red-light);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
}

.doc-info strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

.doc-info span {
  font-size: 13px;
  color: var(--gray-500);
}

/* ─── Page Hero (subpáginas) ────────────────────────────────────── */
.page-hero {
  background: linear-gradient(135deg, #1a0002 0%, #8b0007 50%, #D42027 100%);
  padding: 100px 0 80px;
  position: relative;
  overflow: hidden;
}

.page-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.page-hero-badges {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
}

.page-hero-badge-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.page-hero-badge-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: rgba(34,197,94,.18);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4ade80;
}

.page-hero-badge-item strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 2px;
}

.page-hero-badge-item span {
  font-size: 12px;
  color: rgba(255,255,255,.62);
  line-height: 1.4;
}

.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.page-hero-inner {
  position: relative;
  z-index: 1;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,.6);
  margin-bottom: 16px;
}

.breadcrumb a { color: rgba(255,255,255,.7); }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb-sep { color: rgba(255,255,255,.4); }

.page-hero h1 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 12px;
}

.page-hero p {
  font-size: 17px;
  color: rgba(255,255,255,.8);
  max-width: 540px;
}

/* ─── Info Box (destaque amarelo) ───────────────────────────────── */
.info-box {
  background: var(--gold-light);
  border: 2px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  display: flex;
  gap: 16px;
}

.info-box-icon {
  color: var(--gold-dark);
  flex-shrink: 0;
  margin-top: 2px;
}

.info-box-text strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--dark);
}

.info-box-text p {
  font-size: 14px;
  color: var(--gray-700);
  line-height: 1.6;
}

/* ─── Mapa ──────────────────────────────────────────────────────── */
.map-embed {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  height: 400px;
}

.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ─── Localização (quem-somos) ──────────────────────────────────── */
.loc-map-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  height: 420px;
  margin-bottom: 28px;
}

.loc-map-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.loc-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.loc-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 28px 24px;
  text-align: center;
  text-decoration: none;
  color: var(--dark);
  transition: transform .2s, box-shadow .2s;
}

.loc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.loc-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gray-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--red);
}

.loc-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--dark);
}

.loc-card p {
  font-size: 14px;
  color: var(--gray);
  line-height: 1.6;
  margin-bottom: 6px;
}

.loc-card p strong {
  color: var(--dark);
}

.loc-card-wa {
  border: 2px solid transparent;
  background: linear-gradient(var(--white), var(--white)) padding-box,
              linear-gradient(135deg, #25d366, #128c7e) border-box;
}

.loc-card-wa .loc-card-icon {
  background: #e8faf0;
  color: #25d366;
}

.loc-card-wa h3 { color: #1a7345; }

.loc-card-cta {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #25d366;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 768px) {
  .loc-cards { grid-template-columns: 1fr; }
  .loc-map-wrap { height: 280px; }
}

/* ─── Contato rápido strips ─────────────────────────────────────── */
.contact-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid #eee;
  border-radius: var(--radius);
  padding: 16px 20px;
  flex: 1 1 200px;
  transition: all var(--transition);
  text-decoration: none;
  color: var(--dark);
}

.contact-item:hover {
  border-color: var(--red);
  box-shadow: var(--shadow);
  color: var(--dark);
}

.contact-item-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-item-icon.wa  { background: #f0fef4; color: #25D366; }
.contact-item-icon.mail { background: var(--red-light); color: var(--red); }
.contact-item-icon.pin  { background: var(--gold-light); color: var(--gold-dark); }

.contact-item-text strong { display: block; font-size: 14px; font-weight: 700; }
.contact-item-text span   { font-size: 13px; color: var(--gray-500); }

/* ─── Footer ────────────────────────────────────────────────────── */
.site-footer {
  background: var(--dark);
  color: rgba(255,255,255,.8);
  padding-top: 64px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.footer-brand img { margin-bottom: 16px; }

.footer-tagline {
  font-size: 14px;
  color: rgba(255,255,255,.55);
  line-height: 1.7;
  margin-bottom: 20px;
}

.footer-social {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  transition: color var(--transition);
}

.social-link:hover { color: var(--gold); }

.footer-heading {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.footer-nav ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-nav a {
  font-size: 14px;
  color: rgba(255,255,255,.65);
  transition: color var(--transition);
}

.footer-nav a:hover { color: var(--white); }

.hours-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hours-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hours-list .hours-day {
  font-size: 13px;
  color: rgba(255,255,255,.55);
}

.hours-list .hours-time {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
}

.footer-address p {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.65);
  margin-bottom: 12px;
  line-height: 1.6;
}

.footer-address p svg { flex-shrink: 0; margin-top: 2px; opacity: .6; }

.footer-address a {
  color: rgba(255,255,255,.65);
  transition: color var(--transition);
}

.footer-address a:hover { color: var(--gold); }

.footer-bottom {
  padding: 20px 0;
}

.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-bottom p {
  font-size: 13px;
  color: rgba(255,255,255,.4);
}

.footer-bottom a {
  color: rgba(255,255,255,.5);
  font-weight: 600;
}

.footer-bottom a:hover { color: var(--gold); }

/* ─── WhatsApp Float ────────────────────────────────────────────── */
.wa-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  background: #25D366;
  color: var(--white);
  border-radius: 100px;
  padding: 14px 22px 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(37,211,102,.4);
  transition: all var(--transition);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}

.wa-float:hover {
  background: #1ebe5d;
  color: var(--white);
  box-shadow: 0 6px 28px rgba(37,211,102,.55);
  transform: translateY(-2px);
}

.wa-float-label { display: block; }

/* ─── Utilities ─────────────────────────────────────────────────── */
.text-red   { color: var(--red); }
.text-gold  { color: var(--gold); }
.text-muted { color: var(--gray-500); }
.text-white { color: var(--white); }
.text-center { text-align: center; }

.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }

.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-48 { margin-bottom: 48px; }

.divider {
  border: none;
  border-top: 1px solid #eee;
  margin: 48px 0;
}

.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
}

.badge-red   { background: var(--red-light); color: var(--red); }
.badge-gold  { background: var(--gold-light); color: var(--gold-dark); }
.badge-green { background: #f0fef4; color: #16a34a; }

/* ─── Responsivo ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-item:nth-child(2) { border-right: none; }
  .stat-item:nth-child(3) { border-right: 1px solid var(--gray-200); border-top: 1px solid var(--gray-200); }
  .stat-item:nth-child(4) { border-right: none; border-top: 1px solid var(--gray-200); }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .footer-brand { grid-column: 1 / -1; }

  .two-col {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .two-col-reverse { direction: ltr; }

  .cta-banner {
    flex-direction: column;
    text-align: center;
    padding: 40px 32px;
  }
}

@media (max-width: 768px) {
  :root { --header-h: 64px; }

  .nav-desktop  { display: none; }
  .header-wa    { display: none; }
  .nav-toggle   { display: flex; }

  .section { padding: 56px 0; }
  .section-sm { padding: 40px 0; }

  .hero { padding-top: 96px; }

  .hero-grid { display: block; }
  .hero-card { display: none; }
  .hero-content { padding-bottom: 40px; }

  .page-hero-grid { display: block; }
  .page-hero-badges { display: none; }
  .page-hero { padding: 72px 0 56px; }

  .hero-infobar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .hero-infobar-item {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
    width: 100%;
    margin-right: 0;
  }

  .hero-infobar-item:last-child { border-bottom: none; }

  .hero-infobar-sep { display: none; }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-item { padding: 28px 16px; }
  .stat-item strong { font-size: 34px; }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-bottom-inner {
    flex-direction: column;
    text-align: center;
  }

  .form-row { grid-template-columns: 1fr; }

  .wa-float-label { display: none; }
  .wa-float { padding: 16px; border-radius: 50%; }

  .clients-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .cta-banner { padding: 32px 24px; }

  .map-embed { height: 280px; }

  .two-col-img img { height: 260px; }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .form-card { padding: 24px 20px; }
  .features-grid { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: 1fr 1fr; }
  .btn-lg { font-size: 15px; padding: 14px 24px; }
  .btn-group { flex-direction: column; }
  .btn-group .btn { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   Seção Hydrus — Distribuidor Oficial de Água
   ═══════════════════════════════════════════════════════════════ */
.section-hydrus {
  background: linear-gradient(155deg, #03192e 0%, #0b3158 55%, #052240 100%);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.section-hydrus .section-label { color: #38bdf8; }
.section-hydrus .section-title { color: var(--white); }
.section-hydrus .section-subtitle {
  color: rgba(255,255,255,.72);
  margin-bottom: 0;
}

/* Decoração de fundo (círculos concêntricos sutis) */
.hydrus-deco {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(56,189,248,.06);
  pointer-events: none;
}
.hydrus-deco-1 { width: 800px; height: 800px; top: -320px; right: -220px; }
.hydrus-deco-2 { width: 550px; height: 550px; top: -160px; right: -60px; }
.hydrus-deco-3 { width: 320px; height: 320px; top: -40px; right: 80px; }

/* Layout de 2 colunas */
.hydrus-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 72px;
  align-items: center;
}

/* Badge "DISTRIBUIDOR OFICIAL" */
.hydrus-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(249,168,37,.1);
  border: 1px solid rgba(249,168,37,.32);
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 4px;
  margin-bottom: 18px;
}

/* Grid de features 2×2 */
.hydrus-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 32px;
  margin-bottom: 40px;
}
.hydrus-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  transition: background var(--transition), border-color var(--transition);
}
.hydrus-feature:hover {
  background: rgba(56,189,248,.07);
  border-color: rgba(56,189,248,.2);
}
.hydrus-feature-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: rgba(56,189,248,.13);
  color: #38bdf8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hydrus-feature strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 3px;
}
.hydrus-feature span {
  font-size: 12px;
  color: rgba(255,255,255,.52);
  line-height: 1.45;
}

/* Coluna visual direita */
.hydrus-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 360px;
}

/* Anéis pulsantes */
@keyframes hydrus-pulse {
  0%   { transform: scale(.88); opacity: .22; }
  100% { transform: scale(1.28); opacity: 0;   }
}
.hydrus-ring {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 1px solid rgba(56,189,248,.35);
  animation: hydrus-pulse 2.8s ease-out infinite;
  pointer-events: none;
}
.hydrus-ring-2 { animation-delay: .9s; }
.hydrus-ring-3 { animation-delay: 1.8s; }

/* Gota central */
.hydrus-drop {
  position: relative;
  z-index: 1;
  width: 220px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hydrus-drop-shape {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(56,189,248,.14) 0%, rgba(14,165,233,.06) 100%);
  border: 1px solid rgba(56,189,248,.22);
  /* Forma de gota d'água */
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform: rotate(180deg);
}
.hydrus-drop-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 20px;
}
.hydrus-drop-name {
  font-size: 46px;
  font-weight: 900;
  letter-spacing: -.04em;
  color: var(--white);
  line-height: 1;
  margin-bottom: 4px;
}
.hydrus-drop-sub {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #38bdf8;
  margin-bottom: 18px;
}
.hydrus-drop-seal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--gold);
  color: #000;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 20px;
}

/* Responsivo */
@media (max-width: 1024px) {
  .hydrus-layout { grid-template-columns: 1fr; gap: 40px; }
  .hydrus-visual  { display: none; }
}
@media (max-width: 600px) {
  .hydrus-features { grid-template-columns: 1fr; gap: 10px; }
}

/* ══════════════════════════════════════════════════════════════════
   ENCOMENDA DE SALGADOS — hero, cardápio, passos, formulário, FAQ
   Usa os tokens que já existem (--red, --gold, --dark…). Mobile-first:
   tudo empilha abaixo de 860px, alvos de toque com 44px no mínimo.
   ══════════════════════════════════════════════════════════════════ */

.container-narrow { max-width: 760px; }

/* ── Hero ───────────────────────────────────────────────────────── */
.hero-festa {
  background: linear-gradient(150deg, #8c0d12 0%, var(--red) 55%, #e0343b 100%);
  color: var(--white);
  padding: calc(var(--header-h) + 36px) 0 48px;
}
.hero-festa-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.hero-festa-link-lic {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.82);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.3);
  padding-bottom: 2px;
  margin-bottom: 20px;
  transition: color var(--transition), border-color var(--transition);
}
.hero-festa-link-lic:hover { color: #fff; border-color: #fff; }

.hero-festa h1 {
  font-size: clamp(30px, 5vw, 50px);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 20px;
  text-wrap: balance;
}

/* Selo de preço — o elemento que o anúncio promete e a página precisa entregar */
.selo-preco {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  background: var(--gold);
  color: #3b2300;
  padding: 10px 22px;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  margin-bottom: 20px;
  transform: rotate(-1.5deg);
}
.selo-preco-label {
  font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
}
.selo-preco-valor { font-size: clamp(30px, 4.4vw, 42px); font-weight: 900; line-height: 1; }
.selo-preco-cents { font-size: .6em; font-weight: 800; }

.hero-festa-sub {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.65;
  color: rgba(255,255,255,.9);
  max-width: 46ch;
  margin: 0 0 30px;
}
.hero-festa-acoes { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-festa-foto { margin: 0; }
.hero-festa-foto img {
  display: block;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 48px rgba(0,0,0,.35);
}

/* ── Cardápio ───────────────────────────────────────────────────── */
.cardapio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.cardapio-bloco {
  border: 1px solid #eee;
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  background: var(--white);
  box-shadow: var(--shadow);
}
.cardapio-head { margin-bottom: 20px; }
.cardapio-head h3 { font-size: 21px; font-weight: 800; color: var(--dark); margin: 0 0 8px; }
.cardapio-preco {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  padding: 5px 14px;
  border-radius: var(--radius);
  margin-right: 8px;
}
.cardapio-qtd { font-size: 13px; color: var(--gray-500); font-weight: 600; }

.sabores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Sem faixa lateral colorida: card arredondado com barrinha de cor na
   esquerda e um dos tiques mais reconheciveis de layout gerado por IA, e o
   dono ja tinha pedido pra tirar a versao vermelha dos cards de diferenciais.
   Aqui o que separa um sabor do outro e a borda e o espaco, nao um enfeite. */
.sabor {
  border: 1px solid #e6e6e6;
  border-radius: var(--radius);
  padding: 15px 16px;
  background: var(--white);
  transition: border-color var(--transition);
}
.sabor:hover { border-color: var(--gray-300); }
.sabor-nome { font-size: 15px; font-weight: 600; color: var(--dark); }

.cardapio-nota {
  text-align: center;
  margin: 28px 0 0;
  font-size: 15px;
  color: var(--gray-500);
}

/* ── Como encomendar ────────────────────────────────────────────── */
.passos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  counter-reset: passo;
}
.passo {
  background: var(--white);
  border: 1px solid #eee;
  border-radius: var(--radius-lg);
  padding: 26px 22px;
}
.passo-num {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-weight: 900;
  font-size: 18px;
  margin-bottom: 14px;
}
.passo h3 { font-size: 17px; font-weight: 800; color: var(--dark); margin: 0 0 6px; }
.passo p { margin: 0; font-size: 14.5px; color: var(--gray-500); line-height: 1.6; }

.aviso-48h {
  background: var(--gold-light);
  border: 1px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  text-align: center;
  font-size: 15px;
  color: #5a4200;
  margin: 0;
}
.aviso-48h strong { color: #3b2300; }

/* ── Formulário de encomenda ────────────────────────────────────── */
/* ── Formulário de encomenda ─────────────────────────────────────
   hidden vence qualquer display: sem isto, `.fe-sabores{display:grid}`
   sobrescrevia o [hidden] do navegador (mesma especificidade, e a regra
   da classe vem depois) e os sabores apareciam com "Sortido" marcado. */
[hidden] { display: none !important; }

.form-encomenda { display: flex; flex-direction: column; gap: 18px; }

.fe-bloco {
  border: 1px solid #e8e8e8;
  border-radius: var(--radius-lg);
  padding: 24px;
  margin: 0;
  background: var(--white);
  box-shadow: var(--shadow);
}
.fe-bloco legend {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
  color: var(--red);
  background: var(--red-light);
  padding: 6px 14px;
  border-radius: 999px;
}
.fe-linha { margin-bottom: 20px; }
.fe-linha:last-child { margin-bottom: 0; }

.fe-label,
.fe-bloco > label,
.fe-dupla label {
  display: block;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gray-500);
  margin-bottom: 8px;
}
.fe-req { color: var(--red); }

.form-encomenda .inp {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border: 1.5px solid #ddd;
  border-radius: var(--radius);
  font-size: 16px;            /* 16px evita o zoom automático do iOS */
  font-family: inherit;
  color: var(--dark);
  background: var(--white);
  transition: border-color var(--transition);
}
.form-encomenda select.inp {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  cursor: pointer;
}
.form-encomenda .inp:focus {
  outline: 3px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--red);
}

/* Par de opções lado a lado — "Sortido" × "Escolher", "Retirar" × "Entrega".
   O input continua visível e operável; :has() só pinta o cartão em volta,
   então num navegador sem :has() a escolha ainda se enxerga pelo rádio. */
.fe-opcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fe-radio {
  display: flex; align-items: center; gap: 10px;
  min-height: 52px;
  margin: 0;
  padding: 12px 16px;
  border: 1.5px solid #ddd;
  border-radius: var(--radius);
  background: var(--white);
  font-size: 15px; font-weight: 600; color: var(--gray-700);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.fe-radio:hover { border-color: var(--red); }
.fe-radio:has(input:checked) {
  border-color: var(--red);
  background: var(--red-light);
  color: var(--dark);
}
.fe-radio:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 1px; }
.fe-radio input { width: 19px; height: 19px; accent-color: var(--red); flex: none; margin: 0; }

/* Sabores em pastilhas */
.fe-sabores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 10px;
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid #eee;
}
.fe-check {
  display: flex; align-items: center; gap: 10px;
  min-height: 48px;
  margin: 0;
  padding: 10px 14px;
  border: 1.5px solid #e4e4e4;
  border-radius: var(--radius);
  background: var(--gray-100);
  font-size: 14.5px; font-weight: 600; color: var(--gray-700);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.fe-check:hover { border-color: var(--gold-dark); }
.fe-check:has(input:checked) {
  border-color: var(--gold-dark);
  background: var(--gold-light);
  color: #3b2300;
}
.fe-check:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 1px; }
.fe-check input { width: 18px; height: 18px; accent-color: var(--gold-dark); flex: none; margin: 0; }

.fe-dupla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fe-hint {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13.5px; color: var(--gray-500); margin: 12px 0 0; line-height: 1.55;
}
.fe-hint::before {
  content: '';
  flex: none;
  width: 16px; height: 16px; margin-top: 2px;
  background: currentColor;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Total — o número que o cliente confere antes de enviar */
.fe-total {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  background: var(--dark);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
}
.fe-total-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.65); }
.fe-total-valor { font-size: 32px; font-weight: 900; color: var(--gold); line-height: 1; }
.fe-total-obs { font-size: 13px; color: rgba(255,255,255,.6); width: 100%; }

.fe-erro {
  display: flex; align-items: flex-start; gap: 10px;
  background: #fdecec; border: 1px solid #f0b4b4; color: #9f1c1c;
  border-radius: var(--radius); padding: 14px 18px; font-size: 14.5px; margin: 0; line-height: 1.5;
}
.fe-submit { width: 100%; justify-content: center; min-height: 58px; font-size: 17px; }
.fe-fallback { text-align: center; font-size: 14px; color: var(--gray-500); margin: 0; }
.fe-fallback a { color: var(--red); font-weight: 700; }

/* ── FAQ ────────────────────────────────────────────────────────── */
.faq-lista { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  border: 1px solid #eee;
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  min-height: 44px;
  font-size: 16px; font-weight: 700; color: var(--dark);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 22px; font-weight: 400; color: var(--red); line-height: 1; flex: none;
}
.faq-item[open] summary::after { content: '–'; }
.faq-item p { margin: 0; padding: 0 22px 20px; font-size: 15px; color: var(--gray-500); line-height: 1.65; }

/* ── Confiança ──────────────────────────────────────────────────── */
.confianca-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.confianca-texto p { font-size: 16px; color: var(--gray-700); line-height: 1.7; margin: 0 0 22px; max-width: 52ch; }
.confianca-social { display: flex; gap: 12px; flex-wrap: wrap; }
.confianca-dados { display: flex; flex-direction: column; gap: 16px; }
.cd-item {
  background: var(--white);
  border: 1px solid #eee;
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}
.cd-item strong {
  display: block; font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--red); margin-bottom: 6px;
}
.cd-item a, .cd-item span { font-size: 15px; color: var(--gray-700); line-height: 1.6; text-decoration: none; }
.cd-item a:hover { color: var(--red); text-decoration: underline; }

/* ── Botão flutuante (só no celular) ────────────────────────────── */
.fab-encomenda { display: none; }

@media (max-width: 860px) {
  .hero-festa-grid,
  .confianca-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-festa-grid { gap: 28px; }
  .hero-festa-foto { order: -1; }
  .hero-festa-foto img { max-width: 320px; }
  .cardapio-grid { grid-template-columns: minmax(0, 1fr); }
  .passos { grid-template-columns: minmax(0, 1fr); }

  /* Barra fixa: a ação principal fica sempre ao alcance do polegar. */
  .fab-encomenda {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    position: fixed; left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 90;
    min-height: 56px;
    background: #25D366;
    color: #06351a;
    font-size: 16px; font-weight: 800;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(0,0,0,.3);
  }
  .fab-encomenda:active { transform: translateY(1px); }
  /* Espaço para a barra não cobrir o rodapé */
  .page-body { padding-bottom: 84px; }
}

@media (max-width: 480px) {
  .fe-dupla { grid-template-columns: minmax(0, 1fr); }
  .selo-preco { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-festa-link-lic, .form-encomenda .inp { transition: none; }
}

/* Ícones dos títulos de seção em /varejo (substituíram os emojis) */
.sec-ico { vertical-align: -5px; color: var(--red); }

/* Destaque dos centos dentro da seção Padaria */
.destaque-centos {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  background: var(--gold-light);
  border: 1px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin: 18px 0 24px;
}
.destaque-centos strong { font-size: 17px; font-weight: 800; color: #3b2300; }
.destaque-centos span { font-size: 14.5px; color: #5a4200; }
.destaque-centos .btn { margin-top: 6px; min-height: 44px; }
/* ══════════════════════════════════════════════════════════════════
   ENCOMENDA DE SALGADOS — direção visual

   O que guia: um cento de salgado sai de uma padaria de bairro no
   Politeama, não de um app. Então nada de card com sombra, nada de
   eyebrow em caixa alta, nada de alternar branco e cinza por seção.

   Boldness em um lugar só: o preço. Ele é tipografia, não medalha.
   O resto fica quieto — linha fina, espaço e hierarquia de peso.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --f-tinta:     #2A1512;   /* marrom quase preto: quente, não cinza azulado */
  --f-tinta-2:   #6B5750;   /* texto secundário, mesma família de temperatura */
  --f-vermelho:  #D42027;   /* identidade — não decoração */
  --f-vermelho-e:#9E0E14;
  --f-dourado:   #F9A825;   /* só onde há preço ou ação */
  --f-linha:     #EBE1DA;   /* divisórias */
  --f-papel:     #FFFFFF;

  --f-display: 'Fraunces', Georgia, 'Times New Roman', serif;
}

/* Fraunces é variável: SOFT alto arredonda as terminações, que é o que
   aproxima do desenho do logo. WONK fica desligado — a variante "torta"
   das letras viraria enfeite aqui. */
.hero-festa h1,
.section-title,
.cardapio-head h3,
.passo h3,
.faq-item summary,
.fe-total-valor,
.preco-num {
  font-family: var(--f-display);
  font-variation-settings: 'SOFT' 50, 'WONK' 0;
  letter-spacing: -0.015em;
}

/* ── Hero ───────────────────────────────────────────────────────── */
.hero-festa {
  background: var(--f-vermelho);
  color: #fff;
  padding: calc(var(--header-h) + 44px) 0 52px;
}
.hero-festa-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.hero-festa h1 {
  font-size: clamp(34px, 5.6vw, 58px);
  font-weight: 800;
  line-height: 1.04;
  margin: 0 0 26px;
  max-width: 14ch;
}
.hero-festa-link-lic {
  display: inline-block;
  font-size: 13px;
  color: rgba(255,255,255,.72);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.28);
  padding-bottom: 2px;
  margin-bottom: 24px;
}
.hero-festa-link-lic:hover { color: #fff; border-color: #fff; }

/* O preço: tipografia grande, sem caixa, sem rotação. O número é o
   elemento memorável da página — tudo em volta é menor e quieto. */
.preco {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 24px;
}
.preco-moeda {
  font-family: var(--f-display);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  color: var(--f-dourado);
  line-height: 1;
}
.preco-num {
  font-size: clamp(64px, 10vw, 104px);
  font-weight: 900;
  color: var(--f-dourado);
  line-height: .86;
}
.preco-unidade {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,.82);
  line-height: 1.35;
  max-width: 11ch;
}

.hero-festa-sub {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.7;
  color: rgba(255,255,255,.88);
  max-width: 42ch;
  margin: 0 0 30px;
}
.hero-festa-acoes { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-festa-foto { margin: 0; }
.hero-festa-foto img {
  display: block;
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
  border-radius: 4px;          /* quase reto: a foto é o objeto, não um widget */
}

/* ── Seções: sem alternância de fundo ───────────────────────────── */
.home-festa .section-white, .home-festa .section-gray { background: var(--f-papel); }
.home-festa .section-gray { border-top: 1px solid var(--f-linha); }

.section-title {
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 700;
  color: var(--f-tinta);
  line-height: 1.15;
  margin: 0 0 12px;
}
.section-subtitle {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--f-tinta-2);
  max-width: 54ch;
}
/* Cabeçalho de seção alinhado à esquerda: é como se lê, e centralizar
   tudo é o reflexo de landing page genérica. */
.home-festa .section-center { text-align: left; }
.home-festa .section-center .section-subtitle { margin-left: 0; margin-right: 0; }

/* ── Cardápio ───────────────────────────────────────────────────── */
.cardapio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.cardapio-bloco {
  border: 0;
  border-top: 2px solid var(--f-tinta);
  border-radius: 0;
  padding: 22px 0 0;
  background: none;
  box-shadow: none;
}
.cardapio-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 20px;
}
.cardapio-head h3 { font-size: 23px; font-weight: 700; color: var(--f-tinta); margin: 0; }
.cardapio-preco {
  background: none;
  color: var(--f-vermelho);
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 800;
  padding: 0;
  border-radius: 0;
  margin: 0;
}
.cardapio-qtd { font-size: 14px; color: var(--f-tinta-2); font-weight: 400; }

.sabores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0 20px;
  list-style: none; padding: 0; margin: 0;
}
.sabor {
  border: 0;
  border-bottom: 1px solid var(--f-linha);
  border-radius: 0;
  padding: 13px 0;
  background: none;
  transition: none;
}
.sabor:hover { border-color: var(--f-linha); }
.sabor-nome { font-size: 15.5px; font-weight: 500; color: var(--f-tinta); }

.cardapio-nota {
  text-align: left;
  margin: 32px 0 0;
  font-size: 15.5px;
  color: var(--f-tinta-2);
}

/* ── Como encomendar: é sequência, então numerar faz sentido ────── */
.passos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 44px);
  list-style: none; padding: 0; margin: 0 0 36px;
}
.passo {
  background: none;
  border: 0;
  border-top: 1px solid var(--f-linha);
  border-radius: 0;
  padding: 20px 0 0;
}
.passo-num {
  display: block;
  width: auto; height: auto;
  background: none;
  border-radius: 0;
  font-family: var(--f-display);
  font-size: 34px;
  font-weight: 900;
  color: var(--f-dourado);
  line-height: 1;
  margin-bottom: 10px;
}
.passo h3 { font-size: 18px; font-weight: 700; color: var(--f-tinta); margin: 0 0 6px; }
.passo p { margin: 0; font-size: 15px; color: var(--f-tinta-2); line-height: 1.65; }

.aviso-48h {
  background: none;
  border: 0;
  border-left: 0;
  border-top: 2px solid var(--f-dourado);
  border-radius: 0;
  padding: 18px 0 0;
  text-align: left;
  font-size: 16px;
  color: var(--f-tinta-2);
  margin: 0;
  max-width: 62ch;
}
.aviso-48h strong { color: var(--f-tinta); font-weight: 700; }

/* ── Formulário: borda fina, sem sombra ─────────────────────────── */
.fe-bloco {
  border: 1px solid var(--f-linha);
  border-radius: 6px;
  box-shadow: none;
  background: var(--f-papel);
}
.fe-bloco legend {
  background: none;
  color: var(--f-tinta);
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  padding: 0 10px 0 0;
}
.fe-label, .fe-bloco > label, .fe-dupla label {
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--f-tinta-2);
}
.fe-radio, .fe-check { border-radius: 6px; }
.fe-total {
  background: var(--f-tinta);
  border-radius: 6px;
}
.fe-total-label {
  font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: rgba(255,255,255,.7);
}
.fe-total-valor { font-size: 38px; font-weight: 900; color: var(--f-dourado); }

/* ── FAQ ────────────────────────────────────────────────────────── */
.faq-item {
  border: 0;
  border-bottom: 1px solid var(--f-linha);
  border-radius: 0;
  background: none;
}
.faq-item summary {
  padding: 20px 0;
  font-size: 17.5px;
  font-weight: 600;
  color: var(--f-tinta);
}
.faq-item p { padding: 0 0 20px; font-size: 16px; color: var(--f-tinta-2); max-width: 62ch; }
.faq-lista { gap: 0; }

/* ── Confiança ──────────────────────────────────────────────────── */
.confianca-texto p { color: var(--f-tinta-2); font-size: 16.5px; }
.cd-item {
  background: none;
  border: 0;
  border-top: 1px solid var(--f-linha);
  border-radius: 0;
  padding: 16px 0 0;
}
.cd-item strong {
  font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0;
  color: var(--f-tinta); margin-bottom: 4px;
}
.cd-item a, .cd-item span { color: var(--f-tinta-2); }

/* ── Destaque dos centos em /varejo ─────────────────────────────── */
.destaque-centos {
  background: none;
  border: 0;
  border-top: 2px solid var(--f-dourado);
  border-radius: 0;
  padding: 18px 0 0;
}
.destaque-centos strong { font-family: var(--f-display); font-size: 19px; color: var(--f-tinta); }
.destaque-centos span { color: var(--f-tinta-2); }

@media (max-width: 860px) {
  .hero-festa-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-festa-foto { order: -1; }
  .hero-festa-foto img { max-width: 300px; }
  .hero-festa h1 { max-width: none; }
  .cardapio-grid, .passos { grid-template-columns: minmax(0, 1fr); }
  .passos { gap: 0; }
  .passo { padding-top: 18px; margin-top: 18px; }
  .passo:first-child { margin-top: 0; }
}

/* ── Quantidade: stepper ─────────────────────────────────────────
   Eram seis botões em duas filas, e o último era "Mais" — quem queria
   400 escolhia "Mais" e explicava na observação. Com [−] [400] [+] o
   número é um só e qualquer quantidade cabe. Anda de 50 em 50, com um
   salto entre 0 e 100: meio cento não existe. */
.stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.stp-btn {
  flex: none;
  width: 44px; height: 44px;
  padding: 0;
  border: 1.5px solid var(--f-linha);
  border-radius: 50%;
  background: var(--f-papel);
  color: var(--f-vermelho);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.stp-btn:hover:not(:disabled) { border-color: var(--f-vermelho); }
.stp-btn:focus-visible { outline: 3px solid var(--f-dourado); outline-offset: 2px; }
/* Em zero não há o que tirar, no teto não há o que somar: o botão apaga
   em vez de ficar clicável sem efeito. */
.stp-btn:disabled { color: var(--f-linha); cursor: default; }

.stp-val {
  flex: none;
  width: 84px; height: 44px;
  padding: 0;
  border: 1.5px solid var(--f-linha);
  border-radius: 6px;
  background: var(--f-papel);
  font-family: var(--f-display);
  font-size: 21px;
  font-weight: 700;
  color: var(--f-tinta);
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.stp-val:focus-visible { outline: 3px solid var(--f-dourado); outline-offset: 2px; }
/* As setinhas nativas do number ficariam ao lado dos nossos botões. */
.stp-val::-webkit-outer-spin-button,
.stp-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Preço da linha à direita, em largura fixa: a casa decimal não dança
   quando o número muda. */
.stp-preco {
  flex: none;
  min-width: 92px;
  text-align: right;
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--f-tinta);
}
.stp-dica { margin: 14px 0 0; font-size: 13.5px; color: var(--f-tinta-2); }

/* ── Formulário compacto ─────────────────────────────────────────
   Eram quatro caixas e três linhas por pergunta: rótulo em cima,
   controle no meio, dica embaixo. Oito respostas davam uma tela e meia
   de rolagem. Agora o rótulo fica na mesma linha do controle, as caixas
   viraram duas e a dica aparece uma vez só. */
.form-encomenda { gap: 14px; }
.fe-bloco { padding: 18px; }
.fe-linha { margin-bottom: 14px; }

.fe-linha-qtd {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.fe-linha-qtd .fe-label { margin: 0; flex: 1 1 auto; }

/* "Sabores" ao lado das opções em vez de acima, e as opções com a
   largura do texto — não metade da caixa cada uma. */
.fe-linha-sabor {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.fe-linha-sabor .fe-label { margin: 0; flex: none; }
.fe-opcoes.fe-opcoes-min { display: flex; flex-wrap: wrap; gap: 8px; }
.fe-opcoes-min .fe-radio {
  min-height: 38px;
  padding: 6px 12px;
  gap: 8px;
  font-size: 14px;
}
.fe-opcoes-min .fe-radio input { width: 16px; height: 16px; }

.fe-detalhe { margin-bottom: 18px; }
.fe-detalhe:last-of-type { margin-bottom: 0; }

.fe-sabores {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  padding-top: 12px;
  margin-top: 12px;
}
.fe-check { min-height: 40px; padding: 6px 10px; font-size: 14px; }

.fe-dupla { gap: 12px; margin-bottom: 12px; }
.fe-hint { margin: 0 0 14px; }
#fe-campos-entrega .fe-hint { margin-bottom: 0; }

/* No celular o rótulo não divide a linha com o stepper: sobe pra cima
   dele, e o preço encosta na direita. */
@media (max-width: 520px) {
  .fe-linha-qtd { flex-wrap: wrap; gap: 10px; }
  .fe-linha-qtd .fe-label { flex: 1 0 100%; }
  .stp-preco { margin-left: auto; }
}
/* ── Resposta do CEP ─────────────────────────────────────────────
   A consulta responde três coisas diferentes — achei, não achei, não
   deu pra perguntar — e cada uma pede uma ação diferente de quem está
   preenchendo. A cor separa; o texto explica. */
.fe-cep-status {
  margin: 0 0 12px;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.45;
}
.fe-cep-carregando { background: #F2EFEC; color: var(--f-tinta-2); }
.fe-cep-ok         { background: #EAF5EC; color: #1E6B2E; }
.fe-cep-erro       { background: #FCEBEB; color: var(--f-vermelho); }
.fe-cep-aviso      { background: #FDF3E0; color: #8A5A00; }
/* ── Campo WhatsApp, confirmação e botão condicional ─────────────
   O número do cliente é o que separa um clique perdido de um contato:
   antes, quem não concluía a conversa não deixava rastro nenhum. */
.fe-hint-zap { margin: 6px 0 0; }

.fe-falta {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--f-tinta-2);
  text-align: center;
}
.fe-submit:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Aparece antes de a página sair para o WhatsApp: se o navegador do
   Instagram engolir o redirecionamento, é isto que o cliente vê. */
.fe-confirma {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: 6px;
  background: #EAF5EC;
  color: #1E6B2E;
  font-size: 15px;
  line-height: 1.5;
}
.fe-confirma strong { font-family: var(--f-display); font-size: 17px; }
.fe-confirma a { color: #1E6B2E; font-weight: 700; }