/*
==========================================
PM UI Framework
Layout
Version: 0.1.0
==========================================
*/

/* ==========================================
   VARIABLES DE LAYOUT
========================================== */

:root{

    /* Containers */
    --pm-container-xs:480px;
    --pm-container-sm:640px;
    --pm-container-md:768px;
    --pm-container-lg:1024px;
    --pm-container-xl:1200px;
    --pm-container-xxl:1400px;

    /* Espaciados horizontales */
    --pm-container-padding:20px;

    /* Separación entre columnas */
    --pm-grid-gap:24px;

    /* Separación entre secciones */
    --pm-section-space-xs:32px;
    --pm-section-space-sm:48px;
    --pm-section-space-md:72px;
    --pm-section-space-lg:96px;
    --pm-section-space-xl:140px;

}

/* ==========================================
   RESET DE LAYOUT
========================================== */

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

html,
body{
    width:100%;
    overflow-x:hidden;
}

/* ==========================================
   CONTAINER BASE
========================================== */

.pm-container{

    width:100%;
    max-width:var(--pm-container-xl);

    margin-left:auto;
    margin-right:auto;

    padding-left:var(--pm-container-padding);
    padding-right:var(--pm-container-padding);

}

/* ==========================================
   TAMAÑOS DE CONTAINER
========================================== */

.pm-container-xs{
    max-width:var(--pm-container-xs);
}

.pm-container-sm{
    max-width:var(--pm-container-sm);
}

.pm-container-md{
    max-width:var(--pm-container-md);
}

.pm-container-lg{
    max-width:var(--pm-container-lg);
}

.pm-container-xl{
    max-width:var(--pm-container-xl);
}

.pm-container-xxl{
    max-width:var(--pm-container-xxl);
}

.pm-container-fluid{

    width:100%;
    max-width:none;

    padding-left:var(--pm-container-padding);
    padding-right:var(--pm-container-padding);

}

/* ==========================================
   WRAPPER
========================================== */

.pm-wrapper{

    width:100%;
    position:relative;

}

.pm-content{

    width:100%;

}

.pm-main{

    width:100%;

}

/* ==========================================
   SECTION
========================================== */

.pm-section{

    position:relative;

    padding-top:var(--pm-section-space-md);
    padding-bottom:var(--pm-section-space-md);

}

.pm-section-xs{

    padding-top:var(--pm-section-space-xs);
    padding-bottom:var(--pm-section-space-xs);

}

.pm-section-sm{

    padding-top:var(--pm-section-space-sm);
    padding-bottom:var(--pm-section-space-sm);

}

.pm-section-lg{

    padding-top:var(--pm-section-space-lg);
    padding-bottom:var(--pm-section-space-lg);

}

.pm-section-xl{

    padding-top:var(--pm-section-space-xl);
    padding-bottom:var(--pm-section-space-xl);

}

/* ==========================================
   FONDOS DE SECCIÓN
========================================== */

.pm-section-light{
    background:#ffffff;
}

.pm-section-muted{
    background:#f8f9fa;
}

.pm-section-dark{
    background:#212529;
    color:#ffffff;
}

.pm-section-primary{

    background:var(--pm-primary);
    color:#ffffff;

}

/* ==========================================
   ANCHOS ÚTILES
========================================== */

.pm-w-100{
    width:100%;
}

.pm-max-content{
    max-width:max-content;
}

.pm-fit-content{
    width:fit-content;
}

.pm-full-height{
    min-height:100%;
}

.pm-screen-height{
    min-height:100vh;
}

/* ==========================================
   GRID SYSTEM
========================================== */

.pm-grid{

    display:grid;
    gap:var(--pm-grid-gap);

}

.pm-grid-gap-0{gap:0;}
.pm-grid-gap-xs{gap:8px;}
.pm-grid-gap-sm{gap:16px;}
.pm-grid-gap-md{gap:24px;}
.pm-grid-gap-lg{gap:32px;}
.pm-grid-gap-xl{gap:48px;}

/* ==========================================
   COLUMNAS
========================================== */

.pm-grid-1{
    grid-template-columns:repeat(1,minmax(0,1fr));
}

.pm-grid-2{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.pm-grid-3{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.pm-grid-4{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.pm-grid-5{
    grid-template-columns:repeat(5,minmax(0,1fr));
}

.pm-grid-6{
    grid-template-columns:repeat(6,minmax(0,1fr));
}

.pm-grid-12{
    grid-template-columns:repeat(12,minmax(0,1fr));
}

/* ==========================================
   SPAN
========================================== */

.pm-col-span-1{grid-column:span 1;}
.pm-col-span-2{grid-column:span 2;}
.pm-col-span-3{grid-column:span 3;}
.pm-col-span-4{grid-column:span 4;}
.pm-col-span-5{grid-column:span 5;}
.pm-col-span-6{grid-column:span 6;}
.pm-col-span-7{grid-column:span 7;}
.pm-col-span-8{grid-column:span 8;}
.pm-col-span-9{grid-column:span 9;}
.pm-col-span-10{grid-column:span 10;}
.pm-col-span-11{grid-column:span 11;}
.pm-col-span-12{grid-column:span 12;}

/* ==========================================
   FILAS
========================================== */

.pm-row-span-1{grid-row:span 1;}
.pm-row-span-2{grid-row:span 2;}
.pm-row-span-3{grid-row:span 3;}
.pm-row-span-4{grid-row:span 4;}
.pm-row-span-5{grid-row:span 5;}
.pm-row-span-6{grid-row:span 6;}

/* ==========================================
   AUTO GRID
========================================== */

.pm-auto-grid{

    display:grid;

    gap:var(--pm-grid-gap);

    grid-template-columns:
        repeat(auto-fit,minmax(260px,1fr));

}

.pm-auto-grid-sm{

    display:grid;

    gap:var(--pm-grid-gap);

    grid-template-columns:
        repeat(auto-fit,minmax(180px,1fr));

}

.pm-auto-grid-lg{

    display:grid;

    gap:var(--pm-grid-gap);

    grid-template-columns:
        repeat(auto-fit,minmax(340px,1fr));

}

/* ==========================================
   ALINEACIÓN GRID
========================================== */

.pm-grid-center{
    place-items:center;
}

.pm-grid-start{
    place-items:start;
}

.pm-grid-end{
    place-items:end;
}

.pm-grid-stretch{
    place-items:stretch;
}

.pm-grid-align-start{
    align-items:start;
}

.pm-grid-align-center{
    align-items:center;
}

.pm-grid-align-end{
    align-items:end;
}

.pm-grid-justify-start{
    justify-items:start;
}

.pm-grid-justify-center{
    justify-items:center;
}

.pm-grid-justify-end{
    justify-items:end;
}

/* ==========================================
   GRID AUTO FLOW
========================================== */

.pm-grid-flow-row{
    grid-auto-flow:row;
}

.pm-grid-flow-column{
    grid-auto-flow:column;
}

.pm-grid-dense{
    grid-auto-flow:dense;
}

/* ==========================================
   FLEX
========================================== */

.pm-flex{
    display:flex;
}

.pm-inline-flex{
    display:inline-flex;
}

/* ==========================================
   DIRECCIÓN
========================================== */

.pm-flex-row{
    flex-direction:row;
}

.pm-flex-column{
    flex-direction:column;
}

.pm-flex-row-reverse{
    flex-direction:row-reverse;
}

.pm-flex-column-reverse{
    flex-direction:column-reverse;
}

/* ==========================================
   WRAP
========================================== */

.pm-flex-wrap{
    flex-wrap:wrap;
}

.pm-flex-nowrap{
    flex-wrap:nowrap;
}

.pm-flex-wrap-reverse{
    flex-wrap:wrap-reverse;
}

/* ==========================================
   JUSTIFY CONTENT
========================================== */

.pm-justify-start{
    justify-content:flex-start;
}

.pm-justify-center{
    justify-content:center;
}

.pm-justify-end{
    justify-content:flex-end;
}

.pm-justify-between{
    justify-content:space-between;
}

.pm-justify-around{
    justify-content:space-around;
}

.pm-justify-evenly{
    justify-content:space-evenly;
}

/* ==========================================
   ALIGN ITEMS
========================================== */

.pm-items-start{
    align-items:flex-start;
}

.pm-items-center{
    align-items:center;
}

.pm-items-end{
    align-items:flex-end;
}

.pm-items-stretch{
    align-items:stretch;
}

.pm-items-baseline{
    align-items:baseline;
}

/* ==========================================
   ALIGN SELF
========================================== */

.pm-self-start{
    align-self:flex-start;
}

.pm-self-center{
    align-self:center;
}

.pm-self-end{
    align-self:flex-end;
}

.pm-self-stretch{
    align-self:stretch;
}

/* ==========================================
   FLEX GROW / SHRINK
========================================== */

.pm-flex-1{
    flex:1;
}

.pm-flex-auto{
    flex:auto;
}

.pm-flex-none{
    flex:none;
}

.pm-grow{
    flex-grow:1;
}

.pm-grow-0{
    flex-grow:0;
}

.pm-shrink{
    flex-shrink:1;
}

.pm-shrink-0{
    flex-shrink:0;
}

/* ==========================================
   GAPS
========================================== */

.pm-gap-0{
    gap:0;
}

.pm-gap-xs{
    gap:8px;
}

.pm-gap-sm{
    gap:16px;
}

.pm-gap-md{
    gap:24px;
}

.pm-gap-lg{
    gap:32px;
}

.pm-gap-xl{
    gap:48px;
}

/* ==========================================
   STACK
========================================== */

.pm-stack{

    display:flex;
    flex-direction:column;
    gap:24px;

}

.pm-stack-xs{
    gap:8px;
}

.pm-stack-sm{
    gap:16px;
}

.pm-stack-md{
    gap:24px;
}

.pm-stack-lg{
    gap:32px;
}

.pm-stack-xl{
    gap:48px;
}

/* ==========================================
   CLUSTER
========================================== */

.pm-cluster{

    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:16px;

}

/* ==========================================
   CENTER
========================================== */

.pm-center{

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

}

.pm-center-inline{

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

}

/* ==========================================
   SPLIT LAYOUT
========================================== */

.pm-split{

    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--pm-grid-gap);

}

.pm-split > *{

    flex:1 1 320px;

}


/* ==========================================
   SIDEBAR LAYOUT
========================================== */

.pm-sidebar{

    display:flex;
    flex-wrap:wrap;
    gap:var(--pm-grid-gap);
    align-items:start;

}

.pm-sidebar-main{

    flex:1 1 700px;

}

.pm-sidebar-side{

    flex:0 1 320px;

}


/* ==========================================
   COVER LAYOUT
   Elemento centrado verticalmente
========================================== */

.pm-cover{

    min-height:100vh;

    display:flex;

    flex-direction:column;

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

    text-align:center;

    padding:40px 20px;

}


/* ==========================================
   FRAME
   Contenedor con relación visual
========================================== */

.pm-frame{

    overflow:hidden;

    position:relative;

    width:100%;

    aspect-ratio:16 / 9;

}


.pm-frame-square{

    aspect-ratio:1 / 1;

}


.pm-frame-portrait{

    aspect-ratio:3 / 4;

}


/* ==========================================
   SWITCHER
   Cambia columnas según espacio
========================================== */

.pm-switcher{

    display:flex;

    flex-wrap:wrap;

    gap:var(--pm-grid-gap);

}


.pm-switcher > *{

    flex:1 1 280px;

}


/* ==========================================
   REEL
   Scroll horizontal
========================================== */

.pm-reel{

    display:flex;

    overflow-x:auto;

    gap:var(--pm-grid-gap);

    scroll-snap-type:x mandatory;

    padding-bottom:10px;

}


.pm-reel > *{

    flex:0 0 auto;

    scroll-snap-align:start;

}


/* ==========================================
   MASONRY SIMPLE
========================================== */

.pm-masonry{

    columns:3;

    column-gap:var(--pm-grid-gap);

}


.pm-masonry > *{

    break-inside:avoid;

    margin-bottom:var(--pm-grid-gap);

}


/* ==========================================
   ASPECT RATIOS
========================================== */

.pm-ratio-video{

    aspect-ratio:16 / 9;

}


.pm-ratio-image{

    aspect-ratio:4 / 3;

}


.pm-ratio-square{

    aspect-ratio:1 / 1;

}


/* ==========================================
   POSITION HELPERS
========================================== */

.pm-relative{

    position:relative;

}


.pm-absolute{

    position:absolute;

}


.pm-fixed{

    position:fixed;

}


.pm-sticky{

    position:sticky;

}


/* ==========================================
   Z INDEX
========================================== */

.pm-z-0{
    z-index:0;
}

.pm-z-10{
    z-index:10;
}

.pm-z-20{
    z-index:20;
}

.pm-z-30{
    z-index:30;
}

.pm-z-50{
    z-index:50;
}

.pm-z-100{
    z-index:100;
}

/* ==========================================
   RESPONSIVE BREAKPOINTS
========================================== */

/*
   Mobile First

   sm  : 576px
   md  : 768px
   lg  : 992px
   xl  : 1200px
*/


/* ==========================================
   TABLET - MIN 576px
========================================== */

@media(min-width:576px){


    .pm-container{

        padding-left:24px;
        padding-right:24px;

    }


    .pm-grid-sm-2{

        grid-template-columns:
        repeat(2,minmax(0,1fr));

    }


    .pm-grid-sm-3{

        grid-template-columns:
        repeat(3,minmax(0,1fr));

    }


    .pm-flex-sm-row{

        flex-direction:row;

    }


}


/* ==========================================
   TABLET - MIN 768px
========================================== */

@media(min-width:768px){


    .pm-container{

        padding-left:32px;
        padding-right:32px;

    }


    .pm-grid-md-2{

        grid-template-columns:
        repeat(2,minmax(0,1fr));

    }


    .pm-grid-md-3{

        grid-template-columns:
        repeat(3,minmax(0,1fr));

    }


    .pm-grid-md-4{

        grid-template-columns:
        repeat(4,minmax(0,1fr));

    }


    .pm-flex-md-row{

        flex-direction:row;

    }


    .pm-hide-md{

        display:none;

    }


}


/* ==========================================
   DESKTOP - MIN 992px
========================================== */

@media(min-width:992px){


    .pm-grid-lg-3{

        grid-template-columns:
        repeat(3,minmax(0,1fr));

    }


    .pm-grid-lg-4{

        grid-template-columns:
        repeat(4,minmax(0,1fr));

    }


    .pm-grid-lg-6{

        grid-template-columns:
        repeat(6,minmax(0,1fr));

    }


    .pm-flex-lg-row{

        flex-direction:row;

    }


    .pm-hide-lg{

        display:none;

    }


}


/* ==========================================
   LARGE DESKTOP - MIN 1200px
========================================== */

@media(min-width:1200px){


    .pm-container{

        padding-left:0;
        padding-right:0;

    }


    .pm-grid-xl-4{

        grid-template-columns:
        repeat(4,minmax(0,1fr));

    }


    .pm-grid-xl-5{

        grid-template-columns:
        repeat(5,minmax(0,1fr));

    }


    .pm-grid-xl-6{

        grid-template-columns:
        repeat(6,minmax(0,1fr));

    }


}


/* ==========================================
   MOBILE ONLY
========================================== */

@media(max-width:767px){


    .pm-hide-mobile{

        display:none !important;

    }


    .pm-stack-mobile{

        flex-direction:column;

    }


    .pm-full-mobile{

        width:100%;

    }


    .pm-center-mobile{

        text-align:center;

        justify-content:center;

        align-items:center;

    }


}


/* ==========================================
   VISIBILITY
========================================== */

.pm-hidden{

    display:none !important;

}


.pm-visible{

    display:block !important;

}


/* ==========================================
   ORDER
========================================== */

.pm-order-first{

    order:-1;

}


.pm-order-last{

    order:999;

}


.pm-order-none{

    order:0;

}


/* ==========================================
   OVERFLOW
========================================== */

.pm-overflow-hidden{

    overflow:hidden;

}


.pm-overflow-auto{

    overflow:auto;

}


.pm-scroll-x{

    overflow-x:auto;

}


/* ==========================================
   OBJECT FIT
========================================== */

.pm-object-cover{

    object-fit:cover;

}


.pm-object-contain{

    object-fit:contain;

}


/* ==========================================
   CLEARFIX
========================================== */

.pm-clear::after{

    content:"";

    display:block;

    clear:both;

}