@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;700;900&family=Inter:wght@400;500;700&display=swap');

.feguibasket-footer {
  width: 100%;
  background-color: #0b0c0e; /* Negro profundo de cancha */
  border-top: 4px solid #870000; /* Línea superior de acento FIBA/NBA */
  padding: 80px 40px 30px 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 60px;
  font-family: 'Inter', sans-serif;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    right: 10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(135, 0, 0, 0.05) 0%, rgba(0,0,0,0) 70%);
    pointer-events: none;
  }

  .footer-header {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 50px;
    z-index: 2;

    h3 {
      font-family: 'Oswald', sans-serif;
      font-size: 1.2rem;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: #ffffff;
      margin: 0 0 25px 0;
      font-weight: 700;
      position: relative;
      display: inline-block;

      &::after {
        content: '';
        position: absolute;
        bottom: -6px;
        left: 0;
        width: 30px;
        height: 2px;
        background-color: #870000;
      }
    }

    /* COLUMNA 1: MARCA Y REDES */
    .footer-brand-column {
      width: 32%;
      display: flex;
      flex-direction: column;
      gap: 35px;

      .logo-text {
        font-family: 'Oswald', sans-serif;
        text-transform: uppercase;
        
        h1 {
          font-size: 3rem;
          font-weight: 900;
          margin: 0;
          line-height: 0.9;
          letter-spacing: 0.5px;
          background: linear-gradient(270deg, #008000, #ffffff, #ff0000, #0000ff, #008000);
          background-size: 400% 400%;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          animation: banderaWave 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }

        p {
          font-size: 0.85rem;
          margin: 10px 0 0 0;
          font-weight: 500;
          letter-spacing: 1px;
          color: #9ca3af;
        }
      }

      .footer-socials {
        h3 {
          font-size: 0.95rem;
          letter-spacing: 1px;
          margin-bottom: 16px;
          color: #6b7280;
          &::after { display: none; }
        }

        .social-links-grid {
          display: flex;
          gap: 10px;

          .icon-link {
            width: 42px;
            height: 42px;
            background-color: #111317;
            border: 1px solid #1f242c;
            color: #9ca3af;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            text-decoration: none;
            transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);

            &:hover {
              color: #ffffff;
              background-color: #870000;
              border-color: #870000;
              transform: translateY(-3px);
              box-shadow: 0 6px 15px rgba(135, 0, 0, 0.3);
            }
          }
        }
      }
    }

    /* COLUMNA 2: NAVEGACIÓN ESTILO MENÚ OFICIAL */
    .footer-nav-column {
      width: 28%;

      .footer-links-list {
        display: flex;
        flex-direction: column;
        gap: 14px;

        .link-nav {
          display: flex;
          align-items: center;
          gap: 12px;

          a {
            text-decoration: none;
            color: #9ca3af;
            font-size: 0.95rem;
            font-weight: 500;
            letter-spacing: 0.3px;
            transition: all 0.2s ease;

            &:hover {
              color: #ffffff;
              padding-left: 6px;
            }
          }

          .nav-badge-img {
            width: 44px;
            height: 22px;
            object-fit: cover;
            border-radius: 3px;
            border: 1px solid #2d3139;
            filter: grayscale(20%);
            transition: filter 0.2s ease;

            &:hover {
              filter: grayscale(0%);
            }
          }

          &:hover a::before {
            content: '➔';
            color: #870000;
            margin-right: 6px;
            font-size: 0.8rem;
          }
        }
      }
    }

    /* COLUMNA 3: CAJA DE SUSCRIPCIÓN TIPO NEWSLETTER PRO */
    .footer-subscribe-column {
      width: 35%;
      display: flex;
      flex-direction: column;

      .subscribe-desc {
        color: #9ca3af;
        font-size: 0.9rem;
        line-height: 1.6;
        margin: 0 0 24px 0;
      }

      .subscribe-form {
        display: flex;
        width: 100%;
        height: 50px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

        input {
          flex: 1;
          background-color: #111317;
          border: 1px solid #1f242c;
          border-right: none;
          border-radius: 4px 0 0 4px;
          color: #ffffff;
          padding: 0 18px;
          font-size: 0.95rem;
          font-family: 'Inter', sans-serif;
          outline: none;
          transition: all 0.25s ease;

          &:focus {
            border-color: #870000;
            background-color: #14171c;
          }

          &::placeholder {
            color: #4b5563;
          }
        }

        button {
          padding: 0 28px;
          background-color: #870000;
          border: none;
          border-radius: 0 4px 4px 0;
          color: #ffffff;
          font-family: 'Oswald', sans-serif;
          font-size: 1rem;
          text-transform: uppercase;
          font-weight: 700;
          letter-spacing: 1px;
          cursor: pointer;
          transition: all 0.2s ease;

          &:hover {
            background-color: #a80000;
            box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
          }

          &:active {
            transform: scale(0.98);
          }
        }
      }
    }
  }

  /* BARRA INFERIOR DE CRÉDITOS Y LEGAL */
  .footer-legal-bar {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    border-top: 1px solid #1f242c;
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    z-index: 2;

    .legal-left {
      display: flex;
      align-items: center;
      gap: 24px;
      flex: 1;

      .footer-logo-wrap {
        width: 55px;
        height: 55px;
        flex-shrink: 0;
        background-color: #111317;
        border: 1px solid #1f242c;
        border-radius: 50%;
        padding: 8px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .copyright-text {
        small {
          font-size: 0.75rem;
          color: #4b5563;
          line-height: 1.5;
          display: block;
          max-width: 720px;
        }
      }
    }

    .legal-right {
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 12px 24px;

      a {
        color: #6b7280;
        font-size: 0.8rem;
        font-weight: 500;
        text-decoration: none;
        transition: color 0.2s ease;
        position: relative;

        &:hover {
          color: #ffffff;
        }
        
        &:not(:last-child)::after {
          content: '•';
          position: absolute;
          right: -14px;
          color: #2d3139;
          pointer-events: none;
        }
      }
    }
  }
}

/* KEYFRAMES DE LA BANDERA (SUAVIZADA) */
@keyframes banderaWave {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* RESPONSIVE DESIGN TOTAL (TABLET & MÓVIL) */
@media screen and (max-width: 1024px) {
  .feguibasket-footer {
    padding: 60px 30px 30px 30px;
    gap: 45px;

    .footer-header {
      flex-direction: column;
      gap: 40px;

      .footer-brand-column, 
      .footer-nav-column, 
      .footer-subscribe-column {
        width: 100%;
      }
      
      .footer-brand-column .logo-text h1 {
        font-size: 2.5rem;
      }
    }

    .footer-legal-bar {
      flex-direction: column;
      align-items: flex-start;
      gap: 25px;

      .legal-left {
        width: 100%;
      }

      .legal-right {
        width: 100%;
        justify-content: flex-start;
        
        a:not(:last-child)::after {
          display: none; 
        }
      }
    }
  }
}

@media screen and (max-width: 480px) {
  .feguibasket-footer {
    padding: 50px 20px 20px 20px;
    
    .footer-header .footer-subscribe-column .subscribe-form {
      height: auto;
      flex-direction: column;
      gap: 10px;
      box-shadow: none;

      input {
        border-radius: 4px;
        border-right: 1px solid #1f242c;
        height: 48px;
      }

      button {
        border-radius: 4px;
        height: 48px;
        width: 100%;
      }
    }

    .footer-legal-bar .legal-left {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
    }
  }
}