/*
 Theme Name: MGFO ABOGADOS
 Template:   astra   
 Version:    1.0.0
*/

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background:#fff !important;
  scroll-behavior: smooth;
}

#app {
  /* Remove scroll context styles */
  overflow: unset;
  height: auto;
}

.black-color{
    color:#606060;
}
.white-color{
    color:#fff;
}
.black-color a{
    color:#606060;
}
.white-color a{
    color:#fff;
}
body.no-scroll {
  overflow: hidden;
  height: 100vh;
}
body.modal-open {
  position: fixed;
  top: var(--scroll-y);
  left: 0;
  right: 0;
  width: 100%;
}
.bold{
  font-weight:500;
}
.back-button.mobile{display:none;}
.custom-wrap { max-width: 1100px; margin: 0 auto; padding: 24px; }
.hero h1 { color:#fff; font-size: clamp(28px, 4vw, 66px); margin-bottom: 12px; }
#ctaButton { padding: 12px 20px; border: 0; border-radius: 8px; cursor: pointer; }
.logo-little {width:65% !important;}
.container{max-width:1200px;margin:0 auto;padding:0 16px;}
.site-header,.site-footer{padding:16px 0;border-bottom:0;font-family:"Funnel Display";font-size:16px;font-weight:300;}
.site-footer{height:240px;border-top:0;border-bottom:0;background:#011738;display:flex;justify-content: center;position:relative;}
.footer-img-return{width:62px;height:62px; background:#fff;border-radius:50%;display:flex; align-items: center;justify-content: center;}
.footer-txt-return{font-family:"Host Grotesk";font-size:30px;color:#fff;font-weight:300; margin-bottom:20px;text-align: right;}
.nav{list-style:none;display:flex;gap:16px;margin:0;padding:0;}
.nav a{text-decoration:none;}
.nav-toggle{display:none;background:none;border:0;font-size:24px;}
/* Desktop visible por defecto */
.site-header--desktop { display: block; }
.site-header--mobile { display: none; width: 100%;height:55px;}
.site-header--mobile .container-mobile{
  background: #003F62;
  height: 100%;
  width: 100%;
  position:relative;

}
.site-header--mobile .container-mobile .lang-button{
  color: #fff;
  top: 15px;
  position: absolute;
  left: 20px;
}
.mobile-logo{
  width: 80px;
  position: absolute;
  top:75px;
  left:10px;
  z-index: 40;
}

/* Slide from right */
@keyframes slideIn {
  from {
    right: -50px;
    opacity: 0;
  }
  to {
    right: 0;
    opacity: 1;
  }
}

/* Fade out after delay */
@keyframes fadeOut {
  from {
    right: 0px;
    opacity: 1;
  }
  to {
    right: 0px;
    opacity: 0;
  }
}
.notice{
  position:fixed;
  top: 10%;
  right: 0;
  width: 300px;
  height: 80px;
  font-size: clamp(12px, 4vw, 18px);
  color: white;
  background:#003F62;
  font-family: "Host Grotesk";
  z-index:100;
  display: flex;
  align-items: center;
  font-weight: 300;
  padding: 10px;
  border-radius: 10px 0 0 10px;
  line-height: clamp(22px, 4vw, 28px);
  /* animation */
  animation: slideIn 0.6s ease forwards, fadeOut 0.6s ease forwards 4s;
}
.notice.success { background: #4f7a59; }
.notice.error   { background: #722c33; }
/*MOBILE responsive*/
/* 🔹 Extra Small Devices: Mobile Portrait (320px - 479px) */
@media (max-width: 479px) {
  .mobile-logo{
    width:40px;
    position: absolute;
    top:75px;
    left:20px;
    z-index: 40;
  }
  .vh-section {
    min-height: 100dvh !important;
    position:relative;
  }
  .custom-html-template .hero {
    min-height: 100dvh !important;
  }
  .custom-html-template .hero__content .content-title{
    font-size: clamp(36px, 4vw, 52px) !important;
    line-height: clamp(46px, 4vw, 62px) !important;
    margin-top: 80px !important;
  }
  .custom-html-template .hero__content{
    min-height: 300px !important;
    max-height:350px !important;
    padding:10px 20px !important;
  }
  .custom-html-template  .hero__modal{
    width: 90% !important;
    max-height: 160px !important;
    bottom:25% !important;
    height: 20% !important;
    min-height: 140px !important;
  }
  .custom-html-template  .hero__modal .hero__modal-txt{
    width: 100% !important;
    padding: 10px !important;
  }
  .custom-html-template .modal-txt-title{
    font-size: clamp(14px, 4vw, 26px) !important;;
    line-height: clamp(14px, 4vw, 26px) !important;;
    height: 55% !important;
  }
  .custom-html-template .modal-txt-subtitle{
    font-size: 12px !important;
    font-weight:300 !important;
  }
  .custom-html-template .aboutus-section {
    align-items: flex-start !important;
    padding-top: 40px !important;
    height: 75dvh !important;
    min-height:750px !important;
  }
  .custom-html-template .aboutus-container {
    flex-direction: column-reverse !important;
    justify-content: flex-end;
    height:100% !important;
  }
   .custom-html-template .aboutus-container .aboutus-left{
    
    padding-right:0 !important;
  }
   .custom-html-template .aboutus-section .g-container{
    
    height:100% !important;
  }
  .custom-html-template .aboutus-container .aboutus-right,
  .custom-html-template .aboutus-container .aboutus-left {
   width:100% !important;
   height: 50% !important;
  }
  .custom-html-template .aboutus-container .aboutus-left .aboutus-img{
    text-align:center!important;
    margin-top: 60px !important;
  }
  .custom-html-template .aboutus-container .aboutus-left .aboutus-img img{
    height:80% !important;
    background: white;
    padding: 1px;

  }
  .custom-html-template .aboutus-container .aboutus-right .title-1{
    font-size: 28px !important;
    line-height: 35px !important;
  }
  .custom-html-template .aboutus-container .aboutus-right .title-2{
    font-size: 18px !important;

  }
  .custom-html-template .aboutus-left.slidein-bottom{
    transform: none !important;
    transition: opacity 2.5s ease !important;
  }
  .custom-html-template .separator{
    width: calc(100% - 20px) !important;
  }
  .custom-html-template .services-section{
    min-height: 750px;
  }
  .custom-html-template .services-title{
    padding: 0 !important;
    font-size: 28px !important;
    line-height: 38px !important;
    text-align: left !important;
    margin-bottom: 20px !important
  }
  .custom-html-template .services-img-container{
    display:none !important;
  }
  .custom-html-template .services-acc{
    width: 100% !important;
  }
  .custom-html-template .acc__btn{
    font-size: 22px !important;
  }
  .custom-html-template .acc__btn span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1; /* Esto hace que el texto tome todo el espacio disponible */
  margin-top:0 !important;
  }
  .custom-html-template .team-section{
    min-height: 1359px !important;
  }
  .custom-html-template .team-container{
    justify-content: center;
    flex-wrap: wrap !important;
  }
  .custom-html-template .team-title{
    font-size:28px !important;
    font-weight: 500;
  }
   .custom-html-template .team-detail{
    width: 48% !important;
  }
  .custom-html-template .team-detail .team-img{
    height: 279px !important;
  }
  .custom-html-template .team-detail .team-name{
    height: 38px !important;
    font-size: clamp(12px, 4vw, 18px) !important;
    line-height: clamp(22px, 4vw, 28px) !important;
  }

  .custom-html-template .contact-panel .contact-card{
    width: 100% !important;
    padding:20px !important;
    flex-direction: column !important;
  }
  .custom-html-template .team-modal__content{
    width: 96% !important;
    height: 66%;
  }
  .custom-html-template .team-modal__content .content-txt{
  }
  .custom-html-template .team-modal__content .content-txt__name{
    font-size: 28px !important;
    line-height: 36px;
  }
  .custom-html-template .team-modal__content .content-txt__desc{
    height: 48% !important;
    overflow-y: scroll !important;
  }
  .custom-html-template .contact-section{
    min-height: 1165px !important;
  }
  .custom-html-template .contact-panel .contact-card-left,
  .custom-html-template .contact-panel .contact-card-right{
    width:100% !important;
  }
  .custom-html-template .contact-card-left .title-xl{
     font-size: clamp(18px, 4vw, 22px) !important;
    line-height: clamp(28px, 5vw, 32px) !important;
    margin-bottom: 30px;
  }
  .custom-html-template .contact-card-left .contact-desc{
    font-size: 18px !important;
    color:#7B8899 !important;
    font-weight: 300 !important;
  }
  .container-footer{
    width: 100% !important;
  }
  .container-footer .footer-div1{
    padding-left: 20px !important;
  }
  .container-footer .footer-div2{
    display: none !important;
  }
  .container-footer .footer-div3{
    width: 40% !important;
    padding-right:20px !important;
  }
  .footer-txt-return{
    font-size: clamp(16px, 4vw, 20px) !important;
    line-height: clamp(26px, 4vw, 30px) !important;
  }
  .container-footer .footer-div1 .img-div1 img{
    width: 40% !important;
  }
  .page--single .related {
    padding:20px !important;
  }
  .blog-html-template .hero{
    height: 450px !important;
    aspect-ratio: auto !important;
  }
  .blog-html-template .post-list{
    grid-template-columns:repeat(1, 1fr) !important;
  }
  .blog-html-template .search{
    max-width: 70% !important;
  }
  .blog-html-template .page--blog{
    padding-top: 160px !important;
  }
  .hero_arrow{
    display:none;
  }
  .article-content{
    width: 100% !important;
    padding:20px;
  }
  .article-title{
    padding: 20px !important;
  }
  .page--single{
    padding: 0 !important;
  }
  .article-header{
    padding: 20px 20px !important;
    grid-template-columns: 2fr 1fr !important;
  }
  .article-hero{
    border-radius:0 !important;
  }
  .mobile-logo.active{
    display:none !important;
  }
  .back-button.mobile{
    display:grid !important;
  }
  .back-button.desktop{
    display:none !important;
  }
  .meta-item{
    width:160px !important;
  }
  .hamburger::selection {
  background: #003F62; /* Fondo personalizado */
  color: #ffffff;      /* Color del texto seleccionado */
  }
  .reserved-rights{
    font-size:14px !important;
  }
}

/* 🔹 Small Devices: Mobile Landscape / Small Phones (480px - 767px) */
@media (min-width: 480px) and (max-width: 767px) {
  /* Styles for most mobile phones */
  .mobile-logo{
    width: 60px;
    left:20px;
  }
  .vh-section {
    min-height: 100dvh !important;
    position:relative;
  }
  .custom-html-template .hero {
    min-height: 100dvh !important;
  }
  .custom-html-template .hero__content .content-title{
    font-size: clamp(46px, 4vw, 62px) !important;
    line-height: clamp(56px, 5vw, 72px) !important;
    margin-top:115px !important;
  }
  .custom-html-template .hero__content{
    height:100% !important;
    padding:10px 20px !important;
    max-height: 350px;
  }
  .custom-html-template  .hero__modal{
    width: 70% !important;
    height: 25% !important;
    max-height: 180px !important;
    min-height: 140px !important;
    bottom:20% !important;
  }
  .custom-html-template  .hero__modal .hero__modal-txt{
    width: 100% !important;
    padding: 0px 10px !important;
    justify-content: center !important;
  }
  .custom-html-template .modal-txt-title{
    font-size: clamp(12px, 4vw, 18px) !important;
    line-height: clamp(22px, 4vw, 28px) !important;
    height: 55% !important;
  }
  .custom-html-template .modal-txt-subtitle{
    font-size: 16px !important;
    font-weight:300 !important;
  }
  .custom-html-template .aboutus-section {
    align-items: flex-start !important;
    padding-top: 40px !important;
    height: 75dvh !important;
    min-height:750px !important;
  }
  .custom-html-template .aboutus-container {
    flex-direction: column-reverse !important;
    justify-content: flex-end;
    height:100% !important;
  }
   .custom-html-template .aboutus-container .aboutus-left{
    
    padding-right:0 !important;
  }
   .custom-html-template .aboutus-section .g-container{
    
    height:100% !important;
  }
  .custom-html-template .aboutus-container .aboutus-right,
  .custom-html-template .aboutus-container .aboutus-left {
   width:100% !important;
   height: 50% !important;
  }
  .custom-html-template .aboutus-container .aboutus-left .aboutus-img{
    text-align:center!important;
    margin-top: 60px !important;
  }
  .custom-html-template .aboutus-container .aboutus-left .aboutus-img img{
    height:80% !important;

  }
  .custom-html-template .aboutus-container .aboutus-right .title-1{
    font-size: clamp(26px, 4vw, 42px) !important;
    line-height: clamp(36px, 5vw, 52px) !important;
  color:#001738;
  }
  .custom-html-template .aboutus-container .aboutus-right .title-2{
    font-size: clamp(16px, 4vw, 24px) !important;
  line-height: clamp(26px, 5vw, 34px) !important;

  }
  .custom-html-template .aboutus-left.slidein-bottom{
    transform: none !important;
    transition: opacity 2.5s ease !important;
  }
  .custom-html-template .separator{
    width: calc(100% - 20px) !important;
  }
  .custom-html-template .services-section{
    min-height: 750px;
  }
  .custom-html-template .services-title{
    padding: 0 !important;
     font-size: clamp(26px, 4vw, 42px) !important;
    line-height: clamp(36px, 5vw, 52px) !important;
    text-align: left !important;
    margin-bottom: 40px !important
  }
  .custom-html-template .services-img-container{
    display:none !important;
  }
  .custom-html-template .services-acc{
    width: 100% !important;
  }
  .custom-html-template .acc__btn{
    font-size: 22px !important;
  }
  .custom-html-template .acc__btn span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1; /* Esto hace que el texto tome todo el espacio disponible */
  margin-top:0 !important;
  }
  .custom-html-template .team-section{
    height: fit-content !important;
  }
  .custom-html-template .team-container{
    justify-content: center;
    flex-wrap: wrap !important;
  }
  .custom-html-template .team-title{
     font-size: clamp(26px, 4vw, 42px) !important;
    line-height: clamp(36px, 5vw, 52px) !important;
    font-weight: 500;
  }
   .custom-html-template .team-detail{
    width: 40% !important;
  }
  .custom-html-template .team-detail .team-img{
    height: 41% !important;
  }
  .custom-html-template .team-detail .team-name{
    height: 38px !important;
  }

  .custom-html-template .contact-panel .contact-card{
    width: 100% !important;
    padding:20px !important;
    flex-direction: column !important;
  }
  .custom-html-template .team-modal__content{
    width: 96% !important;
    height: 66%;
  }
  .custom-html-template .team-modal__content .content-txt{
  }
  .custom-html-template .team-modal__content .content-txt__name{
    font-size: 28px !important;
    line-height: 36px;
  }
  .custom-html-template .team-modal__content .content-txt__desc{
    height: 60% !important;
    overflow-y: scroll !important;
  }
  .custom-html-template .contact-section{
    height: 166vh !important;
    min-height: 1230px !important;
  }
  .custom-html-template .contact-panel .contact-card-left,
  .custom-html-template .contact-panel .contact-card-right{
    width:100% !important;
  }
  .custom-html-template .contact-card-left .title-xl{
     font-size: clamp(36px, 4vw, 58px) !important;
    line-height: clamp(46px, 5vw, 68px) !important;
    margin-bottom: 30px;
  }
  .custom-html-template .contact-card-left .contact-desc{
    font-size: 18px !important;
    color:#7B8899 !important;
    font-weight: 300 !important;
  }
  .container-footer{
    width: 100% !important;
  }
  .container-footer .footer-div1{
    padding-left: 20px !important;
  }
  .container-footer .footer-div2{
    display: none !important;
  }
  .container-footer .footer-div3{
    width: 40% !important;
    padding-right:20px !important;
  }
  .footer-txt-return{
    font-size: clamp(12px, 4vw, 18px) !important;
    line-height: clamp(22px, 4vw, 28px) !important;
  }
  .container-footer .footer-div1 .img-div1 img{
    width: 30% !important;
  }
  .page--single .related {
    padding:20px !important;
  }
  .blog-html-template .hero{
    height: 450px !important;
    aspect-ratio: auto !important;
  }
  .blog-html-template .post-list{
    grid-template-columns:repeat(2, 1fr) !important;
  }
  .blog-html-template .search{
    max-width: 70% !important;
  }
  .blog-html-template .page--blog{
    padding-top: 160px !important;
  }
  .hero_arrow{
    display:none;
  }
  .article-content{
    width: 100% !important;
    padding:20px;
  }
  .article-title{
    padding: 20px !important;
  }
  .page--single{
    padding: 0 !important;
  }
  .article-header{
    padding: 20px 20px !important;
    grid-template-columns: 2fr 1fr !important;
  }
  .article-hero{
    border-radius:0 !important;
  }
  .mobile-logo.active{
    display:none !important;
  }
  .back-button.mobile{
    display:grid !important;
  }
  .back-button.desktop{
    display:none !important;
  }
  .meta-item{
    width:220px !important;
  }
  .hamburger::selection {
  background: #003F62; /* Fondo personalizado */
  color: #ffffff;      /* Color del texto seleccionado */
  }
  .reserved-rights{
    font-size:14px !important;
  }
}

/* 🔹 Medium Devices: Tablets Portrait (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  /* Styles for tablets in portrait mode */
  /* Styles for most mobile phones */
  .mobile-logo{
    width: 70px;
    left:20px;
  }
  .vh-section {
    min-height: 100dvh !important;
    position:relative;
  }
  .custom-html-template .hero {
    min-height: 100dvh !important;
  }
  .custom-html-template .hero__content .content-title{
    font-size: clamp(46px, 4vw, 56px) !important;
    line-height: clamp(56px, 5vw, 66px) !important;
    margin-top:75px !important;
  }
  .custom-html-template .hero__content{
    height:420px !important;
    padding:20px !important;
  }
  .custom-html-template  .hero__modal{
    width: 68% !important;
    height: 25% !important;
    bottom:20% !important;
  }
  .custom-html-template  .hero__modal .hero__modal-txt{
    width: 100% !important;
    padding: 10px !important;
  }
  .custom-html-template .modal-txt-title{
    font-size: 26px !important;
    line-height: 35px !important;
    font-size: clamp(14px, 4vw, 20px) !important;
    line-height: clamp(24px, 5vw, 30px) !important;
    height: 55% !important;
  }
  .custom-html-template .modal-txt-subtitle{
    font-size: 16px !important;
    font-weight:300 !important;
  }
  .custom-html-template .aboutus-section {
    align-items: flex-start !important;
    padding-top: 40px !important;
    height: 75dvh !important;
    min-height:750px !important;
  }
  .custom-html-template .aboutus-container {
    flex-direction: column-reverse !important;
    justify-content: flex-end;
    height:100% !important;
  }
   .custom-html-template .aboutus-container .aboutus-left{
    
    padding-right:0 !important;
  }
   .custom-html-template .aboutus-section .g-container{
    
    height:100% !important;
  }
  .custom-html-template .aboutus-container .aboutus-right,
  .custom-html-template .aboutus-container .aboutus-left {
   width:100% !important;
   height: 50% !important;
  }
  .custom-html-template .aboutus-container .aboutus-left .aboutus-img{
    text-align:center!important;
    margin-top: 60px !important;
  }
  .custom-html-template .aboutus-container .aboutus-left .aboutus-img img{
    height:80% !important;

  }
  .custom-html-template .aboutus-container .aboutus-right .title-1{
    font-size: clamp(26px, 4vw, 42px) !important;
    line-height: clamp(36px, 5vw, 52px) !important;
  color:#001738;
  }
  .custom-html-template .aboutus-container .aboutus-right .title-2{
    font-size: clamp(16px, 4vw, 24px) !important;
  line-height: clamp(26px, 5vw, 34px) !important;

  }
  .custom-html-template .aboutus-left.slidein-bottom{
    transform: none !important;
    transition: opacity 2.5s ease !important;
  }
  .custom-html-template .separator{
    width: calc(100% - 20px) !important;
  }
  .custom-html-template .services-section{
    min-height: 750px;
  }
  .custom-html-template .services-title{
    padding: 0 !important;
     font-size: clamp(26px, 4vw, 42px) !important;
    line-height: clamp(36px, 5vw, 52px) !important;
    text-align: left !important;
    margin-bottom: 40px !important
  }
  .custom-html-template .services-img-container{
    display:none !important;
  }
  .custom-html-template .services-acc{
    width: 100% !important;
  }
  .custom-html-template .acc__btn{
    font-size: 22px !important;
  }
  .custom-html-template .acc__btn span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1; /* Esto hace que el texto tome todo el espacio disponible */
  margin-top:0 !important;
  }
  .custom-html-template .team-section{
    height: fit-content !important;
  }
  .custom-html-template .team-container{
    justify-content: center;
    flex-wrap: wrap !important;
  }
  .custom-html-template .team-title{
     font-size: clamp(26px, 4vw, 42px) !important;
    line-height: clamp(36px, 5vw, 52px) !important;
    font-weight: 500;
  }
   .custom-html-template .team-detail{
    width: 26% !important;
  }
  .custom-html-template .team-detail .team-img{
    height: 41% !important;
  }
  .custom-html-template .team-detail .team-name{
    height: 38px !important;
  }

  .custom-html-template .contact-panel .contact-card{
    width: 100% !important;
    padding:20px !important;
    flex-direction: column !important;
  }
  .custom-html-template .team-modal__content{
    width: 96% !important;
    height: 66%;
  }
  .custom-html-template .team-modal__content .content-txt{
  }
  .custom-html-template .team-modal__content .content-txt__name{
    font-size: 28px !important;
    line-height: 36px;
  }
  .custom-html-template .team-modal__content .content-txt__desc{
    height: 60% !important;
    overflow-y: scroll !important;
  }
  .custom-html-template .contact-section{
    height: 156vh !important;
    min-height: 1240px !important;
  }
  .custom-html-template .contact-panel .contact-card-left,
  .custom-html-template .contact-panel .contact-card-right{
    width:100% !important;
  }
  .custom-html-template .contact-card-left .title-xl{
     font-size: clamp(36px, 4vw, 58px) !important;
    line-height: clamp(46px, 5vw, 68px) !important;
    margin-bottom: 30px;
  }
  .custom-html-template .contact-card-left .contact-desc{
    font-size: 18px !important;
    color:#7B8899 !important;
    font-weight: 300 !important;
  }
  .container-footer{
    width: 100% !important;
  }
  .container-footer .footer-div1{
    padding-left: 20px !important;
  }
  .container-footer .footer-div2{
    display: none !important;
  }
  .container-footer .footer-div3{
    width: 40% !important;
    padding-right:20px !important;
  }
  .footer-txt-return{
   font-size: clamp(12px, 4vw, 18px) !important;
    line-height: clamp(22px, 4vw, 28px) !important;
  }
  .container-footer .footer-div1 .img-div1 img{
    width: 30% !important;
  }
  .page--single .related {
    padding:20px !important;
  }
  .blog-html-template .hero{
    height: 450px !important;
    aspect-ratio: auto !important;
  }
  .blog-html-template .post-list{
    grid-template-columns:repeat(2, 1fr) !important;
  }
  .blog-html-template .search{
    max-width: 70% !important;
  }
  .blog-html-template .page--blog{
    padding-top: 160px !important;
  }
  .hero_arrow{
    display:none;
  }
  .article-content{
    width: 100% !important;
    padding:20px;
  }
  .article-title{
    padding: 0 !important;
  }
  .page--single{
    padding: 0 !important;
  }
  .article-header{
    padding: 20px !important;
    grid-auto-flow: column !important; /* ← Makes grid flow horizontally */
    grid-auto-columns: auto !important; /* ← Each item sizes to its content */
    align-items: start !important;      /* Vertical alignment inside the row */
    justify-content: start !important;  /* Horizontal alignment of the whole row */
    gap: 16px !important;   
  }
  .container-single-title{
    padding-left:20px;
  }
  .article-hero{
    border-radius:0 !important;
  }
  .mobile-logo.active{
    display:none !important;
  }
  .back-button.mobile{
    display:none !important;
  }

  .meta-item{
    width:220px !important;
  }
  .hamburger::selection {
  background: #003F62; /* Fondo personalizado */
  color: #ffffff;      /* Color del texto seleccionado */
  }
  .reserved-rights{
    font-size:14px !important;
  }
  .site-footer{
    height:300px !important;
  }
  .header-logo-container{
    width:90px;
  }
}

/* 🔹 Large Devices: Tablets Landscape / Small Laptops (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    /* Styles for tablets in portrait mode */
  /* Styles for most mobile phones */
  .vh-section {
    min-height: 100dvh !important;
    position:relative;
  }
  .header-logo-container{
    width:90px;
  }
  .custom-html-template .hero {
    min-height: 100dvh !important;
  }
  .custom-html-template .hero__content .content-title{
    font-size: clamp(50px, 4vw, 66px) !important;
    line-height: clamp(60px, 5vw, 76px) !important;
    margin-top:180px !important;
  }
  .custom-html-template .hero__content{
    min-height:420px !important;
    padding:35px !important;
  }
  .custom-html-template  .hero__modal{
    width: 48% !important;
    height: 30% !important;
    bottom:20% !important;
    max-height: 178px !important;
  }
  .container-single-title{
    padding-left:20px;
  }
  .custom-html-template  .hero__modal .hero__modal-txt{
    width: 100% !important;
    padding: 10px !important;
  }
  .custom-html-template .modal-txt-title{
    font-size: 26px !important;
    line-height: 35px !important;
    font-size: clamp(14px, 4vw, 24px) !important;
    line-height: clamp(24px, 5vw, 34px) !important;
    height: 55% !important;
  }
  .custom-html-template .modal-txt-subtitle{
    font-size: 16px !important;
    font-weight:300 !important;
  }
  .custom-html-template .aboutus-section {
    align-items: flex-start !important;
    padding-top: 40px !important;
    height: 75dvh !important;
    min-height:550px !important;
  }
  .custom-html-template .aboutus-container {
    height:100% !important;
  }
   .custom-html-template .aboutus-container .aboutus-left{
    width:35%;
    padding-right:0 !important;
  }
   .custom-html-template .aboutus-section .g-container{
    
    height:100% !important;
  }
  .custom-html-template .aboutus-container .aboutus-right,
  .custom-html-template .aboutus-container .aboutus-left {
   height: 70% !important;
  }
  .custom-html-template .aboutus-container .aboutus-left .aboutus-img{
    text-align:center!important;
    margin-top: 20px !important;
  }
  .custom-html-template .aboutus-container .aboutus-left .aboutus-img img{
    height:100% !important;

  }
  .custom-html-template .aboutus-container .aboutus-right .title-1{
    font-size: clamp(26px, 4vw, 42px) !important;
    line-height: clamp(36px, 5vw, 52px) !important;
  color:#001738;
  }
  .custom-html-template .aboutus-container .aboutus-right .title-2{
    font-size: clamp(16px, 4vw, 24px) !important;
  line-height: clamp(26px, 5vw, 34px) !important;

  }
  .custom-html-template .aboutus-left.slidein-bottom{
    transform: none !important;
    transition: opacity 2.5s ease !important;
  }
  .custom-html-template .separator{
    width: calc(100% - 20px) !important;
  }
  .custom-html-template .services-section{
    min-height: 750px;
  }
  .custom-html-template .services-title{
    padding: 0 60px !important;
     font-size: clamp(26px, 4vw, 42px) !important;
    line-height: clamp(36px, 5vw, 52px) !important;
    text-align: left !important;
    margin-bottom: 40px !important
  }
  .custom-html-template .services-container{
    padding: 0 60px;
  }
  .custom-html-template .services-img-container{
    display:block !important;
  }
  .custom-html-template .services-acc{
    width: 100% !important;
  }
  .custom-html-template .acc__btn{
    font-size: 22px !important;
  }
  .custom-html-template .acc__btn span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1; /* Esto hace que el texto tome todo el espacio disponible */
  margin-top:0 !important;
  }
  .custom-html-template .team-section{
    height: fit-content !important;
  }
  .custom-html-template .team-container{
    justify-content: center;
    flex-wrap: wrap !important;
  }
  .custom-html-template .team-title{
     font-size: clamp(26px, 4vw, 42px) !important;
    line-height: clamp(36px, 5vw, 52px) !important;
    font-weight: 500;
  }
   .custom-html-template .team-detail{
    width: 26% !important;
  }
  .custom-html-template .team-detail .team-img{
    height: 41% !important;
  }
  .custom-html-template .team-detail .team-name{
    height: 38px !important;
  }

  .custom-html-template .contact-panel .contact-card{
    width: 100% !important;
    padding:20px !important;
  }
  .custom-html-template .team-modal__content{
    width: 96% !important;
    height: 66%;
  }
  .custom-html-template .team-modal__content .content-txt{
  }
  .custom-html-template .team-modal__content .content-txt__name{
    font-size: 28px !important;
    line-height: 36px;
  }
  .custom-html-template .team-modal__content .content-txt__desc{
    height: 60% !important;
    overflow-y: scroll !important;
  }
  .custom-html-template .contact-section{
    height: 92vh !important;
    min-height: 700px !important;
  }
  .custom-html-template .contact-panel .contact-card-left,
  .custom-html-template .contact-panel .contact-card-right{
    width:100% !important;
  }
  .custom-html-template .contact-card-left .title-xl{
     font-size: clamp(36px, 4vw, 58px) !important;
    line-height: clamp(46px, 5vw, 68px) !important;
    margin-bottom: 30px;
  }
  .custom-html-template .contact-card-left .contact-desc{
    font-size: 18px !important;
    color:#7B8899 !important;
    font-weight: 300 !important;
  }
  .container-footer{
    width: 100% !important;
  }
  .container-footer .footer-div1{
    padding-left: 20px !important;
  }
  .container-footer .footer-div2{

  }
  .footer-txt-return{
    font-size: clamp(12px, 4vw, 18px) !important;
    line-height: clamp(22px, 4vw, 28px) !important;
  }
  .container-footer .footer-div3{

    padding-right:20px !important;
  }
  .footer-txt-return{
    font-size: clamp(12px, 4vw, 18px) !important;
    line-height: clamp(22px, 4vw, 28px) !important;
  }
  .container-footer .footer-div1 .img-div1 img{
    width: 20% !important;
  }
  .page--single .related {
    padding:20px !important;
  }
  .blog-html-template .hero{
    height: 450px !important;
    aspect-ratio: auto !important;
  }
  .blog-html-template .post-list{
    grid-template-columns:repeat(3, 1fr) !important;
  }
  .blog-html-template .search{
    max-width: 70% !important;
  }
  .blog-html-template .page--blog{
    padding-top: 80px !important;
  }
  .hero_arrow{
    display:none;
  }
  .article-content{
    width: 100% !important;
    padding:20px;
  }
  .article-title{
    padding: 0 !important;
  }
  .page--single{
    padding: 0 !important;
  }
  .article-header{
    padding: 20px !important;
    grid-auto-flow: column !important; /* ← Makes grid flow horizontally */
    grid-auto-columns: auto !important; /* ← Each item sizes to its content */
    align-items: start !important;      /* Vertical alignment inside the row */
    justify-content: start !important;  /* Horizontal alignment of the whole row */
    gap: 16px !important;   
  }
  .article-hero{
    border-radius:0 !important;
  }
  .mobile-logo.active{
    display:none !important;
  }
  .back-button.mobile{
    display:none !important;
  }

  .meta-item{
    width:220px !important;
  }
  .hamburger::selection {
  background: #003F62; /* Fondo personalizado */
  color: #ffffff;      /* Color del texto seleccionado */
  }
  .reserved-rights{
    font-size:14px !important;
  }
  .site-footer{
    height:300px !important;
  }
  .header-logo-container{
    padding-left:0px !important;
    width:100px !important;
  }
}

/* 🔹 Extra Large Devices: Desktops (1200px - 1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {
  /* Full layout begins here (max width 1200px centered) */
  .vh-section {
    min-height: 100dvh !important;
    position:relative;
  }
  .custom-html-template .aboutus-section{
    min-height: 600px !important;
    align-items: flex-start !important;
    padding-top: 20px !important;
  } 
  .custom-html-template .team-section{
    min-height: fit-content !important;
  }
  .custom-html-template .services-section{
    min-height: 1050px !important;
    height: 176vh;
  } 
  .custom-html-template .contact-card-left .title-xl{
     font-size: clamp(26px, 4vw, 48px) !important;
    line-height: clamp(36px, 5vw, 58px) !important;
    margin-bottom: 30px;
  }.custom-html-template .contact-section{
    height: 88vh !important;
    min-height: 750px !important;
    
  }
  .custom-html-template .hero__content .content-title{
    font-size: clamp(42px, 4vw, 52px) !important;
    line-height: clamp(52px, 5vw, 62px) !important;
    margin-top:180px !important;
  }
  .custom-html-template .hero__content{
    min-height:420px !important;
    padding:35px !important;
  }
  .custom-html-template  .hero__modal{
    width: 600px !important;
    height: 30% !important;
    bottom:20% !important;
    max-height: 180px !important;
  }
   .custom-html-template  .hero__modal .hero__modal-txt{
    width: 100% !important;
    padding: 10px !important;
  }
  .custom-html-template .modal-txt-title{
    font-size: 26px !important;
    line-height: 35px !important;
    font-size: clamp(14px, 4vw, 24px) !important;
    line-height: clamp(24px, 5vw, 34px) !important;
    height: 55% !important;
  }
  .custom-html-template .modal-txt-subtitle{
    font-size: 16px !important;
    font-weight:300 !important;
  }
  .custom-html-template .team-modal__content .content-txt__desc{
    height: 48% !important;
    overflow-y: scroll !important;
  }
  .footer-txt-return{
    font-size: clamp(12px, 4vw, 18px) !important;
    line-height: clamp(22px, 4vw, 28px) !important;
  }
}

/* 🔹 2K Displays: Large Desktops (1440px - 1919px) */
@media (min-width: 1440px) and (max-width: 1919px) {
  .vh-section {
    min-height: 100dvh !important;
    position:relative;
  }
  .custom-html-template .aboutus-section{
    min-height: 600px !important;
     padding-top: 20px !important;
    align-items: flex-start !important;
  }
  .custom-html-template .services-section{
    min-height: 1100px !important;
  }
   .custom-html-template .team-section{
    height: fit-content !important;
  }
  /* Optional tweaks for large screens */
  /* Full layout begins here (max width 1200px centered) */
  .custom-html-template .contact-card-left .title-xl{
     font-size: clamp(26px, 4vw, 48px) !important;
    line-height: clamp(36px, 5vw, 58px) !important;
    margin-bottom: 30px;
  }.custom-html-template .contact-section{
    height: 88vh !important;
    min-height: 630px !important;
   
  }
  .custom-html-template .hero__content .content-title{
    font-size: clamp(48px, 4vw, 70px) !important;
    line-height: clamp(58px, 5vw, 80px) !important;
    margin-top:180px !important;
  }
  .custom-html-template .hero__content{
    min-height:420px !important;
    padding:35px !important;
  }
  .custom-html-template  .hero__modal{
    width: 600px !important;
    height: 25% !important;
    bottom:20% !important;
    max-height: 178px !important;
  }
   .custom-html-template  .hero__modal .hero__modal-txt{
    width: 100% !important;
    padding: 10px !important;
  }
  .custom-html-template .modal-txt-title{
    font-size: 26px !important;
    line-height: 35px !important;
    font-size: clamp(14px, 4vw, 24px) !important;
    line-height: clamp(24px, 5vw, 34px) !important;
    height: 55% !important;
  }
  .custom-html-template .modal-txt-subtitle{
    font-size: 16px !important;
    font-weight:300 !important;
  }
  .custom-html-template .team-modal__content .content-txt__desc{
    height: 48% !important;
    overflow-y: scroll !important;
  }
  .footer-txt-return{
    font-size: clamp(12px, 4vw, 18px) !important;
    line-height: clamp(22px, 4vw, 28px) !important;
  }
}

/* 🔹 Ultra-Wide Screens: 1920px and above */
@media (min-width: 1920px) {
  .vh-section {
    min-height: 100dvh !important;
    position:relative;
  }
  /* Optional large-scale styling (e.g., extra whitespace, wide images) */
  /* Full layout begins here (max width 1200px centered) */
  .custom-html-template .contact-card-left .title-xl{
     font-size: clamp(26px, 4vw, 48px) !important;
    line-height: clamp(36px, 5vw, 58px) !important;
    margin-bottom: 30px;
  }.custom-html-template .contact-section{
    height: 88vh !important;
  }
  .custom-html-template .hero__content .content-title{
    font-size: clamp(48px, 4vw, 80px) !important;
    line-height: clamp(58px, 5vw, 90px) !important;
    margin-top:180px !important;
  }
  .custom-html-template .hero__content{
    min-height:420px !important;
    padding:35px !important;
  }
  .custom-html-template  .hero__modal{
    width: 600px !important;
    height: 30% !important;
    bottom:20% !important;
    max-height: 178px !important;
  }
   .custom-html-template  .hero__modal .hero__modal-txt{
    width: 100% !important;
    padding: 10px !important;
  }
  .custom-html-template .modal-txt-title{
    font-size: 26px !important;
    line-height: 35px !important;
    font-size: clamp(14px, 4vw, 24px) !important;
    line-height: clamp(24px, 5vw, 34px) !important;
    height: 55% !important;
  }
  .custom-html-template .modal-txt-subtitle{
    font-size: 16px !important;
    font-weight:300 !important;
  }
  .footer-txt-return{
    font-size: clamp(12px, 4vw, 18px) !important;
    line-height: clamp(22px, 4vw, 28px) !important;
  }
}

.hamburger {
  width: 28px;
  height: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: none !important;
  border: none;
  cursor: pointer;
  padding: 0;
  position:absolute;
  right: 20px;
  top: 15px;
}

.hamburger:active {
  background: none !important;
}

.hamburger span {
  display: block;
  height: 3px;
  background-color: white;
  border-radius: 3px;
  transition: all 0.3s ease;
}

/* Animation when menu is open */
.hamburger.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}
.mobile-menu {
  position: fixed;
  top: 55px; /* height of header */
  left: 0;
  right: 0;
  background: #003F62;
  opacity: 0.9;
  padding: 10px 20px 20px 10px;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  z-index: 999;
  display:none;
  text-align: center;
  height: 100vh;
  overflow: hidden;
  padding-top: 30%;
}
.mobile-menu a{
 color: #fff;
}
.mobile-menu .menu-btn{
font-size: 26px;
font-family:"Host Grotesk";
height: 50px;
opacity:1;

}

/* When menu is visible */
.mobile-menu.active {
  transform: translateY(0);
  display:block;
}
/* Mobile First: al llegar a 1024px o menos */
@media (max-width: 1024px) {
  .site-header--desktop { display: none; }
  .site-header--mobile { display: block; }
}
@media (max-width:768px){
  .nav{display:none;flex-direction:column;gap:8px;}
  .nav.is-open{display:flex;}
  .nav-toggle{display:inline-block;}
}
.page--single{ max-width: 1200px; margin:0 auto; padding: 20px 16px; color:#0F2740; font-family:"Host Grotesk",system-ui,sans-serif; background-color: #fff;}
.article-header{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:18px;padding-left: 105px;
}
.meta-item .meta-label{ display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#6B7380; margin-bottom:4px; }
.meta-item .meta-value{ font-weight:600; color:#0F2740; }
.meta-item .meta-value.link{ text-decoration:none; border-bottom:1px solid transparent; }
.meta-item .meta-value.link:hover{ border-bottom-color:#0F2740; }

@media (max-width:800px){ .article-header{ grid-template-columns:1fr; } }
.container-single-title{position:relative;height: fit-content; width: 100%; display:flex;align-items: center;gap: 73px;}
.vertical-text {
  writing-mode: vertical-lr; /* vertical text from top to bottom */
  transform: rotate(180deg);
  text-orientation: mixed;
  font-family:"Host Grotesk";
  font-size: clamp(14px, 4vw, 18px);
}
.back-button{ color:#003F62; font-family:"Host Grotesk";width: 45px; cursor:pointer;}
.back-button a{ color:#003F62; text-decoration: none;}
.back-icon{width: 80%; margin-bottom:10px;}
.article-hero{ width:100%; aspect-ratio:16/9; border-radius:18px; overflow:hidden; margin: 12px 0 18px; background:#dbe2ea; }
.article-hero img{ width:100%; height:100%; object-fit:cover; display:block; }

.article-title{ font-family:"Funnel Display"; font-weight:400; font-size: clamp(28px,4.2vw,44px); line-height:1.15; margin: 0 0 12px;}
.article-content{font-size:18px; color:#2c3a4b; width:60%; margin: auto; font-family:"Host Grotesk";font-weight:300;}
.article-content p{ margin:0 0 16px; }
.hr{ height:1px; background:#E7E9EE; margin: 36px 0 24px; }

.related-title{ font-size:14px; color:#6B7380; letter-spacing:.18em; text-transform:uppercase; margin:0 0 12px; }
   
.card-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
@media (max-width:900px){ .card-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .card-grid{ grid-template-columns:1fr; } }

.blog-html-template .post-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e9edf2;
  display: flex;
  flex-direction: column;
  height: 100%; /* Asegura altura completa en el contenedor */
}

.blog-html-template .post-card__media {
  aspect-ratio: 16/10;
  background: #ddd center/cover no-repeat;
}

.blog-html-template .post-card__body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1; /* Ocupa el espacio disponible */
}

.blog-html-template .post-card__meta {
  font-size: 12px;
  color: #6b7280;
}

.blog-html-template .post-card__title {
  font-weight: 700;
  font-size: 16px;
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;       /* Máximo 2 líneas */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.8em; /* Mantiene altura visual fija */
}

.blog-html-template .post-card__row {
  margin-top: auto; /* Empuja hacia abajo */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blog-html-template .post-card__chip {
  background: #eef6ff;
  color: #1f3d7a;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
}
.blog-html-template .post-card__link {
  font-family: "Host Grotesk";
  text-decoration: underline;

}


.reserved-rights{
  position:absolute;
  bottom:0;
  right:0;
  left:0;
  margin:auto;
  height: 30px;
  opacity:0.5;
  text-align: center;
  font-size:18px;
}
.underline-btn {
  position: relative;
  cursor: pointer;
  padding: 6px 3px 6px 0px;
}

.underline-btn::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: currentColor;
  
  /* hidden line shrunk to 0 on X axis */
  transform: scaleX(0);
  transform-origin: left;            /* start grows from left */
  transition: transform 0.3s ease, transform-origin 0s 0.3s; 
}

/* On hover */
.underline-btn:hover::after {
  transform: scaleX(1);               /* full width */
  transform-origin: left;             /* expand from left */
  transition: transform 0.3s ease;    /* smooth grow */
}

/* On hover out, reverse from right */
.underline-btn:not(:hover)::after {
  transform-origin: left;            /* shrink from right */
  transition: transform 0.3s ease, transform-origin 0s;
}
input,
textarea {
  font-family: 'Host Grotesk', sans-serif;
  color:#000;
}
input::placeholder,
textarea::placeholder {
  color: #7B8899;    
  opacity: 1;          

}
.container-footer{
  display:flex;
  height:100%;
  width:63%;
  color: #fff;
}
.container-footer .footer-div1 {
  width:60%;
  padding: 0px;
}
.container-footer .footer-div2{
  display:flex;
  flex-direction: column;
  align-items: flex-start;
}
.container-footer .div2-content{
  width: fit-content;
  background: none;
  border: none;
  color: #fff;
  font-family: "Host Grotesk";
  font-size: 16px;
  font-weight: 300;
}
.container-footer .div2-content a{

  color: #fff;
  text-decoration: none;
  
}
.container-footer .footer-div3{
  display:flex;
  flex-direction: column;
  align-items: flex-end;
}
.container-footer .footer-div2,  .container-footer .footer-div3{
  width:20%;
}
.container-footer .footer-div1 .img-div1 img{
  width:20%;
}

.header-container{
  display:flex;
  width:100%;
}
.header-logo-container{
  width:120px;
  height:120px;
  padding-top: 33px;
}
.header-logo-container img{
  width:100%;
}
.header-logo{
  width:100%;
  height: 100%;
  background:var(--header-logo);
  background-size: contain;
    background-repeat: no-repeat;
}
.header-buttons-container{
  display:flex;
  width: calc(100% - 100px);
  justify-content: flex-end;
}

.header-button{
  width: 13%;
  text-align: center;
  display:flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
   cursor:pointer;
   font-family:"Host Grotesk";
   font-weight: 300;
}
.header-button a{

}
             /* avoid top-collapsing margins */
.g-container {margin: 0 auto; padding: 0 16px; }

/* Estado activo del link en el menú (se marca vía JS) */
.nav a.is-active { border-bottom: 2px solid currentColor; }

/* Ajuste si estás logueado (barra admin en desktop) */
@media (min-width: 783px){
  body.admin-bar.custom-html-template { --admin-bar: 32px; }
}
/* ===== Grid vanilla (prefijo g-) ===== */
:root{
  --g-max: 1200px;        /* ancho container */
  --g-pad: 16px;          /* padding lateral container */
  --g-gap: 16px;          /* gap base */
  --g-gap-lg: 24px;       /* gap en pantallas grandes */
  --g-sm: 640px;          /* breakpoints */
  --g-md: 768px;
  --g-lg: 1024px;
  --g-xl: 1280px;
}

/* Contenedor centrado */
.g-container{
  max-width: var(--g-max);
  margin-inline: auto;
  padding-inline: var(--g-pad);
}

/* Fila de 12 columnas (CSS Grid) */
.g-row{
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  column-gap: var(--g-gap);
  row-gap: var(--g-gap);
}
@media (min-width: var(--g-lg)){
  .g-row{ column-gap: var(--g-gap-lg); row-gap: var(--g-gap-lg); }
}

/* Columna: por defecto ocupan 12/12 en móvil */
.g-row > [class*="col-"]{ grid-column: span 12; }

/* Spans (1–12) */
.col-1{grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3}
.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}
.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9}
.col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12}

/* Spans por breakpoint (sm/md/lg/xl) */
@media (min-width: var(--g-sm)){
  .sm-1{grid-column:span 1}.sm-2{grid-column:span 2}.sm-3{grid-column:span 3}
  .sm-4{grid-column:span 4}.sm-5{grid-column:span 5}.sm-6{grid-column:span 6}
  .sm-7{grid-column:span 7}.sm-8{grid-column:span 8}.sm-9{grid-column:span 9}
  .sm-10{grid-column:span 10}.sm-11{grid-column:span 11}.sm-12{grid-column:span 12}
}
@media (min-width: var(--g-md)){
  .md-1{grid-column:span 1}.md-2{grid-column:span 2}.md-3{grid-column:span 3}
  .md-4{grid-column:span 4}.md-5{grid-column:span 5}.md-6{grid-column:span 6}
  .md-7{grid-column:span 7}.md-8{grid-column:span 8}.md-9{grid-column:span 9}
  .md-10{grid-column:span 10}.md-11{grid-column:span 11}.md-12{grid-column:span 12}
}
@media (min-width: var(--g-lg)){
  .lg-1{grid-column:span 1}.lg-2{grid-column:span 2}.lg-3{grid-column:span 3}
  .lg-4{grid-column:span 4}.lg-5{grid-column:span 5}.lg-6{grid-column:span 6}
  .lg-7{grid-column:span 7}.lg-8{grid-column:span 8}.lg-9{grid-column:span 9}
  .lg-10{grid-column:span 10}.lg-11{grid-column:span 11}.lg-12{grid-column:span 12}
}
@media (min-width: var(--g-xl)){
  .xl-1{grid-column:span 1}.xl-2{grid-column:span 2}.xl-3{grid-column:span 3}
  .xl-4{grid-column:span 4}.xl-5{grid-column:span 5}.xl-6{grid-column:span 6}
  .xl-7{grid-column:span 7}.xl-8{grid-column:span 8}.xl-9{grid-column:span 9}
  .xl-10{grid-column:span 10}.xl-11{grid-column:span 11}.xl-12{grid-column:span 12}
}

/* Offsets (empujes) */
.start-2{grid-column-start: 3}.start-3{grid-column-start: 4}
.start-4{grid-column-start: 5}.start-5{grid-column-start: 6}
.start-6{grid-column-start: 7}.start-7{grid-column-start: 8}
.start-8{grid-column-start: 9}.start-9{grid-column-start: 10}
.start-10{grid-column-start: 11}.start-11{grid-column-start: 12}
@media (min-width: var(--g-md)){
  .md-start-2{grid-column-start: 3}.md-start-3{grid-column-start: 4}
  .md-start-4{grid-column-start: 5}.md-start-5{grid-column-start: 6}
  .md-start-6{grid-column-start: 7}.md-start-7{grid-column-start: 8}
  .md-start-8{grid-column-start: 9}.md-start-9{grid-column-start: 10}
  .md-start-10{grid-column-start: 11}.md-start-11{grid-column-start: 12}
}

/* Alineaciones rápidas */
.g-center{align-items:center}        /* vertical (en la fila) */
.g-middle{text-align:center}         /* horizontal (en el contenido) */

/* Gaps utilitarios (override por fila) */
.g-gap-0{gap:0}.g-gap-1{gap:8px}.g-gap-2{gap:12px}
.g-gap-3{gap:16px}.g-gap-4{gap:24px}.g-gap-5{gap:32px}.g-gap-6{gap:48px}

/* Auto-grid para tarjetas (mínimo 280px por tarjeta) */
.g-auto{
  display:grid;
  gap: var(--g-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* Full-bleed: sección que rompe el container y ocupa todo el ancho */
.g-full-bleed{
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Helpers base (opcionales) */
.g-hide{display:none!important}
.g-show{display:block!important}