/*
 * Turnativo · home. La identidad de cyrks (la de CyrksRM): fondo morado oscuro, acentos
 * ámbar y dorado, tipografía grande. Siempre en oscuro. Solo la cargan index-*.leaf y
 * template-*.leaf, y todo cuelga de `.landing` (o de `:root:has(.landing)` para la barra
 * y el pie del layout): el panel y el resto de páginas siguen con base.css tal cual.
 */

:root:has(.landing) {
    /* Color */
    --l-bg: #120620;
    --l-bg-alt: #1a0a2e;
    --l-surface: rgba(45, 21, 87, 0.55);
    --l-surface-solid: #1f0f36;
    --l-line: rgba(255, 255, 255, 0.12);
    --l-line-strong: rgba(255, 255, 255, 0.22);
    --l-text: #f5f5f7;
    --l-text-2: rgba(245, 245, 247, 0.72);
    --l-text-3: rgba(245, 245, 247, 0.52);
    --l-amber: #ffb547;
    --l-gold: #ffd27a;
    --l-amber-deep: #ff8a1f;
    --l-on-amber: #1a0a2e;
    --l-violet: #a855f7;
    --l-glow-amber: rgba(255, 170, 60, 0.16);
    --l-glow-violet: rgba(168, 85, 247, 0.18);

    /* Los turnos de la ilustración (de marca, no los de la demo) */
    --l-shift-m: #ffb547;
    --l-shift-t: #c084fc;
    --l-shift-n: #60a5fa;
    --l-shift-f: rgba(255, 255, 255, 0.07);

    /* Tipografía (relativa: respeta el tamaño de texto del sistema) */
    --l-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
    --l-text-xs: 0.78rem;
    --l-text-sm: 0.9rem;
    --l-text-md: 1.05rem;
    --l-text-lg: clamp(1.1rem, 1rem + 0.4vw, 1.25rem);
    --l-title: clamp(1.8rem, 1.3rem + 2vw, 2.8rem);
    --l-hero: clamp(2.3rem, 1.4rem + 4.2vw, 4.6rem);

    /* Espacio */
    --l-space-1: 4px;
    --l-space-2: 8px;
    --l-space-3: 12px;
    --l-space-4: 16px;
    --l-space-5: 24px;
    --l-space-6: 32px;
    --l-space-7: 48px;
    --l-space-8: clamp(56px, 8vw, 112px);

    /* Forma */
    --l-r-sm: 8px;
    --l-r-md: 16px;
    --l-r-lg: 24px;
    --l-r-phone: 2.4rem;
    --l-r-pill: 999px;
    --l-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 24px 60px rgba(0, 0, 0, 0.35);
    --l-blur: saturate(160%) blur(18px);

    /* Movimiento */
    --l-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --l-loop: 9s;
    --l-paint-step: 0.11s;

    --l-maxw: 72rem;
    --l-focus: 0 0 0 3px rgba(255, 181, 71, 0.55);

    /* Los tokens de base.css, con los valores de la home: así la barra, el pie, los
       botones, el formulario de contacto y la demo heredan la identidad sin tocarlos. */
    --accent: var(--l-amber);
    --accent-contrast: var(--l-on-amber);
    --warm: var(--l-amber-deep);
    --bg: var(--l-bg);
    --bg-elevated: rgba(18, 6, 32, 0.72);
    --text: var(--l-text);
    --text-secondary: var(--l-text-2);
    --border: var(--l-line);
    --shadow: var(--l-shadow);
    --danger: #ff8a8a;

    color-scheme: dark;
    background: var(--l-bg);
}

:root:has(.landing) body {
    background:
        radial-gradient(1200px 700px at 15% 0%, var(--l-glow-violet), transparent 60%),
        radial-gradient(900px 600px at 90% 40%, var(--l-glow-amber), transparent 60%),
        var(--l-bg);
}

/* Siempre oscuro: fuera el botón de tema, y el icono de la barra, en su versión oscura. */
:root:has(.landing) #theme-toggle { display: none; }
:root:has(.landing) .nav-icon-light { display: none; }
:root:has(.landing) .nav-icon-dark { display: inline; }

:root:has(.landing) a { color: var(--l-gold); }
:root:has(.landing) .nav-brand,
:root:has(.landing) .nav-links a[aria-current="page"] { color: var(--l-text); }
:root:has(.landing) .nav-links a { color: var(--l-text-2); }
:root:has(.landing) .nav-links a:hover { color: var(--l-text); }

.landing a:focus-visible,
.landing button:focus-visible,
.landing summary:focus-visible,
.landing input:focus-visible,
.landing textarea:focus-visible {
    outline: none;
    box-shadow: var(--l-focus);
}

/* ---- Botones ---- */

.landing .button-primary,
:root:has(.landing) a.button-primary {
    background: linear-gradient(180deg, var(--l-amber), var(--l-amber-deep));
    color: var(--l-on-amber);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 24px rgba(255, 138, 31, 0.22);
}
.landing .button-secondary,
:root:has(.landing) a.button-secondary {
    background: rgba(255, 255, 255, 0.06);
    color: var(--l-text);
    border: 1px solid var(--l-line-strong);
    box-shadow: none;
}
.landing .button-secondary:hover { border-color: var(--l-amber); filter: none; }

.landing .card {
    background: var(--l-surface);
    border: 1px solid var(--l-line);
    border-radius: var(--l-r-lg);
    box-shadow: var(--l-shadow);
    -webkit-backdrop-filter: var(--l-blur);
    backdrop-filter: var(--l-blur);
}

/* ---- Secciones ---- */

.l-section {
    scroll-margin-top: 4.5rem;
    max-width: var(--l-maxw);
    margin: 0 auto;
    padding: var(--l-space-8) clamp(1rem, 4vw, 2.5rem) 0;
}
.landing h2 {
    text-align: center;
    font-family: var(--l-font-display);
    font-size: var(--l-title);
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 0 0 var(--l-space-5);
}
.landing .section-sub { color: var(--l-text-2); text-align: center; margin-inline: auto; }

/* ---- Hero ---- */

.l-hero {
    max-width: var(--l-maxw);
    margin: 0 auto;
    padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 4vw, 2.5rem) var(--l-space-7);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-areas: "copy brand" "copy visual";
    column-gap: clamp(2rem, 5vw, 4rem);
    row-gap: var(--l-space-5);
    align-items: center;
}
.l-hero-copy { grid-area: copy; }
.l-hero-visual { grid-area: visual; align-self: start; }

/* Icono y nombre sobre la ilustración. Al hacer scroll, la marca vuelve a la barra
   (home.js observa `.hero-wordmark`, como hacía la home anterior). */
.l-brand {
    grid-area: brand;
    align-self: end;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--l-space-4);
    margin-right: clamp(3rem, 12vw, 7rem);
    margin-bottom: var(--l-space-6);
    /* Sube la marca sin empujar la ilustración: transform no mueve el resto. */
    transform: translateY(calc(-1 * var(--l-space-6)));
}
.l-brand img {
    width: clamp(3.5rem, 2.5rem + 3vw, 5rem);
    height: auto;
    border-radius: 22%;
    box-shadow: var(--l-shadow);
}
.l-brand .hero-wordmark {
    margin: 0;
    font-family: var(--l-font-display);
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--l-text);
}

.l-eyebrow {
    margin: 0 0 var(--l-space-4);
    font-size: var(--l-text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--l-amber);
}

.l-hero h1 {
    font-family: var(--l-font-display);
    font-size: var(--l-hero);
    line-height: 1.02;
    letter-spacing: -0.035em;
    margin: 0 0 var(--l-space-5);
}
.l-accent {
    display: block;
    background: linear-gradient(90deg, var(--l-gold), var(--l-amber) 45%, var(--l-amber-deep));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.l-hero-sub {
    font-size: var(--l-text-lg);
    color: var(--l-text-2);
    max-width: 34rem;
    margin: 0 0 var(--l-space-6);
}

.landing .referral-banner { margin: 0 0 var(--l-space-5); text-align: left; }

.l-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--l-space-3);
    align-items: center;
}

.l-facts {
    list-style: none;
    margin: var(--l-space-5) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--l-space-2) var(--l-space-5);
    font-size: var(--l-text-sm);
    color: var(--l-text-2);
}
.l-facts li::before {
    content: "✓";
    color: var(--l-amber);
    font-weight: 700;
    margin-right: var(--l-space-2);
}

/* La ilustración: el tablero y el iPhone, montados uno sobre otro. */
.l-hero-visual {
    position: relative;
    padding-bottom: var(--l-space-7);
}

.l-board {
    background: var(--l-surface);
    border: 1px solid var(--l-line);
    border-radius: var(--l-r-lg);
    box-shadow: var(--l-shadow);
    -webkit-backdrop-filter: var(--l-blur);
    backdrop-filter: var(--l-blur);
    padding: var(--l-space-5);
    margin-right: clamp(3rem, 12vw, 7rem);
}

.l-board-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--l-space-3);
    margin-bottom: var(--l-space-4);
}
.l-board-title { font-weight: 700; }
.l-board-title small { font-weight: 500; color: var(--l-text-3); margin-left: var(--l-space-2); }

.l-board-publish {
    font-size: var(--l-text-xs);
    font-weight: 700;
    padding: var(--l-space-1) var(--l-space-3);
    border-radius: var(--l-r-pill);
    background: var(--l-amber);
    color: var(--l-on-amber);
    animation: l-publish var(--l-loop) var(--l-ease) infinite;
}

.l-board-grid {
    display: grid;
    grid-template-columns: 3.2rem repeat(7, minmax(0, 1fr));
    gap: 5px;
    align-items: center;
}
.l-day { text-align: center; font-size: var(--l-text-xs); color: var(--l-text-3); font-weight: 600; }
.l-name { font-size: var(--l-text-xs); color: var(--l-text-2); font-weight: 600; }

/* Cada celda se pinta a su turno (`--i`), como el dedo al arrastrar por la semana. */
.l-board-grid i {
    display: block;
    aspect-ratio: 1;
    border-radius: var(--l-r-sm);
    background: var(--l-shift-f);
    --c: var(--l-shift-f);
    animation: l-paint var(--l-loop) var(--l-ease) infinite;
    animation-delay: calc(var(--i) * var(--l-paint-step));
}
.l-board-grid .m { --c: var(--l-shift-m); }
.l-board-grid .t { --c: var(--l-shift-t); }
.l-board-grid .n { --c: var(--l-shift-n); }
.l-board-grid .f { --c: rgba(255, 255, 255, 0.16); }
.l-board-grid .l-focus { outline: 2px solid var(--l-text); outline-offset: 2px; }

.l-legend {
    list-style: none;
    margin: var(--l-space-4) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--l-space-2) var(--l-space-4);
    font-size: var(--l-text-xs);
    color: var(--l-text-2);
}
.l-legend li::before {
    content: "";
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    border-radius: 3px;
    margin-right: var(--l-space-1);
    background: var(--c);
}
.l-legend .m { --c: var(--l-shift-m); }
.l-legend .t { --c: var(--l-shift-t); }
.l-legend .n { --c: var(--l-shift-n); }
.l-legend .f { --c: rgba(255, 255, 255, 0.16); }

.l-phone {
    position: absolute;
    right: 0;
    bottom: 0;
    width: clamp(9.5rem, 30%, 12.5rem);
    padding: 0.45rem;
    border-radius: var(--l-r-phone);
    background: #0b0b0d;
    border: 1px solid var(--l-line-strong);
    box-shadow: var(--l-shadow), 0 0 60px var(--l-glow-violet);
}
.l-phone-screen {
    border-radius: calc(var(--l-r-phone) - 0.45rem);
    background: #000;
    padding: var(--l-space-6) var(--l-space-3) var(--l-space-5);
    min-height: 17rem;
}
.l-phone-app { margin: 0; font-size: 0.65rem; color: #ff453a; font-weight: 600; }
.l-phone-day { margin: 0 0 var(--l-space-3); font-size: var(--l-text-sm); color: var(--l-text-2); }
.l-phone-day strong { color: var(--l-text); font-size: 1.3em; }
/* La vista de día del Calendario: las horas en su columna y el turno en la de al lado,
   desde la fila de las 15:00. Así el turno nunca tapa las horas, y si su texto ocupa
   más, las filas crecen con él en vez de dejarlo salirse del móvil. El turno dura hasta
   las 23:00: ocupa también la fila de después de las 17:00 y llega al final sin esquinas
   abajo, como un evento que sigue fuera de la pantalla. */
.l-phone-timeline {
    display: grid;
    grid-template-columns: 2.3rem minmax(0, 1fr);
    grid-auto-rows: minmax(2.1rem, auto);
    column-gap: var(--l-space-1);
}
.l-phone-timeline > span {
    grid-column: 1;
    font-size: 0.6rem;
    line-height: 1;
    color: var(--l-text-3);
    border-top: 1px solid var(--l-line);
    padding-top: 2px;
}
.l-phone-event {
    grid-column: 2;
    grid-row: 2 / 6;
    align-self: stretch;
    display: grid;
    gap: 2px;
    padding: var(--l-space-2);
    border-radius: 6px 6px 0 0;
    border-left: 3px solid var(--l-shift-t);
    background: color-mix(in srgb, var(--l-shift-t) 22%, transparent);
    font-size: 0.7rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
    animation: l-arrive var(--l-loop) var(--l-ease) infinite;
}
.l-phone-event strong { font-size: 0.8rem; }
.l-phone-event small { color: var(--l-text-2); font-size: 0.6rem; }

/* El bucle: se pinta la semana (0–45 %), se publica (~48 %), llega al iPhone (~55 %),
   se queda a la vista y vuelve a empezar. */
@keyframes l-paint {
    0%, 3% { background: var(--l-shift-f); transform: scale(0.85); }
    7% { background: var(--c); transform: scale(1.08); }
    10%, 88% { background: var(--c); transform: none; }
    95%, 100% { background: var(--l-shift-f); transform: scale(0.85); }
}
@keyframes l-publish {
    0%, 44% { box-shadow: 0 0 0 0 rgba(255, 181, 71, 0); transform: none; }
    48% { box-shadow: 0 0 0 8px rgba(255, 181, 71, 0.25); transform: scale(0.94); }
    54%, 100% { box-shadow: 0 0 0 0 rgba(255, 181, 71, 0); transform: none; }
}
@keyframes l-arrive {
    0%, 52% { opacity: 0; transform: translateY(-10px) scale(0.96); }
    58%, 90% { opacity: 1; transform: none; }
    96%, 100% { opacity: 0; transform: none; }
}

/* ---- Lo que dejas de hacer ---- */

.l-band {
    scroll-margin-top: 4.5rem;
    border-block: 1px solid var(--l-line);
    background: rgba(255, 255, 255, 0.02);
    padding: var(--l-space-6) clamp(1rem, 4vw, 2.5rem);
}
.l-band-title {
    text-align: center !important;
    max-width: var(--l-maxw);
    margin: 0 auto var(--l-space-4) !important;
    font-size: var(--l-text-xs) !important;
    font-weight: 700;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    color: var(--l-text-3);
}
.l-strike {
    list-style: none;
    max-width: var(--l-maxw);
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--l-space-3) var(--l-space-6);
    text-align: center;
    font-family: var(--l-font-display);
    font-size: var(--l-text-lg);
    font-weight: 600;
    color: var(--l-text-2);
}
.l-strike s {
    text-decoration-color: var(--l-amber);
    text-decoration-thickness: 2px;
}

/* ---- Así de simple ---- */

.l-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--l-space-6);
    counter-reset: none;
}
.l-steps li { border-top: 1px solid var(--l-line-strong); padding-top: var(--l-space-5); }
.l-step-number {
    font-family: var(--l-font-display);
    font-size: var(--l-text-sm);
    font-weight: 700;
    color: var(--l-amber);
    letter-spacing: 0.08em;
}
.l-steps h3 {
    font-family: var(--l-font-display);
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    letter-spacing: -0.02em;
    margin: var(--l-space-2) 0 var(--l-space-3);
}
.l-steps p { margin: 0; color: var(--l-text-2); }

.l-compat {
    margin: var(--l-space-7) auto 0;
    max-width: 52rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: var(--l-space-4);
}
.l-compat-side {
    padding: var(--l-space-5);
    border-radius: var(--l-r-md);
    border: 1px solid var(--l-line);
    background: var(--l-surface);
    text-align: center;
}
.l-compat-side h3 { margin: 0 0 var(--l-space-4); font-size: var(--l-text-md); line-height: 1.3; }
.l-compat-side .l-chips { justify-content: center; }
.l-compat-arrow { align-self: center; color: var(--l-amber); font-size: 1.6rem; line-height: 1; }
.l-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--l-space-2);
}
.l-chips li {
    font-size: var(--l-text-sm);
    font-weight: 600;
    padding: var(--l-space-1) var(--l-space-3);
    border-radius: var(--l-r-pill);
    border: 1px solid var(--l-line-strong);
    background: rgba(255, 255, 255, 0.04);
}

.l-sectors { text-align: center; margin: var(--l-space-5) 0 0; color: var(--l-text-3); font-size: var(--l-text-sm); }

.l-video { margin-top: var(--l-space-6); text-align: center; }
.l-video summary { list-style: none; display: inline-flex; align-items: center; }
.l-video summary::-webkit-details-marker { display: none; }
.l-video-close, .l-video[open] .l-video-open { display: none; }
.l-video[open] .l-video-close { display: inline; }
.l-video video {
    display: block;
    width: 100%;
    height: auto;
    margin-top: var(--l-space-4);
    border-radius: var(--l-r-md);
    border: 1px solid var(--l-line);
}

/* ---- Demo ---- */

.landing .demo-intro { text-align: center; }
.landing .demo-intro h2 { font-size: var(--l-title); margin-bottom: var(--l-space-2); }
.landing .demo-frame {
    background: #0e0e10;
    border: 1px solid var(--l-line-strong);
    border-radius: var(--l-r-lg);
    box-shadow: var(--l-shadow);
}
.landing .demo-phone { background: #0b0b0d; border: 1px solid var(--l-line-strong); }
.landing .demo-phone-screen { background: #000; }
.landing .link-button { color: var(--l-gold); }

/* ---- Precio ---- */

.landing .pricing { max-width: 60rem; }
.landing .pricing h2 { font-size: var(--l-title); }
.landing .billing-toggle { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--l-line); }
.landing .billing-option.active { background: var(--l-amber); color: var(--l-on-amber); }
.landing .billing-option.active .billing-save { color: var(--l-on-amber); }
.landing .pricing-footnote { color: var(--l-text-3); }

/* ---- La app ---- */

.l-app {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) auto;
    gap: var(--l-space-6);
    align-items: center;
}
.l-app-copy p { color: var(--l-text-2); margin: 0 0 var(--l-space-3); max-width: 38rem; }
.l-app-copy strong { color: var(--l-text); }
.l-app-download { display: flex; align-items: center; gap: var(--l-space-5); }
.landing .app-qr { margin: 0; text-align: center; font-size: var(--l-text-xs); color: var(--l-text-3); }
.landing .app-qr img { border-radius: var(--l-r-sm); background: #fff; padding: 6px; }

/* ---- Todo el detalle (FAQ), cierre y contacto ---- */

.landing .faq { max-width: 48rem; }
.landing .faq-item { border-radius: var(--l-r-md); }
.landing .faq-item summary::after { color: var(--l-amber); }
.l-faq-more { margin: var(--l-space-5) 0 0; text-align: center; color: var(--l-text-2); }

.landing .final-cta { text-align: center; padding-bottom: var(--l-space-7); }
.landing .final-cta .l-actions { justify-content: center; }
.landing .text-field { background: rgba(255, 255, 255, 0.05); border-color: var(--l-line-strong); color: var(--l-text); }

/* ---- La plantilla gratis: un artículo con la identidad de la home ---- */

.landing .template-page { max-width: 46rem; padding: var(--l-space-7) clamp(1rem, 4vw, 2.5rem); }
.landing .template-page h1 {
    font-family: var(--l-font-display);
    font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 var(--l-space-4);
}
.landing .template-page h2 {
    text-align: left;
    font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
    margin: var(--l-space-7) 0 var(--l-space-3);
}
.landing .template-page .section-sub { text-align: left; font-size: var(--l-text-lg); margin: 0 0 var(--l-space-5); }
.landing .template-page strong { color: var(--l-text); }
.landing .template-downloads { margin: 0 0 var(--l-space-6); }
/* La vista previa es la plantilla tal cual se imprime: clara, enmarcada sobre el morado. */
.landing .template-preview img { border: 1px solid var(--l-line-strong); border-radius: var(--l-r-md); box-shadow: var(--l-shadow); }
.landing .template-cta { margin-top: var(--l-space-7); padding: var(--l-space-6) clamp(1rem, 4vw, 2rem); text-align: center; }
.landing .template-cta h2 { text-align: center; margin-top: 0; }
.landing .template-cta-note { color: var(--l-amber); font-weight: 600; }
.landing .template-cta .l-actions { justify-content: center; margin-top: var(--l-space-5); }

:root:has(.landing) .footer { border-top: 1px solid var(--l-line); color: var(--l-text-3); }

/* ---- Pantallas estrechas: el mensaje, la ilustración y después los botones ---- */

@media (max-width: 860px) {
    /* `display: contents` saca los hijos del bloque de texto a la columna del hero, para
       poder colocar la ilustración entre la frase y los botones sin duplicar el HTML. */
    .l-hero { display: flex; flex-direction: column; gap: 0; text-align: center; }
    .l-hero-copy { display: contents; }
    .l-hero-visual { order: 1; align-self: stretch; margin-bottom: var(--l-space-6); }
    .landing .referral-banner, .l-actions, .l-facts { order: 2; }
    .l-brand { align-self: center; margin-right: 0; margin-bottom: var(--l-space-5); transform: none; }
    .l-hero-sub { margin-inline: auto; }
    .l-actions, .l-facts { justify-content: center; }
    .landing .referral-banner { text-align: center; }
    .l-steps { grid-template-columns: minmax(0, 1fr); gap: var(--l-space-5); }
    .l-app { grid-template-columns: minmax(0, 1fr); }
    .l-compat { grid-template-columns: minmax(0, 1fr); }
    .l-compat-arrow { justify-self: center; transform: rotate(90deg); }
}
@media (max-width: 520px) {
    /* En el iPhone no caben uno encima del otro sin tapar «Publicar» y el fin de semana:
       el tablero ocupa todo el ancho y el móvil va debajo, a la derecha, apenas montado
       sobre el borde para que se lean juntos. */
    .l-hero-visual { padding-bottom: 0; }
    .l-board { margin-right: 0; padding: var(--l-space-4); }
    .l-phone { position: relative; margin: calc(-1 * var(--l-space-3)) var(--l-space-3) 0 auto; }
    .l-board-grid { grid-template-columns: 2.6rem repeat(7, minmax(0, 1fr)); gap: 3px; }
    /* El móvil, algo más ancho y con las horas más juntas, para que el turno quepa sin
       partir cada palabra. */
    .l-phone { width: 9.5rem; }
    .l-phone-screen { min-height: 12rem; padding: var(--l-space-5) var(--l-space-2) var(--l-space-4); }
    .l-phone-timeline { grid-template-columns: 1.6rem minmax(0, 1fr); }
    .l-phone-timeline > span { font-size: 0.55rem; }
    .l-phone-event { padding: var(--l-space-1) 6px; font-size: 0.62rem; }
    .l-phone-event strong { font-size: 0.7rem; }
    .l-phone-event small { font-size: 0.55rem; }
    .l-actions .button { flex: 1 1 auto; text-align: center; }
    .l-app-download .app-qr { display: none; }
}

/* Reducir movimiento: la ilustración, quieta y ya terminada. */
@media (prefers-reduced-motion: reduce) {
    .l-board-grid i { animation: none; background: var(--c); }
    .l-board-publish, .l-phone-event { animation: none; }
}