/* Brand Site Bader · patrón compartido Hero + Intro responsive
   Referencia maestra: /recursos-identidad/identificadores · 2026-07-30
   Objetivo: comportamiento único reutilizable para todos los componentes Hero + Intro. */

.section {
  --bader-hero-intro-auto-height: 247.40625px;
  --bader-hero-intro-fluid-height: clamp(240px, 48vw, 480px);
  --bader-hero-intro-available-height: max(220px, calc(100vh - var(--bader-hero-intro-auto-height)));
  --bader-hero-intro-available-height: max(220px, calc(100svh - var(--bader-hero-intro-auto-height)));
  --bader-hero-intro-title-scale: 1;
}

/* Página Color · el titular de Recursos reutiliza el mismo Scale-to-Fit
   fluido que los títulos Hero, sin cambiar tipografía ni layout del bloque. */
#color > .bader-design-uses {
  --bader-color-resource-headline-scale: 1;
}

#color > .bader-design-uses .bader-color-resources__headline {
  transform: scale(var(--bader-color-resource-headline-scale, 1));
  transform-origin: left top;
  will-change: transform;
}

.section.typography-section {
  min-height: auto !important;
}

.section > .identity-editorial-hero:first-child,
.section > .typography-section__hero:first-child {
  position: relative !important;
  height: min(var(--bader-hero-intro-fluid-height), var(--bader-hero-intro-available-height)) !important;
  min-height: 220px !important;
  max-height: 480px !important;
  flex: 0 0 auto !important;
  justify-content: initial !important;
  overflow: hidden !important;
}

.section > .identity-editorial-hero:first-child > .typography-hero__caption,
.section > .typography-section__hero:first-child > .typography-hero__caption {
  position: absolute !important;
  top: 40px !important;
  left: 40px !important;
}

.section > .identity-editorial-hero:first-child > .typography-hero__image,
.section > .typography-section__hero:first-child > .typography-hero__image {
  position: absolute !important;
  left: 40px !important;
  bottom: 48px !important;
  width: 420px !important;
  max-width: none !important;
  transform: scale(var(--bader-hero-intro-title-scale, 1)) !important;
  transform-origin: left bottom !important;
  will-change: transform;
}

/* Tipografía · Bader Sans/Títulos reutiliza el mismo Scale-to-Fit del Hero. */
#tipografia > .bader-design-uses .bader-design-uses__item--primary .bader-design-uses__item-title {
  transform: scale(var(--bader-hero-intro-title-scale, 1));
  transform-origin: left top;
  will-change: transform;
}

.section > .identity-editorial-hero:first-child + .section-intro,
.section > .typography-section__hero:first-child + .section-intro {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  padding-top: 70px !important;
  padding-bottom: 56px !important;
  gap: 34px !important;
}

/* Página Marca · mantiene el Hero actual y solo ajusta el alto del Intro
   al espacio visible restante para que el Footer no aparezca en la carga inicial. */
#marca > .identity-editorial-hero:first-child + .section-intro {
  height: var(--bader-marca-intro-viewport-height, auto) !important;
  min-height: var(--bader-marca-intro-viewport-height, 0px) !important;
  max-height: var(--bader-marca-intro-viewport-height, none) !important;
  flex: 0 0 var(--bader-marca-intro-viewport-height, auto) !important;
}

/* Regla responsive compartida · flecha del Intro visible solo en desktop.
   Mismas condiciones validadas en Identificadores para móvil y tablets equivalentes. */
@media (max-width: 767px),
       (min-width: 768px) and (max-width: 1024px) and (min-height: 900px) and (max-height: 1368px),
       (min-width: 1024px) and (max-width: 1368px) and (min-height: 600px) and (max-height: 1024px) and (max-aspect-ratio: 171/100) {
  .section > .identity-editorial-hero:first-child + .section-intro .intro-directional-button,
  .section > .typography-section__hero:first-child + .section-intro .intro-directional-button {
    display: none !important;
  }
}