/* TriPiratas — base global */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  background: var(--tp-bg);
  color: var(--tp-ink);
  font-family: var(--tp-font-body);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.6;
}
input,
select,
textarea,
button {
  font-family: inherit;
  font-size: inherit;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}

/* O atributo hidden vence qualquer display definido por classe (corrige grids sobrepostos). */
[hidden] {
  display: none !important;
}

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--tp-track);
}
::-webkit-scrollbar-thumb {
  background: var(--tp-gold);
  border-radius: 4px;
}

/* Conteúdo principal com textura de mapa do tesouro (tileável). A camada de
   pergaminho por cima suaviza o mapa para manter o texto legível — ajuste a
   opacidade (0.45) para deixar o mapa mais forte ou mais discreto. */
.tp-main {
  background-color: var(--tp-parchment);
  background-image: linear-gradient(rgba(241, 228, 195, 0.45), rgba(241, 228, 195, 0.45)), url("../img/map-bg.jpg");
  background-repeat: repeat;
  background-size: 720px auto;
  background-position: top center;
}
/* Seções de pergaminho ficam transparentes para revelar a textura contínua. */
.treasure-map {
  background-color: transparent;
}

.tp-months {
  background: rgba(255, 255, 255, 0.5);
}
.tp-coming-soon {
  background: rgba(255, 255, 255, 0.3);
}

.tp-container {
  max-width: var(--tp-container);
  margin: 0 auto;
  padding: 0 40px;
}
.tp-container--narrow {
  max-width: 760px;
}
.tp-section {
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}

/*
 * Utilitário de ocultação: precisa de !important porque regras de formulário
 * mais específicas (ex.: .tp-form input[type="text"]) venceriam o width e
 * esticariam o campo, criando scroll lateral.
 */
.screen-reader-text,
.tp-hp {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Botões ---------- */
.tp-btn {
  display: inline-block;
  font-family: var(--tp-font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  text-align: center;
  transition: all 0.22s ease;
  line-height: 1.4;
}
.tp-btn--gold {
  background: var(--tp-gold-btn);
  color: var(--tp-surface);
  padding: 14px 28px;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(200, 146, 10, 0.35);
}
.tp-btn--gold:hover {
  background: var(--tp-gold-btn-hover);
  transform: translateY(-2px);
}
.tp-btn--outline-dark {
  background: none;
  border: 2px solid var(--tp-dark-2);
  color: var(--tp-dark-2);
  padding: 16px 48px;
  letter-spacing: 3px;
  font-size: 12px;
  border-radius: 0;
}
.tp-btn--outline-dark:hover {
  background: var(--tp-dark-2);
  color: var(--tp-cream);
}
.tp-btn--outline-gold {
  background: transparent;
  border: 2px solid var(--tp-gold);
  color: var(--tp-cream);
  padding: 16px;
  letter-spacing: 3px;
  font-size: 12px;
  border-radius: 0;
}
.tp-btn--outline-gold:hover {
  background: var(--tp-gold-btn);
}
.tp-btn--block {
  display: block;
  width: 100%;
}
/* Sempre botão de WhatsApp: inline-flex por causa do ícone SVG ao lado do texto. */
.tp-btn--green {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--tp-green);
  color: var(--tp-surface);
  padding: 14px 28px;
  border-radius: 8px;
}
.tp-btn--green .tp-icon { font-size: 1.35em; flex-shrink: 0; }
.tp-btn--green:hover {
  background: var(--tp-green-dark);
}
.tp-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ---------- Ícones pirata desenhados (tp_icon) ---------- */
/*
 * Quadrado de 1em: herdam o font-size do container, que é como os emoji que
 * eles substituíram já eram dimensionados. O deslocamento vertical alinha a
 * base do desenho com a base do texto ao lado.
 */
.tp-ico {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  object-fit: contain;
  vertical-align: -0.17em;
}
/* Dentro do badge o texto tem 11px: o desenho precisa de folga para se ler. */
.tp-badge__ico { width: 1.5em; height: 1.5em; vertical-align: -0.42em; }

/* ---------- Badges ---------- */
.tp-badge {
  display: inline-block;
  padding: 4px 11px;
  font-family: var(--tp-font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.6;
}
.tp-badge--default {
  background: var(--tp-track);
  color: var(--tp-muted-2);
}
.tp-badge--red {
  background: #B31212;
  color: var(--tp-surface);
}
.tp-badge--gold {
  background: var(--tp-gold-btn);
  color: var(--tp-surface);
}
.tp-badge--dark {
  background: var(--tp-dark-2);
  color: var(--tp-cream);
}
.tp-badge--green {
  background: var(--tp-green-dark);
  color: var(--tp-surface);
}
.tp-hero .tp-badge--dark,
.tp-featured-card .tp-badge--dark {
  background: rgba(245, 237, 216, 0.12);
}

/* ---------- Section header editorial ---------- */
.tp-section-header {
  text-align: center;
  margin-bottom: 52px;
}
.tp-section-header.is-align-left {
  text-align: left;
}
.tp-section-header__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}
.tp-section-header.is-align-left .tp-section-header__eyebrow {
  justify-content: flex-start;
}
.tp-section-header__eyebrow .rule {
  width: 40px;
  height: 1px;
  background: rgba(200, 146, 10, 0.5);
}
.tp-section-header__eyebrow .text {
  font-size: 11px;
  font-weight: 800;
  color: var(--tp-gold-text);
  letter-spacing: 3px;
  text-transform: uppercase;
}
.tp-section-header__title {
  font-family: var(--tp-font-display);
  font-size: clamp(26px, 4vw, 52px);
  font-weight: 900;
  color: var(--tp-dark-2);
  margin: 0 0 14px;
  line-height: 1.02;
  letter-spacing: -1px;
}
.tp-section-header.is-dark .tp-section-header__title {
  color: var(--tp-cream);
}
.tp-section-header__subtitle {
  font-size: 16px;
  color: var(--tp-muted);
  margin: 0 auto;
  max-width: 520px;
  line-height: 1.7;
}
.tp-section-header.is-dark .tp-section-header__subtitle {
  color: var(--tp-cream-dim);
}
.tp-section-header.is-dark .tp-section-header__eyebrow .text {
  color: var(--tp-gold-bright);
}
.tp-eyebrow-left {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.tp-eyebrow-left .rule {
  width: 36px;
  height: 1.5px;
  background: var(--tp-gold);
}
/* Padrão claro; sobre fundo escuro, sobrescreva com --tp-gold-bright. */
.tp-eyebrow-left span:not(.rule) {
  font-size: 11px;
  font-weight: 800;
  color: var(--tp-gold-text);
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* ---------- Grid de cards ---------- */
.tp-grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
  gap: 28px;
}
.tp-no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px;
  color: var(--tp-muted);
}

/* ---------- Placeholder listrado ---------- */
.tp-img {
  width: 100%;
  display: block;
  object-fit: cover;
}
.tp-img--placeholder {
  height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--ph-bg) 19%, transparent);
  background-image: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--ph-bg) 27%, transparent),
    color-mix(in srgb, var(--ph-bg) 27%, transparent) 16px,
    color-mix(in srgb, var(--ph-stripe) 9%, transparent) 16px,
    color-mix(in srgb, var(--ph-stripe) 9%, transparent) 32px
  );
}
.tp-img--placeholder span {
  font-family: monospace;
  font-size: 11px;
  color: var(--tp-cream);
  text-align: center;
  padding: 6px 12px;
  background: rgba(15, 8, 4, 0.92);
  overflow-wrap: anywhere;
  line-height: 1.5;
  border-radius: 2px;
  max-width: 80%;
  opacity: 0.85;
}

/* ---------- Estrelas ---------- */
.tp-stars {
  color: var(--tp-gold-text);
  letter-spacing: 1px;
}
.tp-stars .is-off {
  opacity: 0.2;
}
.tp-stars__count {
  font-size: 12px;
  color: var(--tp-muted-3);
}

/* ---------- Barra de progresso de vagas ---------- */
.tp-progress {
  height: 5px;
  background: var(--tp-track);
  border-radius: 3px;
  overflow: hidden;
}
.tp-progress__fill {
  height: 100%;
  background: var(--tp-gold);
  border-radius: 3px;
  transition: width 0.5s;
}
.tp-progress__fill.is-low {
  background: var(--tp-red);
}

/* ---------- Countdown ---------- */
.tp-countdown {
  display: inline-flex;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
  min-height: 52px;
}
.tp-countdown__box {
  /* Empilha número e rótulo: como são <span>, precisam de display de bloco. */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.tp-countdown__num {
  display: block;
  font-family: var(--tp-font-display);
  font-size: 26px;
  font-weight: 900;
  color: var(--tp-dark-2);
  /* Cinzel tem caixa alta: com line-height 1 os algarismos ficam cortados. */
  line-height: 1.15;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.tp-countdown--dark .tp-countdown__num {
  color: var(--tp-cream);
}
.tp-countdown__label {
  display: block;
  font-size: 11px;
  color: var(--tp-muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.3;
  margin-top: 2px;
  white-space: nowrap;
}
.tp-countdown--dark .tp-countdown__label {
  color: var(--tp-cream-dim);
}
.tp-countdown__sep {
  color: var(--tp-gold);
  font-weight: 700;
  font-size: 18px;
  /* Alinha o ":" com a faixa dos algarismos (26px x 1.15), não com o rótulo. */
  align-self: flex-start;
  line-height: 1.66;
}
.tp-countdown__expired {
  font-size: 12px;
  color: var(--tp-red);
  font-weight: 700;
}

/* ---------- Notices do WooCommerce ---------- */
.woocommerce-notices-wrapper:empty {
  display: none;
}
.woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.wc-block-components-notice-banner {
  list-style: none;
  margin: 0 0 20px;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}
.woocommerce-message {
  background: rgba(39, 174, 96, 0.1);
  color: var(--tp-green-dark);
  border-left: 4px solid var(--tp-green);
}
.woocommerce-info {
  background: rgba(200, 146, 10, 0.1);
  color: var(--tp-gold-deep);
  border-left: 4px solid var(--tp-gold);
}
.woocommerce-error {
  background: rgba(204, 21, 21, 0.08);
  color: var(--tp-red);
  border-left: 4px solid var(--tp-red);
}
.woocommerce-error li {
  margin: 4px 0;
}
.woocommerce-error li:only-child {
  margin: 0;
}
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
  text-decoration: underline;
}

/* ---------- Página genérica ---------- */
.tp-page {
  padding: 64px 0 96px;
}
.tp-page__title {
  font-family: var(--tp-font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  color: var(--tp-dark-2);
  letter-spacing: -1px;
  margin-bottom: 28px;
}
.tp-entry__content p {
  margin-bottom: 1em;
}
.tp-404 {
  text-align: center;
}
.tp-404__flag {
  font-size: 72px;
  margin-bottom: 16px;
}
.tp-404__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 28px;
  flex-wrap: wrap;
}

/* ---------- Formulários base ---------- */
.tp-form input[type="text"],
.tp-form input[type="email"],
.tp-form input[type="tel"],
.tp-form input[type="date"],
.tp-form input[type="password"],
.tp-form input[type="number"],
.tp-form select,
.tp-form textarea,
.woocommerce-input-wrapper input,
.woocommerce-input-wrapper textarea,
.woocommerce-input-wrapper select,
.coruja-passenger input,
.tp-wc-form input,
.tp-wc-form select {
  width: 100%;
  padding: 13px 16px;
  background: var(--tp-surface);
  border: 1px solid var(--tp-border-cream);
  color: var(--tp-ink);
  font-size: 14px;
  outline: none;
  border-radius: 6px;
  transition: border-color 0.2s;
}
.tp-form input:focus,
.tp-form select:focus,
.tp-form textarea:focus,
.coruja-passenger input:focus,
.tp-wc-form input:focus {
  border-color: var(--tp-gold);
}
.tp-form label,
.tp-wc-form label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tp-muted);
  margin: 14px 0 6px;
}
.tp-form .required,
.tp-wc-form .required {
  color: var(--tp-red);
  text-decoration: none;
  border: none;
}

@media (max-width: 780px) {
  .tp-container {
    padding: 0 20px;
  }
  .tp-section {
    padding: 44px 0;
  }
  .tp-page {
    padding: 40px 0 56px;
  }
  /* No celular 52px entre título e conteúdo abre um vão grande demais. */
  .tp-section-header {
    margin-bottom: 32px;
  }
}

/* ---------- Depoimentos ---------- */
.tp-testimonials { padding: 96px 40px; }
.tp-testimonials__ghost {
	position: absolute;
	top: -30px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--tp-font-display);
	font-size: 360px;
	font-weight: 900;
	color: rgba(200, 146, 10, 0.04);
	line-height: 1;
	user-select: none;
	pointer-events: none;
}
.tp-testimonials__inner { max-width: 720px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.tp-testimonials__slide { display: none; }
.tp-testimonials__slide.is-active { display: block; animation: tp-fade 0.4s ease; }
@keyframes tp-fade { from { opacity: 0; } to { opacity: 1; } }
.tp-testimonials__stars { margin-bottom: 24px; color: var(--tp-gold-text); font-size: 20px; letter-spacing: 2px; }
.tp-testimonials__stars .is-off { opacity: 0.2; }
.tp-testimonials__slide blockquote {
	font-family: var(--tp-font-display);
	font-size: clamp(17px, 2.5vw, 26px);
	font-weight: 600;
	color: var(--tp-dark-2);
	line-height: 1.55;
	margin: 0 0 40px;
	font-style: italic;
	letter-spacing: -0.3px;
}
.tp-testimonials__author { display: flex; align-items: center; justify-content: center; gap: 14px; }
.tp-testimonials__avatar {
	width: 46px;
	height: 46px;
	background: var(--tp-dark-2);
	color: var(--tp-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--tp-font-display);
	font-size: 15px;
	font-weight: 700;
}
.tp-testimonials__who { text-align: left; }
.tp-testimonials__who .name { font-family: var(--tp-font-display); font-size: 14px; font-weight: 700; color: var(--tp-dark-2); }
.tp-testimonials__who .meta { font-size: 12px; color: var(--tp-muted); letter-spacing: 1px; }
.tp-testimonials__dots { display: flex; justify-content: center; gap: 10px; margin-top: 40px; }
.tp-testimonials__dot {
	width: 8px;
	height: 4px;
	background: var(--tp-border-cream);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: all 0.35s ease;
}
.tp-testimonials__dot.is-active { width: 32px; background: var(--tp-gold); }

@media (max-width: 880px) {
  .tp-testimonials { padding: 44px 20px; }
}

/* ---------- Bloco de preço: Pix e parcelado lado a lado, mesmo destaque ---------- */
/* "a partir de": só aparece quando o valor depende do grupo de idade/hospedagem. */
.tp-price__from {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--tp-muted-3);
  line-height: 1;
  margin-bottom: 6px;
}
.tp-price--dark .tp-price__from { color: var(--tp-muted-light); }
.tp-price__original {
  font-size: 13px;
  color: var(--tp-muted-3);
  text-decoration: line-through;
  line-height: 1;
  margin-bottom: 6px;
}
.tp-price__rows { display: flex; align-items: stretch; gap: 16px; }
.tp-price__row { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* Régua entre as duas formas de pagamento. */
.tp-price__row--card { padding-left: 16px; border-left: 1px solid var(--tp-border-cream); }
.tp-price__tag {
  font-family: var(--tp-font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--tp-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
}
.tp-price__value {
  font-family: var(--tp-font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--tp-price);
  line-height: 1.15;
  letter-spacing: -0.5px;
  white-space: nowrap;
}
.tp-price__soon {
  font-family: var(--tp-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--tp-muted);
}

/* Tamanhos */
.tp-price--sm .tp-price__value { font-size: 21px; }
.tp-price--sm .tp-price__tag { font-size: 11px; letter-spacing: 0.5px; }
.tp-price--sm .tp-price__rows { gap: 12px; }
.tp-price--sm .tp-price__row--card { padding-left: 12px; }
.tp-price--lg .tp-price__value { font-size: 32px; }

/* Sobre fundo escuro */
.tp-price--dark .tp-price__value { color: var(--tp-gold-bright); }
.tp-price--dark .tp-price__tag { color: var(--tp-cream-dim); }
.tp-price--dark .tp-price__original { color: var(--tp-cream-dim-2); }
.tp-price--dark .tp-price__row--card { border-left-color: rgba(200, 146, 10, 0.35); }
.tp-price--dark .tp-price__soon { color: var(--tp-cream); }

/* Só em telas muito estreitas os dois valores empilham. */
@media (max-width: 340px) {
  .tp-price__rows { flex-direction: column; gap: 10px; }
  .tp-price__row--card { padding-left: 0; border-left: none; padding-top: 10px; border-top: 1px solid var(--tp-border-cream); }
  .tp-price--dark .tp-price__row--card { border-top-color: rgba(200, 146, 10, 0.35); }
}

/* ---------- Fechamento "Todo o mapa em um só lugar" ---------- */
/*
 * Fecha a home, o Sobre e o Contato — por isso mora aqui, e não em home.css.
 * Fundo dourado: todo o texto vira tinta escura (o --tp-gold só tem contraste
 * suficiente contra --tp-ink/--tp-dark).
 */
.tp-all-trips {
  position: relative;
  overflow: hidden;
  background: var(--tp-gold);
  border-top: 2px solid var(--tp-gold-deep);
  padding: 92px 40px;
  text-align: center;
}
/* Trama de mapa ao fundo, discreta. */
.tp-all-trips::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(28, 15, 5, 0.1) 1px, transparent 0);
  background-size: 26px 26px;
  pointer-events: none;
}
/*
 * Bússola gigante como marca d'água.
 *
 * A arte é recorte com alfa, então não precisa de máscara nem de enquadramento:
 * a própria transparência resolve a silhueta. O multiply faz o dourado da seção
 * atravessar o metal, e os contornos escuros da peça é que desenham a forma —
 * fica gravado no fundo em vez de colado por cima.
 */
/* A arte já vem cortada na borda direita: alinhar em right:0 faz esse corte
   coincidir com o fim da seção e parecer proposital. Empurrar para fora
   cortaria a peça duas vezes. A sangria fica só embaixo. */
.tp-all-trips__compass {
  position: absolute;
  right: 0;
  bottom: -70px;
  width: clamp(200px, 25vw, 330px);
  height: auto;
  opacity: 0.32;
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
}
.tp-all-trips__inner { position: relative; max-width: 720px; margin: 0 auto; }
.tp-all-trips__eyebrow { justify-content: center; margin-bottom: 18px; }
.tp-all-trips__eyebrow .rule { background: var(--tp-gold-deep); }
.tp-all-trips__eyebrow span:not(.rule) { color: var(--tp-dark-2); }
.tp-all-trips h2 {
  font-family: var(--tp-font-display);
  font-size: clamp(30px, 4.4vw, 50px);
  font-weight: 900;
  color: var(--tp-dark);
  margin: 0 0 18px;
  line-height: 1.08;
  letter-spacing: -1px;
}
.tp-all-trips p {
  font-size: 17px;
  color: var(--tp-ink);
  line-height: 1.8;
  margin: 0 auto 36px;
  max-width: 560px;
}

.tp-all-trips__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.tp-all-trips__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--tp-dark-2);
  color: var(--tp-gold-bright);
  font-size: 14px;
  padding: 18px 46px;
  letter-spacing: 2.5px;
  border-radius: 0;
}
.tp-all-trips__cta:hover { background: var(--tp-dark); transform: translateY(-2px); }
.tp-all-trips__cta .arrow { transition: transform 0.22s ease; }
.tp-all-trips__cta:hover .arrow { transform: translateX(5px); }
.tp-all-trips__wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 800;
  color: var(--tp-ink);
  border-bottom: 1px solid var(--tp-gold-deep);
  padding-bottom: 3px;
  transition: color 0.2s, border-color 0.2s;
}
.tp-all-trips__wa .tp-icon { font-size: 19px; }
.tp-all-trips__wa:hover { color: var(--tp-dark); border-color: var(--tp-dark); }

@media (max-width: 780px) {
  .tp-all-trips { padding: 48px 20px; }
  .tp-all-trips__compass { width: clamp(150px, 42vw, 230px); right: 0; bottom: -50px; opacity: 0.26; }
  .tp-all-trips__cta { padding: 16px 30px; width: 100%; justify-content: center; }
}