@charset "UTF-8";
/* ==================================================================
   WGT — Masterclass Viver do Digital

   Página completa, cinco secções: barra, dobra com formulário,
   o que vais aprender, mentor, contagem decrescente.

   O JavaScript é partilhado com as outras páginas (app.js), por isso
   os ids e as classes de estado mantêm-se: #nome, #email, #telefone,
   #botao, #erro-geral, #formulario, #sucesso, .visivel, .campo.

   As regras @media ficam NO FIM do ficheiro: têm a mesma
   especificidade que as regras base e, colocadas antes, seriam
   canceladas pela cascata.
   ================================================================== */

  :root{
    --azul:#0119FF;
    --escuro:#0F0F0F;
    --laranja:#FF6000;
    --laranja-caixa:#FE4D19;
    --verde:#01C734;
    --verde-escuro:#01A82C;
    --cartao:#EBEBEB;
    --cinza-rodape:#E6E6E6;
    --texto:#FFFFFF;
    --texto-suave:#C4C4C4;
    --texto-escuro:#111111;
    --campo:#FFFFFF;
    --campo-texto:#333333;
    --placeholder:#9A9A9A;
    --borda:#D6D6D6;
    --erro:#D93838;
    --erro-claro:#FF9B9B;
  }

  *,*::before,*::after{box-sizing:border-box}

  html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}

  body{
    margin:0;
    background:#FFFFFF;
    color:var(--texto-escuro);
    font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    line-height:1.5;
  }

  .largura{
    width:100%;
    max-width:1240px;
    margin:0 auto;
    padding:0 24px;
  }

  /* --- 1. Barra do topo -------------------------------------------- */
  .barra-topo{
    /* sem margin, senão o navegador acrescenta as folgas brancas
       que aparecem por cima e por baixo da faixa */
    margin:0;
    background:var(--azul);
    color:#FFFFFF;
    text-align:center;
    font-size:14px;
    font-weight:700;
    letter-spacing:.04em;
    padding:9px 16px;
  }

  /* --- 2. Dobra ----------------------------------------------------- */
  .dobra{
    background:var(--escuro);
    color:var(--texto);
    overflow:hidden;
  }

  .dobra .largura{
    display:grid;
    /* Meio a meio: a coluna do texto tem a largura do título em três
       linhas e nada mais, e o resto do espaço fica para a fotografia. */
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:end;
  }

  .dobra__texto{padding:44px 0 52px}

  .sobretitulo{
    font-size:13px;
    font-weight:600;
    line-height:1.2;
    letter-spacing:.06em;
    color:var(--texto-suave);
    margin:0;
  }

  .sobretitulo strong{
    display:block;
    font-size:22px;
    line-height:1.1;
    font-weight:800;
    letter-spacing:.01em;
    color:var(--laranja);
    margin-top:0;
  }

  h1{
    /* 34px em 660px de coluna dá três linhas com folga. */
    font-size:clamp(25px,2.8vw,34px);
    line-height:1.24;
    font-weight:800;
    letter-spacing:-0.01em;
    margin:14px 0 16px;
    text-wrap:balance;
  }

  .apoio{
    font-size:15px;
    color:var(--texto-suave);
    margin:0 0 20px;
  }

  .quando{
    font-size:24px;
    font-weight:700;
    color:var(--texto);
    margin:0 0 22px;
  }

  /* "(hora de Lisboa)" também a negrito; fica só um pouco menor, para
     a data continuar a ser o que salta à vista. */
  .quando span{font-weight:700;font-size:19px;color:var(--texto)}

  .instrucao{
    font-size:14px;
    color:var(--texto-suave);
    margin:0 0 12px;
  }

  /* --- Formulário ---------------------------------------------------- */
  .campo{margin-bottom:12px}

  label{
    display:block;
    font-size:14px;
    font-weight:400;
    margin-bottom:5px;
  }

  label .obrigatorio{color:var(--erro-claro)}

  input{
    width:100%;
    font-family:inherit;
    font-size:16px; /* 16px evita o zoom automático no iOS */
    color:var(--campo-texto);
    padding:13px 14px;
    background:var(--campo);
    border:1px solid var(--borda);
    border-radius:5px;
    transition:border-color .15s, box-shadow .15s;
  }

  input::placeholder{color:var(--placeholder)}

  input:focus{
    outline:none;
    border-color:var(--laranja);
    box-shadow:0 0 0 3px rgba(255,96,0,.25);
  }

  input[aria-invalid="true"]{border-color:var(--erro)}

  .erro-campo{
    display:none;
    font-size:13px;
    font-weight:600;
    color:var(--erro-claro);
    margin:6px 0 0;
  }

  .erro-campo.visivel{display:block}

  /* --- Seletor de país ---------------------------------------------- */
  .iti{width:100%;display:block;max-width:100%}

  .iti input.iti__tel-input,
  .iti input.iti__tel-input[type=tel]{
    width:100%;
    max-width:100%;
    min-width:0;
    padding-right:14px;
  }

  .iti__selected-country{
    background:transparent;
    border-radius:5px 0 0 5px;
    padding-left:6px;
  }

  .iti__selected-country:hover,
  .iti__selected-country:focus-visible{background:rgba(0,0,0,.05)}

  .iti__selected-dial-code{
    font-size:16px;
    font-weight:600;
    color:var(--campo-texto);
    margin-left:6px;
  }

  .iti__arrow{border-top-color:#8A8A8A;margin-left:6px}
  .iti__arrow--up{border-bottom-color:#8A8A8A}

  .iti__dropdown-content{
    background:#FFFFFF;
    border:1px solid #E2E2E2;
    border-radius:8px;
    box-shadow:0 12px 32px rgba(0,0,0,.35);
    overflow:hidden;
    font-size:15px;
  }

  .iti__search-input{
    font-family:inherit;
    font-size:15px;
    color:var(--campo-texto);
    padding:11px 14px;
    border:0;
    border-bottom:1px solid #EEE;
    border-radius:0;
  }

  .iti__search-input:focus{box-shadow:none}

  .iti__country-list{max-height:230px;border:0}
  .iti__country{padding:9px 14px}
  .iti__country-name{color:var(--campo-texto)}
  .iti__dial-code{color:var(--placeholder)}

  .iti__country.iti__highlight,
  .iti__country:hover{background:#FFF1E6}

  .iti__country.iti__active{background:#FFE3CE}

  /* --- Botões -------------------------------------------------------- */
  button,
  .botao{
    display:block;
    width:100%;
    font-family:inherit;
    font-size:19px;
    font-weight:700;
    text-align:center;
    text-decoration:none;
    color:#FFFFFF;
    background:var(--verde);
    border:0;
    border-radius:5px;
    padding:16px 20px;
    margin-top:6px;
    cursor:pointer;
    transition:background-color .15s;
  }

  button:hover,
  .botao:hover{background:var(--verde-escuro)}

  button:focus-visible,
  .botao:focus-visible{
    outline:3px solid var(--laranja);
    outline-offset:3px;
  }

  button[disabled]{opacity:.65;cursor:progress}

  .seguranca{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    font-size:13px;
    color:var(--texto-suave);
    margin:12px 0 0;
  }

  .erro-geral{
    display:none;
    font-size:14px;
    font-weight:600;
    color:#FFFFFF;
    background:rgba(217,56,56,.25);
    border-radius:6px;
    padding:11px 13px;
    margin-top:12px;
  }

  .erro-geral.visivel{display:block}

  .sucesso{
    display:none;
    padding:16px 0;
  }

  .sucesso h3{font-size:22px;margin:0 0 8px}
  .sucesso p{font-size:16px;color:var(--texto-suave);margin:0}
  .sucesso.visivel{display:block}

  /* --- Fotografia da dobra ------------------------------------------- */
  .dobra__foto{
    align-self:end;
    display:flex;
    justify-content:center;
  }

  .dobra__foto img{
    display:block;
    width:100%;
    /* 567px é o tamanho nativo do ficheiro; acima disso a fotografia
       esticava e perdia nitidez. */
    max-width:567px;
    height:auto;
  }

  /* --- 3. O que vais aprender ---------------------------------------- */
  .aprender{
    background:#FFFFFF;
    padding:56px 0 60px;
  }

  h2{
    font-size:clamp(23px,2.4vw,30px);
    line-height:1.3;
    font-weight:700;
    text-align:center;
    margin:0 0 34px;
    text-wrap:balance;
  }

  .cartoes{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
  }

  .cartao{
    background:var(--cartao);
    border-radius:6px;
    padding:22px 20px;
    font-size:15px;
    line-height:1.5;
  }

  .cartao b{display:block;margin-bottom:4px}
  .cartao span{color:#4A4A4A}

  /* --- 4. Mentor ------------------------------------------------------ */
  .mentor{
    background:var(--escuro);
    color:var(--texto);
    padding:60px 0;
  }

  .mentor .largura{
    /* Mais estreita do que as outras secções: com a largura total, a
       fotografia ficava alta demais em relação ao texto ao lado. */
    max-width:920px;
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:44px;
    align-items:center;
  }

  .mentor__foto img{
    display:block;
    width:100%;
    /* não passar dos 394px nativos, para não esticar e perder nitidez */
    max-width:394px;
    height:auto;
    border-radius:14px;
  }

  .mentor h3{
    font-size:15px;
    font-weight:400;
    color:var(--texto-suave);
    margin:0 0 4px;
  }

  .mentor .nome{
    font-size:clamp(24px,2.4vw,30px);
    font-weight:800;
    letter-spacing:.01em;
    color:var(--laranja);
    margin:0 0 18px;
  }

  .mentor p{
    font-size:15px;
    line-height:1.65;
    color:var(--texto-suave);
    margin:0 0 14px;
  }

  .mentor p:last-child{margin-bottom:0}

  /* --- 5. Contagem decrescente ---------------------------------------- */
  .contagem{
    background:#FFFFFF;
    padding:56px 0 64px;
    text-align:center;
  }

  .relogio{
    display:flex;
    justify-content:center;
    gap:14px;
    margin:0 0 28px;
  }

  .relogio div{
    background:var(--laranja-caixa);
    color:#FFFFFF;
    border-radius:4px;
    padding:14px 8px;
    min-width:104px;
  }

  .relogio b{
    display:block;
    font-size:38px;
    font-weight:700;
    line-height:1.1;
    font-variant-numeric:tabular-nums;
  }

  .relogio small{
    display:block;
    font-size:14px;
    font-weight:400;
    margin-top:2px;
  }

  .contagem .botao{
    max-width:420px;
    margin:0 auto;
    text-transform:uppercase;
    font-size:17px;
  }

  /* --- Rodapé --------------------------------------------------------- */
  .rodape{
    background:var(--cinza-rodape);
    padding:34px 20px;
    text-align:center;
  }

  .rodape p{
    font-size:15px;
    color:#6B6B6B;
    margin:0;
  }

  .rodape strong{font-weight:700;color:#3D3D3D}

  /* ============================================================
     MOBILE — tem de ficar no FIM do ficheiro (ver nota no topo).
     ============================================================ */
  @media (max-width:860px){
    .dobra .largura{
      grid-template-columns:1fr;
      gap:0;
    }

    /* A fotografia vai para baixo do formulário: primeiro a copy e os
       campos, que é o que tem de aparecer sem deslocar a página. */
    .dobra__texto{padding:32px 0 28px}
    /* Em coluna única, a fotografia ocupa a mesma largura que o texto:
       mais estreita ficava desalinhada do bloco de cima. */
    .dobra__foto img{max-width:100%}

    .cartoes{grid-template-columns:1fr;gap:14px}

    .mentor .largura{grid-template-columns:1fr;gap:26px}

    /* Em coluna única, a fotografia acompanha a largura do texto.
       O ficheiro tem 394px de largura nativa; deixo-o esticar até 560
       para não ficar mais estreito do que o bloco de texto, ao custo de
       alguma nitidez em ecrãs largos. */
    .mentor__foto img{max-width:560px;width:100%}
  }

  @media (max-width:520px){
    .largura{padding:0 16px}

    .barra-topo{font-size:12px}

    .sobretitulo strong{font-size:19px}

    h1{font-size:clamp(23px,6.2vw,28px);margin:12px 0 14px}

    .apoio{font-size:14px}
    .quando{font-size:20px}
    .quando span{font-size:16px}

    .aprender{padding:40px 0 44px}
    h2{margin:0 0 24px}

    .mentor{padding:44px 0}

    .contagem{padding:40px 0 48px}

    .relogio{gap:8px}
    .relogio div{min-width:0;flex:1;padding:12px 4px}
    .relogio b{font-size:28px}
    .relogio small{font-size:12px}

    .seguranca{margin-bottom:calc(4px + env(safe-area-inset-bottom))}

    .iti__country-list{max-height:min(230px,36vh)}

    .rodape{padding:28px 20px}
    .rodape p{font-size:14px}
  }

  @media (prefers-reduced-motion:reduce){
    *{transition:none !important}
    html{scroll-behavior:auto}
  }