/* Liquid glass layer, scoped to the home page. */
body.home-tropical {
  background:#eff5e9!important;
  isolation:isolate;
  overflow-x:clip
}

.liquid-atmosphere {
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  background:radial-gradient(ellipse at 5% 15%,#ffe3c8 0,transparent 52%),radial-gradient(ellipse at 95% 45%,#bdeddd 0,transparent 55%),#f6f5e8
}

.liquid-atmosphere i {
  position:absolute;
  width:55vw;
  height:55vw;
  min-width:320px;
  min-height:320px;
  border-radius:42% 58% 60% 40%;
  filter:blur(42px);
  opacity:.55;
  animation:liquid-drift 17s ease-in-out infinite alternate;
  background:radial-gradient(circle at 35% 40%,#ffd08d,transparent 65%);
  left:-15%;
  top:-15%
}

.liquid-atmosphere i:nth-child(2) {
  background:radial-gradient(circle,#83daca,transparent 65%);
  left:55%;
  top:15%;
  animation-delay:-7s;
  animation-duration:21s
}

.liquid-atmosphere i:nth-child(3) {
  background:radial-gradient(circle,#f0b4aa,transparent 65%);
  left:20%;
  top:60%;
  animation-delay:-12s
}

.home-tropical nav {
  top:16px;
  left:20px;
  width:calc(100% - 40px);
  border:1px solid #ffffffc9;
  border-radius:100px;
  background:rgba(255,255,245,.64)!important;
  backdrop-filter:blur(24px) saturate(1.65);
  -webkit-backdrop-filter:blur(24px) saturate(1.65);
  box-shadow:inset 0 1px 1px #fff,0 10px 35px #124d3810;
  transition:background .3s,box-shadow .3s
}

.home-tropical nav>div {
  padding-left:22px;
  padding-right:22px
}

.home-tropical nav a:not(.bg-primary) {
  transition:color .25s,opacity .25s
}

.home-tropical nav a:hover {
  color:#a23e28
}

.home-tropical #mobile-menu {
  top:94px;
  left:20px;
  width:calc(100% - 40px);
  border-radius:24px;
  background:#f5f8eff2;
  backdrop-filter:blur(24px);
  border:1px solid white
}

.tropical-hero {
  padding-top:165px;
  padding-bottom:90px;
  min-height:760px;
  position:relative
}

.hero-eyebrow {
  display:inline-flex;
  border:1px solid #ffffffdd;
  border-radius:100px;
  padding:9px 15px;
  background:#ffffff66;
  box-shadow:0 5px 20px #164c4208;
  backdrop-filter:blur(12px);
  font-size:10px;
  letter-spacing:.13em
}

.hero-copy h1 {
  font-size:clamp(44px,5.1vw,76px);
  text-wrap:balance;
  max-width:620px
}

.hero-copy> * {
  animation:liquid-arrive .9s cubic-bezier(.16,1,.3,1) both
}

.hero-copy> :nth-child(2) {
  animation-delay:.1s
}

.hero-copy> :nth-child(3) {
  animation-delay:.2s
}

.hero-copy> :nth-child(4) {
  animation-delay:.3s
}

.hero-copy> :nth-child(5) {
  animation-delay:.4s
}

.hero-description {
  color:#244d41
}

.tropical-button,.tropical-link,.home-tropical nav a.bg-primary,.motion-toggle {
  position:relative;
  overflow:hidden;
  border-radius:100px;
  border:1px solid #ffffffbf;
  background:linear-gradient(135deg,#fff6 0%,#ffffff05 45%,#ffffff4d 100%),#f19b7cbd;
  box-shadow:inset 0 1px 1px #fffffff0,inset 0 -2px 4px #964b2424,0 8px 24px #914b221a;
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,background .35s;
  color:#153d37;
  transform:translate(var(--mag-x,0px),var(--mag-y,0px))
}

.tropical-button {
  padding:18px 28px;
  min-height:56px
}

.tropical-link {
  padding:17px 24px;
  background:linear-gradient(130deg,#ffffffaa,#ffffff36);
  min-height:56px
}

.tropical-button::before,.tropical-link::before,.home-tropical nav a.bg-primary::before {
  content:'';
  position:absolute;
  inset:-60%;
  background:linear-gradient(115deg,transparent 38%,#ffffffb0 50%,transparent 62%);
  transform:translateX(-85%);
  pointer-events:none;
  transition:transform .75s
}

.tropical-button:hover::before,.tropical-link:hover::before,.home-tropical nav a.bg-primary:hover::before {
  transform:translateX(85%)
}

.tropical-button:hover,.tropical-link:hover,.home-tropical nav a.bg-primary:hover {
  box-shadow:inset 0 1px 1px white,0 14px 32px #164c4229;
  background-color:#f6b492
}

.tropical-button:active,.tropical-link:active {
  scale:.96
}

.hero-actions {
  gap:14px
}

.hero-film {
  position:relative;
  padding:14px;
  border:1px solid #ffffffdb;
  background:linear-gradient(140deg,#ffffffaa,#ffffff26 55%,#e1f6ec77);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:44px;
  box-shadow:inset 0 2px 2px white,inset 0 -2px 8px #ffffffaa,0 30px 70px #24634e25;
  /* Mantener el video y su marco rectos en todos los dispositivos. */
  transform:none;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s
}

.hero-film::before {
  content:'';
  position:absolute;
  z-index:-1;
  width:145px;
  height:145px;
  right:-28px;
  top:-55px;
  border-radius:50%;
  background:radial-gradient(circle at 27% 24%,#ffffffec 0%,#e4ffff61 20%,#b9e4c65c 48%,#7fb3a84d 70%,#ffffffe6 95%);
  border:1px solid #fff9;
  box-shadow:inset -8px -12px 20px #528d7255,10px 20px 45px #32665119;
  animation:glass-bob 7s ease-in-out infinite
}

.hero-film::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(circle at var(--light-x,20%) var(--light-y,0%),#ffffff4d,transparent 48%);
  box-shadow:inset 0 0 0 1px #ffffff80
}

.hero-film video {
  border-radius:30px;
  position:relative;
  z-index:1
}

.hero-film-caption {
  padding:20px 10px 10px;
  min-height:55px;
  position:relative;
  z-index:1
}

.hero-film-caption>span:last-child {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:#ffffff91;
  border:1px solid white
}

.tropical-strip {
  background:linear-gradient(120deg,#164c42ed,#257d6be8);
  border-block:1px solid #ffffff80;
  box-shadow:inset 0 1px 0 #ffffff4d,0 12px 30px #164c4214
}

.tropical-strip span:nth-child(2),.tropical-strip span:nth-child(4) {
  display:inline-block;
  animation:glass-spin 18s linear infinite;
  font-size:23px
}

.home-tropical #experiencia .relative.group {
  border:7px solid #ffffff80;
  box-shadow:0 25px 60px #164c4220
}

.home-tropical #experiencia .absolute {
  background:#fff7e8d9;
  backdrop-filter:blur(16px);
  border:1px solid #ffffffc9;
  border-radius:20px
}

.discovery-grid>* {
  border:1px solid #ffffffbb;
  box-shadow:0 14px 40px #1f5c4517;
  transition:transform .5s,box-shadow .5s
}

.discovery-grid>*:hover {
  transform:translateY(-7px);
  box-shadow:0 26px 52px #164c4226
}

.discovery-grid>div {
  background:linear-gradient(135deg,#fff8cfb0,#f1c782a6);
  backdrop-filter:blur(20px);
  box-shadow:inset 0 1px 1px white,0 14px 40px #1f5c4517
}

.home-tropical footer {
  background:linear-gradient(145deg,#ffffff80,#cbe8d8a6);
  border-top:1px solid #ffffffcc;
  backdrop-filter:blur(18px)
}

.home-tropical footer a[aria-label] {
  background:#ffffff5c;
  box-shadow:inset 0 1px 0 white;
  transition:transform .3s,background .3s
}

.home-tropical footer a[aria-label]:hover {
  transform:translateY(-5px) rotate(-6deg);
  background:#f8c4a3
}

.motion-toggle {
  position:fixed;
  bottom:16px;
  right:16px;
  z-index:60;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 15px;
  background:#fff9eae8;
  font-size:12px;
  min-height:44px;
  cursor:pointer;
  box-shadow:0 6px 24px #164c4226
}

.motion-toggle svg {
  width:16px;
  height:16px
}

.liquid-ripple {
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#ffffffb3;
  pointer-events:none;
  animation:glass-ripple .65s ease-out forwards
}

@keyframes liquid-drift {
  to {
    transform:translate(12vw,8vh) rotate(40deg) scale(1.15)
  }
}

@keyframes glass-bob {
  50% {
    transform:translateY(18px)
  }
}

@keyframes glass-spin {
  to {
    transform:rotate(360deg)
  }
}

@keyframes liquid-arrive {
  from {
    opacity:0;
    transform:translateY(25px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}

@keyframes glass-ripple {
  to {
    transform:scale(32);
    opacity:0
  }
}

@media(hover:hover) and (pointer:fine) {
  .reveal-ready {
    opacity:0;
    transform:translateY(30px);
    transition:opacity .85s ease,transform .85s cubic-bezier(.16,1,.3,1)
  }
  .reveal-ready.is-visible {
    opacity:1;
    transform:none
  }
}

@media(max-width:1100px) and (min-width:768px) {
  .home-tropical nav .gap-8 {
    gap:12px
  }
  .home-tropical nav .font-label-caps {
    font-size:10px
  }
  .home-tropical nav a.bg-primary {
    padding:10px 16px
  }
  .hero-actions {
    gap:12px
  }
  .tropical-link {
    padding:15px 18px
  }
}

@media(max-width:767px) {
  .home-tropical nav {
    top:10px;
    left:12px;
    width:calc(100% - 24px)
  }
  .home-tropical nav>div {
    padding:10px 16px
  }
  .home-tropical #mobile-menu {
    top:82px;
    left:12px;
    width:calc(100% - 24px)
  }
  .tropical-hero {
    padding:128px 24px 55px;
    min-height:0;
    gap:45px
  }
  .hero-copy h1 {
    font-size:clamp(40px,10.4vw,56px)
  }
  .hero-eyebrow {
    font-size:8px;
    padding:8px 12px
  }
  .hero-film {
    border-radius:30px;
    margin:0;
    padding:10px;
    transform:none;
    box-shadow:0 20px 40px #24634e25
  }
  .hero-film video {
    border-radius:22px
  }
  .hero-film::before {
    width:90px;
    height:90px;
    top:-30px;
    right:-10px
  }
  .hero-actions {
    gap:10px
  }
  .tropical-button,.tropical-link {
    font-size:12px;
    padding:15px 18px;
    min-height:48px
  }
  .liquid-atmosphere i {
    filter:blur(26px);
    animation:none
  }
  .motion-toggle {
    padding:8px 12px;
    bottom:12px;
    right:12px
  }
  .tropical-strip span:nth-child(4) {
    display:none
  }
  .home-tropical footer {
    padding-bottom:90px
  }
}

html.motion-paused .home-tropical *,html.motion-paused .home-tropical *::before,html.motion-paused .home-tropical *::after {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important
}

html.motion-paused .reveal-ready {
  opacity:1;
  transform:none
}

html.motion-paused .hero-film {
  transform:none
}

@media(prefers-reduced-motion:reduce) {
  .home-tropical *,.home-tropical *::before,.home-tropical *::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
  .reveal-ready {
    opacity:1;
    transform:none
  }
  .hero-film {
    transform:none
  }
}

@supports not (backdrop-filter:blur(10px)) {
  .home-tropical nav {
    background:#fcf9ef!important
  }
  .hero-film,.motion-toggle {
    background:#edf3e4
  }
  .tropical-link {
    background:#f9faf0
  }
}