/* 
    El * nos sirve parar dar estilos por defecto a los componentes, le quitamos el margen y padding para evitar que tengan uno por defecto
    Por defecto el elemento *html* tiene padding y este afecta a la altura del body que le he puesto 100vh

    Estructura
    Vamos a usar vh y vw para los tamaños casi siempre ya que son relativos a la pantalla
        vw = viewport width (ancho de la pantalla)
        vh = viewport height (altura de la pantalla)
    
*/

@font-face {
  font-family: "Montserrat";
  src: url("../assets/Montserrat.ttf") format("truetype");
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rajdhani";
  src: url("../assets/Montserrat.ttf") format("truetype");
  font-style: normal;
  font-display: swap;
}

/* Cuando le demos click al boton que nos lleva a una id hara el scroll poco a poco */
html {
  scroll-behavior: smooth;
  scrollbar-width:auto;
  scrollbar-color: var(--naranja) rgba(255, 255, 255, 0.12);
}

html::-webkit-scrollbar {
  width: 10px;
}

html::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.12);
}

html::-webkit-scrollbar-thumb {
  background: var(--naranja);
  border-radius: 10px;
}

html::-webkit-scrollbar-thumb:hover {
  background: rgb(236, 189, 102);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* No me acuerdo muy bien que hacía esto exactamente pero hace que funcionen mejor los paddings, margins, etc */
}

body {
  font-family: "Montserrat", sans-serif;
  background: rgb(37, 46, 62);
  height: 100vh;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: space-between;
}

main {
  width: 100%;
}

/* Aquí definimos los colores que vamos a utilizar en toda la web.  */
:root {
  --naranja: #f8af27;
  --blanco: whitesmoke;
  --azul-oscuro: rgb(37, 46, 62);
}

a {
  padding: 1vh;
}

a:hover {
  cursor: pointer;
}

/* Cada vez que alguien seleccione algo de texto se va a pintar de naranja
   y el texto va a ser blanco */
*::selection {
  background: var(--naranja);
  color: #ffffff;
}

/* La clase contenido nos sirve para dar estilos a los elementos que van dentro del cuerpo de la pagina */
.contenido {
  display: flex;
  flex-flow: column wrap;
  align-items: flex-start;
  width: 90vw;
  margin: 2vw;
}

/* .contenido * {
  /* margin: 0.2rem;
} */

.contenido h2,
h3,
h4,
h5,
h6 {
  font-family: "Rajdhani", sans-serif;
  color: whitesmoke;
  margin-bottom: calc(0.15vh + 0.4rem);
  font-weight: 500;
}

.contenido h1 {
  font-family: "Rajdhani", sans-serif;
  font-size: calc(2vw + 1rem);
  font-weight: 700;
  color: var(--naranja);
}

.contenido p {
  color: var(--blanco);
}

.cabecera {
  width: 90vw;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  padding: 1vh 0;
}

/* Quito el padding ya que sino este nos permitia hacer click al enlace, sin que este el raton encima de la imagen.
De esta forma siempre que se puede clickar el logo hace la animacion de hover */
.cabeceraLogo {
  padding: 0;
}

.cabeceraLogo img {
  height: clamp(5rem, 6vw, 10rem);
}

.cabeceraLogo img:hover {
  transform: scale(1.05);
  transition: all 0.2s linear;
}
.cabeceraNav {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
}

.cabeceraNav ul {
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  gap: 0.7vw;
  align-items: center;
}

.menuItem {
  display: flex;
  flex-flow: column nowrap;
  text-decoration: none;
  font-size: clamp(0.8rem, 1vw, 1vw);
  font-weight: 400;
  color: var(--blanco);
}
.menuItem::after {
  content: "";
  display: block;
  margin-top: 0.2vh;
  height: 0.18rem; /* más visible */
  width: 0;
  background: linear-gradient(90deg, var(--naranja) 0%, rgba(255,255,255,0.9) 100%);

  background-size: 200% 100%;
  background-position: right;
  background-repeat: no-repeat;

  /* animaciones suaves */
  transition: width 0.28s cubic-bezier(.2,.9,.2,1), background-position 0.9s ease-out;
}
.menuItem:hover::after {
  width: 100%;
  background-position: left;
}
/* Especificamos que si el menuItem es ademas parte de la clase isActive le cambie el color */
.menuItem.isActive {
  color: var(--naranja);
  font-weight: 700;
}
/* Mantener visual la barra inferior cuando el item está activo */
.menuItem.isActive::after,
.menuItem:hover::after,
.menuItem:focus::after {
  width: 100%;
  background-position: left;
}

/* Aumentar contraste y grosor en modo activo/focus para accesibilidad */
.menuItem.isActive,
.menuItem:focus {
  font-weight: 700;
}
/* Mantener la barra inferior visible en el item activo */
.menuItem.isActive::after {
  width: 100%;
  background-position: left;
}
.cabeceraCnt {
  padding: 0.5vw 1.2vw;
  border-radius: 0.4vw 0.4vw 0.4vw;
  text-decoration: none;
  color: rgb(0, 0, 0);

  /* Animacion para rellenar el color del boton progresivamente */
  background: linear-gradient(
      to left,
      var(--naranja),
      50%,
      rgb(235, 233, 233) 50%
    )
    right;
  background-size: 202%;
  transition: background 0.3s ease-out;
  font-size: clamp(0.9rem, 0.9vw, 0.9vw);

  /* centrar verticalmente */
  display: flex;
  align-items: center;
}
.cabeceraCnt:hover {
  background-position: left;
}
/* Estilos del footer */
footer {
  background-color: rgb(3, 3, 20);
  width: 100%;
  padding-bottom: 5vh;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  gap: 2vh;
  padding: 2vh;
  margin-top: auto;
}
/* Damos estilo solo a los enlances que esten dentro de la lista (de esta forma el logo no tiene efecto) */
.footerNav ul a:hover {
  background-color: rgba(128, 128, 128, 0.349);
  border-radius: 0.4vw 0.4vw 0.4vw;
}

/* Estilos de la zona de redes sociales */

.footerNav .footerRRSS {
  color: var(--blanco);
  gap: 1.4vw;
}

.footerRRSS li img {
  width: 1.5vw;
}

/* Estilos de el separador de la zona inferior */

footer hr {
  height: 0.2vh;
  width: 90vw;
  border-color: rgba(109, 103, 103, 0.527);
}

/* Estilos de las listas del footer */

.footerNav {
  width: 90vw;
  align-items: center; /* Nos permite centrar los items de manera vertical en un flex*/
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

/* A todos los comomentes del footerNav les decimos que son parte del flex */
.footerNav * {
  display: flex;
  font-size: clamp(0.6rem, 0.8vw, 0.8vw);
}

.footerNav ul li a {
  text-decoration: none;
  color: var(--blanco);
  font-weight: 500;
  list-style: none;
  padding: 0.8vw;
}

.footerNav .footerCopy {
  color: var(--blanco);
  font-size: clamp(0.6rem, 0.8vw, 0.8vw);
}

#menulateral-check {
  display: none;
}

#contacto-check {
  display: none;
}

.abrir-menulateral,
.cerrar-menulateral {
  display: none;
  cursor: pointer;
  text-align: center;
}

/* Clases globales para usar en todas las paginas 
   En estas clases evitamos poner tamaños fijos
   en caso de querer cambiar tamaños, se hara en su respectivo css con otra clase o id 
*/

/* Esta es la clase boton
  Un boton basico sin animaciones avanzadas 
*/
.boton {
  border-radius: 0.4vw 0.4vw 0.4vw;
  text-decoration: none;
  color: rgb(0, 0, 0);
  padding: 1vw 2vw;

  /* Animacion para rellenar el color del boton progresivamente */
  background: orange;
  text-align: center;
  font-size: clamp(0.8rem, 1vw, 1.3vw);
}

.boton:hover {
  background: rgb(236, 189, 102);
  transition: all 0.3s ease-out;
  cursor: pointer;
}



/* ---- INICIO MODAL PERFIL ---- */
#perfil-check:checked ~ .overlayPerfil {
  opacity: 1;
  pointer-events: all;
}

#perfil-check:checked ~ .overlayPerfil .contacto {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.overlayPerfil {
  position: fixed;
  display: flex;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: rgba(14, 18, 28, 0.75);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  justify-content: center;
  align-items: center;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* ---- INICIO MODAL LOGIN ---- */

#contacto-check:checked ~ .overlayContacto {
  opacity: 1;
  pointer-events: all;
}

#contacto-check:checked ~ .overlayContacto .contacto {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.overlayContacto {
  position: fixed;
  display: flex;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;

  /* Glassmorphism background effect */
  background-color: rgba(14, 18, 28, 0.75);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  
  justify-content: center;
  align-items: center;

  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.contacto {
  position: relative;
  width: clamp(22rem, 90vw, 26rem);
  border-radius: 1.5rem;
  
  /* Dark Glass Theme */
  background: rgba(30, 36, 51, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 175, 39, 0.15) inset;
  
  color: var(--blanco);
  padding: 2.5rem 2.5rem;
  
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
  
  z-index: 11;
  
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.btnCerrarContacto {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btnCerrarContacto:hover {
  background: rgba(255, 87, 87, 0.15);
}

.iconoCerrar {
  width: 1.4rem;
  height: 1.4rem;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s ease, transform 0.2s ease;
}

.btnCerrarContacto:hover .iconoCerrar {
  color: #ff5757;
  transform: rotate(90deg);
}

.contacto-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2rem;
  text-align: center;
}

.contacto-logo {
  height: 4.5rem;
  margin-bottom: 1.2rem;
  filter: drop-shadow(0 0 12px rgba(248, 175, 39, 0.4));
}

.contacto-header h1 {
  font-family: "Rajdhani", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--naranja);
  margin: 0 0 0.2rem 0;
  letter-spacing: 0.5px;
}

.contacto-header p {
  font-family: inherit;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.formContacto {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.input-group label {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  margin-left: 0.2rem;
}

.input-group input {
  width: 100%;
  height: 3.2rem;
  background: rgba(15, 19, 28, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  padding: 0 1rem;
  color: var(--blanco);
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.input-group input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.input-group input:focus {
  outline: none;
  border-color: rgba(248, 175, 39, 0.6);
  background: rgba(15, 19, 28, 0.85);
  box-shadow: 0 0 0 4px rgba(248, 175, 39, 0.15);
}

.opciones-login {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  margin-top: -0.25rem;
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  user-select: none;
}

.remember-me input {
  display: none;
}

.checkmark {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 4px;
  background: rgba(15, 19, 28, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.remember-me input:checked ~ .checkmark {
  background: var(--naranja);
  border-color: var(--naranja);
}

.remember-me input:checked ~ .checkmark::after {
  content: "";
  width: 4px;
  height: 8px;
  border: solid #111;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-bottom: 2px;
}

.link-recuperar {
  color: var(--naranja);
  text-decoration: none;
  padding: 0;
  font-weight: 500;
  transition: color 0.2s ease;
}

.link-recuperar:hover {
  color: #ffcc77;
  text-decoration: underline;
}

.contacto-footer {
  margin-top: 1.5rem;
}

.btn-primary {
  width: 100%;
  height: 3.4rem;
  background: linear-gradient(135deg, #f8af27 0%, #f18c0e 100%);
  color: #111;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.5px;
  border: none;
  border-radius: 0.75rem;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(248, 175, 39, 0.35);
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(248, 175, 39, 0.5);
  background: linear-gradient(135deg, #fbc65f 0%, #f69b2d 100%);
}

.btn-primary:active {
  transform: translateY(0);
}

.registro-text {
  text-align: center;
  font-size: 0.85rem;
  font-family: 'Montserrat', sans-serif;
  color: rgba(255, 255, 255, 0.6) !important;
  margin-top: 1rem;
}

.registro-text a {
  color: var(--blanco);
  font-weight: 600;
  text-decoration: none;
  padding: 0;
  transition: color 0.2s ease;
}

.registro-text a:hover {
  color: var(--naranja);
}

/* Login / profile modal utility classes */
.login-error {
  background: rgba(255, 87, 87, 0.15);
  border-left: 4px solid #ff5757;
  color: #ff5757;
  padding: 0.8rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  margin-bottom: 0.7rem;
}

.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.password-input-wrapper input {
  padding-right: 2.5rem;
}

.password-toggle {
  position: absolute;
  right: 0.9rem;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  display: grid;
  place-items: center;
  height: 100%;
}

.avatar-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.avatar-toggle img {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--naranja);
  padding: 0.3rem;
}

.profile-card {
  width: clamp(20rem, 80vw, 24rem);
  padding: 2rem;
}

.profile-header {
  margin-bottom: 1.5rem;
}

.profile-avatar {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #f8af27 0%, #f18c0e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  box-shadow: 0 4px 15px rgba(248, 175, 39, 0.4);
}

.profile-title {
  font-size: 1.5rem;
  margin: 0;
}

.profile-meta {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.profile-meta span {
  background: rgba(255, 255, 255, 0.1);
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.8rem;
}

.profile-meta .role {
  background: rgba(248, 175, 39, 0.15);
  border: 1px solid rgba(248, 175, 39, 0.4);
  color: var(--naranja);
  text-transform: uppercase;
}

.btn-logout {
  width: 100%;
  background: linear-gradient(135deg, #ff5757 0%, #d82b2b 100%);
  box-shadow: 0 6px 20px rgba(255, 87, 87, 0.35);
  color: #fff;
}

.hidden {
  display: none !important;
}

.full-width {
  width: 100%;
}

.no-underline {
  text-decoration: none !important;
}

.profile-username {
  color: var(--naranja);
  font-weight: 600;
  font-size: 1.1rem;
  margin-top: 0.5rem;
}

/* ---- FIN MODAL LOGIN ---- */

@media (max-width: 880px) {
  .cabecera {
    width: 90vw;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
  }

  .cabeceraLogo {
    justify-self: right;
  }

  .cabeceraNav {
    display: flex;
    width: 80vw;
    right: -100%;

    list-style: none;
    flex-flow: column wrap;
    align-items: flex-end;
    position: fixed;
    z-index: 10;

    background-color: rgba(0, 0, 0, 0.619);
    height: 100vh;
    width: 80vw;
    padding: 2.5rem 2rem 2.5rem 2.5rem;
    gap: 1.7vw;
    top: 0;
    transition: all 0.3s ease-out;
    backdrop-filter: blur(5px);
  }
  .cabeceraNav ul {
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
  }
  .menuItem {
    padding: 0;
  }

  .menuItem,
  .cabeceraCnt {
    font-size: clamp(1.6rem, 5vw, 5vw);
    font-family: "Rajdhani", sans-serif;
  }

  .menuItem::after {
    height: 0.1rem;
  }

  .abrir-menulateral,
  .cerrar-menulateral {
    display: block;
  }

  #menulateral-check:checked ~ .cabeceraNav {
    right: 0;
  }

  #menulateral-check:checked ~ .abrir-menulateral {
    display: none;
  }
  .contacto {
    padding: 2rem 1.5rem;
  }
  .contacto-logo {
    height: 3.5rem;
  }
  .contacto-header h1 {
    font-size: 1.7rem;
  }
  .footerNav:first-of-type {
    height: 9vh;
  }
  .footerNav:last-of-type,
  footer hr {
    display: none;
  }
}

@media (max-width: 540px) {
  .footerNav:first-of-type {
    height: 8vh;
    padding: 1vh 0;
    flex-direction: column;
    gap: 0;
  }
  .footerNav:first-of-type ul {
    gap: 0.6rem;
  }
}

/*ERROR 404*/
.error-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  padding: 5vh 0;
  gap: 2vh;
}

.error-header h1 {
  /* Usamos tu variable naranja y fuente Rajdhani por cascada */
  font-size: clamp(6rem, 15vw, 12rem);
  line-height: 0.8;
  opacity: 0.8;
  margin-bottom: 1rem;
  color: var(--blanco);
}

.error-header h2 {
  font-size: clamp(1.5rem, 4vw, 3rem);
  letter-spacing: 0.2rem;
  color: var(--blanco);
}

.error-body p {
  max-width: 500px;
  margin: 0 auto 3vh auto;
  font-size: clamp(1rem, 1.2vw, 1.5vw);
  line-height: 1.6;
  color: var(--blanco);
}

.error-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2vh;
}

/* Ajuste para que el menuItem se vea bien como enlace de error */
.error-footer .menuItem {
  font-size: 1rem;
  text-transform: uppercase;
}

/* Animación sutil para el H1 */
.error-header h1 {
  animation: glitch 3s infinite;
}

@keyframes glitch {
  0%,
  10% {
    transform: translate(0);
    text-shadow: 0 0 0 transparent;
  }
  11% {
    transform: translate(-3px, 2px);
    text-shadow:
      2px 0 var(--naranja),
      -2px 0 #00fff9; /* Capas naranja y cian */
  }
  12% {
    transform: translate(3px, -1px);
    text-shadow:
      -2px 0 var(--naranja),
      2px 0 #00fff9;
  }
  13% {
    transform: translate(0);
    text-shadow: 0 0 0 transparent;
  }
  /* Pequeña distorsión extra a mitad de ciclo */
  48% {
    transform: scale(1);
  }
  49% {
    transform: scale(1.05) skewX(5deg);
    color: var(--naranja);
  }
  50% {
    transform: scale(1) skewX(0);
    color: var(--blanco);
  }
  100% {
    transform: translate(0);
  }
}

.error-wrapper {
  animation: flicker 10s infinite;
}

@keyframes flicker {
  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
    opacity: 1;
  }
  20%,
  22%,
  24%,
  55% {
    opacity: 0.95;
  }
}
/* Responsividad extra para móviles */
@media (max-width: 880px) {
  .error-wrapper {
    padding: 2vh;
  }
  .error-header h1 {
    font-size: 8rem;
  }
}


/* ---- BOTON VOLVER ARRIBA FLOTANTE ---- */
.btn-scroll-up {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--naranja) 0%, #f18c0e 100%);
  color: #111;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
  
  /* Estado inicial oculto y desplazado hacia abajo */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  
  /* Animacion de mezcla de fundido hacia arriba */
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0.4s ease;
  box-shadow: 0 4px 15px rgba(248, 175, 39, 0.4);
}

.btn-scroll-up:hover {
  background: linear-gradient(135deg, #fbc65f 0%, #f69b2d 100%);
  transform: translateY(-3px) scale(1.05); /* Cuando ya esta visible y hacemos hover */
  box-shadow: 0 6px 20px rgba(248, 175, 39, 0.6);
}

/* Clase añadida desde JS cuando se hace scroll down */
.btn-scroll-up.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0); /* Sube a su posicion natural */
}

.btn-scroll-up.show:hover {
  transform: translateY(-3px) scale(1.05);
}

@media (max-width: 880px) {
  .btn-scroll-up {
    bottom: 1.5rem;
    right: 1.5rem;
    width: 2.8rem;
    height: 2.8rem;
  }
}