/* ============================================================
   RUPTEN — Estilo principal (público)
   Streetwear premium · vermelho / preto / branco
   ============================================================ */

:root {
  --red:    #D60000;
  --red-dk: #9e0000;
  --black:  #0A0A0A;
  --ink:    #141414;
  --white:  #FFFFFF;
  --grey:   #8a8a8a;
  --grey-dk:#202020;
  --line:   rgba(255,255,255,.10);
  --ease:   cubic-bezier(.16,1,.3,1);
  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --font-cond:    "Oswald", "Arial Narrow", sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--black);
  color:var(--white);
  font-family:var(--font-body);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Grão de fundo */
body::before{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ width:min(1280px,92%); margin-inline:auto; }
section{ position:relative; }

h1,h2,h3{ font-family:var(--font-display); text-transform:uppercase; line-height:.95; letter-spacing:-.01em; }
.cond{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.04em; }

/* ─── Botões ────────────────────────────────────────────── */
.btn{
  --bg:var(--red); --fg:#fff;
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--bg); color:var(--fg);
  font-family:var(--font-cond); text-transform:uppercase; font-weight:600;
  letter-spacing:.08em; font-size:.92rem;
  padding:.95rem 2rem; border:2px solid var(--bg);
  cursor:pointer; position:relative; overflow:hidden;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.btn::after{
  content:""; position:absolute; inset:0; background:var(--white);
  transform:translateY(101%); transition:transform .45s var(--ease); z-index:-1;
}
.btn:hover{ color:var(--black); border-color:var(--white); }
.btn:hover::after{ transform:translateY(0); }
.btn-ghost{ --bg:transparent; --fg:#fff; border-color:var(--white); }
.btn-ghost::after{ background:var(--red); }
.btn-ghost:hover{ color:#fff; border-color:var(--red); }
.btn:disabled{ opacity:.35; pointer-events:none; }

/* ─── Header ────────────────────────────────────────────── */
.site-header{
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(1rem,4vw,3rem);
  transition:background .4s var(--ease), padding .4s var(--ease);
  mix-blend-mode:difference;
}
.site-header.scrolled{
  mix-blend-mode:normal;
  background:rgba(10,10,10,.85); backdrop-filter:blur(14px);
  padding-block:.7rem; border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:.7rem; font-family:var(--font-display);
  font-size:1.5rem; letter-spacing:.02em; }
.brand img{ height:34px; width:auto; }
.nav{ display:flex; align-items:center; gap:2rem; }
.nav a{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.08em;
  font-size:.95rem; position:relative; padding:.2rem 0; }
.nav a::after{ content:""; position:absolute; left:0; bottom:-3px; height:2px; width:0;
  background:var(--red); transition:width .35s var(--ease); }
.nav a:hover::after, .nav a.active::after{ width:100%; }
.burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; }
.burger span{ width:26px; height:2px; background:#fff; transition:.3s; }

/* ─── Hero ──────────────────────────────────────────────── */
.hero{
  min-height:100vh; display:flex; align-items:center;
  position:relative; overflow:hidden;
  background:radial-gradient(120% 120% at 70% 10%, #1a1a1a 0%, var(--black) 55%);
}
.hero-bg{ position:absolute; inset:0; object-fit:cover; width:100%; height:100%;
  opacity:.4; filter:grayscale(.3) contrast(1.1); }
.hero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, var(--black) 100%); }
.hero .container{ position:relative; z-index:2; }
.hero-kicker{ font-family:var(--font-cond); color:var(--red); letter-spacing:.35em;
  text-transform:uppercase; font-size:.85rem; margin-bottom:1rem; }
.hero h1{ font-size:clamp(4rem,16vw,13rem); }
.hero h1 .stroke{ -webkit-text-stroke:2px #fff; color:transparent; }
.hero-slogan{ font-family:var(--font-cond); font-size:clamp(1.1rem,3vw,1.8rem);
  text-transform:uppercase; letter-spacing:.15em; margin:1rem 0 2.5rem; color:#cfcfcf; }
.hero-slogan b{ color:var(--red); }
.scroll-cue{ position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  font-family:var(--font-cond); letter-spacing:.2em; font-size:.75rem; color:var(--grey);
  z-index:3; }
.scroll-cue::after{ content:""; display:block; width:1px; height:40px; background:var(--grey);
  margin:.6rem auto 0; animation:cue 1.6s var(--ease) infinite; transform-origin:top; }
@keyframes cue{ 0%,100%{ transform:scaleY(.3);} 50%{ transform:scaleY(1);} }

/* ─── Secção título ─────────────────────────────────────── */
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:1rem; margin-bottom:2.5rem; flex-wrap:wrap; }
.sec-head h2{ font-size:clamp(2.2rem,6vw,4.5rem); }
.sec-head .num{ font-family:var(--font-cond); color:var(--red); letter-spacing:.3em;
  font-size:.8rem; text-transform:uppercase; }
.pad{ padding-block:clamp(4rem,9vw,8rem); }

/* ─── Grelha de produtos ────────────────────────────────── */
.grid{ display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.card{ background:var(--ink); border:1px solid var(--line); position:relative;
  overflow:hidden; transition:transform .5s var(--ease), border-color .4s; }
.card:hover{ transform:translateY(-6px); border-color:var(--red); }
.card-media{ aspect-ratio:3/4; overflow:hidden; position:relative; background:#161616; }
.card-media img{ width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease), filter .5s; }
.card:hover .card-media img{ transform:scale(1.06); }
.card-ph{ display:flex; align-items:center; justify-content:center; height:100%;
  font-family:var(--font-display); font-size:3rem; color:#2a2a2a; }
.badge{ position:absolute; top:.8rem; left:.8rem; z-index:3;
  font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.1em;
  font-size:.7rem; padding:.3rem .7rem; }
.badge-soldout{ background:var(--red); color:#fff; }
.badge-coming{ background:#fff; color:#000; }
.badge-feat{ background:#000; color:#fff; border:1px solid var(--red); }
.card-body{ padding:1.1rem 1.2rem 1.4rem; }
.card-cat{ font-family:var(--font-cond); color:var(--grey); text-transform:uppercase;
  letter-spacing:.12em; font-size:.72rem; }
.card-title{ font-family:var(--font-display); text-transform:uppercase;
  font-size:1.05rem; margin:.3rem 0 .5rem; }
.card-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:.8rem; }
.price{ font-family:var(--font-cond); font-size:1.25rem; font-weight:700; }
.card-link{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.08em;
  font-size:.8rem; color:var(--red); }
.card-link:hover{ text-decoration:underline; }

/* ─── Banner filosofia ──────────────────────────────────── */
.philosophy{ background:var(--red); color:#fff; overflow:hidden; }
.philosophy .container{ position:relative; z-index:2; }
.philosophy p{ font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(1.8rem,5vw,4rem); line-height:1.05; max-width:18ch; }
.philosophy .ghost{ position:absolute; right:-2%; top:50%; transform:translateY(-50%);
  font-family:var(--font-display); font-size:clamp(8rem,28vw,24rem); color:rgba(0,0,0,.12);
  z-index:1; pointer-events:none; line-height:1; }

/* ─── Newsletter / social ───────────────────────────────── */
.news{ display:grid; gap:3rem; grid-template-columns:1fr 1fr; align-items:center; }
.news h2{ font-size:clamp(2rem,5vw,3.5rem); }
.news form{ display:flex; gap:.8rem; margin-top:1.5rem; flex-wrap:wrap; }
.input{ flex:1 1 240px; background:transparent; border:2px solid var(--line);
  color:#fff; padding:.95rem 1.2rem; font-family:var(--font-cond); letter-spacing:.05em;
  font-size:1rem; transition:border-color .3s; }
.input:focus{ outline:none; border-color:var(--red); }
.socials{ display:flex; gap:1.2rem; margin-top:1.5rem; }
.socials a{ width:48px; height:48px; border:1px solid var(--line); display:grid;
  place-items:center; font-size:1.2rem; transition:.35s var(--ease); }
.socials a:hover{ background:var(--red); border-color:var(--red); transform:rotate(-8deg); }

/* ─── Filtros coleção ───────────────────────────────────── */
.toolbar{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center;
  margin-bottom:2rem; padding-bottom:1.5rem; border-bottom:1px solid var(--line); }
.chips{ display:flex; gap:.5rem; flex-wrap:wrap; }
.chip{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.06em;
  font-size:.82rem; padding:.5rem 1rem; border:1px solid var(--line); cursor:pointer;
  transition:.3s; background:transparent; color:#fff; }
.chip:hover, .chip.active{ background:#fff; color:#000; border-color:#fff; }
.select, .search-input{ background:var(--ink); border:1px solid var(--line); color:#fff;
  padding:.6rem 1rem; font-family:var(--font-cond); letter-spacing:.04em; }
.search-input{ min-width:220px; }
.toolbar .spacer{ margin-left:auto; }

/* ─── Página de produto ─────────────────────────────────── */
.product-wrap{ display:grid; gap:3rem; grid-template-columns:1.1fr 1fr; padding-top:7rem; }
.gallery-main{ aspect-ratio:3/4; background:#161616; overflow:hidden; border:1px solid var(--line);
  cursor:zoom-in; position:relative; }
.gallery-main img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.thumbs{ display:flex; gap:.6rem; margin-top:.8rem; flex-wrap:wrap; }
.thumbs img{ width:70px; height:90px; object-fit:cover; border:1px solid var(--line);
  cursor:pointer; opacity:.6; transition:.3s; }
.thumbs img.active, .thumbs img:hover{ opacity:1; border-color:var(--red); }
.product-info h1{ font-size:clamp(2.2rem,5vw,3.5rem); margin:.4rem 0 1rem; }
.product-meta{ display:flex; gap:1.5rem; align-items:center; margin:1rem 0; flex-wrap:wrap; }
.product-price{ font-family:var(--font-cond); font-size:2rem; font-weight:700; color:var(--red); }
.sizes{ display:flex; gap:.5rem; flex-wrap:wrap; margin:1rem 0 1.5rem; }
.size{ min-width:48px; text-align:center; padding:.6rem; border:1px solid var(--line);
  font-family:var(--font-cond); cursor:pointer; transition:.3s; }
.size:hover{ background:#fff; color:#000; }
.prose{ color:#cfcfcf; max-width:60ch; }
.prose h2{ font-size:1.4rem; margin:1.4rem 0 .6rem; color:#fff; }
.prose p{ margin-bottom:1rem; }
.detail-row{ display:flex; gap:.6rem; font-family:var(--font-cond); letter-spacing:.04em;
  padding:.5rem 0; border-bottom:1px solid var(--line); }
.detail-row span:first-child{ color:var(--grey); min-width:140px; text-transform:uppercase; font-size:.8rem; }

/* ─── Lightbox ──────────────────────────────────────────── */
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.95); z-index:5000;
  display:none; align-items:center; justify-content:center; padding:2rem; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:90vw; max-height:90vh; object-fit:contain; }
.lightbox .close{ position:absolute; top:1.5rem; right:2rem; font-size:2rem; cursor:pointer; }

/* ─── Sobre / Timeline ──────────────────────────────────── */
.timeline{ position:relative; margin-top:3rem; padding-left:2rem; border-left:2px solid var(--red); }
.tl-item{ position:relative; padding:0 0 2.5rem 1.5rem; }
.tl-item::before{ content:""; position:absolute; left:-2.55rem; top:.2rem; width:14px; height:14px;
  background:var(--red); border-radius:50%; }
.tl-year{ font-family:var(--font-display); font-size:1.6rem; color:var(--red); }

/* ─── Contactos ─────────────────────────────────────────── */
.contact-grid{ display:grid; gap:3rem; grid-template-columns:1fr 1fr; padding-top:7rem; }
.field{ margin-bottom:1.2rem; }
.field label{ display:block; font-family:var(--font-cond); text-transform:uppercase;
  letter-spacing:.08em; font-size:.8rem; margin-bottom:.4rem; color:var(--grey); }
.field input, .field textarea, .field select{ width:100%; background:var(--ink);
  border:1px solid var(--line); color:#fff; padding:.85rem 1rem; font-family:var(--font-body);
  font-size:1rem; transition:border-color .3s; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--red); }
.info-row{ display:flex; gap:1rem; align-items:flex-start; padding:1rem 0; border-bottom:1px solid var(--line); }
.info-row i{ color:var(--red); font-size:1.2rem; width:24px; }
.map{ margin-top:2rem; border:1px solid var(--line); }
.map iframe{ width:100%; height:280px; border:0; filter:grayscale(1) invert(.9) contrast(.9); }

/* ─── Footer ────────────────────────────────────────────── */
.site-footer{ border-top:1px solid var(--line); padding-block:3rem 2rem; margin-top:4rem; }
.footer-top{ display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:2rem; }
.footer-brand{ font-family:var(--font-display); font-size:2.5rem; }
.footer-cols{ display:flex; gap:3rem; flex-wrap:wrap; }
.footer-cols h4{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.1em;
  color:var(--grey); font-size:.8rem; margin-bottom:.8rem; }
.footer-cols a{ display:block; padding:.25rem 0; font-family:var(--font-cond); letter-spacing:.03em; }
.footer-cols a:hover{ color:var(--red); }
.footer-bottom{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--font-cond); letter-spacing:.05em; font-size:.82rem; color:var(--grey);
  border-top:1px solid var(--line); padding-top:1.5rem; }

/* ─── Flash ─────────────────────────────────────────────── */
.flash{ position:fixed; bottom:2rem; left:50%; transform:translateX(-50%); z-index:4000;
  padding:1rem 1.8rem; font-family:var(--font-cond); letter-spacing:.05em;
  animation:flashIn .4s var(--ease); }
.flash-success{ background:var(--red); color:#fff; }
.flash-error{ background:#fff; color:#000; }
@keyframes flashIn{ from{ transform:translate(-50%,120%);} to{ transform:translate(-50%,0);} }

/* ─── 404 / manutenção ──────────────────────────────────── */
.center-screen{ min-height:100vh; display:grid; place-items:center; text-align:center; padding:2rem; }
.center-screen h1{ font-size:clamp(5rem,20vw,16rem); color:var(--red); }

/* ─── Responsivo ────────────────────────────────────────── */
@media (max-width:900px){
  .product-wrap, .contact-grid, .news{ grid-template-columns:1fr; }
  .philosophy .ghost{ display:none; }
}
@media (max-width:760px){
  .nav{ position:fixed; inset:0 0 0 auto; width:min(80%,320px); background:var(--black);
    flex-direction:column; justify-content:center; gap:2rem; transform:translateX(100%);
    transition:transform .5s var(--ease); border-left:1px solid var(--line); }
  .nav.open{ transform:translateX(0); }
  .burger{ display:flex; z-index:1001; }
  .site-header{ mix-blend-mode:normal; }
}