/* ============================================================
   WEDDING / COLABORADORES PAGE (wedding.html) — page layout
   Load AFTER styles/main.css and styles/home.css. Reuses the
   navbar, footer, hero, .section, .section-head, .split, the
   .faq__* accordion and button helpers; this file only carries
   the colaboradores-specific blocks. Consumes design tokens
   only; no raw hex/px values except layout-only aspect ratios.
   Mobile breakpoint: 768px (in sync with --breakpoint-md).
   ============================================================ */

/* ============================================================
   HERO — full-bleed photo with the page title pinned centre-left
   and a quiet "Propuestas" caption at the bottom edge. Same
   mechanics as the portafolio hero (see home.css → .hero).
   ============================================================ */
.hero--wedding {
  /* Bottom scrim keeps the title + caption legible over the photo */
  background-image: linear-gradient(180deg, rgba(5, 7, 6, 0.35) 0%, rgba(5, 7, 6, 0) 30%, rgba(5, 7, 6, 0.55) 100%),
                    url("/images/portafolio/arte-visual-hero-portafolio.jpg");
}

/* Title centred in the flexible upper area, caption pinned low */
.hero__title--display {
  align-self: center;
  font-size: var(--font-size-headline-2);
  letter-spacing: var(--letter-spacing-tight);
}

/* Bottom caption — small, uppercase, muted white */
.hero__caption--foot {
  font-size: var(--font-size-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

/* ============================================================
   INTRO — AVMF: a wide muted paragraph on the left, a small
   portrait pinned to the right edge of the row.
   The text pins while the image column scrolls past, like home's
   .split--sticky. Travel only lasts while the image is taller than
   the text, so the copy has to stay shorter than the image.
   ============================================================ */
.collab-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(var(--space-24) * 2);
  align-items: start;
}
.collab-intro__body {
  max-width: 80ch;
  position: sticky;
  top: calc(var(--space-24) * 4);
}
.collab-intro__body > * + * { margin-top: var(--space-16); }
.collab-intro__lead { color: var(--color-text-muted); }

.collab-intro__img {
  justify-self: end;
}

/* ============================================================
   PLANES — two centred option cards (Comisiones / Reel sin
   costo), each an eyebrow + title + value + caption separated
   by hairline rules, followed by a "Cláusulas" panel.
   ============================================================ */
.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-24);
}

.plan-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  padding: calc(var(--space-24) * 2) var(--space-24);
  text-align: center;
  background-color: var(--color-white);
  border: 1px solid var(--color-divider);
}
.plan-card__eyebrow {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.plan-card__title {
  font-size: var(--font-size-headline-1);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}
.plan-card__value {
  font-size: var(--font-size-headline-1);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}
.plan-card__caption { color: #4A5565; }
.plan-card__rule {
  width: 100%;
  border: 0;
  border-top: 0.7px solid #F3F4F6;
  margin: 0;
}

/* Cláusulas — label column + dashed list on a white panel */
.clausulas {
  display: grid;
  grid-template-columns: minmax(0, 220px) 1fr;
  gap: calc(var(--space-24) * 2);
  align-items: start;
  margin-top: var(--space-24);
  padding: var(--space-24) calc(var(--space-24) * 2);
  background-color: var(--color-white);
  border: 1px solid var(--color-divider);
}
.clausulas__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.clausulas__list li {
  position: relative;
  padding-left: calc(var(--space-16) * 2);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
  color: var(--color-text-muted);
}
.clausulas__list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-text-muted);
}

/* ============================================================
   BODAS 2026 — 2027 — a section title + intro over a list of
   underlined navigation links, beside a square image. Reuses
   home's .split for the two columns.
   ============================================================ */
.collab-years {
  font-size: var(--font-size-headline-1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

.link-list {
  list-style: none;
}
.link-list__link {
  display: block;
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--color-black);
  font-size: var(--font-size-body);
  color: var(--color-text);
  transition: opacity 0.2s ease;
}
.link-list__link:hover { opacity: 0.55; }

/* Uppercase muted role line (e.g. "Bodas | Relaciones públicas") */
.collab-role {
  font-size: var(--font-size-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ============================================================
   PREGUNTAS FRECUENTES — native <details> accordion. Each row
   is a numbered question; the open item reveals its answer.
   Hairline rules separate the rows.
   ============================================================ */
.faq__item { border-bottom: 0.5px solid #00000080; }

.faq__q {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding-block: var(--space-24);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  transition: opacity 0.2s ease;
}
.faq__q:hover { opacity: 0.6; }
.faq__q::-webkit-details-marker { display: none; } /* Chromium/Safari */
.faq__text { margin-right: auto; }

.faq__a {
  max-width: 80ch;
  padding-bottom: var(--space-24);
  color: var(--color-text-muted);
}

.border-title-faq {
  border-bottom: 0.5px solid #00000080;
}

.wedding_clausula_title { font-weight: var(--font-weight-bold); }

.wedding_bodas_subtitle { font-weight: var(--font-weight-book); }

.wedding_bodas_years { font-weight: var(--font-weight-medium); }

.wedding_contacto_split { width: 100%; max-width: 560px !important; }

.wedding_contacto_faq_list .faq__item .faq__q { padding-block: var(--space-16); }

.wedding_contacto_split_first_btn_mobile { display: none; } 

/* ============================================================
   RESPONSIVE  (<= 768px)
   ============================================================ */
@media (max-width: 768px) {

  .hero--wedding .hero__content {
    display: flex;
    justify-content: center;
    flex-direction: column-reverse;
    align-items: start;
    gap: var(--space-4);
  }

  .hero--wedding .hero__content .hero__title {
    align-self: self-start;
  }

  .collab-intro { grid-template-columns: 1fr; gap: var(--space-24); }
  /* Stacked layout leaves no room to pin the text without covering it */
  .collab-intro__body { position: static; }
  .collab-intro__body .subtitle--label { font-size: 14px; font-weight: var(--font-weight-bold); }
  .collab-intro__body .collab-intro__lead { color: var(--color-black); line-height: 16px; }
  .collab-intro__img { width: 100%; order: -1; justify-self: start; }

  .plans { grid-template-columns: repeat(2, 1fr); }
  .plan-card { padding: var(--space-24) var(--space-16); }
  .plan-card__title { font-size: 24px; }
  .plan-card__value { font-size: 24px; }

  .bodas_split { display: flex; flex-direction: column-reverse; }
  .bodas_desc { font-size: 14px; color: var(--color-black); }
  .bodas_link_list { font-size: 14px; color: var(--color-black); text-transform: uppercase; }
  .bodas_split_img { width: 100%; max-width: 100%; }

  .wedding_clausula_title { font-size: 14px; }
  .clausulas__list li { padding-left: var(--space-16); color: #364153; font-size: 14px; }
  .clausulas {
    grid-template-columns: 1fr;
    gap: var(--space-16);
    padding: var(--space-24);
  }

  .wedding_contacto_split_first { display: flex; flex-direction: column-reverse; }
  .wedding_contacto_split_first img { width: 100%; max-width: 100%; }
  .wedding_contacto_split_first_btn_desktop { display: none !important; }
  .wedding_contacto_split_first_btn_mobile { display: block; color: var(--color-black); background-color: transparent; border: 1px solid var(--color-black); padding: var(--space-8) var(--space-16); border-radius: 4px; text-decoration: none; text-transform: uppercase; width: fit-content; }
}