/*
 * Tonkiri Campanha: estilo da campanha de fim de ano.
 * As classes vão no Elementor (Avançado → Classes CSS) e nos shortcodes do plugin.
 * Títulos em Souvenir, servida pelo plugin Tonkiri Site (a mesma fonte do site antigo).
 */
.tk,
.tk-termo,
.tk-pix {
  --tk-verde: #2c6f5a;
  --tk-verde-escuro: #1f4f40;
  --tk-salmao: #f39a8b;
  --tk-salmao-claro: #f3d1c7;
  --tk-creme: #feebdc;
  --tk-cinza: #666666;
  --tk-salvia: #c0cfc8;
  --tk-coracao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 2.9 4.5 6.6 4.5c2.1 0 3.6 1.2 4.4 2.6.8-1.4 2.3-2.6 4.4-2.6 3.7 0 5.7 3.9 4.2 7.3C19.5 16.4 12 21 12 21z' fill='%23F39A8B'/%3E%3C/svg%3E");
  font-family: 'Open Sans', Arial, sans-serif;
  color: var(--tk-cinza);
}

/* ---------- Tipografia ---------- */

.tk .tk-titulo .elementor-heading-title,
.tk-titulo {
  font-family: 'Souvenir', Georgia, serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--tk-verde);
  margin: 0;
}
.tk .tk-titulo--h1 .elementor-heading-title {
  font-size: clamp(30px, 4vw, 50px);
}
.tk .tk-titulo--h2 .elementor-heading-title,
.tk-termo-titulo {
  font-size: clamp(26px, 3.2vw, 40px);
}
.tk .tk-titulo--h3 .elementor-heading-title {
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.2;
}
.tk .tk-num .elementor-heading-title {
  font-family: 'Souvenir', Georgia, serif;
  font-weight: 500;
  font-size: 36px;
  line-height: 1.1;
  color: inherit;
  margin: 0;
}

.tk .tk-kicker .elementor-heading-title,
.tk-kicker {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tk-verde);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tk .tk-kicker--coracao .elementor-heading-title::before {
  content: '';
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  background: var(--tk-coracao) center / contain no-repeat;
}

.tk .tk-texto,
.tk .tk-texto p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--tk-cinza);
}
.tk .tk-texto p:last-child {
  margin-bottom: 0;
}
.tk .tk-texto a {
  color: var(--tk-verde);
  text-decoration: underline;
}
.tk .tk-texto--grande,
.tk .tk-texto--grande p {
  font-size: 18px;
}
.tk .tk-negrito .elementor-heading-title {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--tk-verde);
  margin: 0;
}

/* ---------- Botões ---------- */

body .tk .elementor-button,
body .tk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
  transition: filter 0.15s ease, background-color 0.15s ease;
  box-shadow: none;
}
body .tk .elementor-button:hover,
body .tk-btn:hover {
  filter: brightness(0.95);
}
body .tk .elementor-button:focus-visible,
body .tk-btn:focus-visible {
  outline: 3px solid var(--tk-verde);
  outline-offset: 3px;
}
body .tk .tk-btn-salmao .elementor-button {
  background: var(--tk-salmao);
  color: var(--tk-verde-escuro);
}
body .tk .tk-btn-contorno-creme .elementor-button {
  background: transparent;
  border-color: var(--tk-creme);
  color: var(--tk-creme);
}
body .tk .tk-btn-verde .elementor-button,
body .tk-btn--verde {
  background: var(--tk-verde);
  color: #ffffff;
}
body .tk .tk-btn-contorno-verde .elementor-button,
body .tk-btn--contorno-verde {
  background: #ffffff;
  border-color: var(--tk-verde);
  color: var(--tk-verde);
}
body .tk .tk-btn-grande .elementor-button {
  min-height: 60px;
  padding: 0 36px;
  font-size: 18px;
}

/* ---------- Seções da página /cestas/ ---------- */

.e-con.tk-fundo-creme {
  background-color: var(--tk-creme);
}
.e-con.tk-hero {
  background-color: var(--tk-verde);
  position: relative;
  --padding-top: 64px;
  --padding-bottom: 110px;
}
.e-con.tk-hero::after,
.e-con.tk-onda-topo::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 90px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
.e-con.tk-hero::after {
  bottom: -1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,70 C260,130 520,10 780,40 C1040,70 1240,110 1440,50 L1440,120 L0,120 Z' fill='%23FEEBDC'/%3E%3C/svg%3E");
}
.tk-hero .tk-kicker .elementor-heading-title,
.tk-hero .tk-titulo .elementor-heading-title,
.tk-obrigada .tk-titulo .elementor-heading-title {
  color: var(--tk-creme);
}
.tk-hero .tk-texto,
.tk-hero .tk-texto p,
.tk-obrigada .tk-texto,
.tk-obrigada .tk-texto p {
  color: #ffffff;
}
.tk .tk-foto img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}
.tk .tk-foto--larga img {
  height: 460px;
  border-radius: 28px;
}

.e-con.tk-cartao {
  background-color: #ffffff;
  border-radius: 24px;
}
.e-con.tk-sobe {
  margin-top: -60px;
  position: relative;
  z-index: 2;
}

/* Cartões de valor (R$ 30 / 80 / 400 / 800) */
.e-con.tk-valores {
  --flex-wrap: wrap;
  --gap: 16px;
  --row-gap: 16px;
  --column-gap: 16px;
}
.e-con.tk-valores > .e-con {
  --width: auto;
  flex: 1 1 220px;
  border-radius: 20px;
  --padding-top: 28px;
  --padding-bottom: 28px;
  --padding-left: 22px;
  --padding-right: 22px;
  text-align: center;
  --gap: 6px;
  --row-gap: 6px;
}
.tk .tk-valor-branco {
  background: #ffffff;
  color: var(--tk-verde);
}
.tk .tk-valor-verde {
  background: var(--tk-verde);
  color: var(--tk-creme);
}
.tk .tk-valor-salmao {
  background: var(--tk-salmao);
  color: var(--tk-verde-escuro);
}
.tk .tk-valor-salvia {
  background: var(--tk-salvia);
  color: var(--tk-verde-escuro);
}
.tk .tk-valores .tk-texto,
.tk .tk-valores .tk-texto p {
  font-size: 15px;
  color: inherit;
  margin: 0;
}
.tk .tk-valor-verde .tk-texto,
.tk .tk-valor-verde .tk-texto p {
  color: #ffffff;
}

/* Bloco PIX */
.tk .tk-qr img {
  width: 250px;
  height: 250px;
  image-rendering: pixelated;
  border-radius: 12px;
  background: #ffffff;
  padding: 0;
  box-shadow: 0 0 0 14px var(--tk-salmao-claro);
  margin: 14px;
}
.tk .tk-qr--pequeno img {
  width: 104px;
  height: 104px;
  border-radius: 8px;
  box-shadow: 0 0 0 8px var(--tk-salmao-claro);
  margin: 8px;
}
.tk .tk-legenda,
.tk .tk-legenda p {
  font-size: 13px;
  color: var(--tk-cinza);
  margin: 0;
}
.tk .tk-aviso {
  background: var(--tk-creme);
  border-radius: 16px;
  padding: 14px 18px 14px 50px;
  position: relative;
}
.tk .tk-aviso::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  background: var(--tk-coracao) center / contain no-repeat;
}
.tk .tk-aviso,
.tk .tk-aviso p {
  color: var(--tk-verde);
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

/* Três jeitos de fazer parte */
.e-con.tk-passos {
  --flex-wrap: wrap;
  --gap: 24px;
  --row-gap: 24px;
  --column-gap: 24px;
}
.e-con.tk-passos > .e-con {
  --width: auto;
  flex: 1 1 260px;
  --gap: 6px;
  --row-gap: 6px;
  padding-left: 68px;
  position: relative;
}
.tk .tk-passo-num {
  position: absolute;
  left: 0;
  top: 0;
  width: 52px !important;
}
.tk .tk-passo-num .elementor-heading-title {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--tk-salmao);
  color: var(--tk-verde-escuro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Souvenir', Georgia, serif;
  font-size: 26px;
  margin: 0;
}

/* Prazo */
.tk .tk-centro {
  text-align: center;
}
.tk .tk-centro .elementor-heading-title {
  justify-content: center;
}

/* Agradecimento */
.e-con.tk-obrigada {
  background-color: var(--tk-verde);
  position: relative;
  --padding-top: 150px;
  --padding-bottom: 72px;
}
.e-con.tk-onda-topo::before {
  top: -1px;
  height: 150px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,60 C1300,90 1120,100 900,70 C620,30 300,10 0,60 Z' fill='%23FEEBDC'/%3E%3Cpath d='M0,60 C300,10 620,30 900,70 C1120,100 1300,90 1440,60 L1440,120 C1320,140 1160,130 940,110 C640,80 320,95 0,120 Z' fill='%232C6F5A'/%3E%3Cpath d='M0,120 C320,95 640,80 940,110 C1160,130 1320,140 1440,120 L1440,180 C1340,190 1200,200 1000,185 C700,160 360,150 0,175 Z' fill='%23F39A8B'/%3E%3C/svg%3E");
}
.tk .tk-logo img {
  height: 84px;
  width: auto;
}

/* Colunas que quebram em linha no celular */
.e-con.tk-col {
  --width: auto;
  flex: 1 1 420px;
  min-width: 0;
}
.e-con.tk-col-auto {
  --width: auto;
  flex: 0 0 auto;
}

/* Doar com cartão e compartilhar */
.tk-cartao-doar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding-top: 14px;
  border-top: 1px solid var(--tk-salmao-claro);
}
.tk-cartao-doar p {
  margin: 0;
  font-size: 15px;
  color: var(--tk-cinza);
}
.tk-cartao-doar .tk-btn {
  min-height: 44px;
  font-size: 14px;
  padding: 0 22px;
}
.tk .tk-compartilhar {
  display: inline-block;
  margin-top: 6px;
  font-weight: 700;
  color: var(--tk-verde);
  text-decoration: underline;
}

/* ---------- Termômetro (shortcode) ---------- */

.tk-termo {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tk-termo-topo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 24px;
}
.tk-termo-data,
.tk-termo-sub {
  margin: 0;
  color: var(--tk-cinza);
}
.tk-termo-data {
  font-size: 13px;
}
.tk-termo-sub {
  font-size: 18px;
}
.tk-barra {
  height: 16px;
  background: var(--tk-verde);
  border-radius: 999px;
  overflow: hidden;
}
.tk-barra--grande {
  height: 26px;
}
.tk-barra > div {
  height: 100%;
  background: var(--tk-salmao);
  border-radius: 999px;
}
.tk-termo-legenda {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--tk-verde);
}
.tk-termo--pagina .tk-termo-legenda {
  font-size: 16px;
}

/* ---------- PIX (shortcode) ---------- */

.tk-pix {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tk-pix-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
body .tk-pix .tk-btn {
  font-size: 14px;
  padding: 0 24px;
}
/* O tema Hello pinta [type=button] (fundo transparente e hover rosa): especificidade maior aqui. */
body .tk-pix button.tk-btn--verde,
body .tk-pix button.tk-btn--verde:hover,
body .tk-pix button.tk-btn--verde:focus {
  background-color: var(--tk-verde);
  border-color: var(--tk-verde);
  color: #ffffff;
}
body .tk-pix button.tk-btn--contorno-verde,
body .tk-pix button.tk-btn--contorno-verde:hover,
body .tk-pix button.tk-btn--contorno-verde:focus,
body .tk-cartao-doar a.tk-btn--contorno-verde,
body .tk-cartao-doar a.tk-btn--contorno-verde:hover {
  background-color: #ffffff;
  border-color: var(--tk-verde);
  color: var(--tk-verde);
}
.tk .tk-cartao .tk-num .elementor-heading-title {
  color: var(--tk-verde);
}
.tk-pix-chave {
  margin: 0;
  font-size: 15px;
  color: var(--tk-cinza);
}
.tk-pix-chave strong {
  color: var(--tk-verde);
}

/* ---------- Banner do carrossel (home) ---------- */

.e-con.tk-banner {
  background-color: var(--tk-verde);
  background-size: cover;
  background-position: right center;
  position: relative;
  overflow: hidden;
}
.e-con.tk-banner::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 56%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 780 810' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L690,0 C760,180 640,330 700,480 C750,610 700,720 740,810 L0,810 Z' fill='%232C6F5A'/%3E%3C/svg%3E") left top / 100% 100% no-repeat;
  pointer-events: none;
}
.e-con.tk-banner > * {
  position: relative;
  z-index: 1;
}
.tk-banner .tk-kicker .elementor-heading-title {
  color: var(--tk-creme);
  font-size: 16px;
}
.tk-banner .tk-titulo .elementor-heading-title {
  color: var(--tk-creme);
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.05;
}
.tk-banner .tk-texto,
.tk-banner .tk-texto p {
  color: #ffffff;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.45;
}

/* ---------- Bloco da campanha na home ---------- */

.e-con.tk-bloco {
  background-color: #ffffff;
  border-radius: 28px;
  overflow: hidden;
}
.e-con.tk-bloco-foto-col {
  align-self: stretch;
  --padding-top: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
  flex: 1 1 380px;
}
.tk .tk-bloco-foto {
  flex: 1 1 auto;
  height: 100%;
}
.e-con.tk-col-pequena {
  --width: auto;
  flex: 1 1 200px;
  min-width: 0;
}
.tk .tk-bloco-foto img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  display: block;
}
.tk .tk-bloco-foto .elementor-widget-container,
.tk .tk-bloco-foto .elementor-image {
  height: 100%;
}

/* ---------- Item "Campanha" no menu (classe tk-menu-destaque no item) ---------- */

.tk-menu-destaque > a.hfe-menu-item,
.tk-menu-destaque > a {
  text-decoration: underline;
  text-decoration-color: #f39a8b;
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}

/* ---------- Celular ---------- */

@media (max-width: 767px) {
  .e-con.tk-hero {
    --padding-top: 40px;
    --padding-bottom: 80px;
  }
  .tk .tk-foto img {
    height: 260px;
  }
  .tk .tk-foto--larga img {
    height: 240px;
  }
  .tk .tk-qr img {
    width: 200px;
    height: 200px;
  }
  .e-con.tk-banner::before {
    width: 100%;
    background: rgba(44, 111, 90, 0.88);
  }
  .e-con.tk-obrigada {
    --padding-top: 110px;
  }
  .e-con.tk-onda-topo::before {
    height: 100px;
  }
  .e-con.tk-valores > .e-con {
    flex: 1 1 140px;
    --padding-top: 20px;
    --padding-bottom: 20px;
  }
  .tk .tk-num .elementor-heading-title {
    font-size: 30px;
  }
  .tk .tk-bloco-foto img {
    min-height: 220px;
    max-height: 260px;
  }
}