/* the theme leaves 3.2rem between the logo block and the nav; this opens
    that up. Kept to the desktop header — under 1100px .header-main-inner
    goes full width on its own negative margins. */
 @media (min-width: 1100px) {
   .header .header-main-inner {
     margin-right: 6.4rem
   }
 }

 .vel-logo {
   display: inline-flex;
   align-items: center;
   line-height: 1;
   white-space: nowrap
 }

 /* the theme ships img,svg{max-width:100%} and caps .header-logo at 12.4rem
    (9.4rem under 1100px); against a fixed height that squashed the wordmark,
    so this one image opts out of the clamp and keeps its own ratio. */
 .vel-logo img {
   display: block;
   width: auto;
   max-width: none;
   flex: none
 }

 /* header pill is white -> the artwork is already black;
    footer and weaver sit on #000 -> invert the wordmark to white */
 .vel-logo--head img {
   /* rem, not px. main-style.css drives html{font-size} off vw, so the
      header pill is 6.4rem and grows with the screen; a wordmark pinned at
      22px did not, and shrank against the bar as the monitor got wider --
      measured 38% of the pill height at 1440 but only 21% at 2560. As a
      share of the same rem the ratio holds at every width, and 3rem sets it
      a little larger than the 22px it replaces. The floor is for the
      1100-1250 band, where .625vw has not yet caught up. */
   height: max(21px, 2.6rem);
   /* optical: dropped 2px so the wordmark centres against the pill */
   position: relative;
   top: 2px
 }

 /* the theme clips .header-main-inner, and on desktop that box wraps
    nothing but the logo -- the clip could only ever cut the wordmark */
 .header .header-main-inner {
   overflow: visible
 }

 .vel-logo--foot img {
   height: 38px;
   filter: invert(1)
 }

 /* the weaver wordmark reads bigger, but the extra height is pulled back
    out with negative block margins so the .footer-weaver box it sits in
    keeps the exact height it had at 24px */
 .vel-logo--weave img {
   height: 44px;
   margin-block: -10px;
   max-width: 100%;
   object-fit: contain;
   filter: invert(1)
 }

 @media(max-width:1099px) {
   .vel-logo--head img {
     /* same reasoning, against the shorter 4.8rem mobile bar */
     height: max(19px, 2rem)
   }
 }

 .carousel-logos .image,
 .carousel-logos img {
   max-height: 7.5rem;
   width: auto;
   max-width: 100%;
   object-fit: contain
 }

 @media(max-width: 1099px) {

   .carousel-logos .image,
   .carousel-logos img {
     max-height: 4rem
   }
 }

 /* iridescent solution labels — same palette as the buttons, swept for shimmer */
 .solution-label.label {
   /* misma pila de radiales que el botón de cabecera: el lavado
      iridiscente queda fijo, sin el barrido de vel-irid */
   background-color: #8ee0e4;
   background-image: radial-gradient(at 20% 28%, #5eead4 0px, transparent 55%),
     radial-gradient(at 80% 14%, #a78bfa 0px, transparent 52%),
     radial-gradient(at 66% 86%, #f472b6 0px, transparent 55%),
     radial-gradient(at 10% 74%, #67e8f9 0px, transparent 50%),
     radial-gradient(at 94% 64%, #818cf8 0px, transparent 50%);
   color: #0b0b0c;
 }

 /* intro loader: "velaccio" wipes open from the sides, and closes the same way.
The 3 .letter SVGs stay in the DOM (GSAP's intro timeline targets them and
resolves the loader promise) but are pulled out of the flex flow. */
 .page-loader-logo .letter {
   position: absolute !important;
   opacity: 0 !important;
   pointer-events: none
 }

 .vel-load-word {
   display: block;
   width: clamp(210px, 46vw, 630px);
   height: auto;
   filter: invert(1);
   clip-path: inset(0 50% 0 50%);
   animation: vel-load-in .3s cubic-bezier(.65, 0, .35, 1) .12s forwards;
 }

 @keyframes vel-load-in {
   to {
     clip-path: inset(0 0 0 0)
   }
 }

 /* .site-loaded lands exactly when the swoosh starts */
 html.site-loaded .vel-load-word {
   animation: vel-load-out .3s cubic-bezier(.65, 0, .35, 1) forwards
 }

 @keyframes vel-load-out {
   from {
     clip-path: inset(0 0 0 0)
   }

   to {
     clip-path: inset(0 50% 0 50%)
   }
 }

 @media(prefers-reduced-motion:reduce) {
   .vel-load-word {
     animation: none;
     clip-path: none
   }

   html.site-loaded .vel-load-word {
     animation: none;
     opacity: 0
   }
 }

 /* header top-right "Reservar llamada": gradient fill on hover */
 .header .header-main .header-buttons .btn:last-child .btn-fill {
   background: radial-gradient(at 20% 28%, #5eead4 0px, transparent 55%),
     radial-gradient(at 80% 14%, #a78bfa 0px, transparent 52%),
     radial-gradient(at 66% 86%, #f472b6 0px, transparent 55%),
     radial-gradient(at 10% 74%, #67e8f9 0px, transparent 50%),
     radial-gradient(at 94% 64%, #818cf8 0px, transparent 50%),
     #8ee0e4;
 }

 /* the fill is light, so the label must go dark while hovered */
 .header .header-main .header-buttons .btn:last-child:hover,
 .header .header-main .header-buttons .btn:last-child:hover .btn-text {
   color: #0b0b0c
 }
 /* navbar "Casos": the theme gives it a cyan hover edge over an iridescent
    wash. Both go black here, so the label has to invert to white as the
    fill sweeps across it. */
 .header .header-main .header-buttons .btn.btn-outline-dark:not(.btn-static):hover {
   box-shadow: 0 0 0 1px #0b0b0c;
 }

 .header .header-main .header-buttons .btn.btn-outline-dark .btn-fill {
   background: #0b0b0c;
 }

 .header .header-main .header-buttons .btn.btn-outline-dark:not(.btn-static):hover,
 .header .header-main .header-buttons .btn.btn-outline-dark:not(.btn-static):hover .btn-text,
 .header .header-main .header-buttons .btn.btn-outline-dark:not(.btn-static):hover .btn-text .line {
   color: #fff;
 }