/* Paridad móvil: los efectos de escritorio también viven en el celular */

/* ---- Portada: datos del local y flecha de scroll (antes solo en PC) ---- */
@media (max-width: 900px) {
  .stores { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; left: 14px; right: 14px; top: auto; bottom: 74px; text-align: left; padding: 14px 14px; border-radius: 16px; background: rgba(10,10,12,.34); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 20px 40px -22px rgba(0,0,0,.7); font-size: 10.5px; line-height: 1.35; }
  .stores li:nth-child(n+4) { display: none; }
  .stores li > span { font-size: 9px; letter-spacing: .14em; margin-bottom: 4px; }
  .stores li:hover { transform: none; }
  .scroll-cue { display: grid !important; left: 50%; right: auto; transform: translateX(-50%); bottom: 14px; font-size: 9px; }
  .scroll-cue i { height: 30px; }
  .hero:has(.stores) .hero-copy { bottom: 190px; }
}
@media (max-width: 380px) { .stores { grid-template-columns: 1fr 1fr; } .stores li:nth-child(3) { display: none; } }

/* ---- Footer: versión compacta para que el efecto de revelado entre en la pantalla del celular ---- */
@media (max-width: 900px) {
  .footer-inner { padding: 26px 20px 18px; gap: 16px; }
  .footer-claim { font-size: clamp(20px, 6vw, 28px); }
  .footer-top { flex-direction: row; align-items: center; gap: 12px; }
  .to-top { padding: 10px 14px; font-size: 10px; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 14px 22px; padding-top: 16px; }
  .footer-cols .f-col:first-child { grid-column: 1 / -1; }
  .f-col h3 { margin-bottom: 8px; }
  .f-col a { font-size: 13.5px; padding: 4px 0; }
  .f-col p { font-size: 12px; margin-bottom: 8px; }
  .footer-bottom { padding-top: 12px; gap: 8px; font-size: 10.5px; }
  .footer-brand span { font-size: clamp(84px, 27vw, 200px); }
}
@media (max-width: 520px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
/* sin revelado (pantallas muy bajitas): el logo gigante igual sube con el scroll */
.site-footer.is-static .footer-brand span { transform: skewX(-6deg) translateY(calc((1 - var(--p)) * 34%)); }
.site-footer.is-static .footer-inner { transform: translateY(calc((1 - var(--p)) * -4%)); }

/* ---- Táctil: lo que en PC hace el mouse ---- */
@media (hover: none) {
  /* tarjetas: foto 3 con zoom lento al pasar por el centro */
  .card.is-hot .card-media .frames .fr-1 { animation-play-state: paused; }
  .card.is-hot .card-media .frames .fr-2 { animation: none; opacity: 0; }
  .card.is-hot .card-media .frames .fr-3 { opacity: 1; }
  .card.is-hot .card-media .frames.real .fr-3 { transform: scale(1.07); }
  .card.is-hot .card-media .frames.crop .fr-3 { transform: scale(2); }
  .card.is-hot .card-info h3 { letter-spacing: .01em; }
  .card.is-hot .card-add { background: var(--accent); color: #0b0b0c; }
  /* categorías */
  .cat.is-hot img, .cat.is-hot .cat-ph { transform: scale(1.08); }
  .cat.is-hot .cat-body strong { transform: translateY(-4px); }
  .cat.is-hot .cat-body em { background: #fff; color: var(--ink); padding: 7px 24px; }
  /* botones: el brillo que cruza al tocar */
  .btn-light:active::after, .btn-brown:active::after, .btn-solid:active::after, .btn-outline:active::after { transform: translateX(130%); }
  .btn-brown:active:not(:disabled), .btn-solid:active:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #0b0b0c; }
  /* footer: flechita al tocar */
  .f-col a:active { color: #fff; transform: translateX(22px); }
  .f-col a:active::before { opacity: 1; transform: none; }
  .to-top:active { background: #fff; color: var(--ink); border-color: #fff; }
  .main-nav a:active::after { transform: scaleX(1); transform-origin: left; }
  .icon-btn:active { background: rgba(0,0,0,.08); }
}

/* ---- Instagram: la insignia giratoria también en celular ---- */
@media (max-width: 900px) {
  .ig-badge { display: block !important; left: 4%; top: 46%; width: 62px; }
  .ig-badge text { font-size: 9.5px; }
  .ig-badge b { font-size: 14px; }
}

@media (max-width: 900px) {
  .f-col a { width: auto; max-width: 100%; overflow-wrap: anywhere; }
  .f-col a:hover { transform: none; }
}

/* ---- Portada en celular: solo la foto, el "Scroll" y su animación ---- */
@media (max-width: 900px) {
  .hero .hero-copy,
  .hero .stores { display: none !important; }
}