/* ==========================================================================
   DIGICYUS — Spanish site redesign (/es/)
   Mirrors css/redesign.css from the English site, kept as its own local
   copy since /es/ ships its own css/ directory. Loaded after style.css /
   blue.css on each page. Does not modify style.css. Additive overrides;
   the cinematic hero rules are inert on pages with no #heroPin/#heroImageBox.
   ========================================================================== */

:root {
  --dc-ink: #05070d;
  --dc-ink-soft: #0a0f1e;
  --dc-ink-deep: #030407;
  --dc-card: rgba(255, 255, 255, 0.045);
  --dc-card-border: rgba(255, 255, 255, 0.1);
  /* #1c9cd6 is measured from the actual logo artwork (img/styleswitcher/logos/blue.png),
     not the darker #165883 shipped in css/skins/blue.css — this is the one
     brand blue used consistently across the redesign. */
  --dc-blue: #1c9cd6;
  --dc-blue-deep: #0d3d54;
  --dc-violet: #7c5cff;
  --dc-fog: #aab4c4;
  --dc-white: #f5f7fb;
  --dc-radius: 20px;
  --dc-label: "Plus Jakarta Sans", "Poppins", sans-serif;
}

/* --------------------------------------------------------------------------
   0. Whole-page cosmic backdrop — stars + void gradient, pure CSS (no
      canvas, no JS, negligible cost). style.css paints ".wrapper" solid
      white; we make it transparent so this shows through everywhere, not
      just behind the hero.
   -------------------------------------------------------------------------- */

body {
  background-color: var(--dc-ink);
  background-attachment: fixed;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 18%, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 22% 68%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1px 1px at 38% 32%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1.8px 1.8px at 52% 82%, rgba(255, 255, 255, 0.8), transparent 60%),
    radial-gradient(1px 1px at 64% 12%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1.4px 1.4px at 78% 55%, rgba(255, 255, 255, 0.75), transparent 60%),
    radial-gradient(1px 1px at 91% 28%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1.6px 1.6px at 96% 74%, rgba(255, 255, 255, 0.85), transparent 60%),
    radial-gradient(1.2px 1.2px at 12% 92%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1px 1px at 46% 6%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(140% 90% at 50% -10%, var(--dc-ink-soft) 0%, var(--dc-ink) 55%, var(--dc-ink-deep) 100%);
  background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat;
  background-size: 340px 340px, 280px 280px, 210px 210px, 380px 380px, 260px 260px, 300px 300px, 230px 230px, 360px 360px, 240px 240px, 200px 200px, 100% 100%;
}

.wrapper {
  background-color: transparent !important;
}

.preloader {
  background: var(--dc-ink) !important;
}

/* --------------------------------------------------------------------------
   1. Header polish (mechanics untouched — .header / .header-fixed toggle
      still comes from custom.js + style.css, we only refine the look)
   -------------------------------------------------------------------------- */

.header .navbar-brand {
  display: block;
}

.header ul.navbar-nav > li > a {
  font-family: var(--dc-label);
  letter-spacing: 0.06em;
  font-weight: 500;
  font-size: 12.5px;
}

/* The whole page is now dark (cosmic backdrop), so the header should stay
   "light content over dark glass" in both states — override style.css's
   solid-white / dark-text header-fixed look and its logo swap, which were
   designed for a white page below the fold. */
.header.header-fixed {
  box-shadow: 0 8px 30px -12px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  background-color: rgba(5, 7, 13, 0.72) !important;
  border-bottom: 1px solid var(--dc-card-border);
}

.header.header-fixed ul.navbar-nav > li > a {
  color: rgba(245, 247, 251, 0.85);
}

.header.header-fixed .logo a img.logo-light {
  opacity: 1 !important;
}

.header.header-fixed .logo a img.logo-dark {
  opacity: 0 !important;
}

/* css/skins/blue.css ships a darker, more muted #165883 for every blue
   accent on the page (buttons, active nav link, back-to-top, social icon
   borders). The logo artwork itself uses a brighter #1c9cd6 — this section
   redirects those accents to the one real brand blue so it reads the same
   everywhere, including the nav's active/hover state which needs the
   brighter tone anyway now that the header sits on a dark background. */
.header ul.navbar-nav > li.active > a,
.header ul.navbar-nav > li > a:hover,
.header ul.navbar-nav > li > a:focus,
.header ul.navbar-nav > li > a:active {
  color: var(--dc-blue) !important;
}

.custom-button {
  background-color: var(--dc-blue) !important;
}

.custom-button:before {
  color: var(--dc-blue) !important;
}

.custom-button:hover {
  color: var(--dc-blue) !important;
  background-color: #fff !important;
  border-color: var(--dc-blue) !important;
}

.custom-button3 {
  background-color: var(--dc-blue) !important;
}

.custom-button3:before {
  color: var(--dc-blue) !important;
}

.custom-button3:hover {
  color: var(--dc-blue) !important;
  background-color: #fff !important;
  border-color: var(--dc-blue) !important;
}

#back-top a {
  border-color: var(--dc-blue) !important;
}

#back-top a:hover {
  background-color: var(--dc-blue) !important;
}

.footer .social-icons ul li a {
  border-color: var(--dc-blue) !important;
}

.footer .social-icons ul li a:hover {
  background-color: var(--dc-blue) !important;
}

/* --------------------------------------------------------------------------
   2. Cinematic hero
   -------------------------------------------------------------------------- */

.cinematic-hero {
  position: relative;
  /* Same void tone as the page-wide cosmic backdrop (body), so the tail
     end of the pinned scroll range — once the stage is hidden — reveals
     what is already the same background, not a mismatched gap. */
  background: var(--dc-ink);
}

.cinematic-hero__pin {
  position: relative;
  height: auto; /* progressively enhanced below once JS confirms it can animate */
}

.cinematic-hero__stage {
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.5vh, 28px);
  padding: 110px 20px 40px;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, var(--dc-ink-soft) 0%, var(--dc-ink) 62%);
}

.cinematic-hero__copy {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
}

.cinematic-hero__kicker {
  margin: 0 0 14px;
  font-family: var(--dc-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.42em;
  color: var(--dc-blue);
  text-transform: uppercase;
}

.cinematic-hero__title {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 5vw, 48px);
  line-height: 1.15;
  color: var(--dc-white);
  text-transform: uppercase;
}

.cinematic-hero__actions {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.cinematic-hero__imagebox {
  position: relative;
  z-index: 1;
  width: min(88vw, 1080px);
  flex: 1 1 auto;
  min-height: 120px;
  max-height: 54vh;
  border-radius: var(--dc-radius);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--dc-card-border), 0 40px 90px -30px rgba(0, 0, 0, 0.75);
  transform-origin: 50% 100%;
  will-change: transform;
}

.cinematic-hero__imagebox img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/* Cosmic "docking" halo: a soft blue/violet glow that grows behind the
   image as it shrinks, so the final resting frame reads as settling into
   an orbit/light source rather than just stopping — see redesign.js. */
.cinematic-hero__halo {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 8%;
  width: 70%;
  aspect-ratio: 1;
  transform: translate(-50%, 30%) scale(0.6);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(closest-side, rgba(124, 92, 255, 0.55), rgba(28, 156, 214, 0.32) 55%, transparent 75%);
  filter: blur(30px);
}

.cinematic-hero__scroll {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--dc-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--dc-fog);
  text-decoration: none;
}

.cinematic-hero__scroll:hover,
.cinematic-hero__scroll:focus {
  color: var(--dc-white);
  text-decoration: none;
}

.cinematic-hero__scroll i {
  -webkit-animation: dc-bounce 1.6s ease-in-out infinite;
  animation: dc-bounce 1.6s ease-in-out infinite;
}

@-webkit-keyframes dc-bounce {
  0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
  50% { -webkit-transform: translateY(5px); transform: translateY(5px); }
}
@keyframes dc-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* Enhanced (JS-driven) state: only applied once redesign.js confirms the
   browser can run the scroll-linked animation and the user has not
   requested reduced motion. Without this class the hero above renders as a
   normal, fully visible, static section — a safe no-JS / no-animation
   fallback.

   Note: this uses position:fixed rather than position:sticky. The page
   wraps everything in ".wrapper{overflow:hidden}" (defined in the
   untouched style.css, used site-wide to clip decorative skewed
   sections), and an "overflow" other than visible on an ancestor that is
   not itself the scrolling element prevents position:sticky from ever
   re-pinning. position:fixed is not affected by that ancestor (it has no
   transform/filter that would create a containing block), so it is used
   here instead; redesign.js shows/hides it exactly at the pin boundaries
   so it never lingers over content below. */
html.dc-cinematic .cinematic-hero__pin {
  height: 280vh;
}

html.dc-cinematic .cinematic-hero__stage {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
}

html.dc-cinematic .cinematic-hero__pin--done .cinematic-hero__stage {
  visibility: hidden;
}

@media (max-width: 991px) {
  html.dc-cinematic .cinematic-hero__pin {
    height: 220vh;
  }
}

@media (max-width: 600px) {
  html.dc-cinematic .cinematic-hero__pin {
    height: 170vh;
  }
  .cinematic-hero__stage {
    padding-top: 120px;
  }
  .cinematic-hero__imagebox {
    max-height: 50vh;
  }
}

/* --------------------------------------------------------------------------
   3. Neutralise the legacy "skew" decoration for the sections we redesign
      (body.skew is used site-wide; we only cancel it inside index.html via
      this file, other pages keep the original look untouched)
   -------------------------------------------------------------------------- */

body.skew .about,
body.skew .services,
body.skew .videopromotion,
body.skew .footer {
  -webkit-transform: none;
  transform: none;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

body.skew .about .container,
body.skew .services .container,
body.skew .videopromotion .container,
body.skew .footer .container {
  -webkit-transform: none;
  transform: none;
}

body.skew .footer .container {
  padding: 70px 15px 0;
}

body.skew .about .container {
  padding: 110px 15px 100px !important;
}

body.skew .services .container {
  padding: 100px 15px 110px !important;
}

body.skew .videopromotion .section-overlay {
  padding: 110px 0;
}

/* --------------------------------------------------------------------------
   4. About — a glass panel floating over the cosmic backdrop instead of a
      solid white block (existing markup, no HTML edits)
   -------------------------------------------------------------------------- */

.about,
.project {
  background: transparent;
  position: relative;
}

.about::before,
.project::before {
  content: "";
  /* body.double-diagonal (see section 8 below) blanket-hides every
     section's ::before/::after; this is a real decoration, not that
     leftover skew shape, so it needs to opt back in explicitly. */
  display: block;
  position: absolute;
  top: 10%;
  left: 50%;
  width: min(900px, 70vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(28, 156, 214, 0.18), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Shared "glass panel" treatment for a page's main content block, reused
   across interior pages (About Us, Web Pages, and more as they're
   redesigned) instead of a solid white/grey section background. */
.about .container,
.project .container {
  position: relative;
  z-index: 1;
  background: var(--dc-card);
  border: 1px solid var(--dc-card-border);
  border-radius: 28px;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.about .top-text h1 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: var(--dc-white);
}

.about .top-text h1 span {
  color: var(--dc-blue);
}

.about-content p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--dc-fog);
}

.about .full-image-container img {
  border-radius: var(--dc-radius);
  box-shadow: 0 0 0 1px var(--dc-card-border), 0 30px 70px -30px rgba(0, 0, 0, 0.6);
}

/* --------------------------------------------------------------------------
   5. Services — glass cards over the cosmic backdrop (existing markup, no
      HTML edits)
   -------------------------------------------------------------------------- */

.services {
  background: transparent;
  position: relative;
}

.services::before {
  content: "";
  position: absolute;
  bottom: -10%;
  right: 5%;
  width: min(700px, 60vw);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(124, 92, 255, 0.14), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.services .top-text h1 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: var(--dc-white);
  position: relative;
  z-index: 1;
}

.services .top-text h1 span {
  color: var(--dc-blue);
}

.container-card {
  gap: 30px;
  position: relative;
  z-index: 1;
}

.card {
  background: var(--dc-card);
  border: 1px solid var(--dc-card-border);
  border-radius: var(--dc-radius);
  overflow: hidden;
  box-shadow: 0 20px 45px -25px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.65);
  border-color: rgba(255, 255, 255, 0.22);
}

.card .contenido-card h3 {
  font-family: "Poppins", sans-serif;
  color: var(--dc-white) !important;
}

.card .contenido-card p {
  color: var(--dc-fog);
}

/* --------------------------------------------------------------------------
   6. CTA (videopromotion) — refinement
   -------------------------------------------------------------------------- */

.videopromotion .top-text h1 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
}

.videopromotion .top-text h1 span {
  color: var(--dc-blue);
}

.videopromotion .video-content p {
  font-family: var(--dc-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  font-size: 13.5px;
}

/* --------------------------------------------------------------------------
   6b. Footer — already dark in style.css; just tie the palette together
   -------------------------------------------------------------------------- */

.footer {
  position: relative;
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124, 92, 255, 0.5), rgba(28, 156, 214, 0.5), transparent);
}

.footer .top-footer h4 {
  font-family: var(--dc-label);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.12em;
}

/* --------------------------------------------------------------------------
   7. Scroll-reveal utility (progressive enhancement)
   Base state = fully visible. JS adds "dc-reveal" (hidden/offset) and then
   "dc-reveal-in" once the element enters the viewport, so content is never
   hidden if JavaScript fails to run.
   -------------------------------------------------------------------------- */

.dc-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.dc-reveal-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .dc-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   8. Interior pages (About Us, and more as they're redesigned) — the
      "double-diagonal" skew system (a sibling of body.skew used on the
      home) needs the same kind of neutralising, and the .banner page
      header / tabs / secondary image styles are new here.
   -------------------------------------------------------------------------- */

body.double-diagonal section::before,
body.double-diagonal section::after {
  display: none;
}

body.double-diagonal .about,
body.double-diagonal .services,
body.double-diagonal .videopromotion,
body.double-diagonal .contact,
body.double-diagonal .contactform {
  -webkit-transform: none;
  transform: none;
}

body.double-diagonal .contactform {
  margin-top: 0;
}

body.double-diagonal .contactform .container {
  -webkit-transform: none !important;
  transform: none !important;
}

.banner {
  position: relative;
}

.banner .content {
  background-color: rgba(5, 7, 13, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.banner .content h1 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.banner hr {
  border-color: var(--dc-blue);
  opacity: 1;
}

.banner .breadcrumb > li a {
  color: var(--dc-blue) !important;
}

.title-about {
  font-family: "Poppins", sans-serif;
  font-weight: 700 !important;
  font-size: 32px !important;
  line-height: 1.2 !important;
  color: var(--dc-white) !important;
}

.title-about span {
  color: var(--dc-blue) !important;
}

.about .nav-tabs > li > a {
  font-family: var(--dc-label);
  color: var(--dc-fog);
  border-left-color: var(--dc-card-border) !important;
}

.about .nav-tabs > li.active > a {
  color: var(--dc-white) !important;
}

@media (max-width: 767px) {
  .about .nav-tabs > li > a {
    background: var(--dc-card);
    border-left: none !important;
  }
  .about .nav-tabs > li.active > a {
    background: var(--dc-blue);
  }
}

.about-right-side img {
  border: none !important;
  opacity: 1 !important;
  border-radius: var(--dc-radius);
  box-shadow: 0 0 0 1px var(--dc-card-border), 0 30px 70px -30px rgba(0, 0, 0, 0.6);
  -webkit-box-reflect: none !important;
}

/* Web Pages project images (.imagen/.imagen2) ship with a light "polaroid"
   border and a rotate-on-hover flourish, both left over from the old
   theme's light background — swap for the same glass treatment used
   elsewhere, without the tilt. */
.imagen,
.imagen2 {
  border: none !important;
  border-radius: var(--dc-radius);
  box-shadow: 0 0 0 1px var(--dc-card-border), 0 30px 70px -30px rgba(0, 0, 0, 0.6);
}

.imagen:hover,
.imagen2:hover {
  -webkit-transform: none !important;
  -moz-transform: none !important;
  -o-transform: none !important;
  transform: none !important;
}

.title-project {
  font-family: "Poppins", sans-serif;
  font-weight: 700 !important;
  color: var(--dc-white) !important;
}

.title-project span {
  color: var(--dc-blue) !important;
}

hr.linea {
  border-top: 1px dashed var(--dc-card-border);
}

hr.linea:after {
  background: var(--dc-ink);
  color: var(--dc-fog);
}

.project .project-details ul li i {
  color: var(--dc-blue);
}

/* --------------------------------------------------------------------------
   9. Pricing (Online Digital Marketing) — cards over the starfield instead
      of a light-grey section with white cards
   -------------------------------------------------------------------------- */

.pricing {
  background: transparent;
}

.pricing .top-text h1 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: var(--dc-white);
}

.pricing .top-text h1 span {
  color: var(--dc-blue);
}

.pricing-wrapper > li {
  background-color: var(--dc-card) !important;
  border: 1px solid var(--dc-card-border);
  border-radius: var(--dc-radius);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.pricing-wrapper > li::after {
  display: none;
}

.pricing-header {
  background-color: var(--dc-blue) !important;
}

.price-content .currency {
  color: var(--dc-white) !important;
}

.pricing-features em {
  color: var(--dc-white);
}

.pricing-features li {
  color: var(--dc-fog);
  border-bottom-color: var(--dc-card-border) !important;
}

.pricing-list .popular {
  background-color: var(--dc-violet) !important;
}

/* "Tailor Made Digital Plans" CTA strip — untitled <section> in the
   markup, tagged with this class so it can be targeted precisely. */
.tailor-plans .top-text h1 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: var(--dc-white);
}

.tailor-plans .top-text h1 span {
  color: var(--dc-blue);
}

.tailor-plans .top-text h4 {
  color: var(--dc-fog);
}

/* --------------------------------------------------------------------------
   10. Contact — the form section drops its old photo background and white
       pill inputs in favor of the same glass-panel treatment used on
       About Us / Web Pages / Merchandising / Online Digital Marketing.
   -------------------------------------------------------------------------- */

.contactform {
  background: transparent !important;
}

.contactform .section-overlay {
  background: transparent !important;
}

.contactform .container {
  position: relative;
  z-index: 1;
  background: var(--dc-card);
  border: 1px solid var(--dc-card-border);
  border-radius: 28px;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.contactform .top-text h1 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: var(--dc-white);
}

.contactform .top-text h1 span {
  color: var(--dc-blue);
}

.contactform .top-text h4 {
  color: var(--dc-fog);
}

.custom-input,
.contactform textarea {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--dc-card-border);
}

.custom-input-field {
  color: var(--dc-white) !important;
}

.custom-input-field::placeholder,
.contactform textarea::placeholder {
  color: var(--dc-fog);
  opacity: 0.85;
}

.custom-input-label::before {
  background-color: var(--dc-blue) !important;
}

/* --------------------------------------------------------------------------
   11. Client logos ("Our Clients") — a CSS-only marquee, replacing the old
       bxSlider carousel (one less jQuery plugin to load).

       The logo files are inconsistent with each other: some ship a baked-in
       white background, some a black one, and some are dark artwork on
       transparency (logo_agus would be all but invisible here). So rather
       than fight them individually, each logo sits on the same white chip,
       which normalises all of them against the cosmic backdrop and keeps
       every client's real brand colours intact.
   -------------------------------------------------------------------------- */

.clients {
  background: transparent;
  position: relative;
  padding: 90px 0;
}

.clients .top-text h1 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: var(--dc-white);
}

.clients .top-text h1 span {
  color: var(--dc-blue);
}

.clients .top-text h4 {
  color: var(--dc-fog);
}

/* Fade the marquee out at both edges instead of cutting it off hard. */
.clients__viewport {
  margin-top: 45px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* The track holds two identical groups; each group carries its own trailing
   gap, so translating exactly -50% lands the copy where the original was and
   the loop is seamless. */
.clients__track {
  display: flex;
  width: max-content;
  animation: dc-marquee 44s linear infinite;
}

.clients__viewport:hover .clients__track {
  animation-play-state: paused;
}

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

.clients__group {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 0 26px 0 0;
  margin: 0;
  list-style: none;
}

.clients__item {
  flex: 0 0 auto;
  width: 190px;
  height: 104px;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: var(--dc-radius);
  box-shadow: 0 0 0 1px var(--dc-card-border), 0 22px 45px -25px rgba(0, 0, 0, 0.7);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.clients__item:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 0 1px rgba(28, 156, 214, 0.55), 0 26px 55px -22px rgba(0, 0, 0, 0.8);
}

.clients__item a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.clients__item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 767px) {
  .clients {
    padding: 60px 0;
  }
  .clients__group {
    gap: 18px;
    padding-right: 18px;
  }
  .clients__item {
    width: 150px;
    height: 86px;
    padding: 12px 16px;
  }
}

/* No motion: drop the marquee, hide the duplicate set, and let the real
   logos wrap into a plain centred grid. */
@media (prefers-reduced-motion: reduce) {
  .clients__viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .clients__track {
    animation: none;
    width: auto;
    justify-content: center;
  }
  .clients__group {
    flex-wrap: wrap;
    justify-content: center;
    padding-right: 0;
  }
  .clients__group[aria-hidden="true"] {
    display: none;
  }
}