/* ===== Brand colors (from the logo) ===== */
:root {
  --blue: #4A88CC;       /* header + footer background */
  --sun: #FFC857;
  --deep: #0C3C4C;
  --stone: #1F6E78;
  --ocean: #10A3B2;
  --aqua: #5FD0C8;
  --palm: #2BB39A;
  --sky: #E0F3F2;
  --sand: #F7EDE0;
  --cream: #FBF7F1;
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}

html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--deep); background: var(--cream); }
h1, h2, h3, h6, .brand-text { font-family: var(--font-display); }

/* ===== Buttons ===== */
.btn { border-radius: 999px; font-weight: 600; padding: .6rem 1.4rem; }
.btn-lg { padding: .85rem 1.9rem; }
.btn-sun { background: var(--sun); color: var(--deep); border: 0; }
.btn-sun:hover { background: #ffd57a; color: var(--deep); }
.btn-ocean { background: var(--deep); color: #fff; border: 0; }
.btn-ocean:hover { background: var(--ocean); color: #fff; }
.btn-ocean .bi { transition: transform .2s; }
.btn-ocean:hover .bi { transform: translateX(4px); }
.btn-whatsapp { background: #25D366; color: #fff; border: 0; }
.btn-whatsapp:hover { background: #1ebe5a; color: #fff; }
.btn-outline-ocean { border: 2px solid var(--sky); color: #fff; }
.btn-outline-ocean:hover { background: var(--sky); color: var(--deep); }

/* ===== Navbar ===== */
.site-nav { background: transparent; padding: 1rem 0; transition: background-color .35s, padding .3s, box-shadow .3s; }
.site-nav .nav-link, .site-nav .brand-text, .site-nav .navbar-toggler { color: #fff; }
.site-nav .nav-link { font-weight: 500; }
.site-nav .nav-link:hover, .site-nav .nav-link:focus { color: var(--sun); }
.site-nav .navbar-toggler { border: 0; font-size: 1.8rem; box-shadow: none; }
.brand-text { font-weight: 800; line-height: 1; font-size: 1.15rem; }
.brand-text small { display: block; font-family: var(--font-body); font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--sky); font-weight: 600; margin-bottom: 3px; }
/* Blue after scrolling, and on phones while the menu is open */
.site-nav.scrolled,
.site-nav:has(.navbar-collapse.show),
.site-nav:has(.navbar-collapse.collapsing) { background: var(--blue); }
.site-nav.scrolled { padding: .45rem 0; box-shadow: 0 4px 20px rgba(12,60,76,.25); }
.site-nav:not(.scrolled) .brand-text, .site-nav:not(.scrolled) .nav-link { text-shadow: 0 1px 8px rgba(0,0,0,.35); }
@media (max-width: 991.98px) {
  .site-nav .navbar-collapse { padding: .5rem 0 1rem; }
}

/* ===== Hero ===== */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue) center 60% / cover no-repeat;
  color: #fff; padding: 7rem 0 5rem;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,60,76,.55) 0%, rgba(12,60,76,.25) 40%, rgba(12,60,76,.65) 100%);
}
.hero-logo { width: clamp(110px, 16vw, 170px); height: auto; filter: drop-shadow(0 10px 30px rgba(0,0,0,.3)); animation: float 6s ease-in-out infinite; }
.eyebrow { font-family: var(--font-body); letter-spacing: .45em; text-transform: uppercase; font-weight: 600; color: var(--aqua); margin-bottom: .5rem; font-size: clamp(.8rem, 1.4vw, 1rem); text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.hero-title { font-weight: 800; line-height: .92; font-size: clamp(3.2rem, 10vw, 7.5rem); letter-spacing: -.02em; text-shadow: 0 4px 30px rgba(0,0,0,.25); }
.hero-title span { display: block; }
.t-sun { color: var(--sun); }
.t-sand { color: var(--cream); }
.hero-lead { max-width: 560px; font-size: clamp(1rem, 1.6vw, 1.2rem); margin-top: 1.5rem; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.scroll-cue { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); color: #fff; text-decoration: none; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; opacity: .85; }
.scroll-cue .bi { font-size: 1.4rem; animation: bob 2s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px); } }
@keyframes bob { 50% { transform: translateY(6px); } }

/* ===== Category sections ===== */
.cat {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end; padding: 8rem 0 4rem;
  background: var(--deep) center / cover no-repeat;
  overflow: hidden;
}
@media (min-width: 992px) and (hover: hover) { .cat[data-bg], .hero { background-attachment: fixed; } }
.cat-overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(12,60,76,0) 45%, rgba(12,60,76,.55) 100%); }

.cat-card {
  position: relative; max-width: 460px;
  background: var(--cream); border-radius: 24px; padding: 2.25rem 2rem 2rem;
  box-shadow: 0 20px 60px rgba(12,60,76,.35);
}
.cat-card-right { margin-left: auto; }
.cat-num { position: absolute; top: -28px; right: 28px; width: 56px; height: 56px; border-radius: 50%; background: var(--sun); color: var(--deep); font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(0,0,0,.15); }
.cat-label { font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; font-weight: 600; color: var(--ocean); margin-bottom: .4rem; }
.cat-title { font-weight: 800; font-size: clamp(1.8rem, 3.2vw, 2.4rem); line-height: 1.05; margin-bottom: .9rem; }
.cat-text { color: var(--stone); margin-bottom: 1.5rem; }

/* Card entrance */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-logo, .scroll-cue .bi { animation: none; }
  html { scroll-behavior: auto; }
}

/* Ruins: two photos side by side */
.cat-split { background: var(--deep); }
.split-img { position: absolute; top: 0; bottom: 0; width: 50%; background: center / cover no-repeat; }
.split-img:first-child { left: 0; }
.split-img:nth-child(2) { right: 0; border-left: 4px solid var(--cream); }
.split-tag { position: absolute; top: 6rem; left: 1.5rem; background: rgba(12,60,76,.75); color: #fff; padding: .35rem .9rem; border-radius: 999px; font-size: .8rem; font-weight: 600; letter-spacing: .08em; }
@media (max-width: 767.98px) {
  .split-img { width: 100%; height: 50%; }
  .split-img:first-child { top: 0; bottom: auto; }
  .split-img:nth-child(2) { top: 50%; bottom: 0; border-left: 0; border-top: 4px solid var(--cream); }
  .split-img:nth-child(2) .split-tag { top: 1rem; }
  .cat-card { padding: 2rem 1.5rem 1.5rem; }
  .cat { padding-bottom: 2.5rem; }
}

/* ===== Contact ===== */
/* Turquoise water from the logo, fading into the footer blue */
.contact { position: relative; color: var(--deep); padding-top: 3rem;
  background: linear-gradient(180deg, var(--aqua) 0%, #3CBFC4 55%, var(--blue) 100%); }
.contact .wave { position: absolute; top: -119px; left: 0; width: 100%; height: 120px; transform: scaleY(-1); }
.contact .wave path { fill: var(--aqua); }
.contact img { filter: drop-shadow(0 8px 20px rgba(12,60,76,.25)); }
.contact-title { font-weight: 800; font-size: clamp(2rem, 4.5vw, 3.2rem); color: var(--deep); text-wrap: balance; }
.contact-text { max-width: 520px; font-size: 1.1rem; color: var(--deep); }
.contact .btn-whatsapp { background: var(--deep); color: #fff; }
.contact .btn-whatsapp .bi { color: #25D366; }
.contact .btn-whatsapp:hover { background: #082b37; color: #fff; }
.contact .btn-outline-ocean { border-color: var(--deep); color: var(--deep); }
.contact .btn-outline-ocean:hover { background: var(--deep); color: #fff; }

/* ===== Footer ===== */
.site-footer { background: var(--blue); color: #fff; }
.site-footer h6 { color: var(--sun); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; margin-bottom: 1rem; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--deep); text-decoration: underline; }
.site-footer li { margin-bottom: .45rem; }
.site-footer hr { border-color: rgba(255,255,255,.35); opacity: 1; margin: 2rem 0 1.25rem; }
.credits { font-size: .72rem; opacity: .85; }
.credits li { margin-bottom: .25rem; }
.site-footer .bi { color: var(--sun); }

/* Contact section: same look as the tour catalog (white text, green WhatsApp button) */
.contact { background: linear-gradient(180deg, var(--ocean) 0%, #2C94C2 55%, var(--blue) 100%); color: #fff; }
.contact .wave path { fill: var(--ocean); }
.contact .contact-title { color: #fff; text-shadow: 0 2px 18px rgba(12,60,76,.35); }
.contact .contact-text { color: #fff; opacity: .95; text-shadow: 0 1px 10px rgba(12,60,76,.3); }
.contact .btn-whatsapp { background: #25D366; color: #fff; box-shadow: 0 8px 20px -8px rgba(12,60,76,.45); }
.contact .btn-whatsapp .bi { color: #fff; }
.contact .btn-whatsapp:hover, .contact .btn-whatsapp:focus { background: #1ebe5a; color: #fff; }
.contact .btn-outline-ocean { border-color: #fff; color: #fff; }
.contact .btn-outline-ocean:hover { background: #fff; color: var(--deep); }


/* Contact section layout: title on top, then logo (1/4) + text and buttons (3/4) */
.contact-row .contact-text { max-width: none; font-size: 1.15rem; }
.contact-logo-lg { width: 100%; max-width: 170px; height: auto; filter: drop-shadow(0 10px 24px rgba(12,60,76,.3)); }
.contact-row .contact-title { text-align: left; }

/* Category card buttons: same turquoise sea gradient as "Ver detalhes" in the tour catalog */
.cat-card .btn-ocean {
  background: linear-gradient(135deg, var(--stone) 0%, var(--ocean) 100%);
  color: #fff; border: 0; box-shadow: 0 6px 16px -6px rgba(16,163,178,.6);
}
.cat-card .btn-ocean:hover, .cat-card .btn-ocean:focus {
  background: linear-gradient(135deg, var(--ocean) 0%, var(--palm) 100%); color: #fff;
}