@charset "UTF-8";
/* ==================================================================
   TEMA VERDE 2 — identidade verde do banner do IGT25, formulário
   na 1.ª dobra. É o laranja.css (igt25-v1) com as cores trocadas: a
   estrutura, os ids e os ajustes da foto são os mesmos.

   Substitui a base.css; não se carregam as duas na mesma página.
   O JavaScript (app.js) é o mesmo das outras páginas, por isso os
   ids e as classes de estado mantêm-se: #email, #telefone, #botao,
   #erro-geral, #formulario, #sucesso, .visivel, .campo, .erro-campo.

   Segue o banner horizontal do IGT25: fundo branco, faixa diagonal
   em verdes do lado direito com um clarão atrás do Luciano.

   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{
    --marca-escuro:#0B4F2B;   /* "GESTOR DE" do logótipo, verde-escuro do banner */
    --verde:#1DB83E;          /* verde principal */
    --verde-vivo:#45D654;
    --lima:#A8EE5E;
    /* O botão é laranja de propósito: tem de contrastar com os verdes
       do resto da página (laranja é a cor que mais salta sobre o verde).
       */
    --botao:#F26A0F;
    --botao-claro:#FF9A3D;
    --botao-hover:#D25200;
    --botao-texto:#FFFFFF;
    --texto:#13261A;
    --texto-suave:#4A5A50;
    --campo:#F4F7F5;
    --borda:#D5E0D9;
    --placeholder:#7D8A82;
    --erro-forte:#C0261F;
  }

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

  html{-webkit-text-size-adjust:100%}

  body{
    margin:0;
    background:#FFFFFF;
    color:var(--texto);
    font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    line-height:1.45;
    display:flex;
    flex-direction:column;
    min-height:100vh;
    min-height:100dvh;
  }

  /* --- Cena: a área da primeira dobra, com a faixa verde ---------- */
  .cena{
    flex:1 0 auto;
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }

  /* Faixa diagonal em verdes, como no banner: clarão claro atrás
     do Luciano e duas lâminas mais escuras à direita. É só decoração:
     fica atrás de tudo e não recebe cliques. */
  .faixa{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:46%;
    clip-path:polygon(30% 0,100% 0,100% 100%,0 100%);
    background:
      radial-gradient(60% 55% at 38% 52%,rgba(232,252,225,.95) 0%,rgba(168,238,94,.55) 38%,rgba(168,238,94,0) 70%),
      linear-gradient(112deg,
        rgba(255,255,255,0) 0 52%,
        rgba(0,80,30,.22) 52% 64%,
        rgba(255,255,255,0) 64% 72%,
        rgba(0,60,25,.3) 72% 86%,
        rgba(255,255,255,0) 86%),
      linear-gradient(160deg,var(--lima) 0%,var(--verde-vivo) 34%,var(--verde) 70%,#0B6B32 100%);
    pointer-events:none;
  }

  /* Véu branco que funde a borda esquerda da faixa com o fundo,
     como o esbatido do banner. */
  .faixa::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 38%);
  }

  /* --- Estrutura ---------------------------------------------------- */
  .palco{
    /* Centragem vertical por margens automáticas, como nos outros
       temas: o Safari não centra a linha da grelha sozinho. */
    position:relative;
    flex:0 0 auto;
    margin:auto;
    width:100%;
    max-width:1240px;
    padding:44px 28px 0;
    display:grid;
    grid-template-columns:1.12fr .88fr;
    grid-template-areas:
      "marca  visual"
      "copy   visual"
      "cartao visual";
    column-gap:40px;
    align-content:center;
  }

  /* --- Logótipo, montado em HTML para ficar nítido em qualquer ecrã */
  .marca{
    grid-area:marca;
    display:flex;
    align-items:center;
    gap:14px;
    margin:0 0 26px;
  }

  .marca svg{flex:none}

  .marca__texto{display:flex;flex-direction:column;line-height:.95}

  .marca__imersao{
    font-size:15px;
    font-weight:600;
    letter-spacing:.32em;
    color:var(--marca-escuro);
    margin-bottom:4px;
  }

  .marca__gestor,
  .marca__trafego{
    font-size:25px;
    font-weight:800;
    letter-spacing:-.01em;
    text-transform:uppercase;
  }

  .marca__gestor{color:var(--marca-escuro)}

  .marca__trafego{
    color:var(--verde);
    background:linear-gradient(90deg,var(--verde) 0%,var(--verde-vivo) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
  }

  /* --- Copy --------------------------------------------------------- */
  .copy{grid-area:copy}

  .eyebrow{
    display:inline-block;
    font-size:14px;
    font-weight:600;
    color:var(--marca-escuro);
    background:#E8F8EA;
    border-radius:999px;
    padding:7px 14px;
    margin:0 0 16px;
  }

  h1{
    font-size:clamp(28px,2.9vw,40px);
    line-height:1.12;
    font-weight:700;
    letter-spacing:-0.02em;
    margin:0 0 24px;
    text-wrap:balance;
  }

  h1 strong{
    font-weight:800;
    color:var(--marca-escuro);
    background:linear-gradient(transparent 64%,rgba(168,238,94,.55) 64%);
  }

  /* Data e hora lado a lado, com os ícones verdes da arte */
  .datas{
    display:flex;
    flex-wrap:wrap;
    gap:14px 30px;
    margin:0 0 24px;
  }

  .datas__item{
    display:flex;
    align-items:center;
    gap:12px;
  }

  .datas svg{flex:none}

  .datas .dia,
  .datas .hora{
    font-size:19px;
    font-weight:800;
    letter-spacing:-.01em;
    margin:0;
    line-height:1.15;
  }

  .datas .formato{
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--verde);
    margin:3px 0 0;
  }

  .datas .fuso{
    font-size:16px;
    font-style:italic;
    font-weight:500;
    color:var(--texto-suave);
    margin:2px 0 0;
  }

  /* --- Cartão do formulário ---------------------------------------- */
  .cartao{
    grid-area:cartao;
    position:relative;
    z-index:1;
    background:#FFFFFF;
    border:1px solid #E3ECE6;
    border-radius:18px;
    box-shadow:0 18px 50px rgba(11,79,43,.13),0 2px 6px rgba(11,79,43,.06);
    padding:22px 22px 18px;
    margin:0 0 48px;
  }

  h2{
    font-size:16px;
    line-height:1.35;
    font-weight:700;
    margin:0 0 14px;
  }

  /* Email e WhatsApp na mesma linha, para o botão caber na dobra */
  .campos{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }

  /* Os rótulos existem para leitores de ecrã; o que se vê é o texto
     de exemplo dentro do campo. */
  label{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
    border:0;
  }

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

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

  input:focus, select:focus{
    outline:none;
    background:#FFFFFF;
    border-color:var(--verde);
    box-shadow:0 0 0 3px rgba(29,184,62,.22);
  }

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

  .erro-campo{
    display:none;
    font-size:13px;
    font-weight:600;
    color:var(--erro-forte);
    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:16px;
  }

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

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

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

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

  .iti__dropdown-content{
    background:#FFFFFF;
    border:1px solid #E2E2E2;
    border-radius:10px;
    box-shadow:0 14px 36px rgba(0,0,0,.18);
    overflow:hidden;
    font-size:15px;
  }

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

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

  .iti__country-list{max-height:236px;border:0}
  .iti__country{padding:10px 15px}
  .iti__country-name{color:var(--texto)}
  .iti__dial-code{color:var(--placeholder)}

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

  .iti__country.iti__active{background:#DDF3E1}

  /* --- Botão -------------------------------------------------------- */
  /* Laranja, em contraste com o verde da página, a pulsar com um halo
     e com um brilho que atravessa o botão de tempos a tempos (como no -v4). */
  #botao{
    position:relative;
    overflow:hidden;
    width:100%;
    font-family:inherit;
    font-size:21px;
    font-weight:800;
    letter-spacing:.02em;
    text-transform:uppercase;
    color:var(--botao-texto);
    text-shadow:0 1px 2px rgba(120,40,0,.45);
    background:linear-gradient(180deg,var(--botao-claro) 0%,var(--botao) 60%,var(--botao-hover) 100%);
    border:2px solid #FFC890;
    border-radius:12px;
    padding:20px 20px;
    margin-top:16px;
    cursor:pointer;
    animation:botao-pulsa 1.6s ease-in-out infinite;
    transition:filter .15s;
  }

  #botao::after{
    content:"";
    position:absolute;
    top:0;
    left:-60%;
    width:40%;
    height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
    transform:skewX(-20deg);
    animation:botao-brilho 3.2s ease-in-out infinite;
    pointer-events:none;
  }

  @keyframes botao-pulsa{
    0%,100%{
      transform:scale(1);
      box-shadow:0 0 0 0 rgba(242,106,15,.6),0 0 18px 2px rgba(255,140,40,.5);
    }
    50%{
      transform:scale(1.035);
      box-shadow:0 0 0 12px rgba(242,106,15,0),0 0 34px 8px rgba(255,140,40,.75);
    }
  }

  @keyframes botao-brilho{
    0%,55%{left:-60%}
    100%{left:130%}
  }

  #botao:hover{filter:brightness(1.08) saturate(1.1)}

  #botao:focus-visible{
    outline:3px solid var(--marca-escuro);
    outline-offset:3px;
  }

  #botao[disabled]{opacity:.75;cursor:progress;animation:none}
  #botao[disabled]::after{animation:none;display:none}

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

  .erro-geral{
    display:none;
    font-size:14px;
    font-weight:600;
    color:var(--erro-forte);
    background:#FDECEC;
    border-radius:9px;
    padding:12px 14px;
    margin-top:14px;
  }

  .erro-geral.visivel{display:block}

  .sucesso{
    display:none;
    padding:8px 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 ---------------------------------------------------
     Recortada, encostada ao fundo da cena, por cima da faixa verde.
     As dimensões estão nos atributos do <img>, por isso o navegador
     reserva o espaço antes de a descarregar e a página não salta. --- */
  .visual{
    grid-area:visual;
    position:relative;
    align-self:end;
    display:flex;
    justify-content:flex-end;
    /* A foto original corta o ombro direito a direito. Para esse corte
       não ficar à vista com verde ao lado, a coluna estica até à borda
       direita do ecrã (o .palco tem 1240px e 28px de folga lateral) e a
       foto encosta lá; a .cena esconde o que passar. */
    /* +48px para lá da borda: o corte a direito do ombro direito fica
       fora do ecrã mesmo quando a barra de deslocamento come largura
       ao 100vw. */
    margin-right:calc(-1 * (max(0px, (100vw - 1240px) / 2) + 28px + 48px));
  }

  .visual img{
    width:100%;
    /* não passar dos 505px nativos: acima disso a imagem esticaria e
       perderia nitidez */
    max-width:505px;
    height:auto;
    display:block;
    /* O ombro esquerdo também vem cortado a direito na foto: esbate-se
       a borda esquerda para o corte desaparecer no verde. */
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%);
    mask-image:linear-gradient(90deg,transparent 0,#000 18%);
  }

  .assinatura{
    position:absolute;
    top:4px;
    right:76px;
    font-size:15px;
    font-weight:800;
    line-height:1.1;
    text-transform:uppercase;
    text-align:right;
    color:#FFFFFF;
    text-shadow:0 1px 8px rgba(11,79,43,.4);
  }

  /* --- Rodapé ------------------------------------------------------- */
  .rodape{
    flex:none;
    background:var(--marca-escuro);
    padding:26px 20px;
    text-align:center;
  }

  .rodape p{
    font-size:14px;
    color:rgba(255,255,255,.78);
    margin:0;
  }

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

  /* ============================================================
     ECRÃS BAIXOS E MOBILE — têm de ficar no FIM do ficheiro.
     ============================================================ */

  /* Portáteis de 768px de altura: aperta o topo para o botão
     continuar dentro da dobra. */
  @media (min-width:901px) and (max-height:820px){
    .palco{padding-top:28px}
    .marca{margin-bottom:18px}
    h1{font-size:clamp(26px,2.6vw,36px);margin-bottom:18px}
    .datas{margin-bottom:18px}
    .cartao{margin-bottom:28px}
  }

  @media (max-width:900px){
    /* A faixa sobe para o topo, atrás do Luciano, como no criativo
       horizontal; o logótipo fica do lado esquerdo, no branco. */
    .faixa{
      bottom:auto;
      height:200px;
      width:58%;
      clip-path:polygon(34% 0,100% 0,100% 100%,0 100%);
    }

    .palco{
      grid-template-columns:1fr 1fr;
      grid-template-areas:
        "marca  visual"
        "copy   copy"
        "cartao cartao";
      column-gap:8px;
      padding:0 20px;
      margin:0 auto;
      max-width:620px;
    }

    .marca{
      flex-direction:column;
      align-items:flex-start;
      gap:8px;
      margin:0;
      align-self:center;
    }

    .visual{
      align-self:end;
      height:200px;
      justify-content:flex-end;
      /* O .palco fica centrado com 620px no máximo: a coluna tem de
         esticar até à borda do ecrã e mais 48px, para o ombro cortado
         ficar fora de vista também em tablets. */
      margin-right:calc(-1 * (max(0px, (100vw - 620px) / 2) + 20px + 48px));
    }

    .visual img{
      width:auto;
      height:200px;
      max-width:none;
    }

    .assinatura{font-size:11px;top:10px;right:68px}

    .copy{padding-top:22px}
    .cartao{margin-bottom:32px}
  }

  @media (max-width:520px){
    .faixa{height:168px}
    .palco{padding:0 16px}

    .marca svg{width:34px;height:34px}
    .marca__imersao{font-size:11px;letter-spacing:.28em}
    .marca__gestor,
    .marca__trafego{font-size:19px}

    .visual{height:168px;margin-right:calc(-1 * (max(0px, (100vw - 620px) / 2) + 16px + 40px))}
    .assinatura{right:56px}
    .visual img{height:168px}

    .copy{padding-top:16px}

    .eyebrow{font-size:12px;padding:6px 11px;margin-bottom:12px}

    h1{font-size:clamp(22px,6.2vw,27px);margin:0 0 16px}

    .datas{gap:12px 18px;margin:0 0 16px}
    .datas svg{width:36px;height:36px}
    .datas .dia,
    .datas .hora{font-size:15.5px}
    .datas .formato{font-size:10.5px}
    .datas .fuso{font-size:13px}

    .cartao{padding:16px 14px 12px;border-radius:16px;margin-bottom:26px}
    h2{font-size:14.5px;margin-bottom:12px}

    .campos{grid-template-columns:1fr;gap:10px}
    input, select{padding:14px 14px}

    #botao{font-size:18.5px;padding:18px 14px;margin-top:14px}

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

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

    .rodape{padding:22px 20px}
    .rodape p{font-size:13px}
  }

  @media (prefers-reduced-motion:reduce){
    *{transition:none !important}
    /* Sem pulsar nem brilho para quem pediu menos movimento; o halo
       fixo mantém o botão em destaque. */
    #botao{animation:none;box-shadow:0 0 24px 4px rgba(255,140,40,.65)}
    #botao::after{display:none}
  }