/* Página /conversar: os três sócios, cada um com foto, número e o WhatsApp com mensagem pronta.
   Fundo azul presença (o mesmo do hero); os retratos trazem o amarelo da parede. */

.icon-library{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.page-conversar{background:var(--blue)}

.conversar{color:var(--white)}
.conversar-palco{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;padding:clamp(104px,10vw,132px) 0 clamp(56px,7vw,96px)}
.conversar-palco::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 74% 46%,#8188e05c,transparent 58%),linear-gradient(150deg,var(--blue) 32%,#29349a 100%)}
.conversar-grid{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.6fr);grid-template-areas:"texto texto" "cena socios";column-gap:clamp(32px,4.5vw,72px);row-gap:clamp(28px,3.4vw,44px);align-items:start}

/* Texto */
.conversar-texto{grid-area:texto}
.voltar{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-left:-2px;font-size:15px;font-weight:600;color:var(--on-blue-soft);transition:color .2s}
.voltar .icon{width:20px;height:20px;transition:transform .3s var(--ease-out)}
.voltar:hover{color:var(--white)}
.voltar:hover .icon{transform:translateX(-3px)}
.conversar h1{margin-top:8px;font-size:clamp(34px,4.4vw,64px);font-weight:760;line-height:1.02;letter-spacing:-.035em}
.conversar h1 span{color:var(--yellow)}
.conversar-apoio{margin-top:16px;max-width:52ch;font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--on-blue-soft)}

/* Sócios: um retrato por coluna, o cartão inteiro é o link */
.socios{grid-area:socios;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.5vw,20px)}
.socio{animation:socio-entra .7s var(--ease-out) calc(.12s + var(--i) * .09s) both}
@keyframes socio-entra{from{opacity:0;transform:translateY(28px)}}
.socio-link{display:flex;flex-direction:column;height:100%;padding:10px 10px 12px;border-radius:22px;background:#ffffff14;box-shadow:0 0 0 1px #ffffff24 inset;transition:transform .35s var(--ease-out),background .25s,box-shadow .35s var(--ease-out)}
.socio-foto{display:block;overflow:hidden;aspect-ratio:3/4;border-radius:14px;background:var(--yellow)}
.socio-foto picture,.socio-foto img{display:block;width:100%;height:100%}
.socio-foto img{object-fit:cover;transition:transform .7s var(--ease-out)}
.socio-nome{margin-top:16px;padding:0 6px;font-size:clamp(18px,1.55vw,22px);font-weight:720;line-height:1.15;letter-spacing:-.015em;text-wrap:balance;min-height:2.3em}
.socio-papel{margin-top:2px;padding:0 6px;font-size:14px;color:var(--on-blue-soft)}
.socio-numero{margin:10px 0 16px;padding:0 6px;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.socio-acao{display:flex;align-items:center;gap:10px;min-height:50px;margin-top:auto;padding:0 14px;border-radius:12px;background:var(--yellow);color:var(--ink);font-size:15px;font-weight:650;line-height:1.2;transition:background .2s}
.socio-acao span{flex:1}
.socio-acao .icon{width:20px;height:20px;transition:transform .3s var(--ease-out)}
@media(hover:hover){
  .socio-link:hover{transform:translateY(-4px);background:#ffffff1f;box-shadow:0 0 0 1px #ffffff3d inset,0 28px 48px -28px #090e20b3}
  .socio-link:hover .socio-foto img{transform:scale(1.04)}
  .socio-link:hover .socio-acao{background:var(--yellow-soft)}
  .socio-link:hover .socio-acao .icon{transform:rotate(-8deg) scale(1.08)}
}
/* Desktop: "Sócio" acima do nome, e o nome reserva duas linhas: os números ficam na mesma altura nos três */
@media(min-width:768px){.socio-papel{order:1;margin-top:16px}.socio-foto{order:0}.socio-nome{order:2;margin-top:2px}.socio-numero{order:3}.socio-acao{order:4}}
/* Onde "Chamar no WhatsApp" não cabe numa linha, o botão diz só "WhatsApp" */
@media(min-width:768px) and (max-width:1199px),(max-width:359px){.socio-acao-pre{display:none}}
.socio-link:focus-visible{outline-color:var(--yellow);outline-offset:4px;border-radius:22px}
@media(hover:none){.socio-link:active{transform:scale(.98);transition-duration:.08s}}

/* Cena: a prévia da mensagem saindo do celular do Forma */
.conversar-cena{grid-area:cena;display:grid;justify-items:start;gap:14px}
.previa{position:relative;max-width:30ch;padding:14px 16px 15px;border-radius:18px 18px 18px 6px;background:var(--white);color:var(--ink);font-size:15px;line-height:1.45;box-shadow:0 18px 36px -22px #090e20b3}
.previa::after{content:"";position:absolute;left:18px;top:100%;border:9px solid transparent;border-top-color:var(--white);border-left-color:var(--white);border-bottom:0}
.previa-rotulo{display:block;margin-bottom:4px;font-size:12px;font-weight:700;letter-spacing:.01em;color:var(--blue)}
.conversar-forma{margin:4px 0 0;width:min(100%,240px)}
.conversar-forma img{display:block;width:100%;height:auto}
.conversar-alternativa{font-size:15px;color:var(--on-blue-soft)}
.conversar-alternativa a{color:var(--white);font-weight:600;text-decoration:underline;text-underline-offset:5px}
.conversar-alternativa a:hover{color:var(--yellow)}

@media(max-width:1023px){
  .conversar-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"texto" "socios" "cena"}
  .conversar-cena{grid-template-columns:minmax(0,150px) minmax(0,1fr);align-items:center;column-gap:20px}
  .conversar-forma{grid-row:1/3;width:100%}
  .previa{align-self:end}
  .conversar-alternativa{align-self:start}
}
@media(max-width:767px){
  .conversar-palco{min-height:0;padding-top:72px}
  .conversar-grid{row-gap:20px}
  .conversar h1{margin-top:2px;font-size:clamp(29px,8.6vw,40px);letter-spacing:-.03em}
  .conversar h1 span{display:block}
  .conversar-apoio{margin-top:12px;font-size:16px}
  .socios{grid-template-columns:1fr;gap:10px}
  .socio-link{display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:16px;padding:10px;border-radius:20px}
  .socio-foto{grid-row:1/-1;border-radius:12px}
  .socio-nome{margin-top:4px;padding:0;font-size:19px;min-height:0}
  .socio-papel,.socio-numero{padding:0}
  .socio-numero{margin:6px 0 0;font-size:16px}
  .socio-acao{align-self:end;margin-top:10px;min-height:44px;padding:0 12px;font-size:14px;gap:8px}
  .conversar-cena{grid-template-columns:minmax(0,112px) minmax(0,1fr);column-gap:14px}
  .previa{font-size:14px}
}
@media(max-width:359px){
  .socio-link{grid-template-columns:84px minmax(0,1fr);column-gap:12px}
}