/* =========================================================
   ALINE VASCONCELOS — estilos compartilhados
   Usado por index.html (portfólio) e sites.html (serviços).
   Editar aqui reflete nas duas páginas.
   ========================================================= */

:root{
  --bg:#0A0A0A;
  --surface:#131313;
  --surface-2:#1A1A1A;
  --line:#252525;
  --line-soft:#1E1E1E;
  --text:#FAFAFA;
  --muted:#8C8C8C;
  --muted-2:#666;
  --green:#86EFAC;
  --green-strong:#4ADE80;
  --grad:linear-gradient(135deg,#BEF264 0%,#86EFAC 55%,#5EEAD4 120%);
  --max:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--green);color:#0A0A0A}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Foco visível para navegação por teclado */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--green-strong);outline-offset:3px;border-radius:10px;
}
.skip{
  position:absolute;left:-9999px;top:12px;z-index:200;
  background:var(--surface);border:1px solid var(--line);
  padding:11px 18px;border-radius:12px;font-size:14px;
}
.skip:focus{left:12px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
section{padding:110px 0;position:relative}
.sec-head{margin-bottom:52px}
.sec-head h2{font-size:clamp(2rem,4.4vw,2.9rem);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.sec-sub{color:var(--muted);margin-top:14px;max-width:52ch;font-size:16.5px}
.centered{text-align:center}
.centered .sec-sub{margin-left:auto;margin-right:auto}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

@media(max-width:760px){
  section{padding:72px 0}
  .wrap{padding:0 20px}
  .sec-head{margin-bottom:36px}
}

/* ================= SIDEBAR RAIL ================= */
.rail{
  position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:80;
  background:var(--surface);border:1px solid var(--line);
  border-radius:20px;padding:10px 8px;
  display:flex;flex-direction:column;gap:6px;
  box-shadow:0 20px 50px rgba(0,0,0,.55);
}
.rail a{
  position:relative;
  width:46px;height:46px;border-radius:13px;
  display:grid;place-items:center;color:var(--muted-2);
  transition:background .2s,color .2s;
}
.rail a:hover{color:var(--text);background:var(--surface-2)}
.rail a.active{color:var(--text);background:#242424}
.rail a.accent{color:#08150C;background:var(--grad)}
.rail a.accent:hover{opacity:.9;color:#08150C}
.rail .sep{height:1px;background:var(--line);margin:6px 4px}
.rail svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rail .tip{
  position:absolute;left:56px;top:50%;transform:translateY(-50%) translateX(-6px);
  white-space:nowrap;
  background:var(--surface-2);border:1px solid var(--line);
  padding:5px 11px;border-radius:8px;font-size:12.5px;color:var(--text);
  opacity:0;pointer-events:none;transition:.18s;
}
.rail a:hover .tip{opacity:1;transform:translateY(-50%) translateX(0)}
@media(max-width:1080px){.rail{display:none}}

/* ================= TOP BAR (mobile) ================= */
.topbar{
  position:sticky;top:0;z-index:70;display:none;
  background:rgba(10,10,10,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.topbar-in{display:flex;gap:22px;overflow-x:auto;padding:14px 20px;font-size:14px;color:var(--muted);scrollbar-width:none}
.topbar-in::-webkit-scrollbar{display:none}
.topbar-in a.accent{color:var(--green);font-weight:500;white-space:nowrap}
@media(max-width:1080px){.topbar{display:block}}

/* ================= HERO ================= */
.hero{padding:130px 0 100px;position:relative}
@media(max-width:760px){.hero{padding:70px 0 60px}}
.hero-glow{
  position:absolute;top:-160px;left:50%;transform:translateX(-50%);
  /* max-width:100% (e não 130vw): com 130vw o brilho estourava a
     largura da tela no celular e criava rolagem horizontal. */
  width:900px;max-width:100%;height:520px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(134,239,172,.10),transparent 62%);
  filter:blur(28px);
}
.pill{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13.5px;color:var(--muted);margin-bottom:30px;
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--green-strong);flex-shrink:0}
.hero .pill{margin-bottom:22px}
.hero-kicker{
  font-size:clamp(1.05rem,2.1vw,1.35rem);font-weight:500;
  letter-spacing:-.01em;color:var(--muted);margin-bottom:8px;
}
.hero-name{
  font-size:clamp(2.9rem,7.2vw,5rem);font-weight:700;
  letter-spacing:-.045em;line-height:1.02;margin-bottom:6px;
}
.hero-title{
  font-size:clamp(2.7rem,6.6vw,4.6rem);font-weight:700;
  letter-spacing:-.04em;line-height:1.05;
}
h1{font-size:clamp(2.7rem,6.6vw,4.6rem);font-weight:700;letter-spacing:-.04em;line-height:1.05}
.hero p.lead{color:var(--muted);font-size:clamp(1rem,1.9vw,1.15rem);max-width:58ch;margin-top:26px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 24px;border-radius:12px;font-size:15px;font-weight:500;
  transition:transform .18s,background .2s,border-color .2s,opacity .2s;
}
.btn:active{transform:scale(.98)}
.btn-green{background:var(--grad);color:#08150C;font-weight:600}
.btn-green:hover{opacity:.9}
.btn-dark{background:var(--surface);border:1px solid var(--line);color:var(--text)}
.btn-dark:hover{background:var(--surface-2);border-color:#333}
/* Currículo: destaca mais que o btn-dark sem competir com o
   verde sólido do CTA principal. */
.btn-cv{background:var(--surface);border:1px solid #2F4A3A;color:var(--green)}
.btn-cv:hover{background:var(--surface-2);border-color:var(--green-strong)}

.metrics{display:flex;flex-wrap:wrap;gap:44px;margin-top:64px;padding-top:34px;border-top:1px solid var(--line-soft)}
.metric b{display:block;font-size:1.9rem;font-weight:700;letter-spacing:-.03em}
.metric span{font-size:13.5px;color:var(--muted)}
@media(max-width:760px){.metrics{gap:26px 34px;margin-top:44px}.metric b{font-size:1.55rem}}

/* Link de volta (topo da página de sites) */
/* display:flex + width:fit-content garante linha própria: o link fica
   acima da pílula, sem esticar a área clicável até a borda. */
.backlink{
  display:flex;width:fit-content;align-items:center;gap:8px;
  font-size:14px;color:var(--muted);margin-bottom:22px;
  transition:color .2s;
}
.backlink:hover{color:var(--text)}
.backlink svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ================= SOBRE ================= */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;gap:34px}}
.about-grid p{color:var(--muted);margin-bottom:17px;font-size:16.5px}
.about-grid p:last-child{margin-bottom:0}
.about-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:30px}
.about-card h3{font-size:15px;font-weight:600;margin-bottom:18px}
.about-card p{color:var(--muted);font-size:15px}
.about-card p strong{color:var(--text);font-weight:500}
.about-card p + p{margin-top:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.about-card p.chips-label{
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:10px;
}
.chips + .chips-label{margin-top:22px}
.chip{font-size:13.5px;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);padding:6px 13px;border-radius:9px}
.chip.hl{color:#0A0A0A;background:var(--green);border-color:transparent;font-weight:500}
.stack-col{display:flex;flex-direction:column;gap:16px}

/* ================= GRADE DE PROJETOS =================
   Cada card é um <button>: a capa em preto e branco escurecida,
   o nome e os ícones de tecnologia por cima. Clicar abre o modal
   com o detalhe do projeto.                                      */
/* Container mais largo que o .wrap padrão: com 1180px não cabem
   3 cards em tamanho bom. O cabeçalho da seção usa o mesmo, para
   o título alinhar com a primeira coluna da grade. */
.proj-wide{max-width:1640px}
/* Acima de 1080px o menu lateral fixo ocupa os ~82px da esquerda.
   Como esta seção é mais larga que o resto, ela chegaria embaixo
   dele — daí o respiro extra nas duas laterais (nos dois lados,
   para o conteúdo continuar centralizado). */
@media(min-width:1081px){.proj-wide{padding-left:112px;padding-right:112px}}

/* auto-FILL (e não auto-fit): com 5 projetos, a última linha fica
   com dois cards — o auto-fit esticaria eles para preencher a
   linha inteira e sairiam maiores que os de cima. */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:22px}
@media(max-width:900px){.proj-grid{grid-template-columns:1fr}}
.proj-card{
  position:relative;padding:0;border:1px solid var(--line);
  background:var(--surface);border-radius:16px;overflow:hidden;
  cursor:pointer;font:inherit;color:inherit;text-align:left;
  transition:transform .28s,border-color .28s,box-shadow .28s;
}
.proj-card:hover{transform:translateY(-4px);border-color:#333;box-shadow:0 18px 44px rgba(0,0,0,.5)}
/* A faixa degradê no rodapé do card. */
.proj-card::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--grad)}
.proj-card .shot{display:block;aspect-ratio:16/11;border-radius:0}
/* Escurecimento leve: o print precisa aparecer. A legibilidade do
   nome vem do gradiente do .proj-ov e do text-shadow, não de apagar
   a imagem. */
.proj-card img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  filter:brightness(.82);
  transition:transform .55s,filter .35s;
}
.proj-card:hover img{transform:scale(1.05);filter:brightness(1)}

.proj-ov{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:13px;padding:22px;
  /* Mais escuro na faixa central, onde ficam o nome e os ícones —
     assim prints claros (Livia, Ana Maria) continuam legíveis sem
     precisar apagar a imagem inteira. */
  background:
    radial-gradient(62% 46% at 50% 50%,rgba(6,6,6,.88),rgba(6,6,6,.34) 72%,transparent 100%),
    linear-gradient(180deg,rgba(6,6,6,.28),rgba(6,6,6,.16) 45%,rgba(6,6,6,.5));
  transition:background .35s;
}
.proj-card:hover .proj-ov{
  background:
    radial-gradient(62% 46% at 50% 50%,rgba(6,6,6,.8),rgba(6,6,6,.26) 72%,transparent 100%),
    linear-gradient(180deg,rgba(6,6,6,.2),rgba(6,6,6,.1) 45%,rgba(6,6,6,.42));
}
.proj-nome{
  font-size:clamp(20px,2vw,24px);font-weight:600;letter-spacing:-.02em;text-align:center;
  text-shadow:0 2px 14px rgba(0,0,0,.7);
}
.proj-ico{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.proj-ico svg{width:29px;height:29px;display:block}
/* Selo de status — usado só dentro do modal. */
.modal-status{
  display:inline-block;margin-left:10px;vertical-align:middle;
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--green);background:rgba(134,239,172,.10);
  border:1px solid rgba(134,239,172,.32);padding:3px 11px;border-radius:999px;
}
.proj-ver{
  font-size:13px;color:var(--green);
  opacity:0;transform:translateY(6px);transition:opacity .28s,transform .28s;
}
.proj-card:hover .proj-ver,.proj-card:focus-visible .proj-ver{opacity:1;transform:none}

/* Capa compartilhada com os cards da página de sites (.work). */
.shot{
  aspect-ratio:2/1;border-radius:12px;overflow:hidden;position:relative;
  background:linear-gradient(140deg,#1b1b1b,#101010);
  display:grid;place-items:center;
}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top center}
.shot .ph{text-align:center;padding:26px}
.shot .ph b{display:block;font-size:clamp(1.1rem,2.4vw,1.6rem);font-weight:600;letter-spacing:-.02em}
.shot .ph span{font-size:13px;color:var(--muted-2);display:block;margin-top:8px}

/* ================= MODAL DO PROJETO ================= */
.modal{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;
  background:rgba(5,5,5,.78);backdrop-filter:blur(7px);
  animation:fade .22s ease;
}
.modal[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-box{
  position:relative;width:min(1120px,100%);max-height:88vh;overflow:auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  box-shadow:0 40px 90px rgba(0,0,0,.65);
}
.modal-x{
  position:absolute;top:16px;right:16px;z-index:3;
  width:38px;height:38px;border-radius:11px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);color:var(--text);
  display:grid;place-items:center;transition:background .2s,border-color .2s;
}
.modal-x:hover{background:#2A2A2A;border-color:#3a3a3a}
.modal-x svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}

/* sticky + align-self:start: a capa e os botões ficam parados no
   topo enquanto o texto da direita rola. Sem isso a coluna estica
   junto com o texto e os botões somem abaixo da dobra. */
.modal-left{
  padding:24px;display:flex;flex-direction:column;gap:18px;
  position:sticky;top:0;align-self:start;
}
/* A capa mantém a proporção real do print, em vez de ser cortada
   numa moldura fixa. Se a imagem for de página inteira (alta), ela
   ganha barra de rolagem própria em vez de esticar o modal. */
.modal-shot{
  border-radius:12px;border:1px solid var(--line);
  background:linear-gradient(140deg,#1b1b1b,#101010);
  max-height:62vh;overflow:auto;
  scrollbar-width:thin;scrollbar-color:#3A3A3A transparent;
}
.modal-shot img{width:100%;height:auto;display:block;margin-top:2px}
.modal-shot::-webkit-scrollbar{width:8px}
.modal-shot::-webkit-scrollbar-thumb{background:#3A3A3A;border-radius:99px}
.modal-acoes{display:flex;flex-wrap:wrap;gap:10px}
.modal-acoes .btn{padding:11px 18px;font-size:14px}

.modal-right{padding:30px 30px 30px 6px;min-width:0}
.modal-right h3{font-size:clamp(1.5rem,2.6vw,1.95rem);font-weight:700;letter-spacing:-.03em;color:var(--green);margin-bottom:6px}
.modal-cat{display:block;font-size:13.5px;color:var(--muted-2);margin-bottom:20px}
.modal-right p{color:var(--muted);font-size:15px;margin-bottom:15px}
.modal-hl{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.modal-hl li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--muted)}
.modal-hl svg{width:14px;height:14px;flex-shrink:0;margin-top:4px;stroke:var(--green-strong);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.modal-tech{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.modal-tech span{
  font-size:12.5px;color:var(--muted);background:var(--surface-2);
  border:1px solid var(--line);padding:4px 10px;border-radius:8px;
}
.modal-fim{font-size:13.5px;color:var(--green);border-top:1px solid var(--line-soft);padding-top:16px}

@media(max-width:860px){
  .modal{padding:0}
  .modal-box{grid-template-columns:1fr;max-height:100vh;height:100%;border-radius:0;border:none}
  .modal-left{padding:20px 20px 0}
  .modal-acoes{margin-top:0}
  .modal-right{padding:4px 20px 30px}
  .modal-acoes .btn{flex:1 1 auto;justify-content:center}
}

/* ================= TIMELINE ================= */
.tl-item{display:grid;grid-template-columns:190px 28px 1fr;padding-bottom:38px;position:relative}
.tl-when{font-size:15px;color:var(--muted);padding-top:2px}
.tl-mid{position:relative;display:flex;justify-content:center}
.tl-mid::before{content:'';position:absolute;top:14px;bottom:-38px;width:0;border-left:1px dashed #333}
.tl-item:last-of-type .tl-mid::before{display:none}
.tl-mid i{width:9px;height:9px;border-radius:50%;background:#3A3A3A;margin-top:9px;position:relative;z-index:2}
.tl-item.now .tl-mid i{background:var(--green-strong);box-shadow:0 0 0 4px rgba(74,222,128,.15)}
.tl-org{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.tl-logo{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:700;color:#08150C;flex-shrink:0}
.tl-org span{font-size:14.5px;color:var(--muted)}
.tl-role{font-size:1.3rem;font-weight:600;letter-spacing:-.02em;margin-bottom:9px}
.tl-body{color:var(--muted);font-size:15.5px;max-width:60ch}
.tl-hidden{display:none}
.tl-hidden.show{display:grid}
.showall{
  display:inline-flex;align-items:center;gap:10px;margin-left:218px;
  background:none;border:none;color:var(--text);font:inherit;font-size:15px;font-weight:500;cursor:pointer;
}
.showall .ic{width:26px;height:26px;border-radius:8px;background:var(--grad);display:grid;place-items:center;color:#08150C;flex-shrink:0}
.showall svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.showall.open svg{transform:rotate(180deg)}
@media(max-width:760px){
  .tl-item{grid-template-columns:1fr;gap:6px}
  .tl-mid{display:none}
  .showall{margin-left:0}
}

/* ================= FAIXA DE CHAMADA (leva para sites.html) ============ */
.band{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;
  background:
    radial-gradient(120% 180% at 100% 0%,rgba(94,234,212,.09),transparent 55%),
    var(--surface);
  border:1px solid var(--line);border-radius:22px;padding:38px 40px;
}
.band-tag{
  display:inline-block;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--green);margin-bottom:14px;
}
.band h2{font-size:clamp(1.5rem,3.2vw,2rem);font-weight:700;letter-spacing:-.03em;line-height:1.15}
.band p{color:var(--muted);font-size:15.5px;margin-top:12px;max-width:56ch}
.band .btn{flex-shrink:0}
@media(max-width:760px){.band{padding:28px 24px;gap:22px}.band .btn{width:100%;justify-content:center}}

/* ================= SERVIÇOS ================= */
.srv{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.srv-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px;transition:border-color .25s,transform .25s}
.srv-card:hover{border-color:#333;transform:translateY(-3px)}
.srv-ic{width:40px;height:40px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;margin-bottom:18px;color:var(--green)}
.srv-ic svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.srv-card h3{font-size:17px;font-weight:600;margin-bottom:9px}
.srv-card p{color:var(--muted);font-size:15px}

/* ================= EXEMPLOS DE SITES (grid) ================= */
.works{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
.work{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:12px;transition:border-color .25s,transform .25s;
}
.work:hover{border-color:#333;transform:translateY(-3px)}
.work .shot{aspect-ratio:16/10}
.work-body{padding:16px 10px 8px}
.work-body h3{font-size:17px;font-weight:600}
.work-body .cat{font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:8px;margin-top:6px}
.work-body .cat::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--green-strong);flex-shrink:0}
.work-body p{color:var(--muted);font-size:14.5px;margin-top:12px}
.work-link{
  display:inline-flex;align-items:center;gap:7px;margin:14px 10px 6px;
  font-size:14px;color:var(--green);border-bottom:1px solid transparent;transition:border-color .2s;
}
.work-link:hover{border-color:var(--green)}

/* ================= PREÇOS ================= */
.toggle-row{display:flex;justify-content:center;margin-bottom:36px}
.toggle-box{
  display:flex;align-items:center;gap:14px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:10px 12px 10px 14px;
}
.switch{width:44px;height:24px;border-radius:999px;background:#2C2C2C;border:none;cursor:pointer;position:relative;transition:background .25s;flex-shrink:0}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .25s}
.switch.on{background:var(--green-strong)}
.switch.on::after{transform:translateX(20px)}
.toggle-box span{font-size:15px}
.addon-tag{font-size:12.5px;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);padding:4px 10px;border-radius:8px}

.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(275px,1fr));gap:18px;max-width:1000px;margin:0 auto}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:30px;display:flex;flex-direction:column}
.plan.feature{background:var(--grad);border-color:transparent;color:#08150C}
.plan-name{display:flex;align-items:center;gap:9px;font-size:16.5px;font-weight:600;margin-bottom:6px}
.plan-name i{width:7px;height:7px;border-radius:50%;background:var(--green-strong)}
.plan.feature .plan-name i{background:#0A2216}
.plan-note{font-size:13.5px;color:var(--muted);margin-bottom:22px}
.plan.feature .plan-note{color:rgba(8,21,12,.68)}
.price{display:flex;align-items:flex-end;gap:6px;margin-bottom:24px;flex-wrap:wrap}
.price b{font-size:2.7rem;font-weight:700;letter-spacing:-.04em;line-height:1}
.price .from{font-size:13.5px;color:var(--muted);align-self:center;margin-right:2px}
.plan.feature .price .from{color:rgba(8,21,12,.6)}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:26px;flex:1}
.plan li{font-size:14.8px;color:var(--muted);padding-left:17px;position:relative}
.plan li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:#3D3D3D}
.plan.feature li{color:rgba(8,21,12,.82)}
.plan.feature li::before{background:rgba(8,21,12,.45)}
.plan .btn{justify-content:center;width:100%}
.plan.feature .btn{background:#0A0A0A;color:#fff}
.price-foot{text-align:center;margin-top:26px;font-size:13.5px;color:var(--muted-2);line-height:1.9}

/* ================= CONTRATAÇÃO ================= */
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.mode{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px;transition:border-color .25s,transform .25s}
.mode:hover{border-color:#333;transform:translateY(-3px)}
.mode h3{font-size:17px;font-weight:600;margin-bottom:10px}
.mode p{color:var(--muted);font-size:15px}
.mode ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line-soft)}
.mode li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--muted)}
.mode li svg{width:15px;height:15px;flex-shrink:0;margin-top:3px;stroke:var(--green-strong);fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.modes-foot{text-align:center;margin-top:30px;font-size:14px;color:var(--muted-2)}
.modes-foot a{color:var(--green);border-bottom:1px solid transparent;transition:border-color .2s}
.modes-foot a:hover{border-color:var(--green)}

/* ================= FICHA ================= */
.facts{
  max-width:520px;margin:0 auto 36px;text-align:left;
  background:var(--surface);border:1px solid var(--line);
  border-radius:20px;padding:6px 26px 26px;
}
.fact{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
  padding:15px 0;border-bottom:1px solid var(--line-soft);
}
.fact:last-of-type{border-bottom:none;margin-bottom:8px}
.fact dt{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-2)}
.fact dd{font-size:15px;font-weight:500;text-align:right;margin-left:auto}
.fact .live{display:inline-flex;align-items:center;gap:8px;color:var(--green)}
.facts .btn{justify-content:center;width:100%}
@media(max-width:440px){
  .facts{padding:6px 20px 20px}
  .fact{flex-direction:column;align-items:flex-start;gap:4px}
  .fact dd{text-align:left;margin-left:0}
}

/* ================= CONTATO ================= */
.contact{text-align:center;padding-bottom:80px}
.contact h2{font-size:clamp(2rem,4.6vw,3rem);font-weight:700;letter-spacing:-.03em}
.contact p{color:var(--muted);max-width:48ch;margin:16px auto 36px}
.contact .hero-cta{justify-content:center;margin-top:0}
footer{border-top:1px solid var(--line-soft);padding:26px 0;font-size:13.5px;color:var(--muted-2)}
.foot-in{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
.foot-in a:hover{color:var(--text)}
.foot-links{display:flex;flex-wrap:wrap;gap:20px}

/* ================= REVEAL ================= */
.rv{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease}
.rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .modal{animation:none}
  .srv-card:hover,.mode:hover,.work:hover,.proj-card:hover{transform:none}
  .proj-card:hover img{transform:none}
  .proj-ver{opacity:1;transform:none;transition:none}
}