/* home.css — Home oficial + subpáginas de marca · Trois Market 2.0
   "Performance Editorial": near-black #0A0A0A, bone #F4F1EA, signal red #E8341C.
   Archivo Black / Fraunces. Hero soporta video o imagen. */

/* color y tipografía → assets/tokens.css (cargar antes que este archivo) */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Archivo',sans-serif;background:var(--bone);color:var(--negro);-webkit-font-smoothing:antialiased;line-height:1.5}
img,video,picture{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,border-color .3s}
.nav__inner{max-width:1500px;margin:0 auto;padding:20px 32px;display:flex;align-items:center;justify-content:space-between}
.nav.is-scrolled{background:rgba(244,241,234,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav__logo{font-family:'Archivo Black','Archivo',sans-serif;font-size:24px;letter-spacing:-.01em;color:var(--negro);transition:color .3s}
.nav.is-scrolled .nav__logo,.nav--solid .nav__logo{color:var(--negro)}
.nav__logo span{color:var(--rojo)}
.nav__links{display:flex;gap:30px;align-items:center}
.nav__link{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--negro);opacity:.9;transition:color .3s,opacity .2s}
.nav.is-scrolled .nav__link,.nav--solid .nav__link{color:var(--negro)}
.nav__link:hover{opacity:1;color:var(--rojo)}
.nav__cart{font-size:13px;font-weight:700;color:var(--negro)}
/* Blanco SOLO cuando el nav va translúcido sobre el hero oscuro (sin scroll) */
.nav--hero:not(.is-scrolled) .nav__logo,
.nav--hero:not(.is-scrolled) .nav__link,
.nav--hero:not(.is-scrolled) .nav__cart{color:#fff}
.nav.is-scrolled .nav__cart,.nav--solid .nav__cart{color:var(--negro)}
.nav--solid{position:sticky;background:rgba(244,241,234,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}

/* ---------- HERO ---------- */
.hero{position:relative;height:100vh;min-height:560px;overflow:hidden;display:flex;align-items:flex-end;background:var(--negro)}
.hero__media,.hero__media video,.hero__media img,.hero__media picture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.35) 0%,rgba(10,10,10,0) 35%,rgba(10,10,10,.65) 100%)}
.hero__content{position:relative;z-index:2;max-width:1500px;width:100%;margin:0 auto;padding:0 32px 9vh;color:#fff}
.hero__eyebrow{font-size:12px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:#fff;opacity:.85;margin-bottom:18px}
.hero__title{font-family:'Archivo Black','Archivo',sans-serif;font-size:clamp(48px,9vw,128px);line-height:.9;letter-spacing:-.02em;text-transform:uppercase}
.hero__title .accent{color:var(--rojo)}
.hero__sub{max-width:520px;margin:22px 0 28px;font-size:16px;opacity:.92}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;font-weight:600;font-size:14px;padding:15px 30px;border-radius:2px;transition:.15s;cursor:pointer;border:1px solid transparent}
.btn--solid{background:var(--rojo);color:#fff}.btn--solid:hover{background:#fff;color:var(--negro)}
.btn--ghost{border-color:rgba(255,255,255,.6);color:#fff}.btn--ghost:hover{background:#fff;color:var(--negro);border-color:#fff}
.btn--dark{background:var(--negro);color:#fff}.btn--dark:hover{background:var(--rojo)}

/* ---------- MARQUEE ---------- */
.marquee{background:var(--negro);color:var(--bone);overflow:hidden;padding:16px 0;white-space:nowrap}
.marquee__track{display:inline-flex;gap:28px;align-items:center;animation:marq 30s linear infinite;font-family:'Archivo Black','Archivo',sans-serif;font-size:15px;letter-spacing:.12em}
.marquee__dot{color:var(--rojo)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- SECCIONES ---------- */
.section{max-width:1500px;margin:0 auto;padding:80px 32px}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:34px;flex-wrap:wrap;gap:14px}
.section__title{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(30px,4vw,52px);line-height:1;letter-spacing:-.02em}
.section__link{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--rojo)}
.section__link:hover{text-decoration:underline}

/* ---------- MARCAS (banners) ---------- */
.brands{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.brandcard{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:6px;background:var(--negro);display:block}
.brandcard.tall{grid-row:span 2;aspect-ratio:auto}
.brandcard__media,.brandcard__media img,.brandcard__media video,.brandcard__media picture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.brandcard:hover .brandcard__media img,.brandcard:hover .brandcard__media video{transform:scale(1.05)}
.brandcard__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0) 40%,rgba(10,10,10,.7) 100%)}
.brandcard__label{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 22px;color:#fff;display:flex;justify-content:space-between;align-items:flex-end}
.brandcard__name{font-family:'Archivo Black','Archivo',sans-serif;font-size:22px;letter-spacing:-.01em}
.brandcard__count{font-size:11px;opacity:.85;letter-spacing:.08em}
.brandcard__arrow{font-size:18px}

/* ---------- GRILLA DE PRODUCTOS ---------- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:28px 22px}
.pcard{display:flex;flex-direction:column}
.pcard__media{position:relative;aspect-ratio:1/1;background:transparent;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.pcard__media .layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:opacity .35s ease}
.pcard__alt{opacity:0}
.pcard:hover .pcard__cover{opacity:0}.pcard:hover .pcard__alt{opacity:1}
.pcard__ph{color:#cabfae;font-size:12px}
.pcard__brand{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:12px 0 4px}
.pcard__name{font-size:15px;font-weight:600;line-height:1.25;min-height:38px}
.pcard__foot{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px}
.pcard__price{font-size:15px;font-weight:600}.pcard__price.sin{font-size:12px;color:var(--rojo)}
.pcard__cat{font-size:11px;color:var(--muted)}

/* ---------- BANNER FRANJA ---------- */
.stripe{position:relative;min-height:60vh;display:flex;align-items:center;overflow:hidden;background:var(--negro);color:#fff;margin:0}
.stripe__media,.stripe__media img,.stripe__media video,.stripe__media picture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stripe__overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.75) 0%,rgba(10,10,10,.25) 60%,rgba(10,10,10,0) 100%)}
.stripe__content{position:relative;z-index:2;max-width:1500px;margin:0 auto;padding:60px 32px;width:100%}
.stripe__eyebrow{font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;opacity:.85;margin-bottom:12px}
.stripe__title{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(28px,4vw,48px);line-height:1.05;margin-bottom:16px;max-width:560px}
.stripe__desc{max-width:460px;opacity:.92;margin-bottom:24px}

/* ---------- FOOTER ---------- */
.footer{background:var(--negro);color:var(--bone);padding:64px 32px 32px}
.footer__inner{max-width:1500px;margin:0 auto}
.footer__top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:40px;padding-bottom:40px;border-bottom:1px solid #2a2a2a}
.footer__logo{font-family:'Archivo Black','Archivo',sans-serif;font-size:26px}.footer__logo span{color:var(--rojo)}
.footer__tagline{color:var(--muted);font-size:13px;margin-top:8px}
.footer__cols{display:flex;gap:60px;flex-wrap:wrap}
.footer__col h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;color:#fff}
.footer__col a{display:block;color:var(--muted);font-size:14px;margin-bottom:9px}.footer__col a:hover{color:#fff}
.footer__bottom{display:flex;justify-content:space-between;padding-top:24px;font-size:12px;color:var(--muted);flex-wrap:wrap;gap:8px}

@media(max-width:900px){
  .brands{grid-template-columns:repeat(2,1fr)}
  .brandcard.tall{grid-row:span 1;aspect-ratio:4/3}
  .section{padding:56px 18px}
  .nav__links{gap:18px}
  .nav__link{font-size:12px}
}
@media(max-width:600px){
  .nav__inner{padding:16px 18px}
  .nav__links a:not(.nav__cta){display:none}
  .hero__content{padding-bottom:12vh}
  .brands{grid-template-columns:1fr}
  .pgrid{grid-template-columns:repeat(2,1fr);gap:18px 12px}
  .pcard__name{font-size:13px;min-height:34px}
}