/*

Id: pg-wc-19
Nombre: Wc19
Fecha: 04/03/25
Sistema: Site Mater
*/

@import 'ratio.css';

/***************************
VARIABLES
**************************/
:root {
    /*
Fuentes
*/
    --font-size: 1rem; /* tamaño base de la fuente */
    --line-height: 1.5; /* interlineado base de la fuente */
    --container-min: 360;
    --container-max: 1480;
    /*
Personalizables
*/
    --font-color: #222;
    --primary: #284595; /* colores */
    --primary-invert: #fff;
    --secondary: #e57b1f;
    #f5f5f5: #fff;
    --light: #F0F0F0;
    --light-invert: var(--font-color);
    --dark: #1b1b1b;
    --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 */
    --swiper-theme-color: var(--primary) !important;
    --bg-gradient: linear-gradient(rgba(245,245,245,1),rgba(245,245,245,0.2));
    --color-fb: #0865FE;
    --color-ig: #C536A4;
    --color-tw: #000;
    --color-wa: #1BD741;
    --radiusButton: 3px;
    --radiusBox: 6px;
    --radiusImg: 6px;
    --radius1: var(--radiusButton);
    --radius2: var(--radiusBox);
    --font1: 'Lato'; /* Fuente 1 */
    --font2: 'Lato'; /* Fuente 2 */
    --bold1: 700; /* Bold 1 */
    --bold2: 700; /* Bold 2 */
    --awesome: 'Font Awesome 6 Pro';
    --max-width: 1280px; /* Ancho máximo del container */
    --padding-h: clamp(1rem, 3vw, 3rem); /* padding horizontal de los section, se aumenta en los @media */
    --padding-v: clamp(3rem, 16vw, 7rem); /* padding vertical de los section, se aumenta en los @media*/
    --padding-inner: clamp(1rem, 6%, 2.5rem); /* 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 */
    --header-height: 0px; /* Altura de la cabecera */
}

@media screen and (min-width: 600px) {
    :root {
		--width-logo: 100px;
    }
}

@media screen and (min-width: 821px) {
    :root {
		--width-logo: 120px;
    }
}

@media screen and (min-width: 1200px) {
    :root {
        --width-logo: 140px;
    }
}

*, *: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;
}
/*************** Preloader ***************/
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    font-size: 3rem;
    color: var(--primary);
    opacity: 1;
    visibility: visible;
    transition: opacity 600ms ease-in-out, 600ms visibility 0ms ease-in-out;
}

#preloader svg {
    opacity: 0;
    fill: var(--primary);
    animation: 1000ms preloaderShow 2000ms forwards linear;
}

@keyframes preloaderShow {
    from {
        opacity: 0
    }

    to {
        opacity: 1;
    }
}


#preloader.hide {
    opacity: 0;
    visibility: hidden;
}
/***********************************************/
a {
    color: var(--primary);
}

b, strong {
    font-weight:var(--bold1);
}

a[href^="tel:"]:not([class]) { white-space: nowrap;
    color: currentColor;
    text-decoration: none;
}

html { 
    font-family:var(--font1);
    color: var(--font-color);
    font-size: var(--font-size);
    line-height: var(--line-height); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}

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

body.no-scroll {
    overflow: hidden;
}

/* Separacion pequeña entre bloques */
.sep-top{
    margin-top: min(var(--padding-v), 2rem);
}
.sep-bottom{
    margin-bottom: min(var(--padding-v), 2rem);
}

/***************************
404
**************************/
.error404{
    min-height:60vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}
.error404__title{
    font-size:clamp(120px,30vw, 300px);
    letter-spacing:12px;
    font-family: var(--font1);
    font-weight:var(--bold1);
    line-height:0.75em;
    margin:0;
    color:#D9D9D9;
}
.error404__container{
    background:#D9D9D9;
    padding:var(--padding-v) var(--padding-h);
    width:100%;
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
}

.error404 .title--1{
    color:#666;
    margin-bottom:1.75rem;
}
.error404 .button{
    background:#4d4d4d;
    color:#fff;
    font-weight:normal;
    padding:0.75rem 1.25rem;
    border-radius:4px;
    font-size: var(--font-s);
    min-width:140px;
}

/***************************
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%;
	width: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--s { /* Seccion con menos padding vertical */
    padding: min(var(--padding-v), 3rem) var(--padding-h);
}
.section > .section.container{
    border-radius:var(--radiusBox);
}
main > .section:first-child {
    padding-top: min(var(--padding-v), 3rem);
}
.section.section--gap-v { /* section con padding sólo vertical */
    padding: var(--padding-v) 0;
}
.section.section--gap-h { /* section con padding sólo horizontal */
    padding: 0 var(--padding-h);
}
.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--border, *:not(.galeria-portada):not(.portada) + .section--comp,  .section--comp:first-child{
	border-top:1px solid rgba(0,0,0,0.05);
}
.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.6);
    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.75);
}
.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.5);
}
.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 {
    position:relative;
    padding:0.6em 1.2em;
    display: inline-block;
    text-decoration: none;
    border-radius: var(--radiusButton);
    margin: 2px;
    vertical-align:middle;
    cursor: pointer;
    text-decoration: none;
    font-weight: var(--bold1);
    overflow:hidden;
}
.button > *{
    position:relative;
    z-index:1;
}

.button i{
    transition:transform 0.3s ease-out;
}
.button i:last-child {
    margin-left: 0.5em;
}
.button i:first-child {
    margin-right: 0.25em;
}

/* opacity */
.button--opacity{
    transition: opacity 0.3s ease-out;
}
.button--opacity:hover,
.button--opacity:active,
.button--opacity:focus{
    opacity:0.75;
}

/* icon translate */
.button:hover i:last-child,
.button:active i:last-child,
.button:focus i:last-child{
    transform:translateX(6px);
}

.button:hover i:first-child:last-child,
.button:active i:first-child:last-child,
.button:focus i:first-child:last-child{
    transform:translateX(0);
}
.button:hover i[class*="phone"], .button:hover i[class*="mobile"], .button:hover i[class*="brands"], .button:hover i[class*="envelope"],
.button:active i[class*="phone"], .button:active i[class*="mobile"], .button:active i[class*="brands"], .button:active i[class*="envelope"],
.button:focus i[class*="phone"], .button:focus i[class*="mobile"], .button:focus i[class*="brands"], .button:focus i[class*="envelope"]{
     transform: translateX(0);
    transform:rotateY(360deg);
}

/* button small */
.button.button--s {
     font-size:0.95rem;
     line-height:var(--line-height);
}

/* button big */
.button--xl {
     font-size:1.25rem;
     line-height:var(--line-height);
}

/* button ico */
.button--ico{
    padding:0;
    width:38px;
    height:38px;
    font-size:1.25rem;
	display:inline-flex;
	align-items:center;
	justify-content:center;
}
.button--ico i:first-child,
.button--ico i:last-child{
    margin:0;
}
.button.button--ico:hover i,
.button.button--ico:active i,
.button.button--ico:focus i{
     transform: translateX(0);
     transform:rotate(360deg);
}

/* button ico small */
.button--ico.button--s{
    padding:0;
    width:24px;
    height:24px;
    margin:0 0.5rem 0 0.25rem;
    line-height:var(--line-height);
    font-size:0.85em;
}
.button--ico span{
     display:none;
}



/* sweep to right */
.button--sweep-to-right::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.15);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.3s ease-out;
}
.button--sweep-to-right:hover::before,
.button--sweep-to-right:active::before,
.button--sweep-to-right:focus::before{
    transform: scaleX(1);
}


/* color white */
.button--white{
    color: #fff;
}

/* bg primary */
.button--primary {
    background: var(--primary);
    color: var(--primary-invert);
}

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

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

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

/* outlined border */
.button--outlined {
    box-shadow: inset 0 0 0 1px currentColor;
}

/* bg whatsapp */
.button--whatsapp {
    background: var(--color-wa);
    color: #fff;
}

/* bg facebook */
.button--fb {
    background: var(--color-fb);
    color:#fff;
}

/* bg instagram */
.button--ig {
    background: var(--color-ig);
    color: #fff;
}



/***************************
TEXTOS
**************************/
p {
    margin: 0 0 1.25rem;
}

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

.blockquote {
    color:var(--primary);
    font-weight:var(--bold1);
    font-style:italic;
    margin: 0 0 1.25rem;
    display:flex;
}

.blockquote .title {
margin:0 0 0.5rem;
}
.blockquote .title ~ p {
    color: var(--secondary);
}

.blockquote:before {
    content: '';
    width: 10%;
    height: 1px;
    background: var(--primary);
    display: block;
    margin-top: 10px;
    margin-right: 0.5rem;
    flex-shrink: 0;
}
.blockquote:last-child {
    margin-bottom: 0;
}

/*
Titulos
*/
.subtitle{
    font-weight:var(--bold2);
    letter-spacing:0.5px;
    text-transform:uppercase;
    font-size:0.95rem;
    line-height:1.25em;
    margin:0 0 0.5em;
}
.section:has(.title--1) .subtitle{
    color: var(--primary);
}
.section:has(.title--2) .subtitle{
    color: var(--secondary);
}
.title {
    font-family: var(--font2);
    line-height: 1.35em;
    margin: 0 0 0.75cap;
    font-weight: var(--bold2);
    text-wrap: balance;
    --font-size: calc(var(--min-size) * 1px + (var(--max-size) - var(--min-size)) * (100vw - var(--container-min) * 1px) / (var(--container-max) - var(--container-min)));
    font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}
.title:last-child {
    margin:0;
}

.section--primary .title--1:after,
.section--dark .title--1:after,
.section--secondary .title--1:after{
    background:currentColor;
}
.section--primary .title--1,
.section--primary .title--2,
.section--primary .title--3,
.section--primary .subtitle{color: var(--primary-invert);}
.section--dark .title--1,
.section--dark .title--2,
.section--dark .title--3,
.section--dark .subtitle{color: var(--dark-invert);}
.section--secondary .title--1,
.section--secondary .title--2,
.section--secondary .title--3,
.section--secondary .subtitle{color: var(--secondary-invert);}


.title--1 {
    --max-size: 36;
    --min-size: 28;
}

.title--2 {
    --max-size: 32;
    --min-size: 24;
}

.title--3 {
    --max-size: 24;
    --min-size: 22;
}

.title--4 {
    --max-size: 20;
    --min-size: 18;
}


.family--primary {
    font-family: var(--font1);
}

.family--secondary {
    font-family: var(--font2);
}

.font--xs, .font--s, .font--m, .font--l, .font--xl, .font--xxl, .font--3xl {
    --font-size: calc(var(--min-size) * 1px + (var(--max-size) - var(--min-size)) * (100vw - var(--container-min) * 1px) / (var(--container-max) - var(--container-min)));
    font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}

.font--3xl {
    --max-size: 60;
    --min-size: 48;
}

.font--xxl {
    --max-size: 48;
    --min-size: 40;
}

.font--xl {
    --max-size: 36;
    --min-size: 28;
}

.font--l {
    --max-size: 32;
    --min-size: 24;
}

.font--m {
    --max-size: 24;
    --min-size: 20;
}

.font--s {
    --max-size: 20;
    --min-size: 18;
}

.font--xs {
    --max-size: 14;
    --min-size: 12;
}

.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;
    font-weight:var(--bold1);
    display:block;
}

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

.list-contact li ul li {
    display: inline-block;
}

.list-contact li ul li:not(:first-child):not(:has(.button:not(.button--ico)))::before {
    content: '-';
    display: inline-block;
    margin: 0 4px;
}



    /*
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(--radiusBox);
        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.8rem;
    }

    .list-icons:not(.list-icons--customize) li:before {
        content: '\f00c';
        font-family: var(--awesome);
        margin-right: 0.5rem;
        font-weight: 600;
        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;
        gap: 0.5rem;
        justify-content: center;
        flex-wrap: wrap;
        list-style: none;
        text-align: center;
        font-size: 0.9rem;
        line-height: 1.25em;
    }

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

    .list-marcas li {
        background: #fff;
        border: 1px solid rgba(0,0,0,0.1);
        width: 100%;
        display: block;
        width: calc(50% - 0.5rem);
        padding: 0.25rem;
        max-width: 200px;
        transition: border-color 300ms ease;
    }

    .list-marcas li a {
        text-decoration: none;
        color: inherit;
        display: block;
    }


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

    .list-marcas li:has(a):hover {
        border: 1px solid rgba(0,0,0,0.5);
    }

    .list-marcas img {
        display: block;
        aspect-ratio: 1;
        background: #fff;
        width: 100%;
        object-fit: contain;
        padding: 12px;
    }

    @media screen and (min-width: 601px) {
        .list-marcas li {
            width: calc(25% - 0.5rem);
        }
    }

    @media screen and (min-width: 821px) {
        .list-marcas li {
            width: calc(20% - 0.5rem);
        }


    }

    /*
Lista números
*/
    .list-numbers {
        list-style: none;
        counter-reset: section;
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: var(--padding-h);
    }

    .list-numbers li {
        display: flex;
        text-align: left;
        margin: 0;
    }

    .list-numbers li .title {
        padding-bottom: 0.25em;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }

    .list-numbers li:before {
        min-width: 38px;
        counter-increment: section;
        content: counter(section);
        font-weight: var(--bold1);
        font-size: 4rem;
        color: var(--primary);
        margin-right: 1rem;
        line-height: 1em;
    }

    @media screen and (min-width: 821px) {
        .list-numbers {
            grid-template-columns: 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;
    }

    /*
Lista cajas
*/
    .list-box {
        --number: var(--mobile);
        display: grid;
        grid-template-columns: repeat(var(--number), 1fr);
        --list-gap: max(1rem, min(calc(2.5 * var(--padding-h) / var(--number)), var(--padding-h)));
        grid-gap: var(--list-gap);
    }

    .list-box:not(:last-child) {
        margin: 0 0 1.8rem;
    }

    .list-box li {
        list-style: none;
        padding: var(--padding-inner);
    }

    .list-box li:nth-child(2n+1) {
        background: var(--primary);
        color: var(--primary-invert);
    }

    .list-box li:nth-child(2n) {
        background: var(--secondary);
        color: var(--secondary-invert);
    }

    @media screen and (min-width: 600px) {
        .list-box {
            --number: var(--tablet);
            grid-template-columns: repeat(var(--tablet), 1fr);
        }
    }

    @media screen and (min-width: 1024px) {
        .list-box {
            --number: var(--pc);
            grid-template-columns: repeat(var(--pc), 1fr);
        }
    }

    /***************************
IMAGENES
**************************/
    .img-responsive {
        display: block;
        width: 100%;
        border-radius: var(--radiusImg);
    }

    .img-cover {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: var(--radiusImg);
    }

    .img-contain {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: var(--radiusImg);
    }

    /***************************
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: 2;
        position: fixed;
        bottom: 8px;
        right: 8px;
        display: none;
        width: 42px;
        height: 42px;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.8);
        color: white;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
    }

    .go-top i {
        font-size: 24px;
        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:not(:first-child) {
        margin-top: min(var(--padding-h), 2rem);
    }

    .grid-auto:not(:last-child) {
        margin-bottom: min(var(--padding-h), 2rem);
    }

    .grid-auto {
        --number: var(--mobile);
        display: grid;
        grid-template-columns: repeat(var(--number),1fr);
        --grid-gap: clamp(1.5rem, calc(4vw / var(--number)), calc(var(--padding-h) * 0.75));
        grid-gap: var(--grid-gap);
    }

    @supports not (padding: clamp(1rem, 1vw, 1rem)) {
        .grid-auto {
            --grid-gap: max(1.5rem, min(calc(4vw / var(--number)), calc(var(--padding-h) * 0.75)))
        }
    }

    .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:not(:first-child) {
        margin-top: min(var(--padding-h), 2rem);
    }

    .flex-auto:not(:last-child) {
        margin-bottom: min(var(--padding-h), 2rem);
    }

    .flex-auto {
        --number: var(--mobile);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        --flex-gap: clamp(1.5rem, calc(4vw / var(--number)), calc(var(--padding-h) * 0.75));
        gap: var(--flex-gap);
    }

    @supports not (padding: clamp(1rem, 1vw, 1rem)) {
        .flex-auto {
            --flex-gap: max(1.5rem, min(calc(4vw / var(--number)), calc(var(--padding-h) * 0.75)))
        }
    }

    .flex-auto > * {
        display: flex;
        flex-direction: column;
        width: calc((100% / var(--number)) - (var(--flex-gap)  / var(--number) * (var(--number) - 1) ));
    }

    /************************
GRID_MOSAICO
************************/
    .grid-mosaico {
        --gap: 0.75rem;
        display: grid;
        grid-gap: var(--gap);
    }

    .grid-mosaico > * {
        display: flex;
        flex-direction: column;
    }

    .grid-mosaico[data-type="text"] {
        --gap: 1.5rem;
    }

    .grid-mosaico[data-type="image"] {
    }

    @media screen and (max-width: 600px) {
        .grid-mosaico[data-type="text"] {
            grid-template-columns: repeat(2, 1fr);
        }

        main .section .grid-mosaico[data-type="text"] > *[data-full-row-mv="true"],
        main .section .grid-mosaico[data-type="text"] > * {
            grid-column: span 2;
            grid-row: auto;
        }
    }


    .grid-mosaico {
        grid-template-columns: repeat(12, 1fr);
    }
    /* 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: 9;
    }

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

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

    .grid-mosaico[data-items="2"] > *:nth-child(4n) {
        grid-column-start: 5;
        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;
    }

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

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

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

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

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

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

    /* 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: 6;
        grid-column-end: 13;
        grid-row: 2;
    }

    .grid-mosaico[data-items="4"] > *:nth-child(4n) {
        grid-column-start: 1;
        grid-column-end: 6;
        grid-row: 2;
    }
    /* 4B elementos */
    /****************/
    @media screen and (max-width: 820px) {
        .grid-mosaico[data-items="4b"] {
            grid-template-columns: repeat(2, 1fr);
        }

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

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

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

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

    @media screen and (min-width: 821px) {
        .grid-mosaico[data-items="4b"] > *:first-child, .grid-mosaico[data-items="4b"] > *:nth-child(4n-3) {
            grid-column-start: 1;
            grid-column-end: 5;
        }

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

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

        .grid-mosaico[data-items="4b"] > *:nth-child(4n) {
            grid-column-start: 1;
            grid-column-end: 9;
        }
    }
    /* 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;
    }
    /* 5b elementos */
    /****************/
    .grid-mosaico[data-items="5b"] > *:first-child, .grid-mosaico[data-items="5b"] > *:nth-child(3n-2) {
        grid-column-start: 1;
        grid-column-end: 9;
        grid-row: span 2;
    }

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

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

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

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


    @media screen and (min-width: 821px) {
        .grid-mosaico[data-items="5b"] > *:first-child, .grid-mosaico[data-items="5b"] > *:nth-child(5n-4) {
            grid-column-start: 1;
            grid-column-end: 7;
            grid-row: span 2;
        }

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

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

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

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

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

        .grid-mosaico[data-items="5b"] > *:nth-child(10n-3) {
            grid-column-start: 4;
            grid-column-end: 7;
        }

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

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

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


    /* 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;
    }
    /* 6b elementos */
    /****************/
    .grid-mosaico[data-items="6b"] > *:first-child, .grid-mosaico[data-items="6b"] > *:nth-child(6n+1) {
        grid-column-start: 1;
        grid-column-end: 8;
        grid-row: span 2;
    }

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

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

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

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

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


    @media screen and (min-width: 821px) {
        .grid-mosaico[data-items="6b"] > *:first-child, .grid-mosaico[data-items="6b"] > *:nth-child(6n+1) {
            grid-column-start: 1;
            grid-column-end: 7;
            grid-row: span 2;
        }

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

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

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

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

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

    /***************************
MAIN
**************************/
    main {
        min-height: 50vh;
    }






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

    /* Estilos >= 600px */
    @media screen and (min-width: 600px) {
        .columns {
            column-count: 2;
            column-gap: 30px;
            text-align: left;
        }
        /***************************
    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 >= 1024px */
    @media screen and (min-width: 1024px) {

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

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


    /* Estilos >= 1280px */
    @media screen and (min-width: 1280px) {

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

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