/* =========================================================
   Eclipse lunar 27–28 ago 2026 — event sales page
   Builds on style.css (tokens, .btn, .container, .section,
   .faq-item, .form-field, .lang-toggle, starfield) and follows
   the Jóvenes Astrónomos page structure. Page-specific only.
   ========================================================= */

/* ---- NAV (same skeleton as the course page, plus the site's language toggle) ---- */
.ecl-nav {
  position: sticky;
  top: var(--banner-h, 0px);
  z-index: 100;
  background: rgba(6, 8, 28, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.ecl-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.ecl-nav-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ecl-nav-brand img { width: 42px; height: auto; }
.ecl-nav-brand span { font-size: 0.78rem; line-height: 1.25; color: var(--text-1); letter-spacing: 0.04em; }
.ecl-nav-brand strong { color: var(--text-0); font-family: var(--f-display); font-size: 0.95rem; }
.ecl-nav-links { display: flex; align-items: center; gap: 26px; }
.ecl-nav-links a { font-size: 0.92rem; color: var(--text-1); letter-spacing: 0.01em; transition: color var(--t-fast) var(--ease); }
.ecl-nav-links a:hover { color: var(--gold-bright); }
.ecl-nav-actions { display: flex; align-items: center; gap: 14px; }
#eclipse, #noche, #entradas, #faq { scroll-margin-top: 84px; }
@media (max-width: 960px) { .ecl-nav-links { display: none; } }
/* Narrow phones: keep the wordmark (like the main site) and compact the whole
   bar — smaller logo/type, tighter toggle and CTA — so brand + ES/EN/PT +
   Entradas still fit side by side at 375 px. */
@media (max-width: 480px) {
  .ecl-nav-inner { gap: 8px; }
  .ecl-nav-brand { gap: 8px; }
  .ecl-nav-brand img { width: 34px; }
  .ecl-nav-brand span { font-size: 0.66rem; letter-spacing: 0.02em; }
  .ecl-nav-brand strong { font-size: 0.86rem; }
  .ecl-nav-actions { gap: 8px; }
  .ecl-nav-actions .lang-btn { padding: 4px 5px; font-size: 10px; }
  .ecl-nav-actions .btn-sm { padding: 8px 11px; font-size: 13px; }
}

/* ---- HERO ----
   The photo (Superluna 30 ago 2023, Costanera, Andes) is the whole backdrop;
   text sits bottom-left over a gradient that darkens the tower's base and the
   snow, and leaves the Moon at upper right untouched. Masked to dissolve into
   the starfield like the course hero. */
.ecl-hero {
  position: relative;
  min-height: clamp(560px, 92vh, 860px);
  display: flex;
  align-items: flex-end;
  padding-block: clamp(48px, 8vw, 96px);
  overflow: hidden;
}
.ecl-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(90deg, rgba(6,8,28,0.62) 0%, rgba(6,8,28,0.28) 45%, rgba(6,8,28,0.05) 100%),
    linear-gradient(180deg, rgba(6,8,28,0.05) 0%, rgba(6,8,28,0.18) 45%, rgba(6,8,28,0.86) 100%),
    url('/assets/images/eclipse/hero-superluna-2023.webp'),
    linear-gradient(180deg, #0a0e26 0%, #05060f 100%);
  background-size: cover;
  background-position: 62% 40%;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 90%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 90%, transparent 100%);
}
@media (max-width: 720px) {
  .ecl-hero::before { background-image:
    linear-gradient(180deg, rgba(6,8,28,0.10) 0%, rgba(6,8,28,0.30) 40%, rgba(6,8,28,0.90) 100%),
    url('/assets/images/eclipse/hero-superluna-2023-1280.webp'),
    linear-gradient(180deg, #0a0e26 0%, #05060f 100%);
    /* portrait: `cover` pins the image to the hero's height, so the Moon
       (≈ 32 % down the frame) lands behind the subtitle. Over-scale to 130 %
       and slide the frame up so the Moon rides top-right, above the eyebrow. */
    background-size: auto 130%;
    background-position: 72% 94%; }
}
.ecl-hero-content { position: relative; z-index: 2; max-width: 780px; }
.ecl-eyebrow {
  font-family: var(--f-mono); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-bright); margin-bottom: 18px;
}
.ecl-eyebrow span { color: var(--text-1); }
.ecl-hero-title {
  font-family: var(--f-display); font-size: clamp(2.3rem, 5.6vw, 4.2rem); line-height: 1.04;
  letter-spacing: -0.01em; color: #fff; margin-bottom: 18px;
}
.ecl-hero-title em { font-style: italic; color: var(--gold-bright); }
.ecl-hero-sub { font-size: clamp(1.05rem, 1.8vw, 1.28rem); line-height: 1.6; color: var(--text-1); max-width: 640px; margin-bottom: 22px; }
.ecl-hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.ecl-chip {
  font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-0); background: rgba(6,8,28,0.55); border: 1px solid var(--border-strong);
  border-radius: 100px; padding: 7px 14px; backdrop-filter: blur(6px);
}
.ecl-chip strong { color: var(--gold-bright); font-weight: 500; }
.ecl-hero-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ecl-hero-cta .ecl-left { color: var(--text-1); font-size: 0.95rem; }
.ecl-hero-cta .ecl-left strong { color: var(--gold-bright); }
.ecl-hero-credit {
  position: absolute; right: 14px; bottom: 12px; z-index: 2;
  font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.06em; color: rgba(255,255,255,0.45);
}

/* ---- SHARED COPY ---- */
.ecl-lead { font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.75; color: var(--text-1); max-width: 780px; margin: 0 auto 1.1rem; }
.ecl-lead-accent { color: var(--gold-bright); font-weight: 500; text-align: center; }
.ecl-note { color: var(--text-3); font-size: 0.86rem; line-height: 1.6; }

/* ---- EL ECLIPSE: two-column science block ---- */
.ecl-sci { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: 8px; }
.ecl-sci-figure { position: relative; margin: 0; }
.ecl-sci-figure img { width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); display: block; }
.ecl-sci-figure figcaption { margin-top: 10px; font-size: 0.82rem; line-height: 1.55; color: var(--text-3); }
@media (max-width: 880px) { .ecl-sci { grid-template-columns: 1fr; } }

.ecl-sci .ecl-lead { margin-left: 0; margin-right: 0; max-width: none; }

/* timeline of contacts — its own centred block below the text/figure pair */
/* one rhythm for the big blocks of «El eclipse» (timeline, borde azul, ficha, serie, aula) */
.ecl-sci, .ecl-timeline-wrap, .ecl-blue, .ecl-facts, .ecl-series-lead, .ecl-aula-card { --ecl-gap: clamp(56px, 7vw, 84px); }
.ecl-timeline-wrap { max-width: 720px; margin: var(--ecl-gap) auto 0; }
.ecl-subhead {
  font-family: var(--f-display); font-size: clamp(1.25rem, 2.2vw, 1.55rem); color: var(--text-0);
  text-align: center; margin-bottom: 28px; letter-spacing: -0.005em;
}
.ecl-timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border-strong); }
.ecl-timeline li { position: relative; padding: 0 0 26px 26px; }
.ecl-timeline li::before {
  content: ''; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg-2); border: 2px solid var(--gold);
}
.ecl-timeline li.is-max::before { background: var(--gold-bright); border-color: var(--gold-bright); box-shadow: 0 0 0 5px var(--gold-soft); }
.ecl-timeline li:last-child { padding-bottom: 0; }
.ecl-tl-time { font-family: var(--f-mono); font-size: 1.05rem; color: var(--gold-bright); }
.ecl-tl-time small { font-size: 0.72rem; color: var(--text-3); margin-left: 8px; letter-spacing: 0.04em; }
.ecl-tl-label { display: block; color: var(--text-0); font-weight: 500; margin-top: 2px; }
.ecl-tl-desc { display: block; color: var(--text-2); font-size: 0.9rem; line-height: 1.55; margin-top: 2px; }
.ecl-tl-desc .ecl-altaz { font-family: var(--f-mono); font-size: 0.78rem; color: var(--text-3); }
.ecl-tz-note { margin-top: 18px; font-size: 0.82rem; color: var(--text-3); }
.ecl-tz-note strong { color: var(--text-1); font-weight: 500; }

/* the blue edge (ozone band) — photo slot joins on the left when the file syncs */
.ecl-blue { max-width: 820px; margin: var(--ecl-gap) auto 0; padding: 22px 26px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.ecl-blue.has-figure { max-width: 1080px; display: grid; grid-template-columns: minmax(260px, 440px) 1fr; justify-content: center; gap: clamp(24px, 4vw, 52px); align-items: center; padding: 0; border: none; background: transparent; }
.ecl-blue-text .ecl-lead { margin: 0; max-width: none; }
.ecl-subhead-left { text-align: left; margin-bottom: 12px; }
.ecl-blue-figure { margin: 0; }
.ecl-blue-figure img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.ecl-blue-figure figcaption { margin-top: 10px; font-size: 0.82rem; line-height: 1.55; color: var(--text-3); }
@media (max-width: 880px) { .ecl-blue.has-figure { grid-template-columns: 1fr; } }

/* ficha técnica */
.ecl-facts {
  max-width: 100%; margin: var(--ecl-gap) auto 0; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
@media (max-width: 960px) { .ecl-facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ecl-facts { grid-template-columns: 1fr; } }
.ecl-facts li { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; background: var(--bg-2); }
.ecl-fact-k { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.ecl-fact-v { color: var(--text-0); font-size: 1.05rem; }
.ecl-fact-v small { display: block; color: var(--text-3); font-size: 0.78rem; margin-top: 3px; line-height: 1.4; }
.ecl-source { margin-top: 14px; font-size: 0.76rem; color: var(--text-3); font-family: var(--f-mono); letter-spacing: 0.02em; }

/* the 2025–26 series strip — four eclipses, this one flagged */
.ecl-series-lead { max-width: 720px; margin-top: var(--ecl-gap); font-size: clamp(0.98rem, 1.35vw, 1.06rem); line-height: 1.7; }
.ecl-series {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  max-width: 900px; margin: 36px auto 0; padding: 0; list-style: none;
}
.ecl-series li {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 26px 14px 18px; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.ecl-series li.is-this {
  border-color: rgba(212,166,75,0.55);
  background: linear-gradient(180deg, rgba(212,166,75,0.16), rgba(212,166,75,0.04));
  box-shadow: 0 18px 44px -30px rgba(244,200,66,0.55);
}
.ecl-s-flag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #1a1206; background: linear-gradient(135deg, var(--gold), var(--gold-bright)); border-radius: 100px; padding: 4px 12px;
}
/* the discs: copper umbra with a darker limb; the partial keeps a bright sliver */
.ecl-series .ecl-moon {
  position: relative; display: block; width: 58px; height: 58px; margin: 2px auto 12px; border-radius: 50%; overflow: hidden;
  /* the un-eclipsed Moon; the umbra is painted over it below */
  background: radial-gradient(circle at 36% 32%, #fff8e3 0%, #ead9ae 55%, #bfa877 100%);
  box-shadow: 0 0 22px rgba(224,112,74,0.22), inset 0 0 10px rgba(0,0,0,0.25);
}
/* Earth's umbra: a circle ~2.7 lunar radii wide (real ratio ≈ 2.7–2.8). Its right edge sits at
   93 % of the disc, so the bright part left over is a thin lune whose inner edge follows the
   larger circle: the "toenail", not a phase-like crescent. A faint turquoise line just inside
   that edge is the ozone band. Totals: shifted right, the umbra covers the whole disc. */
.ecl-series .ecl-moon::after {
  content: ''; position: absolute; width: 157px; height: 157px; border-radius: 50%; top: -49.5px; left: -103px;
  background: radial-gradient(circle at 60% 45%, #d4633c 0%, #a83a1e 40%, #5c1a10 78%, #3a1010 100%);
  box-shadow: inset 0 0 0 2.5px rgba(150,210,255,0.55), inset 0 0 6px 2px rgba(120,190,255,0.25);
}
.ecl-series li.is-total .ecl-moon::after { left: -80px; box-shadow: none; }
.ecl-series li.is-total .ecl-moon { box-shadow: 0 0 22px rgba(224,112,74,0.22), inset 0 0 12px rgba(0,0,0,0.35); }
.ecl-series li.is-partial .ecl-moon { box-shadow: 0 0 22px rgba(224,112,74,0.22), 0 0 6px rgba(255,248,227,0.35); }
.ecl-series .ecl-s-date { font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--text-1); }
.ecl-series .ecl-s-type { font-family: var(--f-display); font-size: 1.05rem; color: var(--text-0); margin-top: 2px; }
.ecl-series li.is-this .ecl-s-type { color: var(--gold-bright); }
.ecl-series .ecl-s-mag { font-family: var(--f-mono); font-size: 0.7rem; color: var(--text-3); margin-top: 2px; }
@media (max-width: 640px) { .ecl-series { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* ---- AULA cross-link (Eclipses simulation) ----
   An <article>, NOT an <a>: the secondary links live inside, and nested anchors
   would make the browser close the outer one early (the links fell out of the
   card). The CTA link is stretched over the card with ::after; the secondary
   links sit above it. */
.ecl-aula-card {
  position: relative; display: grid; grid-template-columns: 250px 1fr; gap: 26px; align-items: center;
  max-width: 860px; margin: calc(var(--ecl-gap) - 12px) auto 0; padding: 18px 24px 18px 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.ecl-aula-card:hover { border-color: rgba(212,166,75,0.5); background: rgba(212,166,75,0.06); }
.ecl-aula-thumb { width: 100%; height: auto; border-radius: var(--radius); display: block; border: 1px solid var(--border-strong); }
.ecl-aula-body { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ecl-aula-tag { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.ecl-aula-title { font-family: var(--f-display); font-size: 1.3rem; color: var(--text-0); }
.ecl-aula-desc { color: var(--text-2); font-size: 0.93rem; line-height: 1.6; }
.ecl-aula-cta { color: var(--gold-bright); font-size: 0.92rem; font-weight: 500; margin-top: 6px; text-decoration: none; }
.ecl-aula-cta::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-lg); }   /* whole card clickable */
.ecl-aula-cta:hover { text-decoration: underline; text-underline-offset: 3px; }
.ecl-aula-more { position: relative; z-index: 2; color: var(--text-3); font-size: 0.82rem; margin-top: 4px; }
.ecl-aula-more a { position: relative; z-index: 2; color: var(--text-1); text-decoration: underline; text-underline-offset: 2px; }
.ecl-aula-more a:hover { color: var(--gold-bright); }
@media (max-width: 640px) { .ecl-aula-card { grid-template-columns: 1fr; padding: 14px; gap: 14px; } }

/* ---- LA NOCHE ---- */
.ecl-night-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.ecl-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; }
.ecl-card-tag {
  display: inline-block; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-bright); background: var(--gold-soft); border: 1px solid var(--gold-soft); border-radius: 100px; padding: 5px 13px; margin-bottom: 14px;
}
.ecl-card h3 { font-family: var(--f-display); font-size: 1.3rem; color: var(--text-0); margin-bottom: 10px; }
.ecl-card p, .ecl-card li { color: var(--text-2); line-height: 1.65; font-size: 0.95rem; }
.ecl-card ul { padding-left: 18px; margin-top: 8px; }
.ecl-card li + li { margin-top: 6px; }
/* golden bullets (Estaciones, Práctico): a small glowing dot instead of the browser disc */
.ecl-card .ecl-bullets { list-style: none; padding-left: 0; }
.ecl-card .ecl-bullets li { position: relative; padding-left: 20px; }
.ecl-card .ecl-bullets li::before {
  content: ''; position: absolute; left: 2px; top: calc(0.825em - 3.5px);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-bright); box-shadow: 0 0 6px rgba(244,200,66,0.55);
}
.ecl-moments { list-style: none; padding: 0; margin: 0; }
.ecl-moments li { display: grid; grid-template-columns: 62px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--border); }
.ecl-moments li:last-child { border-bottom: none; }
.ecl-moments .t { font-family: var(--f-mono); color: var(--gold-bright); }
.ecl-practical { margin-top: 26px; }

/* ---- ENTRADAS ---- */
.ecl-tickets-wrap { max-width: 860px; margin: 0 auto; }
/* the presale card sits closer to the section title than the generic header gap, and
   gets a little more room before the tickets box */
#entradas .section-header { margin-bottom: clamp(30px, 4vw, 48px); }
.ecl-phase {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px;
  /* padding is asymmetric on purpose: the closing paragraph carries ~4px of half-leading
     below its glyphs, the opening badge none above its pill, so 26/22 reads as equal ink gaps */
  max-width: 560px; margin: 0 auto 40px; padding: 26px 28px 22px; border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(244,200,66,0.20), rgba(212,166,75,0.05) 55%, transparent 80%),
    var(--surface);
  border: 1px solid rgba(212,166,75,0.42);
  box-shadow: 0 0 0 1px rgba(244,200,66,0.06) inset, 0 22px 60px -34px rgba(244,200,66,0.55);
}
.ecl-phase.is-online { background: var(--surface); border-color: var(--border-strong); box-shadow: none; }
.ecl-phase-badge {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: #1a1206; background: linear-gradient(135deg, var(--gold), var(--gold-bright)); border-radius: 100px; padding: 6px 16px;
}
.ecl-phase.is-online .ecl-phase-badge { color: var(--text-0); background: var(--surface); border: 1px solid var(--border-strong); }
.ecl-phase-text { color: var(--text-1); font-size: 0.95rem; line-height: 1.55; max-width: 420px; margin: 0; }
.ecl-phase-text:empty { display: none; }
/* after the presale: invitation to the newsletter (reduced presale prices for the next events) */
.ecl-phase-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 440px; margin-top: 2px; padding-top: 14px; border-top: 1px dashed var(--border); }
.ecl-phase-cta p { margin: 0; color: var(--text-2); font-size: 0.9rem; line-height: 1.55; }
.ecl-phase-cta[hidden] { display: none; }
.ecl-countdown { display: flex; align-items: flex-start; justify-content: center; gap: 6px; }
.ecl-countdown[hidden] { display: none; }
.ecl-cd { text-align: center; min-width: 64px; }
.ecl-cd b { display: block; font-family: var(--f-mono); font-size: 2.15rem; font-weight: 500; color: var(--gold-bright); line-height: 1; font-variant-numeric: tabular-nums; }
.ecl-cd span { display: block; font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-top: 7px; }
.ecl-cd-sep { font-family: var(--f-mono); font-size: 1.7rem; color: rgba(244,200,66,0.45); line-height: 1.25; }

.ecl-form { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(22px, 4vw, 40px); }
.ecl-fieldset { border: none; margin-bottom: 26px; }
.ecl-fieldset legend {
  font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 14px; width: 100%; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.ecl-status {
  background: rgba(111, 29, 29, 0.3); border: 1px solid rgba(200, 80, 80, 0.4); color: #ff9e9e;
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 20px; text-align: center; line-height: 1.5;
}
.ecl-status.is-info { background: var(--gold-soft); border-color: rgba(212,166,75,0.35); color: var(--text-0); }
.ecl-ticket-list { display: flex; flex-direction: column; gap: 10px; }
.ecl-ticket {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(255,255,255,0.02);
}
.ecl-ticket.is-soldout { opacity: 0.55; }
.ecl-ticket-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ecl-ticket-title { color: var(--text-0); font-weight: 500; }
.ecl-ticket-desc { color: var(--text-3); font-size: 0.82rem; line-height: 1.45; }
.ecl-ticket-price { font-family: var(--f-mono); color: var(--gold-bright); font-size: 0.95rem; margin-top: 2px; }
.ecl-ticket-price .ecl-was { color: var(--text-3); text-decoration: line-through; margin-left: 8px; font-size: 0.82rem; }
/* phase tag as a small pill next to the price (gold during the presale, neutral after) */
.ecl-ticket-price .ecl-ptag {
  display: inline-block; vertical-align: 2px; margin-left: 8px; padding: 2px 9px; border-radius: 100px;
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-bright); background: var(--gold-soft); border: 1px solid rgba(212,166,75,0.35);
}
.ecl-phase-online .ecl-ticket-price .ecl-ptag { color: var(--text-2); background: var(--surface); border-color: var(--border-strong); }
/* the regular price that applies once the presale ends */
.ecl-ticket-price .ecl-pafter { display: block; margin-top: 4px; font-size: 0.76rem; letter-spacing: 0.02em; color: var(--text-3); }
.ecl-ticket-price .ecl-pafter b { font-weight: 500; color: var(--text-2); }
.ecl-ticket-left { font-family: var(--f-mono); font-size: 0.72rem; color: var(--text-3); letter-spacing: 0.04em; }
.ecl-counter { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ecl-counter input {
  width: 46px; text-align: center; padding: 8px 4px; font-family: var(--f-mono); font-size: 1rem;
  background: var(--bg-3, rgba(255,255,255,0.05)); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-0);
  -moz-appearance: textfield;
}
.ecl-counter input::-webkit-outer-spin-button, .ecl-counter input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ecl-addon { border-style: dashed; }
.ecl-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 16px 20px; margin: 20px 0; background: var(--gold-soft); border: 1px solid rgba(212, 166, 75, 0.3); border-radius: var(--radius);
}
.ecl-summary span { color: var(--text-1); }
.ecl-summary .ecl-sum-detail { display: block; font-size: 0.82rem; color: var(--text-3); margin-top: 3px; }
.ecl-summary strong { font-family: var(--f-mono); font-size: 1.35rem; color: var(--gold-bright); }
.ecl-check { display: flex; align-items: flex-start; gap: 10px; color: var(--text-1); font-size: 0.9rem; cursor: pointer; margin-top: 12px; line-height: 1.5; }
.ecl-check input { width: auto; margin-top: 3px; accent-color: var(--gold); flex-shrink: 0; }
.ecl-check a { color: var(--gold-bright); text-decoration: underline; }
.ecl-form-note { color: var(--text-3); font-size: 0.82rem; text-align: center; margin-top: 12px; line-height: 1.55; }
.ecl-contact-line { color: var(--text-2); font-size: 0.88rem; text-align: center; margin-top: 14px; }
.ecl-contact-line a { color: var(--gold-bright); }
.cf-turnstile { margin: 0 0 18px; }
.ecl-policy { max-width: 860px; margin: 26px auto 0; padding: 18px 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.ecl-policy h4 { font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.ecl-policy p { color: var(--text-2); font-size: 0.9rem; line-height: 1.65; }
.ecl-policy p + p { margin-top: 8px; }

@media (max-width: 600px) {
  .ecl-hero { min-height: clamp(520px, 78vh, 700px); align-items: flex-end; }
  .ecl-ticket { flex-wrap: wrap; }
  .ecl-counter { margin-left: auto; }
  .ecl-phase { padding: 22px 16px 18px; }
  .ecl-cd { min-width: 52px; }
  .ecl-cd b { font-size: 1.6rem; }
  .ecl-cd-sep { font-size: 1.3rem; }
}

/* ---- add-ons: transport choice (own car / shuttle) + astrophotography spot ----
   Option cards share the ticket-row skin; the native radio/checkbox is kept
   (accent gold) for a11y, the whole card is the label. Nested fields slide in
   under the chosen option. */
.ecl-extras-lead { color: var(--text-2); font-size: 0.9rem; line-height: 1.55; margin: -6px 0 12px; }
.ecl-opts { display: flex; flex-direction: column; gap: 10px; }
.ecl-opt {
  display: flex; align-items: flex-start; gap: 14px; cursor: pointer;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(255,255,255,0.02);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.ecl-opt:hover { border-color: var(--border-strong); }
.ecl-opt input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--gold); flex-shrink: 0; cursor: pointer; }
.ecl-opt.is-on { border-color: rgba(212,166,75,0.55); background: rgba(212,166,75,0.06); }
.ecl-opt.is-off { opacity: 0.55; cursor: not-allowed; }
.ecl-opt.is-off input { cursor: not-allowed; }
.ecl-opt-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ecl-opt-title { color: var(--text-0); font-weight: 500; }
.ecl-opt-desc { color: var(--text-3); font-size: 0.82rem; line-height: 1.45; }
.ecl-opt-meta { font-family: var(--f-mono); font-size: 0.76rem; letter-spacing: 0.02em; color: var(--gold-bright); margin-top: 3px; }
.ecl-opt-meta:empty { display: none; }
.ecl-opt-meta.is-warn { color: var(--text-2); }
.ecl-opt-fields { padding: 4px 4px 2px 48px; }
.ecl-opt-fields[hidden] { display: none; }
.ecl-opt-fields .form-row { margin-top: 6px; }
.ecl-check-tight { margin-top: 2px; }
.ecl-watts-row .form-field { max-width: 360px; }
.ecl-upper { text-transform: uppercase; }
#eclAstro { margin-top: -6px; }
@media (max-width: 640px) { .ecl-opt-fields { padding-left: 0; } }
/* shuttle timetable: one up + one down pill per order */
.ecl-times { display: flex; flex-wrap: wrap; gap: 18px 36px; margin-top: 4px; }
.ecl-times-group { display: flex; flex-direction: column; gap: 8px; }
.ecl-times-label { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.ecl-times-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.ecl-time {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 7px 14px; border: 1px solid var(--border); border-radius: 100px; background: rgba(255,255,255,0.02);
  font-family: var(--f-mono); font-size: 0.92rem; color: var(--text-1);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.ecl-time input { width: 14px; height: 14px; margin: 0; accent-color: var(--gold); cursor: pointer; }
.ecl-time:hover { border-color: var(--border-strong); }
.ecl-time.is-on { border-color: rgba(212,166,75,0.6); background: var(--gold-soft); color: var(--gold-bright); }
#shuttleFields .field-hint { display: block; margin-top: 10px; }

/* ---- urgency (Aug 21): eclipse countdown in the hero, deadline countdown + sales/door line
   in the phase card, live seats line on the tickets card ---- */
.ecl-hero-count { font-family: var(--f-mono); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-1); margin: -10px 0 22px; }
.ecl-hero-count b { color: var(--gold-bright); font-weight: 500; }
.ecl-cd-label { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); margin: -4px 0 -6px; line-height: 1.5; max-width: 440px; }
.ecl-cd-label[hidden] { display: none; }
.ecl-phase-sub { color: var(--text-1); font-size: 0.95rem; line-height: 1.55; max-width: 440px; margin: 0; }
.ecl-phase-sub b { color: var(--text-0); font-weight: 500; }
.ecl-phase-sub[hidden] { display: none; }
/* the seats counter shares the legend row, right-bound, right above the ticket selectors */
.ecl-legend-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.ecl-left-line { font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: none; color: var(--gold); }
.ecl-left-line.is-hot { color: var(--gold-bright); }
.ecl-left-line[hidden] { display: none; }