* {
    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);
}

/* Screenshots: width 100% keeps them inside the column on narrow
   viewports, max-width caps them at their intended size. */
.img-wrap img.shot-help {
    width: 100%;
    max-width: 440px;
}

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

.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;
}

/* ── Skin gallery ── */
.skin-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 24px 20px;
    margin: 24px 0;
}

.skin-card img {
    display: block;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.skin-card h3 {
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 10px 0 3px;
}

.skin-card p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 0;
}

.skin-card .skin-opts {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.42);
}

/* ── Cover art gallery ── */
.cover-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 24px;
    margin: 24px 0;
}

.cover-card img {
    display: block;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: zoom-in;
}

.cover-card img:hover {
    transform: scale(1.8);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 2;
}

.cover-card figcaption {
    margin-top: 10px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
}

/* ── 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);
}

/* ── 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;
}

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;
}

/* ── 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;
    }

    .cover-gallery {
        grid-template-columns: 1fr;
    }
}