/* ==========================================================================
   Ygarapé 2026 — camada visual baseada na página /black-bonito/
   Carregado por ÚLTIMO no head.php / head-cart.php.
   Só altera aparência (cores, fontes, cantos, sombras). Larguras e layout
   continuam vindo de style.css / mobile.css.
   Para desfazer: remover a linha deste arquivo no head.php e head-cart.php.
   ========================================================================== */

:root {
  --tinta: #12202E;
  --tinta-suave: #4a5b6a;
  --areia: #F6F3EC;
  --areia-2: #ECE5D6;
  --linha: #E2DCCD;
  --azul: #1860A8;
  --azul-escuro: #0B3C6E;
  --azul-nile: #072B50;
  --verde: #00A848;
  --sol: #F6A623;
  --branco: #fff;

  /* CTA (todas as ações principais) */
  --cta: #d41f07;
  --cta-hover: #b51a06;
  --cta-texto: #fff;
  --cta-sombra: 0 12px 26px -12px rgba(212, 31, 7, .75);

  --radius: 16px;
  --radius-lg: 22px;
  --radius-campo: 10px;
  --shadow: 0 20px 50px -24px rgba(12, 32, 48, .4);
  --shadow-lg: 0 30px 70px -30px rgba(7, 43, 80, .55);
  --shadow-sm: 0 6px 20px -12px rgba(12, 32, 48, .4);

  --fonte-texto: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-titulo: "Fraunces", Georgia, serif;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
body,
input, select, textarea, button {
  font-family: var(--fonte-texto);
}
body {
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3,
.title > h1,
.texto > div h2,
.h-title > h2, .h-title-center > h2,
.h-passeio h2,
.h-hospedagem > section > h2,
.h-funciona h2,
.instagram h2,
.relation h2,
.l-about > h2, .l-price > h2, .l-info-geral h2, .l-active > h2,
.l-observacao > h2, .l-incluso-item h2,
#tabela-preco .texto h2 {
  font-family: var(--fonte-titulo);
  color: var(--tinta);
  letter-spacing: -0.01em;
}
.title > h1 { font-weight: 700; line-height: 1.15; }
.h-title > h2, .h-title-center > h2, .h-passeio h2,
.h-hospedagem > section > h2, .instagram h2 { font-weight: 700; }

.texto { color: var(--tinta-suave); text-align: left; }
.texto > div { line-height: 1.75; }
.texto > div h2, .texto > div h3, #tabela-preco .texto h2 { line-height: 1.25; margin-top: 8px; }
.texto > div a,
#tabela-preco .texto a { color: var(--azul); text-decoration: underline; text-underline-offset: 2px; }
.texto > div a:hover,
#tabela-preco .texto a:hover { color: var(--azul-escuro); }

#breadcrumb > li > a,
#breadcrumb > li > span { color: var(--tinta-suave); }

/* --------------------------------------------------------------------------
   Barra superior + cabeçalho
   -------------------------------------------------------------------------- */
#top { background: var(--areia); color: var(--tinta-suave); }
#top .t-info > span > a,
#top .t-info > ul a { color: var(--tinta-suave); }
#top .t-info > ul a:hover { color: var(--azul); }

header {
  background: var(--azul-nile);
  box-shadow: 0 8px 24px -16px rgba(7, 43, 80, .8);
}
header nav > div > ul > li > span,
header nav > div > ul > li > span a,
header nav > div > ul > li > a {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .01em;
}
header nav > div > ul > li > ul {
  background: var(--azul-nile);
  box-shadow: var(--shadow-lg);
}
header nav > div > ul > li > ul > li { border-bottom-color: rgba(255, 255, 255, .08); }
header nav > div > ul > li > ul > li > a:hover { background: var(--azul-escuro); }
header .cart .cart-active { background: var(--cta); color: #fff; font-weight: 700; }

/* --------------------------------------------------------------------------
   CTAs — todos em vermelho (#d41f07), formato pílula
   -------------------------------------------------------------------------- */
.l-info .bt-cart,
.item .bt-cart,
.item .bt-comprar,
#formOrcamento button,
#formPacote button,
#contato button,
button[type="submit"],
.slide-home > div > a,
.bt-padrao,
#splashRegister > div > section form > button,
.modal > div > a,
.calendar .c-button > .button,
.c-field button[type=submit],
.c-field button[type=button],
.payment-opt > div > div > button,
#formWhatsapp button,
.h-why section > div > a.btn,
.gridMSG .buttons .confirm {
  background: var(--cta);
  border-color: var(--cta);
  color: var(--cta-texto);
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: var(--cta-sombra);
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.l-info .bt-cart:hover,
.item .bt-cart:hover,
.item .bt-comprar:hover,
.item:hover .bt-comprar,
#formOrcamento button:hover,
#formPacote button:hover,
#contato button:hover,
button[type="submit"]:hover,
.slide-home > div > a:hover,
.bt-padrao:hover,
#splashRegister > div > section form > button:hover,
.modal > div > a:hover,
.calendar .c-button > .button:hover,
.c-field button[type=submit]:hover,
.c-field button[type=button]:hover,
.payment-opt > div > div > button:hover,
#formWhatsapp button:hover,
.h-why section > div > a.btn:hover,
.gridMSG .buttons .confirm:hover {
  background: var(--cta-hover);
  border-color: var(--cta-hover);
  color: var(--cta-texto);
  transform: translateY(-1px);
}
.l-info .bt-cart i,
.item .bt-cart i { color: inherit; }

/* Card: "Conhecer" vira botão secundário (contorno); "Quero Comprar" é o principal */
.item .bt-comprar,
.item:hover .bt-comprar {
  background: #fff;
  color: var(--cta);
  border: 2px solid var(--cta);
  box-shadow: none;
}
.item .bt-comprar:hover {
  background: var(--cta);
  border-color: var(--cta);
  color: #fff;
}

/* Botão secundário (ex.: "Leia mais") */
.bt-vermais {
  color: var(--cta);
  border-color: var(--cta);
  border-radius: 999px;
  font-weight: 700;
}
.bt-vermais:hover { background: var(--cta); color: #fff; }

/* --------------------------------------------------------------------------
   Cards (passeios, pacotes, hospedagens, relacionados)
   -------------------------------------------------------------------------- */
.item {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: #fff;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.item:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.item:hover img { transform: scale(1.06); }
.item > a > .item-img > img { border-radius: 0; }
.item > a > .item-content > h3 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  color: var(--tinta);
}
.item > a > .item-content > p,
.item .item-content > .item-list > span { color: var(--tinta-suave); }
.item .item-content > .item-price b,
.l-info-price > div > div > b,
.l-info-preco b { color: var(--azul); }

.list-passeio > section {
  background: var(--areia);
  border-radius: var(--radius);
}
.list-passeio > section .content > h3 { font-family: var(--fonte-titulo); color: var(--tinta); }

/* --------------------------------------------------------------------------
   Página de passeio / pacote / hospedagem
   -------------------------------------------------------------------------- */
.l-info-price > div,
.l-info-geral > div > div,
.l-price table tr > th,
.l-price table tr > td {
  background: var(--areia);
}
.l-info-price > div,
.l-info-geral > div > div { border-radius: var(--radius); }
.l-price a,
.l-info-price a { color: var(--azul); }

/* Formulário lateral de orçamento */
#formOrcamento {
  background: var(--azul-nile);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
#formOrcamento h2 { font-family: var(--fonte-titulo); font-weight: 600; }
#formOrcamento input,
#formOrcamento select,
#formOrcamento textarea,
#formPacote input,
#formPacote select,
#formPacote textarea {
  border-radius: var(--radius-campo);
}
/* Campos dos formulários azuis: acompanham o novo fundo (antes #01398c) */
#formOrcamento .full,
#formOrcamento .field label,
#formOrcamento .field option,
#formPacote .full,
#formPacote .field label,
#formPacote .field option {
  background: var(--azul-nile);
}
#formOrcamento input::placeholder,
#formOrcamento textarea::placeholder,
#formPacote input::placeholder,
#formPacote textarea::placeholder { color: rgba(255, 255, 255, .55); }

.modal2 > div,
.modal > div {
  background: var(--azul-nile);
  border-radius: var(--radius-lg);
}

/* Botão flutuante do WhatsApp: mantém o verde do WhatsApp (reconhecimento do ícone) */
#bt-whatsapp { box-shadow: 0 12px 26px -12px rgba(37, 211, 102, .8); }

/* --------------------------------------------------------------------------
   Home
   -------------------------------------------------------------------------- */
.slide-home > div > b { font-family: var(--fonte-titulo); font-weight: 700; line-height: 1.05; }
.h-funciona { background: var(--areia); }
.h-f-item { border-radius: var(--radius); box-shadow: var(--shadow-sm); }
/* ícones "Casais / Famílias / Grupos de amigos": a fonte nova é mais larga; evita quebra de linha */
.h-hospedagem > section > div > span > small { font-size: 13px; letter-spacing: -0.01em; }

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */
footer { background: var(--azul-nile); }
footer .social li { background: rgba(255, 255, 255, .08); }

/* --------------------------------------------------------------------------
   Formulários gerais (cadastro, login, contato)
   -------------------------------------------------------------------------- */
.formLogin, .formCadastro, .formSenha, .mensagemSucesso,
.payment-resume, .pagamentoConcluido, .payment-opt .pay-content {
  background: var(--areia);
  border-radius: var(--radius);
}
fieldset { border-radius: var(--radius); }
.c-field textarea,
.c-field input,
.c-field select { border-radius: var(--radius-campo); }