*{
    box-sizing: border-box;
}

header{
    background-color:rgb(197, 249, 249);
    width: 100%;
    padding: 1em;
}

/* solo las imagenes que estan dentro de una etiqueta cuyo id es "logo" */
#logo img {
    /* es transparente se le puede asignar color de fondo*/
    background-color: ghostwhite;
    /* el color de fondo se extiende mas alla de la imagen */
    padding: .5em;
    /* tiene borde, (tipo de borde -espesor - color)*/
    border: 1em ghostwhite;
    /* bordes redondeados*/
    border-radius: .5em;
    /*relacion de aspecto 2 a 1*/
    aspect-ratio: 2/1;
    width: 7em;
    }

    ul,
    ol {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 1px;
    margin-inline-end: 1px;
    /* retira el relleno izquierdo predeterminado*/
    padding-inline: 0;
    /* elimina bullets, numeros, etc.*/
    list-style-type: none;
    
    }

    /*a la lista del menu del encabezado*/
header nav ul{
    /*elimina los margenes arriba y abajo que vienen predeterminados*/
    margin-bottom: auto;
}
/*vinculos pero solo los del menu superior*/
header nav a{
color:white;
background-color:rgb(0, 48, 60);
/* para darle propiedades de caja (margen) */
display: block;
/* ancho igual a su contenido*/
width: max-content;
/*separa los botones 1/8 del tamaño del texto */
margin: .125em;
/* relleno arriba y abajo 1/4 del tamaño del texto */
padding-inline: 1em;
/* border redondeado 1/4 del tamaño del texto */
border-radius: 1em;
}
/*cuando se pasa el cursor por sobre los vinculos del menu (selector de pseudo clase */
header nav a:hover{
   
    /* para darle propiedades de caja (margen) */
    display: block;
    /* ancho igual a su contenido*/
    width: max-content;
    /*separa los botones 1/8 del tamaño del texto */
    margin: .125em;
    /* relleno arriba y abajo 1/4 del tamaño del texto */
    padding-inline: 1em;
    /* border redondeado 1/4 del tamaño del texto */
    border-radius: 1em;
    color:rgb(0, 48, 60);
    background-color: white;
}


a{
    display: block;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif ;
    /* negrita*/
    font-weight: lighter;
}

body{
    /*familia tipografica general del proyecto (sus elementos contenidos la heredan) */
    /* la definida en la "paleta de diseño" */
    font-family:Arial, Helvetica, sans-serif;
    /* se retiran los 8 pixeles que vienen predeterminados para que sus elementos contenidos lleguen hasta los bordes de la ventana del navegador */
    margin: 0;
    background-color:rgb(0, 48, 60);
   }

   .contenedora{
    /* ancho maximo */
    width: min (100% 40rem);
    /* centrado horizontal (si sobra espacio, lo distribuye a la izquierda y derecha) */
    margin-inline: auto;
    padding: .5rem;
    padding-left: 1em;
    }

    .titulo1{
    display: flex;
    justify-content: center;
    color: white;
    padding-left: 1em;
    padding-right: .2em;
    }

    .menu{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: .2em;
    }

    #logo{
        display: flex;
        justify-content: center;
    }

    .titulos{
        color:rgb(0, 48, 60);
        display: flex;
        justify-content: center;
        padding-left: 1em;
    }

    .plan{
        color:rgb(0, 48, 60);
        background-color:rgb(197, 249, 249);
        padding-left: 1em;
        padding-top: .5em;
        padding-bottom: .5em;
        padding-right: 1em;

    }

    .texto{
        text-align:left;
    }

    .tituloarquetipo{
        color: white;
        text-align: center;
    }

  
    #arquetipo img{
        background-color: none;
        /* el color de fondo se extiende mas alla de la imagen */
        padding: .5em;
        /* tiene borde, (tipo de borde -espesor - color)*/
       
        /* bordes redondeados*/
        border-radius: 2em;
        /*relacion de aspecto 2 a 1*/
        aspect-ratio: auto;
        width: 80%;
        padding-left: 1em;
       
        }
        

    .arquetipo{
        display: flex;
        justify-content: center;
    }
    footer{
        display: block;
        background-color:rgb(197, 249, 249);
        padding-left: 1em;
        padding-top: .5em;
        padding-bottom: .5em;
        padding-right: 1em;
        color: white;

    }

    #boceto_pantallas img{
        background-color: none;
        /* el color de fondo se extiende mas alla de la imagen */
        padding: .5em;
        /* tiene borde, (tipo de borde -espesor - color)*/
       
        /* bordes redondeados*/
        border-radius: 2em;
        /*relacion de aspecto 2 a 1*/
        aspect-ratio: auto;
        width: 80%;
        padding-left: 1em;
        object-fit: cover;
    }

    .bocetos{
        display: grid;
        grid-template-columns: 50% 50%;
        align-items: center;
        margin-block: 1em;
    }

    .boceto_grupal{
        background-color:rgb(197, 249, 249);
    }

    .titulo{
        color:rgb(0, 48, 60);
        text-align: center;
        padding-top: 1em;
    }

    .logos{
        display: flex;
        justify-content: center;
        flex-direction: row;
        gap: 1em;
        align-items: center;
    }

    #uba img {
        /* es transparente se le puede asignar color de fondo*/
        background-color: rgb(255, 255, 255);
        /* el color de fondo se extiende mas alla de la imagen */
        padding: .5em;
        /* tiene borde, (tipo de borde -espesor - color)*/
        border: 1em rgb(255, 255, 255);
        /* bordes redondeados*/
        border-radius: .5em;
        /*relacion de aspecto 2 a 1*/
        aspect-ratio: 2/1;
        width: 7em;
        }

        #acumar img {
            /* es transparente se le puede asignar color de fondo*/
            background-color: rgb(255, 255, 255);
            /* el color de fondo se extiende mas alla de la imagen */
            padding: .5em;
            /* tiene borde, (tipo de borde -espesor - color)*/
            border: 1em rgb(255, 255, 255);
            /* bordes redondeados*/
            border-radius: .5em;
            /*relacion de aspecto 2 a 1*/
            aspect-ratio: auto;
            width: 7em;
            }

            .titulo_datos{
                display: flex;
                justify-content: center;
                color:rgb(0, 48, 60);
                text-align: center;
            }
            .titulo_autoridades{
                display: flex;
                justify-content: center;
                color:rgb(0, 48, 60);
            }
            .texto_datos{
                display: flex;
                justify-content: center;
                color:rgb(0, 48, 60);
                text-align: center;
            }

            .footer{
                color: rgb(0, 48, 60);
                text-align: start;
            }

            .web_visible{
                display: none;
            }

        

            
          
@media screen and (min-width:1024px){
    header .contenedora{
        display: flex;
        justify-content:space-between;
        flex-direction: row;
        align-items: center;
    }

    .plan{
        display: flex;
        flex-direction: row;
        gap: 2em;
        
    }

    .web_visible{
        display: contents;
    }

    .arquetipo_movil{
        display: none;
    }

    .boceto_grupal{
        display: none;
        
    }

    .titulos{
        color:rgb(0, 48, 60);
        display: flex;
        justify-content: center;
        padding-left: 1em;
    }

    .plan{
        color:rgb(0, 48, 60);
        background-color:rgb(197, 249, 249);
        padding-left: 1em;
        padding-top: .5em;
        padding-bottom: .5em;
        padding-right: 1em;

    }

    .texto{
        text-align:left;
    }

    .tituloarquetipo2{
        color: white;
        padding-top: 1em;
      
    }

  
    #arquetipo2 img{
        background-color: none;
        /* el color de fondo se extiende mas alla de la imagen */
        padding: .5em;
        /* tiene borde, (tipo de borde -espesor - color)*/
       
        /* bordes redondeados*/
        border-radius: 2em;
        /*relacion de aspecto 2 a 1*/
        aspect-ratio: auto;
        width: 100%;
        padding-left: 1em;
    
       
        }
        
        

  

    #boceto_pantallas2 img{
        background-color: none;
        /* el color de fondo se extiende mas alla de la imagen */
        padding: .5em;
        /* tiene borde, (tipo de borde -espesor - color)*/
       
        /* bordes redondeados*/
        border-radius: 2em;
        /*relacion de aspecto 2 a 1*/
        aspect-ratio: auto;
        width: 80%;
        padding-left: 1em;
        object-fit: cover;
    }

    .bocetos2{
        display: grid;
        grid-template-columns: 50% 50%;
        align-items: center;
        margin-block: 1em;
    }

    .boceto_grupal2{
        background-color:none;
    }

    .titulo2{
        color:white;
        
        padding-top: 1em;
    }
.arquetipoyboceto{
    display: grid;
    grid-template-columns:60% 40% ;
}

.titulos3{
    display: flex;
    justify-content:space-around;

   
}
  
}