/* .topDesc relies purely on justify-content:space-between for the h3-p gap (no explicit gap
   property); once h3 wraps to 2 lines and both max-widths nearly fill the row (>=1200px, before
   it switches to a stacked column layout), that computed gap can shrink to ~0 and the two touch. */
@media (min-width:1200px) {
    #wrapper .business .topDesc h3 {
        margin-right: 2.5rem;
    }
}

/* .descCol .descItem is a fixed 33.33% (3-up) elsewhere on the site; this page now has 4 plant
   cards (added Branchburg), so 4 items at 33.33% would overflow the row instead of fitting. */
#wrapper .business .descCol .descItem {
    width: 25%;
}

/* Second (Branchburg) paragraph added to .topDescTextWrap; .topDesc p sets margin-top:0 for all
   p's, so without this the two paragraphs would run together with no gap. */
#wrapper .business .topDesc .topDescTextWrap p + p {
    margin-top: 1.5rem;
}

/* .topDesc p carried max-width:44.25rem (and margin-top:0, countering a global `h3+* {margin-top:
   2.5rem}` rule) as the flex row's second item; now that item is .topDescTextWrap (a div) instead
   of a bare p, so `h3+*` still matches it but the p-specific override no longer does — it needs
   both declared directly. */
#wrapper .business .topDesc .topDescTextWrap {
    max-width: 44.25rem;
    margin-top: 0;
}

@media (max-width:1199px) {
    #wrapper .business .topDesc .topDescTextWrap {
        max-width: 100%;
    }
}

/* common.css only detaches .desTit to the card's top-left at <=1023px (not <=1199px as I first
   assumed — that 1199 boundary belongs to a different component, .topDesc, on this same page).
   1024-1199px was a real gap, left on the original bottom-anchored flex layout. Cover it here too
   by starting this rule at 1024px instead of 1200px. */
@media (min-width:1024px) {
    #wrapper .business .descCol .descContent {
        top: 0;
        left: 0;
        bottom: auto;
        width: 100%;
        height: 100%;
        padding-right: 0;
    }

    #wrapper .business .descCol .descContent .desTit {
        position: absolute;
        top: 2.5rem;
        left: 2.5rem;
    }

    #wrapper .business .descCol .descContent .desPoint {
        position: absolute;
        right: 2.5rem;
        bottom: 2rem;
    }
}

/* .descContent sets font-size:2rem (inherited by .desTit and the plain value span);
   .desSub overrides to 1rem separately. 0.8x each, at <=1440px. */
@media (max-width:1440px) {
    #wrapper .business .descCol .descContent .desTit,
    #wrapper .business .descCol .descContent .desPoint > span {
        font-size: 1.6rem;
    }

    #wrapper .business .descCol .descContent .desPoint .desSub {
        font-size: 0.8rem;
    }
}

/* 0.7x of the 1.6rem/0.8rem set above. */
@media (max-width:1199px) {
    #wrapper .business .descCol .descContent .desTit,
    #wrapper .business .descCol .descContent .desPoint > span {
        font-size: 1.12rem;
    }

    #wrapper .business .descCol .descContent .desPoint .desSub {
        font-size: 0.56rem;
    }
}

/* Branchburg is the 4th (last) card; .descContent sets color:#fff for all — this one just needs
   its desTit label in black, matching its lighter/overcast photo background. */
#wrapper .business .descCol .descItem:nth-child(4) .descContent .desTit {
    color: #111;
}

/* Native stacked layout (flex-wrap:wrap + width:100% per card) only kicks in at <=768px, same as
   the .descItem width rule this file already overrides to 25%/100% split. Extend stacking up
   through 1120px; .descCol already has gap:1.5rem unconditionally for spacing between cards. */
@media (max-width:1120px) {
    #wrapper .business .descCol {
        flex-wrap: wrap;
    }

    #wrapper .business .descCol .descItem {
        width: 100%;
        max-width: initial;
    }
}

/* 2x the 1.12rem/0.56rem set in the <=1199px tier above — cards are now full-width/stacked at
   this size, so there's room for bigger text. */
@media (max-width:1120px) {
    #wrapper .business .descCol .descContent .desTit,
    #wrapper .business .descCol .descContent .desPoint > span {
        font-size: 2.24rem;
    }

    #wrapper .business .descCol .descContent .desPoint .desSub {
        font-size: 1.12rem;
    }
}

/* 1121-1199px is the un-doubled band (that only kicks in at <=1120px) but still within the
   <=1199px 0.56rem desSub tier — 1.5x of that value, scoped to just this gap. */
@media (min-width:1121px) and (max-width:1199px) {
    #wrapper .business .descCol .descContent .desPoint .desSub {
        font-size: 0.84rem;
    }
}

/* 0.8x of the 2.24rem/1.12rem set above. */
@media (max-width:486px) {
    #wrapper .business .descCol .descContent .desTit,
    #wrapper .business .descCol .descContent .desPoint > span {
        font-size: 1.792rem;
    }

    #wrapper .business .descCol .descContent .desPoint .desSub {
        font-size: 0.896rem;
    }
}

/* "Plantas de Producción de Biofármacos" section (.product-box): h3/.subTxt/.num/.tit are 2rem/
   1.125rem/1rem/1.2rem at <=768px (their only existing tier below desktop). 0.8x each at <=500px. */
@media (max-width:500px) {
    #wrapper .business .product-box > h3 {
        font-size: 1.6rem;
    }

    #wrapper .business .product-box .subTxt {
        font-size: 0.9rem;
    }

    #wrapper .business .product-box .product-list .item .item-head .num {
        font-size: 0.8rem;
    }

    #wrapper .business .product-box .product-list .item .item-head .tit {
        font-size: 0.96rem;
    }
}

/* .content-desc strong/p are 1.5rem/1.125rem unconditionally (the <=768px tier only touches
   width/margin, not font-size). 0.8x each at <=768px. */
@media (max-width:768px) {
    #wrapper .business .product-box .product-list .item .item-content .content-desc strong {
        font-size: 1.2rem;
    }

    #wrapper .business .product-box .product-list .item .item-content .content-desc p {
        font-size: 0.9rem;
    }
}