/* ==========================================
   LGP - GALERÍA DE FAMILIAS
========================================== */
.lgp-familias{
    --lgp-amarillo:#F5E500;
    --lgp-naranja:#F47B32;
    --lgp-azul:#4357A6;
    width:100%;
    padding:54px 24px 46px;
    overflow:hidden;
    background:transparent;
    box-sizing:border-box;
}

.lgp-familias *,
.lgp-familias *::before,
.lgp-familias *::after{box-sizing:border-box;}

.lgp-familias__encabezado{
    width:min(100%,1400px);
    margin:0 auto 30px;
}

.lgp-familias__titulo{
    margin:0 0 8px;
    color:var(--lgp-azul);
    font-size:clamp(30px,4vw,58px);
    line-height:1;
}

.lgp-familias__intro{
    max-width:720px;
    margin:0;
    color:var(--lgp-azul);
    font-size:18px;
    line-height:1.45;
}

.lgp-familias__viewport{
    width:min(100%,1400px);
    margin:0 auto;
    outline:none;
}

.lgp-familias__track{
    display:grid;
    grid-template-columns:repeat(var(--lgp-familias-columnas,2),minmax(0,1fr));
    gap:36px;
}

.lgp-familias__item{
    min-width:0;
    color:inherit;
    text-decoration:none;
}

.lgp-familias__figura{margin:0;}

.lgp-familias__imagen{
    display:block;
    width:100%;
    aspect-ratio:1.55/1;
    object-fit:cover;
    object-position:center;
    background:#ececec;
    transition:transform .35s ease,filter .35s ease;
}

.lgp-familias__item[href]:hover .lgp-familias__imagen{
    transform:scale(1.015);
    filter:brightness(.96);
}

.lgp-familias__caption{padding-top:16px;}

.lgp-familias__nombre{
    margin:0;
    color:var(--lgp-azul);
    font-size:19px;
    line-height:1.15;
    font-weight:400;
}

.lgp-familias__texto{
    margin-top:10px;
    color:var(--lgp-azul);
    font-size:16px;
    line-height:1.45;
}

.lgp-familias__texto p{margin:0 0 8px;}

.lgp-familias__controles{display:none;}
.lgp-familias-vacio{padding:16px;background:#fff;border-left:4px solid #4357A6;}

/* Tablet conserva el carrusel táctil actual, sin flechas. */
@media (max-width:1024px){
    .lgp-familias{padding:32px 0;}

    .lgp-familias__encabezado{
        padding:0 28px 0 0;
        margin-bottom:22px;
    }

    .lgp-familias__titulo{font-size:34px;}

    .lgp-familias__intro{
        font-size:14px;
        line-height:1.35;
    }

    .lgp-familias__viewport{
        width:100%;
        overflow-x:auto;
        overflow-y:hidden;
        scroll-snap-type:x mandatory;
        scroll-padding-left:0;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        overscroll-behavior-x:contain;
    }

    .lgp-familias__viewport::-webkit-scrollbar{display:none;}

    .lgp-familias__track{
        display:grid;
        grid-auto-flow:column;
        grid-auto-columns:calc(100% - 42px);
        grid-template-columns:none;
        gap:7px;
        width:100%;
        padding-right:34px;
    }

    .lgp-familias__item{
        width:100%;
        min-width:0;
        scroll-snap-align:start;
    }

    .lgp-familias__imagen{aspect-ratio:1.45/1;}
    .lgp-familias__caption{padding-top:7px;}

    .lgp-familias__nombre{
        font-size:19px;
        line-height:1.2;
    }

    .lgp-familias__texto{font-size:13px;}
}

/* Mobile: tarjetas más compactas, mayor adelanto lateral y flechas inferiores. */
@media (max-width:767px){
    .lgp-familias{padding:28px 0;}

    .lgp-familias__encabezado{
        padding-right:16px;
        margin-bottom:18px;
    }

    .lgp-familias__track{
        /* Tarjeta más angosta para mostrar mejor la siguiente familia. */
        grid-auto-columns:calc(100% - 76px);
        gap:8px;
        padding-right:68px;
    }

    .lgp-familias__imagen{
        aspect-ratio:1.08/1;
    }

    .lgp-familias__caption{
        padding-top:6px;
    }

    .lgp-familias__nombre{
        font-size:13px;
        line-height:1.2;
    }

    .lgp-familias__controles{
        display:flex;
        align-items:center;
        justify-content:flex-end;
        gap:18px;
        width:100%;
        min-height:32px;
        margin-top:24px;
        padding:0 20px 0 0;
    }

    .lgp-familias__flecha{
        position:relative;
        width:22px;
        height:30px;
        padding:0;
        border:0;
        border-radius:0;
        background:transparent;
        cursor:pointer;
        appearance:none;
        -webkit-appearance:none;
        touch-action:manipulation;
    }

    .lgp-familias__flecha::before{
        content:"";
        position:absolute;
        top:50%;
        transform:translateY(-50%);
        width:0;
        height:0;
        border-top:12px solid transparent;
        border-bottom:12px solid transparent;
    }

    .lgp-familias__flecha--anterior::before{
        left:2px;
        border-right:13px solid var(--lgp-azul);
    }

    .lgp-familias__flecha--siguiente::before{
        right:2px;
        border-left:13px solid var(--lgp-azul);
    }

    .lgp-familias__flecha:hover,
    .lgp-familias__flecha:focus,
    .lgp-familias__flecha:active{
        background:transparent;
        outline:none;
        box-shadow:none;
    }

    .lgp-familias__flecha:focus-visible{
        outline:2px solid var(--lgp-azul);
        outline-offset:4px;
    }
}

@media (prefers-reduced-motion:reduce){
    .lgp-familias__imagen{transition:none;}
    .lgp-familias__viewport{scroll-behavior:auto !important;}
}

/* ==========================================
   VIDEO YOUTUBE — BOTÓN Y MODAL
========================================== */
.lgp-familias__item[type="button"]{
    display:block;
    width:100%;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:inherit;
    text-align:left;
    font:inherit;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
}

.lgp-familias__item[type="button"] .lgp-familias__figura{
    position:relative;
}

.lgp-familias__item[type="button"]:hover .lgp-familias__imagen,
.lgp-familias__item[type="button"]:focus-visible .lgp-familias__imagen{
    transform:scale(1.015);
    filter:brightness(.78);
}

.lgp-familias__item[type="button"]:focus-visible{
    outline:2px solid var(--lgp-azul);
    outline-offset:5px;
}

.lgp-familias__play{
    position:absolute;
    top:50%;
    left:50%;
    z-index:2;
    width:52px;
    height:52px;
    border:2px solid rgba(255,255,255,.95);
    border-radius:50%;
    background:rgba(67,87,166,.9);
    box-shadow:0 8px 24px rgba(0,0,0,.22);
    transform:translate(-50%,-65%);
    transition:transform .25s ease,background-color .25s ease;
    pointer-events:none;
}

.lgp-familias__play::before{
    content:"";
    position:absolute;
    top:50%;
    left:52%;
    width:0;
    height:0;
    border-top:8px solid transparent;
    border-bottom:8px solid transparent;
    border-left:13px solid #fff;
    transform:translate(-40%,-50%);
}

.lgp-familias__item[type="button"]:hover .lgp-familias__play,
.lgp-familias__item[type="button"]:focus-visible .lgp-familias__play{
    background:var(--lgp-naranja);
    transform:translate(-50%,-65%) scale(1.08);
}

body.lgp-familias-modal-abierto{
    overflow:hidden;
}

.lgp-familias-modal[hidden]{display:none !important;}

.lgp-familias-modal{
    position:fixed;
    inset:0;
    z-index:999999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px;
}

.lgp-familias-modal__fondo{
    position:absolute;
    inset:0;
    background:rgba(8,12,28,.88);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
}

.lgp-familias-modal__dialogo{
    position:relative;
    z-index:1;
    width:min(100%,760px);
    background:#000;
    box-shadow:0 24px 80px rgba(0,0,0,.42);
    animation:lgpFamiliasModalEntrada .28s ease both;
}

.lgp-familias-modal__video{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    background:#000;
}

.lgp-familias-modal__video iframe{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    border:0;
}

.lgp-familias-modal__cerrar{
    position:absolute;
    top:-44px;
    right:0;
    z-index:3;
    width:38px;
    height:38px;
    padding:0;
    border:0;
    border-radius:50%;
    background:transparent;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
}

.lgp-familias-modal__cerrar::before,
.lgp-familias-modal__cerrar::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:26px;
    height:2px;
    background:#fff;
    transition:background-color .2s ease,transform .25s ease;
}

.lgp-familias-modal__cerrar::before{transform:translate(-50%,-50%) rotate(45deg);}
.lgp-familias-modal__cerrar::after{transform:translate(-50%,-50%) rotate(-45deg);}

.lgp-familias-modal__cerrar:hover::before,
.lgp-familias-modal__cerrar:hover::after,
.lgp-familias-modal__cerrar:focus-visible::before,
.lgp-familias-modal__cerrar:focus-visible::after{
    background:var(--lgp-naranja);
}

.lgp-familias-modal__cerrar:hover::before{transform:translate(-50%,-50%) rotate(135deg);}
.lgp-familias-modal__cerrar:hover::after{transform:translate(-50%,-50%) rotate(45deg);}
.lgp-familias-modal__cerrar:focus-visible{outline:2px solid #fff;outline-offset:3px;}

@keyframes lgpFamiliasModalEntrada{
    from{opacity:0;transform:translateY(14px) scale(.98);}
    to{opacity:1;transform:translateY(0) scale(1);}
}

@media (max-width:767px){
    .lgp-familias__play{
        width:42px;
        height:42px;
        transform:translate(-50%,-62%);
    }

    .lgp-familias__play::before{
        border-top-width:6px;
        border-bottom-width:6px;
        border-left-width:10px;
    }

    .lgp-familias__item[type="button"]:hover .lgp-familias__play,
    .lgp-familias__item[type="button"]:focus-visible .lgp-familias__play{
        transform:translate(-50%,-62%) scale(1.06);
    }

    .lgp-familias-modal{
        padding:18px;
    }

    .lgp-familias-modal__cerrar{
        top:-42px;
        right:-4px;
    }
}

@media (prefers-reduced-motion:reduce){
    .lgp-familias__play,
    .lgp-familias-modal__dialogo,
    .lgp-familias-modal__cerrar::before,
    .lgp-familias-modal__cerrar::after{transition:none;animation:none;}
}


/* ==========================================
   MOBILE — GUTTER REAL 25PX INICIO / FINAL
========================================== */

@media (max-width:767px){

    .lgp-familias__viewport{
        padding-left:15px !important;
        padding-right:0 !important;
        box-sizing:border-box;

        scroll-padding-left:15px !important;
        scroll-padding-right:17px !important;
    }

    .lgp-familias__track{
        padding-left:0 !important;
        padding-right:0 !important;
    }

    /*
     * Espaciador real al final del flex.
     * A diferencia del padding-right del viewport, este sí forma parte
     * del ancho desplazable y garantiza 25px después de la última tarjeta.
     */
    .lgp-familias__track::after{
        content:"";
        display:block;
        flex:0 0 17px;
        width:17px;
        min-width:17px;
        height:1px;
        pointer-events:none;
    }

}


/* ==========================================
   FLECHAS — ESTADO INACTIVO
========================================== */

.lgp-familias__flecha.is-inactive{
    opacity:.30;
    cursor:default;
    pointer-events:none;
    transition:opacity .25s ease;
}

.lgp-familias__flecha:not(.is-inactive){
    opacity:1;
    transition:opacity .25s ease;
}


/* ==========================================
   MOBILE — FLECHAS UN POCO MÁS GRANDES
========================================== */

@media (max-width:767px){

    .lgp-familias__flecha{
        width:38px !important;
        height:38px !important;
    }

    .lgp-familias__flecha::before{
        border-top-width:14px !important;
        border-bottom-width:14px !important;
    }

    .lgp-familias__flecha--anterior::before{
        border-right-width:15px !important;
    }

    .lgp-familias__flecha--siguiente::before{
        border-left-width:15px !important;
    }

}


/* ==========================================
   MOBILE — AJUSTE FINAL CONTROLES
========================================== */

@media (max-width:767px){

    .lgp-familias__controles{
        gap:6px !important;
    }

}


/* ==========================================
   v1.2.10 — MOBILE GUTTERS FINALES
   Izquierda: 25px / Derecha final: 15px
========================================== */

@media (max-width:767px){

    .lgp-familias__viewport{
        padding-left:25px !important;
        padding-right:0 !important;

        scroll-padding-left:25px !important;
        scroll-padding-right:15px !important;
    }

    .lgp-familias__track{
        padding-left:0 !important;
        padding-right:0 !important;
    }

    .lgp-familias__track::after{
        flex:0 0 15px !important;
        width:15px !important;
        min-width:15px !important;
    }

}