.differentialCards {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--32);
    max-width: var(--maxContent);
    margin: 0 auto
}

.differentialCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--16);
    width: 100%;
    background-color: var(--white);
    padding: var(--24);
    min-height: 32rem;
    height: auto;
    border-radius: var(--mediumRadius);
    box-shadow: var(--grayShadowLarge);

}

.benefitsSectionText h2 {
    color: var(--gray);
}

.differentialCardTitle {
    font-weight: bold;
    text-transform: uppercase;
    color: var(--gray);
}

.differentialCardLine {
    width: 30%;
    height: 0.1rem;
    background-color: var(--yellow);

}

.differentialCardSubtitle {
    max-width: 25rem;
    font-weight: 300;
    color: var(--secondaryTextGray);
}

.sectionLine {
    display: block;
    width: 100%;
    height: 0.1rem;
    background: rgba(254, 188, 17, 0.50);
}

.faqSection {
    background: inherit;
}

.faqSectionText h2 {
    color: var(--gray);
}

.faqSectionText p {
    color: var(--secondaryTextGray);
}

.faqSectionCard{
    box-shadow: var(--grayShadowSmall);
}

.professorCards {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--32);
}

.professor-card {
    background: var(--white);
    border-radius: 1.6rem;
    overflow: hidden;
    width: 100%;
    max-width: 32rem;
    box-shadow: var(--grayShadowLarge);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.differentialCard {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .professor-card:hover,
    .differentialCard:hover {
        transform: none;
    }
}

    /* ===== ÁREA DA FOTO ===== */
    .professor-photo {
      position: relative;
      height: 32rem;
      background: var(--gray);
      overflow: hidden;
    }

    .professor-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
    }

    /* Linha decorativa amarela no rodapé da foto */
    .professor-photo::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 0.4rem;
      background: linear-gradient(to right, var(--gray)0%, var(--gray)50%, var(--yellow)50%, var(--yellow)100%);
      z-index: var(--z-card-icon);
    }

    /* ===== BADGES NA FOTO ===== */
    .badge {
      position: absolute;
      font-size: 1.1rem;
      padding: 0.6rem 1rem;
      border-radius: 99.9rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      z-index: var(--z-card-label);
    }

    .badge-status {
      top: 1.2rem;
      left: 1.2rem;
      background: #333333ca;
      backdrop-filter: blur(0.8rem);
      color: var(--white);
    }

    .badge-status .dot {
      width: 0.7rem;
      height: 0.7rem;
      background: var(--greenPulse);
      border-radius: 50%;
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }

    /* ===== CONTEÚDO DO CARD ===== */
    .professor-info {
      padding: 2rem;
    }

    /* Header: Nome + Rating */
    .professor-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 1rem;
      gap: 0.8rem;
    }

    .professor-name {
      font-size: 1.7rem;
      font-weight: 700;
      color: var(--gray);
    }

    .professor-rating {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 1.3rem;
      color: var(--gray);
      flex-shrink: 0;
    }

    /* Indicador de faixa — círculo da cor da faixa com tarja preta no meio */
    .belt-icon {
      display: inline-block;
      width: 4rem;
      height: 1rem;
      background: var(--belt-color);
      position: relative;
      flex-shrink: 0;
    }

    .belt-icon::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      right: 0;
      height: 1rem;
      width: 1.4rem;
      background: var(--belt-stripe);
      transform: translateY(-50%);
    }

    .belt-white  { --belt-color: var(--white);  --belt-stripe: var(--white); box-shadow: inset 0 0 0 0.1rem var(--placeholderColor); }
    .belt-blue   { --belt-color: #3e6cea;       --belt-stripe: #000; }
    .belt-purple { --belt-color: #8b40cd;       --belt-stripe: #000; }
    .belt-brown  { --belt-color: #6e4222;       --belt-stripe: #000; }
    .belt-black  { --belt-color: #282828;       --belt-stripe: hwb(0 5% 11%); }

    /* Tags */
    .professor-tags {
      display: flex;
      gap: 0.6rem;
      margin-bottom: 1.4rem;
      flex-wrap: wrap;
    }

    .tag {
      font-size: 1.1rem;
      padding: 0.4rem 0.9rem;
      border-radius: 0.5rem;
      font-weight: 500;
    }

    .tag-primary {
      background: var(--gray);
      color: var(--white);
      font-weight: 600;
    }

    .tag-secondary {
      background: rgba(128, 128, 128, 0.111);
      color: var(--gray);
    }

    /* CTAs */
    .btn {
      width: 100%;
      border: none;
      padding: 1.2rem;
      border-radius: 0.8rem;
      font-weight: 600;
      font-size: 1.4rem;
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: inherit;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.6rem;
    }

    .btn-primary {
      background: var(--yellowGradient);
      color: var(--white);
      margin-bottom: 0.8rem;
    }

    .btn-primary:hover {
      transform: translateY(-0.1rem);
    }

    .btn-secondary-group {
      display: flex;
      gap: 0.6rem;
    }

    .btn-secondary {
      flex: 1;
      background: transparent;
      border: 0.1rem solid var(--placeholderColor);
      padding: 0.9rem;
      border-radius: 0.7rem;
      font-size: 1.2rem;
      cursor: pointer;
      color: var(--secondaryTextGray);
      transition: all 0.2s ease;
      font-family: inherit;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
    }

    .btn-icon-only {
      flex: 0 0 auto;
      padding: 0.9rem 1.2rem;
    }

    .btn i {
      font-size: 1.5rem;
    }   

    .teacherSection {
        padding: var(--32) var(--24);
    }

    .teacherSectionText {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

@media (min-width: 768px) {

    .differentialCards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: start;
    }

    /* Tablet — cards de professor em 2 colunas */
    .professorCards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 32rem));
        justify-content: center;
        align-items: start;
        max-width: 80rem;
        margin: 0 auto;
    }

    .professor-card {
        max-width: none;
    }

}

@media (min-width: 1024px) {

    /* Desktop — cards de professor em 3 colunas */
    .professorCards {
        grid-template-columns: repeat(3, minmax(0, 32rem));
        max-width: 112rem;
    }

}



/* =================================
   Flashlight effect — cards de subpáginas
   ================================= */
.professor-card,
.differentialCard {
    position: relative;
}

.professor-card::after,
.differentialCard::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        40rem circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(254, 188, 17, 0.05),
        transparent 50%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    border-radius: inherit;
}

.professor-card:hover::after,
.differentialCard:hover::after {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .professor-card::after,
    .differentialCard::after {
        display: none;
    }
}

.pageCtaSection {
    text-align: center;
    padding: var(--48) var(--containerLateralPadding);
    background: var(--grayGradient);
}

.pageCtaSection h2 {
    color: var(--white);
    margin-bottom: var(--8);
}

.pageCtaSection p {
    color: var(--whiteOpacity);
    margin-bottom: var(--32);
}

@media (min-width: 1024px) {
    #headerPageMenu {
        display: flex;
    }
}