/* ==========================================================
   Colégio ECCOS — Diferenciais
   ========================================================== */

.secao { padding-block: 96px; }

.diferenciais { background: var(--branco); }

.diferenciais__topo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 48px;
}
.diferenciais__topo h2 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--azul-profundo);
  text-wrap: balance;
}
.diferenciais__topo p {
  margin: 0;
  max-width: 50ch;
  font-size: 1.1rem;
  line-height: 1.65;
  color: #3d5273;
}

/* Grade assimétrica */
.diferenciais__grade {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
.dif {
  position: relative;
  padding: 30px;
  border-radius: 26px;
  overflow: hidden;
}
.dif h3 {
  margin: 18px 0 8px;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.2;
}
.dif p { margin: 0; line-height: 1.6; font-size: 1.02rem; }

.dif__icone {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 16px;
}
.dif__icone svg { width: 27px; height: 27px; }

/* 1 — destaque azul */
.dif--bilingue {
  grid-column: span 3;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px;
  background: var(--azul);
  color: var(--branco);
}
.dif--bilingue .dif__icone { background: rgba(255,255,255,.16); width: 64px; height: 64px; }
.dif--bilingue .dif__icone svg { width: 32px; height: 32px; }
.dif--bilingue h3 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); margin-top: 28px; letter-spacing: -.01em; }
.dif--bilingue p { font-size: 1.12rem; max-width: 40ch; color: #d6e5fb; }
.dif__frases {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 36px;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1rem;
}
.dif__frases span {
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--branco);
  color: var(--azul-profundo);
}
.dif__frases span:nth-child(even) { background: var(--sol); }
/* quadrados decorativos do universo da marca */
.dif--bilingue::after {
  content: "";
  position: absolute;
  right: -34px; top: -34px;
  width: 150px; height: 150px;
  border-radius: 34px;
  background: var(--turquesa);
  transform: rotate(14deg);
  opacity: .85;
}
.dif--bilingue::before {
  content: "";
  position: absolute;
  right: 70px; top: 62px;
  width: 62px; height: 62px;
  border-radius: 18px;
  background: var(--coral);
  transform: rotate(-10deg);
  opacity: .9;
}

/* 2..5 */
.dif--cuidado   { grid-column: span 3; background: var(--gelo); border: 1px solid var(--linha); }
.dif--integral  { grid-column: span 3; background: var(--turquesa-claro); }
.dif--vivencias { grid-column: span 3; background: #fff4da; }
.dif--corpo     { grid-column: span 3; background: #ffe6e2; }

.dif--cuidado .dif__icone  { background: var(--azul);     color: var(--branco); }
.dif--integral .dif__icone { background: var(--turquesa); color: var(--branco); }
.dif--vivencias .dif__icone{ background: var(--sol);      color: var(--azul-profundo); }
.dif--corpo .dif__icone    { background: var(--coral);    color: var(--branco); }

.dif--cuidado h3, .dif--integral h3, .dif--vivencias h3, .dif--corpo h3 { color: var(--azul-profundo); }
.dif--cuidado p, .dif--integral p, .dif--vivencias p, .dif--corpo p { color: #3d5273; }

/* Em telas largas as quatro menores formam duas colunas ao lado do destaque */
@media (min-width: 1021px) {
  .dif--cuidado, .dif--integral, .dif--vivencias, .dif--corpo { grid-column: span 3; }
  .diferenciais__grade { grid-template-columns: 1.15fr 1fr 1fr; }
  .dif--bilingue { grid-column: 1; grid-row: 1 / span 2; }
  .dif--cuidado   { grid-column: 2; grid-row: 1; }
  .dif--integral  { grid-column: 3; grid-row: 1; }
  .dif--vivencias { grid-column: 2; grid-row: 2; }
  .dif--corpo     { grid-column: 3; grid-row: 2; }
}

@media (max-width: 1020px) {
  .secao { padding-block: 72px; }
  .diferenciais__topo { grid-template-columns: 1fr; gap: 16px; margin-bottom: 36px; }
  .diferenciais__grade { grid-template-columns: 1fr 1fr; }
  .dif--bilingue { grid-column: 1 / -1; grid-row: auto; }
  .dif--cuidado, .dif--integral, .dif--vivencias, .dif--corpo { grid-column: span 1; grid-row: auto; }
}
@media (max-width: 640px) {
  .diferenciais__grade { grid-template-columns: 1fr; }
  .dif--cuidado, .dif--integral, .dif--vivencias, .dif--corpo { grid-column: 1; }
  .dif, .dif--bilingue { padding: 26px; }
}