/* ==========================================================================
   /asador-virtual/ — widget interactivo
   ==========================================================================
   En vez de arrastrar-y-soltar (frágil en mobile sin una librería
   dedicada), la interacción es tocar/hacer clic para agregar — el
   ingrediente "cae" visualmente a la parrilla con una animación breve.
   Mismo resultado lúdico, mucho más robusto en touch.
   ========================================================================== */

.av-main { min-height: 85vh; padding: 130px 20px 80px; }

.av-wrap { max-width: 760px; margin: 0 auto; text-align: center; }

.av-eyebrow { color: var(--text-dim); font-size: 0.85rem; margin: 0 0 12px; }

.av-wrap h1 {
    font-size: clamp(2.1rem, 5vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.01em;
    margin: 0 0 16px;
}

.av-sub {
    color: var(--text-muted);
    font-size: 1.02rem;
    line-height: 1.6;
    max-width: 500px;
    margin: 0 auto 44px;
}

/* ---- Parrilla ---- */
.av-parrilla {
    background: radial-gradient(ellipse at center, #2a1108 0%, #0e0e0e 70%);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    min-height: 130px;
    padding: 22px;
    margin-bottom: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.av-parrilla-vacia { color: var(--text-dimmer); font-size: 0.9rem; margin: 0; }

.av-parrilla-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    width: 100%;
}

.av-parrilla-item {
    background: rgba(196,56,34,0.15);
    border: 1px solid var(--border-red-faint);
    color: #fff;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    animation: av-caer 0.35s ease;
}

@keyframes av-caer {
    from { opacity: 0; transform: translateY(-14px) scale(0.9); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Categorías / ingredientes ---- */
.av-categorias { text-align: left; }

.av-categoria { margin-bottom: 28px; }

.av-categoria h3 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    margin: 0 0 12px;
}

.av-ingredientes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.av-ingrediente {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color var(--transition-base), background var(--transition-base), transform var(--transition-base);
}
.av-ingrediente:hover { border-color: var(--border-red-faint); }
.av-ingrediente.elegido {
    background: var(--brand-red);
    border-color: var(--brand-red);
    transform: scale(0.97);
}

/* ---- Acción ---- */
.av-accion { margin-top: 30px; text-align: center; }

.av-btn-ver,
.av-btn-primario {
    background: var(--brand-red);
    color: #fff;
    border: none;
    padding: 16px 34px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background var(--transition-base), opacity var(--transition-base);
}
.av-btn-ver:hover,
.av-btn-primario:hover { background: var(--brand-red-hover); }
.av-btn-ver:disabled { opacity: 0.35; cursor: default; }

.av-contador { color: var(--text-dim); font-size: 0.85rem; margin-top: 12px; }

/* ---- Resultado ---- */
.av-resultado { margin-top: 40px; }

.av-resultado-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 40px 30px;
}

.av-resultado-eyebrow { color: var(--brand-red); font-weight: 700; font-size: 0.82rem; margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.05em; }

.av-resultado-card h2 { font-size: 1.6rem; font-weight: 900; margin: 0 0 14px; }

.av-resultado-card > p:not(.av-resultado-eyebrow) {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.65;
    max-width: 480px;
    margin: 0 auto 28px;
}

.av-resultado-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.av-btn-secundario {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    padding: 16px 28px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    cursor: pointer;
}
.av-btn-secundario:hover { border-color: var(--text-dim); color: #fff; }

@media (max-width: 560px) {
    .av-main { padding: 110px 16px 60px; }
    .av-resultado-card { padding: 28px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .av-parrilla-item { animation: none; }
}