@charset "utf-8";

/* tipográfí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');


/* "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 quede visible siempre */
  scroll-padding-block-start: 5em;
}

body {
  /* tipografía general del proyecto */
  font-family: 'Noto Sans Display', sans-serif;
  background-color: hsla(245, 88%, 10%, 0.082);
}
/* Selector múltiple */
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-block-end: 1em;
  margin: 35px; /* Margenes laterales de 25px */
  color: hsl(209 100% 35% / 0.5);
}

p {
color: black;
}

/* 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 {
   /* ancho máximo 1040px - centrado horizontal -espacio entre el borde del elemento y su contenido*/
  max-width: 70rem;
  margin-inline: auto; /* centra "la caja" horizontalmente */
  padding: 2rem; /* relleno igual a un renglón */

}

/* lo que tienen en común el encabezado y el pie */
header,
footer {
  background-color: hsl(209 100% 35% / 0.5);
  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: 7em;
  margin: -1em .75em -1em 0;
}

#logo h3 { /* tipografía del logo */
  font-family: 'Fira Sans Extra Condensed', sans-serif;
  font-weight: 500;
  line-height: 1em;
  margin: 0;
}

#logo h3 span {
  display: block;
  letter-spacing: .15em;
}



/* ---------------------------------------------- MENU -------------------------------------------------------------- */

/* botón "hamburguesa" */
.menu-btn {
  background: hsla(318, 75%, 36%, 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" */

  /* fijo, no "scrolea", no genera scroll */
  position: fixed;
  /* emplazamiento 1 renglón del borde superior */
  top: 0.7em;
  /* emplazamiento 1 renglón del borde derecho */
  right: 0.7em;
  /* 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;
  /* capa superior, pero no parece */
  position: relative;
  /* capa superior, casi arriba de todo */
  z-index: 9000;
}

/* 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 .4s ease; /* anima cuando "nav" tiene la clase "menuVisible" */
  
  /* se muestra */
  translate: 0;
}

/* cada vínculo del menu  desplegable*/
nav ul li a {
  border-bottom: solid 3px hsla(246, 97%, 65%, 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;
  font-family:Georgia, 'Times New Roman', Times, serif;
  padding: .5rem;
  text-decoration: none;
}

nav ul li a:hover {
  border: solid 2px hsla(0, 0, 75%, 0.5);
  background-color: hsl(210 92% 30% / 95%);
  transition: all .3s;
}

/* ------------------- FOOTER------------------- */
  
footer .contenedor p 
{
    margin-block: 0;
    
}

/* contenedor con logo a la izquierda y texto a la derecha, si cabe ...Footer */
footer .contenedor 
{
     text-align: center;
    
     
    
}

footer p 
{
    margin-block-end: 0;
    color: aliceblue;
}



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


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

}

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

/* el menú deja de ser fijo */
header nav {
 /* para que esté en capa superior pero que no parezca */
 position: relative;
}
 
/* 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 esté en capa superior pero que no parezca */
 position: relative;

 /* elimina desplazamiento */
 translate: 0;

 /* elimina fondo */
 background-color: unset;

}
 
/* items de lista  que contienen los vínculos del menu desplegable */
header nav ul li {
 min-width: 7em; /* que no midan menos de: */
}

/* vínculos del menu principal */
header nav ul li a {
 background-color: hsl(210 92% 30% / 95%);
 font-family:Georgia, 'Times New Roman', Times, serif;
 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(239, 100%, 44%);
 border-block-end: unset;
}


}


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

.charlas {
 padding: 1em;
}

.textos h3 {
 padding: 1em;
}

}

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

.charlas {
 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;
}
}