@charset "utf-8";

/* tipografía disponibilizada desde Google fonts */
/* @import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:wght@500&family=Noto+Sans+Display:ital,wght@0,100;0,400;0,700;1,100;1,400;1,700&display=swap'); */


/*
================================
  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 */
*,
*::after,
*::before
 {
  /* para que el ancho de las cajas
     se calcule hasta los bordes y NO
     sólo por sus contenidos */
  box-sizing: border-box;

  margin: 0;
  padding: 0;
  border: 0;
  outline-color: transparent;
}


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

html {
  /* scroll suave */
  scroll-behavior: smooth;
  /* para que el encabezado siempre quede visible */
  scroll-padding-block-start: 6em;
}


/*
  Si el usuario configura el navegador para reducir el movimiento, las animaciones y transiciones hechas en CSS se limitan...
  No elimina las animaciones JS.
*/
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}


body {
  /* tipografía general del proyecto */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* selector múltiple */
h1,
h2,
h3,
h4,
h5,
h6,
p { /* redefine los márgenes inferiores para que midan el tamaño de la tipografía */
  margin-block-end: 1em;
}

/* selector multiple: TODOS los titulos */
h1,
h2,
h3,
h4,
h5,
h6 {
  /* mas oscuros que los otros textos */
  color: hsl(0 0% 10%);

  /* parecido a interlineado, valor 1 equivale a interlineado igual al tamaño de la tipografia */
  line-height: 1.1;
  /* en web, generalmente, el interlineado en titulos es menor que el interlineado en parrafos */

  /* si ocupa más de una linea,
  se equilibran los anchos de esas lineas */
  text-wrap: balance;
}

/* todos los párrafos */
p {
  /* se cambia la "interlinea" para dar más "aire" */
  line-height: 1.6;
}

/* selector multiple:
   parrafos,
   items de listas,
   epigrafes de figuras que ilustran el texto  */
p,
li,
figcaption {
  /* se evitan "huerfanos" */
  text-wrap: pretty;
}

/* TODOS los vínculos */
a {
  /* elimina los subrayados */
  text-decoration: none;
}

/* TODAS las listas */
ul,
ol {
  list-style: none; /* elimina bullets, números etc. */
}

/* TODAS las imágenes */
img {
  /* para que NO midan más que la etiqueta que las contiene */
  max-width: 100%;
  /* opcional, evita deformaciones en navegadores antiguos */
  height: auto;
}

/* selector de clase:
   grupo de elementos con características comunes...
   esta clase "contenedora" centra contenidos
   y limita su ancho
*/
.contenedora {
  width: min(50rem, 100%); /* limita el ancho a 800px */
  margin-inline: auto; /* centra "la caja" horizontalmente */
  padding: 1rem; /* relleno igual a un renglón */
}

/* lo que tienen en común el encabezado y el pie */
header,
footer {
  background-color: hsl(210 92% 36%);
  color: white;
}

/* ----------
   encabezado
   ---------- */

header {
  box-shadow: 0 4px 2px hsl(0 0% 0% / 0.25); /* sombra difusa  */

  /* "pegado" al borde superior de la ventana */
  position: sticky;
  /* distancia 0 del borde */
  top: 0;
  /* capa superior arriba de casi todo */
  z-index: 8000;
}

/* caja que "limita" al logo y al menu */
header .contenedora {
  display: flex; /* caja flexible */
  /* si los elementos "hijos" no caben en una fila,
     van a la fila siguiente */
  flex-wrap: wrap;
  
  /* elementos "hijos" separados en la horizontal */
  justify-content: space-between;
  
  /* elementos "hijos" centrados en la vertical */
  align-items: center;
}

#logo {
  display: flex; /* caja flexible */
  align-items: center; /* hijos centrados en la vertical */
  /* sale del fondo pero no parece */
  position: relative;
  /* capa superior, arriba de todo */
  z-index: 9999;
}

/* etiqueta img, pero SÓLO el logo */
#logo img {
  width: 4em;
  margin-inline-end:.75em;
}
#logo h3 {
  margin: 0;
  color: hsl(0 0% 90%);
  font-size: 2rem;
}



/* ----
   menu
   ---- */

/* botón "hamburguesa" */
.menu-btn {
  background: hsl(0 0% 100% / 0.25);
  border-radius: 50%;
  box-shadow: -5px 5px 5px hsl(180 100% 4% / 0.2);
  padding: .75rem;
  width: 3rem;
  aspect-ratio: 1;
  cursor: pointer;
  transition: all 0.3s ease-out; /* anima el "hover" */

  /* capa superior, pero no parece */
  position: relative;
  /* en capa superior, casi arriba de todo */
  z-index: 9000;
}

/* cada barra de la "hamburguesa" */
.menu-btn .btn-linea {
  width: 25px;
  height: 3px;
  margin: 4px 0 4px 0;
  background: hsl(0 0% 90%);
  transition: all 0.3s ease-out;
}

/* cada barra, transformacion para formar la "X" */
.menuVisible .menu-btn .btn-linea {
  transform: rotate(180deg);
}
/* Las tres barras para formar la "X" */
.menuVisible .menu-btn .btn-linea:nth-child(1) {
  transform: rotate(45deg) translate(4px, 6px);
}
.menuVisible .menu-btn .btn-linea:nth-child(2) {
  opacity: 0;
}
.menuVisible .menu-btn .btn-linea:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -6px);
}

/* menú propiamente dicho */
nav ul {
  background-color: hsl(210 92% 10% / 95%);
  display: grid;
  place-items: center;
  place-content: center;

  /* sale del fondo, queda fijo */
  position: fixed;
  /* emplazamiento,
  estirado en toda la ventana */
  inset: 0;
  /* capa superior, arriba de casi todo */
  z-index: 8000;
  /* escondido "a la derecha" */
  translate: 100%;
  
  transition: all .6s ease; /* anima cuando "nav" NO tiene la clase "menuVisible" */
}

/* el menu,
   cuando "nav" tiene
   la clase "menuVisible" */
.menuVisible ul {
  background-color: hsl(210 92% 30% / 95%);
  transition: all .3s ease; /* anima cuando "nav" tiene la clase "menuVisible" */
  
  /* se muestra */
  translate: 0;
}

/* cada vínculo del menu */
nav ul li a {
  border-bottom: solid 3px hsl(0 0% 100% / 0.1);
  color: white;
  display: block;
  font-size: 1.5rem;
  margin-block-end: .5rem;
  width: min(70vw, 20rem); /* el valor menor entre el 40% del ancho de la ventana del navegador y 240px */
  text-align: center;
  
  padding: .5rem;
  text-decoration: none;
}

nav ul li a:hover {
  border-bottom: solid 3px hsl(0 0% 100% / 0.5);
  transition: all .3s;
}


/* ----------------
   cuerpo principal
   ---------------- */

main h3 {
  background-color: hsl(198 100% 43% / 0.1);
}

/* clase para diferentes títulos */
.titulo {
    border-block-end: 4px solid hsl(38, 100%, 47%); /* "subrayado" a todo lo ancho */
    padding-block-end: .35em; /* separa el "subrayado" del texto */
}

/* galeria de imagenes */

.galeria {
  padding: 0 1em 2em 1em;
  width: min(75em, 100%);
  margin-inline: auto;
}

.las-imagenes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5em, 1fr));
  gap: .25em;
}


.galeria figure {
  border-radius: 5px;
  
  aspect-ratio: 1; /* para que "figure" sea un cuadrado*/
  
  /* para que cada "figure" sea origen de coordenadas de sus elementos contenidos */
  position: relative;
  /* para ocultar lo que "excede" sus límites */
  overflow: hidden;
}

.galeria img {
  /* para que la imagen "llene" la etiqueta "img" aun con otras porporciones */
  object-fit: cover;
  object-position: left center;
  width: 100%;
  height: 100%;
  display: block; /* para que "desaparezca" el espacio que queda debajo de la imagen */
}

.galeria figcaption {
  background-color: hsl(210 29% 44% / 0.5);
  /* mix-blend-mode: hard-light; */
  color: white;
  padding: .5em;
  line-height: 1em;
  text-transform: uppercase;
  font-weight: 700;
  
  /* para superponer el epígrafe sobre la foto */
  position: absolute;
  /* estirar para que ocupe todo figure */
  inset: 0;
  /* mover para que se vea apenas el "titulo" de la foto */
  translate: 0 calc(100% - 2em);
  
  transition: all .6s ease;
}

/* propiedades de figcaption SÓLO cuando
 el cursor se coloca encima de "figure" */
.galeria figure:hover figcaption {
  background-color: hsl(280 15% 35% / 0.75);
  transition: all .3s ease;

  /* emplazamiento, 0 del borde superior */
  translate: 0;
  /* grid */
  display: grid;
  /* texto centrado */
  text-align: center;
  place-items: center;
  place-content: center;
  /* relleno en linea 2 renglones */
  padding-inline: 2em;
}

.galeria figcaption span {
  display: block;
  font-size: .75em;
  color: #ddd;
  margin-block-start: .5em;
  text-transform: none;
}

.galeria figcaption a {
  display: inline-block;
  margin-block-start: .5em;
  background-color: hsl(209 100% 35% / 0.5);
  color: hsl(0 0% 90% / 0.85);
  padding: .25em 1em;
  border-radius: 2em;
}

.galeria figcaption a::after {
  content: " →";
}

.galeria figcaption a:hover {
  background-color: hsl(209 100% 35% / 0.95);
  box-shadow: 0 .25em .25em hsl(0 0% 0% / 0.25);
  color: hsl(0 0% 90%);
}



/* sección textos */

.textos {
  padding-block-start: 2em;
}

.textos h3 {
  padding: .5em 1em;
}

.textos > *,
.textos p:not(:last-child) {
  margin-block-end: 1em;
}

/* textos > artículos */

.articulos,
#final {
  padding-block-start: 2em;
}

.textos article {
  border: solid 1px hsl(198 100% 43%);
  border-radius: 4px;
  padding: 1em;
  padding-block-start: 0;
  margin-block-end: 1em;
}

.textos article h4 {
  background-color: hsla(0 0% 100% / 0.85);
  padding: 1em 0 .5em 0;
  margin-block-end: 1em;
  
  /* para salir del "flujo de información" del fondo 
  y colocase en una capa superior "pegajosa" */
  position: sticky;
  /* emplazamiento a 6 renglones del borde superior */
  top: 6em;
}

/* footer */

footer >p:last-child {
  margin-block-end: 0;
}


/*
----------------
"boton" explorar
----------------
*/

.explorar {
  background-color: hsl(38 100% 47% / 0.85);
  border: 4px solid hsl(198 100% 43%);
  border-radius: 50%;
  box-shadow: 0 .15em .1em hsla(0 0% 0% / 0.215);
  color: white;
  cursor: pointer;
  font-size: 1.75em;
  font-weight: bold;
  width: 4rem;
  aspect-ratio: 1;

  display: grid;
  place-items: center;
  
  /* para salir del "flujo de información" del fondo 
  y colocase en una capa superior fija */
  position: fixed;
  /* emplazamiento a 1 r-renglón del borde inferior */
  bottom: 1rem;
  /* emplazamiento a 1 r-renglón del borde derecho */
  right: 1rem;
  /* capa superior, encima de casi todo */
  z-index: 9000;
}



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



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

  /* el menú deja de ser fijo */
  header nav {
    /* para que deje de estar en capa superior */
    position: unset;
  }
    
  /* botón "hamburguesa" oculto */
  .menu-btn {
    display: none;
  }

  /* menu visible */
  header nav ul,
  header .menuVisible ul {
    /* caja flexible para menu horizontal*/
    display: flex;
    /* separación entre sus elementos */
    gap: .25em;

    /* para que NO esté en capa superior */
    position: unset;

    /* elimina desplazamiento */
    translate: unset;

    /* elimina fondo */
    background-color: unset;
  }
    
  /* items de lista  que contienen los vínculos del menu */
  header nav ul li {
    min-width: 4em; /* que no midan menos de: */
  }

  /* vínculos del menu principal */
  header nav ul li a {
    background-color: hsl(198 100% 44%);
    border-radius: .25em ;
    color: white;
    font-size: 1rem;
    width: auto;
    padding: .25em 1em;
    text-align: center;
    display: block; /* para que sean "cajas" */
    margin-block-end: unset;
    border-block-end: unset;
  }
  
  /* cuando el cursor se posiciona sobre los vínculos */
  header nav ul li a:hover {
    background-color: white;
    color: hsl(198 100% 44%);
    border-block-end: unset;
  }
  

  /* para que "artículo 1" y "artículo 2"
  queden uno al lado del otro */
  .textos > .articulos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
  }

}

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

  .galeria {
    padding: 1em;
  }

  .textos h3 {
    padding: 1em;
  }

}

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

  .galeria {
    background-color: hsl(198 50% 44% / 0.1);
    margin-block-start: 0;
    margin-block-end: 3em;
    padding-inline: 4em;
    width: 100%;
    min-height: 60vh;
    display: grid;
    align-items: center;
    align-content: center;
  }


}