/* =========================================================
   X BYTE — Camada "Luxo" (aditiva)
   Carregue DEPOIS de app.css no layout.blade.php:
     <link href="/xbyte/institucional/css/app.css" rel="stylesheet">
     <link href="/xbyte/institucional/css/app-luxe.css" rel="stylesheet">   <-- adicionar
   Mantém 100% da identidade (navy + teal) e adiciona um acento dourado discreto,
   tipografia editorial, micro-interações e a seção de Portfólio.
   ========================================================= */

:root{
  --xb-gold:#C9A86A;
  --xb-gold-soft:#E4D4AE;
  --xb-ease:cubic-bezier(.16,1,.3,1);
}

/* ---- Refinos globais ---- */
.eyebrow{ color:var(--xb-teal); }
.eyebrow::after{ content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--xb-gold); margin-left:.2rem; }
.eyebrow.center::before{ display:none; }

h1 em, h2 em{ font-family:"Playfair Display", Georgia, serif; font-style:italic; font-weight:700; }

/* destaque dourado nos títulos de seção (Playfair já carregado) */
.display-5 em, .page-hero h1 em{ color:var(--xb-gold-soft); }

/* ---- Navbar: linha dourada ao rolar + underline elegante ---- */
.navbar-xbyte{ transition:padding .4s var(--xb-ease), background .4s var(--xb-ease); }
.navbar-xbyte .nav-link{ position:relative; }
.navbar-xbyte .nav-link::after{
  content:""; position:absolute; left:1rem; right:1rem; bottom:.28rem;
  height:1px; background:var(--xb-gold); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--xb-ease);
}
.navbar-xbyte .nav-link:hover::after{ transform:scaleX(1); }
.navbar-xbyte .nav-link.active{ border-bottom:none !important; }
.navbar-xbyte .nav-link.active::after{ transform:scaleX(1); }

/* ---- Hero: brilho dourado sutil + flutuar ---- */
.hero .hero-x{ animation:xbFloat 7s ease-in-out infinite; }
@keyframes xbFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-18px); } }
.hero .badge-3{ border-color:rgba(201,168,106,.5); }
.hero .badge-3 .num{ color:var(--xb-gold-soft); }

/* ---- Cards: elevação refinada no hover ---- */
.case-card, .card-mvv, .pillar-card, .quote-card, .step-card{
  transition:transform .45s var(--xb-ease), box-shadow .45s var(--xb-ease), border-color .45s var(--xb-ease);
}
.case-card:hover, .pillar-card:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 60px rgba(5,60,91,.16);
  border-color:rgba(201,168,106,.4);
}
.case-card .n{ color:var(--xb-gold); }

/* ---- Botão CTA hero com leve subida ---- */
.btn-cta-hero{ transition:transform .3s var(--xb-ease), box-shadow .3s var(--xb-ease), background .3s; }
.btn-cta-hero:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(245,166,35,.4); }

/* =========================================================
   PORTFÓLIO
   ========================================================= */
.portfolio-hero .glow{
  position:absolute; width:760px; height:760px; border-radius:50%;
  right:-240px; top:-220px; pointer-events:none;
  background:radial-gradient(circle, rgba(34,184,200,.22) 0%, transparent 60%);
}
.portfolio-hero{
  min-height:520px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border-bottom:1px solid rgba(201,168,106,.32);
}
.portfolio-hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--xb-gold),transparent);
  opacity:.7;
}
.portfolio-hero-copy{max-width:760px;position:relative;z-index:1;}
.portfolio-hero-copy h1{
  margin:1.2rem 0 1.25rem;
  font-family:"Inter",sans-serif;
  font-size:clamp(3rem,7vw,5.8rem);
  font-weight:700;
  line-height:1.02;
  letter-spacing:0;
  text-wrap:balance;
}
.portfolio-hero-copy h1 em{
  font-family:"Playfair Display",Georgia,serif;
  font-weight:700;
  letter-spacing:0;
}
.portfolio-hero-copy .lead{
  max-width:660px;
  margin:0;
  color:rgba(255,255,255,.82);
  font-size:1.08rem;
  line-height:1.75;
  text-align:left;
}
.portfolio-hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem;
  margin-top:2rem;
  padding-top:1.35rem;
  border-top:1px solid rgba(255,255,255,.14);
}
.portfolio-hero-meta span{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  color:rgba(255,255,255,.76);
  font-family:"Inter",sans-serif;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:0;
  text-transform:uppercase;
}
.portfolio-hero-meta i{color:var(--xb-gold-soft);font-size:1rem;}
.portfolio-grid-section{background:#F5F8F9;}
.portfolio-state{ padding:3rem 0; text-align:center; color:var(--xb-graphite); font-size:1.05rem; }
.portfolio-state.error{ color:#c0392b; }

.portfolio-card{
  height:100%; background:#fff; border:1px solid #D7E0E4;
  display:flex; flex-direction:column; overflow:hidden; position:relative;
  opacity:0; transform:translateY(34px);
  transition:opacity .9s var(--xb-ease), transform .9s var(--xb-ease), box-shadow .45s var(--xb-ease), border-color .45s var(--xb-ease);
}
.portfolio-card.in{ opacity:1; transform:none; }
.portfolio-card:hover{ box-shadow:0 26px 64px rgba(5,60,91,.15); border-color:rgba(201,168,106,.68); transform:translateY(-5px); }

.portfolio-card .pf-cover{
  width:100%;
  height:0!important;
  min-height:0;
  padding-top:56.25%;
  flex:0 0 auto;
  background:linear-gradient(135deg,#03283D,#0a5a7f);
  position:relative;
  overflow:hidden;
  display:block;
}
.portfolio-card.featured .pf-cover{height:0!important;}
.portfolio-card .pf-image{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain;
  object-position:center;
}
.portfolio-card .pf-cover::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse at center,#000 30%,transparent 78%);
}
.portfolio-card .pf-mark{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;}
.portfolio-card .pf-mark img{width:88px;opacity:.92;filter:brightness(0) invert(1);}
.portfolio-card .pf-cat{
  align-self:flex-start;
  position:static;
  margin-bottom:.75rem;
  font-family:"Inter",sans-serif; font-size:.68rem; letter-spacing:0; text-transform:uppercase;
  color:var(--xb-navy-deep); background:var(--xb-gold-soft); padding:.45rem .72rem;
}
.portfolio-card .pf-index{
  position:absolute;
  right:17px;
  bottom:13px;
  z-index:2;
  color:rgba(255,255,255,.78);
  font-family:"Inter",sans-serif;
  font-size:.76rem;
  font-weight:600;
  letter-spacing:0;
}
.portfolio-card .pf-body{padding:1.8rem 1.7rem 1.65rem;display:flex;flex-direction:column;flex:1;}
.portfolio-card .pf-domain{
  margin-bottom:.55rem;
  color:var(--xb-teal);
  font-family:"Inter",sans-serif;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:0;
  text-transform:uppercase;
}
.portfolio-card .pf-body h3{
  font-family:"Inter",sans-serif; font-weight:700; font-size:1.45rem; line-height:1.25;
  letter-spacing:0; color:var(--xb-navy); margin:0 0 .75rem;
}
.portfolio-card .pf-body p{
  font-size:.95rem; line-height:1.72; color:#46545B; margin:0 0 1.35rem; text-align:left;
}
.portfolio-card .pf-foot{
  margin-top:auto; padding-top:1.05rem; border-top:1px solid #E2E8EB;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.portfolio-card .pf-stack{
  font-family:"Inter",sans-serif; font-size:.7rem; letter-spacing:0; text-transform:uppercase; color:#74838A;
}
.portfolio-card .pf-link{
  font-family:"Inter",sans-serif; font-weight:700; font-size:.78rem; letter-spacing:0;
  color:var(--xb-teal); text-decoration:none; display:inline-flex; align-items:center; gap:.4rem;
  transition:gap .25s var(--xb-ease), color .25s;
}
.portfolio-card .pf-link:hover{ color:var(--xb-gold); gap:.7rem; }

.portfolio-cta{
  border-top:1px solid rgba(201,168,106,.3);
  border-bottom:1px solid rgba(201,168,106,.3);
}
.portfolio-cta .container{max-width:820px;}
.portfolio-cta h2{
  font-family:"Inter",sans-serif;
  font-weight:700;
  letter-spacing:0;
  line-height:1.08;
}
.portfolio-cta .lead{text-align:center;line-height:1.7;}
.portfolio-cta .glow{ display:none; }
.portfolio-cta .btn-cta-hero{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  padding:.9rem 1.7rem;
  border:0;
  border-radius:999px;
  background:var(--xb-whatsapp);
  color:#fff;
  font-family:var(--font-body);
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.08em;
  line-height:1;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 8px 28px rgba(37,211,102,.32);
}
.portfolio-cta .btn-cta-hero:hover{
  background:#1fb455;
  color:#fff;
  box-shadow:0 16px 40px rgba(37,211,102,.36);
}
.portfolio-cta .btn-cta-hero i{ font-size:1.1rem; }

@media (max-width:991px){
  .portfolio-card.featured .pf-cover{height:0!important;}
}
@media (max-width:767px){
  .portfolio-hero{min-height:460px;}
  .portfolio-hero-copy h1{font-size:2.75rem;}
  .portfolio-hero-meta{gap:.85rem;}
  .portfolio-hero-meta span{width:100%;}
  .portfolio-card .pf-cover,.portfolio-card.featured .pf-cover{height:0!important;}
  .portfolio-card .pf-foot{align-items:flex-start;flex-direction:column;}
}