.piePagina__llamadaContenido {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 34px 38px;
}

.piePagina__contenido {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.piePagina__marca {
    grid-column: 1 / -1;
}

.piePagina__finalContenido {
    flex-direction: row;
    text-align: left;
}





































/*
* Estilos al componente de portada
*
* @id #inicio
*
*/

#inicio{
    padding: 140px 34px 72px;
}

#inicio .portada__contenido{
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(330px, 0.95fr);
    align-items: center;
    gap: 38px;
}

#inicio .portada__titulo{
    font-size: 5.4rem;
}

#inicio .portada__descripcion{
    font-size: 1.7rem;
}

#inicio .portada__datos{
    gap: 12px;
}

#inicio .portada__dato{
    padding: 15px 12px;
}

#inicio .portada__visual{
    min-height: 510px;
}

#inicio .portada__planeta{
    width: min(42vw, 430px);
}

#inicio .portada__astronauta{
    right: -10px;
    bottom: 42px;

    width: 165px;
    height: 225px;
}

#inicio .portada__tarjeta--paises{
    top: 8%;
    left: -6%;
}

#inicio .portada__tarjeta--historias{
    right: -3%;
    bottom: 3%;
}

#inicio .portada__marcaVisual{
    bottom: 8%;
    left: -3%;
}

#inicio .portada__desplazamiento{
    display: flex;
}

/*
* Estilos a los encabezados de sección
*
* @class .tituloSeccion
*
*/

.tituloSeccion{
    margin-bottom: 52px;
}

.tituloSeccion h2{
    font-size: 5rem;
}


/*
* Estilos al componente de beneficios
*
* @class .beneficios
*
*/

.beneficios{
    padding-right: 34px;
    padding-left: 34px;
}

.beneficios .beneficios__contenido{
    grid-template-columns: repeat(3, minmax(0, 1fr));

    margin-top: -48px;
}

.beneficios .beneficio{
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;

    min-height: 280px;
    padding: 29px 25px;
}

.beneficios .beneficio__icono{
    width: 62px;
    height: 62px;
}

.beneficios .beneficio h2{
    font-size: 2.1rem;
}


/*
* Estilos al componente de categorías
*
* @id #categorias
*
*/

#categorias{
    padding: 120px 34px;
}

#categorias .categorias__rejilla{
    gap: 22px;
}

#categorias .categoria{
    min-height: 330px;
    padding: 29px;
}


/*
* Estilos al componente de funcionamiento
*
* @id #como-funciona
*
*/

#como-funciona{
    padding: 120px 34px;
}

#como-funciona .funcionamiento__contenido{
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(350px, 1.08fr);
    align-items: center;
    gap: 45px;
}

#como-funciona .funcionamiento__mapa{
    min-height: 570px;
}


/*
* Estilos al componente de invitación
*
* @class .invitacion
*
*/

.invitacion{
    padding: 120px 34px;
}

.invitacion .invitacion__contenido{
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 45px;

    padding: 56px 48px;
}

.invitacion h2{
    font-size: 5rem;
}

.invitacion .invitacion__accion{
    align-items: center;
}

/*
* Estilos al componente de pie de página
* Página: index
*
* @class .piePagina
*
*/

.piePagina .piePagina__llamada{
    padding-right: 34px;
    padding-left: 34px;
}

.piePagina .piePagina__llamadaContenido{
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 38px;

    padding: 42px;
}

.piePagina .piePagina__llamadaTexto h2{
    font-size: 3.4rem;
}

.piePagina .piePagina__contenido{
    grid-template-columns:
        minmax(280px, 1.3fr)
        repeat(2, minmax(150px, 0.7fr));
    gap: 42px;

    padding-top: 86px;
    padding-right: 34px;
    padding-bottom: 72px;
    padding-left: 34px;
}

.piePagina .piePagina__marca{
    grid-column: 1 / -1;
}

.piePagina .piePagina__contenido > .piePagina__grupo:last-child{
    grid-column: auto;
}

.piePagina .piePagina__finalContenido{
    flex-direction: row;

    padding-right: 34px;
    padding-left: 34px;

    text-align: left;
}

.piePagina .piePagina__legal{
    justify-content: flex-end;
}