/*

Id: pg-wc-10
Nombre: Wc10
Fecha: 07/05/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: 1280;
    /*
Personalizables
*/
    --font-color: #222;
    --primary: #96a273; /* colores */
    --primary-invert: #fff;
    --secondary: #000;
    --secondary-invert: #fff;
    --light: #f5f5f5;
    --light-invert: var(--font-color);
    --dark: #000;
    --dark-invert: #fff;
    --dark-transparent: rgba(0,0,0,0.8); /* color negro transparente */
    --white-transparent: rgba(255,255,255,0.92); /* color blanco transparente */
    --swiper-theme-color: var(--primary) !important;
    --bg-gradient: radial-gradient(circle, rgba(238,242,243,1) 0%, rgba(238,238,238,1) 50%, rgba(179,193,204,1) 100%);
    --color-fb: #0865FE;
    --color-ig: #C536A4;
    --color-tw: #0F1419;
    --color-wa: #1BD741;
    --radiusButton: 0px;
    --radiusBox: 0px;
    --radiusImg: 0px;
    --radius1: 0px;
    --radius2: var(--radiusBox);
    --font1: 'Raleway'; /* Fuente 1 */
    --font2: 'Raleway'; /* Fuente 2 */
    --bold1: 600; /* Bold 1 */
    --bold2: 400; /* Bold 2 */
    --awesome: 'Font Awesome 6 Pro';
    --max-width: 1380px; /* 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 */
    --height-preheader: 0px; /* Altura de la precabecera */
}

@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), 1.5rem);
}
.sep-bottom{
    margin-bottom: min(var(--padding-v), 1.5rem);
}

/***************************
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.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 {
    position:relative;
    padding:0.6em 1.25em;
    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.9rem;
     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.9rem;
}
.button--ico span{
     display:none;
}

/* shutter to horizontal */
.button--shutter-horizontal {
    transition: color 0.3s ease-out;
}
.button--shutter-horizontal::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height:100%;
    margin:0 auto;
    width:0%;
    background: rgba(0,0,0,0.15);
    transition: width 0.3s ease-out;
}

.button--shutter-horizontal:hover::before,
.button--shutter-horizontal:active::before,
.button--shutter-horizontal:focus::before {
    width:100%;
}
/* opacity */
.button--opacity{
    transition: opacity 0.3s ease-out;
}
.button--opacity:hover,
.button--opacity:active
.button--opacity:focus{
    opacity:0.75;
}

.button--white.button--shutter-horizontal::before {
    background:var(--primary);
}
.button--white.button--shutter-horizontal:hover,
.button--white.button--shutter-horizontal:active,
.button--white.button--shutter-horizontal:focus {
    color:var(--primary-invert);
}
/* 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;
    background:none;
}

/* 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: 60px;
    height: 1px;
    background: var(--primary);
    display: block;
    margin-top: 10px;
    margin-right: 0.5rem;
    flex-shrink: 0;
}
.blockquote:last-child {
    margin-bottom: 0;
}

/*
Titulos
*/
.title {
    line-height: 1.25em;
    margin: 0 0 0.75cap;
    font-family: var(--font2);
    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);
}

.subtitle{
    font-weight:var(--bold1);
    letter-spacing:0.5px;
    text-transform:uppercase;
    font-size:0.95rem;
    line-height:1.25em;
    margin:0 0 0.5em;
    color:var(--primary);
}

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

.title:last-child {
    margin:0;
}


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

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

.title--3 {
    --max-size: 24;
    --min-size: 22;
    font-family: var(--font1);
    font-weight: var(--bold1);
}

.title--4 {
    --max-size: 20;
    --min-size: 18;
    font-family: var(--font1);
    font-weight: var(--bold1);
}

.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: 36;
}

.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: '\f054';
    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 {
    margin-top:2rem;
    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);
}

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

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

/***************************
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: 4px;
    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: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);
}


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


/***************************
FLEX COLUMNS
**************************/
/* Columnas con flex, 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);
}

.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;
    }
}

.grid-mosaico > * > div{
flex:1;display:flex; flex-direction:column;}
/***************************
MAIN
**************************/
main {
    min-height:50vh;
}








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

/* Estilos >= 600px */
@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 >= 1024px */
@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); }
}


/* 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)); }
}