/*
================================
  orden de las reglas de estilo:
  de lo general a lo particular,
  de arriba hacia abajo,
  de celular a tablet,
  de tablet a escritorio
================================
*/



/*  reseteo: selector universal */
* {
  /*
  para que el ancho de TODOS
  los elementos html
  se calculen hasta los bordes y
  NO sólo por sus contenidos */
  box-sizing: border-box;
}

/* ------------------
    paleta de diseño
   ------------------
"variables" css (propiedades personalizadas css):
son "recipientes con nombre" que guardan
valores css que se repetirán permanentemente
pq son parte de la paleta de diseño
(colores, tipografías, espacios entre los contenidos y los bordes de los elementos, entre los elementos,
tipos de sombras, bordes, espesores, etc
*/

/* selector "raiz" para que las "variables"
   estén disponibles en todo el html */
:root {

  /* colores del proyecto */
  --color-textos: hsl(0 0% 15%);
  --color-textos-secundarios: hsl(0 0% 0% / .5);
  --color-textos-alfa: hsl(0 0% 0% / .2);
  --color-fondos: hsl(0 0% 100%);
  --color-1: hsl(210 92% 36%);
  --color-2: hsl(38 100% 47%);
  --color-3: hsl(280 29% 44%);
  --color-3-alfa: hsl(280 29% 44% / .15);
  --color-4: hsl(198 100% 44%);

  /* tipografías */
  --tipo-titulos: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --tipo-textos: serif;

  /*
  otras variables
  ...
  */
  --sombras:
    0   /* desplazamiento horizontal */
    4px /* desplazamiento vertical */
    2px /* desenfoque */
    var(--color-textos-alfa); /* color */

}

/*
  para reponsive (según preferencias del usuario):
  si el usuario definió en el navegador que
  prefiere tema oscuro
*/



@media (prefers-color-scheme: dark) {
  /* cambiamos los colores del tema */
  :root {
    --color-textos: hsl(0 0% 85%);
    --color-textos-secundarios: hsl(0 0% 0% / .5);
    --color-textos-alfa: hsl(0 0% 0% / .2);
    --color-fondos: hsl(0 0% 10%);
    --color-1: hsl(210 92% 36% / .5);
    --color-2: hsl(38 100% 30%);
    --color-3: hsl(280 29% 30%);
    --color-3-alfa: hsl(280 29% 30% / .15);
    --color-4: hsl(198 100% 44% / .5);
  }
}


/* ----------------
   reglas generales
   ---------------- */

/* selector "padre" de todo lo visble en la ventana del navegador:
algunas propiedades serán "heredadas por sus elementos contenidos, otras no */
body {
  /* familia tipográfica general del proyecto
     (sus elementos contenidos la heredan) */
  font-family: var(--tipo-textos); /* la definida en la "paleta de diseño" */
  /* se retiran los 8 pixeles de margen que vienen predeterminados para que sus elementos contenidos "lleguen" hasta los bordes de la ventana del navegador */
  margin: 0;
  /* color general de los textos */
  color: var(--color-textos);
  /* color de fondo */
  background-color: var(--color-fondos);
}

/* selector múltiple: los títulos */
h1,
h2,
h3,
h4 {
  /* tipografía diferente a los otros elementos html*/
  font-family: var(--tipo-titulos);
}

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

/* "TODOS" los vínculos */
a {
  /* NO estarán subrayados */
  text-decoration: none;
  /* serán de un color definido en la "paleta de diseño" */
  color: var(--color-1);
  /* diferente familia tipográfica */
  font-family: var(--tipo-titulos);
  /* negrita */
  font-weight: bold;
}

/* "TODAS" las listas */
ul,
ol {
  /* elimina bullets, números etc. */
  list-style: none;
  /* retira el relleno izquierdo predeterminado */
  padding: 0;
}



/*
caja contenedora centrada y con ancho máximo

selector de tipo "clase" pq 
elementos html diferentes 
tendrán características visuales en común
*/
.contenedora {

  /* ancho máximo 1200px */
  width: min( 75rem, 100% );
  /* centrado horizontal (si sobra espacio,
    lo distribuye a izquierda y derecha) */
  margin-inline: auto;
  /* espacio entre el borde del elemento y su contenido */
  padding: 1rem;
}

/* -------------------
   componente superior
   y sus contenidos
   ------------------- */

header,
footer {
  /* color de fondo: de la paleta de diseño */
  background-color: var(--color-1);
  /* color de texto: de la paleta de diseño */
  color: var(--color-fondos);
}

header {
  /* encabezado con sombra difusa  */
  box-shadow: var(--sombras);
}

/* sólo la/s imagen/es que está/n dentro de la etiqueta cuyo atributo id es "logo" */
#logo img {
  /* si es transparente...
     se le puede asignar color de fondo */
  background-color: var(--color-2);
  /* el color de fondo se extiende más allá de la imagen */
  padding: .5rem;
  /* tiene borde
     (tipo de borde - espesor - color) */
  border:  solid 4px var(--color-fondos);
  /* bordes redondeados */
  border-radius: .5rem;

}
/* vínculos de la navegación */
header nav a {
  /* fondo */
  background-color: hsl(0 0% 100% / 75%);
  /* tipografía */
  color: hsl(210 92% 36%);
  /* tamaño y proporción */
  width: 2.5em;
  aspect-ratio: 1;
}

/* cuando se pasa el cursor sobre los vínculos de la navegación
o se seleccionan con el teclado */
header nav a:hover,
header nav a:focus-visible {
  /* fondo */
  background-color: hsl(0 0% 100%);
  /* tipografía */
  color: hsl(210 92% 15%);
  outline-color: transparent;
}




/* ------------------
   componente central
   y sus contenidos
   ------------------ */


/* TODAS las secciones */
section {
  padding-bottom: 2rem;
}

/* clase para diferentes títulos */
.titulo {
  /* "subrayado" a todo lo ancho */
  border-block-end: 4px solid var(--color-2);
  /* separa el "subrayado" del texto */
  padding-bottom: .25rem;
}


/*
sección equipo
*/

/* componente con todos los datos de cada integrante */
.equipo article {
  /* color de fondo */
  background-color: var(--color-3-alfa);
  /* "relleno" (distancia entre contenido y borde) */
  padding: 1em;
  /* borde redondeado */
  border-radius: .25em;
}

/* SÓLO las imágenes del equipo */
.equipo img {
  /* fondo de color (si son transparentes) */
  background: var(--color-2);
  /* borde violeta */
  border: solid .4em var(--color-3);
  /* imagen redonda */
  border-radius: 50%;
  /* sombra interna y externa */
  box-shadow:
      var(--sombras),
      var(--sombras) inset;
  /* tamaño y proporción */
  width: 8em;
  aspect-ratio: 1;
}

/* nombre de integrante del equipo */
.equipo_textos h3 {
  /* eliminar espacio superior predeterminado
  para que se alinee con la imagen */
  margin-block-start: 0;
}

/* vínculo "rótulo individual" */
.equipo_textos a {
  /* fondo */
  background-color: var(--color-3-alfa);
  /* borde redondeado */
  border-radius: .25rem;
  /* color tipografía */
  color: var(--color-3);
  /* relleno vertical */
  padding-block: .25em;
  /* relleno horizontal */
  padding-inline: 1em;
}

/* cuando el cursor está sobre el vínculo "rótulo individual"
o se selecciona con el teclado... */
.equipo_textos a:hover,
.equipo_textos a:focus-visible {
  /* ... cambia color tipografía */
  color: var(--color-fondos);
  /* ... cambia color fondo */
  background-color: var(--color-3);
  outline-color: transparent;
}

.equipo_textos a::after {
  content: ' ▶';
  font-size: .7em;
}

/* -------------------
   componente inferior
   y sus contenidos
   ------------------- */

/* párrafo/s contenidos en la etiqueta "footer" */
footer p {
  /* elimina margen superior e inferior que viene predeterminado */
  margin-block: 0;
}




/* ------------------
   ------------------

   reglas para layout

   ------------------
   ------------------ */


body {
  /* pie abajo siempre */
  display: grid;
  /* altura mínima: altura del navegador */
  min-height: 100vh;
  /* header y footer: altura de su contenido
     main: altura que sobra */
  grid-template-rows: auto 1fr auto;
}

header .contenedora {
  /* para que el logo y el menú queden en la misma línea... */
  /* ... es caja flexible */
  display: flex;
  /* separa elementos hijos en la horizontal */
  justify-content: space-between;
  /* centra elementos hijos en la vertical */
  align-items: center;
  /* si su elementos hijos no caben en una línea, van a la línea siguiente */
  flex-wrap: wrap;
  /* separación mínima de los elementos */
  gap: 1em;
}

header nav ul {
  /* menu horizontal */
  display: flex;
  /* vínculos separados 1/2 renglón */
  gap: .5em;
}

header nav a {
  /* para que se apliquen tamaño y proporción y se centren sus contenidos */
  display: grid;
  place-items: center;
}

.integrantes {
  /* para que queden más de 1 en la misma línea */
  display: grid;
  /* separación entre los elementos */
  gap: 1em;
  /* quedan en la linea, si caben
     con ancho mínimo de 320px */
  grid-template-columns: repeat(auto-fit, minmax(min(20em, 100%), 1fr));
}

.equipo article {
  /* 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;
  /* al convertir el artículo en "caja flexible", la imagen se estira... hay que corregirlo */
  align-items: flex-start;
}

.equipo_textos {
  /* textos se estiran para medir lo mismo */
  align-self: stretch;
  /* btn para abajo, texto para arriba */
  display: grid;
  /* plantilla de líneas de los textos:
    - nombre con altura fija,
    - texto crece para ocupar espacio libre,
    - botón con la altura de su contenido */
  grid-template-rows: 1.5rem 1fr auto;
}

.equipo_textos a {
  /* botón a la derecha */
  justify-self: end;
}



/* --------------------------
   media queries,
   para cambiar la apariencia
   en la medida en que el
   navegador se ensancha
   (mobile first)
   -------------------------- */

/* cambios a partir de los 480px */
@media (min-width: 30em) {

}

/* cambios a partir de los 640px */
@media (min-width: 40em) {

}

/* cambios a partir de los 960px */
@media (min-width: 60em) {

}