/* CMWR V3.0 · shared · 05-contato */
html:has(.contact-section input:focus, .contact-section textarea:focus, dialog[open]) {
  scroll-snap-type: none;
}

.back-to-player {
  position: fixed;
  z-index: 90;
  left: clamp(12px,1.35vw,22px);
  bottom: clamp(20px,2.05vw,30px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 8px;
  border: 1px solid rgba(228,173,85,.72);
  border-radius: 999px;
  background: rgba(8,11,13,.84);
  color: #f3dfb4;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
}

.back-to-player__icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #d6a25e;
  color: #101315;
  font-weight: 900;
}

.back-to-player__text {
  font: 800 10px/1 Arial,sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.back-to-player.is-disabled {
  opacity: .20;
  pointer-events: none;
}

/* Chamada do player enquanto a primeira sessão está em foco. */
.back-to-player.is-hero {
  border-color: #61c5ff;
  color: #e9f8ff;
  box-shadow: 0 4px 18px rgba(0,0,0,.35), 0 0 0 2px rgba(44,156,255,.4);
  animation: player-call-glow 1.7s ease-in-out infinite;
}
.back-to-player.is-hero .back-to-player__icon {
  background: #57bafb;
}
@keyframes player-call-glow {
  50% { box-shadow: 0 4px 18px rgba(0,0,0,.35), 0 0 0 4px rgba(44,156,255,.88), 0 0 18px rgba(44,156,255,.65); }
}
@media (prefers-reduced-motion: reduce) {
  .back-to-player.is-hero { animation: none; }
}

/* Cidade + Web Rádio — V5.0 | Sessão 05 — Contato | TRAVADA
   Não alterar composição/posicionamento; somente parallax no fechamento geral. */

.contact-section.contact-section--telegram {
  position: relative;
  z-index: 5;
  width: 100%;
  min-height: 100svh;
  padding: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #090a0b;
  color: #f3dfb4;
  isolation: isolate;
}

.contact-stage {
  position: relative;
  width: 100vw;
  height: auto;
  aspect-ratio: 1881 / 836;
  flex: none;
  margin: 0;
  overflow: hidden;
  border-radius: 34px;
  background: #071018;
  box-shadow: 0 24px 72px rgba(0,0,0,.48);
}

.contact-artboard,
.contact-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.contact-artboard { overflow: hidden; isolation: isolate; border-radius: inherit; }

.contact-art {
  z-index: 0;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
  border-radius: inherit;
}

/* ---------------- LOGO OFICIAL ---------------- */
.official-neon-logo {
  position: absolute;
  z-index: 4;
  left: 10.0%;
  top: 7.0%;
  width: 31.5%;
  height: 28.5%;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.official-neon-logo img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  filter:
    brightness(1.03)
    drop-shadow(0 0 3px rgba(255,221,150,.82))
    drop-shadow(0 0 10px rgba(255,151,47,.62));
}

/* ---------------- TELEGRAMA ---------------- */
.telegram-form {
  position: absolute;
  display: grid;
  z-index: 7;
  inset: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
  color: #261a14;
}

.telegram-heading {
  position: absolute;
  left: 11.65%;
  top: 44.10%;
  font: 900 clamp(18px,1.66vw,33px)/1 Georgia,"Times New Roman",serif;
  letter-spacing: .035em;
  color: #1d120d;
  text-shadow: 0 1px rgba(255,255,255,.34), 0 0 .05vw rgba(0,0,0,.20);
}

.telegram-field {
  position: absolute;
  display: grid;
  gap: 5px;
  pointer-events: auto;
}

.telegram-field > span {
  position: absolute;
  left: .65vw;
  top: .34vw;
  z-index: 2;
  color: rgba(37,24,16,.94);
  font: 800 clamp(8px,.59vw,12px)/1 Arial,sans-serif;
  letter-spacing: .025em;
  pointer-events: none;
}

.telegram-field > span small { font-size: .82em; font-weight: 600; }

.telegram-field input,
.telegram-field textarea {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(241,223,189,.35);
  border-radius: .28vw;
  outline: none;
  background: rgba(5,11,14,.30);
  color: var(--cream);
  caret-color: #aa2b20;
  font: 16px Arial,sans-serif;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.telegram-field textarea {
  resize: none;
  overflow: auto;
}

.telegram-field input:hover,
.telegram-field textarea:hover {
  border-color: rgba(167,91,38,.52);
  box-shadow: inset 0 0 .55vw rgba(216,132,53,.10);
}

.telegram-field input:focus,
.telegram-field textarea:focus {
  border-color: rgba(194,91,37,.84);
  background: rgba(255,247,220,.18);
  box-shadow: inset 0 0 .72vw rgba(228,132,47,.18), 0 0 .18vw rgba(255,207,113,.32);
}

.telegram-field--email > span {
  top: .58vw;
}

.telegram-field--message > span {
  top: .60vw;
}

.telegram-field--name { left: 11.55%; top: 51.80%; width: 26.55%; height: 5.00%; }

.telegram-field--email { left: 11.55%; top: 57.80%; width: 26.55%; height: 5.00%; }

.telegram-field--message { left: 11.55%; top: 63.80%; width: 26.55%; height: 13.55%; }

.telegram-submit {
  position: absolute;
  z-index: 2;
  left: 14.70%;
  top: 78.55%;
  width: 15.35%;
  height: 5.15%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .58vw;
  pointer-events: auto;
  border: 1px solid rgba(95,8,9,.92);
  border-radius: .30vw;
  background: linear-gradient(180deg,#da171b,#a6080b 72%,#860507);
  color: #fff0d7;
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 .15vw .35vw rgba(0,0,0,.30);
  font: 800 clamp(8px,.66vw,13px)/1 Arial,sans-serif;
  letter-spacing: .045em;
  text-transform: uppercase;
  cursor: pointer;
}

.telegram-submit__plane { font-size: 1.35em; transform: rotate(-17deg); }

.telegram-submit:hover,
.telegram-submit:focus-visible {
  outline: none;
  filter: brightness(1.08);
  box-shadow: inset 0 1px rgba(255,255,255,.20), 0 0 .8vw rgba(255,70,35,.40);
}

.telegram-status {
  position: absolute;
  left: 10.1%;
  top: 85.1%;
  width: 29.0%;
  min-height: 1.3em;
  margin: 0;
  padding: .20vw .38vw;
  color: #fff0cf;
  background: rgba(38,15,8,.78);
  border-radius: .18vw;
  font: 700 clamp(6px,.43vw,9px)/1.25 Arial,sans-serif;
  pointer-events: none;
}

.telegram-status:empty { display:none; }

/* O retorno do envio precisa permanecer legível sobre a ilustração. */
.telegram-status:not(:empty){z-index:22;left:35%;top:80%;width:39%;box-sizing:border-box;padding:8px 10px;font:700 clamp(12px,.85vw,15px)/1.3 Arial,sans-serif;border:1px solid rgba(243,199,121,.55);border-radius:6px;text-align:center;overflow-wrap:anywhere}

.message-trap { display:none !important; }

/* ---------------- TEXTO DA CABINE ---------------- */
.phone-copy {
  position: absolute;
  z-index: 6;
  left: 80.75%;
  top: 16.0%;
  width: 10.85%;
  height: 51.0%;
  color: #e4ad62;
  text-transform: uppercase;
  pointer-events: none;
}

.phone-copy__item {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  text-shadow: 0 1px 2px #000, 0 0 .34vw rgba(224,149,64,.18);
}

.phone-copy__item--call { top: 8%; }

.phone-copy__item--voice { top: 35%; }

.phone-copy__item--story { top: 72%; }

.phone-copy__icon {
  display: block;
  margin-bottom: .32vw;
  color: #edb86c;
  font: 700 clamp(16px,1.55vw,30px)/1 Arial,sans-serif;
}

.phone-copy strong {
  display: block;
  font: 800 clamp(8px,.72vw,14px)/1.16 "Arial Narrow",Arial,sans-serif;
  letter-spacing: .035em;
}

.phone-copy small {
  display: block;
  margin-top: .24vw;
  font: 800 clamp(7px,.56vw,11px)/1.05 "Arial Narrow",Arial,sans-serif;
  letter-spacing: .035em;
  color: #ffd083;
  text-shadow: 0 1px 2px #000, 0 0 .26vw rgba(255,194,100,.24);
}

/* ---------------- GRAVAR NA FICHA ---------------- */
.phone-start-zone {
  position: absolute;
  z-index: 13;
  left: 76.65%;
  top: 60.55%;
  width: 3.25%;
  height: 6.15%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
}

.phone-start-zone__play {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 45%;
  aspect-ratio: 1;
  translate: -50% -50%;
  clip-path: polygon(18% 8%, 92% 50%, 18% 92%);
  background: #ffc13e;
  filter: drop-shadow(0 0 .13vw #fff3b4) drop-shadow(0 0 .45vw rgba(255,174,42,.82));
  transition: transform .15s ease, filter .15s ease, opacity .15s ease;
}

.phone-start-zone__label {
  position: absolute;
  left: 50%;
  top: 74%;
  translate: -50% 0;
  color: #ffd575;
  font: 800 clamp(5px,.37vw,8px)/1 Arial,sans-serif;
  letter-spacing: .055em;
  text-shadow: 0 1px 2px #000;
}

.phone-start-zone:not(:disabled):hover .phone-start-zone__play,
.phone-start-zone:not(:disabled):focus-visible .phone-start-zone__play { transform: scale(1.14); }

.phone-start-zone:focus-visible { outline: 1px dashed rgba(255,213,123,.70); outline-offset:.08vw; }

.phone-start-zone:disabled { cursor: default; opacity:.52; }

.voice-help{display:none;position:absolute;z-index:20;left:57%;top:46%;width:36%;box-sizing:border-box;margin:0;padding:10px 12px;border:1px solid #d8a364;border-radius:8px;background:rgba(17,16,16,.96);color:#fff0d4;font:700 clamp(12px,.85vw,15px)/1.4 Arial,sans-serif;box-shadow:0 6px 20px rgba(0,0,0,.5);pointer-events:none}
.voice-help strong{color:#ffc15f}
.phone-start-zone:hover + .voice-help,.phone-start-zone:focus-visible + .voice-help{display:block}

/* ---------------- PAINEL DE GRAVAÇÃO ---------------- */
.voice-panel {
  position: absolute;
  z-index: 12;
  left: 65.6%;
  top: 78.80%;
  width: 29.55%;
  height: 14.7%;
  box-sizing: border-box;
  padding: .54vw .74vw .46vw;
  border: 1px solid rgba(138,145,148,.42);
  border-radius: .62vw;
  background:
    radial-gradient(circle at 22% 0%, rgba(255,145,54,.07), transparent 31%),
    linear-gradient(180deg,rgba(16,18,19,.97),rgba(4,6,7,.98));
  box-shadow: inset 0 0 .65vw rgba(255,255,255,.025), 0 .26vw .78vw rgba(0,0,0,.46);
}

.voice-live-display {
  height: 29%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .42vw;
  padding-bottom: .25vw;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: #f0ede7;
}

.voice-live-dot {
  width: clamp(7px,.72vw,13px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  border-radius: 50%;
  background:#5c5c5c;
  box-shadow:0 0 .18vw rgba(255,255,255,.16);
}

.voice-live-display strong { font:800 clamp(8px,.72vw,14px)/1 "Arial Narrow",Arial,sans-serif; white-space:nowrap; }

.voice-live-display small { color:#d4c6ad; font:700 clamp(6px,.43vw,9px)/1 Arial,sans-serif; text-transform:uppercase; letter-spacing:.05em; }

.contact-section--telegram.is-recording .voice-live-dot { background:#ff1e25; box-shadow:0 0 .30vw #ff1e25,0 0 .78vw rgba(255,30,37,.62); animation:voicePulse 1s ease-in-out infinite; }

.contact-section--telegram.is-paused .voice-live-dot { background:#ffc141; box-shadow:0 0 .58vw rgba(255,193,65,.68); }

.contact-section--telegram.has-recording .voice-live-dot { background:#35cf75; box-shadow:0 0 .58vw rgba(53,207,117,.62); }

@keyframes voicePulse { 50%{opacity:.34;} }

.voice-actions {
  height: 71%;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: .18vw;
  padding-top: .32vw;
}

.voice-action {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #eeeae2;
  cursor: pointer;
  padding: 0;
  opacity: 1;
}

.voice-action__icon {
  position: absolute;
  left: 50%;
  top: 3%;
  translate: -50% 0;
  width: clamp(25px,2.18vw,42px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(236,236,236,.70);
  border-radius: 50%;
  background: rgba(0,0,0,.14);
  color: #f5f4ef;
  font: 800 clamp(11px,1.0vw,19px)/1 Arial,sans-serif;
  transition: transform .15s ease,box-shadow .15s ease;
}

.voice-action > span:last-child {
  position: absolute;
  left: 50%;
  bottom: 3%;
  translate: -50% 0;
  font: 600 clamp(7px,.52vw,11px)/1 Arial,sans-serif;
  white-space: nowrap;
}

.voice-action--restart .voice-action__icon,
.voice-action--stop .voice-action__icon,
.voice-action--delete .voice-action__icon { border-color:rgba(235,43,43,.92); }

.voice-action--restart .voice-action__icon { color:#ff2c33; }

.voice-action--send .voice-action__icon { border-color:rgba(0,222,91,.94);color:#00dd62; }

.voice-action:not(:disabled):hover .voice-action__icon,
.voice-action:not(:disabled):focus-visible .voice-action__icon { transform:scale(1.08);box-shadow:0 0 .64vw rgba(255,185,76,.28); }

.voice-action--send:not(:disabled):hover .voice-action__icon { box-shadow:0 0 .68vw rgba(0,221,95,.30); }

.voice-action:focus-visible { outline:1px dashed rgba(255,213,127,.65);outline-offset:.05vw; }

.voice-action:disabled { cursor:default;opacity:.46; }

#voice-preview-audio { display:none; }

/* ---------------- ENVELOPE -> CAIXA ---------------- */
.mail-flight {
  position:absolute;
  z-index:16;
  left:25.2%;
  top:79.2%;
  width:4.0%;
  aspect-ratio:1.55/1;
  opacity:0;
  pointer-events:none;
}

.mail-flight i {
  position:absolute;inset:0;display:block;
  border:1px solid rgba(100,56,34,.74);
  border-radius:.1vw;
  background:
    linear-gradient(150deg,transparent 49%,rgba(128,75,48,.38) 50% 51%,transparent 52%),
    linear-gradient(210deg,transparent 49%,rgba(128,75,48,.38) 50% 51%,transparent 52%),
    #f1d9ac;
  box-shadow:0 .22vw .35vw rgba(0,0,0,.42);
}

.contact-section--telegram.is-posting .mail-flight { animation:telegramToMailbox 1.18s cubic-bezier(.25,.68,.20,1) both; }

@keyframes telegramToMailbox {
  0%{opacity:0;left:25.2%;top:79.2%;transform:scale(.86) rotate(-4deg)}
  12%{opacity:1}
  55%{opacity:1;left:39.0%;top:64.0%;transform:scale(.64) rotate(5deg)}
  82%{opacity:1;left:48.0%;top:50.0%;transform:scale(.42) rotate(1deg)}
  100%{opacity:0;left:50.2%;top:45.2%;transform:scale(.18) rotate(0)}
}

/* ---------------- IDENTIFICAÇÃO DA CAIXA DE CORREIO ---------------- */
.mailbox-label {
  position: absolute;
  z-index: 9;
  left: 49.70%;
  top: 53.25%;
  width: 5.65%;
  text-align: center;

  font-family: Impact, "Arial Black", "Arial Narrow", sans-serif;
  font-size: clamp(12px,.98vw,19px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.018em;
  text-transform: uppercase;

  /* pintura azul envelhecida / levemente descascada */
  color: transparent;
  background:
    repeating-linear-gradient(
      96deg,
      #79bfd4 0 4px,
      #5d9fb5 4px 7px,
      rgba(121,191,212,.58) 7px 9px,
      transparent 9px 10px
    ),
    repeating-linear-gradient(
      8deg,
      rgba(255,255,255,.18) 0 1px,
      transparent 1px 5px
    );
  -webkit-background-clip: text;
  background-clip: text;

  text-shadow:
    0 1px 0 rgba(18,31,37,.88),
    0 0 .05vw rgba(73,135,156,.18);
  filter: contrast(1.05) saturate(.88);

  transform: rotate(-.5deg);
  opacity: .94;
  pointer-events: none;
}

/* ---------------- ASSINATURA / FOOTER ---------------- */
.site-credit {
  position: absolute;
  z-index: 18;
  left: 50%;
  top: 94.40%;
  translate: -50% 0;
  width: 28.75%;
  height: 4.90%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .72vw;
  padding: .24vw .80vw;
  border: 1px solid rgba(177,151,111,.24);
  border-radius: .42vw;
  background:
    radial-gradient(circle at 22% 0%, rgba(255,145,54,.035), transparent 31%),
    linear-gradient(180deg,rgba(16,18,19,.62),rgba(4,6,7,.70));
  color: #eee7da;
  text-decoration: none;
  box-shadow: inset 0 0 .44vw rgba(255,255,255,.014), 0 .14vw .36vw rgba(0,0,0,.22);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}

.site-credit span,
.site-credit strong {
  white-space: nowrap;
}

.site-credit span {
  font: 700 clamp(10px,.72vw,14px)/1 Arial,sans-serif;
}

.site-credit strong {
  color: #f0bd74;
  font: 900 clamp(10px,.76vw,15px)/1 Arial,sans-serif;
  letter-spacing: .025em;
}

.site-credit:hover,
.site-credit:focus-visible {
  color: #fffaf2;
  border-color: rgba(228,173,85,.62);
  outline: none;
  transform: translateY(-1px);
}

/* ---------------- SELOS / LINKS ---------------- */
.contact-socials { position:absolute;z-index:14;inset:0;pointer-events:none; }

.contact-socials .social-stamp { position:absolute;display:block;pointer-events:auto;background:transparent;border:0;outline:0;text-decoration:none; }

.social-stamp--facebook { left:34.55%;top:78.0%;width:5.0%;height:10.0%;transform:rotate(-3deg); }

.social-stamp--instagram { left:39.45%;top:77.6%;width:5.1%;height:10.1%;transform:rotate(3deg); }

.contact-socials .social-stamp:focus-visible { outline:2px solid rgba(255,216,135,.75);outline-offset:.15vw;border-radius:.2vw; }

@media (prefers-reduced-motion:reduce){
.contact-section--telegram.is-posting .mail-flight { animation-duration:.01ms; }
.contact-section--telegram.is-recording .voice-live-dot { animation:none; }
}

/* =======================================================
   MOBILE — SESSÃO 05 / CONTATO EM DUAS FATIAS
   Imagem-base aprovada: sessao05-fundo-mobile.webp
   Matemática: imagem = 165% da janela útil.
   Assim cada extremo revela ~60,6% da fotografia e as duas
   fatias compartilham ~21,2% do centro da mesma mesa.
   ======================================================= */
.contact-art--mobile,
.contact-mobile-intro { display:none; }

.contact-scene-intro{display:none}