@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&display=swap');

:root {
    --azul: #1450C9;
    --amarillo: #FFAE00;
    --verde: #25d366;
}

::-moz-selection { /* for Firefox */
    color: #fff;
    background: var(--azul);
  }
  
::selection {
color: #fff;
background: var(--azul);
}

body {
    font-family: 'Montserrat', sans-serif;
}

.breadcumbs ul {
    margin: 0;
    padding: 0;
    display: flex;
}

a {
    text-decoration: none;
    color: var(--azul);
    transition: .3s;
}
a:hover {
    color: var(--amarillo);
}

h2.gen {
    text-transform: uppercase;
    font-weight: 800;
    position: relative;
    color: #fff;
    font-size: 40px;
    margin-bottom: 35px;
    text-shadow: -1px -1px 0 var(--azul), 1px -1px 0 var(--azul), -1px 1px 0 var(--azul), 1px 1px 0 var(--azul);
}

h2.line::after {
    content: ' ';
    position: absolute;
    width: 70px;
    height: 10px;
    background: var(--amarillo);
    bottom: 0;
    left: 50%;
    border-radius: 15px;
    transform: translate(-50%, 20px);
}

h2.gen span {
    color: var(--azul);
    text-shadow: none;
}

.img-fluid {
    max-width: 100%;
}

.btn {
    background: var(--amarillo);
    color: #fff;
    padding: 10px 35px 10px 75px;
    display: inline-block;
    border-radius: 50px;
    font-weight: 800;
    font-size: 18px;
    text-transform: uppercase;
    animation: pulso 2s infinite;
    position: relative;
}
.btn:hover {
    color: var(--azul);
    background: #fff;
}

.btn.v2 {
    animation:initial;
}

.btn.v2:hover {
    color: #fff;
    background: var(--amarillo);
    animation: pulso 2s infinite;
}

.btn.v2:hover img {
    filter: initial;
}

.btn img {
    max-height: 35px;
    position: absolute;
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
}

.btn:hover img {
    filter: brightness(0) saturate(100%) invert(61%) sepia(85%) saturate(1211%) hue-rotate(1deg) brightness(105%) contrast(102%);
}

@keyframes pulso {
	0% {
	  -moz-box-shadow: 0 0 0 0 rgba(255, 174, 0, 0.8);
	  box-shadow: 0 0 0 0 rgba(255, 174, 0, 0.8);
	}
	70% {
		-moz-box-shadow: 0 0 0 15px rgba(255, 174, 0, 0);
		box-shadow: 0 0 0 15px rgba(255, 174, 0, 0);
	}
	100% {
		-moz-box-shadow: 0 0 0 0 rgba(255, 174, 0, 0);
		box-shadow: 0 0 0 0 rgba(255, 174, 0, 0);
	}
}

@keyframes pulsowa {
	0% {
	  -moz-box-shadow: 0 0 0 0 rgba(37, 211, 101, 0.8);
	  box-shadow: 0 0 0 0 rgba(37, 211, 101, 0.8);
	}
	70% {
		-moz-box-shadow: 0 0 0 15px rgba(37, 211, 101, 0);
		box-shadow: 0 0 0 15px rgba(37, 211, 101, 0);
	}
	100% {
		-moz-box-shadow: 0 0 0 0 rgba(37, 211, 101, 0);
		box-shadow: 0 0 0 0 rgba(37, 211, 101, 0);
	}
}

.btn.v2.wa {
    background: var(--verde);
}
.btn.v2.wa:hover {
    animation: pulsowa 2s infinite;
}


.whatsapp {
    background: #25d366;
    color: #fff;
    padding: 8px;
    display: block;
    border-radius: 6px;
}
.whatsapp img {
    max-width: 20px;
}
.whatsapp:hover {
    color: #fff;
    background: #21be5b;
}


/* NAVIGATION */
header.top {
    padding: 20px 0;
    position: fixed;
    top: 0;
    transition: .3s;
    width: 100%;
    background: #fff;
    z-index: 10;
}
header.top.sticky {
    box-shadow: 10px 13px 26px -16px rgba(0, 0, 0, 0.05);
}
header.top .container {
    display: flex;
    align-items: center;
}

header.top .logo {
    margin-right: auto;
}

header.top .logo img {
    width: 175px;
    transform: translateY(-7px);
}

header.top nav.igation {
    font-weight: 600;
    text-transform: uppercase;
}

header.top nav.igation li {
    display: inline-block;
    /* border-right: solid 2px var(--azul); */
    padding: 0px;
}

header.top nav.igation li:last-child {
    border-right: none;
    padding-right: 0;
}

header.top nav.igation a {
    padding: 7px 10px;
    font-weight: 700;
    border-radius: 10px;
    font-size: 13px;
}
header.top nav.igation a:hover, header.top nav.igation a.active {
    color: var(--amarillo);
    /* background: var(--azul); */
}
.menu #nav {
    display: block;
}
header.top nav.igation a.cta {
    background: var(--azul);
    color: #fff;
    padding: 10px 18px;
}
header.top nav.igation a.cta:hover {
    background: var(--amarillo);
}
header.top nav.igation a.cta img {
    transform: translateY(-2px);
}
/* /NATIGATION */

/* SLIDER PROMO */
section.slidepromo {
    padding-top: 110px;
}
section.slidepromo .owl-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
}
/* /SLIDER PROMO */
/* SERVICES */
section.servicios {
    padding: 150px 0;
    text-align: center;
    background-image: url('/img/bgpresentacion.webp');
}

section.servicios h2.gen {
    margin-bottom: 50px;
}

.cajaservicio {
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.12);
    padding: 30px 30px 20px;
    border-radius: 10px;
    background: linear-gradient(#ffffff 50%, var(--azul) 50%);
    background-size: 100% 200%;
    background-position: 0 2.5%;
    transition: .3s;
    position: relative;
}
.cajaservicio:hover, .cajaservicio.active {
    background-position: 0 100%;
}
.cajaservicio:hover .circle, .cajaservicio.active .circle {
    background: #fff;
}
.cajaservicio .circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--azul);
    margin: 0 auto 20px;
    position: relative;
    transition: .3s;
}

.cajaservicio .circle img {
    max-width: 65px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: invert()

}
.cajaservicio:hover .circle img, .cajaservicio.active .circle img {
    filter: brightness(0) saturate(100%) invert(19%) sepia(81%) saturate(2616%) hue-rotate(210deg) brightness(86%) contrast(112%);
}

.cajaservicio h3 {
    font-weight: 600;
    font-size: 18px;
    transition: .3s;
}

.cajaservicio:hover h3, .cajaservicio.active h3 {
    color: #fff;
}
.cajaservicio:hover p, .cajaservicio.active p {
    color: #fff;
}
/* /SERVICES */

/* CTA */
section.cta {
    /* background-color: var(--azul);
    background-image: url('/img/bgcta.webp');
    padding: 140px 0; */
    text-align: center;
    position: relative;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}
section.cta h2 {
    color: #fff;
    font-weight: 800;
    margin-bottom: 10px;
    font-size: 45px;
}
section.cta p {
    color: #fff;
    font-size: 22px;
    /* background: rgba(1, 65, 179, 0.7); */
    display: block;
    width: fit-content;
    margin: 0 auto 20px;
    padding: 2px 14px;
    font-weight: 600;
}
section.cta #particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}
/* /CTA */

/* BENEFICIOS */
section.beneficios {
    padding: 150px 0 90px;
    text-align: center;
}
section.beneficios .row {
    max-width: 950px;
    margin: 0 auto;
}
section.beneficios p {
    font-size: 25px;
    font-weight: 600;
    color: #626161;
    margin-bottom: 30px;
}

section.beneficios .cajabeneficio {
    background: var(--azul);
    color: #fff;
    border-radius: 16px;
    padding: 40px 20px;
}
section.beneficios .cajabeneficio img {
    max-height: 70px;
    filter: brightness(0) saturate(100%) invert(71%) sepia(18%) saturate(5653%) hue-rotate(0deg) brightness(103%) contrast(105%);
}
section.beneficios .cajabeneficio h3 {
    font-size: 15px;
    margin-top: 11px;
    font-weight: 600;
}
.circulo {
    background: #fff;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: relative;
    margin-bottom: 30px;
}
.circulo img {
    filter: brightness(0) saturate(100%) invert(19%) sepia(81%) saturate(2616%) hue-rotate(210deg) brightness(86%) contrast(112%);
    max-width: 65px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* /BENEFICIOS */

/* WHY */
section.why {
    padding-bottom: 90px;
}
section.why .feature {
    border: solid 3px var(--azul);
    padding: 10px 30px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    color: var(--azul);
    width: max-content;
}
section.why .feature h3 {
    font-size: 22px;
    line-height: 20px;
    margin: 0;
    font-weight: 700;
}
section.why .feature img {
    max-height: 45px;
    margin-right: 15px;
    /* filter: brightness(0) saturate(100%) invert(14%) sepia(56%) saturate(5529%) hue-rotate(217deg) brightness(100%) contrast(99%); */
}
/* /WHY */

/* FOTOS */
section.fotos {
    padding: 90px 0 150px;
}
section.fotos .item img {
    opacity: .5;
    transition: .4s;
    cursor: zoom-in;
}
section.fotos:hover img {
    opacity: .6;
}
section.fotos .item img:hover {
    opacity: 1;
    transform: scale(1.13);
}
section.fotos .modal img {
    opacity: 1;
}
/* /FOTOS */

/* NOTICIAS */
section.noticias {
    padding: 0 0 90px;
    text-align: center;
}
section.noticias .noticia {
    box-shadow: 10px 13px 26px -16px rgba(0,0,0,0.15);
    border-radius: 20px;
    transition: .3s;
    margin-bottom: 40px;
}
section.noticias .noticia:hover {
    box-shadow: 10px 13px 26px -16px rgba(0,0,0,0.40);
}
section.noticias .noticia .imagen {
    background: var(--azul);
    width: 100%;
    height: 210px;
    border-radius: 20px 20px 0 0;
    background-size: cover;
    background-position: center;
    position: relative;
}
section.noticias .noticia .titulo {
    border-radius: 0 0 20px 20px;
}
section.noticias .noticia .titulo h3 {
    font-size: 20px;
    font-weight: 600;
    padding: 20px 30px 30px;
}
section.noticias .noticia:hover {
    transform: scale(1.02);
}
section.noticias .categoria {
    position: absolute;
    left: 0;
    bottom: 20px;
    background: var(--azul);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    padding: 5px 10px 5px 20px;
}
section.noticias .cat {
    background: var(--azul);
    color: #fff;
    text-transform: uppercase;
    width: max-content;
    margin: 0 auto 5px;
    padding: 2px 12px;
    border-radius: 15px;
    font-size: 14px;
}

.thumbnail {
    max-width: 760px;
    aspect-ratio: 16 / 9;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto 30px;
    border-radius: 15px;
}
.titulonoticia {
    color: var(--azul);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 30px;
}

section.noticias .categorias {
    max-width: 768px;
    margin: 0 auto 30px;
}
section.noticias .categorias .cat {
    background: var(--azul);
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
section.noticias .categorias .cat:hover span {
    transform: translateY(-10px);
}
section.noticias .categorias .cat:hover .info {
    opacity: 1;
}
section.noticias .categorias .cat span {
    font-size: 20px;
    font-weight: 700;
    transition: .3s;
}
section.noticias .categorias .cat .info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0%);
    font-size: 12px;
    opacity: 0;
    transition:all .3s linear;
    color: var(--amarillo);
} 
section.noticias .categorias .cat a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
section.noticias .categorias .cat::after {
    content: ' ';
    width: 50px;
    height: 10px;
    background: var(--amarillo);
    position: absolute;
    bottom: -5px;
    border-radius: 5px;
}
/* /NOTICIAS */

/* PLANES */
section.planes {
    padding: 90px 0
}

section.planes:hover .plan {
    opacity: .7;
}

section.planes .plan {
    background: var(--azul);
    border-radius: 20px;
    text-align: center;
    padding: 25px 10px;
    color: #fff;
    max-width: 290px;
    margin: 0 auto 50px;
    transition: .3s;
}
section.planes .plan:hover {
    transform: scale(1.03);
    opacity: 1;
}
.plan h3 {
    font-weight: 600;
    position: relative;
    margin-bottom: 50px;
}
.plan p {
    margin-bottom: 0;
}
.plan h3::after {
    content: ' ';
    position: absolute;
    width: 70px;
    height: 10px;
    background: var(--amarillo);
    bottom: 0;
    left: 50%;
    border-radius: 15px;
    transform: translate(-50%, 20px);
}
.plan .highlight {
    background: #fff;
    width: max-content;
    color: var(--azul);
    padding: 5px 15px;
    border-radius: 5px;
    font-size: 25px;
    margin: 0 auto 20px;
    font-weight: 700;
}
.plan .cloud {
    max-width: 80px;
}
/* /PLANES */

/* FOOTER */
footer {
    background: #1450C9;
    color: #fff;
    padding: 70px 20px 100px;
}
footer .logo {
    max-width: 160px;
}
footer h2 {
    font-weight: 798;
    font-size: 22px;
    line-height: 24px;
    text-transform: uppercase;
}
footer a {
    color: #fff;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 600;
  }
footer ul.sitemapfooter {
    display: block;
}
footer ul.sitemapfooter li {
    list-style: none;
}
footer .reclamaciones {
    text-align: center;
}
footer .reclamaciones a {
    font-size: 15px;
    text-transform: none;
    line-height: 17px;
    display: block;
    width: max-content;
    margin: 0 auto;
}
footer .reclamaciones svg {
    max-width: 70px;
    margin-bottom: 7px;
}
footer .socials img, .comunicate img {
    filter: brightness(0) saturate(100%) invert(79%) sepia(26%) saturate(7497%) hue-rotate(1deg) brightness(105%) contrast(103%);
    height: 25px;
}
/* /FOOTER */

/* PÁGINA */
section.pagina {
    padding: 110px 0; 
}
/* /PÁGINA */

/* MIGAS DE PAN */
.breadcumbs {
    background: var(--azul);
    color: #fff;
    padding: 12px 0;
    font-size: 13px;
}
.breadcumbs a {
    color: #fff;
}
.breadcumbs .active {
    font-weight: bold;
}
.breadcumbs li {
    display: flex;
    padding: 0 20px;
    position: relative;
}
.breadcumbs li::after {
    content: "/";
    position: absolute;
    right: 0;
    opacity: .3;
}
.breadcumbs li:last-child:after {
    content: none;
}
.breadcumbs li a {
}
.breadcumbs li img {
    max-width: 14px;
}
/* /MIGAS DE PAN */

/* TITULO */
section.pagina .titulo {
    background-image: url('/img/bgtitle2.webp');
    /* background-size: cover; */
    background-position: top center;
    color: #fff;
    padding: 90px 0;
}
section.pagina .titulo.v2 {
    background-image: url('/img/bgcta.webp');
}

section.pagina .clientes {
    text-align: center;
}

.clientes h2 {
    color: var(--azul);
    font-weight: 700;
}

p.hl {
    font-size: 16px;
    font-weight: 600;
    color: #626161;
    margin-bottom: 30px;
    max-width: 760px;
    margin: 0 auto 50px;
}

/* MARCAS */
.marcas .item img {
    max-height: 140px;
    width: auto;
}
.marcas .a img {
    max-height: 80px;
    margin: 0 20px;
}
.slidermarcas .item img {
    max-height: 130px;
    width: auto;
}

.slidermarcas .item img {
    display: initial;
}

/* COBERTURA */
.cobertura {
    text-align: center;
}
.boxlight {
    background: #fff;
    border-radius: 20px;
    padding: 40px 50px;
}
section.cta .mapaform h2 {
    font-size: 25px;
}
/* /COBERTURA */

/* METODOS DE PAGO */
.pagos {
    background: #0b43ba;
    color: #fff;
    padding: 80px 0;
}
.pagos a{
    color: #fff;
}
.pagos h3 {
    background: #fff;
    color: var(--azul);
    padding: 10px 20px;
    border-radius: 17px;
    width: fit-content;
    margin: 0 auto 10px;
    font-weight: bold;
    text-transform: uppercase;
}
.pagos .contactos {
    max-width: 768px;
    margin: 0 auto;
}
.pagos .contactos h4 {
    font-weight: bold;
    text-transform: uppercase;
}
.pagos .contactos p {
    margin-bottom: 0px;
}
.app {
    text-align: center;
    padding: 80px 0 0;
}
.app .order {
    max-height: 125px;
}
.app h4 {
  font-size: 20px;
  color: #0b43ba;
  font-weight: 600;
  margin: 10px 0;
}
.app h4 span {
    color: #000;
}
/* /METODOS DE PAGO */

/* CONTACTO */
.boxblue {
    background: var(--azul);
    color: #fff;
    border-radius: 20px;
    padding: 40px 50px;
}
section.contactos {
    padding: 80px 0;
    text-align: center;
}
section.contactos .centrales {
    background-color: var(--azul);
    color: #fff;
    padding: 30px;
    border-radius: 24px;
    text-align: left;
}

section.contactos .centrales h3 {
    background: #fff;
    color: var(--azul);
    font-size: 18px;
    width: fit-content;
    padding: 5px 20px;
    border-radius: 20px;
    margin: 0 auto 10px;
    font-weight: 600;
    text-transform: uppercase;
}
section.contactos .centrales .phone {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
}
section.contactos .centrales .icon {
    filter: brightness(0) saturate(100%) invert(79%) sepia(26%) saturate(7497%) hue-rotate(1deg) brightness(105%) contrast(103%);
    height: 25px;
}
section.contactos .centrales .email .icon {
    height: 18px;
}
section.contactos .centrales p {
    max-width: 300px;
    margin: 0 auto;
}
section.contactos p {
    margin-bottom: 5px
}
section.contactos .sede {
    border: solid 1px #ccc;
    border-radius: 20px;
    padding: 20px;
    text-align: center;
}
section.contactos .sede h3 {
    background: var(--azul);
    font-size: 20px;
    text-transform: uppercase;
    font-weight: bold;
    color: #fff;
    border-radius: 0 0 20px 20px;
    padding: 5px;
}

section.contactos .sede .thumb {
    width: 100%;
    border-radius: 20px 20px 0 0;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
  }

section.contactos .sede h4 {
    font-size: 17px;
    margin-bottom: 0;
}

section.contactos .sede p {
    color: var(--azul);
    font-weight: bold;
}

/* /CONTACTO */

/* WSP */
.wsp {
    position: fixed;
    right: 20px;
    bottom: 35px;
    background: var(--verde);
    border-radius: 30px;
    box-shadow: 10px 13px 26px -16px rgba(0,0,0,0.25);
    /* padding: 5px 25px 10px 55px; */
    z-index: 100;
    height: 60px;
    width: 60px;
    transition: all .3s;
    overflow: hidden;
}

.wsp img {
    width: 35px;
    position: absolute;
    left: 13px;
    top: 12px;
}

.wsp .txt {
    color: #fff;
    font-weight: 700;
    opacity: 0;
    transition: opacity .3s ease-out;
    position: absolute;
    left: 60px;
    font-size: 17px;
    line-height: 18px;
    top: 11px;
    width: max-content;
}

.wsp:hover {
    width: 210px;
}
.wsp:hover > .txt {
    opacity: 1;
}

/* SEARCH */
.search {
    position: fixed;
    right: 20px;
    bottom: 195px;
    background: var(--azul);
    border-radius: 30px;
    box-shadow: 10px 13px 26px -16px rgba(0,0,0,0.25);
    /* padding: 5px 25px 10px 55px; */
    z-index: 100;
    height: 60px;
    width: 60px;
    cursor: pointer;
}
.search:hover {
    animation: pulso 2s infinite;
}
.search img {
    filter: brightness(0) saturate(100%) invert(79%) sepia(26%) saturate(7497%) hue-rotate(1deg) brightness(105%) contrast(103%);
    height: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .3s;
}
.search:hover > img {
    transform: translate(-50%, -50%) scale(1.2);
}

/* LLAMAR */
.llamar {
    position: fixed;
    right: 20px;
    bottom: 115px;
    background: var(--azul);
    border-radius: 30px;
    box-shadow: 10px 13px 26px -16px rgba(0,0,0,0.25);
    /* padding: 5px 25px 10px 55px; */
    z-index: 100;
    height: 60px;
    width: 60px;
    transition: all .3s;
    overflow: hidden;
}
.llamar:hover {
    width: 210px;
}
.llamar:hover > .sub, .llamar:hover > .numero {
    display: block;
    opacity: 1;
} 
.llamar .sub {
    
    color: var(--amarillo);
    font-weight: bold;
    font-size: 14px;
    position: absolute;
    top: 4px;
    left: 60px;
    transition: opacity .3s ease-out;
    opacity: 0;
    transition-delay: .3s;
    width:max-content;
}
.llamar .numero {
    
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    line-height: 20px;
    position: absolute;
    left: 60px;
    transition: opacity .3s ease-out;
    opacity: 0;
    transition-delay: .3s;
    width:max-content;
}
.llamar img.phone {
    filter: brightness(0) saturate(100%) invert(79%) sepia(26%) saturate(7497%) hue-rotate(1deg) brightness(105%) contrast(103%);
    height: 30px;
    position: absolute;
    left: 14px;
    top: 17px;
}
.llamar a, .wsp a  {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
/* /LLAMAR */

/* RESPONSIVE */
@media (max-width: 768px)  {
    footer {
        padding: 70px 20px 150px;
    }
    footer .contacto {
        width: max-content;
        margin: 0 auto;
        text-align: center;
    }
    footer ul, footer h2 {
        text-align: center;
    }
    footer h2 { 
        margin-bottom: 30px;
    }
    footer .sitemapfooter a {
        display: block;
        font-size: 18px;
        margin-bottom: 15px;
    }
    section.slidepromo .owl-carousel .owl-item img {
        aspect-ratio: 2 / 1;
        object-fit: cover;
        object-position: center;
    }
    section.slidepromo .owl-dots {
        display: none;
    }
    h2.gen, section.cta h2 {
        font-size: 30px;
    }
    section.cta p, section.beneficios p {
        font-size: 17px;
    }
    section.servicios, section.beneficios {
        padding: 80px 0;
    }
    section.why .feature {
        width: auto;
    }
    section.why .feature h3 {
        font-size: 20px;
        line-height: 25px;
        font-weight: 600;
    }
    section.why h2 {
        text-align: center;
    }
    .mapa {
        margin-top: 50px;
    }
    section.servicio {
        text-align: center;
    }
    section.servicio .circulo {
        margin: 0 auto 30px;
    }
}
/* /RESPONSIVE */