/*
 * Comandou Landing — tokens + componentes.
 * Carregar depois de css/b-system.css. Spec: design-refs/b-system-landing.md
 * Nenhuma cor nova: tudo aponta para --b-*. [canônico] = valor do b-system da skill, sem token no app.
 */

/* ═══ Tokens ═══════════════════════════════════════════════════ */
:root {
  /* ── Tipografia display (Nunito) ─────────────────────────────── */
  --l-text-display: clamp(2.5rem, 5vw, 3.5rem);   /* 40→56 · [canônico] --b-text-display */
  --l-text-h1:      clamp(2rem, 4vw, 2.5rem);     /* 32→40 · [canônico] --b-text-h1 — título de seção */
  --l-text-h3:      var(--b-font-size-xl);        /* 20 — título de card/feature */
  --l-text-lead:    var(--b-font-size-lg);        /* 18 — subtítulo do hero/seção */
  --l-text-stat:    clamp(2.25rem, 4vw, 3rem);    /* números de impacto */
  --l-leading-tight: 1.15;                        /* [canônico] --b-leading-tight */
  --l-leading-snug:  1.3;                         /* [canônico] --b-leading-snug */
  --l-tracking-tight: -0.02em;                    /* [canônico] --b-tracking-tight — único tracking negativo */
  --l-tracking-wider: 0.08em;                     /* [canônico] label uppercase */

  /* ── Superfícies (faixas) — só tokens b-system ───────────────── */
  --l-band:          var(--b-bg);          /* creme — padrão */
  --l-band-alt:      var(--b-bg-sunken);   /* areia — alterna com a padrão */
  --l-band-dark:     var(--b-fg);          /* café #2C1A0E — fundo aprovado p/ logo branca */
  --l-band-dark-fg:  var(--b-fg-inverted);
  --l-band-dark-muted: var(--b-neutral-300);
  --l-band-brand:    var(--b-primary-500); /* terracota — fundo aprovado p/ logo on-terra; usar no máx. 1x */

  /* ── Layout ──────────────────────────────────────────────────── */
  --l-container: 1200px;
  --l-gutter: var(--b-space-4);                    /* 16 mobile → 32 desktop (ver media) */
  --l-section-y: var(--b-space-16);                /* 64 mobile → 128 desktop */
  --l-header-h: var(--b-space-16);                 /* 64 */

  /* ── Motion — b-system canônico (o app usa só --b-transition-*) ─ */
  --l-ease-spring: cubic-bezier(0.34, 1.26, 0.64, 1); /* entrada de elementos */
  --l-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);      /* mudança de estado / saída */
  --l-dur-micro:   150ms;                             /* = --b-transition-fast */
  --l-dur-default: 250ms;                             /* ≈ --b-transition-normal */
  --l-dur-page:    350ms;                             /* reveal de bloco */
  --l-rise-offset: var(--b-space-4);                  /* 16px — sutil, sem "pulo" */
  --l-stagger:     60ms;
}

@media (min-width: 768px) {
  :root { --l-gutter: var(--b-space-6); --l-section-y: var(--b-space-16); }
}
@media (min-width: 1024px) {
  :root { --l-gutter: var(--b-space-8); --l-section-y: 8rem; } /* 128 = [canônico] --b-space-32 */
}

/* ── Reveal ao rolar ─────────────────────────────────────────────
 * IntersectionObserver adiciona .is-in uma vez (once). --i = índice p/ stagger. */
[data-rise] {
  opacity: 0;
  transform: translateY(var(--l-rise-offset));
  transition: opacity var(--l-dur-page) var(--l-ease-smooth),
              transform var(--l-dur-page) var(--l-ease-spring);
  transition-delay: calc(var(--i, 0) * var(--l-stagger));
}
[data-rise].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-rise] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ═══ Base ═════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--l-header-h) + var(--b-space-4)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--b-font-sans); color: var(--b-fg); background: var(--l-band); line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
.i { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wrap { max-width: var(--l-container); margin: 0 auto; padding: 0 var(--l-gutter); }
.band { padding: var(--l-section-y) 0; }
.band--alt { background: var(--l-band-alt); }
.band--dark { background: var(--l-band-dark); color: var(--l-band-dark-fg); }
.center { text-align: center; }
.center .l-lead { margin-inline: auto; }
.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; }
.l-skip { position: absolute; left: var(--b-space-4); top: -100px; z-index: var(--b-z-toast); background: var(--b-fg); color: var(--b-fg-inverted); padding: var(--b-space-3) var(--b-space-4); border-radius: var(--b-radius-sm); font-weight: 700; }
.l-skip:focus { top: var(--b-space-4); }

/* ═══ Tipografia ═══════════════════════════════════════════════ */
.l-display { font-size: var(--l-text-display); font-weight: var(--b-font-weight-extrabold); line-height: var(--l-leading-tight); letter-spacing: var(--l-tracking-tight); margin: 0; text-wrap: balance; }
.l-h2 { font-size: var(--l-text-h1); font-weight: var(--b-font-weight-extrabold); line-height: var(--l-leading-tight); letter-spacing: var(--l-tracking-tight); margin: 0; text-wrap: balance; }
.l-h3 { font-size: var(--l-text-h3); font-weight: var(--b-font-weight-bold); line-height: var(--l-leading-snug); margin: 0; }
.l-lead { font-size: var(--l-text-lead); color: var(--b-fg-muted); margin: var(--b-space-4) 0 0; max-width: 36rem; }
.l-two-tone { color: var(--b-fg-subtle); }
.l-two-tone strong { color: var(--b-fg); font-weight: inherit; }

/* ═══ Header + drawer ══════════════════════════════════════════ */
.l-header { position: sticky; top: 0; z-index: var(--b-z-sticky); height: var(--l-header-h); background: var(--b-bg); border-bottom: 1px solid transparent; transition: background-color var(--l-dur-default) var(--l-ease-smooth), border-color var(--l-dur-default) var(--l-ease-smooth); }
.l-header.is-scrolled { background: color-mix(in srgb, var(--b-bg) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: var(--b-border); }
.l-header .wrap { height: 100%; display: flex; align-items: center; gap: var(--b-space-8); }
.l-header__logo { display: block; flex-shrink: 0; }
.l-header__logo img { width: 112px; }
.l-nav { display: none; gap: var(--b-space-6); font-size: var(--b-font-size-sm); font-weight: 600; }
.l-nav a { color: var(--b-fg-muted); text-decoration: none; transition: color var(--l-dur-micro) var(--l-ease-smooth); }
.l-nav a:hover { color: var(--b-fg); }
.l-header__actions { margin-left: auto; display: flex; gap: var(--b-space-2); align-items: center; }
.l-header .l-btn--ghost { display: none; }
.l-desk-only { display: none; }
@media (min-width: 768px) { .l-header__logo img { width: 132px; } .l-desk-only { display: inline; } .l-mob-only { display: none; } }
@media (min-width: 1024px) { .l-nav { display: flex; } .l-header .l-btn--ghost { display: inline-flex; } .l-header .l-burger { display: none; } }

.l-drawer { position: fixed; inset: 0; z-index: var(--b-z-overlay); visibility: hidden; }
.l-drawer.is-open { visibility: visible; }
.l-drawer__scrim { position: absolute; inset: 0; background: rgba(44, 26, 14, .4); opacity: 0; transition: opacity var(--l-dur-default) var(--l-ease-smooth); }
.l-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 85vw); background: var(--b-bg); box-shadow: var(--b-shadow-4); padding: var(--b-space-4) var(--b-space-6) calc(var(--b-space-6) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--b-space-2); transform: translateX(100%); transition: transform var(--l-dur-page) var(--l-ease-smooth); }
.l-drawer.is-open .l-drawer__scrim { opacity: 1; }
.l-drawer.is-open .l-drawer__panel { transform: none; }
.l-drawer__panel .l-btn--icon { align-self: flex-end; }
.l-drawer__panel nav { display: grid; margin: var(--b-space-4) 0; }
.l-drawer__panel nav a { min-height: 48px; display: flex; align-items: center; color: var(--b-fg); text-decoration: none; font-weight: 700; font-size: var(--b-font-size-lg); border-bottom: 1px solid var(--b-border); }
.l-drawer__panel .l-btn { width: 100%; }
.l-drawer__panel .l-btn--icon { width: 44px; }
body.no-scroll { overflow: hidden; }

/* ═══ Eyebrow ══════════════════════════════════════════════════ */
.l-eyebrow { display: inline-flex; align-items: center; gap: var(--b-space-2); padding: 6px 12px; border-radius: var(--b-radius-full); background: var(--b-primary-50); color: var(--b-primary-700); font-size: var(--b-font-size-xs); font-weight: 700; letter-spacing: var(--l-tracking-wider); text-transform: uppercase; }
.l-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--b-primary-500); }

/* ═══ Botões e links ═══════════════════════════════════════════ */
.l-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--b-space-2); min-height: 44px; padding: 0 var(--b-space-5); border-radius: var(--b-radius-sm); border: 1px solid transparent; font: 700 var(--b-font-size-md)/1 var(--b-font-sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--l-dur-micro) var(--l-ease-smooth), border-color var(--l-dur-micro) var(--l-ease-smooth), color var(--l-dur-micro) var(--l-ease-smooth), transform var(--l-dur-micro) var(--l-ease-smooth); }
.l-btn:active { transform: scale(.98); }
.l-btn:focus-visible, .l-link:focus-visible, .l-nav a:focus-visible, .l-drawer a:focus-visible { outline: 2px solid var(--b-border-focus); outline-offset: 2px; }
.l-btn--lg { min-height: 52px; padding: 0 var(--b-space-6); }
/* primary-600/700, não 500: creme sobre primary-500 dá 3.6:1 (falha AA em 16px); 600 dá 4.6:1 */
.l-btn--primary { background: var(--b-primary-600); color: var(--b-fg-inverted); }
.l-btn--primary:hover { background: var(--b-primary-700); }
.l-btn--secondary { background: var(--b-neutral-100); color: var(--b-fg); border-color: var(--b-border); }
.l-btn--secondary:hover { background: var(--b-neutral-200); }
.l-btn--ghost { background: transparent; color: var(--b-fg-muted); }
.l-btn--ghost:hover { background: var(--b-neutral-100); color: var(--b-fg); }
.l-btn--on-dark { background: transparent; color: var(--b-fg-inverted); border-color: var(--b-neutral-600); }
.l-btn--on-dark:hover { border-color: var(--b-neutral-400); }
.l-btn--icon { min-width: 44px; padding: 0; }
.l-btn .i-arrow, .l-link .i-arrow { transition: transform var(--l-dur-micro) var(--l-ease-smooth); }
.l-btn:hover .i-arrow, .l-link:hover .i-arrow { transform: translateX(3px); }
.l-link { display: inline-flex; align-items: center; gap: 6px; color: var(--b-primary-600); font-weight: 700; text-decoration: none; text-underline-offset: 4px; transition: color var(--l-dur-micro) var(--l-ease-smooth); }
.l-link:hover { color: var(--b-primary-700); text-decoration: underline; }
.l-link .i { width: 18px; height: 18px; }
.row { display: flex; flex-wrap: wrap; gap: var(--b-space-3); align-items: center; }

/* ═══ Hero ═════════════════════════════════════════════════════ */
.l-hero { position: relative; isolation: isolate; padding: var(--b-space-6) 0 var(--l-section-y); text-align: center; overflow: hidden; }
.l-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(var(--b-neutral-200) 1.2px, transparent 1.2px); background-size: 20px 20px; opacity: .6; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 70%); mask-image: linear-gradient(to bottom, #000, transparent 70%); }
.l-hero .l-eyebrow { margin-top: var(--b-space-10); }
.l-hero .l-display { margin: var(--b-space-5) auto 0; max-width: 15ch; }
.l-hero .l-lead { margin: var(--b-space-5) auto 0; }
.l-hero .row { justify-content: center; margin-top: var(--b-space-8); }
@media (max-width: 479px) { .l-hero .row .l-btn { width: 100%; } }

/* ═══ Moldura ═══════════════════════════════════════════ */
.l-frame { background: var(--b-bg-elevated); border: 1px solid var(--b-border); border-radius: var(--b-radius-lg); box-shadow: var(--b-shadow-3); overflow: hidden; }
.l-frame__bar { height: 32px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid var(--b-border); background: var(--b-bg); }
.l-frame__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--b-neutral-200); }
.l-frame img { width: 100%; }

/* ═══ Fluxo Garçom → Cozinha → Caixa ═══════════════════════════ */
.l-flow { display: grid; margin-top: var(--b-space-10); align-items: center; }
@media (min-width: 768px) { .l-flow { grid-template-columns: 1fr minmax(48px, 120px) 1fr minmax(48px, 120px) 1fr; } }
.l-flow__node { background: var(--b-bg-elevated); border: 1px solid var(--b-border); border-radius: var(--b-radius-md); padding: var(--b-space-5); box-shadow: var(--b-shadow-1); text-align: center; }
.l-flow__node .i { width: 28px; height: 28px; color: var(--b-primary-500); }
.l-flow__node h3 { margin: var(--b-space-2) 0 0; font-size: var(--l-text-h3); }
.l-flow__node p { margin: 4px 0 var(--b-space-2); font-size: var(--b-font-size-sm); color: var(--b-fg-muted); }
.l-flow__node--hub { background: var(--b-primary-600); border-color: var(--b-primary-600); color: var(--b-fg-inverted); box-shadow: var(--b-shadow-3); }
.l-flow__node--hub .i, .l-flow__node--hub p { color: var(--b-fg-inverted); }
.l-flow__link { display: block; width: 100%; height: 64px; }
.l-flow__link .track { stroke: var(--b-border-strong); stroke-width: 1.5; stroke-dasharray: 3 5; fill: none; }
.l-flow__link .pulse { stroke: var(--b-primary-500); stroke-width: 3; stroke-linecap: round; fill: none; stroke-dasharray: 14 86; animation: l-pulse 2.4s linear infinite; }
.l-flow__link--2 .pulse { animation-delay: 1.2s; }
@keyframes l-pulse { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.l-flow__link--v { width: 2px; height: 48px; margin: 0 auto; }
.l-flow__link--h { display: none; }
@media (min-width: 768px) { .l-flow__link--v { display: none; } .l-flow__link--h { display: block; } }
@media (prefers-reduced-motion: reduce) { .l-flow__link .pulse { display: none; } }

/* ═══ Status (mesmas cores do app) ═════════════════════════════ */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--b-radius-xs); font-size: var(--b-font-size-xs); font-weight: 700; }
.badge--ok { background: var(--b-success-100); color: var(--b-success-700); }
.badge--warn { background: var(--b-warning-100); color: var(--b-warning-700); }
.badge--idle { background: var(--b-neutral-100); color: var(--b-neutral-700); }

/* ═══ Antes × depois ═══════════════════════════════════════════ */
.l-oldnew { display: grid; gap: var(--b-space-4); margin-top: var(--b-space-10); }
@media (min-width: 768px) { .l-oldnew { grid-template-columns: 1fr 1fr; } }
.l-oldnew__card { border-radius: var(--b-radius-lg); padding: var(--b-space-6); border: 1px solid var(--b-border); }
@media (min-width: 768px) { .l-oldnew__card { padding: var(--b-space-8); } }
.l-oldnew__card--old { background: var(--b-bg-sunken); color: var(--b-fg-muted); }
.l-oldnew__card--new { background: var(--b-bg-elevated); border-color: var(--b-primary-200); box-shadow: var(--b-shadow-2); }
.l-oldnew__card ul { list-style: none; padding: 0; margin: var(--b-space-5) 0 0; display: grid; gap: var(--b-space-3); }
.l-oldnew__card li { display: flex; gap: var(--b-space-3); align-items: flex-start; }
.l-oldnew__card li .i { margin-top: 2px; }
.l-oldnew__card--old .i { color: var(--b-danger-600); }
.l-oldnew__card--new .i { color: var(--b-success-600); }

/* ═══ Por perfil (blocos alternados) + feature trio ════════════ */
.l-role { display: grid; gap: var(--b-space-8); align-items: center; }
.l-role + .l-role { margin-top: var(--b-space-16); }
@media (min-width: 1024px) {
  .l-role { grid-template-columns: 5fr 7fr; gap: var(--b-space-12); }
  .l-role--flip { grid-template-columns: 7fr 5fr; }
  .l-role--flip .l-role__text { order: 2; }
}
.l-role__tag { display: inline-flex; align-items: center; gap: var(--b-space-2); color: var(--b-primary-700); font-weight: 800; margin-bottom: var(--b-space-3); }
.l-role__tag .i { width: 22px; height: 22px; }
.l-trio { list-style: none; padding: 0; margin: var(--b-space-6) 0 0; display: grid; gap: var(--b-space-5); }
.l-trio li { display: flex; gap: var(--b-space-4); align-items: flex-start; }
.l-trio__icon { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--b-radius-sm); background: var(--b-primary-50); color: var(--b-primary-600); }
.l-trio__icon .i { width: 22px; height: 22px; }
.l-trio p { margin: 0; color: var(--b-fg-muted); padding-top: 10px; }
.l-trio p strong { color: var(--b-fg); font-weight: 700; }

/* ═══ Device (tablet + celular) ════════════════════════════════ */
.l-pwa { display: grid; gap: var(--b-space-10); align-items: center; }
@media (min-width: 1024px) { .l-pwa { grid-template-columns: 5fr 7fr; gap: var(--b-space-12); } }
.l-device { position: relative; padding: 0 12% 10% 0; }
.l-device__tablet { background: var(--b-fg); padding: 10px; border-radius: var(--b-radius-xl); box-shadow: var(--b-shadow-4); }
.l-device__tablet img { border-radius: var(--b-radius-md); }
.l-device__phone { position: absolute; right: 0; bottom: 0; width: 30%; background: var(--b-fg); padding: 5px; border-radius: var(--b-radius-lg); box-shadow: var(--b-shadow-4); }
.l-device__phone img { border-radius: 12px; }

/* ═══ CTA final + footer ═══════════════════════════════════════ */
.l-cta { text-align: center; }
.l-cta__logo { width: 64px; margin: 0 auto var(--b-space-6); }
.l-cta .l-lead { color: var(--l-band-dark-muted); margin: var(--b-space-4) auto 0; }
.l-cta .row { justify-content: center; margin-top: var(--b-space-8); }
.l-footer { margin-top: var(--b-space-16); padding-top: var(--b-space-6); border-top: 1px solid var(--b-neutral-700); display: flex; flex-wrap: wrap; gap: var(--b-space-4); justify-content: space-between; align-items: center; font-size: var(--b-font-size-sm); color: var(--l-band-dark-muted); }
.l-footer img { width: 112px; }
.l-footer a { color: inherit; }

/* ═══ Mocks das telas (HTML, no lugar de screenshots) ══════════ */
.mock { padding: var(--b-space-5); text-align: left; background: var(--b-bg); min-height: 260px; }
.mock__head { display: flex; justify-content: space-between; align-items: center; gap: var(--b-space-3); margin-bottom: var(--b-space-4); font-weight: 800; font-size: var(--b-font-size-lg); }
.mock__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--b-space-3); }
.mock__card { border: 1px solid var(--b-border); border-radius: var(--b-radius-md); padding: var(--b-space-3); background: var(--b-bg-elevated); font-size: var(--b-font-size-sm); display: grid; gap: 4px; justify-items: start; }
.mock__card b { font-size: var(--b-font-size-md); }
.mock__card small { color: var(--b-fg-muted); }
.mock__card--ok { border-color: var(--b-success-500); }
.mock__total { font-size: var(--b-font-size-2xl); font-weight: 800; }
.badge--brand { background: var(--b-primary-50); color: var(--b-primary-700); }
.l-role__visual .l-frame { box-shadow: var(--b-shadow-2); }
.l-role__visual .mock { min-height: 0; }
.l-device__tablet .mock, .l-device__phone .mock { border-radius: var(--b-radius-md); min-height: 0; }
.l-device__tablet .mock { aspect-ratio: 16 / 10; overflow: hidden; }
.l-device__phone .mock { aspect-ratio: 9 / 19; padding: 8px; display: grid; gap: 6px; align-content: start; overflow: hidden; border-radius: 12px; }
.l-device__phone .mock__card { padding: 6px; font-size: 10px; }
.l-device__phone .mock__card b { font-size: 11px; }
.l-device__phone .badge { font-size: 9px; padding: 1px 5px; }

/* ═══ Vídeo de apresentação (loop mudo) ════════════════════════ */
.l-video { position: relative; border-radius: var(--b-radius-lg); overflow: hidden; border: 1px solid var(--b-border); box-shadow: var(--b-shadow-3); background: var(--b-bg); aspect-ratio: 16 / 9; }
.l-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.l-video__toggle { position: absolute; right: var(--b-space-3); bottom: var(--b-space-3); width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--b-border); border-radius: var(--b-radius-full); background: color-mix(in srgb, var(--b-bg) 85%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--b-fg); cursor: pointer; transition: background-color var(--l-dur-micro) var(--l-ease-smooth); }
.l-video__toggle:hover { background: var(--b-bg-elevated); }
.l-video__toggle:focus-visible { outline: 2px solid var(--b-border-focus); outline-offset: 2px; }

/* Cards "antes" sobre faixa areia: sobe um tom para não sumir no fundo */
.band--alt .l-oldnew__card--old { background: var(--b-bg); }
.l-video__som { position: absolute; left: var(--b-space-3); bottom: var(--b-space-3); display: inline-flex; align-items: center; gap: var(--b-space-2); min-height: 44px; padding: 0 var(--b-space-4); border: 0; border-radius: var(--b-radius-full); background: var(--b-primary-600); color: var(--b-fg-inverted); font: 700 var(--b-font-size-sm)/1 var(--b-font-sans); cursor: pointer; box-shadow: var(--b-shadow-2); transition: background-color var(--l-dur-micro) var(--l-ease-smooth), transform var(--l-dur-micro) var(--l-ease-smooth); }
.l-video__som:hover { background: var(--b-primary-700); }
.l-video__som:active { transform: scale(.98); }
.l-video__som:focus-visible { outline: 2px solid var(--b-border-focus); outline-offset: 2px; }
.l-video__som[aria-pressed="true"] { background: color-mix(in srgb, var(--b-bg) 85%, transparent); color: var(--b-fg); border: 1px solid var(--b-border); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.l-video__som[aria-pressed="true"] span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.l-video__som[aria-pressed="true"] { padding: 0; width: 44px; justify-content: center; }
@media (min-width: 1024px) { .l-video { border-radius: var(--b-radius-xl); } }
.l-footer__credito { flex-basis: 100%; font-size: var(--b-font-size-xs); }