/* Identidad BAKU: negro, grises de concreto y naranja del logo (@baku.cba). Va al final: pisa los tokens base. */
:root {
  --accent: #ff7a00;
  --accent-2: #ffb000;
  --brown: #0b0b0c;
  --brown-d: #ff7a00;
  --paper: #ffffff;
  --concrete: #e9e8e6;
}
::selection { background: var(--accent); color: #0b0b0c; }

/* ---- Logo ---- */
.logo { font-weight: 900; font-style: italic; letter-spacing: -.03em; position: relative; padding-right: 14px; }
.logo::after { content: '✦'; position: absolute; right: 0; top: -.05em; font-size: .38em; font-style: normal; color: var(--accent); transition: transform .6s var(--ease); }
.logo:hover::after { transform: rotate(180deg) scale(1.3); }
.footer-brand span, .ig-logo { letter-spacing: -.05em; }
.ig-logo { color: var(--ink); }
.ig-logo::after { content: '✦'; color: var(--accent); font-size: .3em; vertical-align: top; margin-left: .1em; }
.ig-icon, .ig-badge { background: var(--ink); }
.ig-badge b { color: var(--accent); }
.ig-follow::before { content: '✦'; color: var(--accent); }

/* ---- Hero con foto real ---- */
.hero-bg {
  background: url('../assets/baku/web/baku-09.jpg') center 40% / cover no-repeat, #1b1b1d;
}
.hero-overlay { background: linear-gradient(90deg, rgba(5,5,6,.82) 0%, rgba(5,5,6,.45) 45%, rgba(5,5,6,.15) 100%), linear-gradient(0deg, rgba(5,5,6,.7), transparent 45%); }
.hero-copy { position: absolute; left: clamp(24px, 5vw, 84px); bottom: 13vh; max-width: min(720px, 90vw); }
.hero-kicker { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.hero-kicker i { font-style: normal; color: var(--accent); }
.hero-title { font-size: clamp(44px, 7.4vw, 118px); font-weight: 900; line-height: .92; letter-spacing: -.045em; text-transform: uppercase; }
.hero-title em { font-style: italic; color: var(--accent); }
.hero-sub { margin-top: 22px; font-size: clamp(14px, 1.3vw, 18px); line-height: 1.55; color: rgba(255,255,255,.82); max-width: 46ch; }
.hero-cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.btn-light, .btn-ghost { padding: 16px 28px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; border: 1.5px solid #fff; transition: background .4s var(--ease), color .4s, transform .4s var(--ease), border-color .4s; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-3px); }
.btn-ghost { color: #fff; }
.btn-ghost:hover { background: #fff; color: var(--ink); transform: translateY(-3px); }
.stores { grid-template-columns: 1fr; gap: 26px; right: 5vw; top: auto; bottom: 13vh; text-align: right; }
.stores li > span { font-size: 10.5px; letter-spacing: .16em; color: var(--accent); margin-bottom: 6px; }
.stores li:hover { transform: translateX(-8px); }
.scroll-cue { left: auto; right: 5vw; transform: none; bottom: 26px; }
@media (max-width: 900px) {
  .hero-copy { bottom: 12vh; }
  .stores { display: none; }
  .scroll-cue { display: none; }
}

/* ---- Botones y etiquetas ---- */
.btn-brown:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #0b0b0c; }
.btn-solid:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #0b0b0c; }
.tag-new { background: var(--accent); color: #0b0b0c; }
.tag-out { background: #1b1b1d; }
.btn-outline::before { background: var(--accent); }
.btn-outline:hover { color: #0b0b0c; }
.card-add { background: var(--ink); }
.card-add:hover { background: var(--accent); color: #0b0b0c; }
.card-media { background: #f1f0ee; }
.card-ph { color: #d4d2ce; }
.cat::after { background: linear-gradient(transparent 40%, rgba(0,0,0,.6)); }
.cat-body em { background: var(--accent); color: #0b0b0c; }
.cat:hover .cat-body em { background: #fff; }

/* ---- Secciones ---- */
.perk svg { stroke: var(--ink); }
.perk:hover svg { stroke: var(--accent); }
.join { background: #0b0b0c; }
.join h2 { color: #fff; }
.join-form:focus-within { border-color: var(--accent); }
.join-form button:hover { color: var(--accent); }
.ig { background: #eceae6; }
.ig-photo { background: #2a2a2e; }
.ig-item.is-pol .ig-float { background: #f6f4f0; }

/* ---- Opiniones ---- */
.rv-say { background: #0b0b0c; border-color: #0b0b0c; color: #fff; align-content: center; min-height: 170px; }
.rv-say .rv-logo { font-weight: 900; font-style: italic; font-size: 22px; letter-spacing: -.04em; color: var(--accent); }
.rv-say p { color: #fff; font-size: 16px; font-weight: 700; line-height: 1.35; text-transform: uppercase; letter-spacing: -.01em; }
.rv-say:hover { background: #151517; border-color: var(--accent); }
.rv-photo { background: #2a2a2e; }
.rv-pill:hover { background: #151517; }
.rv-faces i:first-child { background: var(--accent); }
.rv-people i:nth-child(1) { --c: linear-gradient(135deg, #ff9a3c, #ff7a00); }
.rv-people i:nth-child(2) { --c: linear-gradient(135deg, #3a3a3e, #0b0b0c); }
.rv-people i:nth-child(3) { --c: linear-gradient(135deg, #cfcdc8, #8d8b86); }
.rv-people i:nth-child(4) { --c: linear-gradient(135deg, #ffb000, #ff7a00); }
.rv-people i:nth-child(5) { --c: linear-gradient(135deg, #5a5a5e, #1b1b1d); }
.rv-stars { color: var(--accent); }

/* ---- Catálogo, producto y checkout ---- */
.mega-media span { position: relative; overflow: hidden; }
.mega-media span img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.co-steps .done i { background: var(--ink); border-color: var(--ink); }
.pay-head em { background: var(--accent); color: #0b0b0c; }
.alias-box { background: #f3f1ed; border-color: #bdb8ae; }
.tick { background: var(--ink); }
.tick svg { stroke: var(--accent); }
.wa-btn { background: var(--ink); }
.wa-btn:hover { background: var(--accent); color: #0b0b0c; box-shadow: none; }
.swatch { background: #151517; }

/* ---- Botón flotante: mensaje directo de Instagram ---- */
.wa-float { background: linear-gradient(45deg, #ffb000, #ff3d6e 55%, #7c3aed); animation: none; box-shadow: 0 10px 26px -8px rgba(255,61,110,.6); }
.wa-float svg { stroke: #fff; }

/* ---- Footer ---- */
.f-col a:hover { color: var(--accent); }
.to-top:hover { background: var(--accent); border-color: var(--accent); color: #0b0b0c; }
.f-social a:hover { background: var(--accent); color: #0b0b0c; border-color: var(--accent); }
.page-title { color: var(--ink); }

/* Fotos reales: cubrir el recuadro */
.card-media img, .pd-main img, .sr-img img, .ci-img img { object-fit: cover; padding: 0; }
.card-media { aspect-ratio: 1 / 1.25; }
.card:hover .card-media img { transform: scale(1.06); }