@font-face {font-family:Bogle;src:url(/fonts/Bogle-Black.woff2) format("woff2"),url(/fonts/Bogle-Black.woff) format("woff");font-weight:700;font-style:normal}
@font-face {font-family:Bogle;src:url(/fonts/Bogle-Bold.woff2) format("woff2"),url(/fonts/Bogle-Bold.woff) format("woff");font-weight:700;font-style:normal}
@font-face {font-family:Bogle;src:url(/fonts/Bogle-Regular.woff2) format("woff2"),url(/fonts/Bogle-Regular.woff) format("woff");font-weight:400;font-style:normal}
html{scroll-behavior:smooth}
*{margin:0;padding:0;box-sizing:border-box;font-family:Bogle !important;text-align:center}
body{background-color:#0071DC}


main{
    background-color:#0071DC;display:flex;flex-direction:column;align-items:center;width:100%;max-width:1440px;justify-content:center;margin:auto}
header{width:100%;position:fixed;background-color:#0071dc;padding:0.8rem;-webkit-box-shadow:0px 6px 9px -1px rgba(0,0,0,0.44);-moz-box-shadow:0px 6px 9px -1px rgba(0,0,0,0.44);box-shadow:0px 6px 9px -1px rgba(0,0,0,0.44);z-index:3}
header nav{display:flex;flex-direction:row;justify-content:space-between;width:100%;max-width:90rem;margin:auto}
nav img{width:100%;max-width:150px}
nav a{background-color:#041e42;padding:0.8rem 1rem;border-radius:10rem;text-decoration:none;font-weight:700;color:white}
nav a:hover{background-color:#00B5E6;color:#041e42}




.hero_text{height:40vh;display:flex;align-items:center;flex-direction:row}
.hero_text div{width:100%;max-width:40%;display:flex;flex-direction:column;align-items:start;margin:unset}
.hero_text div h1,.hero_text div h2,.hero_text div h3,.hero_text div p{text-align:left}
.hero_text img{display:block;position:absolute;right:0px;z-index:1;width:100%;max-width:45rem}


h1{font-size:4rem;color:white}
.hero_text{height:40vh;display:flex;align-items:center;width:100%;max-width:1440px}
.hero_text h3{font-size:2rem;font-weight:400;padding:0.5rem 2rem;background:#ffed00;border-radius:50rem;color:#0071dc;font-weight:600;margin-top:3rem}
section div{width:100%;max-width:90rem;padding:2rem;margin:auto}
section h2{margin-bottom:2rem}
p{color:white;font-size:2rem;font-weight:700}
h2{color:#FFC220;font-size:3.5rem;font-weight:700}
.zona_sur{margin-bottom:3rem}
.btn_supermercado{padding:0.5rem 2rem;background:#FFC220;border-radius:50rem;font-size:2rem;text-decoration:none;color:#041E42;font-weight:500;width:80%;max-width:22rem}
.btn_supermercado:hover{background:white}
.zona_sur p{margin-bottom:3rem}
.btn-mobile{display:none}
.btn-desk{display:block;margin:auto}
footer{background-color:#0071dc;padding:1rem;font-size:1.5rem;color:white}


.destacado_amarillo{text-align:left;font-size:2rem;font-weight:400;padding:0.5rem 2rem;background:#FFC220;border-radius:50rem;color:#041E42;font-weight:600;margin-top:1rem;max-width:700px}
.llamado-hero{display:flex;flex-direction:row;align-items:center;gap:2rem;width:100%;max-width:90rem;margin-bottom:3rem;height:55vh;padding-top:8rem}
.dg_img{width:40%;text-align:left}
.textos{width:60%;text-align:left}
.llamado-hero div h1{font-size:3rem}
.llamado-hero div h1,.llamado-hero div h3,.llamado-hero div p{text-align:left}
@media only screen and (max-width: 1370px){
.hero_text img{display:none}
.hero_text div h1,.hero_text div h2,.hero_text div h3,.hero_text div p{text-align:center}
.hero_text{height:40vh;display:flex;align-items:center;justify-content:center}
.hero_text div{width:100%;max-width:70%;display:flex;flex-direction:column;align-items:center;margin:unset}
}
.sub-llamado{color:#ffed00}
@media only screen and (max-width: 835px){
.hero_text{height:40vh;display:flex;align-items:center;justify-content:center}
.hero_text div{width:100%;max-width:90%;display:flex;flex-direction:column;align-items:center;margin:unset}
.llamado-hero{display:flex;flex-direction:column;gap:0rem;width:100%;max-width:1440px}
.llamado-hero div{width:100%;max-width:90%;padding:1rem 1rem}
.destacado_amarillo{text-align:center;font-size:0.8rem;font-weight:400;padding:0.5rem 2rem;background:#ffed00;border-radius:50rem;color:#0071dc;font-weight:600;margin-top:1rem}
.llamado-hero div h1,.llamado-hero div h3,.llamado-hero div p{text-align:center}
.llamado-hero div h1{font-size:1.5rem}
.dg_img{width:100%;text-align:left}
.textos{width:100%;text-align:left}
}
@media only screen and (min-width: 428px){
h1{font-size:1.8rem}
.hero_text h3{font-size:1.5rem;margin-top:1rem}
section h2{margin-bottom:1rem}
h2{font-size:2rem}
p{font-size:1.5rem}
.btn_supermercado{font-size:1.5rem}
nav img{max-width:130px}
footer{font-size:1rem}
}
@media (max-width: 648px){
h1{font-size:1.5rem}
.hero_text h2{font-size:1.5rem}
.hero_text h3{font-size:1rem;margin-top:1rem}
section h2{margin-bottom:1rem}
h2{font-size:2rem}
p{font-size:1.5rem}
.btn_supermercado{font-size:1.5rem}
nav img{max-width:130px}
footer{font-size:1rem}
.btn-mobile{display:block;margin:auto}
.btn-desk{display:none}
}
@media (max-width: 430px){
h1,h2{font-size:1.2rem}
.hero_text h2{font-size:1.2rem}
.hero_text h3{font-size:1rem;margin-top:1rem}
section h2{margin-bottom:1rem}
p{font-size:1.5rem}
}

.verano_01{display:block;position:absolute;left:0px;top:0px;width:100%;max-width:40rem}
.verano_02{display:block;position:absolute;bottom:0rem;right:0rem;width:100%;max-width:40rem}
.titulo-verano{text-align:right !important;line-height:7rem}
.llamado-hero div h1{font-size:6rem}
.llamado-hero div h2{font-size:3.1rem}
.llamado-hero div p{font-size:2rem}
.llamado-hero{margin-right:5rem}
.llamado-hero h2{color:white;text-align:right}
.llamado-hero h2 span{color:#ffbe00}
.llamado-hero div p{text-align:right}
.llamado-hero .maps-content{display:flex;flex-direction:row;gap:1rem;justify-content:end;margin-right:0rem;padding:0rem}
.llamado-hero .llamado-principal{margin:0rem;padding:0rem}
.img-maps{width:100%;height:auto;max-width:5rem;max-height:5rem}
.legal_verano{color:#041e42;background-color:#e7f1fa;padding:1rem;border-radius:1rem;display:inline-block}
.btn_arrow{display:block;width:100%;max-width:4rem;position:relative;margin:auto;animation-name:btn-arrow;animation-duration:1.5s;animation-iteration-count:infinite}
.menu_content{padding-top:7rem}
@keyframes btn-arrow{0%   {left:0px;top:0px}
50%{left:0px;top:50px}
100%{left:0px;top:0px}
}
.menu_zonas{}
.menu_zonas a{display:inline-block;margin:0 1rem}
.menu_zonas a p{font-size:2rem;color:#FFC220;text-decoration:underline}
.boton_up{position:fixed;right:1rem;bottom:4rem;z-index:5}
@media only screen and (max-width: 1370px){
.verano_01{display:block;position:absolute;left:0px;top:0px;width:100%;max-width:30rem}
}
@media only screen and (max-width: 1081px){
.llamado-hero div h1{font-size:4rem;line-height:5rem}
.llamado-hero div h2{font-size:3rem}
.llamado-hero div p{font-size:2rem}
}
@media only screen and (max-width: 835px){
.verano_01{display:none}
.llamado-hero{display:flex;flex-direction:column;gap:0rem;width:100%;max-width:1440px;justify-content:center;margin-right:0px;height:40vh;margin-top:5rem}
.llamado-hero h2{color:white;text-align:center}
.llamado-hero div p{text-align:center}
.titulo-verano{text-align:center !important}
.llamado-hero .maps-content{display:flex;flex-direction:column;gap:1rem;justify-content:center;margin-right:0rem;padding:0rem;width:100%;max-width:1440px}
.verano_02{display:none}
.img-maps{width:100%;height:auto;max-width:5rem;max-height:5rem;margin:auto}
}
@media only screen and (max-width: 608px){
.llamado-hero div h1{font-size:3rem;line-height:4rem}
.llamado-hero div h2{font-size:2rem}
.llamado-hero div p{font-size:1.5rem}
section h2{font-size:2rem}
.llamado-hero{margin-bottom:0rem;height:30vh}
.parrafo_1{padding-top:0rem}
.titulo_parrafos{padding:3rem 2rem 2rem 2rem}
.menu_zonas a{display:block;margin:0;padding:0.5rem}
.menu_zonas{padding:0}
.menu_zonas a p{font-size:2rem;color:#FFC220;text-decoration:underline}
.menu_content{padding-top:0rem}
}