/* =========================================================
   /eventos-privados/ — eventos privados y corporativos (DRAFT, Oct 2026)
   Builds on style.css (tokens, .btn, .container, .section, .faq-item,
   .lang-toggle, starfield) and eclipse.css (.ecl-nav, .ecl-eyebrow,
   .ecl-hero-title/-sub/-chips/-cta, .ecl-card, .ecl-bullets, .ecl-facts).
   Page-specific only.
   ========================================================= */

#formatos, #lugar, #incluye, #practico, #como, #faq, #solicitar { scroll-margin-top: 84px; }
#formatos .section-title, #incluye .section-title, #practico .section-title, #como .section-title, #faq .section-title { text-wrap: balance; }

/* ---- HERO: centred over the starfield (no photo); the night panorama is the next band ---- */
.evt-hero {
  position: relative; z-index: 2;
  padding-block: clamp(56px, 9vw, 112px) clamp(36px, 5vw, 64px);
  text-align: center;
}
.evt-hero-content { max-width: 880px; display: flex; flex-direction: column; align-items: center; }
.evt-hero-seal { width: clamp(84px, 11vw, 124px); height: auto; margin-bottom: 22px; opacity: 0.92; }
.evt-hero .ecl-eyebrow .ecl-eyebrow-gold { color: var(--gold-bright); }
.evt-hero .ecl-hero-sub { margin-inline: auto; }
.evt-hero .ecl-hero-chips, .evt-hero .ecl-hero-cta { justify-content: center; }
.evt-hero-line {
  margin: 18px 0 0; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-2);
}
@media (max-width: 720px) {
  .evt-hero .ecl-eyebrow [data-i18n="hero.eyebrow1"] { display: none; }   /* one line: the page's own name */
}
@media (max-width: 480px) {
  .evt-hero .ecl-hero-chips li:nth-child(n+4) { display: none; }   /* three chips on a phone, as /visitas/ keeps it short */
}

/* ---- the photo bands (the owner's panoramas): full width, fading into the page above and below ---- */
.evt-pano { position: relative; z-index: 2; margin: 0; }
.evt-pano picture, .evt-pano img { display: block; width: 100%; }
.evt-pano img {
  height: clamp(220px, 27vw, 480px); object-fit: cover; object-position: var(--pano-x, 50%) var(--pano-y, 50%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 84%, transparent 100%);
}
.evt-pano-dusk { --pano-x: 58%; }                   /* 5:1, cropped at the sides: keep the pink peaks */
.evt-pano-view { --pano-y: 62%; }                   /* 3.4:1, cropped top and bottom: more city than sky */
/* phones: a taller frame, fed a 2:1 crop of each panorama by the <source> for ≤ 720px */
@media (max-width: 720px) { .evt-pano img { height: 56vw; min-height: 200px; object-position: 50% 50%; } .evt-pano figcaption { text-align: left; } }
.evt-pano figcaption {
  margin-top: 8px; text-align: right; font-size: 0.78rem; line-height: 1.5; color: var(--text-3);
}

/* ---- FORMATOS: four cards, two by two ---- */
.evt-formats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 860px) { .evt-formats { grid-template-columns: 1fr; } }
.evt-fmt { display: flex; flex-direction: column; }
.evt-fmt .ecl-card-tag { align-self: flex-start; }   /* a pill, not a bar stretched by the flex column */
.evt-fmt h3 { font-weight: 500; line-height: 1.2; }
.evt-fmt .evt-fmt-desc { color: var(--text-1); font-size: 1rem; margin: 0 0 6px; }
.evt-fmt .ecl-bullets { margin-bottom: 14px; }
.evt-fmt .evt-fmt-for {
  margin: auto 0 18px; padding-top: 12px; border-top: 1px dashed var(--border);
  font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--gold);
}
.evt-fmt .evt-fmt-cta { align-self: flex-start; }

/* ---- EL LUGAR: archive photo + history, then the facts strip ---- */
.evt-place { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (max-width: 860px) { .evt-place { grid-template-columns: 1fr; } }
.evt-place-photo { margin: 0; }
.evt-place-photo img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.evt-place-photo figcaption { margin-top: 10px; font-size: 0.82rem; line-height: 1.55; color: var(--text-3); }
@media (max-width: 860px) { .evt-place-photo { max-width: 420px; margin-inline: auto; } }
.evt-place-text .section-title { text-align: left; margin-inline: 0; font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin-bottom: 18px; }
.evt-place-text .ecl-lead { margin-left: 0; margin-right: 0; }
.evt-facts { --ecl-gap: clamp(40px, 6vw, 72px); }
.evt-facts .ecl-fact-v { font-family: var(--f-display); font-size: 1.6rem; line-height: 1.1; }
.evt-facts .ecl-fact-v small { font-family: var(--f-body); }

/* ---- QUÉ INCLUYE: two cards ---- */
.evt-incl { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; }
@media (max-width: 860px) { .evt-incl { grid-template-columns: 1fr; } }
.evt-incl .ecl-card h3 { font-weight: 500; }
.evt-incl-coord { background: transparent; border-style: dashed; }
.evt-incl-coord .ecl-bullets li::before { background: var(--text-2); box-shadow: none; }

/* ---- LO PRÁCTICO: label + text pairs ---- */
.evt-log { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
@media (max-width: 960px) { .evt-log { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .evt-log { grid-template-columns: 1fr; } }
.evt-log-item { background: var(--bg-2); padding: 22px 24px; }
.evt-log dt { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.evt-log dd { margin: 0; color: var(--text-1); font-size: 0.95rem; line-height: 1.6; }

/* ---- CÓMO FUNCIONA: four numbered steps ---- */
.evt-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: none; }
@media (max-width: 1100px) { .evt-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .evt-steps { grid-template-columns: 1fr; } }
.evt-step { position: relative; padding: 26px 22px 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.evt-step-n {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
  font-family: var(--f-mono); font-size: 0.9rem; color: var(--gold-bright); border: 1px solid var(--gold); margin-bottom: 14px;
}
.evt-step h3 { font-family: var(--f-display); font-size: 1.18rem; font-weight: 500; color: var(--text-0); margin: 0 0 8px; }
.evt-step p { margin: 0; color: var(--text-1); font-size: 0.93rem; line-height: 1.6; }

/* ---- FAQ tail + final call to action ---- */
.evt-faq-contact { text-align: center; margin-top: 26px; color: var(--text-2); font-size: 0.92rem; }
.evt-faq-contact a, .evt-cta-mail a { color: var(--gold-bright); text-decoration: none; }
.evt-cta {
  text-align: center; padding: clamp(40px, 6vw, 72px) 24px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.evt-cta h2 { font-family: var(--f-display); font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 400; margin: 0 0 12px; color: var(--text-0); }
.evt-cta p { color: var(--text-1); max-width: 620px; margin: 0 auto 26px; line-height: 1.6; }
.evt-cta .evt-cta-mail { margin: 22px auto 0; font-size: 0.9rem; color: var(--text-2); }