* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    background: #f5f5f7;
    color: #1d1d1f;
    min-height: 100vh;
}

/* Las imágenes llevan width/height reales para reservar el hueco y evitar
   layout shift. Sin esto el alto del atributo se aplica tal cual y, al
   escalar el ancho por CSS, la imagen se deforma. Las que fijan un alto
   concreto (.logo, .qr, .brand-logo) ganan por especificidad. */
img {
    height: auto;
}

/* ── Header ── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(245, 245, 247, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: 0 32px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.header-left img {
    height: 28px;
    width: auto;
}

.logo {
    border-radius: 7px;
}

.header-title {
    font-size: 13px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.45);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.header-sep {
    width: 1px;
    height: 18px;
    background: rgba(0, 0, 0, 0.15);
}

.back-link {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.45);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.15s;
}

.back-link:hover {
    color: rgba(0, 0, 0, 0.75);
}

/* ── Layout ── */
.layout {
    display: flex;
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 24px 80px;
    gap: 40px;
}

/* ── Sidebar ── */
.sidebar {
    width: 200px;
    flex-shrink: 0;
}

.sidebar-inner {
    position: sticky;
    top: 76px;
}

.sidebar-label {
    font-size: 10px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.35);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 10px;
    padding-left: 10px;
}

.nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-list a {
    display: block;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.55);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.nav-list a:hover,
.nav-list a.active {
    background: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.85);
}

/* ── Content ── */
.content {
    flex: 1;
    min-width: 0;
}

.section {
    margin-bottom: 64px;
    scroll-margin-top: 76px;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.section-number {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.45);
    flex-shrink: 0;
}

.section h2 {
    font-size: 20px;
    font-weight: 600;
    color: #1d1d1f;
}

.section p {
    font-size: 15px;
    line-height: 1.75;
    color: rgba(0, 0, 0, 0.65);
    margin-bottom: 16px;
}

.section p:last-child {
    margin-bottom: 0;
}

.section strong {
    color: rgba(0, 0, 0, 0.82);
}

.section h3.sub {
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 24px 0 4px;
}

/* ── Quick start cards ── */
.quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
    margin: 20px 0;
}

.quick-item {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 12px 14px;
}

.quick-item h3 {
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 3px;
}

.quick-item p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 0;
}

/* ── Images ── */
.img-wrap {
    margin: 24px 0;
    text-align: center;
}

/* block + margin auto en vez de imagen inline: centra igual, evita el
   hueco del baseline bajo la imagen y no depende del text-align del
   contenedor. */
.img-wrap img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

/* Ver la nota de .screenshot-wrap.shot-window en /fs/css/main.css. */
.img-wrap img.shot-window {
    border-radius: 5px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.img-wrap img.shot-main {
    width: 100%;
    max-width: 700px;
}

.img-wrap img.shot-options {
    width: 100%;
    max-width: 440px;
}

.img-wrap.qr-wrap {
    margin-top: 24px;
}

.img-wrap img.qr {
    width: 140px;
    height: 140px;
}

.img-wrap.logo-wrap {
    margin-top: 40px;
}

.img-wrap img.brand-logo {
    height: 56px;
    width: auto;
}

img.flat {
    border-radius: 0 !important;
}

/* ── Features list ── */
.features-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.features-list li {
    font-size: 15px;
    color: rgba(0, 0, 0, 0.65);
    line-height: 1.5;
    padding-left: 20px;
    position: relative;
}

.features-list li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: rgba(0, 0, 0, 0.25);
}

/* ── Numbered steps ── */
.steps-list {
    list-style: none;
    counter-reset: step;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0;
}

.steps-list li {
    font-size: 15px;
    color: rgba(0, 0, 0, 0.65);
    line-height: 1.5;
    padding-left: 28px;
    position: relative;
    counter-increment: step;
}

.steps-list li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 1px;
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.45);
    font-size: 11px;
    font-weight: 700;
    line-height: 19px;
    text-align: center;
}

/* Las listas anidadas dentro de un paso no vuelven a numerar. */
.steps-list .features-list {
    margin-top: 10px;
}

/* ── Tables ── */
.table-wrap {
    margin: 20px 0;
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

table.guide-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

table.guide-table th,
table.guide-table td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    color: rgba(0, 0, 0, 0.65);
    line-height: 1.5;
    vertical-align: top;
}

table.guide-table thead th {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.4);
    background: rgba(0, 0, 0, 0.03);
}

table.guide-table tbody tr:last-child td {
    border-bottom: none;
}

table.guide-table td:first-child {
    font-weight: 500;
    color: rgba(0, 0, 0, 0.8);
    white-space: nowrap;
}

/* Tablas cuya primera columna es prosa y no un nombre corto: sin el nowrap
   se desbordarían a lo ancho. */
table.guide-table.wrap-first td:first-child {
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
    white-space: normal;
}

table.guide-table strong {
    color: rgba(0, 0, 0, 0.82);
}

kbd {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.72);
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 5px;
    padding: 1px 7px;
    line-height: 1.6;
    white-space: nowrap;
}

/* ── Code ── */
code {
    font-family: 'Consolas', 'SF Mono', Menlo, monospace;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.72);
    background: rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    padding: 1px 6px;
    word-break: break-word;
}

pre {
    margin: 16px 0;
    padding: 14px 16px;
    overflow-x: auto;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    line-height: 1.6;
}

pre code {
    background: none;
    padding: 0;
    white-space: pre;
    word-break: normal;
}

/* ── Callout ── */
.callout {
    background: rgba(0, 0, 0, 0.04);
    border-left: 3px solid rgba(0, 0, 0, 0.12);
    border-radius: 0 8px 8px 0;
    padding: 14px 18px;
    margin: 16px 0;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.65;
}

.section p.closing-note {
    text-align: center;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.45);
    margin-top: 32px;
}

/* ── Footer ── */
.guide-footer {
    text-align: center;
    padding: 32px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.guide-footer a {
    color: inherit;
}

/* ── Mobile ── */
@media (max-width: 720px) {
    .sidebar {
        display: none;
    }

    .layout {
        padding: 24px 16px 60px;
    }

    .site-header {
        padding: 0 16px;
    }
}