/*=========================================
Project:	MAGRAJAL - PersonalPortfolio
Version:	1.0
Last change:	01/02/2025
Assigned to:	www.magrajal.es        
=========================================*/

/*=========================================
01. Portfolio Masonry Filter
02. Icono en el puntero del mouse
03. Para ocultar la barra de scroll
04. Orientación del telefono
05. Fondo oscuro
06. Estilos para el icono hamburguesa
07. Estilos WhatsApp
08. Boton fijo para subir arriba
09. Menu panel Navigation
10. Animacion cambio entre paginas
11. Icono en el puntero del mouse
=========================================*/

/*--------------------------------------------------
	01. General Settings 
---------------------------------------------------*/

@import url("css/cookies.css");
@import url("css/menu.css");
@import url("css/footer.css");
@import url("css/preloader.css");
@import url("css/mobile-alert.css");
@import url("css/whatsapp-styles.css");
@import url("css/language-change.css");





/* Reset moderno */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  background: #0c0c0c;
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;

  /* Ocultar scrollbar en Firefox + Edge antiguo/IE */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge antiguo */
}

/* Scroll permitido */
body {
  overflow-y: auto;
  overflow-x: hidden;
}

/* Ocultar scrollbar en WebKit (Chrome/Safari/Opera) */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none;
}

/* reCAPTCHA */
.grecaptcha-badge {
  display: none !important;
}

/* Logo styles */
.logo_magrajal {
  position: fixed;
  top: 5%;
  left: 3%;
  width: auto;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px;
  z-index: 99999999;
}

.box_logo_magrajal {
  display: flex;
  align-items: center;
  justify-content: center;
}

.imag_logo_magrajal {
  width: 120px;
  max-width: 100%;
  height: auto;
}

.logo_magrajal {
  opacity: 0;
  visibility: visible;
  transform: translateY(-24px);
  transition:
    opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.logo_magrajal.logo-visible {
  opacity: 1;
  transform: translateY(0);
}

.box_logo_magrajal {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.box_logo_magrajal:hover {
  transform: translateY(-4px) scale(1.03);
}

/* --- */

/* Fondo oscuro */
.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #141414 !important;
  opacity: 0;
  /* Inicialmente sin opacidad */
  transition: all 0.2s 0.1s cubic-bezier(0.83, 0.83, 0.01, 0.98);
  /* Transición de opacidad durante 0.5 segundos con un retraso de 1 segundo */
}

/* ---- */

/* Estilos para el icono hamburguesa */
.box_hamburguer {
  background-color: #f3bc44;
  width: 80px;
  height: 80px;
  position: fixed;
  top: 2%;
  right: 50px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  /*box-shadow: 0px 6px 20px 0px rgba(252,151,16,0.86);*/
}

#toggleButton {
  width: 60px;
  height: 20px;
  cursor: pointer;
  pointer-events: all;
  position: relative;
  z-index: 999999;
  transition: all 0.4s cubic-bezier(0.49, -0.03, 0, 1.11) 0.1s;
}

.box_hamburguer:hover #toggleButton {
  width: 45px;
  /* Cambio de tamaño al pasar el mouse */
  transition: all 0.4s cubic-bezier(0.49, -0.03, 0, 1.11) 0.1s;
}

/*#toggleButton:hover {
    width: 45px; /* Cambio de tamaño al pasar el mouse 
    transition: all 0.4s cubic-bezier(.49, -0.03, 0, 1.11) 0.1s;
}*/

#toggleButton span {
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: #000;
  border-radius: 50px;
  transition: transform 0.3s;
}

#toggleButton span:nth-child(1) {
  top: 0;
}

#toggleButton span:nth-child(2) {
  bottom: 0;
}

#toggleButton.active span:nth-child(1) {
  transform: translateY(10px) rotate(225deg);
}

#toggleButton.active span:nth-child(2) {
  transform: translateY(-7px) rotate(-225deg);
}

/* --- */


/* Boton fijo para subir arriba */
.scroll-down-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  background: #f3bc44;
  color: #000;
  border-radius: 50%;
  border: 1px solid #000;
  width: 50px;
  height: 50px;
  cursor: pointer;
  text-align: center;
  line-height: 47px;
  font-size: 1em;
  z-index: 1000;
  transition: background-color 0.3s, color 0.3s;
  z-index: 9999;
}

.scroll-down-button:hover {
  background: #886928;
  border: 1px solid #000;
}

.scroll-down-button img {
  max-width: 100%;
  max-height: 25px;
  /* Ajusta el tamaño deseado */
  display: block;
  margin: auto;
  z-index: 999;
}

/* //--- */

/* Menu panel Navigation */
#panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #000;
  overflow: hidden;
  opacity: 0;
  transition: all 0.8s 0.01s cubic-bezier(0.83, 0.83, 0.01, 0.98);
  cursor: auto;
  /* Esto asegura que el cursor se muestre en el panel de menú */
  z-index: 999999;
}

#content {
  opacity: 0;
  transform: translateY(0);
  margin-left: 11%;
  display: flex;
  flex-direction: column;
  align-items: left;
  transition: all 0.8s 0.01s cubic-bezier(0.83, 0.83, 0.01, 0.98);
}

#panel.open {
  height: 100vh;
  opacity: 1;
}

#panel.open #content {
  opacity: 1;
  transform: translateY(0%);
}

.link_magg {
  font-size: 120px;
  line-height: 130px;
  color: #918f8b;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.5s ease;
  pointer-events: all;
  letter-spacing: -0.06em;
}

.link_magg:hover {
  color: #f3bc44;
  transition: all 0.5s ease;
  letter-spacing: -0.02em;
}

.not-hovered {
  color: #222222;
  transition: color 0.5s ease;
}

.blur-effect {
  filter: blur(8px);
  -webkit-filter: blur(8px);
  transition: all 0.5s cubic-bezier(0.44, 0.83, 0.5, 0.96) 0.1s;
}

.num_link {
  position: absolute;
  color: #474745;
  font-size: 40px;
  font-weight: 300;
  letter-spacing: 0;
  left: -10%;
}

/* Media query */
@media (max-width: 1300px) {
  .box_hamburguer {
    width: 70px;
    height: 70px;
    top: 2%;
    right: 40px;
  }

  #toggleButton {
    width: 50px;
    height: 20px;
  }

  .box_hamburguer:hover #toggleButton {
    width: 40px;
  }

  #content {
    margin-left: 8%;
  }

  .link_magg {
    font-size: 75px;
    line-height: 85px;
  }

  .num_link {
    font-size: 30px;
    letter-spacing: 0;
    left: -12%;
  }
}

@media (max-width: 420px) {
  .box_hamburguer {
    width: 60px;
    height: 60px;
    top: 3%;
    right: 18px;
  }

  #toggleButton {
    width: 40px;
    height: 20px;
  }

  .box_hamburguer:hover #toggleButton {
    width: 35px;
  }

  #content {
    margin-left: 17%;
  }

  .link_magg {
    font-size: 45px;
    line-height: 55px;
  }

  .num_link {
    font-size: 30px;
    letter-spacing: 0;
    left: -20%;
  }
}

/* Animacion cambio entre paginas */
/* Transición básica */
body {
  opacity: 1;
  transition: opacity .45s ease;
}

/* Salida */
body.is-leaving {
  opacity: 0;
}

/* Entrada: solo si hay JS */
html.js body.is-entering {
  opacity: 0;
}

/* Icono en el puntero del mouse */
.text_floatstreet {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 333333;
  top: 0;
  left: 0;
  background-size: cover;
  opacity: 0.1;
  backdrop-filter: blur(3px);
  background-color: rgba(241, 241, 241, 0.5);
  border-radius: 50%;
}

.text_floatstreet img {
  width: 35px;
  height: 35px;
}

/* --- */

/*text_floating_grid Icono en el puntero del mouse*/
.text_floating_grid {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border: 1px solid #bebebe;
  opacity: 0;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 333333;
  top: 0;
  left: 0;
  background-size: cover;
  backdrop-filter: blur(3px);
  /* background-color: rgba(229, 9, 20, 0.301); */
  border-radius: 50%;
}

.round_circle_grid {
  width: 25px !important;
  height: 25px !important;
}

/* --- */

/* Icono en el puntero del mouse */
.text_floating_magg {
  position: absolute;
  color: #ccc;
  font-size: 14px;
  letter-spacing: 1px;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  opacity: 0;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 333333;
  top: 0;
  left: 0;
  background-size: cover;
  opacity: 0.1;
  backdrop-filter: blur(3px);
  background-color: #f3ad4465;
  border-radius: 50%;
}

.round_circle_1 {
  width: 30px !important;
  height: 30px !important;
}

/* --- */


/* ========================================================
   BOTÓN SCROLL ANIMADO MAGG
======================================================== */

.animated_button_magg {
  position: fixed;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
  z-index: 99999999;
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition:
    opacity 0.45s ease,
    visibility 0.45s ease,
    transform 0.45s ease;
}

.animated_button_magg.is-hidden-magg {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(24px);
}

.scroll_button_magg {
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.arrow_magg {
  width: 42px;
  height: 58px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle_magg {
  width: 36px;
  height: 54px;
  overflow: visible;
  display: block;
}

.circle_path_magg {
  stroke-width: 4.5px;
}

.line_magg {
  width: 3px;
  height: 12px;
  background-color: #f3bc44;
  border-radius: 999px;
  position: absolute;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
  animation: moveDownMagg 1.8s infinite ease-in-out;
}

@keyframes moveDownMagg {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(0);
  }

  35% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(16px);
  }
}

/* Email centro inferior */
.hero-mail {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  bottom: 30px;
  z-index: 999999;

  font-size: 16px;
  font-weight: 300;
  /* letter-spacing: 0.12em; */
  /* text-transform: uppercase; */

  color: #fff;
  text-decoration: none;

  transition: opacity .25s ease, transform .25s ease, color .25s ease;
}

.hero-mail:hover {
  opacity: 1;
  /* transform: translateY(-2px); */
  color: #F3BC44;
}

@media (max-width: 420px) {
  .hero-mail {
    right: 16px;
    bottom: 47px;
    font-size: 14px;
    letter-spacing: 0.10em;
  }
}

/* --- */