/**
 * Complemento responsivo: formularios, modales, carreras, etc. desde tablet.
 * Ajustes de cabecera (logo, título hero, entrada, «Conoce las carreras»): solo ≤576px.
 */

@media (max-width: 991.98px) {
  .footer-outer {
    margin-left: 0;
  }

  .container-section__form {
    margin: 12px;
    padding: 16px;
    border-radius: 16px;
  }

  .lado1-form,
  .lado2-form {
    padding-left: 0;
  }

  .conoce-carreras-container {
    max-height: none;
    overflow-x: visible;
    row-gap: 0.75rem;
  }

  .caja-carreras {
    margin-left: 0;
  }

  .caja-desc-carrera {
    height: auto !important;
    min-height: 260px;
  }

  .caja-de-carreras {
    height: auto !important;
    min-height: 0;
  }

  #oculto,
  #oculto-2 {
    height: auto !important;
    min-height: 260px;
  }

  #visible,
  #visible-2 {
    height: auto !important;
    min-height: 220px;
  }

  .titulo-conoce {
    height: auto;
    min-height: 0;
    padding: 12px 8px;
  }

  .caja-desc-carrera .descripcion {
    height: auto;
    min-height: 180px;
  }

  .divider-line {
    width: min(500px, 92vw);
  }

  .imageInfo {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }

  .baner-map iframe {
    max-width: 100%;
    height: min(500px, 50vh);
  }

  .map-tama {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9;
  }

  .modal-body.modal-body-program.d-flex {
    flex-direction: column;
    flex-wrap: wrap;
  }

  #exampleModalCenter .modal-footer .link-modal,
  #carrerasModal .modal-footer .link-modal {
    padding-left: 0 !important;
    text-align: center;
    display: block;
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

  #exampleModalCenter .modal-header .d-flex.justify-content-center {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  #exampleModalCenter .modal-header .titulo,
  #exampleModalCenter .modal-header .texto-normal {
    white-space: normal !important;
  }

  #carrerasModal .modal-body .row > .col-6 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  #carrerasModal .img-modal {
    max-height: 240px;
    width: 100%;
    object-fit: cover;
  }

  .container-banner--footer {
    height: auto;
    min-height: 280px;
    padding-bottom: 40px;
  }

  .container-text--footer {
    padding-top: 100px;
    margin-left: 0;
    padding-left: 16px;
    padding-right: 16px;
  }

  .carrusel-item {
    min-width: 200px;
    max-width: 260px;
    height: 150px;
  }

  .infowhy {
    padding-left: 16px !important;
    padding-right: 16px;
  }

  .modal-dialog.modal-lg {
    margin: 0.5rem auto;
    max-width: calc(100% - 1rem);
  }

  #carrerasModal .link-modal img {
    float: none;
    display: block;
    margin: 0 auto;
    max-width: min(280px, 85vw);
    width: auto;
  }
}

@media (max-width: 767.98px) {
  .titulo-normal {
    font-size: clamp(1.45rem, 4.5vw + 0.85rem, 2.35rem) !important;
  }

  .text-titulo {
    font-size: 1.05rem;
  }

  .caja-estudios {
    width: 100% !important;
    max-width: 100%;
    text-align: start;
  }

  .grid-template {
    padding-left: 10px;
    padding-right: 10px;
  }

  .carrusel-items,
  .carrusel-items-2 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  .carrusel-item {
    scroll-snap-align: start;
    flex-shrink: 0;
  }
}

@media (max-width: 575.98px) {
  .titulo-folleto.titulo-folleto--hero,
  #titulo-folleto.titulo-folleto--hero {
    font-size: clamp(1.25rem, 3.8vw + 0.45rem, 2rem) !important;
    text-align: left;
  }

  .ingeneria-ciencas .header-logo-wrap .header-logo,
  .ingeneria-ciencas .header-logo-wrap img {
    max-width: 168px;
    width: 100%;
    height: auto;
  }

  .titulo-entrada-row {
    justify-content: flex-start;
  }

  .titulo-entrada-row .col-2.col-sm-1 {
    display: none;
  }

  .titulo-entrada-row > .col-sm-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .titulo-entrada {
    display: block;
    text-align: left;
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 0;
    padding-left: 12px;
    padding-right: 12px;
  }

  .ingeneria-ciencas .row.justify-content-end > .col-2 {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
  }

  .carrusel-item:hover {
    transform: none;
  }

  .lista {
    font-size: 1rem;
    padding-bottom: 24px;
  }
}