/* ==========================================================================
   AULAS — barra animada e mídia
   ========================================================================== */
.aulas-explainer{
  --white:#FFFFFF; --green:#95C93D; --blue:#3D76BB; --navy:#212C65;
  --border:#E7EBF3; --shadow:0 12px 28px rgba(15,32,79,.08);
  background:#fff; color: var(--navy);
  padding-block: clamp(32px, 6vw, 84px);
}
.aulas-explainer__container{ position:relative; }
.aulas-explainer__grid{ display:grid; gap: clamp(20px, 3vw, 36px); align-items: center; }

.aulas-bar{
  display:block; width: clamp(220px, 44%, 520px); height: 6px;
  background: linear-gradient(90deg, var(--green), var(--blue)); border-radius: 3px;
  margin-bottom: clamp(14px, 2.2vw, 22px);
  position: relative; will-change: transform; animation: aulasBarSlide 6s ease-in-out infinite alternate;
}
@keyframes aulasBarSlide{ from{ transform: translateX(-8px) } to{ transform: translateX(8px) } }

.aulas-title{ margin:0; font-weight:900; letter-spacing:.02em; color: var(--navy); font-size: clamp(1.8rem, 5.8vw, 3rem); line-height:1.02; }
.aulas-title .accent {
  display: inline-block;
  position: relative;

  /* gradiente só com tuas 3 cores */
  background: linear-gradient(
    120deg,
    #95C93D 0%,
    #3D76BB 50%,
    #212C65 100%
  );
  background-size: 200% auto;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;

  animation: shine 6s ease-in-out infinite; /* mais lento */
}

@keyframes shine {
  0%   { background-position: 200% center; }
  50%  { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.aulas-lead{ font-weight:300; margin: clamp(10px, 1.8vw, 16px) 0 clamp(14px, 2.2vw, 22px); max-width: 60ch; color:#2E3553; line-height:1.7; font-size: clamp(1rem, 1.8vw, 1.12rem); }

.aulas-list{ margin:0 0 clamp(18px, 2.6vw, 28px) 0; padding:0; list-style:none; display:grid; gap:10px; }
.aulas-list__item{ border-left: 4px solid var(--green); padding-left: 10px; color:#354069; letter-spacing: 1.5px; font-size: 16px; }

.aulas-actions{ display:flex; gap:12px; flex-wrap: wrap; }
.aulas-cta{
  display:inline-flex; align-items:center; gap:8px; padding: 12px 18px;
  border-radius: 12px; border:1.6px solid var(--blue);
  background:#F5F8FF; color:#1E3B80; font-weight:800; text-decoration:none;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
  transition: transform .15s ease, box-shadow .2s ease, background .15s ease, color .15s ease;
}
.aulas-cta:hover{ transform: translateY(-1px); background: var(--blue); color:#fff; box-shadow: 0 12px 28px rgba(61,118,187,.24); }
.aulas-cta__icon{ width:18px; height:18px; }

.aulas-col--media{ display:grid; gap: clamp(12px, 2vw, 18px); }
.aulas-thumbs{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 16px); }
.aulas-thumb, .aulas-heroimg{
  margin:0; position:relative; background:#f6f8fc; border:1px solid var(--border);
  border-radius:16px; overflow:hidden; box-shadow: var(--shadow);
  animation: aulasPop .8s ease both;
}
.aulas-thumb:nth-child(2){ animation-delay:.08s; }
.aulas-heroimg{ aspect-ratio: 4/5; animation-delay:.12s; }
.aulas-thumb__img, .aulas-heroimg__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@keyframes aulasPop{ from{ opacity:0; transform: translateY(10px) scale(.98) } to{ opacity:1; transform: translateY(0) scale(1) } }

/* >=980px (já existia) */
@media (min-width: 980px){
  .aulas-explainer__grid{ grid-template-columns: 1.1fr .9fr; }
}

/* Prefere redução de movimento (já existia) */
@media (prefers-reduced-motion: reduce){
  .aulas-bar{ animation: none; }
}

/* <=980px (já existia) */
@media (max-width: 980px){
  .aulas-heroimg{ aspect-ratio: 16/10; }
}

/* <=640px (NOVO): mídia não "cresce" demais; cantos mais suaves */
@media (max-width: 640px){
  .aulas-heroimg{ aspect-ratio: 16/11; }
  .aulas-thumbs{ gap: 10px; }
  .aulas-thumb, .aulas-heroimg{ border-radius: 14px; }
}

/* <=640px (NOVO): CTAs em 2 colunas */
@media (max-width: 640px){
  .aulas-actions{
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    justify-items: stretch;
  }
  .aulas-actions :where(a, button){
    width: 90%;
    justify-content: center;
    padding: 10px 14px;
    font-size: 12px;
    border-radius: 12px;
  }
}

@media (max-width: 540px){
  .aulas-actions :where(a, button){
    width: 100%;
    padding: 10px 10px;
    font-size: 10px;
  }
  .aulas-list__item{ font-size: 12px; }

}
@media (max-width: 400px){
  
    #aulas-actions.aulas-actions{
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    grid-template-columns: unset !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }

  /* filho ocupa 100% e sem margens extras */
  #aulas-actions > a,
  #aulas-actions > button{
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 14px;        /* ajuste se quiser */
    font-size: 12px;           /* ajuste se quiser */
    border-radius: 12px;
  }

  .aulas-list__item{ font-size: 12px; }

}