/* =========================================================
   LUARK PURPOSE GRID
========================================================= */

.luark-pg-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0;
}

/* =========================================================
   ITEM
========================================================= */

.luark-pg-item {
    display: grid;
    width: 100%;
    height: 260px;
    overflow: hidden;
}

/* =========================================================
   LAYOUTS
========================================================= */

.luark-pg-item.layout-image-left {
    grid-template-columns:
        var(--luark-pg-image-width)
        var(--luark-pg-content-width);
}

.luark-pg-item.layout-image-right {
    grid-template-columns:
        var(--luark-pg-content-width)
        var(--luark-pg-image-width);
}

.luark-pg-item.layout-image-left .luark-pg-media {
    grid-column: 1;
    grid-row: 1;
}

.luark-pg-item.layout-image-left .luark-pg-content {
    grid-column: 2;
    grid-row: 1;
}

.luark-pg-item.layout-image-right .luark-pg-content {
    grid-column: 1;
    grid-row: 1;
}

.luark-pg-item.layout-image-right .luark-pg-media {
    grid-column: 2;
    grid-row: 1;
}

/* =========================================================
   MEDIA
========================================================= */

.luark-pg-media {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--luark-pg-active-bg, #286d91);
}

.luark-pg-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: var(--luark-pg-image-fit, cover);
    object-position: var(--luark-pg-image-position, center center);
    transform: scale(var(--luark-pg-image-scale, 1));
    transition:
        opacity .45s ease,
        transform .7s ease;
}

/* =========================================================
   ACTIVE TEXT PANEL
========================================================= */

.luark-pg-active-panel {
    position: absolute;
    inset: 0;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: clamp(28px, 4vw, 58px);

    background: var(--luark-pg-active-bg, #286d91);
    color: var(--luark-pg-body-color, #ffffff);

    font-size: var(--luark-pg-body-size, 18px);
    line-height: var(--luark-pg-body-line-height, 1.55);
    font-weight: var(--luark-pg-body-weight, 400);

    opacity: 0;
    visibility: hidden;

    transform: translateY(12px);

    transition:
        opacity .45s ease,
        visibility .45s ease,
        transform .45s ease;
}

.luark-pg-active-panel * {
    color: var(--luark-pg-body-color, #ffffff);
}

.luark-pg-active-panel p {
    margin: 0 0 1em;
}

.luark-pg-active-panel p:last-child {
    margin-bottom: 0;
}

/* =========================================================
   CONTENT BOX
========================================================= */

.luark-pg-content {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    padding: clamp(28px, 4vw, 58px);

    background: var(--luark-pg-title-bg, #f4f4f6);

    transition:
        background-color .45s ease,
        color .45s ease;
}

/* =========================================================
   TRIGGER
========================================================= */

.luark-pg-trigger {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    padding: 0;
    margin: 0;

    border: 0;

    background: transparent !important;

    cursor: pointer;

    text-align: left;
}

/* =========================================================
   TITLE
========================================================= */

.luark-pg-title {
    display: block;

    font-size: var(--luark-pg-title-size, 58px);
    font-weight: var(--luark-pg-title-weight, 400);
    line-height: var(--luark-pg-title-line-height, 1.12);

    color: var(--luark-pg-title-color, #005184);

    background: transparent !important;

    transition:
        color .35s ease,
        transform .35s ease,
        opacity .45s ease;
}

/* =========================================================
   ARROW
========================================================= */

.luark-pg-arrow {
    position: absolute;

    left: var(--luark-pg-arrow-x, 38%);
    top: var(--luark-pg-arrow-y, 58%);

    width: var(--luark-pg-arrow-size, 96px);
    height: var(--luark-pg-arrow-size, 96px);

    transform: translate(-50%, -50%);

    transition:
        opacity .35s ease,
        transform .45s ease;
}

.luark-pg-arrow img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

/* =========================================================
   ACTIVE
========================================================= */

.luark-pg-item.is-active .luark-pg-media img {
    opacity: 0;
}

.luark-pg-item.is-active .luark-pg-active-panel {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

.luark-pg-item.is-active .luark-pg-arrow {
    opacity: 0;

    transform:
        translate(-50%, -50%)
        translate(8px, 8px);

    pointer-events: none;
}

/* =========================================================
   HOVER
========================================================= */

.luark-pg-item:not(.is-active):hover .luark-pg-media img {
    transform:
        scale(calc(var(--luark-pg-image-scale, 1) + 0.025));
}

.luark-pg-item:not(.is-active):hover .luark-pg-arrow {
    transform:
        translate(-50%, -50%)
        translate(6px, 6px);
}

.luark-pg-item:not(.is-active):hover .luark-pg-title {
    color: var(--luark-pg-title-hover-color, #E40520) !important;
    transform: translateY(-2px);
}

/* =========================================================
   FOCUS
========================================================= */

.luark-pg-trigger:focus-visible {
    outline: 2px solid var(--luark-pg-title-color, #005184);
    outline-offset: 4px;
}

/* ==========================================
   ≤1850px
========================================== */

@media (max-width:1900px){

    .luark-pg-title{
        --luark-pg-title-size:25px!important;
    }

    .luark-pg-arrow img{
        width:45%!important;
		padding-top: 20px!important;
    }

}

/* ==========================================
   ≤1600px
========================================== */

@media (max-width:1600px){

    .luark-pg-title{
        --luark-pg-title-size:21px!important;
    }

    .luark-pg-arrow img{
        width:42%!important;
		padding-top: 20px
!important;
    }

}

/* ==========================================
   ≤1400px
========================================== */

@media (max-width:1400px){

    .luark-pg-title{
        --luark-pg-title-size:19px!important;
    }

    .luark-pg-arrow img{
        width:40%!important;
		padding-top: 20px!important;
    }

}

/* ==========================================
   ≤1200px
========================================== */

@media (max-width:1200px){

    .luark-pg-title{
        --luark-pg-title-size:17px!important;
    }

    .luark-pg-arrow img{
        width:38%!important;
		padding-top: 20px!important;
    }

}
/* ==========================================
   ALTURA ≤1000px
========================================== */

@media (max-height:850px){

    .luark-pg-title{
        --luark-pg-title-size:20px;
    }

    .luark-pg-arrow img{
        width:44%;
    }

}

/* ==========================================
   ALTURA ≤900px
========================================== */

@media (max-height:750px){

    .luark-pg-title{
        --luark-pg-title-size:18px;
    }

    .luark-pg-arrow img{
        width:40%;
    }

}

/* ==========================================
   ALTURA ≤800px
========================================== */

@media (max-height:650px){

    .luark-pg-title{
        --luark-pg-title-size:16px;
    }

    .luark-pg-arrow img{
        width:36%;
    }

}
/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 1200px) {

    .luark-pg-grid{
        gap: 1.5em !important;
    }
	.luark-pg-item:not(.is-active):hover .luark-pg-arrow {
    	transform:none !important;
	}

	.luark-pg-item{
		display:block !important;
		width:100% !important;
		max-width:100% !important;
		margin:0 !important;
		height:auto !important;
		overflow:visible !important;
	}
   .luark-pg-item{
        --luark-pg-content-width:100% !important;
        --luark-pg-image-width:0% !important;
    }
.elementor-element-e1afdc1 .luark-pg-grid,
.elementor-element-e1afdc1 .luark-pg-item,
.elementor-element-e1afdc1 .luark-pg-content,
.elementor-element-e1afdc1 .luark-pg-trigger {
    width: 100% !important;
    max-width: 100% !important;
}
.elementor-widget-luark-purpose-grid{
    width: 100% !important;
    max-width: 100% !important;
}
    /* TARJETA CERRADA */

    .luark-pg-media{
        display:none !important;
    }

.luark-pg-content{
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    min-height:150px !important;
    padding:1.2em 4.8em 1.2em 1.4em !important;
}

.luark-pg-title{
    width:100% !important;
    max-width:100% !important;
    font-size:clamp(24px, 5vw, 34px) !important;
    line-height:1.08 !important;
}

.luark-pg-arrow{
    width:42px !important;
    height:42px !important;
    left:auto !important;
    right:1.2em !important;
    top:auto !important;
    bottom:1.1em !important;
    transform:none !important;
}

    /* TARJETA ABIERTA */

    .luark-pg-item.is-active .luark-pg-content{
        display:none !important;
    }

    .luark-pg-item.is-active .luark-pg-media{
        display:block !important;
        background:var(--luark-pg-active-bg,#286d91);
        height:auto !important;
        min-height:0 !important;
    }

    /* OCULTAMOS SOLO LA FOTO */
    .luark-pg-item.is-active .luark-pg-media img{
        display:none !important;
    }

    .luark-pg-item.is-active .luark-pg-active-panel{
        position:relative !important;

        opacity:1 !important;
        visibility:visible !important;
        transform:none !important;

        height:auto !important;
        min-height:0 !important;

        padding:2em 1.4em !important;

        font-size:16px !important;
        line-height:1.5 !important;
    }

    .luark-pg-arrow img{
        display:block !important;
    }
	    .luark-pg-trigger{
        display:flex !important;
        align-items:center !important;
        width:100% !important;
        max-width:100% !important;
    }

    .luark-pg-title{
        width:100% !important;
        max-width:100% !important;
    }

}