/* ==========================================================================
   ATANA — portal
   O palco é composto em camadas a partir dos assets oficiais:
     assets/backgrounds  → fundo-soft (esquerda) / fundo-labs (direita)
     assets/logos        → logos AtanaSoft, AtanaLabs, ATANA e ícone duplo
     assets/graphics     → globo (metade) na base
   Tudo é posicionado em "pixels de design" de um quadro 1672×941:
   --x / --y / --w valem 1 px do quadro, convertidos por --u.
   ========================================================================== */

:root{
  --ratio:          calc(1672 / 941);
  --sw:             min(100vw, 100dvh * var(--ratio));   /* largura do palco */
  --text:           #e9f0f8;
  --soft-rule:      #2fb8c9;
  --labs-rule:      #34d399;
  --ease:           cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:#03060d;
  color:var(--text);
  font-family:"Manrope", "Montserrat", ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

p,ul,h1{ margin:0; }
ul{ padding:0; list-style:none; }
a{ color:inherit; }
img{ display:block; max-width:100%; }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.sprite .solid{ fill:currentColor; stroke:none; }

/* ── Palco ───────────────────────────────────────────────────────────────── */
.viewport{
  position:relative; z-index:1;
  height:100dvh;
  display:flex; align-items:center; justify-content:center;
}

.stage{
  position:relative; flex:none;
  width:var(--sw);
  aspect-ratio:1672 / 941;
  container-type:inline-size;
  /* quanto a tela sobra além do palco (≤ 0), usado para o fundo cobrir tudo */
  --ext-x:min(0px, calc((var(--sw) - 100vw) / 2));
  --ext-y:min(0px, calc((var(--sw) / var(--ratio) - 100dvh) / 2));
}

/* 1 px do quadro */
.stage > *{ --u:calc(100cqw / 1672); }

.services, .pillars, .brand, .cta{
  position:absolute;
  left:calc(var(--x) * var(--u));
  top:calc(var(--y, 0) * var(--u));
}

/* cor de destaque de cada dimensão */
.is-soft{ --accent:#38bdf8; --accent-2:#0b63f6; --accent-3:#1d4ed8; --rule:var(--soft-rule); }
.is-labs{ --accent:#4ade9f; --accent-2:#1fcf92; --accent-3:#0b9a6a; --rule:var(--labs-rule); }

/* ── Camadas de fundo ────────────────────────────────────────────────────── */
.bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.bg__fill{ position:absolute; inset:var(--ext-y) var(--ext-x); }

.bg__half{ position:absolute; top:0; bottom:0; width:50%; overflow:hidden; }
.bg__half img{ width:100%; height:100%; object-fit:cover; }
.bg__half--soft{ left:0; }
.bg__half--soft img{ object-position:12% 50%; }
.bg__half--labs{ right:0; }
.bg__half--labs img{ object-position:96% 50%; }

/* escurecimento para legibilidade + brilho das duas cores no centro */
.bg__shade{
  position:absolute; inset:0;
  background:
    radial-gradient(22% 30% at 44% 46%, rgba(20,110,255,.26), transparent 75%),
    radial-gradient(22% 30% at 56% 46%, rgba(30,220,150,.22), transparent 75%),
    radial-gradient(34% 40% at 24% 42%, rgba(2,7,20,.62), transparent 80%),
    radial-gradient(34% 40% at 76% 42%, rgba(2,12,9,.62), transparent 80%),
    linear-gradient(180deg, rgba(3,6,13,.62) 0%, rgba(3,6,13,.18) 26%, rgba(3,6,13,.22) 62%, rgba(3,6,13,.9) 88%, #03060d 100%),
    linear-gradient(90deg, rgba(3,8,22,.2) 0%, rgba(3,8,22,.55) 42%, rgba(3,6,13,.62) 50%, rgba(3,14,10,.55) 58%, rgba(3,14,10,.2) 100%);
}

/* costura luminosa entre as duas dimensões */
.bg__seam{
  position:absolute; left:50%; top:var(--ext-y);
  width:calc(2 * var(--u)); height:calc(851 * var(--u) - 2 * var(--ext-y));
  translate:-50% 0;
  background:linear-gradient(180deg, transparent 0%, #3b82f6 22%, #8ef6ff 48%, #2ee6a0 76%, transparent 100%);
  box-shadow:calc(-6 * var(--u)) 0 calc(22 * var(--u)) rgba(37,140,255,.55),
             calc( 6 * var(--u)) 0 calc(22 * var(--u)) rgba(40,230,160,.45);
  transform-origin:top;
  animation:seam 1.4s var(--ease) both;
}

.emblem{
  position:absolute;
  left:calc(646 * var(--u)); top:calc(268 * var(--u));
  width:calc(380 * var(--u));
  filter:drop-shadow(calc(-18 * var(--u)) 0 calc(40 * var(--u)) rgba(30,120,255,.45))
         drop-shadow(calc( 18 * var(--u)) 0 calc(40 * var(--u)) rgba(30,230,160,.38));
  animation:fade 1.2s var(--ease) .15s both, float 7s ease-in-out 1.4s infinite;
}
.emblem img{ width:100%; height:auto; }

.globe{
  position:absolute;
  left:calc(286 * var(--u)); top:calc(540 * var(--u));
  width:calc(1100 * var(--u));
  -webkit-mask-image:linear-gradient(180deg, #000 72%, transparent 96%);
          mask-image:linear-gradient(180deg, #000 72%, transparent 96%);
  animation:globe 1.6s var(--ease) .1s both;
}
.globe img{ width:100%; height:auto; }

/* ── Marcas ──────────────────────────────────────────────────────────────── */
.brand{
  z-index:2; display:block;
  width:calc(var(--w) * var(--u));
  text-decoration:none;
  border-radius:calc(12 * var(--u));
  transition:filter .35s var(--ease), transform .35s var(--ease);
}
.brand h1{ font-size:0; line-height:0; }
.brand img{ width:100%; height:auto; }
.brand:hover{
  transform:translateY(calc(-2 * var(--u)));
  filter:drop-shadow(0 0 calc(18 * var(--u)) color-mix(in srgb, var(--accent) 55%, transparent));
}
.brand:focus-visible{ outline:2px solid #fff; outline-offset:calc(8 * var(--u)); }

/* ── Lista de serviços ───────────────────────────────────────────────────── */
.services, .pillars, .cta{ z-index:2; }

.services li{
  display:flex; align-items:center;
  height:calc(var(--pitch) * var(--u));
  font-size:calc(15.6 * var(--u));
  font-weight:400;
  letter-spacing:-.005em;
  white-space:nowrap;
  color:var(--text);
  text-shadow:0 1px calc(10 * var(--u)) rgba(0,0,0,.6);
  transition:transform .35s var(--ease), color .35s var(--ease), text-shadow .35s var(--ease);
}
.services li:hover{
  transform:translateX(calc(8 * var(--u)));
  color:#fff;
  text-shadow:0 0 calc(14 * var(--u)) color-mix(in srgb, var(--accent) 55%, transparent);
}
.ico{
  flex:none;
  width:calc(25 * var(--u)); height:calc(25 * var(--u));
  margin-right:calc(24 * var(--u));
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  color:#f2f6fb;
  transition:color .35s var(--ease), filter .35s var(--ease), transform .35s var(--ease);
}
.services li:hover .ico{
  color:var(--accent);
  filter:drop-shadow(0 0 calc(8 * var(--u)) var(--accent));
  transform:scale(1.08);
}

/* ── Pilares ──────────────────────────────────────────────────────────── */
.pillars{
  display:flex; flex-direction:column; align-items:flex-start;
  font-family:"Montserrat", "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-weight:500;
  white-space:nowrap;
  color:#dfe8f2;
  text-shadow:0 1px calc(10 * var(--u)) rgba(0,0,0,.6);
}

.pillars{
  font-size:calc(12.2 * var(--u));
  letter-spacing:.25em;
  line-height:calc(23 * var(--u));
}
.pillars .rule{ margin-top:calc(10 * var(--u)); }

/* pilares da AtanaLabs alinhados pela direita (--x = borda direita) */
.pillars.is-right{
  left:auto;
  right:calc((1672 - var(--x)) * var(--u));
  align-items:flex-end; text-align:right;
  letter-spacing:.25em; margin-right:-.25em;
}
.pillars.is-right .rule{ transform-origin:right; margin-right:.25em; }

.rule{
  display:block;
  width:calc(26 * var(--u)); height:calc(2 * var(--u));
  background:var(--rule);
  box-shadow:0 0 calc(6 * var(--u)) color-mix(in srgb, var(--rule) 60%, transparent);
  transform-origin:left;
  animation:grow .8s var(--ease) both;
  animation-delay:inherit;
  transition:width .45s var(--ease);
}
.pillars{ transition:color .35s var(--ease); }
.pillars:hover{ color:#fff; }
.pillars:hover .rule{ width:calc(44 * var(--u)); }

/* ── Botões (CTA) ────────────────────────────────────────────────────────── */
.cta{
  display:inline-flex; align-items:center; justify-content:center;
  gap:calc(12 * var(--u));
  height:calc(40 * var(--u));
  padding:0 calc(28 * var(--u));
  border-radius:999px;
  font-family:"Montserrat", ui-sans-serif, system-ui, sans-serif;
  font-size:max(10px, calc(11.5 * var(--u)));
  font-weight:700; letter-spacing:.22em;
  white-space:nowrap; text-decoration:none;
  color:#fff;
  background:linear-gradient(100deg, var(--accent-2), var(--accent-3));
  box-shadow:0 calc(12 * var(--u)) calc(30 * var(--u)) calc(-8 * var(--u)) color-mix(in srgb, var(--accent) 60%, transparent),
             inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease);
}
.cta svg{
  width:calc(17 * var(--u)); height:calc(17 * var(--u));
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .3s var(--ease);
}
.cta:hover{
  transform:translateY(calc(-2 * var(--u)));
  filter:brightness(1.1);
  box-shadow:0 calc(18 * var(--u)) calc(42 * var(--u)) calc(-8 * var(--u)) color-mix(in srgb, var(--accent) 80%, transparent),
             inset 0 1px 0 rgba(255,255,255,.35);
}
.cta:hover svg{ transform:translateX(calc(5 * var(--u))); }
.cta:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* ── Rodapé ──────────────────────────────────────────────────────────────── */
.foot{
  position:absolute; left:0; right:0; bottom:var(--ext-y); z-index:2;
  height:calc(95 * var(--u));
  font-family:"Montserrat", ui-sans-serif, system-ui, sans-serif;
  color:#cfd9e5;
}
.foot__line{
  position:absolute; left:calc(40 * var(--u)); right:calc(40 * var(--u)); top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(59,130,246,.55) 18%, rgba(142,246,255,.5) 50%, rgba(46,230,160,.55) 82%, transparent);
}
.foot__small{
  font-size:calc(9.4 * var(--u)); font-weight:500;
  letter-spacing:.32em; line-height:1.55;
  color:#b9c6d4;
}
.foot__sep{ width:1px; align-self:stretch; background:rgba(255,255,255,.22); }

.foot__brand, .foot__right{
  position:absolute; top:calc(26 * var(--u));
  height:calc(40 * var(--u));
  display:flex; align-items:center; gap:calc(18 * var(--u));
}
.foot__brand{ left:calc(40 * var(--u)); }
.foot__brand img{ height:calc(34 * var(--u)); width:auto; }
.foot__right{ right:calc(40 * var(--u)); gap:calc(26 * var(--u)); }

.foot__center{
  position:absolute; left:50%; top:calc(16 * var(--u));
  translate:-50% 0;
  display:flex; flex-direction:column; align-items:center;
  font-size:calc(11.4 * var(--u)); font-weight:500;
  letter-spacing:.42em; line-height:calc(21 * var(--u));
  margin-right:-.42em; white-space:nowrap;
  color:#dfe8f2;
}
.foot__center i{
  display:block; width:calc(52 * var(--u)); height:calc(2 * var(--u));
  margin-top:calc(10 * var(--u)); margin-right:.42em;
  background:linear-gradient(90deg, #22d3ee, #2ee6a0);
  box-shadow:0 0 calc(8 * var(--u)) rgba(46,230,160,.55);
}

.social{ display:flex; gap:calc(18 * var(--u)); }
.social a{
  display:grid; place-items:center;
  width:calc(36 * var(--u)); height:calc(36 * var(--u));
  border-radius:50%;
  color:#f2f6fb;
  transition:color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}
.social svg{ width:calc(22 * var(--u)); height:calc(22 * var(--u)); fill:currentColor; }
.social svg.stroke{ fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.social a:hover{ color:#8ef6ff; background:rgba(255,255,255,.07); transform:translateY(calc(-2 * var(--u))); }
.social a:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* ── Seletor de idioma ───────────────────────────────────────────────────── */
/* fica fora do palco (fixo), alinhado ao canto superior direito do quadro */
.lang{
  --u:calc(var(--sw) / 1672);
  position:fixed; z-index:5;
  top:calc((100dvh - var(--sw) / var(--ratio)) / 2 + 24 * var(--u));
  right:calc((100vw - var(--sw)) / 2 + 30 * var(--u));
}
.lang__btn{
  display:flex; align-items:center; gap:calc(7 * var(--u));
  padding:calc(7 * var(--u)) calc(11 * var(--u));
  border:1px solid rgba(255,255,255,.14); border-radius:999px;
  background:rgba(9,18,32,.55); backdrop-filter:blur(8px);
  font:600 max(10px, calc(11 * var(--u)))/1 "Montserrat", ui-sans-serif, system-ui, sans-serif;
  letter-spacing:.1em; color:var(--text); cursor:pointer;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.lang__btn:hover{ border-color:rgba(255,255,255,.35); background:rgba(9,18,32,.85); }
.lang__btn svg:not(.flag){
  width:max(12px, calc(15 * var(--u))); height:max(12px, calc(15 * var(--u)));
  fill:none; stroke:#93a6bf; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}

/* bandeiras (Brasil / EUA / Espanha) */
.flag{
  flex:none; display:block;
  width:22px; height:15px;
  border-radius:3px;
  clip-path:inset(0 round 3px);
}
.lang__btn .flag{ width:max(20px, calc(24 * var(--u))); height:max(13px, calc(16 * var(--u))); }
.lang__chevron{ transition:transform .25s var(--ease); }
.lang.is-open .lang__chevron{ transform:rotate(180deg); }

.lang__menu{
  position:absolute; top:calc(100% + 6px); right:0;
  min-width:10rem; padding:.35rem;
  border:1px solid rgba(255,255,255,.12); border-radius:.85rem;
  background:rgba(6,12,22,.94); backdrop-filter:blur(12px);
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.lang__menu button{
  display:flex; align-items:center; gap:.6rem; width:100%;
  padding:.5rem .7rem; border:0; border-radius:.6rem;
  background:none; color:var(--text); cursor:pointer;
  font:400 .78rem "Manrope", ui-sans-serif, system-ui, sans-serif; text-align:left;
  transition:background .2s var(--ease);
}
.lang__menu button .flag{ opacity:.85; transition:opacity .2s var(--ease); }
.lang__menu button:hover{ background:rgba(255,255,255,.08); }
.lang__menu button:hover .flag,
.lang__menu button[aria-selected="true"] .flag{ opacity:1; }
.lang__menu button[aria-selected="true"]{ background:rgba(255,255,255,.06); color:#fff; }

/* ── Entrada ─────────────────────────────────────────────────────────────── */
.lang, .brand, .services li, .cta, .pillars, .foot{
  animation:rise .9s var(--ease) both;
}
.lang{ animation-delay:.1s; }
.brand{ animation-delay:.05s; }
.services li:nth-child(2){ animation-delay:.07s; }
.services li:nth-child(3){ animation-delay:.14s; }
.services li:nth-child(4){ animation-delay:.21s; }
.services li:nth-child(5){ animation-delay:.28s; }
.cta{ animation-delay:.38s; }
.pillars{ animation-delay:.65s; }
.foot{ animation-delay:.75s; }

@keyframes rise{
  from{ opacity:0; translate:0 calc(12 * var(--u)); }
  to  { opacity:1; translate:none; }
}
@keyframes grow{
  from{ transform:scaleX(0); }
  to  { transform:scaleX(1); }
}
@keyframes fade{
  from{ opacity:0; scale:.94; }
  to  { opacity:1; scale:1; }
}
@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(calc(-10 * var(--u))); }
}
@keyframes globe{
  from{ opacity:0; transform:translateY(calc(40 * var(--u))); }
  to  { opacity:1; transform:none; }
}
@keyframes seam{
  from{ transform:scaleY(0); opacity:0; }
  to  { transform:scaleY(1); opacity:1; }
}

/* ── Responsivo (celular, tablet em retrato, celular deitado) ────────────────
   No desktop nada aqui se aplica. Nas telas abaixo o palco vira uma coluna
   rolável: ícone → AtanaSoft → AtanaLabs → globo → rodapé, cada dimensão
   sobre o seu próprio fundo. A ordem é feita por grid, sem mexer no HTML. */
@media (max-aspect-ratio: 6/5), (max-width: 900px), (max-height: 520px){
  html, body{ height:auto; }
  body{ overflow-x:hidden; overflow-y:auto; }

  .viewport{ display:block; height:auto; }

  .stage{
    width:100%; aspect-ratio:auto;
    display:grid; grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "emblem"
      "sbrand" "sserv" "scta" "spill"
      "lbrand" "lserv" "lcta" "lpill"
      "globe"
      "foot";
    overflow:hidden;
  }
  .stage > *, .lang{ --u:clamp(1px, calc(100vw / 480), 1.2px); }

  /* tudo volta ao fluxo normal */
  .services, .pillars, .brand, .cta, .emblem, .globe, .foot,
  .foot__brand, .foot__right, .foot__center{
    position:relative; left:auto; right:auto; top:auto; bottom:auto;
  }
  .bg, .bg__fill{ display:contents; }
  .bg__shade, .bg__seam{ display:none; }

  /* fundos: cada um cobre o bloco da sua dimensão */
  .bg__half{
    position:relative; inset:auto; width:auto; z-index:0;
    grid-column:1;
  }
  .bg__half--soft{ grid-row:emblem-start / spill-end; }
  .bg__half--labs{ grid-row:lbrand-start / lpill-end; }
  .bg__half img{ position:absolute; inset:0; }
  .bg__half--soft img{ object-position:15% 50%; }
  .bg__half--labs img{ object-position:92% 50%; }
  .bg__half::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, #03060d 0%, rgba(3,6,13,.55) 22%, rgba(3,6,13,.5) 65%, #03060d 100%);
  }
  .bg__half--soft::after{
    background:
      radial-gradient(70% 28% at 50% 16%, rgba(20,110,255,.25), transparent 75%),
      linear-gradient(180deg, rgba(3,6,13,.8) 0%, rgba(3,6,13,.45) 30%, rgba(3,6,13,.5) 70%, #03060d 100%);
  }
  .bg__half--labs::after{
    background:
      radial-gradient(70% 30% at 50% 0%, rgba(30,220,150,.18), transparent 75%),
      linear-gradient(180deg, #03060d 0%, rgba(3,12,9,.5) 25%, rgba(3,12,9,.5) 70%, #03060d 100%);
  }

  .emblem{
    grid-area:emblem; z-index:1; justify-self:center;
    width:min(46vw, 220px);
    margin:clamp(64px, 14vw, 96px) 0 clamp(20px, 6vw, 36px);
  }

  .brand, .services, .cta, .pillars{ z-index:2; justify-self:center; }

  .brand{ width:min(calc(100vw - 56px), 380px); }
  .brand.is-soft{ grid-area:sbrand; }
  .brand.is-labs{ grid-area:lbrand; margin-top:clamp(56px, 16vw, 96px); }

  .services{ max-width:calc(100vw - 48px); margin-top:28px; }
  .services.is-soft{ grid-area:sserv; }
  .services.is-labs{ grid-area:lserv; }
  .services li{
    height:auto; min-height:calc(var(--pitch) * var(--u));
    padding-block:4px;
    white-space:normal; line-height:1.3;
  }
  .ico{ margin-right:calc(18 * var(--u)); }

  .cta{ margin-top:24px; }
  .cta.is-soft{ grid-area:scta; }
  .cta.is-labs{ grid-area:lcta; }

  /* pilares em linha, centralizados */
  .pillars, .pillars.is-right{
    flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center;
    column-gap:1.1em; row-gap:2px;
    max-width:calc(100vw - 40px);
    margin:36px 0 clamp(56px, 14vw, 88px);
    text-align:center; white-space:normal;
  }
  .pillars.is-soft{ grid-area:spill; }
  .pillars.is-labs{ grid-area:lpill; }
  .pillars.is-right{ right:auto; }
  .pillars .rule, .pillars.is-right .rule{
    flex:0 0 100%; margin:12px 0 0; width:auto;
    background:linear-gradient(90deg, transparent calc(50% - 13px), var(--rule) calc(50% - 13px), var(--rule) calc(50% + 13px), transparent calc(50% + 13px));
    box-shadow:none; transform-origin:center;
  }
  .pillars:hover .rule{ width:auto; }

  .globe{
    grid-area:globe; z-index:1;
    width:100%; margin-top:-18vw;
  }

  .foot{
    grid-area:foot; z-index:2;
    height:auto; margin-top:-6vw;
    display:flex; flex-direction:column; align-items:center; gap:24px;
    padding:30px 24px 40px;
  }
  .foot__line{ left:24px; right:24px; }
  .foot__center{ order:0; translate:none; }
  .foot__brand{ order:1; height:auto; }
  .foot__brand img{ height:30px; }
  .foot__right{ order:2; height:auto; flex-direction:column; gap:18px; }
  .foot__right .foot__sep{ display:none; }
  .foot__right .foot__small{ text-align:center; }

  .lang{ top:12px; right:12px; }
}

/* celular deitado: ícone menor para o conteúdo aparecer logo */
@media (max-height: 520px) and (min-aspect-ratio: 6/5){
  .emblem{ width:min(22vw, 150px); margin-top:48px; }
}
@media (prefers-reduced-motion:reduce){
  .lang, .brand, .services li, .cta, .pillars, .foot,
  .rule, .emblem, .globe, .bg__seam{ animation:none; }
  *{ transition:none !important; }
}