/* ═══════════════════════════════════════════════════════════════════
   FLUX Restaurant — página pública de producto (flux.restaurant)

   Dos temas: tinta y blanco, con un interruptor de sol y luna en la
   barra superior. Arranca en TINTA y la elección se guarda en cookie,
   que el servidor lee para pintar la página ya en su tema. Cada color
   sale de un token semántico --st-*, que es lo único que cambia entre
   temas; ninguna regla de abajo conoce el tema en el que está. Por eso
   la tinta vive en el bloque base: si la cookie falta o trae basura, la
   página cae en el tema de arranque sola.

   Del kit de marketing del design system se conservan las reglas que
   siguen aplicando: un solo botón lima por pantalla, y sobre lima
   siempre va tinta. La lima como TEXTO cambia de tono según el fondo
   (500 sobre tinta, 700 sobre blanco) porque el 500 no es legible en
   claro. No carga Bootstrap: la página es estática.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tema tinta: el de arranque ───────────────────────────────────── */
.sitio-body {
    --st-lienzo: var(--flux-ink-900);
    --st-superficie: var(--flux-ink-700);
    --st-borde: var(--flux-ink-500);
    --st-titulo: var(--flux-gray-050);
    --st-texto: var(--flux-gray-400);
    --st-tenue: var(--flux-gray-500);
    --st-acento: var(--flux-lime-500);
    --st-acento-suave: var(--flux-lime-a12);
    --st-acento-borde: var(--flux-lime-a24);
    --st-acento-texto: var(--flux-lime-500);
    --st-nav: rgba(11, 13, 18, .82);
    --st-marco: var(--flux-gray-050);
    --st-marco-borde: transparent;
    --st-nodo: var(--flux-gray-100);
    --st-sombra: var(--shadow-pop);
}

/* ── Tema blanco ──────────────────────────────────────────────────── */
.sitio-body[data-tema="claro"] {
    --st-lienzo: var(--flux-gray-050);
    --st-superficie: var(--flux-gray-100);
    --st-borde: var(--flux-gray-300);
    --st-titulo: var(--flux-ink-900);
    --st-texto: var(--flux-gray-700);
    --st-tenue: var(--flux-gray-600);
    --st-acento: var(--flux-lime-700);
    --st-acento-suave: var(--flux-lime-100);
    --st-acento-borde: var(--flux-lime-a40);
    /* Sobre la pastilla lima clara, el texto va en tinta: la lima 700 encima
       de la lima 100 se pierde. */
    --st-acento-texto: var(--flux-ink-900);
    --st-nav: rgba(255, 255, 255, .86);
    --st-marco: var(--flux-gray-100);
    --st-marco-borde: var(--flux-gray-300);
    --st-nodo: var(--flux-gray-050);
    --st-sombra: var(--shadow-card-hover);
}

.sitio-body {
    background: var(--st-lienzo);
    color: var(--st-texto);
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.6;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    transition: background-color .22s ease, color .22s ease;
}
.sitio-body * { box-sizing: border-box; }
.sitio-body img { max-width: 100%; }

.st-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* Piezas que existen en una sola versión del tema: artes, logotipos y los
   dos iconos del interruptor (en tinta se ve el sol; en blanco, la luna). */
.st-claro { display: none; }
.st-oscuro { display: block; }
.sitio-body[data-tema="claro"] .st-claro { display: block; }
.sitio-body[data-tema="claro"] .st-oscuro { display: none; }

/* ── Tipografía ───────────────────────────────────────────────────── */
.st-eyebrow {
    display: block;
    font-size: 11.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--st-acento);
}
.sitio-body h1, .sitio-body h2, .sitio-body h3 {
    color: var(--st-titulo);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
    margin: 0;
}
.st-h1 { font-size: clamp(38px, 6vw, 60px); line-height: 1.04; font-weight: 700; }
.st-h2 { font-size: clamp(27px, 3.4vw, 38px); line-height: 1.14; font-weight: 700; }
.st-h3 { font-size: clamp(21px, 2.4vw, 27px); line-height: 1.2; font-weight: 700; }
.st-sub { color: var(--st-texto); font-size: 18px; line-height: 1.55; text-wrap: pretty; margin: 18px 0 0; }
.st-p { color: var(--st-texto); line-height: 1.65; text-wrap: pretty; margin: 16px 0 0; max-width: 46ch; }
.st-mini { color: var(--st-tenue); font-size: 14px; margin: 14px 0 0; }

/* ── Botones ──────────────────────────────────────────────────────── */
.st-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--flux-lime-500);
    color: var(--flux-ink-900);
    font-weight: 700; font-size: 15px;
    border: 1px solid var(--flux-lime-500);
    border-radius: var(--radius-md);
    padding: 12px 20px;
    text-decoration: none;
    transition: background .16s ease, transform .16s ease;
}
.st-btn:hover { background: var(--flux-lime-600); border-color: var(--flux-lime-600); color: var(--flux-ink-900); }
.st-btn:active { transform: translateY(1px); }
.st-btn--sec {
    background: transparent; color: var(--st-titulo);
    border-color: var(--st-borde);
}
.st-btn--sec:hover { background: var(--st-superficie); border-color: var(--st-borde); color: var(--st-titulo); }
.st-btn--sm { padding: 8px 15px; font-size: 14px; }
.st-btn--fantasma {
    background: transparent; border-color: transparent;
    color: var(--st-texto); font-weight: 600;
}
.st-btn--fantasma:hover { background: var(--st-superficie); color: var(--st-titulo); }
.sitio-body a:focus-visible,
.sitio-body button:focus-visible {
    outline: 2px solid var(--st-acento);
    outline-offset: 3px;
}

/* ── Barra superior ───────────────────────────────────────────────── */
.st-nav {
    position: sticky; top: 0; z-index: 30;
    background: var(--st-nav);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--st-borde);
    transition: background-color .22s ease, border-color .22s ease;
}
.st-nav__in { display: flex; align-items: center; gap: 30px; height: 68px; }
.st-nav__logo { display: flex; align-items: center; }
.st-nav__logo img { height: 26px; width: auto; }
.st-links { display: flex; gap: 26px; flex: 1; }
.st-links a { color: var(--st-texto); text-decoration: none; font-size: 15px; }
.st-links a:hover { color: var(--st-acento); }
.st-nav__acc { display: flex; align-items: center; gap: 10px; }

/* Interruptor de tema: muestra a dónde va, no dónde está. */
.st-tema {
    width: 38px; height: 38px; flex: 0 0 auto;
    display: grid; place-items: center;
    border: 1px solid var(--st-borde);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--st-titulo);
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease;
}
.st-tema:hover { background: var(--st-superficie); }
.st-tema svg { width: 18px; height: 18px; }

/* ── Hero ─────────────────────────────────────────────────────────── */
.st-hero { position: relative; overflow: hidden; padding: 88px 0 96px; }
.st-hero__in {
    position: relative;
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center;
}
.st-hero__in > * { min-width: 0; }
.st-hero .st-sub { max-width: 34ch; font-size: 20px; }

/* El video hace lo que hacía el arte de fondo: las líneas de la marca. Va en
   su propio marco porque nace en tinta y tiene que sostenerse también sobre
   el tema blanco, donde un rectángulo oscuro suelto se vería fuera de lugar. */
.st-hero__video {
    margin: 0;
    padding: 8px;
    background: var(--flux-ink-900);
    border: 1px solid var(--st-borde);
    border-radius: var(--radius-2xl);
    box-shadow: var(--st-sombra);
    transition: border-color .22s ease;
}
.st-hero__video video {
    display: block; width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background: var(--flux-ink-900);
}
.st-badge {
    display: inline-block;
    background: var(--st-acento-suave);
    border: 1px solid var(--st-acento-borde);
    color: var(--st-acento-texto);
    border-radius: var(--radius-pill);
    padding: 5px 14px;
    font-size: 12.5px; font-weight: 650;
    margin-bottom: 20px;
}
.st-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ── Secciones ────────────────────────────────────────────────────── */
.st-seccion { border-top: 1px solid var(--st-borde); padding: 84px 0; }
.st-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
/* Sin esto, el ancho mínimo del diagrama empuja la columna y la página se
   desliza de lado en el teléfono. */
.st-dos > *, .st-bloque > * { min-width: 0; }
.st-marco {
    background: var(--st-marco);
    border: 1px solid var(--st-marco-borde);
    border-radius: var(--radius-2xl);
    padding: 18px;
    display: flex; justify-content: center;
    transition: background-color .22s ease, border-color .22s ease;
}
/* Solo el diagrama, no los iconos que van anidados dentro de él. */
.st-marco > svg { width: 420px; max-width: 100%; height: auto; }

/* Tira de áreas conectadas: Ventas → Cocina → Inventario → Compras → Finanzas.
   No se parte: si no cabe, se desliza. Un «Finanzas» en el renglón de abajo
   rompe justo la idea que la tira explica. */
.st-flujo { display: flex; align-items: flex-start; gap: 6px; margin-top: 34px; overflow-x: auto; padding-bottom: 4px; }
.st-flujo__area { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 68px; flex: 0 0 auto; }
.st-flujo__area span:last-child { font-size: 11.5px; color: var(--st-tenue); }
.st-flujo__icono {
    width: 46px; height: 46px; border-radius: var(--radius-pill);
    background: var(--st-superficie); border: 1px solid var(--st-borde);
    color: var(--st-titulo);
    display: inline-flex; align-items: center; justify-content: center;
}
.st-flujo__liga { width: 18px; flex: 0 0 auto; border-top: 1px dashed var(--st-acento-borde); margin-top: 23px; }

/* ── Recorrido: bloques alternados ────────────────────────────────── */
.st-bloque { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.st-bloque + .st-bloque { margin-top: 88px; }
.st-bloque--inv .st-bloque__texto { order: 2; }
.st-captura {
    border: 1px solid var(--st-borde);
    border-radius: var(--radius-2xl);
    background: var(--st-superficie);
    padding: 10px;
    box-shadow: var(--st-sombra);
    margin: 0;
    transition: background-color .22s ease, border-color .22s ease;
}
.st-captura img { display: block; width: 100%; border-radius: var(--radius-lg); }
.st-captura figcaption {
    color: var(--st-tenue); font-size: 12.5px;
    padding: 9px 4px 2px; text-align: center;
}
.st-lista { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.st-lista li {
    position: relative; padding-left: 26px;
    color: var(--st-texto); font-size: 15.5px; line-height: 1.55; max-width: 48ch;
}
.st-lista li::before {
    content: ""; position: absolute; left: 6px; top: 10px;
    width: 7px; height: 7px; background: var(--st-acento);
    border-radius: 2px; transform: rotate(45deg);
}
.st-lista b { color: var(--st-titulo); font-weight: 650; }

/* ── FLUX AI ──────────────────────────────────────────────────────── */
.st-ai {
    position: relative; overflow: hidden;
    border: 1px solid var(--st-borde);
    border-radius: var(--radius-2xl);
    padding: 56px 48px;
    background: var(--st-superficie);
    transition: background-color .22s ease, border-color .22s ease;
}
.st-ai__flow {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: .32; pointer-events: none;
}
.st-ai__in { position: relative; display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: center; }
.st-ai__marca { display: flex; align-items: center; gap: 10px; }
.st-ai__marca img { height: 26px; width: auto; }
.st-ai__marca span { font-size: 20px; font-style: italic; font-weight: 650; color: var(--st-acento); }
.st-acciones-ia { display: flex; flex-direction: column; gap: 12px; }
.st-accion {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    background: var(--st-lienzo);
    border: 1px solid var(--st-borde);
    border-radius: var(--radius-xl);
}
.st-accion__icono { width: 20px; height: 20px; flex: 0 0 auto; }
.st-accion b { display: block; font-size: 15px; font-weight: 650; color: var(--st-titulo); }
.st-accion span { font-size: 13px; color: var(--st-tenue); }

/* ── Rejillas de fichas ───────────────────────────────────────────── */
.st-rejilla {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
    gap: 14px; margin-top: 34px;
}
.st-ficha {
    background: var(--st-superficie);
    border: 1px solid var(--st-borde);
    border-radius: var(--radius-xl);
    padding: 18px 20px;
    transition: background-color .22s ease, border-color .22s ease;
}
.st-ficha b { display: block; font-size: 15.5px; font-weight: 650; color: var(--st-titulo); line-height: 1.3; }
.st-ficha p { margin: 8px 0 0; color: var(--st-texto); font-size: 14.5px; line-height: 1.5; }

/* ── Prueba y precio ──────────────────────────────────────────────── */
.st-prueba { text-align: center; }
.st-prueba .st-p { margin-left: auto; margin-right: auto; max-width: 56ch; }
.st-prueba .st-acciones { justify-content: center; }
.st-roles { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 34px; }
.st-rol {
    background: var(--st-superficie); border: 1px solid var(--st-borde);
    border-radius: var(--radius-pill); padding: 8px 16px;
    font-size: 14px; color: var(--st-texto);
}
.st-rol b { color: var(--st-titulo); font-weight: 650; }
.st-precio { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.st-precio__monto {
    font-size: clamp(38px, 5vw, 52px); font-weight: 700;
    letter-spacing: var(--tracking-tight); color: var(--st-acento);
    font-variant-numeric: tabular-nums;
}
.st-precio__unidad { color: var(--st-texto); font-size: 17px; }

/* ── Cierre y pie ─────────────────────────────────────────────────── */
.st-cierre { border-top: 1px solid var(--st-borde); padding: 72px 0 0; }
.st-cierre__in {
    display: flex; align-items: center; justify-content: space-between;
    gap: 40px; flex-wrap: wrap;
}
.st-cierre__lineas { margin-top: 48px; opacity: .9; width: 100%; height: 140px; }
.st-pie { border-top: 1px solid var(--st-borde); }
.st-pie__in {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap; min-height: 72px; padding: 18px 0;
}
.st-pie img { height: 22px; width: auto; }
.st-pie span { color: var(--st-tenue); font-size: 13px; }

/* ── Responsivo ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .st-dos, .st-bloque, .st-ai__in, .st-hero__in { grid-template-columns: 1fr; gap: 34px; }
    .st-bloque--inv .st-bloque__texto { order: 0; }
    .st-ai { padding: 40px 26px; }
    .st-seccion { padding: 60px 0; }
    .st-hero { padding: 64px 0 72px; }
    .st-bloque + .st-bloque { margin-top: 56px; }
    .st-links { display: none; }
    .st-nav__in { gap: 12px; justify-content: space-between; }
}
@media (max-width: 560px) {
    .sitio-body { font-size: 16px; }
    .st-wrap { padding: 0 18px; }
    .st-hero .st-sub { font-size: 18px; }
    .st-btn { padding: 11px 16px; font-size: 14.5px; }
    .st-nav__acc .st-btn--fantasma { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sitio-body * { animation: none !important; transition: none !important; }
}