/* Spatial direction: the real flyer and photographs form a small landscape.
   Depth, shadows and gradients are intentional: the client requested the 3D identity. */
:root {
  --paper: #f5f7ee;
  --ink: #173f2c;
  --green: #155638;
  --dark: #083927;
  --accent: #f4d34b;
  --surface: #e7eedc;
  --field: #fcfdf7;
  --muted: #36513d;
  --radius: 22px;
  --shadow-paper: 0 6px 0 #d5dfc5, 0 18px 40px #173e2412;
}
body { background: var(--paper); }
::selection { background: #d5e58c; color: var(--ink); }
.header { min-height: 100px; box-shadow: 0 5px 24px #102e1810; }
.brand-logo { width: 124px; height: 88px; }
.button { border-radius: 999px; background: linear-gradient(150deg, #267346, #115235); box-shadow: 0 4px 0 #073d28, 0 12px 24px #14382318; transition: transform 150ms var(--ease-out), background-color 120ms; }
.button:hover { background: #226c40; transform: translateY(-2px); }
.button:active { transform: translateY(3px); }
.sun-button, .restaurant .meal-note .button { background: linear-gradient(150deg, #ffe681, #f0ce32); color: var(--ink); box-shadow: 0 4px 0 #b09220, 0 12px 24px #071f2630; }
.sun-button:hover, .restaurant .meal-note .button:hover { background: #ffe78b; color: var(--ink); }
.hero-nature { position: relative; isolation: isolate; background: radial-gradient(ellipse at 82% 15%, #396f39 0, transparent 56%), linear-gradient(125deg, #073529, #12492f 70%, #315e33); color: #f7fae9; }
.hero-nature-inner { position: relative; z-index: 2; grid-template-columns: 1fr 1.05fr; min-height: 690px; padding-top: 34px; padding-bottom: 32px; gap: 48px; }
.hero-nature-copy { position: relative; z-index: 3; }
.hero-nature h1 { font-size: clamp(54px, 5.3vw, 77px); line-height: 1.06; letter-spacing: -.045em; text-wrap: initial; }
.hero-nature-copy > p { color: #e2ead4; max-width: 40ch; margin-top: 28px; }
.hero-actions { gap: 20px; }
.social-links { gap: 14px; margin-top: 26px; }
.social-links a { padding: 9px 15px; background: #ffffff0d; border-radius: 999px; box-shadow: inset 0 1px 0 #ffffff20; }
.social-links a:hover { background: #ffffff1c; text-decoration: none; }
.nature-stage { height: 620px; padding: 0; perspective: 1200px; isolation: isolate; }
.hero-landscape { position: absolute; width: 240px; height: 380px; top: 165px; left: 2px; z-index: 2; perspective: 1000px; }
.landscape-surface { position: relative; height: 100%; padding: 7px; background: #e5ebcd; border-radius: 20px; transform: rotateZ(-10deg) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); box-shadow: 6px 8px 0 #718861, 0 24px 46px #021d2477; transition: transform 240ms var(--ease-out); overflow: hidden; }
.hero-landscape img { height: 100%; border-radius: 13px; object-position: center 68%; animation: none; }
.hero-landscape figcaption { position: absolute; left: 22px; right: 18px; bottom: 24px; padding: 0; color: white; font: 23px/1.25 var(--serif); z-index: 2; }
.landscape-surface::after { content: ''; position: absolute; inset: 60% 7px 7px; border-radius: 0 0 13px 13px; background: linear-gradient(transparent, #092d20e8); pointer-events: none; }
.flyer-tilt { position: absolute; top: 6px; right: 15px; bottom: auto; width: 320px; z-index: 3; perspective: 1400px; border-radius: 20px; }
.flyer-surface { position: relative; padding: 8px; border-radius: 20px; background: #edf1d9; transform-style: preserve-3d; transform: rotateZ(4deg) rotateX(var(--tilt-x, 0deg)) rotateY(calc(-10deg + var(--tilt-y, 0deg))); box-shadow: 6px 8px 0 #c7d59d, 12px 15px 0 #748c5b, 27px 32px 48px #001c236e; transition: transform 240ms var(--ease-out); }
.flyer-surface > img { border-radius: 13px; backface-visibility: hidden; }
.flyer-open { position: absolute; bottom: 20px; left: 18px; right: 18px; min-height: 44px; padding: 12px 16px; background: #f4d44d; border-radius: 10px; box-shadow: 0 4px 0 #ae9126; transform: translateZ(24px); font-size: 14px; }
.flyer-open > span { font-size: 22px; }
.scene-seal { position: absolute; width: 138px; height: 138px; bottom: 8px; left: 52px; z-index: 4; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; background: linear-gradient(140deg, #f0f2c9, #c4df73); color: #244c2e; box-shadow: 4px 7px 0 #78973f, 0 18px 35px #04281d45, inset 0 0 0 6px #e8efbf; transform: rotate(-8deg); pointer-events: none; }
.scene-seal svg { width: 42px; height: 42px; }
.scene-seal span { text-align: center; font: 28px/1.2 var(--serif); }
.scene-seal small { display: block; font: 14px/1.5 var(--sans); }
.scene-sun { position: absolute; z-index: -1; width: 480px; height: 480px; top: -80px; right: -40px; border-radius: 50%; background: radial-gradient(circle, #dbdf7233, #b4c25712 60%, transparent 70%); }
.scene-mountains { position: absolute; bottom: 0; width: 100%; height: 53%; z-index: -1; opacity: .58; pointer-events: none; }
.scene-leaf { position: absolute; width: 118px; height: 56px; border-radius: 4% 96% 4% 96%; background: linear-gradient(145deg, #b9da64, #58973b 45%, #204f31); box-shadow: inset 0 2px 3px #def09066, 8px 14px 20px #062b2244; pointer-events: none; z-index: 1; }
.scene-leaf::after { content: ''; position: absolute; left: 12%; right: 8%; top: 50%; height: 2px; background: #cde89355; transform: rotate(25deg); }
.leaf-a { left: -48px; top: 38px; rotate: 16deg; }
.leaf-b { right: -42px; top: 60px; rotate: 115deg; width: 145px; height: 70px; }
.leaf-c { bottom: 24px; left: -35px; rotate: -25deg; width: 150px; height: 74px; }
.hero-bottom { position: relative; z-index: 3; padding-bottom: 24px; padding-right: 200px; color: #dde8cb; }
#motion-toggle { background: #ffffff0c; border-radius: 999px; padding: 10px 14px; }
.section { padding-block: 96px; }
.section-heading { align-items: center; }
.section-heading p { color: var(--muted); }
.section-heading h2 { letter-spacing: -.045em; }
.filter { border-radius: 999px; background: #e6ecd9; }
.filter.active { box-shadow: 0 3px 0 #0b3c28; }
.experience-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.experience-card { padding: 12px 12px 24px; background: var(--field); border-radius: var(--radius); box-shadow: var(--shadow-paper); perspective: 1100px; }
.experience-card:first-child { grid-column: span 2; }
.card-image { height: 280px; border-radius: 14px; transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform 240ms var(--ease-out); box-shadow: 0 7px 16px #12382116; }
.card-image img { object-position: center 65%; }
.card-image img[src*="photo-3"] { object-position: center 78%; }
.card-image img[src*="catarata-facebook"] { object-position: center 25%; }
.card-image img[src*="canones-facebook"] { object-position: center 45%; }
.experience-card:hover .card-image img { transform: none; }
.card-heading, .experience-card > p, .card-actions { margin-inline: 12px; }
.card-heading { display: block; }
.card-heading h3 { font-size: 28px; }
.card-price { display: inline-block; margin-top: 8px; color: #326b37; }
.card-play { border-radius: 999px; background: #eaf0dc; }
.card-play:hover { background: #dce8c5; }
.secondary-video { font-size: 14px; }
.delegations { background: linear-gradient(125deg, #124e34, #236943); color: #f7fae9; position: relative; }
.delegations .section-heading p { color: inherit; }
.group-pass { position: relative; padding: 38px; border-radius: 24px; box-shadow: 8px 9px 0 #0a3c2b, 0 24px 40px #002b2244; transform: rotate(2deg); background: #f7f9ed; color: var(--ink); }
.group-pass h3 { max-width: 16ch; font-size: 28px; }
.group-rates { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.group-rates td { padding: 18px 10px; font-size: 19px; vertical-align: middle; }
.group-rates td:last-child { font: 42px/1.1 var(--serif); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.group-rates tr:nth-child(2) td { background: #e3edcf; }
.group-rates tr:nth-child(2) td:first-child { border-radius: 12px 0 0 12px; }
.group-rates tr:nth-child(2) td:last-child { border-radius: 0 12px 12px 0; }
.group-pass .pass-contact { padding: 18px; margin-inline: -12px; border-radius: 12px; background: #e7edd9; }
.essence { position: relative; background: #e7efda; }
.essence-image { padding: 8px; background: #faffee; border-radius: 28px 28px 100px 28px; box-shadow: 8px 10px 0 #bfd1a2, 0 22px 40px #12382418; transform: rotate(-2deg); }
.essence-image img { border-radius: 20px 20px 92px 20px; height: 520px; }
.restaurant { position: relative; background: radial-gradient(ellipse at 90% 25%, #346c3d44, transparent 60%), #0a392a; color: #f4f8e8; }
.meal-note { background: #1a5037; border-radius: 20px; box-shadow: 0 6px 0 #052d21; }
.menu-sheet { position: relative; border-radius: 12px 28px 28px 12px; box-shadow: -6px 6px 0 #c7d1ac, -12px 12px 0 #6e8660, 0 25px 50px #001c2444; background: #f9fbee; transform: rotate(1.5deg); }
.menu-sheet h3 { font-size: 28px; }
.dish-list li { font-size: 19px; }
.dish-list li:nth-child(even) { padding-left: 14px; background: #eef2e4; border-radius: 9px; margin-left: -14px; margin-right: -14px; }
.dish-list small { font-size: 14px; }
.stay-grid { gap: 28px; }
.stay-item { padding: 34px; border-radius: 24px; background: linear-gradient(145deg, #edf4d9, #dbe8c0); box-shadow: 0 6px 0 #c8d6af, 0 18px 38px #173b2512; }
.stay-item:nth-child(2) { background: #155337; color: #f5fae8; box-shadow: 0 6px 0 #073c2a, 0 18px 38px #173b251a; }
.stay-item:nth-child(2) .text-button { color: #e2edb4; }
.gallery { padding-top: 24px; }
.gallery-grid { gap: 24px; }
.gallery-photo { padding: 8px; border-radius: 18px; background: var(--field); box-shadow: 0 6px 0 #cedcba, 0 18px 30px #173b2520; transform: rotate(-2deg); transition: transform 220ms var(--ease-out); }
.gallery-photo:nth-child(even) { transform: rotate(2deg); margin-top: 24px; }
.gallery-photo img { height: 320px; border-radius: 12px; }
.gallery-photo span, .gallery-photo:nth-child(even) span { background: none; color: var(--ink); padding: 16px 6px; min-height: 68px; }
.gallery-photo:hover { transform: translateY(-6px) rotate(0); }
.testimonials { background: #e8eedc; }
.testimonial-slip { border-radius: 22px; box-shadow: 0 7px 0 #ccd9b7, 0 22px 32px #21492918; transform: rotate(-1.5deg); }
.testimonial-slip:nth-child(2) { transform: rotate(1.5deg); }
.testimonial-slip:nth-child(3) { transform: rotate(-1deg); }
.testimonial-video { border-radius: 14px; }
.video-platform, .video-caption { border-radius: 999px; }
.testimonial-slip:nth-child(3) .testimonial-video { background: radial-gradient(circle at 50% 50%, #ffe788, #eaca3c); color: var(--ink); }
.testimonial-slip:nth-child(3) .video-play { background: #174a32; color: #f7fae9; }
.video-play { box-shadow: 0 4px 0 #a48e2d, 0 12px 20px #031e2524; }
.visit { background: linear-gradient(150deg, #e7eedb, #f4f7e9); }
.office-sheet { border-radius: 24px; box-shadow: var(--shadow-paper); }
.bus-routes { background: #e4edcf; border-radius: 16px; }
.fundo-route { padding: 32px 12px; }
.map-layout { display: grid; grid-template-columns: .65fr 1.35fr; gap: 52px; align-items: center; margin-top: 52px; }
.map-intro h3 { font-size: 28px; }
.map-intro p { margin-top: 22px; }
.map-intro .text-link { margin-top: 18px; }
.google-map-frame { padding: 10px; background: var(--field); border-radius: 24px; box-shadow: 8px 8px 0 #c7d7ad, 0 22px 35px #173b251a; overflow: hidden; }
.google-map-frame iframe { display: block; width: 100%; height: 420px; border-radius: 16px; background: #e5eadc; }
.google-map-frame p { max-width: none; padding: 14px 14px 8px; font-size: 14px; }
.transport-note { padding: 28px 32px; border-radius: 22px; background: #dce8c8; }
.planning-photo { border-radius: 18px; box-shadow: 5px 6px 0 #d1dfbd; }
.plan-form { border-radius: 24px; background: #e8eedc; box-shadow: 0 7px 0 #cbdab4, 0 22px 40px #173b2515; }
.plan-form :is(input, select, textarea) { border-radius: 10px; border-color: #a4b895; }
.faq details { border-radius: 16px; background: #e6edd9; box-shadow: 0 3px 0 #d5dfc6; }
footer { background: linear-gradient(130deg, #073628, #145335); }
.footer-brand { border-radius: 18px; }
.floating-wa { color: #f7fae9; background: linear-gradient(145deg, #337947, #125136); box-shadow: 0 4px 0 #083d2b, 0 14px 25px #0a352633; }
.floating-wa:hover { color: var(--ink); }
dialog { border-radius: 18px; box-shadow: 0 24px 90px #0008; }
.dialog-close { border-radius: 50%; box-shadow: 0 4px 12px #06252325; }
@media (prefers-reduced-motion: no-preference) {
  .nature-stage { animation: stage-enter 800ms var(--ease-out) both; }
  .hero-nature-copy h1 { animation: copy-enter 650ms var(--ease-out) both; }
  .hero-nature-copy > p { animation: copy-enter 650ms 80ms var(--ease-out) both; }
  .hero-actions { animation: copy-enter 650ms 140ms var(--ease-out) both; }
  .scene-leaf { animation: leaf-drift 11s ease-in-out infinite; }
  .leaf-b { animation-delay: -4s; }
  .leaf-c { animation-delay: -7s; }
  .reveal.is-visible { animation: section-enter 600ms var(--ease-out) both; }
  .experience-card.reveal.is-visible { animation: card-enter 500ms var(--ease-out) both; }
  .group-pass.reveal.is-visible { animation: ticket-enter 650ms var(--ease-out) both; }
  .essence-image.reveal.is-visible, .testimonial-slip.reveal.is-visible, .gallery-photo.reveal.is-visible { animation: image-enter 650ms var(--ease-out) both; }
  .nav.open, dialog[open] { animation: panel-enter 220ms var(--ease-out) both; }
  .faq details[open] p { animation: answer-enter 200ms var(--ease-out) both; }
}
@keyframes stage-enter { from { opacity: .1; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes copy-enter { from { opacity: .1; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes section-enter { from { opacity: .15; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes card-enter { from { opacity: .2; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes ticket-enter { from { opacity: .1; translate: 0 25px; rotate: -3deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes image-enter { from { opacity: .2; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes panel-enter { from { opacity: .2; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
@keyframes answer-enter { from { opacity: .2; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes leaf-drift { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(4px, -10px) rotate(5deg); } }
.motion-paused .reveal, .motion-paused .nature-stage, .motion-paused .hero-nature-copy h1, .motion-paused .hero-nature-copy > p, .motion-paused .hero-actions { animation: none; }
.motion-paused .scene-leaf, .hero-out-of-view .scene-leaf { animation-play-state: paused; }
.motion-paused [data-tilt] { --tilt-x: 0deg !important; --tilt-y: 0deg !important; transition: none; }
@media (max-width: 1180px) {
  .hero-nature-inner { gap: 28px; }
  .hero-nature h1 { font-size: 62px; }
  .nature-stage { height: 590px; }
  .flyer-tilt { width: 285px; right: 6px; top: 14px; }
  .hero-landscape { width: 205px; height: 335px; top: 170px; left: 0; }
  .scene-seal { width: 120px; height: 120px; left: 20px; bottom: 12px; }
  .experience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .experience-card:first-child { grid-column: auto; }
}
@media (max-width: 850px) {
  .header { min-height: 88px; }
  .brand-logo { width: 100px; height: 74px; }
  .hero-nature-inner { min-height: 615px; gap: 20px; grid-template-columns: 1fr 1fr; }
  .hero-nature h1 { font-size: 47px; }
  .nature-stage { height: 535px; }
  .flyer-tilt { width: 240px; right: 0; top: 24px; }
  .hero-landscape { width: 175px; height: 290px; top: 153px; left: 0; }
  .scene-seal { width: 105px; height: 105px; left: 8px; bottom: 16px; }
  .scene-seal span { font-size: 22px; }
  .scene-seal small { font-size: 13px; }
  .scene-seal svg { width: 32px; height: 32px; }
  .hero-landscape figcaption { font-size: 20px; left: 18px; bottom: 20px; }
  .hero-actions { gap: 16px; }
  .hero-nature-copy > p { font-size: 16px; }
  .social-links { gap: 10px; }
  .social-links a { padding: 7px 12px; font-size: 14px; }
  .section { padding-block: 76px; }
  .group-pass, .menu-sheet { padding: 28px; }
  .group-pass h3, .menu-sheet h3, .map-intro h3 { font-size: 28px; }
  .group-rates td:last-child { font-size: 34px; }
  .group-pass { transform: rotate(1deg); }
  .card-image { height: 250px; }
  .essence-image img { height: 470px; }
  .gallery-photo img { height: 300px; }
  .testimonial-slip { padding: 16px; }
  .map-layout { grid-template-columns: 1fr; gap: 28px; }
  .map-intro { max-width: 48ch; }
  .transport-note { padding: 26px; }
  .floating-wa span { display: none; }
  .floating-wa { width: 52px; height: 52px; padding: 14px; }
}
@media (max-width: 640px) {
  .header { min-height: 84px; }
  .brand-logo { width: 100px; height: 72px; }
  .hero-nature-inner { min-height: 0; display: flex; gap: 28px; padding-top: 34px; padding-bottom: 24px; }
  .hero-nature h1 { font-size: clamp(40px, 10.8vw, 60px); line-height: 1.1; }
  .hero-nature-copy > p { margin-top: 22px; font-size: 16px; }
  .hero-actions { flex-direction: row; align-items: center; gap: 16px; }
  .hero-actions .button { font-size: 15px; }
  .hero-actions .text-button { font-size: 14px; }
  .social-links { margin-top: 22px; }
  .nature-stage { height: 520px; width: 100%; max-width: 410px; align-self: center; margin-right: 0; }
  .flyer-tilt { width: 258px; right: 8px; top: 12px; }
  .flyer-surface { padding: 6px; border-radius: 16px; }
  .flyer-surface > img { border-radius: 11px; }
  .flyer-open { font-size: 13px; bottom: 15px; left: 12px; right: 12px; padding: 9px 12px; }
  .hero-landscape { width: 175px; height: 290px; top: 134px; left: 5px; }
  .hero-landscape figcaption { min-height: 0; padding: 0; font-size: 18px; bottom: 22px; }
  .scene-seal { width: 100px; height: 100px; left: 16px; bottom: 12px; }
  .scene-seal small { font-size: 13px; }
  .leaf-a { display: none; }
  .leaf-b { width: 95px; height: 45px; right: -40px; top: 52%; }
  .leaf-c { width: 110px; height: 52px; bottom: 32px; }
  .scene-mountains { height: 35%; }
  .hero-bottom { padding-right: 22px; gap: 6px; }
  .section { padding-block: 62px; }
  .experience-grid { grid-template-columns: 1fr; gap: 28px; }
  .experience-card { padding: 10px 10px 22px; }
  .card-image { height: 285px; }
  .card-heading { display: flex; }
  .card-price { margin-top: 0; }
  .card-heading h3 { font-size: 27px; }
  .group-pass { padding: 30px 24px; transform: rotate(0); }
  .group-rates td:last-child { font-size: 36px; }
  .essence-image { border-radius: 24px 24px 74px 24px; }
  .essence-image img { height: 380px; border-radius: 18px 18px 66px 18px; }
  .menu-sheet { padding: 32px 26px; transform: rotate(0); }
  .dish-list li { font-size: 18px; }
  .stay-item { padding: 28px; }
  .gallery { padding-top: 12px; }
  .gallery-grid { gap: 18px; }
  .gallery-photo { padding: 6px; }
  .gallery-photo img { height: 200px; }
  .gallery-photo span { font-size: 14px; min-height: 82px; padding-inline: 4px; }
  .testimonial-slip { padding: 24px; transform: none !important; }
  .testimonial-strips { gap: 28px; }
  .office-sheet { padding: 28px 24px; }
  .fundo-route { padding: 0; }
  .google-map-frame iframe { height: 350px; }
  .google-map-frame p { padding-inline: 10px; }
  .map-layout { margin-top: 36px; }
  .transport-note { margin-top: 36px; padding: 26px; }
  .plan-form { padding: 28px 22px; }
  .faq { padding-top: 12px; }
}
@media (max-width: 365px) {
  .nature-stage { height: 470px; }
  .flyer-tilt { width: 232px; right: 2px; }
  .hero-landscape { width: 155px; height: 260px; left: 1px; }
  .scene-seal { width: 92px; height: 92px; left: 12px; bottom: 10px; }
  .scene-seal span { font-size: 20px; }
  .scene-seal small { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scene-leaf, .reveal, .nature-stage, .hero-nature-copy h1, .hero-nature-copy > p, .hero-actions, .nav, dialog, .faq p { animation: none !important; }
  [data-tilt] { --tilt-x: 0deg !important; --tilt-y: 0deg !important; transition: none !important; }
  .button:hover, .button:active, .gallery-photo:hover, .testimonial-video:hover .video-play { transform: none; }
  .button, .gallery-photo, .video-play, .menu-toggle span, .faq summary span { transition: none; }
  #motion-toggle { display: none; }
}
@media (hover: none), (pointer: coarse) {
  .card-image { transform: none; }
  .button:hover { transform: none; }
  .gallery-photo:hover { transform: none; }
}