:root{
  /* Base */
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --soft:#f7f8fb;

  /* Brand (nuances tipo busquetsportugal.pt) */
  --brand-a:#06b6d4;   /* cyan */
  --brand-b:#22c55e;   /* green */
  --brand-c:#3b82f6;   /* blue */
  --brand-d:#a855f7;   /* purple (muito subtil) */

  --card:#ffffff;
  --shadow: 0 14px 34px rgba(2,6,23,.10);
  --shadow-soft: 0 12px 30px rgba(2,6,23,.08);

  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur-1: 160ms;
  --dur-2: 260ms;
  --dur-3: 520ms;

  /* Focus */
  --focus: 0 0 0 3px rgba(6,182,212,.18);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family: Inter, Arial, Helvetica, sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(6,182,212,.16), transparent 60%),
    radial-gradient(900px 520px at 92% -10%, rgba(34,197,94,.14), transparent 60%),
    radial-gradient(1100px 700px at 70% 110%, rgba(59,130,246,.10), transparent 65%),
    var(--bg);
  line-height:1.55;
}

a{ color:inherit; text-decoration:none; }

.container{
  width:1200px;
  max-width:92%;
  margin:auto;
}

:focus-visible{
  outline:none;
  box-shadow: var(--focus);
  border-radius:10px;
}

@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================
   TOP BAR
========================= */

.topbar{
  background: linear-gradient(90deg, rgba(6,182,212,.18), rgba(34,197,94,.16), rgba(59,130,246,.14));
  border-bottom:1px solid rgba(15,23,42,.08);
  font-size:12px;
  padding:8px 0;
  text-align:center;
  letter-spacing:.06em;
  color:#0b1220;
}

/* =========================
   HEADER
========================= */

.header{
  background:rgba(255,255,255,.86);
  border-bottom:1px solid rgba(15,23,42,.08);
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(12px);
}

.header-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 0;
}

.logo img{
  height:46px;
  width:auto;
  display:block;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}

.logo:hover img{
  transform: translateY(-1px);
  opacity:.92;
}

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

.nav a{
  font-size:13px;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#0b1220;
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
  position:relative;
}

.nav a:hover{
  opacity:.76;
  transform: translateY(-1px);
}

/* underline subtil */
.nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-10px;
  width:100%;
  height:2px;
  background: linear-gradient(90deg, var(--brand-a), var(--brand-b), var(--brand-c));
  opacity:0;
  transform: scaleX(.88);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}

.nav a:hover::after{
  opacity:.9;
  transform: scaleX(1);
}

/* Fix alinhamento do item “COLEÇÕES” */
.nav{ align-items:center; }
.nav-item{ display:flex; align-items:center; }

/* =========================
   HERO
========================= */

.hero{ position:relative; }

.heroSlide{
  height:560px;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(15,23,42,.08);
}

.heroOverlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, rgba(2,6,23,.70), rgba(2,6,23,.28)),
    radial-gradient(900px 480px at 18% 20%, rgba(6,182,212,.22), transparent 60%),
    radial-gradient(900px 480px at 42% 10%, rgba(34,197,94,.18), transparent 62%),
    radial-gradient(900px 480px at 74% 18%, rgba(59,130,246,.16), transparent 62%);
}

.heroSlide::after{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(640px 360px at 24% 35%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(620px 340px at 72% 30%, rgba(255,255,255,.10), transparent 62%);
  opacity:.70;
  transform: translate3d(-18px, 0, 0);
  animation: heroGlow 10s var(--ease) infinite alternate;
  pointer-events:none;
}

@keyframes heroGlow{
  from{ transform: translate3d(-26px, -8px, 0); opacity:.55; }
  to  { transform: translate3d(18px, 8px, 0); opacity:.82; }
}

.heroContent{
  position:relative;
  color:#fff;
  max-width:760px;
}

.heroKicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:7px 12px;
  border:1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.08);
  border-radius:999px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  backdrop-filter: blur(8px);
  margin-bottom:16px;
}

.heroContent h1{
  font-size:56px;
  font-weight:900;
  margin:0 0 14px;
  letter-spacing:-1px;
  text-transform:uppercase;
}

.heroContent p{
  font-size:16px;
  margin:0 0 22px;
  opacity:.96;
  max-width:640px;
}

.heroActions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
  cursor:pointer;
}

.btn-primary{
  background: linear-gradient(90deg, var(--brand-a), var(--brand-b), var(--brand-c));
  color:#07101f;
  border-color: rgba(255,255,255,.12);
}

.btn-ghost{
  background: rgba(255,255,255,.10);
  color:#fff;
  border-color: rgba(255,255,255,.22);
}

.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(2,6,23,.25);
  opacity:.96;
}

.btn:active{
  transform: translateY(0);
  box-shadow:none;
}

/* métricas no hero */
.heroStats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  margin-top:26px;
  max-width:560px;
}

.stat{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}

.stat strong{
  display:block;
  font-size:22px;
  letter-spacing:-.5px;
}

.stat span{
  display:block;
  font-size:12px;
  opacity:.92;
}

/* =========================
   SECTION GENERIC
========================= */

.section{ padding:72px 0; }
.section.center{ text-align:center; }

.section h1, .section h2{
  margin:0 0 18px;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:20px;
}

.muted{ color:var(--muted); font-size:13px; }

/* =========================
   REVEAL (scroll animations)
========================= */

.reveal{
  opacity:0;
  transform: translateY(16px);
  filter: blur(2px);
  transition:
    opacity var(--dur-3) var(--ease),
    transform var(--dur-3) var(--ease),
    filter var(--dur-3) var(--ease);
  will-change: opacity, transform, filter;
}

.reveal.is-visible{
  opacity:1;
  transform:none;
  filter:none;
}

.reveal-stagger > *{
  opacity:0;
  transform: translateY(16px);
  filter: blur(2px);
  transition:
    opacity var(--dur-3) var(--ease),
    transform var(--dur-3) var(--ease),
    filter var(--dur-3) var(--ease);
}

.reveal-stagger.is-visible > *{
  opacity:1;
  transform:none;
  filter:none;
}

.reveal-stagger.is-visible > *:nth-child(1){ transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay: 60ms; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay: 120ms; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay: 180ms; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay: 240ms; }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay: 300ms; }
.reveal-stagger.is-visible > *:nth-child(7){ transition-delay: 360ms; }
.reveal-stagger.is-visible > *:nth-child(8){ transition-delay: 420ms; }

/* =========================
   FEATURE CARDS (home)
========================= */

.featureGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
}

.featureCard{
  border:1px solid rgba(15,23,42,.10);
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(247,248,251,1));
  border-radius:16px;
  padding:18px;
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  position:relative;
  overflow:hidden;
}

.featureCard::before{
  content:"";
  position:absolute;
  inset:-60px;
  background: radial-gradient(360px 220px at 10% 30%, rgba(6,182,212,.18), transparent 60%);
  opacity:.0;
  transition: opacity var(--dur-2) var(--ease);
}

.featureCard:nth-child(2)::before{
  background: radial-gradient(360px 220px at 10% 30%, rgba(34,197,94,.16), transparent 60%);
}
.featureCard:nth-child(3)::before{
  background: radial-gradient(360px 220px at 10% 30%, rgba(59,130,246,.16), transparent 60%);
}

.featureCard:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(15,23,42,.16);
}

.featureCard:hover::before{ opacity:1; }

.featureTop{
  display:flex;
  align-items:center;
  gap:12px;
}

.featureIcon{
  width:46px;
  height:46px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background: rgba(6,182,212,.12);
  border:1px solid rgba(6,182,212,.20);
}

.featureCard:nth-child(2) .featureIcon{
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.20);
}
.featureCard:nth-child(3) .featureIcon{
  background: rgba(59,130,246,.12);
  border-color: rgba(59,130,246,.20);
}

.featureIcon svg{ width:22px; height:22px; }

.featureTitle{
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:13px;
}

.featureSub{
  color:var(--muted);
  font-size:13px;
  margin-top:10px;
}

/* =========================
   COLLECTION GRID
========================= */

.collectionGrid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
}

.collectionCard{
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(247,248,251,1));
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  overflow:hidden;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  position:relative;
}

.collectionCard::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(520px 220px at 20% 0%, rgba(6,182,212,.10), transparent 55%);
  opacity:0;
  transition: opacity var(--dur-2) var(--ease);
  pointer-events:none;
}

.collectionCard:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(15,23,42,.16);
}

.collectionCard:hover::before{ opacity:1; }

.collectionCard img{
  width:100%;
  height:170px;
  object-fit:cover;
  display:block;
  transform: scale(1.01);
  transition: transform var(--dur-2) var(--ease), filter var(--dur-2) var(--ease);
}

.collectionCard:hover img{
  transform: scale(1.04);
  filter: saturate(1.04) contrast(1.02);
}

.collectionCard span{
  display:block;
  padding:10px 12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:12px;
}

/* =========================
   PRODUCT GRID
========================= */

.productGrid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
}

.productCard{
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  overflow:hidden;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(247,248,251,1));
  position:relative;
}

.productCard::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(520px 220px at 20% 0%, rgba(34,197,94,.08), transparent 55%);
  opacity:0;
  transition: opacity var(--dur-2) var(--ease);
  pointer-events:none;
}

.productCard:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(15,23,42,.16);
}

.productCard:hover::after{ opacity:1; }

.productCard img{
  width:100%;
  height:230px;
  object-fit:contain;
  background:#fff;
  padding:14px;
  transition: transform var(--dur-2) var(--ease);
}

.productCard:hover img{
  transform: translateY(-2px) scale(1.02);
}

.productCard .info{
  padding:12px;
  font-size:13px;
}

/* =========================
   PAGE NARROW
========================= */

.narrow{ max-width:820px; margin:auto; }

/* =========================
   FOOTER
========================= */

.footer{
  background: #f7f8fb;
  border-top:1px solid rgba(15,23,42,.08);
  margin-top:64px;
}

.footerTop{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:28px;
  padding:54px 0;
}

.footerCol{ font-size:13px; }

.footerTitle{
  font-weight:900;
  margin-bottom:14px;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:12px;
}

.footerCol a{
  display:block;
  margin-bottom:10px;
  color:#0b1220;
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}

.footerCol a:hover{
  opacity:.72;
  transform: translateX(1px);
}

.footerBottom{
  text-align:center;
  padding:20px 0;
  border-top:1px solid rgba(15,23,42,.08);
  font-size:12px;
  color:var(--muted);
}

/* =========================
   MEGA MENU (alinhado ao header)
========================= */

.nav-item{ position: static; }

.mega-menu{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  width:100%;
  background:#fff;
  border-top:1px solid rgba(15,23,42,.08);
  box-shadow:0 24px 48px rgba(2,6,23,.14);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:all .25s var(--ease);
  z-index:1000;
}

.has-mega:hover .mega-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.mega-container{
  width:1200px;
  max-width:92%;
  margin:auto;
  padding:38px 0;
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1.2fr;
  gap:36px;
}

.mega-col h4{
  margin:0 0 12px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#0b1220;
}

.mega-col a{
  display:block;
  margin-bottom:9px;
  font-size:14px;
  color:#0b1220;
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}

.mega-col a:hover{
  opacity:.72;
  transform: translateX(1px);
}

.mega-image img{
  width:100%;
  border-radius:12px;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1000px){
  .nav{ display:none; }
  .heroContent h1{ font-size:40px; }
  .heroSlide{ height:480px; }
  .heroStats{ grid-template-columns: 1fr; max-width:360px; }

  .featureGrid{ grid-template-columns: 1fr; }
  .collectionGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .productGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footerTop{ grid-template-columns:1fr; }
}

@media (max-width: 600px){
  .heroContent h1{ font-size:30px; }
  .collectionGrid, .productGrid{ grid-template-columns:1fr; }
}