/* ==========================================================================
   cmc_fixes.css  -  Correcciones de diseño (oct 2026)
   Se carga DESPUÉS de cmc_custom.css. Para volver atrás basta con quitar
   la línea <link ... cmc_fixes.css> del index.html (y de inscripciones).
   ========================================================================== */

/* ---- 1. Botón flotante de WhatsApp: más chico y que no tape el texto ---- */
@media (max-width: 768px) {
  .whatsapp-float {
    width: 48px;
    height: 48px;
    right: 14px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
    opacity: 0.95;
  }
  .whatsapp-float img {
    width: 28px;
    height: 28px;
  }
  /* aire a la derecha para que el botón no quede sobre las últimas letras */
  .section-block p,
  .section-block blockquote {
    padding-right: 0;
  }
}

/* ---- 2. Encabezado fijo: que no tape los títulos al navegar ---- */
@media (max-width: 768px) {
  section.section-block {
    padding-top: 11rem; /* 8rem de la plantilla + alto del encabezado */
  }
  section.replicable-content {
    padding-top: 12rem;
  }
  section#home.section-block {
    padding-top: 0;
  }
}
@media (min-width: 769px) {
  section.section-block {
    padding-top: 11rem;
  }
  section#home.section-block {
    padding-top: 0;
  }
}

/* Bloques de servicios (están dentro de #servicios): sin relleno extra */
#servicios .section-block.hero-5 {
  padding-top: 0;
  padding-bottom: 0;
}
@media (max-width: 768px) {
  #servicios .section-block.hero-5 .row .column {
    margin-top: 2.4rem;
    margin-bottom: 3rem;
  }
  /* la plantilla centra el texto con 110px de margen: en celular sobra */
  #servicios .hero-content.split-hero-content {
    margin-top: 0 !important;
  }
}

/* ---- 3. Banner de portada en celular ---- */
@media (max-width: 768px) {
  #home {
    height: 40rem !important; /* alcanza para el texto, sin hueco blanco abajo */
    min-height: 0 !important;
  }
  #home .tms-slide.slide-intro .tms-content,
  #home .tms-slide.slide-intro .tms-content-inner {
    height: auto;
    padding: 3rem 2rem 0;
  }
  #home .slide-intro .tms-content-inner h1 {
    font-size: 2.8rem;
    line-height: 1.15;
    margin-bottom: 1.6rem;
  }
  #home .slide-intro .tms-content-inner p.lead {
    font-size: 1.7rem !important;
    line-height: 1.3;
    margin-bottom: 2.4rem;
  }
  #home .slide-intro .button {
    margin-bottom: 0;
  }
}

/* ---- 4. Tarjetas del equipo: misma altura, con separación ---- */
.row.flex.boxes > .column {
  margin-bottom: 2rem;
}
.row.flex.boxes .feature-column.box {
  height: 100%;
}
@media (max-width: 768px) {
  .row.flex.boxes > .column.width-2b {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }
  /* si la cantidad es impar, la última ocupa todo el ancho en vez de quedar sola */
  .row.flex.boxes > .column.width-2b:last-child:nth-child(odd) {
    width: 100%;
  }
}

/* ---- 5. Hueco blanco entre el banner y el texto institucional (celular) ---- */
@media (max-width: 768px) {
  section#institucional.replicable-content {
    padding-top: 5rem;
  }
}

/* ---- 6. Contacto en celular: aire entre los datos, el botón del mapa y el formulario ---- */
@media (max-width: 768px) {
  #contacto .column.width-4 {
    margin-bottom: 3.5rem;
  }
  #contacto .contact-form .field-wrapper {
    margin-bottom: 1.6rem;
  }
  #contacto .contact-form .button {
    margin-top: 0.8rem;
  }
}

/* ---- 7. Filas de tarjetas con pocas personas: centradas ---- */
.row.flex.boxes {
  justify-content: center;
}