:root {
      --gradient-whatsapp: radial-gradient(circle, rgba(37, 211, 102, 1) 50%, rgba(252, 249, 70, 1) 100%);
      --primary: #ff3366;
      --secondary: #4285f4;
      --primary-dark: #d91e5f;
      --terciary: #FFF233;
      --terciary2: #d9ad1e;
      --terciary-dark: #9b4707;
      --dark: #0f0f1a;
      --dark-2: #1a1a2e;
      --light: #e0e0ff;
      --gray: #a0a0cc;
    }

    * { margin:0; padding:0; box-sizing:border-box; }
    body {
      font-family: 'Roboto', sans-serif;
      background: var(--dark);
      color: var(--light);
      line-height: 1.6;
    }
    h1, h2, h3, h4, h5 { font-family: 'Orbitron', sans-serif; font-weight: 700; }
    h4
    {color:var(--primary);
      text-decoration: underline;
      margin:2.5rem 0 1.5rem; 
      /* margin-bottom:1.5rem; */
    }
    h5 {color: #33CBFF;; font-weight: 400;}

    h2{
      text-shadow: 5px 7px 4px rgba(176, 166, 34, 0.58);
    }

    /* HERO CON VIDEO DE FONDO */
    .hero {
      height: 100vh;
      min-height: 700px;
      position: relative;
      /* overflow: hidden; */
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 0 20px;
    }
    .hero video {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -1;
      filter: brightness(0.65);
    }
    .hero::after {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: linear-gradient(rgba(15,15,26,0.75), rgba(26,26,46,0.85));
      z-index: -1;
    }
    .hero-content { max-width: 900px; z-index: 2; position: relative; }
    .hero h1 { font-size: 5.5rem; color: var(--primary); text-shadow: 0 0 40px rgba(255, 51, 102, 0.916); text-shadow: 0px 0px 9px #d35050;}
    .hero h2 { font-size: 2.8rem; color: white; margin-bottom: 1rem; }
    .tagline { font-size: 1.4rem; max-width: 700px; margin: 0 auto 2.5rem; color: var(--gray); }

    .btn {
      display: inline-block;
      background:transparent; 
      border:2px solid var(--primary); 
      color: white;
      padding: 1rem 2.5rem;
      border-radius: 50px;
      text-decoration: none;
      font-weight: bold;
      font-size: 1.1rem;
      transition: all 0.3s;
      box-shadow: 0 0 25px rgba(255,51,102,0.5);
    }
    .btn:hover { background: var(--primary-dark); transform: translateY(-4px); }

    .btn-hero
    {
      display: flex;
      gap: 60px; 
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 150px;
      font-size: 1rem;
    }

    

    .btn-whatsapp{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;

        width: fit-content;
        margin: 2rem auto; /*centrado horizontal*/

        padding: 1rem 2.5rem;
        border-radius: 50px;
        text-decoration: none;

        font-weight: bold;
        font-size: 1.1rem;
        color: white;

        background: var(--gradient-whatsapp);
        box-shadow: 0 0 25px rgba(241, 255, 51, 0.5);
        transition: all 0.3s;
    }
    .btn-whatsapp:hover
    {
      transform: scale(1.05);
    }
    .whatsapp-icon{ width: 28px;}

    /* ICONOS MUSICA STICKY */
    .container-musica
    {
        position:fixed;
        top: 20px;
        right: 20px;
        width: 100px;
        height: 100px;
        cursor: pointer;
        z-index: 10000;
        animation: float 3s ease-in-out infinite;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-5px); }
    }
    

    .technics img
    {
      position: absolute;
      width: 100px;
      top: 0; 
      left: 0;
      z-index: 0;
    }
    /*VINILO*/
    .vinil
    {
      position: absolute;
      width: 100px;
      top: 2px; 
      left: 3px;
    }
    .vinil img
    {
        width: 75%;
        z-index: 1;
        
    }

    /*Animacion de giro*/
    .girando
    {
        animation: girar 2s linear infinite;
    }
    @keyframes girar
    {
        from {transform: rotate(0deg);}
        to{transform: rotate(360deg);}
    }

    /* PLAY / STOP */
    .play-stop {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-70%, -50%);
      width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

        .play-stop img {
          position: absolute;
          width: 51%;
        }
        
        #stopIcon {
          transform-origin: center center;
          opacity: 0;
        }

    /* BRAZO */
    .brazo 
    {
      position: absolute;
      width: 100%;

        top: 0;
        left: 0;
        z-index: 2;
    }

    .brazo img 
    {
      position: absolute;
      height: 50px;
      top:8px;
      left: 73px;
        transform-origin: 5px 5px;
        transition: transform 0.5s ease;
        filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.5));
    }

    /* Estados */
    .brazo-play 
    {
        transform: rotate(10deg);
    }
    .brazo-stop
    {
        transform: rotate(0deg);
    }


    /* NAV TABS */
    .nav-tabs {
      background: var(--dark-2);
      padding: 1rem 0;
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      justify-content: center;
      gap: 2rem;
      border-bottom: 1px solid rgba(255,51,102,0.2);
    }
    .tab-btn {
      background: transparent;
      border: none;
      color: var(--light);
      font-size: 1.2rem;
      padding: 0.8rem 2rem;
      cursor: pointer;
      transition: all 0.3s;
      position: relative;
    }
    .tab-btn.active {
      color: var(--terciary);
      font-weight: bold;
    }
    .tab-btn.active::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 50%;
      transform: translateX(-50%);
      width: 60%;
      height: 3px;
      background: var(--terciary-dark);
    }

    /********** CONTENIDO **********/

    #contenido{position: relative; overflow: hidden;}
    /*vista actual*/
    .vista{ width: 100%; will-change: transform, opacity;}
    /*animaciones*/
    .slide-in-right {animation: slideInRight 0.5s cubic-bezier(.77,0,.18,1);}
    .slide-out-right{animation: slideOutRight 0.5s cubic-bezier(.77,0,.18,1);}
    .slide-in-left  {animation: slideInLeft 0.5s cubic-bezier(.77,0,.18,1);}
    .slide-out-left {animation: slideOutLeft 0.5s cubic-bezier(.77,0,.18,1);}
    /*keyframes*/
    @keyframes slideInRight 
    {
      from {transform: translateX(100%); opacity: 0;;}
      to {transform: translateX(0); opacity: 1;filter: blur(0);}
    }
    @keyframes slideOutRight 
    {
      from { transform: translateX(0); opacity: 1;filter: blur(5px); }
      to   { transform: translateX(100%); opacity: 0; filter: blur(0);}
    }
    @keyframes slideInLeft
    {
      from {transform: translateX(-100%); opacity: 0;filter: blur(5px);}
      to {transform: translateX(0%); opacity: 1;filter: blur(0);} 
    }
    @keyframes slideOutLeft 
    {
      from {transform: translateX(0%); opacity: 1;filter: blur(5px);}
      to{transform: translateX(-100%); opacity: 0;filter: blur(0);}  
    }


    /*********TABS**********/
    .tab-content { display: none; padding: 60px 20px; }
    .tab-content.active { display: block; }

    .container { max-width: 1200px; margin: 0 auto 4em auto; }

    h2.section-title {
      text-align: center;
      font-size: 3.2rem;
      margin-bottom: 3rem;
      color: var(--terciary);
      position: relative;
    }
    h2.section-title::after {
      content: '';
      width: 120px;
      height: 5px;
      background: var(--terciary-dark);
      position: absolute;
      bottom: -15px;
      left: 50%;
      transform: translateX(-50%);
    }

  
    .about p { font-size: 1.35rem; max-width: 800px; margin: 0 auto; text-align: center; }

   /************************************************************************/
    /*****************************GALERIA***********************************/
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 1.5rem;
    }
    .gallery-item {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0,0,0,0.5);
      transition: all 0.4s;
    }
    .gallery-item:hover {
      transform: scale(1.05);
      box-shadow: 0 20px 40px rgba(95, 51, 255, 0.3);
    }
    .gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .gallery-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(transparent, rgba(15,15,26,0.9));
      padding: 1.5rem 1rem 1rem;
      color: white;
      font-size: 1.1rem;
      text-align: center;
      transform: translateY(30px);
      opacity: 0;
      transition: all 0.4s;
    }
    .gallery-item:hover .gallery-overlay {
      transform: translateY(0);
      opacity: 1;
    }

    .gallery-item .carousel {
      height: 100%;
    }

    .carousel-item img {
      height: 600px;
      object-fit: cover;
      border-radius: 16px;
    }

    /************************************************************************/
    /********************************** CV **********************************/

    .cv-container {
      display: grid;
      grid-template-columns: 1fr 380px;
      gap: 3rem;
      background: rgba(255,255,255,0.03);
      border-radius: 16px;
      padding: 3rem;
      border: 1px solid rgba(119, 51, 255, 0.15);
    }
    @media (max-width: 900px) {
      .cv-container { grid-template-columns: 1fr; }
    }
    .cv-right { text-align: center; }

    .cv-photo-wrapper /*Contenedor*/
    {
      position: relative;
      width: 100%;
      max-width: 280px;
      margin: auto auto 2rem;
      border-radius: 15px;
      justify-content: center;
    }
    
    .cv-photo { /*Imagen*/
      width: 100%;
      border-radius: 15px;
      display: block;
      position: relative;
      z-index: 1;
    }
    

    .cv-photo-wrapper::before { /*Borde NEON*/
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 18px;
    background: linear-gradient(45deg, #ff00ff, #800080, #0000ff, #00ffff);
    z-index: 0;
    animation: neonRotate 4s linear infinite;
    }

    .cv-photo-wrapper::after {
  content: "";
  position: absolute;
  inset: 0px;
  border-radius: 18px;
  background: linear-gradient(45deg, #ff00ff, #800080, #0000ff, #00ffff);
  filter: blur(20px);
  z-index: -1;
  animation: neonRotate 4s linear infinite;
}

/* ANIMACION */
  @keyframes neonRotate {
    0%{filter: hue-rotate(0deg);}
    100%{filter: hue-rotate(360deg)}
    
  }

    .sub-cv{
      text-align:center; 
      margin-bottom:2rem; 
      font-size:1.1rem; 
      color:var(--gray);
    }

    .cv-left p{font-size: 1.25rem;}
    .cv-experience ul { list-style: none; }

    .cv-experience li {
      margin-bottom: 2.3rem;
      position: relative;
      padding-left: 1.5rem;
    }
    .cv-experience li::before {
      content: '▶';
      color: var(--primary);
      position: absolute;
      left: 0;
    }
    .cv-experience h3 { color: var(--primary); margin: 0.4rem 0 0.2rem; }

    .cv-experience a {text-decoration: none;   color: #33CBFF;}

    .cv-experience .period { color: var(--gray); font-size: 0.9rem; }

    .contact-cv a{
      color: #33CBFF;
    }

    .download-btn {
      display: block;
      width: 100%;
      background: var(--secondary);
      color: white;
      padding: 1.2rem;
      border-radius: 50px;
      text-align: center;
      font-size: 1.15rem;
      text-decoration: none;
      margin: 2rem 0 1rem;
      font-weight: bold;
    }
    .download-btn:hover { background: #00ffaa; color: #111; }

    /* CONTACTO */
    .contact {
      /* background: #f2e0ff1f; */
      background-image: url(./assets/img/back-contact2.webp);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: bottom;
      text-align: center;
      padding: 3rem 20px;
    }
    .contact-info {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 2.5rem;
      font-size: 1.8rem;
    }
    .contact-info a{ color: #33CBFF;}

    .ubicacion {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: var(--gray);
      font-size: 0.95rem;
    }

    .ubicacion i {
      color: #AA5B6F;
    }

    footer {
      background: black;
      text-align: center;
      padding: 2rem;
      color: #666;
    }

    @media (max-width: 768px) 
    {
      /*******************************************/
      /*                 MAIN                    */
      /*******************************************/
      .hero h1 { font-size: 3.5rem; }
      .hero h2 { font-size: 2rem; }
      .gallery-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
      .tagline{font-size: 1rem;}

        .container-musica
        {   top: 60px;
            right: 55px;
            width: 60px;
            height: 60px;

        }
        .play-stop {
          position: absolute;
          top: 67%;
          left: 50%;
          transform: translate(-29%, -50%);
          width: 80%; 
        }

        .play-stop img {
          position: absolute;
          width: 51%;
        }

        .brazo 
        {
            left: -2px;
        }

        .brazo img 
        {
            width: 30%;
        }
        

        .btn-hero
        {
          gap: 10px; 
          justify-content: center;
          margin-top: 120px;
          font-size: 0.9rem; 
        }

        .nav-tabs {
          display: flex;
          justify-content: space-between; 
          width: 100%; /* clave */
          padding: 0.3rem 1rem;
        }

        .tab-btn {
          flex: 1;              /* que todos ocupen el mismo espacio */
          text-align: center;   /* centrar texto */
          padding: 0.8rem 0;    /* menos padding lateral */
        }

        .about p { font-size: 1rem; line-height: 1.7;}

        a
        {
            font-size: 17px;
        }
        
        .contact span{
          font-size: 1rem ;
        }

        .contact-info , .contact-info a
        {
          font-size: 1rem ;
        }

        

        .tab-content {
            padding: 60px 15px;
        }

        .contact {
          background-position: 0% 100%;
        }

        .whatsapp-icon
        {
          width: 50px;
        }

      /*******************************************/
      /*                  CV                     */
      /*******************************************/  
      .cv-experience ul
      {
        padding-left: 0%;
      }

      .cv-experience li 
      {
        margin-bottom: 2.3rem;
        position: relative;
        padding-left: 0.5rem;
      }
      .cv-experience li::before {
        content: '▶';
        color: var(--primary);
        position: absolute;
        left: 0;
      }

      .sub-cv{font-size: 0.7rem;}

      .cv-experience h5 {
        padding-left: 20px;
      }
      .contact-cv , .contact-cv a, .download-btn
      {
          font-size: 0.88rem ;
      }
      
      .cv-left p{line-height: 1.7; font-size: 1rem;}

      .cv-experience h3 { color: var(--primary); margin: 0.4rem 0 0.2rem; }

      .cv-experience .period { color: var(--gray); font-size: 0.9rem; }
      
      .cv-photo-wrapper{
        margin: 0 auto 2rem;
      }
      /*******************************************/
      /*                 MAIN                    */
      /*******************************************/  
  }