/**
 * Sección «hero» 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.
 */

a:not([href]):not([class]), a:not([href]):not([class]):hover{color: inherit; text-decoration: none;}
[type="button"]:not(:disabled), button:not(:disabled){cursor: pointer;}
.css-q7mezt{user-select: none; width: 1em; height: 1em; display: inline-block; flex-shrink: 0; transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1); fill: currentcolor; font-size: 1.5rem;}
.css-rpavmq{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: 1;}
.css-ecdqbu{display: inline-flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; box-sizing: border-box; -webkit-tap-highlight-color: transparent; background-color: transparent; outline: 0px; border: 0px; margin: 0px; cursor: pointer; user-select: none; vertical-align: middle; appearance: none; text-decoration: none; text-align: center; flex: 0 0 auto; font-size: 1.5rem; padding: 8px; border-radius: 50%; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); --IconButton-hoverBg: rgba(0, 0, 0, 0.04); position: absolute; top: 50%; left: 16px; transform: translateY(-50%); z-index: 4; color: white;}
@media print{
.css-ecdqbu{print-color-adjust: exact;}
}
.css-ecdqbu:hover{background-color: var(--IconButton-hoverBg);}
@media (hover: none){
.css-ecdqbu:hover{background-color: transparent;}
}
.css-1tkokjr{display: inline-flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; box-sizing: border-box; -webkit-tap-highlight-color: transparent; background-color: transparent; outline: 0px; border: 0px; margin: 0px; cursor: pointer; user-select: none; vertical-align: middle; appearance: none; text-decoration: none; text-align: center; flex: 0 0 auto; font-size: 1.5rem; padding: 8px; border-radius: 50%; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); --IconButton-hoverBg: rgba(0, 0, 0, 0.04); position: absolute; top: 50%; right: 16px; transform: translateY(-50%); z-index: 4; color: white;}
@media print{
.css-1tkokjr{print-color-adjust: exact;}
}
.css-1tkokjr:hover{background-color: var(--IconButton-hoverBg);}
@media (hover: none){
.css-1tkokjr:hover{background-color: transparent;}
}
.css-pq7aky{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; position: relative; z-index: 3;}
.css-pq7aky > .MuiGrid-item{padding-top: 32px;}
.css-pq7aky > .MuiGrid-item{padding-left: 32px;}
.css-6v1yxo{box-sizing: border-box; margin: 0px 0px 0px 1em; flex-direction: row; flex-basis: 100%; -webkit-box-flex: 0; flex-grow: 0; max-width: 100%;}
@media (min-width: 600px){
.css-6v1yxo{flex-basis: 100%; -webkit-box-flex: 0; flex-grow: 0; max-width: 100%;}
}
@media (min-width: 900px){
.css-6v1yxo{flex-basis: 50%; -webkit-box-flex: 0; flex-grow: 0; max-width: 50%;}
}
@media (min-width: 1200px){
.css-6v1yxo{flex-basis: 50%; -webkit-box-flex: 0; flex-grow: 0; max-width: 50%;}
}
@media (min-width: 1536px){
.css-6v1yxo{flex-basis: 50%; -webkit-box-flex: 0; flex-grow: 0; max-width: 50%;}
}
.css-1fbjrgc{margin: 0px; font-family: Poppins, sans-serif; font-size: 1.5rem; line-height: 1.334; font-weight: 700;}
.css-vhbxep{margin: 0px; font-family: Poppins, sans-serif; font-size: 3rem; line-height: 1.167; font-weight: 700;}
.css-1f17yvx{margin: 16px 0px 32px; font-family: Poppins, sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5;}
.css-1siykxe{display: inline-flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; outline: 0px; margin: 0px; cursor: pointer; user-select: none; vertical-align: middle; appearance: none; text-decoration: none; font-family: Poppins, sans-serif; font-weight: 500; font-size: 0.875rem; line-height: 1.75; min-width: 64px; border: 0px; color: var(--variant-containedColor); --variant-textColor: #1976d2; --variant-outlinedColor: #1976d2; --variant-outlinedBorder: rgba(25, 118, 210, 0.5); --variant-containedColor: #fff; --variant-containedBg: #1976d2; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1); background: rgb(154, 107, 255); border-radius: 12px; padding: 12px 32px; text-transform: none; box-shadow: rgba(154, 107, 255, 0.4) 0px 4px 20px;}
@media print{
.css-1siykxe{print-color-adjust: exact;}
}
.css-1siykxe:hover{text-decoration: none;}
.css-1siykxe:hover{box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px -1px, rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px;}
@media (hover: none){
.css-1siykxe:hover{box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;}
}
.css-1siykxe:active{box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;}
@media (hover: hover){
.css-1siykxe:hover{--variant-containedBg: #1565c0; --variant-textBg: rgba(25, 118, 210, 0.04); --variant-outlinedBorder: #1976d2; --variant-outlinedBg: rgba(25, 118, 210, 0.04);}
}
.css-1siykxe:hover{background: rgb(134, 94, 255);}
.css-hj81xo{box-sizing: border-box; margin: 0px; flex-direction: row; flex-basis: 100%; -webkit-box-flex: 0; flex-grow: 0; max-width: 100%; position: relative;}
@media (min-width: 600px){
.css-hj81xo{flex-basis: 100%; -webkit-box-flex: 0; flex-grow: 0; max-width: 100%;}
}
@media (min-width: 900px){
.css-hj81xo{flex-basis: 33.3333%; -webkit-box-flex: 0; flex-grow: 0; max-width: 33.3333%;}
}
@media (min-width: 1200px){
.css-hj81xo{flex-basis: 33.3333%; -webkit-box-flex: 0; flex-grow: 0; max-width: 33.3333%;}
}
@media (min-width: 1536px){
.css-hj81xo{flex-basis: 33.3333%; -webkit-box-flex: 0; flex-grow: 0; max-width: 33.3333%;}
}
.css-1y937pj{background-color: rgb(255, 255, 255); color: rgba(0, 0, 0, 0.87); transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1); background-image: var(--Paper-overlay); overflow: hidden; position: absolute; bottom: -130px; left: 70%; transform: translateX(-50%); padding: 8px 16px; display: flex; -webkit-box-align: center; align-items: center; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px; min-width: 300px; border-radius: 16px;}
.css-14i764b{position: relative; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; font-family: Poppins, sans-serif; font-size: 1.25rem; line-height: 1; border-radius: 50%; overflow: hidden; user-select: none; color: rgb(255, 255, 255); background-color: rgb(154, 107, 255); margin-right: 16px;}
.css-vt8pii{user-select: none; width: 1em; height: 1em; display: inline-block; flex-shrink: 0; transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1); fill: currentcolor; font-size: 17px;}
.css-1du9gq8{margin: 0px; font-family: Poppins, sans-serif; font-size: 0.875rem; line-height: 1.43; font-weight: 700;}
.css-1y0hcjv{position: relative; padding: 120px 32px; border-radius: 1em; overflow: hidden; color: white;}

/*
 * --- añadidos ---
 *
 * De aquí abajo nada viene de producción: allí el carrusel solo enseñaba
 * proyectos, siempre con texto, y el fondo era una clase de Emotion por
 * proyecto con la URL escrita dentro.
 */

/*
 * Todas las diapositivas, del mismo alto.
 *
 * Antes el alto lo decidía el contenido sobre un relleno de 120px, así que cada
 * una medía una cosa: 505px la de Panamá —su titular ocupa dos líneas—, 449px
 * las otras dos y 240px un banner sin texto. El carrusel pegaba un salto en
 * cada cambio y las imágenes crecían y se encogían con él.
 *
 * `16 / 7` es la proporción de la más alta de hoy, así que en escritorio nada se
 * mueve de sitio. Las otras dos son para pantallas estrechas, donde la columna
 * de texto se apila y una caja tan apaisada no daría para tanto.
 *
 * **Cuidado al tocar estos números.** Una caja con `aspect-ratio` saca su alto
 * del ancho y NO crece si el contenido no cabe; con `overflow: hidden` encima,
 * lo que sobra no desborda: se pierde. Y no hay seguro que valga —`min-height`
 * con `max-content` o `fit-content` no crece la caja, la proporción gana—, así
 * que el relleno tiene que estar calculado para que el texto quepa en el alto
 * que da la proporción. Por eso baja de 120px a 88px cuando la caja se estrecha
 * (a 852px de ancho, con 120px se salía por 12px) y a 48px y 32px después.
 *
 * Comprobado con la diapositiva más alta —la de Panamá, cuyo titular ocupa dos
 * líneas— en contenedores de 320, 390, 552, 852, 900, 1151, 1152 y 1392px.
 */
.css-1y0hcjv{aspect-ratio: 16 / 7;}

@media (max-width: 1199.95px){
	.css-1y0hcjv{padding: 88px 32px;}
}

@media (max-width: 899.95px){
	.css-1y0hcjv{aspect-ratio: 4 / 3; padding: 48px 24px;}
}

@media (max-width: 599.95px){
	.css-1y0hcjv{aspect-ratio: 3 / 4; padding: 32px 20px;}
}

/*
 * El fondo. `object-fit: cover` hace lo que hacía `background-size: cover`:
 * llena la caja recortando lo que sobra, sin deformar la imagen.
 *
 * `z-index: 0` y no `auto`: sin él, el `<img>` queda en el flujo por delante
 * del velo oscuro —que es un hermano posterior— y el texto perdería el
 * contraste.
 */
.icasa-hero-imagen{position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;}

/*
 * Enlace que cubre una diapositiva sin textos (banner promocional).
 *
 * `z-index: 1` lo deja por encima del fondo y por debajo de las flechas, que
 * van en la 4. Sin eso, el enlace se comería los clics de «anterior» y
 * «siguiente» y el carrusel dejaría de poder avanzarse a mano.
 */
.icasa-hero-enlace{position: absolute; inset: 0; z-index: 1; display: block;}