/* ============================================================================
   04-COMPONENTS.CSS — Cosmetic treatment of discrete UI pieces
   Depends on: 01-tokens.css, 02-base.css
   ----------------------------------------------------------------------------
   Naming: BEM-ish. Each block is self-contained and consumes tokens only.
   ========================================================================== */

/* ---- Wordmark / logo --------------------------------------------------- */
.mark {
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-label);
  font-size: 1rem;
  color: var(--c-paper);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
}
.mark__box {
  background: var(--c-gold);
  color: var(--c-navy);
  padding: 0.1em 0.45em;
  letter-spacing: var(--ls-kicker);
}

/* ---- "Call" pill (HUD CTA) -------------------------------------------- */
.call {
  font-size: 0.74rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--c-paper);
  text-decoration: none;
  border: var(--border-pill);
  padding: 0.65rem 1.2rem;
  border-radius: var(--radius-pill);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.call:hover,
.call:focus-visible {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-navy);
}

/* ---- Scene sub-paragraph ---------------------------------------------- */
/* Cliente (PDF 25-jun): el subtítulo "no se lee ni se ve bien" en mobile y
   desktop. Fix de legibilidad: color casi-paper (mayor contraste sobre las
   fotos), peso ligeramente mayor, line-height más aireado y text-shadow para
   separar el texto del fondo fotográfico. Responsive vía clamp + media query. */
.scene__content .sub {
  max-width: var(--measure-sub);
  margin: var(--space-md) auto 0;
  color: #E7EDF7;                                    /* antes: var(--c-mist) */
  font-size: clamp(1.02rem, 1.6vw, 1.22rem);         /* +legible que --fs-sub */
  line-height: 1.65;
  font-weight: 400;
  text-shadow: 0 1px 14px rgba(7, 13, 29, 0.78);     /* despega del fondo foto */
}
@media (max-width: 760px) {
  .scene__content .sub { font-size: 1.04rem; line-height: 1.6; }
}

/* Palabras destacadas reutilizables (Finale: "Legacy" dorado, "Mission" perla) */
.gold-w  { color: var(--c-gold); }
.pearl-w { color: #FBF9FE; }                         /* blanco perla */

/* ---- Opening-title specifics ------------------------------------------ */
#open .scene__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: center;
}
.presents {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-max);
  text-transform: uppercase;
  color: var(--c-mist);
}

/* Scroll cue + animated descending tick */
.scroll-cue {
  position: absolute;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-scroll-cue);
  font-size: var(--fs-cue);
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  color: var(--c-mist);
}
.scroll-cue::after {
  content: "";
  display: block;
  width: 1px; height: 42px;
  background: var(--c-gold);
  margin: 0.8rem auto 0;
  animation: cue 2.2s ease-in-out infinite;
}

/* ---- Act panel content ------------------------------------------------ */
.act__num {
  position: absolute;
  z-index: var(--z-scene-veil);
  right: -2%; bottom: -6%;
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-numeral);
  line-height: 1;
  color: var(--c-blue-ghost);
  user-select: none;
}
.act .kicker { display: block; margin-bottom: var(--space-sm); }
.act h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-act-head);
  line-height: 1.04;
  margin-bottom: var(--space-sm);
}
.act h3 em { color: var(--c-gold); font-style: italic; }
.act p {
  color: var(--c-mist);
  max-width: var(--measure-act);
  font-size: var(--fs-body);
}

/* Underlined text-link CTA (tracking grows on hover) */
.act__cta {
  display: inline-block;
  margin-top: var(--space-lg);
  color: var(--c-gold);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  border-bottom: 1px solid var(--c-gold-line);
  padding-bottom: var(--space-3xs);
  transition: letter-spacing var(--t-fast), border-color var(--t-fast);
}
.act__cta:hover,
.act__cta:focus-visible {
  letter-spacing: 0.38em;
  border-color: var(--c-gold);
}

/* ---- Intertitle (the counsel quote) ----------------------------------- */
#intertitle {
  background: radial-gradient(80% 90% at 50% 10%,
              #1E3563 0%, var(--c-navy) 45%, var(--c-navy-black) 100%);
}
#intertitle blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-quote);
  line-height: 1.3;
  max-width: var(--measure-quote);
  margin-inline: auto;
  color: var(--c-paper);
}
#intertitle blockquote .gold-w { color: var(--c-gold); }
#intertitle cite {
  display: block;
  margin-top: var(--space-lg);
  font-style: normal;
  font-size: 0.74rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  color: var(--c-gold);
}
.cast {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem 2.6rem;
  margin-top: var(--space-xl);
}
.cast span {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-mist);
}

/* Counsel portrait (real photo of Alex Trujillo, Esq.) */
.counsel-portrait {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 18%;
  margin: 0 auto var(--space-md);
  border: 2px solid var(--c-gold);
  box-shadow: var(--glow-cta);
}

/* Authority badges (real bar-association marks) */
.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 1.2rem;
  margin-top: var(--space-xl);
}
/* Varied full-color bar-association seals read poorly on navy, so each sits on
   a small paper chip — the standard "affiliation logos on dark" pattern. */
.badges img {
  height: 40px;
  width: auto;
  background: var(--c-paper);
  padding: 8px 12px;
  border-radius: 8px;
  opacity: 0.92;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.badges img:hover { opacity: 1; transform: translateY(-2px); }

@media (max-width: 760px) {
  .badges img { height: 32px; padding: 6px 9px; }
  .counsel-portrait { width: 104px; height: 104px; }
}

/* ---- Finale ----------------------------------------------------------- */
#finale .scene__veil {
  background: linear-gradient(180deg,
              rgba(7,13,29,0.92), rgba(22,40,78,0.66) 55%, rgba(7,13,29,0.95));
}
.finale-phone {
  display: inline-block;
  margin-top: var(--space-lg);
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  font-size: var(--fs-finale-tel);
  letter-spacing: var(--ls-body);
  color: var(--c-paper);
  text-decoration: none;
  transition: color var(--t-fast);
}
.finale-phone:hover,
.finale-phone:focus-visible { color: var(--c-gold); }

.btn-marquee {
  display: inline-block;
  margin-top: 1.8rem;
  background: var(--c-gold);
  color: var(--c-navy);
  text-decoration: none;
  font-weight: var(--fw-black);
  font-size: 0.82rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: 1.2rem 2.8rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 rgba(242,176,30,0);
  transition: box-shadow var(--t-med), transform var(--t-med);
}
.btn-marquee:hover,
.btn-marquee:focus-visible {
  box-shadow: var(--glow-cta);
  transform: translateY(-3px);
}
.finale-meta {
  margin-top: var(--space-lg);
  font-size: var(--fs-meta);
  color: var(--c-mist);
  letter-spacing: var(--ls-meta);
  line-height: 2;
}

/* ---- Credits ---------------------------------------------------------- */
.credits__label {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-cinematic);
  text-transform: uppercase;
  color: var(--c-gold);
  display: block;
  margin-bottom: var(--space-md);
}
.credit-line span:first-child {
  color: var(--c-mist);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-size: var(--fs-micro);
  padding-top: 0.2rem;
  text-align: left;
}
.credit-line span:last-child {
  color: var(--c-paper);
  font-weight: var(--fw-semi);
  text-align: right;
}
.credits__disclaimer {
  font-size: var(--fs-micro);
  color: var(--c-credit-dim);
  line-height: 1.8;
  max-width: var(--measure-legal);
  margin: var(--space-xl) auto 0;
}
.credits__fin {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-fin);
  color: var(--c-gold);
  margin-top: var(--space-xl);
}
.credits__copyright {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-kicker);
  color: var(--c-credit-dim);
  margin-top: var(--space-sm);
  text-transform: uppercase;
}

/* ---- HUD responsive shrink -------------------------------------------- */
@media (max-width: 760px) {
  .call { padding: 0.55rem 0.9rem; font-size: 0.64rem; }
}