@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&family=Roboto:wght@400;500;700&display=swap');


*,
*::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;
}

header, footer{
  background-color: #293543 ;
}


body {
  font-family: "Inter", sans-serif;

    /* medira, como minimo, la altura del navegador */  
    min-height: 100dvh;
  
    /* contenedor tipo cuadri­cula */
    display: grid;
  
    /* plantilla de filas: dos filas definidas
    (si hubiera otras, mediran la altura de su contenido)...
    La primera fila definida, conteniendo "header",
    medirá la altura de su contenido...
    La segunda fila definida, conteniendo "main",
    se estirara para "llenar" el espacio restante */
    grid-template-rows: auto 1fr;
  
}

h1, h2, h3{
  font-family: "roboto", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}

h1 {
  line-height: 1.5em;
  letter-spacing: 0.09em;
}

h2 {
  line-height: 1.5em;
  letter-spacing: 0.04em;
}

h3 {
  line-height: 1.5em;
}

h4 {
font-family: "roboto", sans-serif;
font-weight: 700;
}



  /* TODOS los vínculos */
a {
    color: #E45735;
    font-family: "roboto", sans-serif;
  }

a:hover {
  color: #FFFFFE;
}


/* TODAS las listas */
ul,
ol {
  list-style: none;
}

/* TODAS las imágenes */
img {
    max-width: 100%;
    height: auto;
  }

 /*centra contenidos y limita su ancho*/

.contenedora {
  margin-inline: 2%;
  padding: 1rem;
}

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

header {
    position: sticky;
    top: 0;
      /* capa superior arriba de casi todo */
    z-index: 8000;
   }

   header div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
   }

/* etiqueta img, pero SÓLO el logo */
#logo img {
    width: 6em;
    margin: -1em;
    padding-bottom: .25em;
  }

  #perfilboton img {
    width: 3rem;
    margin: 4px 0 4px 0;
  }

/* ----------
   footer
---------- */

    footer {
          padding: 2rem;
      }
      
    footer section {
        display: grid;
        grid-template-columns: 1fr auto;
      }
      
    #redes {
        display: flex;
        flex-wrap: wrap;
        gap: .9em;
      }
      
    #logo-footer {
        margin-bottom: 1em;
      }
      
    footer a {
        color: aliceblue;
        text-decoration: none;
      }

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

/* botón "hamburguesa" */
.menu-btn {
    background: #E45735;
    border-radius: 50%;
    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: 1em;
    /* emplazamiento 1 renglón del borde derecho */
    right: 6%;
    /* en capa superior, casi arriba de todo */
    z-index: 9000;
  }

  .menu-btn:hover {
    background-color: #d19282;
  }

  /* 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.menu {
    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.menu {
    background-color: #293543ec;
    transition: all .4s ease; /* anima cuando "nav" tiene la clase "menuVisible" */
    
    

    /* se muestra */
    translate: 0;
  }

  /* cada vínculo del menu */
nav ul.menu 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;
  }

    /* ----
   boton del perfil
   ---- */

.profile-btn {
    background: #E45735;
    border-radius: 50%;
    padding: .75rem;
    width: 3rem;
    height: 3rem; 
    aspect-ratio: 1;
    cursor: pointer;
    top: 1em;
  }

.profile-btn:hover {
    background-color: #d19282;
  }

  /* Estilos para la imagen dentro del botón */
.profile-btn img {
    width: 3rem;
}

  /* ----
   flechitas
   ---- */

.arrow-btn {
    margin-top: 10em;
    position: absolute;
    z-index: 10;
    padding: .75rem;
    width: 3rem;
    aspect-ratio: 1;
    font-size: 16px;
    background: #E45735;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s ease;
    text-align: center;
  }
  
.arrow-btn:hover {
    background-color: #e4583569;
  }
  
.arrow-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: solid white;
    border-width: 0 3px 3px 0;
    padding: 5px;
  }
  
  /* Flecha hacia la derecha */
.arrow-btn.right::after {
    right: 20px;
    transform: translateY(-50%) rotate(-45deg); /* Flecha a la derecha */
  }
  
.arrow-btn.right:hover::after {
    right: 15px;
  }
  
  /* Flecha hacia la izquierda */
.arrow-btn.left::after {
    left: 20px;
    transform: translateY(-50%) rotate(135deg); /* Flecha a la izquierda */
  }
  
.arrow-btn.left:hover::after {
    left: 15px;
  }
  

/* Flecha izquierda */
.arrow-btn.left {
    left: 2rem; 
}

/* Flecha derecha */
.arrow-btn.right {
    right: 2rem;
}



/* ----  flecha volver ---- */

/* Contenedor del botón */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Estilo del botón */
.back-button {
  background: none;
  cursor: pointer;
  width: 45px;
  height: 45px;
  position: relative;
  background-color: #E45735;
  border-radius: 50%;
}

.back-button .arrow {
  display: block;
  width: 15px;
  height: 15px;
  border-left: 3px solid #FFFFFE;
  border-top: 3px solid #FFFFFE;
  transform: rotate(-45deg);
  position: absolute;
  top: 50%;
  left: 55%;
  transform-origin: center;
  transform: translate(-50%, -50%) rotate(-45deg);
}



/* Efecto hover */
.back-button:hover {
  background-color: #d19282;
}



    /* ----
 buscador
   ---- */

  .form-busqueda {
    display: flex;
    align-items: center;
    background-color: #2935433b;
    padding: 0.2rem;
    border-radius: 3rem;
    max-width: 400px; /* Ancho máximo de la barra de búsqueda */
}

.form-busqueda input[type="text"] {
    flex: 1; /* Expande el campo de entrada para ocupar el espacio disponible */
    padding: 0.5rem;
    border: none;
    outline: none;
    font-size: 1rem;
    background: none;
}

.form-busqueda button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.form-busqueda button img {
    width: 1.5rem; /* Tamaño del icono de búsqueda */
    height: auto;
}

.label-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
  

    /* ----
 checkbox
   ---- */

/* Contenedor del checkbox */
.check-container {
  display: inline-block;
  position: relative;
  cursor: pointer;
  width: 40px; /* Tamaño del contenedor */
  height: 40px;
}

/* Esconde el checkbox real */
.check-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Estilo base del checkmark */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border-radius: 5px; /* Bordes redondeados */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px; /* Tamaño del símbolo */
  font-weight: bold;
  color: #E45735; /* Color del "+" */
  transition: all 0.3s ease; /* Suavizado */
}

.checkmark::before {
  content: "+"; /* Símbolo "+" inicial */
}

/* Cambia al fondo verde y muestra el check al marcar */
input:checked ~ .checkmark {
  background-color: #E45735; /* Fondo verde */
  color: white; /* Cambia el color del check */
}

input:checked ~ .checkmark::before {
  content: ""; /* Oculta el "+" */
}

input:checked ~ .checkmark::after {
  content: ""; /* Aparece el check */
  position: absolute;
  width: 10px;
  height: 20px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}




    /* ----
        main
        ---- */

    /* ----
        HOME html
        ---- */

    /* ---- bienvenida---- */


#imgbienvenida {
  height: 20rem;
  background-image:url(../imagenes/imagen_bienvenida.png);
  background-size: cover;
  background-repeat: no-repeat;
}

#logo-de-bienvenida {
  position: relative;
  top: 4em; /* Centra verticalmente */
  left: 13%; /* Centra horizontalmente */
  width: 40%;
  max-width: 16em;
}


#bienvenida {
    background-color: #35536b;
    color: aliceblue;
    display: grid;
    grid-template-columns: repeat(auto-fit , minmax(20em, 1fr));
   }

.nosalegra {
  padding-bottom: 3em;
}

#bienvenida p {
    margin-inline: 1rem;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
   }

h1 , h2{
    margin-top: 2em;
    margin-bottom: 1em;
    text-align: center;
   }

#logo-de-bienvenida {
    width: 100%vw;
}


 /* ---- eventos agendados---- */  

#eventos-agendados {
  background-color: #BFCDD5;
  display: grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  place-items: center center;
 }

#eventos-agendados article#agenda div {
  position: relative; /* Permite que los hijos, como el figcaption, se posicionen respecto a este elemento */
}

#eventos-agendados article#agenda div#calendario p {
  position: absolute;
  top: 60%; /* Centra verticalmente */
  left: 50%; /* Centra horizontalmente */
  transform: translate(-50%, -50%); /* Ajusta la posición para estar completamente centrado */
  color: #293543;
  z-index: 7000; /* Asegura que el figcaption esté por encima de la imagen */
  text-align: center;
}

#eventos-agendados img {
border-radius: 1em;
}

#agenda {
  display: flex;
  place-items: center center;
  gap: 2rem;
  margin-left: 1rem;
}

#calendario {
  background-color: #ECEFF4;
  background-image: url(../imagenes/calendar.svg);
  padding-block: 4em;
  padding-inline: 3em;
  border-radius: 2em;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

#calendario p {
  font-family: "roboto", sans-serif;
  font-weight: 500;
  font-size: large;
}

#no-te-olvides p {
margin-block: .5em;
}


.fondo1 {
    background-color: #ECEFF4;
    padding-block: 1rem;
    border-radius: 2rem;
    min-width: 20%;
}

.fondo2 {
    background-color: #8D9298;
    padding: .5rem;
    display: inline-block;
    border-radius: 1rem;
    color: aliceblue;
}

.fondo3 {
    background-color: #E45735;
    color: aliceblue;
    padding-inline: .5rem;
    padding-block: .5rem;
    border-radius: 1rem ;
}

.fondo4 {
   background-color: #2f3b46ab ;
}



/* ---- eventos destacados---- */ 

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center;
}

/* ---- desplegable abajo---- */ 

.btn-desplegable {
  background: #fff;
  border-radius: 50%;
  padding: 2px;
  font-size: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
  aspect-ratio: 1;
  color: #E45735;
}

.btn-desplegable:hover {
  background: #f0f0f0;
  color: #FFFFFE;
}

/* ---- filtros---- */ 

#filtros {
    display: inline-flex;
    align-items: center;
    gap: .5em;
}

.filtro {
  display: flex;
  gap: .4em;
  box-shadow: 3px 3px 3px #35536b42;
  font-size: smaller;
  text-transform: uppercase;
}

/* ---- x---- */ 

.close-button {
  background: none;          /* Sin fondo */
  border: none;              /* Sin borde */
  color: #FFFFFE;               /* Color del texto */
  font-size: 17px;           /* Tamaño de la "X" */
  font-weight: bold;         /* Negrita */
  cursor: pointer;           /* Mano al pasar el mouse */
  width: 20px;               /* Ancho del botón */
  height: 20px;              /* Alto del botón */
  display: flex;             /* Centrar la "X" */
  align-items: center;
  justify-content: center;
  border-radius: 50%;        /* Forma redonda */
  transition: background 0.3s;
}

.close-button:hover {
  background: #f0f0f02f;       /* Fondo al pasar el mouse */
}

#eventos-destacados article {
    position: relative;
}

#eventos-destacados p{
    margin-inline: 1rem;
    margin-block: 1rem;
}


/*----- slider ------*/

.slider {
  width: 100%;
  height: max(400px, 50vh);
  position: relative;
  overflow: hidden;
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  transition: all 0.5s;
}

.slide img {
  border-radius: .25em;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top 25%;
}



    /* ----
        PERFIL
        ---- */

    /* ---- Pepe---- */

    .edit-btn {
      background: #EAEBEB;
      border-radius: 50%;
      padding: .75rem;
      width: 3rem;
      height: 3rem; 
      aspect-ratio: 1;
      cursor: pointer;
      top: 1em;
    }
  
  .edit-btn:hover {
      background-color: #35536b48;
    }
  
    /* Estilos para la imagen dentro del botón */
  .edit-btn img {
      width: 3rem;
  }

    /* ----
        PERFIL html
        ---- */

  /* ---- Pepe---- */

#perfil {
  background-color: #FFFFFE;
  text-align: center;
}


#perfil div img {
  display: block;
  margin-inline: auto;
  margin-block-start: 2em;

}

.edit-btn {
  position: relative;
  box-shadow: 4px 5px 5px #35536b70;
  top: -6em;
  left: 5em;
}

#perfil h1 {
  margin: 0em;
}

#perfil p {
  color: #E45735;
}

#nombre-perfil {
  margin-block: auto;
}


  /* ---- mis eventos---- */
#vercalendario {
  background-color: #BFCDD5;
}

#vercalendario h2 {
  margin-top: 2em;
  margin-bottom: 1em;
  letter-spacing: 0.06em;
  padding-top: 1em;
}

#vercalendario article {
  padding-bottom: 3em;
  margin-inline: 0.5em;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: .5em;
}

/* ---- calendario---- */

.calendar-container {
  background-color: white;
  border-radius: 2em;
  padding: 1em;
  padding-top: .8em;
}



  /* ---- encabezado---- */
.calendar-header {
  background-color: #E45735;
  border-radius: 1em;
  color: white;
  text-align: center;
  font-size: 1em;
  margin-bottom: .5em;
  font-family: roboto;
  padding-block: .5em ;
  margin-top: auto;
}

  /* ---- contenedora---- */
  .calendar-body {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 6px; /* espacio entre días */
  }

/* ---- dias de la semana y numeros ---- */
.day-name, .day-number {
  background-color: white;
  text-align: center;
  padding: 6px;
  font-size: 0.8em;
  box-sizing: border-box;
  width: 30px; 
  height: 30px;
  place-self: center center;
}

  /* ---- dias de la semana---- */
.day-name {
  font-weight: bold;
  background-color: #f1f1f1;
  border-radius: 1em;
  margin-block: .5em;
}

  /* ---- numeros---- */
.day-number {
  color: #555;
}

/* ---- dia actual ---- */
.current-day {
  background-color: #E45735;
  color: white;
  border-radius: 50%;
  aspect-ratio: 1;
  width: 30px;
  height: 30px;
  place-self: center center;
}

  /* ---- fin de semana---- */
.weekend {
  color: #E45735;
  font-weight: bold;
}

  /* ---- hover---- */
.day-number:hover {
  font-weight: bold;
  background-color: #e458357e;
  color: aliceblue;
  aspect-ratio: 1;
  border-radius: 50%;
  
}

.current-day:hover {
  background-color: #E45735;
  font-weight: 400;
}

#calendariocentrado {
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: center;
}
 
  /* ---- desarrollo del calendario---- */
.evento {
  background-color: #FFFFFE;
  border-radius: 2em;
  padding: 1.5em;
  margin-bottom: .5em;
}

.evento div {
  margin-block: 1em;
}

.evento h3 {
  margin-block: .5em;
}

.evento p {
  margin-bottom: 1em;
}

.evento img {
  border-radius: 1em;
}

#foto-calendario{
  background-color: #FFFFFE;
  padding: 2em;
  border-radius: 1em;
  text-align: center;
}


    /* ----
        EVENTOS html
        ---- */


/* ---- switch---- */

.switch {
  display: flex;
  justify-content: center;
}

.switch__wrapper {
  position: relative;
  display: inline-block;
  width: 277px;
  height: 38px;
  background-color: #2935433b;
  box-sizing: border-box;
  border-radius: 28px;
  margin: 0px 0px 0px 0px;
  box-shadow: 3px 3px 3px #35536b25;
}

.switch__wrappergrabaciones {
  position: relative;
  display: inline-block;
  width: 277px;
  height: 38px;
  background-color: #2935433b;
  box-sizing: border-box;
  border-radius: 28px;
  margin: 0px 0px 0px 0px;
  box-shadow: 3px 3px 3px #35536b25;
}

.switch__wrapper input {
  display: none;
}

.switch__slider{
  position: absolute;
  content: "";
  width: 140px;
  height: 34px;
  bottom: 2px;
  left: 3px;
  background-color: #FFFFFE;
  transition: all 0.4s ease 0s;
  border-radius: 28px;
}

.switch__slidergrabaciones{
  position: absolute;
  content: "";
  width: 140px;
  height: 34px;
  bottom: 2px;
  left: 134px;
  background-color: #FFFFFE;
  transition: all 0.4s ease 0s;
  border-radius: 28px;
}

#gra {
position: relative;
z-index: 5;
font-weight: 700;
font-size: 14px;
bottom: -9px;
color: #555;
left: 80px;
cursor: pointer;
text-decoration: none;
text-transform: uppercase;
}

#eve {
  position: relative;
  z-index: 5;
  font-weight: 700;
  font-size: 14px;
  color: #555;
  bottom: -9px;
  left: 30px;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
}



    /* ---- eventos  ---- */


.eventos {
  background-color: #BFCDD5;
  padding-block: 2em;
  padding-inline: .5em;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: .5em;
}


    /* ----  evento ---- */

   .flex {
    display: flex;
  }


  
    /* ----
       MAS INFO EVENTO html
        ---- */



.masinfotitulo h1 {
  font-size: large;
  text-align: left;
  text-wrap: balance;
  color: #FFFFFE;
  background-color: #2935439f;
  padding: .5em;

}

.infoevento {
  background-image:url(../imagenes/imagen_carreras_comunicacion.png) ;
  background-repeat: no-repeat;
  background-size: cover;
}

.info p {
  margin-top: 2em;
}


/* ----  mapa ---- */

.mapouter {
  display: block;
  margin-inline-start: 2em;

}

#gmap_canvas {
  width: 250px;
  border-radius: 1em;
  box-shadow: 3px 3px 3px #35536b25;

}

/* ----  ubicacion ---- */


.ubicacion nav {
  margin-inline-start: 3em;
  margin-block-end: 3em;
  font-size: smaller;
}

.ubicacion nav ul li {
  margin-block: .5em;
  text-wrap: pretty;
  margin-inline-end: 3em;

}

.ubicacion h2 {
  padding-top: 1em;
}

.ubicacion {
  background-color: #ECEFF4;

}

/* ----  fecha y hora ---- */

.fechahora {
  display: flex;
  gap: 2em;
  margin-block: 2em;
  margin-inline-start: 2.5em;
}

.fechahora p {
  font-weight: 600;
}

/* ----  info ---- */

.info {
  margin-inline-start: 2.5em;
  margin-inline-end: 2em;
}

.info p {
  text-wrap: pretty;
  font-size: 16px;
  font-weight: 400;
  margin-block-end: 1em;
}

/* ----  cupos disponibles ---- */

.inscripcion article {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-block: 2em;
  margin-inline-start: 3em;
}

.inscripcion h2 {
  font-size: medium;
  margin-block: 0;
}

.inscripcion p {
  font-size: small;
  background-color: #8d9298bb;
  padding-inline: 1em;
  padding-block: .6em ;
  border-radius: .7em;
  font-weight: 600;
}

.inscrip-btn {
  margin-inline: 3em;
  padding-block: 1em;
  padding-inline: 5em;
  background-color: #E45735;
  border-radius: 1em;
  box-shadow: 3px 3px 3px #35536b42;
}

.inscrip-btn a {
  color: #FFFFFE;
  text-decoration: none;
  text-transform: uppercase;
  font-size: larger;
  font-weight: 500;
}

.inscripcion:hover button {
  background-color: #d19282;
}

    /* ----
       GRABACIONES html
        ---- */

.grabado h2 {
  font-size: medium;
  text-align: left;
  text-wrap: pretty;
  margin-inline-start: .5em;
  margin-block: 1em;
}

.grabado p {
  font-size: small;
  margin-inline-start: .5em;
}

.grabado a {
  margin-inline-start: 1em;
  font-size: medium;
}

    /* ----
       MAS INFO GRABACIONES html
        ---- */

.infograb {
  background-image: url(../imagenes/ConferenciaInaugural.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.datos{
  margin-inline-start: 2em;
  margin-inline-end: 2em;
}

.datos article h2 {
  margin-inline: 0em;
  font-size: medium;
  font-weight: 500;
  text-align: left;
  font-family: "Inter", sans-serif;
  text-transform: none;
}

.datos article p {
  font-size: smaller;
  text-wrap: pretty;
  color: #293543;
  margin-block-end: 1em;
}

.datos p {
  font-size: small;
  color: #E45735;
  text-wrap: pretty;
  margin-block-end: 2em;
}

.datos video {
  border-radius: 1em;
  margin-block-end: 2em;
  width: 100%;
  margin-top: 1em;
}

/* ----  participantes ---- */

.andres {
  background-color: #ECEFF4;
}

.andres h2 {
  padding-top: 2em;
  font-size: medium;
}

.andres a {
  text-decoration: none;
  font-size: smal;
  color: #293543;
  font-family: "Inter", sans-serif;
  font-weight: 600;
}

.andres:hover a {
  color: #BFCDD5;
} 

.andres p {
  font-size: small;
}

.andres article {
  display: flex;
  gap: 2em;
  margin-inline-start: 3em;
  padding-bottom: 2em;
}

.andres article img {
  width: 60px;
  object-fit: cover;
  aspect-ratio: 1;
  border-radius: 100%;
  object-position: 20%;
}


      /* ----
        INICIAR SESION html
        ---- */

/* ----  fondo ---- */

#iniciarfondo {
  background-image: url(../imagenes/iniciar_celular.png) ;
  background-size: cover;
  background-repeat: no-repeat;
}

#logo-inicio {
  margin-top: 3em;
  margin-bottom: 1em;
}

#logo-inicio img {
  height: 4em;
}

/* ----  datos ---- */

.login-form {
  margin-bottom: 3em;
}

.input-group {
  margin-bottom: 15px;
}

.input-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3em;
  font-size: 16px;
}

.input-group input:focus {
  outline: none;
  border-color: #E45735;
  box-shadow: 3px 3px 3px #35536b42;
}



/* ----  botones ---- */

#datos a {
  color: #FFFFFE;
  text-decoration: none;
  font-weight: 500;
}

#datos a:hover {
  color: #E45735;
}

#datos  {
  padding-block-start: 2em;
  padding-block-end: 3em;
  padding-inline-start: 2em;
}

#datos li{
  margin-block-end: 1em;
}

      /* ----
        INFO PARTICIPANTES html
        ---- */

.tituloponentes {
  display: flex;
  gap: 5em;
  margin-inline-start: 2em;
  margin-block-end: 2em;
}

.tituloponentes h1 {
  margin: 0;
  font-size: medium;
}

.ponentes {
  background-color: #ECEFF4;
  padding-block-start: 2em;
  padding-block-end: 2em;
}

.ponentes img {
  margin-inline-start: 2em;
  width: 16em;
  border-radius: 1em;
  margin-block-end: 1em;
}

.ponentes h2 {
  font-size: medium;
  color: #FFFFFE;
  position: absolute;
  margin-inline-start: 12em;
  margin-top: 5em;
  text-wrap: balance;
  text-align: right;
  width: 4em;
}

.ponentesinfo {
  margin-inline: 2em;
}

.ponentes h3 {
  color: #293543;
  font-size: medium;
  text-transform: none;
  margin-block-end: 2em;
  margin-inline: 2em;
  width: 16em;
}

.ponentesinfo div p{
  margin-block-end: 2em;
  
}

.contacto p {
  color: #E45735;
  font-size: smaller;
}

.ponentesdestacados {
  background-color: #BFCDD5;
}

.ponentesdestacados h2 {
  font-size: large;
  color: #293543;
  margin-block-start: 0em;
  padding-block-start: 2em;
}



      /* ----
        SOBRE NOSOTROS html
        ---- */

.infoquienes {
  background-image: url(../imagenes/imagen-quienes.png);
  background-size: cover;
  background-repeat: no-repeat;
}

#eventosquienes {
  display: flex;
  align-items: center;
  gap: 3em;
}

#logoquienes {
  width: 8em;
}

.memoria img {
  object-fit: cover;
  border-radius: 2em;
  width: 100%;
  height: 100%;
}

.memoria h3 {
  font-size: medium;
  font-style: italic;
  font-family: "Inter", sans-serif;
  text-transform: none;
  color: #293543;
  margin-bottom: 2em;
}

.memoria h2 {
  font-size: large;
  color: #293543;
  text-align: left;
}

.memoria h4 {
  font-size: small;
  margin-bottom: 2em;
  font-style: italic;
  font-family: "Inter", sans-serif;
  color: #E45735;

}

.memoria p {
  margin-bottom: .5em;
}

#valores {
  background-color: #BFCDD5;
  margin: 1em;
  border-radius: 2em;
  padding-inline: 1em;
  padding-block: 1em;
}

#valores h2 {
  margin-top: 0;
}

#valor {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.valor {
  text-align: center;
}

.valor div {
  background-color: #fffffe8a;
  padding: 2em;
  border-radius: 2em;
  box-shadow: 3px 3px 3px #35536b42;
  width: 120px;
  place-self: center;
}


.valor h3 {
  font-size: small;
  padding-bottom: 1em;
  padding-top: 1em;
  font-family: "Inter", sans-serif;
  font-weight: 500;
}

.sobreunma {
  margin-inline: 2em;
  margin-block-end: 2em;
}

.sobreunma img {
  margin-top: 1em;
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 2em;
}

.sobreunma h2 {
  text-align: left;
  color: #293543;
  font-size: larger;
  margin-top: 1em;
}

.sobreunma h3 {
  font-size: medium;
  margin-bottom: 2em;
  font-style: italic;
  font-family: "Inter", sans-serif;
  color: #E45735;
  text-transform: none;
}

.sobreunma p {
  margin-block-end: 1em;
  text-wrap: pretty;
}

    /* ----
        NOTICIAS html
        ---- */

.noticia img {
  display: block;
  place-self: center center;

}



@media (min-width: 768px) {
/* pantallas medianas */


    /* ----
        PERFIL html
        ---- */
        
/* ----  calendario ---- */
.calendar-container {
  padding-bottom: 4em;
}

/* ---- encabezado---- */
.calendar-header {
    font-size: 20px;
    margin-bottom: 1em;
    padding-block: .7em ;
  }

/* ---- contenedora---- */
.calendar-body {
      gap: 9px; /* espacio entre días */
    }

/* ---- dias de la semana y numeros ---- */
.day-name, .day-number {
  font-size: 1em;
}



      /* ----
        INICIAR SESION html
        ---- */
  
/* ----  fondo ---- */

#logo-inicio {
  margin-inline-start: 3em;
}



#iniciarfondo {
  background-image: url(../imagenes/iniciar-tablet.png) ;
}

/* ----  datos ---- */

.input-group {
  margin-inline-start: 3em;
  width: 372px;
}

/* ----  botones ---- */

#datos a {
  margin-inline-start: 3em;
  font-size: medium;
}

#datos  {
  padding-block-start: 5em;

}

#datos li{
  margin-block-end: 2em;
}




    /* ----
       EVENTOS html
        ---- */

.evento {
  margin-inline: .2em;
  margin-bottom: .5em;
}

.eventos {


  padding-inline: 2em;

}




    /* ----
       MAS INFO EVENTO html
        ---- *

/* ----  mapa ---- */

#gmap_canvas {
  width: 100%;
}



/* ----  inscripcion ---- */

.inscripcion button {
  padding-inline: 8em;
}



/* ----
  MAS INFO GRABACIONES html
---- */

.datos {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 2em;
}

.datos video {
  margin-block-start: 4.5em;
  width: 100%;
  margin-block-end: 0em;
}


/* ----
INFO PARTICIPANTES html
---- */

.tituloponentes {
gap:65%;
}

.ramirez {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 2em;
}




      /* ----
        SOBRE NOSOTROS html
        ---- */

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

.memoria {
  display: 	grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
}

.memoria h2 {
  margin-top: 0;
}

.memoria img {
  height: 450px;
}
      
.sobreunma {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3em;
}

.sobreunma img {
  height: 450px;
}

#valor {
  grid-template-columns: repeat(auto-fit, minmax(min(5rem, 100%), 1fr));

}

#valores {
  margin-inline: 2em;
}

}








@media (min-width: 1024px) {
  /* pantallas grandes */



nav ul.menu {
  inset: 0 0 0 60%;
}


      /* ----
        INICIAR SESION html
        ---- */

.inicio {
  display: grid;

}
  
/* ----  fondo ---- */


#iniciarfondo {
  background-image: url(../imagenes/iniciar-pc.png) ;
}

#iniciarfondo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  
}

#user {
  margin-block: auto;

}

#datos {
  margin-block: auto;
  margin-inline: 2em;
}



    /* ----
        PERFIL html
        ---- */

#perfilpc {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3em;
}

#perfil {
  margin-inline: 1em;
  margin-inline-start: 3em;
}

#vercalendario {
  padding-inline: 4em;
}

/* ----  calendario ---- */
.calendar-container {
  padding-bottom: 7em;
}

/* ---- encabezado---- */
.calendar-header {
    font-size: 25px;
    margin-bottom: 1em;
    padding-block: 1em ;
  }



      /* ----
        EVENTOS html
        ---- */



    /* ----
       GRABACIONES html
        ---- */

.grabado {
  display: flex;
  align-items: center;
  gap: 3em;
}

    /* ---- eventos  ---- */

#grabados  {
  padding-block: 5em;
  padding-inline: 6em;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3em;
}

    /* ----
       MAS INFO EVENTO html
        ---- */

#infoevento {
  gap: 7em;
}

.ubicacion h2 {
  margin-inline-start: -35em;
}
      
/* ----  mapa ---- */
#gmap_canvas {
  width: 500px;
  height: 300px;
}


/* ----
  MAS INFO GRABACIONES html
---- */

.datos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1em;
}

.datos video {
  margin-top: 0;
}

.parado {
  display: grid;
  grid-template-columns: 70% 1fr;
}

.andres article {
  margin-top: 2em;
}

.andres h2 {
  margin-bottom: em;
}


/* ----
  INFO PARTICIPANTES html
---- */

.tituloponentes {
  gap:75%;
          
}

.ramirez {
  display: grid;
  grid-template-columns: 50% 1fr;
  gap: 2em;
}

.ponentes img {
  margin-inline-start: 5em;
  width: 20em;
}

.ponentes h2 {
  font-size: large;
  margin-inline-start: 16em;
  margin-top: 6em;
}

.ponentes h3 {
  font-size: medium;
  margin-inline-start: 6em;
  width: 21em;
}

.ponentesinfo {
  margin-inline-end: 5em;
}

/* ----
SOBRE NOSOTROS html
 ---- */

.infoquienes {
  padding-block-start: 4em;
}

 #quienes {
  margin-inline: 2em;
  margin-top: 1em;
 }
        
  .memoria img {
    height: 370px;;
  }
  

}




@media (min-width: 1440px) {
    /* pantallas mas grandes */


      /* ----
       MAS INFO EVENTO html
        ---- */


/* ----  mapa ---- */
#gmap_canvas {
  width: 700px;
}

.ubicacion nav {
  margin-inline-start: 7em;
}



/* ----
SOBRE NOSOTROS html
---- */
        

.sobreunma {
  margin-top: 2em ;
  margin-bottom: 2em;
 }

.sobreunma img {
  height: 350px;
}



}