/**
 * Sección «hero» de la página «referidos», 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;}

/* El fondo es el mismo patrón de ondas del bloque institucional del home. */
.css-1tus2is{background-size: cover; background-position: center center; position: relative; overflow: hidden; border-radius: 40px; padding: 40px; min-height: 200px; color: rgb(255, 255, 255); background-image: url("../../../assets/img/bg/institucional.png");}

.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-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-9j4mbm{margin: 0px 0px 0.35em; font-family: Poppins, sans-serif; font-size: 3.75rem; line-height: 1.2; font-weight: 500;}
.css-19541oy{margin: 0px 0px 0.35em; font-family: Poppins, sans-serif; font-size: 1.5rem; line-height: 1.334; font-weight: 500;}
.css-15k5zdy{position: relative; width: 100%; height: 300px;}

/*
 * `height: auto` no está en el original y aquí hace falta.
 *
 * En producción el `<img>` va sin atributos `width`/`height`; el nuestro sí los
 * lleva, para que el navegador reserve el hueco antes de descargarla y la
 * página no dé un salto. Pero esos atributos valen como estilo de presentación:
 * el `width: 300px` de esta clase pisa el ancho y la altura se queda en los
 * 1024 px del atributo, así que la gift card salía estirada y recortada contra
 * el `overflow: hidden` de la cabecera. Con `auto` vuelve a mandar la
 * proporción real.
 */
.css-dj1w67{position: absolute; width: 300px; height: auto; z-index: 2; bottom: -60px; left: 80%; transform: translateX(-50%);}