/* === MENU === */
  .h-10 { height: 3.5rem !important; }

  .active-link {
    color: #08040a !important;
    border-bottom: 2px solid #ede4abf5;
    padding-bottom: 0.25rem; /* igual que pb-1 */
  }

  .nav-portafolio {
    color:  #14081a !important; /* //#333 !important; */
    font-weight: 600;
    font-size: 1.3rem  !important;
  }

  .nav-portafolio::after {
    content: "|";
    margin-left: 3px;
    animation: blink 0.8s infinite;
    color: #ede4abf5;
  }

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

  .logo-main {
    height: 3.5rem; /* antes 2.5rem (h-10) -> ahora 3.5rem */
    width: auto;
  }
/* === MENU === */

/* === HERO === */
  /*
    .hero-section {
      position: relative;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: radial-gradient(circle at center, #08040a, #000000);
      overflow: hidden;
    } 
  */

  /* Contenedor principal */
  .hero-section {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at center, #08040a, #000000);
    overflow: hidden;
  }

  /* 🔥 QR — tamaño fijo basado en tus proporciones del header */
  .hero-logo {
    position: absolute;
    top: 55%;
    left: 5vw;
    transform: translateY(-50%);

    /* 🔥 Ajuste perfecto, proporcional y SIN deformación */
    width: clamp(240px, 25vw, 700px) !important;
    height: auto;

    opacity: 0; /* la animación GSAP ya maneja esto */
    z-index: 1;
  }

  @media (max-width: 833px) {
    .hero-logo {
      top: 38%;                      /* Lo subimos para liberar las letras */
      left: 7vw;                     /* Más espacio del texto */
      width: clamp(250px, 40vw, 500px);  /* Se hace compacto pero sigue grande */
    }
  }

  /* === LETRAS HERO (ajuste de posición) === */
  .bg-animated {
    position: absolute;
    top: 55%;
    left: 100%; /* ⚙️ centramos sobre la mitad derecha */
    transform: translate(-50%, -50%);
    width: 100vw;
    line-height: 0.9;
    text-align: left;
    opacity: 0.18;
    z-index: 0;
    animation: bgMove 10s ease-in-out infinite alternate;
  }

  /* Movimiento suave */
  @keyframes bgMove {
    from { transform: translate(-50%, -50%) scale(1); opacity: 0.12; }
    to { transform: translate(-50%, -50%) scale(1.05); opacity: 0.2; }
  }

  @keyframes bgMove {
    from { transform: translate(-50%, -50%) scale(1); opacity: 0.12; }
    to { transform: translate(-50%, -50%) scale(1.02); opacity: 0.2; }
  }

  /* === LETRAS === */
  .bg-soft, .bg-innov, .bg-ation {
    font-size: clamp(6rem, 10vw, 10rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0;
    background: linear-gradient(90deg, #ffeb03, #ffffff, #ffeb03);
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShine 6s linear infinite;
  }

  @keyframes textShine {
    0% { background-position: 0%; }
    100% { background-position: 200%; }
  }

  /* === V ROTADA === */
  .rotated-v {
    display: inline-block;
    transform-origin: center bottom;
    background: linear-gradient(90deg, #ffeb03, #ffffff, #ffeb03);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 6px rgba(245, 197, 24, 0.6));
  }

  .rotated-v.glitched {
    animation: vGlitch 0.2s infinite;
  }

  @keyframes vGlitch {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(2px) rotate(-2deg); }
    50% { transform: translateX(-2px) rotate(2deg); }
    75% { transform: translateX(1px) rotate(-1deg); }
  }

  /* === NOMBRE Y SUBTÍTULO === */
  .hero-content {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
  }

  .hero-title {
    font-size: clamp(2rem, 3vw, 3rem);
    color: #fff;
    font-weight: 700;
    text-shadow: 0 0 20px rgba(0,0,0,0.6);
    animation: fadeInUp 1.5s ease;
  }

  .hero-subtitle {
    font-size: clamp(1.3rem, 1.5vw, 1.5rem);
    color: #ede4abf5;
    font-weight: 300;
    animation: fadeInUp 2s ease;
    white-space: nowrap; /* evita saltos de línea */
  }

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

   /* === 🔹 Optimización visual en móviles === */
    @media (max-width: 768px) {

      .nav-portafolio {
        color:  #14081a !important; /* //#333 !important; */
        font-weight: 600;
        font-size: 1rem  !important;
      }

      .hero-section {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        overflow: hidden;
        flex-direction: column;
      }

      .bg-soft,
      .bg-innov,
      .bg-ation {
        font-size: clamp(19vw, 20vw, 24vw); /* 🔹 más grandes */
        line-height: 0.88;
      }

      /* 🔹 Centrado del nombre */
      .hero-content {
        /* 
        position: absolute;
        width: 90%;     
        
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        z-index: 3;
        */
        min-height: 75vh; /* Ajusta si quieres más alto */
        width: 90%;       /* 🔥 Nuevo ancho más grande */
        max-width: 500px; /* Evita que se haga demasiado ancho en tablets */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0 auto;   /* Centrado horizontal */
        padding: 1rem 0;  /* Un poco de espacio vertical */
        text-align: center;
        top: 20% !important;
      }

      .hero-title {
        font-size: clamp(1.5rem, 5vw, 2.2rem);
        color: #fff;
        font-weight: 700;
      }

      .hero-subtitle {
        display: block;
        font-size: clamp(1rem, 1.5vw, 1.5rem);
        text-align: center;
        margin-top: 1rem;
        color: #ede4abf5;
        white-space: normal !important; /* permite salto en móvil */
        /* white-space: nowrap; */
      }

      .bg-animated {
        top: 42% !important;
        left: 50%; /* 🔹 centrado total */
        transform: translate(-50%, -50%);
        width: 100%;
        text-align: center;
      }

      .hero-logo {
        top: 72% !important;
        width: clamp(250px, 40vw, 500px) !important;
        left: -4vw !important;
        /*  display:  none; /* 🔹 ocultamos QR */
      }

      /*    
        .hero-subtitle {
          font-size: clamp(1.3rem, 1.5vw, 1.5rem);
          color: #ede4abf5;
          font-weight: 300;
          animation: fadeInUp 2s ease;
          white-space: nowrap;
        }
      */
    }

  /* === Landscape móvil (pantalla girada) === */
    /* === Landscape móvil (pantalla girada) === */
    @media (max-width: 900px) and (orientation: landscape) {
      .bg-soft, .bg-innov, .bg-ation {
        font-size: 10vw;
        top: 80% !important;  /* si lo estás usando realmente */
      }

      .bg-animated {
        transform: translateY(50px); /* 🔥 baja todo el bloque de letras */
        top: 55%;
      }

      .rotated-v {
        transform: translate(5.5vw, -10.7vh) rotate(-90deg) !important;
      }
    }

    @media screen and (max-height: 500px) and (min-width: 700px) {

      /* 🔥 Baja todo el bloque de letras */
      .bg-animated {
        top: 53% !important;              /* Baja todo el conjunto */
        transform: translate(-50%, -40%) !important;
      }

      /* 🔥 Ajusta tamaño de las 3 líneas de texto */
      .bg-soft, .bg-innov, .bg-ation {
        font-size: 10vw !important;        /* Más grande pero proporcional */
        line-height: 0.9 !important;
      }

      /* 🔥 Reajuste fino de la V rotada */
      .rotated-v {
        transform: translate(5vw, -8vh) rotate(-90deg) !important;
        display: inline-block;
      }

      .hero-logo {
        top: 60% !important;
      }

      /* === HERO-CONTENT NUEVA DISPOSICIÓN === */
      .hero-content {
        position: absolute;
          top: 60%;
          left: 50%;
          width: 100%;
          height: 100%;          /* 🔥 ESTE ES EL CLAVE */
          display: flex;
          flex-direction: column;
          justify-content: space-between; /* 🔺 título arriba, subtítulo abajo */
          align-items: center;
          padding: 2% 4%;
          z-index: 5;
        }
        
        .hero-title {
          margin-top: 3%; 
          font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
        }
    
        .hero-subtitle {
          margin-bottom: 4%; 
          font-size: clamp(.79rem, 2.8vw, 1.2rem) !important;
          text-align: center;
          white-space: normal !important; /* permite saltos */
        }
    }


/* === SOBRE MI === */
  .about-section {
    /*   background: linear-gradient(to bottom, #0e1e4a, #4a2a6b); */
    /* background: radial-gradient(circle at 50% 50%, #000, #08040a); */ 
    /* background: linear-gradient(to bottom, #08040a, #000000) !important;  */
    background: radial-gradient(circle at center, #000000, #08040a);
      /* background: radial-gradient(circle at center, #030004, #000000); */
  }
  #about img {
    /*     box-shadow: 0 0 25px rgba(237, 228, 171, 0.12);
    border: 1px solid rgba(237, 228, 171, 0.15); */
  }
  #about img:hover {
    box-shadow: 0 0 40px rgba(237, 228, 171, 0.2);
  }
  #about h2[data-aos] {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Párrafos: animación escalonada */
  #about p {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.9s ease, transform 0.9s ease;
  }

  #about p.animate {
    opacity: 1;
    transform: translateY(0);
  }
  /* Imagen */
  #about img {
    opacity: 0;
    transform: scale(0.92);
    filter: brightness(0.7) blur(3px);
    transition: all 1s ease;
    box-shadow: 0 0 25px rgba(237, 228, 171, 0.12);
    border: 1px solid rgba(237, 228, 171, 0.15);
  }

  #about img.animate {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1) blur(0px);
  }

  /* Respiración suave */
  #about img.animate {
    animation: aboutBreath 6s ease-in-out infinite;
  }

  @keyframes aboutBreath {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
  }
    

/* === SOBRE MI === */

/* === PROYECTOS === */
  .project-section{
    background: radial-gradient(circle at center, #08040a, #000000);
  }
  .glightbox-clean .gclose,
  .glightbox-clean .gnext,
  .glightbox-clean .gprev {
    color: #ede4ab !important;
  }

  /* === Lightbox personalizado === */
  .glightbox-clean .gslide-description {
    background: #000000e8 !important;
    color: #ede4ab !important;
    border-top: 1px solid #ede4ab55;
  }

  .glightbox-clean .gclose,
  .glightbox-clean .gnext,
  .glightbox-clean .gprev {
    color: #ede4ab !important;
    text-shadow: 0 0 10px #ede4ab55;
    transition: all 0.3s ease;
  }

  .glightbox-clean .gclose:hover,
  .glightbox-clean .gnext:hover,
  .glightbox-clean .gprev:hover {
    color: #ffeb03 !important;
    transform: scale(1.2);
  }

  .goverlay {
    background: #120118f5 !important;
    backdrop-filter: blur(5px);
  }

  #projects-grid .bg-gray-800 {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  #projects-grid .bg-gray-800:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 8px 25px rgba(237, 228, 171, 0.15);
  }

  .gslide-image img {
    border: 2px solid #ede4ab44;
    border-radius: 1rem;
    box-shadow: 0 0 25px #ede4ab33;
  }

  /* Animación “caída y expansión” */
  .glightbox-open .gslide-image img {
    animation: dropIn 0.6s ease-out forwards;
  }

  @keyframes dropIn {
    from {
      transform: translateY(-40px) scale(0.8);
      opacity: 0;
    }
    to {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
  }

  /* === Modal general === */
  #modalGallery img {
    background: none !important;
    mix-blend-mode: normal !important;
  }

  #projectModal {
    backdrop-filter: blur(6px);
  }

  /* === Botón de cierre fijo === */
  #closeModal {
    position: fixed;
    top: 1.2rem;
    right: 1.5rem;
    z-index: 60;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 50%;
    padding: 6px 12px;
    line-height: 1;
    transition: all 0.3s ease;
  }
  #closeModal:hover {
    background: rgba(237, 228, 171, 0.2);
    transform: scale(1.1);
  }

  /* === Responsivo === */
  @media (max-width: 768px) {
    #projectModal {
      align-items: flex-start;
      padding-top: 3rem;
      overflow-y: auto;
    }

    #projectModal .bg-gray-900 {
      width: 95vw !important;
      height: auto !important;
      max-height: 90vh;
    }

    #closeModal {
      top: 0.8rem !important;
      right: 1rem !important;
      font-size: 1.8rem;
    }
  }
/* === PROYECTOS === */

/* === CONTACTO === */
  .contact-section {
    background: radial-gradient(circle at center, #000000, #08040a);
  }
/* === CONTACTO === */

/* === BTN WHATS === */
  /*Estilos generales del boton whatsapp*/
  .whatsapp-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    animation: breathe 2s ease-in-out infinite;
  }

  /*Estilos solo al icono whatsapp*/
  .whatsapp-btn i {
    color: #fff;
    font-size: 24px;
    animation: beat 2s ease-in-out infinite;
    text-decoration: none;
  }

  /*Estilos con animation contorno respirando*/
  @keyframes breathe {
    0% {
      box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
    }
    70% {
      box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
  }

  /*Estilos de animacion del icono latiendo*/
  @keyframes beat {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }
/* === BTN WHATS === */

/* === AJUSTES GENERALES === */
  html, body {
    width: 100%;
    overflow-x: hidden;
  }

  .text-crema {
    color: #ede4ab !important;
  }
  .bg-crema {
    background-color: #ede4ab !important;
  }
  .text-crema2 {
    color: #ebe976 !important;
  }
  .bg-crema2 {
    background-color: #ebe976 !important;
  }
/* === AJUSTES GENERALES === */

html, body {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: auto !important;
}