:root{
  --font: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Brand (teal da sua logo) */
  --brand: #2ad6b8;
  --brand2:#58f0dd;

  /* Light */
  --bg: #f6f7fb;
  --surface: rgba(255,255,255,.72);
  --text: #0b1220;
  --muted: rgba(11,18,32,.70);
  --line: rgba(11,18,32,.10);
  --shadow: 0 20px 60px rgba(0,0,0,.10);

  --radius: 22px;
  --maxw: 1120px;
}

[data-theme="dark"]{
  --bg: #070a10;
  --surface: rgba(255,255,255,.06);
  --text: #eef3ff;
  --muted: rgba(238,243,255,.70);
  --line: rgba(238,243,255,.12);
  --shadow: 0 24px 80px rgba(0,0,0,.35);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  overflow-x:hidden;
}

.container{
  width:min(var(--maxw), calc(100% - 48px));
  margin-inline:auto;
}

.ambient{
  position:fixed;
  inset:-20vh -20vw;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(900px 500px at 20% 20%, rgba(42,214,184,.20), transparent 60%),
    radial-gradient(800px 520px at 80% 10%, rgba(88,240,221,.18), transparent 62%),
    radial-gradient(700px 520px at 60% 80%, rgba(42,214,184,.10), transparent 60%);
  filter: blur(10px);
}

/* Header base */
.site-header{
  position: sticky;
  top: 0;
  z-index: 9999;
  backdrop-filter: blur(14px);
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  border-bottom: 1px solid var(--line);
}

.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 12px 0;
}

/* Brand */
.site-brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color: inherit;
}
.site-brand__logo{
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.site-brand__text{
  display:flex;
  flex-direction:column;
  line-height: 1.05;
}
.site-brand__text strong{ font-weight: 900; }
.site-brand__text small{ opacity:.75; font-weight: 850; }

/* Desktop nav */
.site-nav__links{
  display:flex;
  align-items:center;
  gap: 18px;
  list-style:none;
  margin:0;
  padding:0;
}
.site-nav__links a{
  text-decoration:none;
  color: var(--text);
  font-weight: 850;
  opacity: .9;
  padding: 10px 10px;
  border-radius: 12px;
}
.site-nav__links a:hover{
  opacity: 1;
  background: color-mix(in oklab, var(--surface) 80%, transparent);
}

/* Actions */
.site-actions{
  display:flex;
  align-items:center;
  gap: 10px;
}
.btn--header{
  padding-left: 16px;
  padding-right: 16px;
}

/* Theme button (simples) */
.theme-btn{
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 86%, transparent);
  box-shadow: var(--shadow);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.theme-btn__dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--brand) 20%, transparent);
}

/* Burger: NÃO aparece no desktop */
.burger{
  width:44px; height:44px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 86%, transparent);
  box-shadow: var(--shadow);
  display:none;            /* ✅ some no desktop */
  place-items:center;
  cursor:pointer;
  position: relative;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.burger:focus{ outline: none; }
.burger:focus-visible{
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 22%, transparent), var(--shadow);
}

.burger span{
  display:block;
  width:18px; height:2px;
  background: var(--text);
  border-radius:10px;
  opacity:.9;
  transition: transform .22s ease, opacity .22s ease;
  position:absolute;
}

.burger span:nth-child(1){ transform: translateY(-6px); }
.burger span:nth-child(2){ transform: translateY(0); }
.burger span:nth-child(3){ transform: translateY(6px); }

/* Aberto -> X */
.burger.is-active span:nth-child(1){ transform: rotate(45deg); }
.burger.is-active span:nth-child(2){ opacity:0; }
.burger.is-active span:nth-child(3){ transform: rotate(-45deg); }

/* Mobile nav fechado */
.mobile-nav{
  display:none;
  border-top: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 92%, transparent);
}
.mobile-nav__inner{
  padding: 12px 0 18px;
}
.mobile-nav a{
  display:block;
  padding:12px 10px;
  color: var(--muted);
  text-decoration:none;
  font-weight:800;
  border-radius: 14px;
}
.mobile-nav a:hover{
  background: color-mix(in oklab, var(--surface) 86%, transparent);
  color: var(--text);
}
.mobile-nav__cta{ padding-top: 10px; }

/* MOBILE breakpoint */
@media (max-width: 920px){
  .site-nav{ display:none; }     /* some menu desktop */
  .burger{ display:grid; }      /* ✅ aparece só no mobile */
  .btn--header{ display:none; } /* opcional: esconde falar agora pra não apertar */
  .mobile-nav.is-open{ display:block; }
}

/* Corrige o index: overlays não bloqueiam clique no header */
.ambient,
.hero__media,
.hero__overlay{
  pointer-events: none !important;
}

.brand__logo{
  height:34px;
  width:auto;
  display:block;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.14));
}

.nav{
  display:flex;
  gap:18px;
  align-items:center;
}
.nav a{
  color: var(--muted);
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  letter-spacing:.2px;
  transition: .25s ease;
}
.nav a:hover{ color: var(--text); }
.nav__cta{
  padding:10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.header__actions{
  display:flex; align-items:center; gap:10px;
}
.theme{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  padding:10px 12px;
  border-radius:999px;
  cursor:pointer;
  box-shadow: var(--shadow);
}
.theme__label{ font-size:13px; font-weight:800; opacity:.9; }
.theme__icon{ font-size:14px; opacity:.9; }

.burger{
  width:44px; height:44px;
  border-radius:999px;
  border:1px solid var(--line);
  background: var(--surface);
  display:none;
  place-items:center;
  cursor:pointer;
  box-shadow: var(--shadow);
  position: relative;
}

.burger span{
  display:block;
  width:18px; height:2px;
  background: var(--text);
  border-radius:10px;
  opacity:.9;
  transition: transform .22s ease, opacity .22s ease;
  position:absolute;
}

.burger span:nth-child(1){ transform: translateY(-6px); }
.burger span:nth-child(2){ transform: translateY(0); }
.burger span:nth-child(3){ transform: translateY(6px); }

/* Quando aberto -> vira X */
.burger.is-active span:nth-child(1){ transform: rotate(45deg); }
.burger.is-active span:nth-child(2){ opacity:0; }
.burger.is-active span:nth-child(3){ transform: rotate(-45deg); }

.mobile{
  display:none;
  padding: 12px 18px 18px;   /* MAIS respiro nas laterais */
  border-top: 1px solid var(--line);
}

.mobile a{
  display:block;
  padding:12px 10px;         /* respiro interno */
  color: var(--muted);
  text-decoration:none;
  font-weight:800;
  border-radius: 14px;
}

.mobile a:hover{
  background: var(--surface);
  color: var(--text);
}

/* CTA "Falar agora" bonitão e largo */
.mobile a.nav__cta{
  display:block;
  margin-top:12px;
  padding:12px 14px;
  text-align:center;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--brand) 50%, var(--line));
  background: color-mix(in oklab, var(--surface) 80%, rgba(42,214,184,.10));
  color: var(--text);
}

/* Hero */
.hero{
  position:relative;
  min-height: calc(100vh - 68px);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.hero__media{
  position:absolute; inset:0;
  z-index:0;
  transform: translateY(0);
  will-change: transform;
}
.hero__media img,
.hero__media video{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.04);
  filter: saturate(1.05) contrast(1.05);
}
.hero__overlay{
  position:absolute; inset:0;
  z-index:1;
  background:
    radial-gradient(900px 480px at 50% 30%, rgba(0,0,0,.08), rgba(0,0,0,.55)),
    linear-gradient(to bottom, rgba(0,0,0,.40), rgba(0,0,0,.62));
  mix-blend-mode: multiply;
}
[data-theme="light"] .hero__overlay{
  background:
    radial-gradient(900px 520px at 50% 30%, rgba(255,255,255,.10), rgba(0,0,0,.35)),
    linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.48));
}

.hero__content{
  position:relative;
  z-index:2;
  padding: 68px 0 44px;
  text-align:center;
  color:#fff;
}
.hero__badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(12px);
  font-weight:800;
  font-size:13px;
  letter-spacing:.2px;
}
.dot{
  width:8px; height:8px;
  border-radius:50%;
  background: var(--brand);
  box-shadow: 0 0 24px rgba(42,214,184,.8);
}

.hero__title{
  margin: 18px 0 0;
  font-size: clamp(40px, 6vw, 74px);
  line-height: 1.02;
  letter-spacing: -1.2px;
  font-weight: 800;
  text-shadow: 0 14px 60px rgba(0,0,0,.45);
}
.shine{
  position:relative;
  display:inline-block;
}
.shine::after{
  content:"";
  position:absolute;
  inset:-12px -16px;
  background: radial-gradient(380px 120px at 40% 40%, rgba(42,214,184,.22), transparent 65%);
  filter: blur(8px);
  z-index:-1;
}
.hero__subtitle{
  margin: 14px auto 0;
  max-width: 720px;
  font-size: clamp(16px, 2vw, 20px);
  line-height:1.55;
  opacity:.92;
}
.hero__actions{
  margin-top: 22px;
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 900;
  letter-spacing:.2px;
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
  will-change: transform;
}
.btn:hover{ transform: translateY(-2px); }

.btn--primary{
  color:#071018;
  background: linear-gradient(135deg, var(--brand2), var(--brand));
  box-shadow: 0 18px 60px rgba(42,214,184,.25);
  border: 1px solid rgba(255,255,255,.10);
}
.btn--ghost{
  color:#fff;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(12px);
}
.btn--ghost-dark{
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.hero__scroll{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom: clamp(10px, 3vh, 26px);   /* fica sempre colado mais no rodapé */
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  font-size:12px;
  opacity:.9;
  letter-spacing:.3px;
  z-index: 3;
  pointer-events:none;
}

/* Empurra mais o conteúdo do hero pra cima, garantindo espaço pro "deslize" */
.hero__content{
  position:relative;
  z-index:2;
  padding: 68px 0 184px; /* aumentei o padding-bottom */
  text-align:center;
  color:#fff;
}
.arrow{
  width:28px; height:28px;
  display:grid;
  place-items:center;
  position:relative;
}
.arrow i{
  position:absolute;
  width:10px; height:10px;
  border-right:2px solid rgba(255,255,255,.9);
  border-bottom:2px solid rgba(255,255,255,.9);
  transform: rotate(45deg);
  animation: bounce 1.4s infinite;
}
.arrow i:nth-child(2){
  transform: translateY(8px) rotate(45deg);
  opacity:.55;
  animation-delay: .18s;
}
@keyframes bounce{
  0%, 100%{ transform: translateY(0) rotate(45deg); }
  50%{ transform: translateY(6px) rotate(45deg); }
}

/* Sections */
.section{ padding: 86px 0; }
.section--alt{
  background: color-mix(in oklab, var(--bg) 72%, rgba(42,214,184,.06));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section__head h2{
  margin:0;
  font-size: clamp(26px, 3.4vw, 40px);
  letter-spacing:-.6px;
}
.section__head p{
  margin: 10px 0 0;
  color: var(--muted);
  max-width: 760px;
  line-height:1.6;
  font-weight:700;
}
.section__foot{
  margin-top: 18px;
  display:flex;
  justify-content:flex-start;
}

/* Grids */
.grid{ display:grid; gap:16px; margin-top: 22px; }

.cards{ grid-template-columns: repeat(12, 1fr); }
.card{
  grid-column: span 6;
  padding: 18px 18px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
.card h3{ margin:0; font-size:18px; }
.card p{
  margin:10px 0 0;
  color: var(--muted);
  line-height:1.6;
  font-weight:700;
}
.card ul{
  margin: 14px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-weight:800;
}
.card li{ margin: 6px 0; }
.card::after{
  content:"";
  display:block;
  margin-top: 14px;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(42,214,184,.45), transparent);
  opacity:.75;
}

.showcase{ grid-template-columns: repeat(12, 1fr); }
.shot{
  grid-column: span 4;
  text-decoration:none;
  color: inherit;
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: transform .22s ease;
}
.shot:hover{ transform: translateY(-4px); }
.shot__thumb{
  height: 220px;
  background:
    radial-gradient(420px 260px at 30% 20%, rgba(42,214,184,.35), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(0,0,0,.20));
}
.shot__meta{
  padding: 14px 14px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.shot__meta span{
  color: var(--muted);
  font-weight:800;
  font-size:13px;
  white-space:nowrap;
}

/* CTA */
.cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding: 22px;
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 75%, rgba(42,214,184,.08));
  box-shadow: var(--shadow);
}
.cta p{ color: var(--muted); font-weight:800; line-height:1.6; margin:10px 0 0; }
.cta__actions{ display:flex; gap:10px; flex-wrap:wrap; }

.footer-wrap{
  padding: 18px 0 22px;
  border-top: 1px solid var(--line);
}

.footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.footer__left{
  display:flex;
  align-items:center;
  gap:12px;
}
.footer__left img{
  height:26px;
  width:auto;
  opacity:.95;
}
.footer small{
  color: var(--muted);
  font-weight:800;
}

.footer__center{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
}
.footer__center{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

/* LINKS BONITOS (pill clean, sem cara de link roxo) */
.footer__center a{
  color: var(--text);
  text-decoration:none;
  font-weight:900;
  font-size:13px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  opacity: .92;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}

.footer__center a:hover{
  background: var(--surface);
  border-color: color-mix(in oklab, var(--brand) 45%, var(--line));
  transform: translateY(-1px);
  opacity: 1;
}

/* Remove qualquer roxo/azul de link visitado */
.footer__center a:visited{
  color: var(--text);
}

/* Acessibilidade: foco no teclado */
.footer__center a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--brand) 18%, transparent);
  border-color: color-mix(in oklab, var(--brand) 55%, var(--line));
}

.footer__right{
  text-align:right;
}
.footer__right a{
  color: color-mix(in oklab, var(--brand) 70%, var(--text));
  text-decoration:none;
  font-weight:900;
}
.footer__right a:hover{
  text-decoration:underline;
  text-underline-offset: 4px;
}

/* Mobile: tudo em coluna, simples e alinhado à esquerda */
@media (max-width: 720px){
  .footer{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  .footer__center{
    justify-content:flex-start;
    gap:10px;
  }
  .footer__right{
    text-align:left;
  }
}


/* Reveal */
.reveal{
  opacity:0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: transform, opacity;
}
.reveal.is-visible{
  opacity:1;
  transform: translateY(0);
}

/* Loader global */
.page-loader{
  position:fixed; inset:0;
  background: color-mix(in oklab, var(--bg) 85%, rgba(0,0,0,.2));
  backdrop-filter: blur(14px);
  display:grid;
  place-items:center;
  gap:12px;
  opacity:0;
  pointer-events:none;
  transition: opacity .25s ease;
  z-index:9999;
}
.page-loader.is-on{
  opacity:1;
  pointer-events:auto;
}
.spinner{
  width:42px; height:42px;
  border-radius:50%;
  border:3px solid var(--line);
  border-top-color: var(--brand);
  animation: spin 1s linear infinite;
}
.loader-text{
  color: var(--muted);
  font-weight:900;
  letter-spacing:.3px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Responsive */
@media (max-width: 920px){
  .nav{ display:none; }
  .burger{ display:grid; }
  .cards .card{ grid-column: span 12; }
  .showcase .shot{ grid-column: span 12; }
  .cta{ flex-direction:column; align-items:flex-start; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ transition:none; }
  .arrow i{ animation:none; }
  .btn{ transition:none; }
}

.mobile.is-open{ display:block; }

/* Services tiles (premium) */
.services-tiles{
  grid-template-columns: repeat(12, 1fr);
}

.tile{
  grid-column: span 6;
  padding: 18px 18px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 82%, transparent);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
  transform: translateY(0);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

/* glow sutil */
.tile::before{
  content:"";
  position:absolute;
  inset:-120px;
  background: radial-gradient(420px 220px at 30% 20%, rgba(42,214,184,.18), transparent 60%);
  opacity:0;
  transition: opacity .22s ease;
  pointer-events:none;
}

.tile:hover{
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--brand) 45%, var(--line));
  box-shadow: 0 26px 90px rgba(42,214,184,.10);
}
.tile:hover::before{ opacity:1; }

.tile__icon{
  width:44px;
  height:44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  font-size:18px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 80%, rgba(42,214,184,.10));
  box-shadow: 0 16px 50px rgba(0,0,0,.10);
}

.tile h3{
  margin: 14px 0 0;
  font-size: 18px;
  letter-spacing: -.2px;
}

.tile p{
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.6;
  font-weight: 700;
}

.tile__meta{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: color-mix(in oklab, var(--muted) 80%, var(--brand));
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .35px;
  text-transform: uppercase;
}

/* Mobile */
@media (max-width: 920px){
  .tile{ grid-column: span 12; }
}

/* Portfolio groups */
.portfolio-groups{ margin-top: 18px; display:grid; gap: 22px; }

.pgroup{
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 78%, transparent);
  border-radius: calc(var(--radius) + 4px);
  padding: 16px;
  box-shadow: var(--shadow);
}

.pgroup__head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  padding: 4px 4px 12px;
  border-bottom: 1px solid var(--line);
}
.pgroup__head h3{
  margin:0;
  font-size: 16px;
  letter-spacing: -.2px;
}
.pgroup__head span{
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .35px;
  text-transform: uppercase;
}

.portfolio-tiles{ grid-template-columns: repeat(12, 1fr); margin-top: 14px; }

.ptile{
  grid-column: span 4;
  text-decoration:none;
  color: inherit;
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 82%, transparent);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  position:relative;
}
.ptile::before{
  content:"";
  position:absolute; inset:-120px;
  background: radial-gradient(420px 240px at 30% 20%, rgba(42,214,184,.16), transparent 60%);
  opacity:0;
  transition: opacity .22s ease;
  pointer-events:none;
}
.ptile:hover{
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--brand) 45%, var(--line));
  box-shadow: 0 26px 90px rgba(42,214,184,.10);
}
.ptile:hover::before{ opacity:1; }

.ptile__body{
  padding: 14px 14px 16px;
}
.ptile__body strong{
  display:block;
  font-size: 14px;
  letter-spacing: -.2px;
}
.ptile__body small{
  display:block;
  margin-top: 6px;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.5;
}

.ptile__tags{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.ptile__tags span{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .35px;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 80%, transparent);
  color: color-mix(in oklab, var(--muted) 75%, var(--brand));
}

/* Responsivo */
@media (max-width: 920px){
  .ptile{ grid-column: span 12; }
  .pgroup__head{ flex-direction:column; align-items:flex-start; }
}

/* Tight sections */
.section--tight{ padding: 56px 0; }

/* Trust bar */
.trust{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 14px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.trust__label{
  font-weight: 900;
  color: var(--muted);
  letter-spacing:.2px;
  font-size: 13px;
  white-space: nowrap;
}
.trust__row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}
.trust__chip{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 85%, transparent);
  font-weight: 900;
  font-size: 12px;
  color: color-mix(in oklab, var(--muted) 78%, var(--brand));
}

/* Metrics */
.metrics{ grid-template-columns: repeat(12, 1fr); margin-top: 14px; }
.metric{
  grid-column: span 4;
  padding: 16px 16px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 82%, transparent);
  box-shadow: var(--shadow);
}
.metric__big{
  font-weight: 900;
  letter-spacing: -.2px;
  font-size: 16px;
}
.metric__small{
  margin-top: 8px;
  color: var(--muted);
  font-weight: 750;
  line-height:1.5;
}

/* Value */
.value{
  margin-top: 14px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 80%, rgba(42,214,184,.06));
  box-shadow: var(--shadow);
}
.value__title{
  margin:0;
  font-size: clamp(18px, 2.2vw, 26px);
  letter-spacing:-.4px;
}
.value__desc{
  margin:10px 0 0;
  color: var(--muted);
  font-weight: 750;
  line-height:1.6;
  max-width: 720px;
}
.value__bullets{
  display:grid;
  gap:10px;
  min-width: 220px;
}
.vb{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 900;
  color: var(--text);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 10px 12px;
  border-radius: 14px;
}
.vb__dot{
  width:8px; height:8px;
  border-radius:50%;
  background: var(--brand);
  box-shadow: 0 0 20px rgba(42,214,184,.55);
}

/* CTA duo */
.hero-cta{
  margin-top: 14px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* Steps */
.steps{ grid-template-columns: repeat(12, 1fr); margin-top: 18px; }
.step{
  grid-column: span 3;
  padding: 16px 16px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.step__n{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 80%, rgba(42,214,184,.10));
  font-weight: 900;
  color: color-mix(in oklab, var(--muted) 75%, var(--brand));
}
.step h3{ margin: 12px 0 0; font-size: 16px; }
.step p{ margin: 8px 0 0; color: var(--muted); font-weight: 750; line-height:1.55; }

/* Entry offers */
.entry{
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.entry__head h2{ margin:0; font-size: 22px; letter-spacing:-.3px; }
.entry__head p{
  margin:10px 0 0;
  color: var(--muted);
  font-weight: 750;
  line-height:1.6;
}
.entry__grid{ grid-template-columns: repeat(12, 1fr); margin-top: 16px; }
.entry__card{
  grid-column: span 4;
  padding: 16px 16px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 85%, transparent);
}
.entry__card h3{ margin:0; font-size: 16px; }
.entry__card p{ margin: 8px 0 0; color: var(--muted); font-weight: 750; line-height:1.55; }
.entry__meta{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: color-mix(in oklab, var(--muted) 75%, var(--brand));
  font-weight: 900;
  font-size: 12px;
  letter-spacing:.35px;
  text-transform: uppercase;
}

/* Responsive */
@media (max-width: 920px){
  .trust{ flex-direction:column; align-items:flex-start; }
  .trust__label{ white-space: normal; }
  .trust__row{ justify-content:flex-start; }

  .metric{ grid-column: span 12; }
  .value{ flex-direction:column; }
  .value__bullets{ min-width: unset; }
  .step{ grid-column: span 12; }
  .entry__card{ grid-column: span 12; }
}

/* Services page hero */
.shero{
  padding: 20px 0 10px;
}
.shero__kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
  font-weight: 900;
  color: var(--muted);
  letter-spacing:.2px;
  font-size: 13px;
}
.shero__title{
  margin: 16px 0 0;
  font-size: clamp(30px, 4.2vw, 48px);
  letter-spacing: -.7px;
}
.shero__desc{
  margin: 10px 0 0;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.6;
  max-width: 860px;
}
.shero__actions{
  margin-top: 16px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* Filter chips */
.filters{
  margin-top: 18px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.chip{
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  cursor:pointer;
  transition: .2s ease;
}
.chip:hover{
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--brand) 45%, var(--line));
}
.chip.is-active{
  background: color-mix(in oklab, var(--surface) 80%, rgba(42,214,184,.10));
  border-color: color-mix(in oklab, var(--brand) 60%, var(--line));
  box-shadow: 0 18px 60px rgba(42,214,184,.10);
}

/* Tile as link */
.tile--link{
  text-decoration:none;
  color: inherit;
  display:block;
}
.tile__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.tile__pill{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .35px;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 82%, transparent);
  color: color-mix(in oklab, var(--muted) 75%, var(--brand));
}

/* Services section spacing */
.services{
  margin-top: 16px;
}

/* Service page hero */
.svc-hero{
  padding: 46px 0 10px;
}
.svc-hero__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}
.svc-hero__left{ flex: 1; min-width: 280px; }
.svc-hero__right{ width: min(420px, 40%); }

.svc-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
  font-weight: 900;
  color: var(--muted);
  letter-spacing:.2px;
  font-size: 13px;
}

.svc-title{
  margin: 16px 0 0;
  font-size: clamp(30px, 4.2vw, 54px);
  letter-spacing: -1px;
  line-height: 1.05;
}
.svc-sub{
  margin: 12px 0 0;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.65;
  max-width: 860px;
}
.svc-actions{
  margin-top: 16px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.svc-mini{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
  letter-spacing:.35px;
  text-transform: uppercase;
}

/* Right glass mock */
.svc-glass{
  border-radius: 26px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 75%, rgba(42,214,184,.06));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.svc-glass__top{
  display:flex;
  gap:8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.svc-dot{
  width:10px;height:10px;border-radius:50%;
  background: color-mix(in oklab, var(--muted) 65%, var(--brand));
  opacity:.75;
}
.svc-glass__body{ padding: 14px; }
.svc-line{
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 85%, transparent);
  margin: 10px 0;
}
.w40{ width:40%; } .w55{ width:55%; } .w60{ width:60%; } .w70{ width:70%; } .w85{ width:85%; }

.svc-cardrow{ display:flex; gap:12px; margin: 12px 0; }
.svc-miniCard{
  flex:1;
  height: 92px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background:
    radial-gradient(320px 180px at 25% 20%, rgba(42,214,184,.22), transparent 60%),
    color-mix(in oklab, var(--surface) 88%, transparent);
}

/* Includes grid */
.svc-includes{ grid-template-columns: repeat(12, 1fr); margin-top: 18px; }
.svc-card{
  grid-column: span 6;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.svc-card h3{ margin:0; font-size: 16px; letter-spacing:-.2px; }
.svc-card p{ margin: 10px 0 0; color: var(--muted); font-weight: 750; line-height: 1.6; }

.svc-tags{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.svc-tags span{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .35px;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 86%, transparent);
  color: color-mix(in oklab, var(--muted) 75%, var(--brand));
}

/* FAQ */
.faq{
  display:grid;
  gap: 10px;
  margin-top: 16px;
}
.faq__item{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 0;
  overflow:hidden;
}
.faq__item summary{
  cursor:pointer;
  padding: 14px 16px;
  font-weight: 900;
  color: var(--text);
  list-style:none;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__body{
  padding: 0 16px 14px;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.6;
  border-top: 1px solid var(--line);
}

/* Responsive */
@media (max-width: 920px){
  .svc-hero__inner{ flex-direction:column; align-items:flex-start; }
  .svc-hero__right{ width: 100%; }
  .svc-card{ grid-column: span 12; }
}

/* Portfolio tiles */
.portfolio-tiles{
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.ptile{
  grid-column: span 6;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, border-color .18s ease;
}
.ptile:hover{
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--brand) 55%, var(--line));
}
.ptile__thumb{
  width:100%;
  aspect-ratio: 16 / 9;
  border-radius: 26px;
  overflow:hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(255,255,255,.10);
  background-color: rgba(255,255,255,.03);
}
.ptile__body{
  padding: 14px 14px 16px;
}
.ptile__body strong{
  display:block;
  font-size: 15px;
  letter-spacing: -.2px;
}
.ptile__body small{
  display:block;
  margin-top: 6px;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.55;
}
.ptile__tags{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.ptile__tags span{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .35px;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 86%, transparent);
  color: color-mix(in oklab, var(--muted) 75%, var(--brand));
}
.ptile.is-soon{
  cursor: default;
}
.ptile.is-soon:hover{
  transform: none;
  border-color: var(--line);
}
.ptile__soon{
  margin-top: 10px;
  font-weight: 900;
  font-size: 12px;
  color: color-mix(in oklab, var(--muted) 70%, var(--brand));
}

/* Optional: thumbs variantes (só pra dar identidade sem imagem real) */
.ptile__thumb--obj{ background:
  background-image: url("/../assets/img/objetivo.png");
}
.ptile__thumb--titan{ background:
  radial-gradient(520px 260px at 20% 10%, rgba(124,92,255,.22), transparent 60%),
  radial-gradient(420px 240px at 85% 20%, rgba(42,214,184,.22), transparent 60%),
  color-mix(in oklab, var(--surface) 88%, transparent);
}
.ptile__thumb--unlock{ background:
  radial-gradient(520px 260px at 20% 10%, rgba(42,214,184,.25), transparent 60%),
  radial-gradient(420px 240px at 85% 20%, rgba(255,255,255,.08), transparent 60%),
  color-mix(in oklab, var(--surface) 88%, transparent);
}
.ptile__thumb--black{ background:
  radial-gradient(520px 260px at 20% 10%, rgba(255,190,0,.18), transparent 60%),
  radial-gradient(420px 240px at 85% 20%, rgba(42,214,184,.20), transparent 60%),
  color-mix(in oklab, var(--surface) 88%, transparent);
}
.ptile__thumb--teresina{ background:
  radial-gradient(520px 260px at 20% 10%, rgba(0,63,156,.22), transparent 60%),
  radial-gradient(420px 240px at 85% 20%, rgba(42,214,184,.20), transparent 60%),
  color-mix(in oklab, var(--surface) 88%, transparent);
}
.ptile__thumb--family{ background:
  radial-gradient(520px 260px at 20% 10%, rgba(42,214,184,.22), transparent 60%),
  radial-gradient(420px 240px at 85% 20%, rgba(255,120,120,.16), transparent 60%),
  color-mix(in oklab, var(--surface) 88%, transparent);
}
.ptile__thumb--bolsas{ background:
  radial-gradient(520px 260px at 20% 10%, rgba(124,92,255,.22), transparent 60%),
  radial-gradient(420px 240px at 85% 20%, rgba(255,190,0,.14), transparent 60%),
  color-mix(in oklab, var(--surface) 88%, transparent);
}
.ptile__thumb--design{ background:
  radial-gradient(520px 260px at 20% 10%, rgba(255,190,0,.16), transparent 60%),
  radial-gradient(420px 240px at 85% 20%, rgba(124,92,255,.18), transparent 60%),
  color-mix(in oklab, var(--surface) 88%, transparent);
}
.ptile__thumb--gmb1,
.ptile__thumb--gmb2,
.ptile__thumb--gmb3{ background:
  radial-gradient(520px 260px at 20% 10%, rgba(42,214,184,.20), transparent 60%),
  radial-gradient(420px 240px at 85% 20%, rgba(0,0,0,.10), transparent 60%),
  color-mix(in oklab, var(--surface) 88%, transparent);
}

/* Responsive */
@media (max-width: 920px){
  .ptile{ grid-column: span 12; }
  .ptile__thumb{ height: 170px; }
}

/* Contact page */
.contact-cards{
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.cardlink{
  grid-column: span 6;
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
  text-decoration:none;
  color: inherit;
  transition: transform .18s ease, border-color .18s ease;
}
.cardlink:hover{
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--brand) 55%, var(--line));
}
.cardlink__icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 82%, rgba(42,214,184,.10));
  font-size: 18px;
}
.cardlink__text strong{ display:block; font-size: 15px; letter-spacing:-.2px; }
.cardlink__text small{
  display:block;
  margin-top: 6px;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.55;
}
.cardlink__cta{
  margin-left:auto;
  font-weight: 900;
  color: color-mix(in oklab, var(--muted) 65%, var(--brand));
}

/* Form */
.contact-form{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 16px;
}
.form-grid{
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.field{
  grid-column: span 6;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.field--full{ grid-column: span 12; }
.field span{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .35px;
  text-transform: uppercase;
  color: var(--muted);
}
.field input,
.field select,
.field textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 90%, transparent);
  color: var(--text);
  outline: none;
  font: inherit;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: color-mix(in oklab, var(--brand) 60%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 22%, transparent);
}
.form-actions{
  margin-top: 14px;
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
}
.form-note{
  margin-top: 10px;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 920px){
  .cardlink{ grid-column: span 12; }
  .field{ grid-column: span 12; }
}

/* HEADER layout base */
.header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  border-bottom: 1px solid var(--line);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 12px 0;
}

.header__actions{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color: inherit;
}
.brand__mark{ width: 44px; height: 44px; object-fit: contain; }
.brand__text{ font-weight: 900; line-height: 1.05; }
.brand__text small{ font-weight: 800; opacity: .72; }

/* Nav desktop */
.nav__links{
  display:flex;
  align-items:center;
  gap: 18px;
  list-style:none;
  margin:0;
  padding:0;
}
.nav__links a{
  text-decoration:none;
  color: var(--text);
  font-weight: 850;
  opacity: .88;
  padding: 10px 10px;
  border-radius: 12px;
  transition: background .18s ease, opacity .18s ease, transform .18s ease;
}
.nav__links a:hover{
  opacity: 1;
  background: color-mix(in oklab, var(--surface) 80%, transparent);
}