/* ==============================================================
   VARIABLES & BASE
=============================================================== */
:root{
  --font-default: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-primary: "Montserrat", sans-serif;
  --font-secondary: "Poppins", sans-serif;

  --color-default: #222222;
  --color-primary: #008374;
  --color-secondary: #f85a40;

  scroll-behavior: smooth;
}

body{ font-family: var(--font-default); color: var(--color-default); }
a{ color: var(--color-primary); text-decoration: none; }
a:hover{ color:#00b6a1; text-decoration: none; }
h1,h2,h3,h4,h5,h6{ font-family: var(--font-primary); }

/* ==============================================================
   SECTION WRAPPER & TITLES
=============================================================== */
section{ padding:60px 0; overflow:hidden; }
.sections-bg{ background-color:#f6f6f6; }

.section-header{ text-align:center; padding-bottom:10px; }
.section-header h2{
  font-size:32px; font-weight:600; margin-bottom:20px; padding-bottom:20px;
  position:relative; color:rgba(254,7,24,1);
}
.section-header h2:after{
  content:""; position:absolute; left:0; right:0; bottom:0; margin:auto;
  width:50px; height:3px; background:var(--color-primary);
}
.section-header p{ margin-bottom:0; color:#6f6f6f; }

/* ==============================================================
   BREADCRUMBS
=============================================================== */
.breadcrumbs .page-header{
  padding:60px 0; min-height:20vh; position:relative; background:var(--color-primary);
}
.breadcrumbs .page-header h2{
  font-size:56px; font-weight:500; color:#fff; font-family:var(--font-secondary);
}
.breadcrumbs .page-header p{ color:rgba(255,255,255,.8); }
.breadcrumbs nav{ background:#f6f6f6; padding:20px 0; }
.breadcrumbs nav ol{
  display:flex; flex-wrap:wrap; list-style:none; margin:0; padding:0;
  font-size:16px; font-weight:600; color:var(--color-default);
}
.breadcrumbs nav ol a{ color:var(--color-primary); transition:.3s; }
.breadcrumbs nav ol a:hover{ text-decoration:underline; }
.breadcrumbs nav ol li+li{ padding-left:10px; }
.breadcrumbs nav ol li+li::before{
  display:inline-block; padding-right:10px; color:var(--color-secondary); content:"/";
}

/* ==============================================================
   SCROLL TOP
=============================================================== */
.scroll-top{
  position:fixed; right:15px; bottom:-15px; z-index:99999;
  width:44px; height:44px; border-radius:50%;
  visibility:hidden; opacity:0; background:rgba(254,7,24,1); transition:all .4s;
}
.scroll-top i{ font-size:24px; color:#fff; line-height:0; }
.scroll-top:hover{ background:rgba(248,90,64,.8); color:#fff; }
.scroll-top.active{ visibility:visible; opacity:1; bottom:15px; }

/* ==============================================================
   PRELOADER
=============================================================== */
#preloader{
  position:fixed; inset:0; z-index:999999; overflow:hidden; background:#fff; transition:all .6s ease-out;
}
#preloader:before{
  content:""; position:fixed; top:calc(50% - 50px); left:calc(50% - 50px);
  width:100px; height:100px; border-radius:50%;
  background:url("../../images/logocredisur.png") center/contain no-repeat;
  animation:animate-preloader 1.5s linear infinite;
}
@keyframes animate-preloader{ 0%{transform:scale(.7)}50%{transform:scale(1)}100%{transform:scale(.7)} }

/* ==============================================================
   AOS MOBILE (disable delay)
=============================================================== */
@media (max-width:768px){ [data-aos-delay]{ transition-delay:0 !important; } }

/* ==============================================================
   HEADER / TOPBAR / NAV
=============================================================== */
.topbar{
  background:#00796b; height:40px; font-size:14px; color:#fff; padding:0; transition:all .5s;
}
.topbar .contact-info i{ font-style:normal; color:#fff; line-height:0; }
.topbar .contact-info i a,.topbar .contact-info i span{ padding-left:5px; color:#fff; }
@media (max-width:575px){ .topbar .contact-info i a,.topbar .contact-info i span{ font-size:13px; } }
.topbar .contact-info i a{ transition:.3s; }
.topbar .contact-info i a:hover{ color:#fff; text-decoration:underline; }
.topbar .social-links a{ color:rgba(255,255,255,.7); margin-left:20px; transition:.3s; }
.topbar .social-links a:hover{ color:#fff; }

.header{
  height:90px; z-index:997; background:var(--color-primary); transition:all .5s;
}
.header.sticked{
  position:fixed; inset:0 0 auto 0; height:70px; box-shadow:0 2px 10px rgba(254,7,24,1);
}
.header .logo img{ max-height:40px; margin-right:6px; }
.header .logo h1{
  font-size:30px; margin:0; font-weight:600; letter-spacing:.8px; color:rgba(31,38,178,1); font-family:var(--font-primary);
}
.header .logo h1 span{ color:#f96f59; }

.sticked-header-offset{ margin-top:70px; }
section{ scroll-margin-top:70px; }

/* Desktop nav */
@media (min-width:1280px){
  .navbar{ padding:0; }
  .navbar ul{ margin:0; padding:0; display:flex; list-style:none; align-items:center; }
  .navbar li{ position:relative; }
  .navbar>ul>li{ white-space:nowrap; padding:10px 0 10px 28px; }

  .navbar a,.navbar a:focus{
    display:flex; align-items:center; justify-content:space-between;
    padding:0 3px; font-family:var(--font-secondary); font-size:16px; font-weight:600;
    color:rgba(31,38,178,1); white-space:nowrap; transition:.3s; position:relative;
  }
  .navbar a i,.navbar a:focus i{ font-size:12px; line-height:0; margin-left:5px; }

  .navbar>ul>li>a:before{
    content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px;
    background:var(--color-secondary); visibility:hidden; transition:all .3s ease-in-out;
  }
  .navbar a:hover:before,.navbar li:hover>a:before,.navbar .active:before{ visibility:visible; width:100%; }
  .navbar a:hover,.navbar .active,.navbar .active:focus,.navbar li:hover>a{ color:rgba(254,7,24,1); }

  .navbar .dropdown ul{
    position:absolute; left:28px; top:calc(100% + 30px);
    margin:0; padding:10px 0; z-index:99; opacity:0; visibility:hidden; transition:.3s;
    background:#fff; border-radius:4px; box-shadow:0 0 30px rgba(127,137,161,.25);
  }
  .navbar .dropdown ul li{ min-width:200px; }
  .navbar .dropdown ul a{ padding:10px 20px; font-size:15px; font-weight:600; color:#006a5d; }
  .navbar .dropdown ul a:hover,.navbar .dropdown ul .active:hover,.navbar .dropdown ul li:hover>a{ color:var(--color-secondary); }
  .navbar .dropdown:hover>ul{ opacity:1; top:100%; visibility:visible; }

  .navbar .dropdown .dropdown ul{ top:0; left:calc(100% - 30px); visibility:hidden; }
  .navbar .dropdown .dropdown:hover>ul{ opacity:1; left:100%; visibility:visible; }
}
@media (min-width:1280px) and (max-width:1366px){
  .navbar .dropdown .dropdown ul{ left:-90%; }
  .navbar .dropdown .dropdown:hover>ul{ left:-100%; }
}
@media (min-width:1280px){ .mobile-nav-show,.mobile-nav-hide{ display:none; } }
@media (max-width:991px){ div.agencias div.columna1:after{ display:none !important; } }

/* Mobile nav */
@media (max-width:1279px){
  .navbar{
    position:fixed; top:0; right:-100%; bottom:0; width:100%; max-width:220px; z-index:9997; transition:.3s;
  }
  .navbar ul{
    position:absolute; inset:0; padding:50px 0 10px; margin:0;
    background:rgba(255,255,255,.9); overflow-y:auto; z-index:9998; transition:.3s;
  }
  .navbar a,.navbar a:focus{
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 20px; font-family:var(--font-primary); font-size:15px; font-weight:600; color:rgba(28,39,177,1); transition:.3s;
  }
  .navbar a:hover,.navbar .active,.navbar .active:focus,.navbar li:hover>a{ color:rgba(254,7,24,1); }

  .navbar .getstarted,.navbar .getstarted:focus{
    background:var(--color-primary); padding:8px 20px; border-radius:4px; margin:15px; color:#fff;
  }
  .navbar .getstarted:hover,.navbar .getstarted:focus:hover{ color:#fff; background:rgba(0,131,116,.8); }

  .navbar .dropdown ul,.navbar .dropdown .dropdown ul{
    position:static; display:none; padding:10px 0; margin:10px 20px;
    background:#007466; border:1px solid #006459; transition:all .5s ease-in-out;
  }
  .navbar .dropdown>.dropdown-active,.navbar .dropdown .dropdown>.dropdown-active{ display:block; }

  .mobile-nav-show{
    color:rgba(28,39,177,1); font-size:28px; cursor:pointer; line-height:0; transition:.5s; z-index:9999; margin-right:10px;
  }
  .mobile-nav-hide{
    color:#fff; font-size:32px; cursor:pointer; line-height:0; transition:.5s; position:fixed; right:20px; top:20px; z-index:9999;
  }
  .mobile-nav-active{ overflow:hidden; }
  .mobile-nav-active .navbar{ right:0; }
  .mobile-nav-active .navbar:before{
    content:""; position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:9996;
  }
}

/* ==============================================================
   ABOUT
=============================================================== */
.about h3{ font:700 28px var(--font-secondary); margin-bottom:20px; }
.about .call-us{
  left:10%; right:10%; bottom:0; background:#fff; box-shadow:0 2px 25px rgba(0,0,0,.08); padding:20px; text-align:center;
}
.about .call-us h4{ font-size:24px; font-weight:700; margin-bottom:5px; }
.about .call-us p{ font-size:28px; font-weight:700; color:var(--color-primary); }
.about .content ul{ list-style:none; padding:0; }
.about .content ul li{ padding:0 0 10px 30px; position:relative; }
.about .content ul i{
  position:absolute; left:0; top:-3px; font-size:20px; color:var(--color-primary);
}
.about .content p:last-child{ margin-bottom:0; }

.about .play-btn{
  width:94px; height:94px; border-radius:50%; display:block; position:absolute;
  left:calc(50% - 47px); top:calc(50% - 47px);
  background:radial-gradient(var(--color-primary) 50%, rgba(0,131,116,.4) 52%); overflow:hidden;
}
.about .play-btn:before{
  content:""; position:absolute; top:-15%; left:-15%; width:120px; height:120px; border-radius:50%;
  border:5px solid rgba(0,131,116,.7); animation:pulsate-btn 2s steps infinite forwards; opacity:1;
  background:transparent;
}
.about .play-btn:after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-40%,-50%);
  width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:15px solid #fff; z-index:100;
  transition:all 400ms cubic-bezier(.55,.055,.675,.19);
}
.about .play-btn:hover:before{ animation:none; border:none; border-radius:0; }
.about .play-btn:hover:after{ border-left-color:var(--color-primary); transform:scale(20); }

@keyframes pulsate-btn{ 0%{transform:scale(.6);opacity:1} 100%{transform:scale(1);opacity:0} }

/* ==============================================================
   CLIENTS
=============================================================== */
.clients{ padding:40px 0; }
.clients .swiper{ padding:10px 0; }
.clients .swiper-slide img{ transition:.3s; }
.clients .swiper-slide img:hover{ transform:scale(1.1); }
.clients .swiper-pagination{ margin-top:20px; position:relative; }
.clients .swiper-pagination .swiper-pagination-bullet{ width:12px; height:12px; opacity:1; background:#ddd; }
.clients .swiper-pagination .swiper-pagination-bullet-active{ background:var(--color-primary); }

/* ==============================================================
   STATS
=============================================================== */
.stats-counter{ padding:40px 0; }
.stats-counter .stats-item{ padding:20px 0; border-bottom:1px solid #e4e4e4; }
.stats-counter .stats-item .purecounter{ min-width:90px; padding-right:15px; }
.stats-counter .stats-item i{ font-size:44px; line-height:0; margin-right:15px; }
.stats-counter .stats-item span{
  font-size:40px; line-height:40px; display:block; font-weight:700; color:rgba(255,0,1,1);
}
.stats-counter .stats-item p{ margin:0; font:14px var(--font-primary); }

/* ==============================================================
   CTA
=============================================================== */
.call-to-action .container{
  padding:100px 60px; border-radius:15px; overflow:hidden;
  background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)), url("../img/cta-bg.jpg") center/cover;
}
.call-to-action h3{ color:#fff; font-size:28px; font-weight:700; margin-bottom:20px; }
.call-to-action p{ color:#fff; margin-bottom:20px; }
.call-to-action .play-btn{
  width:94px; height:94px; margin-bottom:20px; border-radius:50%; display:inline-block; position:relative; overflow:hidden;
  background:radial-gradient(var(--color-primary) 50%, rgba(0,131,116,.4) 52%);
}
.call-to-action .play-btn:before{
  content:""; position:absolute; top:-15%; left:-15%; width:120px; height:120px; border-radius:50%;
  border:5px solid rgba(0,131,116,.7); animation:pulsate-btn 2s steps infinite forwards;
}
.call-to-action .play-btn:after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-40%,-50%);
  width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:15px solid #fff; z-index:100;
  transition:all 400ms cubic-bezier(.55,.055,.675,.19);
}
.call-to-action .play-btn:hover:before{ animation:none; border:none; border-radius:0; }
.call-to-action .play-btn:hover:after{ border-left-color:var(--color-primary); transform:scale(20); }
.call-to-action .cta-btn{
  font-family:var(--font-primary); font-weight:500; font-size:16px; letter-spacing:1px;
  display:inline-block; padding:12px 48px; border-radius:50px; margin:10px; transition:.5s;
  border:2px solid #fff; color:#fff;
}
.call-to-action .cta-btn:hover{ background:var(--color-primary); border-color:var(--color-primary); }

/* ==============================================================
   SERVICES
=============================================================== */
.services{ padding:60px 0; }
.services .service-item{
  padding:40px; background:#fff; height:100%; border-radius:10px; border:2px solid #f00;
}
.services .service-item .icon{ width:48px; height:48px; position:relative; margin-bottom:50px; }
.services .service-item .icon i{ color:var(--color-default); font-size:56px; transition:ease-in-out .3s; z-index:2; position:relative; }
.services .service-item .icon:before{
  content:""; position:absolute; top:10px; right:-20px; width:100%; height:100%;
  background:#eee; border-radius:50px; z-index:1; transition:.3s;
}
.services .service-item h3{
  color:var(--color-default); font-weight:700; margin:0 0 20px; padding-bottom:8px;
  font-size:22px; position:relative; display:inline-block; border-bottom:4px solid #eee; transition:.3s;
}
.services .service-item p{ line-height:24px; font-size:14px; margin-bottom:0; }
.services .service-item .readmore{ margin-top:15px; display:inline-block; color:var(--color-primary); }
.services .service-item:hover .icon:before{ background:#00b6a1; }
.services .service-item:hover h3{ border-color:var(--color-primary); }

/* ==============================================================
   TESTIMONIALS
=============================================================== */
.testimonials .testimonial-wrap{ padding-left:10px; }
.testimonials .testimonial-item{
  box-sizing:content-box; padding:30px; margin:30px 10px; background:#fff;
  box-shadow:0 0 15px rgba(0,0,0,.1); border-radius:10px; position:relative;
}
.testimonials .testimonial-item .testimonial-img{ width:90px; border-radius:50px; margin-right:15px; }
.testimonials .testimonial-item h3{ font-size:18px; font-weight:700; margin:10px 0 5px; color:#000; }
.testimonials .testimonial-item h4{ font-size:14px; color:#999; margin:0; }
.testimonials .testimonial-item .stars{ margin:10px 0; }
.testimonials .testimonial-item .stars i{ color:#ffc107; margin:0 1px; }
.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right{ color:#009d8b; font-size:26px; line-height:0; }
.testimonials .testimonial-item .quote-icon-left{ display:inline-block; left:-5px; position:relative; }
.testimonials .testimonial-item .quote-icon-right{ display:inline-block; right:-5px; position:relative; top:10px; transform:scale(-1,-1); }
.testimonials .testimonial-item p{ font-style:italic; margin:15px auto; }
.testimonials .swiper-pagination{ margin-top:20px; position:relative; }
.testimonials .swiper-pagination .swiper-pagination-bullet{ width:12px; height:12px; background:rgba(0,0,0,.2); opacity:1; }
.testimonials .swiper-pagination .swiper-pagination-bullet-active{ background:var(--color-primary); }
@media (max-width:767px){
  .testimonials .testimonial-wrap{ padding-left:0; }
  .testimonials .testimonial-item{ padding:30px; margin:15px; }
  .testimonials .testimonial-item .testimonial-img{ position:static; left:auto; }
}

/* ==============================================================
   PORTFOLIO
=============================================================== */
.portfolio .portfolio-flters{
  padding:0 0 20px; margin:0 auto; list-style:none; text-align:center;
}
.portfolio .portfolio-flters li{
  cursor:pointer; display:inline-block; padding:0; margin:0 10px;
  font-size:18px; font-weight:500; line-height:1; transition:all .3s ease-in-out;
}
.portfolio .portfolio-flters li:hover,.portfolio .portfolio-flters li.filter-active{ color:var(--color-primary); }
@media (max-width:575px){ .portfolio .portfolio-flters li{ font-size:14px; margin:0 5px; } }

.portfolio .portfolio-wrap{
  border-radius:10px; height:100%; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.1);
}
.portfolio .portfolio-wrap img{ transition:.3s; position:relative; z-index:1; }
.portfolio .portfolio-wrap .portfolio-info{
  padding:25px 20px; background:#fff; position:relative; border-top:1px solid #f3f3f3; z-index:2;
}
.portfolio .portfolio-wrap .portfolio-info h4{ font-size:18px; font-weight:600; padding-right:50px; }
.portfolio .portfolio-wrap .portfolio-info h4 a{ color:var(--color-default); transition:.3s; }
.portfolio .portfolio-wrap .portfolio-info h4 a:hover{ color:var(--color-primary); }
.portfolio .portfolio-wrap .portfolio-info p{ color:#6c757d; font-size:14px; margin-bottom:0; padding-right:50px; }
.portfolio .portfolio-wrap:hover img{ transform:scale(1.1); }

/* Portfolio details */
.portfolio-details .portfolio-details-slider img{ width:100%; }
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet{
  width:12px; height:12px; background:rgba(255,255,255,.7); opacity:1;
}
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active{ background:var(--color-primary); }
.portfolio-details .swiper-button-prev,.portfolio-details .swiper-button-next{ width:48px; height:48px; }
.portfolio-details .swiper-button-prev:after,.portfolio-details .swiper-button-next:after{
  color:rgba(255,255,255,.8); background:rgba(0,0,0,.2); font-size:24px; border-radius:50%;
  width:48px; height:48px; display:flex; align-items:center; justify-content:center; transition:.3s;
}
.portfolio-details .swiper-button-prev:hover:after,.portfolio-details .swiper-button-next:hover:after{ background:rgba(0,0,0,.6); }
@media (max-width:575px){ .portfolio-details .swiper-button-prev,.portfolio-details .swiper-button-next{ display:none; } }

.portfolio-details .portfolio-info h3{
  font-size:22px; font-weight:700; margin-bottom:20px; padding-bottom:20px; position:relative;
}
.portfolio-details .portfolio-info h3:after{
  content:""; position:absolute; left:0; bottom:0; width:50px; height:3px; background:var(--color-primary);
}
.portfolio-details .portfolio-info ul{ list-style:none; padding:0; font-size:15px; }
.portfolio-details .portfolio-info ul li{ display:flex; flex-direction:column; padding-bottom:15px; font-size:16px; }
.portfolio-details .portfolio-info ul strong{ text-transform:uppercase; font-weight:400; color:#9c9c9c; font-size:12px; }
.portfolio-details .portfolio-info .btn-visit{
  padding:8px 40px; background:var(--color-primary); color:#fff; border-radius:50px; transition:.3s;
}
.portfolio-details .portfolio-info .btn-visit:hover{ background:#009d8b; }

.portfolio-details .portfolio-description h2{ font-size:26px; font-weight:700; margin-bottom:20px; }
.portfolio-details .portfolio-description p{ padding:0; }
.portfolio-details .portfolio-description .testimonial-item{
  padding:30px 30px 0; position:relative; background:#fff; height:100%; margin-bottom:50px;
}
.portfolio-details .portfolio-description .testimonial-item .testimonial-img{
  width:90px; border-radius:50px; border:6px solid #fff; float:left; margin:0 10px 0 0;
}
.portfolio-details .portfolio-description .testimonial-item h3{ font-size:18px; font-weight:700; margin:15px 0 5px; padding-top:20px; }
.portfolio-details .portfolio-description .testimonial-item h4{ font-size:14px; color:#6c757d; margin:0; }
.portfolio-details .portfolio-description .testimonial-item .quote-icon-left,
.portfolio-details .portfolio-description .testimonial-item .quote-icon-right{ color:#009d8b; font-size:26px; line-height:0; }
.portfolio-details .portfolio-description .testimonial-item .quote-icon-left{ display:inline-block; left:-5px; position:relative; }
.portfolio-details .portfolio-description .testimonial-item .quote-icon-right{ display:inline-block; right:-5px; position:relative; top:10px; transform:scale(-1,-1); }
.portfolio-details .portfolio-description .testimonial-item p{ font-style:italic; margin:0 0 15px; }

/* ==============================================================
   TEAM
=============================================================== */
.team .member{
  text-align:center; background:#fff; border-radius:10px; padding:15px; overflow:hidden; box-shadow:0 2px 25px rgba(0,0,0,.1);
}
.team .member img{ border-radius:10px; overflow:hidden; }
.team .member .member-content{ padding:0 20px 30px; }
.team .member h4{ font-weight:700; margin:16px 0 2px; font-size:20px; }
.team .member span{ font-style:italic; display:block; font-size:14px; color:#6c757d; }
.team .member p{ padding-top:10px; font-size:14px; font-style:italic; color:#6c757d; }
.team .member .social{
  margin:15px 0 10px; display:flex; align-items:center; justify-content:space-around;
}
.team .member .social a{
  color:#a2a2a2; width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border:1px solid #bbb; border-radius:50%; transition:.3s;
}
.team .member .social a:hover{ color:var(--color-primary); border-color:var(--color-primary); }
.team .member .social i{ font-size:18px; margin:0 2px; }

/* ==============================================================
   PRICING
=============================================================== */
.pricing .pricing-item{
  padding:60px 40px; background:#fff; height:100%; position:relative; border-radius:15px;
  box-shadow:0 3px 20px -2px rgba(108,117,125,.15);
}
.pricing h3{ font-weight:600; margin-bottom:15px; font-size:20px; color:#555; text-align:center; }
.pricing .icon{
  margin:30px auto; width:70px; height:70px; background:var(--color-primary); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:.3s; transform-style:preserve-3d;
}
.pricing .icon i{ color:#fff; font-size:28px; transition:ease-in-out .3s; line-height:0; }
.pricing .icon::before{
  content:""; position:absolute; width:86px; height:86px; border-radius:50%; background:#87c1bb; transition:.3s; transform:translateZ(-1px);
}
.pricing .icon::after{
  content:""; position:absolute; width:102px; height:102px; border-radius:50%; background:#d2eeeb; transition:.3s; transform:translateZ(-2px);
}
.pricing h4{
  font-size:48px; color:var(--color-secondary); font-weight:700; font-family:var(--font-secondary);
  margin-bottom:0; text-align:center;
}
.pricing h4 sup{ font-size:28px; }
.pricing h4 span{ color:rgba(108,117,125,.8); font-size:18px; font-weight:400; }
.pricing ul{ padding:20px 0; list-style:none; color:#6c757d; text-align:left; line-height:20px; }
.pricing ul li{ padding:10px 0; display:flex; align-items:center; }
.pricing ul i{ color:#059652; font-size:24px; padding-right:3px; }
.pricing ul .na,.pricing ul .na i{ color:rgba(108,117,125,.5); }
.pricing ul .na span{ text-decoration:line-through; }
.pricing .buy-btn{
  display:inline-block; padding:10px 40px; border-radius:50px; color:var(--color-primary);
  border:1px solid rgba(0,131,116,.2); font-size:16px; font-weight:600; font-family:var(--font-primary); transition:.3s;
}
.pricing .buy-btn:hover{ background:var(--color-primary); color:#fff; }
.pricing .featured{ z-index:10; border:3px solid var(--color-primary); }
@media (min-width:992px){ .pricing .featured{ transform:scale(1.15); } }

/* ==============================================================
   FAQ
=============================================================== */
.faq .content h3{ font-weight:400; font-size:34px; }
.faq .content h4{ font-size:20px; font-weight:700; margin-top:5px; }
.faq .content p{ font-size:15px; color:#6c757d; }
.faq .accordion-item{
  border:0; margin-bottom:20px; border-radius:10px; box-shadow:0 5px 25px rgba(0,0,0,.06);
}
.faq .accordion-item:last-child{ margin-bottom:0; }
.faq .accordion-collapse{ border:0; }
.faq .accordion-button{
  padding:20px 50px 20px 20px; font-weight:600; font-size:18px; line-height:24px; color:var(--color-default);
  text-align:left; background:#fff; box-shadow:none; border:0; border-radius:10px;
}
.faq .accordion-button .num{ padding-right:10px; font-size:20px; color:var(--color-primary); }
.faq .accordion-button:not(.collapsed){ color:var(--color-primary); box-shadow:none; }
.faq .accordion-button:after{ position:absolute; right:20px; top:20px; }
.faq .accordion-body{
  padding:0 40px 30px 45px; border:0; border-radius:10px; background:#fff; box-shadow:none;
}

/* ==============================================================
   BLOG (list, details, sidebar, comments)
=============================================================== */
.blog .blog-pagination{ margin-top:30px; color:#555; }
.blog .blog-pagination ul{ display:flex; padding:0; margin:0; list-style:none; }
.blog .blog-pagination li{ margin:0 5px; transition:.3s; border-radius:10px; }
.blog .blog-pagination li a{ color:var(--color-default); padding:7px 16px; display:flex; align-items:center; justify-content:center; }
.blog .blog-pagination li.active,.blog .blog-pagination li:hover{ background:var(--color-primary); color:#fff; }
.blog .blog-pagination li.active a,.blog .blog-pagination li:hover a{ color:#fff; }

.blog .posts-list article{ box-shadow:0 4px 16px rgba(0,0,0,.1); padding:30px; height:100%; border-radius:10px; overflow:hidden; }
.blog .posts-list .post-img{ max-height:240px; margin:-30px -30px 15px; overflow:hidden; }
.blog .posts-list .post-category{ font-size:16px; color:#6f6f6f; margin-bottom:10px; }
.blog .posts-list .title{ font-size:22px; font-weight:700; margin:0 0 20px; }
.blog .posts-list .title a{ color:var(--color-default); transition:.3s; }
.blog .posts-list .title a:hover{ color:var(--color-primary); }
.blog .posts-list .post-author-img{ width:50px; border-radius:50%; margin-right:15px; }
.blog .posts-list .post-author-list{ font-weight:600; margin-bottom:5px; }
.blog .posts-list .post-date{ font-size:14px; color:#3c3c3c; margin-bottom:0; }

.blog .blog-details{ box-shadow:0 4px 16px rgba(0,0,0,.1); padding:30px; border-radius:10px; }
.blog .blog-details .post-img{ margin:-30px -30px 20px; overflow:hidden; border-radius:10px 10px 0 0; }
.blog .blog-details .title{ font-size:28px; font-weight:700; margin:20px 0 0; color:var(--color-default); }
.blog .blog-details .content{ margin-top:20px; }
.blog .blog-details .content h3{ font-size:22px; margin-top:30px; font-weight:bold; }
.blog .blog-details .content blockquote{
  overflow:hidden; background:rgba(34,34,34,.06); padding:60px; position:relative; text-align:center; margin:20px 0;
}
.blog .blog-details .content blockquote p{
  color:var(--color-default); line-height:1.6; margin-bottom:0; font-style:italic; font-weight:500; font-size:22px;
}
.blog .blog-details .content blockquote:after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--color-secondary);
  margin:20px 0;
}
.blog .blog-details .meta-top{ margin-top:20px; color:#6c757d; }
.blog .blog-details .meta-top ul{ display:flex; flex-wrap:wrap; list-style:none; align-items:center; padding:0; margin:0; }
.blog .blog-details .meta-top ul li+li{ padding-left:20px; }
.blog .blog-details .meta-top i{ font-size:16px; margin-right:8px; color:var(--color-primary); }
.blog .blog-details .meta-top a{ color:#6c757d; font-size:14px; display:inline-block; line-height:1; }
.blog .blog-details .meta-bottom{ padding-top:10px; border-top:1px solid rgba(34,34,34,.15); }
.blog .blog-details .meta-bottom i{ color:#555; display:inline; }
.blog .blog-details .meta-bottom a{ color:rgba(34,34,34,.8); transition:.3s; }
.blog .blog-details .meta-bottom a:hover{ color:var(--color-primary); }
.blog .blog-details .meta-bottom .cats{ list-style:none; display:inline; padding:0 20px 0 0; font-size:14px; }
.blog .blog-details .meta-bottom .cats li{ display:inline-block; }
.blog .blog-details .meta-bottom .tags{ list-style:none; display:inline; padding:0; font-size:14px; }
.blog .blog-details .meta-bottom .tags li{ display:inline-block; }
.blog .blog-details .meta-bottom .tags li+li::before{ padding-right:6px; color:var(--color-default); content:","; }
.blog .blog-details .meta-bottom .share{ font-size:16px; }
.blog .blog-details .meta-bottom .share i{ padding-left:5px; }
.blog .post-author{ padding:20px; margin-top:30px; box-shadow:0 4px 16px rgba(0,0,0,.1); border-radius:10px; }
.blog .post-author img{ max-width:120px; margin-right:20px; }
.blog .post-author h4{ font-weight:600; font-size:22px; margin-bottom:0; color:var(--color-default); }
.blog .post-author .social-links{ margin:0 10px 10px 0; }
.blog .post-author .social-links a{ color:rgba(34,34,34,.5); margin-right:5px; }
.blog .post-author p{ font-style:italic; color:rgba(108,117,125,.8); margin-bottom:0; }

.blog .sidebar{ padding:30px; box-shadow:0 4px 16px rgba(0,0,0,.1); border-radius:10px; }
.blog .sidebar .sidebar-title{ font-size:20px; font-weight:700; color:var(--color-default); }
.blog .sidebar .sidebar-item+.sidebar-item{ margin-top:40px; }
.blog .sidebar .search-form form{
  background:#fff; border:1px solid rgba(34,34,34,.3); padding:5px 10px; position:relative; border-radius:50px;
}
.blog .sidebar .search-form form input[type=text]{ border:0; padding:4px; border-radius:50px; width:calc(100% - 60px); }
.blog .sidebar .search-form form input[type=text]:focus{ outline:none; }
.blog .sidebar .search-form form button{
  position:absolute; inset:auto 0 auto auto; top:0; bottom:0; border:0; background:var(--color-primary);
  font-size:16px; padding:0 25px; margin:-1px; color:#fff; transition:.3s; border-radius:50px; line-height:0;
}
.blog .sidebar .search-form form button:hover{ background:rgba(0,131,116,.8); }
.blog .sidebar .categories ul{ list-style:none; padding:0; }
.blog .sidebar .categories ul li+li{ padding-top:10px; }
.blog .sidebar .categories ul a{ color:var(--color-default); transition:.3s; }
.blog .sidebar .categories ul a:hover{ color:var(--color-primary); }
.blog .sidebar .categories ul a span{ padding-left:5px; color:rgba(34,34,34,.4); font-size:14px; }
.blog .sidebar .recent-posts .post-item+.post-item{ margin-top:15px; }
.blog .sidebar .recent-posts img{ width:80px; float:left; }
.blog .sidebar .recent-posts h4{ font-size:15px; margin-left:95px; font-weight:700; }
.blog .sidebar .recent-posts h4 a{ color:var(--color-default); transition:.3s; }
.blog .sidebar .recent-posts h4 a:hover{ color:var(--color-primary); }
.blog .sidebar .recent-posts time{ display:block; margin-left:95px; font-style:italic; font-size:14px; color:rgba(34,34,34,.4); }
.blog .sidebar .tags{ margin-bottom:-10px; }
.blog .sidebar .tags ul{ list-style:none; padding:0; }
.blog .sidebar .tags ul li{ display:inline-block; }
.blog .sidebar .tags ul a{
  color:#555; font-size:14px; padding:6px 20px; margin:0 6px 8px 0; border:1px solid #d5d5d5;
  display:inline-block; transition:.3s; border-radius:50px;
}
.blog .sidebar .tags ul a:hover{ color:#fff; background:var(--color-primary); border-color:var(--color-primary); }
.blog .sidebar .tags ul a span{ padding-left:5px; color:rgba(85,85,85,.8); font-size:14px; }

/* ==============================================================
   CONTACT
=============================================================== */
.contact .info-container{ height:100%; padding:20px; border-radius:10px 0 0 10px; }
.contact .info-item{
  width:100%; background:rgb(225,7,22); margin-bottom:20px; padding:20px; border-radius:10px; color:#fff;
}
.contact .info-item:last-child{ margin-bottom:0; }
.contact .info-item i{
  font-size:20px; color:#fff; float:left; width:44px; height:44px; margin-right:15px;
  display:flex; align-items:center; justify-content:center; border-radius:50px; transition:.3s;
  background:rgba(255,255,255,.2);
}
.contact .info-item h4{ font-size:20px; font-weight:600; margin-bottom:5px; }
.contact .info-item p{ margin-bottom:0; font-size:14px; }
.contact .info-item:hover i{ background:#fff; color:var(--color-primary); }

.contact .php-email-form{
  width:100%; height:100%; background:#fff; padding:30px; border-radius:0 10px 10px 0;
  box-shadow:0 2px 25px rgba(0,0,0,.1);
}
.contact .php-email-form .form-group{ padding-bottom:8px; }
.contact .php-email-form .error-message{
  display:none; color:#fff; background:#df1529; text-align:left; padding:15px; font-weight:600;
}
.contact .php-email-form .error-message br+br{ margin-top:25px; }
.contact .php-email-form .sent-message{
  display:none; color:#fff; background:#059652; text-align:center; padding:15px; font-weight:600;
}
.contact .php-email-form .loading{ display:none; background:#fff; text-align:center; padding:15px; }
.contact .php-email-form .loading:before{
  content:""; display:inline-block; width:24px; height:24px; margin:0 10px -6px 0; border-radius:50%;
  border:3px solid #059652; border-top-color:#fff; animation:animate-loading 1s linear infinite;
}
@keyframes animate-loading{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
.contact .php-email-form input,.contact .php-email-form textarea{ border-radius:0; box-shadow:none; font-size:14px; }
.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea{ padding:12px 15px; }
.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus{ border-color:var(--color-primary); }
.contact .php-email-form textarea{ padding:10px 12px; }
.contact .php-email-form button[type=submit]{
  background:var(--color-primary); border:0; padding:14px 45px; color:#fff; transition:.4s; border-radius:50px;
}
.contact .php-email-form button[type=submit]:hover{ background:rgba(0,131,116,.8); }

/* ==============================================================
   HERO + CAROUSEL (CORREGIDO PARA MÓVIL SIN RECORTE)
=============================================================== */
.hero{
  width:100%; position:relative; background:rgba(0,0,0,.15); padding:0;
}
@media (min-width:1365px){ .hero{ background-attachment:fixed; } }

.hero h2{ font-size:48px; font-weight:700; margin-bottom:20px; color:#fff; }
.hero p{ color:rgba(255,255,255,.6); font-weight:400; margin-bottom:30px; }
.hero .btn-get-started{
  font-family:var(--font-primary); font-weight:500; font-size:15px; letter-spacing:1px;
  display:inline-block; padding:14px 40px; border-radius:50px; color:#fff; transition:.3s;
  background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.1); box-shadow:0 0 15px rgba(0,0,0,.08);
}
.hero .btn-get-started:hover{ border-color:rgba(255,255,255,.5); }
.hero .btn-watch-video{ font-size:16px; margin-left:25px; color:#fff; font-weight:600; transition:.5s; }
.hero .btn-watch-video i{ color:rgba(255,255,255,.5); font-size:32px; margin-right:8px; transition:.3s; line-height:0; }
.hero .btn-watch-video:hover i{ color:#fff; }
@media (max-width:640px){
  .hero h2{ font-size:36px; }
  .hero .btn-get-started,.hero .btn-watch-video{ font-size:14px; }
}

/* Overlay del hero (form sobre carrusel en desktop; fluye en móvil) */
.hero .hero-overlay{
  position:absolute; inset:0; display:flex; align-items:center; z-index:5; pointer-events:none;
}
.hero .hero-overlay .overlay-inner{
  pointer-events:auto; margin:0 auto; width:100%; max-width:1200px; padding:3rem 0;
}
.hero .sim-card{ background:rgba(254,7,24,1); color:#fff; border-radius:16px; padding:1.25rem; }

@media (max-width:991.98px){
  .hero .hero-overlay{ position:static; pointer-events:auto; background:transparent; padding:1rem 0 .5rem; z-index:1; }
  .hero .hero-overlay .overlay-inner{ padding:0; }
  .hero .sim-card{ border-radius:12px; padding:1rem; margin:0 12px 12px; }
}

/* === Reglas UNIFICADAS del carrusel ===
   - En móvil: imágenes completas (object-fit:contain), alturas automáticas.
   - En desktop: hero lleno con recorte elegante (object-fit:cover). */

#carouselExampleDark,
#carouselExampleDark .carousel-inner,
#carouselExampleDark .carousel-item{ height:auto; }

/* Imágenes: por defecto, no recortar */
#carouselExampleDark .carousel-item img{
  display:block; width:100%; height:auto; object-fit:contain; object-position:center center; background:transparent;
}

/* Móvil (<=991.98px): franjas negras si sobra espacio y nada recortado */
@media (max-width:991.98px){
  #carouselExampleDark .carousel-item{ background:#000; text-align:center; }
  #carouselExampleDark .carousel-item img{ display:inline-block; }
  .carousel-indicators,.carousel-control-next,.carousel-control-prev{ z-index:6; }
}

/* Desktop (>=992px): altura consistente + recorte bonito */
@media (min-width:992px){
  #carouselExampleDark .carousel-item{ height:80vh; min-height:540px; }
  #carouselExampleDark .carousel-item img{
    width:100%; height:100%; object-fit:cover; object-position:center 30%;
  }
}

/* Controles accesibles */
.carousel-control-next,.carousel-control-prev{ width:10%; }
.carousel-control-next-icon,.carousel-control-prev-icon{
  width:2.5rem; height:2.5rem; filter:drop-shadow(0 0 2px rgba(0,0,0,.6));
}

/* Limpieza de clases antiguas que forzaban recortes */
.hero .carousel-dark > img.crop{
  position:static !important; left:auto !important; right:auto !important;
  top:auto !important; bottom:auto !important; min-width:0 !important; min-height:0 !important; margin:0 !important;
}

/* ==============================================================
   FOOTER
=============================================================== */
.footer{
  font-size:14px; background:rgba(101,76,253,1); padding:50px 0; color:#fff;
}
.footer .footer-info .logo{ line-height:0; margin-bottom:25px; }
.footer .footer-info .logo img{ max-height:40px; margin-right:6px; }
.footer .footer-info .logo span{
  font-size:30px; font-weight:700; letter-spacing:1px; color:#fff; font-family:var(--font-primary);
}
.footer .footer-info p{ font-size:14px; font-family:var(--font-primary); }
.footer .social-links a{
  display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.2); font-size:16px; color:rgba(255,255,255,.7); margin-right:10px; transition:.3s;
}
.footer .social-links a:hover{ color:#fff; border-color:#fff; }
.footer h4{ font-size:16px; font-weight:700; position:relative; padding-bottom:12px; }
.footer .footer-links{ margin-bottom:30px; }
.footer .footer-links ul{ list-style:none; padding:0; margin:0; }
.footer .footer-links ul i{ padding-right:2px; color:rgba(0,131,116,.8); font-size:12px; line-height:0; }
.footer .footer-links ul li{ padding:10px 0; display:flex; align-items:center; }
.footer .footer-links ul li:first-child{ padding-top:0; }
.footer .footer-links ul a{ color:rgba(255,255,255,.7); transition:.3s; display:inline-block; line-height:1; }
.footer .footer-links ul a:hover{ color:#fff; }
.footer .footer-contact p{ line-height:26px; }
.footer .copyright,.footer .credits{ text-align:center; }
.footer .credits{ padding-top:4px; font-size:13px; }
.footer .credits a{ color:#fff; }

/* Utilidad */
.back-red{ background:rgba(254,7,24,1); }
/* --- Arreglo: que nada tape los modales --- */
.mobile-nav-active .navbar:before {
  pointer-events: none !important;   /* que no capture clics */
}

/* Asegura que el modal quede por encima de todo */
.modal { z-index: 2000 !important; }
.modal-backdrop.show { z-index: 1990 !important; }

/* (Opcional) por si el preloader queda enganchado */
#preloader { display: none !important; }
/* ===== FIX: Modales utilizables aunque el menú móvil esté activo ===== */

/* Apaga el overlay oscuro del menú móvil si hay un modal abierto */
.modal-open .navbar:before { 
  display: none !important;
}

/* Apaga SIEMPRE el overlay del menú cuando abrimos un modal */
.modal-open.mobile-nav-active .navbar:before {
  display: none !important;
}

/* Sube el modal y su backdrop por encima del overlay del menú (9996) */
.modal-backdrop.show { 
  z-index: 11000 !important; 
}
.modal.show { 
  z-index: 11010 !important; 
}

/* Seguridad extra: si algo dejó el overlay capturando clics, desactívalo */
.mobile-nav-active .navbar:before {
  pointer-events: none !important;
}

/* Nada externo debe tapar el modal */
#preloader { display: none !important; }
/* Tarjeta uniforme para bloques del formulario */
.cs-card {
  background: #ffffff;
  border-radius: .75rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

/* Encabezado de sección en el formulario */
.cs-section-title {
  text-align: left;
  font-weight: 700;
  letter-spacing: .2px;
  color: #111;
  margin: .25rem 0 1rem 0;
}

/* Contenedor rojo del form (tu estilo) + contraste del contenido */
.php-email-form {
  background: rgba(254, 7, 24, 1) !important;
  color: #fff !important;
  border-radius: .75rem;
  padding: 1rem 1rem 1.25rem 1rem;
}

/* Feedback UI: oculto por defecto */
.php-email-form .loading,
.php-email-form .sent-message,
.php-email-form .error-message {
  display: none;
  border-radius: .5rem;
  padding: .75rem .9rem;
  margin-top: .75rem;
  font-weight: 600;
}

/* Estados bonitos */
.php-email-form .loading {
  background: #fff;
  color: #0d6efd;
  border: 1px dashed rgba(13,110,253,.35);
}

.php-email-form .sent-message {
  background: #d1e7dd;
  color: #0f5132;
  border: 1px solid #badbcc;
}

.php-email-form .error-message {
  background: #f8d7da;
  color: #842029;
  border: 1px solid #f5c2c7;
}

/* Inputs oscuros para que se vean bien sobre fondo rojo */
.php-email-form .form-control,
.php-email-form .form-select {
  background: #fff !important;
  color: #111 !important;
}
.php-email-form .form-control::placeholder { color: #888; }

/* Invalid */
.php-email-form .is-invalid { border-color: #dc3545; }

/* Bloques blancos dentro del fondo rojo */
.cs-block-white {
  background: #fff;
  border-radius: .5rem;
  padding: .85rem;
  color: #111;
}