/* ============================================================
   Jorvin Travel Design — global CSS
   Layout/visuals live as inline styles on the markup (ported
   verbatim from the Claude Design prototype). This file only
   adds what inline styles cannot do: resets, keyframes,
   :hover / :focus states, responsive breakpoints, reduced motion.
   ============================================================ */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:hsl(201,100%,9%);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;}
::selection{background:hsl(38,88%,68%);color:hsl(201,100%,8%);}
input,textarea,select,button{font-family:inherit;}
input::placeholder,textarea::placeholder{color:hsla(35,22%,72%,0.45);}

@keyframes dashFlow{to{stroke-dashoffset:-600;}}
@keyframes scrollNudge{0%,100%{transform:translateY(0);opacity:.7;}50%{transform:translateY(7px);opacity:.25;}}

.route-dash{animation:dashFlow 9s linear infinite;}
.scroll-nudge{animation:scrollNudge 1.8s ease-in-out infinite;}

/* ---------- Hover / focus (replaces runtime style-hover / style-focus) ---------- */
.nav-link:hover{color:#fff;}
.lang-link:hover{color:#fff;}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 18px 42px hsla(38,80%,55%,0.45);}
.btn-glass:hover{background:hsla(0,0%,100%,0.1);border-color:hsla(38,70%,72%,0.4);}
.footer-link:hover{color:#fff;}
.field:focus{border-color:hsla(38,80%,68%,0.6);}

/* Visible keyboard focus ring everywhere */
a:focus-visible,
button:focus-visible,
.field:focus-visible{
  outline:2px solid hsl(38,90%,72%);
  outline-offset:2px;
}

/* ---------- FAQ accordion ---------- */
.faq-answer[hidden]{display:none;}

/* ---------- Navigation responsiveness (was JS breakpoints) ---------- */
.nav-desktop{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:1;}
.nav-mobile-btn{display:none;}
/* Mobile-only header cluster: language switcher + hamburger (hidden on desktop) */
.nav-mobile-actions{display:none;align-items:center;gap:10px;}

/* ---------- Mobile menu: animated open/close (premium glass travel-card) ----------
   Markup keeps [hidden] for the no-JS / closed fallback. JS removes [hidden] then
   toggles .is-open so the panel can fade + slide + settle instead of snapping in.
   Colours/blur are inherited from the existing inline styles on #mobileMenu — this
   block only adds motion, so the navy/gold/cream palette stays untouched. */
.nav-menu{display:none;}
.nav-menu:not([hidden]){
  display:flex;
  opacity:0;
  transform:translateY(-8px) scale(0.98);
  transform-origin:top center;
  transition:opacity .26s ease, transform .3s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.nav-menu.is-open{opacity:1;transform:translateY(0) scale(1);}

/* Menu links: minimal staggered settle on open; snappy, delay-free on close */
.nav-menu > a{opacity:0;transform:translateY(-6px);transition:opacity .26s ease,transform .26s ease;}
.nav-menu.is-open > a{opacity:1;transform:translateY(0);}
.nav-menu.is-open > a:nth-child(1){transition-delay:.04s;}
.nav-menu.is-open > a:nth-child(2){transition-delay:.07s;}
.nav-menu.is-open > a:nth-child(3){transition-delay:.10s;}
.nav-menu.is-open > a:nth-child(4){transition-delay:.13s;}
.nav-menu.is-open > a:nth-child(5){transition-delay:.16s;}
.nav-menu.is-open > a:nth-child(6){transition-delay:.19s;}
.nav-menu.is-open > a:nth-child(7){transition-delay:.22s;}

/* ---------- Hamburger → compass/X transform ----------
   The three bars settle into an X; the whole group makes a quiet quarter-turn,
   like a compass needle finding direction. A gentle overshoot easing does the rest. */
.nav-burger{transition:transform .34s cubic-bezier(.34,1.3,.5,1);}
.nav-burger > span{transition:transform .34s cubic-bezier(.34,1.3,.5,1),opacity .18s ease;transform-origin:center;}
.nav-mobile-btn.is-open .nav-burger{transform:rotate(90deg);}
.nav-mobile-btn.is-open .nav-burger > span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-mobile-btn.is-open .nav-burger > span:nth-child(2){opacity:0;transform:scaleX(0);}
.nav-mobile-btn.is-open .nav-burger > span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* Below 1000px: collapse desktop links into the hamburger,
   and reveal the always-visible mobile language switcher + hamburger */
@media (max-width: 999px){
  .nav-desktop{display:none;}
  .nav-mobile-btn{display:grid;}
  .nav-mobile-actions{display:flex;}
}

/* Hero editorial photo + route line: desktop only (>=1120px) */
.hero-aside{display:none;}
@media (min-width: 1120px){
  .hero-aside{display:block;}
}

/* ============================================================
   Cinematic journey (Inicio → Servicios)
   The first four sections share ONE scroll-controlled video.
   These classes keep the video clearly visible while text sits
   on localized glass panels/cards instead of full dark overlays.
   ============================================================ */
.video-visible-section{position:relative;z-index:1;}

/* Floating glass panel — for text blocks placed over the video */
.glass-panel{
  background:linear-gradient(165deg,hsla(201,56%,13%,0.56),hsla(201,62%,9%,0.42));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid hsla(38,60%,72%,0.18);
  border-radius:22px;
  box-shadow:0 28px 64px rgba(0,0,0,0.45),inset 0 1px 0 hsla(0,0%,100%,0.06);
  padding:clamp(26px,3.4vw,42px);
}

/* Translucent navy glass card (composable with .glass-card-3d) */
.glass-card{
  background:linear-gradient(160deg,hsla(201,52%,14%,0.5),hsla(201,58%,9%,0.36));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid hsla(38,55%,70%,0.16);
  box-shadow:0 20px 46px rgba(0,0,0,0.4),inset 0 1px 0 hsla(0,0%,100%,0.05);
}

/* Premium 3D depth + subtle hover lift (hover-capable pointers only) */
.glass-card-3d{
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  will-change:transform;
}
@media (hover:hover){
  .glass-card-3d:hover{
    transform:translateY(-4px) scale(1.015);
    box-shadow:0 32px 66px rgba(0,0,0,0.5),inset 0 1px 0 hsla(0,0%,100%,0.08);
    border-color:hsla(38,75%,70%,0.34);
  }
}

/* Floating media card (portrait) */
.float-card{transition:transform .24s ease,box-shadow .24s ease;will-change:transform;}
@media (hover:hover){
  .float-card:hover{transform:translateY(-5px);box-shadow:0 40px 90px rgba(0,0,0,0.55);}
}

/* Servicios hero card — premium glass slab over the video */
.service-glass{
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transition:transform .24s ease,box-shadow .24s ease;will-change:transform;
}
@media (hover:hover){
  .service-glass:hover{transform:translateY(-4px);box-shadow:0 40px 84px rgba(0,0,0,0.5);}
}

/* Reusable localized darkening behind text (where a panel isn't used) */
.cinematic-local-gradient{background:linear-gradient(180deg,rgba(0,18,28,0.42),rgba(0,18,28,0.12));}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .route-dash,.scroll-nudge{animation:none;}
  /* Reveal elements are hard-shown by main.js; neutralize transitions too */
  [data-reveal]{transition:none !important;}
  .btn-gold:hover,.btn-glass:hover{transform:none;}
  .glass-card-3d,.float-card,.service-glass{transition:none;}
  .glass-card-3d:hover,.float-card:hover,.service-glass:hover{transform:none;}
  /* Mobile menu: instant open/close, no slide/scale/stagger or needle spin */
  .nav-menu:not([hidden]){transition:none;opacity:1;transform:none;}
  .nav-menu > a{transition:none;opacity:1;transform:none;}
  .nav-menu.is-open > a{transition-delay:0s;}
  .nav-burger,.nav-burger > span{transition:none;}
}