/*
    para que el ancho de los elementos html se calculen hasta los bordes y no solo por sus contenidos cambiando lo que viene predeterminado */
    *{box-sizing: border-box;
}


header, footer{
    background-color: #EB9C00;
    color: #bc7777;
}

body{
    background-color: #EAD9A6;
    color: #000000;
    font-family: sans-serif;
    margin: 1em;
}

/*
caja contenedora centrada
y con ancho máximo

selector de tipo "clase" pq 
elementos html diferentes 
tendrán características visuales en común
*/
header .contenedora{    
    justify-content: center;
    align-items: center;
    padding: 1rem;
    gap: 0.5em;
    flex-wrap: wrap;
}


#logo {
background-color: whitesmoke;
border-radius: 0.5rem;
padding: 0.5rem;
/* aspect-ratio: 2 / 1; */
width: 5em;
margin-top: 0.6em;
}


img {
    margin: 0 0 0 0;
}

/*Logo acumar*/
.logo_acumar {
    max-width: 40%;
    margin: auto;
    padding: 1em;
/* background-color: #750408; */
    border-radius: 0.25em;
/*    box-shadow: 5px 5px 5px #181c16a9; */
}

/*Parrafo acumar*/
.parrafo-acumar{
    max-width: 100%;
    margin-block: 0.5em;
    padding: 1em;
    background-color: #7b509126;
    border-radius: 0.25em;
}

header nav ul{
   /* list-style: none;
    display: flex; */
    margin-block: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    padding: 0;
    flex-direction: column;
}



header nav ul li{
    padding: 0.5em;
}

/* para que "TODAS" las imágenes no sean
   mayores que las cajas que las contienen
   para evitar "scroll" horizontal */
   img {
    /* medirán, como máximo,
    el tamaño del bloque html que las contiene */
    max-width: 100%;
    
  }

/* vínculos, pero SÓLO los del menú superior */
header nav a {
    /* color del texto */
    color: #EAD9A6;
    /* color de fondo */
    background-color: #af1f12;
    /* para darle propiedades de caja (margen, por ejemplo) 
    display: block;
    /* ancho igual a su contenido */
    width: max-content;
    /* separa los botones 1/4 del tamaño del texto */
    margin: .25em;
    /* "relleno" arriba y abajo 1/4 del tamaño del texto */
    padding-block: .25em;
    /* "relleno" a izquierda y derecha del tamaño del texto */
    padding-inline: 1em;
    /* border redondeado 1/4 del tamaño del texto */
  border-radius: .25em;
  box-shadow: 4px 3px 6px #000000;
}

.equipo h2 {
    width: 100%;
}

/* +============== PARTE DE EQUIPO =============== */
.equipo article {
    /* se eliminan los márgenes
    definidos para celulares */
    margin: 0;
    /* caben 2 en la misma línea */
    width: calc(50% - .5em);
  }

/* componente (article) con todos los datos de cada integrante */
  .equipo article {
/* color de fondo */      
    background-color: #7b509126;
/* distancia vertical entre los integrantes (1/2 tamaño del texto) */    
    margin-block: 0.5em;
/* "relleno" (distancia entre contenido y borde) del tamaño del texto */
    padding: 1em;
/* borde redondeado 1/4 del tamaño del texto */    
    border-radius: 0em;
/* caja flexible para que la imagen quede a la izquierda y los textos a la derecha */
    display: flex;
/* separa sus elementos con una "calle" */
    gap: 1em;
}

/* imágenes SÓLO de la sección equipo */
.equipo img {
/* fondo de color (si son transparentes) */    
/* background: hsl(38 100% 47%); */
/* borde de la foto */
    border: solid 0.1em #EB9C00;
/* imagen redonda */
    border-radius: 50%;
 /* sombra interna y externa */    
    box-shadow: 0 /* desplazamiento horizontal */
     4px /* desplazamiento vertical */ 
     9px /* desenfoque */
    #000000 /* color */, 0 4px 2px hsl(0 0% 0% / .2) inset /* la misma sombra, pero del lado interior */;
/* ancho 8 unidades de texto */
    width: 8em;
/* proporción cuadrada */    
    aspect-ratio: 1;
 /* al convertir el artículo en "caja flexible", la imagen se estira... hay que corregirlo */    
    align-self: flex-start;
}

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

/* sección equipo como "caja flexible"
  para que quepan integrantes en la misma línea */
  .equipo2{
    /* caja flexible */
    display: flex;
    /* si los elementos no caben,
    van a la siguiente línea */
    /*flex-wrap: wrap; */
    /* elementos separados por una "calle" */
    gap: 1em;
  }

  .equipo article {
    /* se eliminan los márgenes
    definidos para celulares */
    margin: 0;
    /* caben 2 en la misma línea */
    width: calc(50% - .5em);
  }

h1{
    background-color: #af1f12;
    width:100%;
    padding:1rem
}

h1 {
    color: rgb(239, 224, 140);
    font-weight: bolder;
}

h2 {
    color: #af1f12;
    font-weight: bolder;
}

img#arquetipo{
width: 50% ;
}

img#arquetipo2{
    width: 50% ;
}

img#bocetouno{
    width: 30% ;
}

img#bocetodos{
    width: 30% ;
}

img#bocetotres{
    width: 30% ;
}

img#bocetocuatro{
    width: 30% ;
}

img#bocetocinco{
    width: 30% ;
}

img#bocetoseis{
    width: 30% ;
}

img#bocetosiete{
    width: 30% ;
}

img#bocetocho{
    width: 30% ;
}

@media screen and (min-width:768px){
    header nav ul {
      flex-direction: row;
    }
}