/* ============================================
   SERVICIOS - ITEMS CON CORTE TRIANGULAR
   Funciona para cualquier cantidad de ítems
   ============================================ */

.service-hero,
.service-hero *,
.service-hero .container,
.service-hero .row,
.service-hero .col-lg-6 {
    box-sizing: border-box !important;
}

.service-hero {
    padding: 0 !important;
    margin: 2rem auto !important;
    /* ← separación entre items */
    max-width: 1300px !important;
    /* ← limita el ancho */
    border-radius: 16px !important;
    /* ← esquinas redondeadas */
    overflow: hidden !important;
    width: 100% !important;
    display: block !important;
    position: relative !important;
}

.service-hero:nth-child(odd) {
    background: #343131 !important;
}

.service-hero:nth-child(even) {
    background: #222426 !important;
}

.service-hero>.container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.service-hero .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: 520px !important;
    gap: 0 !important;
}

.service-hero .col-lg-6 {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Columna de texto: padding interno */
.service-hero .col-lg-6.reveal-left {
    padding: 4rem 4rem 4rem 6rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

/* Columna de imagen: sin padding */
.service-hero .col-lg-6.reveal-right {
    padding: 0 !important;
    align-items: stretch !important;
}

/* ============================================================
   ORDEN POR ÍTEM — usando nth-child sobre .service-hero
   Impares: texto izq (reveal-left=order1) | imagen der (reveal-right=order2)
   Pares:   imagen izq (reveal-right=order1) | texto der (reveal-left=order2)
   ============================================================ */

/* Impares: texto izquierda, imagen derecha */
.service-hero:nth-child(odd) .reveal-left {
    order: 1 !important;
}

.service-hero:nth-child(odd) .reveal-right {
    order: 2 !important;
    padding: 0 !important;
}

/* Pares: imagen izquierda, texto derecha */
.service-hero:nth-child(even) .reveal-right {
    order: 1 !important;
    padding: 0 !important;
    align-items: stretch !important;
}

.service-hero:nth-child(even) .reveal-left {
    order: 2 !important;
    padding: 4rem 6rem 4rem 4rem !important;
    align-items: flex-start !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* ── TIPOGRAFÍA ── */
.service-hero .service-title-main {
    font-size: clamp(2rem, 3.5vw, 3rem) !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    /*
    color: #1f2937 !important;
    */
    color: #ffffff !important;
    margin: 0 0 1.25rem 0 !important;
    letter-spacing: -0.02em !important;
    display: block !important;
}

.service-hero .service-title-main span {
    color: #c00000 !important;
}

.service-hero .service-title-main::before {
    content: '' !important;
    display: block !important;
    width: 44px !important;
    height: 4px !important;
    background: #c00000 !important;
    margin-bottom: 1.25rem !important;
    border-radius: 2px !important;
}

.service-hero .service-intro {
    font-size: 1rem !important;
    color: #ffffff !important;
    line-height: 1.85 !important;
    margin: 0 !important;
    max-width: 480px !important;
    display: block !important;
}

/* ============================================================
   IMAGE WRAPPER: llena toda la celda
   ============================================================ */
.service-hero .image-wrapper {
    width: 100% !important;
    height: 100% !important;
    min-height: 520px !important;
    height: 520px !important;
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.service-hero .main-image,
.service-hero video.main-image {
    object-position: center 25% !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 520px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: transform 0.6s ease !important;
}

.service-hero .image-wrapper video {
    width: 100% !important;
    height: 100% !important;
    min-height: 520px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: transform 0.6s ease !important;
}

.service-hero:hover .image-wrapper {
    transform: scale(1.04) !important;
}

.service-hero:hover .main-image {
    transform: scale(1.1) !important;
}

.service-hero .image-wrapper::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, rgba(192, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.12) 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* ============================================================
   CORTE TRIANGULAR — nth-child para infinitos ítems

   Impares (imagen a la DERECHA): punta apunta a la izquierda
   Pares   (imagen a la IZQUIERDA): punta apunta a la derecha
   ============================================================ */

/* Ítems impares: la imagen está en reveal-right (order:2), punta izquierda */
.service-hero:nth-child(odd) .image-wrapper {
    clip-path: polygon(10% 0%,
            100% 0%,
            100% 100%,
            10% 100%,
            0% 50%) !important;
}

/* Ítems pares: la imagen está en reveal-right (order:1), punta derecha */
.service-hero:nth-child(even) .image-wrapper {
    clip-path: polygon(0% 0%,
            90% 0%,
            100% 50%,
            90% 100%,
            0% 100%) !important;
}

/* Video — mismo tratamiento */
.service-hero .image-wrapper video {
    width: 100% !important;
    height: 100% !important;
    min-height: 520px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
    border: none !important;
}

/* ============================================================
   SUB-ELEMENTOS
   ============================================================ */
.sub-elements-section {
    padding: 4rem 0 !important;
    background: #ffffff !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.sub-elements-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    justify-content: center !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
}

.sub-element-card {
    flex: 0 0 auto !important;
    width: 190px !important;
    background: #ffffff !important;
    border: 2px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 16px !important;
    padding: 1.5rem 1rem !important;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.75rem !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    position: relative !important;
    overflow: hidden !important;
}

.sub-element-card::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: #c00000 !important;
    transform: scaleX(0) !important;
    transition: transform 0.3s ease !important;
}

.sub-element-card:hover::after {
    transform: scaleX(1) !important;
}

.sub-element-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important;
    border-color: #c00000 !important;
}

.sub-element-icon {
    width: 58px !important;
    height: 58px !important;
    background: rgba(192, 0, 0, 0.07) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.sub-element-card:hover .sub-element-icon {
    background: #c00000 !important;
}

.sub-element-icon i {
    font-size: 1.7rem !important;
    color: #c00000 !important;
    transition: color 0.3s ease !important;
}

.sub-element-card:hover .sub-element-icon i {
    color: #ffffff !important;
}

.sub-element-content h3 {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 968px) {
    .service-hero .row {
        flex-direction: column !important;
        min-height: auto !important;
    }

    .service-hero .col-lg-6,
    .service-hero .col-lg-6.reveal-left,
    .service-hero .col-lg-6.reveal-right {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Texto siempre primero en móvil */
    .service-hero .reveal-left {
        order: 1 !important;
        padding: 3rem 2rem 1.5rem !important;
        text-align: center !important;
        align-items: center !important;
    }

    .service-hero .reveal-right {
        order: 2 !important;
        padding: 0 !important;
    }

    /* Sin clip-path en móvil */
    .service-hero:nth-child(odd) .image-wrapper,
    .service-hero:nth-child(even) .image-wrapper {
        clip-path: none !important;
        min-height: 300px !important;
    }

    .service-hero .main-image {
        min-height: 300px !important;
        height: 300px !important;
    }

    .service-hero .service-title-main::before {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (max-width: 640px) {
    .service-hero .reveal-left {
        padding: 2.5rem 1.5rem 1.5rem !important;
    }

    .service-hero .service-title-main {
        font-size: 1.9rem !important;
    }

    .sub-element-card {
        width: calc(50% - 0.5rem) !important;
        padding: 1rem !important;
    }
}

.link-servicio-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-top: 1.5rem !important;
    padding: 0.6rem 1.4rem !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #c00000 !important;
    border: 2px solid #c00000 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    letter-spacing: 0.03em !important;
    transition: background 0.25s ease, color 0.25s ease !important;
}

.link-servicio-item::after {
    content: '→' !important;
    transition: transform 0.25s ease !important;
}

.link-servicio-item:hover {
    background: #c00000 !important;
    color: #ffffff !important;
}

.link-servicio-item:hover::after {
    transform: translateX(4px) !important;
}

@media (max-width: 968px) {
    /* ya tienes estas reglas, agrega/modifica: */

    .service-hero .reveal-left {
        order: 1 !important;
        padding: 2.5rem 1.5rem 1.5rem !important;
        text-align: left !important;
        /* ← cambia a izquierda */
        align-items: flex-start !important;
        /* ← cambia a izquierda */
    }

    .service-hero .service-intro {
        max-width: 100% !important;
        /* ← ocupa todo el ancho */
    }

    .service-hero .service-title-main::before {
        margin-left: 0 !important;
        /* ← la línea roja también a la izquierda */
        margin-right: 0 !important;
    }
}

@media (max-width: 968px) {
    .service-hero .row {
        flex-direction: column !important;
        min-height: auto !important;
    }

    .service-hero:nth-child(odd) .reveal-left,
    .service-hero:nth-child(even) .reveal-left {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 2.5rem 1.5rem 1.5rem !important;
        text-align: left !important;
        align-items: flex-start !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .service-hero:nth-child(odd) .reveal-right,
    .service-hero:nth-child(even) .reveal-right {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
    }

    /* Esto es lo clave — sobreescribe el min-height fijo */
    .service-hero .image-wrapper {
        min-height: 360px !important;
        height: 360px !important;
        clip-path: none !important;
    }

    .service-hero:nth-child(odd) .image-wrapper,
    .service-hero:nth-child(even) .image-wrapper {
        clip-path: none !important;
    }

    .service-hero .main-image {
        min-height: 360px !important;
        height: 360px !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    .service-hero .service-intro {
        max-width: 100% !important;
    }

    .service-hero .service-title-main::before {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Móvil - el equivalente del hover al tocar */
    .link-servicio-item:active {
        background: #c00000 !important;
        color: #ffffff !important;
    }

    .link-servicio-item:active::after {
        transform: translateX(4px) !important;
    }
}