/* 



TemplateMo 562 Space Dynamic



https://templatemo.com/tm-562-space-dynamic



*/



/* ---------------------------------------------

Table of contents

------------------------------------------------

01. font & reset css

02. reset

03. global styles

04. header

05. banner

06. features

07. testimonials

08. contact

09. footer

10. preloader

11. search

12. portfolio



--------------------------------------------- */

/* 

---------------------------------------------

font & reset css

--------------------------------------------- 

*/

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

/* 

---------------------------------------------

reset

--------------------------------------------- 

*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div

pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,

s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,

figure, header, nav, section, article, aside, footer, figcaption {

  margin: 0;

  padding: 0;

  border: 0;

  outline: 0;

}



/* clear fix */

.grid:after {

  content: '';

  display: block;

  clear: both;

}



/* ---- .grid-item ---- */



.grid-sizer,

.grid-item {

  width: 50%;

}



.grid-item {

  float: left;

}



.grid-item img {

  display: block;

  max-width: 100%;

}



.clearfix:after {

  content: ".";

  display: block;

  clear: both;

  visibility: hidden;

  line-height: 0;

  height: 0;

}



.clearfix {

  display: inline-block;

}



html[xmlns] .clearfix {

  display: block;

}



* html .clearfix {

  height: 1%;

}



ul, li {

  padding: 0;

  margin: 0;

  list-style: none;

}



header, nav, section, article, aside, footer, hgroup {

  display: block;

}



* {

  box-sizing: border-box;

}



html, body {

  font-family: 'Poppins', sans-serif;

  font-weight: 400;

  background-color: #fff;

  -ms-text-size-adjust: 100%;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



a {

  text-decoration: none !important;

}



h1, h2, h3, h4, h5, h6 {

  margin-top: 0px;

  margin-bottom: 0px;

}



ul {

  margin-bottom: 0px;

}



p {

  font-size: 15px;

  line-height: 30px;

  color: #2a2a2a;

}



img {

  width: 100%;

  overflow: hidden;

}



/* 

---------------------------------------------

global styles

--------------------------------------------- 

*/

html,

body {

  background: #fff;

  font-family: 'Poppins', sans-serif;

}



::selection {

  background: #ff4b4b;

  color: #fff;

}



::-moz-selection {

  background: #ff4b4b;

  color: #fff;

}



@media (max-width: 991px) {

  html, body {

    overflow-x: hidden;

  }

  .mobile-top-fix {

    margin-top: 30px;

    margin-bottom: 0px;

  }

  .mobile-bottom-fix {

    margin-bottom: 30px;

  }

  .mobile-bottom-fix-big {

    margin-bottom: 60px;

  }

}



.page-section {

  margin-top: 120px;

}



.section-heading h2 {

  font-size: 30px;

  text-transform: capitalize;

  color: #2a2a2a;

  font-weight: 700;

  letter-spacing: 0.25px;

  position: relative;

  z-index: 2;

  line-height: 44px;

}



.section-heading h2 em {

  font-style: normal;

  color: #ff4b4b;

}



.section-heading h2 span {

  color: #fe3f40;

}



.main-blue-button a {

  display: inline-block;

  background-color: #ff4b4b;

  font-size: 15px;

  font-weight: 400;

  color: #fff;

  text-transform: capitalize;

  padding: 12px 25px;

  border-radius: 23px;

  letter-spacing: 0.25px;

}



.main-red-button a {

  display: inline-block;

  background-color: #fe3f40;

  font-size: 15px;

  font-weight: 400;

  color: #fff;

  text-transform: capitalize;

  padding: 12px 25px;

  border-radius: 23px;

  letter-spacing: 0.25px;

}



.main-white-button a {

  display: inline-block;

  background-color: #fff;

  font-size: 15px;

  font-weight: 400;

  color: #fe3f40;

  text-transform: capitalize;

  padding: 12px 25px;

  border-radius: 23px;

  letter-spacing: 0.25px;

}







.js-preloader {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: #fff;

    display: -webkit-box;

    display: flex;

    -webkit-box-align: center;

    align-items: center;

    -webkit-box-pack: center;

    justify-content: center;

    opacity: 1;

    visibility: visible;

    z-index: 9999;

    -webkit-transition: opacity 0.25s ease;

    transition: opacity 0.25s ease;

}



.js-preloader.loaded {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}



@-webkit-keyframes dot {

    50% {

        -webkit-transform: translateX(96px);

        transform: translateX(96px);

    }

}



@keyframes dot {

    50% {

        -webkit-transform: translateX(96px);

        transform: translateX(96px);

    }

}



@-webkit-keyframes dots {

    50% {

        -webkit-transform: translateX(-31px);

        transform: translateX(-31px);

    }

}



@keyframes dots {

    50% {

        -webkit-transform: translateX(-31px);

        transform: translateX(-31px);

    }

}



.preloader-inner {

    position: relative;

    width: 142px;

    height: 40px;

    background: #fff;

}



.preloader-inner .dot {

    position: absolute;

    width: 16px;

    height: 16px;

    top: 12px;

    left: 15px;

    background: #fe3f40;

    border-radius: 50%;

    -webkit-transform: translateX(0);

    transform: translateX(0);

    -webkit-animation: dot 2.8s infinite;

    animation: dot 2.8s infinite;

}



.preloader-inner .dots {

    -webkit-transform: translateX(0);

    transform: translateX(0);

    margin-top: 12px;

    margin-left: 31px;

    -webkit-animation: dots 2.8s infinite;

    animation: dots 2.8s infinite;

}



.preloader-inner .dots span {

    display: block;

    float: left;

    width: 16px;

    height: 16px;

    margin-left: 16px;

    background: #fe3f40;

    border-radius: 50%;

}







/* 

---------------------------------------------

Banner Style

--------------------------------------------- 

*/



.main-banner {

  background-repeat: no-repeat;

  background-position: center center;

  background-size: cover;

  padding: 226px 0px 120px 0px;

  position: relative;

  overflow: hidden;

}



.main-banner:after {

  content: '';

  background-image: url(../images/baner-dec-left.png);

  background-repeat: no-repeat;

  position: absolute;

  left: 0;

  top: 0;

  width: 193px;

  height: 467px;

}



.main-banner:before {

  content: '';

  background-image: url(../images/baner-dec-right.png);

  background-repeat: no-repeat;

  position: absolute;

  right: 0;

  top: 0;

  width: 98px;

  height: 290px;

}



.main-banner .left-content {

  margin-right: 45px;

}



.main-banner .left-content h6 {

  text-transform: uppercase;

  font-size: 18px;

  color: #fe3f40;

  margin-bottom: 15px;

}



.main-banner .left-content h2 {

  font-size: 50px;

  font-weight: 700;

  color: #2a2a2a;

  line-height: 72px;

}



.main-banner .left-content h2 em {

  color: #ff4b4b;

  font-style: normal;

}



.main-banner .left-content h2 span {

  color: #fe3f40;

}



.main-banner .left-content p {

  margin: 20px 0px;

}



.main-banner .left-content form {

  margin-top: 30px;

  width: 470px;

  height: 66px;

  position: relative;

}



.main-banner .left-content form button {

  position: absolute;

  right: 10px;

  top: 10px;

  display: inline-block;

  background-color: #fff;

  font-size: 15px;

  font-weight: 500;

  color: #fe3f40;

  text-transform: capitalize;

  padding: 12px 25px;

  border-radius: 23px;

  letter-spacing: 0.25px;

  outline: none;

  border: none;

}



.main-banner .left-content form input {

  width: 470px;

  height: 66px;

  background-color: #ff4b4b;

  border-radius: 33px;

  border: none;

  outline: none;

  padding: 0px 25px;

  color: #fff;

  letter-spacing: 0.25px;

  font-size: 15px;

  font-weight: 300;

}



.main-banner .left-content form input::placeholder {

  color: #fff;

}







/* 

---------------------------------------------

About Us Style

--------------------------------------------- 

*/



#about {

  margin-top: 120px;

}



.about-us {

  background-image: url(../images/about-bg.png);

  background-repeat: no-repeat;

  background-position: center center;

  background-size: cover;

  padding: 140px 0px 120px 0px;

}



.about-us .left-image {

  margin-right: 45px;

}



.about-us .services .item {

  margin-bottom: 30px;

}



.about-us .services .item .icon {

  float: left;

  margin-right: 25px;

}



.about-us .services .item .icon img {

  max-width: 70px;

}



.about-us .services .item h4 {

  color: #fff;

  font-size: 20px;

  font-weight: 700;

  margin-bottom: 12px;

}



.about-us .services .item p {

  color: #fff;

}





/* 

---------------------------------------------

Services Style

--------------------------------------------- 

*/



.our-services {

  margin-top: 0px;

  padding-top: 120px;

}



.our-services .left-image {

  margin-right: 45px;

}



.our-services .section-heading h2 {

  margin-right: 100px;

}



.our-services .section-heading p {

  margin-top: 30px;

  margin-bottom: 60px;

}



.our-services .progress-skill-bar {

  margin-bottom: 30px;

  position: relative;

  width: 100%;

}



.our-services .progress-skill-bar span {

  position: absolute;

  top: 0;

  font-size: 18px;

  font-weight: 600;

  color: #ff4b4b;

}



.our-services .first-bar span {

  left: 69%;

}



.our-services .second-bar span {

  left: 81%;

}



.our-services .third-bar span {

  left: 88%;

}



.our-services .progress-skill-bar h4 {

  font-size: 18px;

  font-weight: 700;

  color: #2a2a2a;

  margin-bottom: 14px;

}



.our-services .progress-skill-bar .full-bar {

  width: 100%;

  height: 6px;

  border-radius: 3px;

  background-color: #f7eff1;

  position: relative;

  z-index: 1;

}



.our-services .progress-skill-bar .filled-bar {

  background: rgb(255,77,30);

  background: linear-gradient(105deg, rgba(255,77,30,1) 0%, rgba(255,44,109,1) 100%);

  height: 6px;

  border-radius: 3px;

  margin-bottom: -6px;

  position: relative;

  z-index: 2;

}



.our-services .first-bar .filled-bar {

  width: 71%;

}



.our-services .second-bar .filled-bar {

  width: 83%;

}



.our-services .third-bar .filled-bar {

  width: 90%;

}





/* 

---------------------------------------------

Portfolio

--------------------------------------------- 

*/



.our-portfolio {

  padding-top: 120px;

  margin-top: 0px;

}



.our-portfolio .section-heading h2 {

  text-align: center;

  margin: 0px 90px 0px 90px;

  margin-bottom: 120px;

  position: relative;

  z-index: 1;

}



.our-portfolio .item {

  position: relative;

}



.our-portfolio .item:hover .hidden-content {

  top: -100px;

  opacity: 1;

  visibility: visible;

}



.our-portfolio .item:hover .showed-content {

  top: 90px;

}



.our-portfolio .hidden-content {

  background: rgb(255,77,30);

  background: linear-gradient(105deg, rgba(255,77,30,1) 0%, rgba(255,44,109,1) 100%);

  padding: 30px;

  border-radius: 20px;

  text-align: center;

  opacity: 0;

  top: 0;

  visibility: hidden;

  position: absolute;

  z-index: 2;

  transition: all 0.5s;

}



.our-portfolio .hidden-content:after {

  width: 20px;

  height: 20px;

  position: absolute;

  background: rgb(255,77,30);

  content: '';

  left: 50%;

  bottom: -8px;

  margin-left: -5px;

  transform: rotate(45deg);

  background: linear-gradient(105deg, rgba(255,52,69,1) 0%, rgba(255,51,78,1) 100%);

  z-index: -1;

}



.our-portfolio .hidden-content h4 {

  font-size: 20px;

  font-weight: 700;

  color: #fff;

  margin-bottom: 20px;

}



.our-portfolio .hidden-content p {

  color: #fff;

}



.our-portfolio .showed-content {

  top: 0px;

  position: relative;

  z-index: 3;

  background-color: #fff;

  text-align: center;

  padding: 50px;

  border-radius: 20px;

  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);

  transition: all 0.5s;

}



.our-portfolio .showed-content img {

  max-width: 100px;

}





/* 

---------------------------------------------

Blog

--------------------------------------------- 

*/



.our-blog {

  position: relative;

  margin-top: 80px;

  padding-top: 120px;

}



.our-blog .section-heading h2 {

  margin-right: 180px;

}



.our-blog .top-dec {

  text-align: right;

  margin-top: -80px;

}



.our-blog .top-dec img {

  max-width: 270px;

}



.our-blog .left-image {

  position: relative;

}



.our-blog .left-image img {

  border-radius: 20px;

  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);

}



.our-blog .left-image .info {

  position: relative;

}



.our-blog .left-image .info .inner-content {

  background-color: #fff;

  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);

  border-radius: 20px;

  margin-right: 75px;

  position: absolute;

  margin-top: -100px;

  padding: 30px;

}



.our-blog .left-image ul li {

  display: inline-block;

  font-size: 15px;

  color: #afafaf;

  font-weight: 300;

  margin-right: 20px;

}



.our-blog .left-image ul li:last-child {

  margin-right: 0px;

}



.our-blog .left-image ul li i {

  color: #ff4d61;

  font-size: 16px;

  margin-right: 8px;

}



.our-blog .left-image h4 {

  font-size: 20px;

  font-weight: 700;

  color: #2a2a2a;

  margin: 20px 0px 15px 0px;

}



.our-blog .left-image .info .main-blue-button {

  position: absolute;

  bottom: -80px;

  left: 0;

}



.our-blog .right-list {

  margin-left: 30px;

}



.our-blog .right-list ul li {

  display: inline-flex;

  width: 100%;

  margin-bottom: 30px;

}



.our-blog .right-list .left-content {

  margin-right: 45px;

}



.our-blog .right-list .left-content span {

  font-size: 15px;

  color: #afafaf;

  font-weight: 300;

}



.our-blog .right-list .left-content span i {

  color: #ff4d61;

  font-size: 16px;

  margin-right: 8px;

}



.our-blog .right-list .left-content h4 {

  font-size: 20px;

  font-weight: 700;

  color: #2a2a2a;

  margin: 20px 0px 15px 0px;

}





.our-blog .right-list .right-image img {

  width: 250px;

  border-radius: 20px;

}





/* 

---------------------------------------------

contact

--------------------------------------------- 

*/



.contact-us {

  padding: 160px 0px;

  background-image: url(../images/contact-bg.png);

  background-repeat: no-repeat;

  background-position: center center;

  background-size: cover;

}



.contact-us .section-heading h2,

.contact-us .section-heading h2 em,

.contact-us .section-heading h2 span {

  color: #fff;

}



.contact-us .section-heading p {

  color: #fff;

  margin-top: 30px;

}



.phone-info {

  margin-top: 40px;

}



.phone-info h4 {

  font-size: 20px;

  font-weight: 700;

  color: #fff;

}



.phone-info h4 span i {

  width: 46px;

  height: 46px;

  display: inline-block;

  text-align: center;

  line-height: 46px;

  background-color: #fff;

  border-radius: 50%;

  color: #ff3b2c;

  font-size: 22px;

  margin-left: 30px;

  margin-right: 15px;

}



.phone-info h4 span a {

  color: #fff;

  font-size: 15px;

  font-weight: 400;

}



form#contact .contact-dec {

  position: absolute;

  right: -166px;

  bottom: 0;

}



form#contact .contact-dec img {

  max-width: 178px;

}



form#contact {

  margin-left: 30px;

  position: relative;

  background-color: #fff;

  padding: 60px 30px;

  border-radius: 20px;

}



form#contact input {

  width: 100%;

  height: 46px;

  border-radius: 33px;

  background-color: #d1f3ff;

  border: none;

  outline: none;

  font-size: 15px;

  font-weight: 300;

  color: #2a2a2a;

  padding: 0px 20px;

  margin-bottom: 20px;

}



form#contact input::placeholder {

  color: #2a2a2a;

}



form#contact textarea {

  width: 100%;

  min-width: 100%;

  max-width: 100%;

  max-height: 180px;

  min-height: 140px;

  height: 140px;

  border-radius: 20px;

  background-color: #d1f3ff;

  border: none;

  outline: none;

  font-size: 15px;

  font-weight: 300;

  color: #2a2a2a;

  padding: 15px 20px;

  margin-bottom: 20px;

}



form#contact textarea::placeholder {

  color: #2a2a2a;

}



form#contact button {

  display: inline-block;

  background-color: #ff4b4b;

  font-size: 15px;

  font-weight: 400;

  color: #fff;

  text-transform: capitalize;

  padding: 12px 25px;

  border-radius: 23px;

  letter-spacing: 0.25px;

  border: none;

  outline: none;

  transition: all .3s;

}



form#contact button:hover {

  background-color: #fe3f40;

}





/* 

---------------------------------------------

Footer Style

--------------------------------------------- 

*/



footer p {

  text-align: center;

  margin: 30px 0px 45px 0px;

}



footer p a {

  color: #fe3f40;

}



/* 

---------------------------------------------

responsive

--------------------------------------------- 

*/



@media (max-width: 1645px) {

  form#contact .contact-dec {

    display: none;

  }

}



@media (max-width: 992px) {

  .main-banner {

    padding-top: 196px;

  }

  .main-banner .left-content {

    margin-right: 0px;

    text-align: center;

    margin-bottom: 45px;

  }

  .main-banner:after {

    top: 0;

    z-index: -1;

  }

  .main-banner .left-content form,

  .main-banner .left-content form input {

    width: 100%!important;

  }

  #about {

    margin-top: 0px;

  }

  .about-us {

    position: relative;

    background-image: none;

    padding: 0px;

  }

  .about-us .left-image {

    margin-right: 0px;

    position: inherit;

    right: 0;

    padding-top: 0;

    margin-top: -100px;

  }

  .about-us .services {

    text-align: center;

  }

  .about-us .services .item  {

    background: rgb(255,77,30);

    background: linear-gradient(105deg, rgba(255,77,30,1) 0%, rgba(255,44,109,1) 100%);

    padding: 30px;

    border-radius: 20px;

    display: inline-block;

  }

  .about-us .services .item .right-text {

    text-align: left;

  }

  .our-services {

    margin-top: 200px;

  }

  .our-services .left-image {

    margin-right: 0px;

    margin-bottom: 45px;

  }

  .our-services .section-heading h2,

  .our-services .section-heading p {

    margin-right: 0px;

    text-align: center;

  }

  .our-portfolio .section-heading h2 {

    margin: 0px 0px 80px 0px;

  }

  .our-portfolio .item {

    margin-bottom: 15px;

  }

  .our-blog {

    margin-top: 0px;

  }

  .our-blog .top-dec {

    display: none;

  }

  .our-blog .section-heading h2 {

    margin-right: 0px;

    text-align: center;

    margin-bottom: 45px;

  }

  .our-blog .left-image .info .inner-content {

    position: relative;

    margin-right: 0px;

  }

  .our-blog .left-image .info .main-blue-button {

    position: relative;

    bottom: 0px;

    margin-top: 30px;

  }

  .our-blog .left-image {

    margin-bottom: 45px;

  }

  .contact-us {

    margin-top: 60px;

    padding: 120px 0px;

  }

  .contact-us .section-heading {

    text-align: center;

  }

  form#contact {

    margin-left: 0px;

    margin-top: 30px;

  }

  form#contact .contact-dec {

    display: none;

  }

  footer p {

    margin: 15px 0px 30px 0px;

  }

}



@media (max-width: 767px) {

  .about-us .left-image {

    bottom: -140px;

  }

  .our-blog .right-list {

    margin-left: 0px;

  }

  .our-blog .right-list ul li {

    display: inline-block;

    margin-top: 0px;

    padding-top: 30px;

    border-top: 1px solid #eee;

  }

  .our-blog .right-list .left-content {

    margin-right: 0px;

    width: 100%;

    margin-bottom: 15px;

  }

  .our-blog .right-list .right-image,

  .our-blog .right-list .right-image img {

    width: 100%;

  }

  .phone-info h4 span {

    display: block;

    margin-top: 15px;

  }

  .phone-info h4 span i {

    margin-left: 0px;

  }

}





/*MIS REGLAS*/





/*MENU*/

  .main-nav .nav li.submenu {

    position: relative;

  }



  .main-nav .nav li.submenu ul {

    position: absolute;

    left: 0;

    top: 60px;

    opacity: 0;

    visibility: hidden;

    background: #fff;

    padding: 15px 20px;

    border-radius: 6px;

    box-shadow: 0 4px 21px rgba(0,0,0,0.12);

    transition: all .3s ease;

    z-index: 999;

  }



  .main-nav .nav li.submenu:hover ul {

    opacity: 1;

    visibility: visible;

    top: 50px;

  }



  .main-nav .nav li.submenu ul li {

    list-style: none;

    padding: 6px 0;

    white-space: nowrap;

  }



  .main-nav .nav li.submenu ul li a {

    color: #333 !important;

    font-size: 14px;

  }



  .logo img {

    max-height: 55px;

  }



  /*FOOTER*/



  .phone-info h4 {

    font-size: 18px;

    margin-bottom: 10px;

  }



  .phone-info h4 span a {

    color: #ff5252;

    font-weight: bold;

  }



  .phone-info i {

    margin-right: 5px;

    color: #ff5252;

  }



  #contact-form input,

  #contact-form textarea {

    border-radius: 8px;

  }



  /*LISTADOS*/



  .service-card {

    background: #fff;

    padding: 25px;

    border-radius: 10px;

    margin-bottom: 20px;

    text-align: center;

    box-shadow: 0px 5px 20px rgba(0,0,0,0.08);

    transition: 0.3s ease;

  }



  .service-card:hover {

    transform: translateY(-5px);

    box-shadow: 0px 10px 25px rgba(0,0,0,0.12);

  }



  .service-card h4 {

    font-size: 18px;

    font-weight: 600;

  }



  .service-card a {

    text-decoration: none;

    color: #333;

  }



  .service-card a:hover {

    color: #ff5252;

  }





/* ================================

   MENÚ FIJO MXZ9

================================ */



.mxZ9-header {

  position: sticky;

  top: 0;

  width: 100%;

  background: #ffffff;

  box-shadow: 0 3px 12px rgba(0,0,0,0.07);

  z-index: 99999;

}



.mxZ9-inner {

  max-width: 1300px;

  width: 95%;

  margin: 0 auto;

  height: 80px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.mxZ9-logo img {

  height: 60px;

  display: block;

}



/* ------- NAV DESKTOP ------- */



.mxZ9-nav {

  /* para forzar estilo sobre la plantilla */

  all: unset;

  display: block;

}



.mxZ9-menu {

  all: unset;

  list-style: none;

  display: flex;

  align-items: center;

  gap: 28px;

}



.mxZ9-item {

  position: relative;

}



.mxZ9-link,

.mxZ9-sub-link {

  all: unset;

  cursor: pointer;

  font-family: inherit;

  font-size: 16px;

  font-weight: 500;

  color: #222;

  text-decoration: none;

}



.mxZ9-link:hover,

.mxZ9-sub-link:hover {

  color: #ff4b4b;

}



/* CTA WhatsApp */

.mxZ9-cta {

  all: unset;

  cursor: pointer;

  background: #ff4b4b;

  color: #fff;

  padding: 10px 20px;

  border-radius: 999px;

  font-weight: 600;

  font-size: 15px;

  box-shadow: 0 8px 18px rgba(255,75,75,0.4);

  text-decoration: none;

}



.mxZ9-cta:hover {

  transform: translateY(-1px);

  box-shadow: 0 10px 22px rgba(255,75,75,0.55);

}



/* ------- SUBMENÚ ESCRITORIO ------- */



.mxZ9-has-sub .mxZ9-sub-toggle {

  display: flex;

  align-items: center;

  gap: 6px;

}



.mxZ9-caret {

  width: 0;

  height: 0;

  border-left: 5px solid transparent;

  border-right: 5px solid transparent;

  border-top: 6px solid #222;

  transition: transform .25s ease;

}



/* contenedor */

.mxZ9-submenu {

  all: unset;

  list-style: none;

  position: absolute;

  top: 110%;

  left: 0;

  min-width: 230px;

  background: #fff;

  border-radius: 10px;

  box-shadow: 0 14px 30px rgba(0,0,0,0.12);

  padding: 8px 0;

  opacity: 0;

  visibility: hidden;

  transform: translateY(10px) scale(0.98);

  transform-origin: top;

  transition: opacity .18s ease, transform .18s ease, visibility .18s;

  z-index: 999999;

}



.mxZ9-submenu li {

  padding: 8px 20px;

}



.mxZ9-submenu li + li {

  border-top: 1px solid #f1f1f1;

}



/* Mostrar en desktop al pasar el mouse */

@media (min-width: 992px) {

  .mxZ9-has-sub:hover > .mxZ9-submenu {

    opacity: 1;

    visibility: visible;

    transform: translateY(0) scale(1);

  }

  

  .mxZ9-has-sub:hover .mxZ9-caret {

    transform: rotate(180deg);

  }

}



/* ------- BOTÓN HAMBURGUESA ------- */



.mxZ9-toggle {

  all: unset;

  cursor: pointer;

  display: none; /* se muestra solo en móvil */

  flex-direction: column;

  gap: 5px;

}



.mxZ9-toggle span {

  width: 26px;

  height: 3px;

  border-radius: 999px;

  background: #222;

  transition: transform .25s ease, opacity .25s ease;

}



/* animación hamburguesa -> X */

.mxZ9-toggle.mxZ9-open span:nth-child(1) {

  transform: translateY(8px) rotate(45deg);

}



.mxZ9-toggle.mxZ9-open span:nth-child(2) {

  opacity: 0;

}



.mxZ9-toggle.mxZ9-open span:nth-child(3) {

  transform: translateY(-8px) rotate(-45deg);

}



/* ================================

   MODO MÓVIL

================================ */



@media (max-width: 991px) {



  .mxZ9-inner {

    height: 70px;

  }



  .mxZ9-toggle {

    display: flex;

  }



  .mxZ9-nav {

    position: fixed;

    top: 110px; /* igual a altura del header en móvil */

    left: 0;

    width: 100%;

    height: calc(100vh - 220px);

    background: #ffffff;

    transform: translateY(-120%);

    transition: transform .3s ease;

    box-shadow: 0 12px 24px rgba(0,0,0,0.15);

    overflow-y: auto;

    padding: 18px 18px 40px;

    z-index: 99998;

  }



  .mxZ9-nav.mxZ9-open {

    transform: translateY(0);

  }



  .mxZ9-menu {

    flex-direction: column;

    align-items: stretch;

    gap: 10px;

  }



  .mxZ9-item {

    border-radius: 12px;

    background: #fafafa;

    padding: 10px 14px;

    width:90%!important;

  }



  .mxZ9-link,

  .mxZ9-sub-toggle {

    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

  }



  .mxZ9-cta {

    text-align: center;

    width: 100%;

    justify-content: center;

  }



  /* Submenú como acordeón */

  .mxZ9-submenu {

    position: static;

    box-shadow: none;

    border-radius: 0;

    padding: 0;

    margin-top: 8px;

    max-height: 0;

    overflow: hidden;

    opacity: 1;

    visibility: visible;

    transform: none;

    transition: max-height .28s ease;

  }



  .mxZ9-has-sub.mxZ9-open .mxZ9-submenu {

    max-height: 900px; /* suficiente para todos los items */

  }



  .mxZ9-has-sub.mxZ9-open .mxZ9-caret {

    transform: rotate(180deg);

  }



  .mxZ9-submenu li {

    padding: 8px 0;

    border-top: 1px solid #ececec;

  }

}



/* Evitar scroll del body cuando menú móvil está abierto (opcional) */

.mxZ9-no-scroll {

  overflow: hidden;

}

/* BANDA SUPERIOR WHATSAPP (oculta en desktop, visible en móvil) */

.mxZ9-topbar {

  display: none;

}



/* Ajustes responsive */

@media (max-width: 991px) {



  /* Mostrar banda superior en móvil */

  .mxZ9-topbar {

    display: block;

    width: 100%;

    background: #FF4B4B;

    text-align: center;

    padding: 8px 10px;

    position: sticky;

    top: 0;

    z-index: 100000;

  }



  .mxZ9-topbar a {

    color: #fff;

    font-weight: 600;

    font-size: 15px;

    text-decoration: none;

  }



  /* Header un poquito más abajo para que no se monte sobre la banda */

  .mxZ9-header {

    top: 0;

  }



  /* Ocultamos el botón WhatsApp dentro del menú en móvil

     (porque ya lo mostramos arriba en la banda) */

  .mxZ9-item-cta {

    display: none;

  }



  /* Submenú desplegado por defecto al tener mxZ9-open */

  .mxZ9-has-sub.mxZ9-open .mxZ9-submenu {

    max-height: 900px;

  }



  button:not(:disabled), [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled) {

    cursor: pointer;

    padding-bottom: 1em

  }



}



.main-banner .left-content p{

    color: #000!important

}



.main-banner .left-content a {

    color: #FF4B4B!important;

    font-size: 1.5em

}



.main-button {

    background: #FF4B4B!important;

    color: #fff!important;

    display: inline-block;

    background-color: #fff;

    font-size: 15px;

    font-weight: 500;

    text-transform: capitalize;

    padding: 12px 25px;

    border-radius: 23px;

    letter-spacing: 0.25px;

    outline: none;

    border: none;

}



.mxZ9-cta:hover {

    color: #fff

}

    



.main-banner{

    padding-top: 3em;

    min-height:300px!important

}







.phone-info a {

    color: #fff!important;

    font-size: 25px!important

}



.styled-list li {

    text-align: center;

    color: #ff4b4b;

    font-size: 1.1em;

    margin: .2em 0

}

.styled-list {

    padding: 1em 0

}



/* Contenedor de iconos */

.actions {

  list-style: none;

  margin: 30px 0;

  padding: 0;

  display: flex;

  justify-content: center;   /* centrados horizontalmente */

  gap: 20px;                 /* separación entre círculos */

}



/* quitar viñetas de los li por si acaso */

.actions li {

  margin: 0;

  padding: 0;

}



/* Estilo de los círculos */

.actions .fa {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 60px;               /* tamaño del círculo */

  height: 60px;

  border-radius: 50%;        /* círculo */

  background: #000;          /* fondo negro */

  color: #fff;               /* icono blanco */

  font-size: 26px;           /* icono grande */

  text-decoration: none;

  transition: background .2s ease, transform .2s ease;

}



/* Hover bonito */

.actions .fa:hover {

  background: #ff4b4b;       /* rojo del sitio (o el que quieras) */

  transform: translateY(-2px);

}



.our-portfolio .section-heading h2{

    margin-bottom: 1em

}





/* Ajustes responsive */

@media (max-width: 991px) {



.our-services{

    margin-top: 0;

    padding-top: 0;

}

.fadeInLeft.animated .section-heading {

    padding-bottom: 5em;

    text-align: center;

}

.left-image{

    margin-top: 0!important;

    padding-top: 0!important;

    position: relative!important

}



.left-image img {

    padding-bottom: 100%!important

}

.fadeInRight {

    text-align: center!important

}

.fadeInRight em {

    color: #ff4b4b!important

}

.col-lg-12 .service-box {

    text-align: center!important

}



.col-lg-6 .service-box {

    text-align: center!important

}

.our-portfolio.dark-bg .container {

    padding-bottom: 5em!important

}



.styled-list li {

    text-align: center

}



.col-lg-10 > p {

    text-align: center

}



}



/*ARREGLOS CSS*/


.container {
    text-align: center;
    padding: 2em 0;
}

.content{
    max-width: 1100px
}

.content iframe {
    width: 100%;
    height: 300px;
    max-width: 500px;
    border-radius:3px
}
.content h1 {
    padding-bottom: 1em
}

.content h2 {
    padding-top: 1em
}

.content p {
    margin-bottom: 1em
}

.imagenmediana {
    width: 100%;
    max-width: 250px
}
#precios img {
    width: 100%;
    max-width: 250px
}

.button {
    background: #FF4B4B !important;
    color: #fff !important;
    display: inline-block;
    background-color: #fff;
    font-size: 15px;
    font-weight: 500;
    text-transform: capitalize;
    padding: 12px 25px;
    border-radius: 23px;
    letter-spacing: 0.25px;
    outline: none;
    border: none;
    margin-bottom: 2em;
    margin-top: 1em
}


/* ========================================= */
/* TABLAS DE PRECIOS – ESTILO MODERNO Y LIMPIO */
/* ========================================= */

table.tablas {
  width: 95%;
  max-width: 900px !important;
  margin: 40px auto;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.09);
  font-size: 16px;
}

/* Encabezado principal */
table.tablas th[colspan] {
  background: linear-gradient(135deg, #ff0000, #FF3250);
  color: #fff;
  text-align: center;
  padding: 18px 15px;
}

table.tablas th[colspan] h3 {
  margin: 0 0 8px 0;
  font-size: 22px;
  font-weight: 700;
}

table.tablas th[colspan] cite {
  font-style: normal;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.9;
  display: block;
}

/* Celdas generales */
table.tablas th,
table.tablas td {
  padding: 14px 16px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}

/* Columna de músicos */
table.tablas th[rowspan] {
  background: #f7f7f7;
  font-weight: 700;
  text-align: center;
  width: 140px;
}

/* Descripción de paquete */
table.tablas th.blanca {
  background: #ffffff;
  font-weight: 500;
  text-align: left;
}

/* Columna de precio (DESTACADA) */
table.tablas th:last-child,
table.tablas td:last-child {
  text-align: center;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #ff0000, #FF3250);
}

/* Última fila sin borde */
table.tablas tr:last-child th,
table.tablas tr:last-child td {
  border-bottom: none;
}

/* Hover sutil */
table.tablas tr:hover {
  background: #fafafa;
  transition: background 0.2s ease-in-out;
}



/* ========================================= */
/* REPERTORIO MUSICAL – ESTILO MODERNO */
/* ========================================= */

.repe {
  max-width: 1100px;
  margin: 50px auto;
  padding: 35px 40px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 12px 35px rgba(0,0,0,0.08);
  font-size: 15.5px;
  line-height: 1.9;
  color: #333;
}

/* Título interno */
.repe h2 {
  text-align: center;
  font-size: 26px;
  margin-bottom: 30px;
  font-weight: 800;
  color: #ff0000;
}

/* Categorías (Rancheras, Boleros, etc.) */
.repe strong {
  display: block;
  margin: 35px 0 18px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #ff0000, #FF3250);
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  box-shadow: 0 6px 18px rgba(255,0,0,0.25);
}

/* Texto de canciones */
.repe p {
  margin: 0;
}

/* Separador elegante entre bloques */
.repe p::after {
  content: "";
  display: block;
  margin: 30px 0;
  border-bottom: 1px dashed #ddd;
}

/* Mejora visual de lectura */
.repe {
  background-image: linear-gradient(
    rgba(255,255,255,0.95),
    rgba(255,255,255,0.95)
  );
}

/* ========================================= */
/* RESPONSIVE */
/* ========================================= */

@media (max-width: 768px) {
  .repe {
    padding: 25px 20px;
    font-size: 14.5px;
  }

  .repe h2 {
    font-size: 22px;
  }

  .repe strong {
    font-size: 15px;
    padding: 10px 14px;
  }
}


/* ========================================= */
/* 5 RAZONES – TARJETAS CON NÚMEROS EN CÍRCULO */
/* ========================================= */

/* Inicializamos contador */
#three .row {
  counter-reset: razones;
}

/* Tarjeta base */
#three .service-box {
  position: relative;
  background: #ffffff;
  border-radius: 18px;
  padding: 0 30px 35px;
  box-shadow: 0 14px 35px rgba(0,0,0,0.12);
  transition: all 0.35s ease;
  height: 100%;
}

/* Hover elegante */
#three .service-box:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 45px rgba(0,0,0,0.18);
}

/* Incrementamos contador */
#three .service-box::before {
  counter-increment: razones;
  content: counter(razones);
  position: absolute;
  top: -22px;
  left: 25px;
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #ff3250, #FF3D28);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(255,90,0,0.45);
  animation: popIn 0.6s ease both;
}

/* Título */
#three .service-box h4 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #111;
}

/* Ocultamos visualmente el número original (1. 2. etc) */
#three .service-box h4 {
  text-indent: -9999px;
  position: relative;
}

#three .service-box h4::after {
  content: attr(data-title);
}

/* Reinsertamos el texto sin número */
#three .service-box h4::after {
  content: "";
}

/* Truco: mostramos solo el texto después del número */
#three .service-box h4 span {
  display: none;
}

/* Texto */
#three .service-box p {
  font-size: 15px;
  line-height: 1.6;
  color: #444;
  margin: 0;
}

/* ========================================= */
/* ANIMACIÓN */
/* ========================================= */

@keyframes popIn {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  70% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ========================================= */
/* RESPONSIVE */
/* ========================================= */

@media (max-width: 768px) {
  #three .service-box {
    padding: 50px 22px 30px;
  }

  #three .service-box::before {
    left: 18px;
    width: 46px;
    height: 46px;
    font-size: 20px;
  }
}





/* Hover elegante */
.main-button:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 45px rgba(0,0,0,0.18);
}

.main-button {
    transition: all 0.35s ease;
}

/* Hover elegante */
.button:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 45px rgba(0,0,0,0.18);
}

.button {
    transition: all 0.35s ease;
}


/* ========================================= */
/* VIDEO CAROUSEL – CONTROLADO POR JS */
/* ========================================= */

.video-carousel {
  position: relative;
  max-width: 1200px;
  margin: 40px auto;
  overflow: hidden;
}

.video-track {
  display: flex;
  gap: 25px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
}

.video-track::-webkit-scrollbar {
  display: none; /* Chrome */
}

/* Tarjeta */
.video-card {
  flex: 0 0 360px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  padding: 15px;
  transition: transform 0.3s ease;
}

.video-card:hover {
  transform: translateY(-6px);
}

.video-card h4 {
  text-align: center;
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: 700;
}

.video-card iframe {
  width: 100%;
  height: 200px;
  border-radius: 12px;
  border: none;
}

/* ========================================= */
/* RESPONSIVE */
/* ========================================= */

@media (max-width: 768px) {
  .video-card {
    flex: 0 0 100%;
  }
}



/* ========================================= */
/* BOTONES LATERALES DEL CARRUSEL */
/* ========================================= */

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff3250, #FF3D28);
  color: #fff;
  border: none;
  font-size: 26px;
  font-weight: 700;
  cursor: pointer;
  z-index: 10;
  opacity: 0.85;
  transition: all 0.25s ease;
  box-shadow: 0 8px 22px rgba(255,90,0,0.45);
}

.carousel-btn:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.08);
}

.carousel-btn.prev {
  left: 5px;
}

.carousel-btn.next {
  right: 5px;
}



/* ========================================= */
/* RESPONSIVE */
/* ========================================= */

@media (max-width: 768px) {
  .carousel-btn {
    width: 42px;
    height: 42px;
    font-size: 24px;
    opacity: 1;
  }

  .carousel-btn.prev {
    left: 8px;
  }

  .carousel-btn.next {
    right: 8px;
  }
}



/* ========================================= */
/* BLOG */
/* ========================================= */

article {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2em 0;
    text-align: center
}
.content img {
    width: 100%;
    border-radius: 3px; 
    margin-top: 1em
}
.carousel-btn.next {
    margin-left: -2em!important
}

.blog-btn {
    background: #ff3d28!important;
    color: #fff!important
}


/**/

.style2 {
    width: 100%; 
    max-width: 1200px;
    text-align: center;
    margin: 0 auto;
    padding: 2em 0
}

.anchored {
    display: none
}


.container {
    padding-left: 2em;
    padding-right: 2em
}

/*GALERIA*/

.gallery-section {
  padding: 60px 20px;
  text-align: center;
}

.gallery-section h2 {
  font-size: 2rem;
  margin-bottom: 30px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
  animation: fadeUp 0.8s ease forwards;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-item::after {
  content: "Ver imagen";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none; /* 🔥 CLAVE */
}


.gallery-item:hover img {
  transform: scale(1.1);
}

.gallery-item:hover::after {
  opacity: 1;
}

/* Animación de entrada */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* MODAL */
#gallery-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  background: rgba(0,0,0,0.9);
  display: none;

  align-items: center;
  justify-content: center;

  z-index: 999999;
}

#gallery-modal img {
  max-width: 90vw;
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
}

#gallery-modal .close {
  position: fixed;
  top: 15px;
  right: 20px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
  z-index: 1000000;
}


@keyframes zoomIn {
  from { transform: scale(0.7); }
  to { transform: scale(1); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.gallery-section,
.gallery-grid,
.gallery-item,
.gallery-item img {
  position: relative;
  z-index: 50;
  pointer-events: auto !important;
}