/* Reset de estilos para asegurar consistencia */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estilos para el fondo y la estructura */
body {
    background-color: #121212; /* Fondo oscuro elegante */
    color: #fff; /* Texto blanco para contraste */
    font-family: 'Arial', sans-serif;
    padding-top: 60px; /* Espacio para el menú sticky */
    min-height: 200vh; /* Hace que la página tenga suficiente espacio para el scroll */
}


.logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinea el texto a la izquierda */
    justify-content: center; /* Asegura que esté nivelado con el menú */
    height: 100%; /* Ajusta la altura para que coincida con el menú */
    padding-right: 20px;
    border-right: 2px solid #ff0;
    color: #0f0; /* Verde fosforescente */
    font-family: 'Arial', sans-serif;
}
.logo {
    border-right: 2px solid #ff0; /* Línea vertical fosforescente */
    padding-right: 20px; /* Espacio entre el nombre y los elementos del menú */
}


.logo h1 {
    font-size: 24px;
    font-weight: bold;
}

.logo p {
    font-size: 14px;
    color: #ff0; /* Amarillo neón */
    margin-top: -5px; /* Ajuste para acercar el texto al título */
}

html {
  scroll-behavior: smooth;
}


.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #000;
    visibility: visible; /* Se mantiene siempre visible */
    opacity: 1;
    padding: 15px 30px;
    display: flex;
    align-items: center;
    z-index: 1000;
}


/* Cuando el usuario baja, el menú se hace visible */
.navbar.visible {
    visibility: visible;
    opacity: 1;
    box-shadow: 0 4px 10px rgba(0, 255, 0, 0.6); /* Sombra fosforescente */
}


/* Estilos de los elementos del menú */
.navbar ul {
    list-style: none;
    display: flex;
    justify-content: center;
}

.navbar li {
    margin: 0 15px;
}

.navbar a {
    text-decoration: none;
    color: #0f0; /* Verde fosforescente */
    font-size: 18px;
    font-weight: bold;
    padding: 10px;
    transition: color 0.3s ease-in-out;
}

/* Efecto hover fosforescente */
.navbar a:hover {
    color: #ff0; /* Amarillo neón */
    text-shadow: 0 0 10px #ff0;
}

.typed::after {
  content: "Diseñador Gráfico";
  animation: cambiar 6s infinite;
  color: #0ff; /* neón azul */
  font-weight: bold;
  text-shadow: 0 0 8px #0ff;
}

.cursor {
  display: inline-block;
  margin-left: 5px;
  color: #0ff;
  animation: parpadeo 1s infinite;
  font-weight: bold;
}

@keyframes cambiar {
  0%   { content: "Diseñador Gráfico"; }
  25%  { content: "Desarrollador Web"; }
  50%  { content: "Productor de Video"; }
  75%  { content: "Narrador Visual"; }
  100% { content: "Diseñador Gráfico"; }
}

@keyframes parpadeo {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

.typed {
  display: inline-block;
  min-width: 220px;
}




.menu-toggle {
    display: none; /* Oculto en pantallas grandes */
    font-size: 28px;
    cursor: pointer;
}


.menu-links {
    display: none; /* Ocultamos por defecto */
}

.menu-links.active {
    display: flex; /* Se muestra cuando el JavaScript lo activa */
    flex-direction: column;
    position: absolute;
    top: 70px;
    right: 10px;
    background: #0ff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px #0ff;
    width: 200px;
}


.flag-selector {
  position: relative;
  margin-left: auto;
  padding: 8px;
  cursor: pointer;
}
.flag {
  width: 32px;
  transition: transform 0.3s ease;
}
.flag:hover {
  transform: scale(1.05);
}

.submenu {
  display: none;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
  position: absolute;
  top: 40px;
  right: 0;
  background: #fff;
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 6px;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
  z-index: 1000;
}

.submenu.visible {
  display: block;
  opacity: 1;
  transform: scale(1);
}

.flag-option {
  width: 32px;
  margin: 4px;
  cursor: pointer;
  transition: transform 0.2s;
}
.flag-option:hover {
  transform: scale(1.1);
}
@media (max-width: 600px) {
  .flag, .flag-option {
    width: 24px;
  }
}

/* Ocultar en móviles, mostrar solo en pantallas grandes */
.desktop-only {
  display: block;
}

@media (max-width: 768px) {
  /* Oculta la bandera en móvil */
  .desktop-only {
    display: none; 
  }
}

/* Por defecto: solo visible en escritorio */
.flag-selector {
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  .flag-selector {
    display: none !important;
  }
}


.lang-option-mobile {
  display: none;
  flex-direction: column;
  align-items: start;
  gap: 6px;
  padding: 10px 0;
}
.submenu-mobile img {
  width: 28px;
  margin-right: 8px;
  cursor: pointer;
}

/* Mostrar solo en pantallas pequeñas cuando el menú está activo */
@media (max-width: 600px) {
  .lang-option-mobile {
    display: flex;
  }
}


/* Seccion de la hero */
.hero {
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(135deg, #000, #0f0);
    color: #fff;
}



.hero h1 {
  font-size: 3em;
  color: #0ff;
  text-shadow: 0 0 8px #0ff;
}

.hero-subline {
  font-size: 1.2em;
  color: #fff;
  opacity: 0.8;
  margin-top: 10px;
}

.hero p {
    font-size: 18px;
    margin-top: 10px;
}


.cta {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #ff0;
    color: #000;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 0 10px #ff0;
    transition: 0.3s;
}

.cta:hover {
    background-color: #0f0;
    box-shadow: 0 0 15px #0f0;
}


.hero-typewriter h4,
.hero-typewriter h5 {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 300;
  text-align: center;
  margin: 5px 0;
}

.hero-typewriter h4 {
  font-size: 1.6rem;
  color: #fff;
}

.hero-typewriter h5 {
  font-size: 1.3rem;
  color: #fff;
}

/* ✨ Fade-in visual para textos del hero */
.fade-in {
  opacity: 0;
  transition: opacity 0.8s ease-in;
}

.fade-in.visible {
  opacity: 1;
}


/* seccion de sobre mi*/
.about {
    padding: 80px 20px;
    text-align: center;
    color: #fff;
}

.about h2 {
    font-size: 32px;
    margin-bottom: 20px;
}

.about p {
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto;
}

.about-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.about-container img {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    border: 3px solid #ff0; /* Efecto fosforescente */
}

.about-text {
    text-align: left;
}


.especialidades {
  list-style: none;
  padding-left: 0;
  margin-top: 10px;
}

.especialidades li {
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 1.2em;
  color: #0ff;
  text-shadow: 0 0 8px #0ff;
}

.cta {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background-color: #ff0;
    color: #000;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
}

.cta:hover {
    background-color: #0f0;
    box-shadow: 0 0 15px #0f0;
}



.manifiesto {
  font-style: italic;
  font-weight: 400;
  font-size: 1.6rem;
  color: #ff0;
  text-align: center;
  margin-bottom: 30px;
  line-height: 1.4;
  opacity: 0;
  animation: fadeInManifesto 2s ease forwards;
}

.manifiesto::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  margin: 15px auto;
  background: #0f0;
  opacity: 0.6;
}

.about h3 {
  font-weight: 300;
  font-style: italic;
  font-size: 1.3rem;
  color: #ffffff;
  margin-bottom: 25px;
  text-align: center;
}

.about h4 {
    font-weight: 200;
    font-style: italic;
    font-size: 1.3rem;
}

.manifiesto {
  margin-bottom: 20px;
}

.about h3 {
  margin-top: 10px;
  margin-bottom: 20px;
}


@keyframes fadeInManifesto {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}


/* 💡 Responsivo para pantallas menores a 768px */
@media screen and (max-width: 768px) {
  .about-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .about-text {
    width: 100%;
  }

  .especialidades li {
    font-size: 1.1em;
  }
}


/* Sección de servicios */

.services {
  padding: 80px 20px;
  background-color: #000;
  text-align: center;
}

.services h2 {
  font-size: 2rem;
  color: #ff0;
  margin-bottom: 10px;
}

.services-intro {
  font-size: 1.2rem;
  font-weight: 300;
  font-style: italic;
  color: #f0f0f0;
  margin-bottom: 40px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.services-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.servicio-card {
  background: #0f0;
  padding: 30px;
  border-radius: 12px;
  width: 300px;
  box-shadow: 0 0 15px #0f0;
  transition: all 0.3s ease;
}

.servicio-card:hover {
  box-shadow: 0 0 25px rgba(255,94,94,0.25);
  transform: translateY(-5px);
}

.servicio-card i {
  font-size: 2.5rem;
  color: #ff0;
  margin-bottom: 15px;
}

.servicio-card h3 {
  color: #000;
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.servicio-card p {
  color: #000;
  font-size: 1rem;
  line-height: 1.5;
}

/* Responsive */
@media screen and (max-width: 768px) {
  .services-container {
    flex-direction: column;
    align-items: center;
  }

  .servicio-card {
    width: 90%;
  }
}


/* Seccion de Habilidades */

.skills {
  background-color: #121212;
  padding: 80px 20px;
  text-align: center;
}

.skills h2 {
  font-size: 2rem;
  color: #0f0;
  margin-bottom: 10px;
}

.skills .tagline {
  font-size: 1.2rem;
  font-style: italic;
  color: #f0f0f0;
  margin-bottom: 50px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.skills-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.skill-card {
  background: #ff0;
  padding: 30px;
  border-radius: 12px;
  width: 300px;
  box-shadow: 0 0 15px #ff0;
  transition: all 0.3s ease;
}

.skill-card:hover {
  box-shadow: 0 0 25px rgba(255,94,94,0.25);
  transform: translateY(-5px);
}

.skill-card i {
  font-size: 3rem;
  color: #0f0;
  margin-bottom: 15px;
}

.skill-card h3 {
  font-size: 1.4rem;
  color: #000;
  margin-bottom: 5px;
}

.skill-tagline {
  font-size: 1rem;
  font-style: italic;
  color: #000;
  margin-bottom: 15px;
}

.skills-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.skills-list li {
  text-align: left;
  color: #000;
  margin-bottom: 8px;
  font-size: 0.95rem;
}

/* Responsive */
@media screen and (max-width: 768px) {
  .skills-container {
    flex-direction: column;
    align-items: center;
  }

  .skill-card {
    width: 90%;
  }
}


/* Sección de portafolio */

.portfolio {
  background-color: #000;
  padding: 80px 20px;
  text-align: center;
}

.portfolio h2 {
  font-size: 2rem;
  color: #ff0;
  margin-bottom: 10px;
}

.portfolio-intro {
  font-size: 1.2rem;
  font-style: italic;
  color: #f0f0f0;
  margin-bottom: 40px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.portfolio-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.portfolio-item {
  background: #0f0;
  padding: 25px;
  border-radius: 12px;
  width: 300px;
  box-shadow: 0 0 15px #0f0;
  transition: 0.3s ease;
}

.portfolio-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 25px rgba(255,94,94,0.25);
}

.portfolio-item img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 15px;
}

.portfolio-item h3 {
  color: #000;
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.scene-intro {
  font-style: italic;
  font-weight: 300;
  font-size: 1rem;
  color: #000;
  margin-bottom: 5px;
}

.portfolio-item p {
  color: #000;
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 15px;
}

.ver-mas {
  display: inline-block;
  font-size: 0.95rem;
  color: #000;
  text-decoration: none;
  transition: 0.3s ease;
}

.ver-mas:hover {
  color: red;
  text-decoration: underline;
}



.portfolio-row-duo {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  margin-top: 20px;
}

.portfolio-item.half {
  width: 45%;
  background: #0f0;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 0 15px #0f0;
  transition: 0.3s ease;
}

.portfolio-item.half:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 25px rgba(255,94,94,0.25);
}

.portfolio-item.half img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 15px;
} 

/* Responsive: apilado en mobile */
@media screen and (max-width: 768px) {
  .portfolio-item.half {
    width: 90%;
  }

  .portfolio-row-duo {
    flex-direction: column;
    align-items: center;
  }
} 




/* Responsive */
@media screen and (max-width: 768px) {
  .portfolio-item.half {
    width: 90%;
  }

  .portfolio-row-duo {
    flex-direction: column;
    align-items: center;
  }
}

/* Responsive */
@media screen and (max-width: 768px) {
  .portfolio-container {
    flex-direction: column;
    align-items: center;
  }

  .portfolio-item {
    width: 90%;
  }
}



/* Sección de contacto */

.contact {
    padding: 80px 20px;
    text-align: center;
    background: #121212;
    color: #fff;
}

.contact h2 {
    font-size: 36px;
    margin-bottom: 20px;
    color: #ff0;
    text-shadow: 0 0 15px #ff0;
}

.contact-intro {
    font-size: 18px;
    margin-bottom: 30px;
    color: #ccc;
}


.contacto-section {
  background-image: url('contacto_bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 4rem 2rem;
  color: white;
}



.mensaje-icono {
  background-image: url('./estrellas-suaves.png');
  position: relative;
  bottom: 40px;
  right: 30px;
  font-size: 2.2rem;
  animation: fadeIn 2s ease-out;
  z-index: 1000;
  pointer-events: none; /* evita que interfiera con clics */
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}


@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}


form {
    max-width: 400px;
    margin: auto;
    display: flex;
    flex-direction: column;
}

label {
    margin-top: 10px;
    font-size: 16px;
}

input, textarea {
    padding: 10px;
    border-radius: 5px;
    border: none;
    margin-top: 5px;
}

button {
    margin-top: 15px;
    padding: 10px;
    background: #0ff;
    border: none;
    border-radius: 5px;
    color: #000;
    cursor: pointer;
    font-size: 18px;
    transition: 0.3s;
}



button[type="submit"] {
  background-color: transparent;
  color: #39ff14;
  border: 2px solid #39ff14;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 8px #39ff14;
  animation: pulsoBoton 2s infinite;
}

@keyframes pulsoBoton {
  0%   { box-shadow: 0 0 6px #39ff14; }
  50%  { box-shadow: 0 0 12px #39ff14; }
  100% { box-shadow: 0 0 6px #39ff14; }
}

button[type="submit"]:hover {
  background-color: #39ff14;
  color: black;
  box-shadow: 0 0 18px #39ff14;
}


#mensaje-enviado {
  margin-top: 24px;
  text-align: center;
  font-size: 1rem;
  color: #39ff14;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 0 12px #39ff14;
  position: relative;
  animation: flotar 1.2s ease-out, fadeOut 1s ease-in 3s forwards;
  display: none;
  opacity: 1;
}

@keyframes flotar {
  0%   { transform: translateY(20px); opacity: 0; }
  60%  { transform: translateY(-10px); opacity: 1; }
  100% { transform: translateY(0px); }
}

@keyframes despegar {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  30%  { transform: translateY(-10px) scale(1.05); }
  60%  { transform: translateY(-25px) scale(1.1); opacity: 0.9; }
  100% { transform: translateY(-60px) scale(1.15); opacity: 0; }
}

@keyframes fadeOut {
  to { opacity: 0; }
}



@keyframes neonPulse {
  0%, 100% {
    box-shadow: 0 0 8px #0ff, 0 0 16px #0ff;
  }
  50% {
    box-shadow: 0 0 16px #0ff, 0 0 32px #0ff;
  }
}

.cta, .ver-mas {
  animation: neonPulse 2.5s infinite;
}


.estrellas-fugaces {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
}

.estrella {
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: #39ff14;
  border-radius: 50%;
  box-shadow: 0 0 8px #39ff14;
  animation: estrellaCaer 1.4s ease-out forwards;
}

@keyframes estrellaCaer {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(80px) translateX(-60px) scale(0.2);
    opacity: 0;
  }
}


/* Footer */
.footer {
    color: #fff;
    text-align: center;
    padding: 20px;
    font-size: 16px;
    background: #000;
}

.footer a {
    color: #0ff;
    text-decoration: none;
}

.footer a:hover {
    color: #ff0;
}

.social-links {
    margin: 10px 0;
}

.social-links a {
    font-size: 24px;
    color: #fff;
    margin: 0 10px;
    transition: 0.3s;
}

.social-links a:hover {
    color: #ff0;
}



.chevron-arriba {
  position: fixed;
  bottom: 20px;
  right: 20px; /* ✅ Esto lo coloca a la derecha */
  width: 48px;
  height: 48px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulso 2s infinite;
}

.chevron-arriba.show {
  opacity: 1;
  pointer-events: auto;
}

.chevron-arriba img {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 0 6px #39ff14);
}
@keyframes pulso {
  0% { box-shadow: 0 0 5px #39ff14, 0 0 15px #39ff14; }
  50% { box-shadow: 0 0 15px #39ff14, 0 0 30px #39ff14; }
  100% { box-shadow: 0 0 5px #39ff14, 0 0 15px #39ff14; }
}


/* Media Queries */
/* 📱 Para móviles (máximo 768px) */
@media screen and (max-width: 768px) {
    .skills-container, .portfolio-container, .services-container {
        flex-direction: column; /* Cambia de horizontal a vertical */
        align-items: center;
    }

    .service-card, .skill-card, .portfolio-item {
        width: 90%; /* Tarjetas más grandes en móvil */
    }

    h2 {
        font-size: 28px; /* Títulos más pequeños */
    }

    .intro, .portfolio-intro, .contact-intro {
        font-size: 16px; /* Texto más compacto */
        margin-bottom: 20px;
    }

    form {
        width: 90%; /* Formulario más accesible */
    }
}

/* 💻 Para pantallas medianas (entre 769px y 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .skills-container, .portfolio-container, .services-container {
        gap: 15px; /* Espaciado menor */
    }

    .service-card, .skill-card, .portfolio-item {
        width: 45%; /* Ajuste de tamaño */
    }

    h2 {
        font-size: 32px; /* Títulos más equilibrados */
    }
}

/* 🖥️ Para pantallas grandes (más de 1024px) */
@media screen and (min-width: 1025px) {
    .services-container, .skills-container, .portfolio-container {
        display: flex;
        justify-content: center;
    }

    .service-card, .skill-card, .portfolio-item {
        width: 280px; /* Mantener tamaño fijo */
    }
}


/* 🖥️ Pantallas grandes */
@media screen and (min-width: 769px) {
    .nav-links {
        display: flex; /* Asegura que el menú se vea en escritorio */
        gap: 20px;
    }

    .menu-toggle {
        display: none; /* Ocultamos el botón hamburguesa en pantallas grandes */
    }
}


/* 📱 Ajuste solo para el menú en móviles */
@media screen and (max-width: 768px) {
    .menu-links {
        display: none; /* Ocultar menú al inicio */
        flex-direction: column;
        position: absolute;
        top: 70px;
        right: 10px;
        background: #0ff;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 0 10px #0ff;
        width: 200px;
    }

    .menu-links.active { 
        display: flex; /* Mostrar cuando se activa */
    }

    .navbar ul { 
        display: none; /* Ocultar el menú normal */
    }

    .menu-toggle {
        display: block; /* Mostrar el botón hamburguesa */
        font-size: 28px;
        cursor: pointer;
        position: absolute;
        top: 20px;
        right: 20px;
        color: #ff0;
    }
}

/* 🖥️ Pantallas grandes */
@media screen and (min-width: 769px) {
    .menu-links {
        display: flex; /* Menú visible en escritorio */
    }

    .menu-toggle {
        display: none; /* Ocultar el botón hamburguesa en pantallas grandes */
    }
}


@media screen and (max-width: 768px) {
  .navbar ul {
    display: none;
  }

  .navbar.active ul {
    display: flex;
    flex-direction: column;
  }
}




/* Ajuste para dispositivos pequeños */
@media (max-width: 600px) {
  .mensaje-icono {
    margin-top: 40px; /* Ajusta el valor según necesites */
  }
}