/* 1024-1199px keeps its native 2.5rem (untouched). <=1023px was silently stuck at 1.2rem because of
   an `html.en`-prefixed rule (higher specificity, common.css) — match its prefix to override it. */
@media (max-width:1023px) {
    html.en #wrapper .business.ability .motionWrap .circleWrap .scrollCircle strong {
        font-size: 2.5rem;
    }
}

@media (max-width:768px) {
    html.en #wrapper .business.ability .motionWrap .circleWrap .scrollCircle strong {
        font-size: 2rem;
    }
}

@media (max-width:580px) {
    html.en #wrapper .business.ability .motionWrap .circleWrap .scrollCircle strong {
        font-size: 1.4rem;
    }
}

@media (max-width:480px) {
    html.en #wrapper .business.ability .motionWrap .circleWrap .scrollCircle strong {
        font-size: 0.98rem;
    }
}

/* .arrIcon has z-index:10, strong has none, so the arrows sit above the text wherever they overlap. */
#wrapper .business.ability .motionWrap .circleWrap .scrollCircle strong {
    z-index: 11;
}

/* Native value here is bottom:-3rem (from the 768px breakpoint) — more negative moves it down. */
@media (max-width:480px) {
    html.en #wrapper .business.ability .motionWrap .circleWrap .scrollCircle .pointLabel li:nth-child(3) {
        bottom: -4.1rem;
    }
}

/* cardTxt p/ul>li are 2rem/1.125rem at base and only get overridden at <=768px — nothing covers
   769-900px, so this fills that gap at 0.8x the base value. */
@media (min-width:769px) and (max-width:900px) {
    #wrapper .business.ability .motionWrap .cardWrap .cardList>li a .cardTxt p {
        font-size: 1.6rem;
    }

    #wrapper .business.ability .motionWrap .cardWrap .cardList>li a .cardTxt ul>li {
        font-size: 0.9rem;
    }
}

/* Card height drops 32.5rem -> 26rem at <=768px, but background-size (width-based, height:auto)
   doesn't shrink with it, so the top of the image gets clipped by the card's overflow:hidden.
   Scale it down by the same ratio (26/32.5 = 0.8) the height shrank. */
@media (max-width:768px) {
    #wrapper .business.ability .motionWrap .cardWrap .cardList>li::before {
        background-size: 69%;
    }
}

/* .abilitySwiper has max-width:62.5rem but no margin:auto, so it sits flush-left in its wider
   parent — not obvious with 2 cards filling more of it, very obvious now with just 1. */
#wrapper .business.ability .motionWrap .cardWrap .abilitySwiper {
    margin: 0 auto;
}

/* Now that the "Áreas de I+D" card list has only one slide, Swiper still sizes it for 2-up
   (slidesPerView:2 in contents_02.js) via inline width, leaving the other half empty. Force just
   this list's slide to fill the row — scoped off .t-techDev so the other, still-2-card swiper
   section (Desarrollo Tecnológico) is untouched. */
#wrapper .business.ability .motionWrap .cardWrap:not(.t-techDev) .cardList>li.swiper-slide {
    width: 100% !important;
}

/* That slide doubling from ~50% to 100% width also doubled the width-based background-size image,
   which now overflows the fixed 32.5rem height and gets clipped. Halve it back down (>=769px only;
   <=768px already has its own 69% fix above, computed from an unchanged 100% width). */
@media (min-width:769px) {
    #wrapper .business.ability .motionWrap .cardWrap:not(.t-techDev) .cardList>li::before {
        background-size: 43%;
    }
}

/* cardTxt p/ul>li are 1.5rem/1rem at <=768px (see above); nothing narrower touches them, so this
   is 0.8x that value for <=430px specifically. */
@media (max-width:430px) {
    #wrapper .business.ability .motionWrap .cardWrap .cardList>li a .cardTxt p {
        font-size: 1.2rem;
    }

    #wrapper .business.ability .motionWrap .cardWrap .cardList>li a .cardTxt ul>li {
        font-size: 0.8rem;
    }
}

/* 0.9x of the <=430px values above (1.2rem/0.8rem). */
@media (max-width:360px) {
    #wrapper .business.ability .motionWrap .cardWrap .cardList>li a .cardTxt p {
        font-size: 1.08rem;
    }

    #wrapper .business.ability .motionWrap .cardWrap .cardList>li a .cardTxt ul>li {
        font-size: 0.72rem;
    }
}

/* .opacityTxt has no font-size of its own — it inherits .slideTit's, which is unconditionally
   5.625rem in 769-1023px (no rule covers that gap) and 2.5rem at <=768px. 0.7x each, split at
   the same 768px boundary so <=768's existing value isn't affected by the wider band's fix. */
@media (min-width:769px) and (max-width:950px) {
    .fullSwiperWrap .swiper.fullSwiper .swiper-slide .slideContent .slideTit .opacityTxt {
        font-size: 3.9375rem;
    }
}

@media (max-width:768px) {
    .fullSwiperWrap .swiper.fullSwiper .swiper-slide .slideContent .slideTit .opacityTxt {
        font-size: 1.75rem;
    }
}

/* 0.8x of the 3.9375rem set above, for the narrower half of that same 769-950px band. */
@media (min-width:769px) and (max-width:880px) {
    .fullSwiperWrap .swiper.fullSwiper .swiper-slide .slideContent .slideTit .opacityTxt {
        font-size: 3.15rem;
    }
}