/* Estilos del Footer */
    .footer {
      background-color: var(--footer-bg-dark);
      color: var(--text-dark);
      /* Use theme variable */
      transition: background-color 0.3s ease, color 0.3s ease;
      padding: 3rem 0 2rem;
      /* Adjusted padding */
      border-top: 1px solid rgba(var(--text-dark-rgb), 0.08);
      /* Subtle top border */
    }

    body.light-mode .footer {
      background-color: var(--footer-bg-light);
      color: var(--text-light);
      /* Use theme variable */
      border-top: 1px solid rgba(var(--text-light-rgb), 0.08);
    }

    .footer-heading {
      font-weight: 600;
      margin-bottom: 1.2rem;
      border-left: 3px solid var(--brand-color-dark);
      padding-left: 10px;
      position: relative;
      color: var(--text-dark);
      /* Use theme variable */
      font-size: 1.1rem;
      /* Slightly adjusted size */
    }

    body.light-mode .footer-heading {
      border-left-color: var(--brand-color-light);
      color: var(--text-light);
      /* Use theme variable */
    }

    .footer-text {
      font-size: 0.9rem;
      /* Adjusted size */
      line-height: 1.6;
      opacity: 0.85;
      /* Slightly increased opacity */
      color: var(--text-dark);
      /* Use theme variable */
    }

    body.light-mode .footer-text {
      color: var(--text-light);
    }

    .footer-links {
      list-style: none;
      padding-left: 0;
    }

    .footer-links li {
      margin-bottom: 0.5rem;
    }

    .footer-link {
      color: var(--text-dark);
      /* Use theme variable */
      opacity: 0.9;
      text-decoration: none;
      transition: color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
      display: inline-block;
      font-size: 0.9rem;
      /* Adjusted size */
    }

    body.light-mode .footer-link {
      color: var(--text-light);
      /* Use theme variable */
    }

    .footer-link:hover {
      color: var(--brand-color-dark);
      opacity: 1;
      transform: translateX(5px);
    }

    body.light-mode .footer-link:hover {
      color: var(--brand-color-light);
    }

    .social-icons {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
    }

    .social-icon {
      font-size: 1.3rem;
      /* Slightly adjusted */
      /* Icon color is set by specific classes like .facebook, .instagram etc. */
      transition: color 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      /* Adjusted size */
      height: 38px;
      /* Adjusted size */
      border-radius: 50%;
      background-color: rgba(var(--text-dark-rgb), 0.08);
      /* Subtle background for dark mode */
      text-decoration: none;
      /* Remove underline from <a> if any */
    }

    /* Colores específicos para cada red social */
    .footer .social-icons a.facebook,
    .footer .social-icons a.facebook:visited {
      color: #1877F2;
    }

    .footer .social-icons a.instagram,
    .footer .social-icons a.instagram:visited {
      color: #E4405F;
    }

    .footer .social-icons a.linkedin,
    .footer .social-icons a.linkedin:visited {
      color: #0A66C2;
    }

    .footer .social-icons a.twitter,
    .footer .social-icons a.twitter:visited {
      color: #1DA1F2;
    }

    .footer .social-icons a.x,
    .footer .social-icons a.x:visited {
      color: #000000;
    }

    body.light-mode .footer .social-icons a.x,
    body.light-mode .footer .social-icons a.x:visited {
      color: #000000;
    }

    /* X light-mode hover: black pill with white icon */
    body.light-mode .footer .social-icons a.x:hover {
      background: #000000 !important;
      color: #ffffff !important;
    }
    body.light-mode .footer .social-icons a.x:hover i {
      color: #ffffff !important;
    }

    body.light-mode .social-icon {
      background-color: rgba(var(--text-light-rgb), 0.06);
      /* Subtle background for light mode */
    }

    .social-icon:hover {
      transform: scale(1.15);
      /* Slightly larger hover effect */
      background-color: rgba(var(--text-dark-rgb), 0.15);
      /* Darken BG slightly on hover for dark mode */
    }

    body.light-mode .social-icon:hover {
      background-color: rgba(var(--text-light-rgb), 0.12);
      /* Lighten BG slightly on hover for light mode */
    }

    .newsletter-input {
      border: 1px solid rgba(var(--text-dark-rgb), 0.2);
      background-color: rgba(var(--text-dark-rgb), 0.05);
      color: var(--text-dark);
      padding: 0.7rem 1rem;
      /* Increased padding */
      transition: all 0.3s ease;
      border-radius: 6px 0 0 6px;
      /* Match button radius if it has one */
    }

    body.light-mode .newsletter-input {
      border: 1px solid rgba(var(--text-light-rgb), 0.25);
      background-color: rgba(var(--text-light-rgb), 0.03);
      color: var(--text-light);
    }

    .newsletter-input:focus {
      box-shadow: 0 0 0 0.25rem rgba(138, 43, 226, 0.25);
      border-color: var(--brand-color-dark);
      outline: none;
    }

    body.light-mode .newsletter-input:focus {
      border-color: var(--brand-color-light);
    }

    .newsletter-input::placeholder {
      color: rgba(var(--text-dark-rgb), 0.6);
      /* Use RGB variable for opacity */
    }

    body.light-mode .newsletter-input::placeholder {
      color: rgba(var(--text-light-rgb), 0.6);
      /* Use RGB variable for opacity */
    }

    .newsletter-btn {
      padding: 0.7rem 1rem;
      /* Match input padding */
      transition: all 0.3s ease;
      /* Inherits .btn-primary-custom styles, hover is handled there */
      border-radius: 0 6px 6px 0;
    }

    /* Removed .newsletter-btn:hover as .btn-primary-custom:hover should apply */

    .newsletter-feedback {
      font-size: 0.8rem;
      /* Adjusted size */
      min-height: 20px;
      color: var(--text-dark);
      /* Use theme variable */
      opacity: 0.8;
    }

    body.light-mode .newsletter-feedback {
      color: var(--text-light);
    }

    .footer-divider {
      border-color: rgba(var(--text-dark-rgb), 0.1);
      /* Subtle divider */
      margin: 2rem 0;
    }

    body.light-mode .footer-divider {
      border-color: rgba(var(--text-light-rgb), 0.1);
      /* Subtle divider */
    }

    .copyright-text {
      font-size: 0.85rem;
      /* Adjusted size */
      opacity: 0.75;
      /* Adjusted opacity */
      color: var(--text-dark);
      /* Use theme variable */
    }

    body.light-mode .copyright-text {
      color: var(--text-light);
    }

    /* Botón Volver Arriba */
    .back-to-top-btn {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 45px;
      height: 45px;
      background-color: var(--brand-color-dark);
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
      z-index: 1000;
    }

    body.light-mode .back-to-top-btn {
      background-color: var(--brand-color-light);
    }

    .back-to-top-btn:hover {
      transform: translateY(-5px);
      background-color: #7b1fa2;
      color: white;
    }

    .back-to-top-btn.visible {
      opacity: 1;
      visibility: visible;
    }

    /* Ajustes Responsive */
    @media (max-width: 767.98px) {
      .footer-heading {
        margin-top: 1rem;
        font-size: 1.1rem;
      }

      .social-icons {
        gap: 10px;
      }

      .social-icon {
        font-size: 1.2rem;
        width: 35px;
        height: 35px;
      }

      .back-to-top-btn {
        width: 40px;
        height: 40px;
        bottom: 15px;
        right: 15px;
      }
    }

    /* Toast notifications */
    .sf-toast-container {
      position: fixed;
      right: 1.5rem;
      bottom: 1.5rem;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      z-index: 2000;
      pointer-events: none;
    }

    .sf-toast {
      min-width: 240px;
      max-width: 320px;
      background: rgba(12, 14, 22, 0.92);
      color: #ffffff;
      border-radius: 12px;
      padding: 0.85rem 1rem;
      display: flex;
      gap: 0.75rem;
      align-items: flex-start;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.25s ease, transform 0.25s ease;
      pointer-events: auto;
      border: 1px solid rgba(145, 71, 255, 0.18);
      backdrop-filter: blur(6px);
    }

    body.light-mode .sf-toast {
      background: rgba(255, 255, 255, 0.95);
      color: #111111;
      border: 1px solid rgba(145, 71, 255, 0.12);
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
    }

    .sf-toast.show {
      opacity: 1;
      transform: translateY(0);
    }

    .sf-toast-icon {
      flex-shrink: 0;
      font-size: 1.2rem;
      margin-top: 0.15rem;
      color: #a481ff;
    }

    body.light-mode .sf-toast-icon {
      color: #7a38ff;
    }

    .sf-toast-body {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
    }

    .sf-toast-title {
      font-weight: 600;
      font-size: 0.95rem;
    }

    .sf-toast-text {
      font-size: 0.85rem;
      line-height: 1.3;
      opacity: 0.85;
    }

    /* Reel task floating notifications */
    .reel-task-container {
      position: fixed;
      right: 1.5rem;
      bottom: 5.75rem;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      z-index: 2100;
      max-width: 340px;
      pointer-events: none;
    }

    .reel-task-card {
      background: linear-gradient(135deg, rgba(20, 22, 32, 0.98), rgba(12, 13, 20, 0.96));
      border: 1px solid rgba(145, 71, 255, 0.2);
      color: #ffffff;
      border-radius: 16px;
      padding: 0.9rem 1rem;
      box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 0.25s ease, transform 0.25s ease;
      pointer-events: auto;
      backdrop-filter: blur(6px);
    }

    .reel-task-card.show {
      opacity: 1;
      transform: translateY(0);
    }

    .reel-task-card.is-clickable {
      cursor: pointer;
    }

    .reel-task-card.is-clickable:hover {
      border-color: rgba(145, 71, 255, 0.45);
    }

    body.light-mode .reel-task-card.is-clickable:hover {
      border-color: rgba(225, 48, 108, 0.45);
    }

    body.light-mode .reel-task-card {
      background: rgba(255, 255, 255, 0.98);
      color: #141414;
      border: 1px solid rgba(122, 56, 255, 0.18);
      box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
    }

    .reel-task-header {
      display: flex;
      align-items: flex-start;
      gap: 0.7rem;
    }

    .reel-task-icon {
      width: 36px;
      height: 36px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(145, 71, 255, 0.18);
      color: #b390ff;
      flex-shrink: 0;
    }

    body.light-mode .reel-task-icon {
      background: rgba(225, 48, 108, 0.14);
      color: #e1306c;
    }

    .reel-task-meta {
      flex: 1;
      min-width: 0;
    }

    .reel-task-title {
      font-weight: 600;
      font-size: 0.95rem;
      margin-bottom: 0.1rem;
    }

    .reel-task-subtitle {
      font-size: 0.8rem;
      opacity: 0.75;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .reel-task-dismiss {
      border: none;
      background: transparent;
      color: inherit;
      opacity: 0.6;
      padding: 0;
      margin-left: auto;
      font-size: 0.85rem;
    }

    .reel-task-dismiss:hover {
      opacity: 1;
    }

    .reel-task-status {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 0.6rem;
      font-size: 0.78rem;
      opacity: 0.85;
    }

    .reel-task-progressbar {
      width: 100%;
      height: 6px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.12);
      margin-top: 0.45rem;
    }

    body.light-mode .reel-task-progressbar {
      background: rgba(0, 0, 0, 0.08);
    }

    .reel-task-progressbar span {
      display: block;
      height: 100%;
      width: 10%;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(145, 71, 255, 0.9), rgba(124, 77, 255, 0.9));
      transition: width 0.3s ease;
    }

    body.light-mode .reel-task-progressbar span {
      background: linear-gradient(90deg, rgba(225, 48, 108, 0.9), rgba(247, 119, 55, 0.9));
    }

    /* Phase indicator styles */
    .reel-task-phase-indicator {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 6px 0;
      font-size: 0.75rem;
    }

    .reel-task-phase-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #bb86fc;
      animation: phasePulse 1.5s ease-in-out infinite;
    }

    body.light-mode .reel-task-phase-dot {
      background: #e1306c;
    }

    @keyframes phasePulse {

      0%,
      100% {
        opacity: 1;
        transform: scale(1);
      }

      50% {
        opacity: 0.6;
        transform: scale(0.85);
      }
    }

    .reel-task-phase-name {
      font-weight: 500;
      color: #bb86fc;
      white-space: nowrap;
    }

    body.light-mode .reel-task-phase-name {
      color: #e1306c;
    }

    .reel-task-phase-bar {
      flex: 1;
      height: 4px;
      background: rgba(187, 134, 252, 0.2);
      border-radius: 2px;
      overflow: hidden;
    }

    body.light-mode .reel-task-phase-bar {
      background: rgba(225, 48, 108, 0.15);
    }

    .reel-task-phase-bar span {
      display: block;
      height: 100%;
      width: 0%;
      background: #bb86fc;
      transition: width 0.3s ease;
    }

    body.light-mode .reel-task-phase-bar span {
      background: #e1306c;
    }

    .reel-task-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-top: 0.75rem;
    }

    .reel-task-action {
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      background: rgba(255, 255, 255, 0.08);
      color: inherit;
      font-size: 0.75rem;
      padding: 0.25rem 0.75rem;
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      text-decoration: none;
    }

    body.light-mode .reel-task-action {
      border: 1px solid rgba(0, 0, 0, 0.1);
      background: rgba(0, 0, 0, 0.04);
    }

    .reel-task-action:hover {
      border-color: rgba(145, 71, 255, 0.45);
      text-decoration: none;
      color: inherit;
    }

    body.light-mode .reel-task-action:hover {
      border-color: rgba(225, 48, 108, 0.45);
    }

    @media (max-width: 575.98px) {
      .reel-task-container {
        left: 1rem;
        right: 1rem;
        bottom: 6.5rem;
        max-width: none;
      }
    }