/* as dores (14/11): entram no lugar do case do Sapo e da gôndola.
   quatro cartões de vidro no idioma do cosmos; cada um abre a porta
   do serviço que resolve a dor (a[data-door], portas-hf.js). */
.dores .lead { max-width: 34em; }
.dores-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.7rem, 1.2vw, 1.1rem);
  width: min(1240px, 100%); margin: clamp(1.8rem, 4.5vh, 3.4rem) auto 0;
  text-align: left;
}
.dor {
  position: relative; display: flex; flex-direction: column;
  min-height: clamp(210px, 30vh, 300px);
  padding: clamp(1.1rem, 1.6vw, 1.6rem);
  border: 1px solid rgba(255,255,255,.14); border-radius: 1.1rem;
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  color: var(--paper); text-decoration: none;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, background .35s;
}
.dor-n { opacity: .55; }
.dor h3 {
  margin: auto 0 .35rem; font-family: var(--disp); font-weight: 400;
  font-size: clamp(1.7rem, 2.3vw, 2.5rem); line-height: 1.02; letter-spacing: -.01em;
}
.dor p {
  margin: 0; font-family: var(--disp); font-style: italic; color: var(--laser);
  font-size: clamp(1.25rem, 1.6vw, 1.75rem); line-height: 1.08;
}
.dor-go { margin-top: 1.1rem; opacity: .6; transition: opacity .3s, color .3s; }
@media (hover: hover) {
  .dor:hover { transform: translateY(-6px); border-color: var(--laser); background: linear-gradient(160deg, rgba(214,255,0,.10), rgba(255,255,255,.02)); }
  .dor:hover .dor-go { opacity: 1; color: var(--laser); }
}
.dor:focus-visible { outline: 2px solid var(--laser); outline-offset: 3px; }
@media (max-width: 1080px) { .dores-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .dores-grid { grid-template-columns: 1fr; gap: .7rem; }
  .dor { min-height: 0; padding: 1.1rem 1.1rem 1rem; }
  .dor h3 { margin-top: .9rem; font-size: 1.9rem; }
  .dor p { font-size: 1.4rem; }
}

/* botão de idioma no cabeçalho (14/11): PT ⇄ EN, na ilha da direita */
.head-right { display: flex; align-items: center; gap: .35rem; }
.lang-switch {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.4rem; height: 2.3rem; padding: 0 .55rem; border-radius: 10px;
  color: rgba(255,255,255,.72); text-decoration: none; letter-spacing: .08em;
  transition: color .25s, background .25s;
}
.lang-switch:hover, .lang-switch:focus-visible { color: var(--laser); background: rgba(255,255,255,.07); }
@media (max-width: 760px) {
  .head-right { gap: 0; }
  .lang-switch { min-width: 1.9rem; height: 2rem; padding: 0 .3rem; font-size: .68rem; }
  .head-right .btn-head { padding-inline: .55rem; font-size: .78rem; white-space: nowrap; }
  .head-right .btn-head .arr { display: none; }
}
/* telas muito estreitas: o selo novo é mais longo e não pode cair abaixo de
   10px; o botão de idioma sai do cabeçalho e fica só no rodapé. */
@media (max-width: 380px) {
  .head-right .lang-switch { display: none; }
}
.foot-lang { opacity: .75; }
@media (max-width: 372px) {
  .head-left .head-kicker { white-space: normal; line-height: 1.15; text-wrap: balance; }
}
.dor-stat { margin-top: .7rem; opacity: .8; color: var(--paper); }
.dor .dor-stat + .dor-go { margin-top: .45rem; }

/* palco do formulário (14/11): os personagens da casa saem de cena (IP
   próprio fora do site). o frasco e a poeira continuam. */
.contact-stage .stage-actor { display: none !important; }

/* ══ creative engineering (14/11): criatividade × tecnologia ══
   duas colunas que se encontram numa linha de luz. fundo transparente pra
   poeira do universo continuar passando por trás. */
.meet { position: relative; isolation: isolate; padding: clamp(80px, 12vh, 140px) max(24px, 5vw) clamp(80px, 12vh, 130px); color: var(--paper); background: var(--sky); text-align: center; }
html.has-universe:not(.no-universe) .meet { background: transparent; }
.meet-kicker { margin: 0 0 1.1rem; color: var(--laser); letter-spacing: .14em; }
.meet-head h2 { margin: 0; font: 400 clamp(46px, 6.2vw, 104px)/.96 var(--disp); letter-spacing: -.03em; }
.meet-head h2 em { color: var(--laser); font-style: italic; }
.meet-head > p:last-child { max-width: 36em; margin: 1.5rem auto 0; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.6; color: rgba(240,240,240,.78); }
.meet-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 7vw, 120px); width: min(1100px, 100%); margin: clamp(2.6rem, 7vh, 5rem) auto 0; }
.meet-grid::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, transparent, var(--laser) 18%, var(--laser) 82%, transparent); box-shadow: 0 0 18px 1px rgba(214,255,0,.55); }
.meet-col { margin: 0 0 1.2rem; opacity: .6; letter-spacing: .14em; }
.meet-col-a { text-align: right; } .meet-col-b { text-align: left; color: var(--laser); opacity: .85; }
.meet-row { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: inherit; align-items: center; position: relative; padding: clamp(1rem, 2.4vh, 1.7rem) 0; border-top: 1px solid rgba(255,255,255,.1); }
.meet-row p { margin: 0; font: 400 clamp(22px, 2.3vw, 36px)/1.1 var(--disp); letter-spacing: -.01em; }
.meet-a { text-align: right; } .meet-b { text-align: left; font-style: italic; color: var(--laser); }
.meet-row i { position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--laser); box-shadow: 0 0 0 5px rgba(214,255,0,.14), 0 0 22px 4px rgba(214,255,0,.6); }
@media (max-width: 760px) {
  .meet { padding: 70px 22px 64px; }
  .meet-head h2 { font-size: clamp(40px, 11.5vw, 56px); }
  .meet-grid { column-gap: 30px; }
  .meet-row p { font-size: 19px; }
  .meet-col { font-size: 10px; }
}

/* ══ 14/11 (tarde) · versão imersiva em inglês ══ */
/* o número único, dentro da órbita */
.case.one { text-align: left; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(24px, 5vw, 90px); align-items: end; max-width: 1320px; margin-inline: auto; }
.one-n { margin: 0; grid-row: 1 / span 2; font: 400 clamp(130px, 22vw, 400px)/.8 var(--disp); letter-spacing: -.05em; color: var(--paper); }
.one-n sup { font-size: .3em; vertical-align: top; position: relative; top: .5em; margin-left: .04em; color: var(--laser); }
.case.one .h2 { font-size: clamp(30px, 3.6vw, 62px); line-height: 1.03; text-align: left; margin: 0; }
.one-src { margin: 22px 0 0; opacity: .7; text-align: left; } .one-src a { color: inherit; }
@media (max-width: 760px) { .case.one { grid-template-columns: 1fr; } .one-n { grid-row: auto; } .case.one .h2 { margin-top: 18px; } }
/* como o trabalho se divide com a agência */
.meet .lines { list-style: none; width: min(1100px, 100%); margin: clamp(2.4rem, 6vh, 4.4rem) auto 0; padding: 0; border-top: 1px solid rgba(255,255,255,.14); text-align: left; }
.meet .lines li { display: grid; grid-template-columns: 4.5rem 1fr; align-items: baseline; padding: clamp(1.1rem, 2.8vh, 2rem) 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.meet .lines .px { opacity: .55; }
.meet .lines p { margin: 0; font: 400 clamp(24px, 2.8vw, 46px)/1.06 var(--disp); letter-spacing: -.02em; text-wrap: balance; }
@media (max-width: 760px) { .meet .lines li { grid-template-columns: 1fr; row-gap: 8px; } }