/* *************************************** */
/* ************** INICIO ***************** */
/* *************************************** */


.Inicio {
  display: flex;
  flex-direction: column; /* primero imagen, luego texto */
  align-items: center;   /* centra todo en horizontal */
  justify-content: center;
  gap: 40px;
  padding: 2rem 20px;
  text-align: center;
}

.miUIF {
  height: 126.53px;
  width: 311px;
  display: block;
  margin: 0 auto;   /* asegura centrado */
  gap: 40px;
}

/* Botones */
.btns {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap; /* se acomoda en varias filas si no caben */
  gap: 40px;
}

/* Responsivo adicional */
@media (max-width: 768px) {
  .Inicio {
    padding: 1.5rem 1rem;
  }
  .miUIF {
    width: 80%; /* la imagen se hace más pequeña en móviles */
  }
  .main-btn {
    font-size: 1.1rem;       /* texto un poquito más grande */
    padding: 1rem 2rem;      /* más alto para que el texto no se salga */
    min-width: 250px;        /* que no sean demasiado angostos */
  }
}






/* *************************************** */
/* ********* QUE ES MINOTARIA ************ */
/* *************************************** */

.minotaria {
  width: 70.875rem; /* 830px */
  height: auto;
  padding: 1.25rem; /* 20px */
  gap: 1.2325rem; /* 19.72px → aproximado */
  opacity: 1;
  margin: 0 auto; /* centra horizontalmente */
  text-align: center;
}

.que-es {
  display: flex;
  justify-content: center;
  gap: 3.75rem !important; /* 60px */
}

.main-title {
  font-weight: 700;
  font-style: Bold;
  font-size: 57px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #003899;
  gap: 20px;

}

.main-desc {
  font-weight: 400;
  font-style: Regular;
  font-size: 26px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #252525;
}


/* *************************************** */
/* ************** DIAGRAMA *************** */
/* *************************************** */

.diagramaUIF {
  gap: 3.75rem !important; /* 60px */
}

.diagram-box {
  width: 80.25rem; /* 1156px */
  height: 42.875rem; /* 638px */
  margin: 0 auto;
  padding-top: 2.5rem; /* 40px */
  padding-bottom: 2.5rem; /* 40px */
}

.diagram-box iframe {
  width: 100%;
  height: 100%;
  border: none;
}



/* ********************************************** */
/* MODO RESPONSIVE PARA DIFERENTES DISPOSITIVOS */
/* ********************************************** */

/* Laptops y Desktops Pequeños (1200px) */
@media (max-width: 1200px) {
    .diagram-box {
        width: 95%;
    }
}

/* Tablets en horizontal y vertical (1024px) */
@media (max-width: 1024px) {
    .minotaria {
        width: 90%;
    }
    .diagram-box {
        width: 90%;
        height: 500px; /* Altura ajustada para tablets */
    }
}

/* Móviles Grandes y Tablets en vertical (768px) */
@media (max-width: 768px) {
    .main-title {
        font-size: 40px;
    }

    .main-desc {
        font-size: 18px;
    }

    .diagram-box {
        height: 400px; /* Menos altura para móviles grandes */
    }
}

/* Móviles Pequeños (480px) */
@media (max-width: 480px) {
    .main-title {
        font-size: 32px;
    }

    .main-desc {
        font-size: 16px;
    }

    .diagram-box {
        width: 95%;
        height: 300px; /* Altura original para móviles */
    }
}