/* ---------- Fonts ---------- */
/* Inter (body/UI text) loads from Google Fonts — see the <link> in
   index.html's <head>. Reckless Condensed (display headlines) is still
   self-hosted below; nothing in that family changed. Now points at the
   properly web-licensed woff2/woff (public/fonts/Reckless/), not the old
   loose .ttf that sat directly in public/fonts/ — that one was never
   licensed for web embedding, just a desktop copy used during development. */
@font-face {
  font-family: "Reckless Condensed";
  src: url("../fonts/Reckless/RecklessCondensedM-Book.woff2") format("woff2"),
       url("../fonts/Reckless/RecklessCondensedM-Book.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

/* ---------- Tokens ---------- */
:root {
  --ink: #1d1d1b;
  --ink-soft: rgba(29, 29, 27, 0.7);
  --white: #ffffff;
  --sky-1: #ffffff;
  --sky-2: #b8e5ff;
  --sky-3: #70cbff;
  --sky-mid: #94d8ff;
  --border: rgba(13, 13, 13, 0.14);
  --border-soft: rgba(13, 13, 13, 0.08);
  --max: 1440px;
  --side: 80px;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Reckless Condensed", Georgia, serif;
}

* { box-sizing: border-box; }
/* .full-bleed-divider (and a couple of other spots) use `100vw` to bleed
   past a centered, max-width section — but 100vw is measured against the
   viewport INCLUDING the scrollbar, while the page's own actual width
   (and where things get centered) excludes it, so the moment a vertical
   scrollbar is present those bleeds overshoot by the scrollbar's width and
   introduce a horizontal scrollbar. Whether a vertical scrollbar shows up
   at all depends on total page height, so this was latent until the hero's
   height changed enough to cross that threshold. The overshoot is only
   ever decorative (a 1px divider line, or content already clipped by an
   overflow:hidden ancestor), so hiding it here is safe rather than trying
   to chase every vw usage individually. */
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  /* One continuous gradient for the whole page — four corner diagonals
     tiling into a single diamond blend, exact values supplied by the client.
     Each quadrant is sized very slightly over 50% (instead of exactly 50%)
     so they overlap by half a pixel at the shared center seam instead of
     meeting edge-to-edge — on odd viewport widths, four 50%-sized layers
     that should align pixel-perfectly can be forced to round in different
     directions and leave a 1px white seam right down the middle (visible
     on ultra-wide screens). The overlap is invisible since all four layers
     are the same near-white color right at that shared center point. */
  background:
    linear-gradient(to bottom right, #fff 4%, #70cbff 70%) bottom right / 50.5% 50.5% no-repeat,
    linear-gradient(to bottom left, #fff 4%, #70cbff 70%) bottom left / 50.5% 50.5% no-repeat,
    linear-gradient(to top left, #fff 4%, #70cbff 70%) top left / 50.5% 50.5% no-repeat,
    linear-gradient(to top right, #fff 4%, #70cbff 70%) top right / 50.5% 50.5% no-repeat;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.visually-hidden:focus {
  z-index: 100;
  width: auto;
  height: auto;
  padding: 0.75rem 1.25rem;
  clip: auto;
  background: var(--ink);
  color: var(--white);
  top: 0;
  left: 0;
}
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 400; }
p { margin: 0; line-height: 1.55; }
a { color: inherit; text-decoration: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75em 1.6em;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.btn:hover { opacity: 0.85; }
.btn--dark { background: var(--ink); color: var(--white); }
.btn--outline {
  background: linear-gradient(90deg, #d3d3d3 0%, #ffffff 47.6%, #d3d3d3 100%);
  color: #000;
  text-align: center;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  border-color: #000;
}
/* Every light/outline CTA (table rows, form submit) goes solid black on
   hover — except the topbar pill's own CTA, which keeps the plain opacity
   dim from .btn:hover above. */
.btn--outline:hover {
  background: #000;
  color: #fff;
  opacity: 1;
}

/* ---------- Nav: infinite marquee with a floating "next edition" pill ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 82px;
  display: flex;
  align-items: center;
  background: var(--sky-3);
  border-bottom: 1px solid #000;
  overflow: hidden;
}
.nav__marquee {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.nav__marquee-track {
  display: flex;
  /* Baseline-align every child to the bottom of the logo, and use ONE gap
     value for every gap in the track — logo-to-phrase and phrase-to-next-
     logo alike — so a group boundary is never wider than the space inside
     a group. */
  align-items: baseline;
  gap: 20px;
  width: max-content;
  flex-shrink: 0;
  animation: nav-marquee 32s linear infinite;
}
@keyframes nav-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .nav__marquee-track { animation-play-state: paused; }
}
.nav__marquee-phrase {
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #000;
  /* Nudge up (paint-only, doesn't affect the track's own layout/gap) so it
     reads as sitting on the logo's visual baseline instead of a hair below it. */
  transform: translateY(-2px);
}
.nav__logo { width: 244px; height: auto; flex-shrink: 0; }

/* Floating over the marquee, inset 10px from the nav's top/right/bottom
   edges. Used to sit inside a wider bordered pill (label + edition picker +
   CTA); now it's just the CTA itself, its own .btn--outline gradient doing
   the "floating capsule" look. */
.nav__cta {
  /* Positioning only — everything else (padding, font, gradient, border)
     comes from .btn/.btn--outline, same as every other CTA on the page. */
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  z-index: 2;
}

/* ---------- Hero ---------- */
.hero {
  /* 95% of the viewport (minus the sticky nav's own 82px, so the two
     together don't exceed one screen) instead of the full 100% — leaves a
     sliver of the next section visible on load as a hint there's more to
     scroll to, per feedback. dvh (where supported) accounts for mobile
     browser chrome showing/hiding; vh is the fallback. */
  height: calc(95vh - 82px);
  height: calc(95dvh - 82px);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.hero__media {
  /* Full-bleed background, edge to edge — no horizontal padding here (kept
     on .hero__tagline instead), so the video always fills the whole
     section regardless of --side, at any width — no cap. Ultra-wide
     screens (≥2200px, matching the threshold used elsewhere on this page
     for "ultra-wide") get a dedicated wider source instead (hero-UW.mp4,
     picked via <source media> in the markup) rather than upscaling the
     regular 1080p one. */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 0;
}
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero__logo {
  position: relative;
  z-index: 1;
  width: min(700px, 60%);
}
.hero__tagline {
  /* Pinned to the bottom of the hero, independent of the logo's own
     centering above it — per design, not stacked directly under the logo
     with a fixed gap. */
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1100px;
  padding: 0 var(--side);
  color: #1D1D1B;
  text-align: center;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px;
}
/* A pixel-tuned max-width alone isn't fully reliable here, so each half is
   locked to nowrap instead: that makes 2 lines a hard guarantee as long as
   there's enough room (hero's own side padding leaves ~1040px+ once the
   viewport is 1200px+) — below that there isn't room for this line length
   at 26px, so it's allowed to wrap normally instead of overflowing. Now
   that this renders in Inter everywhere (loaded with its real 600/
   SemiBold face — see the Fonts section), it no longer depends on which
   font weight a given machine happens to substitute in, but the nowrap
   guarantee is harmless to keep regardless.
   The first half is actually wider than .hero__tagline's own 1100px
   max-width (~940px once its side padding is subtracted) at every desktop
   size, since the cap doesn't grow with the viewport — so it always
   overflows its centered box. text-align:center (the previous approach)
   silently gives up and left-aligns instead of centering the moment inline
   content overflows its line box (verified empirically, not just per
   spec) — it only *looked* centered for the shorter second half, which
   fits. Switching to a flex column sidesteps that: flexbox's centering
   keeps overflow symmetric on both sides instead of collapsing to 0, the
   same way .hero__tagline itself stays centered on .hero via
   left:50%/translateX(-50%) rather than margin auto. The <br> becomes
   redundant once each seg is its own flex row, and worse, would render as
   its own (empty) row — hidden here rather than removed from the markup,
   since it's still needed for the plain inline flow below 1200px. */
@media (min-width: 1200px) {
  .hero__tagline-seg { white-space: nowrap; }
  .hero__tagline { display: flex; flex-direction: column; align-items: center; }
  .hero__tagline br { display: none; }
}

/* ---------- Welcome ---------- */
/* .full-bleed-divider draws a full-viewport-width black line at the top of
   a section even though the section itself is a max-width, centered box —
   the sections in Figma are separated by lines that run edge to edge. */
.full-bleed-divider { position: relative; }
.full-bleed-divider::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 1px;
  background: #000;
  transform: translateX(-50%);
}
/* Full viewport width, 50/50 — the image bleeds edge to edge (no side
   padding/max-width), unlike every other section which is capped at --max
   and inset by --side. Only .welcome__content carries a side padding, on
   its outer edge, to keep the text off the browser edge. */
.welcome {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  /* stretch (not center) so the image cell takes the exact height of the
     taller text column, flush top-to-bottom with no letterboxing — same as
     the Figma layout, where the photo's height matches the text block. */
  align-items: stretch;
}
/* Bleeds edge to edge at every normal desktop width, 1440 included — only
   past 2200px (true ultra-wide) does it stop growing and center instead,
   per explicit request: this cap is for ultra-wide only, not for 1440. */
@media (min-width: 2200px) {
  .welcome { max-width: var(--max); margin: 0 auto; }
}
.welcome__content {
  padding: 5rem var(--side) 5rem 0;
}
.welcome__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.welcome__content h2 {
  color: #1d1d1b;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 50px;
  font-style: normal;
  font-weight: 700;
  line-height: 50px;
  margin-bottom: 1.5rem;
}
.welcome__content p {
  color: #1d1d1b;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  margin-bottom: 1rem;
}
/* Per Figma this is the same run/style as the surrounding paragraph (Neue
   Haas, 16px/22px) — only the weight steps up for emphasis. Not a Reckless
   Condensed display headline like the section titles. */
.welcome__question {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  color: var(--ink) !important;
  margin: 1.5rem 0 70px !important;
}
.welcome__list { margin: 0; }
/* Stacked, not side-by-side: label, then a rule right under it, then the
   description below spanning the full width — matches the Figma layout
   (label + hairline + description, not a two-column definition list). */
.welcome__item { margin-bottom: 1.6rem; }
.welcome__item:last-child { margin-bottom: 0; }
.welcome__item dt {
  display: block;
  color: #1d1d1b;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.welcome__item-rule {
  display: block;
  height: 1px;
  background: #000;
  margin: 0.2rem 0 0.65rem;
}
.welcome__item dd {
  margin: 0;
  color: #1d1d1b;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

/* ---------- Steps ---------- */
.steps {
  text-align: center;
  padding: 120px var(--side) 190px;
  border-top: 1px solid #000;
}
.steps h2 {
  color: #1d1d1b;
  text-align: center;
  font-family: "Reckless Condensed M", "Reckless Condensed", Georgia, serif;
  font-size: 88px;
  font-style: normal;
  font-weight: 300;
  line-height: 80px;
  letter-spacing: -2.64px;
}
.steps__subtitle {
  margin-top: 35px;
  color: #1d1d1b;
  text-align: center;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px;
}
.steps__grid {
  max-width: var(--max);
  margin: 70px auto 0;
  /* .steps has its own 1.5rem side padding (needed since .steps itself has
     no max-width, for the border-top divider to stay full-bleed) — mirror
     that same padding here so the grid lines up with sections like .recap,
     which apply padding and max-width on the same element. */
  padding: 0 var(--side);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  text-align: left;
}
.step-card {
  background: var(--sky-3);
  border: 1px solid #000;
  padding: 1.75rem;
}
.step-card__number,
.step-card h3 {
  display: block;
  color: #1d1d1b;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px;
}
.step-card__number { margin-bottom: 0.75rem; }
.step-card h3 {
  margin-bottom: 0.6rem;
}
.step-card p {
  color: #1d1d1b;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

/* ---------- Recap ---------- */
.recap {
  max-width: var(--max);
  margin: 0 auto;
  /* Bottom padding here is what creates the gap before the photo gallery,
     since that gallery is the very next element with no top spacing of
     its own. */
  padding: 90px var(--side) 70px;
}
.recap__meta {
  display: flex;
  align-items: center;
  width: fit-content;
  gap: 1.5rem;
  border: 1px solid #000;
  padding: 0.5rem 1.1rem;
  color: #1d1d1b;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 44px;
}
.recap h2 {
  color: #1d1d1b;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 50px;
  font-style: normal;
  font-weight: 700;
  line-height: 50px;
  margin-bottom: 44px;
}
.recap__text {
  max-width: 680px;
  color: #1d1d1b;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  margin-bottom: 1.5rem;
}
.recap__partner {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  font-size: 16px;
  font-weight: 500;
}
.recap__partner-logo { width: 50px; height: auto; }
/* Scroll-jacked horizontal filmstrip. The outer wrapper's height is set by
   JS to the pinned height plus however much horizontal distance the track
   needs to travel; the inner ".recap-gallery__sticky" pins itself under the
   nav while that extra height scrolls past, and main.js drives the track's
   translateX from that same scroll progress — so no native scrollbar is
   ever shown, and normal vertical scroll takes back over the instant the
   last photo is in view. Each photo keeps its own native aspect ratio (no
   crop/object-fit), only scaled uniformly to the strip's height. */
.recap-gallery {
  position: relative;
}
.recap-gallery__sticky {
  position: sticky;
  top: 160px;
  height: 460px;
  /* Stays full viewport width on purpose — capping it to --max like .recap
     would make overflow:hidden clip at that inner boundary, showing a hard
     seam against the background on wide screens. Alignment with the text
     above is handled instead by main.js, which measures .recap's actual
     rendered inset and applies it as this track's padding directly. */
  display: flex;
  align-items: center;
  overflow: hidden;
}
.recap-gallery__track {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0 var(--side);
  will-change: transform;
}
.recap-gallery__track img {
  height: 420px;
  width: auto;
  max-width: none;
  flex-shrink: 0;
}

/* ---------- Upcoming table ---------- */
.upcoming {
  padding: 120px var(--side) 190px;
  text-align: center;
  border-top: 1px solid #000;
}
.upcoming h2 {
  color: #1d1d1b;
  text-align: center;
  font-family: "Reckless Condensed M", "Reckless Condensed", Georgia, serif;
  font-size: 88px;
  font-style: normal;
  font-weight: 300;
  line-height: 80px;
  letter-spacing: -2.64px;
}
.upcoming__subtitle {
  margin-top: 35px;
  color: #1d1d1b;
  text-align: center;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px;
}
.upcoming__table {
  max-width: var(--max);
  margin: 70px auto 0;
  border-top: 1px solid #000;
  text-align: left;
}
.upcoming__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.2fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0.5rem;
  border-bottom: 1px solid #000;
  color: #1d1d1b;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.upcoming__city { text-transform: uppercase; }
.upcoming__partner {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
/* Keep .upcoming__partner on align-items: center — same as every other
   cell in .upcoming__row — so "Partner" stays level with the city/date/
   button cells. The Iberia mark's viewBox includes the feather/swoosh
   below the wordmark, which pulls its visual center down relative to the
   "IBERIA" letters themselves; nudge just the image up so those letters
   (not the swoosh) land on "Partner"'s baseline. transform doesn't affect
   layout, so this can't disturb the row's own alignment again. */
.upcoming__partner img[alt="Iberia"] { transform: translateY(6px); }
/* Each partner SVG was exported at its own intended on-screen size for
   this table ("-tabla" in the filename) — no forced height here, just use
   the width/height already set on the <img> tag. */
.upcoming__row > span:last-child { justify-self: end; }
/* Sustituye al CTA en ediciones ya pasadas — texto plano atenuado, sin
   aspecto de botón para que no parezca clicable. */
.upcoming__status {
  display: inline-grid;
  place-items: center;
}
.upcoming__status > * { grid-area: 1 / 1; }
.upcoming__status > :last-child {
  color: #8a8a8a;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.upcoming__status > .btn { visibility: hidden; }
/* Por debajo de 1300px la celda del CTA ocupa su propia fila (ver las
   media queries de .upcoming__row), así que no hay columnas que alinear:
   sin el hueco reservado, "Finalizado" queda pegado a la izquierda como
   el resto de la fila. */
@media (max-width: 1300px) {
  .upcoming__status > .btn { display: none; }
}
/* Sedes, bajo la tabla (nuevo en el diseño, node 811:234/235) — flex con un
   gap fijo en vez de las posiciones absolutas del Figma (que no tienen
   sentido en un layout fluido); mismo max-width/centrado que .upcoming__table
   para alinear con la tabla de arriba. */
.upcoming__venues {
  max-width: var(--max);
  margin: 56px auto 0;
  display: flex;
  gap: 3rem;
  text-align: left;
}
.upcoming__venue {
  color: #1d1d1b;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 700;
}
.upcoming__venue-label { display: block; margin-bottom: 0.25em; text-transform: uppercase; }
.upcoming__venue a { color: inherit; text-decoration: underline; }

/* ---------- Embarque / form ---------- */
.embarque {
  /* 50/50, image bled to the right edge — same treatment as .welcome,
     mirrored (content first/left this time). */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: stretch;
}
/* Bleeds edge to edge at every normal desktop width, 1440 included — only
   past 2200px (true ultra-wide) does it stop growing and center instead,
   per explicit request: this cap is for ultra-wide only, not for 1440. */
@media (min-width: 2200px) {
  .embarque { max-width: var(--max); margin: 0 auto; }
}
.embarque__content {
  padding: 5rem 0 5rem var(--side);
}
/* Once .embarque itself is capped at --max and centered (ultra-wide
   screens), its own left edge already lines up with sections like
   .upcoming (which inset via outer padding, not this content padding) —
   so the extra var(--side) here would double up and push the text past
   the table's left edge. Drop it once the cap is actually engaged
   (same 2200px threshold as the cap above). */
@media (min-width: 2200px) {
  .embarque__content { padding-left: 0; }
}
.embarque__content h2 {
  color: #1d1d1b;
  font-family: "Reckless Condensed M", "Reckless Condensed", Georgia, serif;
  font-size: 88px;
  font-style: normal;
  font-weight: 300;
  line-height: 80px;
  letter-spacing: -2.64px;
  margin-bottom: 1rem;
}
.embarque__content > p {
  width: 95%;
  color: #1d1d1b;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  margin-bottom: 2rem;
}
.embarque__form { width: 95%; display: flex; flex-direction: column; gap: 1rem; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.form-row--full { grid-template-columns: 1fr; }
.embarque__form input,
.embarque__form select,
.embarque__form textarea {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #1d1d1b;
  padding: 1em 1.1em;
  border: 1px solid #000;
  background: transparent;
  appearance: none;
  border-radius: 0;
  resize: vertical;
}
/* Native <select> arrows are painted by the browser's own UI chrome, right
   at the true edge — they ignore padding-right in most engines. Draw our
   own chevron instead so the 26px gap from the border is actually real. */
.embarque__form select {
  cursor: pointer;
  appearance: none;
  font-weight: 700;
  padding-right: 50px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'><path d='M1 1.5L7 7.5L13 1.5' stroke='%231d1d1b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 26px center;
}
.embarque__form input::placeholder,
.embarque__form textarea::placeholder {
  color: rgba(0, 0, 0, 0.3);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.embarque__form input:focus,
.embarque__form textarea:focus {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}
.embarque__consent {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1d1d1b;
  cursor: pointer;
}
/* Custom box instead of the native checkbox — browser-drawn checkmarks
   render tiny and easy to miss at this size; this fills solid black with a
   white check the moment it's ticked, so "checked" is unambiguous. */
.embarque__consent input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  border: 1px solid #000;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
.embarque__consent input[type="checkbox"]:checked {
  background-color: var(--ink);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9' fill='none'><path d='M1 4.5L4.2 7.7L11 1' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.embarque__consent a { color: inherit; text-decoration: underline; }
/* Anti-spam arithmetic check. Sits on the same baseline as the consent row
   and borrows the form's input styling, so it reads as one more field rather
   than a bolted-on widget. The answer box is deliberately narrow — it only
   ever takes one or two characters. */
.embarque__challenge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1d1d1b;
}
.embarque__challenge input[type="text"] {
  width: 5.5rem;
  flex: 0 0 auto;
}
.embarque__submit { margin-top: 0.5rem; align-self: flex-start; }
.embarque__status { font-size: 0.85rem; min-height: 1.2em; }
.embarque__status[data-state="ok"] { color: #1a7a3c; }
.embarque__status[data-state="error"] { color: #b3261e; }
.embarque__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Legal (politica-privacidad.html) ---------- */
.legal {
  max-width: 900px;
  margin: 0 auto;
  padding: 160px var(--side) 120px;
}
.legal h1 {
  /* Same recipe as every other section's Reckless Condensed h2 (.steps h2,
     .upcoming h2, etc.) — this is just an h1 instead, since it's the one
     heading on the page. */
  font-family: "Reckless Condensed M", "Reckless Condensed", Georgia, serif;
  font-size: 88px;
  font-weight: 300;
  line-height: 80px;
  letter-spacing: -2.64px;
  color: #1d1d1b;
  margin-bottom: 56px;
}
.legal h2 {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
  color: #1d1d1b;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: #1d1d1b;
}
.legal p { margin-bottom: 1rem; }
.legal ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.legal li { margin-bottom: 0.75rem; }
.legal li:last-child { margin-bottom: 0; }
.legal a { color: inherit; }
@media (max-width: 900px) {
  .legal { padding-top: 120px; }
  .legal h1 { font-size: 64px; line-height: 58px; letter-spacing: -1.92px; margin-bottom: 40px; }
}
@media (max-width: 520px) {
  .legal { padding-left: 1rem; padding-right: 1rem; }
}

/* ---------- Footer ---------- */
.footer {
  padding: 90px var(--side) 40px;
  overflow: hidden;
  border-top: 1px solid #000;
}
.footer__top {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 0.75rem;
}
.footer__top a { color: inherit; text-decoration: underline; }
.footer__logo {
  width: 100%;
  max-width: var(--max);
  margin: 216px auto 0;
  display: block;
}

/* ---------- News drawer ---------- */
/* Floating trigger tab, per the Figma floating-hero-element design
   (node 741:45) — a small gradient tab pinned just under the nav, left
   edge. top:103px = nav's own 82px height + the 21px gap Figma gives it,
   so it sits consistently right under the nav regardless of scroll. */
.news-fab {
  position: fixed;
  top: 103px;
  left: 20px;
  z-index: 60;
  width: 85px;
  height: 50px;
  /* Centered (equal padding on every side) rather than hand-tuned padding
     matched to this exact word/font — flex centering keeps it visually
     even regardless of glyph metrics. */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #000;
  background: linear-gradient(180deg, var(--sky-3), var(--white));
  font-family: "Reckless Condensed M", "Reckless Condensed", Georgia, serif;
  font-size: 35px;
  font-weight: 300;
  line-height: 40px;
  letter-spacing: -1.05px;
  color: #1d1d1b;
  cursor: pointer;
}
.news-drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  /* Hidden via the backdrop's opacity:0 and the panel's own off-screen
     transform below, not visibility — toggling visibility:hidden→visible
     on this wrapper in the same recalc as the panel's transform transition
     is what was causing the first open to jump straight to end state
     instead of animating (and in one browser, mis-paint) in testing. */
  pointer-events: none;
}
.news-drawer.is-open {
  pointer-events: auto;
}
.news-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(29, 29, 27, 0.45);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.news-drawer.is-open .news-drawer__backdrop { opacity: 1; }
.news-drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  /* 20px wider than the content itself needs, purely as clearance so the
     fixed close button (top:28/right:30, 25px wide) never overlaps the
     full-width images below it — see .news-drawer__scroll's asymmetric
     right padding, which is where that extra width actually goes. */
  width: 405px;
  max-width: 90vw;
  border-right: 1px solid #000;
  /* Same 4-corner diamond blend as the page background (see body, above).
     Widened the white area by pushing the blue stop out to 70% (matching
     the page background's own proportion) instead of the 50% first given.
     Sized at 50.5% rather than an exact 50%, for the same reason as the
     page background: at an exact 50/50 split, sub-pixel rounding on an odd
     panel width can leave a 1px seam down the middle; the extra 0.5%
     overlap is invisible since all four layers are near-white right at
     that shared center point. */
  background:
    linear-gradient(to bottom right, #fff 4%, #70cbff 70%) bottom right / 50.5% 50.5% no-repeat,
    linear-gradient(to bottom left, #fff 4%, #70cbff 70%) bottom left / 50.5% 50.5% no-repeat,
    linear-gradient(to top left, #fff 4%, #70cbff 70%) top left / 50.5% 50.5% no-repeat,
    linear-gradient(to top right, #fff 4%, #70cbff 70%) top right / 50.5% 50.5% no-repeat;
  transform: translateX(-100%);
  transition: transform 0.35s ease;
}
.news-drawer.is-open .news-drawer__panel { transform: translateX(0); }
.news-drawer__scroll {
  /* Images keep their real size (see .news-drawer__img) rather than being
     squashed to force everything into one screen — so this scrolls
     whenever the 3 full-size cards don't fit. The scrollbar itself stays
     hidden (below) so it reads as a plain no-chrome panel; scrolling still
     works via wheel/touch/keyboard. This is a separate element from
     .news-drawer__panel specifically so the close button (a sibling) can
     sit outside whatever scrolls. */
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* Right padding is 20px more than the left — that's the panel's extra
     width (see .news-drawer__panel), kept here so the close button has a
     clear gutter instead of sitting over the images. */
  padding: 56px 60px 32px 40px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.news-drawer__scroll::-webkit-scrollbar { display: none; }
.news-drawer__close {
  /* Fixed to .news-drawer__panel's own box (its `transform` above makes it
     the containing block for this), not the real viewport — deliberately,
     so it's positioned relative to the panel's actual edges (matters on
     desktop, where the panel is 385px wide, not full-viewport-wide) while
     still not scrolling away with .news-drawer__scroll's content, since
     it's that element's sibling rather than its descendant. */
  position: fixed;
  top: 28px;
  right: 30px;
  z-index: 1;
  width: 25px;
  height: 25px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.news-drawer__title {
  font-family: "Reckless Condensed M", "Reckless Condensed", Georgia, serif;
  font-size: 88px;
  font-weight: 300;
  line-height: 80px;
  letter-spacing: -2.64px;
  color: #1d1d1b;
  margin-bottom: 32px;
  flex-shrink: 0;
}
.news-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.news-drawer__item { display: flex; flex-direction: column; }
/* Wraps the headline + image so they're clickable too (same href as "Leer
   más" below), without adding a box of its own — display:contents means
   its two children still lay out exactly as if they were direct children
   of .news-drawer__item. */
.news-drawer__media-link { display: contents; }
.news-drawer__headline {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  color: #1d1d1b;
  margin-bottom: 0.5rem;
  flex-shrink: 0;
  /* Clamp to 2 lines so every card reserves the same amount of text height
     — otherwise a longer headline eats into its own image's share of the
     flexible space below while the other cards' images stay full-size. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.news-drawer__img {
  width: 100%;
  /* Fixed at the source aspect ratio — never shrunk to force everything
     into one screen (that made the images look squashed/low-res). The
     panel scrolls if the 3 full-size images don't fit; see .news-drawer__scroll. */
  aspect-ratio: 303 / 203;
  object-fit: cover;
  margin-bottom: 0.75rem;
}
.news-drawer__source {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #000;
  margin-bottom: 0.25rem;
  flex-shrink: 0;
}
.news-drawer__source span { text-transform: uppercase; }
.news-drawer__link {
  display: inline-block;
  flex-shrink: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #000;
  text-decoration: underline;
}
@media (max-width: 520px) {
  /* Full-screen on phone (not the 90vw side panel) — same border-less,
     edge-to-edge treatment as every other full-bleed mobile screen here.
     Scrolls under the always-fixed close button, same as desktop. */
  .news-drawer__panel { width: 100vw; max-width: 100vw; border-right: none; }
  /* Full-screen has no spare width to add like desktop does — the extra
     right padding (vs. left) is the only way left to keep the close button
     clear of the images here. */
  .news-drawer__scroll { padding: 72px 60px 32px 24px; }
  .news-drawer__title { font-size: 64px; line-height: 58px; letter-spacing: -1.92px; margin-bottom: 40px; }
  /* On phone the fab stays fixed to the viewport through the whole page,
     so it ends up parked on top of whichever section's text happens to
     scroll into its little rectangle (e.g. the embarque heading) — there's
     no scroll room to dodge it like there is on desktop. Scrolling it with
     the page instead removes the permanent overlap; the auto-open timer
     (main.js) is already gated off on phone, so there's no functional loss.
     z-index dropped below .nav's own 50 (was 60, above it): .nav is
     position:sticky, so as the now-absolute fab scrolls past the nav's
     on-screen position it would otherwise render in front of it for a
     moment, cutting across the topbar. */
  .news-fab { position: absolute; top: 103px; z-index: 40; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .welcome, .embarque { grid-template-columns: 1fr; }
  /* Stacked now, so the one-sided desktop padding (against the image on
     the other side) would read as a lopsided gap — go symmetric instead. */
  .welcome__content { padding: 56px var(--side) 64px; }
  .embarque__content { padding: 56px var(--side) 64px; }
  /* Same 56px top / 64px bottom on mobile as .welcome__content and
     .embarque__content above — desktop's 120px/190px only made sense
     against a much taller viewport, and read lopsided and oversized here. */
  .steps { padding-top: 56px; padding-bottom: 64px; }
  .upcoming { padding-top: 56px; padding-bottom: 64px; }
  .steps__grid { grid-template-columns: 1fr; }
  /* Same proportions as desktop (88px/80px/-2.64px), scaled down by the
     same ~0.727 factor (64/88) — at 88px this headline was wrapping into
     3+ oversized lines on phone widths. */
  .steps h2 { font-size: 64px; line-height: 58px; letter-spacing: -1.92px; }
  .steps__subtitle { font-size: 22px; line-height: 22px; }
  /* Same 88px Reckless headline as .steps h2 — same treatment. */
  .upcoming h2 { font-size: 64px; line-height: 58px; letter-spacing: -1.92px; }
  .upcoming__subtitle { font-size: 22px; line-height: 22px; }
  /* Same 88px Reckless headline; .embarque has no separate subtitle line. */
  .embarque__content h2 { font-size: 64px; line-height: 58px; letter-spacing: -1.92px; }
  .recap-gallery__sticky { height: 320px; top: 82px; }
  .recap-gallery__track img { height: 280px; }
  /* City/date/time (all short, unlike partner's logo) share one row of 3
     equal columns; partner and the CTA each get their own full-width row
     below. Targets .upcoming__partner by class (not nth-child) since time
     now sits between date and partner, shifting partner's own position. */
  .upcoming__row { grid-template-columns: 1fr 1fr 1fr; row-gap: 0.5rem; }
  .upcoming__partner { grid-column: 1 / -1; }
  .upcoming__row > span:last-child { grid-column: 1 / -1; justify-self: start; margin-top: 0.5rem; }
  .form-row { grid-template-columns: 1fr; }
  .upcoming__venues { gap: 2rem; }
}
/* Above 900px the row is still a single line (5 columns), but the widest
   partner logo (Iberia, 164px) plus its "Partner" label doesn't actually
   fit next to the CTA pill until ~1280px+ of real content width — checked
   by measuring each logo's rendered right edge against the CTA's left
   edge, not just eyeballing it. The city/date/time/partner columns keep
   their original desktop proportions (1fr/1fr/1fr/1.2fr) here — reworking
   them to auto-size instead of that visually broke the column alignment
   the design relies on — so the CTA is what moves instead: dropped to its
   own full-width row below, the same way it already does at ≤900px,
   leaving those 4 columns the entire row to themselves. */
@media (min-width: 901px) and (max-width: 1300px) {
  .upcoming { padding-left: 40px; padding-right: 40px; }
  .upcoming__row { grid-template-columns: 1fr 1fr 1fr 1.2fr; gap: 0.75rem; padding: 1.25rem 0; }
  .upcoming__row > span:last-child { grid-column: 1 / -1; justify-self: start; margin-top: 0.5rem; }
  /* At this width .embarque's 50/50 split squeezes the form into a narrow
     left column with the photo still taking the other half — cramped
     inputs next to a tiny sliver of image helps no one. Drop the image
     and let the form use the full row instead, same call the ≤900px
     breakpoint already makes for .welcome/.embarque generally, just
     without waiting for the image to merely restack below. */
  .embarque { grid-template-columns: 1fr; }
  .embarque__media { display: none; }
  .embarque__content { padding: 56px 40px 64px; }
  /* Same fix as mobile: .embarque__content > p / .embarque__form are 95%
     wide with no margin:auto, so the leftover 5% becomes a lopsided gap
     on the right only once this is full-width instead of half a row. */
  .embarque__content > p, .embarque__form { width: 100%; }
}
@media (max-width: 520px) {
  /* On phone the hero's height comes FROM the video: a smaller explicit
     figure than the old calc(95vh - 82px), not the 95vh box itself. The
     logo and tagline both overlay it (absolute, like desktop) instead of
     the tagline flowing below — flush video, no framing strip on any
     side, text sitting on the video near its bottom. */
  .hero { height: calc(95vh - 130px); display: block; }
  .hero__media {
    position: absolute;
    inset: 0;
    left: auto;
    transform: none;
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .hero__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(700px, 90%);
  }
  .hero__tagline {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    margin: 0;
    padding: 0 1rem;
    font-size: 20px;
    line-height: 24px;
  }
  /* Drops the manual break after "gran" — the two <span>s were forced onto
     separate lines by the <br> between them regardless of width; on phone
     they should just wrap naturally at this font-size/width instead. */
  .hero__tagline br { display: none; }
  .steps, .recap, .upcoming, .footer { padding-left: 1rem; padding-right: 1rem; }
  .welcome__content, .embarque__content { padding-left: 1rem; padding-right: 1rem; }
  /* .embarque__content > p and .embarque__form are 95% width on desktop
     (deliberate, leaves a sliver of breathing room); at this width the
     container's own 1rem side padding already provides that breathing
     room symmetrically, so the extra 95% just ate into the right side
     only (no margin:auto), leaving a bigger gap on the right than the
     left. Full width here removes that lopsided extra gap. */
  .embarque__content > p, .embarque__form { width: 100%; }
  /* Same 56px top / 64px bottom already used for .steps/.upcoming/
     .welcome__content/.embarque__content — this one got missed, so it was
     still sitting at desktop's 90px/70px. */
  .recap { padding-top: 56px; padding-bottom: 64px; }
  /* Same double-gap issue as .embarque below: the grid's own 3.5rem gap
     (for the desktop side-by-side columns) stacks on top of
     .welcome__content's own 56px top padding once stacked, doubling the
     space to 112px — zero it out and let that padding alone set the 56px. */
  .welcome { gap: 0; }
  .recap-gallery__track { padding-left: 1rem; padding-right: 1rem; }
  /* .steps h2/.steps__subtitle and .upcoming h2/.upcoming__subtitle each
     set their own text-align: center (more specific than .steps/.upcoming
     alone), so it has to be overridden directly on them, not the section. */
  .steps h2, .steps__subtitle, .upcoming h2, .upcoming__subtitle { text-align: left; }
  /* .steps__grid sits inside .steps, which already carries its own 1rem
     side padding above (shared rule) — .steps__grid's desktop padding
     (mirroring .steps's, since at desktop .steps__grid is NOT nested
     inside a padded .steps in the same way) was stacking on top of it here,
     insetting the cards 32px instead of 16px and misaligning them against
     .recap's content, which has no such second layer. Zero it so the cards'
     border lines up with everything else. */
  .steps__grid { padding-left: 0; padding-right: 0; }
  .step-card__number, .step-card h3 { font-size: 22px; line-height: 22px; }
  /* Desktop's 90px top padding is too tall a drop on a phone-height
     viewport. */
  .footer { padding-top: 32px; }
  /* Desktop's 216px gap before the Patterson Group logo is way too tall a
     drop on a phone-height viewport. */
  .footer__logo { margin-top: 56px; }
  /* .embarque__media comes after .embarque__content in the markup (content
     first, image bled right, on desktop) — reorder visually so the image
     leads once the two are stacked. The grid's own 3.5rem gap (for the
     desktop side-by-side columns) would otherwise stack on top of
     .embarque__content's own 56px top padding, doubling the space to
     112px — zero it out and let that padding alone set the 56px gap. */
  .embarque { gap: 0; }
  .embarque__media { order: -1; }
  /* Now 5 cells (city/date/time/partner/CTA) instead of the original 4 —
     too tight for one line at phone width, so split into a 2-column grid:
     city+date on row 1, time+partner on row 2, CTA full-width below (same
     as it already does at 900px). Undoes the 900px breakpoint's 3-column
     row and its "partner spans the full row" override. */
  .upcoming__row { grid-template-columns: 1fr 1fr; column-gap: 0.5rem; row-gap: 0.4rem; font-size: 16px; align-items: start; }
  /* Every cell left-justified within its own column — city/time in column
     1, date/partner in column 2 — instead of column 2 hugging the right
     edge, so the whole 2x2 block reads as two clean left-aligned columns. */
  .upcoming__city, .upcoming__date, .upcoming__time { justify-self: start; }
  /* Grid items default to min-width: auto, which for a flex container like
     .upcoming__partner means "never shrink below the content's natural
     width" — without this, the 1fr column refuses to compress on rows
     where "Barcelona" (vs "Palma") leaves it less room, and the partner
     cell overflows past the table's edge instead of actually filling 1fr. */
  .upcoming__partner { grid-column: auto; justify-self: start; min-width: 0; }
  /* "Partner" and the logo no longer compete for the same line — stacked,
     with "Partner" on top staying level (align-items: start above) with
     the city/date cells, the logo underneath is free to be much bigger.
     Left-aligned (not centered) to match date/city/time's own left edge
     in this column. */
  .upcoming__partner { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
  .upcoming__partner img { max-width: 110px; height: auto; }
  .upcoming__venues { flex-direction: column; gap: 1rem; }
}