:root{
  --bg:#0b0b0f;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.12);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.66);
  --muted2:rgba(255,255,255,.52);
  --shadow:0 18px 60px rgba(0,0,0,.45);

  --gold:#d6b15a;
  --gold2:#f0d28a;

  --radius:18px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:var(--bg);
  color:var(--text);
}

.glow{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(900px 600px at 20% 10%, rgba(214,177,90,.14), transparent 60%),
    radial-gradient(900px 600px at 80% 30%, rgba(240,210,138,.10), transparent 55%),
    radial-gradient(900px 600px at 60% 100%, rgba(255,255,255,.06), transparent 55%);
}

/* NAV */
.nav{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(11,11,15,.85), rgba(11,11,15,.55));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-inner{
  max-width:1100px;
  margin:0 auto;
  padding:10px 16px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
}
.brand{
  display:flex; gap:10px; align-items:center;
  text-decoration:none; color:var(--text);
}
.brand-avatar{
  width:38px; height:38px; border-radius:12px; object-fit:cover;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
}
.brand-text strong{ display:block; font-size:14px; }
.brand-text span{ display:block; font-size:12px; color:var(--muted2); margin-top:2px; }

.nav-links{
  display:flex; gap:18px; align-items:center;
}
.nav-links a{
  text-decoration:none;
  color:rgba(255,255,255,.78);
  font-size:13px;
  transition: color .12s ease;
}
.nav-links a:hover{ color:rgba(255,255,255,.92); }

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

/* HERO */
.hero{
  position:relative; z-index:1;
  min-height: 78vh;
  display:flex;
  align-items:flex-end;
  padding: 64px 0 48px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow:hidden;
  background:#000;

  /* fallback: se o inline --hero falhar, pega aqui */
  --hero: url("../img/hero.jpg");
}

/* camada da imagem do HERO */
.hero::before{
  content:"";
  position:absolute;
  inset:-8%;
  background: var(--hero, url("../img/hero.jpg")) center / cover no-repeat;
  filter: contrast(1.06) saturate(1.05);
  transform: scale(1.08);
  animation: heroCine 14s ease-in-out infinite alternate;
  will-change: transform;
  z-index: 0;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 600px at 20% 20%, rgba(0,0,0,.10), rgba(0,0,0,.55)),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.55));
  z-index: 1;
}

.hero-inner{
  position:relative;
  max-width:1100px;
  margin:0 auto;
  padding: 0 16px;
  width:100%;
  z-index: 3;
}

.hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.82);
  font-size: 13px;
}

.dot{
  width:10px; height:10px; border-radius:999px;
  background: rgba(214,177,90,.95);
  box-shadow: 0 10px 30px rgba(214,177,90,.22);
}

.hero-title{
  margin: 14px 0 0;
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.5px;
}

/* glow premium no dourado */
.hero-title .gold{
  text-shadow: 0 14px 50px rgba(214,177,90,.14);
}

.hero-sub{
  margin: 12px 0 0;
  max-width: 680px;
  color: rgba(255,255,255,.75);
  line-height:1.55;
  font-size: 15px;
}

.hero-cta{
  margin-top: 16px;
  display:flex;
  gap:12px;
  flex-wrap: wrap;
}

.hero-mini{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
}
.mini-card{
  padding:12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
.mini-card strong{ display:block; font-size:13px; }
.mini-card span{ display:block; margin-top:4px; font-size:12px; color:var(--muted2); }

.scroll-hint{
  position:absolute;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  opacity:.75;
  z-index: 4;
}
.scroll-hint span{
  display:block;
  width:28px; height:44px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  position:relative;
}
.scroll-hint span::after{
  content:"";
  position:absolute;
  left:50%;
  top:10px;
  width:4px; height:4px;
  transform:translateX(-50%);
  border-radius:999px;
  background: rgba(240,210,138,.9);
  animation: wheel 1.3s infinite;
}
@keyframes wheel{
  0%{ transform:translate(-50%,0); opacity:1;}
  100%{ transform:translate(-50%,14px); opacity:.25;}
}

/* Cinematic zoom */
@keyframes heroCine{
  0%   { transform: scale(1.08) translate3d(-10px, 2px, 0); }
  100% { transform: scale(1.16) translate3d(12px, -8px, 0); }
}
@media (prefers-reduced-motion: reduce){
  .hero::before{ animation:none; transform: scale(1.10); }
}

/* Partículas douradas discretas */
.hero-sparkles{
  position:absolute;
  inset:0;
  z-index: 2;
  pointer-events:none;
  opacity: .55;
  mix-blend-mode: screen;
}
.hero-sparkles::before,
.hero-sparkles::after{
  content:"";
  position:absolute;
  left: 0;
  top: -10%;
  width: 2px;
  height: 2px;
  border-radius: 999px;
  background: rgba(240,210,138,.9);
  filter: blur(.2px);
  opacity: .85;
}
.hero-sparkles::before{
  box-shadow:
    10vw 12vh rgba(240,210,138,.85),
    18vw 35vh rgba(214,177,90,.65),
    26vw 22vh rgba(240,210,138,.55),
    34vw 48vh rgba(240,210,138,.80),
    42vw 18vh rgba(214,177,90,.60),
    50vw 55vh rgba(240,210,138,.70),
    58vw 28vh rgba(240,210,138,.50),
    66vw 40vh rgba(214,177,90,.55),
    74vw 16vh rgba(240,210,138,.75),
    82vw 46vh rgba(240,210,138,.45),
    90vw 24vh rgba(214,177,90,.55);
  animation: sparkFloat 10s ease-in-out infinite;
}
.hero-sparkles::after{
  width: 3px;
  height: 3px;
  background: rgba(240,210,138,.95);
  filter: blur(.1px);
  box-shadow:
    6vw  20vh rgba(240,210,138,.70),
    12vw 52vh rgba(240,210,138,.55),
    22vw 42vh rgba(214,177,90,.50),
    32vw 30vh rgba(240,210,138,.65),
    44vw 60vh rgba(240,210,138,.55),
    56vw 18vh rgba(214,177,90,.45),
    68vw 58vh rgba(240,210,138,.55),
    76vw 34vh rgba(240,210,138,.60),
    88vw 50vh rgba(214,177,90,.45);
  animation: sparkFloat2 7s ease-in-out infinite, sparkTwinkle 2.6s ease-in-out infinite;
}
@keyframes sparkFloat{
  0%{ transform: translate3d(0, 0, 0); }
  50%{ transform: translate3d(10px, 10px, 0); }
  100%{ transform: translate3d(0, 0, 0); }
}
@keyframes sparkFloat2{
  0%{ transform: translate3d(0, 0, 0); }
  50%{ transform: translate3d(-12px, 14px, 0); }
  100%{ transform: translate3d(0, 0, 0); }
}
@keyframes sparkTwinkle{
  0%,100% { opacity: .65; }
  50%     { opacity: .95; }
}
@media (prefers-reduced-motion: reduce){
  .hero-sparkles::before,
  .hero-sparkles::after{ animation:none; }
}

/* QUICK */
.quick{
  position:relative; z-index:1;
  padding: 18px 0 8px;
}
.quick-inner{
  max-width:1100px;
  margin:0 auto;
  padding: 0 16px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
.qbtn{
  text-decoration:none;
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: 0 14px 45px rgba(0,0,0,.30);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.qbtn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
}
.qicon{ font-size:18px; }
.qtext strong{ display:block; font-size:14px; }
.qtext small{ display:block; color:var(--muted2); margin-top:2px; }
.qarrow{ color:rgba(255,255,255,.85); }

/* SECTIONS */
.section{
  position:relative; z-index:1;
  padding: 34px 0;
}
.section.dark{
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
}
.section-head{
  max-width:1100px;
  margin:0 auto;
  padding: 0 16px;
}
.section-head h2{
  margin:0;
  font-size: 22px;
  letter-spacing: .2px;
}
.section-head p{
  margin: 8px 0 0;
  color: rgba(255,255,255,.70);
}
.section-head code{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 12px;
}
.head-actions{ margin-top: 12px; }

/* gallery */
.gallery{
  max-width:1100px;
  margin: 16px auto 0;
  padding: 0 16px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
}
.shot{
  margin:0;
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 14px 45px rgba(0,0,0,.30);
}
.shot img{
  display:block;
  width:100%;
  height: 220px;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.02);
  transition: transform .18s ease;
}
.shot:hover img{ transform: scale(1.03); }

.section-cta{
  max-width:1100px;
  margin: 14px auto 0;
  padding: 0 16px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* cards */
.cards{
  max-width:1100px;
  margin: 16px auto 0;
  padding: 0 16px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
.card{
  padding:16px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: 0 14px 45px rgba(0,0,0,.30);
}
.card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.card h3{ margin: 10px 0 0; font-size: 16px; }
.card p{ margin: 8px 0 12px; color: rgba(255,255,255,.70); line-height:1.5; }

.pill{
  font-size:12px;
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.80);
}
.pill.gold{
  border-color: rgba(214,177,90,.35);
  background: rgba(214,177,90,.14);
  color: rgba(255,255,255,.90);
}

/* steps */
.steps{
  max-width:1100px;
  margin: 16px auto 0;
  padding: 0 16px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
.step{
  display:flex;
  gap:12px;
  padding:16px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: 0 14px 45px rgba(0,0,0,.30);
}
.num{
  width:36px; height:36px;
  display:grid; place-items:center;
  border-radius: 14px;
  border:1px solid rgba(214,177,90,.28);
  background: rgba(214,177,90,.12);
  color: rgba(255,255,255,.92);
  font-weight: 800;
}
.step h4{ margin:0; font-size: 14.5px; }
.step p{ margin:6px 0 0; color: rgba(255,255,255,.70); font-size: 13.5px; line-height:1.45; }

.note{
  max-width:1100px;
  margin: 14px auto 0;
  padding: 12px 16px;
  border-radius: 18px;
  border:1px solid rgba(214,177,90,.22);
  background: rgba(214,177,90,.10);
  color: rgba(255,255,255,.85);
}

/* FAQ */
.faq{
  max-width:1100px;
  margin: 16px auto 0;
  padding: 0 16px;
  display:grid;
  gap:10px;
}
details{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  padding: 12px 14px;
}
summary{
  cursor:pointer;
  font-weight: 700;
}
details p{
  margin: 8px 0 0;
  color: rgba(255,255,255,.70);
  line-height:1.5;
}

/* Location */
.location{
  max-width:1100px;
  margin: 16px auto 0;
  padding: 0 16px;
}
.loc-card{
  padding: 18px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: 0 14px 45px rgba(0,0,0,.30);
}
.loc-card h3{ margin:0; }
.loc-card p{ margin: 8px 0 0; color: rgba(255,255,255,.70); }
.loc-actions{ margin-top: 12px; display:flex; gap:10px; flex-wrap:wrap; }

/* Footer */
.footer{
  position:relative; z-index:1;
  padding: 18px 0 90px;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer-inner{
  max-width:1100px;
  margin:0 auto;
  padding: 0 16px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.muted{ color: rgba(255,255,255,.60); }

/* Buttons */
.btn{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 12px 14px;
  border-radius: 16px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}
.btn.gold{
  background: linear-gradient(180deg, rgba(214,177,90,.95), rgba(214,177,90,.70));
  border-color: rgba(214,177,90,.35);
  color: rgba(20,20,24,.95);
  font-weight: 800;
}
.btn.ghost{
  background: rgba(255,255,255,.04);
}
.btn.big{ padding: 14px 16px; border-radius: 18px; font-size: 14px; }
.btn.small{ padding: 10px 12px; border-radius: 14px; font-size: 13px; }
.btn.tiny{ padding: 9px 10px; border-radius: 14px; font-size: 12.5px; }

/* Dock */
.dock{
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: min(720px, calc(100% - 24px));
  z-index: 30;

  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:10px;

  padding: 10px;
  border-radius: 20px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(11,11,15,.72);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);

  animation: dockFloat 3.4s ease-in-out infinite;
}
.dock-btn{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
  padding: 12px 10px;
  border-radius: 16px;
  cursor:pointer;
  text-decoration:none;
  text-align:center;
  font-weight: 700;
}
.dock-btn.gold{
  background: linear-gradient(180deg, rgba(214,177,90,.95), rgba(214,177,90,.70));
  border-color: rgba(214,177,90,.35);
  color: rgba(20,20,24,.95);
}
@keyframes dockFloat{
  0%,100%{ transform: translateX(-50%) translateY(0); }
  50%{ transform: translateX(-50%) translateY(-2px); }
}

/* Modal */
.modal{
  position:fixed; inset:0;
  display:none;
  place-items:center;
  padding: 18px;
  background: rgba(0,0,0,.65);
  z-index: 40;
}
.modal.show{ display:grid; }
.modal-card{
  width:100%;
  max-width: 640px;
  border-radius: 20px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(18,18,24,.92);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  padding: 16px;
}
.modal-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.modal-head h3{ margin:0; }
.x{
  width:40px; height:36px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
  cursor:pointer;
}

.form{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
label{
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size: 13px;
  color: rgba(255,255,255,.78);
}
input,select,textarea{
  padding: 12px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(10,10,14,.55);
  color: rgba(255,255,255,.92);
  outline:none;
}
textarea{ resize: vertical; }
.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:4px;
}
.out{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:10px;
  display:grid;
  gap:8px;
}
.modal-actions{
  margin-top: 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Responsive */
@media (max-width: 880px){
  .nav-links{ display:none; }
}
@media (max-width: 840px){
  .hero-mini{ grid-template-columns: 1fr; }
  .gallery{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cards{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: 1fr; }
  .quick-inner{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .grid2{ grid-template-columns: 1fr; }
}

/* Reveal */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.in{
  opacity: 1;
  transform: translateY(0);
}

/* Hover premium */
.card, .qbtn, .shot, .step, .loc-card, .btn{
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.card:hover, .qbtn:hover, .shot:hover, .step:hover, .loc-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
}

/* Shine no botão gold */
.btn.gold{
  position: relative;
  overflow:hidden;
}
.btn.gold::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width: 40%;
  height: 180%;
  transform: rotate(25deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  opacity: .0;
}
.btn.gold:hover::after{
  opacity: 1;
  animation: shine .7s ease;
}
@keyframes shine{
  from{ left:-60%; }
  to{ left:130%; }
}

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

/* ===== HERO Rotator (multi-idiomas) ===== */
.hero-rotator-line,
.hero-rotator-sub{
  display:inline-block;
  will-change: transform, opacity, filter;
}

.hero-rotator-line{
  transition: opacity .55s ease, transform .55s ease, filter .55s ease;
}
.hero-rotator-sub{
  margin-top: 12px;
  transition: opacity .55s ease, transform .55s ease, filter .55s ease;
}

/* estados do “slide premium” */
.fade-out{
  opacity: 0;
  transform: translateY(10px);
  filter: blur(1px);
}
.fade-in{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* hebraico RTL só no texto */
.rtl{
  direction: rtl;
  unicode-bidi: plaintext;
}

/* =========================================================
   HERO — FINAL (fundo preto + imagem só no ::before)
   Cole no FINAL do style.css
   ========================================================= */

/* 1) Base preta SEM imagem no container (evita conflito) */
.hero{
  background: #000 !important;          /* atrás sempre preto */
  background-image: none !important;    /* não deixa imagem no container */
  overflow: hidden !important;          /* corta qualquer sobra */
}

/* 2) Imagem fica apenas na camada ::before */
.hero::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;                   /* não “vaza” pra fora */
  background: url("../img/hero.jpg") center / cover no-repeat !important;
  transform: none !important;           /* remove zoom que pode gerar bordas */
  animation: none !important;           /* remove animação (mais estável) */
  filter: contrast(1.06) saturate(1.05) !important;
  z-index:0 !important;
}

/* 3) Overlay premium pra dar leitura no texto e esconder qualquer diferença */
.hero-overlay{
  z-index: 1 !important;
  background:
    radial-gradient(900px 600px at 20% 20%, rgba(0,0,0,.20), rgba(0,0,0,.12)) !important,
    linear-gradient(180deg, rgba(0,0,0,.90), rgba(0,0,0,.100)) !important;
}

/* 4) Conteúdo sempre acima */
.hero-inner{ z-index: 3 !important; }
.hero-sparkles{ z-index: 2 !important; }

/* 5) Opcional: deixa um “fade” nas laterais (muito premium) */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1; /* junto do overlay */
  background:
    linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.10) 20%, rgba(0,0,0,.10) 80%, rgba(0,0,0,.85) 100%);
}

/* ===========================
   HOME - PORTFOLIO TEASER
   =========================== */
.p-teaser{
  max-width:1100px;
  margin: 16px auto 0;
  padding: 0 16px;
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:12px;
}
.p-teaser-card{
  text-decoration:none;
  color: var(--text);
  padding: 14px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: 0 14px 45px rgba(0,0,0,.30);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
  position:relative;
  overflow:hidden;
}
.p-teaser-card::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width: 45%;
  height: 180%;
  transform: rotate(25deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  opacity: 0;
}
.p-teaser-card:hover{
  transform: translateY(-3px);
  border-color: rgba(214,177,90,.22);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  background: rgba(255,255,255,.06);
}
.p-teaser-card:hover::after{
  opacity:1;
  animation: shine .75s ease;
}
.p-teaser-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.p-teaser-arrow{ color: rgba(255,255,255,.82); }
.p-teaser-card strong{
  display:block;
  margin-top: 10px;
  font-size: 13.5px;
}
.p-teaser-card small{
  display:block;
  margin-top: 6px;
  color: rgba(255,255,255,.66);
  line-height:1.45;
}

/* Responsivo teaser */
@media (max-width: 980px){
  .p-teaser{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .p-teaser{ grid-template-columns: 1fr; }
}

/* ===========================
   PORTFOLIO PAGE
   =========================== */
.page-hero{
  position:relative;
  z-index:1;
  padding: 34px 0 16px;
}
.page-hero-inner{
  max-width:1100px;
  margin:0 auto;
  padding: 0 16px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.page-hero h1{
  margin:0;
  font-size: clamp(24px, 3vw, 34px);
}
.page-hero p{
  margin: 8px 0 0;
  color: rgba(255,255,255,.70);
  max-width: 70ch;
  line-height:1.5;
}
.page-hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.p-section{
  position:relative;
  z-index:1;
  padding: 22px 0;
}
.p-section.dark{
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
}

.p-head{
  max-width:1100px;
  margin:0 auto;
  padding: 0 16px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.p-head h2{ margin:0; font-size: 18px; }
.p-head p{ margin: 8px 0 0; color: rgba(255,255,255,.70); }

.p-grid{
  max-width:1100px;
  margin: 14px auto 0;
  padding: 0 16px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
}

@media (max-width: 840px){
  .p-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .p-grid{ grid-template-columns: 1fr; }
}

/* item premium */
.p-item{
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 14px 45px rgba(0,0,0,.30);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  position:relative;
}
.p-item:hover{
  transform: translateY(-3px);
  border-color: rgba(214,177,90,.22);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
}
.p-btn{
  display:block;
  width:100%;
  border:0;
  padding:0;
  background: transparent;
  cursor:pointer;
}
.p-img{
  display:block;
  width:100%;
  height: 260px;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.02);
  transform: scale(1.02);
  transition: transform .45s ease;
}
.p-item:hover .p-img{ transform: scale(1.08); }

.p-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(0,0,0,.00), rgba(0,0,0,.35) 60%, rgba(0,0,0,.62) 100%),
    linear-gradient(135deg, rgba(240,210,138,.16), rgba(214,177,90,0) 35%),
    linear-gradient(120deg, transparent 20%, rgba(255,255,255,.18) 32%, transparent 48%);
  opacity: .70;
  transform: translateX(-35%);
  transition: opacity .35s ease, transform .65s ease;
  mix-blend-mode: screen;
  pointer-events:none;
}
.p-item:hover .p-overlay{
  opacity: .86;
  transform: translateX(0%);
}

.p-tag{
  position:absolute;
  left: 12px;
  bottom: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(255,255,255,.90);
  background: rgba(0,0,0,.38);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}

/* ===========================
   LIGHTBOX (PORTFOLIO)
   =========================== */
.plightbox{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.plightbox.is-open{ display:block; }

.plb-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(10px);
  animation: lbFade .18s ease both;
}
.plb-dialog{
  position: relative;
  width: min(1100px, calc(100% - 28px));
  margin: min(6vh, 56px) auto 0;
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  gap: 12px;
  animation: lbPop .22s ease both;
}
.plb-media{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
}
.plb-img{
  width:100%;
  height: min(76vh, 780px);
  object-fit: contain;
  display:block;
  background: rgba(0,0,0,.35);
}
.plb-meta{
  position:absolute;
  left:14px; right:14px; bottom:14px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  pointer-events:none;
}
.plb-pill{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(214,177,90,.22);
  background: rgba(0,0,0,.38);
  color: rgba(255,255,255,.88);
  letter-spacing: .08em;
  font-size: 11px;
  text-transform: uppercase;
}
.plb-count{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.34);
  color: rgba(255,255,255,.80);
  font-size: 12px;
}

.plb-close{
  position:absolute;
  top:-42px;
  right:0;
  width:40px;
  height:40px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  cursor:pointer;
  backdrop-filter: blur(10px);
  transition: transform .2s ease, border-color .25s ease;
}
.plb-close:hover{ transform: translateY(-2px); border-color: rgba(214,177,90,.24); }

.plb-nav{
  height: 56px;
  width: 56px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: transform .2s ease, border-color .25s ease;
}
.plb-nav:hover{ transform: translateY(-2px); border-color: rgba(214,177,90,.24); }

@media (max-width: 700px){
  .plb-dialog{ grid-template-columns: 44px 1fr 44px; }
  .plb-nav{ width:44px; height:44px; border-radius:14px; }
  .plb-img{ height: 72vh; }
  .plb-close{ top:-46px; }
}