@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 {
  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 { /* redefine los márgenes inferiores para que midan el tamaño de la tipografía */
  margin-block-end: 1em;
}

h2{
  text-align: center;
}

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

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

/* 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(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: 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 .contenedora 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;
}



/* 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;
  }
}
/*-----------SOPA DE LETRAS------------------*/
#puzzle {
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    grid-template-rows: repeat(20, 1fr);
    gap: 2px;
    width: 400px;
    height: 400px;
    margin: auto;
    margin-bottom: 200px;

  }
  
  .cell {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: lightgray;
    cursor: pointer;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    padding:2px;
    border-radius: 4px;
  }
  
  .cell.clicked {
    background-color:hsl(210 92% 36%);
    color: aliceblue;
  }

h1 {
    text-align: center;
    font-family:Georgia, 'Times New Roman', Times, serif;
    color: hsl(210 92% 36%);
    margin-top: 1em;
}    

p {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}