/* =========================================================
   INICIO. So a portada usa este ficheiro.
   Traduz o banner da campanha: azul profundo, curva organica
   a cortar a peca, fotografia encostada a curva.
   ========================================================= */
.hero{ position:relative; background:var(--grad-hero); color:#FFFFFF; overflow:hidden; }
.hero__in{ position:relative; z-index:2; padding-block:var(--e6) var(--e10); }
.hero h1{ font-size:clamp(2.4rem,10.5vw,3.6rem); margin:var(--e3) 0 0; color:#FFFFFF; }
.hero__lema{ font-size:clamp(1.1rem,4.6vw,1.45rem); font-weight:400; color:var(--hero-sec); margin-top:var(--e2); }
/* O rotulo sobre o titulo, em versalete claro em vez de pastilha */
.rot--b{ color:var(--hero-sec); }
/* Os dois dados praticos numa linha. O coral marca a gamificacao
   pela cor da letra, nao por uma bolha a mais. */
.hero__dados{ margin-top:var(--e3); font-size:.9375rem; color:var(--hero-sec); }
.hero__dados b{ color:#FFFFFF; font-weight:700; }
.hero__acc{ display:grid; gap:10px; margin-top:var(--e5); }
/* A frase que explica o programa vem primeiro e maior.
   A segunda linha da o detalhe pratico. */
.hero__que{ margin-top:var(--e4); color:#FFFFFF; max-width:50ch; font-size:1.0625rem; }
.hero__sub{ margin-top:var(--e2); color:var(--hero-sec); max-width:50ch; font-size:.9375rem; }
.hero__media{ position:relative; z-index:2; margin-top:var(--e5); }
.hero__foto{ position:relative; width:100%; aspect-ratio:5/4; overflow:hidden;
  border-radius:200px 24px 24px 200px / 100% 24px 24px 100%; }
.hero__foto img{ width:100%; height:100%; object-fit:cover; object-position:56% 30%; }
/* A curva branca que fecha a mancha, como no banner */
.hero::after{ content:""; position:absolute; left:-14%; right:-14%; bottom:-64px; height:128px;
  border-radius:50% 50% 0 0 / 100% 100% 0 0; background:var(--fondo); z-index:1; }

.hero--cierre{ text-align:center; }
.hero--cierre h2{ font-size:clamp(1.8rem,6.6vw,2.4rem); color:#FFFFFF; }
.hero--cierre p{ color:var(--hero-sec); max-width:48ch; margin:var(--e3) auto 0; }
.hero--cierre .hero__acc{ max-width:340px; margin-inline:auto; justify-content:center; }

/* ---------- Tira dos seis idiomas ---------- */
.tira{ padding-block:var(--e6) var(--e5); }
.tira__lista{ display:flex; flex-wrap:wrap; gap:10px; }
/* Canto suave, nao capsula: a tira e uma lista de escolhas, e a
   forma redonda ficou reservada aos dois botoes do hero. */
.tira__it{ display:inline-flex; align-items:baseline; gap:9px; min-height:var(--tap);
  padding:0 18px; border-radius:12px; border:1.5px solid var(--bd-f); background:transparent; }
.tira__it:hover{ border-color:var(--azul); background:var(--sup); }
.tira__sal{ font-size:1rem; font-weight:800; letter-spacing:-.02em; color:var(--hondo); }
.tira__nom{ font-size:.8125rem; font-weight:600; color:var(--tinta-2); }
.tira__pie{ display:flex; align-items:center; gap:14px; margin-top:var(--e5); flex-wrap:wrap; }
.tira__pie img{ height:24px; width:auto; }
.tira__pie span{ font-size:.8125rem; color:var(--tinta-2); }

/* ---------- Blocos alternados ---------- */
.bloque{ display:grid; gap:var(--e5); align-items:center; }
.bloque h2{ font-size:clamp(1.7rem,6.4vw,2.3rem); margin-top:12px; }
.bloque p{ color:var(--tinta-2); margin-top:var(--e2); max-width:52ch; }
.puntos{ display:grid; gap:12px; margin-top:var(--e4); }
.puntos li{ position:relative; padding-left:27px; color:var(--tinta-2); font-size:.9375rem; }
.puntos li::before{ content:""; position:absolute; left:0; top:9px; width:10px; height:10px;
  border-radius:999px; background:var(--grad-mixto); }
/* Fotografia dentro da curva da marca, nunca num retangulo seco */
.curva-foto{ width:100%; max-width:420px; margin-inline:auto; aspect-ratio:1/1; overflow:hidden;
  border-radius:999px 999px 72px 999px; border:1px solid var(--bd); }
.curva-foto img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Cartoes das sete mecanicas ---------- */
.grid{ display:grid; gap:14px; }
.card{ background:#FFFFFF; border:1px solid var(--bd); border-radius:var(--r); padding:24px; }
.card h3{ font-size:1.0625rem; margin-bottom:7px; }
.card__n{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
  border-radius:999px; background:var(--sup); border:1px solid var(--bd);
  color:var(--azul-txt); font-size:.6875rem; font-weight:800; margin-bottom:14px; }
.mec-tit{ font-size:clamp(1.7rem,6.4vw,2.3rem); margin:12px 0 var(--e2); }
.mec-lead{ color:var(--tinta-2); max-width:58ch; margin-bottom:var(--e5); }
.mec-adap{ margin-top:var(--e5); }

@media (min-width:640px){
  .hero__acc{ display:flex; gap:12px; }
  .grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1000px){
  .grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .bloque{ grid-template-columns:1fr 1fr; gap:var(--e8); }
  .bloque--inv .bloque__txt{ order:2; }
  .curva-foto{ max-width:none; }
  /* A fotografia encosta a curva pela direita, como no banner.
     O texto fica na mesma margem esquerda da tira de baixo. */
  .hero__in{ padding-block:var(--e10) var(--e10); }
  /* A foto ocupa 52% da largura do ecra, mas o texto vive no wrap,
     que e centrado e tem tecto. Amarrar a coluna so a 600px fazia
     as duas encontrarem-se em ecras estreitos de portatil. A
     medida em vw garante sempre uma goteira entre as duas. */
  .hero__col{ max-width:min(600px, 40vw); }
  .hero--cierre .hero__col{ max-width:none; }
  .hero__media{ position:absolute; inset:0 0 0 auto; width:52%; margin:0; z-index:1; }
  .hero__foto{ width:100%; height:100%; aspect-ratio:auto;
    border-radius:340px 0 0 340px / 100% 0 0 100%; }
}

/* ---------- Faixa de retomar ----------
   So aparece a quem tem alguma coisa a meio, e fica logo abaixo
   da tira dos idiomas: quem volta encontra o seu antes de ter de
   escolher outra vez. Escolher de novo custa mais que retomar. */
.seg{ padding-block:0 var(--e6); }
.seg__lista{ display:grid; gap:10px; margin-top:var(--e3); }
.seg__it{ display:grid; gap:10px; align-items:center;
  padding:18px 22px; border-radius:var(--r);
  background:#FFFFFF; border:1px solid var(--bd); box-shadow:var(--sombra); }
.seg__it:hover{ border-color:var(--azul); }
.seg__n{ font-size:1.0625rem; font-weight:700; }
.seg__i{ font-size:.6875rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tinta-3); }
.seg .barra{ display:block; height:7px; border-radius:999px;
  background:var(--sup); overflow:hidden; }
.seg .barra i{ display:block; height:100%; width:0; border-radius:999px;
  background:var(--grad-marca); }
.seg__p{ font-size:.8125rem; font-weight:700; color:var(--tinta-2); }
.seg__cta{ display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--tap); padding:0 24px; border-radius:999px;
  background:var(--grad-azul); color:#FFFFFF;
  font-size:.875rem; font-weight:700; }

@media (min-width:760px){
  .seg__it{ grid-template-columns:1.6fr 1fr 2fr auto auto; gap:20px; }
  .seg__i{ text-align:left; }
}

/* A linha das outras entradas, por baixo dos dois botoes. Sao
   caminhos alternativos, nao accoes principais, por isso sao
   texto sublinhado e nao mais botoes a competir. */
.hero__ou{ margin-top:var(--e3); font-size:.875rem; color:var(--hero-sec); }
.hero__ou a{ color:#FFFFFF; text-decoration:underline;
  text-underline-offset:3px; }
.hero__ou a:hover{ text-decoration-thickness:2px; }

/* Os cartoes dos jogos passaram a portas: levam ao jogo na pagina
   dos jogos, onde estao os exercicios em que ele abre. */
.card--ir{ display:block; color:inherit; }
.card--ir:hover{ border-color:var(--azul); background:var(--sup); }
.card__d{ display:block; margin-top:6px; font-size:.875rem; color:var(--tinta-2); }