/* ==========================================================================
   Pizzaria & Co. — sistema de pedidos
   Carta, armador y carrito. Hereda los tokens de styles.css.

   Decisión de fondo: la landing es cinematográfica y transparente sobre el
   video; la zona de pedido es opaca. Al llegar a la carta la página deja de ser
   una pieza publicitaria y pasa a ser una herramienta, y eso se tiene que
   sentir.
   ========================================================================== */

/* El `display: none` del atributo `hidden` viene de la hoja del navegador, así
   que CUALQUIER regla de autor que declare `display` lo pisa en silencio. Como
   acá hay paneles con `display: flex` y grillas con `display: grid` que se
   ocultan con `hidden`, sin esto el armador queda siempre en el layout: con
   `opacity: 0` no se ve, pero sigue siendo un rectángulo fijo con z-index 8900
   en el medio de la pantalla que se come todos los clicks de la carta.
   El `!important` es necesario: tiene que ganarle a las reglas de clase. */
[hidden] { display: none !important; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

body.sin-scroll { overflow: hidden; }

/* En celular: sin el flash gris del tap y sin los 300 ms de espera por si era
   un doble toque. Los dos se notan muchísimo en un menú donde vas tocando
   chips y botones uno atrás del otro. */
button, .chip-extra, .chip-filtro, .pestana, label {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* ==========================================================================
   Carta
   ========================================================================== */

.carta-section {
    position: relative;
    z-index: 12;
    padding: clamp(4rem, 10vw, 8rem) var(--shell) clamp(4rem, 9vw, 7rem);
    background:
        linear-gradient(180deg, transparent 0%, #070505 6%, #070505 94%, transparent 100%);
}

/* Brasa tenue detrás de la grilla, para que la superficie opaca no quede plana */
.carta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(70% 45% at 50% 0%, rgba(var(--accent-rgb), 0.1), transparent 70%);
}

.carta-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto clamp(2rem, 5vw, 3.5rem);
    position: relative;
}

.carta-header h2 {
    font-size: clamp(2.2rem, 5.5vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -0.035em;
}

.carta-bajada {
    margin-top: 0.7rem;
    color: var(--text-secondary);
    font-size: clamp(0.98rem, 1.8vw, 1.15rem);
}

/* ── Pestañas ───────────────────────────────────────────────────────────── */

.carta-controles {
    position: sticky;
    /* Justo debajo del navbar, que es fijo y con más z-index: con `top: 0` las
       pestañas se pegaban arriba de todo y quedaban escondidas atrás de él.
       Cuando el navbar se esconde al bajar, suben a ocupar su lugar. */
    top: var(--nav-h);
    transition: top 0.45s var(--ease-out-expo);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0 1.2rem;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
    background: linear-gradient(180deg, #070505 68%, transparent);
}

.carta-pestanas {
    display: flex;
    gap: 0.5rem;
    padding: 0.4rem;
    border-radius: 999px;
    border: 1px solid var(--hairline);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

body.nav-oculto .carta-controles { top: 0; }

.carta-pestanas::-webkit-scrollbar { display: none; }

.pestana {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.3rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    transition: color 0.35s ease, background-color 0.45s var(--ease-out-expo);
}

.pestana:hover { color: var(--text-primary); }

.pestana.is-activa {
    color: #1a0b04;
    background: var(--ember-gradient);
    box-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.32);
}

.pestana-icono { font-size: 1rem; }

.pestana-cuenta {
    font-size: 0.7rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    font-variant-numeric: tabular-nums;
}

.pestana.is-activa .pestana-cuenta { background: rgba(0, 0, 0, 0.22); }

.carta-filtros {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.chip-filtro {
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--hairline);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-muted);
    transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.chip-filtro:hover { color: var(--text-primary); border-color: var(--hairline-strong); }

.chip-filtro.is-activa {
    color: var(--accent-warm);
    border-color: rgba(var(--accent-rgb), 0.5);
    background: rgba(var(--accent-rgb), 0.1);
}

/* ── Grilla de variedades ───────────────────────────────────────────────── */

.carta-grilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
    gap: clamp(1rem, 2.2vw, 1.6rem);
    max-width: 1240px;
    margin: 0 auto;
}

.pizza-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    border: 1px solid var(--hairline);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.014));
    overflow: hidden;
    transition: transform 0.5s var(--ease-out-expo), border-color 0.4s ease, box-shadow 0.5s ease;
    animation: cartaEntra 0.55s var(--ease-out-expo) backwards;
    animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes cartaEntra {
    from { opacity: 0; transform: translateY(22px) scale(0.97); }
}

.pizza-card:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--accent-rgb), 0.35);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

/* Confirmación en la tarjeta que se tocó: se hunde un poco y suelta un anillo
   de brasa. Va en paralelo a la pizza que sale volando hacia el carrito. */
.pizza-card.es-agregada {
    animation: tarjetaAgregada 0.7s var(--ease-out-expo);
    border-color: rgba(var(--accent-rgb), 0.7);
}

@keyframes tarjetaAgregada {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.5); }
    28%  { transform: scale(0.972); }
    100% { transform: scale(1);    box-shadow: 0 0 0 24px rgba(var(--accent-rgb), 0); }
}

/* La copia que vuela no debe heredar el hover ni el zoom de la tarjeta. */
.pizza-svg[style*="position: fixed"] { transition: none !important; }

.pizza-card.es-destacada {
    border-color: rgba(var(--accent-rgb), 0.28);
    background: linear-gradient(165deg, rgba(var(--accent-rgb), 0.1), rgba(255, 255, 255, 0.015));
}

.pizza-card-figura {
    display: grid;
    place-items: center;
    padding: 1.6rem 1.6rem 0.4rem;
    background: radial-gradient(60% 60% at 50% 45%, rgba(var(--accent-rgb), 0.14), transparent 72%);
}

.pizza-card-figura .pizza-svg {
    width: min(190px, 62%);
    height: auto;
    transition: transform 0.6s var(--ease-out-expo);
}

.pizza-card:hover .pizza-svg { transform: rotate(-7deg) scale(1.06); }

.pizza-card-cuerpo {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0.8rem 1.5rem 1.5rem;
    text-align: left;
}

.pizza-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.7rem;
}

.tag {
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--hairline-strong);
    color: var(--text-muted);
}

.tag.es-destacada { background: var(--ember-gradient); color: #1a0b04; border-color: transparent; }
.tag.es-picante   { color: #ff8b6b; border-color: rgba(255, 107, 53, 0.4); }
.tag.es-veggie    { color: #7fc47a; border-color: rgba(127, 196, 122, 0.35); }

.pizza-card-nombre {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.4rem;
}

.pizza-card-desc {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-secondary);
    margin-bottom: 0.7rem;
}

.pizza-card-ing {
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    margin-bottom: 1.1rem;
}

.pizza-card-precio {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.precio-grande {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--accent-warm);
    font-variant-numeric: tabular-nums;
}

.precio-desde { font-size: 0.72rem; color: var(--text-muted); }

.pizza-card-acciones { display: flex; gap: 0.6rem; }

.btn-personalizar {
    flex: 1;
    padding: 0.8rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--hairline-strong);
    font-size: 0.85rem;
    font-weight: 600;
    transition: border-color 0.35s ease, background-color 0.35s ease, color 0.35s ease;
}

.btn-personalizar:hover {
    border-color: rgba(var(--accent-rgb), 0.6);
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent-warm);
}

.btn-agregar {
    width: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    background: var(--ember-gradient);
    color: #1a0b04;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.3);
    transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s ease;
}

.btn-agregar:hover { transform: scale(1.1); box-shadow: 0 12px 26px rgba(var(--accent-rgb), 0.45); }
.btn-agregar:active { transform: scale(0.94); }

.carta-error {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1.5rem;
    border-radius: 20px;
    border: 1px dashed rgba(var(--accent-rgb), 0.35);
    color: var(--text-secondary);
    line-height: 1.7;
}

/* ── Armá la tuya ───────────────────────────────────────────────────────── */

.carta-libre-wrap { display: flex; justify-content: center; margin-top: clamp(2rem, 5vw, 3.5rem); }

.carta-libre {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.3rem 2.2rem;
    border-radius: 22px;
    border: 1px dashed rgba(var(--accent-rgb), 0.4);
    background: rgba(var(--accent-rgb), 0.05);
    text-align: left;
    transition: border-color 0.4s ease, background-color 0.4s ease, transform 0.4s var(--ease-out-expo);
}

.carta-libre:hover {
    border-color: rgba(var(--accent-rgb), 0.85);
    background: rgba(var(--accent-rgb), 0.11);
    transform: translateY(-3px);
}

.carta-libre-icono {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 50%;
    background: var(--ember-gradient);
    color: #1a0b04;
    font-size: 1.4rem;
    font-weight: 700;
}

.carta-libre-texto { display: flex; flex-direction: column; gap: 0.2rem; }
.carta-libre-texto strong { font-size: 1.05rem; font-weight: 700; }
.carta-libre-texto small { font-size: 0.78rem; color: var(--text-muted); }

/* ==========================================================================
   Botón flotante del carrito
   ========================================================================== */

/* `env(safe-area-inset-bottom)` mantiene el botón por encima de la barra de
   inicio del iPhone; sin eso queda medio tapado y cuesta tocarlo. */
.cart-btn {
    position: fixed;
    right: clamp(1rem, 3vw, 2.2rem);
    bottom: calc(clamp(1rem, 3vw, 2.2rem) + env(safe-area-inset-bottom, 0px));
    z-index: 7500;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: rgba(14, 10, 8, 0.85);
    border: 1px solid var(--hairline-strong);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
    transition: transform 0.45s var(--ease-out-expo), border-color 0.4s ease, background-color 0.4s ease;
}

.cart-btn:hover { transform: scale(1.08); border-color: rgba(var(--accent-rgb), 0.6); }

.cart-btn.tiene-items {
    background: var(--ember-gradient);
    border-color: transparent;
    color: #1a0b04;
    box-shadow: 0 16px 40px rgba(var(--accent-rgb), 0.42);
}

.cart-btn-icono { width: 25px; height: 25px; }
.cart-btn-icono svg { width: 100%; height: 100%; }

.cart-btn-count {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 800;
    background: #fff;
    color: #1a0b04;
    border: 2px solid #070505;
    font-variant-numeric: tabular-nums;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.3s ease, transform 0.4s var(--ease-out-expo);
}

.cart-btn.tiene-items .cart-btn-count { opacity: 1; transform: scale(1); }

.cart-btn.es-latido { animation: latido 0.55s var(--ease-out-expo); }

@keyframes latido {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.22); }
    100% { transform: scale(1); }
}

/* ==========================================================================
   Capa de fondo compartida (carrito y armador)
   ========================================================================== */

.overlay-backdrop {
    position: fixed;
    inset: 0;
    z-index: 8800;
    background: rgba(3, 2, 2, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.45s ease;
}

.overlay-backdrop.is-open { opacity: 1; }

/* ==========================================================================
   Panel del carrito
   ========================================================================== */

.cart-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 8900;
    width: min(460px, 100vw);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: #0b0806;
    border-left: 1px solid var(--hairline);
    box-shadow: -30px 0 70px rgba(0, 0, 0, 0.6);
    transform: translateX(100%);
    transition: transform 0.5s var(--ease-out-expo);
}

.cart-panel.is-open { transform: translateX(0); }

.cart-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.4rem 1.5rem 1.1rem;
    border-bottom: 1px solid var(--hairline);
}

.cart-header h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; }
.cart-sub { font-size: 0.74rem; color: var(--text-muted); margin-top: 0.2rem; }

.cart-cerrar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    border: 1px solid var(--hairline);
    color: var(--text-secondary);
    font-size: 0.9rem;
    transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s var(--ease-out-expo);
}

.cart-cerrar:hover { border-color: var(--accent); color: var(--accent-warm); transform: rotate(90deg); }

.cart-cuerpo { flex: 1; overflow-y: auto; padding: 1.2rem 1.5rem; }

/* ── Vacío ──────────────────────────────────────────────────────────────── */

.cart-vacio { text-align: center; padding: 2.5rem 0.5rem; }
.cart-vacio-icono { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; }
.cart-vacio h3 { font-size: 1.15rem; margin-bottom: 0.6rem; }

.cart-vacio p {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.65;
    max-width: 34ch;
    margin: 0 auto 1.6rem;
}

/* ── Ítems ──────────────────────────────────────────────────────────────── */

.cart-lista { list-style: none; display: flex; flex-direction: column; gap: 0.9rem; }

.pedido-item {
    display: grid;
    grid-template-columns: 58px 1fr auto;
    gap: 0.9rem;
    padding: 0.95rem;
    border-radius: 18px;
    border: 1px solid var(--hairline);
    background: rgba(255, 255, 255, 0.03);
    animation: itemEntra 0.4s var(--ease-out-expo);
}

@keyframes itemEntra {
    from { opacity: 0; transform: translateX(18px); }
}

.pedido-thumb { width: 58px; }
.pedido-thumb .pizza-svg { width: 100%; height: auto; }

.pedido-info { min-width: 0; }

.pedido-nombre {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.3rem;
}

.pedido-detalle {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.pedido-acciones { display: flex; gap: 0.8rem; margin-top: 0.55rem; }

.pedido-link {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.02em;
    border-bottom: 1px solid transparent;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.pedido-link:hover { color: var(--accent-warm); border-bottom-color: currentColor; }
.pedido-link.es-quitar { color: var(--text-muted); }
.pedido-link.es-quitar:hover { color: #ff7a6a; }

.pedido-lateral {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.7rem;
}

.pedido-qty {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.2rem;
    border-radius: 999px;
    border: 1px solid var(--hairline);
}

.pedido-qty-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.pedido-qty-btn:hover { background: rgba(var(--accent-rgb), 0.18); color: var(--accent-warm); }

.pedido-qty-num {
    min-width: 22px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pedido-precio { text-align: right; }
.pedido-precio strong { font-size: 0.98rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.pedido-unitario {
    display: block;
    font-size: 0.66rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
}

/* ── Pie del carrito ────────────────────────────────────────────────────── */

.cart-footer {
    border-top: 1px solid var(--hairline);
    padding: 1.1rem 1.5rem calc(1.4rem + env(safe-area-inset-bottom, 0px));
    background: rgba(8, 6, 5, 0.9);
    max-height: 62dvh;
    overflow-y: auto;
}

.cart-progreso { margin-bottom: 0.9rem; }

.cart-progreso-texto {
    display: block;
    font-size: 0.72rem;
    color: var(--accent-warm);
    margin-bottom: 0.4rem;
}

.cart-progreso-riel {
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.cart-progreso-barra {
    height: 100%;
    background: var(--ember-gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s var(--ease-out-expo);
}

.cart-envio-gratis {
    font-size: 0.78rem;
    color: #7fc47a;
    margin-bottom: 0.9rem;
    text-align: center;
}

.cart-modalidad { border: none; display: flex; gap: 0.6rem; margin-bottom: 1rem; }

.cart-modalidad legend {
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.55rem;
}

.cart-radio { flex: 1; cursor: pointer; }
.cart-radio input { position: absolute; opacity: 0; pointer-events: none; }

.cart-radio span {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.7rem 0.9rem;
    border-radius: 14px;
    border: 1px solid var(--hairline);
    transition: border-color 0.35s ease, background-color 0.35s ease;
}

.cart-radio strong { font-size: 0.85rem; font-weight: 600; }
.cart-radio small { font-size: 0.66rem; color: var(--text-muted); }

.cart-radio input:checked + span {
    border-color: rgba(var(--accent-rgb), 0.6);
    background: rgba(var(--accent-rgb), 0.1);
}

.cart-radio input:focus-visible + span { outline: 2px solid var(--accent-warm); outline-offset: 2px; }

.cart-totales {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.9rem 0;
    border-block: 1px solid var(--hairline);
    margin-bottom: 1rem;
}

.cart-total-linea {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.cart-total-linea.es-total {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-primary);
    padding-top: 0.5rem;
    margin-top: 0.2rem;
    border-top: 1px solid var(--hairline);
}

.cart-total-linea .es-gratis { color: #7fc47a; }

.cart-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    margin-bottom: 1rem;
}

.cart-campo { display: flex; flex-direction: column; gap: 0.35rem; }
.cart-campo.es-ancho, #cartCampoDireccion { grid-column: 1 / -1; }

.cart-campo > span {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cart-campo small { text-transform: none; letter-spacing: 0; }

.cart-campo input,
.cart-campo select,
.cart-campo textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border-radius: 12px;
    border: 1px solid var(--hairline);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.88rem;
    resize: vertical;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.cart-campo input::placeholder,
.cart-campo textarea::placeholder { color: #5c534d; }

.cart-campo input:focus,
.cart-campo select:focus,
.cart-campo textarea:focus {
    outline: none;
    border-color: rgba(var(--accent-rgb), 0.65);
    background: rgba(var(--accent-rgb), 0.07);
}

.cart-campo select option { background: #14100d; }

.cart-enviado {
    font-size: 0.78rem;
    color: #7fc47a;
    background: rgba(127, 196, 122, 0.1);
    border: 1px solid rgba(127, 196, 122, 0.3);
    border-radius: 12px;
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.9rem;
    line-height: 1.5;
}

/* El pie scrollea (formulario + totales no entran en una pantalla chica), así
   que la acción principal se queda pegada abajo. Sin esto, en un teléfono hay
   que scrollear dentro del pie para encontrar el botón de enviar. */
.cart-acciones {
    display: flex;
    gap: 0.7rem;
    position: sticky;
    bottom: -1px;
    z-index: 2;
    padding-block: 0.7rem;
    background: linear-gradient(180deg, transparent, #080605 28%);
}

.cart-vaciar {
    padding: 0.9rem 1.2rem;
    border-radius: 999px;
    border: 1px solid var(--hairline);
    font-size: 0.82rem;
    color: var(--text-muted);
    transition: color 0.3s ease, border-color 0.3s ease;
}

.cart-vaciar:hover { color: #ff7a6a; border-color: rgba(255, 122, 106, 0.4); }

.cart-enviar {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem 1.2rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #06240f;
    background: linear-gradient(135deg, #4ee07d 0%, #25d366 100%);
    box-shadow: 0 12px 28px rgba(37, 211, 102, 0.28);
    transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s ease;
}

.cart-enviar:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(37, 211, 102, 0.42); }

.cart-nota-legal {
    margin-top: 0.4rem;
    font-size: 0.66rem;
    color: #574e49;
    text-align: center;
    line-height: 1.5;
}

/* ==========================================================================
   Armador
   ========================================================================== */

.armador {
    position: fixed;
    inset: 0;
    z-index: 8900;
    margin: auto;
    width: min(1020px, calc(100vw - 2rem));
    height: min(880px, calc(100dvh - 2rem));
    display: flex;
    flex-direction: column;
    border-radius: 26px;
    border: 1px solid var(--hairline-strong);
    background: #0b0806;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    opacity: 0;
    transform: translateY(26px) scale(0.97);
    transition: opacity 0.4s ease, transform 0.5s var(--ease-out-expo);
}

.armador.is-open { opacity: 1; transform: translateY(0) scale(1); }

.armador-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.6rem;
    border-bottom: 1px solid var(--hairline);
    flex: 0 0 auto;
}

.armador-header h2 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; }

.armador-cuerpo {
    flex: 1;
    display: grid;
    grid-template-columns: 380px 1fr;
    overflow: hidden;
}

/* ── Vista previa ───────────────────────────────────────────────────────── */

.armador-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
    border-right: 1px solid var(--hairline);
    background:
        radial-gradient(70% 55% at 50% 42%, rgba(var(--accent-rgb), 0.16), transparent 72%),
        #0e0a08;
}

.armador-preview { width: min(290px, 78%); }
.armador-preview .pizza-svg { width: 100%; height: auto; }

/* El SVG se reemplaza entero en cada cambio, así que este keyframe se
   reproduce solo: es el "acuse de recibo" de que el cambio se aplicó. */
.pizza-svg.es-nueva { animation: pizzaCambia 0.45s var(--ease-out-expo); }

@keyframes pizzaCambia {
    from { transform: scale(0.94) rotate(-3deg); opacity: 0.4; }
}

.armador-preview-nombre {
    margin-top: 1.4rem;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.armador-preview-desc {
    margin-top: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 30ch;
}

/* ── Opciones ───────────────────────────────────────────────────────────── */

.armador-opciones {
    overflow-y: auto;
    padding: 1.4rem 1.6rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.7rem;
}

.armador-titulo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.85rem;
}

.armador-paso {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.16);
    color: var(--accent-warm);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0;
}

.armador-contador {
    margin-left: auto;
    letter-spacing: 0.06em;
    text-transform: none;
    font-size: 0.7rem;
}

.armador-contador.es-lleno { color: var(--accent-warm); }

.grilla-opciones {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}

.grilla-opciones.es-masas { grid-template-columns: repeat(2, 1fr); }

.opcion-tamano,
.opcion-masa,
.opcion-modo {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.85rem 0.9rem;
    border-radius: 14px;
    border: 1px solid var(--hairline);
    text-align: left;
    transition: border-color 0.35s ease, background-color 0.35s ease, transform 0.35s var(--ease-out-expo);
}

.opcion-tamano:hover,
.opcion-masa:hover,
.opcion-modo:hover { border-color: var(--hairline-strong); transform: translateY(-2px); }

.opcion-tamano.is-activa,
.opcion-masa.is-activa,
.opcion-modo.is-activa {
    border-color: rgba(var(--accent-rgb), 0.65);
    background: rgba(var(--accent-rgb), 0.11);
}

.opcion-titulo { font-size: 0.9rem; font-weight: 600; }
.opcion-sub { font-size: 0.68rem; color: var(--text-muted); line-height: 1.4; }

.opcion-precio {
    margin-top: 0.3rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-warm);
    font-variant-numeric: tabular-nums;
}

.armador-modo { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }

.armador-selectores {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    margin-top: 0.8rem;
    animation: cartaEntra 0.4s var(--ease-out-expo);
}

.selector-mitad { display: flex; flex-direction: column; gap: 0.35rem; }

.selector-etiqueta {
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.selector-variedad {
    width: 100%;
    padding: 0.7rem 0.8rem;
    border-radius: 12px;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    background: rgba(var(--accent-rgb), 0.07);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.84rem;
    transition: border-color 0.3s ease;
}

.selector-variedad:focus { outline: none; border-color: var(--accent); }
.selector-variedad option { background: #14100d; }
.selector-variedad optgroup { background: #14100d; color: var(--text-muted); }

/* ── Chips de extras ────────────────────────────────────────────────────── */

.armador-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.chip-extra {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--hairline);
    font-size: 0.78rem;
    transition: border-color 0.3s ease, background-color 0.3s ease, opacity 0.3s ease, transform 0.3s var(--ease-out-expo);
}

.chip-extra:hover:not(:disabled) { border-color: var(--hairline-strong); transform: translateY(-2px); }

.chip-extra:disabled { opacity: 0.32; cursor: not-allowed; }

.chip-extra.is-activa {
    border-color: rgba(var(--accent-rgb), 0.7);
    background: rgba(var(--accent-rgb), 0.14);
}

.chip-punto {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4) inset;
    flex: 0 0 10px;
}

.chip-nombre { font-weight: 500; }
.chip-precio { font-size: 0.68rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.chip-extra.is-activa .chip-precio { color: var(--accent-warm); }

.armador-nota-campo textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border-radius: 12px;
    border: 1px solid var(--hairline);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85rem;
    resize: vertical;
}

.armador-nota-campo textarea::placeholder { color: #5c534d; }
.armador-nota-campo textarea:focus { outline: none; border-color: rgba(var(--accent-rgb), 0.6); }

/* ── La cuenta ──────────────────────────────────────────────────────────── */

.armador-cuenta {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--hairline);
}

.cuenta-linea {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.cuenta-linea span:last-child { color: var(--text-primary); font-weight: 600; }

/* ── Pie del armador ────────────────────────────────────────────────────── */

.armador-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.6rem calc(1rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--hairline);
    background: rgba(8, 6, 5, 0.92);
}

.armador-cantidad {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem;
    border-radius: 999px;
    border: 1px solid var(--hairline);
}

.armador-cantidad button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 1.05rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.armador-cantidad button:hover { background: rgba(var(--accent-rgb), 0.18); color: var(--accent-warm); }

.armador-cantidad span {
    min-width: 26px;
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.armador-total-caja { display: flex; flex-direction: column; margin-right: auto; }

.armador-unitario { font-size: 0.68rem; color: var(--text-muted); }

.armador-total {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.armador-agregar {
    padding: 0.95rem 2rem;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 700;
    color: #1a0b04;
    background: var(--ember-gradient);
    box-shadow: 0 12px 30px rgba(var(--accent-rgb), 0.3);
    transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s ease;
}

.armador-agregar:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(var(--accent-rgb), 0.45); }

/* ==========================================================================
   Toast
   ========================================================================== */

.toast {
    position: fixed;
    left: 50%;
    bottom: clamp(1.5rem, 4vw, 2.6rem);
    z-index: 9500;
    padding: 0.8rem 1.4rem;
    border-radius: 999px;
    background: rgba(16, 11, 9, 0.95);
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: 0.84rem;
    font-weight: 500;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translate(-50%, 14px);
    transition: opacity 0.32s ease, transform 0.42s var(--ease-out-expo);
    max-width: min(90vw, 420px);
    text-align: center;
}

.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast[data-tono="aviso"] { border-color: rgba(255, 180, 67, 0.5); color: var(--accent-warm); }

/* ==========================================================================
   Foco visible — el sitio se puede usar entero con el teclado
   ========================================================================== */

:focus-visible {
    outline: 2px solid var(--accent-warm);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
    .armador {
        width: 100vw;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
        border: none;
    }

    .armador-cuerpo { grid-template-columns: 1fr; overflow-y: auto; }

    .armador-visual {
        border-right: none;
        border-bottom: 1px solid var(--hairline);
        padding: 1.2rem;
        /* En vertical la pizza queda pegada arriba mientras se scrollean las
           opciones: es lo que hace que valga la pena mirarla. */
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .armador-preview { width: 150px; }
    .armador-preview-nombre { margin-top: 0.8rem; font-size: 1.05rem; }

    /* En celular la tarjeta de la carta ya no muestra la bajada por falta de
       espacio, así que acá tiene que estar sí o sí: es el único lugar donde se
       puede leer de qué se trata la pizza. Dos líneas como techo, para no
       inflar la cabecera pegajosa. */
    .armador-preview-desc {
        margin-top: 0.35rem;
        font-size: 0.75rem;
        line-height: 1.45;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .armador-opciones { overflow: visible; }

    /* iOS hace zoom sobre cualquier campo con letra menor a 16px apenas lo
       tocás, y deja la página descuadrada y con scroll horizontal. No es una
       preferencia estética: 16px es el umbral exacto que evita ese zoom. */
    .cart-campo input,
    .cart-campo select,
    .cart-campo textarea,
    .armador-nota-campo textarea,
    .selector-variedad { font-size: 16px; }
}

@media (max-width: 620px) {
    .cart-panel { width: 100vw; border-left: none; }
    .cart-campos { grid-template-columns: 1fr; }
    .grilla-opciones { grid-template-columns: 1fr; }
    .grilla-opciones.es-masas,
    .armador-modo,
    .armador-selectores { grid-template-columns: 1fr; }

    .opcion-tamano, .opcion-masa {
        flex-direction: row;
        align-items: center;
        gap: 0.6rem;
    }
    .opcion-tamano .opcion-precio,
    .opcion-masa .opcion-precio { margin-top: 0; margin-left: auto; }
    .opcion-sub { flex: 1; }

    .armador-footer { flex-wrap: wrap; padding: 0.9rem 1rem; }
    .armador-agregar { flex: 1 0 100%; order: 3; }

    .pedido-item { grid-template-columns: 46px 1fr; }
    .pedido-thumb { width: 46px; }
    .pedido-lateral {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .carta-libre { flex-direction: column; text-align: center; }

    /* Targets de dedo: 44px es el mínimo cómodo. Varios de estos venían del
       diseño de escritorio y quedaban en 26-29px. */
    .chip-filtro { padding: 0.6rem 1.05rem; min-height: 40px; }
    .pestana { padding: 0.85rem 1.2rem; }
    .chip-extra { padding: 0.62rem 0.95rem; }
    .pedido-qty-btn { width: 36px; height: 36px; font-size: 1.1rem; }
    .pedido-link { padding-block: 0.3rem; font-size: 0.75rem; }
    .armador-cantidad button { width: 42px; height: 42px; }
    .cart-cerrar { width: 44px; height: 44px; flex-basis: 44px; }

    /* El aviso no puede aparecer debajo del botón flotante del carrito. */
    .toast {
        left: 1rem;
        right: 1rem;
        bottom: calc(6.2rem + env(safe-area-inset-bottom, 0px));
        max-width: none;
        transform: translateY(14px);
    }
    .toast.is-visible { transform: translateY(0); }

    /* La cabecera pegajosa medía 155px: entre ella y el navbar se comían 243px
       de un celular de 844. Se aprieta todo lo que se pueda sin bajar de los
       40px de target. */
    .carta-controles { gap: 0.55rem; padding: 0.7rem 0 0.8rem; }
    .carta-pestanas { gap: 0.3rem; padding: 0.3rem; }
    .pestana { padding: 0.62rem 0.85rem; font-size: 0.82rem; gap: 0.35rem; }
    .pestana-cuenta { display: none; }
    .carta-filtros { gap: 0.4rem; }
    .chip-filtro { min-height: 34px; padding: 0.4rem 0.8rem; font-size: 0.72rem; }
    .carta-header { margin-bottom: 1.2rem; }

    /* Dos por fila. Con una sola columna cada gusto ocupaba media pantalla y
       recorrer la carta se hacía interminable: el objetivo es ver cuatro de un
       vistazo, como en una carta de papel. */
    .carta-grilla {
        grid-template-columns: 1fr 1fr;
        gap: 0.7rem;
    }

    .pizza-card { border-radius: 18px; }

    .pizza-card-figura { padding: 0.75rem 0.7rem 0.1rem; }
    .pizza-card-figura .pizza-svg { width: min(96px, 68%); }

    .pizza-card-cuerpo { padding: 0.45rem 0.8rem 0.9rem; }

    .pizza-card-tags { gap: 0.25rem; margin-bottom: 0.4rem; }
    .tag { font-size: 0.5rem; padding: 0.2rem 0.42rem; letter-spacing: 0.08em; }

    .pizza-card-nombre { font-size: 1rem; margin-bottom: 0.25rem; }

    /* La bajada es texto de venta; la lista de ingredientes es el dato. En 155px
       de ancho no entran las dos, así que queda la que informa. La bajada sigue
       estando en el armador. */
    .pizza-card-desc { display: none; }

    .pizza-card-ing {
        font-size: 0.63rem;
        line-height: 1.4;
        margin-bottom: 0.55rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .pizza-card-precio { margin-bottom: 0.55rem; }
    .precio-grande { font-size: 1.05rem; }
    /* "Chica desde $8.600" no entra en la misma línea que el precio y apilarlo
       cuesta 14px por tarjeta. Los tres tamaños están en el armador. */
    .precio-desde { display: none; }

    /* Lado a lado. Apilados costaban 78px de alto por tarjeta — la diferencia
       exacta entre ver cuatro gustos y ver tres. */
    .pizza-card-acciones { gap: 0.4rem; }

    /* 38px de alto: apretar más deja targets que se erran con el pulgar, y con
       las cuatro tarjetas entrando todavía sobran 60px de pantalla. */
    .btn-personalizar {
        min-height: 38px;
        padding: 0.4rem 0.3rem;
        font-size: 0.68rem;
    }
    .btn-agregar {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        font-size: 1.2rem;
    }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .pizza-card,
    .pedido-item,
    .armador-selectores,
    .pizza-svg.es-nueva { animation: none; }

    .pizza-card:hover { transform: none; }
    .pizza-card:hover .pizza-svg { transform: none; }
}