/* ============================================================
 * MÓDULO «A ESFERA LÍQUIDA, NUM OLHAR» — mapa conceptual premium.
 * Revisão editorial final: fundo CLARO e quente (o branco volta a dominar,
 * como nos restantes módulos da Home V2); a fotografia passa a textura subtil.
 * O diagrama central é o elemento dominante; as três bolinhas convergem no
 * ponto comum (Crianças e Jovens). Listas HTML; SVG só para o diagrama.
 * Encapsulado em .infog. Animações via .fi→.v. Respeita reduced-motion.
 * ============================================================ */

.infog{position:relative;overflow:hidden;
  padding:clamp(2.4rem,4vw,3.6rem) 0 clamp(3.2rem,5.5vw,5rem);
  margin-bottom:clamp(2.4rem,5vw,4.4rem);
  background:var(--i-bg);
  /* paleta local — clara, quente, legível sobre branco */
  --i-bg:#f7f5f1;--i-panel:#fbfaf7;
  --i-ink:#1a1a1a;--i-ink2:#39383a;--i-ink3:#6c6a6e;--i-ink4:#9a989c;
  --i-rule:rgba(12,42,115,.12);--i-rule2:rgba(12,42,115,.07);
  --i-pensar:#2b5fc4;--i-viver:#2e8ea6;--i-decidir:#a97f2e;
  --i-navy:var(--navy)}

/* fotografia — textura ténue e MUITO desfocada, dessaturada, sob o branco:
   dá profundidade e identidade sem nunca competir com a leitura. */
.infog-bg{position:absolute;inset:-4%;background-size:cover;background-position:center;
  filter:blur(13px) grayscale(.64) saturate(.44) brightness(1.02) contrast(1.07);
  opacity:.5;transform:scale(1.06)}
/* véu quente: mais leve, para a fotografia se perceber melhor, mas ainda a garantir o branco */
.infog-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(247,245,241,.6) 0%,rgba(247,245,241,.42) 42%,rgba(247,245,241,.58) 100%)}
/* clareira central: branco reforçado atrás do diagrama e listas — legibilidade perfeita */
.infog-scrim{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 52% at 50% 46%,rgba(255,255,255,.72) 0%,rgba(255,255,255,.18) 55%,transparent 74%)}
.infog-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(40% 50% at 50% 118%,rgba(12,42,115,.05) 0%,transparent 60%)}
.infog-wrap{position:relative;z-index:1;max-width:1500px;margin:0 auto;padding:0 clamp(1.4rem,3.6vw,3.6rem)}

/* ---------- cabeçalho: o título domina a entrada ---------- */
.infog-head{text-align:center}
.infog-eyebrow{display:inline-flex;align-items:center;gap:.65rem;font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:clamp(1.5rem,2.8vw,2.2rem)}
.infog-eyebrow::before,.infog-eyebrow::after{content:"";width:26px;height:1px;background:var(--gold);opacity:.7}
.infog-frase{font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,2.15vw,2.35rem);line-height:1.24;letter-spacing:-.02em;color:var(--i-ink);max-width:min(100%,70rem);margin:0 auto}
.infog-frase .c{color:var(--navy);font-weight:500}
.infog-frase .v{font-weight:400;font-style:italic}
.infog-frase .v.p{color:var(--i-pensar)}.infog-frase .v.vv{color:var(--i-viver)}.infog-frase .v.d{color:var(--i-decidir)}
.infog-frase .ctx{color:var(--i-ink3);font-style:italic;font-weight:300}
.infog-br{display:none}
@media(min-width:1000px){.infog-br{display:inline}}
/* Maestria · Criatividade · Estratégia — a assinatura dos três eixos */
.infog-eixos{font-family:var(--sans);font-weight:600;font-size:.86rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep);text-align:center;max-width:none;margin:clamp(1.4rem,2.4vw,2rem) auto 0}
.infog-eixos .sep{color:var(--gold);opacity:.55;margin:0 .55em}

/* ---------- corpo: mundo | diagrama (dominante) | IA ---------- */
.infog-desktop{margin-top:clamp(2.4rem,4.8vw,4.2rem)}
.infog-grid{display:grid;grid-template-columns:minmax(200px,250px) minmax(0,760px) minmax(200px,250px);gap:clamp(1rem,2vw,2.2rem);align-items:start;justify-content:center;text-align:left}
.infog-col{padding-top:1.2rem}
.infog-ztitle{font-family:var(--sans);font-weight:700;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);margin:0 0 .95rem;padding-bottom:.7rem;border-bottom:1px solid var(--i-rule)}
.infog-zsub{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.08rem;line-height:1.45;color:var(--i-ink3);margin:0 0 1.7rem;max-width:none}
.infog-zsub b{color:var(--i-decidir);font-weight:500;font-style:normal}
.infog-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.infog-list li{position:relative;font-family:var(--sans);font-weight:400;font-size:1rem;line-height:1.25;color:var(--i-ink2);padding-left:1.1rem}
.infog-list li::before{content:"";position:absolute;left:0;top:.52em;width:5px;height:5px;border-radius:50%}
.infog-col-l .infog-list li::before{background:var(--i-decidir);opacity:.8}
.infog-list li.infog-more{color:var(--i-ink4);font-size:.95rem;letter-spacing:.4em;margin-top:.2rem}
.infog-list li.infog-more::before{display:none}
.infog-col-r{text-align:right}
.infog-col-r .infog-ztitle,.infog-col-r .infog-zsub{text-align:right}
.infog-col-r .infog-zsub b{color:var(--i-pensar)}
.infog-col-r .infog-list li{padding-left:0;padding-right:1.1rem}
.infog-col-r .infog-list li.infog-more{padding-right:0}
.infog-col-r .infog-list li::before{left:auto;right:0;background:var(--i-pensar);opacity:.8}

.infog-center{align-self:start}
.infog-center svg{display:block;width:100%;height:auto;overflow:visible}

/* ---------- diagrama central (SVG) ---------- */
.infog .c-title{font-family:var(--sans);font-weight:700;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;fill:var(--gold-deep)}
.infog .c-cap text{font-family:var(--sans);font-weight:500;font-size:13px;fill:var(--i-ink2)}
.infog .c-cap rect{fill:rgba(12,42,115,.045);stroke:rgba(12,42,115,.16)}
.infog .ring-lbl{font-family:var(--serif);font-weight:400;font-style:italic;font-size:27px;letter-spacing:.005em}
.infog .cj{font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.14em;fill:#fff}
.infog .diag-feed{stroke:var(--i-rule)}

/* frase de resultado (HTML) */
.infog-result{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.24rem,2vw,1.6rem);line-height:1.5;color:var(--i-ink);text-align:center;max-width:min(100%,54rem);margin:clamp(.1rem,.4vw,.5rem) auto 0}
.infog-result b{color:var(--i-decidir);font-weight:500;font-style:normal}

/* seta curta Resultado ↓ Slogan — mesma linguagem gráfica da seta superior (dourada, traço redondo) */
.infog-spine{display:flex;justify-content:center;margin:clamp(.5rem,1.2vw,1rem) 0 0}
.infog-spine svg{width:16px;height:clamp(26px,3vw,34px);overflow:visible}
.infog-spine .sp-arrow{stroke:var(--i-decidir);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* slogan — extensão do Hero (Caveat + duplo-traço fluor), agora sobre claro */
.infog .slogan{display:flex;justify-content:center;margin:clamp(.5rem,1vw,.85rem) 0 0}
.infog .slogan-txt{position:relative;display:inline-block;white-space:nowrap;font-family:var(--hand);font-weight:700;font-size:clamp(1.7rem,2.8vw,2.5rem);line-height:1.05;color:var(--navy);transform:rotate(-1.5deg)}
.infog .slogan-mk{position:relative;display:inline-block}
.infog .slogan-mk::after{content:"";position:absolute;left:-.1em;right:-.16em;top:100%;margin-top:-.12em;height:.56em;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%2060'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='mkinfog'%20filterUnits='userSpaceOnUse'%20x='0'%20y='0'%20width='1000'%20height='60'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.012%200.5'%20numOctaves='1'%20seed='4'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='5'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpath%20d='M18,34%20C320,26%20700,38%20986,28'%20fill='none'%20stroke='%23d4f000'%20stroke-width='17'%20stroke-linecap='round'%20filter='url(%23mkinfog)'/%3E%3Cpath%20d='M40,47%20C360,41%20690,47%20962,43'%20fill='none'%20stroke='%23c8e400'%20stroke-width='7'%20stroke-linecap='round'%20opacity='0.8'%20filter='url(%23mkinfog)'/%3E%3C/svg%3E") center/100% 100% no-repeat}
@keyframes infogPaint{from{clip-path:inset(-.3em 100% -.3em 0)}to{clip-path:inset(-.3em -.16em -.3em 0)}}

.infog .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- telemóvel ---------- */
.infog-mobile{display:none;max-width:23rem;margin:clamp(2rem,6vw,3rem) auto 0;text-align:left}
.infog-mobile .mm-block{padding:1.15rem 0;border-top:1px solid var(--i-rule)}
.infog-mobile .mm-block:first-child{border-top:0;padding-top:.4rem}
.infog-mobile .mm-k{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--navy);margin:0 0 .55rem}
.infog-mobile .mm-sub{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1rem;line-height:1.45;color:var(--i-ink3);margin:0 0 .7rem;max-width:none}
.infog-mobile .mm-sub .kk{color:var(--i-decidir);font-style:normal;font-weight:500}
.infog-mobile .mm-grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem .8rem}
.infog-mobile .mm-grid span{font-family:var(--sans);font-size:.9rem;font-weight:500;color:var(--i-ink)}
.infog-mobile .mm-list{display:flex;flex-direction:column;gap:.5rem}
.infog-mobile .mm-list span{font-family:var(--sans);font-size:.96rem;font-weight:400;color:var(--i-ink2)}
.infog-mobile .mm-list span.mm-more{color:var(--i-ink4);letter-spacing:.4em;font-size:.85rem}
.infog-mobile .mm-core{display:flex;align-items:center;justify-content:center;gap:.8rem;font-family:var(--serif);font-weight:500;font-size:1.24rem;padding:.2rem 0 .6rem}
.infog-mobile .mm-core .pp{color:var(--i-pensar)} .infog-mobile .mm-core .vv{color:var(--i-viver)} .infog-mobile .mm-core .dd{color:var(--i-decidir)} .infog-mobile .mm-core .sep{color:var(--i-ink4);font-weight:300}
.infog-mobile .mm-fig{display:block;margin:.2rem auto .5rem}
.infog-mobile .mm-fig .disc{fill:var(--navy)}.infog-mobile .mm-fig .fig{stroke:#fff}
.infog-mobile .mm-res{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.06rem;line-height:1.5;color:var(--i-ink);text-align:center;margin:.2rem 0 .5rem;max-width:none}
.infog-mobile .mm-res .kk{color:var(--i-decidir);font-style:normal;font-weight:500}
.infog-mobile .mm-fin{text-align:center}

/* ---------- animação ---------- */
@media (prefers-reduced-motion:no-preference){
  /* entrada dos blocos de texto */
  .infog .an{opacity:0}.infog.v .an{animation:infogRise 1s cubic-bezier(.22,.61,.36,1) both}
  @keyframes infogRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .infog.v .d1{animation-delay:.05s}.infog.v .d2{animation-delay:.2s}
  .infog.v .d4{animation-delay:.42s}.infog.v .d5{animation-delay:.54s}.infog.v .d6{animation-delay:2.9s}
  /* fade dos grupos internos do SVG */
  .infog .fw{opacity:0}.infog.v .fw{animation:infogFade 1s ease both}
  @keyframes infogFade{to{opacity:1}}
  .infog.v .s2{animation-delay:.7s}.infog.v .s4{animation-delay:2.9s}
  /* desenho dos traços (círculos, setas) */
  .infog .draw{stroke-dasharray:var(--l,620);stroke-dashoffset:var(--l,620)}
  .infog.v .draw{animation:infogDraw 1.4s ease forwards}
  .infog.v .r1{animation-delay:.9s}.infog.v .r2{animation-delay:1.1s}.infog.v .r3{animation-delay:1.3s}
  @keyframes infogDraw{to{stroke-dashoffset:0}}
  /* seta vertical do resultado */
  .infog.v .ar2{animation-delay:3.6s}
  /* SÓ DEPOIS das setas: as três bolinhas orbitam, à MESMA velocidade, partindo juntas
     do ponto comum e convergindo lá exatamente (pausa breve e recomeço). */
  .infog .ringdot{offset-distance:0%;opacity:0}
  .infog.v .ringdot{animation:infogFade .6s ease 3.5s forwards,infogOrbit 6.6s linear 3.5s infinite}
  @keyframes infogOrbit{0%{offset-distance:0%}96%{offset-distance:100%}100%{offset-distance:100%}}
  /* pincelada do slogan */
  .infog .slogan-mk::after{clip-path:inset(-.3em 100% -.3em 0)}
  .infog.v .slogan-mk::after{animation:infogPaint .7s cubic-bezier(.5,.05,.3,1) 3.1s both}
  /* espinha narrativa entra suave */
  .infog .infog-spine{opacity:0}.infog.v .infog-spine{animation:infogFade 1s ease 2.7s both}
}
/* sem animação: estados finais estáticos e legíveis */
.infog .ringdot{offset-distance:var(--st,0%)}

/* ---------- responsivo ---------- */
@media (max-width:1024px){
  .infog-grid{grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.4rem)}
  .infog-center{grid-column:1 / -1;order:-1;max-width:640px;margin:0 auto 2rem}
  .infog-col{padding-top:0}
}
@media (max-width:760px){ .infog-desktop,.infog-spine{display:none} .infog-mobile{display:block} }