/* Agência Três — modern homepage (Nexo Solutions) */

/* === GLOBAL UI SCALE ===
 * The bespoke pages were authored tight, so on wide / hi-DPI monitors everything
 * looked small. The whole layout is rem-based Tailwind, so scaling the root
 * font-size scales text, spacing, gaps AND container max-widths together — a
 * clean "browser-zoom" effect without touching the layout structure. Fluid via
 * clamp so it's generous on big screens and still comfortable on phones.
 * Only loaded with the home library (bespoke pages), never the legacy Drupal pages. */
html{font-size:clamp(16px, 13.5px + 0.18vw, 19px)}

.nx-home{background:#0B0B0D;color:#fff;font-family:'Inter',sans-serif}
/* Form fields shouldn't be hijacked by Matri/Bootstrap form CSS */
.nx-home input,.nx-home select,.nx-home textarea{box-sizing:border-box;max-width:100%;font-size:1rem;line-height:1.4;box-shadow:none}
/* Bigger, modern dropdowns with a custom chevron */
.nx-home select{-webkit-appearance:none;appearance:none;padding:14px 44px 14px 16px!important;border-radius:14px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23FEC200' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;cursor:pointer}
.nx-home select option{background:#16161a;color:#fff;padding:10px}
/* Smaller floating WhatsApp button */
.nx-wa{width:48px!important;height:48px!important}
.nx-wa svg{width:24px;height:24px}
/* Particles / fireworks canvas */
.nx-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
/* Suppress Drupal chrome auto-injected into the content region on redesigned
   pages (unstyled contact block, breadcrumb, page title, tabs) — the bespoke
   layout provides its own. */
.nx-home #content-contact,
.nx-home .contact-message-feedback-form,
.nx-home .breadcrumb,
.nx-home > main > .region-content > h1,
.nx-home .block-page-title-block{display:none!important}

/* Parallax + extra reveal flavours */
.nx-parallax{will-change:transform}
.nx-home .reveal.from-left{transform:translateX(-40px)}
.nx-home .reveal.from-right{transform:translateX(40px)}
.nx-home .reveal.zoom-in{transform:scale(.92)}
.nx-home .reveal.is-visible{transform:none}

/* Mosaic / bento gallery */
.nx-mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:215px;gap:14px}
.nx-mosaic .tile{padding:0;border:0;cursor:pointer;background:#1A1A1F}
.nx-mosaic .tile{position:relative;overflow:hidden;border-radius:18px}
.nx-mosaic .tile img,.nx-mosaic .tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.nx-mosaic .tile:hover img,.nx-mosaic .tile:hover video{transform:scale(1.08)}
.nx-mosaic .tile .lbl{position:absolute;left:0;right:0;bottom:0;padding:14px;background:linear-gradient(to top,rgba(0,0,0,.85),transparent);font-weight:700;font-size:.85rem}
.nx-mosaic .w2{grid-column:span 2}.nx-mosaic .h2{grid-row:span 2}
@media (max-width:768px){
  .nx-mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
  .nx-mosaic .w2{grid-column:span 2}.nx-mosaic .h2{grid-row:span 1}
}
.nx-home .anton{font-family:'Anton',sans-serif;letter-spacing:.02em}
.nx-home .brandgrad{background:linear-gradient(135deg,#FEC200,#C99400)}
.nx-home .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.nx-home .reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.nx-home .reveal{opacity:1!important;transform:none!important;transition:none}}
@keyframes nx-floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.nx-home .floaty{animation:nx-floaty 3s ease-in-out infinite}
.nx-home .card-img{transition:transform .6s ease}
.nx-home .group:hover .card-img{transform:scale(1.08)}
@keyframes nx-pulse{0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}50%{box-shadow:0 0 0 14px rgba(37,211,102,0)}}
.nx-wa{animation:nx-pulse 2.2s infinite}
/* --- Headings: force white inside the dark homepage (Matri defaults them dark) --- */
.nx-home h1,.nx-home h2,.nx-home h3,.nx-home h4,.nx-home h5,.nx-home h6{color:#fff!important;margin:0}
/* ...except on the yellow brand-gradient sections, where text must stay black */
.nx-home .brandgrad h1,.nx-home .brandgrad h2,.nx-home .brandgrad h3,.nx-home .brandgrad h4{color:#0B0B0D!important}

/* --- Breathing top bar (only visible when scrolled to the very top) --- */
@keyframes nx-breathe{0%,100%{filter:brightness(1);box-shadow:0 0 0 rgba(254,194,0,0)}50%{filter:brightness(1.14);box-shadow:0 3px 26px rgba(254,194,0,.5)}}
.nx-breathe{animation:nx-breathe 3.2s ease-in-out infinite}

/* --- Hero logo: rounded black frame, no inner padding, subtle pulsing yellow glow --- */
.nx-herologo{position:relative;display:inline-block;border-radius:30px;overflow:hidden;background:#000;
  animation:nx-logoglow 3.6s ease-in-out infinite}
.nx-herologo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:30px}
@keyframes nx-logoglow{
  0%,100%{box-shadow:0 0 0 1px rgba(254,194,0,.40),0 0 26px rgba(254,194,0,.22),0 18px 55px rgba(0,0,0,.6)}
  50%{box-shadow:0 0 0 1px rgba(254,194,0,.65),0 0 58px rgba(254,194,0,.50),0 18px 55px rgba(0,0,0,.6)}
}
@keyframes nx-spin{to{transform:rotate(360deg)}}

/* --- Navbar visibility (Matri's Bootstrap ships .hidden{display:none!important}
       which kills Tailwind's `hidden lg:flex`; use these explicit helpers). --- */
.nx-home .nx-navlinks{display:none!important}
.nx-home .nx-phone{display:none!important}
.nx-home .nx-cta{display:inline-block!important}
.nx-home .nx-burger{display:inline-flex!important}
@media (min-width:1024px){
  .nx-home .nx-navlinks{display:flex!important;align-items:center;gap:1.75rem}
  .nx-home .nx-phone{display:inline-flex!important;align-items:center;gap:.5rem}
  .nx-home .nx-burger{display:none!important}
}
.nx-home .nx-mobnav{display:none!important}
.nx-home .nx-mobnav.open{display:flex!important;flex-direction:column;gap:.5rem}
@media (min-width:1024px){ .nx-home .nx-mobnav.open{display:none!important} }

/* --- Loading overlay with the logo (Lottie-style) --- */
#nx-loader{position:fixed;inset:0;z-index:9999;background:#0B0B0D;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;transition:opacity .7s ease,visibility .7s ease}
#nx-loader.nx-hide{opacity:0;visibility:hidden}
.nx-loader-stage{position:relative;display:flex;align-items:center;justify-content:center;width:180px;height:180px}
.nx-loader-logo{width:128px;height:128px;border-radius:26px;overflow:hidden;background:#000;box-shadow:0 0 60px rgba(254,194,0,.4);animation:nx-floaty 2.4s ease-in-out infinite}
.nx-loader-logo img{width:100%;height:100%;object-fit:cover}
.nx-loader-ring{position:absolute;inset:0;border-radius:50%;border:3px solid transparent;border-top-color:#FEC200;border-right-color:#C99400;animation:nx-spin 0.9s linear infinite}
.nx-loader-text{font-family:'Anton',sans-serif;letter-spacing:.25em;font-size:14px;color:#FEC200;text-transform:uppercase;opacity:.85;animation:nx-pulse-text 1.6s ease-in-out infinite}
@keyframes nx-pulse-text{0%,100%{opacity:.4}50%{opacity:1}}

/* Hero logo glow halo (sits BEHIND the rounded frame) */
.nx-herowrap{position:relative;display:inline-block}
.nx-herowrap::before{content:"";position:absolute;inset:-34%;z-index:0;border-radius:50%;
  background:radial-gradient(circle,rgba(254,194,0,.55),rgba(254,194,0,.12) 45%,transparent 68%);
  filter:blur(26px);animation:nx-halo 3.6s ease-in-out infinite}
.nx-herowrap .nx-herologo{position:relative;z-index:1}
@keyframes nx-halo{0%,100%{opacity:.7;transform:scale(.96)}50%{opacity:1;transform:scale(1.06)}}

/* Back-to-top pill (brand) — bottom-right, above the WhatsApp button, 1 line */
.nx-top{position:fixed!important;right:20px;bottom:88px;z-index:81;display:inline-flex!important;flex-direction:row!important;align-items:center;gap:8px;
  width:auto;height:auto;padding:11px 18px;border-radius:9999px;background:linear-gradient(135deg,#FEC200,#C99400);color:#0B0B0D;
  font-weight:800;font-size:.82rem;border:0;cursor:pointer;white-space:nowrap;line-height:1;
  opacity:0;transform:translateY(20px) scale(.85);pointer-events:none;
  transition:opacity .4s ease,transform .45s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 12px 34px rgba(254,194,0,.4)}
.nx-top.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.nx-top:hover{transform:translateY(-4px) scale(1.05)}
.nx-top svg{display:inline-block;flex:0 0 auto;vertical-align:middle}
.nx-top span{display:inline-block;line-height:1;white-space:nowrap}
@keyframes nx-topbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* Glistening gold text + logo shine (footer) */
.nx-glint{background:linear-gradient(90deg,#C99400 0%,#FEC200 18%,#fff 50%,#FEC200 82%,#C99400 100%);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:transparent;animation:nx-glint 3.8s linear infinite}
@keyframes nx-glint{to{background-position:-200% center}}
.nx-shine{position:relative;overflow:hidden;display:inline-block}
.nx-shine::after{content:"";position:absolute;top:0;left:-160%;width:55%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);
  animation:nx-shine 4.5s ease-in-out infinite}
@keyframes nx-shine{0%{left:-160%}45%,100%{left:160%}}

/* Catalogo layout — category sidebar on desktop, sticky pill bar on mobile */
.nx-cat-layout{display:block}
.nx-catside{display:none}
.nx-catnav-m{position:sticky;top:80px;z-index:40;background:rgba(11,11,13,.95);backdrop-filter:blur(10px);
  padding:10px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:1.5rem}
.nx-catnav-m .nx-row{display:flex;gap:.5rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
.nx-catnav-m::-webkit-scrollbar,.nx-catnav-m .nx-row::-webkit-scrollbar{display:none}
.nx-catpill{white-space:nowrap}
.nx-catpill.active{background:linear-gradient(135deg,#FEC200,#C99400);color:#0B0B0D;border-color:#FEC200}
@media (min-width:1024px){
  .nx-cat-layout{display:grid;grid-template-columns:220px 1fr;gap:2.5rem;align-items:start}
  .nx-catnav-m{display:none}
  .nx-catside{display:block;position:sticky;top:100px}
  .nx-catside a{display:block;padding:9px 14px;border-radius:10px;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:rgba(255,255,255,.7);border:1px solid transparent;transition:all .2s}
  .nx-catside a:hover{color:#fff;background:rgba(255,255,255,.05)}
  .nx-catside a.active{background:linear-gradient(135deg,#FEC200,#C99400);color:#0B0B0D}
}

/* Catalogo sticky category nav */
.nx-catnav{position:sticky;top:80px;z-index:40;background:rgba(11,11,13,.94);backdrop-filter:blur(10px);
  padding:12px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.nx-catnav::-webkit-scrollbar{display:none}
.nx-catnav .nx-catpill.active{background:linear-gradient(135deg,#FEC200,#C99400);color:#0B0B0D;border-color:#FEC200}

/* Catalogo search */
.nx-search{position:relative;max-width:520px;margin:0 auto 18px}
.nx-search input{width:100%;background:#1A1A1F;border:1px solid rgba(255,255,255,.12);border-radius:9999px;
  padding:14px 20px 14px 48px;color:#fff;outline:none}
.nx-search input:focus{border-color:#FEC200}
.nx-search svg{position:absolute;left:18px;top:50%;transform:translateY(-50%)}
.nx-cat-empty{color:rgba(255,255,255,.45);text-align:center;padding:10px 0}

/* Blog article body */
.nx-home .nx-article a{color:#FEC200;text-decoration:underline}
.nx-home .nx-article h1,.nx-home .nx-article h2,.nx-home .nx-article h3,.nx-home .nx-article h4{color:#fff;font-family:'Anton',sans-serif;text-transform:uppercase;margin:1.4rem 0 .6rem}
.nx-home .nx-article img{border-radius:14px;margin:1.2rem 0;max-width:100%;height:auto}
.nx-home .nx-article iframe{max-width:100%;border-radius:14px;margin:1rem 0}
.nx-home .nx-article ul{list-style:disc;padding-left:1.3rem}

/* Lightbox */
.nx-light{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;padding:24px}
.nx-light img{max-width:92vw;max-height:88vh;border-radius:12px}
.nx-light .nx-close{position:absolute;top:18px;right:22px;color:#fff;font-size:34px;cursor:pointer;line-height:1}

/* --- Hero pedido pelo cliente (2026-09-18): a segunda linha do titulo em amarelo, sempre na
       sua propria linha, e os quatro factos com icone (2x2 no telemovel, uma linha no desktop). --- */
.nx-home .nx-hl{display:block;color:#FEC200}
.nx-home .nx-herostats{list-style:none;margin:clamp(1.2rem,3vmin,2.6rem) auto 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem 1rem;width:100%;max-width:26rem}
.nx-home .nx-herostats li{display:flex;align-items:center;gap:.6rem;text-align:left;margin:0;font-weight:600;line-height:1.2;color:rgba(255,255,255,.88);font-size:clamp(.8rem,1.7vmin,.98rem)}
.nx-home .nx-herostats svg{flex:0 0 auto;width:2.1em;height:2.1em;padding:.45em;border-radius:9999px;background:rgba(254,194,0,.14);color:#FEC200}
.nx-home .nx-herostats b{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.02em;color:#FEC200;font-size:1.22em}
@media (min-width:1024px){
  .nx-home .nx-herostats{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem 2.2rem;max-width:none;width:auto}
}
/* O botao do topo nunca parte em duas linhas; num telemovel estreito encolhe o preenchimento */
.nx-home .nx-cta{white-space:nowrap}
@media (max-width:420px){
  .nx-home .nx-cta{padding:.55rem .95rem!important;font-size:.8rem!important}
  .nx-home #nx-header img{height:2.4rem!important}
}
/* O zeluis.css do Matri tem `video{height:auto!important}` e ganhava ao h-full: no telemovel o video
   do hero cobria so ~230px do topo e o resto do ecra era preto, e o mesmo nas capas dos servicos e nos
   videos do mosaico (2026-09-18). Os videos de capa voltam a cobrir a caixa toda. */
.nx-home video.absolute.object-cover,.nx-home .nx-mosaic .tile video{height:100%!important}