/* mlc-pro.css — Solo correcciones de bugs confirmados en el CSS original */

/* 0. El body tiene background #424549 (gris oscuro) que se cuela entre secciones */
body { background-color: #ffffff !important; }

/* 1. section-title tenía height:1062px fijo — generaba espacio vacío enorme */
.section-title { height: auto !important; overflow: visible !important; }

/* 2. section-description tenía margin-left:-170px — desbordaba la pantalla */
.section-description { margin-left: 0 !important; }

/* 3. .button tenía margin-left:-29px — desalineaba botones */
.button { margin-left: 0 !important; }

/* 4. large-hero-title-bold tenía width:100px — cortaba el texto del título */
.large-hero-title-bold { width: auto !important; max-width: 100%; }

/* 5. Alturas fijas en secciones y contenedores que cortaban contenido */
.container                                { height: auto !important; }
.feature-text-block                       { height: auto !important; }
.white-footer.lok                         { height: auto !important; }
.section-2, .section-3                   { height: auto !important; }
.grid-2                                   { height: auto !important; }
.top-line-block.lop                       { height: auto !important; }
.long-feature-block.title-only            { height: auto !important; }
.long-feature-title.uppercase.negri       { height: auto !important; }
.small-paragraph.mmi                      { height: auto !important; }
.section-title.lolo                       { height: auto !important; word-break: normal !important; }
.section-title.pp2, .section-title.r1    { height: auto !important; }
.section-title._2.qq.aa                  { height: auto !important; }

.section.feature-section,
.section.feature-section.tt,
.section.feature-section.tt.io,
.section.feature-section._2,
.section.feature-section.jj,
.section.feature-section.jj.hh,
.section.feature-section.odd,
.section.feature-section.odd.sec4,
.section.feature-section.odd.turu        { height: auto !important; overflow: visible !important; background-color: #ffffff !important; position: relative !important; }

.section.tint,
.section.tint.inio,
.section.tint.inio.eee,
.section.tint.inio.espe,
.section.tint.inio.espe._000,
.section.tint.myv,
.section.tint.plo, .section.tint.plo.oo,
.section.tint.popi                        { height: auto !important; }

.section.insta, .section.insta.lol       { height: auto !important; }
.section.encuetra, .section.encuetra.lolol { height: auto !important; }
.section.blue-cta-section.fff             { height: auto !important; }
.section.cta-section.ddd                  { height: auto !important; }
.pricing-block.image                       { height: auto !important; }
.section.pricing-section.bn               { height: auto !important; width: 100% !important; }

/* 6. Sección Servicios y Programas — layout responsivo */

.section.feature-section.tt.io {
  padding-left: 0 !important;
  height: auto !important;
  position: relative !important;
}

.section.feature-section.tt.io .w-container {
  max-width: 1200px !important;
  padding-left: 60px !important;
  padding-right: 60px !important;
  box-sizing: border-box !important;
}

/* Desktop: grid con áreas nombradas — izquierda: header+grid / derecha: imagen */
.servicios-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "header imagen"
    "cards  imagen" !important;
  column-gap: 60px !important;
  row-gap: 0 !important;
  align-items: start !important;
  padding: 80px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.servicios-header {
  grid-area: header !important;
  min-width: 0 !important;
  overflow: visible !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

.servicios-grid {
  grid-area: cards !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  margin-top: 28px !important;
  min-width: 0 !important;
  align-self: start !important;
}

.servicios-imagen {
  grid-area: imagen !important;
  align-self: center !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.servicios-foto {
  width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
  display: block !important;
}

/* Título sin ancho fijo */
.servicios-header .main-feature-title {
  width: auto !important;
}

/* Tarjetas: respetar ancho de celda */
.servicios-grid .long-feature-block.title-only.trt.ww {
  width: 100% !important;
  margin-top: 0 !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

/* Texto dentro de tarjetas no desborda */
.servicios-grid .long-feature-title,
.servicios-grid .small-paragraph {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

/* ── Tablet y móvil (≤ 768px): apilado título → imagen → tarjetas ── */
@media (max-width: 768px) {
  .section.feature-section.tt.io {
    padding-left: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  .section.feature-section.tt.io .w-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .servicios-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
    padding: 48px 0 !important;
  }

  .servicios-header { order: 1 !important; width: 100% !important; }
  .servicios-imagen { order: 2 !important; width: 100% !important; }
  .servicios-grid   { order: 3 !important; width: 100% !important; margin-top: 0 !important; }

  .servicios-foto { max-height: 300px !important; object-fit: cover !important; }

  .servicios-header .main-feature-title {
    font-size: 26px !important;
    line-height: 32px !important;
  }

  /* Iconos alineados con el título usando grid en cada tarjeta */
  .servicios-grid .long-feature-block.title-only.trt.ww {
    display: grid !important;
    grid-template-columns: 44px 1fr !important;
    grid-template-rows: auto auto !important;
    grid-template-areas: "icono titulo" "icono parrafo" !important;
    column-gap: 10px !important;
    padding-left: 0 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .servicios-grid .long-feature-icon-wrapper {
    grid-area: icono !important;
    position: static !important;
    width: 36px !important;
    height: auto !important;
    padding-top: 2px !important;
    align-self: start !important;
  }

  .servicios-grid .long-feature-title {
    grid-area: titulo !important;
    margin-left: 0 !important;
  }

  .servicios-grid .small-paragraph {
    grid-area: parrafo !important;
    margin-left: 0 !important;
  }

  .servicios-grid .long-feature-icon {
    margin-left: 0 !important;
    height: 28px !important;
    max-width: 100% !important;
  }

}

/* ── Móvil pequeño (≤ 480px): tarjetas en 1 columna ── */
@media (max-width: 480px) {
  /* El CSS original aplica position:sticky aquí — se anula */
  .section.feature-section.tt.io {
    position: relative !important;
    height: auto !important;
    background-color: #ffffff !important;
    overflow: visible !important;
  }
  .servicios-grid {
    grid-template-columns: 1fr !important;
  }
  .servicios-foto { max-height: 220px !important; }
}

/* 7. Nuestras Especialidades — círculos responsivos */

/* Reducir espacio entre párrafo y círculos, y entre círculos y texto blanco */
.section.tint.inio.eee {
  height: auto !important;
  padding-top: 20px !important;
  padding-bottom: 40px !important;
}

.section.tint.inio.eee .process-tabs {
  margin-top: 0 !important;
}

.section.tint.inio.eee .section-title-wrapper {
  margin-bottom: 5px !important;
}

/* Desktop: los 5 círculos en una sola fila horizontal */
.process-tab-menu {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 20px !important;
  background-color: transparent !important;
  margin-top: 0px !important;
  margin-bottom: 10px !important;
}

.process-tab-button,
.process-tab-button.w--current {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 120px !important;
  height: 120px !important;
  margin: 0 !important;
}

/* Tablet y móvil (≤ 991px): círculos en fila horizontal con wrap */
@media (max-width: 991px) {
  .process-tab-menu {
    display: flex !important;
    flex-direction: row !important;       /* anula flex-flow: column del CSS base */
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
    margin-top: 20px !important;
    background-color: transparent !important;
    padding: 10px 0 !important;
  }

  .process-tab-button,
  .process-tab-button.w--current {
    flex: 0 0 auto !important;           /* no crecer ni encoger */
    width: 100px !important;
    height: 100px !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 14px !important;
    padding-top: 18px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .process-tab-icon {
    height: 22px !important;
    margin-bottom: 4px !important;
  }
}

/* Móvil (≤ 600px): 3 arriba + 2 abajo */
@media (max-width: 600px) {
  .process-tab-menu {
    gap: 12px !important;
  }

  .process-tab-button,
  .process-tab-button.w--current {
    width: 90px !important;
    height: 90px !important;
    font-size: 10px !important;
    line-height: 13px !important;
    padding-top: 0 !important;
  }
}

/* Móvil pequeño (≤ 400px) */
@media (max-width: 400px) {
  .process-tab-button,
  .process-tab-button.w--current {
    width: 75px !important;
    height: 75px !important;
    font-size: 9px !important;
    gap: 8px !important;
  }
}

/* 8. Nuestras Instalaciones */

/* Centrar subtítulo */
.section-description.aaa {
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Sección altura automática */
.section.insta,
.section.insta.lol {
  height: auto !important;
  width: 100% !important;
  overflow: hidden !important;
  padding-bottom: 40px !important;
}

/* Galería: una fila horizontal en desktop, sin scroll */
.card-wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.card-image-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.card-image-row,
.card-image-row.rotate-right-up {
  width: 100% !important;
  overflow: hidden !important;
}

/* Imágenes: se reparten el ancho disponible en partes iguales */
.card-wrapper img {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: 0 !important;
  height: 260px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
}

@media (max-width: 768px) {
  .section.insta.lol {
    padding-top: 4px !important;
    padding-bottom: 20px !important;
  }

  .section.insta.lol .section-title-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .section.insta.lol .div-block {
    margin-top: 2px !important;
  }

  .card-wrapper {
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 8px !important;
    scrollbar-width: none !important;        /* Firefox */
    -ms-overflow-style: none !important;     /* IE/Edge */
  }
  .card-wrapper::-webkit-scrollbar {
    display: none !important;                /* Chrome/Safari */
  }
  .card-wrapper img {
    flex: 0 0 160px !important;
    width: 160px !important;
    height: 160px !important;
  }
}

@media (max-width: 480px) {
  .card-wrapper img {
    flex: 0 0 130px !important;
    width: 130px !important;
    height: 130px !important;
  }
}

/* 9. Cajitas Encuéntranos — organizar texto */

.grid-3 {
  padding-left: 20px !important;
  padding-right: 20px !important;
  gap: 20px !important;
}

/* Cajitas Encuéntranos — todas las pantallas */
.section.encuetra.lolol .long-feature-block.title-only {
  height: auto !important;
  box-sizing: border-box !important;
  padding-left: 20px !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* Fila icono + título */
.contacto-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.contacto-header .long-feature-icon-wrapper {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.contacto-header .long-feature-icon {
  height: 24px !important;
  margin-left: 0 !important;
  display: block !important;
}

.contacto-header .long-feature-title.uppercase.negri {
  height: auto !important;
  width: auto !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
}

.section.encuetra.lolol .text-block-6,
.section.encuetra.lolol .text-block-7,
.section.encuetra.lolol .text-block-8 {
  color: #ffffff !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
}

@media (max-width: 768px) {
  /* Mapa centrado en móvil */
  .section.encuetra.lolol .map-and-form-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }

  .section.encuetra.lolol .code-embed {
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 20px !important;
  }

  .section.encuetra.lolol .code-embed iframe {
    display: block !important;
    margin: 0 auto !important;
    width: 90% !important;
    height: 220px !important;
    border-radius: 12px !important;
  }

  .grid-3 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 14px !important;
    width: 100% !important;
  }

  /* Cajita móvil: flex row icono + título */
  .section.encuetra.lolol .long-feature-block.title-only {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 14px 16px !important;
    min-height: unset !important;
  }

  .section.encuetra.lolol .contacto-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
  }

  .section.encuetra.lolol .long-feature-icon-wrapper {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .section.encuetra.lolol .long-feature-icon {
    margin-left: 0 !important;
    height: 22px !important;
    max-width: 100% !important;
  }

  .section.encuetra.lolol .long-feature-title.uppercase.negri {
    display: block !important;
    height: auto !important;
    width: auto !important;
    flex: 1 !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    text-align: left !important;
    float: none !important;
  }

  .section.encuetra.lolol .text-block-6,
  .section.encuetra.lolol .text-block-7,
  .section.encuetra.lolol .text-block-8 {
    display: block !important;
    text-align: left !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    width: 100% !important;
    word-break: break-all !important;
  }

  .section.encuetra.lolol {
    height: auto !important;
    padding-bottom: 30px !important;
  }
}

/* 10. About-2 — layout responsivo */

/* Título centrado */
.subpage-header.about-2 .subpage-title {
  text-align: center !important;
  width: 100% !important;
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Imágenes del header centradas */
.lightbox-link-2 {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-left: 0 !important;
  width: 100% !important;
}

.image-21, .image-22, .image-23 {
  width: 28% !important;
  max-width: 280px !important;
  height: auto !important;
  margin-right: 0 !important;
  border-radius: 8px !important;
  object-fit: cover !important;
}

/* Subtítulo centrado sin margen izquierdo */
.page-subtitle.pp {
  text-align: center !important;
  width: 80% !important;
  max-width: 700px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Secciones Misión/Visión/Política */
.subpage-header.about-2 .container.team-container {
  text-align: center !important;
}

/* About-2 — Reseña Histórica: altura automática y espacio */
.section.tint.popi {
  height: auto !important;
  padding-top: 50px !important;
  padding-bottom: 80px !important;
  overflow: visible !important;
}

/* Grid Reseña Histórica: 1 columna en móvil */
@media (max-width: 768px) {
  .section.tint.popi .w-layout-grid.grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .section.tint.popi .div-block-3 {
    width: 100% !important;
    margin: 0 0 16px 0 !important;
  }

  .section.tint.popi .container-5 {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
}

/* About-2 — Política de calidad y Certificaciones: altura automática y mismo ancho que Misión/Visión */
.feature-line-block.tg,
.feature-line-block.tg.gigi,
.feature-line-block.tg._1.gigi {
  width: 100% !important;
  height: auto !important;
  min-height: unset !important;
  box-sizing: border-box !important;
}

.section-3 .feature-blocks-column {
  width: 100% !important;
  box-sizing: border-box !important;
}

.section-3 {
  height: auto !important;
}

.section-3 .container.above-image-section.lol {
  max-width: 1200px !important;
  width: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  box-sizing: border-box !important;
}

/* About-2 — Contenedor centrado y no tan ancho */
.section.tint.myv .container.above-image-section,
.section-3 .container.above-image-section {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  box-sizing: border-box !important;
}

/* Misión: párrafo sin ancho excesivo */
.small-paragraph.mmi {
  width: 100% !important;
  height: auto !important;
}

/* Visión: párrafo alineado con el título */
.small-paragraph.mmi._3 {
  margin-left: 0 !important;
  width: 100% !important;
  height: auto !important;
}

/* About-2 — Misión/Visión: imagen proporcional al texto */
.section.tint.myv .feature-blocks-row,
.section-3 .feature-blocks-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 40px !important;
  margin-bottom: 32px !important;
}

/* Columna de texto: 60% */
.section.tint.myv .feature-blocks-column:first-child,
.section-3 .feature-blocks-column:first-child {
  flex: 0 0 58% !important;
  max-width: 58% !important;
  width: 58% !important;
  float: none !important;
}

/* Columna de imagen: 35% */
.section.tint.myv .feature-blocks-column:last-child,
.section-3 .feature-blocks-column:last-child {
  flex: 0 0 35% !important;
  max-width: 35% !important;
  width: 35% !important;
  float: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Imagen acorde al alto del texto — solo desktop */
@media (min-width: 768px) {
  .image-24, .image-25 {
    width: 100% !important;
    max-height: 320px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
  }
}

/* About-2 — bajar texto azul del header */
.subpage-header.about-2 {
  padding-top: 160px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

@media (max-width: 991px) {
  .subpage-header.about-2 {
    padding-top: 130px !important;
  }
  .image-21, .image-22, .image-23 {
    width: 28% !important;
  }
}

@media (max-width: 768px) {
  .image-21, .image-22, .image-23 {
    width: 80% !important;
    max-width: 280px !important;
  }
  .lightbox-link-2 {
    flex-direction: column !important;
    align-items: center !important;
  }
  .page-subtitle.pp {
    width: 95% !important;
  }
}

@media (max-width: 480px) {
  .subpage-header.about-2 {
    padding-top: 100px !important;
  }
  .image-21, .image-22, .image-23 {
    width: 90% !important;
  }
}

/* 11. Textos en color blanco dentro de secciones azules — no tocar su color */

/* ════════ NAVBAR ACTIVO — Móvil ════════ */
@media (max-width: 991px) {

  /* Link activo en menú móvil: fondo azul + texto blanco */
  .nav-menu .nav-link.w--current,
  .nav-menu .nav-link.dropdown-toggle.w--current,
  .nav-menu .nav-link._2.w--current,
  .nav-menu .nav-link._2.oli.w--current {
    background-color: #1e45a2 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-bottom: none !important;
    border-radius: 4px !important;
  }

  /* Toggle SERVICIOS activo en móvil */
  .nav-menu .w-dropdown-toggle.w--current,
  .nav-menu .nav-link.dropdown-toggle._1.w--current {
    background-color: #1e45a2 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
  }

  /* Texto interno del toggle también blanco */
  .nav-menu .w-dropdown-toggle.w--current div,
  .nav-menu .w-dropdown-toggle.w--current .small-dropdown-icon {
    color: #ffffff !important;
  }

  /* Link activo dentro del dropdown */
  .nav-menu .dropdown-link.w--current {
    background-color: #d0d9f5 !important;
    color: #1e45a2 !important;
    font-weight: 700 !important;
  }
}

/* ════════ NAVBAR ACTIVO — Desktop ≥ 768px ════════ */
@media (min-width: 768px) {

  /* Mismo ancho de contenedor que index.html en todas las páginas */
  .w-container {
    max-width: 1100px !important;
  }


  /* Todos los nav-links activos: azul */
  .nav-link.w--current,
  .nav-link.dropdown-toggle.w--current,
  .nav-link._2.w--current,
  .nav-link._2.oli.w--current {
    color: #1e45a2 !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #1e45a2 !important;
    border-radius: 0 !important;
  }

  /* Links de dropdown activos: azul */
  .dropdown-link.w--current {
    color: #1e45a2 !important;
    font-weight: 700 !important;
    background-color: #f0f4ff !important;
  }

  /* Hover de nav-links: azul suave */
  .nav-link:hover {
    color: #1e45a2 !important;
    border-color: #1e45a200 !important;
  }
}