@charset "utf-8";
/*  reset: selector universal */
* {
  /* para que el ancho de
  TODOS los elementos HTML
  se calculen hasta los bordes y
  NO solo por sus contenidos,
  cambiando lo que viene predeterminado */
*{box-sizing: border-box;}
}

body {
  margin: 0;
  /* color general de los textos */
  color: #161616;
    /* familia tipografica general del proyecto
     (sus elementos contenidos la heredan) */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   /* color de fondo */
  background-color: #f5ddf1 
}

h1,
h3,
h4 {
  margin-bottom: auto;}
/* selector multiple: parrafos e items de listas  */
p,
li {
  /* se evitan "viudas" y "huerfanos" */
  text-wrap: pretty;
  margin-block: auto;
}

img {
  max-width: 100%;
}

main{
  padding-inline: 1rem;
}

.contenedora {
  max-width: 65rem;
  margin: 0 auto;
  /*padding: 1rem;*/
}

h1 {
  line-height: 1.4em;
  margin: inherit;
  text-wrap: balance;
  color :  hsl(319, 79%, 95%) ; 
  font-size : 2em ; 
  background-color: hsl(327, 76%, 68%)
}

h2{
  color :  hsl(327, 70%, 51%) ;
}

#compas{
  display: block;
  text-align: justify;
}

a{ 
  text-decoration: none;
  color: #161616;
  font-weight: bold;
}

ul,
ol{
list-style: none;
padding: 0;
}

#mifoto{
  width: 20em;
  border: 8px solid hsl(300, 7%, 97%); 
  /*border-radius: 10%;*/
  box-shadow: 0px 13px 13px rgba(0, 0, 0, 0.514);
  margin-right: 40px;
  float: left;
  margin-top: 20px;
  display: block;
  margin: auto;
}
.misdatos{
  display: block;
}

.minombre{
  font-size : 2em ;
  color: hsl(319, 79%, 95%);
  gap: .1em;
  text-align: center;
}

#imagenapp {
  margin-top: 10px;
  aspect-ratio: 2;
  max-width: 90%;
}
header,
footer {
  background-color: hsl(320, 2%, 27%);
  color: hsl(0 0% 95%);
}

header {
  box-shadow:
    0   
    4px 
    4px 
    hsl(0 0% 0% / 20%)
}

#logo {
display: block;
border-radius: .3rem;
width: 6rem;
padding: .25rem .5rem;
background-color: hsl(0, 0%, 100%);
border: solid 2px ;
}

/*menu*/

header nav ul {
  display: flex;
  gap: .50rem;
  flex-wrap: wrap;
  margin-block: 0;
}

header nav a:hover,
header nav a:focus-visible,

.index nav li:first-of-type a,
.plan nav li:nth-of-type(2) a,
.mapa nav li:nth-of-type(3) a {
  background-color: hsl(0 0% 95%);
  color: hsl(327, 70%, 51%);
  outline: none;
}

header nav ul {
/* caja flexible */
 display: flex;
  
/* separacion entre elementos de la caja flexible */
gap: .25rem;
  
/* si un elemento no cabe, baja a la siguiente li­nea */
flex-wrap: wrap;
}

/*para acomodar la ubicación del menu-header*/

header .contenedora{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  text-align: justify;
  padding: 1rem;
}

.comitente {
  display: flex;   
  justify-content:center;
  text-align: justify;
  width: 100%;
  border-radius: .99em;
  flex-direction: column;
  font-size: 1.25em;
}

.comitente div{
  display: block;
  text-align:justify;
  margin: .5em 0 auto;
  border-radius: .25em;
}

header ul{
  list-style: none;
  padding: 0;
}


header ul li a {
  width: 7em;
  color: hsl(0, 0%, 99%);
  background-color: hsl(327, 88%, 67%);
  padding: 0.25em .3em;
  border-radius: 25em;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

footer .contenedora{
  /* elimina el margen inferior que viene predeterminado */
  margin-block-end: 0;
}

.equipocompas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 1rem;
}

.equipocompas article{
  background-color:  hsla(39, 89%, 59%, 0.863);
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 1rem;
    /* distancia vertical entre los integrantes */
    margin-block: .5em;

    /* "relleno" (distancia entre contenido y borde) */
    padding: 1em;
  
    /* borde redondeado */
    border-radius: .25em;
}

.equipotextos{
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 1.25em;
}

.equipotextos > *{
  margin: 0; 
  color: rgb(255, 254, 255);
}

.equipotextos a{
  display: grid;
  justify-items: end;
  margin-inline-start: auto;
  background-color: hsl(327, 79%, 78%);
  border-radius: 100vw;
  color: hsl(327, 70%, 51%);
  font-size: .90em;
  padding-block: .125em .25em;
  padding-inline: 1em .75em
}

.equipo img {
  /* tamaños */
  width: 15em;
  border: solid .2em hsl(23, 35%, 91%);
  box-shadow:  0 4px 4px hsl(0 0% 0% / 20%);
  max-width: 90%;
}

.equipo_textos a:hover,
.equipo_textos a:focus-visible {
  color: hsl(0 0% 95%);
  background-color: hsl(24, 91%, 56%);
  outline: none;
}

.boceto a {
  color: hsl(0, 0%, 99%);
  text-align: center;
  max-width: 100%;
  margin: 1em auto 0em 2em;
  padding: 0.5em;
  background-color: hsl(327, 88%, 67%);
  border-radius: 35em;
  gap: .25rem;
  flex-wrap: wrap;
}