/* =========================================
   CONTATO — responsivo real oficial (mobile-first)
   ========================================= */

.contato{
  /* tokens locais (herdam do tema quando existir) */
  --eyebrow:#9aa1ff;
  --kicker:#cbd2ff;
  --card-r:18px;

  --gap-xs:clamp(8px,2vw,16px);
  --gap-sm:clamp(12px,3vw,20px);
  --gap-md:clamp(14px,3.6vw,28px);

  /* fallbacks (caso o global não defina) */
  --glass-bg: color-mix(in oklab, #fff 6%, transparent);
  --glass-bd: color-mix(in oklab, #fff 12%, transparent);
  --blur-card: saturate(120%) blur(6px);

  background:none;
  container-type:inline-size;
  color-scheme:dark;
}

/* wrapper alinhado às internas + safe-areas */
.contato .wrap,
.contato .container{
  width:min(92vw, var(--wrap-w, 1120px));
  margin-inline:auto;
  padding-inline:max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
}

/* HERO */
.contato .hero--internal .title{ max-inline-size:34ch; margin-inline:auto; }
.contato .hero--internal .lead{  max-inline-size:70ch; margin-inline:auto; }

/* GRID principal */
.contact-wrap{ display:grid; gap:var(--gap-md); align-items:start; }
@media (min-width:900px){ .contact-wrap{ grid-template-columns:1.05fr .95fr; } }

/* Cartões */
.contato .card{
  background:var(--glass-bg);
  border:1px solid var(--glass-bd);
  border-radius:var(--card-r);
  padding:clamp(16px,2.6vw,22px);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  backdrop-filter:var(--blur-card);
}

.form-title{
  font-family:Sora, Inter, system-ui, -apple-system, sans-serif;
  margin:0 0 .75rem;
}

/* grid de campos 1→2 */
.grid-2{ display:grid; grid-template-columns:1fr; gap:var(--gap-sm); }
@media (min-width:700px){ .grid-2{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* ===== Campos ===== */
.field{
  display:grid; gap:6px; position:relative; /* tooltip precisa disso */
}
.field label{ font-size:14px; color:var(--kicker); }

.field :is(input,select,textarea){
  inline-size:100%;
  min-block-size:46px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.03);
  color:#fff;
  padding:10px 12px;
  font:inherit;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.field textarea{ min-block-size:140px; resize:vertical; }
.field :is(input,textarea)::placeholder{ color:#aab2ff; opacity:.75; }

/* SELECT — padronizado (igual Jobs) */
.field select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  color:#e7eaff;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  /* gradiente leve + seta SVG azulada */
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
    url("data:image/svg+xml,%3Csvg fill='%23cbd2ff' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.25 7.5l4.75 5 4.75-5H5.25z'/%3E%3C/svg%3E")
    no-repeat right 12px center/16px;
  padding-right:40px;
  cursor:pointer;
  backdrop-filter:var(--blur-card);
}
.field select:hover{ background-color:rgba(255,255,255,.08); }
.field select:focus{ outline:none; }
.field select::-ms-expand{ display:none; } /* legado */
.field select :is(option,optgroup){ background-color:#0b0d2c; color:#e7eaff; }

/* Foco visível */
.field :is(input,select,textarea):focus-visible,
.btn-primary:focus-visible,
.btn-wa:focus-visible{
  outline:2px solid color-mix(in oklab, var(--kicker) 65%, transparent);
  outline-offset:2px;
}

/* details secundário */
.card--sub{
  margin-top:12px; padding:12px 16px;
  border-radius:calc(var(--card-r) - 4px);
  background:var(--glass-bg); border:1px solid var(--glass-bd);
}
.card--sub > summary{
  cursor:pointer; list-style:none; font-weight:700; color:#cbd2ff; margin:-4px 0;
}
.card--sub > summary::-webkit-details-marker{ display:none; }
.card--sub[open]{ box-shadow:0 12px 34px rgba(0,0,0,.25); }

/* ============================
   CONSENTIMENTO + BRIEFING TEXTS
   ============================ */
.consent{
  display:flex; align-items:flex-start; gap:10px;
  font-size:clamp(13px,1.8vw,15px); line-height:1.55;
  margin:.8rem 0 .4rem; color:color-mix(in oklab,#fff 85%,transparent);
}
.consent a{
  color:var(--kicker); font-weight:600;
  text-decoration:underline; text-underline-offset:3px;
}

.form-infos{
  font-size:clamp(12.5px,1.6vw,14px); line-height:1.6;
  color:color-mix(in oklab,#fff 72%,transparent); margin-top:.75rem;
}
.form-infos strong{ color:#cbd2ff; font-weight:600; }

.form-infos .brief-quality{
  display:inline-block; margin-top:.25rem; padding:3px 10px;
  border-radius:999px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  font-size:clamp(12px,1.6vw,13px); letter-spacing:.2px; color:#9aa1ff;
}

/* ações */
.actions{ margin-top:12px; display:flex; gap:10px; }
@media (max-width:599px){ .actions{ flex-direction:column; } }
@media (min-width:600px){ .actions{ justify-content:flex-end; } }

.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-block-size:50px; padding-inline:18px; border-radius:14px; border:0;
  color:#fff; cursor:pointer; background:var(--grad-accent);
  box-shadow:0 20px 60px rgba(47,55,255,.35);
  font-weight:700; text-align:center;
  transition:transform .08s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn-primary:hover{ transform:translateY(-1px); }
.btn-primary:active{ transform:none; }

/* Info lateral */
.info .ibox{
  display:grid; grid-template-columns:56px 1fr; gap:14px; align-items:center;
  background:var(--glass-bg); border:1px solid var(--glass-bd);
  border-radius:16px; padding:16px;
}
.info > * + *{ margin-top:var(--gap-sm); }
@media (max-width:480px){ .info .ibox{ grid-template-columns:1fr; } }

.iicon{
  inline-size:56px; block-size:56px; border-radius:14px; display:grid; place-items:center;
  background:var(--grad-accent); font-size:24px; color:#fff;
}

/* WhatsApp */
.wa{
  background:var(--glass-bg); border:1px solid var(--glass-bd);
  border-radius:16px; padding:20px 18px; margin-top:var(--gap-sm);
  box-shadow:0 10px 30px rgba(0,0,0,.18); backdrop-filter:var(--blur-card);
}
.wa-grid{ display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:start; }
.wa-icon{
  inline-size:44px; block-size:44px; border-radius:12px; display:grid; place-items:center; flex-shrink:0;
  background:color-mix(in oklab,#25D366 18%, transparent);
  border:1px solid color-mix(in oklab,#25D366 28%, transparent);
  color:#eafff3; font-size:18px;
}
.wa h3, .wa-body h3{
  margin:0 0 6px; font-family:Sora, Inter, system-ui, -apple-system, sans-serif; letter-spacing:.2px;
}
.wa p, .wa-body p{
  margin:0 0 14px; line-height:1.55;
  color:color-mix(in oklab,#fff 65%, transparent);
  max-inline-size:62ch;
}
.btn-wa{
  display:inline-flex; align-items:center; justify-content:center;
  min-block-size:46px; padding-inline:20px; border-radius:999px;
  border:1px solid rgba(37,211,102,.35);
  background:color-mix(in oklab,#25D366 14%, transparent);
  color:#eafff3; font-weight:700; letter-spacing:.2px;
  box-shadow:0 12px 28px rgba(37,211,102,.16);
  transition:background .2s ease, transform .08s ease, box-shadow .2s ease;
}
.btn-wa:hover{
  background:color-mix(in oklab,#25D366 22%, transparent);
  transform:translateY(-1px);
  box-shadow:0 16px 36px rgba(37,211,102,.22);
}
.btn-wa:active{ transform:none; }
@media (max-width:420px){
  .wa-grid{ grid-template-columns:1fr; gap:10px; }
  .wa-icon{ display:none; }
}

/* Horários */
.hours{
  background:var(--glass-bg); border:1px solid var(--glass-bd);
  border-radius:16px; padding:16px; margin-top:12px;
}
.hours h3{ margin:0 0 6px; font-family:Sora,Inter,system-ui,-apple-system,sans-serif; }
.hours .row{
  display:flex; justify-content:space-between; gap:10px;
  padding:6px 0; border-bottom:1px dashed rgba(255,255,255,.08)
}
.hours .row:last-child{ border-bottom:0 }

/* FAQ mini */
.faq-mini .faq-item{
  background:var(--glass-bg); border:1px solid var(--glass-bd);
  border-radius:14px; padding:12px 16px; margin:12px 0;
}
.faq-mini .faq-item summary{ cursor:pointer; font-weight:700; color:var(--eyebrow); }
.faq-mini .faq-item[open]{ box-shadow:0 12px 34px rgba(0,0,0,.25); }

/* Toast */
.toast{
  position:fixed;
  right:max(16px, env(safe-area-inset-right));
  bottom:max(16px, env(safe-area-inset-bottom));
  z-index:2000;
  background:#0b0d2c; border:1px solid rgba(255,255,255,.12);
  color:#cbd2ff; padding:12px 14px; border-radius:12px;
  opacity:0; transform:translateY(10px); transition:.25s;
}
.toast.show{ opacity:1; transform:translateY(0); }

/* Acessibilidade / utilidades */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
@media (prefers-reduced-motion:reduce){ .btn-primary, .btn-wa, .toast{ transition:none; } }

/* ===== Coluna direita sticky ===== */
@media (min-width:900px){
  .contact-wrap{ align-items:start; }
  .info{ position:sticky; align-self:start; top:clamp(16px,6vh,48px); will-change:transform; }
}

/* ===== Estados de erro / validação ===== */
.field :is(input:user-invalid, select:user-invalid, textarea:user-invalid),
.was-submitted .field :is(input:invalid, select:invalid, textarea:invalid){
  border-color:#ff8899;
  box-shadow:0 0 0 3px rgba(255,136,153,.22);
  background:color-mix(in oklab, #ff8899 5%, transparent);
}
@media (prefers-reduced-motion:no-preference){
  .field :is(input,select,textarea){
    transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
  }
}
.field :is(input:user-invalid, textarea:user-invalid)::placeholder,
.was-submitted .field :is(input:invalid, textarea:invalid)::placeholder{
  color:color-mix(in oklab, #ffb4c0 70%, transparent);
}

/* ===== Balão de erro (tooltip) ===== */
.field :is(input:user-invalid, textarea:user-invalid, select:user-invalid):not(:focus)::after,
.was-submitted .field :is(input:invalid, textarea:invalid, select:invalid):not(:focus)::after{
  content:attr(data-error);
  position:absolute;
  bottom:calc(100% + 6px);
  left:0;
  padding:6px 10px;
  font-size:13px;
  background:#ff8899;
  color:#0b0d2c;
  border-radius:6px;
  white-space:nowrap;
  z-index:10;
  box-shadow:0 4px 16px rgba(255,136,153,.28);
  animation:fadeTooltip .18s ease-out;
}
.field :is(input:user-invalid, textarea:user-invalid, select:user-invalid):not(:focus)::before,
.was-submitted .field :is(input:invalid, textarea:invalid, select:invalid):not(:focus)::before{
  content:"";
  position:absolute;
  bottom:calc(100% + 2px);
  left:14px;
  border:6px solid transparent;
  border-top-color:#ff8899;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));
}
@keyframes fadeTooltip{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }

/* ===== Estados extras ===== */
.field :is(input,select,textarea):disabled{
  opacity:.6; cursor:not-allowed;
}
@media (prefers-contrast: more){
  .field :is(input,select,textarea):focus-visible{ outline-width:3px; }
}

/* ===== Fix checkbox gigante no consentimento ===== */

/* não aplicar sizing de texto em checkbox/radio */
.field :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]){
  inline-size:100%;
  min-block-size:46px;
  padding:10px 12px;
  border-radius:12px;
}

/* checkbox compacto e no tema */
.field input[type="checkbox"]{
  inline-size:20px;
  block-size:20px;
  min-block-size:0;
  padding:0;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.05);
  accent-color: color-mix(in oklab, var(--kicker) 90%, #7f8cff); /* usa check nativo */
  box-shadow:none; /* evita “glow” constante */
}

/* foco/erro seguem o padrão, mas no tamanho certo */
.field input[type="checkbox"]:focus-visible{
  outline:2px solid color-mix(in oklab, var(--kicker) 65%, transparent);
  outline-offset:2px;
}
.field :is(input[type="checkbox"]:user-invalid),
.was-submitted .field :is(input[type="checkbox"]:invalid){
  border-color:#ff8899;
  box-shadow:0 0 0 3px rgba(255,136,153,.22);
  background:color-mix(in oklab, #ff8899 5%, transparent);
}

/* layout da linha de consentimento (checkbox + texto) */
.field.consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.field.consent label{ margin-top:1px; line-height:1.5; }

/* tooltip do checkbox: posiciona a partir do próprio input */
.field.consent input[type="checkbox"]:is(:user-invalid, :invalid):not(:focus)::after{
  left:0; /* gruda no checkbox */
}
.field.consent input[type="checkbox"]:is(:user-invalid, :invalid):not(:focus)::before{
  left:10px; /* setinha centralizada no quadradinho */
}

/* ===== Balão de erro (tooltip) — também ativa com .was-submitted ===== */
.field :is(input:user-invalid, textarea:user-invalid, select:user-invalid):not(:focus)::after,
.was-submitted .field :is(input:invalid, textarea:invalid, select:invalid):not(:focus)::after{
  content: attr(data-error);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  padding: 6px 10px;
  font-size: 13px;
  background: #ff8899;
  color: #0b0d2c;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 4px 16px rgba(255,136,153,.28);
  animation: fadeTooltip .18s ease-out;
}
.field :is(input:user-invalid, textarea:user-invalid, select:user-invalid):not(:focus)::before,
.was-submitted .field :is(input:invalid, textarea:invalid, select:invalid):not(:focus)::before{
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 14px;
  border: 6px solid transparent;
  border-top-color: #ff8899;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
}

@keyframes fadeTooltip {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}