/* Página em inglês (/en/). A peça principal é o notebook grande com a home da Motion Wheel rolando na tela (assets/js/en.js). */
.en { --en-light: #F3F5FA; --en-text: #131313; --en-muted: rgba(19, 19, 19, .64); --en-line: rgba(19, 19, 19, .12); --en-deep: #00174F; }

/* Cabeçalho */
.en-nav { display: flex; gap: 28px; margin-left: auto; font-size: .9375rem; font-weight: 500; }
.en-nav a { color: rgba(255, 255, 255, .78); transition: color .25s; }
.en-nav a:hover { color: #fff; }
.en-nav__cta { margin-left: 8px; }

/* Hero: título grande à esquerda, texto curto à direita, notebook enorme embaixo */
.en-hero { position: relative; background: var(--rdc-ink); padding-top: calc(var(--header-h, 74px) + clamp(48px, 8vw, 112px)); overflow: hidden; }
.en-hero__top { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(28px, 5vw, 80px); align-items: end; }
.en-hero h1 { font-size: clamp(2.6rem, 6.2vw, 6rem); line-height: .96; letter-spacing: -.055em; font-weight: 800; text-wrap: balance; max-width: 13ch; }
.en-hero__side p { font-size: 1.0625rem; line-height: 1.6; color: rgba(255, 255, 255, .7); text-wrap: pretty; max-width: 46ch; }
.en-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.en-show { position: relative; padding: clamp(56px, 8vw, 112px) 0 clamp(48px, 6vw, 88px); }
.en-show::before { content: ""; position: absolute; left: 50%; top: 30%; width: min(1400px, 140vw); height: 70%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(0, 71, 255, .55), rgba(0, 71, 255, .12) 60%, transparent); filter: blur(20px); pointer-events: none; }
.en-device { position: relative; max-width: min(1240px, calc((100svh - 150px) * 1.62)); margin-inline: auto; padding-right: 7%; }

.en-lap { position: relative; }
.en-lap__lid { background: #0d0e12; border-radius: 22px 22px 8px 8px; padding: 1.5% 1.5% 2%; box-shadow: inset 0 0 0 1.5px #34363e, inset 0 0 0 4px #0d0e12, inset 0 0 0 5px #23252c, 0 70px 140px -50px rgba(0, 40, 160, .9); }
.en-lap__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; background: #000; }
.en-lap__screen img, .en-phone__screen img { display: block; width: 100%; height: auto; will-change: transform; }
.en-lap__base { position: relative; height: clamp(12px, 1.7vw, 22px); margin: 0 -7.5%; background: linear-gradient(#eceef2, #b4b7bf 55%, #6f727a); border-radius: 3px 3px 26px 26px / 3px 3px 18px 18px; box-shadow: 0 30px 40px -18px rgba(0, 0, 0, .8); }
.en-lap__base span { position: absolute; left: 50%; top: 0; width: 13%; height: 42%; transform: translateX(-50%); background: linear-gradient(#9fa2aa, #cfd1d6); border-radius: 0 0 12px 12px; }

.en-phone { position: absolute; right: 0; bottom: -5%; width: 19%; background: #0d0e12; border-radius: 15% / 7%; padding: 1.1%; box-shadow: inset 0 0 0 1.5px #3a3c44, 0 40px 80px -20px rgba(0, 0, 0, .8); }
.en-phone__screen { aspect-ratio: 9 / 19.5; overflow: hidden; border-radius: 12% / 5.6%; background: #000; }

.en-show__caption { position: relative; margin-top: clamp(40px, 5vw, 64px); text-align: center; font-size: .9375rem; color: rgba(255, 255, 255, .6); text-wrap: balance; }
.en-show__caption a { color: #fff; font-weight: 600; margin-right: 6px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--rdc-blue-light); }

/* Seções */
.en-sec { padding: clamp(72px, 10vw, 140px) 0; background: var(--rdc-ink); }
.en-sec h2 { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.02; letter-spacing: -.045em; font-weight: 800; text-wrap: balance; }
.en-sec p { text-wrap: pretty; }
.en-sec--light { background: var(--en-light); color: var(--en-text); }
.en-sec--ink { background: #08080c; }
.en-sec--blue { background: var(--en-deep); background-image: radial-gradient(80% 90% at 85% 50%, rgba(0, 71, 255, .55), transparent 70%); }

/* Motion Wheel: texto + janelas de navegador com as páginas internas */
.en-intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 80px); align-items: end; margin-bottom: clamp(44px, 6vw, 80px); }
.en-intro h2 { max-width: 16ch; }
.en-intro p { font-size: 1.0625rem; line-height: 1.65; color: var(--en-muted); margin-bottom: 24px; max-width: 52ch; }

.en-wins { display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: auto auto; gap: clamp(20px, 3vw, 36px) clamp(20px, 3vw, 40px); }
.en-win--wide { grid-row: span 2; }
.en-win { margin: 0; }
.en-win__frame { overflow: hidden; border-radius: 14px; background: #fff; border: 1px solid var(--en-line); box-shadow: 0 40px 70px -40px rgba(0, 23, 79, .45); }
.en-win__bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: #eceef3; border-bottom: 1px solid var(--en-line); }
.en-win__bar i { width: 10px; height: 10px; border-radius: 50%; background: #cfd3dc; }
.en-win__bar span { margin-left: 10px; flex: 1; max-width: 300px; padding: 4px 12px; border-radius: 6px; background: #fff; font-size: .75rem; color: rgba(19, 19, 19, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.en-win img { display: block; width: 100%; height: auto; }
.en-win figcaption { margin-top: 14px; font-size: .9375rem; line-height: 1.5; color: var(--en-muted); max-width: 54ch; text-wrap: pretty; }
.en-win figcaption strong { color: var(--en-text); font-weight: 700; margin-right: 4px; }
.en-win--wide .en-win__frame { box-shadow: 0 60px 100px -50px rgba(0, 23, 79, .55); }

/* Sistema: texto à esquerda, telas sobrepostas à direita */
.en-system { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.en-system__text p { margin-top: 22px; font-size: 1.0625rem; line-height: 1.65; color: rgba(255, 255, 255, .72); max-width: 50ch; }
.en-checks { margin-top: 28px; display: grid; gap: 12px; }
.en-checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; }
.en-checks .icon { flex: none; margin-top: 3px; color: var(--rdc-blue-light); }
.en-system__shots { position: relative; padding: 0 0 18% 12%; }
.en-win--sys figcaption { display: none; }
.en-win--sys .en-win__frame { border-color: rgba(255, 255, 255, .14); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .7); }
.en-win--back { position: absolute; left: 0; bottom: 0; width: 72%; }
.en-system__shots > .en-win--sys:first-child { position: relative; z-index: 1; }
.en-system__shots > .en-win--back { z-index: 2; }
.en-phone--small { right: -2%; bottom: -6%; width: 22%; z-index: 3; }

/* Serviços: lista tipográfica em duas colunas, sem cards */
.en-services { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.en-services h2 { position: sticky; top: calc(var(--header-h, 74px) + 32px); max-width: 14ch; }
.en-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 4vw, 56px); }
.en-list div { padding: 26px 0 30px; border-top: 1px solid var(--en-line); }
.en-list dt { font-size: 1.1875rem; font-weight: 700; letter-spacing: -.02em; }
.en-list dd { margin: 10px 0 0; font-size: .96875rem; line-height: 1.6; color: var(--en-muted); text-wrap: pretty; }

/* Gabriel */
.en-person { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.en-person__foto { width: 100%; aspect-ratio: 4 / 5; max-height: 560px; object-fit: cover; object-position: center 22%; border-radius: var(--rdc-radius-lg); }
.en-person p { margin-top: 22px; font-size: 1.125rem; line-height: 1.65; color: rgba(255, 255, 255, .74); max-width: 52ch; }

.en-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: clamp(32px, 4vw, 56px); }
.en .cta-final { background: #08080c; padding-top: 0; }

.en :focus-visible { outline: 2px solid var(--rdc-blue-light); outline-offset: 3px; }

@media (max-width: 960px) {
  .en-hero__top, .en-intro, .en-system, .en-services, .en-person { grid-template-columns: 1fr; }
  .en-services h2 { position: static; }
  .en-wins { grid-template-columns: 1fr 1fr; }
  .en-win--wide { grid-column: span 2; grid-row: auto; }
  .en-person__foto { max-height: 420px; }
}
@media (max-width: 640px) {
  .en-nav { display: none; }
  .en-nav__cta { margin-left: auto; }
  .en-device { padding-right: 9%; }
  .en-phone { width: 26%; bottom: -10%; }
  .en-lap__lid { border-radius: 12px 12px 5px 5px; }
  .en-wins, .en-list { grid-template-columns: 1fr; }
  .en-win--wide { grid-column: auto; }
  .en-system__shots { padding: 0 0 22% 6%; }
}

/* Janela grande ocupa a altura das duas da direita (a imagem corta embaixo, mostrando o topo da página) */
@media (min-width: 961px) {
  .en-win--wide { display: flex; flex-direction: column; }
  .en-win--wide .en-win__frame { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .en-win--wide .en-win__frame img { flex: 1; min-height: 0; object-fit: cover; object-position: top left; }
}
@media (max-width: 640px) {
  .en-show { padding-bottom: 72px; }
  .en-show .container { padding-inline: 10px; }
}

/* Mais telas do sistema, embaixo, em duas colunas sobre o azul */
.en-system__more { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); margin-top: clamp(72px, 9vw, 128px); }
.en-win--dark .en-win__frame { border-color: rgba(255, 255, 255, .14); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .7); }
.en-win--dark figcaption { color: rgba(255, 255, 255, .66); }
.en-win--dark figcaption strong { color: #fff; }
@media (max-width: 640px) { .en-system__more { grid-template-columns: 1fr; } }