/* ================= JV Excursões – estilos base ================= */
:root{
  --yellow:#ffc400;
  --green:#19b36b;
  --navy:#0c2e56;
  --ink:#0f172a;
  --bg:#f7f8fb;
  --white:#ffffff;
  --shadow:0 8px 20px rgba(0,0,0,.08);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans",sans-serif;
  color:var(--ink);
  background:var(--bg);
}

img{ max-width:100%; height:auto; display:block; }
.container{ width:100%; max-width:960px; margin:0 auto; padding:0 16px; }

/* ================= Header ================= */
.site-header{
  background:linear-gradient(180deg,var(--yellow) 0%,#ffe172 100%);
  position:sticky; top:0; z-index:20;
  box-shadow:var(--shadow);
}
.header-inner{ display:flex; align-items:center; gap:16px; padding:10px 0; }
.brand{ display:flex; align-items:center; gap:10px; color:var(--navy); text-decoration:none; font-weight:700; }
.brand img{ width:44px; height:44px; }

.main-nav{ margin-left:auto; display:none; gap:8px; }
.main-nav a{ text-decoration:none; color:var(--navy); font-weight:600; padding:8px 12px; border-radius:999px; transition:.2s; }
.main-nav a:hover{ background:rgba(255,255,255,.6); }
.main-nav a.active{ background:var(--navy); color:var(--white); }


.login-link{ display:none; margin-left:8px; color:var(--navy); opacity:.7; text-decoration:none; font-weight:600; }
.login-link:hover{ opacity:1; text-decoration:underline; }
.cta-whats{ display:none; margin-left:8px; background:#25d366; color:#fff; text-decoration:none; font-weight:700; padding:10px 14px; border-radius:999px; box-shadow:var(--shadow); }

/* ===== Menu Mobile ===== */
.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 100;
  margin-left: auto;
}
.menu-toggle .bar {
  width: 26px;
  height: 4px;
  background: var(--navy);
  margin: 3px 0;
  border-radius: 2px;
  transition: 0.3s;
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  width: 70vw;
  max-width: 320px;
  height: 100vh;
  background: #fff;
  box-shadow: -2px 0 16px #0002;
  padding: 60px 24px 24px 24px;
  gap: 18px;
  z-index: 99;
  transition: transform 0.3s;
}
.mobile-nav[hidden] {
  display: none !important;
}
.mobile-nav a {
  color: var(--navy);
  font-weight: 700;
  font-size: 1.2rem;
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}
.mobile-nav a:last-child {
  border-bottom: none;
}
.mobile-nav .mobile-login-link {
  background: var(--yellow);
  border-radius: 8px;
  padding: 12px;
  margin-top: 8px;
  text-align: center;
  display: block;
}

@media (min-width:720px){
  .menu-toggle { display: none !important; }
  .mobile-nav { display: none !important; }
}

@media (min-width:720px){
  .main-nav{ display:flex; }
  .login-link,.cta-whats{ display:inline-block; }
}

/* ================= Footer ================= */
.site-footer{ margin-top:40px; background:var(--navy); color:var(--white); }
.footer-inner{ padding:24px 0; text-align:center; font-size:14px; }

/* ================= Utilitários ================= */
.spacer-16{ height:16px; }
.spacer-24{ height:24px; }
.spacer-32{ height:32px; }
.center{ text-align:center; }

.pill{ border-radius:999px; padding:12px 18px; font-weight:800; letter-spacing:.2px; color:#fff; text-align:center; box-shadow:var(--shadow); }
.pill.green{ background:var(--green); }
.pill.blue{ background:var(--navy); }

.btn{ display:inline-flex; justify-content:center; align-items:center; gap:8px; padding:14px 18px; font-weight:800; text-decoration:none; color:#fff; border-radius:999px; }
.btn.green{ background:var(--green); }
.btn.blue{ background:var(--navy); }
.btn:hover{ filter:brightness(1.05); }
.btn.whats{ background:#25d366; color:#fff; }
.btn.solid{ box-shadow:var(--shadow); }
.btn.small{ padding:8px 12px; font-weight:700; }
.btn.danger{ background:#ef4444; }

/* ================= Home ================= */
.hero{
  background:linear-gradient(180deg,var(--yellow) 0%,#fff3c6 100%);
  border-radius:20px; padding:28px; margin:18px 0 28px; box-shadow:var(--shadow);
}
.top-banner{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  margin:16px 0 18px;
  min-height:120px;
  box-shadow:var(--shadow);
  background:#000; /* fallback caso o GIF não carregue */
}
.top-banner::before{
  content:"";
  position:absolute; inset:0;
  /* Caminho correto relativo a assets/styles.css (pasta img fica em assets/img) */
  /* Tenta .gif e, se não existir extensão, tenta o arquivo "banner" */
  background-image:
    url('img/banner.gif'),
    url('img/banner'),
    url('/assets/img/banner.gif');
  background-size:cover; background-position:center; background-repeat:no-repeat;
  filter:saturate(110%);
}
.top-banner::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.35) 100%);
}
.top-banner__text{
  position:relative; z-index:1;
  margin:0; padding:18px 16px;
  text-align:center; color:#fff;
  font-weight:800; letter-spacing:.2px;
  font-size:clamp(16px, 3.8vw, 22px);
}
@media (min-width:720px){
  .top-banner{ min-height:140px; }
  .top-banner__text{ padding:24px; }
}
.hero-top{ display:flex; align-items:center; gap:12px; flex-wrap:nowrap; }
.hero .logo{
  flex-shrink:0;
  max-width:80px; max-height:80px;
  display:flex; align-items:center; justify-content:center;
}
.hero .logo img{
  width:100%; height:auto; max-height:80px; object-fit:contain;
}
.hero h1{ margin:0; font-size:clamp(20px, 5vw, 28px); color:var(--navy); line-height:1.2; }
.hero p{ margin:4px 0 0; color:#334155; font-size:clamp(13px, 3.5vw, 16px); }
.hero-actions{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:16px; }
@media (min-width:640px){ 
  .hero-actions{ grid-template-columns:repeat(2,1fr); }
  .hero .logo{ max-width:120px; max-height:120px; }
  .hero .logo img{ max-height:120px; }
}

/* ================= Excursões (cards) ================= */
.tours-wrapper{ padding:22px 0; }
.tours-board{ background:#ffe172; border-radius:20px; padding:22px; box-shadow:var(--shadow); }
.tour-list{ margin-top:14px; display:grid; gap:18px; }

.tour-card{ background:#fff; border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.tour-card .tour-title{ display:none !important; }

.tour-img{ width:100%; height:clamp(220px,28vw,360px); object-fit:cover; background:#dbeafe; }
img.tour-img{ background:transparent !important; }
.tour-img-wrap{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  isolation:isolate;
  --chip-count: 0; /* atualizado via JS */
}

/* Mobile: altura = base 260px + 54px por chip */
@media (max-width:640px){
  .tour-img-wrap{
    min-height: calc(260px + (var(--chip-count) * 54px));
  }
  .tour-img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  }
}

/* ---- Overlay das chips e título ---- */
.img-badge{
  display:inline-flex; align-items:center;
  width:fit-content; max-width:320px;
  padding:8px 12px; line-height:1.25;
  white-space:normal; word-break:break-word;
  z-index:2; border-radius:9999px;
  color:#fff; font-weight:800; font-size:14px;
  box-shadow:var(--shadow);
  backdrop-filter:saturate(150%) blur(2px);
}
.img-badge.is-floating{ position:absolute; z-index:3; }
.badge-green{ background:linear-gradient(135deg,#16a34a,#22c55e); }
.badge-purple{ background:linear-gradient(135deg,#7c3aed,#a855f7); }

/* Chips logo abaixo do título, com distância fixa de segurança */
.overlay-chips{
  position:absolute;
  top: calc(100px + 1.2em); /* 100px de base + 1 linha do título */
  left:12px;
  right:12px;
  bottom:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
  z-index:2;
  padding-right:6px;
  overflow:visible;
  max-width:100%;
}

/* Botão “Reservar” */
.tour-card .btn.green{
  margin: 10px 12px 16px;
}

/* ================= Modal ================= */
.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:grid; place-items:center; padding:20px; z-index:50; }
.modal{ width:min(920px,100%); max-height:90vh; overflow:auto; background:#fff; border-radius:16px; box-shadow:var(--shadow); padding:16px; }
.modal.full{ width:100%; height:100vh; max-height:100vh; border-radius:0; }
.modal-title{ margin:4px 0 12px; color:var(--navy); font-size:18px; line-height:1.25; }
.modal-desc{
  margin:6px 0 12px; color:var(--ink); font-size:14px; line-height:1.6;
  background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:10px 12px;
  white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere;
}
.modal-desc a{ color:var(--navy); text-decoration:underline; word-break:break-all; }
.modal-media{ display:grid; gap:12px; position:relative; background:transparent !important; }
.modal-media img{ width:100%; max-height:70vh; object-fit:contain; border-radius:12px; background:transparent !important; }
.modal-video{ position:relative; padding-top:56.25%; }
.modal-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:12px; }
.modal-close{ position:sticky; top:0; float:right; border:0; background:transparent; font-size:28px; line-height:1; cursor:pointer; }
.modal-actions{ display:flex; justify-content:center; margin-top:12px; }

/* ================= Admin ================= */
.admin-grid{ display:grid; gap:16px; margin-top:12px; }
@media (min-width:860px){ .admin-grid{ grid-template-columns:repeat(2,1fr); } }
.admin-card{ background:#fff; padding:16px; border-radius:12px; box-shadow:var(--shadow); display:grid; gap:10px; }
.admin-card h3{ margin:0 0 8px; color:var(--navy); }
.admin-card label{ display:grid; gap:6px; font-weight:600; }
.admin-card input,.admin-card textarea{ padding:10px 12px; border:1px solid #e2e8f0; border-radius:8px; font:inherit; }
.admin-row{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px dashed #e2e8f0; }
.muted{ color:#64748b; font-size:12px; }

/* ================= Contato ================= */
.contact-board{
  background: var(--white);
  border-radius: 20px;
  padding: 28px 24px 32px;
  box-shadow: var(--shadow);
  text-align: left;
}
.contact-board .pill-title{
  display: inline-block;
  background: var(--navy);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  padding: 10px 22px;
  border-radius: 999px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.contact-board p{
  margin: 0 0 22px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}
.contact-list{
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.contact-list li{
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  padding: 10px 20px;
  width: fit-content;
  max-width: 90%;
  box-shadow: var(--shadow);
}
.contact-list a{
  color: #fff;
  text-decoration: underline;
  font-weight: 800;
}
.contact-list a:hover{ opacity: .9; }
.contact-board .btn.whats{
  font-size: 16px;
  font-weight: 800;
  padding: 14px 28px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  box-shadow: var(--shadow);
  transition: transform .2s ease, filter .2s ease;
}
.contact-board .btn.whats:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* ================= Limpezas ================= */
.hidden{ display:none !important; }

/* ---- Ajuste mobile: afasta chips um pouco mais do título ---- */
@media (max-width: 640px){
  .overlay-chips{
    top: calc(132px + 1.4em); /* aumenta margem segura em telas pequenas */
  }
  .img-badge.is-floating{
    font-size:16px !important;
    padding:10px 14px !important;
  }
}