/* 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)
   }
 }

 /* The pill these sit in is 25.2rem square, so it scales with the viewport
    like everything else. The logo inside was pinned at 42px, which made it
    18% of the pill on a 1440 laptop and 10% on a 2560 monitor -- the mark
    kept its size while the disc grew around it. Stated as a share of the
    same rem instead, so the proportion the laptop was tuned to is what
    ships at every width. 5.3rem of 25.2rem is 21%, a little more presence
    than the 42px it replaces.

    This is the same fix the .carousel-benefits glyph above already carries,
    for the same reason. */
 .carousel-logos .image,
 .carousel-logos img {
   max-height: max(20px, 5.3rem);
   width: auto;
   object-fit: contain
 }

 /* Under 1100px the theme shortens the pill to 12rem; the mark follows it
    down so the 21% holds there too rather than ballooning. */
 @media (max-width: 1099px) {

   .carousel-logos .image,
   .carousel-logos img {
     max-height: max(18px, 2.5rem)
   }
 }

 /* The logo sits centred in its pill: the 20% top margin is what brings it
    down to the middle. */
 .carousel.carousel-logos .carousel-item .image-wrapper .image-inner {
   width: 100%;
   height: 100%;
   margin-top: 20%;
 }

 /* The theme paints an iridescent disc here and expects a flat glyph on top.
    Inverted: the disc is dropped and the gradient is carried by the icon's
    own strokes (the ramp lives inside each SVG), so the mark reads straight
    off the dark chip. */
 .carousel.carousel-benefits .carousel-item .image-wrapper .image-inner {
   background: none;
   border-radius: 0;
   /* never smaller than the glyph, so the mark is not clipped on a phone,
      where the theme's own 4rem box is the narrower of the two */
   width: max(4rem, var(--cb-icon));
   height: max(4rem, var(--cb-icon));
 }

 /* The pill is stated in rem, and main-style.css drives html font-size off
    vw, so the pill grows with the screen. A glyph pinned at 28px did not:
    it held its size while the pill widened around it, until on a large
    monitor it read as a speck in the middle of the chip. So the glyph is a
    share of the pill instead — .1852 is what those 28px measured against
    the pill's height on a 1440 laptop, and that proportion is what carries
    everywhere. The floor keeps the mark legible on a narrow phone, where
    the same share would put it near 10px. */
 .carousel.carousel-benefits .carousel-item {
   --cb-h: 16.8rem;
   --cb-icon: max(22px, calc(var(--cb-h) * .1852));
 }

 @media (max-width: 1099px) {
   .carousel.carousel-benefits .carousel-item {
     /* the theme shortens the pill here; the glyph follows it down */
     --cb-h: 10.4rem;
   }
 }

 /* no disc to sit inside any more, so the glyph takes the full box */
 .carousel-benefits .image-wrapper img,
 .carousel-benefits img {
   width: var(--cb-icon) !important;
   height: var(--cb-icon) !important;
   max-width: var(--cb-icon) !important;
   max-height: var(--cb-icon) !important;
   object-fit: contain;
 }

 /* 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;
 }