/* ==========================================================================
   MeetingSimulator — design system de las páginas de contenido (SEO)

   Fichero nuevo y aislado. index.html sigue usando styles.css sin cambios:
   este documento no redefine ni una regla de la herramienta, y las páginas
   de contenido enlazan solo a seo.css. Así la landing original no se ve
   afectada por el trabajo de contenido.

   Reutiliza la paleta de la herramienta (#0f0f0f, degradado #00d4aa → #00a3e0,
   verde de speaker #00ff88) para que el blog se sienta parte del mismo producto.
   ========================================================================== */

:root {
    --bg: #0f0f0f;
    --bg-alt: #14161a;
    --surface: #191c20;
    --surface-2: #212529;
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.18);

    --text: #ffffff;
    --text-muted: #b4bcc4;
    --text-dim: #838d96;

    --brand-a: #00d4aa;
    --brand-b: #00a3e0;
    --brand-grad: linear-gradient(135deg, #00d4aa 0%, #00a3e0 100%);

    --speaking: #00ff88;
    --warn: #ffb020;

    --font-display: 'Funnel Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    --shell: 1120px;
    --prose: 46rem;
    --radius: 14px;
    --radius-sm: 9px;
    --shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.72;
    -webkit-font-smoothing: antialiased;
    /* Evita que un token largo (URL, nombre) desborde horizontalmente en móvil */
    overflow-wrap: break-word;
}

img,
video {
    max-width: 100%;
    display: block;
}

a {
    color: var(--brand-a);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* --- Foco visible en todo el contenido ----------------------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.tile:focus-visible {
    outline: 2px solid var(--brand-a);
    outline-offset: 3px;
    border-radius: 4px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--brand-a);
    color: #04231d;
    padding: 10px 18px;
    font-weight: 700;
    border-radius: 0 0 8px 0;
    z-index: 200;
}

.skip-link:focus {
    left: 0;
}

/* ==========================================================================
   Cabecera
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(15, 15, 15, 0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}

.site-header__inner {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.site-header__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text);
    white-space: nowrap;
}

.site-header__brand:hover {
    text-decoration: none;
}

.site-header__brand img {
    height: 30px;
    width: auto;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
    flex-wrap: wrap;
}

.site-nav a {
    color: var(--text-muted);
    font-size: 0.94rem;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
    color: var(--text);
}

.site-nav .btn {
    color: #04231d;
    font-weight: 600;
}

/* ==========================================================================
   Botones
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 20px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--brand-grad);
    color: #04231d;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 163, 224, 0.28);
}

.btn--ghost {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text);
}

.btn--ghost:hover {
    background: rgba(255, 255, 255, 0.06);
    box-shadow: none;
}

.btn--lg {
    padding: 15px 28px;
    font-size: 1.02rem;
}

.btn-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: rgba(0, 212, 170, 0.09);
    color: var(--brand-a);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.badge--neutral {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    border-color: var(--border);
}

/* ==========================================================================
   Estructura
   ========================================================================== */

.shell {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 0 24px;
}

.prose {
    max-width: var(--prose);
}

.section {
    padding: 60px 0;
}

.section--alt {
    background: var(--bg-alt);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.section__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 14px;
    letter-spacing: -0.015em;
}

.section__intro {
    color: var(--text-muted);
    font-size: 1.06rem;
    max-width: 62ch;
    margin: 0 0 30px;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    line-height: 1.22;
    letter-spacing: -0.015em;
    margin: 2.2em 0 0.6em;
}

h1 {
    font-size: clamp(2rem, 5.4vw, 3.15rem);
    margin-top: 0;
    font-weight: 800;
}

h2 {
    font-size: clamp(1.45rem, 3.2vw, 1.95rem);
    font-weight: 700;
}

h3 {
    font-size: 1.2rem;
    font-weight: 600;
}

.prose p {
    margin: 0 0 1.15em;
}

.prose ul,
.prose ol {
    margin: 0 0 1.3em;
    padding-left: 1.35em;
}

.prose li {
    margin-bottom: 0.55em;
}

.prose strong {
    color: #fff;
    font-weight: 650;
}

.lead {
    font-size: 1.14rem;
    color: #d6dce1;
    line-height: 1.68;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
    padding: 74px 0 56px;
    background:
        radial-gradient(900px 420px at 18% -8%, rgba(0, 212, 170, 0.14), transparent 60%),
        radial-gradient(760px 380px at 88% 0%, rgba(0, 163, 224, 0.14), transparent 62%);
    border-bottom: 1px solid var(--border);
}

.hero h1 {
    max-width: 17ch;
    margin: 18px 0 0;
}

.hero__sub {
    font-size: 1.16rem;
    color: var(--text-muted);
    max-width: 60ch;
    margin: 20px 0 28px;
}

.hero__meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

/* Hero a dos columnas en escritorio: el texto a la izquierda y el producto
   real a la derecha. En vertical se apila. */
.hero__split {
    display: grid;
    gap: 38px;
    align-items: center;
}

@media (min-width: 1024px) {
    .hero__split {
        grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
        gap: 54px;
    }
}

.hero__demo {
    margin: 0;
}

.hero__demo .demo {
    margin: 0;
}

.hero__demo-caption {
    font-size: 0.85rem;
    color: var(--text-dim);
    margin: 12px 0 0;
    text-align: center;
}

/* Panel de cifras del hero. Los articulos no llevan el grid de video en el
   hero (el grid aparece donde se argumenta, en el cuerpo), asi que la
   segunda columna se rellena con las tres cifras que el articulo sostiene.
   Poner los datos above the fold ademas trabaja para los snippets. */
.hero__aside {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 26px;
}

.hero__aside-label {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--text-dim);
    font-weight: 700;
    margin: 0 0 4px;
}

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

.figures li {
    padding: 15px 0;
    border-top: 1px solid var(--border);
}

.figures li:first-of-type {
    border-top: 0;
    padding-top: 10px;
}

.figures__v {
    display: block;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.05;
    background: var(--brand-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 4px;
}

.figures__l {
    display: block;
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.hero__aside-src {
    font-size: 0.78rem;
    color: var(--text-dim);
    margin: 16px 0 0;
    padding-top: 13px;
    border-top: 1px solid var(--border);
}

.breadcrumb {
    font-size: 0.86rem;
    color: var(--text-dim);
    padding: 18px 0 0;
}

.breadcrumb ol {
    list-style: none;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.breadcrumb li::after {
    content: '/';
    margin-left: 8px;
    color: var(--border-strong);
}

.breadcrumb li:last-child::after {
    content: none;
}

.breadcrumb a {
    color: var(--text-dim);
}

.breadcrumb a:hover {
    color: var(--brand-a);
}

.article-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    color: var(--text-dim);
    font-size: 0.9rem;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

/* ==========================================================================
   Índice / TL;DR
   ========================================================================== */

.toc {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 26px;
    margin: 34px 0;
}

.toc h2 {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-dim);
    margin: 0 0 12px;
    font-family: var(--font-body);
    font-weight: 700;
}

.toc ol {
    margin: 0;
    padding-left: 1.2em;
    columns: 2;
    column-gap: 32px;
}

.toc li {
    margin-bottom: 7px;
    break-inside: avoid;
}

.toc a {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.toc a:hover {
    color: var(--brand-a);
}

.keytakeaways {
    background: linear-gradient(180deg, rgba(0, 212, 170, 0.08), rgba(0, 212, 170, 0.02));
    border: 1px solid rgba(0, 212, 170, 0.26);
    border-radius: var(--radius);
    padding: 24px 28px;
    margin: 30px 0;
}

.keytakeaways h2 {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--brand-a);
    margin: 0 0 12px;
    font-family: var(--font-body);
    font-weight: 700;
}

.keytakeaways ul {
    margin: 0;
    padding-left: 1.2em;
}

.keytakeaways li {
    margin-bottom: 0.5em;
}

.keytakeaways li:last-child {
    margin-bottom: 0;
}

.callout {
    border-left: 3px solid var(--brand-b);
    background: var(--surface);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 18px 22px;
    margin: 26px 0;
}

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

.callout__label {
    display: block;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--brand-b);
    font-weight: 700;
    margin-bottom: 6px;
}

.source {
    display: block;
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-top: -0.6em;
    margin-bottom: 1.3em;
}

.source cite {
    font-style: normal;
    color: var(--text-muted);
}

/* ==========================================================================
   Cifras
   ========================================================================== */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
    margin: 30px 0;
}

.stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
}

.stat__value {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4.4vw, 2.5rem);
    font-weight: 800;
    line-height: 1;
    background: var(--brand-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: block;
    margin-bottom: 8px;
}

.stat__label {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.stat__cite {
    display: block;
    font-size: 0.78rem;
    color: var(--text-dim);
    margin-top: 8px;
}

/* ==========================================================================
   Grid de vídeo (el componente que enlaza con la herramienta)
   ========================================================================== */

.demo {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    margin: 34px 0;
}

.demo__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    font-weight: 700;
    margin: 0 0 14px;
}

.demo__grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, 1fr);
}

.demo__grid[data-cols="3"] {
    grid-template-columns: repeat(3, 1fr);
}

.demo__grid[data-cols="4"] {
    grid-template-columns: repeat(4, 1fr);
}

.demo__grid[data-cols="6"] {
    grid-template-columns: repeat(3, 1fr);
}

.tile {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #23262b;
    border: 2px solid transparent;
}

.tile--speaking {
    border-color: var(--speaking);
    box-shadow: 0 0 16px rgba(0, 255, 136, 0.28);
}

.tile__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.tile__name {
    position: absolute;
    left: 8px;
    bottom: 8px;
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    padding: 3px 9px;
    border-radius: 5px;
    font-size: 0.74rem;
    font-weight: 500;
    max-width: calc(100% - 16px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Estado de carga: iniciales mientras el vídeo no pinta */
.tile__initials {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dim);
    background: #23262b;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.tile.is-playing .tile__initials {
    opacity: 0;
}

.tile__dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--speaking);
    border: 2px solid #fff;
}

.demo__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.demo__note {
    font-size: 0.87rem;
    color: var(--text-dim);
    margin: 0;
    max-width: 44ch;
}

/* ==========================================================================
   Tarjetas
   ========================================================================== */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    margin: 30px 0;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

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

.card h3 {
    margin: 0 0 9px;
    font-size: 1.08rem;
}

.card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.96rem;
}

.card__icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: rgba(0, 212, 170, 0.12);
    color: var(--brand-a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 15px;
}

.card--link {
    display: block;
    color: inherit;
}

.card--link:hover {
    text-decoration: none;
}

/* ==========================================================================
   Tabla
   ========================================================================== */

.table-wrap {
    overflow-x: auto;
    margin: 30px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
    min-width: 560px;
}

caption {
    text-align: left;
    padding: 18px 22px 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

th,
td {
    text-align: left;
    padding: 13px 20px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

thead th {
    background: var(--surface-2);
    color: var(--text);
    font-weight: 650;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

tbody tr:last-child td {
    border-bottom: 0;
}

td.is-yes {
    color: var(--brand-a);
    font-weight: 600;
}

td.is-no {
    color: var(--text-dim);
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq {
    margin: 30px 0;
    border-top: 1px solid var(--border);
}

.faq details {
    border-bottom: 1px solid var(--border);
}

.faq summary {
    cursor: pointer;
    padding: 19px 34px 19px 0;
    font-family: var(--font-display);
    font-size: 1.06rem;
    font-weight: 600;
    position: relative;
    list-style: none;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: '+';
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--brand-a);
    transition: transform 0.2s ease;
}

.faq details[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
}

.faq__body {
    color: var(--text-muted);
    padding-bottom: 20px;
}

.faq__body p {
    margin: 0;
}

/* ==========================================================================
   CTA final
   ========================================================================== */

.cta-panel {
    background:
        radial-gradient(600px 300px at 15% 0%, rgba(0, 212, 170, 0.16), transparent 62%),
        radial-gradient(560px 280px at 85% 100%, rgba(0, 163, 224, 0.16), transparent 62%),
        var(--surface);
    border: 1px solid rgba(0, 212, 170, 0.24);
    border-radius: calc(var(--radius) + 4px);
    padding: 44px;
    text-align: center;
    margin: 30px 0;
}

.cta-panel h2 {
    margin: 0 0 12px;
    font-size: clamp(1.4rem, 3.4vw, 2rem);
}

.cta-panel p {
    color: var(--text-muted);
    max-width: 56ch;
    margin: 0 auto 24px;
}

.cta-panel .btn-row {
    justify-content: center;
}

.facts {
    display: flex;
    gap: 10px 26px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 22px;
    font-size: 0.88rem;
    color: var(--text-dim);
}

.facts span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.facts .ti {
    color: var(--brand-a);
}

/* ==========================================================================
   Listado de artículos
   ========================================================================== */

.post-list {
    display: grid;
    gap: 16px;
    margin: 30px 0;
    list-style: none;
    padding: 0;
}

.post-list li {
    margin: 0;
}

.post-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 24px;
    color: inherit;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.post-card:hover {
    text-decoration: none;
    border-color: var(--border-strong);
    transform: translateY(-2px);
}

.post-card h3 {
    margin: 0 0 7px;
    font-size: 1.1rem;
}

.post-card p {
    margin: 0 0 9px;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.post-card__meta {
    font-size: 0.8rem;
    color: var(--text-dim);
}

/* ==========================================================================
   Pie
   ========================================================================== */

.site-footer {
    border-top: 1px solid var(--border);
    background: var(--bg-alt);
    padding: 44px 0 34px;
    margin-top: 60px;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(auto-fit, minmax(150px, 1fr));
    gap: 34px;
}

.site-footer h4 {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--text-dim);
    margin: 0 0 13px;
    font-family: var(--font-body);
    font-weight: 700;
}

.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer li {
    margin-bottom: 9px;
}

.site-footer a {
    color: var(--text-muted);
    font-size: 0.93rem;
}

.site-footer a:hover {
    color: var(--brand-a);
}

.site-footer__about p {
    color: var(--text-muted);
    font-size: 0.93rem;
    max-width: 40ch;
    margin: 12px 0 0;
}

.site-footer__bottom {
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    color: var(--text-dim);
    font-size: 0.86rem;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 860px) {
    .site-header__inner {
        padding: 12px 18px;
        gap: 14px;
    }

    .site-nav {
        gap: 15px;
        font-size: 0.9rem;
    }

    .shell {
        padding: 0 18px;
    }

    .hero {
        padding: 50px 0 42px;
    }

    .section {
        padding: 46px 0;
    }

    .demo__grid[data-cols="4"] {
        grid-template-columns: repeat(2, 1fr);
    }

    .toc ol {
        columns: 1;
    }

    .cta-panel {
        padding: 32px 22px;
    }

    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }
}

/* La cabecera no cabe en una línea a 390px: sin esto el nav y el botón
   empujaban el documento a un ancho mayor que el viewport y todo el
   contenido se salía por la derecha. Pasa a dos filas. */
@media (max-width: 640px) {
    .site-header__inner {
        flex-wrap: wrap;
        padding: 10px 16px;
        row-gap: 10px;
    }

    .site-header__brand {
        font-size: 0.98rem;
    }

    .site-nav {
        order: 3;
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
        gap: 12px;
        padding-top: 10px;
        border-top: 1px solid var(--border);
    }

    .site-nav a {
        font-size: 0.88rem;
    }

    .site-nav .btn {
        padding: 8px 15px;
        font-size: 0.88rem;
    }

    .breadcrumb {
        padding-top: 14px;
    }
}

@media (max-width: 520px) {
    body {
        font-size: 16px;
    }

    .demo__grid,
    .demo__grid[data-cols="3"],
    .demo__grid[data-cols="4"],
    .demo__grid[data-cols="6"] {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Solo los botones de una fila de acciones ocupan el ancho completo.
       Si se aplicase a todos los .btn, el CTA de la cabecera se estiraba
       hasta el ancho del documento y lo desbordaba. */
    .btn-row .btn {
        width: 100%;
    }

    .btn-row {
        flex-direction: column;
    }

    .demo__foot {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ==========================================================================
   Movimiento reducido
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {

    .site-header,
    .site-footer,
    .demo,
    .cta-panel {
        display: none;
    }

    body {
        background: #fff;
        color: #000;
    }
}