/* --------- Typography ----------------------------------------------------------------------------------- */
/* h1, h2 {
    font-family: 'Anton', serif;
    letter-spacing: 0.03em;
}

body, h3, h4, h5, h6, p, label, input, select, textarea, button {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
} */

/* --------- General Styles ----------------------------------------------------------------------------------- */
.lead p {
    font-size: 1.50rem;
    font-weight: 400;
}

sub {
    bottom: 0;
}

.pattern-layer-custom-map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.6;
    pointer-events: none;
}

strong {
    font-weight: 700 !important;
}

hr {
    height: 3px;
    background-color: var(--color-green-one);
}

/* --------- Light Section Styles --------------------------------------------------------------------------------- */
.hero_carousel_main-text p {
    color: #fff;
    font-size: 1.5rem;
}


/* -------- Dark Section Styles --------------------------------------------------------------------------------- */

.dark-section .testimonial-section-three{
    background-color: transparent;
    padding: 0;
}


.dark-section {
    background: var(--color-r-black);
    padding: 70px 0;
    position: relative;
}

.dark-section h2,
.dark-section h3,
.dark-section p {
    color: #fff;
}

.card-dark-text h2,
.card-dark-text h3,
.card-dark-text p {
    color: var(--color-r-black) !important;
}

.clients-section .owl-theme .image-box {
    padding: 10px;
    text-align: center;
    background: var(--color-r-black) !important;
}

.text-division {
    color: var(--color-msb);
    font-size: var(--font-30);
    font-weight: bold;
    margin: 10px;
}

@media (max-width: 600px) {
    .clients-section .owl-theme .image-box {
        padding: 20px 15px;
    }

    .text-division {
        font-size: 1.2rem;
        margin: 5px;
    }
}

@media (min-width: 601px) and (max-width: 800px) {
    .text-division {
        font-size: 1.1rem;
        margin: 5px;
    }
}

.dark-section .pattern-layer-one {
    position: absolute;
    left: 7%;
    top: 0%;
    width: 405px;
    height: 394px;
}

.dark-section .pattern-layer-two {
    position: absolute;
    right: 4%;
    top: 40%;
    width: 232px;
    height: 235px;
}

.dark-section .pattern-layer-three {
    position: absolute;
    left: 0px;
    bottom: -80px;
    width: 344px;
    height: 281px;
    background-repeat: no-repeat;
}

/* Base size, used by the "our partners" carousel (carousel_icons_description)
   and by the legacy partners includes. The gallery cards override it further
   down, scoped to .service-section-five. */
.icon-partner {
    object-fit: contain;
    margin: auto;
    width: 75px !important;
    height: 48px !important;
}



.small, small {
    font-size: 60%;
    font-weight: 400;
}


/* .btn-style-one {
    background-color: var(--color-green-one);
} */


/* --------- team-section — nav centered at bottom (carousel-image-title-desc) --------------------------------- */

.team-section {
    padding: 0;
}

.team-section .owl-nav {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    max-width: none;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.team-section .owl-nav .owl-prev,
.team-section .owl-nav .owl-next {
    position: relative;
    left: auto;
    right: auto;
}

.team-section .owl-dots {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.team-section .owl-dots .owl-dot span {
    padding-bottom: 0;
}


/* --------- Blog Carousel — nav centered below the cards ------------------------------------------------------ */

/* Nav: [←] 01/02 [→] centered below the cards, in the 100px of padding-bottom that the theme
   already reserves on `.news-section` (style.css:4090).

   ⚠️ NO usar `bottom:` aquí. El bloque contenedor NO es `.news-section` aunque sea `position:relative`:
   `owl.css` declara `.owl-carousel{position:relative}`, y ese es un ancestro posicionado MÁS CERCANO.
   Así que un `bottom:35px` se mide desde el borde inferior del CARRUSEL —o sea, 35px por encima de
   donde terminan las tarjetas— y el paginador se pintaba ENCIMA de ellas. Medido en la home:
   tarjetas 102→463, carrusel 102→493, paginador en 436–458, y los 100px de la sección (493→593)
   vacíos.

   `top:100%` ancla al borde inferior del carrusel y `margin-top` lo empuja hacia ese hueco, sin
   depender de la altura del carrusel ni de cuántas tarjetas haya. Verificado: pasa a 521–544.

   Nav y dots comparten posición A PROPÓSITO: el nav es una caja de 200px con las flechas en los
   extremos (`justify-content:space-between`) y los dots son el contador «01/02» centrado encima. */
.news-section .owl-nav {
    position: absolute;
    top: 100%;
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    max-width: none;
    margin: 28px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.news-section .owl-nav .owl-prev,
.news-section .owl-nav .owl-next {
    position: relative;
    left: auto;
    right: auto;
}

.news-section .owl-dots {
    position: absolute;
    top: 100%;
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    margin: 28px 0 0;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.news-section .owl-dots .owl-dot span {
    padding-bottom: 0;
}

.text-truncate-multiline {
    color: white;
    font-size: 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
    max-height: calc(1.2em * 2);
    line-height: 1.2em;
    position: relative;
}

.text-truncate-multiline::after {
    content: '...';
    position: absolute;
    padding-left: 2px;
}


/* --------- Products Section — adaptive nav & dots ------------------------------------------------------------ */

/* Remove hardcoded dark background so section inherits its container */
.products-section {
    background-color: transparent;
    padding: 0;
}


/* Default (light container): dark arrows and dot numbers */
.products-section .owl-nav .owl-prev,
.products-section .owl-nav .owl-next {
    color: var(--color-r-black);
}

.products-section .owl-dots .owl-dot span {
    color: var(--color-r-black);
}

.products-section .owl-dots .owl-dot span:after {
    color: var(--color-r-black);
}

.products-section .owl-dots .owl-dot:hover span,
.products-section .owl-dots .owl-dot.active span {
    color: var(--main-color);
}

/* Dark container: white arrows, white dot numbers, yellow active */
.dark-section .products-section .owl-nav .owl-prev,
.dark-section .products-section .owl-nav .owl-next {
    color: var(--white-color);
}

.dark-section .products-section .owl-dots .owl-dot span {
    color: var(--white-color);
}

.dark-section .products-section .owl-dots .owl-dot span:after {
    color: var(--white-color);
}

.dark-section .products-section .owl-dots .owl-dot:hover span,
.dark-section .products-section .owl-dots .owl-dot.active span {
    color: var(--color-msb);
}



/* --------- Custom background section heights ------------------------------------------------------------ */

.custom-section {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: rgba(0, 0, 0, 0.75);
}

.custom-section--small  { min-height: 150px; }
.custom-section--medium { min-height: 320px; }
.custom-section--large  { min-height: 500px; }



/* --------- Gallery Icon Cards block ------------------------------------------------------------ */

/* Larger icon, only for the gallery cards. Was unscoped and, being later in the
   file with !important, it also resized the carousel's icons from 75x48 to 79x70. */
.service-section-five .icon-partner {
    width: 79px !important;
    height: 70px !important;
}

/* Hover title of the "our partners" carousel: its heading is a <p class="_h4">,
   so `.dark-section p` above turns it white over a light jet-stream overlay. */
.service-section-two ._h4 {
    color: var(--black-color);
}

/* Scoped to .service-section-five on purpose.
   .service-block-two is shared by two different blocks: the "our partners"
   carousel (carousel_icons_description, wrapped in .service-section-two) and
   these gallery cards (gallery_icon_cards, wrapped in .service-section-five).
   Unscoped, these overrides also repainted the carousel and it lost the theme's
   original hover — blue overlay, grey text, black title — since page.css is
   loaded after style.css. Keep the section prefix when adding rules here. */
.service-section-five .service-block-two .inner-box .overlay-box-two:before {
    background-color: var(--color-r-black);
}

.service-section-five .service-block-two .inner-box .overlay-box-two .read-more {
    background-color: var(--color-jet-stream);
    color: var(--main-color);
}

.service-section-five .service-block-two .inner-box .overlay-box .content {
    background: var(--color-background1);
}

.service-section-five .service-block-two .inner-box .overlay-box .icon {
    background: var(--color-green-one);
}

.service-section-five .service-block-two .inner-box .overlay-box-two .icon-two {
    background: var(--color-green-one);
}

/* ==========================================================================
   Cards With Modal block (cards_with_modal)
   ========================================================================== */
.cwm-section {
    padding: 50px 0;
}

.cwm-row {
    position: relative;
}

.cwm-row + .cwm-row {
    margin-top: 30px;
}

/* Green line running behind the cards, centered on the card image.
   The left/right inset is set inline per row so it adapts to the
   number of cards in that row. */
.cwm-connector {
    position: absolute;
    top: 90px;
    height: 3px;
    background-color: var(--color-green-one, rgb(69, 160, 65));
    z-index: 0;
}

.cwm-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 230px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: transform 0.25s ease;
}

.cwm-card:hover {
    transform: translateY(-6px);
}

.cwm-card:focus {
    outline: none;
}

.cwm-img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background-color: #ffffff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 4px solid var(--color-green-one, rgb(69, 160, 65));
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.25s ease;
}

.cwm-card:hover .cwm-img {
    box-shadow: 0 12px 28px rgba(var(--color-green-one-rgb, 69, 160, 65), 0.35);
}

.cwm-img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-green-one, rgb(69, 160, 65));
}

.cwm-img--placeholder::after {
    content: "\f3c5";
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    font-size: 48px;
    color: #ffffff;
}

.cwm-name {
    margin-top: 18px;
    text-align: center;
    line-height: 1.35;
}

.cwm-name p {
    margin: 0;
}

@media (max-width: 767.98px) {
    .cwm-connector {
        display: none;
    }

    .cwm-img {
        width: 120px;
        height: 120px;
    }
}

/* ==========================================================================
   Accordion Modal List block (accordion_modal_list)
   ========================================================================== */
.aml-section {
    padding: 50px 0;
}

.aml-row {
    position: relative;
}

.aml-row + .aml-row {
    margin-top: 30px;
}

/* Green line running behind the cards, centered on the card image.
   The left/right inset is set inline per row so it adapts to the
   number of cards in that row. */
.aml-connector {
    position: absolute;
    top: 90px;
    height: 3px;
    background-color: var(--color-green-one, rgb(69, 160, 65));
    z-index: 0;
}

.aml-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 230px;
}

.aml-img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background-color: #ffffff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 4px solid var(--color-green-one, rgb(69, 160, 65));
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.aml-img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-green-one, rgb(69, 160, 65));
}

.aml-img--placeholder::after {
    content: "\f57d";
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    font-size: 48px;
    color: #ffffff;
}

.aml-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 18px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.aml-toggle:hover {
    text-decoration: none;
}

.aml-chevron {
    transition: transform 0.25s ease;
}

.aml-toggle:not(.collapsed) .aml-chevron {
    transform: rotate(90deg);
}

.aml-collapse {
    width: 100%;
    margin-top: 12px;
}

.aml-list {
    width: 100%;
}

.aml-item-btn {
    color: #000000;
    text-decoration: none;
}

.aml-item-btn:hover {
    color: var(--color-green-one, rgb(69, 160, 65));
    text-decoration: none;
}

@media (max-width: 767.98px) {
    .aml-connector {
        display: none;
    }

    .aml-img {
        width: 120px;
        height: 120px;
    }
}


/* --------- Image Banner with Text block ------------------------------------------------------------ */

/* The theme has no full-width photo banner: the division homes carried these four properties in a
   page-local `@push('styles')` (`.section-banner-home`), which died with the static blade. Scoped to
   the block so it cannot repaint anything else; the dark gradient is inlined per banner, like the
   `custom` background groups do, so there is no override of the theme's colors here. */
.image-banner-text {
    position: relative;
    z-index: 2;
    padding-top: 150px;
    padding-bottom: 150px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* TipTap emits the theme's headings, which carry their own dark color: over a photo they have to
   follow the banner's white instead. */
.image-banner-text :is(h1, h2, h3, h4, h5, h6, p, li, span) {
    color: inherit;
}


/* --------- Anchor targets inside the builder ------------------------------------------------------------ */

/* The theme's header is sticky, so scrolling to #history would tuck the heading under it. Only on
   blocks that actually declare an anchor, so no other block's spacing changes. */
.block-anchor {
    scroll-margin-top: 7rem;
}


/* --------- Footer: iconos SVG de "Contact us" / "Follow us" ---------------------------------------------- */

/* Los SVG los guarda el panel con `width="24" height="24"` escritos en el propio tag, y el theme NO
   tiene ni una regla para `<svg>` (se diseñó para glyphs de "Flaticon", ver `.info-box .icon-box`),
   así que el icono se pintaba a 24px dentro de la caja de 40px del blade — 60% del tamaño previsto —
   y descolgado arriba a la izquierda, con el hueco de la línea base debajo. Que llene su contenedor.
   Acotado a `.main-footer` para no repintar los SVG de la cabecera ni de los bloques del builder. */
.main-footer .svg-container > svg {
    display: block;
    width: 100%;
    height: 100%;
}


/* --------- Bloque `side_image_rich_text`: encajar la imagen en el hueco circular ------------------------- */

/* El hueco del theme (`.welcome-section .image-column .image`, style.css) es un círculo FIJO de
   570×570 con `overflow:hidden`, y es el único bloque de imagen del theme SIN regla para su `<img>`
   — `.about-section`, `.about-section-two`, `.news-block`… todos declaran `img { width:100% }`. Sin
   eso el `<img>` se pinta a su tamaño natural: una imagen de 701×500 sobresalía 131 px a la derecha
   (recortados por el `overflow`) y dejaba 70 px de hueco abajo. Como es un bloque del builder, el
   editor sube cualquier proporción, así que la imagen se ajusta al hueco en vez de exigirle medidas:
   `cover` centrado recorta parejo desde el centro. Por debajo de 1140px responsive.css pone el hueco
   en `width/height:auto`, y ahí `height:100%` resuelve a auto → se ve completa, sin recorte. */
.welcome-section .image-column .image > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}



/* --------- Bloque `numbered_cards` ---------------------------------------------------------------------- */

/* Tiene clases propias (`.numbered-cards-section`) y no reusa ninguna del theme A PROPÓSITO: la
   versión anterior de esta sección se pintaba con `.location-block`, que son las tarjetas de la
   página de contacto, así que cualquier ajuste de diseño acá repintaba `/contact`. El bloque nuevo
   es dueño de su marcado y de su CSS, y nada más los usa.
   La jerarquía es la de la vista vieja (`machinery/new-machinery.blade.php`): número grande en verde
   —el papel que tenía `._h2`—, después el título del paso, después el texto. */

.numbered-cards-section {
    position: relative;
    padding: 90px 0px 70px;
}

/* Las tarjetas de la fila, al alto de la más larga: los pasos rara vez tienen textos del mismo
   largo, y sin esto la fila queda escalonada. La columna ya es flex item del `.row` de bootstrap. */
.numbered-cards-section .numbered-card {
    display: flex;
    margin-bottom: var(--margin-bottom-30);
}

.numbered-cards-section .numbered-card > .inner-box {
    flex: 1 1 auto;
    width: 100%;
    padding: 40px 30px;
    text-align: center;
    border-radius: 5px;
    line-height: 1.8em;
    font-size: var(--font-16);
    color: var(--color-sixty);
    background-color: var(--white-color);
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.10);
}

/* Con enlace la tarjeta entera es clicable, así que el <a> tiene que ocupar la tarjeta y no
   heredar el subrayado ni el color de enlace del theme. */
.numbered-cards-section .numbered-card > .inner-box > a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.numbered-cards-section .numbered-card .number {
    color: var(--main-color);
    font-weight: 500;
    font-size: var(--font-40);
    line-height: 1.2em;
    margin-bottom: var(--margin-bottom-10);
}

.numbered-cards-section .numbered-card .title {
    display: block;
    color: var(--color-r-black);
    font-weight: 700;
    font-size: var(--font-18);
    line-height: 1.4em;
    margin-bottom: var(--margin-bottom-15);
}

/* El <p> que emite TipTap trae el `margin-bottom:1rem` de bootstrap, que con alto igualado deja un
   hueco desparejo al pie de la tarjeta. */
.numbered-cards-section .numbered-card .text > p:last-child {
    margin-bottom: 0;
}

/* Sobre un grupo con fondo oscuro el theme ya pinta el texto en blanco; la tarjeta es blanca, así
   que su contenido tiene que volver a su propio color. */
.dark-section .numbered-cards-section .numbered-card > .inner-box,
.dark-section .numbered-cards-section .numbered-card .text :is(p, li, span) {
    color: var(--color-sixty);
}


/* --------- Roboto: los pesos que el theme pide y nadie declaraba ---------------------------------------- */

/* `public/css/global.css` declara UN solo `@font-face` de Roboto — el Regular — pero el theme pide
   `font-family:var(--font-family-Roboto)` en 58 reglas y sobre ellas pide **peso 500 en 37**, más
   600, 800 y 450. Sin declaración para esos pesos el navegador los SINTETIZA engordando el Regular,
   que es lo que se veía en el sitio; el layout de vista previa, en cambio, cargaba Roboto de Google
   Fonts con los pesos reales, así que el editor veía una tipografía que el visitante no.
   Los 12 .ttf ya viajan en `public/fonts/Roboto/` desde siempre: solo faltaba declararlos.

   Van acá y no en `global.css` porque los CSS de `public/css/` son la plantilla y no se editan. La
   URL es absoluta a propósito: Vite deja intactas las que empiezan con `/` y las resuelve contra
   `public/`, mientras que una relativa la buscaría dentro de `resources/`.
   El 400 no se repite: ya lo declara `global.css`. Para el 600 y el 800 no hay .ttf (no existe un
   Roboto SemiBold en la carpeta), así que el navegador los resuelve con el 700, que es el vecino
   real más cercano — mejor que engordar el Regular. */

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto/Roboto-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto/Roboto-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto/Roboto-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto/Roboto-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}