/* ==========================================================================
   Coppelius · Únete a Coppelius — bloques compartidos (Fase 1)
   Páginas: amigos.html · sponsors.html · sponsor-produccion.html
   Sin diseño en Figma: estructura a partir de las páginas equivalentes de la
   Wiener Staatsoper (referencia de estilo del cliente), con los tokens v0.1.
   Se carga después de styles.css y antes del CSS propio de cada página.

   Por qué un CSS compartido: estos bloques aparecen en las tres páginas del
   menú «Únete a Coppelius». En Bricks son clases globales, igual que las de
   styles.css; si se reutilizan fuera de este menú, pasarlos a styles.css.

   Bloques: .join-hero · .join-heading · .patron-contact · .join-form
            .field (UI Kit §6.4, aún no está en styles.css) · .sponsor-mark
   ========================================================================== */


/* --------------------------------------------------------------------------
   Cabecera de página con imagen · .join-hero
   Bricks: Section con imagen de fondo + overlay (o Image absoluta + Div),
   Container 1344 con el contenido. La imagen es la destacada de la página.
   -------------------------------------------------------------------------- */
.join-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 520px;
  padding: var(--space-20) var(--space-gutter) var(--space-16);
  overflow: hidden;
  background-color: var(--color-bg-inverse);
  isolation: isolate;
}

.join-hero__image {
  position: absolute;
  inset: 0px;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.join-hero__overlay {
  position: absolute;
  inset: 0px;
  z-index: -1;
  background-image: linear-gradient(90deg, var(--color-overlay-primary-85) 0%, var(--color-overlay-primary-85) 35%, var(--color-overlay-primary-20) 100%);
}

.join-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-stack-md);
  max-width: 720px;
}

.join-hero__eyebrow {
  font-size: var(--font-size-overline);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-text-accent);
}

.join-hero__title {
  font-size: var(--font-size-h1);
  color: var(--color-text-inverse);
}

.join-hero__lead {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body);
  color: var(--color-text-inverse-muted);
}

.join-hero__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.join-hero :focus-visible {
  outline: var(--focus-ring-inverse);
}


/* --------------------------------------------------------------------------
   Encabezado de sección · .join-heading
   Antetítulo + título + entradilla. Modificadores: --center, --inverse.
   -------------------------------------------------------------------------- */
.join-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-stack-sm);
  max-width: 760px;
}

.join-heading--center {
  align-items: center;
  margin-inline: auto;
  text-align: center;
}

.join-heading__eyebrow {
  font-size: var(--font-size-overline);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-text-accent-on-light);
}

.join-heading__title {
  font-size: var(--font-size-h2);
  color: var(--color-text-heading);
}

.join-heading__lead {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body);
  color: var(--color-text-body);
}

.join-heading--inverse .join-heading__eyebrow {
  color: var(--color-text-accent);
}

.join-heading--inverse .join-heading__title {
  color: var(--color-text-inverse);
}

.join-heading--inverse .join-heading__lead {
  color: var(--color-text-inverse-muted);
}


/* --------------------------------------------------------------------------
   Contacto de mecenazgo / oficina de amigos · .patron-contact
   Fondo navy. Con formulario: 2 columnas (datos | formulario en tarjeta).
   --no-form: una fila (encabezado | persona de contacto).
   Bricks: Section + Block; la persona de contacto, campos de una página de
   opciones ACF (nombre, cargo, teléfono, correo) si el cliente la cambia.
   -------------------------------------------------------------------------- */
.patron-contact {
  padding: var(--space-section-y) var(--space-gutter);
  background-color: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

.patron-contact__inner {
  display: grid;
  grid-template-columns: minmax(0px, 5fr) minmax(0px, 7fr);
  align-items: start;
  gap: var(--space-12) var(--space-16);
}

.patron-contact--no-form .patron-contact__inner {
  grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr);
  align-items: center;
}

.patron-contact__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-lg);
}

.patron-contact__person {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-card);
  border: var(--border-width-thin) solid var(--color-border-on-dark);
  border-left: 3px solid var(--color-border-accent);
  border-radius: var(--radius-surface);
}

.patron-contact__name {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  color: var(--color-text-inverse);
}

.patron-contact__role {
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body);
  color: var(--color-text-inverse-muted);
}

.patron-contact__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.patron-contact__link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--size-tap-target);
  font-size: var(--font-size-body);
  color: var(--color-text-inverse);
  overflow-wrap: anywhere;
}

.patron-contact__link:hover {
  color: var(--color-text-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.patron-contact__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.patron-contact__hours {
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body);
  color: var(--color-text-inverse-muted);
}

.patron-contact__form-card {
  padding: var(--space-10);
  border-radius: var(--radius-surface);
  background-color: var(--color-bg-page);
  color: var(--color-text-body);
}

.patron-contact__form-title {
  margin-bottom: var(--space-6);
  font-size: var(--font-size-h4);
  color: var(--color-text-heading);
}

.patron-contact :focus-visible {
  outline: var(--focus-ring-inverse);
}

.patron-contact__form-card :focus-visible {
  outline: var(--focus-ring);
}


/* --------------------------------------------------------------------------
   Formulario de maqueta · .join-form
   Solo maqueta: no envía (Assets/js/unete.js muestra un aviso).
   Fase 2: Form de Bricks (acciones: email + guardar envío), mismos campos.
   -------------------------------------------------------------------------- */
.join-form {
  display: grid;
  grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr);
  gap: var(--space-5) var(--space-6);
}

.join-form__field--full,
.join-form__consent,
.join-form__actions,
.join-form__status {
  grid-column: 1 / -1;
}

.join-form__consent {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body);
  color: var(--color-text-body);
}

.join-form__consent .field__check {
  flex: 0 0 auto;
  margin: 2px 0px 0px;
}

.join-form__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.join-form__note {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-body);
  color: var(--color-text-muted);
}

.join-form__status {
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-feedback-info-border);
  border-radius: var(--radius-control);
  background-color: var(--color-feedback-info-bg);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body);
  color: var(--color-feedback-info-text);
}

.join-form__status[hidden] {
  display: none;
}


/* --------------------------------------------------------------------------
   Campos · UI Kit §6.4 (docs/design-system/design-system.md)
   ⚠️ Aún no están en styles.css: cuando se añadan allí, borrar este bloque.
   -------------------------------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0px;
}

.field__label {
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text-heading);
}

.field__optional {
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.field__input {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-thin) solid var(--color-border-control);
  border-radius: var(--radius-control);
  background-color: var(--color-bg-page);
  font-family: var(--font-family-ui);
  font-size: var(--font-size-body);
  line-height: var(--line-height-tight);
  color: var(--color-text-body);
  transition: border-color var(--motion-duration-fast) var(--motion-easing);
}

.field__input::placeholder {
  color: var(--color-text-muted);
}

.field__input:hover {
  border-color: var(--color-border-strong);
}

.field__input:focus-visible {
  border-color: var(--color-border-focus);
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.field__input--textarea {
  min-height: 128px;
  line-height: var(--line-height-body);
  resize: vertical;
}

.field__hint {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-tight);
  color: var(--color-text-muted);
}

.field__check {
  width: 20px;
  height: 20px;
  accent-color: var(--color-brand-primary-500);
}


/* --------------------------------------------------------------------------
   Logo de patrocinador (relleno) · .sponsor-mark
   Placeholder tipográfico: NO es un logo real. En Fase 2, Image con el logo
   que entregue cada empresa (SVG en la Media Library), enlazado a su web.
   Modificadores de estilo: --serif · --caps · --script. Tamaño: --small.
   -------------------------------------------------------------------------- */
.sponsor-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 112px;
  padding: var(--space-4) var(--space-6);
  border: var(--border-width-thin) solid var(--color-border-default);
  border-radius: var(--radius-surface);
  background-color: var(--color-bg-page);
  text-align: center;
}

.sponsor-mark__name {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-heading);
}

.sponsor-mark__tagline {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.sponsor-mark--serif .sponsor-mark__name {
  font-family: var(--font-family-display);
  font-size: var(--font-size-24);
}

.sponsor-mark--caps .sponsor-mark__name {
  font-size: var(--font-size-18);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
}

.sponsor-mark--script .sponsor-mark__name {
  font-family: var(--font-family-display);
  font-size: var(--font-size-24);
  font-style: italic;
  font-weight: var(--font-weight-regular);
}

.sponsor-mark--small {
  align-items: flex-start;
  min-height: 0px;
  padding: var(--space-0);
  border: 0px;
  background-color: transparent;
  text-align: left;
}

.sponsor-mark--small .sponsor-mark__name {
  font-size: var(--font-size-18);
}


/* ==========================================================================
   ≤991
   ========================================================================== */
@media (max-width: 991px) {
  .join-hero {
    min-height: 440px;
  }

  .patron-contact__inner,
  .patron-contact--no-form .patron-contact__inner {
    grid-template-columns: minmax(0px, 1fr);
    gap: var(--space-10);
  }
}


/* ==========================================================================
   ≤767 (móvil de 390)
   ========================================================================== */
@media (max-width: 767px) {
  .join-hero {
    min-height: 480px;
    padding-block: var(--space-16) var(--space-12);
  }

  .join-hero__overlay {
    background-image: none;
    background-color: var(--color-overlay-primary-85);
  }

  .join-hero__actions {
    flex-direction: column;
    align-self: stretch;
  }

  .patron-contact__form-card {
    padding: var(--space-6) var(--space-5);
  }

  .join-form {
    grid-template-columns: minmax(0px, 1fr);
  }
}