/* Black Friday 2026 · Aura Essenza — capa temporal sobre la portada (20 nov – 30 nov) + kit de la semana */
:root { --bf-red: #D4202C; --bf-red-2: #FF3B3B; --bf-red-deep: #7A0D14; --bf-bar: 36px; }

/* barra superior en movimiento */
.bf-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 110; height: var(--bf-bar); overflow: hidden; white-space: nowrap; display: flex; align-items: center;
  background: linear-gradient(90deg, var(--bf-red-deep), var(--bf-red) 30%, var(--bf-red-2) 50%, var(--bf-red) 70%, var(--bf-red-deep)); background-size: 200% 100%; animation: bf-sheen 6s linear infinite; color: #fff; }
.bf-bar-track { display: inline-flex; animation: bf-marquee 30s linear infinite; }
.bf-bar-track span { font-family: var(--sans); font-size: .68rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; padding: 0 1.6rem; display: inline-flex; align-items: center; gap: 1.6rem; }
.bf-bar-track span::after { content: "✦"; font-size: .6rem; color: var(--gold-2, #E6CB8B); }
.bf-bar-track span b { font-weight: 600; color: #fff; }
/* bf.js decide la fase por fecha: sin clase en <html> no se ve nada de Black Friday */
.bf-bar, .bf, .bf-offers { display: none; }
.bf-teaser .bf-bar, .bf-live .bf-bar { display: flex; }
.bf-teaser .bf, .bf-live .bf, .bf-live .bf-offers { display: block; }
.bf-teaser .nav, .bf-live .nav { top: var(--bf-bar); }
.bf-teaser .nav-mobile-menu, .bf-live .nav-mobile-menu { top: calc(60px + var(--bf-bar)); }
@keyframes bf-marquee { to { transform: translateX(-50%); } }
@keyframes bf-sheen { to { background-position: -200% 0; } }

/* bloque grande de Black Friday */
.bf { position: relative; overflow: hidden; padding: clamp(4rem, 9vw, 7.5rem) var(--gutter); text-align: center; isolation: isolate;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(212,32,44,.28), transparent 70%), #0B0B0C; border-block: 1px solid rgba(212,32,44,.35); }
.bf::before { content: ""; position: absolute; inset: -40%; z-index: -1; background: conic-gradient(from 0deg, transparent 0 60%, rgba(255,59,59,.16) 70%, transparent 80%); animation: bf-rotate 14s linear infinite; }
@keyframes bf-rotate { to { transform: rotate(360deg); } }
.bf-kicker { font-family: var(--sans); font-size: .72rem; letter-spacing: .34em; text-transform: uppercase; color: var(--gold, #C9A55C); }
.bf-title { font-family: var(--sans); font-weight: 600; text-transform: uppercase; line-height: .86; letter-spacing: -.02em; margin: 1.2rem 0 1.4rem;
  font-size: clamp(3.6rem, 13vw, 11.5rem);
  background: linear-gradient(100deg, #7A0D14 0%, #D4202C 22%, #FF5A4F 40%, #FFD7CF 50%, #FF5A4F 60%, #D4202C 78%, #7A0D14 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: bf-shimmer 4.5s linear infinite;
  filter: drop-shadow(0 0 28px rgba(212,32,44,.45)); }
.bf-title span { display: block; }
@keyframes bf-shimmer { to { background-position: -250% 0; } }
.bf-dates { display: inline-flex; align-items: center; gap: .9rem; font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 3vw, 2.2rem); color: var(--cream, #F3ECDD); }
.bf-dates i { width: 40px; height: 1px; background: var(--bf-red); display: inline-block; }

.bf-cd-label { margin-top: 2.4rem; font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: #E9A4A4; }
.bf-cd { display: flex; justify-content: center; gap: clamp(.5rem, 1.5vw, 1rem); margin: .9rem 0 2.4rem; }
.bf-cd-box { width: clamp(70px, 10vw, 118px); padding: 1rem 0 .8rem; background: rgba(122,13,20,.28); border: 1px solid rgba(255,59,59,.45); }
.bf-cd-n { display: block; font-family: var(--serif); font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1; color: #fff; }
.bf-cd-n.tick { animation: bf-tick .6s var(--ease-out, ease); }
@keyframes bf-tick { from { transform: translateY(-30%); opacity: 0; } to { transform: none; opacity: 1; } }
.bf-cd-l { display: block; margin-top: .45rem; font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; color: #E9A4A4; }

.bf-cta { position: relative; overflow: hidden; display: inline-block; background: var(--bf-red); color: #fff; font-size: .74rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; padding: 1.15rem 2.2rem; transition: transform .4s var(--ease-out, ease), box-shadow .4s; }
.bf-cta::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: bf-swipe 3.2s ease-in-out infinite; }
.bf-cta:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -14px rgba(255,59,59,.8); }
@keyframes bf-swipe { 0%, 55% { left: -60%; } 100% { left: 130%; } }

/* más pedidos en oferta */
.bf-offers { padding: clamp(4rem, 8vw, 6.5rem) var(--gutter); }
.bf-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.6rem; }
.bf-head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1; }
.bf-head h2 em { color: var(--gold-2, #E6CB8B); }
.bf-head .bf-tagline { font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: var(--bf-red-2); }
.bf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.bf-card { position: relative; display: block; background: #111114; border: 1px solid var(--line, rgba(243,236,221,.14)); padding: 1rem 1rem 1.3rem; overflow: hidden; transition: transform .6s var(--ease-out, ease), border-color .6s, box-shadow .6s; }
.bf-card:hover { transform: translateY(-8px); border-color: rgba(255,59,59,.55); box-shadow: 0 30px 60px -30px rgba(212,32,44,.55); }
.bf-ph { position: relative; aspect-ratio: 3 / 4; display: grid; place-items: center; margin-bottom: 1rem; overflow: hidden; background: radial-gradient(circle at 50% 60%, rgba(201,165,92,.16), transparent 62%); }
.bf-ph img { width: 82%; height: 82%; object-fit: contain; transition: transform .9s var(--ease-out, ease); }
.bf-card:hover .bf-ph img { transform: rotate(-6deg) scale(1.07); }
.bf-badge { position: absolute; top: .8rem; left: .8rem; z-index: 2; overflow: hidden; font-size: .55rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; padding: .4rem .55rem; background: var(--bf-red); color: #fff; }
.bf-badge::after { content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); animation: bf-swipe 2.6s ease-in-out infinite; }
.bf-off { position: absolute; top: .7rem; right: .7rem; z-index: 2; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 1.05rem; color: #fff; background: var(--bf-red); animation: bf-pulse 2.4s ease-in-out infinite; }
@keyframes bf-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,59,59,.55); } 50% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(255,59,59,0); } }
.bf-brand { font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--cream-3, #8C8474); }
.bf-name { font-family: var(--serif); font-size: 1.45rem; line-height: 1.1; margin: .35rem 0 .55rem; color: var(--cream, #F3ECDD); }
.bf-price { font-size: .95rem; }
.bf-price b { color: var(--bf-red-2); font-weight: 500; margin-right: .5rem; }
.bf-price s { color: var(--cream-3, #8C8474); }
.bf-ml { display: block; margin-top: .45rem; font-size: .7rem; letter-spacing: .08em; color: var(--gold, #C9A55C); }

/* kit de la semana */
.bf-kit-wrap { padding: 0 var(--gutter) clamp(4rem, 8vw, 6.5rem); }
.bf-kit { display: grid; grid-template-columns: 1.1fr 1fr; position: relative; overflow: hidden; border: 1px solid rgba(201,165,92,.4); }
.bf-kit-img { position: relative; overflow: hidden; min-height: 400px; background: #050505; }
.bf-kit-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.6s var(--ease-out, ease); }
.bf-kit:hover .bf-kit-img img { transform: scale(1.12) rotate(-.6deg); }
.bf-kit-body { padding: clamp(2.2rem, 5vw, 3.6rem); display: flex; flex-direction: column; justify-content: center; background: #111114; }
.bf-kit-body .bf-kicker { font-size: .66rem; }
.bf-kit-body h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.05; margin: 1rem 0 .9rem; color: var(--cream, #F3ECDD); }
.bf-kit-body h3 em { color: var(--gold-2, #E6CB8B); }
.bf-kit-body p { color: var(--cream-2, #CFC6B4); line-height: 1.7; font-size: .95rem; max-width: 420px; margin-bottom: 1.8rem; }
.bf-kit-cta { align-self: flex-start; display: inline-block; background: var(--gold, #C9A55C); color: #0B0B0C; font-size: .7rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; padding: 1rem 1.8rem; transition: transform .4s var(--ease-out, ease); }
.bf-kit-cta:hover { transform: translateY(-3px); }

.bf-reveal { opacity: 0; transform: translateY(36px); transition: opacity 1.1s var(--ease-out, ease), transform 1.1s var(--ease-out, ease); }
.bf-reveal.in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  :root { --bf-bar: 32px; }
  .bf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .bf-card { padding: .7rem .7rem 1rem; }
  .bf-badge { font-size: .5rem; letter-spacing: .12em; top: .55rem; left: .55rem; }
  .bf-off { width: 38px; height: 38px; font-size: .9rem; top: .5rem; right: .5rem; }
  .bf-ph { margin-top: 1.4rem; }
  .bf-name { font-size: 1.2rem; }
  .bf-kit { grid-template-columns: 1fr; }
  .bf-kit-img { min-height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  .bf-bar, .bf-bar-track, .bf::before, .bf-title, .bf-cta::after, .bf-badge::after, .bf-off { animation: none !important; }
  .bf-reveal { opacity: 1; transform: none; }
}