@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
--color-principal: #159b48;
--color-principal-2: #d6f5e2;

--amarillo: #d4af37;
--amarillo-2: #feebac;
--amarillo-3: #fdf7e3;
--amarillo-4: #423304;
--amarillo-rgb: 212,175,55,100;
--amarillo-rgb-2: 254,235,172,100;
--amarillo-rgb-3: 253,247,227,100;
--amarillo-rgb-4: 66,51,4,100;

--azul: #001e64;
--azul-2: #638AE6;
--azul-3: #87ABFF;
--azul-4: #000c26;
--azul-rgb: 0,30,100,100;
--azul-rgb-2: 99,138,230,100;
--azul-rgb-3: 135,171,255,100;
--azul-rgb-4: 0,12,38,100;

--beige: #675446;
--beige-2: #e6d9d0;
--beige-3: #f4eae8;
--beige-4: #392a1f;
--beige-rgb: 103,84,70,100;
--beige-rgb-2: 230,217,208,100;
--beige-rgb-3: 244,234,232,100;
--beige-rgb-4: 57,42,31,100;

--celeste: #00A2FF;
--celeste-2: #77bfe9;
--celeste-3: #d7ecf8;
--celeste-4: #1D4861;
--celeste-rgb: 0,162,255,100;
--celeste-rgb-2: 119,191,233,100;
--celeste-rgb-3: 215,236,248,100;
--celeste-rgb-4: 29,72,97,100;

--gris: #525458;
--gris-2: #aaaeb6;
--gris-3: #e4e8f1;
--gris-4: #242527;
--gris-rgb: 82,84,88,100;
--gris-rgb-2: 170,174,182,100;
--gris-rgb-3: 228,232,241,100;
--gris-rgb-4: 36,37,39,100;

--naranja: #FF5F0D;
--naranja-2: #ebba74;
--naranja-3: #f8e8d0;
--naranja-4: #401703;
--naranja-rgb: 255,95,13,100;
--naranja-rgb-2: 235,186,116,100;
--naranja-rgb-3: 248,232,208,100;
--naranja-rgb-4: 64,23,3,100;

--negro: #000000;
--negro-2: #c8c8c8;
--negro-3: #f6f6f6;
--negro-4: #323232;
--negro-rgb: 0,0,0,100;
--negro-rgb-2: 200,200,200,100;
--negro-rgb-3: 246,246,246,100;
--negro-rgb-4: 50,50,50,100;

--rojo: #640000;
--rojo-2: #FAACAC;
--rojo-3: #f7e7e7;
--rojo-4: #330000;
--rojo-rgb: 100,0,0,100;
--rojo-rgb-2: 250,172,172,100;
--rojo-rgb-3: 247,231,231,100;
--rojo-rgb-4: 51,0,0,100;

--rosa: #891860;
--rosa-2: #d47ebf;
--rosa-3: #f5bbe7;
--rosa-4: #57103D;
--rosa-rgb: 137,24,96,100;
--rosa-rgb-2: 212,126,191,100;
--rosa-rgb-3: 245,187,231,100;
--rosa-rgb-4: 87,16,61,100;

--verde: #32612d;
--verde-2: #b2d3c2;
--verde-3: #e7fff3;
--verde-4: #183715;
--verde-rgb: 50,97,45,100;
--verde-rgb-2: 178,211,194,100;
--verde-rgb-3: 231,255,243,100;
--verde-rgb-4: 24,55,21,100;

--violeta: #400078;
--violeta-2: #ad9fd4;
--violeta-3: #d1cfdd;
--violeta-4: #2b2144;
--violeta-rgb: 64,0,120,100;
--violeta-rgb-2: 173,159,212,100;
--violeta-rgb-3: 209,207,221,100;
--violeta-rgb-4: 43,33,68,100;
}


section {margin: 0; padding: 0;}
body {margin: 0 !important; padding: 0 !important; overflow-x: hidden;}


/**********************************************************************************/
/************************************* COLORES ************************************/
/**********************************************************************************/
.principal {color: var(--color-principal) !important;}
.principal-2 {color: var(--color-principal-2) !important;}

.amarillo {color: var(--amarillo) !important;}
.amarillo-2 {color: var(--amarillo-2) !important;}
.amarillo-3 {color: var(--amarillo-3) !important;}
.amarillo-4 {color: var(--amarillo-4) !important;}

.azul {color: var(--azul) !important;}
.azul-2 {color: var(--azul-2) !important;}
.azul-3 {color: var(--azul-3) !important;}
.azul-4 {color: var(--azul-4) !important;}

.beige {color: var(--beige) !important;}
.beige-2 {color: var(--beige-2) !important;}
.beige-3 {color: var(--beige-3) !important;}
.beige-4 {color: var(--beige-4) !important;}

.celeste {color: var(--celeste) !important;}
.celeste-2 {color: var(--celeste-2) !important;}
.celeste-3 {color: var(--celeste-3) !important;}
.celeste-4 {color: var(--celeste-4) !important;}

.gris {color: var(--gris) !important;}
.gris-2 {color: var(--gris-2) !important;}
.gris-3 {color: var(--gris-3) !important;}
.gris-4 {color: var(--gris-4) !important;}

.naranja {color: var(--naranja) !important;}
.naranja-2 {color: var(--naranja-2) !important;}
.naranja-3 {color: var(--naranja-3) !important;}
.naranja-4 {color: var(--naranja-4) !important;}

.negro {color: var(--negro) !important;}
.negro-2 {color: var(--negro-2) !important;}
.negro-3 {color: var(--negro-3) !important;}
.negro-4 {color: var(--negro-4) !important;}

.rojo {color: var(--rojo) !important;}
.rojo-2 {color: var(--rojo-2) !important;}
.rojo-3 {color: var(--rojo-3) !important;}
.rojo-4 {color: var(--rojo-4) !important;}

.rosa {color: var(--rosa) !important;}
.rosa-2 {color: var(--rosa-2) !important;}
.rosa-3 {color: var(--rosa-3) !important;}
.rosa-4 {color: var(--rosa-4) !important;}

.verde {color: var(--verde) !important;}
.verde-2 {color: var(--verde-2) !important;}
.verde-3 {color: var(--verde-3) !important;}
.verde-4 {color: var(--verde-4) !important;}

.violeta {color: var(--violeta) !important;}
.violeta-2 {color: var(--violeta-2) !important;}
.violeta-3 {color: var(--violeta-3) !important;}
.violeta-4 {color: var(--violeta-4) !important;}

/************************* COLORES DE FONDO ************************/

.bg-principal {background: var(--color-principal) !important;}
.bg-principal-2 {background: var(--color-principal-2) !important;}

.bg-amarillo {background: var(--amarillo) !important;}
.bg-amarillo-2 {background: var(--amarillo-2) !important;}
.bg-amarillo-3 {background: var(--amarillo-3) !important;}
.bg-amarillo-4 {background: var(--amarillo-4) !important;}
.bg-amarillo-5 {background: rgba(var(--amarillo-rgb-2));background: linear-gradient(0deg, rgba(var(--amarillo-rgb-2)) 0%, rgba(var(--amarillo-rgb-3)) 100%); !important;}

.bg-azul {background: var(--azul) !important;}
.bg-azul-2 {background: var(--azul-2) !important;}
.bg-azul-3 {background: var(--azul-3) !important;}
.bg-azul-4 {background: var(--azul-4) !important;}
.bg-azul-5 {background: rgba(var(--azul-rgb-2));background: linear-gradient(0deg, rgba(var(--azul-rgb-2)) 0%, rgba(var(--azul-rgb-3)) 100%); !important;}

.bg-beige {background: var(--beige) !important;}
.bg-beige-2 {background: var(--beige-2) !important;}
.bg-beige-3 {background: var(--beige-3) !important;}
.bg-beige-4 {background: var(--beige-4) !important;}
.bg-beige-5 {background: rgba(var(--beige-rgb-2));background: linear-gradient(0deg, rgba(var(--beige-rgb-2)) 0%, rgba(var(--beige-rgb-3)) 100%); !important;}

.bg-celeste {background: var(--celeste) !important;}
.bg-celeste-2 {background: var(--celeste-2) !important;}
.bg-celeste-3 {background: var(--celeste-3) !important;}
.bg-celeste-4 {background: var(--celeste-4) !important;}
.bg-celeste-5 {background: rgba(var(--celeste-rgb-2));background: linear-gradient(0deg, rgba(var(--celeste-rgb-2)) 0%, rgba(var(--celeste-rgb-3)) 100%); !important;}

.bg-gris {background: var(--gris) !important;}
.bg-gris-2 {background: var(--gris-2) !important;}
.bg-gris-3 {background: var(--gris-3) !important;}
.bg-gris-4 {background: var(--gris-4) !important;}
.bg-gris-5 {background: rgba(var(--gris-rgb-2));background: linear-gradient(0deg, rgba(var(--gris-rgb-2)) 0%, rgba(var(--gris-rgb-3)) 100%); !important;}

.bg-naranja {background: var(--naranja) !important;}
.bg-naranja-2 {background: var(--naranja-2) !important;}
.bg-naranja-3 {background: var(--naranja-3) !important;}
.bg-naranja-4 {background: var(--naranja-4) !important;}
.bg-naranja-5 {background: rgba(var(--naranja-rgb-2));background: linear-gradient(0deg, rgba(var(--naranja-rgb-2)) 0%, rgba(var(--naranja-rgb-3)) 100%); !important;}

.bg-negro {background: var(--negro) !important;}
.bg-negro-2 {background: var(--negro-2) !important;}
.bg-negro-3 {background: var(--negro-3) !important;}
.bg-negro-4 {background: var(--negro-4) !important;}
.bg-negro-5 {background: rgba(var(--negro-rgb-2));background: linear-gradient(0deg, rgba(var(--negro-rgb-2)) 0%, rgba(var(--negro-rgb-3)) 100%); !important;}

.bg-rojo {background: var(--rojo) !important;}
.bg-rojo-2 {background: var(--rojo-2) !important;}
.bg-rojo-3 {background: var(--rojo-3) !important;}
.bg-rojo-4 {background: var(--rojo-4) !important;}
.bg-rojo-5 {background: rgba(var(--rojo-rgb-2));background: linear-gradient(0deg, rgba(var(--rojo-rgb-2)) 0%, rgba(var(--rojo-rgb-3)) 100%); !important;}

.bg-rosa {background: var(--rosa) !important;}
.bg-rosa-2 {background: var(--rosa-2) !important;}
.bg-rosa-3 {background: var(--rosa-3) !important;}
.bg-rosa-4 {background: var(--rosa-4) !important;}
.bg-rosa-5 {background: rgba(var(--rosa-rgb-2));background: linear-gradient(0deg, rgba(var(--rosa-rgb-2)) 0%, rgba(var(--rosa-rgb-3)) 100%); !important;}

.bg-verde {background: var(--verde) !important;}
.bg-verde-2 {background: var(--verde-2) !important;}
.bg-verde-3 {background: var(--verde-3) !important;}
.bg-verde-4 {background: var(--verde-4) !important;}
.bg-verde-5 {background: rgba(var(--verde-rgb-2));background: linear-gradient(0deg, rgba(var(--verde-rgb-2)) 0%, rgba(var(--verde-rgb-3)) 100%); !important;}

.bg-violeta {background: var(--violeta) !important;}
.bg-violeta-2 {background: var(--violeta-2) !important;}
.bg-violeta-3 {background: var(--violeta-3) !important;}
.bg-violeta-4 {background: var(--violeta-4) !important;}
.bg-violeta-5 {background: rgba(var(--violeta-rgb-2));background: linear-gradient(0deg, rgba(var(--violeta-rgb-2)) 0%, rgba(var(--violeta-rgb-3)) 100%); !important;}


.bg-2-amarillo div:nth-child(4n+4), .bg-2-amarillo div:nth-child(4n+3) {background: var(--amarillo-3) !important;}
.bg-2-amarillo div:nth-child(4n+2), .bg-2-amarillo div:nth-child(4n+1) {background: var(--amarillo-2) !important;}

.bg-3-amarillo div:nth-child(6n+6), .bg-3-amarillo div:nth-child(6n+5), .bg-3-amarillo div:nth-child(6n+4) {background: var(--amarillo-3) !important;}
.bg-3-amarillo div:nth-child(6n+3), .bg-3-amarillo div:nth-child(6n+2), .bg-3-amarillo div:nth-child(6n+1) {background: var(--amarillo-2) !important;}

.bg-4-amarillo div:nth-child(8n+8), .bg-4-amarillo div:nth-child(8n+7), .bg-4-amarillo div:nth-child(8n+6), .bg-4-amarillo div:nth-child(8n+5) {background: var(--amarillo-3) !important;}
.bg-4-amarillo div:nth-child(8n+4), .bg-4-amarillo div:nth-child(8n+3), .bg-4-amarillo div:nth-child(8n+2), .bg-4-amarillo div:nth-child(8n+1) {background: var(--amarillo-2) !important;}


.bg-2-azul div:nth-child(4n+4), .bg-2-azul div:nth-child(4n+3) {background: var(--azul-3) !important;}
.bg-2-azul div:nth-child(4n+2), .bg-2-azul div:nth-child(4n+1) {background: var(--azul-2) !important;}

.bg-3-azul div:nth-child(6n+6), .bg-3-azul div:nth-child(6n+5), .bg-3-azul div:nth-child(6n+4) {background: var(--azul-3) !important;}
.bg-3-azul div:nth-child(6n+3), .bg-3-azul div:nth-child(6n+2), .bg-3-azul div:nth-child(6n+1) {background: var(--azul-2) !important;}

.bg-4-azul div:nth-child(8n+8), .bg-4-azul div:nth-child(8n+7), .bg-4-azul div:nth-child(8n+6), .bg-4-azul div:nth-child(8n+5) {background: var(--azul-3) !important;}
.bg-4-azul div:nth-child(8n+4), .bg-4-azul div:nth-child(8n+3), .bg-4-azul div:nth-child(8n+2), .bg-4-azul div:nth-child(8n+1) {background: var(--azul-2) !important;}


.bg-2-beige div:nth-child(4n+4), .bg-2-beige div:nth-child(4n+3) {background: var(--beige-3) !important;}
.bg-2-beige div:nth-child(4n+2), .bg-2-beige div:nth-child(4n+1) {background: var(--beige-2) !important;}

.bg-3-beige div:nth-child(6n+6), .bg-3-beige div:nth-child(6n+5), .bg-3-beige div:nth-child(6n+4) {background: var(--beige-3) !important;}
.bg-3-beige div:nth-child(6n+3), .bg-3-beige div:nth-child(6n+2), .bg-3-beige div:nth-child(6n+1) {background: var(--beige-2) !important;}

.bg-4-beige div:nth-child(8n+8), .bg-4-beige div:nth-child(8n+7), .bg-4-beige div:nth-child(8n+6), .bg-4-beige div:nth-child(8n+5) {background: var(--beige-3) !important;}
.bg-4-beige div:nth-child(8n+4), .bg-4-beige div:nth-child(8n+3), .bg-4-beige div:nth-child(8n+2), .bg-4-beige div:nth-child(8n+1) {background: var(--beige-2) !important;}


.bg-2-celeste div:nth-child(4n+4), .bg-2-celeste div:nth-child(4n+3) {background: var(--celeste-3) !important;}
.bg-2-celeste div:nth-child(4n+2), .bg-2-celeste div:nth-child(4n+1) {background: var(--celeste-2) !important;}

.bg-3-celeste div:nth-child(6n+6), .bg-3-celeste div:nth-child(6n+5), .bg-3-celeste div:nth-child(6n+4) {background: var(--celeste-3) !important;}
.bg-3-celeste div:nth-child(6n+3), .bg-3-celeste div:nth-child(6n+2), .bg-3-celeste div:nth-child(6n+1) {background: var(--celeste-2) !important;}

.bg-4-celeste div:nth-child(8n+8), .bg-4-celeste div:nth-child(8n+7), .bg-4-celeste div:nth-child(8n+6), .bg-4-celeste div:nth-child(8n+5) {background: var(--celeste-3) !important;}
.bg-4-celeste div:nth-child(8n+4), .bg-4-celeste div:nth-child(8n+3), .bg-4-celeste div:nth-child(8n+2), .bg-4-celeste div:nth-child(8n+1) {background: var(--celeste-2) !important;}


.bg-2-gris div:nth-child(4n+4), .bg-2-gris div:nth-child(4n+3) {background: var(--gris-3) !important;}
.bg-2-gris div:nth-child(4n+2), .bg-2-gris div:nth-child(4n+1) {background: var(--gris-2) !important;}

.bg-3-gris div:nth-child(6n+6), .bg-3-gris div:nth-child(6n+5), .bg-3-gris div:nth-child(6n+4) {background: var(--gris-3) !important;}
.bg-3-gris div:nth-child(6n+3), .bg-3-gris div:nth-child(6n+2), .bg-3-gris div:nth-child(6n+1) {background: var(--gris-2) !important;}

.bg-4-gris div:nth-child(8n+8), .bg-4-gris div:nth-child(8n+7), .bg-4-gris div:nth-child(8n+6), .bg-4-gris div:nth-child(8n+5) {background: var(--gris-3) !important;}
.bg-4-gris div:nth-child(8n+4), .bg-4-gris div:nth-child(8n+3), .bg-4-gris div:nth-child(8n+2), .bg-4-gris div:nth-child(8n+1) {background: var(--gris-2) !important;}


.bg-2-naranja div:nth-child(4n+4), .bg-2-naranja div:nth-child(4n+3) {background: var(--naranja-3) !important;}
.bg-2-naranja div:nth-child(4n+2), .bg-2-naranja div:nth-child(4n+1) {background: var(--naranja-2) !important;}

.bg-3-naranja div:nth-child(6n+6), .bg-3-naranja div:nth-child(6n+5), .bg-3-naranja div:nth-child(6n+4) {background: var(--naranja-3) !important;}
.bg-3-naranja div:nth-child(6n+3), .bg-3-naranja div:nth-child(6n+2), .bg-3-naranja div:nth-child(6n+1) {background: var(--naranja-2) !important;}

.bg-4-naranja div:nth-child(8n+8), .bg-4-naranja div:nth-child(8n+7), .bg-4-naranja div:nth-child(8n+6), .bg-4-naranja div:nth-child(8n+5) {background: var(--naranja-3) !important;}
.bg-4-naranja div:nth-child(8n+4), .bg-4-naranja div:nth-child(8n+3), .bg-4-naranja div:nth-child(8n+2), .bg-4-naranja div:nth-child(8n+1) {background: var(--naranja-2) !important;}


.bg-2-negro div:nth-child(4n+4), .bg-2-negro div:nth-child(4n+3) {background: var(--negro-3) !important;}
.bg-2-negro div:nth-child(4n+2), .bg-2-negro div:nth-child(4n+1) {background: var(--negro-2) !important;}

.bg-3-negro div:nth-child(6n+6), .bg-3-negro div:nth-child(6n+5), .bg-3-negro div:nth-child(6n+4) {background: var(--negro-3) !important;}
.bg-3-negro div:nth-child(6n+3), .bg-3-negro div:nth-child(6n+2), .bg-3-negro div:nth-child(6n+1) {background: var(--negro-2) !important;}

.bg-4-negro div:nth-child(8n+8), .bg-4-negro div:nth-child(8n+7), .bg-4-negro div:nth-child(8n+6), .bg-4-negro div:nth-child(8n+5) {background: var(--negro-3) !important;}
.bg-4-negro div:nth-child(8n+4), .bg-4-negro div:nth-child(8n+3), .bg-4-negro div:nth-child(8n+2), .bg-4-negro div:nth-child(8n+1) {background: var(--negro-2) !important;}


.bg-2-rojo div:nth-child(4n+4), .bg-2-rojo div:nth-child(4n+3) {background: var(--rojo-3) !important;}
.bg-2-rojo div:nth-child(4n+2), .bg-2-rojo div:nth-child(4n+1) {background: var(--rojo-2) !important;}

.bg-3-rojo div:nth-child(6n+6), .bg-3-rojo div:nth-child(6n+5), .bg-3-rojo div:nth-child(6n+4) {background: var(--rojo-3) !important;}
.bg-3-rojo div:nth-child(6n+3), .bg-3-rojo div:nth-child(6n+2), .bg-3-rojo div:nth-child(6n+1) {background: var(--rojo-2) !important;}

.bg-4-rojo div:nth-child(8n+8), .bg-4-rojo div:nth-child(8n+7), .bg-4-rojo div:nth-child(8n+6), .bg-4-rojo div:nth-child(8n+5) {background: var(--rojo-3) !important;}
.bg-4-rojo div:nth-child(8n+4), .bg-4-rojo div:nth-child(8n+3), .bg-4-rojo div:nth-child(8n+2), .bg-4-rojo div:nth-child(8n+1) {background: var(--rojo-2) !important;}


.bg-2-rosa div:nth-child(4n+4), .bg-2-rosa div:nth-child(4n+3) {background: var(--rosa-3) !important;}
.bg-2-rosa div:nth-child(4n+2), .bg-2-rosa div:nth-child(4n+1) {background: var(--rosa-2) !important;}

.bg-3-rosa div:nth-child(6n+6), .bg-3-rosa div:nth-child(6n+5), .bg-3-rosa div:nth-child(6n+4) {background: var(--rosa-3) !important;}
.bg-3-rosa div:nth-child(6n+3), .bg-3-rosa div:nth-child(6n+2), .bg-3-rosa div:nth-child(6n+1) {background: var(--rosa-2) !important;}

.bg-4-rosa div:nth-child(8n+8), .bg-4-rosa div:nth-child(8n+7), .bg-4-rosa div:nth-child(8n+6), .bg-4-rosa div:nth-child(8n+5) {background: var(--rosa-3) !important;}
.bg-4-rosa div:nth-child(8n+4), .bg-4-rosa div:nth-child(8n+3), .bg-4-rosa div:nth-child(8n+2), .bg-4-rosa div:nth-child(8n+1) {background: var(--rosa-2) !important;}


.bg-2-verde div:nth-child(4n+4), .bg-2-verde div:nth-child(4n+3) {background: var(--verde-3) !important;}
.bg-2-verde div:nth-child(4n+2), .bg-2-verde div:nth-child(4n+1) {background: var(--verde-2) !important;}

.bg-3-verde div:nth-child(6n+6), .bg-3-verde div:nth-child(6n+5), .bg-3-verde div:nth-child(6n+4) {background: var(--verde-3) !important;}
.bg-3-verde div:nth-child(6n+3), .bg-3-verde div:nth-child(6n+2), .bg-3-verde div:nth-child(6n+1) {background: var(--verde-2) !important;}

.bg-4-verde div:nth-child(8n+8), .bg-4-verde div:nth-child(8n+7), .bg-4-verde div:nth-child(8n+6), .bg-4-verde div:nth-child(8n+5) {background: var(--verde-3) !important;}
.bg-4-verde div:nth-child(8n+4), .bg-4-verde div:nth-child(8n+3), .bg-4-verde div:nth-child(8n+2), .bg-4-verde div:nth-child(8n+1) {background: var(--verde-2) !important;}


.bg-2-violeta div:nth-child(4n+4), .bg-2-violeta div:nth-child(4n+3) {background: var(--violeta-3) !important;}
.bg-2-violeta div:nth-child(4n+2), .bg-2-violeta div:nth-child(4n+1) {background: var(--violeta-2) !important;}

.bg-3-violeta div:nth-child(6n+6), .bg-3-violeta div:nth-child(6n+5), .bg-3-violeta div:nth-child(6n+4) {background: var(--violeta-3) !important;}
.bg-3-violeta div:nth-child(6n+3), .bg-3-violeta div:nth-child(6n+2), .bg-3-violeta div:nth-child(6n+1) {background: var(--violeta-2) !important;}

.bg-4-violeta div:nth-child(8n+8), .bg-4-violeta div:nth-child(8n+7), .bg-4-violeta div:nth-child(8n+6), .bg-4-violeta div:nth-child(8n+5) {background: var(--violeta-3) !important;}
.bg-4-violeta div:nth-child(8n+4), .bg-4-violeta div:nth-child(8n+3), .bg-4-violeta div:nth-child(8n+2), .bg-4-violeta div:nth-child(8n+1) {background: var(--violeta-2) !important;}


/************************* COLORES DE BORDES ************************/

.border-principal {border: 2px solid var(--color-principal) !important;}
.border-principal-2 {border: 2px solid var(--color-principal-2) !important;}

.border-amarillo {border: 2px solid var(--amarillo) !important;}
.border-amarillo-2 {border: 2px solid var(--amarillo-2) !important;}
.border-amarillo-3 {border: 2px solid var(--amarillo-3) !important;}
.border-amarillo-4 {border: 2px solid var(--amarillo-4) !important;}

.border-azul {border: 2px solid var(--azul) !important;}
.border-azul-2 {border: 2px solid var(--azul-2) !important;}
.border-azul-3 {border: 2px solid var(--azul-3) !important;}
.border-azul-4 {border: 2px solid var(--azul-4) !important;}

.border-beige {border: 2px solid var(--beige) !important;}
.border-beige-2 {border: 2px solid var(--beige-2) !important;}
.border-beige-3 {border: 2px solid var(--beige-3) !important;}
.border-beige-4 {border: 2px solid var(--beige-4) !important;}

.border-celeste {border: 2px solid var(--celeste) !important;}
.border-celeste-2 {border: 2px solid var(--celeste-2) !important;}
.border-celeste-3 {border: 2px solid var(--celeste-3) !important;}
.border-celeste-4 {border: 2px solid var(--celeste-4) !important;}

.border-gris {border: 2px solid var(--gris) !important;}
.border-gris-2 {border: 2px solid var(--gris-2) !important;}
.border-gris-3 {border: 2px solid var(--gris-3) !important;}
.border-gris-4 {border: 2px solid var(--gris-4) !important;}

.border-naranja {border: 2px solid var(--naranja) !important;}
.border-naranja-2 {border: 2px solid var(--naranja-2) !important;}
.border-naranja-3 {border: 2px solid var(--naranja-3) !important;}
.border-naranja-4 {border: 2px solid var(--naranja-4) !important;}

.border-negro {border: 2px solid var(--negro) !important;}
.border-negro-2 {border: 2px solid var(--negro-2) !important;}
.border-negro-3 {border: 2px solid var(--negro-3) !important;}
.border-negro-4 {border: 2px solid var(--negro-4) !important;}

.border-rojo {border: 2px solid var(--rojo) !important;}
.border-rojo-2 {border: 2px solid var(--rojo-2) !important;}
.border-rojo-3 {border: 2px solid var(--rojo-3) !important;}
.border-rojo-4 {border: 2px solid var(--rojo-4) !important;}

.border-rosa {border: 2px solid var(--rosa) !important;}
.border-rosa-2 {border: 2px solid var(--rosa-2) !important;}
.border-rosa-3 {border: 2px solid var(--rosa-3) !important;}
.border-rosa-4 {border: 2px solid var(--rosa-4) !important;}

.border-verde {border: 2px solid var(--verde) !important;}
.border-verde-2 {border: 2px solid var(--verde-2) !important;}
.border-verde-3 {border: 2px solid var(--verde-3) !important;}
.border-verde-4 {border: 2px solid var(--verde-4) !important;}

.border-violeta {border: 2px solid var(--violeta) !important;}
.border-violeta-2 {border: 2px solid var(--violeta-2) !important;}
.border-violeta-3 {border: 2px solid var(--violeta-3) !important;}
.border-violeta-4 {border: 2px solid var(--violeta-4) !important;}


/************************* COLORES DE SEPARADORES ************************/

.separador-amarillo, .separador-azul, .separador-beige, .separador-celeste, .separador-gris, .separador-naranja, .separador-negro, .separador-rojo, .separador-rosa, .separador-verde, .separador-violeta { 
    display:block;
    border:none;
    height:4px;
	width: 75%;
	margin: 10px auto 10px auto;
}

.separador-amarillo {
	background: rgba(var(--amarillo-rgb));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(var(--amarillo-rgb)) 0%, rgba(255,255,255,0) 100%);
}
.separador-azul {
	background: rgba(var(--azul-rgb));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(var(--azul-rgb)) 0%, rgba(255,255,255,0) 100%);
}

.separador-beige {
	background: rgba(var(--beige-rgb));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(var(--beige-rgb)) 0%, rgba(255,255,255,0) 100%);
}

.separador-celeste {
	background: rgba(var(--celeste-rgb));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(var(--celeste-rgb)) 0%, rgba(255,255,255,0) 100%);
}

.separador-gris {
	background: rgba(var(--gris-rgb));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(var(--gris-rgb)) 0%, rgba(255,255,255,0) 100%);
}

.separador-naranja {
	background: rgba(var(--naranja-rgb));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(var(--naranja-rgb)) 0%, rgba(255,255,255,0) 100%);
}

.separador-negro {
	background: rgba(var(--negro-rgb));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(var(--negro-rgb)) 0%, rgba(255,255,255,0) 100%);
}

.separador-rojo {
	background: rgba(var(--rojo-rgb));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(var(--rojo-rgb)) 0%, rgba(255,255,255,0) 100%);
}

.separador-rosa {
	background: rgba(var(--rosa-rgb));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(var(--rosa-rgb)) 0%, rgba(255,255,255,0) 100%);
}

.separador-verde {
	background: rgba(var(--verde-rgb));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(var(--verde-rgb)) 0%, rgba(255,255,255,0) 100%);
}

.separador-violeta {
	background: rgba(var(--violeta-rgb));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(var(--violeta-rgb)) 0%, rgba(255,255,255,0) 100%);
}

/**********************************************************************************/


.boton-amarillo, .boton-amarillo-2, .boton-azul, .boton-azul-2, .boton-beige, .boton-beige-2, .boton-celeste, .boton-celeste-2, .boton-gris, .boton-gris-2, .boton-naranja, .boton-naranja-2, .boton-negro, .boton-negro-2, .boton-rojo, .boton-rojo-2, .boton-rosa, .boton-rosa-2, .boton-verde, .boton-verde-2, .boton-violeta, .boton-violeta-2 {
	display: block;
	width: 100%;
	border-radius: 5px;
	box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.1);
	text-decoration: none;
	text-align: center;
	padding: 4px;
	font-family: 'Fira Sans', sans-serif;
	font-weight: normal;
	font-size: 1.2rem;
}

.boton-amarillo a, .boton-amarillo-2 a, .boton-azul a, .boton-azul-2 a, .boton-beige a, .boton-beige-2 a, .boton-celeste a, .boton-celeste-2 a, .boton-gris a, .boton-gris-2 a, .boton-naranja a, .boton-naranja-2 a, .boton-negro a, .boton-negro-2 a, .boton-rojo a, .boton-rojo-2 a, .boton-rosa a, .boton-rosa-2 a, .boton-verde a, .boton-verde-2 a, .boton-violeta a, .boton-violeta-2 a {
	text-decoration:none!important;
	
}

.boton-amarillo span, .boton-amarillo-2 span, .boton-azul span, .boton-azul-2 span, .boton-beige span, .boton-beige-2 span, .boton-celeste span, .boton-celeste-2 span, .boton-gris span, .boton-gris-2 span, .boton-naranja span, .boton-naranja-2 span, .boton-negro span, .boton-negro-2 span, .boton-rojo span, .boton-rojo-2 span, .boton-rosa span, .boton-rosa-2 span, .boton-verde span, .boton-verde-2 span, .boton-violeta span, .boton-violeta-2 span {
		font-size: 0.9rem;
}

.boton-amarillo:hover, .boton-amarillo-2:hover, .boton-azul:hover, .boton-azul-2:hover, .boton-beige:hover, .boton-beige-2:hover, .boton-celeste:hover, .boton-celeste-2:hover, .boton-gris:hover, .boton-gris-2:hover, .boton-naranja:hover, .boton-naranja-2:hover, .boton-negro:hover, .boton-negro-2:hover, .boton-rojo:hover, .boton-rojo-2:hover, .boton-rosa:hover, .boton-rosa-2:hover, .boton-verde:hover, .boton-verde-2:hover, .boton-violeta:hover, .boton-violeta-2:hover {
	transition: .5s;
}

.boton-amarillo {
	color: var(--amarillo-3);
	background-color: var(--amarillo);
	border: solid 2px var(--amarillo-4);
}

.boton-amarillo:hover{
	color: var(--amarillo-2);
	background-color: var(--amarillo-4);
	border: solid 2px var(--amarillo);
}

.boton-amarillo-2 {
	color: var(--amarillo-4);
	background-color: var(--amarillo-3);
	border: solid 2px var(--amarillo-2);
}

.boton-amarillo-2:hover{
	color: var(--amarillo);
	background-color: var(--amarillo-2);
	border: solid 2px var(--amarillo-3);
}

.boton-azul {
	color: var(--azul-3);
	background-color: var(--azul);
	border: solid 2px var(--azul-4);
}

.boton-azul:hover{
	color: var(--azul-2);
	background-color: var(--azul-4);
	border: solid 2px var(--azul);
}

.boton-azul-2 {
	color: var(--azul-4);
	background-color: var(--azul-3);
	border: solid 2px var(--azul-2);
}

.boton-azul-2:hover{
	color: var(--azul);
	background-color: var(--azul-2);
	border: solid 2px var(--azul-3);
}

.boton-beige {
	color: var(--beige-3);
	background-color: var(--beige);
	border: solid 2px var(--beige-4);
}

.boton-beige:hover{
	color: var(--beige-2);
	background-color: var(--beige-4);
	border: solid 2px var(--beige);
}

.boton-beige-2 {
	color: var(--beige-4);
	background-color: var(--beige-3);
	border: solid 2px var(--beige-2);
}

.boton-beige-2:hover{
	color: var(--beige);
	background-color: var(--beige-2);
	border: solid 2px var(--beige-3);
}


.boton-celeste {
	color: var(--celeste-3);
	background-color: var(--celeste);
	border: solid 2px var(--celeste-4);
}

.boton-celeste:hover{
	color: var(--celeste-2);
	background-color: var(--celeste-4);
	border: solid 2px var(--celeste);
}

.boton-celeste-2 {
	color: var(--celeste-4);
	background-color: var(--celeste-3);
	border: solid 2px var(--celeste-2);
}

.boton-celeste-2:hover{
	color: var(--celeste);
	background-color: var(--celeste-2);
	border: solid 2px var(--celeste-3);
}

.boton-gris {
	color: var(--gris-3);
	background-color: var(--gris);
	border: solid 2px var(--gris-4);
}

.boton-gris:hover{
	color: var(--gris-2);
	background-color: var(--gris-4);
	border: solid 2px var(--gris);
}

.boton-gris-2 {
	color: var(--gris-4);
	background-color: var(--gris-3);
	border: solid 2px var(--gris-2);
}

.boton-gris-2:hover{
	color: var(--gris);
	background-color: var(--gris-2);
	border: solid 2px var(--gris-3);
}

.boton-naranja {
	color: var(--naranja-3);
	background-color: var(--naranja);
	border: solid 2px var(--naranja-4);
}

.boton-naranja:hover{
	color: var(--naranja-2);
	background-color: var(--naranja-4);
	border: solid 2px var(--naranja);
}

.boton-naranja-2 {
	color: var(--naranja-4);
	background-color: var(--naranja-3);
	border: solid 2px var(--naranja-2);
}

.boton-naranja-2:hover{
	color: var(--naranja);
	background-color: var(--naranja-2);
	border: solid 2px var(--naranja-3);
}

.boton-negro {
	color: var(--negro-3);
	background-color: var(--negro);
	border: solid 2px var(--negro-4);
}

.boton-negro:hover{
	color: var(--negro-2);
	background-color: var(--negro-4);
	border: solid 2px var(--negro);
}

.boton-negro-2 {
	color: var(--negro-4);
	background-color: var(--negro-3);
	border: solid 2px var(--negro-2);
}

.boton-negro-2:hover{
	color: var(--negro);
	background-color: var(--negro-2);
	border: solid 2px var(--negro-3);
}

.boton-rojo {
	color: var(--rojo-3);
	background-color: var(--rojo);
	border: solid 2px var(--rojo-4);
}

.boton-rojo:hover{
	color: var(--rojo-2);
	background-color: var(--rojo-4);
	border: solid 2px var(--rojo);
}

.boton-rojo-2 {
	color: var(--rojo-4);
	background-color: var(--rojo-3);
	border: solid 2px var(--rojo-2);
}

.boton-rojo-2:hover{
	color: var(--rojo);
	background-color: var(--rojo-2);
	border: solid 2px var(--rojo-3);
}

.boton-rosa {
	color: var(--rosa-3);
	background-color: var(--rosa);
	border: solid 2px var(--rosa-4);
}

.boton-rosa:hover{
	color: var(--rosa-2);
	background-color: var(--rosa-4);
	border: solid 2px var(--rosa);
}

.boton-rosa-2 {
	color: var(--rosa-4);
	background-color: var(--rosa-3);
	border: solid 2px var(--rosa-2);
}

.boton-rosa-2:hover{
	color: var(--rosa);
	background-color: var(--rosa-2);
	border: solid 2px var(--rosa-3);
}

.boton-verde {
	color: var(--verde-3);
	background-color: var(--verde);
	border: solid 2px var(--verde-4);
}

.boton-verde:hover{
	color: var(--verde-2);
	background-color: var(--verde-4);
	border: solid 2px var(--verde);
}

.boton-verde-2 {
	color: var(--verde-4);
	background-color: var(--verde-3);
	border: solid 2px var(--verde-2);
}

.boton-verde-2:hover{
	color: var(--verde);
	background-color: var(--verde-2);
	border: solid 2px var(--verde-3);
}

.boton-violeta {
	color: var(--violeta-3);
	background-color: var(--violeta);
	border: solid 2px var(--violeta-4);
}

.boton-violeta:hover{
	color: var(--violeta-2);
	background-color: var(--violeta-4);
	border: solid 2px var(--violeta);
}

.boton-violeta-2 {
	color: var(--violeta-4);
	background-color: var(--violeta-3);
	border: solid 2px var(--violeta-2);
}

.boton-violeta-2:hover{
	color: var(--violeta);
	background-color: var(--violeta-2);
	border: solid 2px var(--violeta-3);
}



/**********************************************************************************/
/****************************** GALERÍA DE IMÁGENES *******************************/
/**********************************************************************************/

.container-galeria {
column-count: 4;
column-gap: 10px;
}

.container-galeria img {
max-width: 100%;
display: block;
}

.container-galeria figure {
margin: 0;
display: grid;
grid-template-rows: 1fr auto;
margin-bottom: 10px;
break-inside: avoid;
}

.container-galeria figure > img {
grid-row: 1 / -1;
grid-column: 1;
}

.container-galeria figure a {
color: black;
text-decoration: none;
}

.container-galeria figcaption {
grid-row: 2;
grid-column: 1;
background-color: rgba(255,255,255,.5);
padding: .2em .5em;
justify-self: start;
}


@media only screen and (max-width: 767px) {
.container-galeria {
column-count: 1;
column-gap: 10px;
}
}

/**********************************************************************************/




/**********************************************************************************/
/************************************* TÍTULOS ************************************/
/**********************************************************************************/

.titulo-1 {font-family: 'Fira Sans', sans-serif; font-weight: 900;}
.titulo-2 {font-family: 'Fira Sans', sans-serif; font-weight: 600;}
.titulo-3 {font-family: 'Fira Sans', sans-serif; font-weight: normal;}
.titulo-4 {font-family: 'Fira Sans', sans-serif; font-weight: 200;}

/**********************************************************************************/




/**********************************************************************************/
/************************************* HEADER *************************************/
/**********************************************************************************/

/* .portada {height: 100%; max-height: 400px; width: 100%; min-height: 400px;}
.portada img {width: 100%; max-height: 100%; object-fit: cover; object-position: center;} */

.portada img{
width: 100%;
height: 100%;
max-height: 300px;
object-fit: cover;
}

.servicios {columns: 3;}
.servicios ul {list-style: none; padding: 0;}
.servicios li {padding-left: 1.3em;}
.servicios li::before {
content: "\f0da";
font-family: "FontAwesome"; 
font-weight: 400;
display: inline-block;
margin-left: -1.3em;
width: 1.3em;
}

@media (max-width: 576px) {
.servicios {columns: 1;}
}
@media (min-width: 576px) {
.servicios {columns: 1;}
}
@media (min-width: 768px) {
.servicios {columns: 2;}
}
@media (min-width: 992px) {
.servicios {columns: 2;}
}
@media (min-width: 1200px) {
.servicios {columns: 3;}
}
@media (min-width: 1400px) {
.servicios {columns: 3;}
}

/**********************************************************************************/




/**********************************************************************************/
/********************************** HEADER DATOS **********************************/
/**********************************************************************************/

.header-grid {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-areas: "datos fotos";
grid-template-rows: auto;
width: 100%;
}
.header-grid a {text-decoration: none;}

.grid-datos {
grid-area: datos;
}

h7, .h7 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
  font-size: 0.85rem;
}

.grid-fotos {
grid-area: fotos;
margin-top: -40px !important;
margin-bottom: -40px !important;
border-radius: 10px;
border: solid 2px white;
padding: 0.5rem;
box-shadow: 2px 2px 5px #ffffff;
}

.grid-fotos img {min-height: 280px;}

.grid-redes {display:grid; grid-template-columns: auto auto auto auto auto auto auto auto auto; justify-content: center; grid-column-gap: 2%;}
.grid-redes div {text-align: center;}
.grid-redes div img {width: 90%; max-width: 55px; margin-bottom: 10px; padding: 1%;}



#intro h1 {font-size: 2rem;}
.notas-contenedor h1 {font-size: 2rem;}

.grid-precios {
grid-area: datos;
background-color: white;
float: right;
border-radius: 10px;	
margin-top: -50px;
box-shadow: 2px 2px 5px $color;
z-index: 2;
background: rgba(255,255,255, .5);
align-self: end;
justify-self: start;
position: relative;
padding: 5px 10px 1px 10px;
right: 5px;
}

.grid-galeria-fotos {
grid-area: datos;
background-color: white;
float: left;
border-radius: 10px;	
margin-top: -30px;
box-shadow: 2px 2px 5px $color;
z-index: 2;
background: rgba(255,255,255, .7);
align-self: end;
justify-self: start;
position: relative;
padding: 1px 10px 3px 10px;
left: 5px;
}


@media (max-width: 576px) {
.header-grid {
grid-template-columns: auto;
grid-template-areas: "datos" "fotos";
text-align: center;
}
.header-grid h1 {font-size: 1.8rem;}
.header-grid h5 {font-size: 0.9rem;}
#intro h1 {font-size: 1.5rem;}
.grid-fotos {
grid-area: fotos;
margin-top: -20px !important;
margin-bottom: -20px !important;
border-radius: 10px;
border: solid 2px white;
padding: 0.5rem;
box-shadow: 2px 2px 5px #ffffff;
}

}
@media (min-width: 576px) {
.header-grid {
grid-template-columns: auto;
grid-template-areas: "datos" "fotos";
text-align: center;
}
.header-grid h1 {font-size: 1.8rem;}
.header-grid h5 {font-size: 0.9rem;}
#intro h1 {font-size: 1.5rem;}

.grid-fotos {
grid-area: fotos;
margin-top: -20px !important;
margin-bottom: -20px !important;
border-radius: 10px;
border: solid 2px white;
padding: 0.5rem;
box-shadow: 2px 2px 5px #ffffff;
}

}

@media (min-width: 768px) {
.header-grid {
grid-template-columns: auto;
grid-template-areas: "datos" "fotos";
text-align: center;
}
.header-grid h1 {font-size: 1.8rem;}
.header-grid h5 {font-size: 0.9rem;}
#intro h1 {font-size: 1.5rem;}

.grid-fotos {
grid-area: fotos;
margin-top: -20px !important;
margin-bottom: -20px !important;
border-radius: 10px;
border: solid 2px white;
padding: 0.5rem;
box-shadow: 2px 2px 5px #ffffff;
}


}

@media (min-width: 992px) {
.header-grid {
grid-template-columns: 1fr 1fr;
grid-template-areas: "datos fotos";
}

.header-grid h1 {font-size: 1.8rem;}
.header-grid h5 {font-size: 0.9rem;}
#intro h1 {font-size: 1.6rem;}
}

@media (min-width: 1200px) {
.header-grid {
grid-template-columns: 2fr 1fr;
grid-template-areas: "datos fotos";
}
.header-grid h1 {font-size: 1.7rem;}
.header-grid h5 {font-size: 0.95rem;}
#intro h1 {font-size: 1.8rem;}
}

@media (min-width: 1400px) {
.header-grid {
grid-template-columns: 2fr 1fr;
grid-template-areas: "datos fotos";
}
.header-grid h1 {font-size: 2rem;}
.header-grid h5 {font-size: 1.2rem;}
#intro h1 {font-size: 2rem;}
}

/**********************************************************************************/




/**********************************************************************************/
/******************************** UBICACIÓN Y FORM ********************************/
/**********************************************************************************/

.container-form {border-radius: 1.5rem; background-color: white; padding: 2%; border-bottom: 18px solid}


.mapa {width: 100%; height: 600px;}
#logo img {width: 100%; max-width: 300px; margin: auto; padding: 5px;}

#ubicacion h1 {font-size: 1.5rem;}
#ubicacion h5 {font-size: 1rem; text-align: center;}
#ubicacion a {text-decoration: none;}










.formulario-prestador {
  position: relative;
  width: 100%;
}
.formulario-prestador::before {
  display: block;
  padding-top: var(--bs-aspect-ratio);
  content: "";
}
.formulario-prestador > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.formulario-prestador-1x1 {
  --bs-aspect-ratio: calc(16 / 9 * 100%);
}






.alojamientos-contenedor {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border-radius: 1rem;
  padding: 15px;
  text-align: center;
  line-height: 2rem;
  text-decoration: none;
}
.alojamientos-contenedor h4 {font-size: 1rem;}
.alojamientos-contenedor h5 {font-size: .8rem; margin-top: 0.2rem; text-decoration:none;}
.alojamientos-contenedor button {font-size: 1rem;}
.img-alojamientos-destacados {width: 100%; max-width: 200px; border-radius: 10px;}





/**********************************************************************************/




/**********************************************************************************/
/********************************** FOOTER REDES **********************************/
/**********************************************************************************/
#bottomMenu {
    display: none;
    position: fixed;
    left: 0; bottom: 0;
    width: 100%; 
	min-height: 60px;
    border-top: 1px solid #000;
    z-index: 1;
	text-align: center;
}



#logo {margin: 1rem 0 5rem 0;}



@media (max-width: 576px) {
#logo h5 {font-size: .8rem;}
}
@media (min-width: 576px) {
#logo h5 {font-size: 1rem;}
}

@media (min-width: 768px) {
#logo h5 {font-size: .8rem;}
}

@media (min-width: 992px) {
#logo h5 {font-size: .9rem;}
}

@media (min-width: 1200px) {
#logo h5 {font-size: .9rem;}
}

@media (min-width: 1400px) {
#logo h5 {font-size: 1rem;}
}





/**********************************************************************************/




/**********************************************************************************/
/************************************ BOX NOTES ***********************************/
/**********************************************************************************/
:root{
    --cs: 30px;
    --br: 20px;
}

.notas {
    display: flex;
    align-items: center;
    filter: drop-shadow(0 0 6px #ffffff);
}

.notas-contenedor {
    position: relative;
    margin: auto;
    max-width: 1200px;
    border-radius: var(--br);
    background-color: #ffffff;
    padding: 20px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    clip-path: polygon(0 0, calc(100% - var(--cs)) 0, 100% var(--cs), 100% 100%, 0 100%);
}

.notas-contenedor::after {
    content: '';
    position: absolute;
    display: block;
    width: var(--cs);
    height: var(--cs);
    background-color: #e1e1f2;
    top: 0;
    right: 0;
    border-bottom-left-radius: var(--br);
}

/**********************************************************************************/




/**********************************************************************************/
/************************************* TARIFAS ************************************/
/**********************************************************************************/
.tarifas-contenedor {
width:100%;
max-width:1200px;
margin: auto;
margin-bottom: 10px;
padding: 20px;
background-color: white;
border-radius: 10px;
}

.tarifas-box-1 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}

.tarifas-box-1 > div {
border-radius: 2px;
min-height: 20px;
padding: 10px;
position: relative;
overflow: hidden;
background-color: white;
font-size: 1rem;
}


.tarifas-box-2 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}

.tarifas-box-2 > div {
border-radius: 2px;
min-height: 20px;
padding: 10px;
position: relative;
overflow: hidden;
background-color: white;
font-size: 1rem;
}


.tarifas-box-3 {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 10px;
}

.tarifas-box-3 > div {
border-radius: 2px;
min-height: 20px;
padding: 10px;
position: relative;
overflow: hidden;
background-color: white;
font-size: 1rem;
}


@media (max-width: 576px) {

.tarifas-box-1 > div {
padding: 4px;
font-size: 0.7rem;
text-overflow: ellipsis;
}

.tarifas-box-2 > div {
padding: 4px;
font-size: 0.7rem;
text-overflow: ellipsis;
}

.tarifas-box-3 > div {
padding: 4px;
font-size: 0.7rem;
text-overflow: ellipsis;
}

}
@media (min-width: 576px) {

.tarifas-box-1 > div {
padding: 6px;
font-size: 0.9rem;
text-overflow: ellipsis;
}

.tarifas-box-2 > div {
padding: 6px;
font-size: 0.9rem;
text-overflow: ellipsis;
}

.tarifas-box-3 > div {
padding: 6px;
font-size: 0.9rem;
text-overflow: ellipsis;
}

}
@media (min-width: 768px) {

.tarifas-box-1 > div {
padding: 8px;
font-size: 1rem;
text-overflow: ellipsis;
}

.tarifas-box-2 > div {
padding: 8px;
font-size: 1rem;
text-overflow: ellipsis;
}

.tarifas-box-3 > div {
padding: 8px;
font-size: 1rem;
text-overflow: ellipsis;
}

}


.tarjetas-container {
	display:grid; grid-template-columns: auto auto auto auto auto auto auto auto; justify-content: center; grid-column-gap: 1%;
}
.tarjetas-container div {
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(180,180,180,1) 100%);
    border-radius: 1em;
	box-shadow: 0 0.039em 0.132em rgba(0, 0, 0, .4);
    display: inline-block;
	overflow: hidden;
    position: relative;
    margin-right: 1em;
	padding: 4px;
	margin: auto;
	width:100%;
	max-width:125px;
	max-height:81px;
}

.tarjetas-container div img {width:100%;}





.botones-tarifas {
	display:grid; grid-template-columns: auto auto; justify-content: center; grid-column-gap: 1%;
}
.botones-tarifas div {
    display: inline-block;
	overflow: hidden;
    position: relative;
    margin-right: 1em;
	padding: 4px;
	margin: auto;
	width:100%;
	max-width:400px;
	max-height:81px;
}

.botones-tarifas div button {width:100%;padding: 0 40px 0 40px;}


@media (max-width: 576px) {
.botones-tarifas {
	grid-template-columns: auto;
}
}
@media (min-width: 576px) {
.botones-tarifas {
	grid-template-columns: auto;
}
}
@media (min-width: 768px) {
.botones-tarifas {
	grid-template-columns: auto;
}
}
@media (min-width: 992px) {
.botones-tarifas {
	grid-template-columns: auto auto;
}
}
@media (min-width: 1200px) {
.botones-tarifas {
	grid-template-columns: auto auto;
}
}
@media (min-width: 1400px) {
.botones-tarifas {
	grid-template-columns: auto auto;
}
}


/**********************************************************************************/




/**********************************************************************************/
/******************************** LISTAS ORDENADAS ********************************/
/**********************************************************************************/


.lista-contenedor {
width:100%;
max-width:1200px;
margin: auto;
margin-bottom: 10px;
padding: 20px;
}

.lista-1 {columns: 1;}
.lista-2 {columns: 2;}
.lista-3 {columns: 3;}
.lista-4 {columns: 4;}
.lista-1 ul, .lista-2 ul, .lista-3 ul, .lista-4 ul {list-style: none; padding: 0;}
.lista-1 li, .lista-2 li, .lista-3 li, .lista-4 li {font-family: 'Fira Sans', sans-serif; font-size: 18px; padding-top: 1em;}
.lista-1 li::before, .lista-2 li::before, .lista-3 li::before, .lista-4 li::before {
content: "\f0c8";
font-family: "FontAwesome"; 
font-weight: 400;
display: inline-block;
margin-top: -1.3em;
width: 2em;
font-size: 10px;
}

@media (max-width: 576px) {
.lista-2 {columns: 1;}
.lista-3 {columns: 1;}
.lista-4 {columns: 1;}
.lista-1 li, .lista-2 li, .lista-3 li, .lista-4 li {font-size: 14px;}
}
@media (min-width: 576px) {
.lista-2 {columns: 1;}
.lista-3 {columns: 1;}
.lista-4 {columns: 1;}
.lista-1 li, .lista-2 li, .lista-3 li, .lista-4 li {font-size: 14px;}
}
@media (min-width: 768px) {
.lista-2 {columns: 2;}
.lista-3 {columns: 2;}
.lista-4 {columns: 2;}
.lista-1 li, .lista-2 li, .lista-3 li, .lista-4 li {font-size: 16px;}
}
@media (min-width: 992px) {
.lista-2 {columns: 2;}
.lista-3 {columns: 2;}
.lista-4 {columns: 2;}
.lista-1 li, .lista-2 li, .lista-3 li, .lista-4 li {font-size: 16px;}
}
@media (min-width: 1200px) {
.lista-2 {columns: 2;}
.lista-3 {columns: 3;}
.lista-4 {columns: 4;}
.lista-1 li, .lista-2 li, .lista-3 li, .lista-4 li {font-size: 18px;}
}
@media (min-width: 1400px) {
.lista-2 {columns: 2;}
.lista-3 {columns: 3;}
.lista-4 {columns: 4;}
.lista-1 li, .lista-2 li, .lista-3 li, .lista-4 li {font-size: 18px;}
}

/**********************************************************************************/




/**********************************************************************************/
/**************************** ADMIN TEXTOS Y MENSAJES *****************************/
/**********************************************************************************/

.container-form {border-radius: 1.5rem; background-color: white; padding: 2%; border-bottom: 18px solid}

.logo-forms {width: 100%; max-width: 600px; text-align: center;}

.box-forms {
border-radius: 1rem;
position: relative;
padding: 1rem;
margin: 1rem -0.75rem 0;
border: solid var(--color-principal) !important;
border-width: 2px;
}

@media (max-width: 576px) {
.box-forms {padding: 1rem; margin: 1rem;}
}
@media (min-width: 576px) {
.box-forms {padding: 1rem; margin: 1rem;}
}
@media (min-width: 768px) {
.box-forms {padding: 1rem; margin: 1rem -0.75rem 0;}
}
@media (min-width: 992px) {
.box-forms {padding: 1rem; margin: 1rem -0.75rem 0;}
}
@media (min-width: 1200px) {
.box-forms {padding: 1rem; margin: 1rem -0.75rem 0;}
}
@media (min-width: 1400px) {
.box-forms {padding: 1rem; margin: 1rem -0.75rem 0;}
}



table.mceLayout, textarea.tinyMCE {
    width: 100% !important;
}

.note-desktop {
    display: none;
}

/* make the toolbar wrap */
.mceToolbar td {
	display:table-row;
	float: left;
}
.mceToolbar td:nth-of-type(11){
	clear: left;
}

@media only screen and (min-width: 600px) {
    table.mceLayout, textarea.richEditor {
       width: 600px !important;
    }
    
    .note-desktop {
        display: block;
    }
    .note-mobile {
        display: none;
    }
    
    /* remove the toolbar wrap */
    .mceToolbar td {
	    display:table-cell;
	    float: none;
    }
    mceToolbar td:nth-of-type(11){
	    clear: none;
    }
}

/**********************************************************************************/




/**********************************************************************************/
/************************************* REVIEWS ************************************/
/**********************************************************************************/
.reviews {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border-radius: 1rem;
  padding: 15px;
}

.reviews .description{
    font-size: 16px;
    color: #000;
    padding: 0 15px;
    margin: 0;
    position: relative;
}
.reviews .description:before,
.reviews .description:after{
    font-family: "FontAwesome";
	font-weight: 900;
    font-size: 17px;
    color: #FF5F0D;
    position: relative;
}

.reviews .description:before{
    content: "\f10d";
    margin-right: 5px;
    top: 0;
    left: 0;
}
.reviews .description:after{
    content: "\f10e";
    margin-left: 5px;
    position: relative;
    bottom: 0;
    right: 0;
}

.client-review-stars {max-width: 200px; color: #ffd700;}











.formulario{
	width: 360px;
	background: #f1f1f1;
	height: 400px;
	padding: 80px 40px;
	border-radius: 10px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 2px 2px 10px 5px rgba(0, 0, 0, 0.2);
}

.formulario h1{
	text-align: center;
	margin-bottom: 60px;
	color: #333;
	font-weight: 600;
}

.box-input{
	border-bottom: 2px solid #adadad;
	position: relative;
	margin: 30px 0;
}

.box-input input{
	font-size: 16px;
	color: #333;
	border: none;
	width: 100%;
	outline: none;
	background: none;
	padding: 0 5px;
	height: 40px;
}

.box-input span::before{
	content: attr(data-placeholder);
	position: absolute;
	top: 50%;
	left: 5px;
	color: #adadad;
	transform: translateY(-50%);
	z-index: -1;
	transition: .5s;
}

.box-input span::after{
	content: '';
	position: absolute;
	width: 0%;
	height: 2px;
	background: linear-gradient(120deg, #3498db, #8e44ad);
	transition: .5s;
}

.focus + span::before{
	top: -5px;
}

.focus + span::after{
	width: 100%;
}




/* BLINK */
@keyframes blink {  
    0% { color: red; }
    100% { color: black; }
}
@-webkit-keyframes blink {
    0% { color: red; }
    100% { color: black; }
}
.blink {
    -webkit-animation: blink 1s linear infinite;
    -moz-animation: blink 1s linear infinite;
    -ms-animation: blink 1s linear infinite;
    -o-animation: blink 1s linear infinite;
    animation: blink 1s linear infinite;
}

@keyframes blink-2 {  
    0% { color: white; }
    100% { color: black; }
}
@-webkit-keyframes blink-2 {
    0% { color: white; }
    100% { color: black; }
}
.blink-2 {
    -webkit-animation: blink-2 2s linear infinite;
    -moz-animation: blink-2 2s linear infinite;
    -ms-animation: blink-2 2s linear infinite;
    -o-animation: blink-2 2s linear infinite;
    animation: blink-2 2s linear infinite;
}