:root{
  --font:'Outfit',system-ui,Segoe UI,Roboto,Arial,Helvetica,sans-serif;

  /* base */
  --bg:#ffffff;
  --soft:#fff4f4;        /* fundo suave um pouco mais quente */
  --text:#0f172a;        /* ligeiramente mais escuro p/ contraste */
  --muted:#475569;

  --line:#eef2f6;        /* bordas mais claras */
  --shadow:0 10px 28px rgba(16,24,40,.12);

  /* brand (mais vivas) */
  --red:#ff0015;         /* vermelho mais saturado */
  --red-700:#fa0519;
  --green:#12b76a;       /* verde mais vivo */
  --green-700:#1ad860;
  --yellow:#ffb300;      /* amarelo mais forte */

  --yellow-400:#fefe05;
  --yellow-500:#ffb300;

  --radius:18px;
  --container:1120px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);color:var(--text);background:var(--bg)}

.container{max-width:var(--container);margin:0 auto;padding:0 16px}
.title-red{color:var(--red);text-align:center;margin:0 0 18px;font-size:clamp(24px,3vw,34px);font-weight:800}
.bg-soft{background:linear-gradient(180deg,#fff 0%, var(--soft) 100%)}

/* ================= TOPBAR ================= */
.topbar{
  position: sticky; top: 0; z-index: 50;
  background:#fff;
  border-bottom:3px solid #f4d1d1;
  transition: box-shadow .2s ease;
}

/* Alinha conteúdo */
.topbar__wrap{
  max-width: var(--container);
  margin: 0 auto;
  height: 80px;
  padding: 0 24px;                 /* respiro lateral */
  display: flex;
  align-items: center;
  justify-content: space-between;  /* logo à esquerda, CTA à direita */
  gap: 16px;
}

/* Tira a centralização absoluta da marca */
.brand{
  position: static;
  transform: none;
  display: inline-flex;
  align-items: center;
}
.brand img{
  height: 42px;                    /* ajuste fino do tamanho do logo */
  width: auto;
  display: block;
}

/* Tira position absolute do botão também */
.topbar__cta{
  position: static;
  transform: none;
  margin-left: auto;               /* garante que o CTA encoste à direita */
}

@media (max-width:640px){
  .topbar__wrap{ height: 68px; padding: 0 16px; }
  .brand img{ height: 34px; }
  .topbar__cta{ font-size:14px; padding:10px 14px; }
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;
  text-decoration:none;font-weight:700;border:0;cursor:pointer;transition:.15s
}
.btn-danger{
  background: linear-gradient(90deg, var(--red), var(--red-700));
  color:#fff; box-shadow: 0 8px 18px rgba(220,38,38,.25);
}
.btn-danger:hover{ transform: translateY(-1px); filter: brightness(.98); }

.btn-success{
  background: linear-gradient(90deg, var(--green), var(--green-700));
  color:#fff; box-shadow: 0 8px 18px rgba(22,163,74,.25);
}
.btn-success:hover{ transform: translateY(-1px); filter: brightness(.98); }

.btn-big{padding:14px 22px;font-size:18px}
.pill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:8px 14px;border:0;cursor:pointer}
.pill-yellow{
  background: linear-gradient(90deg, var(--yellow-400), var(--yellow-500));
  color:#7a3d00; box-shadow: 0 8px 18px rgba(234,179,8,.35);
}
.pill-yellow:hover{ transform: translateY(-1px); filter: brightness(.98); }

/* ================= HERO ================= */
/* ===== HERO (modo <picture> + <img>) ===== */
.hero { padding: 18px 0; }

/* cartão do banner */
.hero__media{
  margin: 0;
  padding: 0;                 /* sem respiro interno */
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: none;           /* nada de fundo dentro do card */
  position: static;           /* reseta caso tenha ficado relative */
  height: auto;               /* garante que não ficou altura fixa */
}

/* remove qualquer traço de layout do modo anterior */
.hero__cover{ display:none !important; }   /* se ainda existir no CSS antigo */
.hero__media{ padding-top: 0 !important; } /* remove proporção antiga */

/* <picture>/<img> ocupando 100% sem “gap” inline */
.hero__picture{ display:block; line-height:0; }
.hero__img{
  display:block;              /* tira o espaço fantasma do <img> */
  width:100%;
  height:auto;                /* mantém a proporção da arte */
}

/* ================= FRETE ================= */
.frete{
  padding:20px 0 10px;
  background:linear-gradient(180deg,#fff 0%, #fff3f3 100%);
  border-top:1px solid #f3d2d2; border-bottom:1px solid #f3d2d2;
}
.frete__box{text-align:center}
.frete__box h1{margin:6px 0 8px;color:var(--red);font-size:clamp(28px,4vw,40px);font-weight:900}
.frete__box p{margin:0 0 14px;color:#4b5563}

/* ================= OFERTAS / CARDS ================= */
.ofertas{padding:18px 0 24px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;
  padding:0; /* sem padding interno */
}

/* ====== BANNER DO PRODUTO: SEM RESPIRO E IMAGEM INTEIRA ====== */
/* 1) zera padding/margin do primeiro filho do card (onde costuma ficar o banner) */
.card > *:first-child{
  padding:0 !important;
  margin:0 !important;
  border-top-left-radius:var(--radius);
  border-top-right-radius:var(--radius);
  overflow:hidden;
}

/* 2) se o banner for um IMG direto */
img.card__banner{
  display:block;
  width:100%;
  height:auto;
  margin:0;
  border-top-left-radius:var(--radius);
  border-top-right-radius:var(--radius);
  aspect-ratio:auto !important;
  object-fit:initial !important;
}

/* 3) se houver um wrapper .card__banner com <img> dentro */
.card__banner{
  display:block;
  width:100%;
  margin:0;
  padding:0 !important;                 /* sem respiro */
  border-top-left-radius:var(--radius);
  border-top-right-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:auto !important;         /* cancela 16/9 antigos */
  object-fit:initial !important;
}
.card__banner img{
  display:block;
  width:100%;
  height:auto;                          /* mostra a imagem inteira */
  margin:0;
}

/* 4) wrappers utilitários que dão padding no primeiro bloco */
.card .p-6:first-child,
.card .px-6:first-child,
.card .py-6:first-child,
.card .p-4:first-child,
.card .px-4:first-child,
.card .py-4:first-child{ padding:0 !important; }

/* ====== conteúdo do card ====== */
.card__body{padding:14px;display:flex;flex-direction:column;gap:8px}
.card h3{margin:0 0 6px;font-size:18px}
.card__desc{margin:0 0 12px;color:var(--muted)}
.card__footer{display:flex;align-items:center;justify-content:space-between}
.price{color:var(--red);font-size:20px}

/* ================= DEPOIMENTOS ================= */
.depo{padding:24px 0}
.depo__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media (max-width:800px){.depo__grid{grid-template-columns:1fr}}
.depo__card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:16px}
.stars{color:#fbbf24;font-size:18px;margin-bottom:8px}
.quote{margin:0 0 10px;color:#374151;font-style:italic}
.name{margin:0;color:#ef4444;font-weight:700}

/* ================= FAQ ================= */
.faq{padding:24px 0}
.faq__item{
  border:1px solid #f3d2d2;
  border-radius:12px;
  background:#fff;
  box-shadow:var(--shadow);
  margin:10px 0;
  overflow:hidden;
}
.faq__q{
  width:100%;
  text-align:left;
  background:#fff;
  color:#b91c1f;
  font-weight:800;
  border:0;
  padding:14px 16px;
  font-size:16px;
  border-bottom:1px solid #fde2e2;
  cursor: default;
}
.faq__a{
  padding:12px 16px;
  color:#374151;
  display:block;
  max-height:none;
  overflow:visible;
  transition:none;
  opacity:1;
}
.faq__item.open .faq__a{
  max-height:none !important;
  overflow:visible !important;
  opacity:1 !important;
}

/* ================= CONTATO ================= */
.icon{
  width: 72px;
  height: 72px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  box-shadow: 0 10px 28px rgba(16,24,40,.12);
}
.icon svg{
  width: 34px;
  height: 34px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-red{
  background: linear-gradient(135deg, #ff0015, #fa0519);
  color: #ffffff;
}
.icon-yellow{
  background: linear-gradient(135deg, var(--yellow-400), var(--yellow-500));
  color: #7a3d00;
}
.icon-green{
  background: linear-gradient(135deg, #12b76a, #1ad860);
  color: #ffffff;
}
@media (max-width:640px){
  .icon{ width:64px; height:64px; }
  .icon svg{ width:30px; height:30px; }
}

/* ===== CONTATO (layout em 3 colunas) ===== */
.contato { 
  padding: 24px 0;
}
.contato .title-red { 
  margin-bottom: 12px; 
}
.contato__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 900px){
  .contato__grid{ grid-template-columns: 1fr; }
}
.contact-box{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 24px 18px;
  text-align: center;
}
.contact-box .icon{
  margin: 0 auto 12px;
}

/* Endereço clicável */
#enderecoClick{ cursor: pointer; }

/* Títulos vermelhos + ajustes visuais */
.title-red{ color:var(--red); }
.bg-soft{ background:linear-gradient(180deg,#fff 0%, var(--soft) 100%); }
.topbar{ background:#fff; border-bottom:3px solid #f7caca; }
.hero__media img{ filter:saturate(1.08) contrast(1.05); }
.frete{
  background:linear-gradient(180deg,#fff 0%, #ffe9e9 100%);
  border-top:1px solid #f7caca; border-bottom:1px solid #f7caca;
}
.btn-danger{
  background:linear-gradient(90deg, var(--red) 0%, var(--red-700) 100%);
  color:#fff; box-shadow:0 12px 26px rgba(226,27,42,.22);
}
.btn-success{
  background:linear-gradient(90deg, var(--green) 0%, var(--green-700) 100%);
  color:#fff; box-shadow:0 12px 26px rgba(14,159,89,.22);
}
.pill-yellow{
  background:linear-gradient(90deg,var(--yellow-400),var(--yellow-500));
  color:#7a3d00; box-shadow:0 10px 22px rgba(255,179,0,.35);
}
.card, .depo__card, .contact-box{
  border-color:var(--line);
  box-shadow:var(--shadow);
}
.card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(16,24,40,.14); }
.price{ color:var(--red); }
.stars{ color:#ffcc33; }
.faq__q{ color:#b9111f; }
.icon-red{ background:linear-gradient(135deg,var(--red),var(--red-700)); color:#fff; }
.icon-green{ background:linear-gradient(135deg,var(--green),var(--green-700)); color:#fff; }
.icon-yellow{ background:linear-gradient(135deg,var(--yellow-400),var(--yellow-500)); color:#7a3d00; }

/* rodapé puxando pro vermelho da marca */
.footer{ background:linear-gradient(180deg,var(--red) 0%, var(--red-700) 100%); }

/* ====== TOPBAR FIX extra ====== */
.topbar{
  position: sticky; top: 0; z-index: 50;
  background:#fff;
  border-bottom:3px solid #f4d1d1;
}
.topbar__wrap{
  max-width: var(--container);
  margin: 0 auto;
  height: 80px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-direction: row;
}
.topbar__wrap .brand,
.topbar__wrap .topbar__cta{
  position: static !important;
  transform: none !important;
}
.topbar__wrap .brand{
  order: 0;
  margin-right: auto;
}
.topbar__wrap .topbar__cta{
  order: 1;
  margin-left: 0 !important;
}
.topbar__wrap .brand img{
  height: 40px; width: auto; display: block;
}
@media (max-width:640px){
  .topbar__wrap{ height: 68px; padding: 0 16px; }
  .topbar__wrap .brand img{ height: 34px; }
}

/* ===== Footer ===== */
.footer{
  /* contexto p/ posicionar o selo e respiro extra embaixo */
  position: relative;
  padding: 24px 0 72px;
  background: linear-gradient(180deg,var(--red) 0%, var(--red-700) 100%);
}

/* conteúdo textual do footer, centralizado */
.footer .container{
  text-align: center;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* linha central */
.footer hr{
  border: 0;
  border-top: 1px solid rgba(255,255,255,.35);
  width: 80%;
  max-width: 960px;
  margin: 14px auto;
}

/* apenas textos centralizados (não inclui img p/ não afetar o selo) */
.footer p,
.footer small,
.footer span{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Selo do parceiro — Canto direiro no footer ===== */
.footer .partner-badge{
  position: absolute !important;
  left: 85%;                 /* você já ajustou para esse ponto */
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: block;
  text-align: center;        /* centraliza o texto em relação ao logo */
}

/* texto acima do logo */
.footer .partner-badge .partner-label{
  display: block;
  margin-bottom: 6px;        /* espaçamento entre texto e logo */
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;
  opacity: .92;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* logo */
.footer .partner-badge img{
  width: 120px;
  height: auto;
  display: block;
  opacity: .95;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.2));
}

/* remove o sublinhado do selo e de qualquer estado do link */
.footer .partner-badge,
.footer .partner-badge:link,
.footer .partner-badge:visited,
.footer .partner-badge:hover,
.footer .partner-badge:active {
  text-decoration: none;
}

/* garante que o texto também não herde sublinhado */
.footer .partner-badge .partner-label{
  text-decoration: none;
}

@media (max-width: 640px){
  .footer{
    padding-bottom: 24px;
  }

  /* o selo passa para o fluxo e fica centralizado */
  .footer .partner-badge{
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;

    /* centraliza o próprio link e o conteúdo dentro dele */
    margin: 16px auto 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;      /* <-- garante imagem central */
    gap: 4px;
  }

  .footer .partner-badge img{
    width: 110px;
    height: auto;
    display: block;
    margin: 0 auto !important;  /* <-- centraliza o <img> */
  }

  .footer .partner-badge .partner-label{
    font-size: 13px;
    margin-bottom: 2px;
  }
}

/* Mobile: 2 cards por linha + selo menor */
@media (max-width: 640px) {
  .cards{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px;
  }
  .card__body{ padding: 12px; }
  .card h3{ font-size: 16px; }
  .price{ font-size: 18px; }
  .card .btn, .card .pedir{ padding: 10px 14px; font-size: 14px; }
}