/* Pragma - correcciones responsive comunes a todas las paginas.
   Se carga DESPUES de business-casual.min.css para corregir los titulos que
   desbordaban en celulares y los bloques que quedaban superpuestos/desfasados
   entre 992px y 1200px. */

/* ---------- 1. Nunca debe aparecer scroll horizontal ----------
   Se usa "clip" y no "hidden": hidden convierte a <body> en contenedor de
   scroll y deja de funcionar el navbar sticky-top. */
body {
  overflow-x: clip;
}

img {
  max-width: 100%;
  height: auto;
}

/* ---------- 2. Titulos fluidos ----------
   .section-heading-lower estaba fijo en 3rem: palabras largas como
   "FERTILIZANTE" o "TRATAMIENTO" desbordaban la caja en pantallas chicas. */
.section-heading .section-heading-lower {
  font-size: calc(1.6rem + 1.7vw);
  line-height: 1.1;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.section-heading .section-heading-upper {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

@media (min-width: 1200px) {
  .section-heading .section-heading-lower {
    font-size: 3rem;
  }
}

/* ---------- 3. Logo del encabezado ---------- */
.site-heading .logo-shine {
  max-width: 90%;
}

/* Marca del navbar en mobile (antes decia "Start Bootstrap") */
#mainNav .navbar-brand {
  padding-top: .25rem;
  padding-bottom: .25rem;
}

#mainNav .navbar-brand img {
  height: 2.25rem;
  width: auto;
}

@media (max-width: 991.98px) {
  #mainNav .navbar-collapse {
    max-height: calc(100vh - 4.5rem);
  }
}

/* ---------- 4. Aire interior en pantallas chicas ----------
   p-5 (3rem) dejaba menos de 250px utiles de ancho en un celular de 375px. */
@media (max-width: 767.98px) {
  .bg-faded.p-5,
  .cta .cta-inner {
    padding: 1.5rem !important;
  }
  .page-section {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .cta {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .btn-xl {
    font-size: .75rem;
    padding: 1rem 1.25rem;
    white-space: normal;
  }
}

/* ---------- 5. Portada (index): el texto se salia de la imagen ----------
   El bloque .intro-text era position:absolute, asi que su alto no contaba y
   entre 992px y 1200px se montaba sobre la seccion siguiente.
   Con grid ambos ocupan la misma celda y la fila toma el alto del mas alto. */
@media (min-width: 992px) {
  .intro {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
  }
  .intro .intro-img {
    grid-area: 1 / 1;
    float: none;
    width: 75%;
    justify-self: end;
  }
  .intro .intro-text {
    grid-area: 1 / 1;
    position: relative;
    width: 60%;
    margin-top: 0;
    justify-self: start;
    align-self: center;
  }
  .intro .intro-text .intro-button {
    position: static;
    width: auto;
    bottom: auto;
    margin-top: 1.5rem;
  }
}

@media (min-width: 1200px) {
  .intro .intro-text {
    width: 50%;
  }
}

/* ---------- 6. Productos y servicios ----------
   Debajo de 992px las cajas quedaban ajustadas al texto y descentradas. */
@media (max-width: 991.98px) {
  .product-item .product-item-title,
  .product-item .product-item-description {
    display: block !important;
  }
  .product-item .product-item-title > div,
  .product-item .product-item-description > div {
    width: 100%;
  }
  .product-item .product-item-title {
    margin-bottom: 1rem;
  }
  .product-item .product-item-description {
    margin-top: 1rem;
  }
}

@media (min-width: 992px) {
  .product-item .product-item-title > div,
  .product-item .product-item-description > div {
    max-width: 100%;
  }
}

/* ---------- 7. Listado de datos de contacto ---------- */
.list-hours .list-hours-item {
  flex-wrap: wrap;
}

.list-hours .list-hours-item > span {
  text-align: right;
}

/* Contacto: más ancho que el 50% del tema para que "Teléfono administración" entre en una línea */
@media (min-width: 992px) {
  .list-hours.list-contacto {
    width: 85%;
  }
}
.list-contacto .list-hours-item {
  column-gap: 1rem;
}

/* Botones de WhatsApp debajo del listado */
.contacto-whatsapp {
  max-width: 85%;
}
@media (max-width: 991.98px) {
  .contacto-whatsapp {
    max-width: 100%;
  }
}

/* ---------- 8. Portfolio ----------
   Cada seccion sumaba 8rem propios + 5rem de .page-section: 208px de hueco. */
.portfolio-section + .portfolio-section {
  margin-top: 0;
}