/* Mestre das Emoções — identidade do hub. Tokens exclusivos desta página. */
:root {
  color-scheme: light;
  --brand-navy: #0b2045;
  --brand-cobalt: #1358e8;
  --brand-cobalt-hover: #0647cc;
  --brand-ice: #e5f1ff;
  --brand-pearl: #f5f8fc;
  --text-secondary: #4c607c;
  --border-soft: #d7e5f6;
  --emotion-alegria: #e1a027;
  --emotion-tristeza: #6f9edc;
  --emotion-raiva: #df7774;
  --emotion-medo: #4e9f89;
  --emotion-surpresa: #ed8f4d;
  --emotion-aversao: #49a7ba;
  --emotion-desprezo: #9e94a6;
}

* { box-sizing:border-box }
html { scroll-behavior:smooth }
body { margin:0; background:var(--brand-pearl); color:var(--brand-navy); font:500 16px/1.55 Manrope,Arial,sans-serif }
a { color:inherit; text-decoration:none }
a:focus-visible,summary:focus-visible { outline:3px solid var(--brand-cobalt); outline-offset:4px }
h1,h2,h3,p { margin:0 }
.skip-link { position:absolute; z-index:10; top:8px; left:8px; padding:10px 16px; background:white; transform:translateY(-150%) }
.skip-link:focus { transform:none }
header,footer,.section,.areas { padding-inline:max(24px,calc((100% - 1180px)/2)) }
header { display:flex; align-items:center; justify-content:space-between; gap:28px; min-height:86px; background:rgba(245,248,252,.92) }
.brand { display:inline-flex; align-items:center; gap:8px; font-size:21px; font-weight:800; line-height:1.04; letter-spacing:-.055em }
.brand img { width:52px; height:52px; object-fit:contain; flex:none }
nav { display:flex; align-items:center; gap:clamp(17px,3vw,38px); flex-wrap:wrap; font-size:14px; font-weight:700 }
nav a { padding:10px 0 }
nav a:hover,.textlink:hover { color:var(--brand-cobalt) }
.hero { position:relative; min-height:620px; background:#eaf4ff; overflow:hidden; isolation:isolate }
.hero::before { content:""; position:absolute; inset:-14px; z-index:-1; background:url('/images/hero-emocoes-approved.webp') center / cover no-repeat; animation:brain-scene-drift 12s ease-in-out infinite alternate }
.hero::after { content:""; position:absolute; inset:0 0 0 48%; z-index:-1; pointer-events:none; background:radial-gradient(circle at 49% 39%,rgba(255,255,255,.86) 0 2px,rgba(104,190,255,.35) 7px,transparent 24px),radial-gradient(circle at 75% 49%,rgba(255,255,255,.8) 0 2px,rgba(89,166,255,.28) 7px,transparent 20px); animation:synapse-light 5.5s ease-in-out infinite alternate }
.copy { position:relative; z-index:1; width:min(57%,740px); padding:72px 0 70px max(24px,calc((100vw - 1180px)/2)) }
.hero-brand { display:flex; align-items:center; gap:20px; margin-bottom:34px; color:var(--brand-navy); font-size:clamp(28px,3.2vw,46px); line-height:1.02; font-weight:800; letter-spacing:-.055em }
.hero-brand img { width:clamp(75px,8vw,112px); height:auto; flex:none }
.hero h1 { font-size:clamp(29px,3vw,48px); line-height:1.1; letter-spacing:-.05em; font-weight:800; white-space:nowrap }
.hero h1 span { font-weight:500 }
.hero p { max-width:44ch; margin:26px 0 24px; color:var(--text-secondary); font-size:16px }
.actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px 22px }
.pill { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 22px; border-radius:99px; background:var(--brand-cobalt); color:white; font-weight:700; font-size:14px; box-shadow:0 10px 22px rgba(19,88,232,.17) }
.pill:hover { background:var(--brand-cobalt-hover) }
.textlink { color:var(--brand-cobalt); font-weight:800; font-size:14px }
.brain-stage { display:none; position:relative; flex:none; pointer-events:none; animation:brain-float 8s ease-in-out infinite }
.hero-mobile-brain { display:block; width:100%; height:auto; filter:drop-shadow(0 15px 28px rgba(43,102,179,.16)) }
.synapse { position:absolute; width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 10px 5px rgba(117,203,255,.8),0 0 25px 12px rgba(110,124,255,.38); animation:synapse-pulse 4s ease-in-out infinite }
.synapse--one { left:42%; top:42% }
.synapse--two { left:61%; top:52%; animation-delay:-1.4s }
.synapse--three { left:79%; top:39%; animation-delay:-2.7s }
@keyframes brain-scene-drift { from { transform:translate3d(0,0,0) scale(1.012) } to { transform:translate3d(-7px,-8px,0) scale(1.038) } }
@keyframes brain-float { 0%,100% { transform:translate3d(0,0,0) rotate(-.4deg) } 50% { transform:translate3d(0,-9px,0) rotate(.4deg) } }
@keyframes synapse-light { from { opacity:.25 } to { opacity:.72 } }
@keyframes synapse-pulse { 0%,100% { opacity:.22; transform:scale(.75) } 50% { opacity:.75; transform:scale(1.4) } }
.areas { display:flex; flex-wrap:wrap; gap:10px; align-items:center; min-height:62px; border-bottom:1px solid var(--border-soft); color:#48658a; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase }
.areas span { color:#84a7d2 }
.section { padding-block:72px }
h2 { font-size:clamp(30px,3.2vw,44px); line-height:1.1; letter-spacing:-.045em }
h3 { font-size:23px; letter-spacing:-.035em }
.eyebrow { color:var(--brand-cobalt); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.16em; margin-bottom:8px }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px 40px; margin-bottom:30px }
.section-heading>p { max-width:37ch; color:var(--text-secondary) }
.emotions { background:linear-gradient(180deg,#f7fbff,#edf5fd) }
.emotion-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:12px; padding:0; margin:0; list-style:none }
/* Sete ícones abstratos. Nomes e cores continuam ligados mesmo se a ordem mudar. */
.emotion-grid li { min-height:145px; padding:18px 8px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px; border:1px solid rgba(255,255,255,.85); border-radius:19px; background:rgba(255,255,255,.46); box-shadow:inset 0 1px rgba(255,255,255,.9),0 10px 25px rgba(70,115,169,.08); font-size:14px; font-weight:700 }
.emotion-grid svg { width:62px; height:62px; fill:none; stroke:var(--brand-cobalt); stroke-width:3; stroke-linecap:round; stroke-linejoin:round }
.emotion--alegria svg { stroke:var(--emotion-alegria) }
.emotion--tristeza svg { stroke:var(--emotion-tristeza) }
.emotion--raiva svg { stroke:var(--emotion-raiva) }
.emotion--medo svg { stroke:var(--emotion-medo) }
.emotion--surpresa svg { stroke:var(--emotion-surpresa) }
.emotion--aversao svg { stroke:var(--emotion-aversao) }
.emotion--desprezo svg { stroke:var(--emotion-desprezo) }
.emotion-note { margin-top:17px; color:var(--text-secondary); font-size:13px }
.intro { color:var(--text-secondary); margin:10px 0 28px }
.product { display:grid; grid-template-columns:1fr 1.2fr; overflow:hidden; border:1px solid var(--border-soft); border-radius:23px; background:#fff }
.product-art { display:grid; place-items:center; min-height:230px; background:radial-gradient(ellipse at 40% 35%,#5875bd,transparent 75%),linear-gradient(145deg,#0b2045,#142a5e) }
.product-art img { width:85px; height:85px }
.product-body { padding:35px clamp(24px,4vw,58px); align-self:center }
.product-body p { max-width:46ch; margin:8px 0 18px; color:var(--text-secondary) }
.tag { display:block; margin-bottom:9px; color:var(--brand-cobalt); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase }
.blog { background:#eaf3fc }
.articles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
details { padding:24px; border:1px solid var(--border-soft); border-radius:18px; background:rgba(255,255,255,.8) }
summary { cursor:pointer; font-weight:800; line-height:1.4 }
details p { margin-top:14px; color:var(--text-secondary); font-size:14px }
.artigo-card { display:flex; flex-direction:column; gap:10px; padding:24px; border:1px solid var(--border-soft); border-radius:18px; background:rgba(255,255,255,.85) }
.artigo-card:hover { border-color:var(--brand-cobalt) }
.artigo-card strong { font-weight:800; line-height:1.35 }
.artigo-card span:not(.tag) { color:var(--text-secondary); font-size:14px }
.artigo-card .tag { margin-bottom:0 }
.ver-todos { margin-top:22px }
.about .textlink { display:inline-block; margin-top:10px }
.about { display:grid; grid-template-columns:1fr 1.3fr; gap:32px }
.about p { max-width:58ch; color:var(--text-secondary) }
/* Rodapé institucional */
.site-footer { padding-block:48px 22px; background:var(--brand-navy); color:#f4f8ff }
.footer-main { display:flex; justify-content:space-between; gap:48px; padding-bottom:40px }
.footer-identity { max-width:370px }
.footer-brand { display:inline-flex; align-items:center; gap:12px; font-size:25px; font-weight:800; line-height:1.05; letter-spacing:-.04em }
.footer-brand img { width:60px; height:60px; object-fit:contain; filter:brightness(0) invert(1) }
.footer-identity p { margin-top:18px; color:#bdd0eb; font-size:14px }
.footer-links { display:grid; grid-template-columns:repeat(2,minmax(110px,1fr)); gap:6px 30px; align-content:start }
.footer-links a,.footer-bottom a { min-height:40px; display:inline-flex; align-items:center }
.site-footer a:hover { color:#a9ceff }
.footer-bottom { display:flex; justify-content:space-between; gap:12px 24px; align-items:center; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.2); padding-top:18px; color:#a9bfdc; font-size:12px }
/* Tablet: texto e cérebro têm áreas próprias. */
@media (min-width:651px) and (max-width:900px) {
  .emotion-grid { grid-template-columns:repeat(4,1fr) }
  .hero { min-height:520px; display:flex; align-items:center; background:linear-gradient(105deg,#f7faff,#dcecff) }
  .hero::before,.hero::after { display:none }
  .copy { width:52%; padding-block:48px }
  .hero-brand { gap:12px; font-size:30px; margin-bottom:28px }
  .hero-brand img { width:76px }
  .hero h1 { font-size:clamp(27px,3.5vw,34px); white-space:normal }
  .hero p { font-size:15px; margin-block:20px }
  .brain-stage { display:block; width:48% }
}
/* Mobile */
@media(max-width:650px) { header { flex-wrap:wrap; padding-block:14px } header nav { width:100%; justify-content:space-between } header nav a { min-height:44px } .hero { min-height:auto; display:flex; flex-direction:column; background:linear-gradient(180deg,#f7faff,#dcecff) } .hero::before,.hero::after { display:none } .copy { width:100%; padding:38px 24px 10px } .hero-brand { display:none } .hero h1 { font-size:clamp(29px,7.3vw,36px); white-space:normal } .hero p { margin:16px 0 18px; max-width:34ch; font-size:15px } .brain-stage { display:block; align-self:center; width:min(92%,420px); margin:-6px auto 0 } .areas { padding-block:18px; gap:6px 12px } .section { padding-block:50px } .section-heading { display:block } .section-heading>p { margin-top:12px } .emotion-grid { grid-template-columns:repeat(2,1fr) }  .emotion-grid li { min-height:118px } .product,.articles,.about { grid-template-columns:1fr } .product-art { min-height:160px } .product-body { padding:28px } .footer-main { display:block } .footer-links { margin-top:30px; grid-template-columns:repeat(2,1fr) } .footer-bottom { display:block } .footer-bottom a { margin-top:6px } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto } .hero::before,.hero::after,.brain-stage,.synapse { animation:none } }