/*Para que no haya problemas con los anchos del header lateral y el contenido de la pagina dispongo en 2 colummnas con grid el body*/
/*mismo padding top y bottom para el header lateral y el main*/ 
body {
  display: grid;
  grid-template-columns: 40% 60%;
  min-height: 100vh;
  max-width: 1200px;
  margin: auto;
  background-color: #0f172a!important;
}

.page-id-569{
  grid-template-columns: 100%!important;
}

/*padding para el main/content*/
.elementor{
  padding-left: 20px;
  padding-right: 20px;
}


.site-main, .elementor-location-header, .elementor{
  padding-top: 96px!important;
  padding-bottom: 96px!important;
}


/*posicionamiento del header lateral*/
.elementor-location-header {
  height: calc(100vh - 96px)!important;
  position: sticky;
  top: 0;
  overflow: hidden;
}

/*se le restan los 96px de padding-top y padding-bottom para que al hacer scroll nunca se mueva el header lateral y le afecten los que tiene la caja superior del header
que es .elementor-location-header*/
.header-div{
  height: calc(100vh - 192px);
}

.technologies ul{
  flex-wrap: wrap;
}

.technologies li{
  margin: 8px 6px 0px 0px;
  font-size: 12px;
}

.single-exp:hover h3, .single-project:hover h3{
  color: #5eead4;
}



/**/
@media (max-width: 767px) {

  /*para que al ocultar el header lateral en movil, no se ponga todo el contenido en una columna de 40% al estar distribuido para desktop en 40% 60%*/
  body{
    grid-template-columns: 100%;
  }

  .elementor{
    padding-left: 30px;
    padding-right: 30px;
  }

  .elementor-location-header {
    display: none;
  }

  .exp-proj-mov{
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
  }

  .sect-tittle-mov{
    background-color: #0f172a!important;
  }

  .single-project-img{
    order: 2;
    margin-bottom: 48px;
    margin-top: 20px;
  }

  .single-exp{
    margin-bottom: 48px;
  }



}




/*footer oculto*/
footer {
  display: none;
}

.proj-img img {
  aspect-ratio: 16/9;
}

/*pagina de mantenimiento sin header, solo mensaje*/
.page-id-16 {
  display: block;
  background-color: white!important;
}

.page-id-16 h1,
.page-id-16 h2,
.page-id-16 p {
  display: block;
  background-color: white!important;
  color: black!important;
}


@media (min-width: 768px) {
  .single-exp, .single-project {
    padding: 24px;
  }

  .single-exp, .single-project {
    border-radius: 8px;
    transition: all 0.25s ease;
  }

  .single-exp:hover, .single-project:hover {
    /*transform: translateY(-4px);*/
    background-color: rgba(255, 255, 255, 0.03);
    /*box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);*/
  }

  /* Cuando pasas por la lista → todos bajan */
  #experience:hover .single-exp, #projects:hover .single-project {
    opacity: 0.4;
  }

  /* El activo se mantiene */
  #experience .single-exp:hover, #projects .single-project:hover {
    opacity: 1;
  }
}







/* EFECTO DE LUZ EN EL RATON AL MOVERLO POR LA WEB SOLO EN DESKTOP*/
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  :root {
    --mouse-x: 50vw;
    --mouse-y: 50vh;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
      600px circle at var(--mouse-x) var(--mouse-y),
      rgba(56, 189, 248, 0.12),
      transparent 40%
    );
  }

  body > * {
    position: relative;
    z-index: 1;
  }
}
/* EFECTO DE LUZ EN EL RATON AL MOVERLO POR LA WEB */





/*--------------CLASES Y ESTILOS DEL NAV DEL HEADER LATERAL---------------*/

/*tamaño y transicion para las flechas de enlaces como cv o projectos*/
.icon-arrow {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.cv-enlace .icon-arrow, .projects-enlace .icon-arrow, h3 .icon-arrow {
  vertical-align: middle;
}

.return-home-enlace .icon-arrow{
  vertical-align: text-top;
}

.cv-enlace:hover, .projects-enlace:hover {
  color: #5eead4;
}

/*transformacion para las flechas de enlaces cv o projectos*/
.cv-enlace:hover .icon-arrow, .projects-enlace:hover .icon-arrow, .single-exp:hover .icon-arrow, .single-project:hover .icon-arrow {
  transform: translate(4px, -4px);
}



.exp-proj-description p{
  margin-bottom: 0px;
  color: #94A3B8;
}

.exp-proj-mov {
  gap: 8px!important;
}

.return-home-enlace .icon-arrow{
  transform: scaleX(-1);
}

.return-home-enlace:hover .icon-arrow {
  transform: scaleX(-1) translateX(8px);
}


/*--------------ESTILOS DEL FORMULARIO---------------*/

#contactForm {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 100%;
}

/* grupo */
.form-group {
  display: flex;
  flex-direction: column;
}

/* labels */
.form-group label {
  font-size: 14px;
  margin-bottom: 8px;
  color: #8892b0;
}

/* inputs y textarea */
#contactForm input,
#contactForm textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid #233554;
  padding: 8px 0;
  color: #ccd6f6;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s ease;
}

/* focus */
#contactForm input:focus,
#contactForm textarea:focus {
  border-bottom: 1px solid #5eead4;
}

/* textarea altura */
#contactForm textarea {
  min-height: 120px;
  resize: none;
}

/* botón */
#contactForm button {
  margin-top: 16px;
  padding: 8px 16px;
  border: 1px solid #5eead4;
  background: transparent;
  color: #5eead4;
  cursor: pointer;
  transition: all 0.3s ease;
  max-width: 120px;
  border-radius: 999px;
}

/* hover botón */
#contactForm button:hover {
  background: rgba(100, 255, 218, 0.1);
}


/*oculta el campo para bots y spam, por algun motivo es mejor usar esto que display none*/
.contact-form-honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

/*.form-messages p, .form-errors p{
  color: #fd4545;
}*/



/*--------------ESTILOS DEL FORMULARIO---------------*/


/*--------------INICIO FIX AUTOFILL FORMULARIO---------------*/

#contactForm input:-webkit-autofill,
#contactForm input:-webkit-autofill:hover,
#contactForm input:-webkit-autofill:focus,
#contactForm input:-webkit-autofill:active,
#contactForm textarea:-webkit-autofill,
#contactForm textarea:-webkit-autofill:hover,
#contactForm textarea:-webkit-autofill:focus,
#contactForm textarea:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: #ccd6f6 !important;
  caret-color: #ccd6f6 !important;
  transition: background-color 9999s ease-in-out 0s;
}

/*--------------FIN FIX AUTOFILL FORMULARIO---------------*/


/*--------------INICIO FIX AUTOFILL FIREFOX---------------*/

#contactForm input:-moz-autofill,
#contactForm textarea:-moz-autofill {
  box-shadow: 0 0 0 1000px transparent inset !important;
  -moz-text-fill-color: #ccd6f6 !important;
  caret-color: #ccd6f6 !important;
}

/*--------------FIN FIX AUTOFILL FIREFOX---------------*/



/*--------------INICIO MENSAJES FORMULARIO---------------*/

.form-messages {
  margin-top: 16px;
}

.form-messages p {
  margin: 0 0 8px;
}

.form-messages.form-success p {
  color: #5eead4;
}

.field-error {
  color: #ef4444;
}

/*--------------FIN MENSAJES FORMULARIO---------------*/