/* Rodao · tarjeta de coche y pegatinas de planes, compartidas por el catálogo (rodao.es/coches, fichas,
   páginas de búsqueda) y el escaparate de la portada. Un solo diseño: si cambias algo aquí, cambia en todas.
   Lo pinta garaje.js (cardHtml y stk). */
.icon-btn{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;flex:none;transition:all .2s;background:var(--white)}
.icon-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon-btn[aria-pressed="true"]{color:var(--orange);border-color:var(--orange)}
.icon-btn[aria-pressed="true"] svg{fill:var(--orange)}

.grid{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:600px){.grid{grid-template-columns:1fr 1fr}}
@media (min-width:1300px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;background:var(--paper);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s;
  animation:rd-in .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes rd-in{from{opacity:0;transform:translateY(16px)}}
.card .stage{position:relative;aspect-ratio:16/10;overflow:hidden;background:radial-gradient(ellipse 70% 40% at 50% 80%,rgba(10,10,10,.08),transparent 70%)}
.card .stage img{position:absolute;left:-4%;width:108%;max-width:none;top:50%;transform:translateY(-50%);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.card .top-row{position:absolute;left:14px;right:14px;top:12px;display:flex;justify-content:space-between;align-items:center;z-index:2}
.card .top-row .lg{--lh:26px}
.card .fav{width:40px;height:40px;border:0;background:rgba(255,255,255,.8)}
.card .badges{position:absolute;left:12px;bottom:10px;display:flex;gap:4px;z-index:2;flex-wrap:wrap;right:12px}
.badge{font:600 .62rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;background:var(--white);border-radius:999px;padding:6px 9px;white-space:nowrap}
.card .body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h3{font-size:1.7rem;letter-spacing:-.05em}
.card .v{font-size:.84rem;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.card .meta span{font-size:.76rem;border:1px solid var(--line);border-radius:999px;padding:3px 9px;color:var(--mute)}
.card .foot{display:flex;justify-content:space-between;align-items:end;gap:10px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.card .price{font:700 2rem/1 var(--f-sans);letter-spacing:-.05em}
.card .price small{font-size:.8rem;font-weight:500;color:var(--mute);letter-spacing:0}
.card .go{width:46px;height:46px;border-radius:50%;background:var(--black);color:var(--white);display:grid;place-items:center;transition:transform .3s,background .3s}
.card a.cover{position:absolute;inset:0;z-index:1}
.card .foot .lbl{font:500 .66rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0}
@media (hover:hover){
  .card:hover{transform:translateY(-4px);box-shadow:0 24px 40px -24px rgba(0,0,0,.35)}
  .card:hover .stage img{transform:translateY(-50%) translateX(4%) scale(1.04)}
  .card:hover .go{background:var(--orange);color:var(--black);transform:rotate(-45deg)}
}

/* filtros especiales: stickers dentro del panel de filtros («Elige por tu vida») */
.stk-h{font:600 1.45rem/1 var(--f-sans,inherit)!important;letter-spacing:-.04em!important;text-transform:none!important;color:var(--black)!important;margin:6px 0 2px!important}
.stk-sub{font-family:var(--f-serif,"Playfair Display",serif);font-style:italic;color:var(--orange);font-size:1.05rem;margin:0 0 14px}
.stickers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px;padding:6px 6px 10px}
.sheet .stickers{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}
.sheet .stk{padding:5px 5px 8px;border-radius:16px}.sheet .stk .art{border-radius:11px}.sheet .stk b{font-size:.68rem}.sheet .stk::after{border-radius:0 0 16px 0;width:16px;height:16px}
.stk{--rot:0deg;--sb:#fff;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:7px 7px 10px;text-align:center;text-decoration:none;color:var(--black);
  background:#fff;border-radius:20px;transform:rotate(var(--rot));box-shadow:0 0 0 1px rgba(10,10,10,.06),0 8px 18px -6px rgba(10,10,10,.28);transition:transform .25s cubic-bezier(.3,1.4,.5,1),box-shadow .25s}
.stk::after{content:"";position:absolute;right:0;bottom:0;width:22px;height:22px;border-radius:0 0 20px 0;
  background:linear-gradient(135deg,transparent 50%,rgba(10,10,10,.08) 50%,#f2f2f0 62%,#fff 100%);box-shadow:-2px -2px 4px rgba(10,10,10,.08);pointer-events:none}
.stk .art{display:block;width:100%;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--sb)}
.stk b{font-size:.76rem;font-weight:700;line-height:1.15;letter-spacing:-.01em}
.stk small{font:600 .58rem var(--f-mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.stk[aria-pressed="true"]{transform:rotate(0) scale(1.05);box-shadow:0 0 0 3px var(--orange),0 10px 22px -6px rgba(255,77,31,.5)}
.stk[aria-pressed="true"] small{color:var(--orange)}
@media (hover:hover){.stk:hover{transform:rotate(0) translateY(-4px) scale(1.03)}}
@media (prefers-reduced-motion:reduce){.stk{transition:none}}

/* ===== animaciones de misiones (las "gif") ===== */
.anim{display:block;width:100%;height:100%}
.anim *{transform-box:fill-box}
@keyframes rd-dash{to{stroke-dashoffset:-40}}
@keyframes rd-bob{50%{transform:translateY(-6px)}}
@keyframes rd-bob2{50%{transform:translateY(-3px) rotate(-3deg)}}
@keyframes rd-fall{from{transform:translateY(-30px)}to{transform:translateY(200px)}}
@keyframes rd-ski{0%{transform:translate(-40px,-30px)}25%{transform:translate(40px,15px) rotate(-8deg)}50%{transform:translate(-10px,55px) rotate(8deg)}75%{transform:translate(70px,95px) rotate(-8deg)}100%{transform:translate(30px,140px)}}
@keyframes rd-slide{from{transform:translateX(-120px)}to{transform:translateX(420px)}}
@keyframes rd-wave{to{transform:translateX(-80px)}}
@keyframes rd-blink{0%,40%{opacity:.25}50%,90%{opacity:1}}
@keyframes rd-fill{0%{transform:scaleX(.05)}80%,100%{transform:scaleX(1)}}
@keyframes rd-spin{to{transform:rotate(360deg)}}
@keyframes rd-twinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}
@keyframes rd-drop{0%{transform:translateY(-60px);opacity:0}20%{opacity:1}60%,100%{transform:translateY(0);opacity:1}}
@keyframes rd-park{0%,10%{transform:translateX(-160px)}45%,75%{transform:translateX(0)}100%{transform:translateX(220px)}}
@keyframes rd-wag{50%{transform:rotate(-18deg)}}
@keyframes rd-road{to{transform:translateY(60px)}}
@keyframes rd-sweep{0%{transform:translateX(-140%) skewX(-20deg)}60%,100%{transform:translateX(260%) skewX(-20deg)}}
@media (prefers-reduced-motion:reduce){.anim *,.anim{animation:none!important}}