/*

Id: pg-ws-01
Nombre: Ws01
Fecha: 15/11/21
Sistema: Site Mater
*/

/***************************
VARIABLES
**************************/
:root {
    /*
Fuentes
*/
    --font-size: 16px; /* tamaño base de la fuente */
    --ratio: 1.125; /* ratio para calcular los tamaños de fuente, se aumenta en los @media */
    --line-height: 1.5em; /* interlineado base de la fuente */
    --font-xs: calc(var(--ratio) * 0.9rem); /* Cálculo de los tamaños de fuente, relacionados con la variable ratio*/
    --font-s: calc(var(--ratio) * 1rem);
    --font-m: calc(var(--ratio) * var(--font-s));
    --font-l: calc(var(--ratio) * var(--font-m));
    --font-xl: calc(var(--ratio) * var(--font-l));
    --font-xxl: calc(var(--ratio) * var(--font-xl));
    --font-3xl: calc(var(--ratio) * var(--font-xxl));
    /*
Personalizables
*/
    --primary: #26448c; /* colores */
    --primary-invert: #fff;
    --secondary: #2b2a29;
    --secondary-invert: #fff;
    --light: #f5f5f5;
    --light-invert: #333;
    --dark: #C03A2C;
    --dark-invert: #fff;
    --dark-transparent: rgba(0,0,0,0.8); /* color negro transparente */
    --white-transparent: rgba(255,255,255,0.8); /* color blanco transparente */
    --bg-gradient: radial-gradient(circle, rgba(238,242,243,1) 0%, rgba(238,238,238,1) 50%, rgba(179,193,204,1) 100%);
    --swiper-theme-color: #26448c !important; /* color para el tema de swiper */
    --color-fb: #3A559F; /* color facebook */
    --color-ig: #C536A4; /* color instagram */
    --color-tw: #50ABF1; /* color twitter */
    --color-wa: #1BD741; /* color whatsapp */
    --radius1: 4px; /* Borde redondeado 1 */
    --radius2: 12px; /* Borde redondeado 2 */
    --bold1: 600; /* grosor de las negritas 1 */
    --bold2: 500; /* grosor de las negritas 2 */
    --font1: 'Open Sans';
    --font2: 'Poppins';
    --font-color: #000;
    --awesome: 'Font Awesome 6 Pro';
    --max-width: 1280px; /* Ancho máximo del container */
    --padding-h: 1rem; /* padding horizontal de los section, se aumenta en los @media */
    --padding-v: 2rem; /* padding vertical de los section, se aumenta en los @media*/
    --padding-inner: max(min(5%, var(--padding-h)), min(1rem)); /* Espacio interior de los componentes  */
 
    --width-logo: 90px; /* Tamaño del logo, se aumenta en los @media */

    /*
Altura dispositivo
*/
    --app-height: 100vh; /* Altura del disposivo */
    --height-header: 0; /* Altura de la cabecera */
}

@media screen and (min-width: 600px) {
    :root {
		--width-logo: 100px;
        --ratio: 1.15;
        --padding-h: 1.5rem;
        --padding-v: 2.5rem;
    }
}

@media screen and (min-width: 769px) {
    :root {
		--width-logo: 120px;
        --ratio: 1.175;
        --padding-h: 2rem;
        --padding-v: 3rem;
    }
}

@media screen and (min-width: 1200px) {
    :root {
        --width-logo: 140px;
         --ratio: 1.20;
        --padding-h: 2.5rem;
        --padding-v: 3.5rem;
    }
}

*, *:after, *:before {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-text-size-adjust: none;
}

a {
    color: var(--primary);
}

b, strong {
    font-weight:var(--bold1);
}
a[href^="tel:"]:not(.button) {
    color: inherit;
    text-decoration: none;
}

html {
    font-family:var(--font1);
    color: var(--font-color);
    font-size: var(--font-size);
    line-height: var(--line-height);
}

body {
    min-width: 300px;
    overflow-x:hidden;
	position:relative;
}

body.no-scroll {
    overflow: hidden;
}

/* Separacion pequeña entre bloques */
.sep{
    margin:var(--padding-h) 0 ;
}

/***************************
COOKIES Y LEGAL
**************************/
div[data-tpc="rpl"] {
    background: #f5f5f5;
    padding: 30px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    font-size: 120%;
    color: #333;
    height: 100%;
}

div[data-tpc="rpl"] span {
    display: block;
    padding: 16px;
    border: 2px dashed #ccc;
}

#dvAviso {
    text-align: left;
}

#dvAviso ul {
    padding-left: 22px;
    margin-bottom: 0 0 1.25rem;
}

#dvAviso .enc {
    font-weight: var(--bold1);
    font-size: 1.2rem;
}



/***************************
SECCIONES
**************************/
.section { /* Seccion normal */
    padding: var(--padding-v) var(--padding-h);
}
.section.section--gap-v { /* section con padding sólo vertical */
    padding: var(--padding-v) 0;
}

.section.section--nogap { /* section sin padding */
    padding: 0;
}
.section.section--nogap-down { /* section sin padding abajo */
    padding-bottom: 0;
}
.section.section--nogap-up { /* section sin padding abajo */
    padding-top: 0;
}
.section--primary { /* color de fondo y texto de los section */
    background: var(--primary);
    color: var(--primary-invert);
}
.section--primary a:not(.button) { /* color de fondo y texto de los section */
    color: var(--primary-invert);
}
.section--secondary {
    background: var(--secondary);
    color: var(--secondary-invert);
}
.section--secondary a:not(.button) {
    color: var(--secondary-invert);
}
.section--light {
    background: var(--light);
    color: var(--light-invert);
}
.section--dark {
    background: var(--dark);
    color: var(--dark-invert);
}
.section--dark a:not(.button) {
    color: var(--dark-invert);
}

.section--gradient {
    background: var(--bg-gradient);
}
.section--bg { /* section con imagen de fondo */
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section--filter:before { /* section con filtro de color por detrás del texto */
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0,0.4);
    z-index: 1;
}
.section--filter .container {
    position: relative;
    z-index: 1;
}

.container { /* container con ancho máximo */
    width:100%;
    max-width: var(--max-width);
    margin: 0 auto;
}
.container--s { /* container con ancho máximo de 60% */
    max-width: calc( var(--max-width) * 0.6);
}
.container--xl { /* container con ancho máximo de +40% */
    max-width: calc( var(--max-width) * 1.4);
}

.container--xs { /* container con ancho máximo de 40% */
    max-width: calc( var(--max-width) * 0.4);
}

.container[data-position="left"], .container__inner[data-position="left"] { /* posicionar el container a la izquierda */
    margin: 0 auto 0 0
}
.container[data-position="right"], .container__inner[data-position="right"] { /* posicionar el container a la derecha */
    margin: 0 0 0 auto;
}

.container--box { /* container con fondo y padding */
    padding: var(--padding-h);
    background: var(--white-transparent);
}

.block {
    display: inline-block
}

/***************************
BUTTON
**************************/
.button {
    padding: 0.5em 1em;
    display: inline-flex;
    justify-content:center;
    align-items:center;
    text-decoration: none;
    border-radius: var(--radius1);
    margin: 0.25rem 0;
    opacity: 1;
    cursor: pointer;
    transition: opacity 300ms ease;
}
.button:hover {
    opacity: 0.8;
}

.button i:last-child {
    margin-left: 0.5rem;
    transition: transform 300ms ease;
}
.button:hover i:last-child{
    transform:translateX(0.25rem);
}

.button i:first-child {
    margin-right: 0.5rem;
}

a + .button,
.button + *{margin: 0.25rem}

.button:hover {
    opacity: 0.8;
}

.button i:last-child {
    margin-left: 0.5rem;
    transition: transform 300ms ease;
}
.button:hover i:last-child{
    transform:translateX(0.25rem);
}
.button:hover i:first-child:last-child{
    transform:translateX(0);
}
.button i:first-child {
    margin-right: 0.5rem;
}

.button.button--s {
     padding: 0.4rem 0.75rem;
     font-size:0.9rem;
     line-height:var(--line-height);
}
.button--s i:last-child {
    margin-left: 0.25rem;
}
.button--s i:first-child {
   margin-right: 0.25rem;
}
.button--xl {
     padding: 0.75rem 1.25rem;
     font-size:1.25rem;
}
.button--ico{
    padding:0;
    width:38px;
    height:38px;
    font-size:1.25rem;
	display:inline-flex;
	align-items:center;
	justify-content:center;
}
.button--ico.button--s{
    padding:0;
    width:28px;
    height:28px;
    font-size:1rem;
}
.button--ico i:first-child,.button--ico i:last-child{
    margin:0;
}
.button--ico span{
     display:none;
}

.button--white {
    color: #fff;
}
.button--primary {
    background: var(--primary);
    color: var(--primary-invert);
}

.button--secondary {
    background: var(--secondary);
    color: var(--secondary-invert);
}

.button--dark {
    background: var(--dark);
    color: var(--dark-invert);
}

.button--light {
    background: var(--light);
    color: var(--light-invert);
}

.button--outlined {
    border-width: 1px;
    border-style: solid;
    color: var(--secondary);
    padding: calc(0.5rem - 1px) 1rem;
}

.button--whatsapp {
    background: var(--color-wa);
    color: #fff;
}
.button--fb {
    background: var(--color-fb);
    color:#fff;
}
.button--ig {
    background: var(--color-ig);
    color: #fff;
}



/***************************
TEXTOS
**************************/
p {
    margin: 0 0 calc(1rem * var(--ratio));
}

p:last-child {
    margin-bottom: 0;
}

.blockquote {
    background-color: var(--light);
    border-left: 5px solid var(--primary);
    padding: 1.25em;
    margin: 0 0 1.25rem;
}
.blockquote:last-child {
    margin-bottom: 0;
}

/*
Titulos
*/
.title {
    
    line-height: 1.25em;
    margin: 0 0 0.5em;
    font-weight:var(--bold1);
}
.title--line{
    border-bottom:1px solid #ddd;
    padding-bottom:8px;
}
.title:last-child {
    margin:0;
}


.title--1{
    font-size: var(--font-l);
    color:var(--primary);
}
.title--2{
    font-size: var(--font-m);
}
.title--3{
    font-size: var(--font-s);
}
.title--4{
    font-size: var(--font-xs);
}

.family--primary {
    font-family: var(--font1);
    font-weight:var(--bold1);
}
.family--secondary {
    font-family: var(--font2);
    font-weight:var(--bold2);
}

.font--3xl {
    font-size: var(--font-3xl);
}
.font--xxl {
    font-size: var(--font-xxl);
}

.font--xl {
    font-size: var(--font-xl);
}

.font--l {
    font-size: var(--font-l);
}

.font--m {
    font-size: var(--font-m);
}

.font--s {
    font-size: var(--font-s);
}

.font--xs {
    font-size: var(--font-xs);
}

.font--center {
text-align:center;
}
.font--primary {
    color:var(--primary);
}
.font--secondary {
    color: var(--secondary);
}
.font--invert {
    color: var(--primary-invert);
}
.font--base {
    color: var(--font-color);
}

/***************************
LISTAS
**************************/
.list {
    list-style:none;
}
.list li:not(:last-child) {
    margin: 0 0 0.4rem;
}

/*
Lista contacto
*/
.list-contact {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
}

.list-contact__title {
    margin-bottom: 0.4rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.4rem;
    display:block;
}

.list-contact:not(:last-child) {
    margin: 0 0 1.25rem;
}

/*
Lista items
*/
.list-items {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

.list-items:not(:last-child) {
    margin: 0 0 1.25rem;
}

.list-items li {
    display: inline-flex;
    padding: 0.5rem 1rem;
    background: var(--primary);
    color: var(--primary-invert);
    border-radius: var(--radius1);
    margin: 0.2rem;
}
.list-items--light li {
    background: var(--light);
    color: var(--light-invert);
}

.list-items--dark li {
    background: var(--dark);
    color: var(--dark-invert);
}


/*
Lista puntos
*/
.list-points {
    padding-left: 1.25rem;
}

.list-points:not(:last-child) {
    margin: 0 0 1.25rem;
}

.list-points li:not(:last-child) {
    margin: 0 0 0.5rem;
}

.list-points ul {
    margin: 0 0 0 1.25rem;
    margin-top: 0.5rem;
}

.list-points--contact > li:not(:last-child) {
    margin: 0 0 1.25rem;
}

/*
Lista iconos
*/
.list-icons {
    margin: 0;
    list-style: none;
}

.list-icons:not(:last-child) {
    margin: 0 0 1.25rem;
}

.list-icons li {
    display: flex;
}

.list-icons li:not(:last-child) {
    margin: 0 0 0.5rem;
}

.list-icons:not(.list-icons--customize) li:before{
    content: '\f00c';
    font-family: var(--awesome);
    margin-right: 0.5rem;
    font-weight: 300;
    color: var(--primary);
}
.list-icons--customize li i:not(.fab):not(.fa-brands) {
    content: '\f00c';
    font-family: var(--awesome);
    margin-right: 0.5rem;
	line-height:var(--line-height);
    color: var(--primary);
}


.list-icons--inline {
    display: flex;
    flex-wrap: wrap;
    margin-left: -1rem;
}

.list-icons.list-icons--inline li {
    padding: 0.5rem 1rem;
    margin:0;
}

/*
Lista marcas
*/
.list-marcas {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    text-align: center;
    justify-content:center;
    font-size: var(--font-xs);
}
.list-marcas:not(:last-child) {
    margin: 0 0 1.25rem;
}

.list-marcas li {
    display: inline-flex;
    margin: 0.35rem;
    opacity:1;
    transition: opacity 300ms ease;
}

.list-marcas a {
    background: #fff;
    border: 1px solid #ddd;
    width: 100%;
    display: block;
    padding: 0.25rem;
    transition: border-color 300ms ease;
    text-decoration: none;
}

.list-marcas a span {
    display: inline-block;
    padding: 0.25rem 0.25rem 0;
}

.list-marcas li:hover {
   opacity:0.8;
}

.list-marcas img {
    display: block;
    width: 100%;
    max-width:140px;
}
/*
Lista números
*/
.list-numbers {
    list-style:none;
    counter-reset: section;
    display:grid;
    grid-template-columns:1fr;
    grid-gap:16px;
}

.list-numbers:not(:last-child) {
    margin: 0 0 1.8rem;
}
.list-numbers li {
    display:flex;
    align-items:center;
    text-align:left;
}
.list-numbers li:not(:last-child) {
    margin: 0 0 1.5rem;
}
.list-numbers li:before{
    counter-increment: section;
    content:counter(section);
    font-weight:var(--bold1);
    font-size:4rem;
    color:var(--primary);
    margin-right:0.75rem;
    line-height:0.8em;
}
@media screen and (min-width: 769px) {
    .list-numbers {
        grid-template-columns:1fr 1fr 1fr;
    }
}

/*
Lista timeline
*/
.list-timeline:not(:last-child) {
    margin: 0 0 1.8rem;
}
.list-timeline li {
    padding-bottom: 1.75rem;
    border-left: 1px solid var(--primary);
    position: relative;
    padding-left: 1.5rem;
    margin-left: 1rem;
    list-style: none;
}

.list-timeline li:before {
    content: "";
    width: 16px;
    height: 16px;
    background: #fff;
    border: 1px solid var(--primary);
    box-shadow: 3px 3px 0 var(--primary);
    border-radius: 50%;
    position: absolute;
    left: -9px;
    top: 0;
}
.list-timeline .title{
 margin:0 0 0.5em;
}

.list-timeline li:last-child {
    border: 0;
    padding-bottom: 0;
}


/***************************
IMAGENES
**************************/
.img-responsive {
    display: block;
    width: 100%;
}

.img-cover {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.img-contain {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/***************************
MAPA
**************************/
.mapa {
    height: 50vh;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f5f5f5;
}

.mapa iframe {
    width: 100%;
    display: block;
    flex: 1;
}

/***************************
FLECHA GO TOP
**************************/
.go-top {
    opacity: .8;
    cursor: pointer;
    z-index: 3;
    position: fixed;
    bottom: 8px;
    right: 8px;
    display: none;
    width: 38px;
    height: 38px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: var(--radius1);
    justify-content: center;
    align-items: center;
}

.go-top i {
    font-size: 26px;
    display: block;
}

/***************************
FORMULARIO
**************************/
.formulario {
    background: #f5f5f5;
    padding: 20px;
}

/***************************
IFRAMES
**************************/
.iframe {
    position: relative;
    padding-bottom: 56.25%;
    overflow: hidden;
}

.iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/***************************
GRID COLUMNS
**************************/
/* Columnas con grid, hay que especificar en el html las variables. style="--mobile: 2; --tablet: 4; --pc: 6" */
.grid-auto {
    --number: var(--mobile);
    display: grid;
    grid-template-columns: repeat(var(--number),1fr);
    --grid-gap:max(1rem, min(calc(2.5 * var(--padding-h) / var(--number)), var(--padding-h))) ;
    grid-gap: var(--grid-gap);
}
.grid-auto > * {
    display:flex;
    flex-direction:column;
}


/***************************
FLEX COLUMNS
**************************/
/* Columnas con grid, hay que especificar en el html las variables. style="--mobile: 2; --tablet: 4; --pc: 6" */
.flex-auto {
    --number: var(--mobile); 
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    --flex-gap:max(1rem, min(calc(2.5 * var(--padding-h) / var(--number)), var(--padding-h))) ;
    margin: calc((var(--flex-gap) * -1)/2);
}
.flex-auto > * {
    display: flex;
    flex-direction: column;
    
    width: calc(100% / var(--number));
    padding:calc(var(--flex-gap)/2);
}



/*******************************
GRID_MOSAICO - Grid con 3 elementos
*******************************/
.grid-mosaico {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    grid-gap: calc(var(--padding-h) / 2);
}
.grid-mosaico > * {
    display: flex;
    flex-direction: column;
}
.grid-mosaico > *[data-full-row-mv="true"]{
    grid-column:span 2;
}
/***************************
MAIN
**************************/
main {
}







/***************************
RESPONSIVE
**************************/

/* Móvil - Estilos desde 600 a 768 */
@media screen and (min-width: 600px) {

    /***************************
    GRID COLUMNS TABLET
    **************************/
    .grid-auto { --number: var(--tablet); }

    /***************************
    FLEX COLUMNS
    **************************/
    .flex-auto { --number: var(--tablet); }

    /*
    Lista contacto
    */
    .list-contact--double {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: var(--padding-h);
    }
}

/* Estilos superiores o igual a 769 */
@media screen and (min-width: 769px) {
    /************************
    GRID_MOSAICO 
    ************************/
    .grid-mosaico {
        display: grid;
        grid-template-columns: repeat(12, 1fr); /*grid-template-rows: repeat(8, 1fr);*/
        grid-gap: 16px;
    }


    /* 1 elementos */
    .grid-mosaico[data-items="1"] > * {
        grid-column-start: 1;
        grid-column-end: 13;
    }
    /* 2 elementos */
     .grid-mosaico[data-items="2"] > *:first-child,
    .grid-mosaico[data-items="2"] > *:nth-child(2n-1) {
        grid-column-start: 1;
        grid-column-end: 7;
    }


      .grid-mosaico[data-items="2"] > *:nth-child(2n) {
        grid-column-start: 7;
        grid-column-end: 13;
    }

    /* 3 elementos */
     .grid-mosaico[data-items="3"] > *:first-child,
    .grid-mosaico[data-items="3"] > *:nth-child(3n-2) {
        grid-column-start: 1;
        grid-column-end: 9;
        grid-row: span 2;

    }

     .grid-mosaico[data-items="3"] > *:nth-child(2),
    .grid-mosaico[data-items="3"] > *:nth-child(3n-1){
        grid-column-start: 9;
        grid-column-end: 13;
   
    }

      .grid-mosaico[data-items="3"] > *:nth-child(3n) {
        grid-column-start: 9;
        grid-column-end: 13;
      
    }
    .grid-mosaico[data-items="3"] > *:nth-child(6n-1){
        grid-column-start: 5;
        grid-column-end: 13;  
        grid-row: span 2;
    }
    .grid-mosaico[data-items="3"] > *:nth-child(6n),
    .grid-mosaico[data-items="3"] > *:nth-child(6n-2){
        grid-column-start: 1;
        grid-column-end: 5;  
        grid-row: span 1;
    }
 

    /* 4 elementos */
         .grid-mosaico[data-items="4"] > *:first-child,
    .grid-mosaico[data-items="4"] > *:nth-child(4n-3) {
        grid-column-start: 1;
        grid-column-end: 8;

    }

         .grid-mosaico[data-items="4"] > *:nth-child(2),
    .grid-mosaico[data-items="4"] > *:nth-child(4n-2) {
        grid-column-start: 8;
        grid-column-end: 13;

    }

         .grid-mosaico[data-items="4"] > *:nth-child(3),
    .grid-mosaico[data-items="4"] > *:nth-child(4n-1) {
        grid-column-start: 1;
        grid-column-end: 6;

    }

    .grid-mosaico[data-items="4"] > *:nth-child(4n) {
        grid-column-start: 6;
        grid-column-end: 13;

    }

    /* 5 elementos */
         .grid-mosaico[data-items="5"] > *:first-child,
    .grid-mosaico[data-items="5"] > *:nth-child(5n-4) {
        grid-column-start: 1;
        grid-column-end: 7;
   
    }

         .grid-mosaico[data-items="5"] > *:nth-child(2),
    .grid-mosaico[data-items="5"] > *:nth-child(5n-3) {
        grid-column-start: 7;
        grid-column-end: 13;

    }

         .grid-mosaico[data-items="5"] > *:nth-child(3),
    .grid-mosaico[data-items="5"] > *:nth-child(5n-2) {
        grid-column-start: 1;
        grid-column-end: 5;
 
    }

         .grid-mosaico[data-items="5"] > *:nth-child(4),
    .grid-mosaico[data-items="5"] > *:nth-child(5n-1) {
        grid-column-start: 5;
        grid-column-end: 9;
   
    }

    .grid-mosaico[data-items="5"] > *:nth-child(5n) {
        grid-column-start: 9;
        grid-column-end: 13;
   
    }

    /* 6 elementos */
         .grid-mosaico[data-items="6"] > *:first-child,
    .grid-mosaico[data-items="6"] > *:nth-child(6n-5) {
        grid-column-start: 1;
        grid-column-end: 9;
        grid-row: span 2;
 
    }

         .grid-mosaico[data-items="6"] > *:nth-child(2),
    .grid-mosaico[data-items="6"] > *:nth-child(6n-4) {
        grid-column-start: 9;
        grid-column-end: 13;

    }

         .grid-mosaico[data-items="6"] > *:nth-child(3),
    .grid-mosaico[data-items="6"] > *:nth-child(6n-3) {
        grid-column-start: 9;
        grid-column-end: 13;
 
    }

             .grid-mosaico[data-items="6"] > *:nth-child(4),
    .grid-mosaico[data-items="6"] > *:nth-child(6n-2) {
        grid-column-start: 1;
        grid-column-end: 5;
    
    }

               .grid-mosaico[data-items="6"] > *:nth-child(5),
    .grid-mosaico[data-items="6"] > *:nth-child(6n-1) {
            grid-column-start: 5;
        grid-column-end: 9;

    }

    .grid-mosaico[data-items="6"] > *:nth-child(6n) {
        grid-column-start: 9;
        grid-column-end: 13;


    }
        .grid-mosaico[data-items="6"] > *:nth-child(12n-4){
        grid-column-start: 5;
        grid-column-end: 13;  
        grid-row: span 2;
    }
    .grid-mosaico[data-items="6"] > *:nth-child(9n),
    .grid-mosaico[data-items="6"] > *:nth-child(12n-5){
        grid-column-start: 1;
        grid-column-end: 5;  
        grid-row: span 1;
    }
}


/* Tablet horizontal y pc small - Estilos desde 1024 a 1200 */
@media screen and (min-width: 1024px) {
    .columns{
        column-count:2;
        column-gap:30px;
        text-align:left;
    }
	
    /***************************
    GRID COLUMNS TABLET
    **************************/
    .grid-auto { --number: var(--pc); }

    /***************************
    FLEX COLUMNS
    **************************/
    .flex-auto { --number: var(--pc); }
}