/*=========================================
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");





/* 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: 3%;
  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;
}

/* --- */

/* 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: 1%;
  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);
}

/* --- */

/* Estilos WhatsApp */
.popup {
  position: fixed;
  bottom: 90px;
  left: 10px;
  display: none;
  z-index: 9999;
}

.popup-content {
  background: #fff;
  width: 355px;
  height: 370px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px);
  opacity: 0;
}

/* WhatsApp Estilo de la cabecera */
.popup-header {
  background: #f3bc44;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.text_watssap {
  font-weight: 400;
  font-size: 20px;
  color: #02a955;
  margin-left: -50%;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  /*letter-spacing: 1px;*/
}

.popup-icon-small {
  width: 28px;
  height: 28px;
  object-fit: contain;
  vertical-align: middle;
}

/* WhatsApp Animación del botón de cerrar */
.close-btn {
  background: #a07c2e;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.close-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.popup-body {
  flex-grow: 1;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f4ed;
}

.message {
  background: #f7e6c1;
  padding: 10px 15px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  text-align: center;
  font-size: 14px;
  font-weight: 300;
  font-style: italic;
  color: #333;
  position: relative;
}

.popup-footer {
  background: #fff;
  padding: 10px;
  display: flex;
  justify-content: flex-end;
}

.whatsapp-btn {
  font-weight: 500;
  display: inline-block;
  background: #f3bc44;
  color: #fff;
  padding: 5px 10px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 16px;
  transition: background 0.3s ease;
}

.whatsapp-btn:hover {
  background: #a07c2e;
}

.whatsapp-icon {
  position: fixed;
  bottom: 30px;
  left: 19px;
  cursor: pointer;
  z-index: 99999999;
  transform: translateY(200px);
  width: 50px;
  height: 50px;
  background-color: #694903;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.whatsapp-icon:hover {
  background-color: #412d02;
}

.whatsapp-icon img {
  width: 25px;
  height: 25px;
  transition: transform 0.3s ease;
}

.whatsapp-icon img:hover {
  transform: scale(1.1);
}

/* WhatsApp Estilo del ícono dentro del botón */
.icon-chat {
  display: inline-block;
  margin-left: 10px;
  right: 0;
  width: 30px;
  height: 30px;
  background-image: url("https://magrajal.es/wp-content/uploads/2025/01/arrow-watssap-white.svg");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
  vertical-align: middle;
}

/* Animación al pasar el mouse */
.whatsapp-btn:hover .icon-chat {
  transform: rotate(-90deg) scale(1.2);
  /* Rotación y escala al pasar el mouse */
}

/* //Estilos WhatsApp */

/* 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;
}

/* --- */