/* ==========================================================================
   lantier.css
   Estructura semántica para la web Lantier.
   Reemplaza las clases WPBakery/VisualComposer por nombres propios.
   ========================================================================== */

/* Evita scroll horizontal por 100vw (el scrollbar vertical ocupa ~17px en Windows) */
body { overflow-x: hidden; }

/* ─── Grid de columnas ───────────────────────────────────
   Replica el comportamiento de vc_col-sm/md/lg de WPBakery:
     col-X     → float+width activos en ≥ 992px  (vc_col-sm, apila en tablet y móvil)
     col-md-X  → float+width activos en ≥ 992px  (vc_col-md, anula col-X por cascada)
     col-lg-X  → float+width activos en ≥ 1200px (vc_col-lg)
     col-xs-X  → float+width activos SIEMPRE     (vc_col-xs, base tier)
   Por debajo de 992px todos los col-X son bloque 100% (apilados).
   ─────────────────────────────────────────────────────── */

/* Base: solo espaciado y posición, sin float ni ancho */
[class*="col-"] {
    position:      relative;
    min-height:    1px;
    padding-left:  15px;
    padding-right: 15px;
    box-sizing:    border-box;
}

/* col-xs-X: ancho activo a CUALQUIER tamaño (base tier, sin media query) */
.col-xs-1  { float: left; width:  8.3333%; }
.col-xs-2  { float: left; width: 16.6667%; }
.col-xs-3  { float: left; width: 25%; }
.col-xs-4  { float: left; width: 33.3333%; }
.col-xs-5  { float: left; width: 41.6667%; }
.col-xs-6  { float: left; width: 50%; }
.col-xs-7  { float: left; width: 58.3333%; }
.col-xs-8  { float: left; width: 66.6667%; }
.col-xs-9  { float: left; width: 75%; }
.col-xs-10 { float: left; width: 83.3333%; }
.col-xs-11 { float: left; width: 91.6667%; }
.col-xs-12 { float: left; width: 100%; }

/* col-X (sm tier) y col-md-X (md tier): ambos activos en ≥ 992px.
   col-md-X definido DESPUÉS → anula col-X cuando coexisten (misma especificidad,
   último gana). Ejemplo: col-6 col-md-4 → 33.3% en desktop. */
@media (min-width: 992px) {
    .col-1  { float: left; width:  8.3333%; }
    .col-2  { float: left; width: 16.6667%; }
    .col-3  { float: left; width: 25%; }
    .col-4  { float: left; width: 33.3333%; }
    .col-5  { float: left; width: 41.6667%; }
    .col-6  { float: left; width: 50%; }
    .col-7  { float: left; width: 58.3333%; }
    .col-8  { float: left; width: 66.6667%; }
    .col-9  { float: left; width: 75%; }
    .col-10 { float: left; width: 83.3333%; }
    .col-11 { float: left; width: 91.6667%; }
    .col-12 { float: left; width: 100%; }
    /* col-fifth (5 columnas iguales) */
    .col-fifth { float: left; width: 20%; }

    .col-md-1  { float: left; width:  8.3333%; }
    .col-md-2  { float: left; width: 16.6667%; }
    .col-md-3  { float: left; width: 25%; }
    .col-md-4  { float: left; width: 33.3333%; }
    .col-md-5  { float: left; width: 41.6667%; }
    .col-md-6  { float: left; width: 50%; }
    .col-md-7  { float: left; width: 58.3333%; }
    .col-md-8  { float: left; width: 66.6667%; }
    .col-md-9  { float: left; width: 75%; }
    .col-md-10 { float: left; width: 83.3333%; }
    .col-md-11 { float: left; width: 91.6667%; }
    .col-md-12 { float: left; width: 100%; }
}

/* col-lg-X (lg tier): float+width activos en ≥ 1200px */
@media (min-width: 1200px) {
    .col-lg-1  { float: left; width:  8.3333%; }
    .col-lg-2  { float: left; width: 16.6667%; }
    .col-lg-3  { float: left; width: 25%; }
    .col-lg-4  { float: left; width: 33.3333%; }
    .col-lg-5  { float: left; width: 41.6667%; }
    .col-lg-6  { float: left; width: 50%; }
    .col-lg-7  { float: left; width: 58.3333%; }
    .col-lg-8  { float: left; width: 66.6667%; }
    .col-lg-9  { float: left; width: 75%; }
    .col-lg-10 { float: left; width: 83.3333%; }
    .col-lg-11 { float: left; width: 91.6667%; }
    .col-lg-12 { float: left; width: 100%; }
}

/* ─── Compatibilidad flex con las nuevas clases col- ────── */
/* Replica .vc_column-inner (eliminado en la limpieza): columna vertical */
.vc_row.vc_row-flex > [class*="col-"] {
    display:        flex;
    flex-direction: column;
}
.vc_row.vc_row-flex > [class*="col-"] > * {
    min-height: 1em;          /* equivalente a vc_column-inner > * */
}
.vc_row.vc_row-o-equal-height > [class*="col-"] {
    display:        flex;
    flex-direction: column;
    align-self:     stretch;
}
.vc_row.vc_row-no-padding > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }

/* ─── Espaciador visual ──────────────────────────────────── */
.espacio { display: block; clear: both; }

/* ─── Fila interna (vc_row vc_inner) ────────────────────── */
.fila { clear: both; box-sizing: border-box; }
.fila::before, .fila::after { content: " "; display: table; }
.fila::after { clear: both; }

/* ==========================================================================
   Clases semánticas — spacing (convenio plantilla: pt-Xpx, mb-Xpx…)
   ========================================================================== */

/* ─── Padding vertical ───────────────────────────────────── */
.pt-20px  { padding-top:    20px !important; }
.pt-30px  { padding-top:    30px !important; }
.pt-70px  { padding-top:    70px !important; }
.pb-20px  { padding-bottom: 20px !important; }
.pb-25px  { padding-bottom: 25px !important; }
.pb-30px  { padding-bottom: 30px !important; }
.pb-50px  { padding-bottom: 50px !important; }
.pb-100px { padding-bottom: 100px !important; }
.pb-120px { padding-bottom: 120px !important; }

/* ─── Padding horizontal ─────────────────────────────────── */
.px-10px  { padding-right:  10px !important; padding-left:  10px !important; }
.px-15px  { padding-right:  15px !important; padding-left:  15px !important; }

/* ─── Márgenes ───────────────────────────────────────────── */
.mt-20px  { margin-top:     20px !important; }
.mt-50px  { margin-top:     50px !important; }
.mb-0px   { margin-bottom:    0px !important; }
.mb-20px  { margin-bottom:  20px !important; }
.mb-60px  { margin-bottom:  60px !important; }
.my-60px  { margin-top:     60px !important; margin-bottom:  60px !important; }

/* ─── Layout ─────────────────────────────────────────────── */
.fila-solapada {
    margin-top:    -10px !important;
    margin-bottom: -10px !important;
    margin-left:    -5px !important;
    margin-right:   -5px !important;
    padding-right:  20px !important;
    padding-left:   20px !important;
}

/* ==========================================================================
   Clases semánticas — fondos y secciones
   (rutas de imagen relativas a este CSS en lantier_limpio/)
   ========================================================================== */

.seccion-fondo-gris {
    padding-top:      70px !important;
    padding-bottom:   30px !important;
    background-color: rgba(0, 0, 0, 0.04) !important;
}

.bg-blanco-espaciado {
    padding-top:      10px !important;
    padding-bottom:   30px !important;
    background-color: #ffffff !important;
}

.seccion-amarilla {
    margin-bottom:    60px !important;
    background-color: #ffc107 !important;
}

.tarjeta-fondo-gris {
    margin:           10px !important;
    padding:          30px !important;
    background-color: rgba(0, 0, 0, 0.04) !important;
}

.tarjeta-borde-sutil {
    margin:           10px !important;
    padding:          30px !important;
    border:           3px solid rgba(0, 0, 0, 0.06) !important;
}

.bg-cover {
    background-position: center !important;
    background-repeat:   no-repeat !important;
    background-size:     cover !important;
}

.bg-nubes {
    padding:             0 20px 50px !important;
    /* clouds9.png no está en la captura estática → fondo neutro semitransparente */
    background-image:    none !important;
    background-color:    rgba(0, 40, 80, 0.35) !important;
}

.bg-foto-fabrica {
    padding-top:         50px !important;
    padding-bottom:      70px !important;
    /* 2005_LANTIER_DC_erredehierro_1392.jpg no está en la captura → usar disponible */
    background-image:    url(/gestion/public/lantier/recursos/empresa/fondo.jpg) !important;
    background-position: center !important;
    background-repeat:   no-repeat !important;
    background-size:     cover !important;
}

/* ─── Hero full-height (The7 lo aplica via JS; lo aseguramos con CSS) ─── */
.vc_row-o-full-height {
    min-height: 100vh !important;
    display:    flex !important;
    flex-wrap:  wrap !important;
}
.vc_row-o-full-height > [class*="col-"] {
    display:         flex !important;
    flex-direction:  column !important;
    justify-content: center !important;
    align-items:     center !important;
}
/* Contenido anclado al fondo del hero (vc_row-o-content-bottom) */
.vc_row-o-content-bottom > [class*="col-"] {
    justify-content: flex-end !important;
}

/* ─── Ocultar spinner de carga (The7 lo oculta con JS; sin config falla) */
#load, .spinner-loader, .dt-loader { display: none !important; }

/* ─── Flex-wrap en filas WPBakery ──────────────────────────────────────
   WPBakery define flex-wrap:wrap por defecto.
   En tablet/móvil (< 992px) los hijos de flex rows apilan a 100%,
   excepto elementos con col-xs-X que tienen su propio breakpoint.
   ─────────────────────────────────────────────────────────────────────── */
.vc_row.vc_row-flex {
    display:   flex !important;
    flex-wrap: wrap !important;
}
@media (max-width: 991px) {
    /* Apila columnas en filas flex (excepto col-xs que tiene su propio ancho) */
    .vc_row.vc_row-flex > [class*="col-"]:not([class*="col-xs-"]) {
        width:     100% !important;
        max-width: 100% !important;
        flex:      0 0 100% !important;
    }
}

/* ─── Tarjetas en fila flex: eliminar margin individual ────────────────
   .tarjeta-fondo-gris / .tarjeta-borde-sutil tienen margin:10px !important
   que, al ser flex items al 50% de ancho, provoca overflow lateral.
   ─────────────────────────────────────────────────────────────────────── */
.vc_row.vc_row-flex > .tarjeta-fondo-gris,
.vc_row.vc_row-flex > .tarjeta-borde-sutil {
    margin: 0 !important;
}

/* ─── Iconos de beneficios (col-fifth) centrados ───────────────────────── */
.col-fifth              { text-align: center; }
.col-fifth figure       { display: block; text-align: center; }
.col-fifth figure img   { display: inline-block; }

/* ─── Imagen full-width dentro de fila flex ───────────────────────────── */
.vc_row.vc_row-flex > [class*="col-"] > figure,
.vc_row.vc_row-flex > [class*="col-"] img {
    width:     100%;
    max-width: 100%;
    height:    auto;
    display:   block;
}

/* ==========================================================================
   OVERRIDE Bootstrap 4 (estilo.css del tema The7)
   estilo.css incluye Bootstrap 4 con .col-X { flex:0 0 X%; max-width:X% }
   aplicado a TODOS los tamaños (sin media query). Como se carga DESPUÉS de
   lantier.css, debemos usar !important para que el responsive funcione.
   ========================================================================== */

/* ─── col-X y col-md-X → 100% por debajo de 992px ───────────────────── */
@media (max-width: 991px) {
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
    .col-7, .col-8, .col-9, .col-10, .col-11,
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
    .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
    .col-fifth {
        -ms-flex:  none !important;
        flex:      none !important;
        float:     none !important;
        width:     100% !important;
        max-width: 100% !important;
    }
    /* col-xs-6 mantiene su ancho (50% = 2 por fila) incluso contra col-md-X de Bootstrap */
    [class*="col-xs-6"] {
        -ms-flex:  0 0 50% !important;
        flex:      0 0 50% !important;
        float:     left !important;
        width:     50% !important;
        max-width: 50% !important;
    }
}

/* ─── col-lg-X → 100% por debajo de 1200px ───────────────────────────── */
@media (max-width: 1199px) {
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
    .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
        -ms-flex:  none !important;
        flex:      none !important;
        float:     none !important;
        width:     100% !important;
        max-width: 100% !important;
    }
    /* Si tienen col-xs-6 como compañera → 50% (ej: beneficios items) */
    [class*="col-xs-6"][class*="col-lg-"],
    [class*="col-lg-"][class*="col-xs-6"] {
        -ms-flex:  0 0 50% !important;
        flex:      0 0 50% !important;
        float:     left !important;
        width:     50% !important;
        max-width: 50% !important;
    }
}

/* ─── col-lg-X y col-md-X → activar en desktop (con !important para ganar a Bootstrap) */
@media (min-width: 992px) {
    .col-1  { -ms-flex: 0 0  8.3333% !important; flex: 0 0  8.3333% !important; max-width:  8.3333% !important; float: left !important; }
    .col-2  { -ms-flex: 0 0 16.6667% !important; flex: 0 0 16.6667% !important; max-width: 16.6667% !important; float: left !important; }
    .col-3  { -ms-flex: 0 0 25%      !important; flex: 0 0 25%      !important; max-width: 25%      !important; float: left !important; }
    .col-4  { -ms-flex: 0 0 33.3333% !important; flex: 0 0 33.3333% !important; max-width: 33.3333% !important; float: left !important; }
    .col-5  { -ms-flex: 0 0 41.6667% !important; flex: 0 0 41.6667% !important; max-width: 41.6667% !important; float: left !important; }
    .col-6  { -ms-flex: 0 0 50%      !important; flex: 0 0 50%      !important; max-width: 50%      !important; float: left !important; }
    .col-7  { -ms-flex: 0 0 58.3333% !important; flex: 0 0 58.3333% !important; max-width: 58.3333% !important; float: left !important; }
    .col-8  { -ms-flex: 0 0 66.6667% !important; flex: 0 0 66.6667% !important; max-width: 66.6667% !important; float: left !important; }
    .col-9  { -ms-flex: 0 0 75%      !important; flex: 0 0 75%      !important; max-width: 75%      !important; float: left !important; }
    .col-10 { -ms-flex: 0 0 83.3333% !important; flex: 0 0 83.3333% !important; max-width: 83.3333% !important; float: left !important; }
    .col-11 { -ms-flex: 0 0 91.6667% !important; flex: 0 0 91.6667% !important; max-width: 91.6667% !important; float: left !important; }
    .col-12 { -ms-flex: 0 0 100%     !important; flex: 0 0 100%     !important; max-width: 100%     !important; float: left !important; }
    .col-fifth { -ms-flex: 0 0 20%   !important; flex: 0 0 20%      !important; max-width: 20%      !important; float: left !important; }

    .col-md-1  { -ms-flex: 0 0  8.3333% !important; flex: 0 0  8.3333% !important; max-width:  8.3333% !important; float: left !important; }
    .col-md-2  { -ms-flex: 0 0 16.6667% !important; flex: 0 0 16.6667% !important; max-width: 16.6667% !important; float: left !important; }
    .col-md-3  { -ms-flex: 0 0 25%      !important; flex: 0 0 25%      !important; max-width: 25%      !important; float: left !important; }
    .col-md-4  { -ms-flex: 0 0 33.3333% !important; flex: 0 0 33.3333% !important; max-width: 33.3333% !important; float: left !important; }
    .col-md-5  { -ms-flex: 0 0 41.6667% !important; flex: 0 0 41.6667% !important; max-width: 41.6667% !important; float: left !important; }
    .col-md-6  { -ms-flex: 0 0 50%      !important; flex: 0 0 50%      !important; max-width: 50%      !important; float: left !important; }
    .col-md-7  { -ms-flex: 0 0 58.3333% !important; flex: 0 0 58.3333% !important; max-width: 58.3333% !important; float: left !important; }
    .col-md-8  { -ms-flex: 0 0 66.6667% !important; flex: 0 0 66.6667% !important; max-width: 66.6667% !important; float: left !important; }
    .col-md-9  { -ms-flex: 0 0 75%      !important; flex: 0 0 75%      !important; max-width: 75%      !important; float: left !important; }
    .col-md-10 { -ms-flex: 0 0 83.3333% !important; flex: 0 0 83.3333% !important; max-width: 83.3333% !important; float: left !important; }
    .col-md-11 { -ms-flex: 0 0 91.6667% !important; flex: 0 0 91.6667% !important; max-width: 91.6667% !important; float: left !important; }
    .col-md-12 { -ms-flex: 0 0 100%     !important; flex: 0 0 100%     !important; max-width: 100%     !important; float: left !important; }
}
@media (min-width: 1200px) {
    .col-lg-1  { -ms-flex: 0 0  8.3333% !important; flex: 0 0  8.3333% !important; max-width:  8.3333% !important; float: left !important; }
    .col-lg-2  { -ms-flex: 0 0 16.6667% !important; flex: 0 0 16.6667% !important; max-width: 16.6667% !important; float: left !important; }
    .col-lg-3  { -ms-flex: 0 0 25%      !important; flex: 0 0 25%      !important; max-width: 25%      !important; float: left !important; }
    .col-lg-4  { -ms-flex: 0 0 33.3333% !important; flex: 0 0 33.3333% !important; max-width: 33.3333% !important; float: left !important; }
    .col-lg-5  { -ms-flex: 0 0 41.6667% !important; flex: 0 0 41.6667% !important; max-width: 41.6667% !important; float: left !important; }
    .col-lg-6  { -ms-flex: 0 0 50%      !important; flex: 0 0 50%      !important; max-width: 50%      !important; float: left !important; }
    .col-lg-7  { -ms-flex: 0 0 58.3333% !important; flex: 0 0 58.3333% !important; max-width: 58.3333% !important; float: left !important; }
    .col-lg-8  { -ms-flex: 0 0 66.6667% !important; flex: 0 0 66.6667% !important; max-width: 66.6667% !important; float: left !important; }
    .col-lg-9  { -ms-flex: 0 0 75%      !important; flex: 0 0 75%      !important; max-width: 75%      !important; float: left !important; }
    .col-lg-10 { -ms-flex: 0 0 83.3333% !important; flex: 0 0 83.3333% !important; max-width: 83.3333% !important; float: left !important; }
    .col-lg-11 { -ms-flex: 0 0 91.6667% !important; flex: 0 0 91.6667% !important; max-width: 91.6667% !important; float: left !important; }
    .col-lg-12 { -ms-flex: 0 0 100%     !important; flex: 0 0 100%     !important; max-width: 100%     !important; float: left !important; }
}

/* ─── Bootstrap .row sin container: eliminar márgenes negativos ──────────
   Beneficios subpages usan <div class="row solutions"> sin .container padre.
   Bootstrap da margin: 0 -15px a .row, causando overflow horizontal.
   ─────────────────────────────────────────────────────────────────────── */
.row.solutions {
    margin-left:  0 !important;
    margin-right: 0 !important;
    overflow-x:   hidden;
}

/* ─── Ficha de producto individual (solucion concreta) ─────────────────── */
.lacaja {
    padding-top:    50px;
    padding-bottom: 60px;
}
.lacaja h4:empty,
.lacaja h4.h1-size:empty {
    display: none !important;
}
.lacaja .row {
    align-items: flex-start;
}
.lacaja img.wp-post-image {
    width:         100%;
    height:        auto;
    max-height:    420px;
    object-fit:    cover;
    border-radius: 4px;
    display:       block;
}
.lacaja .dt-btn {
    display: inline-block;
    margin:  3px 4px;
}

/* ─── Full-width breakout: fondo ocupa 100vw, contenido se queda en 1200px ───
   #main > .wf-wrap tiene width:1300px centrado con padding:0 50px → área de
   contenido = 1200px. La técnica calc(-50vw + 50%) expande el fondo al viewport.
   max(50px, calc(50vw - 600px)) alinea el borde del contenido con el del resto
   de la página: en pantallas ≥1300px = (viewport-1200px)/2; en menores = 50px.
   ─────────────────────────────────────────────────────────────────────────── */
section.vc_row-has-fill {
    margin-left:   calc(-50vw + 50%) !important;
    margin-right:  0 !important;
    width:         100vw !important;
    max-width:     100vw !important;
    box-sizing:    border-box !important;
    padding-left:  max(50px, calc(50vw - 600px)) !important;
    padding-right: max(50px, calc(50vw - 600px)) !important;
}
@media (max-width: 992px) {
    section.vc_row-has-fill {
        padding-left:  20px !important;
        padding-right: 20px !important;
    }
}

/* Hero full-height: sin padding lateral para que el overlay .bg-nubes
   cubra el viewport completo (el overlay tiene su propio padding) */
section.vc_row-has-fill.vc_row-o-full-height {
    padding-left:  0 !important;
    padding-right: 0 !important;
}

/* ─── Hero: color e imagen del h1 ───────────────────────────────────────────
   El tamaño de fuente lo aplica custom_0dca3a87.css (52px desktop / 40px
   tablet / 30px móvil), igual que en el sitio en vivo. Solo necesitamos
   asegurarnos del color blanco y la alineación centrada.
   ─────────────────────────────────────────────────────────────────────────── */
section.vc_row-o-full-height h1 {
    color:      white !important;
    text-align: center !important;
    margin:     0 auto !important;
    padding:    0 30px !important;
    max-width:  760px !important;
    width:      100% !important;
}
section.vc_row-o-full-height h1 a {
    display:         block !important;
    color:           white !important;
    text-decoration: none !important;
}
section.vc_row-o-full-height h1 > span {
    display: block !important;
    color:   white !important;
}
section.vc_row-o-full-height h1 img {
    display: block !important;
    margin:  0 auto 20px !important;
    width:   80px !important;
    height:  auto !important;
}

/* Línea decorativa vertical encima del icono del hero */
section.vc_row-o-full-height > [class*="col-"] > * > [class*="col-"] > span[style*="border-left"] {
    display:    block !important;
    margin:     0 auto !important;
    text-align: center !important;
}