@layer components {
  /* ==========================================================================
     Horario Web Page Styles
     Uses .hw- prefix — sky blue palette for time tracking
     ========================================================================== */

  /* HW hero: deep sky blue brand gradient */
  .hero.hw-hero {
    background: linear-gradient(135deg, var(--color-hw-700) 0%, var(--color-hw-600) 50%, var(--color-hw-500) 100%);
    animation: none;

    &::before,
    &::after {
      display: none;
    }

    & h1 {
      font-size: clamp(2rem, 4vw, 3.5rem);
      color: var(--color-white);

      & em {
        font-style: italic;
        color: var(--color-hw-200);
        -webkit-text-fill-color: var(--color-hw-200);
        background: none;
        -webkit-background-clip: unset;
        background-clip: unset;
      }
    }

    & .hero-subtitle {
      color: rgba(255, 255, 255, 0.75);
    }

    & .btn-primary {
      background: var(--color-white);
      color: var(--color-hw-700);

      &:hover {
        background: var(--color-hw-200);
        color: var(--color-hw-700);
      }
    }

    & .btn-secondary {
      color: var(--color-white);
      border-color: rgba(255, 255, 255, 0.4);

      &:hover {
        background: rgba(255, 255, 255, 0.12);
        color: var(--color-white);
        border-color: rgba(255, 255, 255, 0.7);
        box-shadow: none;
      }
    }
  }

  /* Override desktop left-align for hw hero */
  @media (min-width: 48rem) {
    .hw-hero .hero-actions {
      justify-content: flex-start;
    }
  }

  /* Hero illustration */
  .hw-hero .hero-illustration svg {
    filter: drop-shadow(0 4px 20px rgba(3, 105, 161, 0.15));
  }

  /* Features section: override card gradient to sky blue */
  .hw-features .service-card::before,
  .hw-features .service-card::after {
    background: linear-gradient(135deg, var(--color-hw-600), var(--color-hw-400));
  }

  .hw-features .service-card:nth-child(2)::before,
  .hw-features .service-card:nth-child(2)::after {
    background: linear-gradient(135deg, var(--color-hw-500), var(--color-hw-300));
  }

  .hw-features .service-card:nth-child(3)::before,
  .hw-features .service-card:nth-child(3)::after {
    background: linear-gradient(135deg, var(--color-hw-400), var(--color-hw-700));
  }

  .hw-features .service-card:nth-child(4)::before,
  .hw-features .service-card:nth-child(4)::after {
    background: linear-gradient(135deg, var(--color-hw-700), var(--color-hw-500));
  }

  .hw-features .service-card:nth-child(5)::before,
  .hw-features .service-card:nth-child(5)::after {
    background: linear-gradient(135deg, var(--color-hw-600), var(--color-hw-400));
  }

  /* Staggered reveal for 4th and 5th feature cards */
  .is-visible .hw-features .service-card:nth-child(4) {
    transition-delay: 450ms;
  }

  .is-visible .hw-features .service-card:nth-child(5) {
    transition-delay: 600ms;
  }

  /* Benefits section: light sky blue background */
  .hw-benefits {
    background: var(--color-hw-50);
  }

  .hw-benefits .service-card::before,
  .hw-benefits .service-card::after {
    background: linear-gradient(135deg, var(--color-hw-600), var(--color-hw-400));
  }

  .hw-benefits .service-card:nth-child(2)::before,
  .hw-benefits .service-card:nth-child(2)::after {
    background: linear-gradient(135deg, var(--color-hw-500), var(--color-hw-300));
  }

  .hw-benefits .service-card:nth-child(3)::before,
  .hw-benefits .service-card:nth-child(3)::after {
    background: linear-gradient(135deg, var(--color-hw-700), var(--color-hw-500));
  }

  .hw-benefits .service-card:nth-child(4)::before,
  .hw-benefits .service-card:nth-child(4)::after {
    background: linear-gradient(135deg, var(--color-hw-400), var(--color-hw-700));
  }

  /* HW CTA: sky blue gradient background */
  .hw-cta-section.cta-section {
    background: linear-gradient(135deg, var(--color-hw-700), var(--color-hw-600), var(--color-hw-500));
    background-size: 200% 200%;

    & .hero-actions {
      justify-content: center;
    }
  }

  /* Secondary button on dark CTA background needs white styling */
  .hw-cta-section .btn-secondary {
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.5);

    &:hover {
      background: rgba(255, 255, 255, 0.15);
      color: var(--color-white);
      border-color: var(--color-white);
      box-shadow: none;
    }
  }

  /* Badge in HW context uses sky blue */
  .hw-features .section-badge {
    color: var(--color-hw-700);
    background: var(--color-hw-100);
  }

  /* Card headings in HW use sky blue */
  .hw-features .service-card h3,
  .hw-benefits .service-card h3 {
    color: var(--color-hw-700);
  }
}