/*
 * Tour de Fantasmas landing (templates/tour.html): readable sizes, a header
 * that navigates on every screen, the Instagram carousel in "Leyendas" and a
 * subtle Halloween layer (flashlight in the hero, ghosts to find). The page
 * uses inline styles, hence the !important.
 */

/* ---------- type scale: smaller, easier to read ---------- */
h1, h2 { font-family: "Sharp Grotesk", "Arial Narrow", sans-serif !important; font-weight: 700 !important; letter-spacing: -.01em !important; }
.hero h1 { font-size: clamp(30px, 4.2vw, 54px) !important; line-height: 1.02 !important; max-width: 20ch !important; }
section h2 { font-size: clamp(28px, 3.4vw, 46px) !important; line-height: 1.04 !important; }
.big-title { font-family: "Bootzy", "Sharp Grotesk", sans-serif !important; font-weight: 400 !important; letter-spacing: 1pt !important;
  font-size: clamp(34px, 5.2vw, 68px) !important; }
.cierre h2 { font-size: clamp(32px, 4.8vw, 62px) !important; }
.ink-casa h2 { font-size: clamp(34px, 4vw, 54px) !important; }
section p { font-size: 17px !important; line-height: 1.55 !important; }
section h3 { font-size: clamp(24px, 2.4vw, 32px) !important; }
.dato { font-size: 23px !important; }
#planes [style*="font-size: 54px"] { font-size: 42px !important; }
#planes [style*="font-size: 36px"] { font-size: 28px !important; }
#empresas .ink-box > div:first-child { font-size: 20px !important; }
details summary { font-size: 18px !important; padding: 18px 0 !important; }

/* ---------- vertical rhythm: less empty space ---------- */
section { padding-top: 72px !important; padding-bottom: 72px !important; }
.hero { padding-top: 56px !important; padding-bottom: 64px !important; }
.hero > div:not(.fog) { gap: 20px !important; }
.hero > div:not(.fog) > img { width: min(560px, 88%) !important; }
.quees { min-height: 0 !important; padding-top: 110px !important; padding-bottom: 110px !important; }
.cierre { padding-top: 110px !important; padding-bottom: 110px !important; }
#planes > div, #leyendas > div { gap: 32px !important; }
.ink-outline, .ink-pink { padding: 30px !important; gap: 18px !important; }
.ink-casa { padding: 34px 32px !important; }
footer { padding: 40px 24px 36px !important; }
footer img { width: min(420px, 100%) !important; margin: 0 auto; }

/* ---------- header: logo, section nav, booking ---------- */
.ink-hdr > div { flex-wrap: wrap; padding: 10px 24px !important; row-gap: 6px !important; }
.ink-hdr > div > a:first-child img { height: 26px !important; }
.tl-nav { display: flex; gap: 6px; margin-left: auto; font-size: 15px; }
.tl-nav a { padding: 8px 12px; border-radius: 999px; text-decoration: none; color: #F4EEDE; white-space: nowrap; transition: background .2s, color .2s; }
.tl-nav a:hover, .tl-nav a.is-active { background: rgba(199, 221, 56, .16); color: #C7DD38; }
.tl-actions { display: flex; align-items: center; }
.tl-actions .ink { padding: 10px 18px !important; min-height: 40px !important; font-size: 15px; }
@media (max-width: 900px) {
  .tl-nav { order: 3; width: 100%; margin: 0 -24px; padding: 2px 24px 4px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .tl-nav::-webkit-scrollbar { display: none; }
  .tl-nav a { padding: 6px 12px; background: rgba(244, 238, 222, .08); font-size: 14px; }
  .ink-hdr > div { padding: 8px 16px !important; }
}

/* ---------- practical data: compact tiles ---------- */
section[style*="#662D91"] .g6 { gap: 12px !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
section[style*="#662D91"] .g6 > div { padding: 18px 20px !important; border-radius: 16px; background: rgba(255, 255, 255, .07); }
@media (max-width: 900px) { section[style*="#662D91"] .g6 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 480px) {
  section[style*="#662D91"] .g6 > div { padding: 14px !important; }
  .dato { font-size: 19px !important; }
  section[style*="#662D91"] .g6 > div > div:last-child { font-size: 13px !important; }
}

/* ---------- phones ---------- */
@media (max-width: 560px) {
  section { padding-top: 52px !important; padding-bottom: 52px !important; }
  .hero { padding-top: 36px !important; padding-bottom: 48px !important; }
  .hero p { font-size: 16px !important; }
  .cierre { padding: 80px 20px !important; }
  .ink-outline, .ink-pink, .ink-casa { padding: 24px 20px !important; }
  section p { font-size: 16px !important; }
  .tl-legend-list b { font-size: 21px; }
  section h2 { font-size: 34px !important; }
  .hero h1 { font-size: 34px !important; }
  #incluye li { font-size: 16px; padding: 10px 0 !important; }
  .ink-casa > div > div { padding: 12px 14px !important; font-size: 15px; }
}

/* ---------- Halloween layer (assets/tour-landing.js) ---------- */
/* Flashlight: the hero darkens and the pointer lights the way. */
.hero { --fx: 50%; --fy: 40%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(circle 220px at var(--fx) var(--fy), transparent 0 55%, rgba(12, 8, 18, .55) 100%); }
.hero.tl-lit::before { opacity: 1; }

/* Flicker on the hero logo, like a candle. */
@keyframes tl-flicker { 0%, 100% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: .55; } 94% { opacity: 1; } 96% { opacity: .7; } 97% { opacity: 1; } }
.hero > div:not(.fog) > img { animation: tl-flicker 7s infinite; }

/* Hidden ghosts: find all of them. */
.tl-ghost { position: absolute; z-index: 5; width: 42px; height: 48px; padding: 0; border: 0; background: none; cursor: pointer; opacity: .28;
  filter: drop-shadow(0 0 6px rgba(199, 221, 56, .0)); transition: opacity .3s, transform .3s, filter .3s; animation: tl-float 4.5s ease-in-out infinite; }
.tl-ghost svg { width: 100%; height: 100%; display: block; }
.tl-ghost:hover, .tl-ghost:focus-visible { opacity: .95; transform: scale(1.12); filter: drop-shadow(0 0 10px rgba(199, 221, 56, .8)); }
.tl-ghost.is-found { opacity: 0; transform: translateY(-30px) scale(.6); pointer-events: none; }
@keyframes tl-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.tl-boo { position: absolute; z-index: 6; max-width: 240px; padding: 10px 14px; border-radius: 14px; background: #F4EEDE; color: #312A2A;
  font: 600 14px/1.35 Archivo, sans-serif; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); animation: tl-pop .25s ease-out; pointer-events: none; }
.tl-boo b { display: block; font-size: 16px; color: #662D91; }
@keyframes tl-pop { from { opacity: 0; transform: translateY(6px) scale(.95); } to { opacity: 1; transform: none; } }

/* Counter pill */
.tl-hunt { position: fixed; left: 16px; bottom: 16px; z-index: 50; display: flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px;
  border-radius: 999px; background: rgba(38, 31, 31, .92); color: #F4EEDE; border: 1px solid rgba(199, 221, 56, .4);
  font: 600 13px Archivo, sans-serif; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); backdrop-filter: blur(6px); }
.tl-hunt svg { width: 20px; height: 22px; }
.tl-hunt.is-done { background: #C7DD38; color: #312A2A; }
.tl-hunt a { color: inherit; font-weight: 800; margin-left: 4px; }
.tl-hunt.bump { animation: tl-bump .4s ease; }
@keyframes tl-bump { 50% { transform: scale(1.12); } }

@media (prefers-reduced-motion: reduce) {
  .hero > div:not(.fog) > img, .tl-ghost, .tl-hunt.bump { animation: none !important; }
  .hero::before { display: none; }
}

/* ---------- galleries: legends (cards) and experience photos ---------- */
.tl-legends { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.tl-card { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.tl-card figcaption { display: flex; flex-direction: column; gap: 2px; }
.tl-card figcaption b { font-family: "Bootzy", "Sharp Grotesk", sans-serif; font-weight: 400; letter-spacing: 1pt; font-size: 22px; line-height: 1.1; }
.tl-card figcaption span { font-size: 15px; line-height: 1.4; }
.tl-zoom { display: block; width: 100%; padding: 0; border: 0; background: #312A2A; border-radius: 16px; overflow: hidden; cursor: zoom-in;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .6); transition: transform .25s ease, box-shadow .25s ease; }
.tl-zoom img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease, filter .4s ease; }
.tl-card .tl-zoom { aspect-ratio: 4 / 5; }
.tl-zoom:hover, .tl-zoom:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 30px -14px rgba(0, 0, 0, .7); }
.tl-zoom:hover img { transform: scale(1.04); }
.tl-ig-link { margin: 0 !important; }
.tl-ig-link a, .tl-photos-link { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
#fotos .tl-photos-link { color: #C7DD38 !important; }
@media (max-width: 1000px) { .tl-legends { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tl-photos-grid { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.tl-photos-text { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.tl-kicker { margin: 0; font: 700 13px Archivo, sans-serif !important; letter-spacing: .14em; text-transform: uppercase; color: #FAB7E6; }
/* mosaic: one large photo, the rest in a tight grid */
.tl-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 150px; grid-auto-flow: dense; gap: 10px; }
.tl-gallery .tl-shot { border-radius: 12px; }
.tl-gallery .tl-shot:first-child { grid-column: span 2; grid-row: span 2; }
.tl-gallery .tl-shot:nth-child(8) { grid-column: span 2; grid-row: span 2; }
@media (min-width: 1100px) { .tl-gallery { grid-auto-rows: 170px; } }
/* phones: a strip to swipe instead of a tall mosaic */
@media (max-width: 700px) {
  .tl-gallery { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 0 20px 6px; scrollbar-width: none; }
  .tl-gallery::-webkit-scrollbar { display: none; }
  .tl-gallery .tl-shot { flex: 0 0 78%; height: 230px; scroll-snap-align: center; }
  .tl-gallery .tl-shot:first-child, .tl-gallery .tl-shot:nth-child(8) { grid-column: auto; grid-row: auto; }
}

/* ---------- lightbox ---------- */
.tl-lightbox { position: fixed; inset: 0; z-index: 2147482500; display: grid; grid-template-rows: 1fr auto; background: rgba(15, 10, 14, .94); color: #F4EEDE; }
.tl-lightbox[hidden] { display: none; }
.tl-lb-stage { position: relative; display: grid; place-items: center; padding: 56px 64px 8px; min-height: 0; }
.tl-lb-stage img { max-width: 100%; max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); object-fit: contain; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.tl-lb-bar { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; padding: 12px 16px 20px; font: 600 14px Archivo, sans-serif; }
.tl-lb-bar a { color: #C7DD38; }
.tl-lb-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(244, 238, 222, .14); color: #F4EEDE; font-size: 26px; line-height: 1; }
.tl-lb-btn:hover { background: #C7DD38; color: #312A2A; }
.tl-lb-prev { left: 12px; }
.tl-lb-next { right: 12px; }
.tl-lb-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(244, 238, 222, .14); color: #F4EEDE; font-size: 24px; }
.tl-lb-close:hover { background: #F4EEDE; color: #312A2A; }
@media (max-width: 600px) { .tl-lb-stage { padding: 56px 8px 8px; } .tl-lb-btn { top: auto; bottom: -56px; transform: none; } }
html.tl-lb-open { overflow: hidden; }

/* ---------- smoother scrolling ---------- */
/* The blurred sticky header over animated fog repainted on every frame. */
.ink-hdr { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(38, 31, 31, .97) !important; }
.hero.tl-paused .fog { animation-play-state: paused !important; }

/* The "ink" edges used SVG turbulence filters (filter: url(#ink)) on ~30
   elements; the browser recomputed them on every frame, so scrolling took
   ~190ms per frame. The irregular border-radius keeps the hand-drawn look. */
.ink::before, .ink-card::before, .ink-box::before, .ink-casa::before, .ink-outline::before, .ink-pink::before,
.ink-rule::after, .ink-top::before, .ink-hdr::after { filter: none !important; }
.ink:hover::before { filter: brightness(.92) !important; }
.ink-line:hover::before { filter: none !important; background: rgba(244, 238, 222, .1) !important; }
.ink-card::before, .ink-outline::before, .ink-pink::before, .ink-casa::before { border-radius: 26px 18px 30px 16px / 18px 28px 16px 26px !important; }

@media (max-width: 759px) {
  /* the tabs scroll sideways: fade the edge so it shows there are more */
  .tl-nav { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); scrollbar-width: none; }
  .tl-nav::-webkit-scrollbar { display: none; }
}