/**
 * Sección «institucional» de la página «home», clonada de producción.
 *
 * Las clases `css-…` son los hashes que genera Emotion en el sitio viejo.
 * Se conservan literales para que el render sea idéntico; por eso no son
 * legibles. La plantilla que las usa está al lado, en el mismo directorio.
 *
 * Generado desde https://www.icasa.pe — no editar a mano salvo para corregir.
 */

.css-62igne{margin-top: 0; margin-bottom: 48px;}
.css-1x67c4m{box-sizing: border-box; display: flex; flex-flow: wrap; margin-top: calc(-32px); width: calc(100% + 32px); margin-left: calc(-32px); -webkit-box-align: center; align-items: center;}
.css-1x67c4m > .MuiGrid-item{padding-top: 32px;}
.css-1x67c4m > .MuiGrid-item{padding-left: 32px;}
.css-wo90q7{background-size: cover; background-position: center center; position: relative; overflow: hidden; border-radius: 40px; padding: 40px; min-height: 400px; color: rgb(255, 255, 255); background-image: url("../../../assets/img/bg/institucional.png");}
.css-iol86l{box-sizing: border-box; margin: 0px; flex-direction: row; flex-basis: 100%; -webkit-box-flex: 0; flex-grow: 0; max-width: 100%;}
@media (min-width: 600px){
.css-iol86l{flex-basis: 100%; -webkit-box-flex: 0; flex-grow: 0; max-width: 100%;}
}
@media (min-width: 900px){
.css-iol86l{flex-basis: 50%; -webkit-box-flex: 0; flex-grow: 0; max-width: 50%;}
}
@media (min-width: 1200px){
.css-iol86l{flex-basis: 50%; -webkit-box-flex: 0; flex-grow: 0; max-width: 50%;}
}
@media (min-width: 1536px){
.css-iol86l{flex-basis: 50%; -webkit-box-flex: 0; flex-grow: 0; max-width: 50%;}
}
.css-1ofrol7{margin: 0px 0px 0.35em; font-family: Poppins, sans-serif; font-size: 2.125rem; line-height: 1.235; font-weight: 500;}
.css-1m8vb3z{display: flex; flex-direction: row; gap: 1rem; margin-top: 32px; margin-bottom: 32px;}
.css-1klcxr2{background-color: rgb(245, 246, 250); color: rgb(30, 30, 47); padding: 16px; border-radius: 20px; text-align: center; min-width: 160px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 20px;}
.css-1mj5jmq{margin: 0px; font-family: Poppins, sans-serif; font-size: 2.125rem; line-height: 1.235; font-weight: 700; color: rgb(139, 92, 246);}
.css-df4lvd{margin: 0px; font-family: Poppins, sans-serif; font-size: 0.875rem; line-height: 1.43; font-weight: 500;}
.css-15k5zdy{position: relative; width: 100%; height: 300px;}
.css-27rz08{position: absolute; width: 300px; height: 300px; background-color: rgb(126, 91, 239); border-radius: 50%; z-index: 1; top: 20px; left: 50%; transform: translateX(-50%);}
.css-1eyt0i{position: absolute; width: 300px; z-index: 2; bottom: -60px; left: 50%; transform: translateX(-50%);}

/* ── Correcciones responsive ─────────────────────────────────────────────
 *
 * Lo de arriba es el clon literal de producción; esto de abajo lo arregla.
 *
 * Los tres contadores van en una fila flex que no envuelve (`nowrap`) y con
 * `min-width: 160px` cada uno: piden 512 px y la columna nunca los tiene
 * —488 px en escritorio, 352 px entre 900 y 1200 px, 214 px en móvil—, así
 * que el tercero se sale de la caja y el `overflow: hidden` de `css-wo90q7`
 * lo recorta. Está roto en todos los anchos, no solo en el móvil.
 *
 * Mismo arreglo que en `nosotros/intro/intro.css`: es el mismo componente
 * clonado y arrastra el mismo fallo.
 */

/* La rejilla se parte en dos columnas a 900 px y a partir de ahí la mitad
   izquierda se queda corta. Se retrasa el reparto hasta los 1200 px, donde
   los contadores ya caben al lado de la imagen. */
@media (min-width: 900px) and (max-width: 1199.98px) {
	.css-iol86l { flex-basis: 100%; max-width: 100%; }
}

/* Los contadores pasan de esa fila rígida a una rejilla que se recoloca
   sola: `auto-fit` mete tantas columnas como quepan y `1fr` las deja todas
   del mismo ancho, así que si sobra una no se estira a lo ancho. */
.css-1m8vb3z { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.css-1klcxr2 { min-width: 0; }

/* El relleno de 40 px de la caja se come el ancho justo donde más falta hace.
   Se recorta hasta la tablet; si no, a 600 px el ancho útil cae de golpe y los
   contadores saltan de tres en fila a dos. */
@media (max-width: 767.98px) {
	.css-wo90q7  { padding: 24px; }
}

/* Móvil: aun con el relleno recortado no entran tres. Se baja la cifra un
   punto para que quepan dos por fila y el tercero caiga debajo. */
@media (max-width: 599.98px) {
	.css-1m8vb3z { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0.75rem; }
	.css-1klcxr2 { padding: 12px; }
	.css-1mj5jmq { font-size: 1.5rem; }
}

/* El círculo morado y la foto son 300 px clavados. En pantallas de 320-380 px
   la caja mide menos que eso y se salen por los lados. Se dejan fluidos, con
   `aspect-ratio` para que el círculo siga siendo un círculo. */
.css-27rz08 { width: min(300px, 100%); height: auto; aspect-ratio: 1; }
.css-1eyt0i { width: min(300px, 100%); }