/*
Theme Name: JetSki Guarujá
Theme URI: https://jetskiguaruja.com.br
Author: Saysix
Author URI: https://saysix.com.br
Description: Tema próprio da JetSki Guarujá — locação de jet ski na Praia da Enseada. Página única, sem builder: dados do negócio no Customizer e conteúdo nos templates.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: jetskiguaruja
*/

/* ---------- 1. Variáveis e reset ---------- */
:root {
  --turquesa: #0FB9CE;
  --turquesa-escuro: #0A8EA0;
  --profundo: #06232F;
  --noite:    #0A3344;
  --coral:    #FF6B35;
  --wpp:      #25D366;
  --wpp-hover:#1DB954;
  --areia:    #F7F2E8;
  --texto:    #2C3E47;
  --cinza:    #6A7C86;
  --borda:    #E3EAEE;
  --sombra:   0 10px 30px rgba(6,35,47,.10);
  --sombra-forte: 0 18px 40px rgba(6,35,47,.18);
  --radius: 14px;
  --pill: 999px;
  --titulo: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --corpo: "Barlow", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--corpo);
  font-size: 16px;
  line-height: 1.65;
  color: var(--texto);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}

html { scroll-behavior: smooth; scroll-padding-top: 86px; }
img { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--titulo);
  color: var(--profundo);
  line-height: 1.1;
  margin: 0 0 14px;
  letter-spacing: .01em;
}
h1 { font-size: 58px; font-weight: 700; text-transform: uppercase; }
h2 { font-size: 40px; font-weight: 700; text-transform: uppercase; }
h3 { font-size: 21px; font-weight: 600; }
h4 { font-size: 17px; font-weight: 600; }
p { margin: 0 0 16px; }

a { color: var(--turquesa-escuro); }

.jg-container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.jg-centro { text-align: center; }
.jg-mt { margin-top: 26px; }

.jg-sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.jg-pular {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--profundo); color: #fff; padding: 12px 20px;
}
.jg-pular:focus { left: 8px; top: 8px; }

/* ---------- 2. Botões ---------- */
.jg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 28px;
  border: 2px solid transparent;
  border-radius: var(--pill);
  font-family: var(--titulo);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.jg-btn:hover { transform: translateY(-2px); }
.jg-btn-wpp { background: var(--wpp); color: #ffffff; }
.jg-btn-wpp:hover { background: var(--wpp-hover); }
.jg-btn-ghost { background: transparent; color: var(--profundo); border-color: var(--profundo); }
.jg-btn-ghost:hover { background: var(--profundo); color: #ffffff; }
.jg-btn-mini { padding: 9px 20px; font-size: 15px; }
.jg-icone { width: 19px; height: 19px; flex: none; }

/* ---------- 3. Cabeçalho ---------- */
.jg-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(6,35,47,.55);
  backdrop-filter: blur(10px);
  transition: background .2s ease, box-shadow .2s ease;
}
.jg-header.jg-compacto { background: var(--profundo); box-shadow: 0 6px 20px rgba(6,35,47,.28); }
.jg-header-inner { display: flex; align-items: center; gap: 24px; min-height: 74px; }
.jg-logo { display: flex; align-items: center; margin-right: auto; }
.jg-logo img { display: block; width: 150px; height: auto; }

.jg-menu { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.jg-menu a {
  position: relative;
  color: rgba(255,255,255,.88);
  font-family: var(--titulo);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 6px 0;
}
.jg-menu a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--turquesa);
  transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease;
}
.jg-menu a:hover::after, .jg-menu a.ativo::after { transform: scaleX(1); }
.jg-menu a.ativo { color: #ffffff; }

.jg-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 40px;
  background: none; border: 0; cursor: pointer;
}
.jg-burger span { display: block; height: 2px; background: #ffffff; border-radius: 2px; }

/* ---------- 4. Hero dividido ---------- */
.jg-hero {
  position: relative;
  padding: 150px 0 90px;
  background:
    radial-gradient(900px 500px at 85% 20%, rgba(15,185,206,.30), transparent 60%),
    linear-gradient(160deg, var(--profundo) 0%, var(--noite) 60%, #0E4A5F 100%);
  overflow: hidden;
}
.jg-hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 56px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 56' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,56L1440,56L1440,22C1180,52,900,2,660,26C420,50,200,6,0,30Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.jg-hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 40px; align-items: center;
}
.jg-selo {
  display: inline-block;
  margin: 0 0 14px;
  padding: 5px 16px;
  border: 1px solid rgba(15,185,206,.55);
  border-radius: var(--pill);
  color: var(--turquesa);
  font-family: var(--titulo);
  font-size: 15px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.jg-hero h1 { color: #ffffff; }
.jg-hero .jg-sub { color: rgba(255,255,255,.84); font-size: 19px; max-width: 32em; }
.jg-hero-botoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.jg-hero .jg-btn-ghost { color: #ffffff; border-color: rgba(255,255,255,.6); }
.jg-hero .jg-btn-ghost:hover { background: #ffffff; color: var(--profundo); }

.jg-hero-marcas {
  display: flex; flex-wrap: wrap; gap: 30px;
  list-style: none; margin: 38px 0 0; padding: 26px 0 0;
  border-top: 1px solid rgba(255,255,255,.16);
}
.jg-hero-marcas strong {
  display: block;
  font-family: var(--titulo); font-size: 26px; font-weight: 700;
  color: var(--turquesa); line-height: 1.1;
}
.jg-hero-marcas span { font-size: 14px; color: rgba(255,255,255,.65); }

.jg-hero-foto img {
  display: block; width: 100%;
  filter: drop-shadow(0 26px 34px rgba(0,0,0,.45));
}

/* ---------- 5. Faixa de vantagens ---------- */
.jg-faixa { background: #ffffff; padding: 54px 0 10px; }
.jg-faixa-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.jg-faixa-grid h3 { margin-bottom: 6px; }
.jg-faixa-grid h3::before {
  content: ""; display: block; width: 34px; height: 3px;
  background: var(--turquesa); margin-bottom: 12px; border-radius: 2px;
}
.jg-faixa-grid p { color: var(--cinza); margin: 0; font-size: 15px; }

/* ---------- 6. Seções ---------- */
.jg-secao { padding: 76px 0; }
.jg-areia { background: var(--areia); }
.jg-escura { background: var(--profundo); color: rgba(255,255,255,.82); }
.jg-escura h2, .jg-escura h3 { color: #ffffff; }
.jg-olho {
  margin: 0 0 6px;
  color: var(--turquesa-escuro);
  font-family: var(--titulo); font-size: 16px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
}
.jg-escura .jg-olho { color: var(--turquesa); }
.jg-secao-sub { color: var(--cinza); max-width: 44em; margin-bottom: 30px; }

/* ---------- 7. Tabela da frota ---------- */
.jg-tabela-wrap {
  background: #ffffff;
  border: 1px solid var(--borda);
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.jg-tabela { width: 100%; border-collapse: collapse; }
.jg-tabela thead th {
  background: var(--profundo);
  color: #ffffff;
  font-family: var(--titulo); font-size: 17px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  text-align: left;
  padding: 14px 18px;
}
.jg-tabela tbody tr { border-top: 1px solid var(--borda); }
.jg-tabela tbody th, .jg-tabela tbody td { padding: 16px 18px; vertical-align: middle; }
.jg-tabela tbody th {
  display: flex; align-items: center; gap: 16px;
  font-weight: 600; text-align: left;
}
.jg-tabela tbody th img { width: 92px; height: auto; flex: none; }
.jg-tabela tbody th span { display: block; font-family: var(--titulo); font-size: 21px; color: var(--profundo); }
.jg-tabela tbody th small {
  display: block;
  font-family: var(--corpo); font-size: 13px; font-weight: 400;
  color: var(--cinza); line-height: 1.4; margin-top: 2px;
}
.jg-tabela td strong { font-family: var(--titulo); font-size: 26px; color: var(--profundo); }
.jg-td-cta { text-align: right; white-space: nowrap; }
.jg-linha-destaque { background: rgba(15,185,206,.07); }
.jg-tag {
  display: inline-block; vertical-align: middle;
  margin-left: 8px; padding: 2px 10px;
  background: var(--coral); color: #ffffff;
  border-radius: var(--pill);
  font-family: var(--corpo); font-size: 11px; font-weight: 600;
  font-style: normal; letter-spacing: .06em; text-transform: uppercase;
}

/* ---------- 8. Destaque do som ---------- */
.jg-som-aviso {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin: 22px 0 0; color: var(--cinza); font-size: 15px;
}
.jg-som-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 18px;
  border: 1px solid rgba(255,107,53,.40);
  border-radius: var(--pill);
  background: rgba(255,107,53,.12);
  color: #C2440F;
  font-weight: 600;
}
.jg-icone-som { flex: none; width: 17px; height: 17px; }

/* ---------- 9. Passos ---------- */
.jg-passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 34px; }
.jg-passos > div { border-top: 2px solid rgba(255,255,255,.14); padding-top: 18px; }
.jg-passos span {
  display: block;
  font-family: var(--titulo); font-size: 46px; font-weight: 700;
  line-height: 1; color: var(--turquesa); margin-bottom: 8px;
}
.jg-passos p { color: rgba(255,255,255,.72); margin: 0; }

/* ---------- 10. Condições ---------- */
.jg-condicoes-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: start; }
.jg-lista { list-style: none; margin: 0; padding: 0; }
.jg-lista li {
  position: relative;
  padding: 0 0 14px 34px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--borda);
}
.jg-lista li:last-child { border-bottom: 0; }
.jg-lista li::before {
  content: "";
  position: absolute; left: 0; top: 7px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--turquesa);
  box-shadow: inset 0 0 0 4px #ffffff;
}
.jg-lista strong { color: var(--profundo); }

/* ---------- 11. FAQ ---------- */
.jg-faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: start; }
.jg-faq details {
  background: #ffffff;
  border: 1px solid var(--borda);
  border-radius: var(--radius);
  margin-bottom: 10px;
  padding: 0 20px;
}
.jg-faq summary {
  font-family: var(--titulo); font-size: 20px; font-weight: 600;
  color: var(--profundo);
  padding: 15px 0; cursor: pointer;
}
.jg-faq details[open] summary { color: var(--turquesa-escuro); }
.jg-faq p { margin: 0 0 16px; color: var(--cinza); }

/* ---------- 12. Contato ---------- */
.jg-contato-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; margin-top: 30px; }
.jg-dado {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.14);
  color: #ffffff; text-decoration: none;
}
.jg-dado span {
  display: block;
  font-family: var(--titulo); font-size: 14px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--turquesa);
}
.jg-dado strong { font-weight: 500; }
.jg-dado:hover strong { color: var(--turquesa); }
.jg-dado-horario { margin: 16px 0 22px; color: rgba(255,255,255,.66); font-size: 15px; }
.jg-mapa { width: 100%; height: 330px; border: 0; border-radius: var(--radius); }

.jg-contato-form input[type="text"],
.jg-contato-form input[type="email"],
.jg-contato-form input[type="tel"],
.jg-contato-form textarea {
  width: 100%;
  margin-bottom: 12px;
  padding: 13px 16px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  color: #ffffff;
  font-family: var(--corpo); font-size: 16px;
}
.jg-contato-form input::placeholder, .jg-contato-form textarea::placeholder { color: rgba(255,255,255,.5); }
.jg-contato-form textarea { min-height: 130px; resize: vertical; }
.jg-contato-form .wpcf7-submit {
  padding: 14px 30px;
  border: 0; border-radius: var(--pill);
  background: var(--wpp); color: #ffffff;
  font-family: var(--titulo); font-size: 18px; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase; cursor: pointer;
}
.jg-contato-form .wpcf7-submit:hover { background: var(--wpp-hover); }

/* ---------- 13. Páginas internas ---------- */
.jg-interna { padding-top: 140px; }
.jg-prosa { max-width: 760px; }

/* ---------- 14. Rodapé ---------- */
.jg-footer { background: #041A23; color: rgba(255,255,255,.70); padding: 56px 0 0; }
.jg-footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 34px; }
.jg-footer h4 { color: #ffffff; }
.jg-footer a { color: rgba(255,255,255,.86); text-decoration: none; }
.jg-footer a:hover { color: var(--turquesa); }
.jg-footer-logo { width: 150px; height: auto; margin-bottom: 14px; }
.jg-footer-horario { color: rgba(255,255,255,.55); font-size: 14px; }
.jg-footer-copy {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  max-width: 1180px; margin: 40px auto 0; padding: 18px 24px;
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: 14px;
}

/* ---------- 15. Responsivo ---------- */
@media (max-width: 1000px) {
  h1 { font-size: 46px; }
  h2 { font-size: 34px; }
  .jg-hero-grid { grid-template-columns: 1fr; }
  .jg-hero-foto { order: -1; max-width: 460px; }
  .jg-faixa-grid { grid-template-columns: repeat(2, 1fr); }
  .jg-condicoes-grid, .jg-faq-grid, .jg-contato-grid { grid-template-columns: 1fr; gap: 30px; }
  .jg-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .jg-burger { display: flex; }
  .jg-header-cta { display: none; }
  .jg-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--profundo);
    padding: 8px 24px 18px;
    box-shadow: 0 16px 26px rgba(0,0,0,.3);
  }
  .jg-nav.aberto { display: block; }
  .jg-menu { flex-direction: column; gap: 0; }
  .jg-menu a { display: block; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.10); }
  .jg-menu a::after { display: none; }
}

/* A tabela vira um cartão por veículo. */
@media (max-width: 860px) {
  .jg-tabela-wrap { background: transparent; border: 0; box-shadow: none; }
  .jg-tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .jg-tabela, .jg-tabela tbody, .jg-tabela tr, .jg-tabela th, .jg-tabela td { display: block; width: 100%; }
  .jg-tabela tbody tr {
    border: 1px solid var(--borda);
    border-radius: var(--radius);
    background: #ffffff;
    box-shadow: var(--sombra);
    margin-bottom: 16px;
    padding: 6px 4px 14px;
  }
  .jg-tabela tbody tr.jg-linha-destaque { border-color: var(--turquesa); }
  .jg-tabela tbody th { border-bottom: 1px solid var(--borda); padding-bottom: 14px; }
  .jg-tabela tbody td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 14px; padding: 8px 18px;
  }
  .jg-tabela tbody td::before {
    content: attr(data-label);
    font-family: var(--titulo); font-size: 16px;
    letter-spacing: .06em; text-transform: uppercase; color: var(--cinza);
  }
  .jg-td-cta { justify-content: stretch !important; padding-top: 12px !important; }
  .jg-td-cta::before { display: none; }
  .jg-td-cta .jg-btn { width: 100%; }
}

@media (max-width: 680px) {
  h1 { font-size: 36px; }
  h2 { font-size: 28px; }
  .jg-secao { padding: 56px 0; }
  .jg-hero { padding: 120px 0 70px; }
  .jg-faixa-grid { grid-template-columns: 1fr; }
  .jg-passos { grid-template-columns: 1fr; }
  .jg-footer-grid { grid-template-columns: 1fr; }
  .jg-hero-botoes .jg-btn { width: 100%; }
  .jg-hero-marcas { gap: 20px; }
}

/* ---------- 16. Acessibilidade ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--turquesa);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}