@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;
list-style: none;
text-decoration:none;
}
/* ----------------
reglas generales
---------------- */
/* ---------------------------------------------- REGLAS GENERALES -------------------------------------------------------------- */
html {
/* scroll suave */
scroll-behavior: smooth;
/* para que el encabezado quede visible siempre */
scroll-padding-block-start: 5em;
}
/* 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;
}
/* TODOS los vínculos */
a {
/* elimina los subrayados */
text-decoration: none;
color:hsl(210 92% 30% 95%);
}
/* 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
*/
/* lo que tienen en común el encabezado y el pie */
body {
background-color: hsla(212, 43%, 86%, 0.89);
}
img {
max-width: 100%;
}
.contenedora {
max-width: 75rem;
margin: 0 auto;
padding: 2rem;
}
/* -------------------
componente superior
y sus contenidos
------------------- */
header {
width: 100%;
height: 100px;
background-color:hsl(210 92% 10% / 95%);
}
/*-----MENU------ */
/* 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: 10em;
margin: -1em .75em -1em 0;
}
.menu {
position: absolute;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-between;
}
/* ---------------------------------------------- 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);
}
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;
}
.contenedora iframe {
align-items: center;
}
h1{
text-align: center;
align-items: center;
margin: 20px;
margin-top: 10px;
color: hsl(210 92% 30% / 95%);
}
p{
align-items: center;
text-align: center;
}
iframe{
align-items: center;
width: 1000px;
margin-left: 80px;
}
/* ------------------- FOOTER------------------- */
footer{
background-color: hsl(210 92% 10% / 95%);
color: white;
}
footer .contenedora p
{
margin-block: 0;
}
/* contenedor con logo a la izquierda y texto a la derecha, si cabe ...Footer */
footer .contenedora
{
text-align: center;
}
footer p
{
margin-block-end: 0;
font-size: larger;
}
/* --------------------------
media queries,
para cambiar la apariencia
en la medida en que el
navegador se ensancha
(mobile first)
-------------------------- */
/* cambios a partir de los menos 360px */
@media (min-width: 17em) {
.textoimagen
{
position: absolute;
color: white;
font-size: 10px;
font-weight: 700;
background-color:rgba(1, 10, 37, 0.212) ;
top: 1px; /* Ajusta la distancia desde la parte superior */
left: 50px; /* Ajusta la distancia desde la izquierda */
right: 20px; /* Ajusta la distancia desde la derecha */
}
}
/* cambios a partir de los 360px */
@media (min-width: 30em) {
.textoimagen
{
position: absolute;
font-weight: 700;
top: 1px; /* Ajusta la distancia desde la parte superior */
left: 10px; /* Ajusta la distancia desde la izquierda */
right: 20px; /* Ajusta la distancia desde la derecha */
color: white;
background-color: transparent;
}
}
/* 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;
}
.textoimagen
{
color: white;
}
}
/* cambios a partir de los 800px */
@media(min-width: 50em) {
.charlas {
padding: 1em;
}
.textos h3 {
padding: 1em;
}
.textoimagen
{
position: absolute;
font-size: 20px;
font-weight: 700;
top: 1px; /* Ajusta la distancia desde la parte superior */
left: 20px; /* Ajusta la distancia desde la izquierda */
right: 20px; /* Ajusta la distancia desde la derecha */
color: white;
background-color: transparent;
}
}
/* cambios a partir de los 1200px */
@media(min-width: 75em) {
.textoimagen
{
position: absolute;
font-size: 18px;
font-weight: 700;
top: 1px; /* Ajusta la distancia desde la parte superior */
left: 300px; /* Ajusta la distancia desde la izquierda */
right: 20px; /* Ajusta la distancia desde la derecha */
color: white;
background-color: transparent;
}
.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;
}
}