/*
 * Bader Brand Site · Multi-slide visualizer system
 * Canonical reference: /recursos-identidad/tipografia · Reglas de uso
 * Scope: only instances marked with data-rules-visualizer + data-multi-visualizer="true".
 * The impossible two-ID branch inside :is() raises specificity above legacy page-scoped
 * inline rules while the attribute branch is the only branch that can match.
 * Content remains owned by each instance's script[data-rules-items].
 */
:is(#bader-multi-visualizer-specificity-a#bader-multi-visualizer-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) {
  --bader-design-rules-fade-duration:420ms;
}

:is(#bader-multi-visualizer-specificity-a#bader-multi-visualizer-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) > .bader-design-rules__layout[data-multi-visualizer-layout] {
  --bader-multi-visualizer-lane-gap:28px;
  width:100%;
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto auto auto;
  column-gap:0;
  row-gap:0;
  align-items:start;
  align-content:start;
}

:is(#bader-multi-visualizer-specificity-a#bader-multi-visualizer-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) > .bader-design-rules__layout[data-multi-visualizer-layout] > .bader-design-rules__visualizer {
  grid-column:1 / span 2;
  grid-row:1;
  width:calc(100% - var(--bader-multi-visualizer-lane-gap));
  max-width:100%;
  min-width:0;
  margin:0;
  padding:0;
  box-sizing:border-box;
  display:block;
  background:transparent;
  border:0;
}

:is(#bader-multi-visualizer-specificity-a#bader-multi-visualizer-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) > .bader-design-rules__layout[data-multi-visualizer-layout] > .bader-design-rules__visualizer > .bader-design-rules__image {
  width:100%;
  max-width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  display:block;
  object-fit:contain;
  object-position:center center;
  opacity:1;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:clamp(8px,1.5vw,20px) clamp(10px,1.8vw,24px) clamp(24px,3vw,40px) rgba(0,56,65,.10);
  transition:opacity var(--bader-design-rules-fade-duration) cubic-bezier(.22,1,.36,1);
}

:is(#bader-multi-visualizer-specificity-a#bader-multi-visualizer-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) > .bader-design-rules__layout[data-multi-visualizer-layout] > .bader-design-rules__visualizer.is-fading > .bader-design-rules__image {
  opacity:0;
}

:is(#bader-multi-visualizer-specificity-a#bader-multi-visualizer-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) > .bader-design-rules__layout[data-multi-visualizer-layout] > .bader-design-rules__navigation {
  grid-column:1 / span 2;
  grid-row:2;
  width:calc(100% - var(--bader-multi-visualizer-lane-gap));
  box-sizing:border-box;
  display:flex;
  align-items:center;
  padding:18px 28px;
  margin:0;
  background:#9F9EAD;
  color:#003841;
}

:is(#bader-multi-visualizer-specificity-a#bader-multi-visualizer-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) > .bader-design-rules__layout[data-multi-visualizer-layout] > .bader-design-rules__navigation > .bader-design-rules__controls {
  margin:0;
  position:static;
  top:auto;
  left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:18px;
  padding:0;
  border:0;
  background:transparent;
  color:#003841;
  pointer-events:auto;
}

:is(#bader-multi-visualizer-specificity-a#bader-multi-visualizer-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) > .bader-design-rules__layout[data-multi-visualizer-layout] .bader-design-rules__control {
  width:auto;
  height:auto;
  min-width:0;
  min-height:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 4px;
  border:0;
  border-radius:0;
  background:transparent;
  color:inherit;
  font-family:'Helvetica Neue LT Pro 65 Medium','Helvetica Neue LT Pro Local','Helvetica Neue',Arial,sans-serif;
  font-size:18px;
  line-height:1;
  font-weight:500;
  cursor:pointer;
  appearance:none;
  transition:none;
}

:is(#bader-multi-visualizer-specificity-a#bader-multi-visualizer-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) > .bader-design-rules__layout[data-multi-visualizer-layout] .bader-design-rules__control:hover,
:is(#bader-multi-visualizer-specificity-a#bader-multi-visualizer-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) > .bader-design-rules__layout[data-multi-visualizer-layout] .bader-design-rules__control:focus-visible {
  background:transparent;
  color:inherit;
}

:is(#bader-multi-visualizer-specificity-a#bader-multi-visualizer-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) > .bader-design-rules__layout[data-multi-visualizer-layout] .bader-design-rules__control:focus-visible {
  outline:1px solid currentColor;
  outline-offset:4px;
}

:is(#bader-multi-visualizer-specificity-a#bader-multi-visualizer-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) > .bader-design-rules__layout[data-multi-visualizer-layout] .bader-design-rules__index {
  min-width:64px;
  padding:0;
  border:0;
  background:transparent;
  font-family:'Helvetica Neue LT Pro 65 Medium','Helvetica Neue LT Pro Local','Helvetica Neue',Arial,sans-serif;
  font-size:13px;
  line-height:1;
  font-weight:500;
  letter-spacing:.08em;
  text-align:center;
  color:inherit;
}

:is(#bader-multi-visualizer-specificity-a#bader-multi-visualizer-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) > .bader-design-rules__layout[data-multi-visualizer-layout] > .bader-design-rules__meta {
  grid-column:1 / span 2;
  grid-row:3;
  width:calc(100% - var(--bader-multi-visualizer-lane-gap));
  min-width:0;
  box-sizing:border-box;
  padding:24.27216px 0 0;
  margin:0;
  color:#003841;
  position:static;
}

:is(#bader-multi-visualizer-specificity-a#bader-multi-visualizer-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) > .bader-design-rules__layout[data-multi-visualizer-layout] > .bader-design-rules__meta > .bader-design-rules__slide-title {
  width:100%;
  max-width:calc(50% - (var(--bader-multi-visualizer-lane-gap) / 2));
  margin:0 0 10px;
  font-family:'Helvetica Neue LT Pro 65 Medium','Helvetica Neue LT Pro Local','Helvetica Neue',Arial,sans-serif;
  font-size:18px;
  line-height:1.08;
  font-weight:500;
  letter-spacing:-0.01em;
  color:#003841;
  text-align:left;
}

:is(#bader-multi-visualizer-specificity-a#bader-multi-visualizer-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) > .bader-design-rules__layout[data-multi-visualizer-layout] > .bader-design-rules__meta > .bader-design-rules__slide-title:empty {
  display:none;
}

:is(#bader-multi-visualizer-specificity-a#bader-multi-visualizer-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) > .bader-design-rules__layout[data-multi-visualizer-layout] > .bader-design-rules__meta > .bader-design-rules__description {
  width:100%;
  max-width:calc(50% - (var(--bader-multi-visualizer-lane-gap) / 2));
  margin:0;
  font-family:'Helvetica Neue LT Pro 55 Roman','Helvetica Neue LT Pro Local','Helvetica Neue',Arial,sans-serif;
  font-size:15.36216px;
  line-height:1.58;
  font-weight:400;
  letter-spacing:0;
  color:#003841;
  text-align:left;
}

@media (max-width:980px) {
  :is(#bader-multi-visualizer-specificity-a#bader-multi-visualizer-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) > .bader-design-rules__layout[data-multi-visualizer-layout] {
    --bader-multi-visualizer-lane-gap:22px;
  }

  :is(#bader-multi-visualizer-specificity-a#bader-multi-visualizer-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) > .bader-design-rules__layout[data-multi-visualizer-layout] > .bader-design-rules__navigation {
    padding-right:22px;
    padding-left:22px;
  }
}

@media (max-width:760px) {
  :is(#bader-multi-visualizer-specificity-a#bader-multi-visualizer-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) > .bader-design-rules__layout[data-multi-visualizer-layout] {
    --bader-multi-visualizer-lane-gap:0px;
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
  }

  :is(#bader-multi-visualizer-specificity-a#bader-multi-visualizer-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) > .bader-design-rules__layout[data-multi-visualizer-layout] > .bader-design-rules__visualizer,
  :is(#bader-multi-visualizer-specificity-a#bader-multi-visualizer-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) > .bader-design-rules__layout[data-multi-visualizer-layout] > .bader-design-rules__navigation,
  :is(#bader-multi-visualizer-specificity-a#bader-multi-visualizer-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) > .bader-design-rules__layout[data-multi-visualizer-layout] > .bader-design-rules__meta {
    grid-column:1;
    width:100%;
  }

  :is(#bader-multi-visualizer-specificity-a#bader-multi-visualizer-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) > .bader-design-rules__layout[data-multi-visualizer-layout] > .bader-design-rules__meta > .bader-design-rules__slide-title,
  :is(#bader-multi-visualizer-specificity-a#bader-multi-visualizer-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) > .bader-design-rules__layout[data-multi-visualizer-layout] > .bader-design-rules__meta > .bader-design-rules__description {
    max-width:100%;
  }
}

@media (max-width:560px) {
  :is(#bader-multi-visualizer-specificity-a#bader-multi-visualizer-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) > .bader-design-rules__layout[data-multi-visualizer-layout] > .bader-design-rules__navigation > .bader-design-rules__controls {
    gap:12px;
  }

  :is(#bader-multi-visualizer-specificity-a#bader-multi-visualizer-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) > .bader-design-rules__layout[data-multi-visualizer-layout] .bader-design-rules__control {
    font-size:16px;
  }

  :is(#bader-multi-visualizer-specificity-a#bader-multi-visualizer-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) > .bader-design-rules__layout[data-multi-visualizer-layout] .bader-design-rules__index {
    min-width:58px;
  }
}

/*
 * Shared final scale for every visualizer whose audited item contract contains
 * two or more slides. data-multi-visualizer="true" is assigned only to those
 * instances; single-slide components remain outside this rule.
 * Reference geometry: 72% cumulative width, intrinsic ratio and horizontal centering.
 */
:is(#bader-multi-scale-specificity-a#bader-multi-scale-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) {
  height:auto;
  min-height:0;
}

#espacios#espacios > [data-rules-visualizer][data-multi-visualizer="true"] {
  width:calc(100% + clamp(34px,6vw,92px) + clamp(34px,6vw,92px));
  margin-right:calc(0px - clamp(34px,6vw,92px));
  margin-left:calc(0px - clamp(34px,6vw,92px));
}

:is(#bader-multi-scale-specificity-a#bader-multi-scale-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) > .bader-design-rules__layout[data-multi-visualizer-layout] {
  width:72%;
  height:auto;
  margin-right:auto;
  margin-left:auto;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto auto;
  align-items:start;
  align-content:start;
}

:is(#bader-multi-scale-specificity-a#bader-multi-scale-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) > .bader-design-rules__layout[data-multi-visualizer-layout] > .bader-design-rules__visualizer {
  grid-column:1;
  grid-row:1;
  width:100%;
  max-width:100%;
  height:auto;
  margin:0;
  padding:0;
  display:block;
  overflow:visible;
}

:is(#bader-multi-scale-specificity-a#bader-multi-scale-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) > .bader-design-rules__layout[data-multi-visualizer-layout] > .bader-design-rules__visualizer > .bader-design-rules__image {
  width:100%;
  max-width:100%;
  height:auto;
  max-height:none;
  aspect-ratio:auto;
  display:block;
  object-fit:contain;
  object-position:center center;
}

:is(#bader-multi-scale-specificity-a#bader-multi-scale-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) > .bader-design-rules__layout[data-multi-visualizer-layout] > .bader-design-rules__navigation {
  grid-column:1;
  grid-row:2;
  width:100%;
}

:is(#bader-multi-scale-specificity-a#bader-multi-scale-specificity-b,[data-rules-visualizer][data-multi-visualizer="true"]) > .bader-design-rules__layout[data-multi-visualizer-layout] > .bader-design-rules__meta {
  grid-column:1;
  grid-row:3;
  width:100%;
}

@media (max-width:980px) {
  #espacios#espacios > [data-rules-visualizer][data-multi-visualizer="true"] {
    width:calc(100% + 44px);
    margin-right:-22px;
    margin-left:-22px;
  }
}

/*
 * Slide-copy width: only multi-slide components whose audited data contract
 * contains both a non-empty slide title and a running description.
 * The selector list is the current verified scope; no DOM/content changes.
 */
:is(
  #bader-wide-slide-copy-specificity-a#bader-wide-slide-copy-specificity-b,
  [data-rules-visualizer][data-multi-visualizer="true"]:is(
    [aria-labelledby="tipografia-reglas-uso-title"],
    [aria-labelledby="identificadores-reglas-uso-title"],
    [aria-labelledby="color-reglas-uso-title"],
    [aria-labelledby="elementos-graficos-reglas-uso-title"]
  )
) > .bader-design-rules__layout[data-multi-visualizer-layout] > .bader-design-rules__meta > :is(
  .bader-design-rules__slide-title,
  .bader-design-rules__description
) {
  width:100%;
  max-width:100%;
}

/*
 * Espacios · first visualizer: slide 03 (1688×1000) is the fixed height
 * reference at every responsive width. Slides 01/02 keep their assets and order
 * but are center-cropped vertically inside this unchanged viewer.
 */
#espacios#espacios > [data-rules-visualizer][aria-label="Visualizador de Señalización interior"] > .bader-design-rules__layout[data-multi-visualizer-layout] > .bader-design-rules__visualizer {
  height:auto;
  max-height:none;
  aspect-ratio:1688 / 1000;
  overflow:hidden;
}

#espacios#espacios > [data-rules-visualizer][aria-label="Visualizador de Señalización interior"] > .bader-design-rules__layout[data-multi-visualizer-layout] > .bader-design-rules__visualizer > .bader-design-rules__image {
  width:100%;
  max-width:100%;
  height:100%;
  max-height:100%;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:center center;
}