@import url("variables.css");

<!-- Generales

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

.lcontainer-0 { width: 100%; }
.lcontainer-1 { width: 90%; }
.lcontainer-2 { width: 80%; }
.lcontainer-3 { width: 70%; }

.lrow {
    margin: 0px auto;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: var(--mi-gap);
}

.lgap-0 { --mi-gap: 0px; }
.lgap-1 { --mi-gap: 5px; }
.lgap-2 { --mi-gap: 10px; }
.lgap-3 { --mi-gap: 20px; }
.lgap-4 { --mi-gap: 30px; }
.lgap-5 { --mi-gap: 50px; }

.lcol-1  { width: calc(8.33% - (var(--mi-gap) / 2)); }
.lcol-2  { width: 16.66%; }
.lcol-3  { width: 25%; }
.lcol-4  { width: 33.33%; }
.lcol-5  { width: 41.66%; }
.lcol-6  { width: calc(50% - (var(--mi-gap) / 2)); }
.lcol-7  { width: 58.33%; }
.lcol-8  { width: 66.66%; }
.lcol-9  { width: 75%; }
.lcol-10 { width: 83.33%; }
.lcol-11 { width: 91.66%; }
.lcol-12 { width: 100%; }

/* Margen General (Todos los lados)  1rem = 4 px*/
.lm-0 { margin: 0 !important; }
.lm-1 { margin: 0.25rem !important; } 
.lm-2 { margin: 0.5rem !important; }  
.lm-3 { margin: 1rem !important; }    
.lm-4 { margin: 1.5rem !important; }  
.lm-5 { margin: 3rem !important; }    

/* Margen Superior (Top) */
.lmt-auto { margin-top: auto; }
.lmt-1 { margin-top: 0.25rem !important; }
.lmt-2 { margin-top: 0.5rem !important; }
.lmt-3 { margin-top: 1rem !important; }
.lmt-4 { margin-top: 1.5rem !important; }
.lmt-5 { margin-top: 3rem !important; }

/* Margen Izquierdo (Left) */
.lml-auto { margin-left: auto; }
.lml-1 { margin-left: 0.25rem !important; }
.lml-2 { margin-left: 0.5rem !important; }
.lml-3 { margin-left: 1rem !important; }
.lml-4 { margin-left: 1.5rem !important; }
.lml-5 { margin-left: 3rem !important; }

/* Margen Derecho (right) */
.lmr-auto { margin-right: auto; }
.lmr-1 { margin-right: 0.25rem !important; }
.lmr-2 { margin-right: 0.5rem !important; }
.lmr-3 { margin-right: 1rem !important; }
.lmr-4 { margin-right: 1.5rem !important; }
.lmr-5 { margin-right: 3rem !important; }

/* Margen Inferior (Bottom) */
.lmb-auto { margin-bottom: auto; }
.lmb-1 { margin-bottom: 0.25rem !important; }
.lmb-2 { margin-bottom: 0.5rem !important; }
.lmb-3 { margin-bottom: 1rem !important; }
.lmb-4 { margin-bottom: 1.5rem !important; }
.lmb-5 { margin-bottom: 3rem !important; }

/* Margen Lateral (Ejes X: Izquierda y Derecha) */
.lmx-auto { margin-left: auto !important; margin-right: auto !important; }
.lmx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.lmx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.lmx-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
.lmx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.lmx-5 { margin-left: 3rem !important; margin-right: 3rem !important; }

/* Margen Vertical (Ejes X: Izquierda y Derecha) */
.lmy-auto { margin-top: auto !important; margin-bottom: auto !important; }
.lmy-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.lmy-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.lmy-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.lmy-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.lmy-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }

/* Padding General (Todos los lados)  1rem = 4 px*/
.lp-0 { padding: 0 !important; }
.lp-1 { padding: 0.25rem !important; } 
.lp-2 { padding: 0.5rem !important; }  
.lp-3 { padding: 1rem !important; }    
.lp-4 { padding: 1.5rem !important; }  
.lp-5 { padding: 3rem !important; }    

/* Margen Superior (Top) */
.lpt-auto { padding-top: auto; }
.lpt-1 { padding-top: 0.25rem !important; }
.lpt-2 { padding-top: 0.5rem !important; }
.lpt-3 { padding-top: 1rem !important; }
.lpt-4 { padding-top: 1.5rem !important; }
.lpt-5 { padding-top: 3rem !important; }

/* Margen Izquierdo (Left) */
.lpl-auto { padding-left: auto; }
.lpl-1 { padding-left: 0.25rem !important; }
.lpl-2 { padding-left: 0.5rem !important; }
.lpl-3 { padding-left: 1rem !important; }
.lpl-4 { padding-left: 1.5rem !important; }
.lpl-5 { padding-left: 3rem !important; }

/* Margen Derecho (right) */
.lpr-auto { padding-right: auto; }
.lpr-1 { padding-right: 0.25rem !important; }
.lpr-2 { padding-right: 0.5rem !important; }
.lpr-3 { padding-right: 1rem !important; }
.lpr-4 { padding-right: 1.5rem !important; }
.lpr-5 { padding-right: 3rem !important; }

/* Margen Inferior (Bottom) */
.lpb-auto { padding-bottom: auto; }
.lpb-1 { padding-bottom: 0.25rem !important; }
.lpb-2 { padding-bottom: 0.5rem !important; }
.lpb-3 { padding-bottom: 1rem !important; }
.lpb-4 { padding-bottom: 1.5rem !important; }
.lpb-5 { padding-bottom: 3rem !important; }

/* Margen Lateral (Ejes X: Izquierda y Derecha) */
.lpx-auto { padding-left: auto !important; padding-right: auto !important; }
.lpx-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.lpx-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.lpx-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.lpx-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.lpx-5 { padding-left: 3rem !important; padding-right: 3rem !important; }

/* Margen Vertical (Ejes X: Izquierda y Derecha) */
.lpy-auto { padding-top: auto !important; padding-bottom: auto !important; }
.lpy-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.lpy-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.lpy-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.lpy-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.lpy-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

/* Small (sm: 576px) Retrato móviñ*/
@media (min-width: 576px) {
    .lcol-sm-1  { width: calc(8.33%- (var(--mi-gap) * 11 / 12)); }
    .lcol-sm-2  { width: calc(16.66 - (var(--mi-gap) * 5/ 6)); }
    .lcol-sm-3  { width: calc(25% - (var(--mi-gap) *3 / 4)); }
    .lcol-sm-4  { width: calc(33.33% - (var(--mi-gap) *2 / 3)); }
    .lcol-sm-6  { width: calc(50% - (var(--mi-gap) / 2)); }
    .lcol-sm-12 { width: 100%; }
}

/* Medium (md: 768px) Tablets */
@media (min-width: 768px) {
    .lcol-md-1  { width: calc(8.33% - (var(--mi-gap) *11/ 12)); }
    .lcol-md-2  { width: calc(16.66% - (var(--mi-gap) *5 / 6)); }
    .lcol-md-3  { width: calc(25% - (var(--mi-gap) * 3 / 4)); }
    .lcol-md-4  { width: calc(33.33% - (var(--mi-gap) * 2 / 3)); }
    .lcol-md-6  { width: calc(50% - (var(--mi-gap) / 2)); }
    .lcol-md-12 { width: 100%; }
}

/* Large (lg: 992px) Ordenadores pequeños*/
@media (min-width: 992px) {
    .lcol-lg-1  { width: calc(8.33% - (var(--mi-gap) *11 / 12)); }
    .lcol-lg-2  { width: calc(16.66% - (var(--mi-gap) *5/ 6)); }
    .lcol-lg-3  { width: calc(25% - (var(--mi-gap) *3/ 4)); }
    .lcol-lg-4  { width: calc(33.33% - (var(--mi-gap) *2/ 3)); }
    .lcol-lg-6  { width: calc(50% - (var(--mi-gap) / 2)); }
    .lcol-lg-12 { width: 100%; }
}

/* Large (xl: 992px) Ordenadores ultraanchos*/
@media (min-width: 1440px) {
    .lcol-xl-1  { width: calc(8.33% - (var(--mi-gap) * 11/ 12)); }
    .lcol-xl-2  { width: calc(16.66%- (var(--mi-gap) *5/ 6)); }
    .lcol-xl-3  { width: calc(25%- (var(--mi-gap) *3/ 4)); }
    .lcol-xl-4  { width: calc(33.33%- (var(--mi-gap) * 2 / 3)); }
    .lcol-xl-6  { width: calc(50%- (var(--mi-gap) / 2)); }
    .lcol-xl-12 { width: calc(100%- (var(--mi-gap) / 2)); }
}