/**
 * Guías de usuario PresTeamShop — hoja de estilo v2
 * ------------------------------------------------------------------------
 * Sustituye por completo a `custom.css`. Se carga DESPUÉS de Bootstrap 5.3.
 *
 * Toma la GEOMETRÍA del portal (`guides.presteamshop.com`, sistema "Midnight
 * Precision" de `landing-guides`): radios de 0.5rem, bordes de un píxel en vez
 * de sombras, superficies planas y espaciados fluidos.
 *
 * PERO EN CLARO, y es una decisión, no un olvido: el portal es oscuro y una
 * guía no puede serlo. Las capturas son del back-office de PrestaShop, que es
 * claro: sobre fondo oscuro cantan como recortes pegados. Y esto es texto
 * largo de lectura seguida. La documentación de Anthropic —la referencia de
 * este rediseño— también es clara.
 *
 * Y con la MARCA de verdad, no con la del estándar viejo: el azul es #17a1db y
 * la tipografía es Lato. Las guías venían pintadas en un turquesa #25A7C3 y en
 * Inter, que no son de ningún manual: se habían quedado fuera de marca sin que
 * nadie lo notara.
 *
 * La fuente entra por @import a propósito: así una guía solo necesita ESTE
 * enlace y nada más, que es lo que permite repintar las 6 tocando un tag.
 */

/* Lato es la tipografía de la marca. OJO: NO tiene 500 ni 600 — solo 100, 300,
   400, 700 y 900. El HTML usa `fw-semibold` (600) por todas partes y el
   navegador lo redondea a 700, así que aquí se escribe 400 o 700 y nunca los
   intermedios: pedir un peso que no existe deja el resultado a merced de cómo
   sintetice cada navegador. */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');

/* ===================== Tokens ===================== */
:root {
    /*
     * Marca PresTeamShop (manual de marca): azul #17a1db, gris #5e5e5e y gris
     * claro #d1d2d4. Secundarios: #d41969, #8dc640, #f9e020.
     *
     * ⚠️ El azul de marca da 2,93:1 sobre blanco, así que NO llega al mínimo
     * legible (4,5:1) para texto pequeño — ni con blanco encima, o sea que un
     * botón azul con texto blanco tampoco pasa. Por eso hay dos:
     *   --pts-primary       identidad: fondos, iconos, bordes, títulos grandes
     *   --pts-primary-dark  todo lo que LLEVA texto: enlaces, botones (5,6:1)
     * No es apartarse de la marca, es lo que hace falta para que se lea.
     */
    --pts-primary: #17a1db;
    --pts-primary-dark: #0d6f99;
    --pts-primary-light: #4fbde8;
    --pts-primary-soft: rgba(23, 161, 219, 0.10);
    --pts-secondary: #d41969;
    --pts-secondary-dark: #b01254;

    /* Superficies y texto */
    --pts-bg: #FFFFFF;
    --pts-surface: #F7F8F9;
    --pts-surface-alt: #EFF1F2;
    --pts-dark: #5e5e5e;          /* gris de marca — 6,5:1 sobre blanco */
    --pts-gray: #5e5e5e;
    --pts-gray-light: #767676;    /* apagado pero aún legible (4,5:1) */

    /* Bordes: el gris claro de marca. Un borde no necesita contraste de texto,
       necesita separar sin llamar la atención. */
    --pts-border: #d1d2d4;
    --pts-border-strong: #b9babd;

    /* Semánticos: se toman de los secundarios de marca donde se puede. El verde
       y el amarillo solo valen como acento (2,0:1 y 1,3:1); para texto se usan
       versiones oscurecidas. */
    --pts-success: #8dc640;
    --pts-success-text: #4f7320;
    --pts-warning: #f9e020;
    --pts-warning-text: #8a6d00;
    --pts-danger: #d41969;
    --pts-info: #17a1db;

    /* Geometría (radio del portal: 0.5rem) */
    --radius: 0.5rem;
    --radius-lg: 0.75rem;

    /* Layout */
    --sidebar-width: 17rem;
    --toc-width: 15rem;
    --header-height: 3.75rem;

    --font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ===================== Base ===================== */
html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 1.5rem);
}

body {
    font-family: var(--font-family);
    background-color: var(--pts-bg);
    color: var(--pts-dark);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--pts-primary-soft);
    color: var(--pts-dark);
}

:focus-visible {
    outline: 2px solid var(--pts-primary);
    outline-offset: 2px;
}

a {
    color: var(--pts-primary-dark);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:hover {
    color: var(--pts-primary);
}

/* ===================== Bootstrap: primario ===================== */
/*
 * La regla es: el azul claro NO toca texto.
 *
 * `.text-primary` de Bootstrap lleva `!important`, así que pintaba de azul de
 * marca el título de portada y los seis números de la tarjeta de compatibilidad
 * —texto grande a 2,93:1— y ganaba a cualquier regla que se pusiera encima. Se
 * corrige aquí, en la raíz, y no elemento a elemento.
 */
.text-primary {
    color: var(--pts-primary-dark) !important;
}

/* Los iconos sí: no son texto, y ahí el azul de marca es lo que da identidad. */
i.text-primary,
.bi.text-primary {
    color: var(--pts-primary) !important;
}

.bg-primary:not(.bg-opacity-10) {
    background-color: var(--pts-primary) !important;
}

.bg-primary.bg-opacity-10 {
    background-color: var(--pts-primary-soft) !important;
}

.border-primary {
    border-color: var(--pts-primary) !important;
}

.btn-primary {
    --bs-btn-bg: var(--pts-primary);
    --bs-btn-border-color: var(--pts-primary);
    --bs-btn-hover-bg: var(--pts-primary-dark);
    --bs-btn-hover-border-color: var(--pts-primary-dark);
    --bs-btn-active-bg: var(--pts-primary-dark);
    --bs-btn-active-border-color: var(--pts-primary-dark);
    --bs-btn-focus-shadow-rgb: 23, 161, 219;
    border-radius: var(--radius);
    font-weight: 700;
}

.btn-outline-primary {
    --bs-btn-color: var(--pts-primary-dark);
    --bs-btn-border-color: var(--pts-border-strong);
    --bs-btn-hover-bg: var(--pts-primary);
    --bs-btn-hover-border-color: var(--pts-primary);
    --bs-btn-focus-shadow-rgb: 23, 161, 219;
    border-radius: var(--radius);
    font-weight: 700;
}

/* ===================== Cabecera ===================== */
header.navbar {
    min-height: var(--header-height);
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--pts-border) !important;
    box-shadow: none !important;
}

.navbar-brand {
    font-weight: 700;
    color: var(--pts-dark);
    letter-spacing: -0.01em;
}

.logo-icon svg,
.navbar-brand img {
    transition: transform 0.2s ease;
}

.navbar-brand:hover .logo-icon svg {
    transform: scale(1.05);
}

#languageDropdown {
    border: 1px solid var(--pts-border);
    border-radius: var(--radius);
    font-weight: 400;
}

/* ===================== Barra lateral ===================== */
.sidebar {
    background: transparent;
    border-right: 1px solid var(--pts-border);
}

/* El HTML trae `sticky-top`, que fija `top: 0`: sin esto el primer enlace del
   menú se mete por debajo de la cabecera al hacer scroll. */
.sidebar-nav.sticky-top,
.sidebar-nav {
    top: var(--header-height);
}

.sidebar-nav {
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    padding-right: 0.75rem;
    padding-bottom: 3rem;
    scrollbar-width: thin;
    scrollbar-color: var(--pts-border-strong) transparent;
}

.sidebar-nav::-webkit-scrollbar {
    width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--pts-border-strong);
    border-radius: 3px;
}

.sidebar-nav .nav-link {
    color: var(--pts-gray);
    font-size: 0.9rem;
    font-weight: 400;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    line-height: 1.4;
}

.sidebar-nav .nav-link:hover {
    color: var(--pts-dark);
    background: var(--pts-surface-alt);
}

.sidebar-nav .nav-link.active {
    color: var(--pts-primary-dark);
    background: var(--pts-primary-soft);
    font-weight: 700;
}

.sidebar-nav .nav-link i {
    color: var(--pts-gray-light);
    font-size: 1rem;
}

.sidebar-nav .nav-link.active i {
    color: var(--pts-primary);
}

/* Sub-navegación: guía por línea, no por sangría suelta. */
.sidebar-nav .nav .nav {
    margin-left: 0.75rem;
    padding-left: 0.75rem;
    border-left: 1px solid var(--pts-border);
}

.sidebar-nav .nav .nav .nav-link {
    font-size: 0.85rem;
    font-weight: 400;
    padding: 0.3rem 0.6rem;
}

.sidebar-nav .nav .nav .nav-link.active {
    font-weight: 700;
}

/*
 * El menú traía TODAS las secciones desplegadas: treinta enlaces con la misma
 * pinta, donde cuesta separar la sección del apartado. Ahora se abre sola la
 * sección en la que vas.
 *
 * Se pliega por altura y no con `display:none` para que se vea como un
 * despliegue. El tope generoso de `max-height` es a propósito: si se queda
 * corto, la sección con más apartados se recorta en silencio, que es peor que
 * una animación menos fina.
 */
.sidebar-nav__sub {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    margin-bottom: 0;
    transition: max-height 0.28s ease, opacity 0.2s ease;
}

.sidebar-nav__sub.is-open {
    max-height: 40rem;
    opacity: 1;
    margin-bottom: 0.35rem;
}

/* Con los hijos plegados, la sección es lo único que se ve: se separan entre
   ellas para que la lista respire por grupos y no enlace a enlace. */
.sidebar-nav > ul > li.nav-item {
    margin-bottom: 0.1rem;
}

.sidebar-nav > ul > li.nav-item.is-open {
    margin-bottom: 0.5rem;
}

/* Sin JavaScript (o antes de que corra) el menú tiene que verse entero: mejor
   una lista larga que una guía sin navegación. */
.no-js .sidebar-nav__sub {
    max-height: none;
    opacity: 1;
}

/* ===================== Contenido ===================== */
.main-content {
    padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
    padding-bottom: 5rem;
}

.content-section {
    scroll-margin-top: calc(var(--header-height) + 1.5rem);
    margin-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}

/* Ancho de lectura: solo el texto corrido. Tablas, tarjetas, avisos y figuras
   siguen a ancho completo a propósito. */
.content-section p,
.content-section > ul,
.content-section > ol,
.content-section article > p,
.content-section article > ul,
.content-section article > ol {
    max-width: 78ch;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--pts-dark);
    font-weight: 700;
    letter-spacing: -0.015em;
}

/* El azul de marca en el título grande se queda en 2,93:1, por debajo incluso
   del 3:1 que se le pide al texto grande. Va el oscurecido: sigue leyéndose
   como azul de marca y se lee de verdad. */
h1.display-5 {
    color: var(--pts-primary-dark);
    font-weight: 700;
    letter-spacing: -0.03em;
}

h2.h2 {
    border-bottom: 1px solid var(--pts-border) !important;
    padding-bottom: 0.75rem !important;
    letter-spacing: -0.02em;
}

h2.h2 i {
    color: var(--pts-primary);
}

article[id] {
    scroll-margin-top: calc(var(--header-height) + 1.5rem);
}

.breadcrumb {
    font-size: 0.875rem;
}

.breadcrumb-item a {
    color: var(--pts-gray);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: var(--pts-primary);
}

.breadcrumb-item.active {
    color: var(--pts-gray-light);
}

/* ===================== Tarjetas ===================== */
.card {
    border: 1px solid var(--pts-border) !important;
    border-radius: var(--radius-lg);
    background: var(--pts-bg);
    box-shadow: none !important;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.card:hover {
    border-color: var(--pts-border-strong) !important;
    transform: translateY(-2px);
}

.feature-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pts-primary-soft) !important;
    border-radius: var(--radius);
}

/* ===================== Pasos ===================== */
.steps-container .step {
    padding: 0.25rem 0;
}

.step-number {
    background: var(--pts-primary) !important;
    font-weight: 700;
    font-size: 0.875rem;
}

/* ===================== Avisos ===================== */
.alert {
    border: 1px solid var(--pts-border);
    border-left-width: 3px;
    border-radius: var(--radius);
    background: var(--pts-surface);
    color: var(--pts-dark);
    padding: 0.875rem 1rem;
}

.alert-info { border-left-color: var(--pts-info); }
.alert-warning { border-left-color: var(--pts-warning); }
.alert-success { border-left-color: var(--pts-success); }
.alert-danger { border-left-color: var(--pts-danger); }
.alert-secondary { border-left-color: var(--pts-gray-light); }

.alert-info i { color: var(--pts-info); }
.alert-warning i { color: var(--pts-warning-text); }
.alert-success i { color: var(--pts-success-text); }
.alert-danger i { color: var(--pts-danger); }

/* ===================== Tablas ===================== */
.table {
    --bs-table-border-color: var(--pts-border);
    font-size: 0.95rem;
}

.table > thead {
    background: var(--pts-surface);
}

.table > thead th {
    border-bottom: 2px solid var(--pts-primary) !important;
    font-weight: 700;
    color: var(--pts-dark);
}

/* ===================== Acordeón ===================== */
.accordion {
    --bs-accordion-border-color: var(--pts-border);
    --bs-accordion-border-radius: var(--radius);
    --bs-accordion-active-bg: var(--pts-primary-soft);
    --bs-accordion-active-color: var(--pts-primary-dark);
    --bs-accordion-btn-focus-box-shadow: none;
}

.accordion-button {
    font-weight: 700;
}

/* ===================== Figuras ===================== */
.figure-img {
    border: 1px solid var(--pts-border);
    border-radius: var(--radius);
    box-shadow: none;
}

.figure-caption {
    color: var(--pts-gray-light);
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

/* ===================== Código en línea ===================== */
code {
    background: var(--pts-surface-alt);
    border: 1px solid var(--pts-border);
    border-radius: 0.3rem;
    padding: 0.1rem 0.35rem;
    font-size: 0.875em;
    color: var(--pts-dark);
}

/* El hook de Smarty y compañía: son cosas que el comerciante COPIA a su
   plantilla, así que se les pone un botón. Lo inyecta guide-v2.js. */
.code-copy {
    border: 1px solid var(--pts-border);
    background: var(--pts-bg);
    color: var(--pts-gray);
    border-radius: 0.3rem;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    margin-left: 0.35rem;
    cursor: pointer;
    vertical-align: middle;
}

.code-copy:hover {
    color: var(--pts-primary-dark);
    border-color: var(--pts-border-strong);
}

.code-copy.copied {
    color: var(--pts-success);
    border-color: var(--pts-success);
}

/* ===================== Columna derecha: "En esta sección" ===================== */
/*
 * La guía tiene 168 opciones (`h4`) que NO estaban en ningún menú ni tenían
 * ancla: el lateral llega hasta el artículo y ahí se acaba la navegación. Esta
 * columna las lista —solo las del artículo que estás leyendo— y además las hace
 * enlazables, que es lo que permite a soporte mandar la URL de UNA opción.
 *
 * Aparece a partir de 1400px, así que por debajo no le roba ancho a nada.
 */
.guide-toc {
    display: none;
}

@media (min-width: 1400px) {
    .guide-toc {
        display: block;
        position: sticky;
        top: calc(var(--header-height) + 1.5rem);
        width: var(--toc-width);
        flex: 0 0 var(--toc-width);
        max-height: calc(100vh - var(--header-height) - 3rem);
        overflow-y: auto;
        padding-left: 1.25rem;
        border-left: 1px solid var(--pts-border);
        font-size: 0.85rem;
        scrollbar-width: thin;
        scrollbar-color: var(--pts-border-strong) transparent;
    }

    .guide-toc__title {
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--pts-gray-light);
        margin-bottom: 0.75rem;
    }

    .guide-toc__list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .guide-toc__link {
        display: block;
        padding: 0.25rem 0;
        color: var(--pts-gray);
        text-decoration: none;
        line-height: 1.4;
        border-left: 2px solid transparent;
        padding-left: 0.75rem;
        margin-left: -0.75rem;
    }

    .guide-toc__link:hover {
        color: var(--pts-dark);
    }

    .guide-toc__link.is-active {
        color: var(--pts-primary-dark);
        border-left-color: var(--pts-primary);
        font-weight: 700;
    }

    /* El contenido cede el ancho de la columna, sin tocar el HTML generado. */
    .main-content {
        display: flex;
        gap: 3rem;
        align-items: flex-start;
    }

    /*
     * El ancho lo pone LA COLUMNA, no cada párrafo.
     *
     * Con el tope de 78ch en cada `<p>` y el contenedor a ancho completo, el
     * texto acababa a media pantalla y quedaba un hueco muerto de varios cientos
     * de píxeles entre el último renglón y el índice de la derecha. Limitando la
     * columna, el índice se coloca justo al lado y de paso las tablas y las
     * figuras dejan de irse mucho más anchas que el texto que las explica.
     */
    .main-content > .guide-content {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 52rem;
    }
}

/* ===================== Índice completo de opciones ===================== */
/*
 * Es lo que sustituye al buscador, que se descartó a propósito. La columna de
 * la derecha resuelve moverse DENTRO de un artículo; esto resuelve el caso de
 * "sé cómo se llama la opción, no en qué pantalla está".
 *
 * Plegado ocupa una línea, así que no le quita la entrada a la guía.
 */
.opc-indice {
    border: 1px solid var(--pts-border);
    border-radius: var(--radius-lg);
    background: var(--pts-surface);
    padding: 0.75rem 1.25rem;
    margin: 0 0 2.5rem;
}

.opc-indice[open] {
    padding-bottom: 1.25rem;
}

.opc-indice__summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--pts-dark);
    list-style: none;
    display: flex;
    align-items: center;
}

.opc-indice__summary::-webkit-details-marker {
    display: none;
}

/* La flecha la ponemos nosotros para que gire; el marcador nativo no se anima
   y además cambia de forma según el navegador. */
.opc-indice__summary::after {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    margin-left: auto;
    border-right: 2px solid var(--pts-gray-light);
    border-bottom: 2px solid var(--pts-gray-light);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.opc-indice[open] .opc-indice__summary::after {
    transform: rotate(-135deg);
}

.opc-indice__summary i {
    color: var(--pts-primary);
}

.opc-indice__cuenta {
    margin-left: 0.5rem;
    background: var(--pts-primary-soft);
    color: var(--pts-primary-dark);
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
    font-size: 0.8rem;
}

.opc-indice__ayuda {
    color: var(--pts-gray-light);
    font-size: 0.875rem;
    margin: 0.75rem 0 1rem;
    max-width: 70ch;
}

/* Con 168 entradas, una sola columna es un rollo de recorrer. */
.opc-indice__cols {
    columns: 2;
    column-gap: 2.5rem;
}

@media (min-width: 1200px) {
    .opc-indice__cols {
        columns: 3;
    }
}

/* Que un grupo no se parta entre dos columnas: leerlo a saltos lo inutiliza. */
.opc-indice__grupo {
    break-inside: avoid;
    margin-bottom: 1.25rem;
}

.opc-indice__seccion {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--pts-dark);
    border-bottom: 1px solid var(--pts-border);
    padding-bottom: 0.25rem;
    margin-bottom: 0.4rem;
}

.opc-indice__articulo {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pts-gray-light);
    margin: 0.5rem 0 0.2rem;
}

.opc-indice__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
}

.opc-indice__lista li {
    line-height: 1.35;
    margin-bottom: 0.2rem;
}

.opc-indice__lista a {
    color: var(--pts-gray);
    text-decoration: none;
}

.opc-indice__lista a:hover {
    color: var(--pts-primary-dark);
    text-decoration: underline;
}

/* ===================== Cada opción, un bloque ===================== */
/*
 * Un artículo puede encadenar quince opciones y, con solo título y párrafo, se
 * lee como un muro: no se ve dónde acaba una explicación y empieza la siguiente,
 * justo cuando el comerciante va saltando entre la guía y su back-office.
 *
 * Una línea fina y más aire ARRIBA que abajo bastan para agrupar cada título
 * con su texto en vez de dejarlo flotando entre dos bloques.
 */
main h4[id] {
    margin-top: 2.25rem !important;
    margin-bottom: 0.5rem !important;
    padding-top: 1.5rem;
    border-top: 1px solid var(--pts-border);
}

/* La primera de cada artículo no necesita separarse de su propio encabezado. */
main article > h4[id]:first-of-type,
main h3 + h4[id] {
    border-top: 0;
    padding-top: 0;
    margin-top: 1.5rem !important;
}

/* Al llegar desde un enlace, decir CUÁL es. Sin esto, el navegador coloca la
   opción arriba del todo y el lector tiene que adivinar si acertó. */
main h4[id]:target,
main article[id]:target > h3,
main section[id]:target > h2 {
    animation: opc-destacar 2.4s ease-out 1;
}

@keyframes opc-destacar {
    0%, 55% { background: var(--pts-primary-soft); box-shadow: -0.5rem 0 0 var(--pts-primary-soft), 0.5rem 0 0 var(--pts-primary-soft); }
    100% { background: transparent; box-shadow: none; }
}

/* Ancla junto al título de cada opción: aparece al pasar por encima. */
.heading-anchor {
    opacity: 0;
    margin-left: 0.4rem;
    font-size: 0.8em;
    color: var(--pts-gray-light);
    text-decoration: none;
    transition: opacity 0.15s ease;
}

h2:hover > .heading-anchor,
h3:hover > .heading-anchor,
h4:hover > .heading-anchor,
.heading-anchor:focus {
    opacity: 1;
}

h4[id] {
    scroll-margin-top: calc(var(--header-height) + 1.5rem);
}

/* ===================== Volver arriba ===================== */
.btn-floating {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--pts-border);
    background: var(--pts-bg);
    color: var(--pts-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 20;
}

.btn-floating.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.btn-floating:hover {
    color: var(--pts-primary-dark);
    border-color: var(--pts-border-strong);
}

/* ===================== Portada (selector de idioma) ===================== */
.landing-hero {
    background: var(--pts-surface);
    border-bottom: 1px solid var(--pts-border);
}

.landing-main {
    flex: 1 0 auto;
}

.landing-title {
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--pts-dark);
}

.landing-subtitle {
    color: var(--pts-gray);
}

.logo-container img {
    height: auto;
    max-width: 160px;
}

.language-card {
    border: 1px solid var(--pts-border);
    border-radius: var(--radius-lg);
    background: var(--pts-bg);
    text-decoration: none;
    display: block;
    padding: 1.5rem;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.language-card:hover {
    border-color: var(--pts-primary);
    transform: translateY(-2px);
}

.lang-badge {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--pts-primary-soft);
    color: var(--pts-primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.lang-name {
    font-weight: 700;
    color: var(--pts-dark);
}

.lang-native {
    color: var(--pts-gray-light);
    font-size: 0.875rem;
}

.footer-landing {
    flex-shrink: 0;
    margin-top: 3rem;
    border-top: 1px solid var(--pts-border);
    color: var(--pts-gray-light);
}

/* ===================== Responsive ===================== */
@media (max-width: 991.98px) {
    h1.display-5 {
        font-size: 2rem;
    }
}

@media (max-width: 767.98px) {
    :root {
        --header-height: 3.5rem;
    }

    .main-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .feature-icon {
        width: 48px;
        height: 48px;
    }

    .step-number {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.8rem;
    }

    .btn-floating {
        width: 44px;
        height: 44px;
        right: 1rem;
        bottom: 1rem;
    }
}

@media print {
    .sidebar, .guide-toc, .btn-floating, header.navbar, .code-copy {
        display: none !important;
    }
}