*{box-sizing:border-box} html,body{margin:0;padding:0}
:root{
  /* Meio-tom mais escuro: cinza + branco */
  --bg-0:#e2e6ea;      /* + escuro que a última */
  --bg-1:#eef1f4;
  --panel:#ffffff;
  --panel-2:#f6f8fa;
  --ink:#0c1420;
  --muted:#425061;
  --line:#cdd6df;
  --line-strong:#bac6d3;
  --primary:#2554db;
  --primary-2:#4c73ff;
  --teal:#0ea5a4;
  --violet:#7c3aed;
  --success:#10b981;
  --danger:#ef4444;
  --radius:16px; --r-sm:12px; --r-xs:10px;
  --container:1220px;
  --gap:28px; --g-sm:16px;
  --shadow:0 10px 28px rgba(12,20,32,.12);
  --shadow-strong:0 18px 56px rgba(12,20,32,.2);
  --focus:0 0 0 3px rgba(37,84,219,.28);
}
body{
  background:
    radial-gradient(1000px 560px at 12% -8%, rgba(76,115,255,.10), transparent 60%),
    radial-gradient(900px 500px at 92% -6%, rgba(14,165,164,.08), transparent 60%),
    linear-gradient(180deg,var(--bg-0),var(--bg-1));
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans";
  color:var(--ink); line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.container{max-width:var(--container);margin:0 auto;padding:0 22px}
a{color:inherit;text-decoration:none}

/* ================= HEADER ================= */
.header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(115%) blur(10px);
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(248,250,252,.78));
  border-bottom:1px solid var(--line);
}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:80px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.2px;color:#0b1220}
.brand__mark{
  width:18px;height:18px;border-radius:7px;
  background:conic-gradient(from 140deg, var(--primary), var(--violet), var(--teal));
  box-shadow:0 0 0 3px rgba(255,255,255,.95), inset 0 0 0 1px rgba(12,20,32,.06)
}
.nav{display:flex;align-items:center;gap:8px}
.nav__links{display:flex;gap:6px;align-items:center}
.nav__link{
  position:relative;padding:10px 12px;border-radius:12px;color:#0b1220;opacity:.96
}
.nav__link:hover{background:rgba(12,20,32,.07)}
.nav__link--active::after{
  content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--primary),var(--teal));
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;justify-content:center;
  height:46px;padding:0 18px;border-radius:999px;border:1px solid var(--line);
  background:linear-gradient(180deg,#ffffff,#f6f8fb); color:#0b1220;font-weight:600;
  box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s, border-color .15s;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-strong)}
.btn:focus-visible{outline:var(--focus)}
.btn--primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:white;border-color:transparent; box-shadow:0 12px 28px rgba(37,84,219,.26)
}
.btn--ghost{background:transparent}
.btn--sm{height:40px;padding:0 14px}
.btn--lg{height:52px;padding:0 22px}
.btn + .btn{margin-left:12px}

.header__cta{margin-left:8px}
.header__burger{display:none;border:1px solid var(--line);background:#fff;border-radius:12px;padding:8px}
@media (max-width:980px){
  .nav__links{display:none}
  .header__burger{display:inline-flex}
  .nav--open .nav__links{
    position:absolute;top:80px;right:22px;left:22px;
    display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--line);
    background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,249,252,.96));border-radius:16px;
    box-shadow:var(--shadow-strong)
  }
}

/* ================= HERO ================= */
.hero{padding:90px 0 72px}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--gap);align-items:center}
.hero__title{margin:0 0 10px;font-size:clamp(32px,4.6vw,48px);line-height:1.08;color:#0b1220}
.hero__subtitle{margin:0 0 20px;color:var(--muted);max-width:62ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 22px}
.hero__bullets{display:grid;gap:8px;padding-left:18px;color:#2f4055}
.hero__bullets li{list-style:square}
.hero__card{
  padding:14px;border-radius:var(--radius);border:1px solid var(--line);
  background:linear-gradient(180deg,#ffffff,#f6f8fb);
  box-shadow:var(--shadow)
}
.hero__avatar{display:block;width:100%;height:auto;border-radius:calc(var(--radius) - 6px);border:1px solid var(--line)}
.hero__badge{margin-top:10px;font-size:12.5px;color:#3a4a60}
@media (max-width:980px){.hero__grid{grid-template-columns:1fr}}

/* ================= BASE ================= */
.section{padding:96px 0}
.section--alt{background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(247,249,252,.65))}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.section__title{margin:0 0 8px;font-size:26px;color:#0b1220}
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--gap)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media (max-width:980px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* ================= SOBRE ================= */
.lead{color:#27394f}
.facts{margin-top:18px;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--g-sm)}
.fact{
  border:1px solid var(--line);border-radius:var(--r-sm);
  padding:14px;background:linear-gradient(180deg,#ffffff,#f6f8fb);
  box-shadow:0 1px 2px rgba(12,20,32,.05) inset;
}
.fact span{display:block;font-size:12.5px;color:#5a6a80}
.fact strong{font-size:15px;color:#0b1220}

/* Disclosure (Formação) */
.disclosure{
  display:inline-flex;align-items:center;gap:8px;margin-top:10px;
  padding:10px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;cursor:pointer;
  box-shadow:0 2px 4px rgba(12,20,32,.06)
}
.disclosure:hover{border-color:var(--line-strong)}
.disclosure__icon{transition:transform .18s}
.disclosure[aria-expanded="true"] .disclosure__icon{transform:rotate(90deg)}
.disclosure__panel{
  margin-top:10px;border:1px dashed var(--line-strong);border-radius:12px;background:var(--panel-2);
  padding:12px 14px;display:none
}
.disclosure__panel[data-open="true"]{display:block}

/* ================= TIMELINE (experiências) ================= */
.timeline{display:grid;gap:18px;margin-top:10px}
.step{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:flex-start}
.step__dot{
  position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  background:conic-gradient(from 140deg, var(--primary), var(--teal)); color:#fff;font-weight:700;
  box-shadow:0 4px 10px rgba(37,84,219,.25)
}
.step__line{position:absolute;left:50%;top:44px;bottom:-18px;width:2px;transform:translateX(-50%);background:linear-gradient(180deg, var(--line), transparent)}
.step:last-child .step__line{display:none}
.step__card{
  border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--panel);
  box-shadow:var(--shadow);display:grid;gap:6px
}
.step__meta{font-size:12.5px;color:#5b6b81}
.step__title{margin:0;color:#0b1220}
.step__desc{margin:0;color:#3a4a60}

/* ================= SKILLS ================= */
.skills-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--gap);align-items:start}
@media (max-width:980px){.skills-grid{grid-template-columns:1fr}}
.cluster{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:16px;box-shadow:var(--shadow)}
.cluster__title{margin:0 0 10px;font-weight:700;color:#0b1220}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  padding:8px 12px;border-radius:999px;font-size:13px;color:#0b1220;border:1px solid var(--line);
  background:linear-gradient(180deg,#ffffff,#f6f8fb)
}
.chip--solid{color:#fff;border:0;background:linear-gradient(135deg,var(--primary),var(--primary-2))}

/* NOVO: Competências-chave (dot-rating + evidências) */
.pillars{display:grid;gap:12px}
.pillar{
  border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff;display:grid;gap:6px
}
.pillar__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pillar__name{font-weight:600}
.dots{display:inline-flex;gap:6px}
.dot{width:10px;height:10px;border-radius:50%;background:#dfe6ee;border:1px solid #cbd6e3}
.dot.is-on{background:linear-gradient(135deg,var(--primary),var(--primary-2));border-color:transparent;box-shadow:0 0 0 2px rgba(76,115,255,.18)}
.pillar__desc{margin:0;color:#3a4a60;font-size:14px}

/* ================= FILTER BAR ================= */
.filterbar{display:flex;flex-wrap:wrap;gap:10px}
.filterbar button{
  border:1px solid var(--line);border-radius:999px;padding:8px 12px;cursor:pointer;
  background:linear-gradient(180deg,#ffffff,#f6f8fb); color:#0b1220;font-weight:600
}
.filterbar button[aria-pressed="true"]{
  background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#fff; border-color:transparent
}

/* ================= VITRINE ================= */
.card{
  display:flex;flex-direction:column;border-radius:18px;overflow:hidden;
  background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow);
  transform-style:preserve-3d;
}
.card__media{position:relative;aspect-ratio:16/10;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.card:hover .card__media img{transform:scale(1.035)}
.card__overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%, rgba(0,0,0,.22))}
.card__badges{position:absolute;top:12px;left:12px;display:flex;gap:8px}
.badge{
  padding:6px 10px;border-radius:999px;font-size:12px;background:rgba(255,255,255,.9);
  color:#0b1220;border:1px solid var(--line);backdrop-filter:blur(6px)
}
.card__body{padding:16px}
.card__title{margin:0 0 6px;font-size:18px;color:#0b1220}
.card__desc{margin:0 0 16px;color:#3a4a60}
.card__actions{display:flex;flex-wrap:wrap;gap:12px}

/* ================= CASES (nível insano) ================= */
.case{
  display:grid;grid-template-columns:1.25fr .75fr;gap:var(--gap);
  border:1px solid var(--line);border-radius:22px;background:var(--panel);padding:20px;box-shadow:var(--shadow)
}
.case__media{position:relative;border-radius:16px;border:1px solid var(--line);overflow:hidden}
.case__media .thumbs{position:absolute;left:10px;bottom:10px;display:flex;gap:8px;z-index:2}
.thumb{width:56px;height:36px;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.7)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.case__body{display:flex;flex-direction:column;gap:12px}
.case__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.case__title{margin:0;font-size:20px;color:#0b1220}
.case__meta{display:flex;gap:10px;flex-wrap:wrap;color:#5a6a80;font-size:13px}
.kpi-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kpi{border:1px dashed var(--line-strong);border-radius:12px;padding:12px;background:var(--panel-2);text-align:center}
.kpi strong{display:block;font-size:18px;color:#0b1220}
.kpi span{font-size:12px;color:#607289}
.case__stack{display:flex;gap:8px;flex-wrap:wrap}
.case__stack .badge{background:#eef3fa}
.case__grid{display:grid;grid-template-columns:1fr;gap:10px}
.ca-block{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff}
.ca-block h4{margin:0 0 6px;font-size:14px;color:#0b1220}
.ca-block p{margin:0;color:#34485f;font-size:14px}
.case__links{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto}
@media (max-width:980px){
  .case{grid-template-columns:1fr}
  .kpi-list{grid-template-columns:repeat(2,1fr)}
}

/* ================= CONTATO (cartões com brilho sutil) ================= */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--gap)}
.contact__cards{display:grid;gap:12px;margin-top:10px}
.c-card{
  display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;
  border:1px solid var(--line);background:linear-gradient(180deg,#ffffff,#f6f8fb);
  box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s, border-color .15s;
}
.c-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-strong);border-color:var(--line-strong)}
.c-card__icon{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--primary-2)); box-shadow:0 8px 18px rgba(37,84,219,.25)
}
.c-card__text{display:flex;flex-direction:column}
.c-card__text strong{color:#0b1220}
.c-card__text span{color:#54687e;font-size:13px}

.form{
  border:1px solid var(--line);border-radius:20px;padding:18px;background:var(--panel);box-shadow:var(--shadow)
}
.form__group{display:grid;gap:8px;margin-bottom:12px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:760px){.form__row{grid-template-columns:1fr}}
.form label span{font-size:13px;color:#5a6a80}
input,textarea{
  width:100%;color:#0b1220;background:#fff;border:1px solid #cdd6e3;border-radius:12px;padding:12px 12px;
  box-shadow:0 1px 2px rgba(12,20,32,.05) inset
}
input:focus-visible,textarea:focus-visible{outline:var(--focus);border-color:#a8baf2}

/* ================= FOOTER ================= */
.footer{border-top:1px solid var(--line);background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(247,249,252,.9))}
.footer__inner{height:80px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.footer__nav{display:flex;gap:14px}
.footer__nav a{color:#4e6075}
.footer__nav a:hover{color:#0b1220}
.kbd{font-family:"JetBrains Mono",monospace;font-size:12px;padding:2px 6px;border-radius:6px;background:#f1f5fb;border:1px solid var(--line);color:#0b1220}
.hidden{display:none !important}


.section--white {
  background: #ffffff !important;
}

.case__media img {
    width: 100%;
    height: 350px;      /* altura fixa, ideal p/ screenshots widescreen */
    object-fit: cover;
    object-position: top center; /* foca no topo (onde está o menu/dashboard) */
    border-radius: 12px;
}

.thumb img {
    width: 100%;
    height: 50px;       /* thumbs menores */
    object-fit: cover;
    object-position: top center;
    border-radius: 8px;
}