/* =========================================================
   PROPOSTA PEDAGÓGICA — page styles (identidade: branco /
   verde-claro / amarelo / verde alecrim / verde-escuro)
   Full-bleed, sem emojis, sem bullets.
   ========================================================= */

/* ---- FILOSOFIA — faixa amarela full-bleed, vídeo colado à direita ---- */
.filosofia{ background:var(--sol); color:var(--ink); }
.filosofia__grid{ display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch; }
.filosofia__text{
  padding:clamp(48px,7vw,104px) clamp(40px,5vw,80px) clamp(48px,7vw,104px) var(--gutter);
  display:flex; flex-direction:column; justify-content:center;
}
.filosofia .eyebrow{ color:var(--ink-soft); }
.filosofia .eyebrow::before{ background:var(--alecrim); }
.filosofia h2{ font-size:clamp(2rem,4vw,3.2rem); margin-bottom:1.4rem; }
.filosofia h2 em{ font-style:italic; color:var(--ink); }
.filosofia p{ color:var(--ink); font-size:1.08rem; max-width:48ch; }
.filosofia p + p{ margin-top:1rem; }
@media (max-width:900px){
  .filosofia__grid{ grid-template-columns:1fr; }
  .filosofia__col{ order:-1; }
  /* empilhado nao existe coluna ao lado: o respiro extra a direita so roubaria
     largura do texto (chegava a 23 caracteres por linha em 320px) */
  .filosofia__text{ padding-inline:var(--gutter); }
}

/* Foto colada na lateral direita, ocupando a altura toda da faixa — mesmo
   tratamento de .brasil e .ingles. Antes ela flutuava no meio do amarelo com
   folga irregular (115px em cima e embaixo, 40px na direita), o que destoava
   das outras faixas da pagina. */
.filosofia__col{ position:relative; align-self:stretch; min-height:clamp(360px,42vw,560px); }
.fil-foto{ position:absolute; inset:0; padding:0; }
.fil-foto image-slot{ position:absolute; inset:0; width:100%; height:100%; box-shadow:none; }
@media (max-width:900px){ .filosofia__col{ min-height:clamp(300px,70vw,440px); } }

/* ---- CICLOS — Acordeão Horizontal (desktop) / Vertical (mobile) ---- */
.ciclos__head{ text-align:center; max-width:640px; margin:0 auto clamp(40px,6vw,64px); }
.ciclos__head .eyebrow{ justify-content:center; }
.ciclos h2{ font-size:clamp(2rem,4vw,3.2rem); margin-top:.55rem; }
.ciclos__head p{ color:var(--ink-soft); margin-top:1rem; }

.ciclos__row{
  width:100vw; margin-left:calc(50% - 50vw);
  display:flex; gap:8px; padding:0 8px;
  height:clamp(420px,46vw,560px);
}

.cyc{
  position:relative; overflow:hidden;
  flex-grow:1; flex-shrink:1; flex-basis:0%;
  min-width:0; color:#fff; cursor:pointer; isolation:isolate;
  border-radius:0;
  transition:flex-grow .6s cubic-bezier(.4,0,.2,1);
}
.cyc.is-active{ flex-grow:3; }

.cyc__media{ position:absolute; inset:0; z-index:0; }
.cyc__media image-slot{ width:100%; height:100%; display:block; }

.cyc::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,15,10,.08) 0%, rgba(20,15,10,.06) 40%, rgba(20,15,10,.72) 100%);
  transition:opacity .5s ease;
}

.cyc__solid{
  position:absolute; inset:0; z-index:2; background:var(--cyc,var(--alecrim));
  opacity:0; transition:opacity .5s ease; pointer-events:none;
}

.cyc__age{
  position:absolute; top:clamp(14px,1.5vw,22px); left:clamp(14px,1.5vw,22px);
  z-index:5; display:inline-block;
  font-family:var(--font-display); font-weight:600;
  font-size:.76rem; letter-spacing:.02em;
  background:rgba(255,255,255,.2); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  padding:.35em .85em; border-radius:20px; color:#fff;
  transition:background .4s ease;
  pointer-events:none;
}
.cyc.is-active .cyc__age{ background:rgba(255,255,255,.28); }

.cyc__face{
  position:absolute; inset:auto 0 0 0; z-index:3;
  padding:clamp(18px,2vw,28px);
  transition:opacity .35s ease, transform .45s ease;
  pointer-events:none;
}
.cyc__face h3{ font-size:clamp(1.3rem,1.7vw,1.7rem); line-height:1.08; color:#fff; }

.cyc.is-active .cyc__solid{ opacity:1; }
.cyc.is-active::after{ opacity:0; }
.cyc.is-active .cyc__face{ opacity:0; transform:translateY(-12px); }

.cyc__hover{
  position:absolute; inset:0; z-index:4;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(22px,2.2vw,34px);
  opacity:0; transform:translateY(18px);
  transition:opacity .5s ease .12s, transform .55s cubic-bezier(.4,0,.2,1) .08s;
  color:#fff; pointer-events:none;
}
.cyc.is-active .cyc__hover{ opacity:1; transform:none; }

.cyc__hover .cyc__tag{
  font-family:var(--font-display); font-weight:600; font-size:.74rem;
  text-transform:uppercase; letter-spacing:.14em; opacity:.85;
}
.cyc__hover h3{
  font-size:clamp(1.4rem,1.9vw,1.9rem); line-height:1.06;
  margin:.5rem 0 .8rem; color:#fff;
}
.cyc__hover p{ font-size:1rem; line-height:1.5; color:rgba(255,255,255,.92); }

.cyc[style*="--sol"] .cyc__hover, .cyc[style*="--laranja"] .cyc__hover{ color:var(--ink); }
.cyc[style*="--sol"] .cyc__hover h3, .cyc[style*="--laranja"] .cyc__hover h3{ color:var(--ink); }
.cyc[style*="--sol"] .cyc__hover p, .cyc[style*="--laranja"] .cyc__hover p{ color:rgba(42,58,48,.85); }

/* ---- Mobile: Acordeão Vertical ---- */
@media (max-width:768px){
  .ciclos__row{
    flex-direction:column; height:auto;
    padding:0 16px; gap:6px;
  }
  .cyc{
    flex:none !important; min-height:88px;
    border-radius:0;
    transition:min-height .5s cubic-bezier(.4,0,.2,1);
  }
  .cyc.is-active{ min-height:clamp(360px,76vw,440px); }

  .cyc__face{
    inset:0; display:flex; align-items:center;
    padding:0 24px;
  }
  .cyc__face h3{ font-size:1.15rem; }

  .cyc__age{ top:50%; left:auto; right:20px; transform:translateY(-50%); font-size:.72rem; }
  .cyc.is-active .cyc__age{ top:clamp(12px,3vw,18px); right:auto; left:20px; transform:none; }
}

/* ---- Ciclo com texto mais longo (Maternal) ----
   O texto do Maternal é ~40% maior que o dos outros três ciclos. Em vez de
   mexer no card padrão, este modificador dá mais largura ao card aberto e
   um corpo de texto ligeiramente menor — só neste ciclo. */
.cyc--long.is-active{ flex-grow:3.5; }
.cyc--long .cyc__hover p{ font-size:.95rem; line-height:1.46; }
@media (max-width:768px){
  /* no acordeão vertical o card aberto ganha a altura extra que o texto pede */
  .cyc--long.is-active{ min-height:calc(clamp(360px,76vw,440px) + 120px); }
}
@media (max-width:430px){
  /* telas estreitas: mais linhas de texto, mais altura */
  .cyc--long.is-active{ min-height:calc(clamp(360px,76vw,440px) + 200px); }
}

/* ---- BRASILIDADE & afrocentralidade — faixa verde-escura full-bleed ---- */
.brasil{ width:100vw; margin-left:calc(50% - 50vw); background:rgb(220,231,222); color:var(--ink); }
.brasil__in{ --pady:clamp(56px,7vw,104px); display:grid; grid-template-columns:1.1fr .9fr; align-items:stretch; }
.brasil__text{ padding:var(--pady) clamp(40px,5vw,80px) var(--pady) var(--gutter); display:flex; flex-direction:column; justify-content:center; }
.brasil .eyebrow{ color:rgba(42,58,48,.72); }
.brasil .eyebrow::before{ background:var(--sol); }
.brasil h2{ font-size:clamp(2rem,4vw,3.2rem); margin:.7rem 0 1.4rem; color:var(--ink); }
.brasil h2 em{ font-style:italic; color:var(--alecrim); }
.brasil p{ color:rgba(42,58,48,.9); font-size:1.08rem; max-width:50ch; line-height:1.65; }
.brasil p + p{ margin-top:1.2rem; }
.brasil__media{ position:relative; align-self:stretch; min-height:clamp(360px,40vw,520px); }
.brasil__media image-slot{ position:absolute; inset:0; width:100%; height:100%; }
@media (max-width:900px){ .brasil__in{ grid-template-columns:1fr; } .brasil__text{ padding-bottom:0; } .brasil__media{ min-height:clamp(300px,70vw,440px); } }

/* ---- AULAS EXTRAS — cards hover-revela-texto ---- */
.extras__head{ text-align:center; max-width:640px; margin:0 auto clamp(36px,5vw,58px); }
.extras__head .eyebrow{ justify-content:center; }
.extras h2{ font-size:clamp(2rem,4vw,3.2rem); margin-top:.55rem; }
.extras__head p{ color:var(--ink-soft); margin-top:1rem; }
.extras__grid{ width:100vw; margin-left:calc(50% - 50vw); display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.xcard{
  position:relative; overflow:hidden;
  min-height:clamp(380px,40vw,460px);
  color:#fff; cursor:pointer; isolation:isolate;
}
.xcard image-slot{ position:absolute; inset:0; width:100%; height:100%; z-index:-2; }
.xcard__scrim{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,15,10,.1) 0%, rgba(20,15,10,.32) 50%, rgba(20,15,10,.86) 100%);
  transition:background .4s ease; }
.xcard:hover .xcard__scrim{ background:linear-gradient(180deg, rgba(20,15,10,.5), rgba(20,15,10,.82)); }
.xcard__in{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(22px,1.9vw,30px); pointer-events:none; }
.xcard h3{ font-size:clamp(1.45rem,1.9vw,1.85rem); line-height:1.04; color:#fff; }
.xcard__num{ position:absolute; top:clamp(20px,1.8vw,28px); left:clamp(22px,1.9vw,30px); font-family:var(--font-display); font-weight:600; font-size:.82rem; letter-spacing:.14em; color:rgba(255,255,255,.78); pointer-events:none; }
.xcard__reveal{
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .45s cubic-bezier(.2,.8,.2,1), opacity .35s, margin-top .45s;
  margin-top:0;
}
.xcard__reveal p{ color:rgba(255,255,255,.92); font-size:.98rem; line-height:1.5; margin:0; }
.xcard:hover .xcard__reveal,
.xcard:focus-within .xcard__reveal{ max-height:200px; opacity:1; margin-top:.8rem; }
.xcard__line{ width:34px; height:3px; background:var(--sol); margin-top:1rem; transition:width .4s ease; }
.xcard:hover .xcard__line{ width:64px; }
@media (max-width:980px){ .extras__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .extras__grid{ grid-template-columns:1fr; } .xcard{ min-height:300px; } .xcard__reveal{ max-height:200px; opacity:1; margin-top:.8rem; } }

/* ---- CONTRATURNO (após especialistas) ---- */
.contraturno{ margin-top:clamp(40px,5vw,68px); padding-top:clamp(32px,4vw,48px); border-top:2px solid var(--ink); }
.contraturno > h2{ font-size:clamp(2rem,4vw,3.2rem); margin-bottom:.6rem; }
.contraturno > p{ color:var(--ink-soft); font-size:1.08rem; margin-bottom:clamp(28px,4vw,48px); }
.contraturno .eyebrow{ margin-bottom:1.4rem; }
.contraturno__items{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); }
.contraturno__it h3{ font-size:clamp(1.3rem,2vw,1.7rem); margin-bottom:.5rem; }
.contraturno__it p{ color:var(--ink-soft); font-size:1.05rem; max-width:46ch; }
@media (max-width:680px){ .contraturno__items{ grid-template-columns:1fr; gap:28px; } }

/* ---- INGLÊS — faixa verde alecrim full-bleed, galeria colada à direita ---- */
.ingles{ width:100vw; margin-left:calc(50% - 50vw); background:var(--alecrim); color:#fff; }
.ingles__grid{ display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch; }
.ingles__text{
  padding:clamp(48px,7vw,104px) clamp(40px,5vw,80px) clamp(48px,7vw,104px) var(--gutter);
  display:flex; flex-direction:column; justify-content:center;
}
.ingles .eyebrow{ color:rgba(255,255,255,.85); }
.ingles .eyebrow::before{ background:var(--sol); }
.ingles h2{ font-size:clamp(2rem,4vw,3.2rem); margin:.7rem 0 1.1rem; color:#fff; }
.ingles h2 em{ font-style:italic; color:var(--sol); }
.ingles p{ color:rgba(255,255,255,.92); font-size:1.08rem; max-width:48ch; }
.ingles__pdf{
  display:flex; align-items:center; gap:1rem; background:rgba(255,255,255,.14);
  padding:1.1rem 1.3rem; margin:1.8rem 0 0; transition:background .25s;
}
.ingles__pdf:hover{ background:rgba(255,255,255,.22); }
.ingles__pdf .pdfico{ width:48px; height:48px; flex:none; background:#fff; color:var(--alecrim); display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:.8rem; }
.ingles__pdf b{ font-family:var(--font-display); display:block; color:#fff; }
.ingles__pdf span{ font-size:.9rem; color:rgba(255,255,255,.85); }
.ingles__gallery{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:0; min-height:clamp(380px,44vw,600px); }
.ingles__gallery image-slot{ width:100%; height:100%; }
.ingles__gallery .span2{ grid-column:span 2; }
.ingles__gallery--single{ grid-template-columns:1fr; grid-template-rows:1fr; }
@media (max-width:900px){ .ingles__grid{ grid-template-columns:1fr; } .ingles__gallery{ min-height:clamp(300px,70vw,440px); } }

/* =========================================================
   A seção de SEGMENTOS (Alecrim / Urucum) foi removida da
   Proposta pedagógica em 13/10/2026, a pedido da Mari. O CSS
   dela saiu junto.

   Se um dia voltar: os tokens .es-seg--alecrim e
   .es-seg--urucum continuam definidos no marca.css, junto com
   a observação de contraste que vale a pena não redescobrir —
   verde Alecrim sobre fundo Menta dá 1,87:1 e é ilegível.

   Os logos das submarcas com endosso continuam em
   assets/marca/ (alecrim-endosso.svg e urucum-endosso.svg).
   ========================================================= */