/* ======================================================
   KORA · /restaurantes — pedidos desde mesa con NFC

   Personalidad propia sobre la base común (landing.css):
   objetos reales de sala —la etiqueta NFC, la mesa, la comanda
   de papel— frente a la interfaz digital del móvil.
   ====================================================== */

.lp--restaurantes {
    --object: #eeebe6;
    --object-ink: #1b1715;
    --object-muted: #5b534e;
    --table: #141110;
}

/* ======================================================
   HERO
   ====================================================== */
.r-hero {
    overflow: hidden;
}

.r-hero__visual {
    --loop: 9s;
    position: relative;
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
}

.r-scene {
    position: relative;
    height: 468px;
    font-size: 8.2px; /* escala todo el mockup (medidas en em) */
}

@media (min-width: 400px) {
    .r-scene { height: 492px; font-size: 8.6px; }
}

@media (min-width: 560px) {
    .r-scene { height: 580px; font-size: 10px; }
}

@media (min-width: 960px) {
    .r-scene { height: 610px; font-size: 10.4px; }
}

.r-scene__table {
    position: absolute;
    top: 20%;
    left: 50%;
    width: max(122%, 440px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 28%, #1c1816 0%, var(--table) 58%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        inset 0 0 0 2.6em rgba(0, 0, 0, 0.16),
        inset 0 0 0 calc(2.6em + 1px) rgba(255, 255, 255, 0.035);
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(#000 30%, transparent 78%);
    mask-image: linear-gradient(#000 30%, transparent 78%);
}

/* ---------- Etiqueta NFC física ---------- */
.r-tag {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 15em;
    height: 15em;
    padding: 1.5em;
    border-radius: 2.4em;
    background: var(--object);
    color: var(--object-ink);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 2px 3px rgba(0, 0, 0, 0.45),
        0 26px 40px -14px rgba(0, 0, 0, 0.85);
}

.r-tag__waves {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.r-tag__waves i {
    position: absolute;
    inset: 0;
    border: 0.16em solid var(--coral);
    border-radius: 2.4em;
    opacity: 0;
    animation: r-wave 2.8s var(--ease) infinite;
}

.r-tag__waves i:nth-child(2) { animation-delay: 0.93s; }
.r-tag__waves i:nth-child(3) { animation-delay: 1.86s; }

@keyframes r-wave {
    0% { opacity: 0.85; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.6); }
}

.r-tag__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.r-tag__top .icon {
    width: 3em;
    height: 3em;
    stroke-width: 2.1;
}

.r-tag__table {
    font-size: 1.1em;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.r-tag__label {
    font-size: 1.55em;
    font-weight: 680;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.r-tag__qr {
    display: flex;
    align-items: center;
    gap: 0.8em;
}

.r-tag__qr .qr-art {
    width: 3.4em;
    height: 3.4em;
    flex-shrink: 0;
    fill: var(--object-ink);
}

.r-tag__qr small {
    max-width: 6.5em;
    font-size: 1em;
    font-weight: 550;
    line-height: 1.15;
    color: var(--object-muted);
}

/* ---------- Posiciones de la escena del hero ---------- */
.r-scene__tag {
    bottom: 46px;
    left: 1%;
    z-index: 1;
    transform: rotate(-9deg);
}

.r-scene__device {
    position: absolute;
    top: 0;
    right: 4%;
    z-index: 2;
    transform: rotate(-3deg);
    animation: r-enter 1s var(--ease) both, r-float 6s ease-in-out 1s infinite alternate;
}

@keyframes r-enter {
    from { opacity: 0; transform: translateY(28px) rotate(-3deg); }
    to { opacity: 1; transform: rotate(-3deg); }
}

@keyframes r-float {
    from { transform: rotate(-3deg); }
    to { transform: translateY(-10px) rotate(-3deg); }
}

.r-scene__ticket {
    top: 148px;
    left: 0;
    transform: rotate(4deg);
}

@media (min-width: 560px) {
    .r-scene__tag { bottom: 58px; left: 4%; }
    .r-scene__ticket { top: 160px; left: 3%; }
    .r-scene__device { right: 9%; }
}

@media (min-width: 960px) {
    .r-scene__tag { left: 0; }
    .r-scene__ticket { top: 176px; left: 1%; }
    .r-scene__device { right: 6%; }
}

/* ---------- Comanda de papel ---------- */
.r-ticket {
    position: absolute;
    z-index: 3;
    width: 19.5em;
    filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.65));
}

.r-ticket__paper {
    --zz: 0.8em;
    display: flex;
    flex-direction: column;
    padding: 1.6em 1.7em 2.4em;
    border-radius: 1.2em 1.2em 0 0;
    background: var(--object);
    color: var(--object-ink);
    /* borde inferior dentado de ticket */
    -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--zz)) 100%;
    mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--zz)) 100%;
}

.r-ticket__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.05em;
    font-weight: 600;
    color: var(--object-muted);
}

.r-ticket__new {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    color: var(--object-ink);
}

.r-ticket__new::before {
    content: '';
    width: 0.65em;
    height: 0.65em;
    border-radius: 50%;
    background: #e2645f;
    box-shadow: 0 0 0 0.3em rgba(226, 100, 95, 0.2);
}

.r-ticket__table {
    margin: 0.35em 0 0.5em;
    font-size: 2.6em;
    font-weight: 720;
    line-height: 1;
    letter-spacing: -0.045em;
}

.r-ticket__line {
    display: flex;
    gap: 0.55em;
    padding-block: 0.55em;
    border-top: 1px dashed rgba(27, 23, 21, 0.22);
    font-size: 1.1em;
    font-weight: 500;
    white-space: nowrap;
}

.r-ticket__line b {
    min-width: 1.4em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.r-ticket__total {
    display: flex;
    justify-content: space-between;
    margin-top: 0.3em;
    padding-top: 0.65em;
    border-top: 1.5px solid var(--object-ink);
    font-size: 1.15em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------- Interfaz de la carta en el móvil ---------- */
.r-app {
    display: flex;
    flex-direction: column;
    height: calc(100% - 4.6em);
    padding: 0.4em 1.6em 0;
}

.r-app__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1em 0 1.3em;
}

.r-app__table {
    display: block;
    font-size: 1.1em;
    color: var(--muted);
}

.r-app__name {
    display: block;
    font-size: 2.1em;
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: -0.035em;
}

.r-app__nfc {
    display: grid;
    place-items: center;
    width: 3.8em;
    height: 3.8em;
    border-radius: 50%;
    background: var(--coral-wash);
    color: var(--coral);
}

.r-app__nfc .icon {
    width: 1.9em;
    height: 1.9em;
    stroke-width: 2;
}

.r-app__tabs {
    display: flex;
    gap: 0.6em;
    margin-bottom: 1.3em;
    overflow: hidden;
}

.r-app__tabs span {
    padding: 0.65em 1.15em;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 99em;
    font-size: 1.1em;
    color: var(--muted);
    white-space: nowrap;
}

.r-app__tabs .is-on {
    border-color: transparent;
    background: var(--paper);
    color: var(--ink);
    font-weight: 600;
}

.r-app__list {
    display: grid;
    gap: 0.8em;
}

.r-item {
    display: grid;
    grid-template-columns: 4.8em minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9em;
    padding: 0.8em;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1.6em;
    background: #161616;
}

/* Miniatura del plato: plato + comida, dibujado con CSS (sin fotos de stock) */
.r-item__img {
    position: relative;
    width: 4.8em;
    height: 4.8em;
    overflow: hidden;
    border-radius: 1.1em;
    background: #241e1b;
}

.r-item__img::before {
    content: '';
    position: absolute;
    inset: 0.6em;
    border-radius: 50%;
    background: #ebe6de;
    box-shadow: inset 0 0 0 0.35em #f5f2ec;
}

.r-item__img::after {
    content: '';
    position: absolute;
    inset: 1.4em;
    border-radius: 50%;
    background: var(--food);
    box-shadow: 0.55em -0.35em 0 -0.35em var(--food-2), -0.4em 0.45em 0 -0.4em var(--food-2);
}

.r-item__txt {
    min-width: 0;
}

.r-item__txt b {
    display: block;
    overflow: hidden;
    font-size: 1.12em;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.r-item__txt small {
    display: block;
    overflow: hidden;
    margin-top: 0.15em;
    font-size: 1em;
    color: var(--muted);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.r-item__txt em {
    display: block;
    margin-top: 0.3em;
    font-size: 1.15em;
    font-style: normal;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.r-add {
    position: relative;
    width: 3.4em;
    height: 3.4em;
}

.r-add > span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 1.45em;
    font-weight: 650;
    line-height: 1;
}

.r-add__plus {
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--paper);
}

.r-add__one {
    background: var(--coral);
    color: var(--on-coral);
}

/* Estado final por defecto (se ve así sin animación) */
.r-add--flip .r-add__plus {
    opacity: 0;
}

.r-cart {
    display: flex;
    align-items: center;
    gap: 0.8em;
    margin-top: auto;
    margin-bottom: 1.8em;
    padding: 0.8em 0.8em 0.8em 1.5em;
    border-radius: 2.2em;
    background: var(--paper);
    color: var(--ink);
}

.r-cart__info {
    display: grid;
    line-height: 1.15;
}

.r-swap {
    display: grid;
}

.r-swap > span {
    grid-area: 1 / 1;
}

.r-swap__a {
    opacity: 0;
}

.r-cart__info > .r-swap:first-child {
    font-size: 1em;
    color: #5c5c5a;
}

.r-cart__total {
    font-size: 1.5em;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.r-cart__btn {
    margin-left: auto;
    padding: 0.95em 1.4em;
    border-radius: 1.6em;
    background: var(--ink);
    color: var(--paper);
    font-size: 1.15em;
    font-weight: 600;
    white-space: nowrap;
}

.r-sent {
    position: absolute;
    right: 1.2em;
    bottom: 1.2em;
    left: 1.2em;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 1.1em;
    padding: 1.6em;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 2.6em;
    background: #1b1b1b;
    box-shadow: 0 -24px 40px rgba(0, 0, 0, 0.55);
    opacity: 0;
    transform: translateY(1.5em);
}

.r-sent__check {
    display: grid;
    place-items: center;
    width: 4.2em;
    height: 4.2em;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--coral);
    color: var(--on-coral);
}

.r-sent__check .icon {
    width: 2em;
    height: 2em;
    stroke-width: 3;
}

.r-sent b {
    display: block;
    font-size: 1.5em;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.r-sent small {
    display: block;
    font-size: 1.1em;
    color: var(--muted);
}

/* ---------- Bucle del hero: se añade un plato, se envía, llega la comanda ---------- */
.r-scene .r-add--flip .r-add__plus { animation: r-out var(--loop) infinite both; }
.r-scene .r-add--flip .r-add__one { animation: r-in-pop var(--loop) infinite both; }
.r-scene .r-swap__a { animation: r-out var(--loop) infinite both; }
.r-scene .r-swap__b { animation: r-in var(--loop) infinite both; }
.r-scene .r-cart__btn { animation: r-press var(--loop) infinite; }
.r-scene .r-sent { animation: r-sent var(--loop) infinite both; }
.r-scene__ticket { animation: r-ticket var(--loop) infinite both; }

@keyframes r-out {
    0%, 20% { opacity: 1; }
    23%, 94% { opacity: 0; }
    98%, 100% { opacity: 1; }
}

@keyframes r-in {
    0%, 20% { opacity: 0; }
    23%, 94% { opacity: 1; }
    98%, 100% { opacity: 0; }
}

@keyframes r-in-pop {
    0%, 20% { opacity: 0; transform: scale(0.4); }
    24% { opacity: 1; transform: scale(1.12); }
    27%, 94% { opacity: 1; transform: scale(1); }
    98%, 100% { opacity: 0; transform: scale(0.4); }
}

@keyframes r-press {
    0%, 36% { transform: none; }
    39% { transform: scale(0.92); }
    43%, 100% { transform: none; }
}

@keyframes r-sent {
    0%, 42% { opacity: 0; transform: translateY(1.5em); }
    47%, 86% { opacity: 1; transform: none; }
    91%, 100% { opacity: 0; transform: translateY(1.5em); }
}

@keyframes r-ticket {
    0%, 50% { opacity: 0; transform: translate(-1.2em, 1.2em) rotate(-1deg); }
    57%, 88% { opacity: 1; transform: rotate(4deg); }
    94%, 100% { opacity: 0; transform: translate(-1.2em, 1.2em) rotate(-1deg); }
}

/* ---------- Flujo NFC → móvil → pedido ---------- */
.r-flow {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
}

.r-flow__step {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px 8px 10px;
    border: 1px solid var(--coral-line);
    border-radius: 999px;
    background: #1c1414;
    font-size: 0.8125rem;
    font-weight: 560;
    color: var(--paper);
    white-space: nowrap;
}

.r-flow__step .icon {
    width: 16px;
    height: 16px;
    color: var(--coral);
    stroke-width: 2;
}

.r-flow__sep {
    width: clamp(14px, 5vw, 40px);
    height: 1px;
    background: var(--line-strong);
}

.r-flow__step--1 { animation: r-flow-1 var(--loop) infinite; }
.r-flow__step--2 { animation: r-flow-2 var(--loop) infinite; }
.r-flow__step--3 { animation: r-flow-3 var(--loop) infinite; }

@keyframes r-flow-1 {
    0%, 21% { border-color: var(--coral-line); background-color: #1c1414; color: var(--paper); }
    24%, 100% { border-color: var(--line-strong); background-color: #121212; color: var(--muted); }
}

@keyframes r-flow-2 {
    0%, 21% { border-color: var(--line-strong); background-color: #121212; color: var(--muted); }
    24%, 45% { border-color: var(--coral-line); background-color: #1c1414; color: var(--paper); }
    48%, 100% { border-color: var(--line-strong); background-color: #121212; color: var(--muted); }
}

@keyframes r-flow-3 {
    0%, 45% { border-color: var(--line-strong); background-color: #121212; color: var(--muted); }
    48%, 94% { border-color: var(--coral-line); background-color: #1c1414; color: var(--paper); }
    97%, 100% { border-color: var(--line-strong); background-color: #121212; color: var(--muted); }
}

/* ======================================================
   CÓMO FUNCIONA
   ====================================================== */
.r-steps {
    display: grid;
}

.r-step {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 18px;
    padding-bottom: 44px;
}

.r-step:last-child {
    padding-bottom: 0;
}

.r-step::before {
    content: '';
    position: absolute;
    top: 52px;
    bottom: 8px;
    left: 21.5px;
    width: 1px;
    background: var(--line-strong);
}

.r-step:last-child::before {
    display: none;
}

.r-step__n {
    grid-column: 1;
    grid-row: 1 / span 3;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--ink);
    font-size: 0.8125rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.r-step h3 {
    grid-column: 2;
    padding-top: 10px;
}

.r-step p {
    grid-column: 2;
    margin-top: 6px;
    color: var(--muted);
}

.r-art {
    position: relative;
    grid-column: 2;
    height: 150px;
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--ink-raised);
}

@media (min-width: 640px) and (max-width: 959px) {
    .r-art { height: 170px; }
}

@media (min-width: 960px) {
    .r-steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
    }

    .r-step {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto 1fr;
        padding-bottom: 0;
    }

    .r-art {
        grid-column: 1;
        grid-row: 1;
        height: 180px;
        margin: 0 0 28px;
    }

    .r-step__n { grid-column: 1; grid-row: 2; }
    .r-step h3 { grid-column: 1; grid-row: 3; padding-top: 18px; }
    .r-step p { grid-column: 1; grid-row: 4; }

    .r-step::before {
        top: calc(180px + 28px + 22px);
        right: -12px;
        bottom: auto;
        left: 56px;
        width: auto;
        height: 1px;
    }
}

/* 1 · acercar el móvil */
.r-art--tap .r-art__tag {
    position: absolute;
    bottom: 18px;
    left: 50%;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-left: -29px;
    border-radius: 14px;
    background: var(--object);
    color: var(--object-ink);
    box-shadow: 0 10px 20px -6px rgba(0, 0, 0, 0.7);
}

.r-art--tap .r-art__tag .icon {
    width: 26px;
    height: 26px;
    stroke-width: 2.1;
}

.r-art--tap .r-art__phone {
    position: absolute;
    top: -40px;
    left: 50%;
    z-index: 2;
    width: 86px;
    height: 112px;
    margin-left: -43px;
    border-radius: 18px;
    background: #1c1c1c;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 0 0 4px #0c0c0c, 0 14px 24px -8px rgba(0, 0, 0, 0.8);
    animation: r-tap 3.2s var(--ease) infinite;
}

.r-art--tap .r-art__waves i {
    position: absolute;
    bottom: 47px;
    left: 50%;
    width: 92px;
    height: 92px;
    margin: 0 0 -46px -46px;
    border: 1.5px solid var(--coral);
    border-radius: 50%;
    opacity: 0;
    animation: r-art-wave 3.2s ease-out infinite;
}

.r-art--tap .r-art__waves i:nth-child(2) {
    animation-delay: 0.3s;
}

@keyframes r-tap {
    0%, 100% { transform: translateY(0); }
    40%, 62% { transform: translateY(12px); }
}

@keyframes r-art-wave {
    0%, 38% { opacity: 0; transform: scale(0.5); }
    52% { opacity: 0.9; }
    100% { opacity: 0; transform: scale(1.6); }
}

/* 2 · la carta en el navegador */
.r-art--browser {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
}

.r-art__url {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    overflow: hidden;
    border-radius: 999px;
    background: #1d1d1d;
    font-size: 0.8125rem;
    color: var(--paper-soft);
    white-space: nowrap;
}

.r-art__url .icon {
    width: 14px;
    height: 14px;
    color: var(--muted);
}

.r-art__line {
    width: 55%;
    height: 10px;
    border-radius: 99px;
    background: #1f1f1f;
}

.r-art__line--lg {
    width: 78%;
    height: 14px;
    margin-top: 6px;
    background: #282828;
}

.r-art__noapp {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    padding: 6px 11px;
    border: 1px solid var(--coral-line);
    border-radius: 999px;
    background: var(--coral-wash);
    font-size: 0.8125rem;
    font-weight: 550;
    color: #ffd3d3;
}

.r-art__noapp .icon {
    width: 14px;
    height: 14px;
    color: var(--coral);
}

/* 3 · elegir productos */
.r-art--pick {
    display: grid;
    align-content: center;
    gap: 10px;
    padding: 16px;
}

.r-art__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 10px 10px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #181818;
}

.r-art__row b {
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 560;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.r-art__stepper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.r-art__stepper i,
.r-art__add {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    font-size: 0.9375rem;
    font-style: normal;
    line-height: 1;
}

.r-art__stepper i:last-child {
    border-color: var(--coral);
    background: var(--coral);
    color: var(--on-coral);
}

.r-art__stepper em {
    min-width: 10px;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 650;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* 4 · llega al restaurante */
.r-art--order {
    display: grid;
    place-items: center;
}

.r-art__ticket {
    --zz: 6px;
    display: grid;
    gap: 2px;
    width: 156px;
    padding: 12px 14px 18px;
    border-radius: 10px 10px 0 0;
    background: var(--object);
    color: var(--object-ink);
    transform: rotate(-3deg);
    -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--zz)) 100%;
    mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--zz)) 100%;
}

.r-art__ticket-top {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.r-art__ticket-top i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e2645f;
}

.r-art__ticket b {
    margin-top: 4px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.r-art__ticket-line {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px dashed rgba(27, 23, 21, 0.22);
    font-size: 0.75rem;
    color: var(--object-muted);
}

/* ======================================================
   BENEFICIOS
   ====================================================== */
.r-benefits {
    display: grid;
}

@media (min-width: 960px) {
    .r-benefits {
        grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
        gap: 64px;
        align-items: start;
    }

    .r-benefits__head {
        position: sticky;
        top: 120px;
        margin-bottom: 0;
    }
}

.r-bgroup + .r-bgroup {
    margin-top: 44px;
}

.r-bgroup__title {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--coral);
}

.r-blist {
    display: grid;
}

@media (min-width: 640px) {
    .r-blist {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 32px;
    }
}

.r-blist li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    padding-block: 22px;
    border-bottom: 1px solid var(--line);
}

.r-bicon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--ink-raised);
}

.r-bicon .icon {
    width: 20px;
    height: 20px;
}

.r-blist h4 {
    padding-top: 2px;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

.r-blist p {
    margin-top: 6px;
    font-size: 0.9375rem;
    color: var(--muted);
}

/* ======================================================
   EXPERIENCIA DEL CLIENTE (recorrido interactivo)
   ====================================================== */
.r-journey-section {
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, var(--ink) 0%, #0f0d0c 22%, #0f0d0c 78%, var(--ink) 100%);
}

.r-journey {
    display: grid;
    gap: 16px;
}

@media (min-width: 960px) {
    .r-journey {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 48px;
        align-items: center;
    }
}

.r-journey__tabs {
    position: relative;
    display: flex;
    gap: 8px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 2px var(--gutter) 6px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}

.r-journey__tabs::-webkit-scrollbar {
    display: none;
}

.r-jtab {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    padding: 7px 16px 7px 7px;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: transparent;
    font-size: 0.9375rem;
    font-weight: 560;
    text-align: left;
    color: var(--muted);
    scroll-snap-align: start;
    transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}

.r-jtab:hover {
    color: var(--paper);
}

.r-jtab__n {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    font-size: 0.75rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.r-jtab__body {
    display: grid;
}

.r-jtab__d {
    display: none;
}

.r-jtab.is-active {
    border-color: var(--coral-line);
    background: var(--coral-wash);
    color: var(--paper);
}

.r-jtab.is-active .r-jtab__n {
    background: var(--coral);
    color: var(--on-coral);
}

.r-jtab__bar {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
}

.r-jtab__bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--coral);
    transform: scaleX(0);
    transform-origin: left;
}

.r-journey.is-auto .r-jtab.is-active .r-jtab__bar::after {
    animation: r-fill var(--journey-interval, 3.8s) linear forwards;
}

@keyframes r-fill {
    to { transform: scaleX(1); }
}

@media (min-width: 960px) {
    .r-journey__tabs {
        flex-direction: column;
        gap: 6px;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .r-jtab {
        align-items: flex-start;
        gap: 18px;
        padding: 20px 24px 22px 20px;
        border-color: transparent;
        border-radius: var(--r-lg);
        font-size: 1rem;
        color: var(--paper-soft);
    }

    .r-jtab__n {
        width: 34px;
        height: 34px;
        font-size: 0.8125rem;
    }

    .r-jtab__t {
        font-size: 1.125rem;
        font-weight: 600;
        letter-spacing: -0.015em;
    }

    .r-jtab__d {
        display: block;
        margin-top: 4px;
        font-size: 0.9375rem;
        font-weight: 450;
        line-height: 1.45;
        color: var(--muted);
    }

    .r-jtab.is-active {
        border-color: var(--line);
        background: var(--ink-raised);
    }

    .r-jtab__bar {
        right: 24px;
        left: 24px;
    }
}

/* ---------- Escenario ---------- */
.r-stage {
    position: relative;
    height: 500px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: #110f0e;
    font-size: 8px;
    isolation: isolate;
}

@media (min-width: 400px) {
    .r-stage { height: 520px; font-size: 8.4px; }
}

@media (min-width: 560px) {
    .r-stage { height: 580px; font-size: 9.4px; }
}

@media (min-width: 960px) {
    .r-stage { height: 620px; font-size: 10px; }
}

.r-stage__scene {
    position: absolute;
    inset: 0;
}

.r-stage__table {
    position: absolute;
    top: 46%;
    left: 50%;
    width: 150%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 20%, #1e1a18, var(--table) 50%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        inset 0 0 0 3.2em rgba(0, 0, 0, 0.15),
        inset 0 0 0 calc(3.2em + 1px) rgba(255, 255, 255, 0.035);
    transform: translateX(-50%);
    transition: transform 0.9s var(--ease);
}

.r-stage[data-stage='1'] .r-stage__table {
    transform: translate(-50%, -22%);
}

/* Platos y vaso sobre la mesa (se mueven con ella) */
.r-stage__table i {
    position: absolute;
    aspect-ratio: 1;
    border-radius: 50%;
}

.r-stage__table i:nth-child(1),
.r-stage__table i:nth-child(2) {
    top: 7%;
    width: 13%;
    background: #221e1c;
    box-shadow:
        inset 0 0 0 0.9em #2a2522,
        inset 0 0 0 calc(0.9em + 1px) rgba(255, 255, 255, 0.05),
        0 1.2em 2em -0.8em rgba(0, 0, 0, 0.7);
}

.r-stage__table i:nth-child(1) { left: 30%; }
.r-stage__table i:nth-child(2) { right: 30%; }

.r-stage__table i:nth-child(3) {
    top: 18%;
    right: 21%;
    width: 5.5%;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 0 0 0.45em rgba(255, 255, 255, 0.07), 0 1em 1.5em -0.8em rgba(0, 0, 0, 0.6);
}

.r-stage__glass {
    display: none;
    position: absolute;
    top: 60%;
    right: 10%;
    width: 8em;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.025);
    box-shadow: inset 0 0 0 0.5em rgba(255, 255, 255, 0.06), 0 1.5em 2em -1em rgba(0, 0, 0, 0.6);
}

.r-stage__label {
    display: none;
}

.r-stage__tag {
    top: 63%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -70%) rotate(-6deg) scale(1.2);
    transition: transform 0.9s var(--ease);
}

.r-stage:not([data-stage='1']) .r-stage__tag {
    transform: translateX(-118%) rotate(-10deg);
}

.r-stage .r-tag__waves i {
    animation: none;
}

.r-stage[data-stage='1'] .r-tag__waves i,
.r-stage[data-stage='2'] .r-tag__waves i {
    animation: r-wave 2.8s var(--ease) infinite;
}

.r-stage__device {
    position: absolute;
    top: 32px;
    left: 50%;
    z-index: 3;
    opacity: 0;
    transform: translate(-50%, 60%) rotate(-4deg);
    transition: transform 0.9s var(--ease), opacity 0.5s ease;
}

.r-stage[data-stage='2'] .r-stage__device {
    opacity: 1;
    transform: translate(-28%, 30%) rotate(-10deg);
}

.r-stage[data-stage='3'] .r-stage__device,
.r-stage[data-stage='4'] .r-stage__device {
    opacity: 1;
    transform: translate(-50%, 0);
}

.r-stage[data-stage='5'] .r-stage__device {
    opacity: 1;
    transform: translate(-72%, 0);
}

@media (min-width: 960px) {
    .r-stage[data-stage='5'] .r-stage__device {
        transform: translate(-82%, 0);
    }

    .r-stage__ticket {
        top: 20%;
        right: 5%;
    }
}

/* Pantallas del móvil: una por paso */
.r-screen {
    position: absolute;
    inset: 4.6em 0 0;
    display: flex;
    flex-direction: column;
    padding: 0.4em 1.6em 0;
    opacity: 0;
    transform: translateY(1em);
    transition: opacity 0.4s ease, transform 0.6s var(--ease);
}

.r-screen > * {
    flex-shrink: 0;
}

.r-stage[data-stage='1'] .r-screen--lock,
.r-stage[data-stage='2'] .r-screen--lock,
.r-stage[data-stage='3'] .r-screen--browser,
.r-stage[data-stage='4'] .r-screen--menu,
.r-stage[data-stage='5'] .r-screen--sent {
    opacity: 1;
    transform: none;
    transition-delay: 0.15s;
}

/* Bloqueo + aviso de etiqueta NFC */
.r-lock__time {
    margin-top: 1.4em;
    font-size: 6.6em;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.05em;
    text-align: center;
}

.r-nfcsheet {
    display: grid;
    grid-template-columns: 4.2em minmax(0, 1fr);
    align-items: center;
    gap: 1.1em;
    margin-top: 3em;
    padding: 1.3em;
    border-radius: 2.2em;
    background: rgba(46, 46, 46, 0.94);
    opacity: 0;
    transform: translateY(-1.2em) scale(0.96);
    transition: opacity 0.4s ease, transform 0.6s var(--ease);
}

.r-stage[data-stage='2'] .r-nfcsheet {
    opacity: 1;
    transform: none;
    transition-delay: 0.6s;
}

.r-nfcsheet__icon {
    display: grid;
    place-items: center;
    width: 4.2em;
    height: 4.2em;
    border-radius: 1.1em;
    background: var(--coral);
    color: var(--on-coral);
}

.r-nfcsheet__icon .icon {
    width: 2.2em;
    height: 2.2em;
    stroke-width: 2.2;
}

.r-nfcsheet b {
    display: block;
    font-size: 1.25em;
    font-weight: 650;
}

.r-nfcsheet small {
    display: block;
    font-size: 1.1em;
    line-height: 1.25;
    color: #c4c4c1;
}

/* Navegador abriendo la carta */
.r-url {
    display: flex;
    align-items: center;
    gap: 0.6em;
    margin-top: 0.6em;
    padding: 0.8em 1.2em;
    border-radius: 99em;
    background: #1c1c1c;
    font-size: 1.1em;
    color: var(--paper-soft);
    white-space: nowrap;
}

.r-url .icon {
    width: 1.1em;
    height: 1.1em;
    color: var(--muted);
}

.r-load {
    height: 0.25em;
    margin: 0.9em 0 2.2em;
    overflow: hidden;
    border-radius: 99em;
    background: rgba(255, 255, 255, 0.06);
}

.r-load i {
    display: block;
    height: 100%;
    background: var(--coral);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.2s var(--ease);
}

.r-stage[data-stage='3'] .r-load i {
    transform: scaleX(1);
    transition-delay: 0.3s;
}

.r-browser__name {
    font-size: 2.6em;
    font-weight: 650;
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.r-browser__sub {
    margin-top: 0.3em;
    font-size: 1.2em;
    color: var(--muted);
}

.r-browser__chip {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 0.5em;
    margin-top: 1.4em;
    padding: 0.55em 1em;
    border: 1px solid var(--coral-line);
    border-radius: 99em;
    background: var(--coral-wash);
    font-size: 1.05em;
    font-weight: 550;
    color: #ffd3d3;
}

.r-browser__chip .icon {
    width: 1.2em;
    height: 1.2em;
    color: var(--coral);
}

.r-skel {
    display: grid;
    gap: 0.9em;
    margin-top: 2.2em;
}

.r-skel i {
    display: block;
    height: 6.8em;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 1.6em;
    background: #151515;
}

/* Carta: el plato se añade al llegar al paso */
.r-screen--menu {
    padding-top: 1.2em;
}

.r-stage .r-add--step .r-add__plus {
    transition: opacity 0.25s ease;
}

.r-stage .r-add--step .r-add__one {
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.r-stage[data-stage='4'] .r-add--step .r-add__plus {
    opacity: 0;
    transition-delay: 1.2s;
}

.r-stage[data-stage='4'] .r-add--step .r-add__one {
    opacity: 1;
    transform: none;
    transition-delay: 1.2s;
}

.r-stage .r-swap--step .r-swap__a {
    opacity: 1;
    transition: opacity 0.25s ease;
}

.r-stage .r-swap--step .r-swap__b {
    opacity: 0;
    transition: opacity 0.25s ease;
}

.r-stage[data-stage='4'] .r-swap--step .r-swap__a {
    opacity: 0;
    transition-delay: 1.25s;
}

.r-stage[data-stage='4'] .r-swap--step .r-swap__b {
    opacity: 1;
    transition-delay: 1.25s;
}

/* Pedido enviado */
.r-screen--sent {
    align-items: center;
    padding-top: 3.4em;
    text-align: center;
}

.r-done__check {
    display: grid;
    place-items: center;
    width: 7em;
    height: 7em;
    border-radius: 50%;
    background: var(--coral);
    color: var(--on-coral);
    transform: scale(0.6);
    transition: transform 0.6s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.r-stage[data-stage='5'] .r-done__check {
    transform: none;
    transition-delay: 0.25s;
}

.r-done__check .icon {
    width: 3.4em;
    height: 3.4em;
    stroke-width: 2.6;
}

.r-done__title {
    margin-top: 1.1em;
    font-size: 2.4em;
    font-weight: 650;
    letter-spacing: -0.04em;
}

.r-done__sub {
    font-size: 1.25em;
    color: var(--muted);
}

.r-done__list {
    display: grid;
    width: 100%;
    margin-top: 2.2em;
    padding: 0.6em 1.4em;
    border-radius: 1.8em;
    background: #151515;
    text-align: left;
}

.r-done__list > span {
    display: flex;
    gap: 0.6em;
    padding-block: 0.95em;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 1.15em;
    white-space: nowrap;
}

.r-done__list > span:first-child {
    border-top: 0;
}

.r-done__list b {
    min-width: 1.5em;
    font-weight: 650;
}

.r-done__list em {
    margin-left: auto;
    font-style: normal;
    color: var(--paper-soft);
    font-variant-numeric: tabular-nums;
}

.r-done__total {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 1em;
    padding-inline: 1.4em;
    font-size: 1.3em;
}

.r-done__total b {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* La comanda llega al restaurante */
.r-stage__ticket {
    top: 44%;
    right: 4%;
    z-index: 4;
    opacity: 0;
    transform: translateX(3em) rotate(10deg);
    transition: opacity 0.5s ease, transform 0.9s var(--ease);
}

.r-stage[data-stage='5'] .r-stage__ticket {
    opacity: 1;
    transform: rotate(4deg);
    transition-delay: 0.5s;
}

.r-stage__ticket::before {
    content: 'En el restaurante';
    display: block;
    margin: 0 0 0.8em 0.2em;
    font-size: 1.15em;
    font-weight: 600;
    color: var(--coral);
}

.r-stage__caption {
    position: absolute;
    right: 12px;
    bottom: 12px;
    left: 12px;
    z-index: 8;
    padding: 13px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    background: rgba(14, 14, 14, 0.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--paper);
}

@media (min-width: 960px) {
    .r-stage__caption {
        display: none;
    }
}

/* ======================================================
   PRECIO
   ====================================================== */
.r-price {
    position: relative;
    display: grid;
    gap: 40px;
    padding: clamp(26px, 6vw, 64px);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: var(--ink-raised);
    isolation: isolate;
}

/* Ondas NFC como marca de agua */
.r-price::after {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    z-index: -1;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: repeating-radial-gradient(circle, transparent 0 36px, rgba(255, 131, 131, 0.14) 36px 37px);
    -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 68%);
    mask-image: radial-gradient(circle, #000 18%, transparent 68%);
    pointer-events: none;
}

@media (min-width: 960px) {
    .r-price {
        grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
        gap: 72px;
        align-items: center;
    }
}

.r-price__from {
    margin-top: 28px;
    font-size: 1.125rem;
    color: var(--muted);
}

.r-price__amount {
    margin-top: 6px;
    font-size: clamp(5rem, 3.2rem + 7.5vw, 9rem);
}

.r-price .lp-lead {
    max-width: 30em;
    margin-top: 22px;
}

.r-price .btn {
    width: 100%;
    margin-top: 32px;
}

@media (min-width: 560px) {
    .r-price .btn { width: auto; }
}

.r-price__note {
    margin-top: 16px;
    font-size: 0.9375rem;
    color: var(--muted);
}

.r-price__side {
    padding: 24px 26px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--ink);
}

.r-price__side-title {
    margin-bottom: 6px;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--paper-soft);
}

/* ======================================================
   TIPOS DE NEGOCIO
   ====================================================== */
.r-biz {
    display: grid;
}

@media (min-width: 960px) {
    .r-biz {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 64px;
        align-items: center;
    }

    .r-biz .lp-head {
        margin-bottom: 0;
    }
}

.r-biz__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.r-biz__list li {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 22px 13px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
    font-weight: 560;
    letter-spacing: -0.02em;
}

.r-biz__list .icon {
    width: 1.1em;
    height: 1.1em;
    color: var(--coral);
}

.r-biz__list .is-all {
    border-color: transparent;
    background: var(--paper);
    color: var(--ink);
}

.r-biz__list .is-all .icon {
    color: var(--ink);
}

/* ======================================================
   CTA FINAL
   ====================================================== */
.r-final__rings {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 25%, transparent 72%);
    mask-image: radial-gradient(circle at 50% 50%, #000 25%, transparent 72%);
}

.r-final__rings i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--s);
    aspect-ratio: 1;
    border: 1px solid rgba(255, 131, 131, var(--a));
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.r-final__rings i:nth-child(1) { --s: 300px; --a: 0.2; }
.r-final__rings i:nth-child(2) { --s: 540px; --a: 0.13; }
.r-final__rings i:nth-child(3) { --s: 800px; --a: 0.08; }
.r-final__rings i:nth-child(4) { --s: 1080px; --a: 0.05; }

.r-final__rings i:nth-child(5) {
    --s: 300px;
    --a: 0.45;
    animation: r-ring 6s var(--ease) infinite;
}

@keyframes r-ring {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
    10% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(3.6); }
}

/* ======================================================
   MOVIMIENTO REDUCIDO: estado final estático
   ====================================================== */
@media (prefers-reduced-motion: reduce) {
    .r-hero__visual *,
    .r-steps *,
    .r-final__rings *,
    .r-stage * {
        animation: none !important;
    }

    .r-scene__device {
        transform: rotate(-3deg);
    }
}