/* =========================================================
   Ederson Leandro - portfolio
   Carvao quente + acento laranja neon, pontual.
   Layout editorial: titulo grande a esquerda, midia a direita.
   Tipografia calibrada para LEITURA, nao para print.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* Fundo: carvao levemente quente, nunca preto puro. */
  --bg:        #0c0a09;
  --bg-2:      #120f0d;
  --panel:     #181412;
  --panel-2:   #1e1916;
  --line:      #2f2924;
  --line-soft: #231e1a;

  /* Texto */
  --ink:       #f2eee9;
  --ink-strong:#ffffff;
  --ink-mute:  #b3aaa1;
  --ink-faint: #847a71;

  /* Laranja neon - usado com parcimonia */
  --accent:      #ff5f1f;
  --accent-deep: #f04a0a;
  --accent-ink:  #1a0b04;
  --glow-1: 0 0 18px rgba(255,95,31,.32);
  --glow-2: 0 0 44px rgba(255,95,31,.20);

  /* Tipografia */
  /* Fontes da lista enviada. Anton: titulos, condensada e forte.
     Lexend: leitura, desenhada para reduzir esforco visual.
     Kaushan Script: uma palavra de destaque no titulo principal. */
  --display: "Anton", "Oswald", "Arial Narrow", Impact, sans-serif;
  --sans: "Lexend", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --script: "Kaushan Script", "Brush Script MT", cursive;
  --label: "Lexend", ui-sans-serif, system-ui, sans-serif;

  --step--1: clamp(.82rem, .8rem + .1vw, .88rem);
  --step-0:  clamp(1rem, .96rem + .18vw, 1.1rem);
  --step-1:  clamp(1.16rem, 1.08rem + .38vw, 1.38rem);
  --step-2:  clamp(1.55rem, 1.3rem + 1vw, 2.2rem);
  --step-3:  clamp(2.2rem, 1.6rem + 2.4vw, 3.8rem);
  --step-4:  clamp(2.9rem, 1.8rem + 4.8vw, 6.4rem);

  --measure: 64ch;
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;

  --pad-x:  clamp(1.15rem, 5vw, 3.5rem);
  --gap-sec:clamp(4.5rem, 11vw, 9rem);

  --ease:  cubic-bezier(.22,.7,.3,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  color-scheme: dark;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:6rem;
}

body{
  margin:0;
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--step-0);
  line-height:1.7;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  overflow-x:clip;

  /* Luz de fundo: banho de laranja entrando pelo canto superior
     direito. Camadas do proprio body, presas a viewport e em
     vw/vh - o brilho fica proporcional a tela, nao inunda o
     celular, e nao cria camada fixa que pesa na repintura. */
  background-color:var(--bg);
  background-image:
    radial-gradient(85vw 70vh at 118% 6%,  rgba(255,95,31,.19), transparent 55%),
    radial-gradient(55vw 45vh at 104% -8%, rgba(255,140,80,.10), transparent 52%),
    radial-gradient(80vw 60vh at -18% 97%, rgba(240,74,10,.10), transparent 58%),
    linear-gradient(168deg, #0f0c0a 0%, #0c0a09 42%, #090707 100%);
  background-attachment:fixed,fixed,fixed,fixed;
  background-repeat:no-repeat;
}

img,video,svg{ max-width:100%; display:block; }
button,input,select,textarea{ font:inherit; color:inherit; }

::selection{ background:rgba(255,95,31,.28); color:#fff; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

/* ---------- 3. Tipografia ---------- */
h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--ink-strong);
  font-weight:400;           /* Anton tem um peso so; negrito falso borra */
  line-height:1.2;          /* acento de maiuscula (Ê, Ú) nao encosta na linha de cima */
  letter-spacing:.012em;
  text-transform:uppercase;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:var(--step-4); }
h2{ font-size:var(--step-3); }
h3{ font-size:var(--step-2); line-height:1.2; }
h4{ font-size:var(--step-1); line-height:1.2; letter-spacing:.02em; }

p{ margin:0 0 1.1em; max-width:var(--measure); text-wrap:pretty; }
p:last-child{ margin-bottom:0; }
strong{ color:var(--ink-strong); font-weight:700; }
a{ color:var(--accent); text-decoration-thickness:1px; text-underline-offset:.22em; }

.lead{ font-size:var(--step-1); line-height:1.6; max-width:56ch; }
.mute{ color:var(--ink-mute); }
.small{ font-size:var(--step--1); line-height:1.65; color:var(--ink-mute); max-width:60ch; }

/* Rotulo tecnico: Lexend em maiusculas, espacado. */
.label{
  font-family:var(--label); font-size:.7rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint);
}

/* Palavra em destaque - o acento pontual. */
.hl{ color:var(--accent); text-shadow:0 0 26px rgba(255,95,31,.4), 0 0 6px rgba(255,95,31,.22); }
.ul{ color:var(--ink-strong); white-space:nowrap; }

/* ---------- 4. Layout ---------- */
.wrap  { width:min(1220px,100%); margin-inline:auto; padding-inline:var(--pad-x); }
.narrow{ width:min(760px, 100%); margin-inline:auto; padding-inline:var(--pad-x); }
section{ padding-block:var(--gap-sec); position:relative; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.65rem;
  font-family:var(--label); font-size:.72rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
  margin:0 0 1.1rem;
}

.sec-head{ margin-bottom:clamp(2.4rem,5vw,3.8rem); }

/* Sem linha: o respiro entre blocos ja separa. */
.rule{ height:0; border:0; margin:0; background:none; }

/* ---------- 5. Botoes ---------- */
.btn{
  --bh:3.3rem;
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:var(--bh); padding:0 1.5rem;
  border-radius:999px; border:1px solid transparent;
  font-weight:600; font-size:.95rem; letter-spacing:0; line-height:1;
  text-decoration:none; cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .3s var(--ease),
             border-color .25s var(--ease), color .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn svg{ width:1.05em; height:1.05em; flex:none; }

.btn-accent{
  background:linear-gradient(180deg, var(--accent), var(--accent-deep));
  color:var(--accent-ink);
  box-shadow:0 10px 28px -12px rgba(240,74,10,.8), var(--glow-1);
}
.btn-accent:hover{ box-shadow:0 18px 42px -14px rgba(240,74,10,.95), var(--glow-2); }

.btn-ghost{ background:rgba(255,255,255,.022); border-color:var(--line); color:var(--ink-strong); }
.btn-ghost:hover{ border-color:rgba(255,95,31,.5); box-shadow:var(--glow-1); }

/* Link com seta que desliza - animacao leve, so no hover. */
.arrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--label); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:500; color:var(--accent); text-decoration:none;
  border:1px solid rgba(255,95,31,.3); border-radius:999px; padding:.5rem 1rem;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.arrow i{ display:block; width:.9rem; height:.9rem; transition:transform .3s var(--ease-out); }
.arrow:hover{ background:rgba(255,95,31,.1); border-color:rgba(255,95,31,.6); }
.arrow:hover i{ transform:translateX(4px); }

/* ---------- 6. Cabecalho ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:var(--accent-ink); padding:.8rem 1.2rem;
  border-radius:0 0 10px 0; font-weight:700;
}
.skip:focus{ left:0; }

/* Cabecalho em tres partes soltas, como na referencia: marca livre a
   esquerda, menu numa capsula de vidro no centro, curriculo a direita.
   Ao rolar, ganha uma faixa escura com desfoque por tras. */
.head{
  position:sticky; top:0; z-index:100;
  transition:background .35s var(--ease), box-shadow .35s var(--ease);
}
.head.is-stuck{
  background:rgba(12,10,9,.78);
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 18px 40px -30px rgba(0,0,0,.95);
}
/* Colunas iguais nas pontas: o menu fica no centro exato. */
.head-in{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1.5rem;
  height:5rem;
}

.brand{
  display:inline-flex; align-items:center; gap:.75rem; justify-self:start;
  color:var(--ink-strong); text-decoration:none; min-width:0;
}
.brand-mark{
  width:3.2rem; height:2.15rem; flex:none; display:block; overflow:visible;
  filter:drop-shadow(0 4px 10px rgba(255,95,31,.45));
  transition:transform .5s var(--ease-out);
}
.brand:hover .brand-mark{ transform:translateY(-3px) rotate(-6deg) scale(1.08); }
/* Piscada rapida a cada seis segundos. */
.brand-mark .olhos{ transform-box:fill-box; transform-origin:center; animation:piscar 6s var(--ease) infinite; }
@keyframes piscar{ 0%,92%,100%{ transform:scaleY(1); } 95%{ transform:scaleY(.08); } }
/* Branquias do axolote balancam devagar, como na agua. Cada lado gira
   a partir de onde encosta na cabeca. */
.brand-mark .guelras{ transform-box:fill-box; animation:balancoE 4.8s var(--ease) infinite; }
.brand-mark .guelras-e{ transform-origin:100% 55%; }
.brand-mark .guelras-d{ transform-origin:0% 55%; animation-name:balancoD; }
@keyframes balancoE{ 0%,100%{ transform:rotate(0deg); } 50%{ transform:rotate(-7deg); } }
@keyframes balancoD{ 0%,100%{ transform:rotate(0deg); } 50%{ transform:rotate(7deg); } }

.brand-text{ display:flex; flex-direction:column; align-items:flex-start; gap:.32rem; min-width:0; }

/* ---- Texto que troca: nome traduzido e o que eu faco ----
   Todas as versoes ficam empilhadas no mesmo lugar. O JS liga uma por vez
   e ajusta a largura da caixa para a versao da vez, com transicao. */
.rot{
  position:relative; display:inline-grid; grid-template-columns:100%;
  overflow:hidden; vertical-align:top;
  transition:width .5s var(--ease-out);
}
.rot-item{
  grid-area:1/1; justify-self:start; align-self:center;
  white-space:nowrap;
  opacity:0; transform:translateY(105%);
  transition:opacity .45s var(--ease), transform .55s var(--ease-out);
}
.rot-item.is-on{ opacity:1; transform:none; }
.rot-item.is-out{ opacity:0; transform:translateY(-105%); }


.rot-funcao{ height:1.05rem; }
.rot-funcao .rot-item{
  font-family:var(--label); font-size:.75rem; line-height:1.05rem; font-weight:500;
  color:var(--ink-mute);
}

/* Versao estatica (pagina de privacidade, sem animacao). */
.brand-name{ font-family:var(--display); font-size:1.14rem; line-height:1.3rem; letter-spacing:.045em; text-transform:uppercase; }
.brand-role{ font-family:var(--label); font-size:.75rem; line-height:1.05rem; font-weight:500; color:var(--ink-mute); }

/* ---- Menu do computador: capsula fina com vidro discreto ---- */
.nav{
  --g-shine: linear-gradient(180deg, rgba(255,255,255,.025), transparent);
  --g-fill: linear-gradient(160deg, rgba(28,24,21,.46), rgba(18,15,13,.38));
  --g-edge: linear-gradient(140deg, rgba(255,255,255,.15), rgba(255,255,255,.05) 55%, rgba(255,150,100,.12));
  --g-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  display:flex; align-items:center; gap:.1rem;
  padding:.15rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(22,18,15,.4);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:var(--g-shadow);
}
.nav a{
  display:flex; align-items:center; justify-content:center;
  min-height:2.125rem; padding:0 1rem;
  color:var(--ink-mute); text-decoration:none;
  font-size:.82rem; font-weight:400; line-height:1.4;
  border-radius:999px;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.nav a:hover{ color:var(--ink-strong); background:rgba(255,255,255,.045); }
.nav a.is-active{ color:var(--accent); background:rgba(255,95,31,.09); }

.head .btn{ --bh:3rem; padding:0 1.25rem; font-size:.88rem; justify-self:end; }
/* Paginas sem menu (privacidade): so marca e botao. */
.head-in.head-simples{ grid-template-columns:1fr auto; }

/* ---- Botao sanduiche (so celular e tablet) ---- */
.menu-btn{
  display:none; place-items:center; justify-self:start;
  width:2.9rem; height:2.9rem; padding:0; border-radius:50%;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(22,18,15,.6);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:var(--ink-strong); cursor:pointer;
}
.menu-bars{ position:relative; display:block; width:1.15rem; height:.8rem; }
.menu-bars i{
  position:absolute; left:0; right:0; height:2px; border-radius:2px; background:currentColor;
  transition:transform .4s var(--ease-out), opacity .25s var(--ease), top .4s var(--ease-out);
}
.menu-bars i:nth-child(1){ top:0; }
.menu-bars i:nth-child(2){ top:calc(50% - 1px); }
.menu-bars i:nth-child(3){ top:calc(100% - 2px); }
.menu-btn[aria-expanded="true"] .menu-bars i:nth-child(1){ top:calc(50% - 1px); transform:rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-bars i:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] .menu-bars i:nth-child(3){ top:calc(50% - 1px); transform:rotate(-45deg); }

/* ---- Menu aberto: tela cheia, links grandes entrando em cascata ---- */
.menu{
  position:fixed; inset:0; z-index:95;
  display:flex; flex-direction:column; justify-content:space-between; gap:2rem;
  padding:7rem var(--pad-x) calc(2.2rem + env(safe-area-inset-bottom));
  background:rgba(12,10,9,.97);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; transition:opacity .35s var(--ease);
}
.menu[hidden]{ display:none; }
.menu::before{
  content:""; position:absolute; inset:-20% -30% auto auto; width:90vw; height:70vh; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,95,31,.28), transparent);
}
.menu.is-open{ opacity:1; }
.menu-nav{ position:relative; display:flex; flex-direction:column; }
.menu-nav a{
  display:flex; align-items:baseline; gap:.9rem;
  padding:.5rem 0; text-decoration:none;
  font-family:var(--display); font-size:clamp(2.6rem,12vw,4.4rem); line-height:1.1;
  text-transform:uppercase; letter-spacing:.015em; color:var(--ink-strong);
  opacity:0; translate:0 18px;
  transition:opacity .5s var(--ease), translate .6s var(--ease-out), color .25s var(--ease);
  transition-delay:calc(var(--i, 0) * 70ms + 90ms), calc(var(--i, 0) * 70ms + 90ms), 0s;
}
.menu-nav a small{ font-family:var(--label); font-size:.8rem; font-weight:500; letter-spacing:.14em; color:var(--accent); }
.menu-nav a:hover, .menu-nav a.is-active{ color:var(--accent); }
.menu.is-open .menu-nav a{ opacity:1; translate:0 0; }
.menu-foot{ position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; }
.menu-mail{ color:var(--ink-mute); text-decoration:none; font-size:.95rem; }
.menu-mail:hover{ color:var(--ink-strong); }
html.menu-aberto{ overflow:hidden; }

/* ---- Celular e tablet: sanduiche a esquerda, marca no centro ---- */
@media (max-width:880px){
  .nav{ display:none; }
  .menu-btn{ display:grid; }
  .head-in{ grid-template-columns:2.9rem 1fr 2.9rem; gap:.75rem; height:4.4rem; }
  .brand{ justify-self:center; gap:.6rem; }
  .brand-text{ align-items:center; }
  .rot-item{ justify-self:center; }
  .brand-mark{ width:2.9rem; height:1.95rem; }
  /* So o icone de conversa, em circulo, espelhando o sanduiche. */
  .head .btn{ --bh:2.9rem; width:2.9rem; padding:0; }
  .head .btn [data-contact-label]{ display:none; }
  .head-in.head-simples{ grid-template-columns:1fr auto; }
  .head-simples .brand{ justify-self:start; }
  .head-simples .brand-text{ align-items:flex-start; }
  /* Na pagina de privacidade o botao tem texto: nao vira circulo. */
  .head .head-simples .btn{ width:auto; height:auto; padding:0 1rem; font-size:.82rem; }
}
@media (max-width:360px){ .head-simples .so-largo{ display:none; } }
@media (min-width:881px){ .menu{ display:none !important; } }
/* Telas bem estreitas: o nome em japones e a versao mais larga e precisa caber
   entre o sanduiche e o botao do curriculo. */
@media (max-width:360px){
  .brand{ gap:.5rem; }
  .brand-mark{ width:2.6rem; height:1.75rem; }
}

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

@keyframes pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.75)} }

/* ---------- 7. Hero ---------- */
.hero{ padding-block:clamp(3.5rem,10vw,7.5rem) clamp(2.5rem,6vw,4.5rem); }
.hero h1{ margin-bottom:.4em; }
.hero .lead{ margin-bottom:2.3rem; color:var(--ink-mute); }

.avail{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.82rem; font-weight:600; color:var(--ink-mute);
  border:1px solid var(--line); border-radius:999px;
  padding:.42rem 1rem .42rem .8rem; margin-bottom:1.9rem;
  background:rgba(255,255,255,.02);
}
.avail i{ width:.48rem; height:.48rem; border-radius:50%; background:var(--accent); box-shadow:var(--glow-1); animation:pulse 3s var(--ease) infinite; }

.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }

/* Faixa rolante das disciplinas - animacao leve e continua. */
.marquee{
  margin-top:clamp(3rem,7vw,5rem);
  border-block:1px solid var(--line-soft);
  padding-block:1rem;
  overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{
  display:flex; width:max-content; gap:0;
  animation:slide 34s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-group{ display:flex; gap:0; flex:none; }
.marquee span{
  display:inline-flex; align-items:center; gap:1.6rem;
  padding-inline:1.6rem; white-space:nowrap;
  font-family:var(--label); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute);
}
.marquee span::after{ content:""; width:.32rem; height:.32rem; border-radius:50%; background:var(--accent); box-shadow:var(--glow-1); }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------- 8. Numeros ---------- */
/* Um cartao de vidro por numero, com uma luz laranja no canto. O numero
   fica numa coluna propria, entao nunca encosta em linha nenhuma. */
.stats{
  display:grid; gap:clamp(.7rem,1.6vw,1rem);
  grid-template-columns:1fr;
}
@media (min-width:760px){
  .stats{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
.stat{
  position:relative; overflow:hidden; isolation:isolate;
  display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center;
  gap:.2rem 1.15rem;
  padding:clamp(1.1rem,2.2vw,1.55rem) clamp(1.1rem,2.4vw,1.6rem);
  border-radius:1.4rem;
}
.stat::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:-18%; top:-60%; width:75%; height:190%;
  background:radial-gradient(closest-side, rgba(255,95,31,.34), rgba(255,95,31,.08) 60%, transparent);
}
.stat b{
  min-width:1.6ch; text-align:center;
  font-family:var(--display); font-weight:400; line-height:1;
  font-size:clamp(2.7rem,5.6vw,3.5rem); letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg, #ffc49e 0%, #ff7a3d 45%, #ff5f1f 70%, #e2470e 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 18px rgba(255,95,31,.35));
}
.stat span{
  display:block; font-size:.9rem; line-height:1.45; color:var(--ink-mute);
}
.stat strong{
  display:block; margin-bottom:.18rem;
  font-size:1.02rem; font-weight:600; line-height:1.3; color:var(--ink-strong);
}

/* ---------- 9. Linhas de trabalho (referencia: titulo / midia) ---------- */
.work-group + .work-group{ margin-top:clamp(3.5rem,8vw,6rem); }

.group-head{
  display:flex; flex-wrap:wrap; gap:.8rem 2rem; align-items:baseline;
  justify-content:space-between; margin-bottom:clamp(1.6rem,3vw,2.4rem);
  padding-bottom:1.1rem; border-bottom:1px solid var(--line-soft);
}
.group-head h3{ margin:0; }
.group-head .small{ margin:0; }

/* Sem texto de marcador, a coluna de informacao virava um vazio
   ao lado da midia. A linha passa a ser uma coluna so: etiqueta
   em cima, midia com a largura toda. Quando houver titulo e
   descricao reais, volte as duas colunas com a regra comentada
   no fim deste bloco. */
.row{ display:grid; gap:1.1rem; grid-template-columns:1fr; align-items:start; }
.row + .row{ margin-top:clamp(2.4rem,5vw,4rem); padding-top:clamp(2.4rem,5vw,4rem); border-top:1px solid var(--line-soft); }

.row-info{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:.5rem 1.2rem; padding-bottom:.85rem; border-bottom:1px solid var(--line-soft);
}
.row-n{
  font-family:var(--label); font-size:.72rem; letter-spacing:.18em;
  color:var(--accent); display:block; margin-bottom:0;
}
.row-info h4{ margin-bottom:.6rem; font-size:var(--step-2); }
.row-info p{ font-size:.97rem; line-height:1.7; color:var(--ink-mute); }

.meta{ list-style:none; margin:1.2rem 0 0; padding:0; display:grid; gap:.5rem; }
.meta li{
  display:flex; justify-content:space-between; gap:1rem;
  font-family:var(--label); font-size:.72rem; letter-spacing:.06em;
  color:var(--ink-faint); border-bottom:1px dashed var(--line-soft); padding-bottom:.5rem;
}
.meta li b{ color:var(--ink-mute); font-weight:500; text-align:right; }
.row-info .arrow{ margin-top:1.4rem; }

/* Para voltar ao texto ao lado da midia quando houver titulo e
   descricao reais, descomente este bloco. As regras de .meta,
   .row-info h4 e .row-info p acima continuam prontas.
.row{ gap:clamp(1.2rem,3vw,2.8rem); }
.row-info{ display:block; border-bottom:0; padding-bottom:0; }
.row-n{ margin-bottom:.8rem; }
@media (min-width:900px){
  .row{ grid-template-columns:minmax(0,.4fr) minmax(0,.6fr); }
  .row.is-flip .row-info{ order:2; }
  .row-info{ position:sticky; top:6.5rem; }
}
*/

/* ---------- 10. Midia: vazia agora, pronta para receber ---------- */
.media{
  position:relative; overflow:hidden;
  border:1px solid var(--line-soft); border-radius:var(--r-lg);
  background:var(--bg-2);
  transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.media:hover{
  border-color:rgba(255,95,31,.28);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.95);
}
.media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out); }
.media:hover img{ transform:scale(1.035); }

/* Proporcoes por tipo de peca. */
.ar-16x9 { aspect-ratio:16/9; }
.ar-16x10{ aspect-ratio:16/10; }
.ar-9x16 { aspect-ratio:9/16; }
.ar-1x1  { aspect-ratio:1/1; }

/* Placeholder: hachura discreta + rotulo. Sem promessa falsa. */
.slot{
  position:absolute; inset:0; display:grid; place-content:center; gap:.55rem;
  text-align:center; padding:1.2rem;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.016) 0 11px, transparent 11px 22px);
}
.slot .label{ color:var(--ink-faint); }
.slot b{
  font-family:var(--label); font-size:.78rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-mute);
}

/* ---------- 11. Palco de video: zero borda preta ---------- */
/* --arnum e escrito pelo JS a partir do proprio arquivo, entao
   a caixa assume exatamente a proporcao do video. Horizontal
   ocupa a largura; vertical e centralizado e limitado pela
   altura. Em nenhuma tela sobra faixa preta. */
.stage{
  --arnum:1.7778;
  position:relative;
  width:min(100%, calc(78vh * var(--arnum)));
  aspect-ratio:var(--arnum);
  margin-inline:auto;
  overflow:hidden; border-radius:var(--r-lg);
  border:1px solid var(--line-soft); background:var(--bg-2);
}
.stage video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:transparent; }

.vbar{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; margin-top:.9rem; }
.vbar .label{ margin-right:.3rem; }
.chip{
  appearance:none; background:rgba(255,255,255,.03); border:1px solid var(--line);
  color:var(--ink-mute); border-radius:999px; padding:.4rem .9rem;
  font-size:.83rem; font-weight:600; cursor:pointer;
  transition:color .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease);
}
.chip:hover{ color:var(--ink-strong); border-color:rgba(255,95,31,.4); }
.chip[aria-pressed="true"]{
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink); box-shadow:var(--glow-1);
}

/* ---------- 12. Grades ---------- */
.grid{ display:grid; gap:clamp(.9rem,2.2vw,1.4rem); }
.g-2{ grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); }
.g-4{ grid-template-columns:repeat(auto-fit, minmax(185px,1fr)); }
@media (max-width:560px){ .g-4{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

.piece .label{ display:block; }

/* ---------- 13. Escrita ---------- */
.write{
  border:1px solid var(--line-soft); border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--panel), var(--bg-2));
  padding:clamp(1.4rem,3vw,2.1rem);
  transition:border-color .35s var(--ease);
}
.write:hover{ border-color:rgba(255,95,31,.22); }
.write + .write{ margin-top:1.1rem; }
.write-meta{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; margin-bottom:1rem; }
.write-body{ max-width:58ch; }
.write-body p{ font-size:1.02rem; line-height:1.8; color:var(--ink); }
.write-more[hidden]{ display:none; }
.write-toggle{
  margin-top:1.1rem; background:none; border:0; padding:0; cursor:pointer;
  color:var(--accent); font-weight:700; font-size:.9rem;
  display:inline-flex; align-items:center; gap:.45rem;
}
.write-toggle::after{ content:"\2193"; transition:transform .3s var(--ease); }
.write-toggle[aria-expanded="true"]::after{ transform:rotate(180deg); }

/* ---------- 14. Sobre ---------- */
.about{ display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:1fr; align-items:start; }
@media (min-width:920px){ .about{ grid-template-columns:minmax(0,.55fr) minmax(0,.45fr); } }

.pillars{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; }
.pillars li{ background:var(--bg-2); padding:1.4rem 1.4rem; }
.pillars h3{ font-size:.98rem; margin:0 0 .35rem; display:flex; align-items:center; gap:.55rem; }
.pillars h3::before{ content:""; width:.4rem; height:.4rem; border-radius:50%; background:var(--accent); box-shadow:var(--glow-1); flex:none; }
.pillars p{ margin:0; font-size:.92rem; line-height:1.65; color:var(--ink-mute); }

/* ---------- 15. Contato ---------- */
.contact-card{
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--panel), var(--bg-2));
  padding:clamp(1.5rem,4vw,2.6rem);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95);
}
/* A coluna nunca pede mais que o espaco do cartao: com 230px fixos, em tela
   de 280px os campos passavam 26px para fora. */
.f-grid{ display:grid; gap:1.05rem; grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.f-grid > *{ min-width:0; }
.f-full{ grid-column:1/-1; }
.f label{ display:block; font-size:.83rem; font-weight:700; margin-bottom:.4rem; }
.f input,.f select,.f textarea{
  width:100%; max-width:100%; min-width:0; background:rgba(0,0,0,.3); border:1px solid var(--line);
  border-radius:11px; padding:.8rem .95rem; font-size:1rem; line-height:1.5; color:var(--ink-strong);
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
}
.f textarea{ min-height:8.5rem; resize:vertical; }
.f input::placeholder,.f textarea::placeholder{ color:var(--ink-faint); }
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none; border-color:rgba(255,95,31,.6);
  box-shadow:0 0 0 3px rgba(255,95,31,.12); background:rgba(0,0,0,.42);
}
.f-consent{ grid-column:1/-1; display:flex; gap:.7rem; align-items:flex-start; font-size:.87rem; line-height:1.6; color:var(--ink-mute); }
.f-consent input{ width:1.15rem; height:1.15rem; margin-top:.25rem; flex:none; accent-color:var(--accent); }

.note{ grid-column:1/-1; border-radius:11px; padding:.85rem 1rem; font-size:.91rem; font-weight:600; display:none; }
.note.ok { display:block; background:rgba(255,95,31,.1); border:1px solid rgba(255,95,31,.35); color:var(--accent); }
.note.err{ display:block; background:rgba(255,107,107,.08); border:1px solid rgba(255,107,107,.35); color:#ff9b9b; }

.ways{ display:grid; gap:.8rem; margin-top:1.6rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); }
.way{
  display:flex; gap:.8rem; align-items:center; text-decoration:none; color:var(--ink);
  border:1px solid var(--line-soft); border-radius:12px; padding:.85rem 1rem;
  background:rgba(255,255,255,.015); transition:border-color .22s var(--ease), transform .22s var(--ease);
}
.way:hover{ border-color:rgba(255,95,31,.4); transform:translateY(-2px); }
.way svg{ width:1.15rem; height:1.15rem; flex:none; color:var(--accent); }
/* O texto quebra dentro do cartao em vez de vazar (o e-mail e uma palavra so). */
.way > span{ display:block; min-width:0; }
.way b{ display:block; font-size:.92rem; color:var(--ink-strong); overflow-wrap:anywhere; }
.way > span > span{ display:block; font-size:.8rem; color:var(--ink-faint); }

/* ---------- 16. Rodape ---------- */
.foot{ border-top:1px solid var(--line-soft); padding-block:2.6rem 3.4rem; }
.foot-in{ display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between; }
.foot p{ margin:0; font-size:.86rem; color:var(--ink-faint); }
.foot a{ color:var(--ink-mute); text-decoration:none; font-size:.86rem; }
.foot a:hover{ color:var(--accent); }

/* ---------- 17. Animacoes leves ---------- */
/* Entrada na rolagem. O atraso vem do JS, em degrade. */
.reveal{ opacity:0; transform:translateY(18px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay:var(--d, 0ms);
}

/* Entrada do titulo do hero, linha a linha. */
.rise{ display:block; overflow:hidden; }
.rise > span{
  display:block; transform:translateY(105%);
  animation:rise .9s var(--ease-out) forwards; animation-delay:var(--d,0ms);
}
@keyframes rise{ to{ transform:translateY(0); } }

/* Barra de progresso de leitura. */
.progress{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:120;
  transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg, var(--accent-deep), var(--accent));
  box-shadow:var(--glow-1);
}

/* Quem pediu menos movimento recebe menos movimento. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .rise > span{ transform:none; }
  .marquee-track{ animation:none; }
}

/* Sem JS: nada fica escondido. */
.no-js .reveal{ opacity:1; transform:none; }
.no-js .write-more[hidden]{ display:block; }
.no-js .write-toggle{ display:none; }

/* ---------- 18. Hero: texto + selo do curriculo ---------- */
.hero h1{ line-height:1.12; letter-spacing:.008em; }
/* Destaque na mesma tipografia do titulo, com cor e brilho preservados. */
.hero h1 .hl{
  font:inherit; text-transform:uppercase; letter-spacing:inherit;
}
/* A linha que sobe no carregamento corta o pincel; da folga. */
.hero h1 .rise{ padding-block:.26em .08em; margin-block:-.26em -.08em; }
.hero-grid{ display:grid; gap:clamp(2rem,5vw,4rem); align-items:center; grid-template-columns:1fr; }
@media (min-width:900px){ .hero-grid{ grid-template-columns:minmax(0,1fr) auto; } }

/* Selo do curriculo: disco de vidro, texto girando que fecha o circulo
   inteiro (o JS ajusta o espacamento), centro laranja com brilho e um
   pulso de luz suave. */
.badge{
  position:relative; display:block; flex:none;
  width:clamp(9rem, 19vw, 14.5rem); height:clamp(9rem, 19vw, 14.5rem);
  border-radius:50%; text-decoration:none; justify-self:end;
  -webkit-tap-highlight-color:transparent;
}
@media (max-width:899px){ .badge{ justify-self:start; } }

.badge-disc{
  position:absolute; top:0; right:0; bottom:0; left:0; border-radius:50%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -18px 36px -24px rgba(255,95,31,.55),
    0 30px 60px -32px rgba(255,95,31,.55);
}
.badge-disc::after{
  content:""; position:absolute; top:8%; left:14%; width:46%; height:22%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.22), transparent);
  transform:rotate(-24deg); pointer-events:none;
}

.badge-ring{
  position:absolute; top:0; left:0; width:100%; height:100%; overflow:visible;
  animation:spin 26s linear infinite;
}
.badge-ring text{
  font-family:var(--label); font-size:13px; font-weight:600; text-transform:uppercase;
  fill:#ffb48c;
}

.badge-core{
  position:absolute; left:50%; top:50%; width:42%; height:42%;
  margin:-21% 0 0 -21%;
  display:grid; place-items:center; border-radius:50%;
  color:var(--accent-ink);
  background:
    radial-gradient(90% 70% at 30% 18%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%),
    linear-gradient(160deg, #ff8a47 0%, #ff5f1f 55%, #d9420b 100%);
  box-shadow:
    inset 0 -6px 14px rgba(120,30,0,.35),
    inset 0 2px 0 rgba(255,255,255,.35),
    0 14px 34px -10px rgba(255,95,31,.85);
  transition:transform .45s var(--ease-out), box-shadow .35s var(--ease);
}
.badge-core svg{ width:36%; height:36%; transition:transform .45s var(--ease-out); }
/* Pulso de luz em volta do centro. */
.badge-core::before{
  content:""; position:absolute; top:0; right:0; bottom:0; left:0; border-radius:50%;
  animation:badgePulse 2.8s var(--ease) infinite;
}
@keyframes badgePulse{
  0%  { box-shadow:0 0 0 0 rgba(255,95,31,.5); }
  70% { box-shadow:0 0 0 18px rgba(255,95,31,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,95,31,0); }
}
.badge:hover .badge-core{ transform:scale(1.08); box-shadow:inset 0 -6px 14px rgba(120,30,0,.35), inset 0 2px 0 rgba(255,255,255,.35), 0 18px 44px -10px rgba(255,95,31,.95); }
.badge:hover .badge-core svg{ transform:translate(2px,-2px); }
.badge:hover .badge-ring{ animation-duration:10s; }
@keyframes spin{ to{ transform:rotate(360deg); } }


@media (prefers-reduced-motion: reduce){
  .badge-ring{ animation:none; }
}

/* ---------- 19. Numero do bloco (substitui "01 — Video") ---------- */
.gnum{
  display:inline-block; margin-right:.7em; vertical-align:.35em;
  font-family:var(--label); font-size:.42em; font-weight:500; letter-spacing:.14em;
  color:var(--accent);
}

/* ---------- 20. Ferramentas: painel de destaque logo abaixo do hero ---------- */
/* Luz laranja por tras dos logos, como um refletor. Os logos ficam
   brancos para contrastar com a luz; acendem em laranja no hover. */
.toolbox-sec{ padding-block:clamp(1rem,3vw,2.2rem) 0; }

.toolbox{
  position:relative; overflow:hidden; isolation:isolate;
  border:1px solid var(--line-soft);
  border-radius:clamp(1.4rem,3vw,2.2rem);
  background:var(--bg-2);
  padding:clamp(1.5rem,4vw,3.2rem);
}
.toolbox::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:-10%; right:-10%; top:-55%; height:130%;
  background:radial-gradient(48% 52% at 50% 50%, rgba(255,95,31,.42), rgba(255,95,31,.12) 48%, transparent 72%);
}

.toolbox-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:.5rem 2rem;
}
.toolbox-head .eyebrow{ margin-bottom:.7rem; }
.toolbox-head h2{ margin:0; font-size:var(--step-3); line-height:1.12; letter-spacing:.012em; }

.tb-grid{
  --tbgap:clamp(.5rem,1.1vw,.85rem);
  --tbmin:7.6rem;
  list-style:none; margin:clamp(1.5rem,3vw,2.4rem) 0 0; padding:0;
  display:grid; gap:var(--tbgap);
  /* Quantas colunas couberem com a largura minima de cada bloco, no maximo
     seis. O minimo e maior no tablet e no computador, onde o nome e maior. */
  grid-template-columns:repeat(auto-fill, minmax(max(var(--tbmin), calc((100% - 5 * var(--tbgap)) / 6)), 1fr));
}

.tb{
  display:flex; flex-direction:column; align-items:flex-start; gap:.3rem;
  padding:clamp(.9rem,1.5vw,1.2rem);
  border-radius:1rem;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(12,10,9,.55);
  backdrop-filter:blur(8px);
  transition:transform .35s var(--ease-out), border-color .3s var(--ease), background .3s var(--ease);
}
.tb-logo{
  display:block; flex:none;
  width:clamp(1.9rem,2.8vw,2.5rem); height:clamp(1.9rem,2.8vw,2.5rem);
  margin-bottom:.6rem;
  fill:currentColor; color:#ffffff;
  transition:color .3s var(--ease), transform .35s var(--ease-out);
}
.tb-name{
  font-family:var(--display); font-weight:400; line-height:1.1; text-transform:uppercase;
  font-size:clamp(1rem,1.35vw,1.15rem); letter-spacing:.03em;
  color:var(--ink-strong);
}
.tb-cat{
  font-family:var(--label); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint);
}
.tb:hover{ transform:translateY(-4px); border-color:rgba(255,95,31,.5); background:rgba(255,95,31,.08); }
.tb:hover .tb-logo{ color:var(--accent); transform:scale(1.06); }

/* Sem logo aberto: inicial dentro de um circulo, no mesmo tamanho. */
.tb-word{
  display:grid; place-items:center; border-radius:50%;
  border:2px solid currentColor;
  font-family:var(--display); font-size:1.2rem; font-weight:400; line-height:1;
}

/* Entrada em cascata quando o painel aparece. Anima "translate",
   nao "transform", para nao travar o hover. */
@keyframes tbIn{ from{ opacity:0; translate:0 16px; } to{ opacity:1; translate:0 0; } }
.toolbox.is-in .tb{ animation:tbIn .6s var(--ease-out) both; animation-delay:calc(var(--i, 0) * 45ms + 120ms); }

/* Celular: tres colunas, so logo e nome, centralizados. */
@media (max-width:560px){
  .tb{ align-items:center; text-align:center; padding:.9rem .4rem; }
  .tb-cat{ display:none; }
  .tb-logo{ margin-bottom:.4rem; }
  .tb-name{ font-size:.86rem; }
}

/* ================================================================
   21. Vidro liquido
   Borda em gradiente (luz batendo num lado, laranja no outro), reflexo
   no topo e sombra interna. Sem pseudo-elemento: tudo em camadas de
   fundo, entao funciona em qualquer navegador. O desfoque de fundo so
   entra nos elementos que flutuam sobre a pagina, para nao pesar em
   celular antigo.
   ================================================================ */
:root{
  --g-shine: radial-gradient(130% 75% at 12% -12%, rgba(255,255,255,.15), rgba(255,255,255,0) 52%);
  --g-fill:  linear-gradient(160deg, rgba(44,35,29,.66), rgba(20,16,14,.6));
  --g-edge:  linear-gradient(140deg, rgba(255,255,255,.42), rgba(255,255,255,.07) 32%, rgba(255,255,255,.02) 55%, rgba(255,128,64,.40) 86%, rgba(255,255,255,.12));
  --g-edge-hot: linear-gradient(140deg, rgba(255,255,255,.5), rgba(255,160,110,.25) 35%, rgba(255,95,31,.25) 60%, rgba(255,95,31,.75) 90%, rgba(255,255,255,.2));
  --g-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -14px 28px -22px rgba(255,95,31,.35), 0 18px 40px -26px rgba(0,0,0,.85);
}

.nav, .menu-btn, .btn-ghost, .avail, .stat, .tb, .write, .way, .contact-card, .pillars li, .badge-disc{
  border:1px solid transparent;
  background:var(--g-shine) padding-box, var(--g-fill) padding-box, var(--g-edge) border-box;
  box-shadow:var(--g-shadow);
}
.badge-disc{ box-shadow:var(--g-shadow), 0 30px 60px -32px rgba(255,95,31,.55); }
.contact-card{ box-shadow:var(--g-shadow), 0 40px 90px -50px rgba(0,0,0,.95); }

/* Os que flutuam: desfoque real do que passa por tras. */
.nav, .menu-btn, .avail{
  -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%);
}
.tb{ -webkit-backdrop-filter:none; backdrop-filter:none; }
/* Sem suporte a desfoque: fundo mais opaco para o texto continuar legivel. */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .nav, .menu-btn, .avail, .head.is-stuck{ background-color:rgba(18,14,12,.94); }
}

/* Estados: a borda esquenta para laranja. */
.btn-ghost:hover, .tb:hover, .write:hover, .way:hover{
  border-color:transparent;
  background:var(--g-shine) padding-box, linear-gradient(160deg, rgba(64,38,24,.7), rgba(26,17,13,.64)) padding-box, var(--g-edge-hot) border-box;
}
.tb:hover{ transform:translateY(-4px); }

/* Botao principal: vidro laranja, com reflexo e luz. */
.btn-accent{
  border:1px solid transparent;
  background:
    radial-gradient(120% 90% at 25% -20%, rgba(255,255,255,.5), rgba(255,255,255,0) 50%) padding-box,
    linear-gradient(180deg, #ff7a3d 0%, #ff5f1f 55%, #e2470e 100%) padding-box,
    linear-gradient(160deg, rgba(255,255,255,.75), rgba(255,180,140,.25) 40%, rgba(160,40,0,.6)) border-box;
  box-shadow:inset 0 -4px 10px rgba(120,30,0,.28), 0 10px 28px -12px rgba(240,74,10,.85), 0 0 22px rgba(255,95,31,.25);
}
.btn-accent:hover{ box-shadow:inset 0 -4px 10px rgba(120,30,0,.28), 0 18px 40px -14px rgba(240,74,10,.95), 0 0 34px rgba(255,95,31,.35); }

/* Pilares do Sobre: cartoes separados em vez de grade com linha. */
.pillars{ gap:.75rem; background:none; border:0; border-radius:0; overflow:visible; }
.pillars li{ border-radius:1.2rem; }

/* O cartao de contato nao deixa o vidro dos cartoes internos sumir. */
.contact-card .way{ --g-fill: linear-gradient(160deg, rgba(58,44,36,.5), rgba(24,19,16,.5)); }

/* ================================================================
   22. Luz laranja pelo site
   Uma luz ambiente suave por secao, alternando o lado. So gradiente
   radial: nao usa filtro de desfoque, que pesa em celular.
   ================================================================ */
main{ overflow-x:hidden; overflow-x:clip; }
main > section{ isolation:isolate; }
main > section::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  top:6%; left:-22%;
  width:min(78vw, 58rem); height:min(78vw, 58rem);
  background:radial-gradient(closest-side, rgba(255,95,31,.13), rgba(255,95,31,.045) 55%, rgba(255,95,31,0));
}
main > section:nth-of-type(even)::before{ left:auto; right:-24%; top:22%; }
.hero::before{ top:-18%; left:-26%; width:min(110vw, 72rem); height:min(110vw, 72rem);
  background:radial-gradient(closest-side, rgba(255,95,31,.2), rgba(255,95,31,.06) 50%, rgba(255,95,31,0)); }
#contato::before{ left:50%; right:auto; top:12%; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(255,95,31,.17), rgba(255,95,31,.05) 55%, rgba(255,95,31,0)); }

/* ================================================================
   23. Celular de qualquer tamanho, de 2018 para ca
   ================================================================ */
/* Aparelhos com entalhe ou ilha: o conteudo nao entra embaixo. */
.head{ padding-top:env(safe-area-inset-top, 0px); }
.wrap, .narrow{
  padding-left:max(var(--pad-x), env(safe-area-inset-left, 0px));
  padding-right:max(var(--pad-x), env(safe-area-inset-right, 0px));
}
.menu{ padding-top:calc(7rem + env(safe-area-inset-top, 0px)); }

/* Alvos de toque de pelo menos 44px. */
.write-toggle{ min-height:44px; }
.foot a{ display:inline-block; padding:.75rem .1rem; }

/* Grade das ferramentas no celular: logo e nome centralizados. */
@media (max-width:560px){
  .tb-grid{ --tbmin:5.4rem; }
  .toolbox{ padding:1.25rem 1rem; }
  .tb{ align-items:center; text-align:center; padding:.95rem .35rem .85rem; }
  .tb-cat{ display:none; }
  .tb-logo{ margin-bottom:.45rem; width:1.85rem; height:1.85rem; }
  .tb-name{ font-size:clamp(.74rem, 3.3vw, .88rem); letter-spacing:.02em; }
}

/* Telas bem estreitas, como a tela externa de celulares dobraveis (280px). */
@media (max-width:330px){
  :root{ --pad-x:.8rem; }
  .head-in{ grid-template-columns:2.6rem 1fr 2.6rem; gap:.45rem; }
  .menu-btn, .head .btn{ width:2.6rem; height:2.6rem; --bh:2.6rem; }
  .brand{ gap:.4rem; }
  .brand-mark{ width:2.25rem; height:1.5rem; }
  .brand-name{ font-size:.95rem; }
  .rot-funcao .rot-item{ font-size:.68rem; }
  .stat{ gap:.2rem .85rem; padding:1rem; }
  .stat b{ font-size:2.4rem; }
}
/* O axolote e mais largo que a ra: abaixo de 300px (ou 280px com barra de
   rolagem) a marca e o nome encolhem um pouco para nao encostar nos botoes. */
@media (max-width:300px){
  .brand{ gap:.35rem; }
  .brand-mark{ width:1.95rem; height:1.3rem; }
  .brand-name{ font-size:.84rem; }
  .rot-funcao .rot-item{ font-size:.64rem; }
}
@media (max-width:260px){
  :root{ --pad-x:.6rem; }
  .head-in{ grid-template-columns:2.35rem 1fr 2.35rem; gap:.3rem; }
  .menu-btn, .head .btn{ width:2.35rem; height:2.35rem; --bh:2.35rem; }
  .brand{ gap:.3rem; }
  .brand-mark{ width:1.8rem; height:1.2rem; }
  .brand-name{ font-size:.8rem; }
  .rot-funcao .rot-item{ font-size:.6rem; }
}

/* Navegadores sem proporcao automatica (Safari antes do 15). */
@supports not (aspect-ratio: 1 / 1){
  .media{ height:0; }
  .ar-16x9{ padding-top:56.25%; }
  .ar-16x10{ padding-top:62.5%; }
  .ar-9x16{ padding-top:177.78%; }
  .ar-1x1{ padding-top:100%; }
  .stage{ width:100%; height:0; padding-top:56.25%; }
}
@supports not (inset: 0){
  .slot{ top:0; right:0; bottom:0; left:0; }
}

@media (prefers-reduced-motion: reduce){
  .badge-ring, .badge-core::before{ animation:none; }
}

/* Formulario em tela estreita: cartao com menos respiro lateral e a lista
   corta o texto longo com reticencias em vez de empurrar a largura. */
.f select{ text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
@media (max-width:360px){
  .contact-card{ padding:1.25rem 1rem; }
  .f input,.f select,.f textarea{ padding:.75rem .8rem; }
}

/* ---------- Trabalhos reais: galeria e previas ---------- */
.social-gallery{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem 1.25rem; }
.social-piece{ margin:0; min-width:0; }
.social-image{ display:block; position:relative; overflow:hidden; border-radius:var(--r); border:1px solid var(--line); background:var(--bg-2); }
.social-image img{ display:block; width:100%; height:auto; }
.image-expand{ position:absolute; right:.7rem; bottom:.7rem; display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; background:rgba(12,10,9,.8); color:white; transition:background .2s; }
.social-image:hover .image-expand{ background:var(--accent); color:var(--accent-ink); }
.social-piece figcaption{ margin-top:.7rem; font-size:.82rem; color:var(--ink-mute); }
.landing-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.5rem 1.5rem; }
.landing-card{ min-width:0; }
.landing-preview{ display:block; overflow:hidden; border:1px solid var(--line); border-radius:var(--r); background:var(--bg-2); }
.landing-preview img{ display:block; width:100%; height:auto; }
.landing-info{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:1rem; }
.landing-info h4{ margin:0 0 .15rem; }
.landing-info .arrow{ flex-shrink:0; font-size:.62rem; letter-spacing:.08em; }
.gallery-dialog{ width:min(94vw,1000px); max-width:94vw; max-height:94dvh; padding:1rem; background:#171310; color:var(--ink); border:1px solid var(--line); border-radius:var(--r); overflow:auto; }
.gallery-dialog::backdrop{ background:rgba(0,0,0,.85); }
.gallery-dialog:not([open]){ display:none; }
.gallery-dialog-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.75rem; }
.gallery-dialog-top p{ margin:0; font-size:.9rem; }
.gallery-close{ min-width:44px; min-height:44px; padding:.4rem .75rem; border:1px solid var(--line); border-radius:999px; background:var(--bg-2); cursor:pointer; }
.gallery-full{ display:block; width:auto; height:auto; max-width:100%; max-height:calc(94dvh - 100px); margin-inline:auto; object-fit:contain; }
html.gallery-open{ overflow:hidden; }
@media(max-width:1000px){ .social-gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px){ .landing-grid{ grid-template-columns:1fr; } }
@media(max-width:600px){ .social-gallery{ grid-template-columns:1fr; gap:1.8rem; } .landing-info{ align-items:flex-start; flex-wrap:wrap; } .vbar .chip{ min-height:44px; } }

/* Videos por formato: dupla quadrada. */
.video-pair{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1rem,2.5vw,2rem); margin-top:clamp(2.4rem,5vw,4rem); }
.video-card{ display:grid; gap:1.1rem; min-width:0; align-content:start; }
.video-card .stage{ width:100%; }
@media(max-width:700px){ .video-pair{ grid-template-columns:1fr; gap:2.5rem; } }

/* Reels: dois videos verticais juntos, em coluna no celular. */
.reels-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1rem,2.5vw,2rem); width:min(100%,720px); margin-inline:auto; }
.reels-grid .stage{ width:100%; }
.reels-grid .row-info{ display:block; }
.reels-grid .row-info h4{ margin:0 0 .25rem; }
.reels-grid .row-info .small{ display:block; }
@media(max-width:700px){ .reels-grid{ grid-template-columns:1fr; width:min(100%,340px); gap:2.5rem; } }

/* Language selector: compact glass button and a clearly marked current language. */
.head-actions{display:flex;align-items:center;justify-content:flex-end;gap:.85rem;min-width:0;justify-self:end}
.language-switch{position:relative;font-family:var(--sans);line-height:1.4;flex:none}
.language-switch summary{display:flex;align-items:center;justify-content:center;gap:.55rem;min-height:2.625rem;padding:0 .8rem;cursor:pointer;list-style:none;color:var(--ink);border:1px solid rgba(255,255,255,.11);border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));box-shadow:inset 0 1px 0 rgba(255,255,255,.045);transition:border-color .2s,color .2s,background .2s}
.language-switch summary::-webkit-details-marker{display:none}
.language-switch summary::marker{content:""}
.language-switch summary:hover{border-color:rgba(255,255,255,.23);background-color:rgba(255,255,255,.035)}
.language-switch[open] summary{border-color:rgba(255,95,31,.4);background-color:rgba(255,95,31,.06)}
.language-current{font-size:.75rem;font-weight:500;letter-spacing:.06em}
.language-icon{width:1rem;height:1rem;flex:none}
.language-icon-globe{color:var(--ink-mute)}
.language-icon-chevron{width:.75rem;height:.75rem;color:var(--ink-mute);transition:transform .2s}
.language-switch[open] .language-icon-chevron{transform:rotate(180deg)}
.language-popover{position:absolute;right:0;top:calc(100% + .75rem);width:248px;padding:.6rem;background:linear-gradient(155deg,rgba(37,29,24,.98),rgba(18,15,13,.98));border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:0 18px 48px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:110}
.language-switch:not([open]) .language-popover{display:none}
.language-heading{margin:0;padding:.65rem .65rem .7rem;font-size:.63rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}
.language-options{display:grid;gap:.25rem}
.language-options a{display:grid;grid-template-columns:1.875rem minmax(0,1fr) 1rem;align-items:center;gap:.7rem;min-height:3.2rem;padding:.5rem .65rem;color:var(--ink);text-decoration:none;border:1px solid transparent;border-radius:10px;font-size:.8rem;transition:background .2s,border-color .2s}
.language-options a:hover{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.05)}
.language-option-code{display:grid;place-items:center;width:1.875rem;height:1.875rem;border:1px solid rgba(255,255,255,.09);border-radius:7px;background:rgba(255,255,255,.025);font-size:.63rem;letter-spacing:.05em;color:var(--ink-mute)}
.language-option-name{white-space:nowrap;font-weight:400}
.language-option-check{display:grid;place-items:center;width:1rem;color:var(--accent)}
.language-options a[aria-current="page"]{background:rgba(255,95,31,.075);border-color:rgba(255,95,31,.16)}
.language-options a[aria-current="page"] .language-option-code{color:var(--accent);background:rgba(255,95,31,.08);border-color:rgba(255,95,31,.25)}
.language-links{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap}
.language-links a{color:var(--ink-mute);text-decoration:none;font-size:.75rem;line-height:1;min-width:2.75rem;min-height:2.75rem;display:grid;place-items:center;border-radius:6px}
.language-links a:hover{color:var(--ink-strong);background:rgba(255,255,255,.04)}
.language-links a[aria-current="page"]{color:var(--accent)}
.menu-languages{flex-basis:100%}
.menu-languages .language-links{gap:.6rem}
.menu-languages .language-links a{border:1px solid var(--line);min-width:3.25rem;border-radius:999px;background:rgba(255,255,255,.025)}
.menu-languages .language-links a[aria-current="page"]{border-color:rgba(255,95,31,.4);background:rgba(255,95,31,.065)}
@media (min-width:881px) and (max-width:950px){.head-actions .language-switch summary{gap:.4rem;padding:0 .65rem}}
@media (max-width:880px){.head-simples .head-actions{position:relative}.head-simples .language-switch{position:static}}
@media (max-width:420px){.head-simples .so-largo{display:none}.head-simples .language-switch summary{gap:.4rem;padding:0 .65rem}}
.writing-intro{max-width:760px}
.pillars h3{letter-spacing:.02em}
.privacy-page{padding-top:clamp(3rem,8vw,6rem)}
.privacy-page article h2{font-size:var(--step-2)}
@media (min-width:881px) and (max-width:1080px){.head-in{gap:1rem}.head .btn{padding:0 1rem}.nav a{padding:0 .8rem}.head-actions{gap:.5rem}}
@media (max-width:880px){.head-actions .language-switch{display:none}.head-actions{gap:0}.head-simples .head-actions .language-switch{display:block}.head-simples .head-actions{gap:.4rem}}
@media (max-width:420px){.head-simples .brand-mark{display:none}.head-simples .brand-name{font-size:.95rem}.head .head-simples .btn{padding:0 .65rem}}