@keyframes cardIn {
    from { opacity: 0; transform: translateY(18px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.card-anim {
    opacity: 0;
    animation: cardIn 0.28s ease forwards;
}

@keyframes modalIn {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-anim { animation: modalIn 0.25s ease forwards; }

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in { animation: fadeIn 0.2s ease forwards; }

/* Fondos estándar para tiendas que todavía no tienen una fotografía propia. */
.store-photo-placeholder {
    isolation: isolate;
    overflow: hidden;
    background-color: var(--store-tone-a);
    background-image:
        radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--store-tone-c) 40%, transparent) 0 12%, transparent 13%),
        linear-gradient(135deg, var(--store-tone-a), var(--store-tone-b));
}

.store-photo-placeholder::before,
.store-photo-placeholder::after {
    position: absolute;
    z-index: -1;
    content: "";
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.store-photo-placeholder::before {
    width: 58%;
    aspect-ratio: 1;
    top: -34%;
    right: -12%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.store-photo-placeholder::after {
    width: 42%;
    aspect-ratio: 1;
    bottom: -30%;
    left: -8%;
    transform: rotate(22deg);
    background: rgba(255, 255, 255, 0.06);
}

.store-photo-placeholder--1 {
    background-image:
        repeating-linear-gradient(45deg, transparent 0 18px, rgba(255, 255, 255, 0.08) 19px 20px),
        linear-gradient(120deg, var(--store-tone-a), var(--store-tone-b));
}

.store-photo-placeholder--2 {
    background-image:
        radial-gradient(circle at 75% 28%, rgba(255, 255, 255, 0.22) 0 7%, transparent 8%),
        radial-gradient(circle at 22% 82%, rgba(255, 255, 255, 0.12) 0 15%, transparent 16%),
        linear-gradient(145deg, var(--store-tone-b), var(--store-tone-a));
}

.store-photo-placeholder--3 {
    background-image:
        linear-gradient(35deg, transparent 0 48%, rgba(255, 255, 255, 0.13) 49% 55%, transparent 56%),
        linear-gradient(135deg, var(--store-tone-a), var(--store-tone-b));
}

.store-photo-placeholder--4 {
    background-image:
        repeating-radial-gradient(circle at 100% 0, transparent 0 22px, rgba(255, 255, 255, 0.1) 23px 24px),
        linear-gradient(155deg, var(--store-tone-a), var(--store-tone-b));
}

.store-photo-placeholder--5 {
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 50%, transparent 50%),
        linear-gradient(145deg, var(--store-tone-b), var(--store-tone-a));
    background-size: 34px 34px, 100% 100%;
}

.store-photo-placeholder__mark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-8deg);
    color: rgba(255, 255, 255, 0.18);
    font-size: clamp(4rem, 12vw, 8rem);
    font-weight: 900;
    letter-spacing: -0.08em;
    line-height: 1;
    white-space: nowrap;
}

.store-photo-placeholder__label {
    position: absolute;
    right: 12px;
    bottom: 10px;
    padding: 4px 9px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.18);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    backdrop-filter: blur(5px);
}

/* Mapa de ubicación: punto rojo animado */
.map-wrap { position: relative; line-height: 0; }
.map-wrap img { width: 100%; height: auto; display: block; border-radius: 0.75rem; }

.map-pin {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 9999px;
    background: #dc2626;
    border: 2px solid #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    z-index: 5;
}

.map-pin::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 9999px;
    background: rgba(220, 38, 38, 0.55);
    z-index: -1;
    animation: pinPulse 1.6s ease-out infinite;
}

@keyframes pinPulse {
    0%   { transform: scale(1);   opacity: 0.8; }
    70%  { transform: scale(3.2); opacity: 0; }
    100% { transform: scale(3.2); opacity: 0; }
}