/* ---- ESCOLINHA DE FUTEBOL
 *
 * Pagina de angariacao: quem chega aqui vem do passa-palavra ou de um
 * cartaz e esta a decidir se vale a pena levar o filho no sabado. Por
 * isso o que manda e a data do proximo treino e o formulario — o resto
 * e contexto.
 *
 * A pagina e do Filipe, nao e da casa: nao ha precos nem horarios de
 * turma, porque nao sao nossos para prometer. */

.escola{max-width:620px;margin:0 auto}

.escola .voltar{
  display:inline-block;margin-bottom:1rem;
  color:var(--tinta-suave);text-decoration:none;font-size:.9rem;
}
.escola .voltar:hover{color:var(--tinta)}

/* ---- topo */
.esc-topo{text-align:center;margin-bottom:1.5rem}
/* O ficheiro tem 96 de largura e e mostrado ao tamanho real, dentro de um
   circulo branco — crescer mais so o desfocava. Como o original tem fundo
   branco, o circulo fecha-o sem se ver a emenda. */
.esc-logo{
  display:block;margin:0 auto .9rem;width:96px;height:auto;
  padding:.65rem;background:#fff;border:1px solid var(--linha);
  border-radius:50%;box-shadow:0 2px 10px rgba(0,0,0,.06);
  box-sizing:content-box;
}
.esc-topo h1{font-size:1.75rem;margin:0 0 .35rem}
.esc-sub{margin:0;color:var(--tinta-suave);font-size:.98rem;line-height:1.5}

/* ---- o cartao do treino experimental: e a razao de ser da pagina */
.esc-destaque{
  background:linear-gradient(180deg,#f3faeb,#eaf5df);
  border:1.5px solid #cde3b5;border-radius:16px;
  padding:1.25rem 1.35rem;text-align:center;margin-bottom:1.5rem;
}
.esc-destaque-etiqueta{
  font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;
  font-weight:800;color:#5a8a2f;
}
.esc-destaque-dia{
  font-size:1.6rem;font-weight:800;color:var(--tinta);
  margin:.3rem 0 .45rem;letter-spacing:-.01em;
}
.esc-destaque-nota{
  font-size:.9rem;color:#46543c;line-height:1.55;margin:0 auto;max-width:34rem;
}

/* ---- os tres pontos */
.esc-pontos{list-style:none;margin:0 0 1.75rem;padding:0;display:grid;gap:.7rem}
.esc-pontos li{
  display:flex;gap:.8rem;align-items:flex-start;
  background:var(--superficie);border:1px solid var(--linha);
  border-radius:12px;padding:.85rem 1rem;
  font-size:.92rem;line-height:1.5;color:#3f473f;
}
.esc-ponto-marca{flex:0 0 auto;font-size:1.25rem;line-height:1.3}
.esc-pontos strong{color:var(--tinta)}

/* ---- formulario */
.esc-forma{
  background:var(--superficie);border:1px solid var(--linha);
  border-radius:16px;padding:1.4rem 1.35rem 1.5rem;
}
.esc-forma h2{font-size:1.15rem;margin:0 0 .3rem}
.esc-forma-sub{
  margin:0 0 1.1rem;color:var(--tinta-suave);font-size:.88rem;line-height:1.5;
}
.esc-forma label{
  display:block;margin-bottom:.9rem;font-size:.86rem;font-weight:600;
  color:var(--tinta);
}
.esc-forma input,
.esc-forma textarea{
  display:block;width:100%;margin-top:.35rem;
  font:inherit;font-size:1rem;font-weight:400;
  padding:.7rem .8rem;border:1px solid var(--linha);border-radius:10px;
  background:var(--fundo);color:var(--tinta);
}
.esc-forma textarea{resize:vertical;min-height:3.2rem}
.esc-forma input:focus,
.esc-forma textarea:focus{
  outline:none;border-color:var(--verde);background:var(--superficie);
  box-shadow:0 0 0 3px rgba(124,194,66,.18);
}
/* O campo de data no telemovel nasce mais baixo do que os outros e a
   linha fica desalinhada. */
.esc-forma input[type=date]{min-height:3rem}

.esc-opcional{font-weight:400;color:var(--tinta-suave)}
.esc-ajuda{
  display:block;margin-top:.3rem;font-weight:400;font-size:.78rem;
  color:var(--tinta-suave);
}
.esc-forma .botao-principal{margin-top:.4rem}
.esc-forma .nota{
  margin:.9rem 0 0;font-size:.78rem;color:var(--tinta-suave);line-height:1.55;
}

/* ---- rodape */
.esc-rodape{
  margin-top:1.5rem;text-align:center;font-size:.85rem;
  color:var(--tinta-suave);line-height:1.6;
}
.esc-rodape p{margin:.35rem 0}
.esc-rodape a{color:var(--verde-escuro);font-weight:600}

/* ---- ecra de obrigado */
.esc-feito{text-align:center;padding:1rem 0 0}
.esc-feito-marca{font-size:3rem;line-height:1;margin-bottom:.6rem}
.esc-feito h1{font-size:1.6rem;margin:0 0 .5rem}
.esc-feito-sub{
  margin:0 auto 1.4rem;color:var(--tinta-suave);font-size:.98rem;
  line-height:1.55;max-width:30rem;
}
.esc-cartao-data{
  background:linear-gradient(180deg,#f3faeb,#eaf5df);
  border:1.5px solid #cde3b5;border-radius:16px;
  padding:1.2rem 1.25rem;margin-bottom:1.3rem;
}
.esc-cartao-dia{
  font-size:1.35rem;font-weight:800;color:var(--tinta);
  text-transform:capitalize;
}
.esc-cartao-hora{
  font-size:1.9rem;font-weight:800;color:#5a8a2f;margin:.15rem 0 .4rem;
  letter-spacing:-.01em;
}
.esc-cartao-sitio{font-size:.87rem;color:#46543c}
.esc-leve{
  color:var(--tinta-suave);font-size:.9rem;line-height:1.6;
  max-width:30rem;margin:0 auto 1rem;
}
.esc-leve a{color:var(--verde-escuro);font-weight:700;white-space:nowrap}

/* ---- FAIXA NO CIMO DA PAGINA INICIAL
 *
 * O cartao da escolinha fica la em baixo, depois dos precos e das
 * festas — e muita gente nao chega la. Esta faixa e a primeira coisa
 * que se ve ao abrir o site, e leva directo a pagina. */
.faixa-escola{
  display:flex;align-items:center;gap:.7rem;
  background:var(--livre);border:1px solid #d8e7c8;
  color:var(--tinta);text-decoration:none;
  padding:.55rem .85rem;border-radius:10px;margin-bottom:1.1rem;
}
.faixa-escola:hover{border-color:var(--verde);background:#ecf6e2}
.fe-marca{flex:0 0 auto;font-size:1.05rem;line-height:1}
.fe-texto{flex-grow:1;min-width:0;line-height:1.3}
.fe-texto strong{font-size:.9rem;font-weight:700}
.fe-sub{font-size:.82rem;color:var(--tinta-suave)}
.fe-seta{flex:0 0 auto;font-size:.95rem;font-weight:700;color:var(--verde-escuro)}

/* No computador cabe tudo numa linha so; no telemovel a segunda parte
   passa para baixo em vez de espremer o nome. */
@media (min-width:641px){
  .fe-texto strong::after{content:" \00b7";color:var(--tinta-suave);font-weight:400}
  .fe-sub{display:inline;margin-left:.3rem}
}
@media (max-width:640px){
  .fe-texto strong{display:block}
  .fe-sub{display:block;margin-top:.1rem;font-size:.78rem}
}

/* ---- cartao da escolinha na pagina inicial */
.cartao-escola{
  display:flex;align-items:center;gap:1rem;
  background:var(--superficie);border:1px solid var(--linha);
  border-radius:16px;padding:1rem 1.15rem;text-decoration:none;color:inherit;
  margin-top:1rem;
}
.cartao-escola:hover{border-color:var(--verde);background:var(--livre)}
.cartao-escola img{
  flex:0 0 auto;width:62px;height:auto;border-radius:10px;display:block;
}
.cartao-escola-texto{flex-grow:1;min-width:0}
.cartao-escola-titulo{font-weight:800;font-size:1.02rem;margin-bottom:.1rem}
.cartao-escola-sub{
  font-size:.85rem;color:var(--tinta-suave);line-height:1.45;
}
.cartao-escola-seta{flex:0 0 auto;color:var(--verde-escuro);font-weight:700}

@media (max-width:640px){
  .esc-destaque-dia{font-size:1.35rem}
  .esc-forma{padding:1.2rem 1.05rem 1.3rem}
  .esc-topo h1{font-size:1.5rem}
}