/* === Banner con imagen fija / responsive === */
.banner-static {
  background: url("/static/core/img/mi_mosaico.70859e4bc614.png") center/cover no-repeat;
  height: 400px;
  display: flex;
  align-items: center;
}
@media (max-width: 767px) {
  .banner-static {
    height: auto;
    padding: 2rem 0;
    background-attachment: scroll;
  }
  .banner-static .text-white,
  .banner-static img {
    margin-bottom: 1rem;
  }
}

/* Imagen de “Sobre nosotros” */
.about-image {
  max-height: 380px;
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* Sección “About” y tarjetas */
.section-about {
  background: #f8f9fb;
  padding: 4rem 0;
}
.section-about .card {
  background: #fff;
  border: none;
  border-radius: .5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.section-about h1 {
  position: relative;
  padding-left: 1.5rem;
}
.section-about h1::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 4px; height: 32px;
  background: var(--bs-primary);
  border-radius: 2px;
  transform: translateY(-50%);
}

/* Contenedor 16:9 para mosaicos o imágenes */
.mosaico-img-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.mosaico-img-container img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Imagen ilustrativa en soluciones */
.solutions-img {
  max-height: 300px;
  width: auto;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Inputs y formularios */
.form-floating > .form-control { border-radius: .375rem; }
.form-floating > label { padding-left: .75rem; }
.form-control:focus { box-shadow: 0 0 0 .2rem rgba(13,110,253,.25); }

.card { border-radius: .75rem; }

/* Imagen de contacto en pantallas grandes */
@media (min-width: 992px) {
  .col-lg-5 .ratio {
    max-width: 480px;
    margin: 0 auto;
  }
}

/* Workflow */
#workflow h2 { color: #0A1F44; }
#workflow h6 { font-weight: 500; font-size: .95rem; }
#workflow img { filter: drop-shadow(0 2px 6px rgba(0,0,0,.1)); }

/* Social links */
.social-links a { color: #0b3d91; }
.social-links a:hover { color: #d63384; }

/* Foto del fundador en móvil */
@media (max-width: 768px) {
  .founder-image {
    width: 180px;
    height: 180px;
    margin: 0 auto;
  }
}

/* Galería del post */


.post-gallery{
  display:grid;
  justify-content:center;        /* centra la grilla */
}
.post-gallery__item{
  max-width: 720px;              /* ancho cómodo para lectura */
  width: 100%;
  margin-inline:auto;
}
.post-gallery__item img{
  width:100%;
  height:auto;
  border-radius:10px;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
}
.post-gallery__item figcaption{
  text-align:center;
  color:#666;
  margin-top:.5rem;
}


/* Títulos dentro del post */
.prose h2{
  color:#09193b !important;   /* azul marca */
  font-weight:700;
  margin-top:2.25rem;
  margin-bottom:.75rem;
  line-height:1.25;
}
.prose h3{
  color:#227acc !important;   /* gris oscuro */
  font-weight:600;
  margin-top:1.75rem;
  margin-bottom:.5rem;
  line-height:1.3;
}
/* Barrita opcional bajo H2 */
.prose h2::after{
  content:"";
  display:block;
  width:56px;
  height:3px;
  background:#2563EB;
  border-radius:2px;
  margin-top:8px;
}

/* Limitar ancho del párrafo principal en la ficha de servicio */
.service-hero-desc {
  max-width: 780px;
}