/* Reglas Generales */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}

body {
    font-family:"Poppins", sans-serif;
    margin: 0;
    color: #0c494f;
    background-color: white
}

nav{
    margin-inline: auto;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}


main {
  flex: 1;
}

/* Footer */
footer {
  background-color: #0c494f;
  color: white;
  padding: 1rem 2rem;
  text-align: center;
  font-size: 10px;
}

/* todos los parrafos */
p {
    line-height: 1.6;
}

p,
li,
figcaption {
    text-wrap: pretty;
}

p:first-child
li:first-child {
    margin-block-start: 0;
}

p :last-child,
li :last-child {
    margin-block-end: 0;
}

 /* todas las imagenes */

img{
  max-width: 100%;
}

figure img{
  display: block;
}





/* ----------
    Header
   ---------- */



header {
  background-color: #0c494f;
  display: flex;
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
  padding: 1em;
  position: sticky;  
  z-index: 80;
}

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

.contenedora figure {
  width: 50%;
}


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

.menu-container {
  display: flex;
  gap: .5em;
  align-items: center;
}

.icono-perfil img {
  display: block;
  width: 3rem ;
}




/* 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: .60rem;
  width: 3rem;
  aspect-ratio: 1;
  cursor: pointer;
  transition: all 0.3s ease-out; /* anima el "hover" */

  /* fijo, no "scrolea", no genera scroll */
  position: relative;
  /* emplazamiento 1 renglón del borde superior */
  
  /* emplazamiento 1 renglón del borde derecho */
  
  /* en capa superior, casi arriba de todo */
  z-index: 90;
}

/* 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, transformación para formar la "X" */
/* 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;
  /* 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: #0c494f;
  transition: all .3s ease; /* anima cuando "nav" tiene la clase "menuVisible" */
  
  /* se muestra "deshaciendo" la transformación */
  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 70% del ancho de la ventana del navegador y 320px */
  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;
}




/* Contenido */

.contenido {
  margin-inline: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  padding: 1rem;
}


/* Video */

.Video {
    display: flex;
    width: 90%;
    margin-inline: auto;
    margin-bottom: 1rem;
    border-radius: 16px;
    border: 3px solid #bdef34d5;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
    margin-bottom: 4rem;
}


/* Punto reciclaje */


.punto-reciclaje-container {
  display: flex;
  position: relative;
  margin-inline: auto;
  margin-bottom: 3em;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
  background: #f5f5f5;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}


.punto-reciclaje-container h2 {
  position: absolute;
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
  text-align: center;
  color: #fff;
  font-size: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.punto-reciclaje-container a {
  position: absolute;
  left: .8em;
  top: .8em;
  width: 7em;
  text-align: center;
  background-color: #bdef34d5;
  border-radius: 1em;
  color: #0c494f;
}




/* Cómo reciclo */


.como-reciclo {
  position: relative;
  margin-inline: auto;
  padding-bottom: 3rem;
}

.texto-index {
  font-size: 20px;
  font-weight: bold;
}

.como-reciclo-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin-top: .5rem;
}

.como-reciclo-container figure {
  position: relative;
  overflow: hidden;
  margin: 0%;
  width: 215px;
  height: 230px;
  scroll-snap-align: start;
  
}

.como-reciclo-container img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 20px 20px 20px 20px;
  padding: .2rem;
}

.como-reciclo-container h3 {
  color: #0c494f;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.como-reciclo-container p {
  font-size: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
}


/* Noticias */

.noticias-container {
  position: relative; 
  border-radius: 16px;
  overflow: hidden;
  max-width: 480px;
  margin-inline: auto;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

.noticias-container a {
  position: absolute;
  bottom: 15px; 
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  background-color: #bdef34d5;
  color: #ffffff;
  border-radius: 1em;
  padding: 0.2em 1em;
  text-align: center;
  text-decoration: none;
  z-index: 2; 
}


.texto-abajo {
  padding-top: 5rem;
  padding-bottom: 5rem;
  font-size: medium;
  text-align: center;
}


@media (min-width: 40em) {
  .punto-reciclaje-container {
    width: 65%;
  }
  .punto-reciclaje-container h2 {
    font-size: 28px;
  }
  .como-reciclo {
    display: grid;
   justify-content: center;
  }
  .noticias {
    display: grid;
    justify-content: center;
  }
}

@media screen and (min-width: 1025px) {
  .punto-reciclaje-container {
    width: 50%;
  }
  .punto-reciclaje-container a {
    font-size: 20px;
  }

  .punto-reciclaje-container h2 {
    font-size: 40px;
  }
  .como-reciclo {
    display: grid;
    justify-content: center;
  }
  .noticias {
    display: grid;
    justify-content: center;
  }
  .noticias-container {
    max-width: none;
    width: 50%;
    margin-inline: auto;
  }
  .noticias-container a {
    font-size: 30px;
  }
  .noticias p {
    text-align: center;
    padding-bottom: 1rem;
    font-size: 30px;
  }
  .texto-abajo {
    font-size: 20px;
  }
}
















/* Reciclamos.html */

.main-reciclamos {
  padding: 2rem;
}

.cabecera-metodos h1{
  margin-top: 0;
  margin-bottom: 1rem;
}

.cabecera-metodos a {
  text-align: center;
  background-color: #bdef34d5;
  width: 8em;
  border-radius: 1em;
  color: #0c494f;
}


#materiales-id {
  background-color: #0c494f;
  color: white;
}

.cabecera-metodos article {
  display: flex;
  justify-content: left;
  gap: 1rem;
}

.cabecera-metodos p {
  margin-top: 1rem;
  margin-bottom: 2rem;
}


.cabecera-metodos h1{
  margin-top: 0;
  margin-bottom: 1rem;
}

.cabecera a {
  text-align: center;
  background-color: #bdef34d5;
  width: 8em;
  border-radius: 1em;
  color: #0c494f;
}

#metodos {
  background-color: #0c494f;
  color: white;
}

#materiales-id {
  background-color: #0c494f;
  color: white;
}

.cabecera article {
  display: flex;
  justify-content: left;
  gap: 1rem;
}

.cabecera p {
  margin-top: 1rem;
  margin-bottom: 2rem;
}


.container {
  display: flex;
  position: relative;
  margin-inline: auto;
  margin-bottom: 3em;
  flex-wrap: wrap;
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
  background: #f5f5f5;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2) ;
}


.container h2 {
  position: absolute;
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
  text-align: center;
  color: #fff;
  font-size: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.container a {
  position: absolute;
  left: .8em;
  top: .8em;
  width: 15em;
  text-align: center;
  background-color: #bdef34d5;
  border-radius: 1em;
  color: #0c494f;
}

@media screen and (min-width: 1025px) {
  .container-general{
    display: flex;
    gap: 20px;
  }
  .container {
    aspect-ratio: 1.5;
  }
  .container a {
    font-size: 20px;
  }
  .cabecera-metodos {
    font-size: 18px;
  }
}


/* Separacion_residuos.html */

.cabecera_residuos {
  position: relative;
}

.cabecera_residuos img {
  position: relative;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2) ;
}

.cabecera_residuos h1 {
    position: absolute;
    top: 3em;
    left: 3.5rem;
    width: 11em;
    font-size: 25px;
    text-align: center;
    background-color: #46b26c;
    border-radius: 1em;
    color: #ffffff;
}

.texto_residuos {
  padding: 2rem;
}

.texto_residuos p {
  padding-top: .5rem;
  padding-bottom: 1.5rem;
  color: #1b1b1b;
}

@media screen and (min-width: 1025px) {
  .cabecera_residuos h1{
    width: 30%;
    top: 3rem;
  }
}


/* Mapa de reciclaje */

.texto-cabecera {
  padding-top: 2rem;
}

.texto-cabecera h1 {
  padding: .5rem 2rem;
  font-size: 28px;
}

.mapa {
  padding: .5rem 2rem;
  padding-bottom: 3rem;
}

/* Buscador */

.filtro {
  margin-bottom: 2rem;
}

.filtro input {
    border: .15rem solid #90b725;
    border-radius: 1rem;
    padding: .5rem 1rem;
    font-size: 1rem;
    color: #0c494f;
    background-color: #f7f6f6;
    transition: border-color 0.3s ease;
}

.filtro input:focus {
    outline: none;
    border-color: #0c494f;
    background-color: #c2d886;
}

.mapa-contenedora {
  position: relative;
  display: block;
  width: fit-content;  /* o un % si querés */
  margin: 0 auto;      /* centra el contenedor */
  text-align: center;  /* opcional, centra texto */
}

#mapa-punto {
  position: absolute;
  width: 3%;       
  top: 270px;          
  left: 250px;
  transform: translate(-50%, -50%);
  z-index: 5;
  cursor: pointer;
}

#mapa-punto1 {
  position: absolute;
  width: 3%;
  top: 420px;
  left: 120px;
  transform: translate(-50%, -50%);
  z-index: 5;
  cursor: pointer;
}

#mapa-img {
  display: block;
  border-radius: 1.5rem;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2) ;
}



#location {
  position: absolute;
  width: 10%;
  top: 450px;
  right: 100px;
}

#location-1 {
  position: absolute;
  width: 10%;
  top: 500px;
  left: 150px;
}

#location-2 {
  position: absolute;
  width: 10%;
  top: 550px;
  left: 50px;
}



.ubicaciones {
  background-color: #0c494f;
  color: white;
  padding: 1.5rem 2rem;
  border-radius: 1rem;
}

.ubicaciones h2 {
  font-size: 23px;
}

.contenedora-ubicaciones {
  background-color: #b4d361;
  padding: 1rem;
  border-radius: 1.5rem;
  margin-top: 1rem;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2) ;

}

@media screen and (min-width: 40em) {

.mapa-contenedora {
  position: relative;
  display: block;       
  width: 90%;           
  max-width: 1000px;
  margin: 0 auto;       
  text-align: center;   
}

#mapa-img {
  display: block;
  width: 100%;          
  border-radius: 1.5rem;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

.ubicaciones {
  background-color: #0c494f;
  color: white;
  padding: 1.5rem 2rem;
  border-radius: 1rem;

  margin: 2rem auto;    
  width: 80%;
  max-width: 500px;
  text-align: left;      
}

  #buscarfiltro {
    width: 35%;    
  }

  #mapa-punto {
    position: absolute;
    width: 3%;     
    top: 270px;
    left: 480px;
    transform: translate(-50%, -50%);
    z-index: 5;
  }

  #mapa-punto1 {
    position: absolute;
    width: 3%;
    top: 400px;
    left: 300px;
    transform: translate(-50%, -50%);
    z-index: 5;
  }

}

@media screen and (min-width: 1025px) {
.mapa-contenedora {
  position: relative;
  display: block;       
  width: 90%;           
  max-width: 1000px;
  margin: 0 auto;       
  text-align: center;   
}

#mapa-img {
  display: block;
  width: 100%;        
  border-radius: 1.5rem;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

.ubicaciones {
  background-color: #0c494f;
  color: white;
  padding: 1.5rem 2rem;
  border-radius: 1rem;

  margin: 2rem auto;    
  width: 80%;
  max-width: 500px;
  text-align: left;      
}

  #buscarfiltro {
    width: 35%;    
  }

  #mapa-punto {
    position: absolute;
    width: 3%;        
    top: 580px;
    left: 550px;
    transform: translate(-50%, -50%);
    z-index: 5;
  }

  #mapa-punto1 {
    position: absolute;
    width: 3%;
    top: 850px;
    left: 200px;
    transform: translate(-50%, -50%);
    z-index: 5;
  }

}


/* Materiales.html */

.container-materiales-general {
  display: grid;
  gap: 2rem;
}

.container-materiales {
  background-color: #bdef34d5;
  border-radius: 1.5rem;
  overflow: hidden;
  display: grid;
  grid-template-columns: 40% 60%;
  grid-template-rows: auto 1fr;
}


.container-materiales-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 1rem;
  border-radius: 2rem;
}

.container-materiales-texto {
    padding: 1rem;
    color: #0c494f;
    flex: 0 0 100%;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: var(--gap);
}

.container-materiales-texto p {
  color: #1b1b1b;
  font-size: 14px;
  padding-bottom: .5rem;
}

.container-materiales-texto a {
    background-color: rgb(243, 242, 242);
    color: #0c494f;
    border-radius: 1em;
    font-weight: 700;
    margin-inline-start: auto;
    padding: 0 .75em;
    text-decoration: none;
}


@media screen and (min-width: 1025px) {
  .container-materiales-general{
    display: flex;
    justify-content: space-between;
    padding: 2rem;
    align-items: flex-start;
  }
  .container-materiales {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
  }
  .container-materiales-texto {
    display: block;
    padding-top: 0;
  }
  .container-materiales-texto h3 {
    font-size: 25px;
  }
  .container-materiales-texto p {
    font-size: 18px;
  }
  .cabecera {
    font-size: 18px;
  }
  .cabecera h1{
    padding-bottom: 1rem;
  }
}


/* plastico */

.cabecera_plastico {
  position: relative;
}

.cabecera_plastico img {
  position: relative;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2) ;
}

.cabecera_plastico h1 {
    position: absolute;
    top: 4em;
    left: 3.5rem;
    width: 11em;
    font-size: 25px;
    text-align: center;
    background-color: #b0df30d5;
    border-radius: 1em;
    color: #ffffff;
}


@media screen and (min-width: 1025px) {
  .contenedora-plastico {
    display: flex;
  }
  .cabecera_plastico h1 {
    width: 30%;
    top: 3rem;
  }
}

/* Noticias.html */

.cards {
  display: grid;
  gap: 2rem;
  padding: 2rem;
  grid-template-rows: repeat(4, auto);
}

.card {
  background-color: #0c494f;
  color: white;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2) ;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
}

.card > *:not(:first-child):not(:last-child) {
  margin-inline: 1rem;
}

.card__img {
  aspect-ratio: 2;
  position: relative;

  figcaption {
    background-color: #bdef34d5 ;
    border-radius: 0 100vmax 100vmax 0;
    color: white;
    padding: 0 1em 0 2em;
    font-weight: 700;
    text-align: end;
    
    position: absolute;
    z-index: 1;
    inset: auto auto 1em 0;

    [class^="detalle"] & {
      inset: 1rem auto auto 0;
      font-size: larger;
    }
  }
}

.card__img img {
  width: 100%;
  aspect-ratio: 2;
  object-fit: cover;
  object-position: center;
}

.card h2 {
  position: relative;
  padding-block-end: 1em;
  &::after {
    content: "";
    position: absolute;
    inset: auto auto 0 0;
    width: 5rem;
    height: .25rem;
    background-color: #bdef34d5 ;
  }
}

.card a {
  background-color: #bdef34d5;
  border-radius: 100vmax;
  color: white;
  font-size: larger;
  font-weight: 700;
  padding: 0 1em;
  text-decoration: none;
  margin: auto 1rem 1rem auto;
}

.card a:hover,
.card a:focus-visible {
  background-color: white;
  box-shadow: var(--sombras);
  outline-color: transparent;
  color: #bdef34d5;
}


@media screen and (min-width: 1025px) {
  .cards {
    display: flex;
    justify-content: center;
    gap: 2rem;           /* separación entre tarjetas */
    align-items: stretch; /* fuerza que todas las tarjetas tengan la misma altura */
  }

  .card {
    display: flex;
    flex-direction: column; /* contenido apilado verticalmente */
  }

  .card__img img {
    width: 100%;
    height: auto;
    aspect-ratio: 2;
    object-fit: cover;
    padding-bottom: 1rem;
  }

  .card a {
    margin-top: auto; /* asegura que el botón quede al final de cada tarjeta */
  }
  
  .cards p {
    padding-bottom: 1rem;
  }

  
}


/* Perfil.html */

.main-perfil {
  padding: 2rem;
}

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

.perfil img {
  margin-block: .5em;
  border-radius: 8em;
  max-width: 60%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 5px solid #bdef34d5;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

.datos {
  text-align: center;
}

.datos h1{
  color: #1b1b1b;
  font-size: 35px;
  padding-top: 1rem;
}

.datos h2{
  background-color: #0c494f;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 1em;
  font-weight:bolder;
  cursor: pointer;   
  border-radius: 1em;
  width: 100%;
  margin-top: 2em;
  padding: .5em;
  justify-content: center;
}

.datos h2:hover{
    background-color: #bdef34d5; 
}


.datos p {
    color: #414141;
    margin-right: 0em;
    font-size: 20px;
    line-height: 26px;
    font-weight: 500;
}

.datos a {
  font-size: large;
  color: #0c494f;
}

.mis-favoritos {
  padding-top: 2rem;
}

.ubicaciones-favoritos {
  background-color: #f7f6f6;
  color: white;
  padding: 2rem;
  border-radius: 1rem;
}

.ubicaciones-favoritos h2 {
  color: #0c494f;
}



/* Calendario.html */

@use postcss-preset-env;

.calendario {
  display: flex;
  justify-content: center;
  padding-top: 1rem;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

td {
	padding: 0;
}

.calendario-container {
	position: relative;
  padding: 2rem;
	width: 450px;
}

.texto-calendario h2{
  font-size: 40px;
  padding-bottom: .5rem;
  margin-left: 2rem;
  padding-top: 4rem;
}

.texto-calendario p{
  font-size: 20px;
  padding-bottom: 2rem;
  margin-left: 2rem;
  color: #2b2b2b;
}

.calendario-container article {
	border-radius: 1em 1em 0 0;
	background: #0c494f;
	color: #fff;
	padding: 2.5em 2em;
}

.day {
	font-size: 8em;
	font-weight: 900;
	line-height: 1em;
}

.month {
	font-size: 3em;
	line-height: 1em;
	text-transform: lowercase;
}

.tabla {
	background: #fff;
	border-radius: 0 0 1em 1em;
	-webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, .2), 0 3px 1px #fff;
	box-shadow: 0 2px 1px rgba(0, 0, 0, .2), 0 3px 1px #fff;
	color: #2b2b2b;
	padding: .5em;
  display: block;
}

.tabla thead {
	color:#0c494f;
	font-weight: 700;
	text-transform: uppercase;
}

.tabla td {
	padding: .5em 1em;
	text-align: center;
}


.tabla tbody td:hover {
	background: #cacaca;
	color: #fff;
}

.current-day {
	color:#0c494f;
  background-color: #bdef34d5;
  border-radius: 50%;
  cursor: pointer;
}

.tomorrow a{
  color:#1b1b1b;
}

.yesterday {
  background-color: #e62d2dee;
  border-radius: 50%;
}

.yesterday a {
  color: white;
}

.prev-month,
.next-month {
	color: #cacaca;
}

.ring-left,
.ring-right {
	position: absolute;
	top: 230px;
}

.ring-left { top: 16rem; }
.ring-right { 
  right: 2em; 
  top: 16rem;
}

.ring-left:before,
.ring-left:after,
.ring-right:before,
.ring-right:after {
	background: #bdef34d5;
	border-radius: 4px;
	-webkit-box-shadow: 0 3px 1px rgba(0, 0, 0, .3), 0 -1px 1px rgba(0, 0, 0, .2);
	box-shadow: 0 3px 1px rgba(0, 0, 0, .3), 0 -1px 1px rgba(0, 0, 0, .2);
	content: "";
	display: inline-block;
	margin: 8px;
	height: 32px;
	width: 8px;
}


.bloque-hoy {
  background: #f7f6f6;
  border-radius: 1rem;
  padding: 2rem;
  border: 2px solid #a5ca3dd5;
  box-shadow: .2rem .2rem  #a5ca3dd5;
}

.hoy-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accion-dia {
  border: 4px solid #bdef34d5;
  border-radius: 1rem;
  padding: 1rem;
  margin: 1rem 0;
  font-weight: 600;
  text-align: center;
}

.accion-dia-ayer {
  border: 4px solid #e62d2dee;
  border-radius: 1rem;
  padding: 1rem;
  margin: 1rem 0;
  font-weight: 600;
  text-align: center;
}

@media (min-width: 40em) {
  .perfil img {
    border-radius: 20em;
    max-width: 20%;
  }
  .datos h2{
    width: 15%;
    margin-inline: auto;
  }
  .mis-favoritos {
    padding-top: 4rem;
    width: 55%;
    margin-inline: auto;
  }
  .bloque-hoy {
    padding-top: 2rem;
    width: 55%;
    margin-inline: auto;
    margin-right: 21rem;
  }
  .calendario-section {
    display: flex;
    align-items: center;
  }
  .calendario-container {
    margin-left: 8rem;
  }
  .calendario-container {
	position: relative;
  padding: 2rem;
	width: 450px;
  }

  .texto-calendario h2{
  font-size: 40px;
  padding-bottom: .5rem;
  margin-left: 8rem;
  padding-top: 4rem;
  }
  .texto-calendario p{
  font-size: 20px;
  padding-bottom: 2rem;
  margin-left: 8rem;
  color: #2b2b2b;
  }

}  

@media screen and (min-width: 1025px) {
  .perfil img {
    border-radius: 20em;
    max-width: 20%;
  }
  .datos h2{
    width: 15%;
    margin-inline: auto;
  }
  .mis-favoritos {
    padding-top: 4rem;
    width: 55%;
    margin-inline: auto;
  }
  .bloque-hoy {
    padding-top: 2rem;
    width: 55%;
    margin-inline: auto;
    margin-right: 21rem;
  }
  .calendario-section {
    display: flex;
    align-items: center;
  }
  .calendario-container {
    margin-left: 19rem;
  }
  .calendario-container {
	position: relative;
  padding: 2rem;
	width: 450px;
}
}




/* Inicio de sesión */

.body-login {
  background-color: #f7f6f6;
}

.login {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 5rem;
}

.login-container {
  border-radius: 16px;
  max-width: 450px;
  width: 100%;
}

.login-header {
  text-align: center;
  margin-bottom: 2rem;
}


.login-titulo {
  color: #0c494f;
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.login-subtitulo {
  color: #0c494f;
  font-size: 13px;
  line-height: 1.4;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.login-form .campo-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.login-form .campo-form input {
  border: .15rem solid #90b725;
  border-radius: 1rem;
  padding: .7rem 1rem;
  font-size: 1rem;
  color: #0c494f;
  background-color: #f7f6f6;
  transition: border-color 0.3s ease;
}

.login-form .campo-form input:focus {
  outline: none;
  border-color: #0c494f;
  background-color: #c2d886;
}

.login-form .campo-form input::placeholder {
  color: #0c494f;
}

.login-opciones {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  color: #90b725;
  font-weight: bold;
}


.olvide-contraseña {
  color: #90b725;
  text-decoration: none;
  font-weight: bold;
}

.olvide-contraseña:hover {
  text-decoration: underline;
}

.login-btn {
  background-color: #0c494f;
  color: #f7f7f7;
  border: none;
  border-radius: 1rem;
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 0.5rem;
}

.login-btn a {
  color: #f7f7f7;
}

.login-btn:hover {
  background-color: #bdef34d5;
}

.login-registro {
  text-align: center;
  color: #0c494f;
}

.registro-link {
  color: #90b725;
  text-decoration: none;
  font-weight: bold;
}

.registro-link:hover {
  text-decoration: underline;
}




@media screen and (min-width: 1025px) {
  header {
    display: block;
  }
  .contenedora figure {
    width: 25%;
  }
}

@media screen and (min-width: 1025px) {
  footer p {
    font-size: 15px;
  }
}