/* ==========================================================================
   Equitrac — Responsive titles
   The page builder bakes fixed desktop px font-sizes into inline styles
   (e.g. style="font-size: 56px"), so those never shrink on phones no
   matter what heading tag (h1/h2/h3) is used — the inline value always
   wins. These classes replace the inline font-size with sizing that
   actually scales down for small screens, then grows back up at the
   theme's own breakpoints (480 / 778 / 1024 / 1240, matching the slider
   settings already used elsewhere on the page).
   ========================================================================== */

/* ==========================================================================
   Mobile layout safety net — product/spec detail pages
   Several pages (engine models, tractors, gensets, brand pages) lay their
   description text out in percentage-width columns — sometimes a column
   that's 60% of an already-narrow 45%-wide sidebar (~27% of the page).
   If those don't collapse to full width on phones, the text gets squeezed
   into a sliver, which makes it look oversized and forces long Spanish
   words to break mid-word instead of wrapping at the word boundary.
   ========================================================================== */

@media (max-width: 767px) {

    .gdlr-core-pbf-sidebar-content,
    .gdlr-core-pbf-sidebar-content-inner,
    .gdlr-core-pbf-column,
    [class*="gdlr-core-column-"] {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Let long words wrap at a natural break point instead of splitting
   mid-word, wherever a column ends up narrower than a word. */
.gdlr-core-text-box-item-content,
.gdlr-core-stunning-text-item-content,
.gdlr-core-portfolio-content,
.gdlr-core-title-item-title,
.textwidget {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}

/* ---- Page title banner (theme heading over the hero photo on every
   subpage, e.g. "ADHESIVOS", "TRACTORES", "GRUPOS ELECTRÓGENOS CUMMINS").
   Targeting the theme's own ".realfactory-page-title" class kept losing
   to the theme's stylesheet no matter how specific the selector got, so
   this now targets a dedicated class ("equitrac-page-title") added
   directly on each heading — the same approach already used for the
   index.html hero title, which works. A brand-new class can't collide
   with anything in the theme's CSS, so there's nothing left to out-rank. */
.equitrac-page-title {
    font-size: 23px !important;
    line-height: 1.2 !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    white-space: normal !important;
}

@media (min-width: 481px) {
    .equitrac-page-title {
        font-size: 29px !important;
    }
}

@media (min-width: 778px) {
    .equitrac-page-title {
        font-size: 36px !important;
    }
}

@media (min-width: 1025px) {
    .equitrac-page-title {
        font-size: 42px !important;
        word-break: initial !important;
    }
}


.equitrac-hero-title {
    font-size: 28px;
    line-height: 1.25;
}

@media (min-width: 481px) {
    .equitrac-hero-title {
        font-size: 34px;
    }
}

@media (min-width: 778px) {
    .equitrac-hero-title {
        font-size: 44px;
        line-height: 1.2;
    }
}

@media (min-width: 1025px) {
    .equitrac-hero-title {
        font-size: 56px;
    }
}

/* ---- Larger hero title variant (e.g. mensaje-enviado.html
   "Mensaje Enviado" confirmation page, desktop 75px) ---- */
.equitrac-hero-title-lg {
    font-size: 32px;
    line-height: 1.2;
}

@media (min-width: 481px) {
    .equitrac-hero-title-lg {
        font-size: 42px;
    }
}

@media (min-width: 778px) {
    .equitrac-hero-title-lg {
        font-size: 58px;
    }
}

@media (min-width: 1025px) {
    .equitrac-hero-title-lg {
        font-size: 75px;
    }
}

/* ---- Hero subtitle paragraph ---- */
.equitrac-hero-subtitle {
    font-size: 16px;
}

@media (min-width: 481px) {
    .equitrac-hero-subtitle {
        font-size: 18px;
    }
}

@media (min-width: 1025px) {
    .equitrac-hero-subtitle {
        font-size: 20px;
    }
}

/* ---- Section titles (e.g. "Nuestra historia") ---- */
.equitrac-section-title {
    font-size: 24px;
}

@media (min-width: 481px) {
    .equitrac-section-title {
        font-size: 28px;
    }
}

@media (min-width: 778px) {
    .equitrac-section-title {
        font-size: 32px;
    }
}

@media (min-width: 1025px) {
    .equitrac-section-title {
        font-size: 36px;
    }
}

/* ---- Smaller section title variant (e.g. gensets.html
   "Precios competitivos y atención personalizada", desktop 27px) ---- */
.equitrac-section-title-sm {
    font-size: 19px;
}

@media (min-width: 481px) {
    .equitrac-section-title-sm {
        font-size: 22px;
    }
}

@media (min-width: 778px) {
    .equitrac-section-title-sm {
        font-size: 25px;
    }
}

@media (min-width: 1025px) {
    .equitrac-section-title-sm {
        font-size: 27px;
    }
}

/* ---- Larger section title variant (e.g. repuestos-valtra.html
   "Los repuestos más vendidos", desktop 33px) ---- */
.equitrac-section-title-lg {
    font-size: 22px;
}

@media (min-width: 481px) {
    .equitrac-section-title-lg {
        font-size: 26px;
    }
}

@media (min-width: 778px) {
    .equitrac-section-title-lg {
        font-size: 30px;
    }
}

@media (min-width: 1025px) {
    .equitrac-section-title-lg {
        font-size: 33px;
    }
}

/* ---- Extra-large section title variant (e.g. valtra-a134.html /
   valtra-a850.html / valtra-a990.html / valtra-bt210.html product
   name titles, desktop 37px) ---- */
.equitrac-section-title-xl {
    font-size: 24px;
}

@media (min-width: 481px) {
    .equitrac-section-title-xl {
        font-size: 28px;
    }
}

@media (min-width: 778px) {
    .equitrac-section-title-xl {
        font-size: 33px;
    }
}

@media (min-width: 1025px) {
    .equitrac-section-title-xl {
        font-size: 37px;
    }
}

/* ---- Hero section padding ----
   180px top/bottom was fixed regardless of screen size, which made the
   hero feel oversized on phones on top of the large title. Scale it
   down on smaller screens and restore the original value on desktop. */
.equitrac-hero-wrapper {
    padding: 90px 0px !important;
}

@media (min-width: 481px) {
    .equitrac-hero-wrapper {
        padding: 120px 0px !important;
    }
}

@media (min-width: 778px) {
    .equitrac-hero-wrapper {
        padding: 150px 0px !important;
    }
}

@media (min-width: 1025px) {
    .equitrac-hero-wrapper {
        padding: 180px 0px !important;
    }
}