/* Title system for the landing (2026-09-27): one family (Poppins 700), always sentence case, three sizes
   by role:
   - Section headers (somos, trabajos, blog): clamp(1.9rem, 3.2vw, 2.9rem).
   - Statement titles (servicios scenes, Club banner): clamp(2.2rem, 4.6vw, 3.8rem).
   - Closing CTA (contacto): clamp(2.4rem, 4.8vw, 4.3rem).
   Eyebrows share one style. Replaces Archivo (servicios) and KT HIGER (somos, contacto; only loaded if
   installed locally). Loaded last so it wins over per-section rules and their media queries. */
#concept-intro-title,
#trabajos .gallery__intro--on-reels h3,
#blog .blog-strip__head h3 {
  font-family: var(--font-display, "Poppins", sans-serif) !important;
  font-weight: 700 !important;
  font-stretch: normal !important;
  font-size: clamp(1.9rem, 3.2vw, 2.9rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
  overflow-wrap: anywhere;
}

.concept-page .concept-services .service-scene__copy h3,
#club h2 {
  font-family: var(--font-display, "Poppins", sans-serif) !important;
  font-weight: 700 !important;
  font-stretch: normal !important;
  font-size: clamp(2.2rem, 4.6vw, 3.8rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
  overflow-wrap: anywhere;
}

main .eyebrow,
main .concept-kicker,
main .club-banner__kicker,
main .service-scene__name {
  font-family: var(--font-body, "Roboto", sans-serif) !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

/* Contact CTA: the page's closing line, the largest title. */
main #contacto .cta__text h2 {
  font-family: var(--font-display, "Poppins", sans-serif) !important;
  font-weight: 700 !important;
  font-size: clamp(2.4rem, 4.8vw, 4.3rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
}

/* The contact CTA eyebrow keeps its original look. */
main #contacto .eyebrow {
  font-family: var(--font-display, "Poppins", sans-serif) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  letter-spacing: 0.08em !important;
}

/* Trabajos: the header shares a row with the client tabs, so the title wraps instead of running under them. */
#trabajos .gallery__intro--on-reels {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 24px 0 0 !important;
  /* Pull the block up by the eyebrow's height so the title itself lines up with the client icons. */
  margin: -22px 0 0 !important;
}

#trabajos .gallery__intro--on-reels h3 {
  margin-bottom: 0 !important;
  white-space: normal;
}

@media (max-width: 1024px) {
  /* Header stacks above the tabs here, so no pull-up. */
  #trabajos .gallery__intro--on-reels {
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Spacing: .block gives every section min-height 50vh, which left ~130px of empty blue above and below
   the contact CTA on tall screens (tablets). Its padding already sets the rhythm. */
main #contacto.block {
  min-height: 0;
}

/* Blog and Club banner share the same navy and sit back to back: halve the seam between them so it
   reads as one stretch instead of a double-padded gap. */
main #blog.blog-strip {
  padding-bottom: clamp(32px, 4vw, 56px);
}

main #club.club-banner {
  padding-top: clamp(32px, 4vw, 56px);
}