/* Carlos Bernardo — Continuous Company Marquees
   Two distinct CSS-only proposals. Brand assets remain pending final approval. */

/* Layer 1: primitives */
:root {
  --cb-color-ink-950: #04121f;
  --cb-color-ink-900: #061b33;
  --cb-color-ink-800: #092f56;
  --cb-color-copper-300: #83b6ec;
  --cb-color-gold-300: #fabd13;
  --cb-color-cream-100: #e8eef4;
  --cb-color-cream-300: #b7c4d1;
  --cb-color-white-a06: rgba(255, 255, 255, 0.06);
  --cb-color-white-a08: rgba(255, 255, 255, 0.08);
  --cb-color-white-a14: rgba(255, 255, 255, 0.14);
  --cb-color-copper-a18: rgba(131, 182, 236, 0.18);
  --cb-color-copper-a32: rgba(131, 182, 236, 0.32);
  --cb-space-2: 0.5rem;
  --cb-space-3: 0.75rem;
  --cb-space-4: 1rem;
  --cb-space-6: 1.5rem;
  --cb-space-8: 2rem;
  --cb-space-12: 3rem;
  --cb-radius-sm: 0.375rem;
  --cb-radius-md: 0.875rem;
  --cb-radius-lg: 1.25rem;
  --cb-ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Layer 2: theme semantics */
:root {
  --cb-surface-page: var(--cb-color-ink-900);
  --cb-surface-subtle: var(--cb-color-ink-950);
  --cb-surface-raised: var(--cb-color-ink-800);
  --cb-border-subtle: var(--cb-color-white-a08);
  --cb-border-emphasis: var(--cb-color-copper-a32);
  --cb-text-primary: var(--cb-color-cream-100);
  --cb-text-muted: var(--cb-color-cream-300);
  --cb-accent-primary: var(--cb-color-copper-300);
  --cb-accent-secondary: var(--cb-color-gold-300);
  --cb-logo-card: rgba(131, 182, 236, 0.045);
  --cb-logo-card-hover: rgba(9, 34, 60, 0.94);
  --cb-logo-card-border: rgba(255, 255, 255, 0.13);
  --cb-logo-card-border-hover: rgba(131, 182, 236, 0.58);
  --cb-logo-hover-ink: var(--cb-color-cream-100);
  --cb-logo-horizon: rgba(131, 182, 236, 0.1);
  --cb-logo-horizon-hover: rgba(131, 182, 236, 0.2);
  --cb-logo-horizon-border: rgba(131, 182, 236, 0.16);
  --cb-interamericano-horizon: rgba(244, 247, 251, 0.82);
  --cb-logo-idle-filter: grayscale(100%) brightness(1.34) contrast(1.16);
  --cb-logo-idle-opacity: 0.78;
  --cb-card-shadow: 0 0.75rem 2.5rem rgba(0, 0, 0, 0.16);
  --cb-card-shadow-hover: 0 1.5rem 3.75rem rgba(0, 0, 0, 0.32), 0 0 2rem rgba(131, 182, 236, 0.12);
}

html[data-theme="light"] {
  --cb-surface-page: rgb(var(--theme-background));
  --cb-surface-subtle: rgb(var(--theme-surface-container-low));
  --cb-surface-raised: rgb(var(--theme-surface-container-lowest));
  --cb-border-subtle: rgb(var(--theme-outline-variant) / 0.7);
  --cb-border-emphasis: rgb(var(--theme-primary) / 0.46);
  --cb-text-primary: rgb(var(--theme-on-surface));
  --cb-text-muted: rgb(var(--theme-on-surface-variant));
  --cb-accent-primary: rgb(var(--theme-primary));
  --cb-accent-secondary: rgb(var(--theme-secondary));
  --cb-logo-card: rgba(9, 34, 60, 0.9);
  --cb-logo-card-hover: rgba(6, 24, 44, 0.96);
  --cb-logo-card-border: rgb(var(--theme-primary) / 0.24);
  --cb-logo-card-border-hover: rgb(var(--theme-primary) / 0.58);
  --cb-logo-hover-ink: var(--cb-color-cream-100);
  --cb-logo-horizon: rgb(var(--theme-primary) / 0.1);
  --cb-logo-horizon-hover: rgb(var(--theme-primary) / 0.2);
  --cb-logo-horizon-border: rgb(var(--theme-primary) / 0.2);
  --cb-interamericano-horizon: rgba(244, 247, 251, 0.88);
  --cb-logo-idle-filter: grayscale(100%) brightness(1.3) contrast(1.18);
  --cb-logo-idle-opacity: 0.8;
  --cb-card-shadow: 0 0.75rem 2.5rem rgba(0, 0, 0, 0.08);
  --cb-card-shadow-hover: 0 1.5rem 3.75rem rgba(0, 0, 0, 0.18), 0 0 2rem rgb(var(--theme-primary) / 0.1);
}

/* Layer 3: sizing and motion tokens */
:root {
  --company-marquee-duration: 38s;
  --company-marquee-gap: clamp(1.75rem, 4vw, 4.5rem);
  --company-marquee-item-width: clamp(10.75rem, 16vw, 13.75rem);
  --company-marquee-item-height: clamp(6.25rem, 8.5vw, 7.5rem);
  --company-marquee-logo-width: 84%;
  --company-marquee-logo-height: 72%;
  --company-marquee-edge-fade: clamp(2rem, 8vw, 8rem);
  --hero-highlights-duration: 24s;
  --hero-highlights-gap: 3.25rem;
  --hero-highlight-size: 5.2rem;
}

/* Hero highlights — cloned groups preserve a continuous seam. */
.hero-highlights__viewport {
  overflow: hidden;
  padding-block: 0.45rem 0.65rem;
}

.hero-highlights__track {
  display: flex;
  width: max-content;
  transform: translate3d(0, 0, 0);
  animation: cb-hero-highlights-x var(--hero-highlights-duration) linear infinite;
  will-change: transform;
}

.hero-highlights__group {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--hero-highlights-gap);
  padding-inline-end: var(--hero-highlights-gap);
}

/* 4rem × 1.3 = 5.2rem. The spacing grows with the artwork so each subject
   keeps its own reading field without compromising the seamless loop. */
.hero-highlights__group .highlight-ring {
  width: var(--hero-highlight-size);
  height: var(--hero-highlight-size);
}

/* Shared marquee foundation */
.company-marquee {
  --company-logo-reveal-lift: -1.75rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--cb-text-primary);
  border-block: 1px solid var(--cb-border-subtle);
}

.company-marquee__inner {
  position: relative;
  max-width: 90rem;
  margin-inline: auto;
}

.company-marquee__heading {
  display: flex;
  align-items: center;
  gap: var(--cb-space-4);
  padding-inline: clamp(1.25rem, 5.5vw, 5rem);
  margin-block-end: var(--cb-space-6);
}

.company-marquee__heading::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: linear-gradient(90deg, var(--cb-border-emphasis), transparent 82%);
}

.company-marquee__eyebrow {
  margin: 0;
  color: var(--cb-accent-primary);
  font-family: Inter, sans-serif;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Fade edges prevent abrupt cuts while leaving the center fully opaque. */
.company-marquee__viewport {
  /* Revealed artwork rises past the card plane; the headroom keeps it inside
     the masked area so the lifted logo is never clipped flat. */
  --company-marquee-reveal-headroom: 2.75rem;
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding-block: calc(1.4rem + var(--company-marquee-reveal-headroom));
  margin-block: calc(-1 * var(--company-marquee-reveal-headroom));
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--company-marquee-edge-fade),
    #000 calc(100% - var(--company-marquee-edge-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--company-marquee-edge-fade),
    #000 calc(100% - var(--company-marquee-edge-fade)),
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.company-marquee__track {
  display: flex;
  width: max-content;
  transform: translate3d(0, 0, 0);
  animation: cb-company-marquee-x var(--company-marquee-duration) linear infinite;
  will-change: transform;
}

/* A user inspecting a brand must be able to hold it in place. */
.company-marquee__viewport:hover .company-marquee__track,
.company-marquee__viewport:focus-within .company-marquee__track {
  animation-play-state: paused;
}

.company-marquee--quiet .company-marquee__track {
  animation-direction: reverse;
}

.company-marquee--rail .company-marquee__track {
  animation-direction: normal;
}

.company-marquee__group {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--company-marquee-gap);
  padding-inline-end: var(--company-marquee-gap);
}

.company-marquee__item {
  --company-marquee-item-offset: 0rem;
  position: relative;
  z-index: 1;
  display: grid;
  flex: 0 0 var(--company-marquee-item-width);
  width: var(--company-marquee-item-width);
  height: var(--company-marquee-item-height);
  margin: 0;
  place-items: center;
  transform: translateY(var(--company-marquee-item-offset)) scale(1);
  transform-origin: center;
  transition:
    transform 440ms var(--cb-ease-premium),
    filter 440ms var(--cb-ease-premium);
}

.company-marquee__item:focus {
  outline: none;
}

.company-marquee__item:focus-visible {
  outline: 3px solid rgb(var(--theme-focus-ring));
  outline-offset: 5px;
}

/* Glass card. The inner stage normalizes horizontal and square artwork. */
.company-marquee__logo-wrap {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  overflow: visible;
  place-items: center;
  border: 1px solid var(--cb-logo-card-border);
  background:
    linear-gradient(145deg, rgb(var(--theme-primary) / 0.08), transparent 52%),
    var(--cb-logo-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--cb-card-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  backdrop-filter: blur(14px) saturate(115%);
  transition:
    border-color 440ms var(--cb-ease-premium),
    background-color 440ms var(--cb-ease-premium),
    box-shadow 440ms var(--cb-ease-premium);
}

.company-marquee__logo-stage {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: grid;
  width: var(--company-marquee-logo-width);
  height: var(--company-marquee-logo-height);
  min-width: 0;
  min-height: 0;
  overflow: visible;
  place-items: center;
}

.company-marquee__logo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: var(--cb-logo-idle-opacity);
  filter: var(--cb-logo-idle-filter);
  transform: scale(1);
  transform-origin: center;
  transition:
    filter 440ms var(--cb-ease-premium),
    opacity 440ms var(--cb-ease-premium),
    transform 440ms var(--cb-ease-premium);
}

/* Dark source artwork receives only the idle-mode compensation it needs. */
.company-marquee__logo[src$="interamericano-transporte.png"],
.company-marquee__logo[src$="vanbank.png"],
.company-marquee__logo[src$="karla-sophya.png"] {
  filter: grayscale(100%) invert(100%) brightness(1.12) contrast(1.22);
}

.company-marquee__logo[src$="interamericano-transporte.png"] {
  opacity: 0.9;
  filter: grayscale(100%) invert(100%) brightness(1.18) contrast(1.28)
    drop-shadow(0 0 0.55rem rgba(255, 255, 255, 0.16));
}

html[data-theme="light"] .company-marquee__logo[src$="interamericano-transporte.png"],
html[data-theme="light"] .company-marquee__logo[src$="vanbank.png"],
html[data-theme="light"] .company-marquee__logo[src$="karla-sophya.png"] {
  filter: grayscale(100%) invert(100%) brightness(1.12) contrast(1.24);
}

html[data-theme="light"] .company-marquee__logo[src$="interamericano-transporte.png"] {
  opacity: 0.9;
  filter: grayscale(100%) invert(100%) brightness(1.18) contrast(1.28)
    drop-shadow(0 0 0.55rem rgba(255, 255, 255, 0.16));
}

html[data-theme="light"] .company-marquee__logo[src$="monarca-group.png"] {
  opacity: 0.84;
  filter: grayscale(100%) brightness(1.16) contrast(1.24);
}

/* Optical calibration: preserve safe areas without altering the source files.
   Karla Sophya shares the Interamericano canvas profile (square matrix whose
   opaque art fills only the centre), so it inherits the same optical box. */
.company-marquee__logo[src$="interamericano-transporte.png"],
.company-marquee__logo[src$="karla-sophya.png"] {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  clip-path: none;
  transform: translate(-50%, -50%) scale(0.95);
}

.company-marquee--rail .company-marquee__logo[src$="interamericano-transporte.png"],
.company-marquee--rail .company-marquee__logo[src$="karla-sophya.png"] {
  width: 90%;
  height: auto;
  transform: translate(-50%, -50%) scale(1);
}

.company-marquee__logo[src$="agro-puesto-futurista.png"] {
  width: 49%;
  height: 84%;
}

.company-marquee--rail .company-marquee__logo[src$="agro-puesto-futurista.png"] {
  width: 62%;
}

.company-marquee__logo[src$="monarca-group.png"] {
  width: 74%;
  height: 64%;
}

.company-marquee__logo[src$="monter-karlo.png"] {
  width: 80%;
  height: 68%;
}

.company-marquee__logo[src$="vanbank.png"] {
  width: 44%;
  height: 76%;
}

/* The Universidad crest is tall; a shorter box keeps the revealed art and its
   lower taglines inside the halo's reach. */
.company-marquee__logo[src*="universidad-interamericana.png"] {
  height: 64%;
}

/* In the rail cards the crest anchors to the true optical centre so its
   taglines stay clear of the caption strip. */
.company-marquee--rail .company-marquee__logo[src*="universidad-interamericana.png"] {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 116%;
  transform: translate(-50%, -50%) scale(1);
}

/* Karla Sophya's square canvas is tighter in the rail so the silhouette
   breathes between the top rule and the caption. */
.company-marquee--rail .company-marquee__logo[src$="karla-sophya.png"] {
  width: 78%;
}

.company-marquee--rail .company-marquee__logo[src$="vanbank.png"] {
  width: 48%;
}

.company-marquee__fallback {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  padding: var(--cb-space-3);
  color: var(--cb-text-muted);
  border: 1px dashed var(--cb-border-subtle);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.875rem, 1.25vw, 1.0625rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  opacity: var(--cb-logo-idle-opacity);
  filter: grayscale(100%) brightness(1.18) contrast(1.12);
  transition:
    color 440ms var(--cb-ease-premium),
    border-color 440ms var(--cb-ease-premium),
    filter 440ms var(--cb-ease-premium),
    opacity 440ms var(--cb-ease-premium),
    transform 440ms var(--cb-ease-premium);
}

html[data-theme="light"] .company-marquee__fallback {
  color: var(--cb-color-cream-300);
  border-color: rgba(255, 255, 255, 0.16);
  filter: grayscale(100%) brightness(1.18) contrast(1.16);
}

.company-marquee__fallback-note {
  display: block;
  margin-block-start: 0.25rem;
  font-family: Inter, sans-serif;
  font-size: 0.5rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Hover and keyboard focus share exactly the same visual behavior. */
.company-marquee__item:is(:hover, :focus-visible) {
  z-index: 3;
  transform: translateY(calc(var(--company-marquee-item-offset) - 0.25rem)) scale(1);
}

.company-marquee__item:is(:hover, :focus-visible) .company-marquee__logo-wrap {
  border-color: var(--cb-logo-card-border-hover);
  background:
    linear-gradient(145deg, rgb(var(--theme-primary) / 0.16), transparent 54%),
    var(--cb-logo-card-hover);
  box-shadow: var(--cb-card-shadow-hover);
}

.company-marquee__item:is(:hover, :focus-visible) .company-marquee__logo {
  opacity: 1;
  filter: none drop-shadow(0 1.25rem 1.5rem rgb(0 0 0 / 0.28))
    drop-shadow(0 0 1rem rgb(var(--theme-primary) / 0.16));
  transform: translate3d(0, var(--company-logo-reveal-lift), 0) scale(1.3);
}

/* Theme-specific idle calibrations must never override the revealed artwork. */
html[data-theme] .company-marquee__item:is(:hover, :focus-visible) .company-marquee__logo {
  opacity: 1;
  filter: none;
}

/* Revealed artwork leaves the card plane above every decorative rule line
   (the rail's copper accent sits at z-index 2). */
.company-marquee__item:is(:hover, :focus-visible) .company-marquee__logo-stage {
  z-index: 3;
}

.company-marquee__item:is(:hover, :focus-visible) .company-marquee__logo[src$="interamericano-transporte.png"],
.company-marquee__item:is(:hover, :focus-visible) .company-marquee__logo[src$="karla-sophya.png"] {
  transform: translate(-50%, -50%) translateY(var(--company-logo-reveal-lift)) scale(1.235);
}

.company-marquee--rail .company-marquee__item:is(:hover, :focus-visible) .company-marquee__logo[src$="interamericano-transporte.png"],
.company-marquee--rail .company-marquee__item:is(:hover, :focus-visible) .company-marquee__logo[src$="karla-sophya.png"],
.company-marquee--rail .company-marquee__item:is(:hover, :focus-visible) .company-marquee__logo[src*="universidad-interamericana.png"] {
  transform: translate(-50%, -50%) translateY(var(--company-logo-reveal-lift)) scale(1.3);
}

.company-marquee__item:is(:hover, :focus-visible) .company-marquee__fallback {
  color: var(--cb-logo-hover-ink);
  border-color: var(--cb-logo-card-border-hover);
  opacity: 1;
  filter: none;
  transform: scale(1.045);
}

/* Both Empresas sections host the Dourados presentation as a background
   layer: the video sits behind a theme-tinted veil so the glass cards keep
   their contrast in both themes. */
.company-marquee--quiet,
.company-marquee--rail {
  position: relative;
  isolation: isolate;
}

.empresas-video-bg,
.empresas-video-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.empresas-video-bg {
  z-index: -2;
  object-fit: cover;
}

.empresas-video-scrim {
  background: rgb(var(--theme-background) / 0.86);
}

/* Model 1 — Institutional Horizon: compact glass plaques and copper waypoints. */
.company-marquee--quiet {
  --company-marquee-duration: 36s;
  --company-marquee-gap: clamp(1.75rem, 4vw, 4.5rem);
  background:
    radial-gradient(circle at 18% 50%, rgb(var(--theme-primary) / 0.055), transparent 30%),
    var(--cb-surface-page);
  padding-block: clamp(2rem, 4.5vw, 3.75rem);
}

.company-marquee--quiet .company-marquee__item::after {
  content: "";
  position: absolute;
  right: calc(var(--company-marquee-gap) * -0.5 - 0.09375rem);
  width: 0.1875rem;
  height: 0.1875rem;
  border-radius: 50%;
  background: var(--cb-accent-primary);
  box-shadow: 0 0 0 0.25rem rgb(var(--theme-primary) / 0.14);
  opacity: 0.78;
}

.company-marquee--quiet .company-marquee__logo-wrap {
  border-radius: var(--cb-radius-lg);
}

/* Signature detail: a soft copper horizon supports the artwork without
   turning every card into a white lightbox. */
.company-marquee--quiet .company-marquee__logo-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 13% -9%;
  border-radius: 999px;
  background: radial-gradient(
    ellipse at center,
    var(--cb-logo-horizon) 0 42%,
    transparent 74%
  );
  filter: blur(0.35rem);
  opacity: 0.92;
  transform: scaleX(0.88);
  transition:
    background 440ms var(--cb-ease-premium),
    filter 440ms var(--cb-ease-premium),
    opacity 440ms var(--cb-ease-premium),
    transform 440ms var(--cb-ease-premium);
}

.company-marquee--quiet .company-marquee__item:is(:hover, :focus-visible) .company-marquee__logo-stage::before {
  background: radial-gradient(
    ellipse at center,
    var(--cb-logo-horizon-hover) 0 48%,
    transparent 76%
  );
  filter: blur(0.2rem);
  opacity: 1;
  transform: scaleX(1);
}

/* The Interamericano, Vanbank, Karla Sophya and Universidad artworks contain
   black or dark-blue lettering. Their own horizon gains luminance only while
   the original colours are revealed. */
.company-marquee--quiet .company-marquee__item:is(:hover, :focus-visible)
  .company-marquee__logo-stage:has(
    .company-marquee__logo[src$="interamericano-transporte.png"],
    .company-marquee__logo[src$="vanbank.png"],
    .company-marquee__logo[src$="karla-sophya.png"],
    .company-marquee__logo[src*="universidad-interamericana.png"]
  )::before {
  inset: -14% -9%;
  background: radial-gradient(
    ellipse at center,
    var(--cb-interamericano-horizon) 0 48%,
    transparent 77%
  );
}

/* Vanbank's square mass is narrower than the stage, so its halo hugs the art
   and rides the same reveal lift instead of inheriting the full
   Interamericano span. */
.company-marquee--quiet .company-marquee__item:is(:hover, :focus-visible)
  .company-marquee__logo-stage:has(.company-marquee__logo[src$="vanbank.png"])::before {
  inset: -14% 16%;
  transform: translateY(var(--company-logo-reveal-lift)) scaleX(1);
}

/* Karla Sophya's tall silhouette also rides the lift so the bull's head keeps
   the light backing. */
.company-marquee--quiet .company-marquee__item:is(:hover, :focus-visible)
  .company-marquee__logo-stage:has(.company-marquee__logo[src$="karla-sophya.png"])::before {
  transform: translateY(var(--company-logo-reveal-lift)) scaleX(1);
}

/* The Universidad crest carries taglines below the shield; its halo grows
   taller and follows half the lift so both extremes keep the light backing. */
.company-marquee--quiet .company-marquee__item:is(:hover, :focus-visible)
  .company-marquee__logo-stage:has(.company-marquee__logo[src*="universidad-interamericana.png"])::before {
  inset: -26% -9%;
  transform: translateY(calc(var(--company-logo-reveal-lift) / 2)) scaleX(1);
}

.company-marquee--quiet .company-marquee__logo-wrap::after {
  content: "";
  position: absolute;
  inset: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.035);
  border-radius: calc(var(--cb-radius-lg) - 0.35rem);
  pointer-events: none;
}

html[data-theme="light"] .company-marquee--quiet .company-marquee__logo-wrap::after {
  border-color: rgb(var(--theme-outline-variant) / 0.24);
}

/* Model 2 — Editorial Portfolio: large connected cards with external captions. */
.company-marquee--rail {
  --company-logo-reveal-lift: -2rem;
  --company-marquee-duration: 44s;
  --company-marquee-gap: clamp(1.5rem, 3vw, 2.75rem);
  --company-marquee-item-width: clamp(17rem, 24vw, 21rem);
  --company-marquee-item-height: clamp(11.75rem, 16vw, 13.75rem);
  --company-marquee-logo-width: 88%;
  --company-marquee-logo-height: 74%;
  background:
    linear-gradient(180deg, rgb(var(--theme-on-surface) / 0.025), transparent 36%),
    var(--cb-surface-subtle);
  padding-block: clamp(3.25rem, 6vw, 5.5rem);
}

.company-marquee--rail .company-marquee__viewport {
  padding-block: calc(1.5rem + var(--company-marquee-reveal-headroom))
    calc(2.75rem + var(--company-marquee-reveal-headroom));
}

.company-marquee--rail .company-marquee__group {
  align-items: flex-start;
}

.company-marquee--rail .company-marquee__item {
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: stretch;
  filter: drop-shadow(0 1rem 1.5rem rgba(0, 0, 0, 0.1));
}

.company-marquee--rail .company-marquee__item:nth-child(even) {
  --company-marquee-item-offset: 0.65rem;
}

.company-marquee--rail .company-marquee__item:is(:hover, :focus-visible) {
  filter: drop-shadow(0 1.65rem 2.25rem rgba(0, 0, 0, 0.24));
}

.company-marquee--rail .company-marquee__item::after {
  content: attr(data-company);
  display: flex;
  min-height: 3rem;
  align-items: center;
  padding: 0.8rem 1rem;
  color: var(--cb-text-primary);
  border: 1px solid var(--cb-border-subtle);
  border-top: 0;
  border-radius: 0 0 var(--cb-radius-md) var(--cb-radius-md);
  background: var(--cb-surface-raised);
  font-family: Inter, sans-serif;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
  transition:
    color 440ms var(--cb-ease-premium),
    border-color 440ms var(--cb-ease-premium),
    background-color 440ms var(--cb-ease-premium);
}

.company-marquee--rail .company-marquee__item:is(:hover, :focus-visible)::after {
  color: var(--cb-accent-primary);
  border-color: var(--cb-logo-card-border-hover);
}

.company-marquee--rail .company-marquee__viewport::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(var(--theme-primary) / 0.36) 14%,
    rgb(var(--theme-primary) / 0.36) 86%,
    transparent
  );
}

.company-marquee--rail .company-marquee__logo-wrap {
  height: calc(var(--company-marquee-item-height) - 3rem);
  min-height: 0;
  padding: var(--cb-space-3);
  border-radius: var(--cb-radius-md) var(--cb-radius-md) 0 0;
}

/* Model 2 uses a straighter editorial rail instead of Model 1's aura. */
.company-marquee--rail .company-marquee__logo-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -7%;
  left: -7%;
  height: 58%;
  border-block: 1px solid var(--cb-logo-horizon-border);
  background: linear-gradient(
    90deg,
    transparent,
    var(--cb-logo-horizon) 13%,
    var(--cb-logo-horizon) 87%,
    transparent
  );
  opacity: 0.9;
  transform: translateY(-50%) scaleX(0.94);
  transition:
    background 440ms var(--cb-ease-premium),
    border-color 440ms var(--cb-ease-premium),
    height 440ms var(--cb-ease-premium),
    opacity 440ms var(--cb-ease-premium),
    transform 440ms var(--cb-ease-premium);
}

.company-marquee--rail .company-marquee__item:is(:hover, :focus-visible) .company-marquee__logo-stage::before {
  height: 66%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--cb-logo-horizon-hover) 10%,
    var(--cb-logo-horizon-hover) 90%,
    transparent
  );
  opacity: 1;
  transform: translateY(-50%) scaleX(1);
}

.company-marquee--rail .company-marquee__item:is(:hover, :focus-visible)
  .company-marquee__logo-stage:has(
    .company-marquee__logo[src$="interamericano-transporte.png"],
    .company-marquee__logo[src$="vanbank.png"],
    .company-marquee__logo[src$="karla-sophya.png"],
    .company-marquee__logo[src*="universidad-interamericana.png"]
  )::before {
  height: 132%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--cb-interamericano-horizon) 12%,
    var(--cb-interamericano-horizon) 88%,
    transparent
  );
}

/* Vanbank's revealed band stays narrower than the Interamericano span so the
   light support hugs the square artwork. */
.company-marquee--rail .company-marquee__item:is(:hover, :focus-visible)
  .company-marquee__logo-stage:has(.company-marquee__logo[src$="vanbank.png"])::before {
  right: 18%;
  left: 18%;
}

.company-marquee--rail .company-marquee__logo-wrap::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 3rem;
  height: 2px;
  background: var(--cb-accent-primary);
  opacity: 0.86;
  transition: width 440ms var(--cb-ease-premium);
}

.company-marquee--rail .company-marquee__item:is(:hover, :focus-visible) .company-marquee__logo-wrap::before {
  width: 100%;
}

@keyframes cb-company-marquee-x {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes cb-hero-highlights-x {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (max-width: 47.99rem) {
  :root {
    --company-marquee-duration: 28s;
    --company-marquee-gap: 1.35rem;
    --company-marquee-item-width: 10.25rem;
    --company-marquee-item-height: 6.25rem;
    --company-marquee-edge-fade: 1.4rem;
    --hero-highlights-duration: 20s;
    --hero-highlights-gap: 2.275rem;
    --hero-highlight-size: 5.2rem;
  }

  .company-marquee__heading {
    margin-block-end: var(--cb-space-4);
  }

  .company-marquee__viewport {
    padding-block: calc(1.15rem + var(--company-marquee-reveal-headroom));
  }

  .company-marquee--quiet {
    --company-marquee-duration: 28s;
    --company-marquee-gap: 1.35rem;
  }

  .company-marquee--rail {
    --company-marquee-duration: 34s;
    --company-marquee-gap: 1.25rem;
    --company-marquee-item-width: 15.25rem;
    --company-marquee-item-height: 11rem;
  }

  .company-marquee--rail .company-marquee__viewport {
    padding-block: calc(1.25rem + var(--company-marquee-reveal-headroom))
      calc(2.25rem + var(--company-marquee-reveal-headroom));
  }

  .company-marquee__item:is(:hover, :focus-visible) {
    transform: translateY(calc(var(--company-marquee-item-offset) - 0.15rem)) scale(1);
  }
}

/* Infinite motion is suspended while the document is not visible. */
html.is-page-hidden .hero-highlights__track,
html.is-page-hidden .company-marquee__track {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero-highlights__viewport {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--cb-border-emphasis) transparent;
  }

  .hero-highlights__track {
    transform: none;
    animation: none;
    will-change: auto;
  }

  .hero-highlights__group[aria-hidden="true"] {
    display: none;
  }

  .company-marquee__viewport {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
    scrollbar-width: thin;
    scrollbar-color: var(--cb-border-emphasis) transparent;
    scroll-snap-type: x proximity;
  }

  .company-marquee__track {
    width: max-content;
    transform: none;
    animation: none;
    will-change: auto;
  }

  .company-marquee__group[aria-hidden="true"] {
    display: none;
  }

  .company-marquee__item {
    scroll-snap-align: center;
  }

  .company-marquee__item,
  .company-marquee__logo-wrap,
  .company-marquee__logo,
  .company-marquee__fallback,
  .company-marquee--rail .company-marquee__item::after,
  .company-marquee--rail .company-marquee__logo-wrap::before {
    transition-duration: 0.01ms;
  }

  .company-marquee__item:is(:hover, :focus-visible) {
    transform: translateY(var(--company-marquee-item-offset)) scale(1);
  }

  .company-marquee__item:is(:hover, :focus-visible) .company-marquee__logo {
    transform: scale(1);
  }

  .company-marquee__item:is(:hover, :focus-visible)
    .company-marquee__logo[src$="interamericano-transporte.png"] {
    transform: translate(-50%, -50%) scale(0.95);
  }

  .company-marquee--rail .company-marquee__item:is(:hover, :focus-visible)
    .company-marquee__logo[src$="interamericano-transporte.png"] {
    transform: translate(-50%, -50%) scale(1);
  }
}