/* =====================================================================
   CONTATO: só o que é desta página (o resto vem de estilo.css e dos componentes).
   A cena da abertura (a trilha com os três canais e o avião "Let's talk!"), o formulário
   (que entrega na Captação do GlassDesk; a lógica está em site.js), as pílulas "para quem"
   com os personagens de perfil, o personagem pousado no cartão, e ao lado o WhatsApp, os
   contatos e o mapa com a casa flutuante.
   ===================================================================== */

/* ── A cena da abertura: a trilha pontilhada da janela de "Como ensinamos", com os marcos dos
   três canais (e-mail, telefone, WhatsApp) e o avião com a faixa no fim. Tudo cresce e encolhe
   junto com a cena (unidades cqw, com px antes para os navegadores antigos). ── */
.contato-cena { display: block; width: min(100%, 460px); aspect-ratio: 460 / 380; min-height: 0; margin-inline: auto; container-type: inline-size; }
.contato-cena > .contato-cena__trilha { position: absolute; inset: 0; width: 100%; height: 100%; }
.contato-cena__base { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 13; }
/* O caminho já percorrido (do começo até o WhatsApp) em degradê; dali até a faixa, só o pontilhado. */
.contato-cena__feito { fill: none; stroke: url(#grad-contato); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 391 1000; }
.contato-cena .marco-j { position: absolute; width: 58px; height: 58px; margin: -29px 0 0 -29px; width: 12.6cqw; height: 12.6cqw; margin: -6.3cqw 0 0 -6.3cqw; animation: contato-boia 5s ease-in-out infinite; }
.contato-cena .marco-j svg { width: 26px; height: 26px; width: 5.6cqw; height: 5.6cqw; }
.contato-cena .marco-j:nth-of-type(2) { animation-delay: -1.7s; }
.contato-cena .marco-j:nth-of-type(3) { animation-delay: -3.4s; }
@keyframes contato-boia { 50% { translate: 0 -5px; } }
/* O avião: a ponta da faixa fica no fim da trilha */
.contato-cena > .contato-cena__aviao { position: absolute; right: 19.1%; top: 20.5%; z-index: 2; }
.contato-cena__aviao img { width: 176px; width: 38.2cqw; }
.contato-cena__aviao .aviao__faixa { font-size: 1.05rem; font-size: 3.9cqw; padding: .55em 1.5em .55em .8em; }

/* ── A seção do formulário ── */
.contato-secao { padding-top: 84px; }
.contato { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 40px; align-items: start; }

/* O cartão do formulário. A borda de cima tem a cor do perfil escolhido (como os painéis da capa), e o
   personagem escolhido fica pousado nela. */
.contato__cartao { position: relative; --cor: var(--laranja); }
.contato__cartao[data-para="outra"] { --cor: var(--verde); }
.formulario { position: relative; padding: clamp(24px, 4vw, 42px); border-radius: 32px; background: #fff; box-shadow: var(--sombra-alta), inset 0 6px 0 var(--cor); transition: box-shadow .4s; }
.formulario__cabeca { margin-bottom: 22px; padding-right: 96px; }
.formulario__cabeca .selo { margin-bottom: 12px; }
.formulario__cabeca h2 { margin: 0; font-size: clamp(1.55rem, 1.2rem + 1.1vw, 2rem); }
/* Quem chega por /contato/#formulario vê o cartão inteiro, com o personagem pousado em cima */
#formulario { scroll-margin-top: 180px; }

.contato__pouso { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.contato__pousado { position: absolute; height: auto; max-width: none; filter: drop-shadow(0 8px 8px rgba(11, 74, 115, .14)); transition: opacity .3s, scale .45s var(--mola), visibility 0s; }
.contato__pousado--eu { width: 84px; right: 38px; top: -84px; animation: pedala 1.2s ease-in-out infinite; }
.contato__pousado--outra { width: 116px; right: 26px; top: -58px; animation: pousa-menino 5s ease-in-out infinite; }
.contato__cartao[data-para="eu"] .contato__pousado--outra,
.contato__cartao[data-para="outra"] .contato__pousado--eu { opacity: 0; scale: .5; visibility: hidden; transition: opacity .25s, scale .3s, visibility 0s .3s; }
/* Enviado: o personagem comemora */
.contato__cartao.enviado .contato__pousado--eu { animation: pedala 1.2s ease-in-out infinite, contato-festa .9s var(--mola) 2; }
.contato__cartao.enviado .contato__pousado--outra { animation: pousa-menino 5s ease-in-out infinite, contato-festa .9s var(--mola) 2; }
@keyframes contato-festa { 30% { translate: 0 -16px; rotate: -6deg; } 55% { translate: 0 0; rotate: 0deg; } 70% { translate: 0 -6px; } }

/* Campos */
.campo { margin-bottom: 20px; }
.campo label, .campo legend { display: block; margin-bottom: 8px; padding: 0; font: 800 1rem/1.3 var(--titulo); color: var(--azul-escuro); }
.campo small { font: 600 .86rem var(--texto); color: var(--suave); }
.campo fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.campo input[type=text], .campo input[type=tel], .campo textarea, .campo select {
  width: 100%; min-height: 54px; padding: 13px 16px; border: 2px solid var(--linha); border-radius: 16px; background: #fbfdff;
  font: 400 1.05rem var(--texto); color: var(--tinta); transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.campo input::placeholder, .campo textarea::placeholder { color: #7b8fa3; }
.campo input[type=text]:hover, .campo input[type=tel]:hover, .campo textarea:hover, .campo select:hover { border-color: #b8cce2; }
.campo input[type=text]:focus, .campo input[type=tel]:focus, .campo textarea:focus, .campo select:focus { outline: none; border-color: var(--azul); background: #fff; box-shadow: 0 0 0 4px rgba(3, 119, 180, .15); }
.campo textarea { min-height: 116px; resize: vertical; line-height: 1.5; }
.campo--duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
#bloco-aluno:not([hidden]) { animation: abre .4s var(--mola); }
.armadilha { position: absolute; left: -9999px; }

/* "As aulas são para quem?": as pílulas com os personagens de perfil, como as escolhas da capa.
   O rádio cobre a pílula inteira, transparente. */
.contato-perfis { display: grid; gap: 10px; }
.contato-perfil { position: relative; display: block; margin: 0 !important; }
.contato-perfil input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.contato-perfil__pilula { display: flex; align-items: center; gap: 14px; min-height: 66px; padding: 7px 12px 7px 7px; border-radius: 99px; background: #fff; box-shadow: var(--sombra), inset 0 0 0 2px var(--linha); transition: transform .3s var(--mola), box-shadow .3s, background-color .3s; }
.contato-perfil .icone-perfil { width: 52px; height: 52px; }
.contato-perfil__nome { flex: 1; min-width: 0; font: 900 1.12rem/1.2 var(--titulo); color: var(--azul-escuro); }
.contato-perfil__marca { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--linha); color: transparent; transition: background-color .25s, color .25s, box-shadow .25s, transform .35s var(--mola); }
.contato-perfil__marca svg { width: 16px; height: 16px; }
.contato-perfil:hover .contato-perfil__pilula { transform: translateX(5px); box-shadow: var(--sombra-alta), inset 0 0 0 2px var(--cor); }
.contato-perfil input:checked + .contato-perfil__pilula { background: var(--fundo); box-shadow: var(--sombra-alta), inset 0 0 0 3px var(--cor); }
.contato-perfil input:checked + .contato-perfil__pilula .contato-perfil__marca { background: var(--texto-cor); color: #fff; box-shadow: none; transform: scale(1.08); }
.contato-perfil input:checked + .contato-perfil__pilula .icone-perfil { animation: contato-pulo .55s var(--mola); }
.contato-perfil input:focus-visible + .contato-perfil__pilula { outline: 3px solid var(--azul); outline-offset: 3px; }
@keyframes contato-pulo { 40% { translate: 0 -7px; } }
/* A fada: quem já estuda na Glass School fala com a secretaria pelo WhatsApp */
.contato-aluno { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; padding-left: 7px; font-size: .96rem; line-height: 1.45; color: var(--suave); }
.contato-aluno .icone-perfil { width: 40px; height: 40px; box-shadow: inset 0 0 0 2px var(--cor); }
.contato-aluno .icone-perfil img { width: 30px; height: 30px; }
.contato-aluno a { font-weight: 700; color: var(--teal-texto); text-underline-offset: 3px; }
.contato-aluno a:hover { color: var(--teal-f); }

/* Turnos: as pílulas do filtro da estante (a escolhida fica escura, com o sinal de certo) */
.contato-turnos { display: flex; flex-wrap: wrap; gap: 8px; }
.contato-turno { position: relative; margin: 0 !important; }
.contato-turno input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.contato-turno span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 2px var(--linha); font: 800 .95rem var(--titulo); color: var(--azul-escuro); transition: background-color .2s, color .2s, box-shadow .2s; }
.contato-turno svg { width: 0; height: 16px; margin-right: 0; opacity: 0; transition: width .25s var(--mola), margin-right .25s var(--mola), opacity .2s; }
.contato-turno:hover span { box-shadow: inset 0 0 0 2px var(--azul); }
.contato-turno input:checked + span { background: var(--azul-escuro); color: #fff; box-shadow: none; }
.contato-turno input:checked + span svg { width: 16px; margin-right: 7px; opacity: 1; }
.contato-turno input:focus-visible + span { outline: 3px solid var(--azul); outline-offset: 3px; }

/* A autorização */
.campo .aceite { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 0; font: 400 .98rem/1.5 var(--texto); color: var(--tinta); cursor: pointer; }
.aceite input { -webkit-appearance: none; appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border: 2px solid #b8cce2; border-radius: 8px; background: #fff center / 16px no-repeat; cursor: pointer; transition: background-color .2s, border-color .2s, transform .25s var(--mola); }
.aceite input:hover { border-color: var(--azul); }
.aceite input:checked { border-color: var(--azul); background-color: var(--azul); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); transform: scale(1.06); }
.aceite input:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }

/* O erro: um recado com a barra de cor, e o campo com problema marcado (contato.js) */
.formulario__erro { position: relative; margin: 0 0 16px; padding: 12px 16px 12px 22px; border-radius: 16px; background: #fdecea; color: #8f1d15; font-weight: 700; line-height: 1.45; animation: abre .35s var(--mola); }
.formulario__erro::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 5px; border-radius: 0 5px 5px 0; background: #d4462f; }
.formulario__erro:empty { display: none; }
.formulario__erro a { color: inherit; }
.campo > .formulario__erro { margin: 10px 0 0; }
.campo--erro input[type=text], .campo--erro input[type=tel], .campo--erro textarea, .campo--erro select,
.campo--erro input[type=text]:focus, .campo--erro input[type=tel]:focus, .campo--erro textarea:focus, .campo--erro select:focus { border-color: #d4462f; box-shadow: 0 0 0 4px rgba(212, 70, 47, .14); }
.campo--erro .contato-perfil input:not(:checked) + .contato-perfil__pilula { box-shadow: var(--sombra), inset 0 0 0 2px #d4462f; }
.campo--erro .aceite input { border-color: #d4462f; box-shadow: 0 0 0 4px rgba(212, 70, 47, .12); }

.formulario button[type=submit] { width: 100%; min-height: 58px; font-size: 1.12rem; }
.formulario button[type=submit]:disabled { opacity: .75; cursor: progress; transform: none; }
.formulario .aviso { margin: 12px 0 0; text-align: center; font-size: .9rem; color: var(--suave); }

/* Enviado (o texto vem de site.js): o sinal de certo entra com uma mola */
.formulario__ok { padding: 18px 0 6px; text-align: center; }
.formulario__ok .grande { position: relative; width: 76px; height: 76px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 50%; background: var(--verde); color: #fff; box-shadow: 0 0 0 10px rgba(31, 157, 85, .14); animation: contato-estala .6s var(--mola); }
.formulario__ok .grande svg { width: 38px; height: 38px; }
.formulario__ok h2 { font-size: clamp(1.55rem, 1.2rem + 1.1vw, 2rem); }
.formulario__ok p { color: var(--suave); max-width: 460px; margin-inline: auto; }
@keyframes contato-estala { from { transform: scale(.3); opacity: 0; } }

/* ── Ao lado: o WhatsApp, os contatos e o mapa ── */
.lateral { display: grid; gap: 20px; }
.contato-whats { padding-top: 26px; }
.contato-whats__icone { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 50%; background: var(--whats); color: #fff; box-shadow: 0 12px 24px -10px rgba(23, 128, 63, .75); transition: transform .35s var(--mola); }
.contato-whats__icone svg { width: 28px; height: 28px; }
.contato-whats:hover .contato-whats__icone { transform: rotate(-8deg) scale(1.06); }
.contato-whats h3 { font-size: 1.3rem; }
.contato-whats .botao { width: 100%; }
.contato-canais { padding: 14px; }
.lista-contato { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lista-contato a { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 6px 12px 6px 6px; border-radius: 18px; color: var(--tinta); text-decoration: none; line-height: 1.4; transition: background-color .2s; }
.lista-contato a:hover { background: var(--ceu-claro); }
.lista-contato a:hover > span:last-child { color: var(--azul); }
.lista-contato__icone { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--ceu-claro); color: var(--azul); transition: transform .35s var(--mola), background-color .2s; }
.lista-contato__icone svg { width: 20px; height: 20px; }
.lista-contato a:hover .lista-contato__icone { background: #fff; transform: rotate(-8deg) scale(1.06); }
/* O mapa, com a casa flutuante (a escola) pousada em cima */
.contato-mapa { position: relative; margin-top: 60px; }
.contato-mapa__casa { position: absolute; z-index: 1; right: 18px; top: -76px; width: 104px; height: auto; pointer-events: none; filter: drop-shadow(0 14px 14px rgba(11, 74, 115, .2)); animation: flutua 7s ease-in-out infinite; }
.mapa-google { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 24px; border: 1px solid var(--linha); background: var(--ceu-claro); box-shadow: var(--sombra); }
.mapa-google iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ── Como chegar (#como-chegar, lote 2, 01/10/2026): o endereço e o ponto de referência ao lado da foto da
   fachada, num cartão branco com a nuvem da identidade andando no canto de cima (longe da placa e do diamante). ── */
.como-chegar__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px; align-items: center; }
.como-chegar__texto > p { color: #2f4459; font-size: 1.12rem; max-width: 560px; }
.como-chegar__ponto { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; align-items: start; margin-top: 24px; }
.como-chegar__ponto .cartao__icone { margin: 0; }
.como-chegar__ponto h3 { margin: 6px 0 6px; }
.como-chegar__foto { position: relative; margin: 0; padding: 10px; border-radius: 28px; background: #fff; box-shadow: var(--sombra-alta); }
.como-chegar__foto img { width: 100%; height: auto; border-radius: 20px; }
.nuvem--fachada { z-index: 1; width: 104px; left: -30px; top: -30px; animation-duration: 30s; filter: drop-shadow(0 6px 8px rgba(11, 74, 115, .2)); }

/* Computador estreito: o cartão fica estreito demais para dois campos lado a lado */
@media (min-width: 961px) and (max-width: 1180px) {
  .campo--duplo { grid-template-columns: 1fr; }
}
/* ── Tablet ── */
@media (max-width: 960px) {
  .contato { grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 680px; margin-inline: auto; }
  .contato-cena { width: min(100%, 400px); }
  .como-chegar__grade { grid-template-columns: minmax(0, 1fr); gap: 34px; max-width: 680px; margin-inline: auto; }
}
/* ── Celular ── */
@media (max-width: 760px) {
  .contato-cena { width: min(100%, 300px); margin-top: 4px; }
  .contato-secao { padding-top: 64px; }
  .formulario { padding: 26px 18px 22px; border-radius: 26px; }
  .formulario__cabeca { padding-right: 58px; margin-bottom: 18px; }
  #formulario { scroll-margin-top: 140px; }
  .contato__pousado--eu { width: 58px; right: 22px; top: -60px; }
  .contato__pousado--outra { width: 82px; right: 14px; top: -42px; }
  .contato-perfil__pilula { min-height: 60px; gap: 12px; padding: 6px 10px 6px 6px; }
  .contato-perfil .icone-perfil { width: 46px; height: 46px; }
  .contato-perfil .icone-perfil img { width: 36px; height: 36px; }
  .contato-perfil .icone-perfil--menino img { width: 45px; }
  .contato-perfil__nome { font-size: 1.04rem; }
  .contato-perfil:hover .contato-perfil__pilula { transform: none; }
  .contato-aluno { padding-left: 3px; font-size: .92rem; }
  .campo--duplo { grid-template-columns: 1fr; }
  .contato-turnos { display: grid; grid-template-columns: repeat(3, 1fr); }
  .contato-turno span { justify-content: center; width: 100%; padding: 0 8px; }
  .contato-whats, .contato-canais { padding: 22px 18px; }
  .contato-canais { padding: 10px; }
  .contato-mapa { margin-top: 46px; }
  .contato-mapa__casa { width: 84px; top: -62px; right: 14px; }
  .contato-whats .botao { padding: 0 14px; gap: 8px; }
  .como-chegar__texto > p { font-size: 1.04rem; }
  .como-chegar__ponto { grid-template-columns: minmax(0, 1fr); }
  .como-chegar__ponto .cartao__icone { width: 48px; height: 48px; margin-bottom: 10px; border-radius: 16px; }
  .como-chegar__foto { padding: 8px; border-radius: 22px; }
  .como-chegar__foto img { border-radius: 16px; }
  .nuvem--fachada { width: 72px; left: -10px; top: -24px; }
}
@media (max-width: 380px) {
  .contato-whats .botao { font-size: .95rem; }
}