:root {
  --pine: #173b2b;
  --pine-2: #0d291d;
  --leaf: #2c6a48;
  --lime: #dff45b;
  --sun: #f4b942;
  --clay: #e65c3a;
  --paper: #f7f4e8;
  --ink: #10251b;
  --white: #fffef8;
  --line: rgba(16, 37, 27, .2);
  --radius: 1.75rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--paper); font-size: 16px; line-height: 1.55; }
a { color: inherit; }
img { display: block; width: 100%; }
button, input, select, textarea { font: inherit; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; background: var(--white); padding: .8rem 1rem; border-radius: .5rem; }
.skip-link:focus { top: 1rem; }

.site-header { height: 80px; max-width: 1440px; margin: auto; padding: 0 clamp(1.25rem, 5vw, 5rem); display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand-logo { width: auto; height: 5.2rem; object-fit: contain; }
nav { display: flex; align-items: center; gap: 2rem; }
nav a { text-decoration: none; font-weight: 650; font-size: .92rem; }
nav a:hover { text-decoration: underline; text-underline-offset: .3rem; }
.header-cta { text-decoration: none; background: var(--pine); color: var(--white); border-radius: 999px; padding: .65rem 1.25rem; font-weight: 750; }

.hero { position: relative; min-height: calc(100vh - 80px); max-width: 1440px; margin: auto; padding: clamp(2.25rem, 6vw, 6rem) clamp(1.25rem, 5vw, 5rem) 4rem; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; overflow: hidden; }
.hero::before { content: ""; position: absolute; width: 32rem; height: 32rem; border: 1px solid rgba(44,106,72,.18); border-radius: 50%; left: -18rem; top: 12%; box-shadow: 0 0 0 4rem rgba(44,106,72,.04), 0 0 0 8rem rgba(44,106,72,.025); pointer-events: none; }
.hero-copy { position: relative; z-index: 1; max-width: 44rem; }
.eyebrow { margin: 0 0 1rem; text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 850; color: var(--leaf); }
h1, h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: -.055em; line-height: .92; }
h1 { font-size: clamp(3.75rem, 8vw, 7.6rem); }
h1 em { color: var(--clay); font-weight: 400; }
.hero-lead { max-width: 38rem; margin: 2rem 0; font-size: clamp(1.05rem, 1.5vw, 1.28rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.button { min-height: 3.3rem; display: inline-flex; align-items: center; justify-content: center; gap: .7rem; padding: .85rem 1.3rem; border: 0; border-radius: 999px; text-decoration: none; font-weight: 800; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--pine); color: var(--white); box-shadow: 0 .75rem 2rem rgba(23,59,43,.18); }
.button-whatsapp { background: #dff45b; color: var(--pine-2); }
.hero-visual { position: relative; justify-self: end; width: min(100%, 34rem); border-radius: 46% 46% 1.5rem 1.5rem; overflow: hidden; background: var(--leaf); box-shadow: 1.2rem 1.2rem 0 var(--sun); }
.hero-visual > img { aspect-ratio: 4/5; object-fit: cover; transform: scale(1.025); }
.hero-note { position: absolute; right: 1rem; bottom: 1rem; width: 12rem; padding: 1rem; display: grid; grid-template-columns: 2.2rem 1fr; align-items: center; background: rgba(255,254,248,.94); backdrop-filter: blur(8px); border-radius: 1rem; line-height: 1.15; box-shadow: 0 .7rem 2rem rgba(0,0,0,.15); }
.hero-note .sun { grid-row: 1/3; font-size: 1.5rem; color: var(--clay); }
.hero-note span:last-child { font-size: .75rem; margin-top: .22rem; }
.hero-badge { position: absolute; right: calc(5vw + 27rem); bottom: 4.7rem; width: 8rem; height: 8rem; border-radius: 50%; background: var(--clay); color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-10deg); font-size: .72rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; line-height: 1.35; z-index: 2; }
.hero-badge b { color: var(--sun); }

.quick-info { max-width: 1440px; margin: 0 auto; padding: 1.4rem clamp(1.25rem, 5vw, 5rem); display: grid; grid-template-columns: repeat(3, 1fr); background: var(--pine); color: white; }
.quick-info article { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; border-right: 1px solid rgba(255,255,255,.18); }
.quick-info article:last-child { border-right: 0; }
.info-icon { display: grid; place-items: center; flex: 0 0 2.7rem; height: 2.7rem; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: var(--lime); font-size: 1.15rem; }
.quick-info div { display: grid; }
.quick-info small { color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: .1em; font-size: .65rem; }
.quick-info strong { font-size: 1rem; }
.quick-info div span { font-size: .75rem; color: rgba(255,255,255,.7); }

.experience { max-width: 1440px; margin: auto; padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 5vw, 5rem); display: grid; grid-template-columns: 1.15fr .85fr; gap: 2rem; }
.section-heading h2, .booking h2, .visit h2 { font-size: clamp(3rem, 6vw, 6rem); }
.experience-copy { align-self: end; padding: 0 0 1rem clamp(0rem, 4vw, 4rem); font-size: 1.15rem; }
.experience-copy p { max-width: 31rem; }
.text-link { display: inline-flex; align-items: center; gap: .5rem; font-weight: 850; text-underline-offset: .35rem; }
.feature-card { min-height: 20rem; margin-top: 2.5rem; padding: 2rem; border-radius: var(--radius); display: flex; flex-direction: column; justify-content: flex-end; }
.feature-card-yellow { background: var(--sun); transform: rotate(-1.5deg); }
.feature-card-green { background: var(--leaf); color: white; transform: translateY(2.5rem) rotate(1.5deg); }
.feature-number { margin-bottom: auto; font-family: Georgia, serif; font-size: 2.2rem; }
.feature-card h3 { max-width: 18rem; margin: 0 0 .7rem; font-family: Georgia, serif; font-size: 2rem; line-height: 1; letter-spacing: -.035em; }
.feature-card p { max-width: 27rem; margin: 0; }

.gallery { background: var(--pine-2); color: white; padding: clamp(4rem, 8vw, 7rem) max(1.25rem, calc((100vw - 1280px) / 2)); display: grid; grid-template-columns: .85fr 1fr 1fr; grid-template-rows: auto 16rem; gap: 1rem; }
.gallery-title { padding: 1rem 2rem 1rem 0; align-self: center; }
.gallery-title .eyebrow { color: var(--lime); }
.gallery-title h2 { font-size: clamp(3rem, 5vw, 5.3rem); margin-bottom: 2rem; }
.text-link.light { color: var(--white); }
.photo { margin: 0; overflow: hidden; border-radius: 1.4rem; min-height: 20rem; }
.photo img { height: 100%; object-fit: cover; transition: transform .5s ease; }
.photo:hover img { transform: scale(1.04); }
.photo-tall { grid-row: 1/3; grid-column: 2; }
.photo-wide { grid-column: 1/4; min-height: 16rem; }
.photo-wide img { object-position: center 55%; }

.visit { max-width: 1440px; margin: auto; padding: clamp(5rem, 9vw, 8rem) clamp(1.25rem, 5vw, 5rem); display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem, 5vw, 5rem); align-items: stretch; }
.address-block { margin-top: 2.5rem; }
.address-block p { font-size: 1.25rem; }
.button-outline { border: 1px solid var(--ink); }
.route-card { min-height: 28rem; position: relative; overflow: hidden; border-radius: 55% 55% 1.5rem 1.5rem; background: var(--sun); }
.route-card::before, .route-card::after { content: ""; position: absolute; border: 2px solid rgba(23,59,43,.2); border-radius: 50%; }
.route-card::before { width: 28rem; height: 28rem; left: -10rem; top: -3rem; }
.route-card::after { width: 20rem; height: 20rem; right: -8rem; bottom: -6rem; }
.route-line { position: absolute; inset: 22% 12%; display: flex; align-items: center; justify-content: space-between; transform: rotate(-16deg); }
.route-line::before { content: ""; position: absolute; left: 0; right: 0; border-top: 4px dashed var(--pine); }
.route-line i { width: 1rem; height: 1rem; border: 3px solid var(--pine); border-radius: 50%; background: var(--sun); z-index: 1; }
.route-line i:last-child { width: 2.1rem; height: 2.1rem; background: var(--clay); border-color: white; }
.route-start, .route-end { position: absolute; font-weight: 900; }
.route-start { left: 8%; bottom: 15%; }
.route-end { right: 7%; top: 12%; background: var(--white); padding: .75rem 1rem; border-radius: 999px; }
.contact-card { grid-column: 1/3; background: var(--clay); color: white; padding: 1.5rem 2rem; border-radius: 1.3rem; display: grid; grid-template-columns: auto 1fr 1.5fr auto; align-items: center; gap: 1.5rem; }
.contact-card small { text-transform: uppercase; letter-spacing: .12em; font-weight: 800; }
.contact-card a { font-weight: 800; text-decoration: none; overflow-wrap: anywhere; }
.contact-whatsapp { justify-self: end; background: var(--white); color: var(--ink); padding: .7rem 1rem; border-radius: 999px; }

.booking { background: var(--sun); padding: clamp(5rem, 9vw, 8rem) max(1.25rem, calc((100vw - 1280px) / 2)); display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(3rem, 7vw, 7rem); }
.booking-intro > p:not(.eyebrow) { max-width: 28rem; font-size: 1.08rem; }
.booking-note { padding-top: 1rem; border-top: 1px solid rgba(16,37,27,.25); font-size: .88rem !important; }
form { align-self: start; display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; background: var(--white); border-radius: var(--radius); padding: clamp(1.25rem, 4vw, 2.5rem); box-shadow: 0 1.5rem 4rem rgba(23,59,43,.12); }
.field { display: grid; gap: .4rem; }
.field-wide { grid-column: 1/3; }
label { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 850; }
label span { text-transform: none; letter-spacing: 0; font-weight: 500; color: #5d685f; }
input, select, textarea { width: 100%; border: 1px solid rgba(16,37,27,.24); border-radius: .75rem; background: white; color: var(--ink); padding: .9rem 1rem; min-height: 3.25rem; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(44,106,72,.22); border-color: var(--leaf); }
.button-submit { width: 100%; background: var(--pine); color: white; margin-top: .3rem; }
.form-status { margin: 0; min-height: 1.5rem; color: var(--leaf); font-weight: 750; font-size: .9rem; }

footer { background: var(--pine-2); color: white; padding: 3rem max(1.25rem, calc((100vw - 1280px) / 2)); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2rem; }
.footer-brand { display: grid; grid-template-columns: auto 1fr; gap: 0 .8rem; align-items: center; }
.footer-brand > span { grid-row: 1/3; font-size: 2rem; }
.footer-brand strong { font-size: 1.15rem; }
.footer-brand small { color: rgba(255,255,255,.6); }
.footer-links { display: flex; gap: 1.5rem; }
footer > p { grid-column: 1/3; margin: 2rem 0 0; color: rgba(255,255,255,.55); font-size: .8rem; }
.mobile-actions { display: none; }

@media (max-width: 900px) {
  nav { display: none; }
  .hero { min-height: auto; grid-template-columns: 1fr; padding-top: 3rem; }
  .hero-copy { max-width: 42rem; }
  .hero-visual { justify-self: stretch; width: 100%; max-height: 42rem; }
  .hero-visual > img { aspect-ratio: 5/4; }
  .hero-badge { right: 1rem; bottom: 2rem; width: 6.5rem; height: 6.5rem; }
  .quick-info { grid-template-columns: 1fr; }
  .quick-info article { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); }
  .quick-info article:last-child { border-bottom: 0; }
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto 25rem 16rem; }
  .gallery-title { grid-column: 1/3; }
  .photo-tall { grid-column: 1; grid-row: 2; }
  .photo:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  .photo-wide { grid-column: 1/3; grid-row: 3; }
  .visit { grid-template-columns: 1fr; }
  .route-card { grid-column: 1; min-height: 23rem; }
  .contact-card { grid-column: 1; grid-template-columns: 1fr; gap: .7rem; }
  .contact-whatsapp { justify-self: start; margin-top: .5rem; }
  .booking { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  body { padding-bottom: 4.4rem; }
  .site-header { height: 68px; padding: 0 1rem; }
  .brand-logo { height: 4.2rem; }
  .header-cta { display: none; }
  .hero { min-height: auto; padding: 3rem 1.15rem 4rem; gap: 2.5rem; }
  h1 { font-size: clamp(3.4rem, 17vw, 5.3rem); }
  .hero-lead { margin: 1.5rem 0; }
  .hero-actions { display: grid; }
  .hero-visual { border-radius: 44% 44% 1.2rem 1.2rem; box-shadow: .65rem .65rem 0 var(--sun); }
  .hero-visual > img { aspect-ratio: 4/5; }
  .hero-note { width: 10.5rem; padding: .8rem; }
  .hero-badge { right: .5rem; bottom: 2.3rem; width: 5.7rem; height: 5.7rem; font-size: .58rem; }
  .quick-info { padding: .8rem 1.15rem; }
  .quick-info article { padding: 1rem 0; }
  .experience { grid-template-columns: 1fr; padding: 5rem 1.15rem; }
  .experience-copy { padding: 0; }
  .feature-card { margin-top: .7rem; min-height: 17rem; }
  .feature-card-green { transform: rotate(1deg); }
  .gallery { padding: 4.5rem 1.15rem; grid-template-columns: 1fr; grid-template-rows: auto repeat(3, 23rem); }
  .gallery-title, .photo-tall, .photo:nth-of-type(2), .photo-wide { grid-column: 1; grid-row: auto; }
  .gallery-title { padding-right: 0; }
  .visit { padding: 5rem 1.15rem; }
  .route-card { min-height: 21rem; }
  .route-end { max-width: 10rem; border-radius: 1rem; }
  .contact-card { padding: 1.4rem; }
  .booking { padding: 5rem 1.15rem; }
  form { grid-template-columns: 1fr; }
  .field-wide { grid-column: 1; }
  footer { grid-template-columns: 1fr; padding: 3rem 1.15rem; }
  .footer-links { flex-wrap: wrap; gap: 1rem 1.4rem; }
  footer > p { grid-column: 1; }
  .mobile-actions { position: fixed; z-index: 50; display: grid; grid-template-columns: 1fr 1fr; left: .65rem; right: .65rem; bottom: .65rem; overflow: hidden; border-radius: 999px; background: var(--pine); box-shadow: 0 .7rem 2rem rgba(0,0,0,.28); }
  .mobile-actions a { padding: .9rem; text-align: center; text-decoration: none; color: white; font-weight: 850; }
  .mobile-actions a:last-child { background: var(--lime); color: var(--pine-2); }
}

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