@import url("tokens.css");

/* Estilos da home (luca5leite.com). Extraídos de index.html em 24/09/2026,
   sem alteração de regra: o objetivo foi tirar 500 linhas de dentro do HTML
   e ganhar cache. A separação entre estrutura e tema está pendente, e o
   método está em docs/SISTEMA-VISUAL.md. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; background:var(--fundo); color:var(--tinta);
  font-family:var(--sans); font-size:14px; -webkit-font-smoothing:antialiased;
  position:relative; overflow-x:hidden;
}

/* ---------- barra superior com menu ---------- */
.barra-topo{position:sticky; top:0; z-index:60; padding:12px 24px 0; background:linear-gradient(var(--fundo) 70%, transparent)}
.barra{
  max-width:768px; margin:0 auto; height:56px; padding:0 8px 0 14px;
  background:#0c0c0e; border:1px solid rgba(255,255,255,.12); border-radius:12px;
  display:flex; align-items:center; gap:12px;
}
.barra-marca{
  display:flex; align-items:center; gap:8px; color:#fafafa; text-decoration:none;
  font-family:var(--sans); font-size:15px; font-weight:500; white-space:nowrap;
}
.barra-marca svg{width:19px; height:19px}

.menu{display:flex; align-items:center; gap:2px; margin:0 auto}
.menu-item{position:relative}
.menu-gatilho, .menu-simples{
  display:inline-flex; align-items:center; gap:5px; height:32px; padding:0 12px;
  border:0; background:none; border-radius:8px; cursor:pointer; color:#fafafa;
  font-family:var(--sans); font-size:13.5px; font-weight:500; text-decoration:none;
  transition:background-color .2s ease;
}
.menu-gatilho:hover, .menu-simples:hover, .menu-gatilho[aria-expanded="true"]{background:rgba(255,255,255,.10)}
.menu-gatilho svg{width:11px; height:11px; transition:transform .3s ease}
.menu-gatilho[aria-expanded="true"] svg{transform:rotate(180deg)}
.menu-gatilho:focus-visible, .menu-simples:focus-visible, .barra-botao:focus-visible{outline:2px solid #fff; outline-offset:2px}

.barra-fim{display:flex; align-items:center; gap:6px; margin-left:auto}
.barra-botao{
  display:inline-flex; align-items:center; height:38px; padding:0 16px; border-radius:9px;
  background:#fafafa; color:#18181b; font-family:var(--sans); font-size:13.5px; font-weight:500;
  text-decoration:none; transition:background-color .2s ease;
}
.barra-botao:hover{background:#d4d4d8}
.barra-menu{display:none; width:38px; height:38px; border:0; background:none; border-radius:9px; cursor:pointer; color:#fafafa}
.barra-menu:hover{background:rgba(255,255,255,.10)}
.barra-menu svg{width:19px; height:19px}

/* painel do mega menu */
.menu-painel{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) scale(.97);
  width:min(720px, calc(100vw - 48px)); background:#0c0c0e;
  border:1px solid rgba(255,255,255,.12); border-radius:12px; box-shadow:0 18px 44px -12px rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
}
.menu-painel[data-aberto="true"]{opacity:1; transform:translateX(-50%) scale(1); pointer-events:auto}
.painel-grade{display:grid; grid-template-columns:1fr .34fr}
.painel-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0; padding:16px; list-style:none; border-right:1px solid rgba(255,255,255,.10)}
.painel-lista{margin:0; padding:16px; list-style:none; display:flex; flex-direction:column; gap:2px}

.card-nav{
  position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:26px;
  height:100%; min-height:150px; padding:14px; text-decoration:none; overflow:hidden;
  border:1px solid rgba(255,255,255,.12); border-radius:10px; color:#fafafa;
  background:
    repeating-linear-gradient(0deg, transparent 0 33px, rgba(255,255,255,.08) 33px 34px),
    repeating-linear-gradient(90deg, transparent 0 33px, rgba(255,255,255,.08) 33px 34px);
  transition:box-shadow .25s ease, transform .25s ease;
}
.card-nav:hover{background-color:rgba(255,255,255,.05); transform:translateY(-1px)}
.card-nav svg{width:19px; height:19px; color:rgba(255,255,255,.85)}
.card-nav b{display:block; font-family:var(--sans); font-size:13.5px; font-weight:500}
.card-nav span{display:block; font-family:var(--sans); font-size:11.5px; color:rgba(255,255,255,.55); margin-top:6px; line-height:1.45}

.menu-painel.largo{width:min(860px, calc(100vw - 48px))}
.painel-grade.empresa{grid-template-columns:1fr .40fr}
.painel-cards.empresa{grid-template-columns:repeat(2,1fr)}
.painel-cards.empresa .linha-larga{grid-column:1 / -1}
.painel-cards.empresa .linha-larga ul{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0; padding:0; list-style:none}
.painel-lista.empresa{gap:8px}
.item-largo{
  display:flex; align-items:center; justify-content:space-between; gap:12px; height:100%;
  padding:12px 14px; border:1px solid rgba(255,255,255,.12); border-radius:9px; background:rgba(255,255,255,.03);
  color:#fafafa; text-decoration:none; transition:background-color .2s ease;
}
.item-largo:hover{background:rgba(255,255,255,.10)}
.item-largo b{display:block; font-family:var(--sans); font-size:13px; font-weight:500}
.item-largo > span > span{display:block; font-family:var(--sans); font-size:11px; color:rgba(255,255,255,.55); margin-top:3px; line-height:1.4}
.item-largo > svg{width:20px; height:20px; color:rgba(255,255,255,.5); flex:none}

.item-nav{
  display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:7px;
  color:#fafafa; font-family:var(--sans); font-size:13px; text-decoration:none;
  transition:background-color .2s ease;
}
.item-nav:hover{background:rgba(255,255,255,.10)}
.item-nav > svg{width:15px; height:15px; color:rgba(255,255,255,.5); flex:none}
.item-nav .seta-nav{margin-left:auto; width:14px; height:14px; opacity:0; transform:translateX(-6px); transition:all .25s ease}
.item-nav:hover .seta-nav{opacity:1; transform:translateX(0)}

/* painel do celular */
.menu-mobile{display:none; max-width:768px; margin:8px auto 0; background:#0c0c0e; color:#fafafa;
  border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:8px}
.menu-mobile[data-aberto="true"]{display:block}
.menu-mobile details{border-bottom:1px solid rgba(255,255,255,.10)}
.menu-mobile details:last-of-type{border-bottom:0}
.menu-mobile summary{
  list-style:none; cursor:pointer; padding:12px 8px; font-family:var(--sans); font-size:14px; font-weight:500;
  display:flex; align-items:center; justify-content:space-between;
}
.menu-mobile summary::-webkit-details-marker{display:none}
.menu-mobile summary svg{width:13px; height:13px; transition:transform .25s ease}
.menu-mobile details[open] summary svg{transform:rotate(180deg)}
.menu-mobile ul{list-style:none; margin:0; padding:0 0 8px}
.menu-mobile-simples{
  display:flex; align-items:center; min-height:44px; padding:0 8px;
  border-top:1px solid rgba(255,255,255,.10); border-radius:7px;
  color:#fafafa; font-family:var(--sans); font-size:14px; font-weight:500; text-decoration:none;
}
.menu-mobile-simples:hover{background:rgba(255,255,255,.10)}

@media (max-width:900px){
  .menu{display:none}
  .barra-menu{display:grid; place-items:center}
  .barra-topo{padding:12px 20px 0}
}

/* retrato em marca d'agua, colado na direita */
.marca{position:absolute; right:0; top:112px; width:25%; height:70vh; z-index:0; pointer-events:none}
.marca img{width:100%; height:100%; object-fit:contain; object-position:right center;
  opacity:.2; filter:grayscale(1) brightness(1.8) contrast(.3)}
.marca span{position:absolute; inset:0; display:block}
.marca .e{background:linear-gradient(to left, transparent, var(--fundo))}
.marca .d{background:linear-gradient(to right, transparent, var(--fundo)); right:-20px}
.marca .c{background:linear-gradient(to top, transparent, var(--fundo)); top:-20px}
.marca .b{background:linear-gradient(to bottom, transparent, var(--fundo)); bottom:-20px}

main{max-width:768px; margin:0 auto; padding:48px 24px 96px; position:relative; z-index:10}
/* foto, nome e pilulas no mesmo prumo do texto dentro da caixa */
.cabeca{display:flex; gap:24px; align-items:flex-start; padding-left:var(--recuo)}
.cabeca-esq{flex:1 1 300px; min-width:0}

.selo{width:124px; height:124px; overflow:hidden; border-radius:15px; margin-bottom:8px}
.selo img{
  width:100%; height:100%; object-fit:cover; filter:grayscale(1); display:block; border-radius:15px;
  -webkit-user-drag:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}

h1{font-family:var(--serifa); font-size:17px; font-weight:500; margin:0 0 5px; letter-spacing:0}

.canais{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 28px}
.pilula{
  display:inline-flex; align-items:center; gap:1px; white-space:nowrap;
  background:#f4f4f5; color:var(--tinta); border-radius:999px; padding:5px 11px;
  font-family:var(--sans); font-size:13px; text-decoration:none;
  transition:background-color .2s ease, color .2s ease; will-change:transform;
}
.pilula svg{width:12px; height:12px; flex:none}
.pilula:hover{background:#18181b; color:#fafafa}
.pilula:focus-visible{outline:2px solid var(--tinta); outline-offset:2px}

/* a caixa */
.cartao{
  width:100%; max-width:768px; background:var(--cartao); color:var(--tinta);
  border-radius:14px; padding:var(--recuo); font-size:14px;
  box-shadow:0 1px 2px rgba(24,24,27,.05); outline:1px solid var(--anel); outline-offset:-1px;
}
.rotulo{margin:0 0 16px; font-family:var(--serifa); font-size:16px; font-weight:500}
.janela{position:relative}
.fluxo p{
  margin:0 0 20px; font-family:var(--serifa); font-weight:300; font-size:16px; line-height:1.72;
  color:rgba(24,24,27,.93); letter-spacing:.004em;
}
.fluxo p:last-child{margin-bottom:0}
.fluxo a{color:inherit; text-decoration:none; border-bottom:1px solid var(--linha)}
.fluxo a:hover{border-color:var(--tinta-fraca)}
.fluxo strong{font-weight:500}
.cursor{
  display:inline-block; width:2px; height:1em; margin-left:1px; vertical-align:-.15em;
  background:currentColor; animation:pisca 1s steps(1) infinite;
}
@keyframes pisca{50%{opacity:0}}

/* widget do Spotify: alinhado ao topo da foto e a borda direita da caixa, sem verde */
.spotify{
  flex:0 0 230px; width:230px; border-radius:12px; overflow:hidden; padding:10px;
  background:linear-gradient(180deg, #1d1d20, #101012);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 10px 28px -8px rgba(0,0,0,.35);
  transition:box-shadow .5s ease;
}
.spotify:hover{box-shadow:
  inset 0 1px 0 rgba(255,255,255,.12),
  inset 0 0 0 1px rgba(255,255,255,.14),
  0 12px 32px -8px rgba(0,0,0,.4);
}
.spotify-cabeca{display:flex; align-items:center; gap:7px; margin-bottom:8px}
.spotify-marca{
  width:14px; height:14px; flex:none; border-radius:4px; background:rgba(255,255,255,.06);
  display:grid; place-items:center;
}
.spotify-marca svg{width:9px; height:9px; color:#fff}
.spotify-nome{color:#fff; font-family:var(--sans); font-size:11.5px; font-weight:500; line-height:1.2}
.spotify-nome small{display:block; font-size:9.5px; font-weight:400; color:rgba(255,255,255,.5); margin-top:2px}
.spotify-ir{
  margin-left:auto; width:22px; height:22px; flex:none; border-radius:999px;
  display:grid; place-items:center; color:rgba(255,255,255,.75); background:rgba(255,255,255,.07);
  text-decoration:none; transition:background-color .4s ease, color .4s ease, transform .4s ease;
}
.spotify-ir svg{width:12px; height:12px}
.spotify:hover .spotify-ir{background:#ff5500; color:#fff; transform:translateX(-1px)}
/* o interior do iframe e pintado pelo Spotify: o cinza vem de fora, e a cor volta no hover */
.spotify iframe{
  display:block; width:113.6%; height:114px; border:0;
  transform:scale(.88); transform-origin:top left;
  filter:grayscale(1); transition:filter .5s ease;
}
/* recorta a sobra deixada pela reducao do iframe */
.spotify-janela{height:100px; overflow:hidden; border-radius:9px}
.spotify:hover iframe{filter:grayscale(0)}

@media (max-width:900px){
  .cabeca{flex-direction:column}
  .spotify{flex:1 1 auto; width:100%; max-width:300px}
}
.rodape{background:#000; color:#fff; overflow:hidden; user-select:none; position:relative; z-index:10}
.rodape-conteudo{
  max-width:768px; margin:0 auto; padding:32px var(--recuo) 64px;
  display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between;
}
.rodape-links{display:flex; flex-wrap:wrap; gap:16px; list-style:none; margin:0; padding:0}
.rodape a, .rodape button{
  color:#fff; font-family:var(--sans); font-size:13px; text-decoration:none;
  background:none; border:0; padding:0; cursor:pointer; transition:color .2s ease;
}
.rodape a:hover, .rodape button:hover{color:#a1a1aa}
.rodape button:focus-visible, .rodape a:focus-visible{outline:1px solid #fff; outline-offset:3px}
.direitos{font-size:13px; margin:16px 0 0}
.rodape-dir{margin-left:auto; text-align:right}
.ao-topo{margin-top:16px}
.onda{overflow:hidden; height:200px}
.onda .barra{background:#fff; margin-top:-2px; transition:transform .1s ease; will-change:transform}
@media (max-width:640px){
  .rodape-dir{margin-left:0; text-align:left}
  .rodape-conteudo{padding:28px 20px 48px}
}

@media (max-width:640px){
  .marca{display:none}
  main{padding:40px 20px 72px}

  /* no celular, foto e player dividem a primeira linha */
  .cabeca{
    display:grid;
    grid-template-columns:clamp(112px, 32vw, 124px) minmax(0, 1fr);
    column-gap:12px;
    row-gap:0;
    align-items:start;
    padding-left:0;
  }
  .cabeca-esq{display:contents}
  .selo{
    grid-column:1;
    grid-row:1;
    width:100%;
    height:auto;
    aspect-ratio:1;
    margin-bottom:0;
  }
  .cabeca h1{
    grid-column:1 / -1;
    grid-row:2;
    margin-top:8px;
  }
  .cabeca .canais{
    grid-column:1 / -1;
    grid-row:3;
  }
  .spotify{
    grid-column:2;
    grid-row:1;
    width:100%;
    max-width:none;
    padding:8px;
    border-radius:10px;
  }
  .spotify-cabeca{margin-bottom:6px}
  .spotify-nome{min-width:0; font-size:10.5px}
  .spotify-nome small{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:8.5px;
  }
  .spotify-janela{height:68px; border-radius:7px}
  .spotify iframe{
    width:166.667%;
    height:114px;
    transform:scale(.6);
  }
  .fluxo strong{font-weight:700}
}
@media (prefers-reduced-motion:reduce){
  .cursor{animation:none}
}

/* ---------- adaptação visual: perfil pessoal em formato README ---------- */
html{scroll-behavior:smooth}
body{
  background:var(--fundo); color:var(--tinta); font-family:var(--mono);
  font-size:16px; line-height:1.5;
}
::selection{background:var(--tinta); color:var(--fundo)}

/* O topo existente continua sendo do site do Lucas; só recebe a nova gramática. */
.barra-topo{
  padding:0 24px; background:rgba(253,252,252,.96); border-bottom:1px solid var(--linha);
  backdrop-filter:blur(12px);
}
.barra{
  max-width:960px; height:56px; padding:0; background:transparent; border:0; border-radius:0;
}
.barra-marca{
  color:var(--tinta); font-family:var(--mono); font-size:14px; font-weight:700;
}
.barra-marca svg{width:17px; height:17px}
.barra-blog{
  display:none; align-items:center; height:34px; padding:0 12px; border:1px solid var(--tinta);
  border-radius:4px; background:var(--tinta); color:var(--fundo); font-family:var(--mono);
  font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap;
}
.barra-blog:hover{background:#0f0000}
.barra-blog:focus-visible{outline:2px solid var(--tinta); outline-offset:2px}
.menu-gatilho,.menu-simples{
  height:36px; padding:0 12px; border:1px solid var(--linha); border-radius:4px; background:var(--suave); color:var(--tinta); font-family:var(--mono);
  font-size:14px; font-weight:500;
}
.menu-gatilho:hover,.menu-simples:hover,.menu-gatilho[aria-expanded="true"]{background:var(--cinza)}
.menu-simples[href="/blog/"]{border-color:var(--tinta);background:var(--tinta);color:var(--fundo);font-weight:700}
.menu-simples[href="/blog/"]:hover{background:#0f0000}
.menu-gatilho:focus-visible,.menu-simples:focus-visible,.barra-botao:focus-visible,.barra-menu:focus-visible{
  outline:2px solid var(--tinta); outline-offset:2px;
}
.barra-botao{
  height:36px; padding:0 18px; border:1px solid var(--tinta); border-radius:4px;
  background:var(--tinta); color:var(--fundo); font-family:var(--mono); font-size:14px; font-weight:500;
}
.barra-botao:hover{background:#0f0000}
.barra-menu{border-radius:4px; color:var(--tinta)}
.barra-menu:hover{background:var(--cinza)}

.menu-painel{
  top:calc(100% + 11px); background:var(--fundo); color:var(--tinta);
  border:1px solid var(--linha); border-radius:4px; box-shadow:none;
}
.painel-cards{border-color:var(--linha)}
.card-nav{
  min-height:142px; border-color:var(--linha); border-radius:4px; color:var(--tinta); background:var(--suave);
}
.card-nav:hover{background:var(--cinza); transform:translateY(-1px)}
.card-nav svg,.card-nav span,.item-nav>svg{color:var(--tinta-fraca)}
.card-nav b,.card-nav span,.item-largo b,.item-largo>span>span,.item-nav{font-family:var(--mono)}
.card-nav b{font-size:13px}
.card-nav span{font-size:11px}
.item-nav{border-radius:4px; color:var(--tinta); font-size:13px}
.item-nav:hover{background:var(--cinza)}
.item-largo{border-color:var(--linha); border-radius:4px; background:var(--suave); color:var(--tinta)}
.item-largo:hover{background:var(--cinza)}
.menu-mobile{
  background:var(--fundo); color:var(--tinta); border-color:var(--linha); border-radius:4px;
}
.menu-mobile details,.menu-mobile-simples{border-color:var(--linha)}
.menu-mobile summary,.menu-mobile-simples{color:var(--tinta); font-family:var(--mono)}
.menu-mobile-simples[href="/blog/"]{margin:4px 0;border:1px solid var(--tinta);background:var(--tinta);color:var(--fundo);font-weight:700}

.marca{display:none}
main{max-width:960px; padding:80px 24px 112px}
.cabeca{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:40px;
  align-items:start; padding:48px 32px 40px; background:var(--escuro); color:var(--no-escuro);
  border:1px solid var(--escuro); border-radius:0;
}
.cabeca::before{
  content:"[00] perfil"; position:absolute; top:16px; right:24px; color:var(--no-escuro-fraco);
  font-size:12px; line-height:1; text-transform:uppercase; letter-spacing:.04em;
}
.cabeca-esq{min-width:0}
.selo{
  width:144px; height:144px; margin:0; border:1px solid rgba(255,255,255,.22); border-radius:4px;
}
.selo img{border-radius:3px}
h1{
  margin:24px 0 10px; color:var(--no-escuro); font-family:var(--mono);
  font-size:clamp(2rem,5vw,3.15rem); font-weight:700; line-height:1.25;
}
.apresentacao{
  max-width:48ch; margin:0; color:var(--no-escuro-fraco); font-size:14px; line-height:1.6;
}
.canais{gap:8px; margin:24px 0 0}
.pilula{
  min-height:36px; padding:5px 10px; background:transparent; color:var(--no-escuro);
  border:1px solid rgba(255,255,255,.22); border-radius:4px; font-family:var(--mono); font-size:13px;
}
.pilula:hover{background:var(--no-escuro); color:var(--escuro)}
.pilula:focus-visible{outline-color:var(--no-escuro)}

.spotify{
  width:260px; padding:12px; border:1px solid rgba(255,255,255,.14); border-radius:4px;
  background:var(--escuro-elevado); box-shadow:none;
}
.spotify:hover{box-shadow:none}
.spotify-marca,.spotify-ir{border-radius:4px}
.spotify-nome{font-family:var(--mono); font-size:11px}
.spotify-janela{border-radius:3px}

.cartao{
  display:grid; grid-template-columns:180px minmax(0,1fr); gap:32px; max-width:none;
  padding:48px 32px; background:var(--fundo); border:1px solid var(--linha); border-top:0;
  border-radius:0; box-shadow:none; outline:0; font-size:16px;
}
.rotulo{
  margin:0; color:var(--tinta); font-family:var(--mono); font-size:16px; font-weight:700; line-height:1.5;
}
.rotulo::before{content:"[+] "; color:var(--tinta-fraca)}
.fluxo p{
  margin:0 0 24px; color:var(--corpo); font-family:var(--mono); font-size:16px;
  font-weight:400; line-height:1.65; letter-spacing:0;
}
.fluxo a{border-color:var(--tinta-fraca)}
.fluxo a:hover{border-color:var(--tinta)}
.fluxo strong{font-weight:700}
.cursor{width:.62em; height:1.15em; margin-left:2px; background:var(--tinta); vertical-align:-.18em}

.rodape{
  background:var(--fundo); color:var(--tinta); border-top:1px solid var(--linha);
}
.rodape-conteudo{max-width:960px; padding:32px 24px 48px; gap:32px}
.rodape a,.rodape button{color:var(--tinta); font-family:var(--mono); font-size:13px}
.rodape a:hover,.rodape button:hover{color:var(--tinta-fraca)}
.rodape button:focus-visible,.rodape a:focus-visible{outline-color:var(--tinta)}
.direitos{color:var(--tinta-fraca); font-size:12px}
.onda{display:none}

@media (max-width:900px){
  .menu{display:none}
  .barra-blog{display:inline-flex}
  .barra-menu{display:grid; place-items:center}
  .barra-topo{padding:0 20px}
  .cabeca{grid-template-columns:minmax(0,1fr) 240px; gap:24px}
  .spotify{width:240px}
}
@media (max-width:640px){
  .barra-topo{padding:0 16px}
  .barra{height:56px}
  .barra-botao{display:none}
  .menu-mobile{margin:8px 0 12px}
  main{padding:40px 16px 72px}
  .cabeca{display:grid; grid-template-columns:1fr; gap:32px; padding:48px 20px 24px}
  .cabeca-esq{display:block}
  .cabeca::before{left:20px; right:auto}
  .selo{width:112px; height:112px}
  .cabeca h1{grid-column:auto; grid-row:auto; margin:20px 0 8px}
  .cabeca .canais{grid-column:auto; grid-row:auto}
  .spotify{grid-column:auto; grid-row:auto; width:100%; max-width:none; padding:10px; border-radius:4px}
  .spotify-janela{height:88px}
  .spotify iframe{width:136.37%; height:114px; transform:scale(.735)}
  .cartao{grid-template-columns:1fr; gap:24px; padding:32px 20px}
  .fluxo p{font-size:15px; line-height:1.7}
  .rodape-conteudo{padding:28px 16px 40px}
  .rodape-dir{margin-left:0; text-align:left}
}