/* =========================================================
   ARISTAS — Home (usa tokens/componentes de aristas.css)
   ========================================================= */

/* ---------- HERO ---------- */
.hero{background:var(--ink)}
.hero__img{width:100%;height:auto;max-height:80vh;object-fit:cover;display:block;margin:0 auto}
.herobar{display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap;padding:26px 40px;background:var(--white);border-bottom:1px solid var(--border)}
.herobar__line{margin:0;font-size:16px;color:var(--text-2)}
.herobar__line strong{color:var(--ink);font-weight:600}
.herobar__cta{display:flex;gap:12px}

/* ---------- TEASER (Gran Turismo) ---------- */
.teaser{display:grid;grid-template-columns:1.1fr .9fr;gap:0;align-items:stretch;max-width:var(--maxw);margin:0 auto}
.teaser__stage{position:relative;background:var(--white);display:flex;align-items:center;justify-content:center;padding:48px;border-right:1px solid var(--border)}
.teaser__stage img{width:100%;max-width:640px;transition:opacity .45s var(--ease)}
.teaser__chip{position:absolute;left:40px;bottom:34px;margin:0;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);border:1px solid var(--border);border-radius:99px;padding:6px 16px 6px 6px}
.teaser__chiptex{width:32px;height:32px;border-radius:50%;background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.teaser__chip figcaption{font-size:11px;letter-spacing:.05em;color:var(--ink);font-weight:500}
.teaser__panel{padding:72px 64px;display:flex;flex-direction:column;justify-content:center;background:var(--cream)}
.teaser__copy{color:var(--text-2);margin:14px 0 28px;max-width:42ch}
.teaser__group{margin-bottom:22px}
.teaser__lbl{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);font-weight:600;margin-bottom:12px}
.teaser__panel .btn{align-self:flex-start;margin-top:10px}

/* ---------- M² BAND (Sims) ---------- */
.m2band{background:var(--ink);color:#efe9df;text-align:center;padding:88px 0}
.m2band__inner{max-width:720px}
.m2band .section-title{color:#fff}
.m2band .eyebrow{color:var(--taupe)}
.m2band__copy{color:#c9c0b2;margin:14px auto 30px;max-width:52ch}
.m2chips{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:32px}
.m2chip{border:1px solid rgba(255,255,255,.28);background:transparent;color:#efe9df;border-radius:99px;padding:13px 26px;font-size:14px;transition:.25s var(--ease)}
.m2chip:hover{border-color:var(--taupe)}
.m2chip.is-sel{background:var(--taupe);border-color:var(--taupe);color:var(--ink)}
.m2band .btn--primary{background:#fff;color:var(--ink);border-color:#fff}
.m2band .btn--primary:hover{background:var(--taupe);border-color:var(--taupe)}

/* ---------- CATEGORÍAS ---------- */
.cats{padding:90px 40px}
.cats__head{margin-bottom:36px}
.cats__grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:16px}
.cat{position:relative;border-radius:6px;overflow:hidden;background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:22px;transition:.4s var(--ease)}
.cat::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(26,22,19,.55),rgba(26,22,19,0) 60%);transition:.4s var(--ease)}
.cat:hover::after{background:linear-gradient(to top,rgba(26,22,19,.7),rgba(26,22,19,.1) 70%)}
.cat--lg{grid-column:span 2}
.cat__name{position:relative;z-index:1;font-family:var(--display);text-transform:uppercase;letter-spacing:.02em;font-size:24px;color:#fff}

/* ---------- CONCEPTOS ---------- */
.concepts{padding:20px 0 90px}
.concepts__head{margin-bottom:30px}
.concepts__row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:var(--maxw);margin:0 auto;padding:0 40px}
.concept{position:relative;aspect-ratio:4/5;border-radius:6px;overflow:hidden;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;transition:.4s var(--ease)}
.concept::after{content:"";position:absolute;inset:0;background:rgba(26,22,19,.28);transition:.4s var(--ease)}
.concept:hover::after{background:rgba(26,22,19,.42)}
.concept:hover{transform:translateY(-4px)}
.concept__name{position:relative;z-index:1;font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:30px;color:#fff}
.concepts__hint{margin-top:8px}
.concepts__note{margin:8px 0 0;font-size:14px;color:var(--accent-ink);min-height:1.3em;transition:color .5s var(--ease)}
.concept{cursor:pointer}
.concept.is-active{transform:translateY(-4px)}
.concept.is-active::after{background:rgba(26,22,19,.1)}
.concept.is-active .concept__name{text-shadow:0 2px 14px rgba(0,0,0,.45)}

/* CAT-07 · elegir un concepto tiñe el ambiente de la página (prototipo) */
body.home{transition:background-color .6s var(--ease)}
.concepts{transition:background-color .6s var(--ease)}
body.home[data-concept="aura"]{background:#f1eadc}
body.home[data-concept="aura"] .concepts{background:#f1eadc}
body.home[data-concept="bold"]{background:#e6ddce}
body.home[data-concept="bold"] .concepts{background:#e6ddce}
body.home[data-concept="magno"]{background:#2a2420}
body.home[data-concept="magno"] .concepts{background:#2a2420}
body.home[data-concept="magno"] .concepts__head .section-title,
body.home[data-concept="magno"] .concepts__head .eyebrow{color:#f2ece1}
body.home[data-concept="magno"] .concepts__hint{color:#c9beac}
body.home[data-concept="magno"] .concepts__note{color:#d8cbb2}

/* ---------- SHOWROOM ---------- */
.showroom{background-size:cover;background-position:center;position:relative;padding:120px 40px;color:#fff}
.showroom::after{content:"";position:absolute;inset:0;background:rgba(26,22,19,.5)}
.showroom__inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto}
.showroom .section-title{color:#fff;max-width:14ch}
.showroom p{color:#e4ddd0;max-width:46ch;margin:12px 0 26px}
.eyebrow--light{color:var(--taupe)}

/* ---------- CTA FINAL ---------- */
.finalcta{background:var(--cream);text-align:center;padding:88px 40px}
.finalcta__inner{max-width:640px}
.finalcta p{color:var(--text-2);margin:12px auto 28px;max-width:46ch}
.finalcta__btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- BOTONES extra ---------- */
.btn--light{background:#fff;color:var(--ink);border-color:#fff}
.btn--light:hover{background:var(--taupe);border-color:var(--taupe);color:var(--ink)}
.btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn--outline-light:hover{border-color:#fff}
.finalcta .btn--light{background:var(--ink);color:#fff;border-color:var(--ink)}
.finalcta .btn--light:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.finalcta .btn--outline-light{color:var(--ink);border-color:var(--border)}
.finalcta .btn--outline-light:hover{border-color:var(--ink)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .teaser{grid-template-columns:1fr}
  .teaser__stage{border-right:none;border-bottom:1px solid var(--border)}
  .teaser__panel{padding:48px 32px}
  .cats__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
  .cat--lg{grid-column:span 2}
  .concepts__row{grid-template-columns:1fr;gap:12px}
  .mainbar__nav{display:none}
}
@media(max-width:640px){
  .herobar{flex-direction:column;gap:16px;text-align:center;padding:22px 20px}
  .cats,.showroom,.finalcta,.m2band{padding-left:20px;padding-right:20px}
  .cats__grid{grid-template-columns:1fr;grid-auto-rows:160px}
  .cat--lg{grid-column:span 1}
}