:root{
  --y:#f4cd0a;
  --k:#000;
  --a:#1e1e1e;
  --g:#9aa0a6;
  --r:14px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--k);
  color:#f5f5f5;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

.topbar{
  position:sticky; top:0; z-index:10;
  background:rgba(0,0,0,.92);
  border-bottom:1px solid rgba(154,160,166,.25);
  padding:12px 14px;
    padding-right: 78px; /* hueco para el botón */

}
.brand{ display:flex; align-items:center; gap:10px; }

.brandLogo{
  height: 60px;
  width: auto;
  max-width: 120px;  /* evita que se coma la barra */
  display:block;
  object-fit:contain;
}

.brandSub{
  color:var(--g);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  line-height:1;
}

.wrap{ max-width:1100px; margin:0 auto; padding:14px 12px 36px; }

/* GRID */
.feed{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
}
.feed.single{
  grid-template-columns:1fr;
}

/* Card */
.card{
  display:block;
  background:var(--a);
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid rgba(154,160,166,.18);

  /* PASO 5 */
  position: relative;
  transform: translateZ(0);
  transition: transform .16s ease, box-shadow .16s ease;
}

/* Imagen (layout base) */
.cover{
   backface-visibility: hidden;
  transform: translateZ(0);
  width:100%;
  aspect-ratio:16/9;     /* <- deja esto como ahora (mínimos cambios) */
  object-fit:cover;
  display:block;
  background:#0b0b0b;

  /* PASO 5 */
  opacity:0;
  transition: opacity .22s ease;
}

/* cuando carga */
.card.loaded .cover{ opacity:1; }

/* shimmer */
.ph{
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;

    transition: opacity .22s ease;

  background-color: var(--a);
  background-image: linear-gradient(
    110deg,
    rgba(255,255,255,.06) 20%,
    rgba(255,255,255,.12) 35%,
    rgba(255,255,255,.06) 50%
  );
  background-size:200% 100%;
  animation: shimmer 1.1s linear infinite;
}
.card.loaded .ph{
  opacity:0;
  animation:none;
}
@keyframes shimmer{
  to { background-position-x:-200%; }
}

/* feedback tipo app */
@media (hover:hover){
  .card:hover{
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 10px 26px rgba(0,0,0,.22);
  }
}
.card:active{ transform: scale(.985); }

/* retry por imagen */
.retry{
  position:absolute;
  right:10px;
  bottom:10px;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:18px;
  opacity:0;
  pointer-events:none;
  user-select:none;
  z-index:2;
}
.card.img-error .retry{
  opacity:1;
  pointer-events:auto;
}
.card.img-error .ph{ opacity:.18; }

/* sentinel */
.sentinel{ height:1px; }

/* huérfana ocupa ancho */
#feed .card.span-all{ grid-column:1 / -1; }

/* subir arriba */
.toTop{
  position:fixed;
  right:14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  width:44px;
  height:44px;
  border-radius:999px;
  border:0;
  background:rgba(0,0,0,.62);
  color:#fff;
  font-size:18px;
  opacity:0;
  transform: translateY(10px);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.toTop.show{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}

/* reintentar Firestore */
.retryFeed{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:0;
  background: rgba(244,205,10,.95);
  color:#000;
  font-weight:800;
}

/* accesibilidad */
.retry:focus-visible,
.toTop:focus-visible{
  outline: 2px solid rgba(244,205,10,.9);
  outline-offset: 2px;
}

/* respeta reduce motion */
@media (prefers-reduced-motion: reduce){
  .ph{ animation:none; }
  .card, .cover, .toTop{ transition:none; }
}

@media (max-width: 520px){
  .wrap{
    padding: 12px 8px 30px; /* antes 14px 12px 36px */
  }

  .feed{
    gap: 8px; /* antes 12px */
  }
}
  .brandSub{ display:none; }


/* Botón Acceder / Mi garaje */
.topbar__authBtn{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  height:38px;
  padding:0 12px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:800;
  text-decoration:none;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(154,160,166,.25);
  color:var(--y);
}

.topbar__authBtn:hover{
  background:var(--y);
  color:#000;
  border-color:var(--y);
}