/* ════════════════════════════════════════════════════════════════════
   Paginas de venue · base compartida

   Portado del paquete de diseno de los tres venues. Dos reglas iguales a
   las de la pagina de Festival Season:

   1. Las clases llevan prefijo vn- porque el paquete traia nombres
      genericos (.section, .footer, .brand, .eyebrow) que chocaban con
      base.css. Solo quedan sin prefijo las de estado, que son las que
      leen y escriben los scripts.

   2. Las variables del paquete se redefinen a partir de los tokens del
      sitio en vez de copiar sus valores, para que las tres paginas
      hereden la paleta y la tipografia de Prestigia.
   ════════════════════════════════════════════════════════════════════ */

.vn-page {
  --ink:        #080807;
  --ink-soft:   #141311;
  --ivory:      var(--pg-fg-on-dark);
  --ivory-dim:  rgba(242, 237, 227, 0.68);
  --gold:       var(--pg-gold);
  --line-dark:  rgba(242, 237, 227, 0.18);
  --line-light: var(--pg-line-mid);
  --font-display: var(--pg-display);
  --font-serif:   var(--pg-serif);
  --font-mono:    var(--pg-mono);
  --max:    1240px;
  --gutter: var(--pg-pad);
  --ease:   var(--pg-ease);

  /* El paquete pintaba body en oscuro; aqui va en la pagina, porque las
     secciones claras ya traen su propio fondo y color. */
  background: var(--ink);
  color: var(--ivory);
}

/* base.css pone overflow-x:hidden en el body y eso rompe position:sticky
   en los rieles de fechas. Con clip se recorta igual sin crear contenedor. */
.vn-page { overflow-x: clip; }

/* :where() no aporta especificidad: el reset solo se aplica donde ninguna
   otra regla pinta el enlace, para no pisar la barra ni el pie del sitio. */
:where(.vn-page a) { color: inherit; text-decoration: none; }
:where(.vn-page button) { border: 0; font: inherit; color: inherit; cursor: pointer; }

/* El hero sube la altura de la barra para quedar debajo de ella: asi la
   barra transparente deja ver la foto y no una franja clara. */
.vn-hero-top {
  margin-top: calc(-1 * var(--pg-nav-h, 80px));
  padding-top: var(--pg-nav-h, 80px);
}

.vn-reveal { opacity: 1; transform: none; }
.motion-ready .vn-reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.motion-ready .vn-reveal.is-visible { opacity: 1; transform: none; }
.vn-faq-answer { display: block; }
.js .vn-faq-answer { display: none; }
.js .vn-faq-item.is-open .vn-faq-answer { display: block; }
.vn-section {
  position: relative;
  padding: clamp(92px, 12vw, 190px) var(--gutter);
}
.vn-section__inner { width: min(100%, var(--max)); margin-inline: auto; }
.vn-section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(28px, 4vw, 56px);
  font: 500 10px/1.2 var(--font-mono);
  letter-spacing: .24em;
  text-transform: uppercase;
}
.vn-section-label::before { width: 24px; height: 1px; background: currentColor; content: ""; opacity: .55; }
.vn-eyebrow {
  font: 500 10px/1.4 var(--font-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.vn-display-title {
  max-width: 1100px;
  margin-bottom: 0;
  font-size: clamp(52px, 8.4vw, 138px);
  font-weight: 500;
  line-height: .88;
  letter-spacing: -.075em;
}
.vn-display-title em { font-family: var(--font-serif); font-weight: 400; letter-spacing: -.045em; }
.vn-lead { font-size: clamp(19px, 2vw, 30px); line-height: 1.4; letter-spacing: -.025em; }
.vn-body-copy { color: var(--ivory-dim); font-size: clamp(16px, 1.25vw, 20px); line-height: 1.65; }
.vn-button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 12px 20px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: background 260ms ease, color 260ms ease, transform 260ms var(--ease);
}
.vn-button:hover { transform: translateY(-2px); background: var(--ivory); color: var(--ink); }
.vn-button--solid { border-color: var(--accent, var(--gold)); background: var(--accent, var(--gold)); color: var(--ink); }
.vn-button--solid:hover { background: var(--ivory); border-color: var(--ivory); }
.vn-text-link { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; }
.vn-text-link::after { content: "↗"; transition: transform 240ms var(--ease); }
.vn-text-link:hover::after { transform: translate(3px, -3px); }
.vn-progress-bar {
  position: fixed;
  z-index: 102;
  top: 0;
  left: 0;
  width: calc(var(--scroll-progress, 0) * 100%);
  height: 2px;
  background: var(--accent, var(--gold));
  pointer-events: none;
}
.vn-hero-kicker { font: 500 10px/1.4 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; }
.vn-hero-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; font: 500 10px/1.4 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.vn-fact-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.vn-fact { min-height: 190px; padding: 26px; border-right: 1px solid currentColor; }
.vn-fact:last-child { border-right: 0; }
.vn-fact strong { display: block; margin: 34px 0 7px; font: 400 clamp(29px, 3.5vw, 58px)/1 var(--font-serif); }
.vn-fact span { font: 500 9px/1.4 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; opacity: .62; }
.vn-concierge-grid { background: var(--ivory); color: var(--ink); }
.vn-concierge-grid__head { display: grid; grid-template-columns: 1.4fr .6fr; gap: 48px; align-items: end; margin-bottom: 72px; }
.vn-concierge-grid__head p { max-width: 520px; margin: 0 0 10px auto; color: rgba(8,8,7,.62); }
.vn-service-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.vn-service-card { position: relative; min-height: 360px; overflow: hidden; grid-column: span 4; padding: 28px; background: #ded7ca; }
.vn-service-card--wide { grid-column: span 8; }
.vn-service-card--dark { background: var(--ink-soft); color: var(--ivory); }
.vn-service-card--photo { background: #141311; color: var(--ivory); }
.vn-service-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vn-service-card::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, rgba(0,0,0,.78)); content: ""; }
.vn-service-card__content { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.vn-service-card h3 { max-width: 390px; margin: 0 0 10px; font-size: clamp(28px, 3vw, 48px); line-height: .98; letter-spacing: -.055em; }
.vn-service-card p { max-width: 430px; margin-bottom: 0; line-height: 1.55; opacity: .72; }
.vn-faq { background: var(--ivory); color: var(--ink); }
.vn-faq-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(46px, 8vw, 150px); }
.vn-faq-layout h2 { max-width: 490px; font-size: clamp(56px, 7vw, 112px); line-height: .88; letter-spacing: -.075em; }
.vn-faq-list { border-top: 1px solid var(--line-light); }
.vn-faq-item { border-bottom: 1px solid var(--line-light); }
.vn-faq-question { width: 100%; min-height: 82px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 28px; padding: 20px 0; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font-weight: 600; }
.vn-faq-question::after { content: "+"; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid rgba(8,8,7,.35); border-radius: 50%; font-size: 16px; font-weight: 400; }
.vn-faq-item.is-open .vn-faq-question::after { content: "−"; }
.vn-faq-answer { padding: 0 44px 26px 0; color: rgba(8,8,7,.64); line-height: 1.65; }
.vn-final-cta { position: relative; min-height: 88vh; display: grid; place-items: center; padding: 120px var(--gutter); overflow: hidden; text-align: center; }
.vn-final-cta__inner { position: relative; z-index: 2; max-width: 1120px; }
.vn-final-cta h2 { margin-bottom: 28px; font-size: clamp(64px, 10vw, 156px); font-weight: 500; line-height: .84; letter-spacing: -.08em; }
.vn-final-cta h2 em { color: var(--accent, var(--gold)); font-family: var(--font-serif); font-weight: 400; }
.vn-final-cta p { max-width: 600px; margin: 0 auto 34px; color: var(--ivory-dim); font-size: 18px; line-height: 1.5; }
.vn-footer__inner { width: min(100%, var(--max)); margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.vn-footer__inner > :last-child { text-align: right; }
.vn-venue-switcher { display: flex; gap: 20px; }
.vn-venue-switcher a { display: inline-flex; align-items: center; font-size: 12px; }
.vn-collection-page { background: #080807; }
.vn-collection { min-height: 100vh; }
.vn-collection-hero { min-height: 76vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 36px var(--gutter) clamp(64px, 8vw, 110px); }
.vn-collection-brand { position: absolute; top: 24px; left: var(--gutter); display: flex; align-items: center; gap: 13px; }
.vn-collection-brand__mark { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); font-family: var(--font-serif); }
.vn-collection-brand strong, .vn-collection-brand small { display: block; }
.vn-collection-brand small { margin-top: 4px; color: var(--ivory-dim); font: 8px/1 var(--font-mono); letter-spacing: .22em; text-transform: uppercase; }
.vn-collection-hero .vn-section-label { color: var(--gold); }
.vn-collection-hero h1 { margin-bottom: 26px; font-size: clamp(66px, 11vw, 180px); font-weight: 500; line-height: .78; letter-spacing: -.085em; }
.vn-collection-hero h1 em { color: var(--gold); font-family: var(--font-serif); font-weight: 400; }
.vn-collection-intro { max-width: 600px; margin: 0 0 0 auto; color: var(--ivory-dim); font-size: clamp(17px, 1.5vw, 23px); line-height: 1.5; }
.vn-collection-scroll { position: absolute; right: var(--gutter); top: 34px; color: var(--ivory-dim); font: 9px/44px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.vn-collection-scroll i { margin-left: 10px; color: var(--gold); }
.vn-collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 76vh; }
.vn-collection-card { position: relative; min-height: 76vh; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 30px; border-right: 1px solid rgba(255,255,255,.2); isolation: isolate; }
.vn-collection-card:last-child { border-right: 0; }
.vn-collection-card::before { position: absolute; z-index: -2; inset: 0; background-position: center; background-size: cover; content: ""; transition: transform 900ms var(--ease), filter 600ms ease; }
.vn-collection-card::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.12) 35%, rgba(0,0,0,.9)); content: ""; }
.vn-collection-card:hover::before { transform: scale(1.045); filter: saturate(1.12); }
.vn-collection-card--zamna::before { background-color: #14201c; background-image: url('../images/events/zamna-tulum-hero.webp'); filter: grayscale(.6); }
.vn-collection-card--day-zero::before { background-color: #7a210f; background-image: url('../images/events/day-zero-tulum-hero.webp'); }
.vn-collection-card--tehmplo::before { background-color: #35107a; background-image: url('../images/events/tehmplo-gradient.webp'); }
.vn-collection-card__number, .vn-collection-card__meta { font: 500 9px/1 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; }
.vn-collection-card__meta { position: absolute; top: 32px; right: 30px; color: rgba(255,255,255,.72); }
.vn-collection-card__title h2 { margin: 0; font-size: clamp(58px, 6.2vw, 108px); line-height: .82; letter-spacing: -.08em; }
.vn-collection-card__title p { margin: 18px 0 0; color: rgba(255,255,255,.72); font-family: var(--font-serif); font-size: clamp(19px, 2vw, 30px); font-style: italic; }
.vn-collection-card__arrow { position: absolute; right: 28px; bottom: 27px; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; transition: transform 300ms var(--ease), background 300ms ease, color 300ms ease; }
.vn-collection-card:hover .vn-collection-card__arrow { transform: rotate(45deg); background: var(--ivory); color: var(--ink); }
@media (max-width: 1080px) {
  .vn-fact-grid { grid-template-columns: repeat(2, 1fr); }
  .vn-fact:nth-child(2) { border-right: 0; }
  .vn-fact:nth-child(-n+2) { border-bottom: 1px solid currentColor; }
  .vn-collection-grid { grid-template-columns: 1fr; }
  .vn-collection-card { min-height: 62vh; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.2); }
  .vn-collection-card:last-child { border-bottom: 0; }
}
@media (max-width: 760px) {
  .vn-section { padding-block: 82px; }
  .vn-display-title { font-size: clamp(48px, 16vw, 76px); }
  .vn-fact-grid { grid-template-columns: 1fr; }
  .vn-fact, .vn-fact:nth-child(2) { min-height: 150px; border-right: 0; border-bottom: 1px solid currentColor; }
  .vn-fact:last-child { border-bottom: 0; }
  .vn-concierge-grid__head, .vn-faq-layout { grid-template-columns: 1fr; }
  .vn-concierge-grid__head { margin-bottom: 42px; }
  .vn-concierge-grid__head p { margin-left: 0; }
  .vn-service-grid { grid-template-columns: 1fr; }
  .vn-service-card, .vn-service-card--wide { min-height: 330px; grid-column: auto; }
  .vn-faq-layout { gap: 30px; }
  .vn-faq-layout h2 { font-size: clamp(54px, 17vw, 82px); }
  .vn-footer__inner { grid-template-columns: 1fr; }
  .vn-footer__inner > :last-child { text-align: left; }
  .vn-venue-switcher { flex-wrap: wrap; }
  .vn-collection-hero { min-height: 82vh; }
  .vn-collection-hero h1 { font-size: clamp(64px, 20vw, 96px); }
  .vn-collection-intro { margin-left: 0; }
  .vn-collection-scroll { display: none; }
  .vn-collection-card { min-height: 68vh; padding: 22px; }
  .vn-collection-card__meta { top: 25px; right: 22px; }
  .vn-collection-card__title h2 { font-size: clamp(64px, 20vw, 98px); }
}
@media (prefers-reduced-motion: reduce) {
  .motion-ready .vn-reveal { opacity: 1; transform: none; }
}

/* ─── Bloque de enlaces finales ──────────────────────────────────────
   Viene de services.css, pensado para paginas claras. Aqui la pagina es
   oscura, asi que solo hay que repintar el texto y los enlaces. */
.vn-page .svc-related {
  background: var(--ink);
  border-top: 1px solid var(--line-dark);
}
.vn-page .svc-related .svc-section-tag { color: var(--gold); }
.vn-page .svc-related p { color: var(--ivory-dim); }
.vn-page .svc-related a {
  color: var(--ivory);
  border-bottom: 1px solid rgba(242, 237, 227, 0.28);
}
.vn-page .svc-related a:hover { color: var(--gold); border-bottom-color: var(--gold); }