/* La cara comercial de Orbyta: las páginas de venta que responden lo que un
   dueño de gimnasio escribe en Google. Misma paleta que la landing (que lleva
   sus estilos adentro), en una hoja propia para que las páginas sean livianas. */

:root {
    --l-bg: #0b1220;
    --l-bg-2: #0d1524;
    --l-panel: #111826;
    --l-border: #223044;
    --l-border-2: #2f4160;
    --l-text: #e6edf3;
    --l-text-2: #c5d0dc;
    --l-muted: #9ab0c7;
    --l-accent: #60a5fa;
    --l-accent-2: #3b82f6;
    --l-violeta: #7c3aed;
    --l-ok: #22c55e;
    --l-radio: 16px;
    --l-ancho: 1120px;
    --l-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

body.landing {
    margin: 0;
    font-family: var(--l-font);
    background:
        radial-gradient(700px 420px at 0% 0%, rgba(59,130,246,.16), transparent 55%),
        radial-gradient(600px 320px at 100% 0%, rgba(124,58,237,.18), transparent 55%),
        linear-gradient(180deg, #0b1220 0%, #0d1524 100%);
    color: var(--l-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.l-wrap { width: min(100% - 32px, var(--l-ancho)); margin-inline: auto; }

/* ---------- barra ---------- */
.l-nav {
    position: sticky; top: 0; z-index: 20;
    background: rgba(11, 18, 32, .86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--l-border);
}
.l-nav .l-wrap { display: flex; align-items: center; gap: 16px; height: 64px; }
.l-marca { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; color: var(--l-text); text-decoration: none; }
.l-marca img { width: 34px; height: 34px; }
.l-nav-links { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.l-nav-links a { color: var(--l-text-2); text-decoration: none; padding: 8px 12px; border-radius: 10px; font-size: 14px; }
.l-nav-links a:hover { background: var(--l-panel); color: var(--l-text); }

.l-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px; border-radius: 12px; font-weight: 600; font-size: 15px;
    text-decoration: none; border: 1px solid transparent; cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.l-btn-primario { background: linear-gradient(90deg, var(--l-accent-2), var(--l-violeta)); color: #fff; }
.l-btn-primario:hover { filter: brightness(1.08); transform: translateY(-1px); }
.l-btn-borde { border-color: var(--l-border-2); color: var(--l-text); background: transparent; }
.l-btn-borde:hover { background: var(--l-panel); }
.l-btn-grande { padding: 15px 26px; font-size: 16px; }

/* ---------- hero ---------- */
.l-hero { padding: 76px 0 64px; border-bottom: 1px solid var(--l-border); }
.l-hero h1 { font-size: clamp(32px, 5.2vw, 52px); line-height: 1.1; margin: 0 0 18px; letter-spacing: -.02em; }
.l-hero p.l-bajada { font-size: clamp(16px, 2vw, 19px); color: var(--l-text-2); max-width: 64ch; margin: 0 0 30px; }
.l-hero-acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.l-hero-nota { font-size: 14px; color: var(--l-muted); margin-top: 16px; }
.l-chip {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px;
    padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
    background: rgba(34, 197, 94, .12); color: var(--l-ok); border: 1px solid rgba(34, 197, 94, .3);
}
.l-hero-chico { padding: 56px 0 44px; }
.l-hero-chico h1 { font-size: clamp(28px, 4.4vw, 44px); }
.l-migas { font-size: 13px; color: var(--l-muted); margin-bottom: 18px; }
.l-migas a { color: var(--l-text-2); text-decoration: none; }
.l-migas a:hover { text-decoration: underline; }

/* ---------- secciones ---------- */
.l-seccion { padding: 68px 0; border-bottom: 1px solid var(--l-border); }
.l-seccion h2 { font-size: clamp(24px, 3.2vw, 34px); margin: 0 0 12px; letter-spacing: -.01em; text-wrap: balance; }
.l-seccion .l-intro { color: var(--l-text-2); max-width: 68ch; margin: 0 0 36px; font-size: 16px; }

.l-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.l-card { background: var(--l-panel); border: 1px solid var(--l-border); border-radius: var(--l-radio); padding: 24px; }
.l-card h3 { margin: 0 0 8px; font-size: 17px; }
.l-card p { margin: 0; color: var(--l-text-2); font-size: 15px; }
.l-icono {
    width: 40px; height: 40px; border-radius: 11px; margin-bottom: 14px;
    display: grid; place-items: center; background: rgba(96, 165, 250, .14);
    color: var(--l-accent); font-size: 19px;
}
.l-card-enlace { text-decoration: none; color: inherit; display: block; transition: border-color 140ms ease, transform 140ms ease; }
.l-card-enlace:hover { border-color: var(--l-accent-2); transform: translateY(-2px); }
.l-card-enlace h3 { color: var(--l-text); }

.l-funciones { display: grid; gap: 10px 26px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 0; padding: 0; list-style: none; }
.l-funciones li { display: flex; gap: 10px; align-items: flex-start; color: var(--l-text-2); font-size: 15px; padding: 7px 0; }
.l-funciones li::before { content: "✓"; color: var(--l-ok); font-weight: 700; flex: 0 0 auto; }

.l-articulo { max-width: 780px; }
.l-articulo h2 { font-size: clamp(22px, 2.8vw, 30px); margin: 0 0 12px; letter-spacing: -.01em; }
.l-articulo h3 { font-size: 18px; margin: 26px 0 8px; }
.l-articulo p, .l-articulo li { color: var(--l-text-2); font-size: 16px; }
.l-articulo p { margin: 0 0 16px; }
.l-articulo ul, .l-articulo ol { padding-left: 22px; margin: 0 0 18px; }
.l-articulo li { margin-bottom: 8px; }
.l-articulo a { color: var(--l-accent); }
.l-articulo strong { color: var(--l-text); }

.l-pasos { counter-reset: paso; list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 14px; }
.l-pasos li { position: relative; padding: 18px 20px 18px 68px; background: var(--l-panel); border: 1px solid var(--l-border); border-radius: var(--l-radio); counter-increment: paso; margin: 0; }
.l-pasos li::before { content: counter(paso); position: absolute; left: 20px; top: 17px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(96, 165, 250, .14); color: var(--l-accent); font-weight: 700; }
.l-pasos strong { display: block; color: var(--l-text); margin-bottom: 4px; font-size: 16px; }
.l-pasos span { color: var(--l-text-2); font-size: 15px; }

/* ---------- precios ---------- */
.l-precios { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.l-precio { background: var(--l-panel); border: 1px solid var(--l-border); border-radius: var(--l-radio); padding: 26px; position: relative; }
.l-precio.destacado { border-color: var(--l-accent-2); box-shadow: 0 0 0 1px rgba(59, 130, 246, .35); }
.l-precio .l-etiqueta { position: absolute; top: -11px; left: 22px; background: var(--l-accent-2); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.l-precio h3 { margin: 0 0 6px; font-size: 16px; color: var(--l-text-2); font-weight: 600; }
.l-monto { font-size: 34px; font-weight: 700; letter-spacing: -.02em; }
.l-monto small { font-size: 14px; font-weight: 500; color: var(--l-muted); }
.l-precio p { color: var(--l-text-2); font-size: 14px; margin: 10px 0 0; }
.l-precio .l-btn { width: 100%; margin-top: 18px; }

/* ---------- tablas ---------- */
.l-tabla-wrap { overflow-x: auto; margin: 24px 0; border: 1px solid var(--l-border); border-radius: var(--l-radio); }
.l-tabla { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 720px; }
.l-tabla th, .l-tabla td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--l-border); vertical-align: top; }
.l-tabla th { background: var(--l-panel); color: var(--l-text); font-weight: 600; position: sticky; top: 0; }
.l-tabla td { color: var(--l-text-2); }
.l-tabla tr:last-child td { border-bottom: 0; }
.l-tabla tr.nosotros td { background: rgba(59, 130, 246, .12); color: var(--l-text); }
.l-tabla .si { color: var(--l-ok); font-weight: 600; }
.l-tabla .no { color: var(--l-muted); }
.l-tabla .parcial { color: #fde68a; }
.l-nota { font-size: 13px; color: var(--l-muted); }

.l-enlaces { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 28px 0 0; padding: 0; list-style: none; }
.l-enlaces li { margin: 0; }
.l-enlaces a { display: block; padding: 16px 18px; background: var(--l-panel); border: 1px solid var(--l-border); border-radius: 12px; color: var(--l-text); text-decoration: none; font-weight: 600; font-size: 15px; }
.l-enlaces a:hover { border-color: var(--l-border-2); }
.l-enlaces small { display: block; color: var(--l-muted); font-weight: 400; font-size: 13px; margin-top: 4px; }

/* ---------- faq ---------- */
.l-faq { max-width: 800px; }
.l-faq details { border: 1px solid var(--l-border); border-radius: 12px; padding: 16px 20px; margin-bottom: 10px; background: var(--l-panel); }
.l-faq summary { cursor: pointer; font-weight: 600; font-size: 16px; list-style: none; }
.l-faq summary::-webkit-details-marker { display: none; }
.l-faq summary::after { content: "+"; float: right; color: var(--l-muted); font-weight: 400; font-size: 20px; line-height: 1; }
.l-faq details[open] summary::after { content: "−"; }
.l-faq p { color: var(--l-text-2); margin: 12px 0 0; font-size: 15px; }

/* ---------- cierre y pie ---------- */
.l-cierre { padding: 76px 0; text-align: center; }
.l-cierre h2 { font-size: clamp(26px, 3.6vw, 36px); margin: 0 0 14px; }
.l-cierre p { color: var(--l-text-2); max-width: 56ch; margin: 0 auto 28px; }
.l-cierre .l-hero-acciones { justify-content: center; }

.l-pie { border-top: 1px solid var(--l-border); padding: 30px 0; color: var(--l-muted); font-size: 14px; }
.l-pie a { color: var(--l-text-2); text-decoration: none; }
.l-pie a:hover { text-decoration: underline; }
.l-pie-columnas { display: grid; gap: 28px; grid-template-columns: 1.4fr 1fr 1fr; padding-bottom: 24px; border-bottom: 1px solid var(--l-border); margin-bottom: 18px; }
@media (max-width: 760px) { .l-pie-columnas { grid-template-columns: 1fr; } }
.l-pie-columnas strong { color: var(--l-text); display: block; margin-bottom: 8px; font-size: 14px; }
.l-pie-columnas p { margin: 0; max-width: 40ch; }
.l-pie-columnas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.l-pie-legal { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; }

:focus-visible { outline: 2px solid var(--l-accent); outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

@media (max-width: 640px) {
    .l-nav-links a:not(.l-btn) { display: none; }
    .l-hero { padding: 52px 0 44px; }
    .l-seccion { padding: 48px 0; }
}