/* =====================================================================
   BLACK FRIDAY 2026 — Thermas de São Pedro
   Carregado SOMENTE pela index.php, depois de todos os outros CSS.
   Não altera o css/main.css. Para remover, veja COMO-REMOVER-BLACK-FRIDAY.txt
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. VARIÁVEIS — cores e TEXTOS DOS SELOS (edite aqui)
   --------------------------------------------------------------------- */
:root {
  --bf-preto: #0a0a0a;
  --bf-grafite: #141414;
  --bf-grafite-2: #1d1d1d;
  --bf-dourado: #D4AF37;
  --bf-dourado-claro: #E9CC6E;
  --bf-dourado-borda: rgba(212, 175, 55, .45);
  --bf-vermelho: #E53935;
  --bf-branco: #ffffff;

  /* Textos dos selos (sempre entre aspas) */
  --bf-selo-slider: "BLACK FRIDAY";
  --bf-selo-card: "BLACK FRIDAY";     /* selo nos cards de Pacotes & Promoções */
  --bf-selo-hotel: "OFERTA BLACK";    /* tarja na foto do São Pedro Thermas Resort */
  --bf-selo-parallax: "BLACK FRIDAY"; /* etiqueta acima do título da faixa parallax */
  /* Selos vermelhos do box de ingressos: repetem as vantagens que já existem no texto */
  --bf-selo-ingresso-1: "ECONOMIZE ATÉ 70%";
  --bf-selo-ingresso-2: "+5% DE DESCONTO NO SITE";
}

/* ---------------------------------------------------------------------
   1. FAIXA DO TOPO + CONTADOR
   --------------------------------------------------------------------- */
.bf-faixa {
  background: var(--bf-preto);
  color: var(--bf-dourado);
  border-bottom: 1px solid var(--bf-dourado-borda);
  font-family: Montserrat, 'Hind Siliguri', sans-serif;
  position: relative;
  z-index: 50;
}
.bf-faixa__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 22px;
  text-align: center;
}
.bf-faixa__texto {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: .04em;
  color: #e9e3cf;
}
.bf-faixa__texto strong {
  color: var(--bf-dourado);
  font-weight: 700;
  letter-spacing: .16em;
}
.bf-faixa__sep { color: var(--bf-dourado); padding: 0 6px; }
.bf-faixa__destaque { color: var(--bf-dourado-claro); font-weight: 600; }

.bf-countdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.bf-countdown[hidden] { display: none !important; }
.bf-countdown__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #bdb39a;
  margin-right: 2px;
}
.bf-countdown__item {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 3px 7px;
  border: 1px solid var(--bf-dourado-borda);
  border-radius: 3px;
  background: var(--bf-grafite);
  min-width: 46px;
  justify-content: center;
}
.bf-countdown__item b {
  font-size: 14px;
  font-weight: 700;
  color: var(--bf-dourado);
  font-variant-numeric: tabular-nums;
}
.bf-countdown__item small {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #bdb39a;
}

@media (max-width: 767px) {
  .bf-faixa__inner { padding: 8px 12px; gap: 6px 10px; }
  .bf-faixa__texto { font-size: 11px; }
  .bf-faixa__texto strong { display: block; font-size: 12px; margin-bottom: 1px; }
  .bf-faixa__texto .bf-faixa__sep--1 { display: none; }
  .bf-countdown__label { display: none; }
  .bf-countdown__item { min-width: 0; padding: 2px 6px; }
  .bf-countdown__item b { font-size: 13px; }
}

/* ---------------------------------------------------------------------
   2. BARRA DO TOPO (telefone / WhatsApp) e item "Orçamento" do menu
   --------------------------------------------------------------------- */
html body .site-top-panel {
  background: var(--bf-grafite);
  border-bottom: 1px solid rgba(212, 175, 55, .25);
}
html body .site-top-panel a,
html body .site-top-panel .top-right-wrap { color: #f2f2f2; }
html body .site-top-panel a i { color: var(--bf-dourado); }
html body .site-top-panel a:hover { color: var(--bf-dourado); }

html body .main-nav li.search:after {
  background: var(--bf-preto);
  border-left: 2px solid var(--bf-dourado);
}
/* continuação do fundo do "Orçamento" até a borda direita da tela */
html body .inner-nav:after { background: var(--bf-preto); }
/* só no menu desktop (no menu do celular o fundo é branco e o item segue o padrão) */
html body .main-nav .inner-nav:not(.mobile_nav) li.search > a,
html body .main-nav .inner-nav:not(.mobile_nav) li.search > a:hover,
html body .main-nav .inner-nav:not(.mobile_nav) li.search > a.active { color: var(--bf-dourado) !important; }

/* ---------------------------------------------------------------------
   3. SLIDER — overlay sutil + selo (CSS puro; HTML e config do slider intactos)
   --------------------------------------------------------------------- */
/* O overlay fica dentro da camada de fundo de cada slide: escurece a foto,
   mas não cobre os títulos/links e não bloqueia cliques. */
.tp-banner-slider .slotholder::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 50;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,10,.45) 0%, rgba(10,10,10,.15) 45%, rgba(10,10,10,.40) 100%);
}

.tp-banner-container::before {
  content: var(--bf-selo-slider);
  position: absolute;
  z-index: 30;
  top: 26px;
  left: max(16px, calc((100% - 1170px) / 2 + 15px));
  pointer-events: none;
  padding: 9px 18px 8px 22px;
  background: rgba(10, 10, 10, .78);
  color: var(--bf-dourado);
  border: 1px solid var(--bf-dourado);
  font-family: Montserrat, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .32em;
  line-height: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
@media (max-width: 767px) {
  .tp-banner-container::before {
    top: 12px;
    left: 12px;
    font-size: 11px;
    letter-spacing: .24em;
    padding: 7px 10px 6px 13px;
  }
}

/* Formulário "Ver Preço" (hospedagem) — só visual */
html body .search-tours-wrap {
  background: var(--bf-grafite);
  border: 1px solid var(--bf-dourado-borda);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
/* o botão "Ver Preço" é um <input>: a cor vem do background dele (classe .fundo-bt) */
html body .search-tours-wrap .search-tours-content .tours-container .button-search.fundo-bt {
  background-color: var(--bf-dourado);
  color: var(--bf-preto);
  letter-spacing: .08em;
  transition: background-color .25s ease, color .25s ease;
}
html body .search-tours-wrap .search-tours-content .tours-container .button-search.fundo-bt:hover,
html body .search-tours-wrap .search-tours-content .tours-container .button-search.fundo-bt:focus {
  background-color: var(--bf-preto);
  color: var(--bf-dourado);
}

/* ---------------------------------------------------------------------
   4. BOX "COMPRAR INGRESSOS / INGRESSOS ON-LINE EM ATÉ 6X" (desktop)
   --------------------------------------------------------------------- */
section.page-section:has(.ajusteBT) > .container {
  background: var(--bf-preto);
  background-image: radial-gradient(ellipse at 50% 0%, rgba(212,175,55,.14) 0%, rgba(212,175,55,0) 60%);
  border: 1px solid var(--bf-dourado);
  border-radius: 6px;
  padding: 38px 30px 42px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
  max-width: 1000px;
}
section.page-section:has(.ajusteBT) .title-section-top { color: var(--bf-dourado) !important; letter-spacing: .2em; }
section.page-section:has(.ajusteBT) .title-section { color: var(--bf-branco) !important; }
section.page-section:has(.ajusteBT) .title-section span { color: var(--bf-dourado) !important; }
section.page-section:has(.ajusteBT) .cws_divider { opacity: .9; filter: sepia(1) saturate(2) hue-rotate(-8deg); }
section.page-section:has(.ajusteBT) p.text-center { color: #eeeeee; margin-bottom: 14px; }
section.page-section:has(.ajusteBT) p.text-center b { color: #ffffff; font-weight: 600; }
section.page-section:has(.ajusteBT) p.text-center::before {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  padding: 4px 9px 3px;
  background: var(--bf-vermelho);
  color: #fff;
  border-radius: 2px;
  font-family: Montserrat, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.3;
}
section.page-section:has(.ajusteBT) .col-md-12 > p.text-center:nth-of-type(1)::before { content: var(--bf-selo-ingresso-1); }
section.page-section:has(.ajusteBT) .col-md-12 > p.text-center:nth-of-type(2)::before { content: var(--bf-selo-ingresso-2); }

/* Botões dourados (texto preto) com hover invertido */
html body .cws-button.ajusteBT,
html body .cws-button.ajusteBT2,
html body .features-tours-item .info-price a.button.detalhes {
  background: var(--bf-dourado) !important;
  color: var(--bf-preto) !important;
  border: 2px solid var(--bf-dourado) !important;
  letter-spacing: .1em;
  transition: background-color .25s ease, color .25s ease;
}
html body .cws-button.ajusteBT:hover,
html body .cws-button.ajusteBT:focus,
html body .cws-button.ajusteBT2:hover,
html body .cws-button.ajusteBT2:focus,
html body .features-tours-item .info-price a.button.detalhes:hover {
  background: var(--bf-preto) !important;
  color: var(--bf-dourado) !important;
}
/* "Ver Todas": preto com dourado (inverte no hover) */
html body .cws-button.ajusteBT2 { background: var(--bf-preto) !important; color: var(--bf-dourado) !important; }
html body .cws-button.ajusteBT2:hover,
html body .cws-button.ajusteBT2:focus { background: var(--bf-dourado) !important; color: var(--bf-preto) !important; }

/* Botões da home no celular */
html body .espaco_bt_mobile .bt_home_mobile_06 {
  background: var(--bf-dourado) !important;
  border-color: var(--bf-dourado) !important;
  color: var(--bf-preto) !important;
}
html body .espaco_bt_mobile .bt_home_mobile_05 {
  background: var(--bf-preto) !important;
  border-color: var(--bf-dourado) !important;
  color: var(--bf-dourado) !important;
}
html body .espaco_bt_mobile a { max-width: 100%; }

/* ---------------------------------------------------------------------
   5. PACOTES & PROMOÇÕES
   --------------------------------------------------------------------- */
html body .features-tours-full-width .features-tours-wrap .features-tours-item {
  border: 1px solid var(--bf-dourado-borda);
  transition: box-shadow .3s ease, border-color .3s ease;
}
html body .features-tours-full-width .features-tours-wrap .features-tours-item:hover {
  border-color: var(--bf-dourado);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}
html body .features-tours-full-width .features-tours-wrap .features-tours-item .features-media { overflow: hidden; }
html body .features-tours-full-width .features-tours-wrap .features-tours-item .features-media img { transition: transform .5s ease; }
html body .features-tours-full-width .features-tours-wrap .features-tours-item:hover .features-media img { transform: scale(1.04); }

html body .features-tours-full-width .features-tours-wrap .features-tours-item .features-media::after {
  content: var(--bf-selo-card);
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  pointer-events: none;
  padding: 6px 9px 5px 11px;
  background: var(--bf-preto);
  color: var(--bf-dourado);
  border: 1px solid var(--bf-dourado);
  font-family: Montserrat, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  line-height: 1;
}
/* Raio dourado ao lado do título do card */
html body .features-tours-full-width .features-info-bot .title::before {
  content: "\f0e7";
  font-family: FontAwesome;
  color: var(--bf-dourado);
  margin-right: 7px;
  font-weight: normal;
}

/* ---------------------------------------------------------------------
   6. ONDE SE HOSPEDAR — São Pedro Thermas Resort
   --------------------------------------------------------------------- */
html body .hotel_celular .testimonial-top .pic::after {
  content: var(--bf-selo-hotel);
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 0;
  pointer-events: none;
  padding: 6px 12px 5px 14px;
  background: var(--bf-vermelho);
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
}

/* Botões "Conheça" (hotel e atrações) em preto/dourado */
html body .testimonial-item .testimonial-body .testimonial-button {
  display: inline-block;
  padding: 9px 22px 8px;
  background: var(--bf-preto);
  color: var(--bf-dourado);
  border: 1px solid var(--bf-dourado);
  border-radius: 3px;
  letter-spacing: .14em;
  transition: background-color .25s ease, color .25s ease;
}
html body .testimonial-item .testimonial-body .testimonial-button:before { display: none; }
html body .testimonial-item .testimonial-body .testimonial-button:hover,
html body .testimonial-item .testimonial-body .testimonial-button:focus {
  background: var(--bf-dourado);
  color: var(--bf-preto);
}

/* ---------------------------------------------------------------------
   7. FAIXA PARALLAX "Só no Water Park..." + cards das atrações
   --------------------------------------------------------------------- */
html body .cws_prlx_section.bg-blue-40:before {
  display: block;
  opacity: 1;
  z-index: 2;
  left: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,10,.62) 0%, rgba(10,10,10,.45) 100%);
}
html body .cws_prlx_section .title-section-top::before {
  content: var(--bf-selo-parallax);
  display: table;
  margin-bottom: 12px;
  padding: 6px 12px 5px 14px;
  background: var(--bf-dourado);
  color: var(--bf-preto);
  font-family: Montserrat, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .26em;
  line-height: 1;
}

/* Hover elegante nos cards das atrações (sem selo) */
html body .owl-three-item .testimonial-item {
  transition: box-shadow .3s ease;
}
html body .owl-three-item .testimonial-item:hover {
  box-shadow: inset 0 -3px 0 var(--bf-dourado);
}
html body .owl-three-item .testimonial-item .testimonial-top .pic img { transition: transform .5s ease; }
html body .owl-three-item .testimonial-item:hover .testimonial-top .pic img { transform: scale(1.05); }

/* ---------------------------------------------------------------------
   8. BOTÃO FLUTUANTE DO WHATSAPP — pulso suave dourado
   --------------------------------------------------------------------- */
html body .whatsapp-chat {
  animation: bf-pulso 2.6s ease-in-out infinite;
}
@keyframes bf-pulso {
  0%, 100% { transform: scale(.96); filter: drop-shadow(0 0 0 rgba(212, 175, 55, 0)); }
  50%      { transform: scale(1);   filter: drop-shadow(0 0 9px rgba(212, 175, 55, .75)); }
}

/* ---------------------------------------------------------------------
   9. ACESSIBILIDADE — quem prefere menos movimento não vê animações
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html body .whatsapp-chat { animation: none !important; }
  .bf-faixa *,
  html body .features-tours-item,
  html body .features-tours-item img,
  html body .testimonial-item,
  html body .testimonial-item img,
  html body .testimonial-button { transition: none !important; }
  html body .features-tours-full-width .features-tours-wrap .features-tours-item:hover .features-media img,
  html body .owl-three-item .testimonial-item:hover .testimonial-top .pic img { transform: none; }
}