/* InfoBadajoz · vida y movimiento. Todo lo que se mueve respeta «reducir movimiento» del sistema. */

/* ---------- aviso de hora de corte (siempre visible, aunque no haya animación) */
.cutoff{display:inline-flex;align-items:center;gap:8px;font-weight:600;line-height:1.3}
.cutoff b{font-variant-numeric:tabular-nums;font-weight:700}
.cutoff-dot{width:9px;height:9px;border-radius:50%;background:#4ade80;flex:none}
.cutoff.is-closed .cutoff-dot{background:#fbbf24}
.promo-cutoff .cutoff{color:#fff}
.promo-cutoff .cutoff b{color:#4ade80}
.eyebrow-live{padding:8px 15px;text-transform:none;letter-spacing:0;font-size:.9rem;color:#d1fae5}
.eyebrow-live .cutoff b{color:#fff}
.cutoff-box{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;background:var(--green-l);border:1px solid #bbf7d0;color:#14532d;border-radius:12px;padding:10px 14px;margin:10px 0;font-size:.9rem}
.cutoff-box .ic{color:#16a34a}
.cutoff-box .cutoff-dot{background:#16a34a}
.cutoff-box .cutoff.is-closed .cutoff-dot{background:#d97706}
.cutoff-box small{flex-basis:100%;color:#166534;font-weight:400;font-size:.8rem}
.cutoff-box.static{display:block;font-weight:400}
.drawer-cutoff{display:flex;align-items:center;gap:8px;padding:9px 20px;background:var(--green-l);color:#14532d;font-size:.84rem;border-bottom:1px solid #bbf7d0}
.drawer-cutoff .ic{color:#16a34a;flex:none}
.drawer-cutoff .cutoff-dot{background:#16a34a}

/* ---------- portada: elementos decorativos (ocultos a lectores de pantalla) */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero-in{position:relative;z-index:1}
.hero-fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-fx .fx{position:absolute;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;color:#4ade80;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(2px)}
.hero-fx .fx .ic{width:26px;height:26px}
.hero-fx .f1{left:3%;top:14%}.hero-fx .f2{left:46%;top:7%;width:46px;height:46px}.hero-fx .f3{left:41%;bottom:9%}
.hero-fx .f4{right:3%;top:10%;width:46px;height:46px}.hero-fx .f5{right:4%;bottom:7%}.hero-fx .f6{left:1%;bottom:20%;width:42px;height:42px}
.hero::before{content:"";position:absolute;inset:-25%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 18% 32%,rgba(34,197,94,.22),transparent 38%),radial-gradient(circle at 82% 68%,rgba(59,130,246,.2),transparent 42%),radial-gradient(circle at 60% 12%,rgba(250,204,21,.08),transparent 30%)}
.rot{display:inline-block;color:#4ade80}
.hero h1 .rot{font-style:normal}
.brandbar{background:#0b0f14;border-top:1px solid rgba(255,255,255,.08);margin-top:-1px;overflow:hidden;position:relative;padding:14px 0}
.brandbar::before,.brandbar::after{content:"";position:absolute;top:0;bottom:0;width:70px;z-index:2;pointer-events:none}
.brandbar::before{left:0;background:linear-gradient(90deg,#0b0f14,transparent)}
.brandbar::after{right:0;background:linear-gradient(-90deg,#0b0f14,transparent)}
.brandbar-track{display:flex;gap:12px;width:max-content}
.brandbar-set{display:flex;gap:12px;list-style:none;margin:0;padding:0 6px}
.brandbar a{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:99px;border:1px solid rgba(255,255,255,.14);color:#e5e7eb;text-decoration:none;font-weight:500;font-size:.9rem;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.brandbar a:hover{background:#4ade80;border-color:#4ade80;color:#052e16}


/* ---------- color y relieve en las secciones */
.band{background:linear-gradient(180deg,#fff,#f0fdf4)}
.sec-head h2{position:relative;padding-bottom:8px}
.sec-head h2::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:46px;border-radius:3px;background:linear-gradient(90deg,#22c55e,#86efac)}
.tile-ic{transition:transform .3s cubic-bezier(.3,1.6,.5,1),background .2s,color .2s}
.tile:hover .tile-ic{transform:scale(1.12) rotate(-6deg);background:var(--green);color:#fff}
.pc-img{overflow:hidden}
.pc-img img{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.pc:hover .pc-img img{transform:scale(1.07)}
.btn-green,.btn-primary,.add{position:relative;overflow:hidden}
.chips a{transition:transform .15s,background .15s,color .15s,border-color .15s}
.chips a:hover{transform:translateY(-2px)}
.promo-card{position:relative;overflow:hidden}
.promo-card::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.07);transition:transform .5s}
.promo-card:hover::after{transform:scale(1.5)}

@media (max-width:1000px){
  .hero-fx .f2,.hero-fx .f3,.hero-fx .f6{display:none}
  .hero-fx .fx{opacity:.7}
}
@media (max-width:560px){.hero-fx{display:none}.eyebrow-live{display:none}}

/* ---------- movimiento (solo si la persona no ha pedido reducirlo) */
@media (prefers-reduced-motion:no-preference){
  @keyframes dotPulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.7)}70%{box-shadow:0 0 0 9px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
  @keyframes dotPulseAmber{0%{box-shadow:0 0 0 0 rgba(251,191,36,.6)}70%{box-shadow:0 0 0 8px rgba(251,191,36,0)}100%{box-shadow:0 0 0 0 rgba(251,191,36,0)}}
  @keyframes floaty{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-16px) rotate(4deg)}}
  @keyframes aurora{0%{transform:translate(-3%,-2%) scale(1)}50%{transform:translate(4%,3%) scale(1.12)}100%{transform:translate(-1%,5%) scale(1.04)}}
  @keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  @keyframes shine{from{transform:translateX(-130%) skewX(-18deg)}to{transform:translateX(260%) skewX(-18deg)}}
  @keyframes brandslide{to{transform:translateX(-50%)}}
  @keyframes wordIn{from{opacity:0;transform:translateY(60%) scale(.96);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
  @keyframes wordOut{to{opacity:0;transform:translateY(-60%) scale(.96);filter:blur(4px)}}
  @keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.5)}100%{transform:scale(1)}}
  @keyframes newItem{0%{background:#bbf7d0;transform:translateX(18px);opacity:.2}40%{background:#dcfce7;transform:none;opacity:1}100%{background:transparent}}
  @keyframes finderGlow{0%,100%{box-shadow:0 30px 80px rgba(0,0,0,.4),0 0 0 0 rgba(74,222,128,0)}50%{box-shadow:0 30px 80px rgba(0,0,0,.4),0 0 0 8px rgba(74,222,128,.18)}}
  @keyframes drive{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
  @keyframes pop{0%{transform:scale(.9)}60%{transform:scale(1.06)}100%{transform:scale(1)}}

  .cutoff.is-open .cutoff-dot{animation:dotPulse 1.8s infinite}
  .cutoff.is-closed .cutoff-dot{animation:dotPulseAmber 2.4s infinite}
  .cutoff-box .cutoff.is-open .cutoff-dot{animation-name:dotPulseGreen}
  @keyframes dotPulseGreen{0%{box-shadow:0 0 0 0 rgba(22,163,74,.55)}70%{box-shadow:0 0 0 9px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}

  .hero::before{animation:aurora 16s ease-in-out infinite alternate}
  .hero-fx .fx{animation:floaty 7s ease-in-out infinite}
  .hero-fx .f2{animation-duration:9s;animation-delay:-2s}.hero-fx .f3{animation-duration:8s;animation-delay:-4s}
  .hero-fx .f4{animation-duration:10s;animation-delay:-1s}.hero-fx .f5{animation-duration:7.5s;animation-delay:-3s}.hero-fx .f6{animation-duration:8.5s;animation-delay:-5s}
  .hero-copy>*{animation:rise .7s cubic-bezier(.2,.7,.2,1) backwards}
  .hero-copy>*:nth-child(2){animation-delay:.08s}.hero-copy>*:nth-child(3){animation-delay:.16s}.hero-copy>*:nth-child(4){animation-delay:.24s}
  .finder{animation:rise .8s cubic-bezier(.2,.7,.2,1) .15s backwards,finderGlow 4.5s ease-in-out 1.2s 3}
  .rot.out{animation:wordOut .28s ease-in forwards}
  .rot.in{animation:wordIn .42s cubic-bezier(.2,.7,.2,1) both}
  .brandbar-track{animation:brandslide 55s linear infinite}
  .brandbar:hover .brandbar-track{animation-play-state:paused}

  .rv{opacity:0}
  .rv.in{opacity:1;animation:rise .65s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i,0)*70ms)}

  .btn-green::after,.btn-primary::after,.add::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-130%) skewX(-18deg);pointer-events:none}
  .btn-green:hover::after,.btn-primary:hover::after,.add:hover::after{animation:shine .8s}
  .finder [data-finder-go]:not(:disabled){animation:pop .5s}
  .band-ic{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
  .band-in>div:hover .band-ic{transform:rotate(-8deg) scale(1.1)}
  .band-in>div:first-child .band-ic .ic{animation:drive 2.2s ease-in-out infinite}
  .badge.bump{animation:bump .5s}
  .dl-item.newitem{animation:newItem 1.1s ease-out}
  .head-user .ic,.cart-link .ic{transition:transform .25s}
  .cart-link:hover .ic{transform:translateX(2px) rotate(-8deg)}
  .logo:hover .logo-mark{transform:rotate(-6deg) scale(1.06)}
  .logo-mark{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
  .promo-card:hover .band-ic{transform:rotate(-8deg) scale(1.08)}
  .totop .ic{transition:transform .2s}.totop:hover .ic{transform:translateY(-3px)}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1}
}