/* Montserrat auto-hospedada. Servir do nosso dominio evita entregar o IP de
   cada visitante ao Google e remove a dependencia externa para a pagina
   renderizar. O unicode-range faz o browser baixar so o subset necessario. */

/* latin-ext 400 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/montserrat-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin 400 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/montserrat-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext 500 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/montserrat-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin 500 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/montserrat-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext 700 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/montserrat-latin-ext-700.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin 700 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/montserrat-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext 800 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/montserrat-latin-ext-800.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin 800 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/montserrat-latin-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
    --bg:#eeeeee;
    --ink:#000000;
    --text-subtitle:#1a1a1a;
    --input-fill:#f3f4f6;
    --input-border:#e2e3e6;
    --placeholder:#6b6b6f;
    --control-border:#c7c7ca;
    --control-dot:#8a8a8e;
    --control-ring-selected:#9f9f9f;
    --gold:#c9af46;
    --gold-hover:#b89e3d;
    --btn-text:#000000;
    --max-width:1360px;
  }

  *{ box-sizing:border-box; }

  html,body{
    margin:0;
    padding:0;
    background:var(--bg);
    font-family:'Montserrat', Arial, sans-serif;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  a{ color:inherit; }

  .page{
    max-width:var(--max-width);
    margin:0 auto;
    padding:56px 40px 80px;
  }

  /* ---------- Logo ---------- */
  .logo-wrap{
    display:flex;
    justify-content:center;
    margin-bottom:56px;
  }

  .logo-wrap img{
    width:100%;
    max-width:200px;
    height:auto;
    display:block;
  }

  /* ---------- Main layout (flexbox for broad browser support) ---------- */
  .content{
    display:flex;
    flex-direction:row;
    gap:48px;
    align-items:flex-start;
  }

  .left-col{
    display:flex;
    flex-direction:column;
    flex:1 1 0;
    min-width:0;
  }

  .right-col{
    flex:1 1 0;
    min-width:0;
  }

  h1{
    font-size:clamp(28px, 3vw, 40px);
    font-weight:800;
    line-height:1.15;
    letter-spacing:-0.01em;
    margin:0 0 20px;
    text-transform:uppercase;
  }

  .subtitle{
    font-size:18px;
    line-height:1.55;
    color:var(--text-subtitle);
    font-weight:400;
    margin:0 0 40px;
    max-width:46ch;
  }

  .subtitle strong{
    font-weight:700;
  }

  .car-wrap{
    margin-top:8px;
  }

  .car-wrap img{
    width:100%;
    max-width:520px;
    height:auto;
    display:block;
  }

  /* ---------- Form ---------- */
  form{
    display:flex;
    flex-direction:column;
    gap:16px;
  }

  .row{
    display:flex;
    flex-direction:row;
    gap:16px;
  }

  .row .field{
    flex:1 1 0;
    min-width:0;
  }

  .field{
    position:relative;
  }

  input[type="text"],
  input[type="tel"],
  input[type="email"],
  textarea{
    width:100%;
    background:var(--input-fill);
    border:1px solid var(--input-border);
    border-radius:999px;
    padding:18px 24px;
    font-family:'Montserrat', Arial, sans-serif;
    font-size:16px;
    font-weight:500;
    color:var(--ink);
    outline:none;
    transition:border-color .15s ease, box-shadow .15s ease;
  }

  input::placeholder,
  textarea::placeholder{
    color:var(--placeholder);
    font-weight:500;
  }

  input:focus,
  textarea:focus{
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(201,175,70,0.18);
  }

  textarea{
    border-radius:24px;
    resize:vertical;
    min-height:150px;
    padding:20px 24px;
    line-height:1.5;
  }

  /* ---------- Choice pill row (Quero comprar / Quero vender) ---------- */
  .field-error{
    color:#c0392b;
    font-size:14px;
    font-weight:500;
    margin:-6px 4px 0;
  }

  /* Contador da mensagem: avisa o limite antes de o servidor truncar. */
  .char-count{
    display:block;
    text-align:right;
    font-size:13px;
    font-weight:500;
    color:var(--placeholder);
    margin:6px 8px 0;
  }

  .char-count.no-limite{
    color:#c0392b;
  }

  /* O status recebe foco por script apos o envio; o anel padrao poluiria o
     layout, e a mensagem ja se destaca por cor e posicao. */
  .form-status:focus{
    outline:none;
  }

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

  .form-status{
    font-size:15px;
    font-weight:500;
    margin:16px 4px 0;
  }

  .form-status.ok{ color:#1e7a45; }
  .form-status.fail{ color:#c0392b; }

  .choice-row.has-error{
    border-color:#c0392b;
  }
  .choice-row{
    display:flex;
    align-items:center;
    gap:36px;
    background:var(--input-fill);
    border:1px solid var(--input-border);
    border-radius:999px;
    padding:16px 24px;
  }

  .choice{
    display:flex;
    align-items:center;
    gap:14px;
    cursor:pointer;
    font-size:16px;
    font-weight:500;
    user-select:none;
    white-space:nowrap;
  }

  .choice input{
    position:absolute;
    opacity:0;
    width:0;
    height:0;
  }

  .dot-outer{
    flex:0 0 auto;
    width:22px;
    height:22px;
    border:1.5px solid var(--control-border);
    background:#ffffff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    transition:border-color .15s ease, background .15s ease;
  }

  .choice input:checked + .dot-outer{
    border-color:var(--control-ring-selected);
    background:#e9e9ea;
  }

  .dot-outer .dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:transparent;
    transition:background .15s ease;
  }

  .choice input:checked + .dot-outer .dot{
    background:var(--control-dot);
  }

  /* ---------- Privacy checkbox line ---------- */
  .privacy-row{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:8px;
    font-size:15px;
    font-weight:500;
  }

  /* Envolve o texto inteiro: clicar em qualquer parte da frase marca a caixa. */
  .privacy-row .choice{
    gap:12px;
    white-space:normal;
    align-items:center;
  }

  .privacy-row a{
    text-decoration:underline;
  }

  .privacy-row a{
    text-decoration:underline;
    text-underline-offset:2px;
  }

  /* ---------- Submit button ---------- */
  .submit-wrap{
    display:flex;
    justify-content:center;
    margin-top:8px;
  }

  button.submit{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--gold);
    color:var(--btn-text);
    border:none;
    border-radius:999px;
    padding:18px 40px;
    font-family:'Montserrat', Arial, sans-serif;
    font-size:16px;
    font-weight:700;
    letter-spacing:0.03em;
    text-transform:uppercase;
    cursor:pointer;
    transition:background .15s ease, transform .1s ease;
  }

  button.submit:hover{ background:var(--gold-hover); }
  button.submit:active{ transform:translateY(1px); }

  button.submit svg{
    width:16px;
    height:16px;
    flex:0 0 auto;
  }

  /* Keyboard accessibility */
  a:focus-visible,
  button:focus-visible,
  .choice:focus-within .box,
  .choice:focus-within .dot-outer{
    outline:2px solid var(--gold);
    outline-offset:2px;
  }

  /* ---------- Mobile layout ---------- */
  @media (max-width: 860px){
    .page{
      padding:36px 20px 56px;
    }

    .logo-wrap{
      margin-bottom:36px;
    }

    .logo-wrap img{
      max-width:170px;
    }

    .content{
      flex-direction:column;
      gap:0;
    }

    /* Reorder: logo (already first) -> title/subtitle -> form. Car image removed entirely. */
    .left-col{
      order:1;
      flex:1 1 auto;
      width:100%;
    }

    .car-wrap{
      display:none;
    }

    .right-col{
      order:2;
      flex:1 1 auto;
      width:100%;
      margin-top:32px;
    }

    h1{
      font-size:26px;
    }

    .subtitle{
      font-size:16px;
      max-width:none;
      margin-bottom:0;
    }

    .row{
      flex-direction:column;
    }

    .choice-row{
      flex-wrap:wrap;
      gap:20px;
    }

    button.submit{
      width:100%;
      justify-content:center;
    }

    .privacy-row{
      text-align:center;
    }
  }

  @media (prefers-reduced-motion: reduce){
    *{
      transition:none !important;
    }
  }

/* Armadilha para robos de spam: fica fora da tela em vez de display:none,
   porque alguns robos ignoram campos ocultos por display. aria-hidden e
   tabindex=-1 no markup mantem o campo fora do alcance de quem usa leitor
   de tela ou navega por teclado. */
.campo-oculto{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}