@charset "utf-8";

* {
  box-sizing: border-box;
}

body {
  font-family: Raleway;
  margin: 0;
  color: hsl(0, 0, 2);
    background-image: url("../imagenes/fondo.jpg");
    background-repeat: repeat; 
    background-position: top left; 
    background-size: auto; 
    background-attachment: fixed; 
}

.contenedor {
  width: min(65rem, calc(100% - 3rem));
  margin-inline: auto;
}


/* menú  de navegación */

header nav {
  display: grid; 
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem; 
}

@media (max-width: 600px) { 
  header nav {
    grid-template-columns: repeat(2, 1fr); 
  }
}

header nav ul {
  margin-block-end: 0;
  padding: 0; /* Eliminar padding */
  display: contents; /* Mantiene la estructura de grid */
}

header nav li {
  list-style: none; /* Eliminar estilo de lista */
  margin: 0; /* Eliminar margenes */
}

header nav a {
  background-color: hsl(321, 74%, 95%);
  color: hsl(330, 89%, 75%);
  display: block;
  padding: 0.25em .35em;
  text-align: center;
  border-radius: 50vw;
}

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

.index nav li:first-of-type
.plan nav li:nth-of-type(2) a,
.mapa nav li:nth-of-type(3) a {
  background-color: hsl(327, 89%, 75%);
  color: hsl(0, 0%, 100%);
  border-color: hsla(338, 45%, 49%, 1);
  box-shadow: .25rem .25rem hsla(338, 45%, 49%, 1);
  outline: none;
}

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

header,
footer {
  background-color: hsl(338, 39%, 81%, 1);
  color: hsl(190, 33%, 7%, 1);
  margin-block: 1.5rem;
  padding: 1rem;
  border-radius: 10px;
  border: 2px solid hsl(0, 25%, 65%);
}

#logo {
  width: min(100%, 7.5rem);
  background-color: hsl(0, 0, 95);
  margin-inline: auto;
}

#logo img {
  display: block;
  padding: 0.5rem .75rem;
  margin-bottom: 10px;
  width: 100%;
}

a {
  text-decoration: none;
  color: hsla(338, 45%, 49%, 1);
  font-weight: bold;
  padding: 5px;
  border-radius: 5px;
}

a:hover {
  background-color: hsla(342, 72%, 76%, 0.692);
  color: hsl(327, 95%, 24%);
}


section {
  padding-block: 2rem 4rem;
}

section > h1
section > h2
section > h3 {
  margin-block-end: 2em;
  padding: .5em 1em;
}

/* sobre mi */

.sobre-mi {
  background-color: hsla(0, 0%, 100%, 0.9); 
  padding: 30px; 
  border-radius: 10px; 
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); 
  max-width: 75%; 
  margin: 20px auto; 
}

.sobre-mi h1 {
  color: hsla(338, 45%, 49%, 1); 
}

.sobre-mi img {
  width: 50%;
  object-fit: cover; 
  border-radius: 10px; 
  display: block; 
  margin: 0; 
  padding: 0;
  border: 4px solid hsl(0, 25%, 65%);
}

figure {
  margin: 0;
  padding: 0;
}



/* materias */

.materias {
  background-color: hsla(35, 100%, 96%, 0.9);
  padding: 20px;
  border-radius: 10px;
  max-width: 75%;
  margin: 20px auto;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.materias h2 {
  color: hsl(0, 15%, 53%); 
}

.materias h3 {
  color:hsl(327, 89%, 75%);
}


.materias figcaption {
  padding: 1rem;
}


.materias figcaption ul {
  margin: 0;
  list-style: unset;
  padding-inline-start: 0.5em;
}


.materias figcaption li {
  margin-block-start: .75rem;
}


.materias figcaption ::marker {
  content: "✿ ";
  color: hsla(338, 45%, 49%, 1);
  font-size: larger;
}

.progreso {
  background-color: hsla(316, 66%, 92%, 0.9);
  padding: 20px;
  border-radius: 10px;
  max-width: 75%;
  margin: 20px auto;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.progress-6 {
  width:100%;
  height:22px;
  border-radius: 20px;
  color:#b80467;
  border:2px solid;
  position: relative;
}
.progress-6::before {
  content:"";
  position: absolute;
  margin:2px;
  inset: 0 20% 0 0;
  border-radius: inherit;
  background:currentColor;
  animation:p6 2s infinite;
}
@keyframes p6 {
    100% {inset:0}
}


.grupo {
  display: grid;
    background-color: hsla(320, 95%, 77%, 0.9);
    padding: 20px;
    border-radius: 10px;
    max-width: 75%;
    margin: 20px auto;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.grupo h2 {
  color: hsl(0, 0%, 100%);
}

.academicos {
  background-color: hsla(321, 100%, 95%, 0.8);
  border-radius: 10px;
}

.academicos h2 {
  text-align: center;
}

.con-sombra {
  background-color: rgba(255, 162, 216, 0.301);
  border: 3px solid hsl(340, 53%, 50%);
  border-radius: 10px 10px 10px 10px;
}


a {
  background-color: hsl(334, 53%, 94%);
  color: hsl(340, 53%, 50%);
  border: 2px solid hsl(0, 25%, 65%);
  font-size: .85em;
  padding-block: .125em .25em;
  padding-inline: 1em .75em;
  border-radius: 100vw;
  display: inline-block;
}

a:hover,
a:focus-visible {
  color: hsl(0 0% 95%);
  background-color: hsl(340, 90%, 69%);
  outline: none;
  border-color: hsl(0, 13%, 40%);
  box-shadow: .25rem .25rem hsl(0, 13%, 40%);
}

.academicos figure {
  aspect-ratio: 2;
  padding: .5rem;
}

.academicos img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
} 

body {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
}

.grupo article,
.academicos > ul > li {
  padding: 1em;
}

.grupo figure,
.academicos figure {
  width: min(100%, 10em);
  aspect-ratio: 1;
}

/* grid y esas cositas */

.grupo> div,
.academicos > ul {
  display: grid;
  grid-template-columns: repeat(autofit, minmax (min(20rem, 100%), fr));
  gap: 1rem;
}

.grupo article {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 1rem;
}

.grupo article > div {
  display:grid;
  grid-template-rows: auto auto 1fr;
}

.grupo article > div a,
.academicos > ul > li a {
  margin-inline-start: auto;
}

.academicos > ul > li {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1rem;
}