:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --primary: 130 79% 24%;
  --primary-foreground: 0 0% 98%;
  --secondary: 220 75% 44%;
  --secondary-foreground: 0 0% 98%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --accent: 45 100% 65%;
  --accent-foreground: 240 10% 3.9%;
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 130 79% 24%;
  --radius: .5rem;
  --highlight: 347 77% 52%;
  --highlight-foreground: 0 0% 98%;
  --warm: 35 100% 63%;
  --warm-foreground: 240 10% 3.9%
}

.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --card: 240 10% 7%;
  --card-foreground: 0 0% 98%;
  --primary: 130 65% 35%;
  --primary-foreground: 0 0% 98%;
  --secondary: 220 70% 55%;
  --secondary-foreground: 0 0% 98%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --accent: 45 95% 70%;
  --accent-foreground: 240 10% 3.9%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 130 65% 35%;
  --highlight: 347 70% 60%;
  --highlight-foreground: 0 0% 98%;
  --warm: 35 95% 68%;
  --warm-foreground: 240 10% 3.9%
}

* {
  box-sizing: border-box;
  border-color: hsl(var(--border))
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  font-family: "Iosevka Charon", "Outfit", "Plus Jakarta Sans", sans-serif;
  overflow-x: clip;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-size: 16px;
  line-height: 1.5
}

a {
  color: inherit;
  text-decoration: none
}

img {
  display: block;
  max-width: 100%
}

button,
input,
textarea,
select {
  font: inherit
}

.site-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column
}

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem
}

.container-sm {
  width: 100%;
  max-width: 896px;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem
}

.header {
  position: sticky;
  top: 0;
  z-index: 40;
  width: 100%;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--background)/.95);
  backdrop-filter: blur(10px)
}

.header-inner {
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: 1.25rem
}

.logo-box {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .75rem;
  background: hsl(var(--primary)/.1);
  display: flex;
  align-items: center;
  justify-content: center
}

.logo-box svg {
  width: 1.5rem;
  height: 1.5rem;
  color: hsl(var(--primary))
}

.nav {
  display: none;
  align-items: center;
  gap: .25rem
}

.nav-link {
  padding: .5rem 1rem;
  border-radius: .5rem;
  font-size: .875rem;
  font-weight: 500;
  transition: all .2s
}

.nav-link.active {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground))
}

.nav-link:not(.active):hover {
  background: hsl(var(--muted))
}

.header-actions {
  display: flex;
  align-items: center;
  gap: .5rem
}

.icon-btn {
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  background: transparent;
  color: hsl(var(--foreground));
  border-radius: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s
}

.icon-btn:hover {
  background: hsl(var(--muted))
}

.mobile-nav {
  display: none;
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  overflow: hidden
}

.mobile-nav.open {
  display: block;
  animation: menuDrop .2s ease
}

.mobile-nav nav {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.mobile-nav .nav-link {
  padding: .75rem 1rem
}

@keyframes menuDrop {
  from {
    opacity: 0;
    max-height: 0
  }

  to {
    opacity: 1;
    max-height: 500px
  }
}

main {
  flex: 1
}

.section {
  padding: 5rem 0
}

.section-muted {
  background: hsl(var(--muted)/.3)
}

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden
}

.hero-bg {
  position: absolute;
  inset: 0
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.hero-bg:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, .4), rgba(0, 0, 0, .6))
}

.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  color: white
}

.animate-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease
}

.animate-in.visible {
  opacity: 1;
  transform: translateY(0)
}

.hero .animate-in {
  animation: heroIn .8s ease forwards
}

@keyframes heroIn {
  from {
    opacity: 0;
    transform: translateY(30px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
  margin: 0;
  color: inherit
}

p {
  margin: 0
}

.h1-hero {
  font-size: 3rem;
  line-height: 1.05;
  font-weight: 700;
  margin-bottom: 1.5rem;
  letter-spacing: -.02em
}

.page-title {
  font-size: 2.25rem;
  line-height: 1.08;
  font-weight: 700;
  margin-bottom: 1.5rem;
  letter-spacing: -.02em
}

.section-title {
  font-size: 1.875rem;
  line-height: 1.15;
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: -.02em
}

.lead {
  font-size: 1.25rem;
  color: hsl(var(--muted-foreground));
  max-width: 48rem;
  margin: 0 auto
}

.hero-lead {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  color: rgba(255, 255, 255, .9);
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto
}

.section-head {
  text-align: center;
  margin-bottom: 4rem
}

.section-head-sm {
  text-align: center;
  margin-bottom: 3rem
}

.text-muted {
  color: hsl(var(--muted-foreground))
}

.text-lg {
  font-size: 1.125rem
}

.text-xl {
  font-size: 1.25rem
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  white-space: nowrap;
  border-radius: .5rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .2s;
  min-height: 2.5rem;
  padding: .5rem 1rem;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground))
}

.btn:hover {
  filter: brightness(.95)
}

.btn:active {
  transform: scale(.98)
}

.btn-lg {
  font-size: 1.125rem;
  padding: 1.5rem 2rem
}

.btn-outline {
  background: transparent;
  color: hsl(var(--foreground));
  border-color: hsl(var(--border))
}

.btn-outline:hover {
  background: hsl(var(--muted));
  filter: none
}

.btn-ghost {
  background: transparent;
  color: hsl(var(--foreground));
  border-color: transparent
}

.btn-ghost:hover {
  background: hsl(var(--muted));
  filter: none
}

.btn-glass {
  background: rgba(255, 255, 255, .2);
  backdrop-filter: blur(8px);
  color: white;
  border-color: rgba(255, 255, 255, .3)
}

.btn-glass:hover {
  background: rgba(255, 255, 255, .3);
  filter: none
}

.btn-white {
  background: white;
  color: hsl(var(--primary))
}

.btn-white:hover {
  background: rgba(255, 255, 255, .9);
  filter: none
}

.btn-outline-white {
  background: transparent;
  color: white;
  border: 2px solid white
}

.btn-outline-white:hover {
  background: rgba(255, 255, 255, .1);
  filter: none
}

.btn-whatsapp {
  width: 100%;
  background: #25D366;
  color: white
}

.hero-actions,
.cta-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center
}

.hero-actions {
  margin-bottom: 3rem
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  font-size: .875rem
}

.trust-item {
  display: flex;
  align-items: center;
  gap: .5rem
}

.trust-item svg {
  width: 1.25rem;
  height: 1.25rem;
  color: hsl(var(--accent))
}

.grid {
  display: grid;
  gap: 1.5rem
}

.grid-2,
.grid-3,
.grid-4,
.grid-5 {
  grid-template-columns: 1fr
}

.gap-8 {
  gap: 2rem
}

.service-card,
.package-card,
.info-card,
.value-card,
.step-box,
.custom-step,
.popular-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  transition: all .2s
}

.service-card:hover,
.package-card:hover,
.popular-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
  transform: translateY(-.25rem)
}

.service-card {
  height: 100%;
  padding: 2rem;
  display: flex;
  flex-direction: column
}

.icon-tile {
  width: 4rem;
  height: 4rem;
  border-radius: .75rem;
  background: hsl(var(--primary)/.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: background .2s
}

.service-card:hover .icon-tile {
  background: hsl(var(--primary)/.2)
}

.icon-tile svg {
  width: 2rem;
  height: 2rem;
  color: hsl(var(--primary))
}

.service-card h3,
.package-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: .75rem
}

.service-card p {
  margin-bottom: 1.5rem;
  flex: 1;
  color: hsl(var(--muted-foreground))
}

.service-card .btn {
  width: max-content
}

.destination-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
  transition: all .3s
}

.destination-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1)
}

.destination-img {
  aspect-ratio: 4/3;
  overflow: hidden
}

.destination-img img,
.package-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s
}

.destination-card:hover img,
.package-card:hover img,
.gallery-item:hover img {
  transform: scale(1.1)
}

.destination-card:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .4), transparent)
}

.destination-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem;
  color: white;
  z-index: 1
}

.destination-content h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: .5rem
}

.destination-content p {
  color: rgba(255, 255, 255, .9);
  margin-bottom: 1rem
}

.benefit-card {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem;
  border-radius: 1rem;
  background: hsl(var(--card));
  transition: all .2s
}

.benefit-card:hover {
  transform: translateY(-.25rem)
}

.benefit-card.large {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1)
}

.benefit-icon {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: .75rem;
  background: hsl(var(--primary)/.1);
  display: flex;
  align-items: center;
  justify-content: center
}

.large .benefit-icon {
  background: hsl(var(--primary-foreground)/.2)
}

.benefit-icon svg {
  width: 1.75rem;
  height: 1.75rem;
  color: hsl(var(--primary))
}

.large .benefit-icon svg {
  color: hsl(var(--primary-foreground))
}

.benefit-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: .5rem
}

.benefit-card p {
  color: hsl(var(--muted-foreground))
}

.benefit-card.large p {
  color: hsl(var(--primary-foreground)/.9)
}

.process-step {
  position: relative;
  text-align: center
}

.process-icon-wrap {
  position: relative;
  margin: 0 auto 1rem;
  width: 5rem
}

.process-icon {
  width: 5rem;
  height: 5rem;
  border-radius: 1rem;
  background: hsl(var(--primary)/.1);
  display: flex;
  align-items: center;
  justify-content: center
}

.process-icon svg {
  width: 2.5rem;
  height: 2.5rem;
  color: hsl(var(--primary))
}

.step-number {
  position: absolute;
  top: -.5rem;
  right: -.5rem;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .875rem;
  font-weight: 700
}

.process-step h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: .5rem
}

.process-step p {
  font-size: .875rem;
  color: hsl(var(--muted-foreground))
}

.gallery {
  columns: 1;
  column-gap: 1.5rem
}

.gallery-item {
  break-inside: avoid;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  cursor: pointer
}

.gallery-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform .3s
}

.gallery-item:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent, transparent);
  opacity: 0;
  transition: opacity .3s
}

.gallery-item:hover:after {
  opacity: 1
}

.colored-section {
  padding: 5rem 0;
  text-align: center
}

.bg-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground))
}

.bg-secondary {
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground))
}

.bg-accent {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground))
}

.bg-highlight {
  background: hsl(var(--highlight));
  color: hsl(var(--highlight-foreground))
}

.top-gradient-primary {
  background: linear-gradient(to bottom, hsl(var(--primary)/.1), hsl(var(--background)))
}

.top-gradient-secondary {
  background: linear-gradient(to bottom, hsl(var(--secondary)/.1), hsl(var(--background)))
}

.top-gradient-warm {
  background: linear-gradient(to bottom, hsl(var(--warm)/.1), hsl(var(--background)))
}

.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center
}

.copy-space {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: hsl(var(--muted-foreground))
}

.image-card {
  aspect-ratio: 4/3;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25)
}

.image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.value-card {
  text-align: center;
  border: 0;
  background: transparent
}

.value-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  background: hsl(var(--primary)/.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem
}

.value-icon svg {
  width: 2rem;
  height: 2rem;
  color: hsl(var(--primary))
}

.value-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: .5rem
}

.schedule-box {
  margin-top: 2rem;
  padding: 1.5rem;
  border-radius: 1rem;
  background: hsl(var(--primary)/.1);
  display: flex;
  gap: 1rem
}

.schedule-box svg {
  width: 1.5rem;
  height: 1.5rem;
  color: hsl(var(--primary));
  flex-shrink: 0;
  margin-top: .25rem
}

.package-card {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column
}

.package-img {
  aspect-ratio: 16/10;
  overflow: hidden
}

.package-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column
}

.package-body p {
  color: hsl(var(--muted-foreground));
  margin-bottom: 1rem;
  flex: 1
}

.details {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.5rem;
  font-size: .875rem;
  color: hsl(var(--muted-foreground))
}

.detail {
  display: flex;
  align-items: center;
  gap: .5rem
}

.package-actions {
  display: flex;
  gap: .75rem;
  margin-top: auto
}

.package-actions .btn {
  flex: 1
}

.custom-step {
  padding: 1.5rem;
  border: 0
}

.custom-step .num {
  width: 3rem;
  height: 3rem;
  border-radius: .75rem;
  background: hsl(var(--primary)/.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: hsl(var(--primary));
  font-size: 1.5rem;
  font-weight: 700
}

.popular-card {
  padding: 1.5rem;
  border-radius: .75rem
}

.popular-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: .25rem
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem
}

.faq-item {
  border: 1px solid hsl(var(--border));
  border-radius: .75rem;
  background: hsl(var(--card));
  padding: 0 1.5rem;
  overflow: hidden
}

.faq-q {
  width: 100%;
  padding: 1.5rem 0;
  background: transparent;
  border: 0;
  color: hsl(var(--foreground));
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  font-weight: 600;
  cursor: pointer
}

.faq-q svg {
  transition: transform .2s;
  flex-shrink: 0
}

.faq-item.open .faq-q svg {
  transform: rotate(180deg)
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  color: hsl(var(--muted-foreground));
  transition: max-height .25s ease
}

.faq-item.open .faq-a {
  max-height: 300px;
  padding-bottom: 1.5rem
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem
}

.info-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: .75rem
}

.info-card>svg {
  width: 1.5rem;
  height: 1.5rem;
  color: hsl(var(--primary));
  flex-shrink: 0;
  margin-top: .25rem
}

.info-card h3 {
  font-weight: 600;
  margin-bottom: .5rem
}

.form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem
}

.field {
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.label {
  font-size: .875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .5rem
}

.input,
.textarea,
.select {
  width: 100%;
  height: 2.5rem;
  border: 1px solid hsl(var(--input));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  border-radius: .375rem;
  padding: .5rem .75rem;
  outline: none
}

.textarea {
  height: 5.5rem;
  resize: vertical
}

.input:focus,
.textarea:focus,
.select:focus {
  box-shadow: 0 0 0 2px hsl(var(--ring)/.35)
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem
}

.whatsapp-card {
  padding: 1.5rem;
  border-radius: .75rem;
  background: hsl(var(--primary)/.1)
}

.whatsapp-card h3 {
  font-weight: 600;
  margin-bottom: 1rem;
  display: flex;
  gap: .5rem;
  align-items: center
}

.map-box {
  height: 24rem;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
  background: hsl(var(--muted));
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground))
}

.footer {
  background: hsl(var(--muted)/.3);
  border-top: 1px solid hsl(var(--border))
}

.footer-main {
  padding: 3rem 0
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2rem
}

.footer h3 {
  font-weight: 600;
  margin-bottom: 1rem
}

.footer p,
.footer a,
.footer span {
  font-size: .875rem;
  color: hsl(var(--muted-foreground))
}

.footer a:hover {
  color: hsl(var(--foreground))
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: .5rem
}

.contact-mini {
  display: flex;
  flex-direction: column;
  gap: .75rem
}

.mini-row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .875rem
}

.mini-row svg {
  width: 1rem;
  height: 1rem;
  margin-top: .125rem;
  flex-shrink: 0;
  color: hsl(var(--muted-foreground))
}

.socials {
  display: flex;
  gap: .75rem
}

.social-box {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .5rem;
  background: hsl(var(--muted));
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground))
}

.footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid hsl(var(--border));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem
}

.footer-policies {
  display: flex;
  gap: 1.5rem
}

.dev-credit {
  text-align: center;
  margin-top: 1rem
}

.floating-whatsapp {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 50;
  width: 3.5rem;
  height: 3.5rem;
  background: #25D366;
  color: white;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s;
  animation: floatIn .3s ease 1s both
}

.floating-whatsapp:hover {
  transform: scale(1.1);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1)
}

.floating-whatsapp svg {
  width: 1.75rem;
  height: 1.75rem
}

@keyframes floatIn {
  from {
    opacity: 0;
    transform: scale(0)
  }

  to {
    opacity: 1;
    transform: scale(1)
  }
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, .8);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem
}

.modal-overlay.open {
  display: flex;
  animation: fade .2s
}

.modal {
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-radius: .75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .35);
  padding: 1.5rem;
  position: relative;
  animation: zoomIn .2s
}

.gallery-modal .modal {
  max-width: 896px;
  padding: 0;
  overflow: hidden
}

.gallery-modal img {
  width: 100%;
  height: auto
}

.modal-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  background: transparent;
  border: 0;
  color: hsl(var(--foreground));
  cursor: pointer;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .375rem
}

.modal-close:hover {
  background: hsl(var(--muted))
}

.modal-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: .25rem
}

.modal-desc {
  color: hsl(var(--muted-foreground));
  margin-bottom: 1.5rem
}

.toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 100;
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  padding: .9rem 1rem;
  border-radius: .75rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
  max-width: 360px;
  animation: toastIn .2s ease
}

@keyframes fade {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(.95)
  }

  to {
    opacity: 1;
    transform: scale(1)
  }
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(12px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.mt-8 {
  margin-top: 2rem
}

.mt-12 {
  margin-top: 3rem
}

.mb-4 {
  margin-bottom: 1rem
}

.mb-6 {
  margin-bottom: 1.5rem
}

.mb-8 {
  margin-bottom: 2rem
}

.text-center {
  text-align: center
}

.text-left {
  text-align: left
}

.w-full {
  width: 100%
}

.hidden {
  display: none
}

.white-90 {
  color: rgba(255, 255, 255, .9)
}

@media(min-width:640px) {

  .container,
  .container-sm {
    padding-left: 1.5rem;
    padding-right: 1.5rem
  }

  .brand-text {
    display: inline
  }

  .hero-actions,
  .cta-actions {
    flex-direction: row
  }

  .h1-hero {
    font-size: 3.75rem
  }

  .page-title {
    font-size: 3rem
  }

  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:639px) {
  .brand-text {
    display: none
  }
}

@media(min-width:768px) {
  .nav {
    display: flex
  }

  .mobile-menu-btn {
    display: none
  }

  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .grid-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .section-title {
    font-size: 2.25rem
  }

  .gallery {
    columns: 2
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between
  }

  .benefit-card.large {
    grid-column: span 2
  }

  .hero-lead {
    font-size: 1.5rem
  }
}

@media(min-width:1024px) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem
  }

  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }

  .grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr))
  }

  .two-col,
  .contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .footer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }

  .gallery {
    columns: 3
  }

  .h1-hero {
    font-size: 4.5rem
  }

  .page-title {
    font-size: 3.75rem
  }

  .process-step:not(:last-child):after {
    content: "";
    position: absolute;
    top: 2.5rem;
    left: 100%;
    width: 100%;
    height: 2px;
    background: hsl(var(--border));
    transform: translateX(-50%);
    z-index: -1
  }
}


.logo-image-box {
  background: transparent;
  border-radius: .75rem;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08)
}

.logo-image-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: .15rem
}

.logo-image-box.logo-fallback {
  background: hsl(var(--primary)/.1)
}

.logo-image-box.logo-fallback:before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: hsl(var(--primary)/.85);
  display: block
}

.social-link:hover {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  transform: translateY(-2px)
}

.booking-search-section {
  position: relative;
  margin-top: -3.5rem;
  z-index: 15;
  padding: 0 0 3rem
}

.booking-search-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .16)
}

.booking-search-wrapper {
  width: 100%;
  max-width: 1080px;
  height: 230px;
  margin: 0 auto;
  background: #fff;
  border-radius: .75rem;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, .08)
}

.booking-search-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block
}

.iframe-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem
}

.iframe-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .08)
}

.iframe-card-head {
  padding: 1.5rem;
  border-bottom: 1px solid hsl(var(--border))
}

.iframe-card-head h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: .4rem
}

.travel-iframe {
  width: 100%;
  height: 900px;
  overflow: hidden;
  background: #fff
}

.travel-iframe iframe {
  border: none;
  width: 100%;
  height: 100%;
  display: block
}

.mega-iframe {
  height: 900px
}

@media(min-width:1024px) {
  .iframe-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .nav {
    display: flex
  }

  .mobile-menu-btn {
    display: none
  }
}

@media(max-width:768px) {
  .booking-search-section {
    margin-top: 0;
    padding-top: 2rem
  }

  .booking-search-card {
    padding: 1rem
  }

  .booking-search-wrapper {
    height: 520px;
    margin: 0 auto
  }

  .travel-iframe,
  .mega-iframe {
    height: 720px
  }
}

/* Fuente principal del sitio */
body,
button,
input,
textarea,
select {
  font-family: "Iosevka Charon", "Outfit", "Plus Jakarta Sans", sans-serif;
}

/* Ajustes solicitados */
.logo-only-header {
  border-bottom: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  pointer-events: none
}

.logo-only-header .container {
  max-width: none;
  padding-left: 1.25rem;
  padding-right: 1.25rem
}

.logo-only-header .header-inner {
  height: auto;
  min-height: 0;
  padding: 1rem 0;
  justify-content: flex-start
}

.logo-only-header .brand {
  pointer-events: auto
}

.header-logo {
  width: 6.25rem;
  height: 6.25rem;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible
}

.header-logo img {
  padding: 0;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .35))
}

.hero-bg img,
.hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.hero-video {
  display: block;
  position: absolute;
  inset: 0
}

.hero-bg:after {
  z-index: 1
}

.hero-content {
  z-index: 2
}

.map-box {
  background: transparent;
  color: inherit
}

.map-box iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block
}

.social-box svg {
  width: 1.25rem;
  height: 1.25rem
}

.social-box:hover {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  transform: translateY(-2px)
}

@media(max-width:639px) {
  .header-logo {
    width: 5rem;
    height: 5rem
  }

  .logo-only-header .header-inner {
    padding: .75rem 0
  }

  .logo-only-header .container {
    padding-left: 1rem
  }
}


/* Corrección: conservar el menú pegajoso completo y agrandar solo el logo */
.header .header-inner {
  height: 5.25rem
}

.header .brand {
  gap: .75rem
}

.header .header-logo {
  width: 4.75rem;
  height: 4.75rem;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible
}

.header .header-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .18))
}

.header .header-logo.logo-fallback {
  border-radius: .75rem;
  background: hsl(var(--primary)/.1)
}

@media(max-width:767px) {
  .header .header-inner {
    height: 4.75rem
  }

  .header .header-logo {
    width: 4rem;
    height: 4rem
  }

  .brand-text {
    font-size: 1rem
  }
}

/* Ajuste final: logo grande + menú pegajoso estilo liquid glass */
.header {
  top: .75rem;
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 1.6rem;
  background: linear-gradient(135deg, rgba(255,255,255,.42), rgba(255,255,255,.18));
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    0 18px 45px rgba(15, 23, 42, .16),
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -1px 0 rgba(255,255,255,.22);
  overflow: hidden;
}

.header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.85), transparent 32%),
    radial-gradient(circle at 82% 110%, rgba(255,255,255,.34), transparent 38%);
  opacity: .9;
}

.header::after {
  content: "";
  position: absolute;
  left: 1.2rem;
  right: 1.2rem;
  top: .45rem;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
}

.dark .header {
  border-color: rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(20,24,36,.56), rgba(20,24,36,.28));
  box-shadow:
    0 18px 45px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -1px 0 rgba(255,255,255,.08);
}

.header .container,
.header .header-inner,
.header .mobile-nav {
  position: relative;
  z-index: 1;
}

.header .container {
  max-width: 1180px;
}

.header .header-inner {
  height: 6.6rem;
  padding: .45rem 0;
}

.header .header-logo {
  width: 6.9rem;
  height: 6.9rem;
  flex: 0 0 6.9rem;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.header .header-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
}

.header .nav {
  gap: .35rem;
  padding: .35rem;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}

.header .nav-link {
  border-radius: 999px;
  color: rgba(22, 32, 48, .82);
}

.dark .header .nav-link {
  color: rgba(255,255,255,.86);
}

.header .nav-link.active {
  background: rgba(14, 108, 29, .88);
  color: #fff;
  box-shadow: 0 8px 20px rgba(14,108,29,.24), inset 0 1px 0 rgba(255,255,255,.25);
}

.header .nav-link:not(.active):hover,
.header .icon-btn:hover {
  background: rgba(255,255,255,.34);
}

.header .icon-btn {
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}

.header .mobile-nav {
  border-top: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
}

@media(max-width:1023px) {
  .header {
    width: calc(100% - 1rem);
    top: .5rem;
    border-radius: 1.25rem;
  }
  .header .header-inner {
    height: 5.7rem;
  }
  .header .header-logo {
    width: 5.8rem;
    height: 5.8rem;
    flex-basis: 5.8rem;
  }
}

@media(max-width:639px) {
  .header .header-inner {
    height: 5rem;
  }
  .header .header-logo {
    width: 5.05rem;
    height: 5.05rem;
    flex-basis: 5.05rem;
  }
}

/* Corrección final: quitar franja blanca superior y dejar el menú glass flotando sobre el hero */
.header {
  position: fixed !important;
  top: .75rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 999 !important;
}

.hero {
  margin-top: 0 !important;
}

section,
[id] {
  scroll-margin-top: 8rem;
}

@media(max-width:1023px) {
  .header {
    top: .5rem !important;
  }
}

/* Ajuste: tarjetas de Nuestros servicios con efecto liquid glass */
.service-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.36) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.52), rgba(255,255,255,.20)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    0 18px 45px rgba(15, 23, 42, .12),
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(255,255,255,.22) !important;
}

.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.82), transparent 34%),
    radial-gradient(circle at 88% 105%, rgba(255,255,255,.36), transparent 42%),
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,.22) 48%, transparent 72%);
  opacity: .88;
}

.service-card::after {
  content: "";
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  top: .7rem;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  opacity: .9;
}

.service-card:hover {
  transform: translateY(-.4rem) scale(1.01);
  border-color: rgba(255,255,255,.52) !important;
  box-shadow:
    0 24px 60px rgba(15, 23, 42, .18),
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 0 -1px 0 rgba(255,255,255,.28) !important;
}

.service-card > * {
  position: relative;
  z-index: 1;
}

.service-card .icon-tile {
  background: rgba(255,255,255,.30) !important;
  border: 1px solid rgba(255,255,255,.38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 10px 24px rgba(14,108,29,.12);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
}

.service-card:hover .icon-tile {
  background: rgba(255,255,255,.42) !important;
  transform: translateY(-2px);
}

.service-card .btn-ghost {
  border: 1px solid rgba(255,255,255,.30);
  background: rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
}

.service-card .btn-ghost:hover {
  background: rgba(255,255,255,.34);
}

.dark .service-card {
  border-color: rgba(255,255,255,.18) !important;
  background:
    linear-gradient(135deg, rgba(20,24,36,.58), rgba(20,24,36,.30)) !important;
  box-shadow:
    0 18px 45px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(255,255,255,.08) !important;
}

.dark .service-card::before {
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.20), transparent 34%),
    radial-gradient(circle at 88% 105%, rgba(255,255,255,.10), transparent 42%),
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,.08) 48%, transparent 72%);
}

.dark .service-card .icon-tile,
.dark .service-card .btn-ghost {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.16);
}

.dark .service-card:hover .icon-tile,
.dark .service-card .btn-ghost:hover {
  background: rgba(255,255,255,.14) !important;
}

/* Ajuste: iconos de Nuestros servicios con efecto foco neón */
.service-card {
  --service-neon: var(--primary);
}

.service-card:nth-child(2) {
  --service-neon: var(--secondary);
}

.service-card:nth-child(3) {
  --service-neon: var(--accent);
}

.service-card:nth-child(4) {
  --service-neon: var(--highlight);
}

.service-card:nth-child(5) {
  --service-neon: var(--warm);
}

.service-card:nth-child(6) {
  --service-neon: var(--primary);
}

.service-card .icon-tile {
  position: relative;
  overflow: visible;
  isolation: isolate;
  border-color: hsl(var(--service-neon)/.42) !important;
  background:
    radial-gradient(circle at 50% 45%, hsl(var(--service-neon)/.20), rgba(255,255,255,.28) 44%, rgba(255,255,255,.16) 100%) !important;
  box-shadow:
    0 0 10px hsl(var(--service-neon)/.28),
    0 0 24px hsl(var(--service-neon)/.18),
    inset 0 0 12px hsl(var(--service-neon)/.16),
    inset 0 1px 0 rgba(255,255,255,.65) !important;
}

.service-card .icon-tile::before {
  content: "";
  position: absolute;
  inset: -.75rem;
  border-radius: 1.15rem;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, hsl(var(--service-neon)/.55) 0%, hsl(var(--service-neon)/.18) 34%, transparent 70%);
  filter: blur(14px);
  opacity: .78;
  transition: opacity .25s ease, transform .25s ease, filter .25s ease;
}

.service-card .icon-tile::after {
  content: "";
  position: absolute;
  inset: .45rem;
  border-radius: 999px;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle, rgba(255,255,255,.72) 0%, hsl(var(--service-neon)/.28) 36%, transparent 72%);
  filter: blur(10px);
  opacity: .74;
}

.service-card .icon-tile svg {
  position: relative;
  z-index: 2;
  color: hsl(var(--service-neon)) !important;
  stroke-width: 2.45;
  filter:
    drop-shadow(0 0 3px hsl(var(--service-neon)/.95))
    drop-shadow(0 0 9px hsl(var(--service-neon)/.72))
    drop-shadow(0 0 18px hsl(var(--service-neon)/.48));
  animation: serviceNeonPulse 2.8s ease-in-out infinite;
}

.service-card:hover .icon-tile {
  border-color: hsl(var(--service-neon)/.68) !important;
  background:
    radial-gradient(circle at 50% 45%, hsl(var(--service-neon)/.28), rgba(255,255,255,.36) 45%, rgba(255,255,255,.22) 100%) !important;
  box-shadow:
    0 0 16px hsl(var(--service-neon)/.46),
    0 0 36px hsl(var(--service-neon)/.30),
    0 0 60px hsl(var(--service-neon)/.18),
    inset 0 0 16px hsl(var(--service-neon)/.22),
    inset 0 1px 0 rgba(255,255,255,.75) !important;
}

.service-card:hover .icon-tile::before {
  opacity: 1;
  transform: scale(1.08);
  filter: blur(18px);
}

.service-card:hover .icon-tile svg {
  filter:
    drop-shadow(0 0 4px hsl(var(--service-neon)/1))
    drop-shadow(0 0 13px hsl(var(--service-neon)/.90))
    drop-shadow(0 0 26px hsl(var(--service-neon)/.62));
}

.dark .service-card .icon-tile {
  background:
    radial-gradient(circle at 50% 45%, hsl(var(--service-neon)/.24), rgba(255,255,255,.08) 45%, rgba(255,255,255,.05) 100%) !important;
  border-color: hsl(var(--service-neon)/.48) !important;
  box-shadow:
    0 0 12px hsl(var(--service-neon)/.44),
    0 0 30px hsl(var(--service-neon)/.24),
    inset 0 0 14px hsl(var(--service-neon)/.20),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.dark .service-card .icon-tile::after {
  background: radial-gradient(circle, rgba(255,255,255,.40) 0%, hsl(var(--service-neon)/.34) 38%, transparent 74%);
  opacity: .86;
}

.dark .service-card:hover .icon-tile {
  background:
    radial-gradient(circle at 50% 45%, hsl(var(--service-neon)/.34), rgba(255,255,255,.12) 45%, rgba(255,255,255,.07) 100%) !important;
  box-shadow:
    0 0 20px hsl(var(--service-neon)/.62),
    0 0 42px hsl(var(--service-neon)/.36),
    0 0 72px hsl(var(--service-neon)/.22),
    inset 0 0 18px hsl(var(--service-neon)/.28),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
}

@keyframes serviceNeonPulse {
  0%, 100% {
    opacity: .96;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.045);
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-card .icon-tile svg {
    animation: none;
  }
}

/* Ajuste fino: iconos neón menos brillosos + tintineo sutil */
.service-card .icon-tile {
  border-color: hsl(var(--service-neon)/.30) !important;
  background:
    radial-gradient(circle at 50% 45%, hsl(var(--service-neon)/.13), rgba(255,255,255,.22) 46%, rgba(255,255,255,.13) 100%) !important;
  box-shadow:
    0 0 6px hsl(var(--service-neon)/.18),
    0 0 14px hsl(var(--service-neon)/.12),
    inset 0 0 9px hsl(var(--service-neon)/.10),
    inset 0 1px 0 rgba(255,255,255,.55) !important;
}

.service-card .icon-tile::before {
  background: radial-gradient(circle, hsl(var(--service-neon)/.32) 0%, hsl(var(--service-neon)/.10) 36%, transparent 70%) !important;
  filter: blur(12px) !important;
  opacity: .42 !important;
  animation: serviceNeonAuraFlicker 4.8s linear infinite;
}

.service-card .icon-tile::after {
  background: radial-gradient(circle, rgba(255,255,255,.48) 0%, hsl(var(--service-neon)/.16) 38%, transparent 72%) !important;
  filter: blur(9px) !important;
  opacity: .38 !important;
}

.service-card .icon-tile svg {
  filter:
    drop-shadow(0 0 2px hsl(var(--service-neon)/.62))
    drop-shadow(0 0 6px hsl(var(--service-neon)/.36))
    drop-shadow(0 0 12px hsl(var(--service-neon)/.20)) !important;
  animation: serviceNeonFlicker 4.2s linear infinite !important;
}

.service-card:hover .icon-tile {
  border-color: hsl(var(--service-neon)/.45) !important;
  background:
    radial-gradient(circle at 50% 45%, hsl(var(--service-neon)/.18), rgba(255,255,255,.28) 46%, rgba(255,255,255,.17) 100%) !important;
  box-shadow:
    0 0 9px hsl(var(--service-neon)/.26),
    0 0 22px hsl(var(--service-neon)/.16),
    inset 0 0 11px hsl(var(--service-neon)/.14),
    inset 0 1px 0 rgba(255,255,255,.62) !important;
}

.service-card:hover .icon-tile::before {
  opacity: .58 !important;
  transform: scale(1.03) !important;
  filter: blur(14px) !important;
}

.service-card:hover .icon-tile svg {
  filter:
    drop-shadow(0 0 2px hsl(var(--service-neon)/.76))
    drop-shadow(0 0 8px hsl(var(--service-neon)/.48))
    drop-shadow(0 0 16px hsl(var(--service-neon)/.26)) !important;
}

.dark .service-card .icon-tile {
  background:
    radial-gradient(circle at 50% 45%, hsl(var(--service-neon)/.16), rgba(255,255,255,.06) 46%, rgba(255,255,255,.035) 100%) !important;
  border-color: hsl(var(--service-neon)/.34) !important;
  box-shadow:
    0 0 7px hsl(var(--service-neon)/.25),
    0 0 18px hsl(var(--service-neon)/.14),
    inset 0 0 10px hsl(var(--service-neon)/.12),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}

.dark .service-card .icon-tile::after {
  background: radial-gradient(circle, rgba(255,255,255,.30) 0%, hsl(var(--service-neon)/.18) 38%, transparent 74%) !important;
  opacity: .44 !important;
}

.dark .service-card:hover .icon-tile {
  background:
    radial-gradient(circle at 50% 45%, hsl(var(--service-neon)/.22), rgba(255,255,255,.09) 46%, rgba(255,255,255,.05) 100%) !important;
  box-shadow:
    0 0 10px hsl(var(--service-neon)/.35),
    0 0 26px hsl(var(--service-neon)/.20),
    inset 0 0 12px hsl(var(--service-neon)/.16),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}

@keyframes serviceNeonFlicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    opacity: .92;
    transform: scale(1);
  }
  20%, 24%, 55% {
    opacity: .64;
    transform: scale(.985);
  }
  21%, 56% {
    opacity: .98;
    transform: scale(1.01);
  }
  72% {
    opacity: .78;
  }
  74% {
    opacity: .96;
  }
}

@keyframes serviceNeonAuraFlicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    opacity: .42;
  }
  20%, 24%, 55% {
    opacity: .20;
  }
  21%, 56% {
    opacity: .50;
  }
  72% {
    opacity: .28;
  }
  74% {
    opacity: .46;
  }
}

/* Sección renovada: ¿Por qué elegir Paraíso Viajero? */
.why-section {
  position: relative;
  overflow: hidden;
  background: transparent;
}

.dark .why-section {
  background: transparent;
}

.why-section::before,
.why-section::after {
  display: none;
}

.why-glow {
  display: none;
}

.why-glow-one {
  left: -7rem;
  top: 8rem;
  background: hsl(var(--secondary));
}

.why-glow-two {
  right: -6rem;
  bottom: 4rem;
  background: hsl(var(--accent));
}

.why-section .container {
  position: relative;
  z-index: 1;
}

.why-header {
  max-width: 760px;
  margin: 0 auto 3rem;
  text-align: center;
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  padding: .45rem .9rem;
  border-radius: 999px;
  color: hsl(var(--primary));
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(255,255,255,.48);
  border: 1px solid rgba(255,255,255,.60);
  box-shadow:
    0 12px 28px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.72);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
}

.dark .section-kicker {
  color: hsl(var(--accent));
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}

.why-layout {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.35fr);
  gap: 2rem;
  align-items: stretch;
}

.why-main-card,
.why-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.48);
  background:
    linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.28)),
    hsl(var(--card)/.42);
  box-shadow:
    0 24px 70px rgba(15, 23, 42, .13),
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -1px 0 rgba(255,255,255,.22);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
}

.dark .why-main-card,
.dark .why-card {
  border-color: rgba(255,255,255,.14);
  background:
    linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.04)),
    hsl(var(--card)/.58);
  box-shadow:
    0 24px 70px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(255,255,255,.06);
}

.why-main-card::before,
.why-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 0%, rgba(255,255,255,.72), transparent 18rem),
    linear-gradient(120deg, rgba(255,255,255,.52), transparent 34%);
  opacity: .62;
}

.dark .why-main-card::before,
.dark .why-card::before {
  opacity: .22;
}

.why-main-card {
  min-height: 100%;
  border-radius: 1.75rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.75rem;
}

.why-main-card > *,
.why-card > * {
  position: relative;
  z-index: 1;
}

.why-main-top {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: .65rem;
  padding: .5rem .8rem .5rem .5rem;
  border-radius: 999px;
  color: hsl(var(--primary));
  font-weight: 800;
  background: hsl(var(--primary)/.10);
  border: 1px solid hsl(var(--primary)/.18);
}

.dark .why-main-top {
  color: hsl(var(--accent));
  background: hsl(var(--accent)/.10);
  border-color: hsl(var(--accent)/.18);
}

.why-badge-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: hsl(var(--primary-foreground));
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
  box-shadow: 0 0 22px hsl(var(--primary)/.28);
}

.why-badge-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.why-main-card h3 {
  max-width: 520px;
  font-size: clamp(2rem, 3vw, 3.4rem);
  line-height: .98;
  letter-spacing: -.045em;
}

.why-main-card p {
  color: hsl(var(--muted-foreground));
  font-size: 1.05rem;
}

.why-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}

.why-stat-grid div {
  border-radius: 1rem;
  padding: 1rem;
  background: rgba(255,255,255,.38);
  border: 1px solid rgba(255,255,255,.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}

.dark .why-stat-grid div {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}

.why-stat-grid strong {
  display: block;
  color: hsl(var(--primary));
  font-size: 1.55rem;
  line-height: 1;
}

.dark .why-stat-grid strong {
  color: hsl(var(--accent));
}

.why-stat-grid span {
  display: block;
  margin-top: .35rem;
  color: hsl(var(--muted-foreground));
  font-size: .82rem;
  line-height: 1.2;
}

.why-cta {
  width: fit-content;
  border-radius: 999px;
  box-shadow: 0 14px 30px hsl(var(--primary)/.22);
}

.why-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.why-card {
  border-radius: 1.25rem;
  padding: 1.15rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.why-card:hover {
  transform: translateY(-.35rem);
  border-color: hsl(var(--primary)/.32);
  box-shadow:
    0 28px 70px rgba(15, 23, 42, .17),
    0 0 0 1px hsl(var(--primary)/.08),
    inset 0 1px 0 rgba(255,255,255,.80);
}

.dark .why-card:hover {
  border-color: hsl(var(--accent)/.28);
  box-shadow:
    0 28px 70px rgba(0,0,0,.42),
    0 0 0 1px hsl(var(--accent)/.10),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.why-icon {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  color: hsl(var(--primary));
  background:
    radial-gradient(circle at 50% 30%, hsl(var(--accent)/.30), transparent 62%),
    rgba(255,255,255,.48);
  border: 1px solid rgba(255,255,255,.58);
  box-shadow:
    0 10px 22px rgba(0,0,0,.08),
    0 0 20px hsl(var(--accent)/.14),
    inset 0 1px 0 rgba(255,255,255,.75);
}

.dark .why-icon {
  color: hsl(var(--accent));
  background:
    radial-gradient(circle at 50% 30%, hsl(var(--accent)/.18), transparent 62%),
    rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}

.why-icon svg {
  width: 1.45rem;
  height: 1.45rem;
  stroke-width: 2.35;
}

.why-card h3 {
  font-size: 1.03rem;
  font-weight: 800;
  margin-bottom: .3rem;
}

.why-card p {
  color: hsl(var(--muted-foreground));
  font-size: .94rem;
  line-height: 1.46;
}

@media(max-width: 1023px) {
  .why-layout {
    grid-template-columns: 1fr;
  }

  .why-main-card {
    min-height: auto;
  }
}

@media(max-width: 767px) {
  .why-section::before {
    inset: .75rem;
    border-radius: 1.35rem;
  }

  .why-header {
    margin-bottom: 2rem;
  }

  .why-main-card {
    padding: 1.35rem;
    border-radius: 1.35rem;
  }

  .why-main-card h3 {
    font-size: 2rem;
  }

  .why-stat-grid,
  .why-benefits {
    grid-template-columns: 1fr;
  }

  .why-card {
    padding: 1rem;
  }

  .why-cta {
    width: 100%;
  }
}

/* Ajuste: héroes internos con el mismo look visual del inicio y espacio para menú fijo */
.page-hero-section {
  position: relative;
  min-height: 56vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  padding: clamp(9.25rem, 13vw, 11rem) 0 clamp(4rem, 7vw, 6rem) !important;
  background: #07111c !important;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.page-hero-bg video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.02);
}

.page-hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.22), transparent 26%),
    radial-gradient(circle at 82% 72%, hsl(var(--primary)/.30), transparent 32%),
    linear-gradient(to bottom, rgba(0,0,0,.62), rgba(0,0,0,.40), rgba(0,0,0,.68));
  pointer-events: none;
}

.page-hero-content {
  width: min(900px, 100%);
  margin: 0 auto;
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: clamp(1.4rem, 3vw, 2.25rem);
  border: 1px solid rgba(255,255,255,.30);
  background: linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,.08));
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    0 28px 80px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.46),
    inset 0 -1px 0 rgba(255,255,255,.12);
}

.page-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  padding: .45rem .95rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}

.page-hero-section .page-title {
  color: #fff;
  font-size: clamp(2.45rem, 6vw, 5.5rem);
  line-height: .96;
  margin-bottom: 1.1rem;
  text-shadow: 0 12px 34px rgba(0,0,0,.35);
}

.page-hero-section .lead {
  color: rgba(255,255,255,.90);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  text-shadow: 0 8px 22px rgba(0,0,0,.32);
}

@media(max-width: 767px) {
  .page-hero-section {
    min-height: 48vh;
    padding-top: 8.2rem !important;
    padding-bottom: 3.5rem !important;
  }

  .page-hero-content {
    padding: 1.45rem;
    border-radius: 1.35rem;
  }

  .page-hero-section .page-title {
    font-size: clamp(2.1rem, 12vw, 3.1rem);
  }
}